@bridge-ds/toolbar 0.3.0 → 0.4.1

package/README.md

@@ -2,10 +2,19 @@
 
 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.
+  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

package/dist/{Toolbar-DJUb3p2c.js → Toolbar-ByLHemKF.js}

@@ -8,8 +8,8 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useId, useLayoutEffect, useMemo, useRef, useCallback } from "react";
 import { ThemeProvider, Tooltip, Button, ButtonGroup, IconButton, VisuallyHidden, Kbd, Popover, PopoverTrigger, PopoverContent, Checkbox, Icon, Link, Badge } from "@bridge-ds/react";
 import { ScanSearch, ChevronLeft, ChevronRight, GripVertical, ListChecks, ChevronUp, Check, Info, Minimize2 } from "lucide-react";
-import { g as githubReads, D as DEFAULT_PROXY, l as loadBuild, u as useDocumentScope } from "./index-CCTqUFz3.js";
-import { t as tokenChanges, c as changedScreens, b as changeMode, d as readableTitle, e as toggleIncluded, r as readChanges, w as whereAmI, f as readReturn, g as readUse, h as shouldRender, O as OPEN_KEY, i as readDock, l as liveTokensUrl, n as noVisibleDifference, j as readScroll, S as SCROLL_PARAM, k as sameScreenOn, m as studioChangesUrl, o as studioChangeUrl, T as TOGETHER_EMPTY_LINE, p as contrastRatio, q as toHex, u as fromText, v as TOGETHER_HINT, x as isSubtle, y as isFlipKey, z as placeToolbar, A as togetherLabel, P as PARAM, B as changeSummary, C as dockAt, D as stepDock, E as DOCK_KEY } from "./session-D6oH78KG.js";
+import { g as githubReads, D as DEFAULT_PROXY, l as loadBuild, u as useDocumentScope } from "./index-cRndUN9A.js";
+import { t as tokenChanges, c as changedScreens, b as changeMode, d as readableTitle, M as MARKS_PARAM, e as toggleIncluded, r as readChanges, w as whereAmI, f as readReturn, g as readUse, h as shouldRender, O as OPEN_KEY, i as readDock, l as liveTokensUrl, n as noVisibleDifference, j as readScroll, S as SCROLL_PARAM, k as sameScreenOn, m as studioChangesUrl, o as studioChangeUrl, T as TOGETHER_EMPTY_LINE, p as contrastRatio, q as toHex, u as fromText, v as TOGETHER_HINT, x as isSubtle, y as isFlipKey, z as placeToolbar, A as togetherLabel, P as PARAM, B as changeSummary, C as dockAt, D as stepDock, E as DOCK_KEY } from "./session-Dvma9jtT.js";
 const VISUAL_BRANCH = "bridge-visual";
 const cacheKey = (n) => `bridge-admin:facts:v3:${n}`;
 function session$1() {
@@ -461,7 +461,7 @@ function tipSide(box2, view, bar, room = TIP_ROOM) {
   if (fitsBeside && box2.left >= room.width) return "left";
   return "top";
 }
-const IGNORE = "[data-bridge-toolbar], [data-bridge-overlay]";
+const IGNORE$1 = "[data-bridge-toolbar], [data-bridge-overlay]";
 function useChangedElements(on, live, vars, screen, sheetIs = "before") {
   const [result, setResult] = useState(null);
   const key = vars.join(",");
@@ -470,12 +470,71 @@ function useChangedElements(on, live, vars, screen, sheetIs = "before") {
       setResult(null);
       return;
     }
-    const run = () => setResult(changedElements(key.split(","), live, (el) => Boolean(el.closest(IGNORE)), sheetIs));
+    const run = () => setResult(changedElements(key.split(","), live, (el) => Boolean(el.closest(IGNORE$1)), sheetIs));
     const ids = [window.setTimeout(run, 0), window.setTimeout(run, 400), window.setTimeout(run, 1200)];
     return () => ids.forEach((id) => window.clearTimeout(id));
   }, [on, live, key, screen, sheetIs]);
   return result;
 }
