@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.51

package/ux-demo/recipes/list-workspace-states.tsx

@@ -1,46 +1,51 @@
 import '@kerfjs/ui/layout.css';
-import './list-workspace-states.css';
 
 import { EmptyState } from '@kerfjs/ui/empty-state';
+import { ListItem } from '@kerfjs/ui/list-item';
 import { LoadingSpinner } from '@kerfjs/ui/loading-spinner';
 import { Pane } from '@kerfjs/ui/pane';
+import { Row } from '@kerfjs/ui/row';
 import { StateBanner } from '@kerfjs/ui/state-banner';
 import { Toolbar } from '@kerfjs/ui/toolbar';
 import { ToolbarControlGroup } from '@kerfjs/ui/toolbar-control-group';
 import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
 
-import {
-  RecipeMutedText,
-  RecipeOwnershipNote,
-  RecipeRoot,
-} from './recipe-root.js';
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
 
 type ListState = 'loading' | 'empty' | 'populated' | 'stale' | 'error';
 const items = [
-  'Audit keyboard focus order',
-  'Verify 200% zoom layout',
-  'Publish package migration notes',
-];
+  ['Audit keyboard focus order', 'In review · Mara'],
+  ['Verify 200% zoom layout', 'Ready · Sam'],
+  ['Publish package migration notes', 'Draft · Inez'],
+] as const;
+
+export const presentation: RecipePresentation = {
+  viewport: {
+    layout: 'grid',
+    width: 'full',
+    minHeight: 'medium',
+    frame: 'solid',
+    surface: 'default',
+    overflow: 'hidden',
+    shadow: true,
+  },
+  note: 'The recipe owns feedback placement and stable content. The app owns fetching, cache age, retry policy, and domain rows.',
+};
 
 export const createRecipe: RecipeFactory = (announce) => {
   const state = signal<ListState>('loading');
   const populated = () => (
-    <ul class="recipe-list__items" aria-label="Release tasks">
-      {items.map((item, index) => (
-        <li>
-          <strong>{item}</strong>
-          <RecipeMutedText>
-            {index === 0
-              ? 'In review · Mara'
-              : index === 1
-                ? 'Ready · Sam'
-                : 'Draft · Inez'}
-          </RecipeMutedText>
-        </li>
+    <section aria-label="Release task list">
+      {items.map(([title, detail]) => (
+        <ListItem
+          action="recipe-action"
+          label={title}
+          description={detail}
+          rootAttributes={{ 'data-recipe-command': 'open-task' }}
+        />
       ))}
-    </ul>
+    </section>
   );
   const renderBody = () => {
     if (state.value === 'loading')
@@ -102,7 +107,7 @@ export const createRecipe: RecipeFactory = (announce) => {
             detail="Refreshing in the background."
             tone="warning"
             action={
-              <span class="kui-inline-metadata">
+              <Row gap="xs" vAlign="middle">
                 <LoadingSpinner label="Refreshing release tasks" />
                 <button
                   type="button"
@@ -111,7 +116,7 @@ export const createRecipe: RecipeFactory = (announce) => {
                 >
                   Finish refresh
                 </button>
-              </span>
+              </Row>
             }
           />
         )}
@@ -120,65 +125,60 @@ export const createRecipe: RecipeFactory = (announce) => {
     );
   };
   const render = () => (
-    <RecipeRoot
-      recipe="recipe-list-workspace-states"
-      dataAttributes={{ 'data-list-state': state.value }}
-    >
-      <div class="recipe-list">
-        <Pane
-          element="section"
-          contentClassName="recipe-list__body"
-          header={
-            <Toolbar
-              label="Release tasks"
-              dividerSides=""
-              leading={
-                <ToolbarText
-                  text="Release tasks"
-                  size="xlarge"
-                  id="recipe-list-title"
-                />
-              }
-              trailing={
-                <ToolbarControlGroup
-                  appearance="borderless"
-                  content="text"
-                  buttonAppearance="push"
-                >
-                  <button
-                    type="button"
-                    data-action="recipe-action"
-                    data-recipe-command="empty"
-                  >
-                    Clear
-                  </button>
-                  <button
-                    type="button"
-                    data-action="recipe-action"
-                    data-recipe-command="fail"
-                  >
-                    Simulate failure
-                  </button>
-                  <button
-                    type="button"
-                    data-action="recipe-action"
-                    data-recipe-command="refresh"
-                  >
-                    Refresh
-                  </button>
-                </ToolbarControlGroup>
-              }
+    <Pane
+      element="section"
+      label="Release tasks"
+      rootAttributes={{
+        'data-recipe': 'recipe-list-workspace-states',
+        'data-list-state': state.value,
+      }}
+      header={
+        <Toolbar
+          label="Release tasks"
+          dividerSides=""
+          responsive="stack"
+          responsiveAt="compact"
+          leading={
+            <ToolbarText
+              text="Release tasks"
+              size="xlarge"
+              id="recipe-list-title"
             />
           }
-        >
-          {renderBody()}
-          <RecipeOwnershipNote>
-            The recipe owns feedback placement and stable content. The app owns
-            fetching, cache age, retry policy, and domain rows.
-          </RecipeOwnershipNote>
-        </Pane>
-      </div>
-    </RecipeRoot>
+          trailing={
+            <ToolbarControlGroup
+              appearance="borderless"
+              content="text"
+              buttonAppearance="push"
+            >
+              <button
+                type="button"
+                data-action="recipe-action"
+                data-recipe-command="empty"
+              >
+                Clear
+              </button>
+              <button
+                type="button"
+                data-action="recipe-action"
+                data-recipe-command="fail"
+              >
+                Simulate failure
+              </button>
+              <button
+                type="button"
+                data-action="recipe-action"
+                data-recipe-command="refresh"
+              >
+                Refresh
+              </button>
+            </ToolbarControlGroup>
+          }
+        />
+      }
+    >
+      {renderBody()}
+    </Pane>
   );
   return {
     render,

package/ux-demo/recipes/loaders.ts

@@ -1,4 +1,4 @@
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
 
 export const recipeIds = [
   'recipe-app-shell',
@@ -17,7 +17,10 @@ export type RecipeId = (typeof recipeIds)[number];
 
 export const recipeLoaders: Record<
   RecipeId,
-  () => Promise<{ createRecipe: RecipeFactory }>
+  () => Promise<{
+    createRecipe: RecipeFactory;
+    presentation: RecipePresentation;
+  }>
 > = {
   'recipe-app-shell': () => import('./app-shell.js'),
   'recipe-navigation-sidebar': () => import('./navigation-sidebar.js'),

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

@@ -1,8 +1,9 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/select/register';
-import './loading-inspector.css';
 
 import { em } from '@kerfjs/ui/css-values';
+import { List } from '@kerfjs/ui/list';
+import { ListInsetText } from '@kerfjs/ui/list-inset-text';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
 import { Pane } from '@kerfjs/ui/pane';
@@ -10,19 +11,26 @@ 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 {
-  RecipeHeadingSummary,
-  RecipeOwnershipNote,
-  RecipeRoot,
-} from './recipe-root.js';
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
+
+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} />
@@ -40,159 +48,148 @@ export const createRecipe: RecipeFactory = (announce) => {
   const render = () => {
     const p = loading.value;
     return (
-      <RecipeRoot
-        recipe="recipe-loading-inspector"
-        measure="inspector"
-        dataAttributes={{ 'data-inspector-loading': String(p) }}
+      <Pane
+        element="section"
+        label="Ticket inspector"
+        rootAttributes={{
+          'data-recipe': 'recipe-loading-inspector',
+          'data-inspector-loading': String(p),
+        }}
+        header={
+          <>
+            <Toolbar
+              label="Ticket inspector"
+              dividerSides=""
+              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>
+              }
+            />
+            <ListInsetText sides="rl">
+              <Text variant="span" tone="quiet" id="recipe-inspector-summary">
+                {p ? (
+                  <Skeleton width={em(18)} />
+                ) : (
+                  'Restore keyboard focus after a dialog closes'
+                )}
+              </Text>
+            </ListInsetText>
+          </>
+        }
       >
-        <div class="recipe-inspector">
-          <Pane
-            element="section"
-            contentClassName="recipe-inspector__body"
-            header={
-              <>
-                <Toolbar
-                  label="Ticket inspector"
-                  dividerSides=""
-                  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>
-                  }
-                />
-                <RecipeHeadingSummary id="recipe-inspector-summary">
-                  {p ? (
-                    <Skeleton width={em(18)} />
-                  ) : (
-                    'Restore keyboard focus after a dialog closes'
-                  )}
-                </RecipeHeadingSummary>
-              </>
-            }
-          >
-            <section>
-              <ValueTable label="Ticket details">
-                <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}
-                />
-              </ValueTable>
-            </section>
-            <div class="recipe-inspector__controls">
-              <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'),
-                  },
-                ]}
-              />
-            </div>
-            <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}
-              />
-            </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')}
-              />
-            )}
-            <RecipeOwnershipNote>
-              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.
-            </RecipeOwnershipNote>
-          </Pane>
-        </div>
-      </RecipeRoot>
+        <section>
+          <ValueTable label="Ticket details">
+            <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}
+            />
+          </ValueTable>
+        </section>
+        <List gap="xs" controlInsets="rl">
+          <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(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}
+          />
+        </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')}
+          />
+        )}
+      </Pane>
     );
   };
   return {