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

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

@@ -1,15 +1,15 @@
 import '@kerfjs/ui/layout.css';
 import '@kerfjs/ui/select/register';
-import './recipes.css';
+import './loading-inspector.css';
 
 import { em } from '@kerfjs/ui/css-values';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
+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';
@@ -17,6 +17,11 @@ import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
 import { Columns3, FileText, Inbox, List } from 'lucide';
 
+import {
+  RecipeHeadingSummary,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 const icon = (node: Parameters<typeof LucideIcon>[0]['icon'], name: string) => (
@@ -35,144 +40,159 @@ export const createRecipe: RecipeFactory = (announce) => {
   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)}
+      <RecipeRoot
+        recipe="recipe-loading-inspector"
+        measure="inspector"
+        dataAttributes={{ 'data-inspector-loading': String(p) }}
       >
-        <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"
+        <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' },
+                ]}
               />
-            </>
-          }
-          trailing={
-            <ToolbarControlGroup appearance="borderless" single>
-              <button
-                class="kui-recipe__button"
-                data-primary="true"
-                type="button"
-                data-action="recipe-action"
-                data-recipe-command="toggle"
-              >
-                {p ? 'Show loaded' : 'Show loading'}
-              </button>
-            </ToolbarControlGroup>
-          }
-        />
-        <Text class="kui-recipe__heading-summary" id="recipe-inspector-summary">
-          {p ? (
-            <Skeleton width={em(18)} />
-          ) : (
-            'Restore keyboard focus after a dialog closes'
-          )}
-        </Text>
-        <div class="recipe-inspector__body kui-pane__content kui-content">
-          <section>
-            <ValueTable label="Ticket details">
-              <ValueTableRow
-                label="Status"
-                value="In review"
+              <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}
               />
-              <ValueTableRow label="Owner" value="Mara Lopez" placeholder={p} />
-              <ValueTableRow label="Priority" value="High" placeholder={p} />
-              <ValueTableRow
-                label="Updated"
-                value="2 hours ago"
+              <ListItem
+                action="recipe-action"
+                itemId="watch"
+                label="Watch for changes"
                 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')}
-            />
-          )}
-          <Text 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.
-          </Text>
+            </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>
-      </section>
+      </RecipeRoot>
     );
   };
   return {

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

@@ -0,0 +1,12 @@
+.recipe-sidebar {
+  display: grid;
+  min-height: 32rem;
+}
+
+.recipe-sidebar__body {
+  min-height: 0;
+}
+
+.recipe-sidebar__footer {
+  border-block-start: 1px solid var(--kui-color-border);
+}

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

@@ -1,126 +1,137 @@
 import '@kerfjs/ui/layout.css';
-import './recipes.css';
+import './navigation-sidebar.css';
 
 import { ListHeader } from '@kerfjs/ui/list-header';
 import { ListItem } from '@kerfjs/ui/list-item';
 import { LucideIcon } from '@kerfjs/ui/lucide-icon';
-import { Text } from '@kerfjs/ui/text';
+import { Pane } from '@kerfjs/ui/pane';
 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 {
+  RecipeMutedText,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 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"
+    <RecipeRoot
+      element="aside"
+      recipe="recipe-navigation-sidebar"
+      measure="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>
-                <Text class="kui-recipe__muted">
-                  Ship accessible navigation patterns to every workspace.
-                </Text>
-              </div>
-            </>
-          )}
-        </section>
-        <Text 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.
-        </Text>
-      </div>
-      <footer class="recipe-sidebar__footer kui-pane__footer">
-        <Toolbar
-          label="Sidebar actions"
-          dividerSides=""
-          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>
+      <div class="recipe-sidebar">
+        <Pane
+          element="div"
+          contentClassName="recipe-sidebar__body"
+          footer={
+            <Toolbar
+              label="Sidebar actions"
+              dividerSides=""
+              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>
+        >
+          <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>
+                  <RecipeMutedText>
+                    Ship accessible navigation patterns to every workspace.
+                  </RecipeMutedText>
+                </div>
+              </>
+            )}
+          </section>
+          <RecipeOwnershipNote>
+            The recipe owns pane, content-item, and toolbar geometry. The app
+            owns routes, permissions, labels, and disclosure state.
+          </RecipeOwnershipNote>
+        </Pane>
+      </div>
+    </RecipeRoot>
   );
   return {
     render,

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

@@ -0,0 +1,12 @@
+.recipe-navstack {
+  display: flex;
+  flex-direction: column;
+}
+
+.recipe-navstack__stage {
+  height: 24rem;
+}
+
+.recipe-navstack__view {
+  padding-block: var(--kui-space-2xs);
+}