@plannotator/ui 0.53.0 → 0.54.0

package/components/html-viewer/bridge-script.lite.ts

@@ -3,7 +3,7 @@
 // annotation CSS, protocol version and live bootstrap as ./bridge-script, with
 // the inline bridge literal stubbed out so a bundler drops it from the viewer
 // chunk. Rendering an HtmlViewer WITHOUT bridgeScriptUrl under this alias throws.
-export const ANNOTATION_HIGHLIGHT_CSS = "\n/* Committed annotation visuals (highlight rectangles + numbered placed\n * markers) render inside a shadow-rooted fixed overlay host — see OVERLAY_CSS\n * in the bridge script. Nothing annotation-related is ever wrapped into or\n * styled onto the author's own elements. */\n/* Vim pinpoint target tint. The MOUSE pinpoint path no longer mutates author\n * elements — it draws the dedicated overlay box below — but keyboard (vim)\n * navigation keeps this class-based visual. */\n.plannotator-pinpoint-hover {\n  background-color: oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.12) !important;\n  border-radius: 3px;\n  cursor: pointer !important;\n}\n/* SVG groups can't render a CSS background, so use a soft glow instead. */\n.plannotator-pinpoint-hover:is(g, svg) {\n  filter: drop-shadow(0 0 4px oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.55));\n}\n/* Mouse pinpoint hover: a fixed-position outline box sized to the hovered\n * element's rect. Never a class/style write on the page's own elements. */\n[data-plannotator-pinpoint-box] {\n  position: fixed;\n  z-index: 2147483643;\n  pointer-events: none;\n  display: none;\n  box-sizing: border-box;\n  border: 2px solid oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.85);\n  border-radius: 5px;\n  background: oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.06);\n}\n[data-plannotator-pinpoint-box].pn-pin-enter {\n  animation: pn-pinpoint-in 0.12s ease-out;\n}\n[data-plannotator-pinpoint-box][data-pinned] {\n  border-color: var(--pn-accent, #d97757);\n  background: oklch(from var(--pn-accent, #d97757) l c h / 0.08);\n}\n@keyframes pn-pinpoint-in {\n  from { opacity: 0; transform: scale(0.985); }\n  to { opacity: 1; transform: scale(1); }\n}\n/* Pinpoint mode affordance: crosshair everywhere. Placed markers live in the\n * shadow overlay and keep their own pointer cursor there. */\nbody[data-plannotator-pinpoint-cursor],\nbody[data-plannotator-pinpoint-cursor] * {\n  cursor: crosshair !important;\n}\n/* Armed pinpoint over an EMBEDDED local document: the embed is one element\n * from the outer page's point of view, and the bridge is never injected into a\n * nested frame, so a click inside it would simply vanish into another document.\n * Making frames transparent to the pointer while armed is what lets that click\n * pin the <iframe>/<embed>/<object> itself. Interact (Esc, the header pen or\n * Mod+Shift+A) restores native interaction inside the embed — which is also\n * the only state a link inside it can be followed from.\n * Live-app sessions never set this attribute: they annotate a real app whose\n * own nested frames belong to it. */\nbody[data-plannotator-frame-inert] :is(iframe, frame, embed, object) {\n  pointer-events: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-plannotator-pinpoint-box].pn-pin-enter {\n    animation: none;\n  }\n}\n@media print {\n  /* Viewer overlays are review chrome, not page content: never bake pinpoint\n     boxes/labels or vim UI into a printed page. The outer app chrome is\n     print-hidden by print.css, but this CSS lives inside the iframe's own\n     document and must carry its own rule. The annotation overlay host carries\n     its own print rule inside its shadow root. */\n  [data-plannotator-pinpoint-box],\n  [data-plannotator-pinpoint-label],\n  [data-plannotator-vim-ui],\n  [data-plannotator-vim-cursor] {\n    display: none !important;\n  }\n}\n/* Print-parity layer: committed highlight rects re-projected into an\n * absolute-positioned light-DOM layer built on beforeprint and torn down on\n * afterprint (the fixed overlay cannot paginate). Guarded here so it can\n * never flash on screen even if an afterprint teardown is missed. */\n@media screen {\n  [data-plannotator-print-layer] {\n    display: none !important;\n  }\n}\nbody[data-plannotator-vim-focus-owner]:focus {\n  outline: none !important;\n}\n[data-plannotator-vim-cursor] {\n  position: fixed;\n  z-index: 2147483646;\n  width: 2px;\n  min-height: 1em;\n  border-radius: 2px;\n  background: var(--pn-focus-highlight, #4493f8);\n  pointer-events: none;\n}\n[data-plannotator-vim-reticle] {\n  position: fixed;\n  z-index: 2147483645;\n  inset: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-fill],\n[data-plannotator-vim-reticle] [data-vim-reticle-corner],\n[data-plannotator-vim-reticle] [data-vim-reticle-label] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  will-change: transform;\n  transition: transform 90ms cubic-bezier(.22,1,.36,1);\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-fill] {\n  width: 100px;\n  height: 100px;\n  transform-origin: 0 0;\n  border-radius: 8px;\n  background: rgba(167,139,250,.045);\n  box-shadow:\n    inset 0 0 0 1px rgba(196,181,253,.16),\n    0 0 42px rgba(139,92,246,.12);\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner] {\n  width: 28px;\n  height: 28px;\n  border-color: #c4b5fd;\n  filter:\n    drop-shadow(0 0 6px rgba(167,139,250,.92))\n    drop-shadow(0 0 18px rgba(124,58,237,.42));\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"top-left\"] {\n  border-top: 3px solid;\n  border-left: 3px solid;\n  border-top-left-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"top-right\"] {\n  border-top: 3px solid;\n  border-right: 3px solid;\n  border-top-right-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"bottom-left\"] {\n  border-bottom: 3px solid;\n  border-left: 3px solid;\n  border-bottom-left-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"bottom-right\"] {\n  border-right: 3px solid;\n  border-bottom: 3px solid;\n  border-bottom-right-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-label] {\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 118px;\n  height: 30px;\n  max-width: min(280px, calc(100vw - 24px));\n  padding: 0 11px;\n  overflow: hidden;\n  border: 1px solid rgba(216,206,255,.42);\n  border-radius: 9px;\n  color: #f6f2ff;\n  background: rgba(18,14,28,.84);\n  box-shadow:\n    0 10px 28px rgba(0,0,0,.42),\n    0 0 20px rgba(139,92,246,.18);\n  backdrop-filter: blur(10px);\n  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;\n  letter-spacing: .13em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-label]::before {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  border-radius: 999px;\n  background: #c4b5fd;\n  box-shadow: 0 0 12px rgba(167,139,250,.94);\n  content: \"\";\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-plannotator-vim-reticle] [data-vim-reticle-fill],\n  [data-plannotator-vim-reticle] [data-vim-reticle-corner],\n  [data-plannotator-vim-reticle] [data-vim-reticle-label] {\n    transition: none;\n  }\n}\n[data-plannotator-vim-badge] {\n  position: fixed;\n  z-index: 2147483647;\n  left: 50%;\n  bottom: 12px;\n  transform: translateX(-50%);\n  padding: 4px 9px;\n  border: 1px solid color-mix(in srgb, var(--pn-focus-highlight, #4493f8) 35%, transparent);\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--pn-background, #111) 94%, transparent);\n  color: var(--pn-focus-highlight, #4493f8);\n  box-shadow: 0 4px 18px rgba(0,0,0,.25);\n  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;\n  letter-spacing: .04em;\n  pointer-events: none;\n}\n";
+export const ANNOTATION_HIGHLIGHT_CSS = "\n/* Committed annotation visuals (highlight rectangles + numbered placed\n * markers) render inside a shadow-rooted fixed overlay host — see OVERLAY_CSS\n * in the bridge script. Nothing annotation-related is ever wrapped into or\n * styled onto the author's own elements. */\n/* Vim pinpoint target tint. The MOUSE pinpoint path no longer mutates author\n * elements — it draws the dedicated overlay box below — but keyboard (vim)\n * navigation keeps this class-based visual. */\n.plannotator-pinpoint-hover {\n  background-color: oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.12) !important;\n  border-radius: 3px;\n  cursor: pointer !important;\n}\n/* SVG groups can't render a CSS background, so use a soft glow instead. */\n.plannotator-pinpoint-hover:is(g, svg) {\n  filter: drop-shadow(0 0 4px oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.55));\n}\n/* Mouse pinpoint hover: a fixed-position outline box sized to the hovered\n * element's rect. Never a class/style write on the page's own elements. */\n[data-plannotator-pinpoint-box] {\n  position: fixed;\n  z-index: 2147483643;\n  pointer-events: none;\n  display: none;\n  box-sizing: border-box;\n  border: 2px solid oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.85);\n  border-radius: 5px;\n  background: oklch(from var(--pn-focus-highlight, #4493f8) l c h / 0.06);\n}\n[data-plannotator-pinpoint-box].pn-pin-enter {\n  animation: pn-pinpoint-in 0.12s ease-out;\n}\n[data-plannotator-pinpoint-box][data-pinned] {\n  border-color: var(--pn-accent, #d97757);\n  background: oklch(from var(--pn-accent, #d97757) l c h / 0.08);\n}\n@keyframes pn-pinpoint-in {\n  from { opacity: 0; transform: scale(0.985); }\n  to { opacity: 1; transform: scale(1); }\n}\n/* Pinpoint mode affordance: crosshair everywhere. Placed markers live in the\n * shadow overlay and keep their own pointer cursor there. */\nbody[data-plannotator-pinpoint-cursor],\nbody[data-plannotator-pinpoint-cursor] * {\n  cursor: crosshair !important;\n}\n/* A plain click on a link with a real destination follows it while armed\n * (Cmd/Ctrl-click pins it), so such a link keeps the pointer that says so,\n * until the modifier is held. A link that goes nowhere (no href, \"\", \"#\",\n * javascript:) is not followed and keeps the crosshair. SVG links may carry\n * only xlink:href, hence the any-namespace attribute. */\nbody[data-plannotator-pinpoint-cursor]:not([data-plannotator-pin-modifier]) :is(a, area)[href]:not([href=\"\"]):not([href=\"#\"]):not([href^=\"javascript:\" i]),\nbody[data-plannotator-pinpoint-cursor]:not([data-plannotator-pin-modifier]) :is(a, area)[href]:not([href=\"\"]):not([href=\"#\"]):not([href^=\"javascript:\" i]) *,\nbody[data-plannotator-pinpoint-cursor]:not([data-plannotator-pin-modifier]) svg a:not([href])[*|href]:not([*|href=\"\"]):not([*|href=\"#\"]):not([*|href^=\"javascript:\" i]),\nbody[data-plannotator-pinpoint-cursor]:not([data-plannotator-pin-modifier]) svg a:not([href])[*|href]:not([*|href=\"\"]):not([*|href=\"#\"]):not([*|href^=\"javascript:\" i]) * {\n  cursor: pointer !important;\n}\n/* Touch, armed: a tap on a link follows it and a press-and-hold pins it for\n * a comment. iOS's link callout would take that hold, so it is off on links\n * while armed, once a touch is seen (data-plannotator-touch) or on screens\n * without hover. The callout is all: link text stays selectable, so a drag\n * across a link (a trackpad, a touchscreen laptop) still quotes its words.\n * Only while a hold on a link is in progress (data-plannotator-link-hold,\n * from its touchstart to its release) is selection off too, so the platform's\n * long-press does not start a native text selection under the finger. */\nbody[data-plannotator-pinpoint-cursor][data-plannotator-touch] :is(a, area),\nbody[data-plannotator-pinpoint-cursor][data-plannotator-touch] :is(a, area) *,\nbody[data-plannotator-pinpoint-cursor][data-plannotator-touch] svg a,\nbody[data-plannotator-pinpoint-cursor][data-plannotator-touch] svg a * {\n  -webkit-touch-callout: none !important;\n}\n@media (hover: none) {\n  body[data-plannotator-pinpoint-cursor] :is(a, area),\n  body[data-plannotator-pinpoint-cursor] :is(a, area) *,\n  body[data-plannotator-pinpoint-cursor] svg a,\n  body[data-plannotator-pinpoint-cursor] svg a * {\n    -webkit-touch-callout: none !important;\n  }\n}\nbody[data-plannotator-link-hold] :is(a, area),\nbody[data-plannotator-link-hold] :is(a, area) *,\nbody[data-plannotator-link-hold] svg a,\nbody[data-plannotator-link-hold] svg a * {\n  -webkit-touch-callout: none !important;\n  -webkit-user-select: none !important;\n  user-select: none !important;\n}\n/* Armed pinpoint over an EMBEDDED local document: the embed is one element\n * from the outer page's point of view, and the bridge is never injected into a\n * nested frame, so a click inside it would simply vanish into another document.\n * Making frames transparent to the pointer while armed is what lets that click\n * pin the <iframe>/<embed>/<object> itself. Interact (Esc, the header pen or\n * Mod+Shift+A) restores native interaction inside the embed — which is also\n * the only state a link inside it can be followed from.\n * Live-app sessions never set this attribute: they annotate a real app whose\n * own nested frames belong to it. */\nbody[data-plannotator-frame-inert] :is(iframe, frame, embed, object) {\n  pointer-events: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-plannotator-pinpoint-box].pn-pin-enter {\n    animation: none;\n  }\n}\n@media print {\n  /* Viewer overlays are review chrome, not page content: never bake pinpoint\n     boxes/labels or vim UI into a printed page. The outer app chrome is\n     print-hidden by print.css, but this CSS lives inside the iframe's own\n     document and must carry its own rule. The annotation overlay host carries\n     its own print rule inside its shadow root. */\n  [data-plannotator-pinpoint-box],\n  [data-plannotator-pinpoint-label],\n  [data-plannotator-vim-ui],\n  [data-plannotator-vim-cursor] {\n    display: none !important;\n  }\n}\n/* Print-parity layer: committed highlight rects re-projected into an\n * absolute-positioned light-DOM layer built on beforeprint and torn down on\n * afterprint (the fixed overlay cannot paginate). Guarded here so it can\n * never flash on screen even if an afterprint teardown is missed. */\n@media screen {\n  [data-plannotator-print-layer] {\n    display: none !important;\n  }\n}\nbody[data-plannotator-vim-focus-owner]:focus {\n  outline: none !important;\n}\n[data-plannotator-vim-cursor] {\n  position: fixed;\n  z-index: 2147483646;\n  width: 2px;\n  min-height: 1em;\n  border-radius: 2px;\n  background: var(--pn-focus-highlight, #4493f8);\n  pointer-events: none;\n}\n[data-plannotator-vim-reticle] {\n  position: fixed;\n  z-index: 2147483645;\n  inset: 0;\n  overflow: visible;\n  pointer-events: none;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-fill],\n[data-plannotator-vim-reticle] [data-vim-reticle-corner],\n[data-plannotator-vim-reticle] [data-vim-reticle-label] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  will-change: transform;\n  transition: transform 90ms cubic-bezier(.22,1,.36,1);\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-fill] {\n  width: 100px;\n  height: 100px;\n  transform-origin: 0 0;\n  border-radius: 8px;\n  background: rgba(167,139,250,.045);\n  box-shadow:\n    inset 0 0 0 1px rgba(196,181,253,.16),\n    0 0 42px rgba(139,92,246,.12);\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner] {\n  width: 28px;\n  height: 28px;\n  border-color: #c4b5fd;\n  filter:\n    drop-shadow(0 0 6px rgba(167,139,250,.92))\n    drop-shadow(0 0 18px rgba(124,58,237,.42));\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"top-left\"] {\n  border-top: 3px solid;\n  border-left: 3px solid;\n  border-top-left-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"top-right\"] {\n  border-top: 3px solid;\n  border-right: 3px solid;\n  border-top-right-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"bottom-left\"] {\n  border-bottom: 3px solid;\n  border-left: 3px solid;\n  border-bottom-left-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-corner=\"bottom-right\"] {\n  border-right: 3px solid;\n  border-bottom: 3px solid;\n  border-bottom-right-radius: 8px;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-label] {\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  min-width: 118px;\n  height: 30px;\n  max-width: min(280px, calc(100vw - 24px));\n  padding: 0 11px;\n  overflow: hidden;\n  border: 1px solid rgba(216,206,255,.42);\n  border-radius: 9px;\n  color: #f6f2ff;\n  background: rgba(18,14,28,.84);\n  box-shadow:\n    0 10px 28px rgba(0,0,0,.42),\n    0 0 20px rgba(139,92,246,.18);\n  backdrop-filter: blur(10px);\n  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;\n  letter-spacing: .13em;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n[data-plannotator-vim-reticle] [data-vim-reticle-label]::before {\n  width: 7px;\n  height: 7px;\n  flex: 0 0 auto;\n  border-radius: 999px;\n  background: #c4b5fd;\n  box-shadow: 0 0 12px rgba(167,139,250,.94);\n  content: \"\";\n}\n@media (prefers-reduced-motion: reduce) {\n  [data-plannotator-vim-reticle] [data-vim-reticle-fill],\n  [data-plannotator-vim-reticle] [data-vim-reticle-corner],\n  [data-plannotator-vim-reticle] [data-vim-reticle-label] {\n    transition: none;\n  }\n}\n[data-plannotator-vim-badge] {\n  position: fixed;\n  z-index: 2147483647;\n  left: 50%;\n  bottom: 12px;\n  transform: translateX(-50%);\n  padding: 4px 9px;\n  border: 1px solid color-mix(in srgb, var(--pn-focus-highlight, #4493f8) 35%, transparent);\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--pn-background, #111) 94%, transparent);\n  color: var(--pn-focus-highlight, #4493f8);\n  box-shadow: 0 4px 18px rgba(0,0,0,.25);\n  font: 700 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;\n  letter-spacing: .04em;\n  pointer-events: none;\n}\n";
 export const BRIDGE_PROTOCOL_VERSION = 1;
 export const BRIDGE_SCRIPT = "";
 export const LIVE_BRIDGE_BOOTSTRAP = "(function() {\n  var config = window.__plannotatorLiveConfig;\n  if (!config || typeof config.css !== 'string') return;\n  try {\n    var style = document.createElement('style');\n    style.setAttribute('data-plannotator-live-css', '');\n    style.appendChild(document.createTextNode(config.css));\n    (document.head || document.documentElement).appendChild(style);\n  } catch (ex) {}\n})();";