@sakaniui/react 0.11.1 → 0.12.0

package/AGENTS.md

@@ -245,6 +245,20 @@ lists its other names under `aliases` in `manifest.json`, and `search_components
   row in a list. **Charts** — pick by question: trend over time → Line/Area; compare categories → Bar;
   part of whole → Pie/Donut (few slices only); progress to a target → Radial; compare several measures →
   Radar; drop-off → Funnel; intensity across two dimensions → Heatmap.
+- **Map / MapMarker / MapPopup / MapClusterLayer** — an interactive tile map with no map library. Put `MapMarker`
+  (`pin`, `dot`, `cluster`) and `MapPopup` children inside `Map`, placed by `[latitude, longitude]` (latitude
+  first). Give every marker a `label`; a marker with `onClick` is a button and `selected` is yours to set. The
+  default tiles are OpenStreetMap's, fine for development and light use: for production traffic pass `tileUrl`
+  (and `attribution`) from a tile provider. For a live feed keep positions in state and give the markers `glide`
+  (about the interval between updates, in ms) so they slide instead of jumping. For more than a few dozen places
+  use `MapClusterLayer` (`points`, `renderPoint`) instead of mapping hundreds of `MapMarker`s. Dark mode follows
+  `.dark`; `theme="dark"` makes one map dark, `tileUrlDark` supplies a dark tile style. It only draws a map: no
+  routing, geocoding or search, and a map is hard to use without a pointer, so list the places beside it.
+  **MapGlobe** — a 3D dotted globe for places across the whole world (offices, customers, routes), not for
+  navigation: `variant` land or ocean, `markers`, `arcs`. It has no background of its own, so place it on the
+  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.
 - **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
@@ -259,9 +273,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,50 @@
 
 All notable changes to `@sakaniui/react` are documented here.
 
+## 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,
+  `glide` for live feeds, `MapClusterLayer` for many places, dark mode, accessibility), served by the MCP
+  server's `get_guide`.
+- **MCP server:** `@sakaniui/mcp` 0.11.2 carries the 0.11 reference, so Map and its parts are found even in a
+  project that has no `@sakaniui/react` installed (a project that has it was already answered from its own copy).
+- **Fixed: `since` for `MapControlButton` and `MapControls`** was 0.11.1; they shipped in 0.11.0. The release
+  history can now name the commit a version was actually published from (`scripts/manifest/releases.json`).
+- No component or API changes.
+
 ## 0.11.1
 
 - **Fixed: `Map` markers on the server.** Rendered before the map is measured, markers and popups were placed