+const CHANGE_ATTR = "data-bridge-change";
+const MARKS_KEY = "bridge-admin:marks";
+const IGNORE = "[data-bridge-toolbar], [data-bridge-overlay]";
+function markerLabel(value) {
+  const v = (value ?? "").replace(/\s+/g, " ").trim();
+  return v ? v.charAt(0).toUpperCase() + v.slice(1) : "Changed area";
+}
+function markedElements(root = document) {
+  return Array.from(root.querySelectorAll(`[${CHANGE_ATTR}]`)).filter((el) => !el.closest(IGNORE)).map((el) => ({ el, pseudo: null, roots: [], props: [], label: markerLabel(el.getAttribute(CHANGE_ATTR)), keys: [], floating: false }));
+}
+function sameMarks(a, b) {
+  return Boolean(a) && a.length === b.length && a.every((x, i) => x.el === b[i].el && x.label === b[i].label);
+}
+const waitingText = (n) => n === null ? "See what changed" : `${n} changed on This change`;
+const NO_MARKS_LINE = "This change does not mark what it changed yet. Compare Live product and This change.";
+function readMarks(search, route, storage) {
+  const raw = new URLSearchParams(search).get(MARKS_PARAM);
+  if (raw !== null && /^\d{1,4}$/.test(raw)) {
+    try {
+      storage?.setItem(MARKS_KEY, JSON.stringify({ route, n: Number(raw) }));
+    } catch {
+    }
+    return Number(raw);
+  }
+  try {
+    const kept = JSON.parse(storage?.getItem(MARKS_KEY) ?? "null");
+    return kept && kept.route === route && typeof kept.n === "number" ? kept.n : null;
+  } catch {
+    return null;
+  }
+}
+const OWN = "[data-bridge-toolbar], [data-bridge-overlay]";
+function useMarkedChanges(on, screen) {
+  const [marks, setMarks] = useState(null);
+  useEffect(() => {
+    if (!on) {
+      setMarks(null);
+      return;
+    }
+    const run = () => {
+      const next = markedElements();
+      setMarks((prev) => sameMarks(prev, next) ? prev : next);
+    };
+    const ids = [window.setTimeout(run, 0), window.setTimeout(run, 400), window.setTimeout(run, 1200)];
+    let frame = 0;
+    const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+      if (records.every((r) => r.target instanceof Element && r.target.closest(OWN))) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(run);
+    });
+    mo?.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [CHANGE_ATTR] });
+    return () => {
+      ids.forEach((id) => window.clearTimeout(id));
+      cancelAnimationFrame(frame);
+      mo?.disconnect();
+    };
+  }, [on, screen]);
+  return marks;
+}
 const PIN_ATTR = "data-bridge-pin";
 const PIN_CLASS = "bridge-pin";
 const STYLE_ATTR = "data-bridge-pinned";
