@bridge-ds/toolbar 0.1.0 → 0.3.0

package/README.md

@@ -6,8 +6,13 @@ The Bridge toolbar for a product built with the Bridge design system. Bridge Stu
 
 - **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.
+- **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.
@@ -47,5 +52,10 @@ live tokens). `bridge connect` prints this line with your values.
 | `scope` | A hook returning `{ theme, brand, density, shop, set }` when your app keeps theme and shop in state. Default: the `data-theme`, `data-brand` and `data-density` attributes `ThemeProvider asRoot` puts on `<html>`. |
 | `shops` | `{ id, name, brand }[]` of a multi-brand product, for the screens list and "Switch to <shop>". |
 | `together` | A loader of the latest library's token files (`togetherBase` from `@bridge-ds/toolbar/together`), so Studio's "Try them together" runs on your production. |
+| `proxy` | Bridge's origin, whose read proxy serves the toolbar's GitHub reads. Default `https://bridge.floriangouloubi.com`; `null` reads GitHub directly. |
 
-Reads are anonymous (public repositories): at most a few GitHub API reads per change and session.
+Reads go through Bridge's read proxy (`<proxy>/api/contribute?repo=<ds>&gh=<path>`: allow-listed, cached, read-only
+on the server), so visitors never meet GitHub's limit of 60 anonymous reads an hour. Bridge serves a public design
+system and the public product repositories its `bridge.config.json` lists, to the origins that config names
+(`production` and `preview` of each product, and localhost). When Bridge refuses or cannot be reached, the toolbar
+reads GitHub directly (anonymous, public repositories): at most a few API reads per change and session.

package/dist/BridgeToolbar.d.ts

@@ -10,6 +10,12 @@ export interface BridgeToolbarProps {
     studio?: string | null;
     production?: string | null;
     preview?: string | null;
+    /**
+     * Bridge's origin, whose read proxy serves the toolbar's GitHub reads (no limit of 60 an hour per visitor). Default
+     * production Bridge (https://bridge.floriangouloubi.com); null reads GitHub directly. GitHub directly anyway when
+     * Bridge refuses or cannot be reached.
+     */
+    proxy?: string | null;
     /** The deploy environment ("production", "preview"), when the host tells it at build time (VERCEL_ENV). */
     deployEnv?: string | null;
     /** Every fact at once, read at build time: no config read at run time (the Admin demo passes it). */

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;