@kerfjs/ui 5.0.0-beta.9 → 5.0.0-beta.90

package/ux-demo/recipes/loading-inspector.tsx

@@ -1,20 +1,40 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/select/register';
-import './recipes.css';
 
+import { Row } from '@kerfjs/ui';
+import { em } from '@kerfjs/ui/css-values';
+import { List } from '@kerfjs/ui/list';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { Pane } from '@kerfjs/ui/pane';
 import { SegmentedControl } from '@kerfjs/ui/segmented-control';
 import { Select } from '@kerfjs/ui/select';
+import { Skeleton } from '@kerfjs/ui/skeleton';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Text } from '@kerfjs/ui/text';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
-import { Columns3, FileText, Inbox, List } from 'lucide';
+import { Columns3, FileText, Inbox, List as ListIcon } from 'lucide';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
 
-const icon = (node: Parameters<typeof LucideIcon>[0]['icon'], name: string) => <LucideIcon icon={node} name={name} />;
+export const presentation: RecipePresentation = {
+  viewport: {
+    width: 'medium',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: "Each value-bearing component's placeholder prop renders skeletons in its value slots while loading, so the recipe composes a faithful loading inspector from real chrome. The app owns the loading lifecycle and which values are still unknown.",
+};
+
+const icon = (node: Parameters<typeof LucideIcon>[0]['icon'], name: string) => (
+  <LucideIcon icon={node} name={name} />
+);
 
 /**
  * A record inspector whose per-record values load asynchronously. Every
@@ -27,45 +47,150 @@ export const createRecipe: RecipeFactory = (announce) => {
   const loading = signal(true);
   const render = () => {
     const p = loading.value;
-    return <section class="kui-recipe recipe-inspector kui-recipe__surface kui-pane" data-recipe="recipe-loading-inspector" data-inspector-loading={String(p)}>
-      <PanelHeader
-        title="Ticket · KF-2048"
-        titleId="recipe-inspector-title"
-        summary="Restore keyboard focus after a dialog closes"
-        summaryId="recipe-inspector-summary"
-        icon={icon(FileText, 'file-text')}
-        placeholder={p}
-        actions={<button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="toggle">{p ? 'Show loaded' : 'Show loading'}</button>}
-      />
-      <div class="recipe-inspector__body kui-pane__content kui-content">
+    return (
+      <Pane
+        element="section"
+        label="Ticket inspector"
+        rootAttributes={{
+          'data-recipe': 'recipe-loading-inspector',
+          'data-inspector-loading': String(p),
+        }}
+        header={
+          <>
+            <Toolbar
+              label="Ticket inspector"
+              responsive="wrap"
+              leading={
+                <>
+                  <ToolbarControlGroup appearance="borderless" single>
+                    {icon(FileText, 'file-text')}
+                  </ToolbarControlGroup>
+                  <ToolbarText
+                    text="Ticket · KF-2048"
+                    size="xlarge"
+                    id="recipe-inspector-title"
+                    placeholder={p}
+                  />
+                </>
+              }
+              trailing={
+                <ToolbarControlGroup
+                  appearance="borderless"
+                  content="text"
+                  single
+                >
+                  <button
+                    type="button"
+                    data-action="recipe-action"
+                    data-recipe-command="toggle"
+                  >
+                    {p ? 'Show loaded' : 'Show loading'}
+                  </button>
+                </ToolbarControlGroup>
+              }
+            />
+            <Row controlInsets="trbl">
+              <Text tone="quiet" id="recipe-inspector-summary">
+                {p ? (
+                  <Skeleton width={em(18)} />
+                ) : (
+                  'Restore keyboard focus after a dialog closes'
+                )}
+              </Text>
+            </Row>
+          </>
+        }
+      >
         <section>
           <ValueTable label="Ticket details">
-            <ValueTableRow label="Status" value="In review" icon={icon(Inbox, 'inbox')} placeholder={p} />
+            <ValueTableRow
+              label="Status"
+              value="In review"
+              icon={icon(Inbox, 'inbox')}
+              placeholder={p}
+            />
             <ValueTableRow label="Owner" value="Mara Lopez" placeholder={p} />
             <ValueTableRow label="Priority" value="High" placeholder={p} />
-            <ValueTableRow label="Updated" value="2 hours ago" placeholder={p} />
+            <ValueTableRow
+              label="Updated"
+              value="2 hours ago"
+              placeholder={p}
+            />
           </ValueTable>
         </section>
-        <Select name="recipe-inspector-status" value="review" label="Status" placeholder={p} choices={[
-          { value: 'review', label: 'In review' },
-          { value: 'ready', label: 'Ready' },
-          { value: 'done', label: 'Done' },
-        ]} />
-        <SegmentedControl id="recipe-inspector-view" label="Inspector view" value="details" appearance="toolbar" shape="pill" size="small" placeholder={p} choices={[
-          { value: 'details', label: 'Details', content: icon(List, 'list') },
-          { value: 'activity', label: 'Activity', content: icon(Columns3, 'columns-3') },
-          { value: 'files', label: 'Files', content: icon(FileText, 'file-text') },
-        ]} />
+        <List gap="xs" controlInsets="rl">
+          <Select
+            name="recipe-inspector-status"
+            value="review"
+            label="Status"
+            hint="Where this ticket sits in the review workflow."
+            placeholder={p}
+            choices={[
+              { value: 'review', label: 'In review' },
+              { value: 'ready', label: 'Ready' },
+              { value: 'done', label: 'Done' },
+            ]}
+          />
+          <SegmentedControl
+            id="recipe-inspector-view"
+            label="Inspector view"
+            value="details"
+            appearance="toolbar"
+            shape="pill"
+            size="small"
+            placeholder={p}
+            choices={[
+              {
+                value: 'details',
+                label: 'Details',
+                content: icon(ListIcon, 'list'),
+              },
+              {
+                value: 'activity',
+                label: 'Activity',
+                content: icon(Columns3, 'columns-3'),
+              },
+              {
+                value: 'files',
+                label: 'Files',
+                content: icon(FileText, 'file-text'),
+              },
+            ]}
+          />
+        </List>
         <section>
-          <ListItem action="recipe-action" itemId="reassign" label="Reassign ticket" icon={icon(Inbox, 'inbox')} placeholder={p} />
-          <ListItem action="recipe-action" itemId="watch" label="Watch for changes" placeholder={p} />
+          <ListItem
+            action="recipe-action"
+            itemId="reassign"
+            label="Reassign ticket"
+            icon={icon(Inbox, 'inbox')}
+            placeholder={p}
+          />
+          <ListItem
+            action="recipe-action"
+            itemId="watch"
+            label="Watch for changes"
+            placeholder={p}
+          />
         </section>
-        {p
-          ? <StateBanner tone="info" title="" detail="" icon={icon(FileText, 'file-text')} placeholder />
-          : <StateBanner tone="success" title="Up to date" detail="All checks passed on the latest revision." icon={icon(FileText, 'file-text')} />}
-        <p class="kui-recipe__ownership kui-content-item">Each value-bearing component's <code>placeholder</code> prop renders skeletons in its value slots while loading, so the recipe composes a faithful loading inspector from real chrome. The app owns the loading lifecycle and which values are still unknown.</p>
-      </div>
-    </section>;
+        {p ? (
+          <StateBanner
+            tone="info"
+            title="Up to date"
+            detail="All checks passed on the latest revision."
+            icon={icon(FileText, 'file-text')}
+            placeholder
+          />
+        ) : (
+          <StateBanner
+            tone="success"
+            title="Up to date"
+            detail="All checks passed on the latest revision."
+            icon={icon(FileText, 'file-text')}
+          />
+        )}
+      </Pane>
+    );
   };
   return {
     render,

package/ux-demo/recipes/mount-recipe.ts

@@ -1,5 +1,4 @@
 import { wireNavStack } from '@kerfjs/ui/wire-nav-stack';
-import { wireResizableRegions } from '@kerfjs/ui/wire-resizable-regions';
 import { delegate, mount } from 'kerfjs';
 import { delegateActions } from 'kerfjs/actions';
 
@@ -9,7 +8,10 @@ import type { RecipeController } from './types.js';
  * Copyable application boundary for a recipe. The caller owns one stable root
  * and retains the returned disposer for that root's lifetime.
  */
-export function mountRecipe(root: HTMLElement, controller: RecipeController): () => void {
+export function mountRecipe(
+  root: HTMLElement,
+  controller: RecipeController,
+): () => void {
   const stopMount = mount(root, controller.render);
   const stopActions = delegateActions(root, 'click', {
     'recipe-action': (_event, element) => {
@@ -17,21 +19,37 @@ export function mountRecipe(root: HTMLElement, controller: RecipeController): ()
       controller.action(target.dataset.recipeCommand ?? '', target);
     },
   });
-  const dispatchChange = (_event: Event, element: Element) => controller.change?.(element as HTMLElement);
-  const stopChanges = delegate(root, 'change', 'wa-select, wa-input, wa-textarea', dispatchChange);
-  const stopInputs = delegate(root, 'input', 'wa-input, wa-textarea', dispatchChange);
-  const stopDialogs = delegate(root, 'wa-after-hide', 'wa-dialog', (_event, element) => controller.afterHide?.(element as HTMLElement));
-  const stopResize = wireResizableRegions(root, {
-    onCommit: ({ id, size }) => controller.resize?.(id, size),
+  const dispatchChange = (_event: Event, element: Element) =>
+    controller.change?.(element as HTMLElement);
+  const stopChanges = delegate(
+    root,
+    'change',
+    'wa-select, wa-input, wa-textarea',
+    dispatchChange,
+  );
+  const stopInputs = delegate(
+    root,
+    'input',
+    'wa-input, wa-textarea',
+    dispatchChange,
+  );
+  const stopDialogs = delegate(
+    root,
+    'wa-after-hide',
+    'wa-dialog',
+    (_event, element) => controller.afterHide?.(element as HTMLElement),
+  );
+  const stopNav = wireNavStack(root, {
+    onBack: () => controller.action('nav-back', root),
   });
-  const stopNav = wireNavStack(root, { onBack: () => controller.action('nav-back', root) });
+  const stopWire = controller.wire?.(root);
 
   let disposed = false;
   return () => {
     if (disposed) return;
     disposed = true;
+    stopWire?.();
     stopNav();
-    stopResize();
     stopDialogs();
     stopInputs();
     stopChanges();

package/ux-demo/recipes/navigation-sidebar.tsx

@@ -1,26 +1,152 @@
 import '@kerfjs/ui/layout.css';
-import './recipes.css';
 
+import { ContentItem } from '@kerfjs/ui/content-item';
+import { List } from '@kerfjs/ui/list';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+import { Pane } from '@kerfjs/ui/pane';
+import { Text } from '@kerfjs/ui/text';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { signal } from 'kerfjs';
 import { Folder, Inbox, Plus, Settings, Users } from 'lucide';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'compact',
+    minHeight: 'medium',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.',
+};
 
 export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal('inbox');
   const expanded = signal(true);
-  const render = () => <aside class="kui-recipe recipe-sidebar kui-recipe__surface kui-pane" data-recipe="recipe-navigation-sidebar">
-    <div class="recipe-sidebar__body kui-pane__content kui-content">
-      <section><ListHeader label="Workspace" count={3} countLabel="3 workspaces" action="recipe-action" actionLabel="Add workspace item" actionIcon={<LucideIcon icon={Plus} name="plus" />} /><ListItem action="recipe-action" itemId="inbox" label="Inbox" icon={<LucideIcon icon={Inbox} name="inbox" />} trailing={<span>12</span>} selected={selected.value === 'inbox'} /><ListItem action="recipe-action" itemId="shared" label="Shared with me" icon={<LucideIcon icon={Users} name="users" />} selected={selected.value === 'shared'} /><ListItem action="recipe-action" itemId="drafts" label="Drafts without an icon" selected={selected.value === 'drafts'} /></section>
-      <section><ListHeader label="Projects" toggle action="recipe-action" expanded={expanded.value} />{expanded.value && <><ListItem action="recipe-action" itemId="design" label="Design system rollout across desktop and tablet" icon={<LucideIcon icon={Folder} name="folder" />} selected={selected.value === 'design'} multiline /><ListItem action="recipe-action" itemId="archive" label="Archived" disabled title="Available to administrators" /><div class="kui-content-item"><strong>Quarterly goal</strong><p class="kui-recipe__muted">Ship accessible navigation patterns to every workspace.</p></div></>}</section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns pane, content-item, and toolbar geometry. The app owns routes, permissions, labels, and disclosure state.</p>
-    </div>
-    <footer class="recipe-sidebar__footer kui-pane__footer"><Toolbar label="Sidebar actions" divider={false} leading={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Add project" data-action="recipe-action" data-recipe-command="add"><LucideIcon icon={Plus} name="plus" /></button></ToolbarControlGroup>} trailing={<ToolbarControlGroup appearance="borderless" single><button type="button" aria-label="Workspace settings" data-action="recipe-action" data-recipe-command="settings"><LucideIcon icon={Settings} name="settings" /></button></ToolbarControlGroup>} /></footer>
-  </aside>;
-  return { render, action(command, element) { if (element.matches('.kui-list-header__toggle')) { expanded.value = !expanded.value; announce(expanded.value ? 'Projects expanded' : 'Projects collapsed'); return; } const id = element.dataset.itemId; if (id) selected.value = id; announce(id ? `Selected ${id}` : `${command} requested`); } };
+  const render = () => (
+    <Pane
+      element="aside"
+      label="Workspace navigation"
+      rootAttributes={{ 'data-recipe': 'recipe-navigation-sidebar' }}
+      footer={
+        <Toolbar
+          label="Sidebar actions"
+          dividerSides="t"
+          leading={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Add project"
+                data-action="recipe-action"
+                data-recipe-command="add"
+              >
+                <LucideIcon icon={Plus} name="plus" />
+              </button>
+            </ToolbarControlGroup>
+          }
+          trailing={
+            <ToolbarControlGroup appearance="borderless" single>
+              <button
+                type="button"
+                aria-label="Workspace settings"
+                data-action="recipe-action"
+                data-recipe-command="settings"
+              >
+                <LucideIcon icon={Settings} name="settings" />
+              </button>
+            </ToolbarControlGroup>
+          }
+        />
+      }
+    >
+      <section>
+        <ListHeader
+          label="Workspace"
+          count={3}
+          countLabel="3 workspaces"
+          action="recipe-action"
+          actionLabel="Add workspace item"
+          actionIcon={<LucideIcon icon={Plus} name="plus" />}
+        />
+        <ListItem
+          action="recipe-action"
+          itemId="inbox"
+          label="Inbox"
+          icon={<LucideIcon icon={Inbox} name="inbox" />}
+          trailing={<span>12</span>}
+          selected={selected.value === 'inbox'}
+        />
+        <ListItem
+          action="recipe-action"
+          itemId="shared"
+          label="Shared with me"
+          icon={<LucideIcon icon={Users} name="users" />}
+          selected={selected.value === 'shared'}
+        />
+        <ListItem
+          action="recipe-action"
+          itemId="drafts"
+          label="Drafts without an icon"
+          selected={selected.value === 'drafts'}
+        />
+      </section>
+      <section>
+        <ListHeader
+          label="Projects"
+          toggle
+          action="recipe-action"
+          expanded={expanded.value}
+        />
+        {expanded.value && (
+          <>
+            <ListItem
+              action="recipe-action"
+              itemId="design"
+              label="Design system rollout across desktop and tablet"
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              selected={selected.value === 'design'}
+              multiline
+            />
+            <ListItem
+              action="recipe-action"
+              itemId="archive"
+              label="Archived"
+              disabled
+              title="Available to administrators"
+            />
+            <ContentItem>
+              <List gap="2xs">
+                <Text variant="span">
+                  <strong>Quarterly goal</strong>
+                </Text>
+                <Text variant="span" tone="quiet" size="compact">
+                  Ship accessible navigation patterns to every workspace.
+                </Text>
+              </List>
+            </ContentItem>
+          </>
+        )}
+      </section>
+    </Pane>
+  );
+  return {
+    render,
+    action(command, element) {
+      if (element.matches('.kui-list-header__toggle')) {
+        expanded.value = !expanded.value;
+        announce(expanded.value ? 'Projects expanded' : 'Projects collapsed');
+        return;
+      }
+      const id = element.dataset.itemId;
+      if (id) selected.value = id;
+      announce(id ? `Selected ${id}` : `${command} requested`);
+    },
+  };
 };

package/ux-demo/recipes/navigation-stack.tsx

@@ -1,16 +1,32 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/nav-stack.css';
 import '@kerfjs/ui/toolbar-text.css';
-import './recipes.css';
 
+import { ContentItem } from '@kerfjs/ui/content-item';
+import { List } from '@kerfjs/ui/list';
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
 import { NavStack, type NavStackView } from '@kerfjs/ui/nav-stack';
+import { Row } from '@kerfjs/ui/row';
+import { Text } from '@kerfjs/ui/text';
 import { signal } from 'kerfjs';
 import { ChevronRight, FileText, Folder } from 'lucide';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'compact',
+    height: 'tall',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns the stack as a signal of views and pushes/pops it; NavStack renders the stack and wireNavStack slides the content and settles the chrome. The app owns selection, data, and routing.',
+};
 
 interface LibraryItem {
   id: string;
@@ -19,41 +35,80 @@ interface LibraryItem {
 }
 
 const ITEMS: LibraryItem[] = [
-  { id: 'tokens', label: 'Design tokens', detail: 'Semantic color, spacing, and radius scales shared across every surface.' },
-  { id: 'controls', label: 'Toolbar controls', detail: 'Control groups and segmented controls with their hover and pressed contracts.' },
-  { id: 'layouts', label: 'App layouts', detail: 'Navigation stacks, split views, workbench, and bottom-tab scaffolds.' },
+  {
+    id: 'tokens',
+    label: 'Design tokens',
+    detail:
+      'Semantic color, spacing, and radius scales shared across every surface.',
+  },
+  {
+    id: 'controls',
+    label: 'Toolbar controls',
+    detail:
+      'Control groups and segmented controls with their hover and pressed contracts.',
+  },
+  {
+    id: 'layouts',
+    label: 'App layouts',
+    detail:
+      'Navigation stacks, split views, workbench, and bottom-tab scaffolds.',
+  },
 ];
 
 export const createRecipe: RecipeFactory = (announce) => {
   const listView = (): NavStackView => ({
     key: 'library',
-    title: 'Library',
-    content: <div class="recipe-navstack__view kui-pane__content kui-content">
-      <section>
-        <ListHeader label="Components" />
-        {ITEMS.map((item) => <ListItem action="recipe-action" itemId={item.id} label={item.label} icon={<LucideIcon icon={Folder} name="folder" />} trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />} />)}
-      </section>
-      <p class="kui-recipe__ownership kui-content-item">The recipe owns the stack as a signal of views and pushes/pops it; `NavStack` renders the stack and `wireNavStack` slides the content and settles the chrome. The app owns selection, data, and routing.</p>
-    </div>,
+    toolbar: { title: 'Library' },
+    content: (
+      <List>
+        <section>
+          <ListHeader label="Components" />
+          {ITEMS.map((item) => (
+            <ListItem
+              action="recipe-action"
+              itemId={item.id}
+              label={item.label}
+              icon={<LucideIcon icon={Folder} name="folder" />}
+              trailing={<LucideIcon icon={ChevronRight} name="chevron-right" />}
+            />
+          ))}
+        </section>
+      </List>
+    ),
   });
 
   const detailView = (item: LibraryItem): NavStackView => ({
     key: item.id,
-    title: item.label,
-    content: <div class="recipe-navstack__view kui-pane__content kui-content">
-      <div class="kui-content-item">
-        <LucideIcon icon={FileText} name="file-text" />
-        <strong>{item.label}</strong>
-        <p class="kui-recipe__muted">{item.detail}</p>
-      </div>
-    </div>,
+    toolbar: { title: item.label },
+    content: (
+      <List controlInsets="t">
+        <ContentItem>
+          <Row gap="xs">
+            <LucideIcon icon={FileText} name="file-text" />
+            <List gap="2xs">
+              <Text variant="span">
+                <strong>{item.label}</strong>
+              </Text>
+              <Text variant="span" tone="quiet" size="compact">
+                {item.detail}
+              </Text>
+            </List>
+          </Row>
+        </ContentItem>
+      </List>
+    ),
   });
 
   const views = signal<NavStackView[]>([listView()]);
 
-  const render = () => <section class="kui-recipe recipe-navstack kui-recipe__surface" data-recipe="recipe-navigation-stack">
-    <div class="recipe-navstack__stage"><NavStack id="recipe-nav" label="Component library" views={views.value} /></div>
-  </section>;
+  const render = () => (
+    <section
+      data-recipe="recipe-navigation-stack"
+      aria-label="Component library"
+    >
+      <NavStack id="recipe-nav" label="Component library" views={views.value} />
+    </section>
+  );
 
   return {
     render,

package/ux-demo/recipes/types.ts

@@ -1,3 +1,4 @@
+import type { CatalogExampleViewport } from '@kerfjs/ui/catalog';
 import type { SafeHtml } from 'kerfjs';
 
 export interface RecipeController {
@@ -5,7 +6,27 @@ export interface RecipeController {
   action(command: string, element: HTMLElement): void;
   change?(element: HTMLElement): void;
   afterHide?(element: HTMLElement): void;
-  resize?(id: string, size: number): void;
+  /**
+   * Install any imperative wiring the recipe owns on its mounted root (e.g.
+   * `wireSidebar` for a collapsible rail/drawer), returning a disposer. The
+   * application boundary calls it once per mount and disposes it on teardown.
+   */
+  wire?(root: HTMLElement): () => void;
 }
 
-export type RecipeFactory = (announce: (message: string) => void) => RecipeController;
+export type RecipeFactory = (
+  announce: (message: string) => void,
+) => RecipeController;
+
+/**
+ * Catalog-only presentation for one recipe. The UX catalog frames the recipe in
+ * a `CatalogExample` viewport and shows `note` when recipe notes are toggled on;
+ * an application that copies the recipe ignores this export and mounts the
+ * controller into its own container.
+ */
+export interface RecipePresentation {
+  /** Catalog-owned specimen frame: width, height, surface, and border. */
+  viewport?: CatalogExampleViewport;
+  /** Ownership note: what the recipe owns versus what the application owns. */
+  note: string;
+}