@kerfjs/ui 4.5.0-beta.1 → 5.0.0-beta.100

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

@@ -4,14 +4,30 @@ import '@kerfjs/ui/webawesome.css';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@awesome.me/webawesome/dist/components/input/input.js';
 import '@awesome.me/webawesome/dist/components/textarea/textarea.js';
-import './recipes.css';
 
-import { PanelHeader } from '@kerfjs/ui/panel-header';
+import { Spacer } from '@kerfjs/ui';
+import { List } from '@kerfjs/ui/list';
+import { ListInsetText } from '@kerfjs/ui/list-inset-text';
+import { Row } from '@kerfjs/ui/row';
 import { Select } from '@kerfjs/ui/select';
 import { StateBanner } from '@kerfjs/ui/state-banner';
+import { Text } from '@kerfjs/ui/text';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
 import { signal } from 'kerfjs';
 
-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: 'The recipe owns field, message, and action rhythm. The app owns validation rules, draft persistence, permissions, and transport.',
+};
 
 type ValueField = HTMLElement & { value: string };
 
@@ -38,63 +54,75 @@ export const createRecipe: RecipeFactory = (announce) => {
   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<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">
+      <List gap="l" controlInsets="tb">
+        {/* The title and its supporting line are one heading unit. */}
+        <List>
+          <Toolbar
+            label="Publish Workspace Update"
+            leading={
+              <ToolbarText
+                text="Publish Workspace Update"
+                size="xlarge"
+                id="recipe-composer-title"
+              />
+            }
+          />
+          <ListInsetText sides="rl">
+            <Text variant="span" tone="quiet" id="recipe-composer-summary">
+              Share a concise, actionable update with collaborators.
+            </Text>
+          </ListInsetText>
+        </List>
+        {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"
+          />
+        )}
+        <List gap="xs" controlInsets="rl">
+          <wa-input
+            name="recipe-title"
+            label="Update Title"
+            hint="Summarize the outcome in one line."
+            required
+            value={title.value}
+          />
+          <wa-textarea
+            name="recipe-body"
+            label="Details"
+            hint="Include decisions, owners, and the next checkpoint."
+            rows="5"
+            maxlength="400"
+            with-count
+            value={body.value}
+          />
+          <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' },
+            ]}
+          />
+        </List>
+        <Row gap="xs" wrap controlInsets="rl">
+          <Spacer flex />
           <wa-button
             appearance="outlined"
             data-action="recipe-action"
