@bridge-ds/toolbar 0.1.0 → 0.3.0

package/dist/{Toolbar-B-p9ZCvk.js → Toolbar-DJUb3p2c.js}

@@ -1,16 +1,15 @@
 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";
+  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_a8mxc_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_a8mxc_5[data-dock=\"start\"] {\n  justify-content: flex-start;\n}\n\n._anchor_a8mxc_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_a8mxc_5 {\n    inset-inline-start: calc(var(--size-60) + var(--space-4));\n  }\n}\n\n._panel_a8mxc_30,\n._pill_a8mxc_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/* The outlines layer comes first in the document: the bar, on the same layer, paints above it and its scrim. */\n._panel_a8mxc_30,\n._pill_a8mxc_31 {\n  position: relative;\n  z-index: var(--layer-sticky);\n}\n\n._panel_a8mxc_30[data-dragging],\n._pill_a8mxc_31[data-dragging] {\n  box-shadow: var(--elevation-modal);\n}\n\n/* Desktop: one row, 44px tall with its border (36px controls): compare, then the changes of this screen, then the\n   rest. A note, when there is one, takes a second row. */\n._panel_a8mxc_30 {\n  display: grid;\n  grid-template-areas:\n    \"grip title sides nav actions collapse\"\n    \"note note note note note note\";\n  grid-template-rows: calc(var(--size-11) - 2 * var(--border-width-default)) auto;\n  grid-template-columns: auto auto 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_a8mxc_71 {\n  grid-area: grip;\n  cursor: grab;\n  touch-action: none;\n}\n\n._panel_a8mxc_30[data-dragging] ._grip_a8mxc_71 {\n  cursor: grabbing;\n}\n\n._title_a8mxc_81 {\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_a8mxc_90 {\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_a8mxc_30 ._name_a8mxc_98 {\n  display: none;\n}\n\n._name_a8mxc_98,\n._pillTitle_a8mxc_103 {\n  overflow: hidden;\n  font-weight: var(--font-weight-medium);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n._actions_a8mxc_110 {\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_a8mxc_119 {\n  grid-area: sides;\n}\n\n/* The changes of this screen: the count (also the outlines toggle), Previous and Next, Isolate. */\n._nav_a8mxc_124 {\n  display: flex;\n  grid-area: nav;\n  align-items: center;\n  gap: var(--space-2);\n  min-width: 0;\n}\n\n._countButton_a8mxc_132 {\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n\n._steps_a8mxc_137 {\n  flex: none;\n}\n\n._collapse_a8mxc_141 {\n  grid-area: collapse;\n}\n\n._count_a8mxc_132 {\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_a8mxc_152 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-1);\n  border-radius: var(--radius-inset);\n}\n\n._swatches_a8mxc_152:focus-visible {\n  outline: var(--focus-ring-width) solid var(--focus-ring-color);\n  outline-offset: var(--focus-ring-offset);\n}\n\n._split_a8mxc_164 {\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_a8mxc_164 > 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_a8mxc_180 {\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_a8mxc_187 {\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_a8mxc_194 {\n  grid-area: note;\n  min-width: 0;\n  padding-block-end: var(--space-1);\n}\n\n._note_a8mxc_194 {\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_a8mxc_194 ._note_a8mxc_194 {\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_a8mxc_216 {\n  flex: none;\n}\n\n._sheet_a8mxc_220 {\n  width: min(90vw, var(--size-80));\n}\n\n._list_a8mxc_224 {\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_a8mxc_233 {\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_a8mxc_241,\n._here_a8mxc_242 {\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_a8mxc_242 {\n  font-weight: var(--font-weight-semibold);\n}\n\n._meta_a8mxc_253 {\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_a8mxc_261 {\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_a8mxc_261 {\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_a8mxc_278 {\n  display: grid;\n  min-width: 0;\n  font-weight: var(--font-weight-regular);\n  white-space: normal;\n}\n\n._rowName_a8mxc_285 {\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_a8mxc_291 {\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_a8mxc_297 {\n  display: grid;\n}\n\n._tipStep_a8mxc_301 {\n  opacity: 0.8;\n}\n\n._sheetFoot_a8mxc_305 {\n  margin-top: var(--space-2);\n}\n\n._sheetSection_a8mxc_309 {\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_a8mxc_309:first-child {\n  margin-top: 0;\n  padding-top: 0;\n  border-top: 0;\n}\n\n._sectionTitle_a8mxc_321 {\n  margin: 0;\n  font-weight: var(--font-weight-semibold);\n}\n\n/* A separate notice, not part of a list. */\n._notice_a8mxc_327 {\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_a8mxc_340 {\n  display: none;\n}\n\n._back_a8mxc_344 {\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--control-height-md);\n}\n\n._pill_a8mxc_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_a8mxc_31[data-note] {\n  border-radius: var(--radius-overlay);\n}\n\n._pill_a8mxc_31 ._noteRow_a8mxc_194 {\n  grid-column: 1 / -1;\n  padding-inline-end: var(--space-3);\n}\n\n._pill_a8mxc_31 ._noteRow_a8mxc_194 ._note_a8mxc_194 {\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_a8mxc_376 {\n  position: fixed;\n  inset: 0;\n  z-index: var(--layer-sticky);\n  pointer-events: none;\n}\n\n._box_a8mxc_383 {\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_a8mxc_383[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_a8mxc_383[data-page] ._tint_a8mxc_397 {\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_a8mxc_383[data-inside] ._chip_a8mxc_403 {\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_a8mxc_383[data-emphasis] {\n  outline-style: solid;\n}\n\n._box_a8mxc_383[data-emphasis] ._tint_a8mxc_397 {\n  opacity: 0.1;\n}\n\n._box_a8mxc_383[data-page] ._chip_a8mxc_403 {\n  top: var(--space-1);\n  bottom: auto;\n  left: var(--space-1);\n}\n\n._tint_a8mxc_397 {\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_a8mxc_403 {\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_a8mxc_403[data-shown] {\n  visibility: visible;\n}\n\n/* Isolate: the scrim of a dialog over the rest of the page, with a cut-out around each changed surface. */\n._scrim_a8mxc_458 {\n  position: absolute;\n  inset: 0;\n  display: block;\n  animation: _scrim-in_a8mxc_1 var(--motion-duration-moderate) var(--motion-easing-enter);\n}\n\n._scrimFill_a8mxc_465 {\n  fill: var(--color-overlay-scrim);\n}\n\n@keyframes _scrim-in_a8mxc_1 {\n  from {\n    opacity: 0;\n  }\n}\n\n._tip_a8mxc_297 {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n}\n\n@media (max-width: 760px) {\n  ._anchor_a8mxc_5 {\n    inset-inline: var(--space-2);\n    bottom: var(--space-2);\n  }\n\n  /* Phone, open: docked to the bottom edge. Row 1: sides, Changes, collapse. Row 2, for a token change: the count,\n     Previous and Next, Isolate. */\n  ._anchor_a8mxc_5[data-open] {\n    inset-inline: 0;\n    bottom: 0;\n  }\n\n  ._panel_a8mxc_30 {\n    grid-template-areas:\n      \"sides actions collapse\"\n      \"nav nav nav\"\n      \"note note note\";\n    grid-template-rows: calc(var(--size-11) - var(--border-width-default)) auto 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_a8mxc_81 {\n    display: none;\n  }\n\n  ._grip_a8mxc_71,\n  ._brand_a8mxc_90,\n  ._studio_a8mxc_514 {\n    display: none;\n  }\n\n  ._sides_a8mxc_119 {\n    justify-self: start;\n  }\n\n  ._nav_a8mxc_124 {\n    padding-block-end: var(--space-1);\n  }\n\n  ._noteRow_a8mxc_194 ._note_a8mxc_194 {\n    padding-inline-start: 0;\n  }\n\n  ._pill_a8mxc_31 {\n    grid-template-columns: minmax(0, 1fr) auto auto;\n  }\n\n  ._sheetPhone_a8mxc_340 {\n    display: block;\n  }\n}\n\n/* Below 480px the note's action takes its own line. */\n@media (max-width: 480px) {\n  ._noteAction_a8mxc_216 {\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 { 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";
-import { l as loadBuild, u as useDocumentScope } from "./index-yvFRSnsp.js";
-const API = "https://api.github.com";
+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";
 const VISUAL_BRANCH = "bridge-visual";
 const cacheKey = (n) => `bridge-admin:facts:v3:${n}`;
 function session$1() {
@@ -20,34 +19,31 @@ function session$1() {
     return null;
   }
 }
-async function json(url) {
-  const r = await fetch(url, { headers: url.startsWith(API) ? { Accept: "application/vnd.github+json" } : {} });
-  if (!r.ok) throw new Error(r.status === 403 || r.status === 429 ? "GitHub limits reads without an account to 60 an hour. Try again later." : `GitHub answered ${r.status}.`);
-  return await r.json();
+function readsOf(build) {
+  return githubReads({ team: build.ds ?? `${build.owner}/${build.repo}`, proxy: build.proxy === void 0 ? DEFAULT_PROXY : build.proxy });
 }
-async function readManifest(R, raw, n, sha) {
-  const root = await json(`${R}/git/trees/${VISUAL_BRANCH}`).catch(() => null);
+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 json(`${R}/git/trees/${pr.sha}`).catch(() => 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 json(`${raw}/${VISUAL_BRANCH}/pr-${n}/${sha}/manifest.json`).catch(() => 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) {
+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 = `${API}/repos/${build.owner}/${build.repo}`;
-  const raw = `https://raw.githubusercontent.com/${build.owner}/${build.repo}`;
+  const R = `/repos/${build.owner}/${build.repo}`;
   const [pull, files] = await Promise.all([
-    json(`${R}/pulls/${n}`),
-    json(`${R}/pulls/${n}/files?per_page=100`)
+    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) => json(`${raw}/${sha}/${path}`).catch(() => null);
+  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(
@@ -58,8 +54,8 @@ async function loadChange(build, n) {
     )
   );
   const [compare, manifest, tokens] = await Promise.all([
-    json(`${R}/compare/${encodeURIComponent(pull.base.ref)}...${pull.head.sha}`).catch(() => null),
-    readManifest(R, raw, n, pull.head.sha),
+    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);
@@ -81,17 +77,16 @@ async function loadChange(build, n) {
   return facts;
 }
 const togetherKey = (n) => `bridge-admin:together:v1:${n}`;
-async function loadTogetherChange(build, 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 = `${API}/repos/${build.owner}/${build.repo}`;
-  const raw = `https://raw.githubusercontent.com/${build.owner}/${build.repo}`;
-  const pull = await json(`${R}/pulls/${n}`);
-  const compare = await json(
+  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 ?? [];
@@ -101,7 +96,7 @@ async function loadTogetherChange(build, n) {
   const start = compare.merge_base_commit?.sha;
   let source = null;
   if (tokenOnly && start) {
-    const text = (sha, path) => fetch(`${raw}/${sha}/${path.split("/").map(encodeURIComponent).join("/")}`).then((r) => r.ok ? r.text() : Promise.reject(new Error(`GitHub answered ${r.status}.`)));
+    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(
@@ -237,9 +232,6 @@ function surfaceLine(tokenNames, surfaces) {
   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" };
@@ -320,6 +312,13 @@ function shownRect(el) {
   return w > 0 && h > 0 ? r : null;
 }
 const visible = (el) => el.getClientRects().length > 0;
+function rendered(el) {
+  const check = el.checkVisibility;
+  if (check && !check.call(el, { opacityProperty: true, visibilityProperty: true })) return false;
+  const r = el.getBoundingClientRect();
+  return r.width > 0 && r.height > 0;
+}
+const isPage = (el) => el === document.documentElement || el === document.body;
 function changedElements(changedVars, sheet2, ignore, sheetIs = "before") {
   const live = sheet2;
   const t0 = performance.now();
@@ -425,6 +424,43 @@ function changedElements(changedVars, sheet2, ignore, sheetIs = "before") {
   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 SAME_LINE = 8;
+function readingOrder(places) {
+  return places.map((p, i) => ({ p, i })).sort((a, b) => (Math.abs(a.p.top - b.p.top) <= SAME_LINE ? a.p.left - b.p.left : a.p.top - b.p.top) || a.i - b.i).map((x) => x.i);
+}
+function stepTo(current, delta, count) {
+  if (count <= 0) return null;
+  if (current === null || current < 0 || current >= count) return delta === 1 ? 0 : count - 1;
+  return (current + delta + count) % count;
+}
+const changeCount = (n) => `${n} changed`;
+const positionLabel = (position, n) => `${position + 1} / ${n} changed`;
+const stepAnnouncement = (position, n, label) => `Changed element ${position + 1} of ${n}: ${label}`;
+function elsewhereLine(screens) {
+  if (!screens.length) return "This change doesn't touch this screen.";
+  const names = screens.length <= 2 ? screens.join(" and ") : `${screens.slice(0, 2).join(", ")} and ${screens.length - 2} more`;
+  return `This change doesn't touch this screen. It shows on ${names}.`;
+}
+function isTyping(target) {
+  const t = target;
+  if (!t) return false;
+  if (t.isContentEditable) return true;
+  const tag = (t.tagName ?? "").toLowerCase();
+  if (tag === "input" || tag === "textarea" || tag === "select") return true;
+  return Boolean(t.closest && t.closest('[role="combobox"], [role="textbox"], [role="searchbox"]'));
+}
+function isEscape(e) {
+  return e.key === "Escape" && !e.altKey && !e.ctrlKey && !e.metaKey && !isTyping(e.target);
+}
+const TIP_ROOM = { width: 300, height: 64 };
+function tipSide(box2, view, bar, room = TIP_ROOM) {
+  const floor = bar ? Math.min(view.height, bar.top) : view.height;
+  if (floor - box2.bottom >= room.height) return "bottom";
+  const fitsBeside = box2.top >= 0 && box2.top + room.height <= floor;
+  if (fitsBeside && view.width - box2.right >= room.width) return "right";
+  if (fitsBeside && box2.left >= room.width) return "left";
+  return "top";
+}
 const IGNORE = "[data-bridge-toolbar], [data-bridge-overlay]";
 function useChangedElements(on, live, vars, screen, sheetIs = "before") {
   const [result, setResult] = useState(null);
@@ -495,52 +531,52 @@ function usePinnedBridgeTokens(url, theme) {
     };
   }, [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 anchor = "_anchor_a8mxc_5";
+const panel = "_panel_a8mxc_30";
+const pill = "_pill_a8mxc_31";
+const grip = "_grip_a8mxc_71";
+const title = "_title_a8mxc_81";
+const brand = "_brand_a8mxc_90";
+const name = "_name_a8mxc_98";
+const pillTitle = "_pillTitle_a8mxc_103";
+const actions = "_actions_a8mxc_110";
+const sides = "_sides_a8mxc_119";
+const nav = "_nav_a8mxc_124";
+const countButton = "_countButton_a8mxc_132";
+const steps = "_steps_a8mxc_137";
+const collapse = "_collapse_a8mxc_141";
+const split = "_split_a8mxc_164";
+const subtle = "_subtle_a8mxc_180";
+const noteRow = "_noteRow_a8mxc_194";
+const note = "_note_a8mxc_194";
+const noteAction = "_noteAction_a8mxc_216";
+const sheet = "_sheet_a8mxc_220";
+const list = "_list_a8mxc_224";
+const item = "_item_a8mxc_233";
+const screenLink = "_screenLink_a8mxc_241";
+const here = "_here_a8mxc_242";
+const meta = "_meta_a8mxc_253";
+const rows = "_rows_a8mxc_261";
+const row = "_row_a8mxc_261";
+const rowText = "_rowText_a8mxc_278";
+const rowName = "_rowName_a8mxc_285";
+const rowMeta = "_rowMeta_a8mxc_291";
+const tipText = "_tipText_a8mxc_297";
+const tipStep = "_tipStep_a8mxc_301";
+const sheetFoot = "_sheetFoot_a8mxc_305";
+const sheetSection = "_sheetSection_a8mxc_309";
+const sectionTitle = "_sectionTitle_a8mxc_321";
+const notice = "_notice_a8mxc_327";
+const sheetPhone = "_sheetPhone_a8mxc_340";
+const back = "_back_a8mxc_344";
+const overlay = "_overlay_a8mxc_376";
+const box = "_box_a8mxc_383";
+const tint = "_tint_a8mxc_397";
+const chip = "_chip_a8mxc_403";
+const scrim = "_scrim_a8mxc_458";
+const scrimFill = "_scrimFill_a8mxc_465";
+const tip = "_tip_a8mxc_297";
+const studio = "_studio_a8mxc_514";
 const styles = {
   anchor,
   panel,
@@ -552,14 +588,12 @@ const styles = {
   pillTitle,
   actions,
   sides,
+  nav,
+  countButton,
+  steps,
   collapse,
-  phoneOnly,
-  desktopOnly,
-  count,
-  swatches,
   split,
   subtle,
-  more,
   noteRow,
   note,
   noteAction,
@@ -586,10 +620,13 @@ const styles = {
   box,
   tint,
   chip,
+  scrim,
+  scrimFill,
   tip,
   studio
 };
 const INSET = 8;
+const HOLE = 4;
 function boxOf(el) {
   const r = shownRect(el);
   if (!r) return null;
@@ -609,10 +646,13 @@ function ChangeOutlines({
   tip: tip2,
   onShown,
   emphasis,
-  flash
+  flash,
+  isolate = false,
+  bar
 }) {
   const [tick, setTick] = useState(0);
   const [active, setActive] = useState(null);
+  const maskId = `bridge-isolate-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   useEffect(() => {
     let frame = 0;
     const on = () => {
@@ -663,30 +703,61 @@ function ChangeOutlines({
       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
-    );
-  }) });
+  return /* @__PURE__ */ jsxs(ThemeProvider, { theme, brand: "bridge", density: "compact", className: styles.overlay, "data-bridge-overlay": "", "data-isolate": isolate || void 0, ...{ [PIN_ATTR]: "" }, "aria-hidden": "true", children: [
+    isolate ? /* @__PURE__ */ jsxs("svg", { className: styles.scrim, width: "100%", height: "100%", focusable: "false", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id: maskId, children: [
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: "white" }),
+        boxes.map(
+          (b, i) => b && !b.page ? /* @__PURE__ */ jsx("rect", { x: b.left - HOLE, y: b.top - HOLE, width: b.width + 2 * HOLE, height: b.height + 2 * HOLE, rx: (parseFloat(b.radius) || 0) + HOLE, fill: "black" }, i) : null
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx("rect", { className: styles.scrimFill, width: "100%", height: "100%", mask: `url(#${maskId})` })
+    ] }) : null,
+    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: [
+            (active === i || emphasis === i) && !b.page ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                open: true,
+                content: tip2(s),
+                side: tipSide({ left: b.left, top: b.top, right: b.left + b.width, bottom: b.top + b.height }, { width: window.innerWidth, height: window.innerHeight }, bar?.() ?? null),
+                align: "start",
+                className: PIN_CLASS,
+                children: /* @__PURE__ */ jsx("span", { className: styles.tint })
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: styles.tint }),
+            (active === i || emphasis === i) && b.page ? /* @__PURE__ */ jsx(Tooltip, { open: true, content: tip2(s), side: "bottom", align: "start", className: PIN_CLASS, children: chip2 }) : chip2
+          ]
+        },
+        i
+      );
+    })
+  ] });
+}
+function ChangeNav({ countText, tip: tip2, outlinesOn, disabled, total, isolate, announce, onToggle, onStep, onIsolate }) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.nav, role: "group", "aria-label": "What changed on this screen", children: [
+    /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: tip2, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", iconStart: ScanSearch, pressed: outlinesOn, "aria-keyshortcuts": "C", disabled, onClick: onToggle, className: styles.countButton, children: countText }) }),
+    total ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(ButtonGroup, { appearance: "attached", "aria-label": "Step through the changed elements", className: styles.steps, children: [
+        /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Previous changed element", children: /* @__PURE__ */ jsx(IconButton, { icon: ChevronLeft, variant: "secondary", size: "md", label: "Previous changed element", onClick: () => onStep(-1) }) }),
+        /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: "Next changed element", children: /* @__PURE__ */ jsx(IconButton, { icon: ChevronRight, variant: "secondary", size: "md", label: "Next changed element", onClick: () => onStep(1) }) })
+      ] }),
+      /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: isolate ? "Show the whole page again. Press Esc." : "Dim everything but the changed elements. Esc turns it off.", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", pressed: isolate, "aria-keyshortcuts": isolate ? "Escape" : void 0, onClick: () => onIsolate(!isolate), children: "Isolate" }) })
+    ] }) : null,
+    /* @__PURE__ */ jsx(VisuallyHidden, { role: "status", children: announce })
+  ] });
 }
 function useSheet(css, applied) {
   const [el, setEl] = useState(null);
@@ -758,7 +829,6 @@ function useTogether(build, latest, changes, use, here2, applied) {
   };
 }
 const SIDE_LABEL = { before: "Live product", after: "This change" };
