@bridge-ds/toolbar 0.2.0 → 0.4.0

package/README.md

@@ -2,12 +2,26 @@
 
 The Bridge toolbar for a product built with the Bridge design system. Bridge Studio opens the product with
 `?bridge=<change>` ("Try it in the product"); the toolbar then lets anyone browse the real product and flip between
-**Live product** (before) and **This change** (after), with **Show what changed** for token changes.
+**Live product** (before) and **This change** (after), with **Show what changed**.
 
 - **Code changes** (an exploration in the product's repository, a feature branch): Before is the product in
-  production, After is the branch's preview. Flipping keeps the screen and the scroll position.
-- **Token changes** of the design system: the live tokens swap in without a reload, and Show what changed outlines
-  every surface that differs.
+  production, After is the branch's preview. Flipping keeps the screen and the scroll position. Production is another
+  origin, so the toolbar cannot measure the difference: the change marks each new or changed area of the UI with
+  `data-bridge-change="<short plain label>"` on its outermost element (Bridge tells Claude to, in every exploration).
+  On This change those areas are outlined, counted ("1 changed", "1 / 3 changed") and stepped through like token
+  changes, with Isolate, and the Changes list names them. On Live product the bar says how many wait on This change
+  ("1 changed on This change"). A change that marks nothing says so.
+
+  ```tsx
+  <div role="status" data-bridge-change="Orders waiting to ship alert">30 orders are waiting to ship</div>
+  ```
+- **Token changes** of the design system: the live tokens swap in without a reload. As soon as the toolbar is open,
+  every surface that differs is outlined and counted in the bar ("13 changed", then "2 / 13 changed"). Previous and Next scroll to each one
+  in reading order and outline it stronger than the others; Isolate dims the rest of the page (Esc turns it off). The
+  outlines, the position and Isolate hold when you flip to Live product, since both sides are the same page.
+
+Keyboard: **B** flips Live product and This change on the same screen and scroll position, **C** turns the outlines
+off and on, **Esc** ends Isolate. None of them fires while you type in a field.
 
 Without `?bridge=` (or the session that remembers it) it renders nothing and loads nothing: the toolbar and its styles
 are one lazy chunk.

package/dist/ChangeNav.d.ts

@@ -0,0 +1,18 @@
+export interface ChangeNavProps {
+    /** "Show what changed", "13 changed", "2 / 13 changed", "Nothing changed here". */
+    countText: string;
+    /** The count's tooltip: what changed and the C shortcut. */
+    tip: string;
+    outlinesOn: boolean;
+    /** The change shows nothing in this theme or brand: the count is muted. */
+    disabled: boolean;
+    /** Changes to step through, null while outlines are off or measuring. */
+    total: number | null;
+    isolate: boolean;
+    /** Said to screen readers on each step: "Changed element 2 of 13: Save bar". */
+    announce: string;
+    onToggle: () => void;
+    onStep: (delta: 1 | -1) => void;
+    onIsolate: (on: boolean) => void;
+}
+export declare function ChangeNav({ countText, tip, outlinesOn, disabled, total, isolate, announce, onToggle, onStep, onIsolate }: ChangeNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/ChangeOutlines.d.ts

@@ -2,19 +2,24 @@ import { type ReactNode } from 'react';
 import type { Theme } from '@bridge-ds/react';
 import { type ChangedElement } from './outline';
 import type { Rect } from './session';
+import { type Box as TipBox } from './navigate';
 export interface Shown {
     /** Visible surfaces, in order. */
     count: number;
     /** Boxes of the visible surfaces that are not page-sized: the toolbar keeps clear of them. */
     obstacles: Rect[];
 }
-export declare function ChangeOutlines({ surfaces, theme, tip, onShown, emphasis, flash, }: {
+export declare function ChangeOutlines({ surfaces, theme, tip, onShown, emphasis, flash, isolate, bar, }: {
     surfaces: ChangedElement[];
     theme: Theme;
     /** The surface whose list row is hovered, focused or activated: chip and stronger outline. */
     emphasis: number | null;
     /** Show every chip (the moment outlines turn on). */
     flash: boolean;
+    /** Dim everything but the changed surfaces. */
+    isolate?: boolean;
+    /** Where the toolbar is: the before and after tooltip never covers it. */
+    bar?: () => TipBox | null;
     /** Tooltip content for a surface: its role, token and before and after. */
     tip: (s: ChangedElement) => ReactNode;
     onShown: (shown: Shown) => void;