@@ -1045,6 +1104,8 @@ function Toolbar({
   const outlines = outlinePick ?? open;
   const toggleOutlines = useCallback(() => setOutlinePick((p) => !(p ?? open)), [open]);
   const canOutline = facts?.mode === "tokens" && (facts.tokens.length ?? 0) > 0;
+  const isCode = !tg && Boolean(facts) && facts.mode !== "tokens";
+  const canMark = isCode && side === "after";
   const live = useLiveSheet(liveUrl, outlines && canOutline, side === "before" && facts?.mode === "tokens");
   const onePairs = usePairs(tg ? null : facts, liveUrl, brand2, side === "before");
   const pairs = tg ? T?.pairs ?? [] : onePairs;
@@ -1058,11 +1119,15 @@ function Toolbar({
     screenKey,
     tg ? "after" : "before"
   );
+  const marks = useMarkedChanges(canMark, screenKey);
+  const marksOn = outlines && canMark && Boolean(marks?.length);
+  const showing = outlinesOn || marksOn;
+  const found = outlinesOn ? diff?.surfaces ?? null : marksOn ? marks : null;
   const nameOf = (v) => facts?.tokens.find((t) => t.cssVar === v)?.name ?? v;
   const [shown, setShown] = useState({ count: 0, obstacles: [] });
   const setShownStable = useCallback((next) => setShown((p) => JSON.stringify(p) === JSON.stringify(next) ? p : next), []);
   const outlineBoxes = useRef([]);
-  outlineBoxes.current = outlinesOn ? shown.obstacles : [];
+  outlineBoxes.current = showing ? shown.obstacles : [];
   const [emphasis, setEmphasis] = useState(null);
   const [flash, setFlash] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
@@ -1073,14 +1138,14 @@ function Toolbar({
   const reduced = useMedia("(prefers-reduced-motion: reduce)");
   usePinnedBridgeTokens(liveTokensUrl(build), theme);
   useEffect(() => {
-    if (!outlinesOn || reduced) {
+    if (!showing || reduced) {
       setFlash(false);
       return;
     }
     setFlash(true);
     const id = window.setTimeout(() => setFlash(false), 1500);
     return () => window.clearTimeout(id);
-  }, [outlinesOn, reduced]);
+  }, [showing, reduced]);
   useEffect(() => {
     if (!sheetOpen) setEmphasis(null);
   }, [sheetOpen]);
@@ -1096,6 +1161,13 @@ function Toolbar({
   useEffect(() => {
     if (shownIn && theme !== shownIn) setShownIn(null);
   }, [theme, shownIn]);
+  const waiting = useMemo(() => isCode && side === "before" ? readMarks(window.location.search, hash, session()) : null, [isCode, side, hash]);
+  useEffect(() => {
+    if (!new URLSearchParams(window.location.search).has(MARKS_PARAM)) return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete(MARKS_PARAM);
+    window.history.replaceState(window.history.state, "", url);
+  }, []);
   useEffect(() => {
     const y = readScroll(window.location.search);
     if (y === null) return;
@@ -1121,16 +1193,16 @@ function Toolbar({
       }
       const here2 = { search: window.location.search, hash: window.location.hash };
       if (next === "before" && build.production) {
-        window.location.assign(sameScreenOn(build.production, here2, { change, returnTo: window.location.origin, scroll: window.scrollY }));
+        window.location.assign(sameScreenOn(build.production, here2, { change, returnTo: window.location.origin, scroll: window.scrollY, marks: marks?.length ?? null }));
       } else if (next === "after" && returnTo) {
         window.location.assign(sameScreenOn(returnTo, here2, { change, scroll: window.scrollY }));
       }
     },
-    [side, facts, build, change, returnTo]
+    [side, facts, build, change, returnTo, marks]
   );
   useEffect(() => {
     const onKey = (e) => {
-      if (canOutline && !noDiff && isKey(e, "c")) {
+      if ((canOutline && !noDiff || canMark && marks?.length) && isKey(e, "c")) {
         e.preventDefault();
         toggleOutlines();
         return;
@@ -1141,7 +1213,7 @@ function Toolbar({
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [choose, side, canOutline, noDiff, toggleOutlines]);
+  }, [choose, side, canOutline, canMark, marks, noDiff, toggleOutlines]);
   useEffect(() => {
     if (!isolate) return;
     const onEscape = (e) => {
@@ -1183,7 +1255,7 @@ function Toolbar({
       window.removeEventListener("hashchange", measure);
       document.body.style.paddingBottom = "";
     };
-  }, [dock, open, facts, shown, outlinesOn]);
+  }, [dock, open, facts, shown, showing]);
   const toggleOpen = (next) => {
     setOpen(next);
     remember(OPEN_KEY, next ? "1" : "0");
@@ -1236,8 +1308,8 @@ function Toolbar({
   const behind = facts?.behind ? "Live has new changes since this change started." : null;
   const shared = screens?.length && screens.every((s) => s.tenant === screens[0].tenant && s.theme === screens[0].theme) ? screens[0] : null;
   const shopOf = (t) => shops.find((x) => x.id === t)?.name ?? t;
-  const surfaces = useMemo(() => outlinesOn ? diff?.surfaces ?? [] : [], [outlinesOn, diff]);
-  const shownCount = outlinesOn && diff ? shown.count : null;
+  const surfaces = useMemo(() => found ?? [], [found]);
+  const shownCount = showing && found ? shown.count : null;
   const order = useMemo(() => {
     const on = surfaces.map((s, i) => ({ s, i })).filter(({ s }) => rendered(s.el));
     const places = on.map(({ s }) => {
@@ -1247,12 +1319,12 @@ function Toolbar({
     });
     return readingOrder(places).map((k) => on[k].i);
   }, [surfaces]);
-  const total = outlinesOn && diff ? order.length : null;
+  const total = showing && found ? order.length : null;
   const current = position !== null ? order[position] ?? null : null;
   useEffect(() => {
     setPosition(null);
     setAnnounce("");
-  }, [screenKey, outlinesOn]);
+  }, [screenKey, showing]);
   useEffect(() => {
     if (position !== null && position >= order.length) setPosition(null);
   }, [order.length, position]);
@@ -1281,7 +1353,7 @@ function Toolbar({
   ] }) : noDiff ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
     /* @__PURE__ */ jsx("span", { children: noDifferenceText(noDiff, shops) }),
     /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", onClick: fixNoDiff, className: styles.noteAction, children: noDiff.kind === "theme" ? `Switch to ${noDiff.touched}` : `Switch to ${brandName(shops, noDiff.touched)}` })
-  ] }) : (outlinesOn || side === "before") && live.state === "error" ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: "Could not load the live product. Check your connection, then try again." }) : total === 0 ? tg ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: TOGETHER_EMPTY_LINE }) : elsewhere.length ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
+  ] }) : open && canMark && marks?.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: NO_MARKS_LINE }) : (outlinesOn || side === "before") && live.state === "error" ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: "Could not load the live product. Check your connection, then try again." }) : total === 0 ? tg ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: TOGETHER_EMPTY_LINE }) : elsewhere.length ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
     /* @__PURE__ */ jsx("span", { children: elsewhereLine(elsewhere.map((sc) => sc.label)) }),
     /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "md", render: /* @__PURE__ */ jsx("a", { href: screenHref(elsewhere[0]) }), onClick: goTo(elsewhere[0]), className: styles.noteAction, children: [
       "Go to ",
@@ -1314,16 +1386,17 @@ function Toolbar({
   const subtleOf = (before, after) => isSubtle(before, after) ? /* @__PURE__ */ jsx("span", { className: styles.subtle, children: "Subtle change" }) : null;
   const roleGroups = [...visiblePairs.reduce((m, p) => m.set(p.token.name, [...m.get(p.token.name) ?? [], p]), /* @__PURE__ */ new Map())].map(([name2, list2]) => ({ name: name2, pairs: list2 }));
   const tokenNames = (facts?.tokens ?? []).map((t) => t.name);
-  const summary = shownCount === null ? null : surfaceLine(diff.surfaces.flatMap((s) => s.roots.map(nameOf)), total ?? shownCount);
-  const countText = !outlinesOn ? "Show what changed" : total === null ? "Finding changes" : total === 0 ? "Nothing changed here" : position !== null ? positionLabel(position, total) : changeCount(total);
-  const toggleTip = outlinesOn ? `${summary ? `${summary}. ` : ""}Press C to hide the outlines.` : `Outline what ${tokenNames.length === 1 ? tokenNames[0] : "this change"} changes on this screen. Press C.`;
-  const nav2 = canOutline ? /* @__PURE__ */ jsx(
+  const markNames = (marks ?? []).map((m) => m.label);
+  const summary = shownCount === null ? null : marksOn ? `Marked by this change: ${markNames.slice(0, 3).join(", ")}${markNames.length > 3 ? ` and ${markNames.length - 3} more` : ""}` : surfaceLine(diff.surfaces.flatMap((s) => s.roots.map(nameOf)), total ?? shownCount);
+  const countText = !showing ? "Show what changed" : total === null ? "Finding changes" : total === 0 ? "Nothing changed here" : position !== null ? positionLabel(position, total) : changeCount(total);
+  const toggleTip = showing ? `${summary ? `${summary}. ` : ""}Press C to hide the outlines.` : `Outline what ${tokenNames.length === 1 ? tokenNames[0] : "this change"} changes on this screen. Press C.`;
+  const nav2 = canOutline || canMark && marks?.length ? /* @__PURE__ */ jsx(
     ChangeNav,
     {
       countText,
       tip: toggleTip,
-      outlinesOn,
-      disabled: Boolean(noDiff),
+      outlinesOn: showing,
+      disabled: canOutline && Boolean(noDiff),
       total,
       isolate: isolateOn,
       announce,
@@ -1331,6 +1404,15 @@ function Toolbar({
       onStep: step,
       onIsolate: setIsolate
     }
+  ) : isCode && side === "before" && waiting !== 0 ? (
+    // Live product: the marked areas are on This change. The count when the switch carried it, else where to look.
+    /* @__PURE__ */ jsx("div", { className: styles.nav, children: /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Go to This change to see ",
+      waiting === 1 ? "it" : "them",
+      " outlined. ",
+      /* @__PURE__ */ jsx(Kbd, { keys: "B", size: "sm" }),
+      " flips sides."
+    ] }), children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", iconStart: ScanSearch, disabled: !canFlip, onClick: () => choose("after"), className: styles.countButton, children: waitingText(waiting) }) }) })
   ) : null;
   const shownSurfaces = surfaces.map((s, i) => ({ s, i })).filter(({ s }) => shownRect(s.el));
   const focusSurface = (i) => {
@@ -1341,6 +1423,15 @@ function Toolbar({
     if (order.includes(i)) setPosition(order.indexOf(i));
   };
   const tokensOf = (x) => [...new Set(x.roots.map(nameOf))].join(", ");
+  const focusMark = (i) => {
+    const el = marks?.[i]?.el;
+    if (!el) return;
+    if (!marksOn) setOutlinePick(true);
+    if (!isPage(el)) el.scrollIntoView({ block: "center", behavior: reduced ? "auto" : "smooth" });
+    setEmphasis(i);
+    if (order.includes(i)) setPosition(order.indexOf(i));
+  };
+  const footLine = tg ? facts ? "Screens are measured per change, not for this mix. Show what changed outlines this screen." : "Reading the changes." : !facts ? "Reading the change." : isCode ? side === "before" ? "What this change adds or changes is outlined on This change." : marks?.length ? null : NO_MARKS_LINE : "The screens this change affects are not measured yet.";
   const sides2 = /* @__PURE__ */ jsx(ButtonGroup, { appearance: "attached", "aria-label": "Compare", className: styles.sides, children: ["before", "after"].map((s) => /* @__PURE__ */ jsx(
     Tooltip,
     {
@@ -1381,7 +1472,7 @@ function Toolbar({
       "data-dock": place.dock,
       style: place.lift ? { paddingBottom: `${place.lift}px` } : void 0,
       children: [
-        outlinesOn && surfaces.length ? /* @__PURE__ */ jsx(
+        showing && surfaces.length ? /* @__PURE__ */ jsx(
           ChangeOutlines,
           {
             surfaces,
@@ -1392,6 +1483,12 @@ function Toolbar({
             bar: () => root.current?.getBoundingClientRect() ?? null,
             onShown: setShownStable,
             tip: (s) => {
+              if (marksOn) {
+                return /* @__PURE__ */ jsx("span", { className: styles.tip, children: /* @__PURE__ */ jsxs("span", { className: styles.tipText, children: [
+                  /* @__PURE__ */ jsx("span", { children: s.label }),
+                  /* @__PURE__ */ jsx("span", { className: styles.tipStep, children: "New or changed in this change" })
+                ] }) });
+              }
               const prop = s.props.find((p) => /^rgb/.test(p.before) && /^rgb/.test(p.after));
               const token = prop ? visiblePairs.find((p) => p.color && toHex(p.after) === toHex(prop.after) && toHex(p.before) === toHex(prop.before)) : null;
               const name2 = token?.token.name ?? [...new Set(s.roots.map(nameOf))].slice(0, 2).join(", ");
@@ -1423,6 +1520,7 @@ function Toolbar({
             "aria-label": `Bridge: ${label}, ${title2}`,
             "data-side": side,
             "data-diff-ms": outlinesOn ? diff?.ms : void 0,
+            "data-marks": canMark ? marks?.length ?? void 0 : void 0,
             "data-diff-count": shownCount ?? void 0,
             "data-diff-total": total ?? void 0,
             "data-diff-elements": outlinesOn ? diff?.elements.length : void 0,
@@ -1490,6 +1588,28 @@ function Toolbar({
                           "."
                         ] }) : null
                       ] }) : null,
+                      canMark && marks?.length ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "aria-label": `Changed here, ${marks.length}`, children: [
+                        /* @__PURE__ */ jsxs("p", { className: styles.sectionTitle, children: [
+                          "Changed here · ",
+                          marks.length
+                        ] }),
+                        /* @__PURE__ */ jsx("ul", { className: styles.rows, children: marks.map((m, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "md",
+                            fullWidth: true,
+                            className: styles.row,
+                            "data-emphasis": marksOn && emphasis === i || void 0,
+                            onMouseEnter: () => marksOn && setEmphasis(i),
+                            onMouseLeave: () => setEmphasis((e) => e === i ? null : e),
+                            onFocus: () => marksOn && setEmphasis(i),
+                            onBlur: () => setEmphasis((e) => e === i ? null : e),
+                            onClick: () => focusMark(i),
+                            children: /* @__PURE__ */ jsx("span", { className: styles.rowText, children: /* @__PURE__ */ jsx("span", { className: styles.rowName, children: m.label }) })
+                          }
+                        ) }, i)) })
+                      ] }) : null,
                       outlinesOn && shownSurfaces.length ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "aria-label": `Changed here, ${shownSurfaces.length}`, children: [
                         /* @__PURE__ */ jsxs("p", { className: styles.sectionTitle, children: [
                           "Changed here · ",
@@ -1570,7 +1690,7 @@ function Toolbar({
                         behind
                       ] }) : null,
                       /* @__PURE__ */ jsx("div", { className: styles.sheetPhone, children: /* @__PURE__ */ jsx(Link, { variant: "standalone", href: studio2, className: styles.back, children: "Back to Studio" }) }),
-                      screens === null ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: tg ? facts ? "Screens are measured per change, not for this mix. Show what changed outlines this screen." : "Reading the changes." : facts ? "The screens this change affects are not measured yet." : "Reading the change." }) : screens.length === 0 ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: "No admin screen changes. Component examples may still change: Studio lists them." }) : null
+                      screens === null ? footLine ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: footLine }) : null : screens.length === 0 ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: "No admin screen changes. Component examples may still change: Studio lists them." }) : null
                     ] })
                   ] }),
                   /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", render: /* @__PURE__ */ jsx("a", { href: studio2 }), className: styles.studio, children: "Back to Studio" })
@@ -1615,4 +1735,4 @@ function useHash() {
 export {
   ToolbarRoot as default
 };
-//# sourceMappingURL=Toolbar-DJUb3p2c.js.map
+//# sourceMappingURL=Toolbar-ByLHemKF.js.map