@bridge-ds/toolbar 0.2.0 → 0.4.0

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

@@ -1,15 +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 { 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";
+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-cRndUN9A.js";
+import { t as tokenChanges, c as changedScreens, b as changeMode, d as readableTitle, M as MARKS_PARAM, e as toggleIncluded, r as readChanges, w as whereAmI, f as readReturn, g as readUse, h as shouldRender, O as OPEN_KEY, i as readDock, l as liveTokensUrl, n as noVisibleDifference, j as readScroll, S as SCROLL_PARAM, k as sameScreenOn, m as studioChangesUrl, o as studioChangeUrl, T as TOGETHER_EMPTY_LINE, p as contrastRatio, q as toHex, u as fromText, v as TOGETHER_HINT, x as isSubtle, y as isFlipKey, z as placeToolbar, A as togetherLabel, P as PARAM, B as changeSummary, C as dockAt, D as stepDock, E as DOCK_KEY } from "./session-Dvma9jtT.js";
 const VISUAL_BRANCH = "bridge-visual";
 const cacheKey = (n) => `bridge-admin:facts:v3:${n}`;
 function session$1() {
@@ -232,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" };
@@ -315,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();
@@ -420,7 +424,44 @@ 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 IGNORE = "[data-bridge-toolbar], [data-bridge-overlay]";
+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$1 = "[data-bridge-toolbar], [data-bridge-overlay]";
 function useChangedElements(on, live, vars, screen, sheetIs = "before") {
   const [result, setResult] = useState(null);
   const key = vars.join(",");
@@ -429,12 +470,71 @@ function useChangedElements(on, live, vars, screen, sheetIs = "before") {
       setResult(null);
       return;
     }
-    const run = () => setResult(changedElements(key.split(","), live, (el) => Boolean(el.closest(IGNORE)), sheetIs));
+    const run = () => setResult(changedElements(key.split(","), live, (el) => Boolean(el.closest(IGNORE$1)), sheetIs));
     const ids = [window.setTimeout(run, 0), window.setTimeout(run, 400), window.setTimeout(run, 1200)];
     return () => ids.forEach((id) => window.clearTimeout(id));
   }, [on, live, key, screen, sheetIs]);
   return result;
 }
+const CHANGE_ATTR = "data-bridge-change";
+const MARKS_KEY = "bridge-admin:marks";
+const IGNORE = "[data-bridge-toolbar], [data-bridge-overlay]";
+function markerLabel(value) {
+  const v = (value ?? "").replace(/\s+/g, " ").trim();
+  return v ? v.charAt(0).toUpperCase() + v.slice(1) : "Changed area";
+}
+function markedElements(root = document) {
+  return Array.from(root.querySelectorAll(`[${CHANGE_ATTR}]`)).filter((el) => !el.closest(IGNORE)).map((el) => ({ el, pseudo: null, roots: [], props: [], label: markerLabel(el.getAttribute(CHANGE_ATTR)), keys: [], floating: false }));
+}
+function sameMarks(a, b) {
+  return Boolean(a) && a.length === b.length && a.every((x, i) => x.el === b[i].el && x.label === b[i].label);
+}
+const waitingText = (n) => n === null ? "See what changed" : `${n} changed on This change`;
+const NO_MARKS_LINE = "This change does not mark what it changed yet. Compare Live product and This change.";
+function readMarks(search, route, storage) {
+  const raw = new URLSearchParams(search).get(MARKS_PARAM);
+  if (raw !== null && /^\d{1,4}$/.test(raw)) {
+    try {
+      storage?.setItem(MARKS_KEY, JSON.stringify({ route, n: Number(raw) }));
+    } catch {
+    }
+    return Number(raw);
+  }
+  try {
+    const kept = JSON.parse(storage?.getItem(MARKS_KEY) ?? "null");
+    return kept && kept.route === route && typeof kept.n === "number" ? kept.n : null;
+  } catch {
+    return null;
+  }
+}
+const OWN = "[data-bridge-toolbar], [data-bridge-overlay]";
+function useMarkedChanges(on, screen) {
+  const [marks, setMarks] = useState(null);
+  useEffect(() => {
+    if (!on) {
+      setMarks(null);
+      return;
+    }
+    const run = () => {
+      const next = markedElements();
+      setMarks((prev) => sameMarks(prev, next) ? prev : next);
+    };
+    const ids = [window.setTimeout(run, 0), window.setTimeout(run, 400), window.setTimeout(run, 1200)];
+    let frame = 0;
+    const mo = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+      if (records.every((r) => r.target instanceof Element && r.target.closest(OWN))) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(run);
+    });
+    mo?.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [CHANGE_ATTR] });
+    return () => {
+      ids.forEach((id) => window.clearTimeout(id));
+      cancelAnimationFrame(frame);
+      mo?.disconnect();
+    };
+  }, [on, screen]);
+  return marks;
+}
 const PIN_ATTR = "data-bridge-pin";
 const PIN_CLASS = "bridge-pin";
 const STYLE_ATTR = "data-bridge-pinned";
