@adia-ai/web-modules 0.4.7 → 0.4.9

package/editor/editor-statusbar/editor-statusbar.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/editor/editor-toolbar/editor-toolbar.a2ui.json

@@ -29,6 +29,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "toolbar-action": {
         "description": "Bubbles when a child element with [data-toolbar-action] is clicked. Detail carries the action name from the clicked element's attribute.",

package/editor/editor-toolbar/editor-toolbar.d.ts

@@ -0,0 +1,39 @@
+/**
+ * `<editor-toolbar-ui>` — Module-tier editor toolbar — replaces legacy <header> chrome bar
+inside <editor-shell> per ADR-0023. Owns the [full-screen] reflected
+attribute (set when host enters focus mode), click-bubble for
+[data-toolbar-action] buttons, and slot vocabulary routing.
+
+Sits at the top of <editor-shell>. Authors compose actions + status
+via slot vocabulary. The host (<editor-shell>) reads either
+<editor-toolbar> or <header> via :is() selector for backwards compat.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/editor-toolbar
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export interface EditorToolbarToolbarActionEventDetail {
+  name: string;
+}
+
+export type EditorToolbarToolbarActionEvent = CustomEvent<EditorToolbarToolbarActionEventDetail>;
+
+export class UIEditorToolbar extends UIElement {
+  /** Reflected — set when editor is in distraction-free / focus mode. */
+  fullScreen: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIEditorToolbar, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'toolbar-action', listener: (ev: EditorToolbarToolbarActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/editor/index.d.ts

@@ -0,0 +1,5 @@
+export { EditorShell } from './editor-shell/editor-shell.js';
+export { EditorToolbar } from './editor-toolbar/editor-toolbar.js';
+export { EditorCanvas } from './editor-canvas/editor-canvas.js';
+export { EditorSidebar } from './editor-sidebar/editor-sidebar.js';
+export { isFocusInInput } from './utils.js';

package/editor/index.js

@@ -2,3 +2,4 @@ export { EditorShell } from './editor-shell/editor-shell.js';
 export { EditorToolbar } from './editor-toolbar/editor-toolbar.js';
 export { EditorCanvas } from './editor-canvas/editor-canvas.js';
 export { EditorSidebar } from './editor-sidebar/editor-sidebar.js';
+export { isFocusInInput } from './utils.js';

package/editor/utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * True when keyboard focus is currently inside a text-input surface
+ * (`<input>`, `<textarea>`, any `contenteditable` host, or an AdiaUI
+ * `<input-ui>` / `<textarea-ui>` / `<otp-input-ui>` / `<search-ui>`).
+ * Use this to guard global keyboard shortcuts so they don't fire while
+ * the user is typing.
+ */
+export function isFocusInInput(): boolean;

package/editor/utils.js

@@ -0,0 +1,47 @@
+/**
+ * Editor utilities — small helpers paired with the editor-shell cluster.
+ *
+ * Kept here (not in `@adia-ai/web-components/core`) because they're
+ * editor-cluster-shaped — they're useful when implementing the kind of
+ * keyboard model an editor app needs (panel-aware shortcuts that
+ * shouldn't fire while the user is typing). Core is for primitive
+ * authoring; this is for product-shell wiring.
+ */
+
+/**
+ * True when keyboard focus is currently inside a text-input surface
+ * (`<input>`, `<textarea>`, or any `contenteditable` host). Use this
+ * to guard global keyboard shortcuts so they don't fire while the user
+ * is typing.
+ *
+ * Works against the standard DOM `document.activeElement` + the
+ * `HTMLElement.isContentEditable` property, with the TypeScript cast
+ * boilerplate hidden:
+ *
+ *     // Before
+ *     const active = document.activeElement as HTMLElement | null;
+ *     if (active?.tagName === 'INPUT' || active?.isContentEditable) return;
+ *
+ *     // After
+ *     if (isFocusInInput()) return;
+ *
+ * Also recognizes the AdiaUI text-input primitives (`<input-ui>`,
+ * `<textarea-ui>`, `<otp-input-ui>`, `<search-ui>`) — they extend
+ * `UIFormElement` and host a focused native `<input>`/`<textarea>` in
+ * their light-DOM subtree, but a stricter check on `tagName` would miss
+ * focus that lands on the host element directly.
+ *
+ * @returns {boolean}
+ */
+export function isFocusInInput() {
+  const active = /** @type {HTMLElement | null} */ (document.activeElement);
+  if (!active) return false;
+  const tag = active.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA') return true;
+  if (active.isContentEditable) return true;
+  // AdiaUI text-input primitives — focus may land on the host element
+  // when the inner native input isn't yet mounted, or on the inner
+  // native input itself (caught above).
+  if (tag === 'INPUT-UI' || tag === 'TEXTAREA-UI' || tag === 'OTP-INPUT-UI' || tag === 'SEARCH-UI') return true;
+  return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-modules",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "AdiaUI composite custom elements — shell, chat, editor, runtime clusters built from @adia-ai/web-components primitives. Subpath exports per cluster.",
   "type": "module",
   "exports": {
@@ -11,7 +11,14 @@
     "./chat": "./chat/index.js",
     "./chat/*": "./chat/*/*.js",
     "./chat/*.css": "./chat/*/*.css",
-    "./editor": "./editor/index.js",
+    "./editor": {
+      "types": "./editor/index.d.ts",
+      "default": "./editor/index.js"
+    },
+    "./editor/utils": {
+      "types": "./editor/utils.d.ts",
+      "default": "./editor/utils.js"
+    },
     "./editor/*": "./editor/*/*.js",
     "./editor/*.css": "./editor/*/*.css",
     "./simple": "./simple/index.js",

package/runtime/a2ui-root/a2ui-root.a2ui.json

@@ -60,6 +60,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {
       "a2ui-action": {
         "description": "Fired when a child element with [data-action] is clicked. detail: { name, sourceComponentId, context }"

package/runtime/a2ui-root/a2ui-root.d.ts

@@ -0,0 +1,47 @@
+/**
+ * `<a2ui-root-ui>` — A2UI protocol surface. Connects to a stream source (SSE, WebSocket, JSONL, MCP) and renders A2UI messages as AdiaUI components via the `@adia-ai/a2ui-utils` renderer.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/a2ui-root
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export type A2UIRootA2uiActionEvent = CustomEvent<unknown>;
+export type A2UIRootA2uiClosedEvent = CustomEvent<unknown>;
+export type A2UIRootA2uiConnectedEvent = CustomEvent<unknown>;
+export type A2UIRootA2uiErrorEvent = CustomEvent<unknown>;
+export type A2UIRootA2uiMessageEvent = CustomEvent<unknown>;
+export type A2UIRootDocReplacedEvent = CustomEvent<unknown>;
+
+export class UIA2UIRoot extends UIElement {
+  /** True while the stream is connected and receiving messages. */
+  active: boolean;
+  /** Batch renderer updates via requestAnimationFrame for large fan-in. */
+  batch: boolean;
+  /** Author-driven mode — set to an array of A2UI messages and the renderer resets + replays them. No network/transport involvement. Setting to a new array triggers a full re-render. Use this for editors, previews, tests, and any static-doc authoring loop. When both `src` and `doc` are set, `doc` wins (the stream is not opened). Pass as a JS property; not reflected to an attribute. */
+  doc: unknown[];
+  /** True while the stream is connecting. */
+  loading: boolean;
+  /** Stream source URL (endpoint for SSE/WebSocket, file path for JSONL, tool-call target for MCP). */
+  src: string;
+  /** Stream transport to use. */
+  transport: 'sse' | 'ws' | 'websocket' | 'jsonl' | 'mcp';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIA2UIRoot, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'a2ui-action', listener: (ev: A2UIRootA2uiActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'a2ui-closed', listener: (ev: A2UIRootA2uiClosedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'a2ui-connected', listener: (ev: A2UIRootA2uiConnectedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'a2ui-error', listener: (ev: A2UIRootA2uiErrorEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'a2ui-message', listener: (ev: A2UIRootA2uiMessageEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'doc-replaced', listener: (ev: A2UIRootDocReplacedEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/runtime/gen-root/gen-root.a2ui.json

@@ -39,6 +39,11 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [
+      "chat-thread-ui",
+      "canvas-ui",
+      "inspector-ui"
+    ],
     "events": {},
     "examples": [],
     "keywords": [

package/runtime/gen-root/gen-root.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `<gen-root-ui>` — Composition shell for chat + canvas generative UI. Manages layout modes
+(chat-only / split / canvas-only) and delegates a unified API across
+child chat-ui, canvas-ui, and inspector-ui elements.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/gen-root
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export class UIGenRoot extends UIElement {
+  /** Show the inspector pane (for debugging generated A2UI). */
+  inspector: boolean;
+  /** Layout mode — chat-only, 50/50 split, or canvas-only. */
+  mode: 'chat' | 'split' | 'canvas';
+}

package/runtime/gen-root/gen-root.yaml

@@ -9,6 +9,12 @@ description: |
   (chat-only / split / canvas-only) and delegates a unified API across
   child chat-ui, canvas-ui, and inspector-ui elements.
 
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - chat-thread-ui
+  - canvas-ui
+  - inspector-ui
 props:
   mode:
     type: string

package/shell/admin-command/admin-command.a2ui.json

@@ -44,6 +44,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "interaction",
+    "composes": [],
     "events": {
       "command-select": {
         "description": "Forwarded from the inner <command-ui> when an option is chosen. Detail mirrors the inner event's detail.",

package/shell/admin-command/admin-command.d.ts

@@ -0,0 +1,50 @@
+/**
+ * `<admin-command-ui>` — Module-tier command palette wrapper — wraps a native <dialog> and the
+inner <command-ui>. Owns the keyboard shortcut listener, focus
+management, and dismiss handlers. Reflects [open].
+
+Sits inside <admin-shell> as a direct child. The host wires
+[data-command-trigger] elements to <admin-command>.show() via lookup.
+
+This is the bespoke web-component replacement for the legacy
+<dialog data-command> shape. <admin-shell> still recognizes the
+legacy shape via :is() selector. New code should prefer <admin-command>.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/admin-command
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export interface AdminCommandCommandSelectEventDetail {
+  value: string;
+}
+
+export type AdminCommandCommandSelectEvent = CustomEvent<AdminCommandCommandSelectEventDetail>;
+
+export class UIAdminCommand extends UIElement {
+  /** Reflected — set while the dialog is showing. Synced with both
+programmatic .show()/.hide() and native dialog close events
+(esc key, backdrop click).
+ */
+  open: boolean;
+  /** Keyboard shortcut binding. "cmd+k" responds only on Mac
+(metaKey); "ctrl+k" responds only when ctrlKey; "both" (default)
+responds to either, which is the canonical AdiaUI behavior for
+cross-platform Cmd+K affordance.
+ */
+  shortcut: 'both' | 'cmd+k' | 'ctrl+k';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAdminCommand, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'command-select', listener: (ev: AdminCommandCommandSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/shell/admin-content/admin-content.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/shell/admin-page/admin-page.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/shell/admin-page-body/admin-page-body.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/shell/admin-page-header/admin-page-header.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/shell/admin-scroll/admin-scroll.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/shell/admin-shell/admin-shell.a2ui.json

@@ -34,6 +34,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "command-select": {
         "description": "Forwarded from the command palette when an option is chosen.",

package/shell/admin-shell/admin-shell.d.ts

@@ -0,0 +1,49 @@
+/**
+ * `<admin-shell-ui>` — Behavior-only application shell. Wires sidebar toggles, resize handles,
+a Cmd+K command palette, and a ResizeObserver that drives responsive
+sidebar collapse. Author supplies the DOM (aside[data-sidebar], main,
+dialog[data-command]); admin-shell binds the interactions.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/admin-shell
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export interface AppShellCommandSelectEventDetail {
+  value: string;
+}
+
+export type AppShellCommandSelectEvent = CustomEvent<AppShellCommandSelectEventDetail>;
+export interface AppShellSidebarResizeEventDetail {
+  sidebar: string;
+  width: string;
+}
+
+export type AppShellSidebarResizeEvent = CustomEvent<AppShellSidebarResizeEventDetail>;
+export interface AppShellSidebarToggleEventDetail {
+  expanded: string;
+  sidebar: string;
+}
+
+export type AppShellSidebarToggleEvent = CustomEvent<AppShellSidebarToggleEventDetail>;
+
+export class UIAppShell extends UIElement {
+  /** Layout variant — default is bordered surface; rounded softens edges; borderless removes the outer chrome. */
+  mode: '' | 'rounded' | 'borderless';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAppShell, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'command-select', listener: (ev: AppShellCommandSelectEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sidebar-resize', listener: (ev: AppShellSidebarResizeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sidebar-toggle', listener: (ev: AppShellSidebarToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/shell/admin-sidebar/admin-sidebar.a2ui.json

@@ -54,6 +54,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {
       "sidebar-resize": {
         "description": "Bubbles when an active pointer-drag releases.",

package/shell/admin-sidebar/admin-sidebar.d.ts

@@ -0,0 +1,68 @@
+/**
+ * `<admin-sidebar-ui>` — Module-tier shell sidebar — owns resize, snap-to-collapsed, persistence,
+and the [collapsed] reflected attribute. Sits inside <admin-shell> as
+slot="leading" or slot="trailing". Authors compose chrome bars + content
+inside via slot vocabulary.
+
+This is the bespoke web-component replacement for the legacy
+<aside data-sidebar> shape. <admin-shell> still recognizes the legacy
+shape via :is() selector for backwards compat. New code should prefer
+<admin-sidebar>.
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/admin-sidebar
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export interface AdminSidebarSidebarResizeEventDetail {
+  name: string;
+  width: string;
+}
+
+export type AdminSidebarSidebarResizeEvent = CustomEvent<AdminSidebarSidebarResizeEventDetail>;
+export interface AdminSidebarSidebarToggleEventDetail {
+  expanded: string;
+  name: string;
+}
+
+export type AdminSidebarSidebarToggleEvent = CustomEvent<AdminSidebarSidebarToggleEventDetail>;
+
+export class UIAdminSidebar extends UIElement {
+  /** Reflected — set when the sidebar's measured width is at or below
+96px. Consumers query this to style "collapsed mode" without
+duplicating threshold math.
+ */
+  collapsed: boolean;
+  /** Opts in to programmatic collapse — toggle button wiring + the
+.toggle() / .collapse() / .expand() public methods.
+ */
+  collapsible: boolean;
+  /** Identifier for localStorage namespacing. Defaults to slot value
+("leading" or "trailing"). Override when running multiple sidebars
+with the same slot.
+ */
+  name: string;
+  /** Opts in to drag-to-resize behavior. Author supplies a child
+[data-resize] element as the drag handle.
+ */
+  resizable: boolean;
+  /** Reflected — set during an active pointer-drag on the resize handle.
+Useful for suppressing transitions while dragging.
+ */
+  resizing: boolean;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIAdminSidebar, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'sidebar-resize', listener: (ev: AdminSidebarSidebarResizeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'sidebar-toggle', listener: (ev: AdminSidebarSidebarToggleEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/shell/admin-statusbar/admin-statusbar.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/shell/admin-topbar/admin-topbar.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/simple/simple-content/simple-content.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "shells",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/simple/simple-hero/simple-hero.a2ui.json

@@ -24,6 +24,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "shells",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/simple/simple-shell/simple-shell.a2ui.json

@@ -34,6 +34,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "shells",
+    "composes": [],
     "events": {},
     "examples": [],
     "keywords": [

package/simple/simple-shell/simple-shell.d.ts

@@ -0,0 +1,29 @@
+/**
+ * `<simple-shell-ui>` — Module-tier minimal shell for marketing / landing / error pages.
+Behavior-only orchestrator with two reflected attributes — [centered]
+for vertical centering, [full-bleed] for dropping the max-width
+constraint.
+
+The 4th cluster in the bespoke shell family per ADR-0023, designed
+deliberately small (1 host + 2 CSS-only children) to demonstrate
+the pattern works without ceremony for thin clusters.
+
+Use cases: marketing splashes, error pages (404 / 500 / maintenance),
+thank-you pages, single-card flows (sign-in, password reset).
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/simple-shell
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../../web-components/core/element.js';
+
+export class UISimpleShell extends UIElement {
+  /** Reflected — vertically centers content in viewport. */
+  centered: boolean;
+}

package/theme/theme-panel/theme-panel.a2ui.json

@@ -89,6 +89,15 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "layout",
+    "composes": [
+      "segmented-ui",
+      "segment-ui",
+      "text-ui",
+      "button-ui",
+      "divider-ui",
+      "field-ui",
+      "slider-ui"
+    ],
     "events": {
       "theme-change": {
         "description": "Bubbles when any user-visible state changes (theme click, slider\ninput, preset click, scheme flip, reset). One event per change.\nNo event on auto-rehydrate-from-storage at boot.\n",