@sakaniui/react 0.12.0 → 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

package/CHANGELOG.md

@@ -2,6 +2,79 @@
 
 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.