@estiva-app/ui 0.42.0 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.42.0",
+  "version": "0.43.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.42.0",
-    "exports": 90,
-    "typeExports": 101,
+    "packageVersion": "0.43.0",
+    "exports": 91,
+    "typeExports": 102,
     "files": null
   },
   "storybook": {
@@ -1280,6 +1280,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "CommandPaletteProposal",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/CommandPalette.tsx",
+      "purpose": "Something the palette offers to make, before anything is made: a card with where it would be made on top, then what it would be.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "source",
+          "takes": "text",
+          "required": true,
+          "note": "Where it would be made: the app and the action — \"App › New item\"."
+        },
+        {
+          "name": "mark",
+          "takes": "anything",
+          "required": false,
+          "note": "The app's mark before the source, as small as the line (about 10px)."
+        },
+        {
+          "name": "children",
+          "takes": "text",
+          "required": true,
+          "note": "What would be made, in a sentence."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "overlays-commandpalette--docs",
+      "storyId": "overlays-commandpalette--first-level",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "CommandPaletteQuote",
       "repo": "estiva-ui",

package/src/CommandPalette.mdx

@@ -23,6 +23,12 @@ form — and the app keeps the levels.
   above the rows, for a result that is written rather than listed: a line while
   it is on its way, an answer with marks pointing at the rows it came from, and
   text written to be used somewhere else.
+- **`CommandPaletteProposal`** — above the rows, for something the palette
+  offers to make before anything is made: a card with where it would be made
+  (`source`, with the app's `mark`), then what it would be. The rows under it
+  say what happens next.
+
+<Canvas of={CommandPaletteStories.Proposal} />
 
 <Canvas of={CommandPaletteStories.Answer} />
 

package/src/CommandPalette.stories.tsx

@@ -7,6 +7,7 @@ import {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -54,6 +55,7 @@ type Level =
   | { kind: 'place'; name: string }
   | { kind: 'ask' }
   | { kind: 'draft' }
+  | { kind: 'make' }
   | { kind: 'form' }
   | { kind: 'one-list' }
 
@@ -62,7 +64,7 @@ interface Frame {
   query: string
 }
 
-type Start = 'first' | 'arriving' | 'nothing' | 'place' | 'working' | 'answer' | 'draft' | 'form' | 'refused' | 'one-list'
+type Start = 'first' | 'arriving' | 'nothing' | 'place' | 'working' | 'answer' | 'draft' | 'make' | 'form' | 'refused' | 'one-list'
 
 const PLACES = ['Place one', 'Place two']
 const ACTIONS = [
@@ -81,6 +83,7 @@ const GROUPS = [
 ]
 const ANSWER = 'Item one moved on Monday [1], and item two is waiting on a reply [2].\n\nNothing else changed this week.'
 const DRAFT = 'Thanks, both. I will look at item one today\nand reply on item two tomorrow.'
+const PROPOSAL = 'An item for the reply on item two, due tomorrow.'
 
 function startStack(start: Start): Frame[] {
   const first: Frame = { level: { kind: 'first' }, query: '' }
@@ -96,6 +99,8 @@ function startStack(start: Start): Frame[] {
       return [first, { level: { kind: 'ask' }, query: 'What changed this week?' }]
     case 'draft':
       return [first, { level: { kind: 'draft' }, query: 'Say I will look today' }]
+    case 'make':
+      return [first, { level: { kind: 'make' }, query: '' }]
     case 'form':
     case 'refused':
       return [first, { level: { kind: 'place', name: 'Place one' }, query: '' }, { level: { kind: 'form' }, query: '' }]
@@ -180,6 +185,17 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
         },
       ]
     }
+    if (level.kind === 'make') {
+      return [
+        {
+          label: 'Next',
+          rows: [
+            { id: 'make-open', label: 'Open the form', description: 'Place one › Action one · nothing is made until you submit', icon, onSelect: () => push({ kind: 'form' }) },
+            { id: 'make-again', label: 'Suggest something else', icon, onSelect: () => close('Suggest something else') },
+          ],
+        },
+      ]
+    }
     if (level.kind === 'ask' || level.kind === 'draft') {
       if (!asked?.done) return []
       const changed = frame.query.trim() !== asked.question.trim()
@@ -236,6 +252,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
           rows: [
             { id: 'ask', label: 'Ask about this page', icon, onSelect: () => push({ kind: 'ask' }) },
             { id: 'draft', label: 'Write a draft', icon, onSelect: () => push({ kind: 'draft' }) },
+            { id: 'make', label: 'Make something from this page', icon, onSelect: () => push({ kind: 'make' }) },
             { id: 'one-list', label: 'Change kind', description: 'Item one', icon, onSelect: () => push({ kind: 'one-list' }) },
           ],
         },
@@ -289,6 +306,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
   }
 
   const body = (() => {
+    if (level.kind === 'make') return <CommandPaletteProposal source="Place one › Action one" mark={<IconSquareRounded size={10} stroke={1.5} />}>{PROPOSAL}</CommandPaletteProposal>
     if (level.kind !== 'ask' && level.kind !== 'draft') return undefined
     if (!asked || !asked.done) return <CommandPaletteWorking>Reading 12 notes…</CommandPaletteWorking>
     const changed = frame.query.trim() !== asked.question.trim()
@@ -355,6 +373,8 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
                   ? 'Ask anything about this page'
                   : level.kind === 'draft'
                     ? 'What should it say?'
+                    : level.kind === 'make'
+                    ? 'Looking at this page'
                     : 'Search, or choose a place'
             }
             groups={groups}
@@ -365,6 +385,8 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
                   ? { label: 'Ask', onBack: back }
                   : level.kind === 'draft'
                     ? { label: 'Draft', onBack: back }
+                    : level.kind === 'make'
+                    ? { label: 'Make', onBack: back }
                     : undefined
             }
             pending={level.kind === 'first' && searching ? 'Searching…' : undefined}
@@ -412,6 +434,9 @@ export const Answer: Story = story('answer')
 export const Quote: Story = story('draft')
 
 /** A form. Ctrl+Enter creates; a missing field says so and takes focus; Backspace in an empty field goes back and keeps what was typed. */
+/** Something it offers to make: where, then what. Nothing is made until the form is sent. */
+export const Proposal: Story = story('make')
+
 export const Form: Story = story('form')
 
 /** Creating is refused: the fields unlock, the reason sits beside the button, and focus is back where it was. */

package/src/CommandPalette.test.tsx

@@ -17,6 +17,7 @@ import {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -421,6 +422,19 @@ describe('what sits above the rows', () => {
     expect(screen.getByText(/Line one/).textContent).toBe('Line one\nLine two')
   })
 
+  it('draws a proposal as a card: where it would be made, with its mark, then what', () => {
+    const { container } = render(
+      <CommandPaletteProposal source="Place one › Action one" mark={<svg data-testid="mark" />}>
+        An item for tomorrow.
+      </CommandPaletteProposal>,
+    )
+    const lines = container.firstElementChild?.children
+    expect(lines).toHaveLength(2)
+    expect(lines?.[0].textContent).toBe('Place one › Action one')
+    expect(lines?.[0].contains(screen.getByTestId('mark'))).toBe(true)
+    expect(lines?.[1].textContent).toBe('An item for tomorrow.')
+  })
+
   it('announces what is being worked on, with its grey bars', () => {
     const { container } = render(<CommandPaletteWorking bars={3}>Reading…</CommandPaletteWorking>)
     expect(screen.getByRole('status').textContent).toContain('Reading…')

package/src/CommandPalette.tsx

@@ -16,6 +16,7 @@ import type { BaseUIEvent } from '@base-ui/react/types'
 import { IconLoader2, IconSearch } from '@tabler/icons-react'
 import { cn } from './cn'
 import { Button } from './Button'
+import { Card } from './Card'
 import { InputChip } from './ChipInput'
 import { EmptyState } from './EmptyState'
 import { FieldLine } from './Field'
@@ -661,3 +662,31 @@ export interface CommandPaletteQuoteProps {
 export function CommandPaletteQuote({ children }: CommandPaletteQuoteProps) {
   return <p className="whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary">{children}</p>
 }
+
+export interface CommandPaletteProposalProps {
+  /** Where it would be made: the app and the action — "App › New item". */
+  source: string
+  /** The app's mark before the source, as small as the line (about 10px). */
+  mark?: ReactNode
+  /** What would be made, in a sentence. */
+  children: string
+}
+
+/**
+ * Something the palette offers to make, before anything is made: a card with
+ * where it would be made on top, then what it would be. A card because it is a
+ * thing about to exist, not text to read or use; the source first because two
+ * apps may offer something alike (UIG-40, Katerina 28 September: the look Peek's
+ * launcher already had, now drawn by the palette, ruling P4).
+ */
+export function CommandPaletteProposal({ source, mark, children }: CommandPaletteProposalProps) {
+  return (
+    <Card fill="surface" className="flex flex-col gap-1 p-3">
+      <span className="flex items-center gap-2 text-caption text-text-secondary">
+        {mark}
+        {source}
+      </span>
+      <span className="text-body-2 text-text-primary">{children}</span>
+    </Card>
+  )
+}

package/src/index.ts

@@ -22,6 +22,7 @@ export {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -30,6 +31,7 @@ export {
   type CommandPaletteFormProps,
   type CommandPaletteGroup,
   type CommandPaletteProps,
+  type CommandPaletteProposalProps,
   type CommandPaletteQuoteProps,
   type CommandPaletteRow,
   type CommandPaletteSearchProps,

package/src/registry/registry.test.ts

@@ -45,17 +45,17 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 90 names over 59 files: 82 components, 7 helpers and 1 hook (RichText and richTextClassName joined on 28 September)', () => {
+  it('counts 91 names over 59 files: 83 components, 7 helpers and 1 hook (CommandPaletteProposal joined on 28 September)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 82, helper: 7, hook: 1 })
+    expect(kinds).toEqual({ component: 83, helper: 7, hook: 1 })
     expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(59)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
     expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(59)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(31)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(32)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {