@xemahq/app-ui

This package belongs to Layer 1 — it is a thin SDK composition over the Layer-1 @xemahq/ui-kernel, with no dependency on any Xema service or higher-layer package.

@xemahq/app-ui is the pinned UI surface a Xema custom-app code component (Wave 12) and an ejected app frontend (D19) draw with. It re-exports the shared kernel primitive / chrome / chart surface (@xemahq/ui-kernel/ui) as the ONE surface a server-compiled custom component may import, and adds a responsive AppShell. It re-implements nothing.

Why "pinned"

The custom-UI compiler (server-side esbuild) makes @xemahq/app-ui the single permitted external of an untrusted component bundle. Pinning @xemahq/app-ui therefore pins exactly the composed UI surface a component is allowed to use — which is what lets the compiled chunk be rendered safely in the opaque-origin iframe.

Usage

import { AppShell, Button, Card } from '@xemahq/app-ui';

export default function MyAppSurface() {
  return (
    <AppShell title="My App" actions={<Button size="sm">New</Button>}>
      <Card>…</Card>
    </AppShell>
  );
}

AppShell is responsive by construction (no fixed pixel width, flex-wrap header, reflows at 360 px) — the same D20 contract the custom-UI compiler enforces.

Exports

• . — the composed surface: everything from @xemahq/ui-kernel/ui plus AppShell / AppShellProps.