-const MAX_PAIRS = 3;
 function session() {
   try {
     return window.sessionStorage;
@@ -773,19 +843,20 @@ function remember(key, value) {
   }
 }
 function ToolbarRoot(props) {
-  const { build: given, ds, product, studio: studio2, production, preview, deployEnv } = 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 }).then(
+    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]);
+  }, [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 });
 }
@@ -970,19 +1041,21 @@ function Toolbar({
     };
   }, [build, change, tg]);
   const liveUrl = !tg && facts?.mode === "tokens" ? liveTokensUrl(build) : null;
-  const [outlines, setOutlines] = useState(false);
+  const [outlinePick, setOutlinePick] = useState(null);
+  const outlines = outlinePick ?? open;
+  const toggleOutlines = useCallback(() => setOutlinePick((p) => !(p ?? open)), [open]);
   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 screenKey = `${hash}|${theme}|${tenantId}|${tg ? T?.included.join(",") ?? "" : ""}`;
   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(",") ?? "" : ""}`,
+    screenKey,
     tg ? "after" : "before"
   );
   const nameOf = (v) => facts?.tokens.find((t) => t.cssVar === v)?.name ?? v;
@@ -993,6 +1066,9 @@ function Toolbar({
   const [emphasis, setEmphasis] = useState(null);
   const [flash, setFlash] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
+  const [position, setPosition] = useState(null);
+  const [announce, setAnnounce] = useState("");
+  const [isolate, setIsolate] = useState(false);
   const phone = useMedia("(max-width: 760px)");
   const reduced = useMedia("(prefers-reduced-motion: reduce)");
   usePinnedBridgeTokens(liveTokensUrl(build), theme);
@@ -1056,7 +1132,7 @@ function Toolbar({
     const onKey = (e) => {
       if (canOutline && !noDiff && isKey(e, "c")) {
         e.preventDefault();
-        setOutlines((o) => !o);
+        toggleOutlines();
         return;
       }
       if (!isFlipKey(e)) return;
@@ -1065,7 +1141,15 @@ function Toolbar({
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [choose, side, canOutline, noDiff]);
+  }, [choose, side, canOutline, noDiff, toggleOutlines]);
+  useEffect(() => {
+    if (!isolate) return;
+    const onEscape = (e) => {
+      if (isEscape(e)) setIsolate(false);
+    };
+    window.addEventListener("keydown", onEscape, true);
+    return () => window.removeEventListener("keydown", onEscape, true);
+  }, [isolate]);
   useLayoutEffect(() => {
     const el = root.current;
     const anchor2 = el?.parentElement;
@@ -1152,8 +1236,39 @@ 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 = outlinesOn ? diff?.surfaces ?? [] : [];
+  const surfaces = useMemo(() => outlinesOn ? diff?.surfaces ?? [] : [], [outlinesOn, diff]);
   const shownCount = outlinesOn && diff ? shown.count : null;
+  const order = useMemo(() => {
+    const on = surfaces.map((s, i) => ({ s, i })).filter(({ s }) => rendered(s.el));
+    const places = on.map(({ s }) => {
+      if (isPage(s.el)) return { top: -1, left: 0 };
+      const r = s.el.getBoundingClientRect();
+      return { top: r.top + window.scrollY, left: r.left + window.scrollX };
+    });
+    return readingOrder(places).map((k) => on[k].i);
+  }, [surfaces]);
+  const total = outlinesOn && diff ? order.length : null;
+  const current = position !== null ? order[position] ?? null : null;
+  useEffect(() => {
+    setPosition(null);
+    setAnnounce("");
+  }, [screenKey, outlinesOn]);
+  useEffect(() => {
+    if (position !== null && position >= order.length) setPosition(null);
+  }, [order.length, position]);
+  const isolateOn = isolate && Boolean(total);
+  const step = (delta) => {
+    const next = stepTo(position, delta, order.length);
+    if (next === null) return;
+    const s = surfaces[order[next]];
+    setPosition(next);
+    setEmphasis(null);
+    if (!isPage(s.el)) s.el.scrollIntoView({ block: "center", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
+    setAnnounce(stepAnnouncement(next, order.length, s.label));
+  };
+  const isHere = (sc) => sc.route === hash && sc.tenant === tenantId && sc.theme === theme;
+  const elsewhere = (screens ?? []).filter((sc) => !isHere(sc));
+  const screenHref = (sc) => `?${PARAM}=${change}&tenant=${encodeURIComponent(sc.tenant)}&theme=${encodeURIComponent(sc.theme)}#${sc.route}`;
   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 ",
