@kerfjs/ui 5.0.0-beta.17 → 5.0.0-beta.21

package/ux-demo/recipes/composer-form.tsx

@@ -15,8 +15,13 @@ import type { RecipeFactory } from './types.js';
 
 type ValueField = HTMLElement & { value: string };
 
-const syncControlledFieldValues = (action: HTMLElement, values: Record<string, string>) => {
-  const form = action.closest<HTMLElement>('[data-recipe="recipe-composer-form"]');
+const syncControlledFieldValues = (
+  action: HTMLElement,
+  values: Record<string, string>,
+) => {
+  const form = action.closest<HTMLElement>(
+    '[data-recipe="recipe-composer-form"]',
+  );
   if (!form) return;
   for (const [name, value] of Object.entries(values)) {
     const field = form.querySelector<ValueField>(`[name="${name}"]`);
@@ -26,20 +31,93 @@ const syncControlledFieldValues = (action: HTMLElement, values: Record<string, s
 
 export const createRecipe: RecipeFactory = (announce) => {
   const title = signal('');
-  const body = signal('The tablet layout now keeps navigation, content, and inspector focus order aligned.');
+  const body = signal(
+    'The tablet layout now keeps navigation, content, and inspector focus order aligned.',
+  );
   const audience = signal('team');
   const status = signal<'idle' | 'error' | 'saved'>('idle');
-  const render = () => <form class="kui-recipe recipe-form kui-recipe__surface kui-content" data-recipe="recipe-composer-form" aria-labelledby="recipe-composer-title" aria-describedby="recipe-composer-summary" noValidate>
-    <PanelHeader title="Publish workspace update" titleId="recipe-composer-title" summary="Share a concise, actionable update with collaborators." summaryId="recipe-composer-summary" />
-    {status.value === 'error' && <StateBanner title="Add a title before publishing" detail="The update body and audience are preserved." tone="danger" urgency="alert" />}
-    {status.value === 'saved' && <StateBanner title="Update published" detail="The team audience can now read it." tone="success" />}
-    <div class="recipe-form__section recipe-form__fields">
-      <wa-input name="recipe-title" label="Update title" hint="Summarize the outcome in one line." required value={title.value}></wa-input>
-      <wa-textarea name="recipe-body" label="Details" hint="Include decisions, owners, and the next checkpoint." rows="5" maxlength="400" with-count value={body.value}></wa-textarea>
-      <Select name="recipe-audience" value={audience.value} label="Audience" choices={[{ value: 'team', label: 'Workspace team' }, { value: 'reviewers', label: 'Reviewers' }, { value: 'organization', label: 'Entire organization' }]} />
-    </div>
-    <footer class="recipe-form__section recipe-form__footer"><div class="recipe-form__actions kui-control-cluster"><wa-button appearance="outlined" data-action="recipe-action" data-recipe-command="reset">Reset</wa-button><wa-button variant="brand" appearance="accent" data-action="recipe-action" data-recipe-command="submit">Publish update</wa-button></div><p class="kui-recipe__ownership">The recipe owns field, message, and action rhythm. The app owns validation rules, draft persistence, permissions, and transport.</p></footer>
-  </form>;
+  const render = () => (
+    <form
+      class="kui-recipe recipe-form kui-recipe__surface kui-content"
+      data-recipe="recipe-composer-form"
+      aria-labelledby="recipe-composer-title"
+      aria-describedby="recipe-composer-summary"
+      noValidate
+    >
+      <PanelHeader
+        title="Publish workspace update"
+        titleId="recipe-composer-title"
+        summary="Share a concise, actionable update with collaborators."
+        summaryId="recipe-composer-summary"
+      />
+      {status.value === 'error' && (
+        <StateBanner
+          title="Add a title before publishing"
+          detail="The update body and audience are preserved."
+          tone="danger"
+          urgency="alert"
+        />
+      )}
+      {status.value === 'saved' && (
+        <StateBanner
+          title="Update published"
+          detail="The team audience can now read it."
+          tone="success"
+        />
+      )}
+      <div class="recipe-form__section recipe-form__fields">
+        <wa-input
+          name="recipe-title"
+          label="Update title"
+          hint="Summarize the outcome in one line."
+          required
+          value={title.value}
+        ></wa-input>
+        <wa-textarea
+          name="recipe-body"
+          label="Details"
+          hint="Include decisions, owners, and the next checkpoint."
+          rows="5"
+          maxlength="400"
+          with-count
+          value={body.value}
+        ></wa-textarea>
+        <Select<string>
+          name="recipe-audience"
+          value={audience.value}
+          label="Audience"
+          choices={[
+            { value: 'team', label: 'Workspace team' },
+            { value: 'reviewers', label: 'Reviewers' },
+            { value: 'organization', label: 'Entire organization' },
+          ]}
+        />
+      </div>
+      <footer class="recipe-form__section recipe-form__footer">
+        <div class="recipe-form__actions kui-control-cluster">
+          <wa-button
+            appearance="outlined"
+            data-action="recipe-action"
+            data-recipe-command="reset"
+          >
+            Reset
+          </wa-button>
+          <wa-button
+            variant="brand"
+            appearance="accent"
+            data-action="recipe-action"
+            data-recipe-command="submit"
+          >
+            Publish update
+          </wa-button>
+        </div>
+        <p class="kui-recipe__ownership">
+          The recipe owns field, message, and action rhythm. The app owns
+          validation rules, draft persistence, permissions, and transport.
+        </p>
+      </footer>
+    </form>
+  );
   return {
     render,
     action(command, element) {
@@ -47,17 +125,27 @@ export const createRecipe: RecipeFactory = (announce) => {
         title.value = '';
         body.value = '';
         status.value = 'idle';
-        syncControlledFieldValues(element, { 'recipe-title': title.value, 'recipe-body': body.value });
+        syncControlledFieldValues(element, {
+          'recipe-title': title.value,
+          'recipe-body': body.value,
+        });
         announce('Draft reset');
         return;
       }
-      if (command === 'submit') { status.value = title.value.trim() ? 'saved' : 'error'; announce(status.value === 'saved' ? 'Update published' : 'Title required'); }
+      if (command === 'submit') {
+        status.value = title.value.trim() ? 'saved' : 'error';
+        announce(
+          status.value === 'saved' ? 'Update published' : 'Title required',
+        );
+      }
     },
     change(element) {
-      const value = (element as HTMLElement & { value?: string | null }).value ?? '';
+      const value =
+        (element as HTMLElement & { value?: string | null }).value ?? '';
       if (element.getAttribute('name') === 'recipe-title') title.value = value;
       if (element.getAttribute('name') === 'recipe-body') body.value = value;
-      if (element.getAttribute('name') === 'recipe-audience') audience.value = value;
+      if (element.getAttribute('name') === 'recipe-audience')
+        audience.value = value;
     },
   };
 };

package/ux-demo/recipes/list-detail-dialog.tsx

@@ -15,9 +15,24 @@ import { FileText } from 'lucide';
 import type { RecipeFactory } from './types.js';
 
 const records = {
-  alpha: { name: 'Northstar migration', owner: 'Mara Chen', state: 'In review', updated: 'Today, 09:42' },
-  beta: { name: 'Tablet navigation', owner: 'Sam Rivera', state: 'Ready', updated: 'Yesterday, 16:20' },
-  gamma: { name: 'Contrast audit', owner: 'Inez Okafor', state: 'Blocked', updated: 'Monday, 11:05' },
+  alpha: {
+    name: 'Northstar migration',
+    owner: 'Mara Chen',
+    state: 'In review',
+    updated: 'Today, 09:42',
+  },
+  beta: {
+    name: 'Tablet navigation',
+    owner: 'Sam Rivera',
+    state: 'Ready',
+    updated: 'Yesterday, 16:20',
+  },
+  gamma: {
+    name: 'Contrast audit',
+    owner: 'Inez Okafor',
+    state: 'Blocked',
+    updated: 'Monday, 11:05',
+  },
 } as const;
 
 interface RecipeDialogElement extends HTMLElement {
@@ -27,15 +42,136 @@ interface RecipeDialogElement extends HTMLElement {
 export const createRecipe: RecipeFactory = (announce) => {
   const selected = signal<keyof typeof records>('alpha');
   const open = { value: false };
-  const render = () => <section class="kui-recipe kui-content" data-recipe="recipe-list-detail-dialog"><button class="kui-recipe__button kui-content-item" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="open">Open project details</button><p class="kui-recipe__ownership kui-content-item">Web Awesome owns modal focus and dismissal. The recipe owns header/body/list-detail anatomy; the app owns open state, selection, and policy.</p><wa-dialog class="recipe-dialog" label="Project details" without-header open={open.value}><div class="recipe-dialog__pane kui-pane"><div class="recipe-list-detail kui-pane__content"><nav class="recipe-list-detail__list kui-pane" aria-label="Projects"><ListHeader label="Recent projects" /><div class="kui-pane__content kui-content"><section>{Object.entries(records).map(([id, record]) => <ListItem action="recipe-action" itemId={id} label={record.name} selected={selected.value === id} multiline />)}</section></div></nav><section class="recipe-list-detail__detail kui-pane"><PanelHeader title="Project details" titleId="recipe-dialog-title" summary="Compare delivery state without leaving the workspace." summaryId="recipe-dialog-summary" icon={<LucideIcon icon={FileText} name="file-text" />} actions={<wa-button appearance="plain" data-action="recipe-action" data-recipe-command="close">Close</wa-button>} /><div class="recipe-list-detail__body kui-pane__content kui-content" aria-live="polite"><h3 class="recipe-list-detail__title kui-recipe__pane-title kui-content-item">{records[selected.value].name}</h3><ValueTable label="Project details"><ValueTableRow label="Owner" value={records[selected.value].owner} /><ValueTableRow label="Status" value={records[selected.value].state} /><ValueTableRow label="Updated" value={records[selected.value].updated} /></ValueTable><div class="recipe-list-detail__actions kui-control-cluster"><wa-button appearance="outlined" data-action="recipe-action" data-recipe-command="archive">Archive</wa-button><wa-button variant="brand" appearance="accent" data-action="recipe-action" data-recipe-command="open-record">Open project</wa-button></div></div></section></div></div></wa-dialog></section>;
+  const render = () => (
+    <section
+      class="kui-recipe kui-content"
+      data-recipe="recipe-list-detail-dialog"
+    >
+      <button
+        class="kui-recipe__button kui-content-item"
+        data-primary="true"
+        type="button"
+        data-action="recipe-action"
+        data-recipe-command="open"
+      >
+        Open project details
+      </button>
+      <p class="kui-recipe__ownership kui-content-item">
+        Web Awesome owns modal focus and dismissal. The recipe owns
+        header/body/list-detail anatomy; the app owns open state, selection, and
+        policy.
+      </p>
+      <wa-dialog
+        class="recipe-dialog"
+        label="Project details"
+        without-header
+        open={open.value}
+      >
+        <div class="recipe-dialog__pane kui-pane">
+          <div class="recipe-list-detail kui-pane__content">
+            <nav
+              class="recipe-list-detail__list kui-pane"
+              aria-label="Projects"
+            >
+              <ListHeader label="Recent projects" />
+              <div class="kui-pane__content kui-content">
+                <section>
+                  {Object.entries(records).map(([id, record]) => (
+                    <ListItem
+                      action="recipe-action"
+                      itemId={id}
+                      label={record.name}
+                      selected={selected.value === id}
+                      multiline
+                    />
+                  ))}
+                </section>
+              </div>
+            </nav>
+            <section class="recipe-list-detail__detail kui-pane">
+              <PanelHeader
+                title="Project details"
+                titleId="recipe-dialog-title"
+                summary="Compare delivery state without leaving the workspace."
+                summaryId="recipe-dialog-summary"
+                icon={<LucideIcon icon={FileText} name="file-text" />}
+                actions={
+                  <wa-button
+                    appearance="plain"
+                    data-action="recipe-action"
+                    data-recipe-command="close"
+                  >
+                    Close
+                  </wa-button>
+                }
+              />
+              <div
+                class="recipe-list-detail__body kui-pane__content kui-content"
+                aria-live="polite"
+              >
+                <h3 class="recipe-list-detail__title kui-recipe__pane-title kui-content-item">
+                  {records[selected.value].name}
+                </h3>
+                <ValueTable label="Project details">
+                  <ValueTableRow
+                    label="Owner"
+                    value={records[selected.value].owner}
+                  />
+                  <ValueTableRow
+                    label="Status"
+                    value={records[selected.value].state}
+                  />
+                  <ValueTableRow
+                    label="Updated"
+                    value={records[selected.value].updated}
+                  />
+                </ValueTable>
+                <div class="recipe-list-detail__actions kui-control-cluster">
+                  <wa-button
+                    appearance="outlined"
+                    data-action="recipe-action"
+                    data-recipe-command="archive"
+                  >
+                    Archive
+                  </wa-button>
+                  <wa-button
+                    variant="brand"
+                    appearance="accent"
+                    data-action="recipe-action"
+                    data-recipe-command="open-record"
+                  >
+                    Open project
+                  </wa-button>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </wa-dialog>
+    </section>
+  );
   return {
     render,
     action(command, element) {
       const id = element.dataset.itemId;
-      if (id && id in records) { selected.value = id as keyof typeof records; announce(`Selected ${records[selected.value].name}`); return; }
-      const dialog = element.closest('[data-recipe]')?.querySelector<RecipeDialogElement>('wa-dialog');
-      if (command === 'open' && dialog) { element.focus(); open.value = true; dialog.open = true; return; }
-      if (command === 'close' && dialog) { dialog.open = false; return; }
+      if (id && id in records) {
+        selected.value = id as keyof typeof records;
+        announce(`Selected ${records[selected.value].name}`);
+        return;
+      }
+      const dialog = element
+        .closest('[data-recipe]')
+        ?.querySelector<RecipeDialogElement>('wa-dialog');
+      if (command === 'open' && dialog) {
+        element.focus();
+        open.value = true;
+        dialog.open = true;
+        return;
+      }
+      if (command === 'close' && dialog) {
+        dialog.open = false;
+        return;
+      }
       announce(`${command} requested`);
     },
     afterHide() {

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

@@ -10,17 +10,174 @@ import { signal } from 'kerfjs';
 import type { RecipeFactory } from './types.js';
 
 type ListState = 'loading' | 'empty' | 'populated' | 'stale' | 'error';
-const items = ['Audit keyboard focus order', 'Verify 200% zoom layout', 'Publish package migration notes'];
+const items = [
+  'Audit keyboard focus order',
+  'Verify 200% zoom layout',
+  'Publish package migration notes',
+];
 
 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><span class="kui-recipe__muted">{index === 0 ? 'In review · Mara' : index === 1 ? 'Ready · Sam' : 'Draft · Inez'}</span></li>)}</ul>;
+  const populated = () => (
+    <ul class="recipe-list__items" aria-label="Release tasks">
+      {items.map((item, index) => (
+        <li>
+          <strong>{item}</strong>
+          <span class="kui-recipe__muted">
+            {index === 0
+              ? 'In review · Mara'
+              : index === 1
+                ? 'Ready · Sam'
+                : 'Draft · Inez'}
+          </span>
+        </li>
+      ))}
+    </ul>
+  );
   const renderBody = () => {
-    if (state.value === 'loading') return <EmptyState title="Loading release tasks" detail="The current workspace will appear when data is ready." busy action={<button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="load">Complete load</button>} />;
-    if (state.value === 'empty') return <EmptyState title="No release tasks" detail="Create the first task for this milestone." action={<button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="create">Create task</button>} />;
-    if (state.value === 'error') return <StateBanner title="Release tasks could not be refreshed" detail="Existing filters are preserved. Try again when the connection recovers." tone="danger" urgency="alert" action={<button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="retry">Retry</button>} />;
-    return <>{state.value === 'stale' && <StateBanner title="Showing saved results" detail="Refreshing in the background." tone="warning" action={<span class="kui-inline-metadata"><LoadingSpinner label="Refreshing release tasks" /><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="finish">Finish refresh</button></span>} />}{populated()}</>;
+    if (state.value === 'loading')
+      return (
+        <EmptyState
+          title="Loading release tasks"
+          detail="The current workspace will appear when data is ready."
+          busy
+          action={
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="load"
+            >
+              Complete load
+            </button>
+          }
+        />
+      );
+    if (state.value === 'empty')
+      return (
+        <EmptyState
+          title="No release tasks"
+          detail="Create the first task for this milestone."
+          action={
+            <button
+              class="kui-recipe__button"
+              data-primary="true"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="create"
+            >
+              Create task
+            </button>
+          }
+        />
+      );
+    if (state.value === 'error')
+      return (
+        <StateBanner
+          title="Release tasks could not be refreshed"
+          detail="Existing filters are preserved. Try again when the connection recovers."
+          tone="danger"
+          urgency="alert"
+          action={
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="retry"
+            >
+              Retry
+            </button>
+          }
+        />
+      );
+    return (
+      <>
+        {state.value === 'stale' && (
+          <StateBanner
+            title="Showing saved results"
+            detail="Refreshing in the background."
+            tone="warning"
+            action={
+              <span class="kui-inline-metadata">
+                <LoadingSpinner label="Refreshing release tasks" />
+                <button
+                  class="kui-recipe__button"
+                  type="button"
+                  data-action="recipe-action"
+                  data-recipe-command="finish"
+                >
+                  Finish refresh
+                </button>
+              </span>
+            }
+          />
+        )}
+        {populated()}
+      </>
+    );
+  };
+  const render = () => (
+    <section
+      class="kui-recipe recipe-list kui-recipe__surface kui-pane"
+      data-recipe="recipe-list-workspace-states"
+      data-list-state={state.value}
+    >
+      <PanelHeader
+        title="Release tasks"
+        titleId="recipe-list-title"
+        actions={
+          <div class="kui-control-cluster">
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="empty"
+            >
+              Clear
+            </button>
+            <button
+              class="kui-recipe__button"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="fail"
+            >
+              Simulate failure
+            </button>
+            <button
+              class="kui-recipe__button"
+              data-primary="true"
+              type="button"
+              data-action="recipe-action"
+              data-recipe-command="refresh"
+            >
+              Refresh
+            </button>
+          </div>
+        }
+      />
+      <div class="recipe-list__body kui-pane__content kui-content">
+        {renderBody()}
+        <p class="kui-recipe__ownership kui-content-item">
+          The recipe owns feedback placement and stable content. The app owns
+          fetching, cache age, retry policy, and domain rows.
+        </p>
+      </div>
+    </section>
+  );
+  return {
+    render,
+    action(command) {
+      const next: Record<string, ListState> = {
+        load: 'populated',
+        empty: 'empty',
+        create: 'populated',
+        fail: 'error',
+        retry: 'populated',
+        refresh: 'stale',
+        finish: 'populated',
+      };
+      if (command in next) state.value = next[command]!;
+      announce(`List state: ${state.value}`);
+    },
   };
-  const render = () => <section class="kui-recipe recipe-list kui-recipe__surface kui-pane" data-recipe="recipe-list-workspace-states" data-list-state={state.value}><PanelHeader title="Release tasks" titleId="recipe-list-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="empty">Clear</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="fail">Simulate failure</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="refresh">Refresh</button></div>} /><div class="recipe-list__body kui-pane__content kui-content">{renderBody()}<p class="kui-recipe__ownership kui-content-item">The recipe owns feedback placement and stable content. The app owns fetching, cache age, retry policy, and domain rows.</p></div></section>;
-  return { render, action(command) { const next: Record<string, ListState> = { load: 'populated', empty: 'empty', create: 'populated', fail: 'error', retry: 'populated', refresh: 'stale', finish: 'populated' }; if (command in next) state.value = next[command]!; announce(`List state: ${state.value}`); } };
 };

package/ux-demo/recipes/loaders.ts

@@ -13,9 +13,12 @@ export const recipeIds = [
   'recipe-collapsible-sidebar',
 ] as const;
 
-export type RecipeId = typeof recipeIds[number];
+export type RecipeId = (typeof recipeIds)[number];
 
-export const recipeLoaders: Record<RecipeId, () => Promise<{ createRecipe: RecipeFactory }>> = {
+export const recipeLoaders: Record<
+  RecipeId,
+  () => Promise<{ createRecipe: RecipeFactory }>
+> = {
   'recipe-app-shell': () => import('./app-shell.js'),
   'recipe-navigation-sidebar': () => import('./navigation-sidebar.js'),
   'recipe-workspace-header': () => import('./workspace-header.js'),