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

package/ux-demo/recipes/app-shell.tsx

@@ -1,11 +1,11 @@
 import '@kerfjs/ui/layout.css';
-import './recipes.css';
+import './app-shell.css';
 
 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 { ResizableRegion } from '@kerfjs/ui/resizable-region';
-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';
@@ -13,6 +13,11 @@ import { ValueTable, ValueTableRow } from '@kerfjs/ui/value-table';
 import { signal } from 'kerfjs';
 import { Bell, Folder, Inbox, Settings } from 'lucide';
 
+import {
+  RecipeMutedText,
+  RecipeOwnershipNote,
+  RecipeRoot,
+} from './recipe-root.js';
 import type { RecipeFactory } from './types.js';
 
 export const createRecipe: RecipeFactory = (announce) => {
@@ -23,196 +28,220 @@ export const createRecipe: RecipeFactory = (announce) => {
     'content',
   );
   const render = () => (
-    <section
-      class="kui-recipe recipe-shell kui-recipe__surface kui-layout"
-      data-recipe="recipe-app-shell"
-      data-responsive-pane={responsivePane.value}
+    <RecipeRoot
+      recipe="recipe-app-shell"
+      dataAttributes={{ 'data-responsive-pane': responsivePane.value }}
     >
-      <Toolbar
-        label="Atlas workspace"
-        leading={<ToolbarText text="Atlas" />}
-        trailing={
-          <div class="recipe-shell__toolbar-actions">
-            <ToolbarControlGroup
-              className="recipe-shell__responsive-controls"
-              appearance="borderless"
-              label="Workspace panes"
-            >
-              <button
-                type="button"
-                aria-label="Show navigation"
-                aria-controls="recipe-shell-navigation"
-                aria-pressed={String(responsivePane.value === 'navigation')}
-                data-action="recipe-action"
-                data-recipe-command="show-navigation"
-              >
-                <LucideIcon icon={Folder} name="folder" />
-              </button>
-              <button
-                type="button"
-                aria-label="Show content"
-                aria-controls="recipe-shell-content"
-                aria-pressed={String(responsivePane.value === 'content')}
-                data-action="recipe-action"
-                data-recipe-command="show-content"
-              >
-                <LucideIcon icon={Inbox} name="inbox" />
-              </button>
-              <button
-                type="button"
-                aria-label="Show inspector"
-                aria-controls="recipe-shell-inspector"
-                aria-pressed={String(responsivePane.value === 'inspector')}
-                data-action="recipe-action"
-                data-recipe-command="show-inspector"
-              >
-                <LucideIcon icon={Settings} name="settings" />
-              </button>
-            </ToolbarControlGroup>
-            <ToolbarControlGroup
-              appearance="borderless"
-              label="Workspace controls"
-            >
-              <button
-                type="button"
-                aria-label="Notifications"
-                data-action="recipe-action"
-                data-recipe-command="notify"
+      <div
+        class="recipe-shell kui-layout"
+        data-responsive-pane={responsivePane.value}
+      >
+        <Toolbar
+          label="Atlas workspace"
+          leading={<ToolbarText text="Atlas" />}
+          trailing={
+            <>
+              <ToolbarControlGroup
+                appearance="borderless"
+                label="Workspace panes"
+                visibility="compact-only"
               >
-                <LucideIcon icon={Bell} name="bell" />
-              </button>
-              <button
-                type="button"
-                aria-label="Settings"
-                data-action="recipe-action"
-                data-recipe-command="settings"
-              >
-                <LucideIcon icon={Settings} name="settings" />
-              </button>
-            </ToolbarControlGroup>
-          </div>
-        }
-      />
-      <div class="recipe-shell__body">
-        <div id="recipe-shell-navigation" class="recipe-shell__nav-region">
-          <ResizableRegion
-            id="recipe-navigation"
-            label="Navigation"
-            size={navigationSize.value}
-            min={180}
-            max={320}
-          >
-            <aside class="recipe-shell__nav kui-pane">
-              <ListHeader label="Workspace" />
-              <nav
-                class="recipe-shell__nav-list kui-pane__content kui-content"
-                aria-label="Workspace"
+                <button
+                  type="button"
+                  aria-label="Show navigation"
+                  aria-controls="recipe-shell-navigation"
+                  aria-pressed={String(responsivePane.value === 'navigation')}
+                  data-action="recipe-action"
+                  data-recipe-command="show-navigation"
+                >
+                  <LucideIcon icon={Folder} name="folder" />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Show content"
+                  aria-controls="recipe-shell-content"
+                  aria-pressed={String(responsivePane.value === 'content')}
+                  data-action="recipe-action"
+                  data-recipe-command="show-content"
+                >
+                  <LucideIcon icon={Inbox} name="inbox" />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Show inspector"
+                  aria-controls="recipe-shell-inspector"
+                  aria-pressed={String(responsivePane.value === 'inspector')}
+                  data-action="recipe-action"
+                  data-recipe-command="show-inspector"
+                >
+                  <LucideIcon icon={Settings} name="settings" />
+                </button>
+              </ToolbarControlGroup>
+              <ToolbarControlGroup
+                appearance="borderless"
+                label="Workspace controls"
               >
-                <section>
-                  <ListItem
-                    action="recipe-action"
-                    itemId="inbox"
-                    label="Inbox"
-                    icon={<LucideIcon icon={Inbox} name="inbox" />}
-                    selected={selected.value === 'inbox'}
-                  />
-                  <ListItem
-                    action="recipe-action"
-                    itemId="projects"
-                    label="Projects with a deliberately wrapping title"
-                    icon={<LucideIcon icon={Folder} name="folder" />}
-                    selected={selected.value === 'projects'}
-                    multiline
-                  />
-                </section>
-              </nav>
-            </aside>
-          </ResizableRegion>
-        </div>
-        <main id="recipe-shell-content" class="recipe-shell__main kui-pane">
-          <Toolbar
-            label="Current workspace view"
-            dividerSides=""
-            leading={
-              <ToolbarText
-                text={
-                  selected.value === 'inbox'
-                    ? 'Inbox triage'
-                    : 'Active projects'
-                }
-                size="xlarge"
-                id="recipe-shell-main-title"
-              />
-            }
-            trailing={
-              <ToolbarControlGroup appearance="borderless" single>
                 <button
-                  class="kui-recipe__button"
-                  data-primary="true"
                   type="button"
+                  aria-label="Notifications"
+                  data-action="recipe-action"
+                  data-recipe-command="notify"
+                >
+                  <LucideIcon icon={Bell} name="bell" />
+                </button>
+                <button
+                  type="button"
+                  aria-label="Settings"
                   data-action="recipe-action"
-                  data-recipe-command="new"
+                  data-recipe-command="settings"
                 >
-                  New task
+                  <LucideIcon icon={Settings} name="settings" />
                 </button>
               </ToolbarControlGroup>
-            }
-          />
-          <div class="recipe-shell__main-body kui-pane__content kui-content">
-            <Text class="kui-recipe__ownership kui-content-item">
-              Recipe owns pane geometry and one scroll owner per pane. The app
-              owns routing, data, pane visibility, sizes, and persistence.
-            </Text>
-            <div class="recipe-shell__cards">
-              {[
-                'Release accessibility audit',
-                'Prepare tablet navigation',
-                'Review stale-data states',
-                'Confirm package boundaries',
-              ].map((title) => (
-                <article class="recipe-shell__card kui-content-item">
-                  <strong>{title}</strong>
-                  <Text class="kui-recipe__muted">
-                    Assigned to the interface systems team · due this week
-                  </Text>
-                </article>
-              ))}
-            </div>
+            </>
+          }
+        />
+        <div class="recipe-shell__body">
+          <div id="recipe-shell-navigation" class="recipe-shell__nav-region">
+            <ResizableRegion
+              id="recipe-navigation"
+              label="Navigation"
+              size={navigationSize.value}
+              min={180}
+              max={320}
+              responsiveFillAt="compact"
+            >
+              <div class="recipe-shell__nav">
+                <Pane
+                  element="aside"
+                  contentElement="nav"
+                  contentClassName="recipe-shell__nav-list"
+                  contentLabel="Workspace"
+                >
+                  <ListHeader label="Workspace" />
+                  <section>
+                    <ListItem
+                      action="recipe-action"
+                      itemId="inbox"
+                      label="Inbox"
+                      icon={<LucideIcon icon={Inbox} name="inbox" />}
+                      selected={selected.value === 'inbox'}
+                    />
+                    <ListItem
+                      action="recipe-action"
+                      itemId="projects"
+                      label="Projects with a deliberately wrapping title"
+                      icon={<LucideIcon icon={Folder} name="folder" />}
+                      selected={selected.value === 'projects'}
+                      multiline
+                    />
+                  </section>
+                </Pane>
+              </div>
+            </ResizableRegion>
           </div>
-        </main>
-        <div id="recipe-shell-inspector" class="recipe-shell__inspector-region">
-          <ResizableRegion
-            id="recipe-inspector"
-            label="Inspector"
-            size={inspectorSize.value}
-            min={200}
-            max={360}
-            edge="start"
+          <div class="recipe-shell__main">
+            <Pane
+              element="main"
+              id="recipe-shell-content"
+              contentClassName="recipe-shell__main-body"
+              header={
+                <Toolbar
+                  label="Current workspace view"
+                  dividerSides=""
+                  leading={
+                    <ToolbarText
+                      text={
+                        selected.value === 'inbox'
+                          ? 'Inbox triage'
+                          : 'Active projects'
+                      }
+                      size="xlarge"
+                      id="recipe-shell-main-title"
+                    />
+                  }
+                  trailing={
+                    <ToolbarControlGroup
+                      appearance="borderless"
+                      content="text"
+                      single
+                    >
+                      <button
+                        type="button"
+                        data-action="recipe-action"
+                        data-recipe-command="new"
+                      >
+                        New task
+                      </button>
+                    </ToolbarControlGroup>
+                  }
+                />
+              }
+            >
+              <RecipeOwnershipNote>
+                Recipe owns pane geometry and one scroll owner per pane. The app
+                owns routing, data, pane visibility, sizes, and persistence.
+              </RecipeOwnershipNote>
+              <div class="recipe-shell__cards">
+                {[
+                  'Release accessibility audit',
+                  'Prepare tablet navigation',
+                  'Review stale-data states',
+                  'Confirm package boundaries',
+                ].map((title) => (
+                  <article class="recipe-shell__card kui-content-item">
+                    <strong>{title}</strong>
+                    <RecipeMutedText>
+                      Assigned to the interface systems team · due this week
+                    </RecipeMutedText>
+                  </article>
+                ))}
+              </div>
+            </Pane>
+          </div>
+          <div
+            id="recipe-shell-inspector"
+            class="recipe-shell__inspector-region"
           >
-            <aside class="recipe-shell__inspector kui-pane">
-              <Toolbar
-                label="Inspector"
-                dividerSides=""
-                leading={
-                  <ToolbarText
-                    text="Inspector"
-                    size="xlarge"
-                    id="recipe-shell-inspector-title"
-                  />
-                }
-              />
-              <div class="recipe-shell__inspector-body kui-pane__content kui-content">
-                <ValueTable label="Selected task">
-                  <ValueTableRow label="Status" value="In review" />
-                  <ValueTableRow label="Owner" value="Mara Chen" />
-                  <ValueTableRow label="Priority" value="High" />
-                </ValueTable>
+            <ResizableRegion
+              id="recipe-inspector"
+              label="Inspector"
+              size={inspectorSize.value}
+              min={200}
+              max={360}
+              edge="start"
+              responsiveFillAt="narrow"
+            >
+              <div class="recipe-shell__inspector">
+                <Pane
+                  element="aside"
+                  contentClassName="recipe-shell__inspector-body"
+                  header={
+                    <Toolbar
+                      label="Inspector"
+                      dividerSides=""
+                      leading={
+                        <ToolbarText
+                          text="Inspector"
+                          size="xlarge"
+                          id="recipe-shell-inspector-title"
+                        />
+                      }
+                    />
+                  }
+                >
+                  <ValueTable label="Selected task">
+                    <ValueTableRow label="Status" value="In review" />
+                    <ValueTableRow label="Owner" value="Mara Chen" />
+                    <ValueTableRow label="Priority" value="High" />
+                  </ValueTable>
+                </Pane>
               </div>
-            </aside>
-          </ResizableRegion>
+            </ResizableRegion>
+          </div>
         </div>
       </div>
-    </section>
+    </RecipeRoot>
   );
   return {
     render,

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

@@ -0,0 +1,83 @@
+.recipe-collapsible-sidebar {
+  display: grid;
+  height: min(34rem, 70vh);
+  contain: paint;
+  grid-template-areas:
+    "rail main"
+    "rail drawer";
+  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) auto;
+}
+
+.recipe-collapsible-sidebar__rail {
+  grid-area: rail;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.recipe-collapsible-sidebar__rail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--kui-space-2xs) var(--kui-layout-inline-margin, remify(8px));
+  border-block-end: 1px solid var(--kui-color-border);
+}
+
+.recipe-collapsible-sidebar__nav {
+  min-height: 0;
+}
+
+.recipe-collapsible-sidebar__main {
+  display: grid;
+  grid-area: main;
+  min-width: 0;
+  min-height: 0;
+  background: var(--kui-color-surface-lowered);
+}
+
+.recipe-collapsible-sidebar__body {
+  min-height: 0;
+}
+
+.recipe-collapsible-sidebar__card strong {
+  display: block;
+}
+
+.recipe-collapsible-sidebar__drawer {
+  grid-area: drawer;
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.recipe-collapsible-sidebar__drawer-body {
+  min-height: 0;
+}
+
+.recipe-collapsible-sidebar__log {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  margin: 0;
+  margin-inline: var(--kui-layout-inline-margin, remify(8px));
+  padding: 0;
+  list-style: none;
+  gap: var(--kui-space-xs);
+}
+
+.recipe-collapsible-sidebar__log li {
+  display: flex;
+  align-items: center;
+  color: var(--kui-color-text-quiet);
+  font-size: var(--kui-font-s);
+  gap: var(--kui-space-xs);
+}
+
+.recipe-collapsible-sidebar__log-icon {
+  display: inline-flex;
+  width: remify(16px);
+  height: remify(16px);
+  flex: none;
+  font-size: remify(16px);
+}