@@ -1166,7 +1281,17 @@ 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." }) : 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: [
+  ] }) : (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 ",
+      elsewhere[0].label
+    ] })
+  ] }) : /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: screens ? elsewhereLine([]) : EMPTY_LINE }) : total && shownCount === 0 && position === null ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
+    "Nothing changed in view. Next takes you to ",
+    total === 1 ? "the changed element" : `the ${total} changed elements`,
+    "."
+  ] }) : tg && T && side === "after" && activeHere < T.included.length ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
     activeHere,
     " of these ",
     T.included.length,
@@ -1182,62 +1307,67 @@ function Toolbar({
     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,
+  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(
+    ChangeNav,
     {
-      icon: ScanSearch,
-      size: "md",
-      variant: "ghost",
-      pressed: outlinesOn,
+      countText,
+      tip: toggleTip,
+      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)
+      total,
+      isolate: isolateOn,
+      announce,
+      onToggle: toggleOutlines,
+      onStep: step,
+      onIsolate: setIsolate
     }
   ) : 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" });
+    if (!isPage(el)) el.scrollIntoView({ block: "center", behavior: reduced ? "auto" : "smooth" });
     setEmphasis(i);
+    if (order.includes(i)) setPosition(order.indexOf(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,
+  const sides2 = /* @__PURE__ */ jsx(ButtonGroup, { appearance: "attached", "aria-label": "Compare", className: styles.sides, children: ["before", "after"].map((s) => /* @__PURE__ */ jsx(
+    Tooltip,
     {
-      variant: "secondary",
-      size: "md",
-      pressed: side === s,
-      "aria-keyshortcuts": "B",
-      disabled: !canFlip && side !== s,
-      onClick: () => choose(s),
-      children: sideLabel(s)
-    }
-  ) }, s)) });
+      className: PIN_CLASS,
+      content: /* @__PURE__ */ jsxs(Fragment, { children: [
+        sideLabel(s),
+        ": ",
+        s === "before" ? "what customers see today." : modeDetail(facts),
+        " ",
+        /* @__PURE__ */ jsx(Kbd, { keys: "B", size: "sm" }),
+        " flips sides on the same screen."
+      ] }),
+      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,
     {
@@ -1251,6 +1381,39 @@ function Toolbar({
       "data-dock": place.dock,
       style: place.lift ? { paddingBottom: `${place.lift}px` } : void 0,
       children: [
+        outlinesOn && surfaces.length ? /* @__PURE__ */ jsx(
+          ChangeOutlines,
+          {
+            surfaces,
+            theme,
+            emphasis: emphasis ?? current,
+            flash,
+            isolate: isolateOn,
+            bar: () => root.current?.getBoundingClientRect() ?? null,
+            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,
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1261,6 +1424,7 @@ function Toolbar({
             "data-side": side,
             "data-diff-ms": outlinesOn ? diff?.ms : void 0,
             "data-diff-count": shownCount ?? void 0,
+            "data-diff-total": total ?? void 0,
             "data-diff-elements": outlinesOn ? diff?.elements.length : void 0,
             "data-note": note2 ? "" : void 0,
             style: drag ? { transform: `translateX(${drag}px)` } : void 0,
@@ -1285,19 +1449,15 @@ function Toolbar({
                   /* @__PURE__ */ jsx("span", { className: styles.brand, children: "Bridge" }),
                   /* @__PURE__ */ jsx("span", { className: styles.name, title: title2, children: title2 })
                 ] }),
-                outlineIcon,
+                sides2,
+                nav2,
                 /* @__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
-                        ] })
+                        render: phone ? /* @__PURE__ */ jsx(IconButton, { icon: ListChecks, size: "md", variant: "ghost", label: "Changes, screens and tokens" }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "md", iconEnd: ChevronUp }),
+                        children: phone ? null : /* @__PURE__ */ jsx(Fragment, { children: "Changes" })
                       }
                     ),
                     /* @__PURE__ */ jsxs(PopoverContent, { side: "top", align: "center", className: `${styles.sheet} ${PIN_CLASS}`, "aria-label": "Changes", children: [
@@ -1363,15 +1523,15 @@ function Toolbar({
                           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 current2 = isHere(sc);
                           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: [
+                          return /* @__PURE__ */ jsxs("li", { className: styles.item, "aria-current": current2 ? "page" : void 0, children: [
+                            current2 ? /* @__PURE__ */ jsxs("span", { className: styles.here, children: [
                               /* @__PURE__ */ jsx(Icon, { icon: Check, size: "sm" }),
                               sc.label,
                               where
@@ -1379,7 +1539,7 @@ function Toolbar({
                               Link,
                               {
                                 variant: "standalone",
-                                href: `?${PARAM}=${change}&tenant=${encodeURIComponent(sc.tenant)}&theme=${encodeURIComponent(sc.theme)}#${sc.route}`,
+                                href: screenHref(sc),
                                 onClick: goTo(sc),
                                 className: styles.screenLink,
                                 children: [
@@ -1388,17 +1548,17 @@ function Toolbar({
                                 ]
                               }
                             ),
-                            /* @__PURE__ */ jsx("span", { className: styles.meta, children: current ? "You are here" : `${Math.max(1, Math.round(sc.percent))}% changed` })
+                            /* @__PURE__ */ jsx("span", { className: styles.meta, children: current2 ? "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: [
+                      visiblePairs.length ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "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`,
+                              g.pairs.length === 1 ? [g.pairs[0].token.step, g.pairs[0].color ? hexPair(g.pairs[0].before, g.pairs[0].after) : `${g.pairs[0].before} → ${g.pairs[0].after}`].filter(Boolean).join(", ") : `${g.pairs.length} steps`,
                               isSubtle(g.pairs[0].before, g.pairs[0].after) ? ", subtle change" : ""
                             ] })
                           ] }),
@@ -1413,7 +1573,6 @@ function Toolbar({
                       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) }) }),
@@ -1427,38 +1586,7 @@ function Toolbar({
               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
+        )
       ]
     }
   );
@@ -1487,4 +1615,4 @@ function useHash() {
 export {
   ToolbarRoot as default
 };
-//# sourceMappingURL=Toolbar-B-p9ZCvk.js.map
+//# sourceMappingURL=Toolbar-DJUb3p2c.js.map