@sakaniui/react 0.11.2 → 0.13.0

package/AGENTS.md

@@ -259,6 +259,13 @@ lists its other names under `aliases` in `manifest.json`, and `search_components
   colour you want (`theme="dark"` for a dark surface inside a light page); give markers a `label` and
   `onMarkerClick` to make them selectable. Choose Map when people need streets and zoom, MapGlobe when the point
   is global spread.
+- **CommandMenu / CommandMenuTrigger / CommandMenuAnswer** — the ⌘K search and command palette: search pages, people,
+  files and actions in one place. Use it instead of building a modal with an `Input` and a list. Pass `groups` of
+  `items` and handle `onSelect`; it opens on ⌘K by itself and filters as you type (`filter={false}` for server
+  results, with `state="loading"` while you wait). Give every item a `label`, and `shortcut` / `description` / `meta`
+  for context. Add `scopes` for tabs, `onAskAI` for ⌘↵, `answer` for an Ask AI answer card, `variant="simple"` for the
+  plain version. A `Combobox` is for choosing a value in a form, not for navigating an app. Put a
+  `CommandMenuTrigger` in the top bar.
 - **Avatar / AvatarGroup** — Avatar type is inferred: `src` → image, `initials` → initials, else icon.
   Prefer a real image when you have one; initials are the fallback, not the default.
 - **BoardCard / BoardColumn** — kanban pieces. `BoardColumn state="loading"` styles the column; *you* pass
@@ -273,9 +280,19 @@ Many Figma-frame blocks have a fixed design width — put them in a container at
 
 ## 6. Moments an AI product needs (compose these today)
 
-The system has no dedicated AI components yet. Until it does, build these moments from existing parts,
-and **tell the user when you are composing** rather than implying a dedicated component exists.
-
+`ChainOfThought` (with `ChainOfThoughtStep`, `SourceStack` and `WorkingIndicator`) covers showing an agent's
+work. The other moments below have no dedicated component yet: build them from existing parts, and **tell the
+user when you are composing** rather than implying a dedicated component exists.
+
+- **Showing the agent's work.** Use `ChainOfThought`: one `ChainOfThoughtStep` per action (an `icon`, a `label`,
+  the `query` in monospace, a result `count`, and a `SourceStack` as `sources`). Append a step as the agent starts
+  it, mark the active one `status="active"` and finished ones `"done"` (they read muted), and give the container
+  `status="working"` with `startedAt` so the timer ticks on its own; switch to `status="done"` and the final
+  `elapsed` when the run ends. Give each step a recognisable icon: the site's real logo in its brand colour
+  (`icon={sourceLogo('reddit')}`, and the same in the `SourceStack`), or an emoji for steps with no site
+  (`EmojiLightBulb` for planning, `EmojiPageFacingUp` for reading). Do not use a generic magnifier for every
+  step. It only displays: you stream the steps in. Do not build this from `Stepper` (a
+  progress bar for a known sequence) or `ActivityFeed` (a log of past events).
 - **The model isn't sure.** State uncertainty in words next to the claim, not hidden in colour. Use an
   `Alert` (`color="info"` or `"warning"`) or a `Badge` ("Low confidence"). Offer the next step: verify,
   rephrase, or ask for more context.

package/CHANGELOG.md

@@ -2,6 +2,112 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 0.13.0
+
+- **New: `CommandMenu`**, a ⌘K search and command palette, built from the new *↳ Command Menu* page in Figma. A search field,
+  scope tabs with counts, grouped results with the matched letters in the strong weight, a footer of key hints, and the
+  states a real search needs. Also **`CommandMenuTrigger`** (the ⌘K pill for a top bar) and **`CommandMenuAnswer`** (an
+  answer card with sources, for the Ask AI state).
+  - You pass `groups` of `items` (`label`, `description`, `type`, `icon`, `avatar`, `meta`, `shortcut`, `keywords`, `tags`) and
+    handle `onSelect`. It filters as you type unless you pass `filter={false}` (server results); `state="loading"` shows
+    skeleton rows and `state="error"` an error with `onRetry`.
+  - Keyboard: ⌘K / Ctrl K opens and closes it; ↑ ↓ Home End move one gliding highlight; ↵ chooses; ⌘↵ asks AI (with
+    `onAskAI`); Tab and Shift Tab switch scope; ⌫ in an empty field removes the last filter token; typing `team:design`
+    and a space makes a token (`filterKeys`); esc clears the query, then closes. Focus returns to where it was.
+  - No results is never a dead end: `emptyTitle`, `suggestions` ("Did you mean…", "Remove the filter") and `fallbackGroups`
+    ("Try instead"). `answer` takes an answer card or a Chain of Thought; `renderPreview` adds a detail pane beside the list.
+  - The No results illustration is alive: the ghost rows flow up without stopping, the top one fading out under a mask while
+    the next fades in at the bottom, and a magnifying lens circles slowly over them, showing the rows magnified and clearer
+    under the glass (CSS only, the lens uses two registered `@property` lengths). The lens pops in and the title and chips
+    rise in. `prefers-reduced-motion` shows the still stack with the lens at rest, as in Figma.
+  - The list opens scrolled to the top when its first row is active, so the empty message is never cut off in a short window.
+  - The panel no longer resizes as you search. The list area has a fixed height (444px, the Figma No results body) and scrolls
+    inside it, so typing, clearing and switching scope never grow or shrink the panel (it still gives way on a short window;
+    `variant="simple"` stays as tall as its rows). With `renderPreview` the detail pane is always part of the layout, so
+    the width stays 880px whichever row is active; the pane follows the active row after a 140ms rest (so sweeping the
+    pointer or holding an arrow key does not flicker through every row), cross-fades, and shows `previewEmpty` when a row
+    has nothing to preview.
+  - The row highlight no longer lingers as a grey bar over the No results illustration (or the error and loading states) after
+    the results disappear; it fades out and comes back with the next result. The preview pane's empty message is centred.
+  - The Preview story's detail pane follows the adjusted Figma Command Preview: who (40px avatar, 16/22 name), the Online and
+    location badges, a divider, three icon details, a Recent section with times, and two full-width actions pinned to the
+    bottom. The answer card, detail pane and footer take Figma's surface/bg-chrome (bg/canvas in Solid; Glass and Liquid keep
+    their own), where they were transparent.
+  - The detail pane swaps its content in place when the active row changes (no fade or movement), after a 100ms rest on the
+    row so sweeping the pointer or holding an arrow key does not flicker through every row.
+  - **Ask AI waits to be asked, thinks, then writes the answer.** In the Ask AI scope an empty field shows suggested questions and
+    no answer; the answer slot only fills when a question is submitted (↵ on what you typed or on a suggestion, ⌘↵ anywhere).
+    It then plays a live Chain of Thought (steps stream in, the working line shimmers, finishing sweeps the rail), which folds
+    shut, and the answer card writes itself in word by word. `CommandMenuAnswer` takes `stream` (plain-string children) and
+    `onStreamEnd`; its sources and follow-up arrive once the text is written. With an `answer` set, an empty list is no longer
+    the "No results" state. The *Live Ask AI* and *Ask AI empty* stories show the whole flow, and Figma has `State=AI empty`
+    and `State=AI thinking`.
+  - **A soft light runs around the answer card while it is written.** On the card's 1px border, in the brand colour, from the first
+    word until the response has fully arrived (the text, then the sources and the follow-up), then it fades out while still moving.
+    Reduced motion shows none.
+  - **The AI mark is the SakaniUI arc mark on its own**, a circle with no tile, painted in the text colour (white in dark mode,
+    near-black in light), on the answer card and on the "Ask AI" rows, replacing the sparkles icon. `SakaniLogo` takes a `color`.
+  - New `previewActions`: buttons pinned to the bottom of the detail pane that stay put while the content above (from
+    `renderPreview`) changes from row to row. Pass a node, or a function that reads the previewed row.
+  - The Preview layout is narrower: 880px (was 960), with a 300px detail pane (was 320). The Figma Preview state and its
+    Command Preview part are resized to match.
+  - A person's row matches the Figma Leading slot: the 24px Avatar centred in the 28px slot, and the 8px status dot at (18, 17)
+    with an inside 1.5px ring (it sat 3px too far out and its ring rendered 1px).
+  - The scope tabs (All, Pages, People…) share one pill that glides to the chosen tab (150ms, the same as the row highlight),
+    for a click and for Tab / Shift Tab. It opens in place without sliding in, follows tabs that resize when counts appear, and
+    stays still with `prefers-reduced-motion`.
+  - The hover highlight now follows its row while something above it opens or closes (a Chain of Thought in the Ask AI answer),
+    instead of lagging behind and leaving the row without its hover effect. It is placed every frame for the length of the
+    transition, with the glide off (shared `useHoverHighlight`, so every flowing-highlight list gets it).
+  - Suggestion chips take `emphasis` (a word set in the strong weight, like "invoice" in "Did you mean invoice?") and `iconPosition="end"`.
+  - The error state takes `onRetry` ("Try again") and `onReport` (a quieter "Report" beside it), with `retryLabel` / `reportLabel`.
+    Scope counts show only for a finished search, not the idle list, loading or an error.
+  - `variant="simple"` is the plain version: the field, one group of rows and the key hints.
+- **Changed: `Kbd`** now matches its Figma master: a flat 20px key cap (surface fill, 1px border, 4px radius, 12px text) with no bottom
+  shadow. It was heavier before (subtle fill, 6px radius, a 1px bottom shadow). This applies everywhere `Kbd` is used.
+  - Reads the Surface tokens, so it re-skins in Glass and Liquid areas; portals to the body like Modal and keeps the theme
+    and surface of where it was opened. Accessible: a dialog with a combobox field, a listbox of options, a live
+    region announcing the result count, and reduced motion. Text uses `fg/muted` (the Figma file used `fg/subtle` in a few
+    places, which is 2.5:1 on white).
+- **New spacing tokens `--space-28` and `--space-36`**
+- **New spacing tokens `--space-28` and `--space-36`**, matching the Figma Spacing collection (`space/28`, `space/36`), so the
+  28px and 36px gaps used in charts, app shells and page covers now come from the scale instead of raw numbers.
+- Manifest: `ChainOfThought.status` no longer reports a default (there is none: no working line unless you pass it), and
+  `WorkingIndicator.status` reports its real default, `"working"`.
+
+## 0.12.0
+
+- **New: `ChainOfThought`**, an AI agent's visible work, built from the new *↳ Chain of Thought* page in Figma.
+  A header, steps joined by a tree rail, and a live "Working" line.
+  - **`ChainOfThought`**: `title`, `icon`, `open` / `defaultOpen` / `onOpenChange` (the header toggles it, with
+    an animated open and close), `status` (`"working"` or `"done"`) with `elapsed` (seconds) or `startedAt`
+    (the time then counts up on its own), and `children`.
+  - **`SourceLogo`** and **`sourceLogo(name)`**: the real logo of the site a step searched or read, in its brand
+    colour, for the `icon` props of a step or a `SourceStack` chip (or `<SourceLogo name="reddit" />` on its own).
+    Seventeen sites: Google, X, Reddit, GitHub, LinkedIn, YouTube, Hacker News, Wikipedia, Stack Overflow, Product
+    Hunt, Medium, Notion, Substack, arXiv, Bluesky, Perplexity, DuckDuckGo. Black brands draw in the text colour so
+    they stay visible in dark mode. Emoji work as step icons too (`icon={EmojiLightBulb}`). A pending step's icon is
+    grey until it starts, and the spark that runs into the active step takes the logo's colour.
+  - **`ChainOfThoughtStep`**: `status` pending, active (read in full) or done (muted), an `icon`, a `label`, an
+    optional monospace `query`, a result `count`, and a `sources` row (add `onSourcesClick` to make it a button
+    with a chevron). The rail stops at the last step by itself; screen readers get each step's status.
+  - **`SourceStack`**: overlapping site-icon chips from `sources` ({ `label`, `icon` }); three to five read best.
+  - **`WorkingIndicator`**: the working line on its own: a living sparkle (in the brand colour, a 1px line) and a shimmering "Working" with the
+    elapsed time, or a check and "Worked for 11.2s". The sparkle's three stars move on their own: the big one turns
+    a quarter each cycle and breathes while the two small ones twinkle in turn, filling in at their peak, in time with
+    the shimmer. Both stop under reduced motion. The Live story has a Dark mode switch.
+  - Presentational: you append steps as your agent produces them. Light and dark through the tokens.
+  - **Motion**, from the Figma *Chain of Thought · motion* table, reads as ink running down the rail. An appended
+    step opens its row while the previous rail flows down into it, turns the corner and the icon lands; the label
+    is written in left to right, the query types itself, the count ticks up to its value and the source chips fan
+    out. A spark keeps running into the active step and its icon beats as it lands. Results that land later open
+    their row instead of jumping in. Finishing sends one sweep down the rail, lighting each icon in turn, and the
+    check is drawn when it lands. Opening the panel lets the steps rise in turn. Only what arrives after the first
+    render animates, and reduced motion makes all of it instant.
+- Agent contract: the four components are in the manifest with a streaming-run recipe and the aliases *chain of
+  thought*, *reasoning steps*, *agent steps*, *tool calls*, *sources*, *favicon stack* and more; the agent guide's
+  "moments an AI product needs" now points at `ChainOfThought`.
+
 ## 0.11.2
 
 - **Agent guide:** `AGENTS.md` gains a Map section (when to use `Map` or `MapGlobe`, latitude first, tile providers,