@@ -490,52 +590,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,
@@ -547,14 +647,12 @@ const styles = {
   pillTitle,
   actions,
   sides,
+  nav,
+  countButton,
+  steps,
   collapse,
-  phoneOnly,
-  desktopOnly,
-  count,
-  swatches,
   split,
   subtle,
-  more,
   noteRow,
   note,
   noteAction,
@@ -581,10 +679,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;
@@ -604,10 +705,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 = () => {
@@ -658,30 +762,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);
@@ -753,7 +888,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;
@@ -966,41 +1100,52 @@ 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 isCode = !tg && Boolean(facts) && facts.mode !== "tokens";
+  const canMark = isCode && side === "after";
   const live = useLiveSheet(liveUrl, outlines && canOutline, side === "before" && facts?.mode === "tokens");
   const onePairs = usePairs(tg ? null : facts, liveUrl, brand2, side === "before");
   const pairs = tg ? T?.pairs ?? [] : onePairs;
   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 marks = useMarkedChanges(canMark, screenKey);
+  const marksOn = outlines && canMark && Boolean(marks?.length);
+  const showing = outlinesOn || marksOn;
+  const found = outlinesOn ? diff?.surfaces ?? null : marksOn ? marks : null;
   const nameOf = (v) => facts?.tokens.find((t) => t.cssVar === v)?.name ?? v;
   const [shown, setShown] = useState({ count: 0, obstacles: [] });
   const setShownStable = useCallback((next) => setShown((p) => JSON.stringify(p) === JSON.stringify(next) ? p : next), []);
   const outlineBoxes = useRef([]);
-  outlineBoxes.current = outlinesOn ? shown.obstacles : [];
+  outlineBoxes.current = showing ? shown.obstacles : [];
   const [emphasis, setEmphasis] = useState(null);
   const [flash, setFlash] = useState(false);
   const [sheetOpen, setSheetOpen] = useState(false);
+  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);
   useEffect(() => {
-    if (!outlinesOn || reduced) {
+    if (!showing || reduced) {
       setFlash(false);
       return;
     }
     setFlash(true);
     const id = window.setTimeout(() => setFlash(false), 1500);
     return () => window.clearTimeout(id);
-  }, [outlinesOn, reduced]);
+  }, [showing, reduced]);
   useEffect(() => {
     if (!sheetOpen) setEmphasis(null);
   }, [sheetOpen]);
