@bridge-ds/toolbar 0.0.0-stage → 0.2.0

package/dist/Toolbar-CzR1TM9x.js

@@ -0,0 +1,1486 @@
+if (typeof document !== 'undefined' && !document.querySelector('style[data-bridge-toolbar-css="' + "Toolbar" + '"]')) {
+  const style = document.createElement('style');
+  style.setAttribute('data-bridge-toolbar-css', "Toolbar");
+  style.textContent = "/* The Bridge toolbar floats over the admin's content column: bottom right by default, docked left or centre on demand,\n   lifted above the page's primary buttons and the outlined surfaces when every dock would cover one. One row, 44px,\n   on desktop; compact density so every control is 36px. The border stays neutral. Text: 14 and 12, plus the wordmark.\n   Tokens only. */\n._anchor_nhlur_5 {\n  position: fixed;\n  inset-inline: var(--space-4);\n  bottom: var(--space-4);\n  z-index: var(--layer-sticky);\n  display: flex;\n  justify-content: flex-end;\n  pointer-events: none;\n}\n\n._anchor_nhlur_5[data-dock=\"start\"] {\n  justify-content: flex-start;\n}\n\n._anchor_nhlur_5[data-dock=\"center\"] {\n  justify-content: center;\n}\n\n/* Never over the sidebar: the docks live in the content column (the shell's sidebar is size-60 wide above 1024px). */\n@media (min-width: 1025px) {\n  ._anchor_nhlur_5 {\n    inset-inline-start: calc(var(--size-60) + var(--space-4));\n  }\n}\n\n._panel_nhlur_30,\n._pill_nhlur_31 {\n  box-sizing: border-box;\n  border: var(--border-width-default) solid var(--color-border-default);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--elevation-overlay);\n  color: var(--color-text-default);\n  font-family: var(--typography-ui-family);\n  font-size: var(--typography-ui-size);\n  line-height: var(--typography-ui-line-height);\n  pointer-events: auto;\n}\n\n._panel_nhlur_30[data-dragging],\n._pill_nhlur_31[data-dragging] {\n  box-shadow: var(--elevation-modal);\n}\n\n/* Desktop: one row, 44px tall with its border (36px controls); a note, when there is one, takes a second row. */\n._panel_nhlur_30 {\n  display: grid;\n  grid-template-areas:\n    \"grip title actions collapse\"\n    \"note note note note\";\n  grid-template-rows: calc(var(--size-11) - 2 * var(--border-width-default)) auto;\n  grid-template-columns: auto auto minmax(0, 1fr) auto;\n  align-items: center;\n  column-gap: var(--space-2);\n  max-width: min(100%, var(--size-300));\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-overlay);\n}\n\n._grip_nhlur_63 {\n  grid-area: grip;\n  cursor: grab;\n  touch-action: none;\n}\n\n._panel_nhlur_30[data-dragging] ._grip_nhlur_63 {\n  cursor: grabbing;\n}\n\n._title_nhlur_73 {\n  display: flex;\n  grid-area: title;\n  align-items: baseline;\n  gap: var(--space-2);\n  min-width: 0;\n  margin: 0;\n}\n\n._brand_nhlur_82 {\n  flex: none;\n  font-family: var(--font-family-display);\n  font-size: var(--typography-ui-size);\n  font-weight: var(--font-weight-semibold);\n}\n\n/* Desktop: the wordmark only; the change's name is in the pill and in the This change tooltip. */\n._panel_nhlur_30 ._name_nhlur_90 {\n  display: none;\n}\n\n._name_nhlur_90,\n._pillTitle_nhlur_95 {\n  overflow: hidden;\n  font-weight: var(--font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._actions_nhlur_102 {\n  display: flex;\n  grid-area: actions;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n._sides_nhlur_111 {\n  flex: none;\n}\n\n._collapse_nhlur_115 {\n  grid-area: collapse;\n}\n\n._phoneOnly_nhlur_119 {\n  display: none;\n}\n\n._desktopOnly_nhlur_123 {\n  display: contents;\n}\n\n._count_nhlur_127 {\n  margin-inline-start: var(--space-1-5);\n  color: var(--color-text-muted);\n  font-variant-numeric: tabular-nums;\n}\n\n/* The colour pair of each changed token: a 24px split swatch, before half and after half. Values in the tooltip. */\n._swatches_nhlur_134 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  border-radius: var(--radius-inset);\n}\n\n._swatches_nhlur_134:focus-visible {\n  outline: var(--focus-ring-width) solid var(--focus-ring-color);\n  outline-offset: var(--focus-ring-offset);\n}\n\n._split_nhlur_146 {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: none;\n  width: var(--size-6);\n  height: var(--size-6);\n  overflow: hidden;\n  border: var(--border-width-default) solid var(--color-border-strong);\n  border-radius: var(--radius-pill);\n}\n\n._split_nhlur_146 > span {\n  flex: 1 1 0;\n}\n\n/* Under 1.1:1 the two halves look alike: say so, so a near-white change reads as intended. */\n._subtle_nhlur_162 {\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n  white-space: nowrap;\n}\n\n._more_nhlur_169 {\n  white-space: nowrap;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  font-variant-numeric: tabular-nums;\n}\n\n._noteRow_nhlur_176 {\n  grid-area: note;\n  min-width: 0;\n  padding-block-end: var(--space-1);\n}\n\n._note_nhlur_176 {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n._noteRow_nhlur_176 ._note_nhlur_176 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0 var(--space-2);\n  padding-inline-start: var(--space-2);\n  color: var(--color-text-default);\n}\n\n._noteAction_nhlur_198 {\n  flex: none;\n}\n\n._sheet_nhlur_202 {\n  width: min(90vw, var(--size-80));\n}\n\n._list_nhlur_206 {\n  display: grid;\n  max-height: var(--size-60);\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n._item_nhlur_215 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  min-height: var(--control-height-md);\n}\n\n._screenLink_nhlur_223,\n._here_nhlur_224 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1-5);\n  min-height: var(--control-height-md);\n}\n\n._here_nhlur_224 {\n  font-weight: var(--font-weight-semibold);\n}\n\n._meta_nhlur_235 {\n  flex: none;\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n/* Changed here: one focusable row per surface. Line 1 its role, line 2 its tokens (muted, 12). Nothing truncates. */\n._rows_nhlur_243 {\n  display: grid;\n  max-height: var(--size-60);\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  list-style: none;\n}\n\n._row_nhlur_243 {\n  height: auto;\n  min-height: var(--control-height-md);\n  padding-block: var(--space-1);\n  justify-content: flex-start;\n  text-align: start;\n}\n\n._rowText_nhlur_260 {\n  display: grid;\n  min-width: 0;\n  font-weight: var(--font-weight-regular);\n  white-space: normal;\n}\n\n._rowName_nhlur_267 {\n  color: var(--color-text-default);\n  font-size: var(--typography-ui-size);\n  line-height: var(--typography-ui-line-height);\n}\n\n._rowMeta_nhlur_273 {\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n._tipText_nhlur_279 {\n  display: grid;\n}\n\n._tipStep_nhlur_283 {\n  opacity: 0.8;\n}\n\n._sheetFoot_nhlur_287 {\n  margin-top: var(--space-2);\n}\n\n._sheetSection_nhlur_291 {\n  margin-top: var(--space-2);\n  padding-top: var(--space-2);\n  border-top: var(--border-width-default) solid var(--color-border-default);\n}\n\n._sheetSection_nhlur_291:first-child {\n  margin-top: 0;\n  padding-top: 0;\n  border-top: 0;\n}\n\n._sectionTitle_nhlur_303 {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n}\n\n/* A separate notice, not part of a list. */\n._notice_nhlur_309 {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--space-1-5);\n  margin: var(--space-2) 0 0;\n  padding-top: var(--space-2);\n  border-top: var(--border-width-default) solid var(--color-border-default);\n  color: var(--color-text-muted);\n  font-size: var(--typography-caption-size);\n  line-height: var(--typography-caption-line-height);\n}\n\n/* In the sheet on phones only: the token pairs and the way back. */\n._sheetPhone_nhlur_322 {\n  display: none;\n}\n\n._back_nhlur_326 {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--control-height-md);\n}\n\n._pill_nhlur_31 {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr) auto auto;\n  align-items: center;\n  gap: var(--space-2);\n  max-width: min(100%, var(--size-120));\n  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-4);\n  border-radius: var(--radius-pill);\n}\n\n/* With a note under it, the pill becomes a small card. */\n._pill_nhlur_31[data-note] {\n  border-radius: var(--radius-overlay);\n}\n\n._pill_nhlur_31 ._noteRow_nhlur_176 {\n  grid-column: 1 / -1;\n  padding-inline-end: var(--space-3);\n}\n\n._pill_nhlur_31 ._noteRow_nhlur_176 ._note_nhlur_176 {\n  padding-inline-start: 0;\n}\n\n/* Show what changed: a dashed Deep Harbor frame (Bridge's tool colour, not the product's) on each changed surface,\n   with a faint Deep Harbor tint and a role chip. Fixed layer: no pointer events, no focus, no layout. */\n._overlay_nhlur_358 {\n  position: fixed;\n  inset: 0;\n  z-index: var(--layer-sticky);\n  pointer-events: none;\n}\n\n._box_nhlur_365 {\n  position: absolute;\n  box-sizing: border-box;\n  outline: var(--border-width-strong) dashed var(--color-action-primary-bg);\n  outline-offset: var(--border-width-strong);\n}\n\n/* A page-sized surface: an inset frame, so it reads as a selection, not as the window edge. */\n._box_nhlur_365[data-page] {\n  outline-offset: 0;\n  border-radius: var(--radius-container);\n}\n\n/* No tint on the page frame: it would tint the very colour being compared. */\n._box_nhlur_365[data-page] ._tint_nhlur_379 {\n  display: none;\n}\n\n/* No room above (top of the viewport): under the surface instead. */\n/* No room above (top of the viewport): inside the surface's top-left corner instead. */\n._box_nhlur_365[data-inside] ._chip_nhlur_385 {\n  top: 0;\n  bottom: auto;\n  left: 0;\n}\n\n/* The surface a list row points at: solid frame, stronger tint. */\n._box_nhlur_365[data-emphasis] {\n  outline-style: solid;\n}\n\n._box_nhlur_365[data-emphasis] ._tint_nhlur_379 {\n  opacity: 0.1;\n}\n\n._box_nhlur_365[data-page] ._chip_nhlur_385 {\n  top: var(--space-1);\n  bottom: auto;\n  left: var(--space-1);\n}\n\n._tint_nhlur_379 {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-action-primary-bg);\n  opacity: 0.04;\n}\n\n/* Above the surface's top-left corner, so it never hides the surface's own content. */\n/* Hidden by default: shown on hover, from its list row, and briefly when outlines turn on. */\n._chip_nhlur_385 {\n  position: absolute;\n  visibility: hidden;\n  bottom: calc(100% + var(--border-width-strong) * 2);\n  left: calc(var(--border-width-strong) * -2);\n  max-width: var(--size-60);\n  overflow: hidden;\n  padding: 0 var(--space-1-5);\n  border-radius: var(--radius-inset);\n  background-color: var(--color-action-primary-bg);\n  color: var(--color-action-primary-text);\n  font-family: var(--typography-ui-family);\n  font-size: var(--typography-caption-size);\n  font-weight: var(--font-weight-medium);\n  line-height: var(--typography-caption-line-height);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._chip_nhlur_385[data-shown] {\n  visibility: visible;\n}\n\n._tip_nhlur_279 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n@media (max-width: 760px) {\n  ._anchor_nhlur_5 {\n    inset-inline: var(--space-2);\n    bottom: var(--space-2);\n  }\n\n  /* Phone, open: docked to the bottom edge as one 44px row (sides, Changes, outline toggle, collapse). */\n  ._anchor_nhlur_5[data-open] {\n    inset-inline: 0;\n    bottom: 0;\n  }\n\n  ._panel_nhlur_30 {\n    grid-template-areas:\n      \"actions toggle collapse\"\n      \"note note note\";\n    grid-template-rows: calc(var(--size-11) - var(--border-width-default)) auto;\n    grid-template-columns: minmax(0, 1fr) auto auto;\n    column-gap: var(--space-2);\n    width: 100%;\n    padding: 0 var(--space-1);\n    border-width: var(--border-width-default) 0 0;\n    border-radius: 0;\n  }\n\n  ._title_nhlur_73 {\n    display: none;\n  }\n\n  ._phoneOnly_nhlur_119 {\n    display: inline-flex;\n    grid-area: toggle;\n  }\n\n  ._grip_nhlur_63,\n  ._brand_nhlur_82,\n  ._studio_nhlur_481,\n  ._desktopOnly_nhlur_123 {\n    display: none;\n  }\n\n  ._actions_nhlur_102 {\n    justify-content: space-between;\n  }\n\n  ._noteRow_nhlur_176 ._note_nhlur_176 {\n    padding-inline-start: 0;\n  }\n\n  ._pill_nhlur_31 {\n    grid-template-columns: minmax(0, 1fr) auto auto;\n  }\n\n  ._sheetPhone_nhlur_322 {\n    display: block;\n  }\n}\n\n/* Below 480px the note's action takes its own line. */\n@media (max-width: 480px) {\n  ._noteAction_nhlur_198 {\n    flex-basis: 100%;\n    justify-content: flex-start;\n  }\n}\n";
+  document.head.appendChild(style);
+}
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useLayoutEffect, useMemo, useRef, useCallback } from "react";
+import { ThemeProvider, Tooltip, Button, ButtonGroup, IconButton, Popover, PopoverTrigger, PopoverContent, Checkbox, Icon, Link, Badge } from "@bridge-ds/react";
+import { GripVertical, ListChecks, ChevronUp, Check, Info, Minimize2, ScanSearch } from "lucide-react";
+import { g as githubReads, D as DEFAULT_PROXY, l as loadBuild, u as useDocumentScope } from "./index-3f0I3tAL.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 TOGETHER_HINT, P as PARAM, u as isSubtle, v as toHex, x as fromText, y as isFlipKey, z as placeToolbar, A as togetherLabel, B as changeSummary, C as dockAt, D as stepDock, E as DOCK_KEY } from "./session-CzlIsFDY.js";
+const VISUAL_BRANCH = "bridge-visual";
+const cacheKey = (n) => `bridge-admin:facts:v3:${n}`;
+function session$1() {
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function readsOf(build) {
+  return githubReads({ team: build.ds ?? `${build.owner}/${build.repo}`, proxy: build.proxy === void 0 ? DEFAULT_PROXY : build.proxy });
+}
+async function readManifest(gh, build, R, n, sha) {
+  const root = await gh.api(`${R}/git/trees/${VISUAL_BRANCH}`).catch(() => null);
+  const pr = root?.tree.find((e) => e.path === `pr-${n}` && e.type === "tree");
+  if (!pr) return null;
+  const commits = await gh.api(`${R}/git/trees/${pr.sha}`).catch(() => null);
+  if (!commits?.tree.some((e) => e.path === sha && e.type === "tree")) return null;
+  return gh.file(build.owner, build.repo, VISUAL_BRANCH, `pr-${n}/${sha}/manifest.json`).then((t) => JSON.parse(t)).catch(() => null);
+}
+async function loadChange(build, n, gh = readsOf(build)) {
+  const store = session$1();
+  try {
+    const cached = store?.getItem(cacheKey(n));
+    if (cached) return JSON.parse(cached);
+  } catch {
+  }
+  const R = `/repos/${build.owner}/${build.repo}`;
+  const [pull, files] = await Promise.all([
+    gh.api(`${R}/pulls/${n}`),
+    gh.api(`${R}/pulls/${n}/files?per_page=100`)
+  ]);
+  const tokenFiles = files.filter((f) => f.filename.endsWith(".tokens.json")).slice(0, 8);
+  const version = (sha, path) => gh.file(build.owner, build.repo, sha, path).then((t) => JSON.parse(t)).catch(() => null);
+  const tokenReads = Promise.all(
+    tokenFiles.map(
+      async (f) => tokenChanges(
+        f.filename,
+        f.status === "added" ? null : await version(pull.base.sha, f.previous_filename ?? f.filename),
+        f.status === "removed" ? null : await version(pull.head.sha, f.filename)
+      )
+    )
+  );
+  const [compare, manifest, tokens] = await Promise.all([
+    gh.api(`${R}/compare/${encodeURIComponent(pull.base.ref)}...${pull.head.sha}`).catch(() => null),
+    readManifest(gh, build, R, n, pull.head.sha),
+    tokenReads
+  ]);
+  const names = files.map((f) => f.filename);
+  const facts = {
+    number: pull.number,
+    title: readableTitle(pull.title),
+    url: pull.html_url,
+    sha: pull.head.sha,
+    mode: changeMode(names),
+    files: names,
+    tokens: tokens.flat(),
+    behind: typeof compare?.behind_by === "number" ? compare.behind_by : null,
+    screens: manifest ? changedScreens(manifest.shots) : null
+  };
+  try {
+    store?.setItem(cacheKey(n), JSON.stringify(facts));
+  } catch {
+  }
+  return facts;
+}
+const togetherKey = (n) => `bridge-admin:together:v1:${n}`;
+async function loadTogetherChange(build, n, gh = readsOf(build)) {
+  const store = session$1();
+  try {
+    const cached = store?.getItem(togetherKey(n));
+    if (cached) return JSON.parse(cached);
+  } catch {
+  }
+  const R = `/repos/${build.owner}/${build.repo}`;
+  const pull = await gh.api(`${R}/pulls/${n}`);
+  const compare = await gh.api(
+    `${R}/compare/${encodeURIComponent(build.defaultBranch ?? pull.base.ref)}...${pull.head.sha}`
+  );
+  const files = compare.files ?? [];
+  const names = files.flatMap((f) => f.previous_filename ? [f.filename, f.previous_filename] : [f.filename]);
+  const root = `${(build.tokensRoot ?? "packages/tokens/src").replace(/^\/+|\/+$/g, "")}/`;
+  const tokenOnly = files.length > 0 && files.length < 300 && names.every((f) => f.startsWith(root) && f.endsWith(".tokens.json") || /contrast\.checks\.json$/.test(f) || f.startsWith(".changeset/"));
+  const start = compare.merge_base_commit?.sha;
+  let source = null;
+  if (tokenOnly && start) {
+    const text = (sha, path) => gh.file(build.owner, build.repo, sha, path);
+    const mine = files.filter((f) => f.filename.startsWith(root) && f.filename.endsWith(".tokens.json"));
+    const src = { number: n, base: {}, head: {}, files: mine.map((f) => f.filename.slice(root.length)) };
+    await Promise.all(
+      mine.map(async (f) => {
+        const rel = f.filename.slice(root.length);
+        src.base[rel] = f.status === "added" ? void 0 : await text(start, f.previous_filename ?? f.filename);
+        src.head[rel] = f.status === "removed" ? void 0 : await text(pull.head.sha, f.filename);
+      })
+    );
+    source = src;
+  }
+  const facts = { number: pull.number, title: readableTitle(pull.title), url: pull.html_url, sha: pull.head.sha, mode: tokenOnly ? "tokens" : "code", source };
+  try {
+    store?.setItem(togetherKey(n), JSON.stringify(facts));
+  } catch {
+  }
+  return facts;
+}
+const VAR = /var\(\s*(--[\w-]+)/g;
+function varsIn(value) {
+  return [...value.matchAll(VAR)].map((m) => m[1]);
+}
+function dependents(rules, changed) {
+  const deps = /* @__PURE__ */ new Map();
+  for (const r of rules) {
+    for (const d of r.decls) {
+      if (!d.prop.startsWith("--")) continue;
+      for (const v of varsIn(d.value)) {
+        if (!deps.has(d.prop)) deps.set(d.prop, /* @__PURE__ */ new Set());
+        deps.get(d.prop).add(v);
+      }
+    }
+  }
+  const roots = new Map(changed.map((c) => [c, /* @__PURE__ */ new Set([c])]));
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const [name2, uses] of deps) {
+      for (const u of uses) {
+        const from = roots.get(u);
+        if (!from) continue;
+        if (!roots.has(name2)) roots.set(name2, /* @__PURE__ */ new Set());
+        const mine = roots.get(name2);
+        for (const f of from) {
+          if (!mine.has(f)) {
+            mine.add(f);
+            grew = true;
+          }
+        }
+      }
+    }
+  }
+  return roots;
+}
+const SIDES = ["top", "right", "bottom", "left"];
+const SHORTHANDS = {
+  background: ["background-color", "background-image"],
+  border: [...SIDES.map((s) => `border-${s}-color`), ...SIDES.map((s) => `border-${s}-width`)],
+  "border-color": SIDES.map((s) => `border-${s}-color`),
+  "border-width": SIDES.map((s) => `border-${s}-width`),
+  "border-block": ["border-top-color", "border-bottom-color", "border-top-width", "border-bottom-width"],
+  "border-inline": ["border-left-color", "border-right-color", "border-left-width", "border-right-width"],
+  "border-radius": ["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"],
+  outline: ["outline-color", "outline-width"],
+  padding: SIDES.map((s) => `padding-${s}`),
+  margin: SIDES.map((s) => `margin-${s}`),
+  inset: SIDES,
+  gap: ["row-gap", "column-gap"],
+  font: ["font-family", "font-size", "font-weight", "line-height"],
+  "text-decoration": ["text-decoration-color", "text-decoration-line"],
+  transition: ["transition-duration", "transition-timing-function"]
+};
+for (const s of SIDES) SHORTHANDS[`border-${s}`] = [`border-${s}-color`, `border-${s}-width`];
+for (const [logical, physical] of [
+  ["border-block-start", "top"],
+  ["border-block-end", "bottom"],
+  ["border-inline-start", "left"],
+  ["border-inline-end", "right"]
+]) {
+  SHORTHANDS[logical] = [`border-${physical}-color`, `border-${physical}-width`];
+  SHORTHANDS[`${logical}-color`] = [`border-${physical}-color`];
+  SHORTHANDS[`${logical}-width`] = [`border-${physical}-width`];
+}
+SHORTHANDS["padding-inline"] = ["padding-left", "padding-right"];
+SHORTHANDS["padding-block"] = ["padding-top", "padding-bottom"];
+SHORTHANDS["margin-inline"] = ["margin-left", "margin-right"];
+SHORTHANDS["margin-block"] = ["margin-top", "margin-bottom"];
+function longhands(prop) {
+  return SHORTHANDS[prop] ?? [prop];
+}
+function splitSelectors(selector) {
+  const out = [];
+  let depth = 0;
+  let cur = "";
+  for (const ch of selector) {
+    if (ch === "(") depth++;
+    if (ch === ")") depth--;
+    if (ch === "," && depth === 0) {
+      out.push(cur.trim());
+      cur = "";
+    } else cur += ch;
+  }
+  if (cur.trim()) out.push(cur.trim());
+  return out;
+}
+const NON_PAINT = /* @__PURE__ */ new Set(["accent-color", "caret-color"]);
+function usages(rules, roots) {
+  const out = /* @__PURE__ */ new Map();
+  for (const r of rules) {
+    const hits = r.decls.filter((d) => !d.prop.startsWith("--") && !NON_PAINT.has(d.prop)).map((d) => ({ d, from: varsIn(d.value).filter((v) => roots.has(v)) })).filter((x) => x.from.length);
+    if (!hits.length) continue;
+    for (const one of splitSelectors(r.selector)) {
+      const m = /::?(before|after|placeholder|marker|selection|backdrop)\b/i.exec(one);
+      const pseudo = m ? `::${m[1].toLowerCase()}` : null;
+      if (pseudo === "::selection") continue;
+      const selector = (m ? one.slice(0, m.index) + one.slice(m.index + m[0].length) : one).trim() || "*";
+      const key = `${selector}|${pseudo ?? ""}`;
+      const u = out.get(key) ?? { selector, pseudo, props: [], roots: [] };
+      for (const { d, from } of hits) {
+        for (const p of longhands(d.prop)) if (!u.props.includes(p)) u.props.push(p);
+        for (const v of from) for (const root of roots.get(v)) if (!u.roots.includes(root)) u.roots.push(root);
+      }
+      out.set(key, u);
+    }
+  }
+  return [...out.values()];
+}
+function outermost(items, contains) {
+  return items.filter((b) => b.floating || !items.some((a) => a !== b && contains(a, b) && b.keys.every((k) => a.keys.includes(k))));
+}
+function surfaceLine(tokenNames, surfaces) {
+  const names = [...new Set(tokenNames)];
+  const tokens = `${names.length} ${names.length === 1 ? "token" : "tokens"} changed: ${names.slice(0, 3).join(", ")}${names.length > 3 ? ` and ${names.length - 3} more` : ""}`;
+  return `${tokens}, on ${surfaces} ${surfaces === 1 ? "surface" : "surfaces"}`;
+}
+function outOfView(n) {
+  return n === 1 ? "Nothing changed in view. 1 surface changes further down: scroll to see it." : `Nothing changed in view. ${n} surfaces change further down: scroll to see them.`;
+}
+const EMPTY_LINE = "This change doesn't touch this screen. Open Screens to see where it does.";
+const LANDMARKS = { main: "Content", header: "Header", nav: "Navigation", aside: "Sidebar", footer: "Footer", form: "Form", dialog: "Dialog" };
+const ROLES = { main: "Content", banner: "Header", navigation: "Navigation", complementary: "Sidebar", contentinfo: "Footer", dialog: "Dialog", toolbar: "Toolbar", tablist: "Tabs", table: "Table", grid: "Table", menu: "Menu", listbox: "List" };
+const MODULES = { mark: "Shop logo", shell: "App shell", column: "Content column", content: "Content", sticky: "Save bar", toolbar: "Save bar", header: "Header", sidebar: "Sidebar", card: "Card", panel: "Panel" };
+const MODULE_CLASS = /^_([a-zA-Z][a-zA-Z0-9]*)_[a-z0-9]+_\d+$/;
+const words = (s) => {
+  const w = s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[-_]+/g, " ").trim().toLowerCase();
+  return w.charAt(0).toUpperCase() + w.slice(1);
+};
+function roleName(info) {
+  const tag = info.tag.toLowerCase();
+  if (tag === "html" || tag === "body") return "Page";
+  if (["svg", "path", "line", "rect", "circle", "g", "polyline", "stop"].includes(tag)) return "Chart";
+  const locals = info.classes.map((c) => MODULE_CLASS.exec(c)?.[1]).filter((l) => Boolean(l));
+  const local = locals.find((l) => MODULES[l]) ?? locals[0];
+  const role = info.ariaLabel || info.role && ROLES[info.role] || LANDMARKS[tag] || (local ? MODULES[local] ?? words(local) : null);
+  const text = local === "mark" ? null : info.text && info.text.length <= 32 && info.text !== role ? info.text : null;
+  if (role) return text ? `${role} (${text})` : role;
+  return text ?? tag;
+}
+function isKey(e, key) {
+  if (e.altKey || e.ctrlKey || e.metaKey || e.key.toLowerCase() !== key) return false;
+  const t = e.target;
+  if (!t) return true;
+  if (t.isContentEditable) return false;
+  const tag = (t.tagName ?? "").toLowerCase();
+  if (tag === "input" || tag === "textarea" || tag === "select") return false;
+  return !(t.closest && t.closest('[role="combobox"], [role="textbox"], [role="searchbox"]'));
+}
+let ruleCache = null;
+function declsOf(style) {
+  return style.cssText.split(";").map((d) => {
+    const i = d.indexOf(":");
+    return i < 0 ? null : { prop: d.slice(0, i).trim().toLowerCase(), value: d.slice(i + 1).trim() };
+  }).filter((d) => Boolean(d && d.prop && d.value));
+}
+function walk(list2, out) {
+  for (const rule of Array.from(list2)) {
+    if (rule instanceof CSSStyleRule) {
+      out.push({ selector: rule.selectorText, decls: declsOf(rule.style) });
+      if (rule.cssRules?.length) walk(rule.cssRules, out);
+    } else if ("cssRules" in rule && rule.cssRules) {
+      walk(rule.cssRules, out);
+    }
+  }
+}
+function pageRules() {
+  const sheets = Array.from(document.styleSheets).filter((s) => !(s.ownerNode instanceof Element && s.ownerNode.hasAttribute("data-bridge-live")));
+  const key = sheets.map((s) => s.href ?? `inline:${s.ownerNode?.textContent?.length ?? 0}`).join("|");
+  if (ruleCache?.key === key) return ruleCache.rules;
+  const rules = [];
+  for (const s of sheets) {
+    try {
+      walk(s.cssRules, rules);
+    } catch {
+    }
+  }
+  ruleCache = { key, rules };
+  return rules;
+}
+function describe(el) {
+  const heading = el.querySelector("h1, h2, h3")?.textContent?.replace(/\s+/g, " ").trim();
+  const own = el.textContent?.replace(/\s+/g, " ").trim();
+  return roleName({
+    tag: el.tagName,
+    role: el.getAttribute("role"),
+    ariaLabel: el.getAttribute("aria-label"),
+    classes: Array.from(el.classList),
+    text: heading || (own && own.length <= 32 ? own : null)
+  });
+}
+function shownRect(el) {
+  const check = el.checkVisibility;
+  if (check && !check.call(el, { opacityProperty: true, visibilityProperty: true })) return null;
+  const r = el.getBoundingClientRect();
+  const w = Math.min(r.right, window.innerWidth) - Math.max(r.left, 0);
+  const h = Math.min(r.bottom, window.innerHeight) - Math.max(r.top, 0);
+  return w > 0 && h > 0 ? r : null;
+}
+const visible = (el) => el.getClientRects().length > 0;
+function changedElements(changedVars, sheet2, ignore, sheetIs = "before") {
+  const live = sheet2;
+  const t0 = performance.now();
+  const rules = pageRules();
+  const roots = dependents(rules, changedVars);
+  const uses = usages(rules, roots);
+  const candidates = /* @__PURE__ */ new Map();
+  const ids = /* @__PURE__ */ new WeakMap();
+  let next = 0;
+  for (const u of uses) {
+    let found;
+    try {
+      found = document.querySelectorAll(u.selector);
+    } catch {
+      continue;
+    }
+    for (const el of Array.from(found)) {
+      if (ignore(el) || !visible(el)) continue;
+      if (!ids.has(el)) ids.set(el, next++);
+      const key = `${ids.get(el)}|${u.pseudo ?? ""}`;
+      const c = candidates.get(key) ?? { el, pseudo: u.pseudo, props: /* @__PURE__ */ new Set(), roots: /* @__PURE__ */ new Set() };
+      u.props.forEach((p) => c.props.add(p));
+      u.roots.forEach((r) => c.roots.add(r));
+      candidates.set(key, c);
+    }
+  }
+  for (const el of Array.from(document.querySelectorAll('[style*="var(--"], [stroke*="var(--"], [fill*="var(--"], [stop-color*="var(--"]'))) {
+    if (ignore(el) || !visible(el)) continue;
+    const props = /* @__PURE__ */ new Set();
+    const hit = /* @__PURE__ */ new Set();
+    const take = (prop, value) => {
+      if (!value) return;
+      const from = varsIn(value).filter((v) => roots.has(v));
+      if (!from.length) return;
+      longhands(prop).forEach((p) => props.add(p));
+      from.forEach((v) => roots.get(v).forEach((r) => hit.add(r)));
+    };
+    for (const d of declsOf(el.style ?? { cssText: "" })) take(d.prop, d.value);
+    for (const attr of ["stroke", "fill", "stop-color"]) take(attr, el.getAttribute(attr));
+    if (!props.size) continue;
+    if (!ids.has(el)) ids.set(el, next++);
+    const key = `${ids.get(el)}|`;
+    const c = candidates.get(key) ?? { el, pseudo: null, props: /* @__PURE__ */ new Set(), roots: /* @__PURE__ */ new Set() };
+    props.forEach((p) => c.props.add(p));
+    hit.forEach((r) => c.roots.add(r));
+    candidates.set(key, c);
+  }
+  const list2 = [...candidates.values()].map((c) => ({ ...c, propList: [...c.props] }));
+  const read = () => list2.map((c) => {
+    const cs = getComputedStyle(c.el, c.pseudo);
+    return c.propList.map((p) => cs.getPropertyValue(p));
+  });
+  const still = document.createElement("style");
+  still.setAttribute("data-bridge-still", "");
+  still.textContent = "*, *::before, *::after { transition: none !important; }";
+  document.head.appendChild(still);
+  const media = live.media;
+  let withLive = [];
+  let withChange = [];
+  try {
+    getComputedStyle(document.documentElement).color;
+    live.media = "all";
+    withLive = read();
+    live.media = "not all";
+    withChange = read();
+  } finally {
+    live.media = media;
+    read();
+    still.remove();
+  }
+  if (sheetIs === "after") [withLive, withChange] = [withChange, withLive];
+  const elements = [];
+  list2.forEach((c, i) => {
+    const props = c.propList.map((prop, j) => ({ prop, before: withLive[i][j], after: withChange[i][j] })).filter((p) => p.before !== p.after);
+    if (!props.length) return;
+    const roots2 = [...c.roots];
+    const position = getComputedStyle(c.el).position;
+    elements.push({
+      el: c.el,
+      pseudo: c.pseudo,
+      roots: roots2,
+      props,
+      label: describe(c.el),
+      keys: roots2.flatMap((r) => props.map((p) => `${r}|${p.prop}`)),
+      floating: position === "sticky" || position === "fixed"
+    });
+  });
+  const charts = /* @__PURE__ */ new Map();
+  const plain = [];
+  for (const e of elements) {
+    let svg = e.el.closest("svg");
+    while (svg?.parentElement?.closest("svg")) svg = svg.parentElement.closest("svg");
+    if (!svg) {
+      plain.push(e);
+      continue;
+    }
+    const c = charts.get(svg) ?? { el: svg, pseudo: null, roots: [], props: [], label: "Chart", keys: [], floating: false };
+    for (const r of e.roots) if (!c.roots.includes(r)) c.roots.push(r);
+    for (const p of e.props) if (!c.props.some((x) => x.prop === p.prop)) c.props.push(p);
+    for (const k of e.keys) if (!c.keys.includes(k)) c.keys.push(k);
+    charts.set(svg, c);
+  }
+  const surfaces = outermost([...plain, ...charts.values()], (a, b) => a.el !== b.el && a.el.contains(b.el));
+  return { elements, surfaces, ms: Math.round((performance.now() - t0) * 10) / 10 };
+}
+const IGNORE = "[data-bridge-toolbar], [data-bridge-overlay]";
+function useChangedElements(on, live, vars, screen, sheetIs = "before") {
+  const [result, setResult] = useState(null);
+  const key = vars.join(",");
+  useEffect(() => {
+    if (!on || !live || !key) {
+      setResult(null);
+      return;
+    }
+    const run = () => setResult(changedElements(key.split(","), live, (el) => Boolean(el.closest(IGNORE)), 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 PIN_ATTR = "data-bridge-pin";
+const PIN_CLASS = "bridge-pin";
+const STYLE_ATTR = "data-bridge-pinned";
+const cssCache = /* @__PURE__ */ new Map();
+const valueCache = /* @__PURE__ */ new Map();
+function liveCss(url) {
+  if (!cssCache.has(url)) cssCache.set(url, fetch(url).then((r) => r.ok ? r.text() : Promise.reject(new Error(String(r.status)))));
+  return cssCache.get(url);
+}
+function resolve(css, theme) {
+  const key = `${theme}|${css.length}`;
+  const hit = valueCache.get(key);
+  if (hit) return hit;
+  const names = [...new Set([...css.matchAll(/(--[\w-]+)\s*:/g)].map((m) => m[1]))];
+  const sheet2 = new CSSStyleSheet();
+  sheet2.replaceSync(css.replace(/:root/g, ":host"));
+  const host = document.createElement("div");
+  host.style.display = "none";
+  document.body.appendChild(host);
+  const shadow = host.attachShadow({ mode: "open" });
+  shadow.adoptedStyleSheets = [sheet2];
+  const scope = document.createElement("div");
+  scope.setAttribute("data-theme", theme);
+  scope.setAttribute("data-brand", "bridge");
+  scope.setAttribute("data-density", "compact");
+  shadow.appendChild(scope);
+  const cs = getComputedStyle(scope);
+  const decls = names.map((n) => [n, cs.getPropertyValue(n).trim()]).filter(([, v]) => v !== "").map(([n, v]) => `${n}: ${v};`).join("\n  ");
+  host.remove();
+  valueCache.set(key, decls);
+  return decls;
+}
+function usePinnedBridgeTokens(url, theme) {
+  useEffect(() => {
+    if (!url) return;
+    let live = true;
+    liveCss(url).then((css) => {
+      if (!live) return;
+      const decls = resolve(css, theme);
+      let el = document.head.querySelector(`style[${STYLE_ATTR}]`);
+      if (!el) {
+        el = document.createElement("style");
+        el.setAttribute(STYLE_ATTR, "");
+      }
+      el.textContent = `[${PIN_ATTR}][${PIN_ATTR}][${PIN_ATTR}], .${PIN_CLASS}.${PIN_CLASS}.${PIN_CLASS} {
+  ${decls}
+}`;
+      document.head.appendChild(el);
+    }).catch(() => {
+    });
+    return () => {
+      live = false;
+    };
+  }, [url, theme]);
+}
+const anchor = "_anchor_nhlur_5";
+const panel = "_panel_nhlur_30";
+const pill = "_pill_nhlur_31";
+const grip = "_grip_nhlur_63";
+const title = "_title_nhlur_73";
+const brand = "_brand_nhlur_82";
+const name = "_name_nhlur_90";
+const pillTitle = "_pillTitle_nhlur_95";
+const actions = "_actions_nhlur_102";
+const sides = "_sides_nhlur_111";
+const collapse = "_collapse_nhlur_115";
+const phoneOnly = "_phoneOnly_nhlur_119";
+const desktopOnly = "_desktopOnly_nhlur_123";
+const count = "_count_nhlur_127";
+const swatches = "_swatches_nhlur_134";
+const split = "_split_nhlur_146";
+const subtle = "_subtle_nhlur_162";
+const more = "_more_nhlur_169";
+const noteRow = "_noteRow_nhlur_176";
+const note = "_note_nhlur_176";
+const noteAction = "_noteAction_nhlur_198";
+const sheet = "_sheet_nhlur_202";
+const list = "_list_nhlur_206";
+const item = "_item_nhlur_215";
+const screenLink = "_screenLink_nhlur_223";
+const here = "_here_nhlur_224";
+const meta = "_meta_nhlur_235";
+const rows = "_rows_nhlur_243";
+const row = "_row_nhlur_243";
+const rowText = "_rowText_nhlur_260";
+const rowName = "_rowName_nhlur_267";
+const rowMeta = "_rowMeta_nhlur_273";
+const tipText = "_tipText_nhlur_279";
+const tipStep = "_tipStep_nhlur_283";
+const sheetFoot = "_sheetFoot_nhlur_287";
+const sheetSection = "_sheetSection_nhlur_291";
+const sectionTitle = "_sectionTitle_nhlur_303";
+const notice = "_notice_nhlur_309";
+const sheetPhone = "_sheetPhone_nhlur_322";
+const back = "_back_nhlur_326";
+const overlay = "_overlay_nhlur_358";
+const box = "_box_nhlur_365";
+const tint = "_tint_nhlur_379";
+const chip = "_chip_nhlur_385";
+const tip = "_tip_nhlur_279";
+const studio = "_studio_nhlur_481";
+const styles = {
+  anchor,
+  panel,
+  pill,
+  grip,
+  title,
+  brand,
+  name,
+  pillTitle,
+  actions,
+  sides,
+  collapse,
+  phoneOnly,
+  desktopOnly,
+  count,
+  swatches,
+  split,
+  subtle,
+  more,
+  noteRow,
+  note,
+  noteAction,
+  sheet,
+  list,
+  item,
+  screenLink,
+  here,
+  meta,
+  rows,
+  row,
+  rowText,
+  rowName,
+  rowMeta,
+  tipText,
+  tipStep,
+  sheetFoot,
+  sheetSection,
+  sectionTitle,
+  notice,
+  sheetPhone,
+  back,
+  overlay,
+  box,
+  tint,
+  chip,
+  tip,
+  studio
+};
+const INSET = 8;
+function boxOf(el) {
+  const r = shownRect(el);
+  if (!r) return null;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const left = Math.max(r.left, 0);
+  const top = Math.max(r.top, 0);
+  const right = Math.min(r.right, vw);
+  const bottom = Math.min(r.bottom, vh);
+  const page = (right - left) * (bottom - top) > 0.85 * vw * vh;
+  if (page) return { left: INSET, top: INSET, width: vw - 2 * INSET, height: vh - 2 * INSET, radius: "", page };
+  return { left, top, width: right - left, height: bottom - top, radius: getComputedStyle(el).borderRadius, page };
+}
+function ChangeOutlines({
+  surfaces,
+  theme,
+  tip: tip2,
+  onShown,
+  emphasis,
+  flash
+}) {
+  const [tick, setTick] = useState(0);
+  const [active, setActive] = useState(null);
+  useEffect(() => {
+    let frame = 0;
+    const on = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => setTick((t) => t + 1));
+    };
+    window.addEventListener("scroll", on, { passive: true, capture: true });
+    window.addEventListener("resize", on);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener("scroll", on, { capture: true });
+      window.removeEventListener("resize", on);
+    };
+  }, []);
+  const boxes = surfaces.map((s) => boxOf(s.el));
+  const shownKey = boxes.map((b) => b ? `${Math.round(b.left)},${Math.round(b.top)},${Math.round(b.width)},${Math.round(b.height)}` : "-").join("|");
+  useLayoutEffect(() => {
+    onShown({
+      count: boxes.filter(Boolean).length,
+      obstacles: boxes.filter((b) => Boolean(b && !b.page)).map((b) => ({ left: b.left, top: b.top, right: b.left + b.width, bottom: b.top + b.height }))
+    });
+  }, [shownKey, tick]);
+  useEffect(() => {
+    const pick = (match) => {
+      let best = null;
+      let area = Infinity;
+      surfaces.forEach((s, i) => {
+        const b = boxOf(s.el);
+        if (!b || b.page || !match(s.el, i)) return;
+        if (b.width * b.height < area) {
+          area = b.width * b.height;
+          best = i;
+        }
+      });
+      return best;
+    };
+    const move = (e) => setActive(
+      pick((el) => {
+        const r = el.getBoundingClientRect();
+        return e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom;
+      })
+    );
+    const focus = (e) => setActive(e.target instanceof Node ? pick((el) => el.contains(e.target)) : null);
+    document.addEventListener("pointermove", move, { passive: true });
+    document.addEventListener("focusin", focus);
+    return () => {
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("focusin", focus);
+    };
+  }, [surfaces]);
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, brand: "bridge", density: "compact", className: styles.overlay, "data-bridge-overlay": "", ...{ [PIN_ATTR]: "" }, "aria-hidden": "true", children: boxes.map((b, i) => {
+    if (!b) return null;
+    const s = surfaces[i];
+    const showChip = flash || active === i || emphasis === i;
+    const chip2 = /* @__PURE__ */ jsx("span", { className: styles.chip, "data-page": b.page || void 0, "data-shown": showChip || void 0, children: s.label });
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: styles.box,
+        "data-page": b.page || void 0,
+        "data-inside": !b.page && b.top < 24 || void 0,
+        "data-emphasis": emphasis === i || void 0,
+        style: { left: b.left, top: b.top, width: b.width, height: b.height, borderRadius: b.radius },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles.tint }),
+          active === i || emphasis === i ? (
+            // Above the chip when there is room, else below it: never over the toolbar, which keeps clear of boxes.
+            /* @__PURE__ */ jsx(Tooltip, { open: true, content: tip2(s), side: b.top < 64 ? "bottom" : "top", align: "start", className: PIN_CLASS, children: chip2 })
+          ) : chip2
+        ]
+      },
+      i
+    );
+  }) });
+}
+function useSheet(css, applied) {
+  const [el, setEl] = useState(null);
+  const ref = useRef(null);
+  useEffect(() => {
+    if (css === null) return;
+    if (!ref.current) {
+      const s = document.createElement("style");
+      s.setAttribute("data-bridge-live", "");
+      s.setAttribute("data-bridge-together", "");
+      const pinned = document.head.querySelector("style[data-bridge-pinned]");
+      document.head.insertBefore(s, pinned);
+      ref.current = s;
+      setEl(s);
+    }
+    ref.current.textContent = css;
+    ref.current.media = applied ? "all" : "not all";
+  }, [css, applied]);
+  useEffect(() => () => ref.current?.remove(), []);
+  return el;
+}
+function useTogether(build, latest, changes, use, here2, applied) {
+  const [mod, setMod] = useState(null);
+  const [list2, setList] = useState(null);
+  const [error, setError] = useState(false);
+  const [included, setIncluded] = useState([]);
+  const key = changes?.join(",") ?? "";
+  useEffect(() => {
+    if (!key) return;
+    let live = true;
+    const numbers = key.split(",").map(Number);
+    const base = latest ? latest() : Promise.reject(new Error("This product does not try changes together."));
+    Promise.all([import("./together.js"), base, Promise.all(numbers.map((n) => loadTogetherChange(build, n)))]).then(
+      ([m, b, facts]) => {
+        if (!live) return;
+        setMod({ m, base: b });
+        setList(facts);
+        setIncluded(facts.filter((f) => f.mode === "tokens" && f.source).map((f) => f.number));
+      },
+      () => live && setError(true)
+    );
+    return () => {
+      live = false;
+    };
+  }, [build, key, latest]);
+  const edits = useMemo(() => mod && list2 ? list2.filter((f) => f.source).map((f) => mod.m.changeEdits(f.source)) : [], [mod, list2]);
+  const result = useMemo(() => mod && list2 ? mod.m.together(mod.base, edits, mod.m.decodePicks(use), included) : null, [mod, list2, edits, use, included]);
+  const { theme, brand: brand2, density } = here2;
+  const pairs = useMemo(() => mod && result ? mod.m.togetherPairs(mod.base, result, { theme, brand: brand2, density }) : [], [mod, result, theme, brand2, density]);
+  const sheet2 = useSheet(key ? result?.css ?? null : null, applied);
+  const noDiff = useMemo(() => {
+    if (!mod || !result || !result.tokens.length || pairs.length) return null;
+    const other = mod.base.modes.themes.find((t) => t !== theme && mod.m.togetherPairs(mod.base, result, { theme: t, brand: brand2, density }).length);
+    if (other) return { kind: "theme", here: theme, touched: other };
+    const brandElse = mod.base.modes.brands.find((b) => b !== brand2 && mod.m.togetherPairs(mod.base, result, { theme, brand: b, density }).length);
+    return brandElse ? { kind: "brand", here: brand2, touched: brandElse } : null;
+  }, [mod, result, pairs.length, theme, brand2, density]);
+  if (!key) return null;
+  return {
+    list: list2,
+    error,
+    included,
+    toggle: (n, on) => setIncluded((cur) => toggleIncluded(list2?.map((f) => f.number) ?? [], cur, n, on)),
+    result,
+    editedBy: new Map(edits.map((e) => [e.number, [...new Set(e.edits.map((x) => x.path))]])),
+    pairs,
+    noDiff,
+    sheet: sheet2
+  };
+}
+const SIDE_LABEL = { before: "Live product", after: "This change" };
+const MAX_PAIRS = 3;
+function session() {
+  try {
+    return window.sessionStorage;
+  } catch {
+    return null;
+  }
+}
+function remember(key, value) {
+  try {
+    window.sessionStorage.setItem(key, value);
+  } catch {
+  }
+}
+function ToolbarRoot(props) {
+  const { ds, product, studio: studio2, production, preview, deployEnv, proxy } = props;
+  const given = useMemo(() => props.build && proxy !== void 0 ? { ...props.build, proxy } : props.build, [props.build, proxy]);
+  const [build, setBuild] = useState(given ?? null);
+  useEffect(() => {
+    if (given || !ds || !product) return;
+    let live = true;
+    loadBuild(ds, product, { studio: studio2, production, preview, deployEnv, ...proxy !== void 0 ? { proxy } : {} }).then(
+      (b) => live && setBuild(b),
+      (err) => console.warn(`Bridge toolbar: ${err.message}`)
+    );
+    return () => {
+      live = false;
+    };
+  }, [given, ds, product, studio2, production, preview, deployEnv, proxy]);
+  if (!build) return null;
+  return /* @__PURE__ */ jsx(Decide, { build, useScope: props.scope ?? useDocumentScope, shops: props.shops ?? [], together: props.together ?? null });
+}
+function Decide({ build: given, useScope, shops, together: latest }) {
+  const [setup] = useState(() => {
+    const build = given;
+    const store = session();
+    const changes = readChanges(window.location.search, store);
+    const where = whereAmI(window.location.host, build);
+    const returnTo = where === "production" ? readReturn(window.location.search, store, build.preview) : null;
+    const together = changes.length > 1 ? { changes, use: readUse(window.location.search, store) } : null;
+    return { build, change: changes[0] ?? null, where, returnTo, together };
+  });
+  if (!shouldRender({ ...setup, together: Boolean(setup.together) })) return null;
+  return /* @__PURE__ */ jsx(Toolbar, { build: setup.build, change: setup.change, onProduction: setup.where === "production", returnTo: setup.returnTo, together: setup.together, useScope, shops, latest });
+}
+function useLiveSheet(url, need, applied) {
+  const [state, setState] = useState("idle");
+  const link = useRef(null);
+  useEffect(() => {
+    if (!url) return;
+    if (link.current) {
+      link.current.media = applied ? "all" : "not all";
+      return;
+    }
+    if (!need && !applied) return;
+    const el = document.createElement("link");
+    el.rel = "stylesheet";
+    el.href = url;
+    el.media = applied ? "all" : "not all";
+    el.referrerPolicy = "no-referrer";
+    el.setAttribute("data-bridge-live", "");
+    el.onload = () => setState("ready");
+    el.onerror = () => {
+      el.remove();
+      link.current = null;
+      setState("error");
+    };
+    link.current = el;
+    setState("loading");
+    document.head.appendChild(el);
+  }, [url, need, applied]);
+  useEffect(() => () => link.current?.remove(), []);
+  return { state, link: state === "ready" ? link.current : null };
+}
+function probe(root, tokens, scope) {
+  const host = document.createElement("div");
+  host.setAttribute("data-theme", scope.theme);
+  host.setAttribute("data-brand", scope.brand);
+  host.setAttribute("data-density", "comfortable");
+  host.style.display = "none";
+  const spans = tokens.map((t) => {
+    const s = document.createElement("span");
+    s.style.backgroundColor = `var(${t.cssVar})`;
+    host.appendChild(s);
+    return s;
+  });
+  root.appendChild(host);
+  const out = tokens.map((t, i) => t.type === "color" ? getComputedStyle(spans[i]).backgroundColor : getComputedStyle(host).getPropertyValue(t.cssVar).trim());
+  host.remove();
+  return out;
+}
+function usePairs(facts, liveUrl, brand2, liveOn) {
+  const [pairs, setPairs] = useState([]);
+  const afterCache = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const tokens = facts?.tokens ?? [];
+    if (!tokens.length || !liveUrl) return;
+    let live = true;
+    const scopeOf = (t) => ({ theme: t.theme ?? "light", brand: t.brand ?? brand2 });
+    const key = `${brand2}`;
+    if (!afterCache.current.has(key) && !liveOn) afterCache.current.set(key, tokens.map((t) => probe(document.body, [t], scopeOf(t))[0]));
+    const after = afterCache.current.get(key);
+    if (!after) return;
+    fetch(liveUrl).then((r) => r.ok ? r.text() : Promise.reject(new Error(String(r.status)))).then((css) => {
+      if (!live) return;
+      const sheet2 = new CSSStyleSheet();
+      sheet2.replaceSync(css.replace(/:root/g, ":host"));
+      const host = document.createElement("div");
+      host.style.display = "none";
+      document.body.appendChild(host);
+      const shadow = host.attachShadow({ mode: "open" });
+      shadow.adoptedStyleSheets = [sheet2];
+      const before = tokens.map((t) => probe(shadow, [t], scopeOf(t))[0]);
+      host.remove();
+      setPairs(tokens.map((t, i) => ({ token: t, before: before[i], after: after[i], color: t.type === "color" })).filter((p) => p.before !== p.after));
+    }).catch(() => live && setPairs([]));
+    return () => {
+      live = false;
+    };
+  }, [facts, liveUrl, brand2, liveOn]);
+  return pairs;
+}
+function modeDetail(facts, side, tokens) {
+  if (!facts) return "Reading the change.";
+  return changeSummary(facts.title);
+}
+const brandName = (shops, brand2) => shops.find((t) => t.brand === brand2)?.name ?? brand2;
+function noDifferenceText(d, shops) {
+  const cap = (t) => t.charAt(0).toUpperCase() + t.slice(1);
+  return d.kind === "theme" ? `${cap(d.touched)} mode only. Nothing changes in ${d.here}.` : `${brandName(shops, d.touched)} only. Nothing changes in ${brandName(shops, d.here)}.`;
+}
+function pageObstacles(own) {
+  const probeEl = document.createElement("span");
+  probeEl.style.backgroundColor = "var(--color-action-primary-bg)";
+  probeEl.hidden = true;
+  document.body.appendChild(probeEl);
+  const primary = getComputedStyle(probeEl).backgroundColor;
+  probeEl.remove();
+  const out = [];
+  for (const el of document.querySelectorAll('button, a[href], [role="button"]')) {
+    if (own?.contains(el) || el.closest('[data-bridge-toolbar], [role="dialog"], [role="menu"], [role="listbox"]')) continue;
+    const isSubmit = el instanceof HTMLButtonElement && el.type === "submit";
+    if (!isSubmit && getComputedStyle(el).backgroundColor !== primary) continue;
+    const r = el.getBoundingClientRect();
+    if (!r.width || !r.height || r.bottom <= 0 || r.top >= window.innerHeight) continue;
+    out.push({ left: r.left, top: r.top, right: r.right, bottom: r.bottom });
+  }
+  return out;
+}
+function Toolbar({
+  build,
+  change,
+  onProduction,
+  returnTo,
+  together: tg,
+  useScope,
+  shops,
+  latest
+}) {
+  const scope = useScope();
+  const { theme, density, brand: brand2 } = scope;
+  const tenantId = scope.shop ?? "";
+  const setPrefs = scope.set;
+  const isTenantId = (id) => shops.some((t) => t.id === id);
+  const [oneFacts, setFacts] = useState(null);
+  const [oneError, setError] = useState(false);
+  const [side, setSide] = useState(onProduction && !tg ? "before" : "after");
+  const T = useTogether(build, latest, tg?.changes ?? null, tg?.use ?? null, { theme, brand: brand2, density }, side === "after");
+  const titleOf = (n) => T?.list?.find((f) => f.number === n)?.title ?? null;
+  const togetherFacts = useMemo(() => {
+    if (!T?.list || !T.result) return null;
+    const on = T.list.filter((f) => T.included.includes(f.number));
+    const names = on.map((f) => f.title);
+    return {
+      number: change,
+      title: names.length ? names.length <= 2 ? names.join(" and ") : `${names.slice(0, 2).join(", ")} and ${names.length - 2} more` : "No change switched on",
+      url: "",
+      sha: "",
+      mode: "tokens",
+      files: [...new Set(on.flatMap((f) => f.source?.files ?? []))],
+      behind: null,
+      tokens: T.result.tokens,
+      screens: null
+    };
+  }, [T?.list, T?.result, T?.included, change]);
+  const facts = tg ? togetherFacts : oneFacts;
+  const error = tg ? Boolean(T?.error) : oneError;
+  const [open, setOpen] = useState(() => {
+    try {
+      return window.sessionStorage.getItem(OPEN_KEY) === "1";
+    } catch {
+      return false;
+    }
+  });
+  const [dock, setDock] = useState(() => readDock(session()));
+  const [place, setPlace] = useState({ dock, lift: 0 });
+  const [drag, setDrag] = useState(null);
+  const [shownIn, setShownIn] = useState(null);
+  const dragStart = useRef(0);
+  const root = useRef(null);
+  const hash = useHash();
+  useEffect(() => {
+    if (tg) return;
+    let live2 = true;
+    loadChange(build, change).then(
+      (f) => live2 && setFacts(f),
+      () => live2 && setError(true)
+    );
+    return () => {
+      live2 = false;
+    };
+  }, [build, change, tg]);
+  const liveUrl = !tg && facts?.mode === "tokens" ? liveTokensUrl(build) : null;
+  const [outlines, setOutlines] = useState(false);
+  const canOutline = facts?.mode === "tokens" && (facts.tokens.length ?? 0) > 0;
+  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;
+  const noDiff = tg ? T?.noDiff ?? null : facts?.mode === "tokens" ? noVisibleDifference(facts.files, { theme, brand: brand2 }) : null;
+  const outlinesOn = outlines && canOutline && !noDiff;
+  const diff = useChangedElements(
+    outlinesOn,
+    tg ? T?.sheet ?? null : live.link,
+    (facts?.tokens ?? []).map((t) => t.cssVar),
+    // Switching a change on or off repaints the combination: the outlines are measured again.
+    `${hash}|${theme}|${tenantId}|${tg ? T?.included.join(",") ?? "" : ""}`,
+    tg ? "after" : "before"
+  );
+  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 : [];
+  const [emphasis, setEmphasis] = useState(null);
+  const [flash, setFlash] = useState(false);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const phone = useMedia("(max-width: 760px)");
+  const reduced = useMedia("(prefers-reduced-motion: reduce)");
+  usePinnedBridgeTokens(liveTokensUrl(build), theme);
+  useEffect(() => {
+    if (!outlinesOn || reduced) {
+      setFlash(false);
+      return;
+    }
+    setFlash(true);
+    const id = window.setTimeout(() => setFlash(false), 1500);
+    return () => window.clearTimeout(id);
+  }, [outlinesOn, reduced]);
+  useEffect(() => {
+    if (!sheetOpen) setEmphasis(null);
+  }, [sheetOpen]);
+  const autoTheme = useRef(false);
+  useEffect(() => {
+    if (autoTheme.current || !facts) return;
+    autoTheme.current = true;
+    if (noDiff?.kind === "theme" && (noDiff.touched === "light" || noDiff.touched === "dark")) {
+      setPrefs({ theme: noDiff.touched });
+      setShownIn(noDiff.touched);
+    }
+  }, [facts, noDiff, setPrefs]);
+  useEffect(() => {
+    if (shownIn && theme !== shownIn) setShownIn(null);
+  }, [theme, shownIn]);
+  useEffect(() => {
+    const y = readScroll(window.location.search);
+    if (y === null) return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete(SCROLL_PARAM);
+    window.history.replaceState(window.history.state, "", url);
+    let tries = 0;
+    const id = window.setInterval(() => {
+      tries += 1;
+      if (document.documentElement.scrollHeight - window.innerHeight >= y || tries > 20) {
+        window.scrollTo({ top: y });
+        window.clearInterval(id);
+      }
+    }, 150);
+    return () => window.clearInterval(id);
+  }, []);
+  const choose = useCallback(
+    (next) => {
+      if (next === side || !facts) return;
+      if (facts.mode === "tokens") {
+        setSide(next);
+        return;
+      }
+      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 }));
+      } else if (next === "after" && returnTo) {
+        window.location.assign(sameScreenOn(returnTo, here2, { change, scroll: window.scrollY }));
+      }
+    },
+    [side, facts, build, change, returnTo]
+  );
+  useEffect(() => {
+    const onKey = (e) => {
+      if (canOutline && !noDiff && isKey(e, "c")) {
+        e.preventDefault();
+        setOutlines((o) => !o);
+        return;
+      }
+      if (!isFlipKey(e)) return;
+      e.preventDefault();
+      choose(side === "after" ? "before" : "after");
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [choose, side, canOutline, noDiff]);
+  useLayoutEffect(() => {
+    const el = root.current;
+    const anchor2 = el?.parentElement;
+    if (!el || !anchor2) return;
+    let frame = 0;
+    const measure = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const box2 = el.getBoundingClientRect();
+        const area = anchor2.getBoundingClientRect();
+        const gutter = window.innerWidth <= 760 ? open ? 0 : 8 : 16;
+        const next = placeToolbar({ left: area.left, right: area.right, vh: window.innerHeight, w: box2.width, h: box2.height, gutter, preferred: dock, obstacles: [...pageObstacles(el), ...outlineBoxes.current] });
+        setPlace((p) => p.dock === next.dock && p.lift === next.lift ? p : next);
+        document.body.style.paddingBottom = open ? `${box2.height + 2 * gutter}px` : "";
+      });
+    };
+    measure();
+    const later = window.setTimeout(measure, 600);
+    const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    ro?.observe(el);
+    ro?.observe(document.body);
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, { passive: true });
+    window.addEventListener("hashchange", measure);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.clearTimeout(later);
+      ro?.disconnect();
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure);
+      window.removeEventListener("hashchange", measure);
+      document.body.style.paddingBottom = "";
+    };
+  }, [dock, open, facts, shown, outlinesOn]);
+  const toggleOpen = (next) => {
+    setOpen(next);
+    remember(OPEN_KEY, next ? "1" : "0");
+  };
+  const moveTo = (next) => {
+    setDock(next);
+    remember(DOCK_KEY, next);
+  };
+  const onGripKey = (e) => {
+    if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      moveTo(stepDock(dock, e.key === "ArrowLeft" ? -1 : 1));
+    }
+  };
+  const onGripDown = (e) => {
+    e.currentTarget.setPointerCapture(e.pointerId);
+    dragStart.current = e.clientX;
+    setDrag(0);
+  };
+  const onGripMove = (e) => {
+    if (drag !== null) setDrag(e.clientX - dragStart.current);
+  };
+  const onGripUp = (e) => {
+    if (drag === null) return;
+    const box2 = root.current?.getBoundingClientRect();
+    setDrag(null);
+    if (box2 && Math.abs(e.clientX - dragStart.current) > 4) moveTo(dockAt(box2.left + box2.width / 2, window.innerWidth));
+  };
+  const goTo = (s) => (e) => {
+    e.preventDefault();
+    toggleOpen(true);
+    if (isTenantId(s.tenant) && (s.tenant !== tenantId || s.theme !== theme)) setPrefs({ shop: s.tenant, theme: s.theme === "dark" ? "dark" : "light" });
+    window.location.hash = s.route;
+  };
+  const fixNoDiff = () => {
+    if (!noDiff) return;
+    toggleOpen(true);
+    if (noDiff.kind === "theme") setPrefs({ theme: noDiff.touched === "dark" ? "dark" : "light" });
+    else {
+      const t = shops.find((x) => x.brand === noDiff.touched);
+      if (t) setPrefs({ shop: t.id });
+    }
+  };
+  const sideLabel = (x) => x === "after" && tg ? togetherLabel(T?.included.length ?? tg.changes.length) : SIDE_LABEL[x];
+  const label = sideLabel(side);
+  const title2 = facts?.title ?? (tg ? `${tg.changes.length} changes together` : `Change ${change}`);
+  const screens = facts?.screens ?? null;
+  const canFlip = Boolean(facts) && (facts.mode === "tokens" || (side === "after" ? Boolean(build.production) : Boolean(returnTo)));
+  const studio2 = tg ? studioChangesUrl(build) : studioChangeUrl(build, change);
+  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 = outlinesOn ? diff?.surfaces ?? [] : [];
+  const shownCount = outlinesOn && diff ? shown.count : null;
+  const activeHere = new Set((T?.pairs ?? []).flatMap((p) => p.token.from)).size;
+  const note2 = shownIn ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
+    "Shown in ",
+    shownIn,
+    ". ",
+    tg ? "These changes only affect" : "This change only affects",
+    " ",
+    shownIn,
+    "."
+  ] }) : 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." }) : shownCount === 0 ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: diff?.surfaces.length ? outOfView(diff.surfaces.length) : tg ? TOGETHER_EMPTY_LINE : EMPTY_LINE }) : tg && T && side === "after" && activeHere < T.included.length ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
+    activeHere,
+    " of these ",
+    T.included.length,
+    " changes ",
+    activeHere === 1 ? "shows" : "show",
+    " in ",
+    theme,
+    ". Changes lists what each one does here."
+  ] }) : null;
+  const visiblePairs = (noDiff ? [] : pairs).slice().sort((a, b) => (contrastRatio(b.before, b.after) ?? 0) - (contrastRatio(a.before, a.after) ?? 0));
+  const hexPair = (before, after) => `${toHex(before).toUpperCase()} → ${toHex(after).toUpperCase()}`;
+  const fromOf = (p) => {
+    const from = p?.token?.from;
+    return tg && from?.length ? fromText(from, titleOf) : null;
+  };
+  const pairTip = (p) => `${p.token.name}${p.token.step ? ` (${p.token.step})` : ""}${fromOf(p) ? `, ${fromOf(p)}` : ""}: ${p.color ? hexPair(p.before, p.after) : `${p.before} → ${p.after}`}`;
+  const splitOf = (before, after) => /* @__PURE__ */ jsxs("span", { className: styles.split, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("span", { style: { backgroundColor: before } }),
+    /* @__PURE__ */ jsx("span", { style: { backgroundColor: after } })
+  ] });
+  const subtleOf = (before, after) => isSubtle(before, after) ? /* @__PURE__ */ jsx("span", { className: styles.subtle, children: "Subtle change" }) : null;
+  const shownPairs = visiblePairs.filter((p) => p.color).slice(0, MAX_PAIRS);
+  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 swatches2 = visiblePairs.length ? /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: visiblePairs.slice(0, 6).map(pairTip).join(". ") + (visiblePairs.length > 6 ? `. And ${visiblePairs.length - 6} more.` : ""), children: /* @__PURE__ */ jsxs("span", { className: styles.swatches, tabIndex: 0, "aria-label": `Tokens this change edits: ${visiblePairs.map(pairTip).join(". ")}`, children: [
+    shownPairs.map((p) => /* @__PURE__ */ jsx("span", { children: splitOf(p.before, p.after) }, p.token.path)),
+    visiblePairs.length > shownPairs.length && /* @__PURE__ */ jsxs("span", { className: styles.more, children: [
+      "+",
+      visiblePairs.length - shownPairs.length,
+      " more ",
+      visiblePairs.length - shownPairs.length === 1 ? "token" : "tokens"
+    ] }),
+    shownPairs[0] ? subtleOf(shownPairs[0].before, shownPairs[0].after) : null
+  ] }) }) : null;
+  const tokenNames = (facts?.tokens ?? []).map((t) => t.name);
+  const summary = shownCount === null ? null : surfaceLine(diff.surfaces.flatMap((s) => s.roots.map(nameOf)), shownCount);
+  const toggleTip = `${summary ?? `Outline what ${tokenNames.length === 1 ? tokenNames[0] : "this change"} changes on this screen.`} Press C.`;
+  const toggleLabel = shownCount === null ? "Show what changed" : `Show what changed · ${shownCount}`;
+  const outlineToggle = canOutline ? /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: toggleTip, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", pressed: outlinesOn, "aria-keyshortcuts": "C", disabled: Boolean(noDiff), onClick: () => setOutlines((o) => !o), children: toggleLabel }) }) : null;
+  const outlineIcon = canOutline ? /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      icon: ScanSearch,
+      size: "md",
+      variant: "ghost",
+      pressed: outlinesOn,
+      disabled: Boolean(noDiff),
+      label: shownCount === null ? "Show what changed" : `Show what changed, ${shownCount} ${shownCount === 1 ? "surface" : "surfaces"}`,
+      className: styles.phoneOnly,
+      onClick: () => setOutlines((o) => !o)
+    }
+  ) : null;
+  const shownSurfaces = surfaces.map((s, i) => ({ s, i })).filter(({ s }) => shownRect(s.el));
+  const focusSurface = (i) => {
+    const el = surfaces[i]?.el;
+    if (!el) return;
+    el.scrollIntoView({ block: "center", behavior: reduced ? "auto" : "smooth" });
+    setEmphasis(i);
+  };
+  const tokensOf = (x) => [...new Set(x.roots.map(nameOf))].join(", ");
+  const sides2 = /* @__PURE__ */ jsx(ButtonGroup, { appearance: "attached", "aria-label": "Compare", className: styles.sides, children: ["before", "after"].map((s) => /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: `${sideLabel(s)}: ${s === "before" ? "what customers see today." : modeDetail(facts)} Press B to flip.`, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "secondary",
+      size: "md",
+      pressed: side === s,
+      "aria-keyshortcuts": "B",
+      disabled: !canFlip && side !== s,
+      onClick: () => choose(s),
+      children: sideLabel(s)
+    }
+  ) }, s)) });
+  return /* @__PURE__ */ jsxs(
+    ThemeProvider,
+    {
+      theme,
+      brand: "bridge",
+      density: "compact",
+      className: styles.anchor,
+      "data-bridge-toolbar": "",
+      ...{ [PIN_ATTR]: "" },
+      "data-open": open || void 0,
+      "data-dock": place.dock,
+      style: place.lift ? { paddingBottom: `${place.lift}px` } : void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: root,
+            className: open ? styles.panel : styles.pill,
+            role: "region",
+            "aria-label": `Bridge: ${label}, ${title2}`,
+            "data-side": side,
+            "data-diff-ms": outlinesOn ? diff?.ms : void 0,
+            "data-diff-count": shownCount ?? void 0,
+            "data-diff-elements": outlinesOn ? diff?.elements.length : void 0,
+            "data-note": note2 ? "" : void 0,
+            style: drag ? { transform: `translateX(${drag}px)` } : void 0,
+            "data-dragging": drag !== null || void 0,
+            children: [
+              open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Drag, or use the arrow keys, to move the toolbar", children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    icon: GripVertical,
+                    size: "md",
+                    label: `Move the toolbar, now ${dock === "start" ? "left" : dock === "end" ? "right" : "centred"}. Use the left and right arrow keys.`,
+                    className: styles.grip,
+                    onKeyDown: onGripKey,
+                    onPointerDown: onGripDown,
+                    onPointerMove: onGripMove,
+                    onPointerUp: onGripUp,
+                    onPointerCancel: () => setDrag(null)
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("p", { className: styles.title, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.brand, children: "Bridge" }),
+                  /* @__PURE__ */ jsx("span", { className: styles.name, title: title2, children: title2 })
+                ] }),
+                outlineIcon,
+                /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+                  sides2,
+                  /* @__PURE__ */ jsx("span", { className: styles.desktopOnly, children: swatches2 }),
+                  /* @__PURE__ */ jsxs(Popover, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
+                    /* @__PURE__ */ jsx(
+                      PopoverTrigger,
+                      {
+                        render: phone ? /* @__PURE__ */ jsx(IconButton, { icon: ListChecks, size: "md", variant: "ghost", label: shownCount ? `Changes, ${shownCount} changed here` : "Changes" }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", iconEnd: ChevronUp }),
+                        children: phone ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                          "Changes",
+                          shownCount ? /* @__PURE__ */ jsx("span", { className: styles.count, children: shownCount }) : null
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(PopoverContent, { side: "top", align: "center", className: `${styles.sheet} ${PIN_CLASS}`, "aria-label": "Changes", children: [
+                      tg && T?.list ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "aria-label": "Changes tried together", children: [
+                        /* @__PURE__ */ jsx("p", { className: styles.sectionTitle, children: "Changes tried together" }),
+                        /* @__PURE__ */ jsx("p", { className: styles.note, children: TOGETHER_HINT }),
+                        /* @__PURE__ */ jsx("ul", { className: styles.list, children: T.list.map((f) => {
+                          const can = f.mode === "tokens" && Boolean(f.source);
+                          const on = T.included.includes(f.number);
+                          const paths = T.editedBy.get(f.number) ?? [];
+                          const byOther = [...new Set(paths.flatMap((p) => T.result?.tokens.find((t) => t.path === p && !t.from.includes(f.number))?.from ?? []))];
+                          const used = paths.length - paths.filter((p) => T.result?.tokens.some((t) => t.path === p && !t.from.includes(f.number))).length;
+                          const showsHere = T.pairs.some((p) => p.token.from.includes(f.number));
+                          const what = !on ? `#${f.number}, switched off` : used === 0 && byOther.length ? `#${f.number}, ${paths.length === 1 ? "its token is" : `its ${paths.length} tokens are`} set by ${byOther.map((x) => `#${x}`).join(" and ")} here (your pick)` : `#${f.number}, ${used} of ${paths.length} ${paths.length === 1 ? "token" : "tokens"} used${byOther.length ? `, the rest set by ${byOther.map((x) => `#${x}`).join(" and ")} (your pick)` : ""}${showsHere ? "" : `. Nothing of it shows in ${theme}`}`;
+                          return /* @__PURE__ */ jsx("li", { className: styles.item, children: /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              label: f.title,
+                              description: can ? what : `#${f.number}. It changes code, so it can't be applied here.`,
+                              checked: T.included.includes(f.number),
+                              disabled: !can,
+                              onCheckedChange: (on2) => T.toggle(f.number, on2)
+                            }
+                          ) }, f.number);
+                        }) }),
+                        T.result?.unpicked.length ? /* @__PURE__ */ jsxs("p", { className: styles.note, children: [
+                          T.result.unpicked.join(", "),
+                          ": the change you picked in Studio is off, so the first one listed sets ",
+                          T.result.unpicked.length === 1 ? "it" : "them",
+                          "."
+                        ] }) : null
+                      ] }) : 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 · ",
+                          shownSurfaces.length
+                        ] }),
+                        /* @__PURE__ */ jsx("ul", { className: styles.rows, children: shownSurfaces.map(({ s: x, i }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "md",
+                            fullWidth: true,
+                            className: styles.row,
+                            "data-emphasis": emphasis === i || void 0,
+                            onMouseEnter: () => setEmphasis(i),
+                            onMouseLeave: () => setEmphasis((e) => e === i ? null : e),
+                            onFocus: () => setEmphasis(i),
+                            onBlur: () => setEmphasis((e) => e === i ? null : e),
+                            onClick: () => focusSurface(i),
+                            children: /* @__PURE__ */ jsxs("span", { className: styles.rowText, children: [
+                              /* @__PURE__ */ jsx("span", { className: styles.rowName, children: x.label }),
+                              /* @__PURE__ */ jsx("span", { className: styles.rowMeta, children: tokensOf(x) })
+                            ] })
+                          }
+                        ) }, i)) })
+                      ] }) : null,
+                      screens && screens.length ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "aria-label": "Screens this change affects", children: [
+                        /* @__PURE__ */ jsx("p", { className: styles.sectionTitle, children: "Screens this change affects" }),
+                        shared ? /* @__PURE__ */ jsxs("p", { className: styles.note, children: [
+                          shopOf(shared.tenant),
+                          ", ",
+                          shared.theme
+                        ] }) : null,
+                        /* @__PURE__ */ jsx("ul", { className: styles.list, children: screens.map((sc) => {
+                          const current = sc.route === hash && sc.tenant === tenantId && sc.theme === theme;
+                          const where = shared ? null : /* @__PURE__ */ jsxs("span", { className: styles.meta, children: [
+                            " ",
+                            shopOf(sc.tenant),
+                            ", ",
+                            sc.theme
+                          ] });
+                          return /* @__PURE__ */ jsxs("li", { className: styles.item, "aria-current": current ? "page" : void 0, children: [
+                            current ? /* @__PURE__ */ jsxs("span", { className: styles.here, children: [
+                              /* @__PURE__ */ jsx(Icon, { icon: Check, size: "sm" }),
+                              sc.label,
+                              where
+                            ] }) : /* @__PURE__ */ jsxs(
+                              Link,
+                              {
+                                variant: "standalone",
+                                href: `?${PARAM}=${change}&tenant=${encodeURIComponent(sc.tenant)}&theme=${encodeURIComponent(sc.theme)}#${sc.route}`,
+                                onClick: goTo(sc),
+                                className: styles.screenLink,
+                                children: [
+                                  sc.label,
+                                  where
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: styles.meta, children: current ? "You are here" : `${Math.max(1, Math.round(sc.percent))}% changed` })
+                          ] }, `${sc.route}|${sc.tenant}|${sc.theme}`);
+                        }) })
+                      ] }) : null,
+                      visiblePairs.length ? /* @__PURE__ */ jsxs("section", { className: `${styles.sheetSection} ${styles.sheetPhone}`, "aria-label": "Tokens this change edits", children: [
+                        /* @__PURE__ */ jsx("p", { className: styles.sectionTitle, children: "Tokens" }),
+                        /* @__PURE__ */ jsx("ul", { className: styles.list, children: roleGroups.map((g) => /* @__PURE__ */ jsxs("li", { className: styles.item, children: [
+                          /* @__PURE__ */ jsxs("span", { className: styles.rowText, children: [
+                            /* @__PURE__ */ jsx("span", { children: g.name }),
+                            /* @__PURE__ */ jsxs("span", { className: styles.rowMeta, children: [
+                              g.pairs.length === 1 ? g.pairs[0].token.step ?? "" : `${g.pairs.length} steps`,
+                              isSubtle(g.pairs[0].before, g.pairs[0].after) ? ", subtle change" : ""
+                            ] })
+                          ] }),
+                          g.pairs[0].color ? splitOf(g.pairs[0].before, g.pairs[0].after) : null
+                        ] }, g.name)) })
+                      ] }) : null,
+                      behind ? /* @__PURE__ */ jsxs("p", { className: styles.notice, role: "note", children: [
+                        /* @__PURE__ */ jsx(Icon, { icon: Info, size: "sm" }),
+                        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
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: styles.desktopOnly, children: outlineToggle }),
+                  /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", render: /* @__PURE__ */ jsx("a", { href: studio2 }), className: styles.studio, children: "Back to Studio" })
+                ] }),
+                /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Collapse", children: /* @__PURE__ */ jsx(IconButton, { icon: Minimize2, size: "md", label: "Collapse the Bridge toolbar", className: styles.collapse, onClick: () => toggleOpen(false) }) }),
+                error ? /* @__PURE__ */ jsx("p", { className: styles.noteRow, role: "status", children: tg ? "Could not read these changes. Reload the page to try again." : "Could not read this change. Reload the page to try again." }) : null
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: styles.brand, children: "Bridge" }),
+                /* @__PURE__ */ jsx("span", { className: styles.pillTitle, title: title2, children: title2 }),
+                /* @__PURE__ */ jsx(Badge, { size: "sm", children: label }),
+                /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Open the toolbar", children: /* @__PURE__ */ jsx(IconButton, { icon: ChevronUp, size: "md", label: `Open the Bridge toolbar. Showing ${label.toLowerCase()}. Press B to flip.`, onClick: () => toggleOpen(true) }) })
+              ] }),
+              note2 && /* @__PURE__ */ jsx("div", { className: styles.noteRow, children: note2 })
+            ]
+          }
+        ),
+        outlinesOn && surfaces.length ? /* @__PURE__ */ jsx(
+          ChangeOutlines,
+          {
+            surfaces,
+            theme,
+            emphasis,
+            flash,
+            onShown: setShownStable,
+            tip: (s) => {
+              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(", ");
+              const rootsFrom = [...new Set(s.roots.flatMap((r) => facts?.tokens.find((t) => t.cssVar === r)?.from ?? []))];
+              const fromLine = fromOf(token) ?? (tg && rootsFrom.length ? fromText(rootsFrom, titleOf) : null);
+              return /* @__PURE__ */ jsxs("span", { className: styles.tip, children: [
+                prop ? splitOf(prop.before, prop.after) : null,
+                /* @__PURE__ */ jsxs("span", { className: styles.tipText, children: [
+                  /* @__PURE__ */ jsxs("span", { children: [
+                    s.label,
+                    ": ",
+                    name2,
+                    prop ? `, ${hexPair(prop.before, prop.after)}` : ""
+                  ] }),
+                  token?.token.step ? /* @__PURE__ */ jsx("span", { className: styles.tipStep, children: token.token.step }) : null,
+                  fromLine ? /* @__PURE__ */ jsx("span", { className: styles.tipStep, children: fromLine.charAt(0).toUpperCase() + fromLine.slice(1) }) : null
+                ] }),
+                prop ? subtleOf(prop.before, prop.after) : null
+              ] });
+            }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function useMedia(query) {
+  const get = () => typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : false;
+  const [match, setMatch] = useState(get);
+  useEffect(() => {
+    const m = window.matchMedia(query);
+    const on = () => setMatch(m.matches);
+    m.addEventListener("change", on);
+    return () => m.removeEventListener("change", on);
+  }, [query]);
+  return match;
+}
+function useHash() {
+  const read = () => window.location.hash.replace(/^#/, "").split("?")[0] || "/";
+  const [hash, setHash] = useState(read);
+  useEffect(() => {
+    const on = () => setHash(read());
+    window.addEventListener("hashchange", on);
+    return () => window.removeEventListener("hashchange", on);
+  }, []);
+  return hash;
+}
+export {
+  ToolbarRoot as default
+};
+//# sourceMappingURL=Toolbar-CzR1TM9x.js.map