@@ -108,14 +136,10 @@ export const createRecipe: RecipeFactory = (announce) => {
             data-action="recipe-action"
             data-recipe-command="submit"
           >
-            Publish update
+            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>
+        </Row>
+      </List>
     </form>
   );
   return {

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

@@ -1,18 +1,29 @@
+import '@kerfjs/ui/surface-scaffold/register';
 import '@kerfjs/ui/layout.css';
+import '@kerfjs/ui/nav-stack.css';
+import '@kerfjs/ui/split-view.css';
 import '@kerfjs/ui/webawesome.css';
 import '@awesome.me/webawesome/dist/components/button/button.js';
 import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
-import './recipes.css';
 
-import { ListHeader } from '@kerfjs/ui/list-header';
+import { remify } from '@kerfjs/ui/css-values';
+import { deviceClass } from '@kerfjs/ui/device-class';
+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 { Row } from '@kerfjs/ui/row';
+import { Spacer } from '@kerfjs/ui/spacer';
+import { SplitView } from '@kerfjs/ui/split-view';
+import { DialogSurface } from '@kerfjs/ui/surface-scaffold';
+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 { FileText } from 'lucide';
+import { ChevronRight, FileText, X } from 'lucide';
 
-import type { RecipeFactory } from './types.js';
+import type { RecipeFactory, RecipePresentation } from './types.js';
 
 const records = {
   alpha: {
@@ -35,127 +46,224 @@ const records = {
   },
 } as const;
 
+type RecordId = keyof typeof records;
+
 interface RecipeDialogElement extends HTMLElement {
   open: boolean;
 }
 
+export const presentation: RecipePresentation = {
+  viewport: { layout: 'grid', width: 'full' },
+  note: 'On roomy devices the dialog body is a workbench: a full-height list sidebar with its own toolbar beside a full-height detail column that carries the primary title, close control, and record actions. Compact devices get a full-screen sheet that drills from the list into the detail. Web Awesome owns modal focus and Escape; DialogSurface owns dialog geometry; SplitView owns the panes and the compact drill-down. The app owns open state, selection, and record actions.',
+};
+
 export const createRecipe: RecipeFactory = (announce) => {
-  const selected = signal<keyof typeof records>('alpha');
+  const selected = signal<RecordId>('alpha');
+  // Compact devices drill from the list into the detail; this flag is the
+  // pushed detail view. Roomy devices show both panes side by side.
+  const detailOpen = signal(false);
   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"
+  const device = deviceClass();
+
+  const projectRows = (compact: boolean) => (
+    <section aria-label="Projects">
+      {Object.entries(records).map(([id, record]) => (
+        <ListItem
+          action="recipe-action"
+          itemId={id}
+          label={record.name}
+          description={`${record.owner} · ${record.state}`}
+          icon={<LucideIcon icon={FileText} name="file-text" />}
+          trailing={
+            compact ? (
+              <LucideIcon icon={ChevronRight} name="chevron-right" />
+            ) : undefined
+          }
+          selected={!compact && selected.value === id}
+          multiline
+        />
+      ))}
+    </section>
+  );
+
+  const recordActions = () => (
+    <Row gap="xs" wrap controlInsets="trbl">
+      <Spacer flex />
+      <wa-button
+        appearance="outlined"
         data-action="recipe-action"
-        data-recipe-command="open"
+        data-recipe-command="archive"
       >
-        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}
+        Archive
+      </wa-button>
+      <wa-button
+        variant="brand"
+        appearance="accent"
+        data-action="recipe-action"
+        data-recipe-command="open-record"
       >
-        <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>
-                }
+        Open Project
+      </wa-button>
+    </Row>
+  );
+
+  // Roomy: a workbench. The list is a full-height sidebar with its own top
+  // toolbar; the detail column carries the dialog's primary title, the close
+  // control, and the record actions, and runs the full dialog height too.
+  const sidebar = () => (
+    <Pane
+      label="Recent Projects"
+      header={
+        <Toolbar
+          label="Recent Projects"
+          leading={<ToolbarText text="Recent Projects" />}
+        />
+      }
+    >
+      <List controlInsets="tb">{projectRows(false)}</List>
+    </Pane>
+  );
+
+  const detailColumn = () => {
+    const record = records[selected.value];
+    return (
+      <Pane
+        label={record.name}
+        header={
+          <Toolbar
+            label="Project Details"
+            leading={
+              <ToolbarText
+                text={record.name}
+                size="xlarge"
+                id="recipe-project-title"
+                headingLevel={2}
               />
-              <div
-                class="recipe-list-detail__body kui-pane__content kui-content"
-                aria-live="polite"
+            }
+            trailing={
+              <ToolbarControlGroup appearance="borderless" single>
+                <button type="button" aria-label="Close" data-dialog="close">
+                  <LucideIcon icon={X} name="x" />
+                </button>
+              </ToolbarControlGroup>
+            }
+          />
+        }
+        footer={recordActions()}
+      >
+        <List controlInsets="tb">
+          <ValueTable label="Project Details">
+            <ValueTableRow label="Owner" value={record.owner} />
+            <ValueTableRow label="Status" value={record.state} />
+            <ValueTableRow label="Updated" value={record.updated} />
+          </ValueTable>
+        </List>
+      </Pane>
+    );
+  };
+
+  const compactDetail = () => {
+    const record = records[selected.value];
+    return (
+      <List>
+        <ValueTable label="Project Details">
+          <ValueTableRow label="Owner" value={record.owner} />
+          <ValueTableRow label="Status" value={record.state} />
+          <ValueTableRow label="Updated" value={record.updated} />
+        </ValueTable>
+      </List>
+    );
+  };
+
+  const render = () => {
+    const compact = device.value.compact;
+    return (
+      <section
+        data-recipe="recipe-list-detail-dialog"
+        aria-label="Project Details Dialog"
+      >
+        <Row hAlign="center">
+          <DialogSurface
+            size="large"
+            presentation={compact ? 'fullscreen' : 'modal'}
+            viewportGutter={remify(16)}
+            maxHeight="viewport"
+            bodyInset="none"
+            footerInset="comfortable"
+          >
+            <wa-button
+              variant="brand"
+              appearance="accent"
+              data-action="recipe-action"
+              data-recipe-command="open"
+            >
+              Open Project Details
+            </wa-button>
+            {compact ? (
+              <wa-dialog label="Project Details" open={open.value} with-footer>
+                <SplitView
+                  id="recipe-projects"
+                  label="Projects"
+                  compact
+                  detailActive={detailOpen.value}
+                  listTitle="Recent projects"
+                  detailTitle={records[selected.value].name}
+                  backLabel="Back to Projects"
+                  list={<List>{projectRows(true)}</List>}
+                  detail={compactDetail()}
+                />
+                <wa-button
+                  slot="footer"
+                  appearance="outlined"
+                  data-action="recipe-action"
+                  data-recipe-command="archive"
+                >
+                  Archive
+                </wa-button>
+                <wa-button
+                  slot="footer"
+                  variant="brand"
+                  appearance="accent"
+                  data-action="recipe-action"
+                  data-recipe-command="open-record"
+                >
+                  Open Project
+                </wa-button>
+              </wa-dialog>
+            ) : (
+              <wa-dialog
+                label="Project Details"
+                open={open.value}
+                without-header
               >
-                <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>
-  );
+                <SplitView
+                  id="recipe-projects"
+                  label="Projects"
+                  compact={false}
+                  listTitle="Recent projects"
+                  detailTitle={records[selected.value].name}
+                  list={sidebar()}
+                  detail={detailColumn()}
+                />
+              </wa-dialog>
+            )}
+          </DialogSurface>
+        </Row>
+      </section>
+    );
+  };
   return {
     render,
     action(command, element) {
+      if (command === 'nav-back') {
+        detailOpen.value = false;
+        announce('Back to projects');
+        return;
+      }
       const id = element.dataset.itemId;
       if (id && id in records) {
-        selected.value = id as keyof typeof records;
+        selected.value = id as RecordId;
+        detailOpen.value = true;
         announce(`Selected ${records[selected.value].name}`);
         return;
       }
@@ -168,14 +276,11 @@ export const createRecipe: RecipeFactory = (announce) => {
         dialog.open = true;
         return;
       }
-      if (command === 'close' && dialog) {
-        dialog.open = false;
-        return;
-      }
       announce(`${command} requested`);
     },
     afterHide() {
       open.value = false;
+      detailOpen.value = false;
     },
   };
 };