@@ -1016,6 +1161,13 @@ function Toolbar({
   useEffect(() => {
     if (shownIn && theme !== shownIn) setShownIn(null);
   }, [theme, shownIn]);
+  const waiting = useMemo(() => isCode && side === "before" ? readMarks(window.location.search, hash, session()) : null, [isCode, side, hash]);
+  useEffect(() => {
+    if (!new URLSearchParams(window.location.search).has(MARKS_PARAM)) return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete(MARKS_PARAM);
+    window.history.replaceState(window.history.state, "", url);
+  }, []);
   useEffect(() => {
     const y = readScroll(window.location.search);
     if (y === null) return;
@@ -1041,18 +1193,18 @@ function Toolbar({
       }
       const here2 = { search: window.location.search, hash: window.location.hash };
       if (next === "before" && build.production) {
-        window.location.assign(sameScreenOn(build.production, here2, { change, returnTo: window.location.origin, scroll: window.scrollY }));
+        window.location.assign(sameScreenOn(build.production, here2, { change, returnTo: window.location.origin, scroll: window.scrollY, marks: marks?.length ?? null }));
       } else if (next === "after" && returnTo) {
         window.location.assign(sameScreenOn(returnTo, here2, { change, scroll: window.scrollY }));
       }
     },
-    [side, facts, build, change, returnTo]
+    [side, facts, build, change, returnTo, marks]
   );
   useEffect(() => {
     const onKey = (e) => {
-      if (canOutline && !noDiff && isKey(e, "c")) {
+      if ((canOutline && !noDiff || canMark && marks?.length) && isKey(e, "c")) {
         e.preventDefault();
-        setOutlines((o) => !o);
+        toggleOutlines();
         return;
       }
       if (!isFlipKey(e)) return;
@@ -1061,7 +1213,15 @@ function Toolbar({
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [choose, side, canOutline, noDiff]);
+  }, [choose, side, canOutline, canMark, marks, 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;
@@ -1095,7 +1255,7 @@ function Toolbar({
       window.removeEventListener("hashchange", measure);
       document.body.style.paddingBottom = "";
     };
-  }, [dock, open, facts, shown, outlinesOn]);
+  }, [dock, open, facts, shown, showing]);
   const toggleOpen = (next) => {
     setOpen(next);
     remember(OPEN_KEY, next ? "1" : "0");
@@ -1148,8 +1308,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 shownCount = outlinesOn && diff ? shown.count : null;
+  const surfaces = useMemo(() => found ?? [], [found]);
+  const shownCount = showing && found ? shown.count : null;
+  const order = useMemo(() => {
+    const on = surfaces.map((s, i) => ({ s, i })).filter(({ s }) => rendered(s.el));
+    const places = on.map(({ s }) => {
+      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 = showing && found ? order.length : null;
+  const current = position !== null ? order[position] ?? null : null;
+  useEffect(() => {
+    setPosition(null);
+    setAnnounce("");
+  }, [screenKey, showing]);
+  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 ",
@@ -1162,7 +1353,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: [
+  ] }) : open && canMark && marks?.length === 0 ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: NO_MARKS_LINE }) : (outlinesOn || side === "before") && live.state === "error" ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: "Could not load the live product. Check your connection, then try again." }) : total === 0 ? tg ? /* @__PURE__ */ jsx("p", { className: styles.note, role: "status", children: TOGETHER_EMPTY_LINE }) : elsewhere.length ? /* @__PURE__ */ jsxs("p", { className: styles.note, role: "status", children: [
+    /* @__PURE__ */ jsx("span", { children: elsewhereLine(elsewhere.map((sc) => sc.label)) }),
+    /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "md", render: /* @__PURE__ */ jsx("a", { href: screenHref(elsewhere[0]) }), onClick: goTo(elsewhere[0]), className: styles.noteAction, children: [
+      "Go to ",
+      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,
@@ -1178,62 +1379,86 @@ 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 markNames = (marks ?? []).map((m) => m.label);
+  const summary = shownCount === null ? null : marksOn ? `Marked by this change: ${markNames.slice(0, 3).join(", ")}${markNames.length > 3 ? ` and ${markNames.length - 3} more` : ""}` : surfaceLine(diff.surfaces.flatMap((s) => s.roots.map(nameOf)), total ?? shownCount);
+  const countText = !showing ? "Show what changed" : total === null ? "Finding changes" : total === 0 ? "Nothing changed here" : position !== null ? positionLabel(position, total) : changeCount(total);
+  const toggleTip = showing ? `${summary ? `${summary}. ` : ""}Press C to hide the outlines.` : `Outline what ${tokenNames.length === 1 ? tokenNames[0] : "this change"} changes on this screen. Press C.`;
+  const nav2 = canOutline || canMark && marks?.length ? /* @__PURE__ */ jsx(
+    ChangeNav,
     {
-      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)
+      countText,
+      tip: toggleTip,
+      outlinesOn: showing,
+      disabled: canOutline && Boolean(noDiff),
+      total,
+      isolate: isolateOn,
+      announce,
+      onToggle: toggleOutlines,
+      onStep: step,
+      onIsolate: setIsolate
     }
+  ) : isCode && side === "before" && waiting !== 0 ? (
+    // Live product: the marked areas are on This change. The count when the switch carried it, else where to look.
+    /* @__PURE__ */ jsx("div", { className: styles.nav, children: /* @__PURE__ */ jsx(Tooltip, { className: PIN_CLASS, content: /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Go to This change to see ",
+      waiting === 1 ? "it" : "them",
+      " outlined. ",
+      /* @__PURE__ */ jsx(Kbd, { keys: "B", size: "sm" }),
+      " flips sides."
+    ] }), children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "md", iconStart: ScanSearch, disabled: !canFlip, onClick: () => choose("after"), className: styles.countButton, children: waitingText(waiting) }) }) })
   ) : null;
   const shownSurfaces = surfaces.map((s, i) => ({ s, i })).filter(({ s }) => shownRect(s.el));
   const focusSurface = (i) => {
     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 focusMark = (i) => {
+    const el = marks?.[i]?.el;
+    if (!el) return;
+    if (!marksOn) setOutlinePick(true);
+    if (!isPage(el)) el.scrollIntoView({ block: "center", behavior: reduced ? "auto" : "smooth" });
+    setEmphasis(i);
+    if (order.includes(i)) setPosition(order.indexOf(i));
+  };
+  const footLine = tg ? facts ? "Screens are measured per change, not for this mix. Show what changed outlines this screen." : "Reading the changes." : !facts ? "Reading the change." : isCode ? side === "before" ? "What this change adds or changes is outlined on This change." : marks?.length ? null : NO_MARKS_LINE : "The screens this change affects are not measured yet.";
+  const sides2 = /* @__PURE__ */ jsx(ButtonGroup, { appearance: "attached", "aria-label": "Compare", className: styles.sides, children: ["before", "after"].map((s) => /* @__PURE__ */ jsx(
+    Tooltip,
     {
-      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,
     {
@@ -1247,6 +1472,45 @@ function Toolbar({
       "data-dock": place.dock,
       style: place.lift ? { paddingBottom: `${place.lift}px` } : void 0,
       children: [
+        showing && surfaces.length ? /* @__PURE__ */ jsx(
+          ChangeOutlines,
+          {
+            surfaces,
+            theme,
+            emphasis: emphasis ?? current,
+            flash,
+            isolate: isolateOn,
+            bar: () => root.current?.getBoundingClientRect() ?? null,
+            onShown: setShownStable,
+            tip: (s) => {
+              if (marksOn) {
+                return /* @__PURE__ */ jsx("span", { className: styles.tip, children: /* @__PURE__ */ jsxs("span", { className: styles.tipText, children: [
+                  /* @__PURE__ */ jsx("span", { children: s.label }),
+                  /* @__PURE__ */ jsx("span", { className: styles.tipStep, children: "New or changed in this change" })
+                ] }) });
+              }
+              const prop = s.props.find((p) => /^rgb/.test(p.before) && /^rgb/.test(p.after));
+              const token = prop ? visiblePairs.find((p) => p.color && toHex(p.after) === toHex(prop.after) && toHex(p.before) === toHex(prop.before)) : null;
+              const name2 = token?.token.name ?? [...new Set(s.roots.map(nameOf))].slice(0, 2).join(", ");
+              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",
           {
@@ -1256,7 +1520,9 @@ function Toolbar({
             "aria-label": `Bridge: ${label}, ${title2}`,
             "data-side": side,
             "data-diff-ms": outlinesOn ? diff?.ms : void 0,
+            "data-marks": canMark ? marks?.length ?? void 0 : void 0,
             "data-diff-count": shownCount ?? void 0,
+            "data-diff-total": total ?? void 0,
             "data-diff-elements": outlinesOn ? diff?.elements.length : void 0,
             "data-note": note2 ? "" : void 0,
             style: drag ? { transform: `translateX(${drag}px)` } : void 0,
@@ -1281,19 +1547,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: [
@@ -1326,6 +1588,28 @@ function Toolbar({
                           "."
                         ] }) : null
                       ] }) : null,
+                      canMark && marks?.length ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "aria-label": `Changed here, ${marks.length}`, children: [
+                        /* @__PURE__ */ jsxs("p", { className: styles.sectionTitle, children: [
+                          "Changed here · ",
+                          marks.length
+                        ] }),
+                        /* @__PURE__ */ jsx("ul", { className: styles.rows, children: marks.map((m, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "md",
+                            fullWidth: true,
+                            className: styles.row,
+                            "data-emphasis": marksOn && emphasis === i || void 0,
+                            onMouseEnter: () => marksOn && setEmphasis(i),
+                            onMouseLeave: () => setEmphasis((e) => e === i ? null : e),
+                            onFocus: () => marksOn && setEmphasis(i),
+                            onBlur: () => setEmphasis((e) => e === i ? null : e),
+                            onClick: () => focusMark(i),
+                            children: /* @__PURE__ */ jsx("span", { className: styles.rowText, children: /* @__PURE__ */ jsx("span", { className: styles.rowName, children: m.label }) })
+                          }
+                        ) }, i)) })
+                      ] }) : null,
                       outlinesOn && shownSurfaces.length ? /* @__PURE__ */ jsxs("section", { className: styles.sheetSection, "aria-label": `Changed here, ${shownSurfaces.length}`, children: [
                         /* @__PURE__ */ jsxs("p", { className: styles.sectionTitle, children: [
                           "Changed here · ",
@@ -1359,15 +1643,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
@@ -1375,7 +1659,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: [
@@ -1384,17 +1668,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" : ""
                             ] })
                           ] }),
@@ -1406,10 +1690,9 @@ function Toolbar({
                         behind
                       ] }) : null,
                       /* @__PURE__ */ jsx("div", { className: styles.sheetPhone, children: /* @__PURE__ */ jsx(Link, { variant: "standalone", href: studio2, className: styles.back, children: "Back to Studio" }) }),
-                      screens === null ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: tg ? facts ? "Screens are measured per change, not for this mix. Show what changed outlines this screen." : "Reading the changes." : facts ? "The screens this change affects are not measured yet." : "Reading the change." }) : screens.length === 0 ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: "No admin screen changes. Component examples may still change: Studio lists them." }) : null
+                      screens === null ? footLine ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: footLine }) : null : screens.length === 0 ? /* @__PURE__ */ jsx("p", { className: `${styles.note} ${styles.sheetFoot}`, children: "No admin screen changes. Component examples may still change: Studio lists them." }) : null
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("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) }) }),
@@ -1423,38 +1706,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
+        )
       ]
     }
   );
@@ -1483,4 +1735,4 @@ function useHash() {
 export {
   ToolbarRoot as default
 };
-//# sourceMappingURL=Toolbar-CzR1TM9x.js.map
+//# sourceMappingURL=Toolbar-ByLHemKF.js.map