npm - @elaraai/east-ui-components - Versions diffs - 1.0.12 → 1.0.14 - Mend

@elaraai/east-ui-components 1.0.12 → 1.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/collections/schematic/camera.d.ts +175 -0
package/dist/collections/schematic/camera.d.ts.map +1 -0
package/dist/collections/schematic/index.d.ts +2 -0
package/dist/collections/schematic/index.d.ts.map +1 -1
package/dist/collections/schematic/paint.d.ts +174 -0
package/dist/collections/schematic/paint.d.ts.map +1 -0
package/dist/collections/schematic/theme.d.ts +9 -0
package/dist/collections/schematic/theme.d.ts.map +1 -0
package/dist/index.cjs +1030 -247
package/dist/index.cjs.map +1 -1
package/dist/index.js +1030 -247
package/dist/index.js.map +1 -1
package/dist/theme/global-css.d.ts.map +1 -1
package/dist/theme/slot-recipes/schematic.d.ts +1 -1
package/dist/theme/slot-recipes/schematic.d.ts.map +1 -1
package/package.json +4 -4

package/dist/index.cjs CHANGED Viewed

@@ -1187,8 +1187,13 @@ const globalCss = react.defineGlobalStyles({
   },
   /* ─── Drag & drop stages (drag-drop-visuals) ─────────────────────────
    * The DragLayerProvider drives these via data attributes; surfaces get
-   * the treatment for free by registering cells/sinks. */
-  "[data-dragging]": {
+   * the treatment for free by registering cells/sinks.
+   *
+   * Scoped `:not([data-scope])` so it dims only our own drag origins —
+   * Ark/Zag widgets (Slider, etc.) set `data-dragging` on themselves for
+   * their own drag state and carry a `data-scope`; without this exclusion
+   * a slider goes to 40% opacity while its thumb is dragged. */
+  "[data-dragging]:not([data-scope])": {
     opacity: "0.4"
   },
   "[data-drag-ghost]": {
@@ -3008,9 +3013,13 @@ const schematicSlotRecipe = react.defineSlotRecipe({
     "root",
     "canvas",
     "grid",
+    "cardLayer",
     "underlay",
     "zone",
     "zoneLabel",
+    "zoneShapes",
+    "zoneShapeLabel",
+    "footprints",
     "item",
     "itemHead",
     "itemIcon",
@@ -3082,6 +3091,15 @@ const schematicSlotRecipe = react.defineSlotRecipe({
                 linear-gradient(to right, color-mix(in oklch, {colors.border.subtle} 22%, transparent) 1px, transparent 1px),
                 linear-gradient(to bottom, color-mix(in oklch, {colors.border.subtle} 22%, transparent) 1px, transparent 1px)`
     },
+    /* Holds the live `--cam-ppu` / `--cam-tx` / `--cam-ty` custom
+     * properties (written by applyCamera each frame). Transparent and
+     * click-through; each card re-enables its own pointer events so the
+     * full-cover layer never swallows canvas clicks (issue #57). */
+    cardLayer: {
+      position: "absolute",
+      inset: "0",
+      pointerEvents: "none"
+    },
     /* Links draw in pixel space; tone → token mapping lives here so
      * data only ever names a tone. */
     underlay: {
@@ -3140,6 +3158,91 @@ const schematicSlotRecipe = react.defineSlotRecipe({
       paddingX: "{spacing.1}",
       whiteSpace: "nowrap"
     },
+    /* Shaped zones (polyline / polygon) stroke in SVG so curves and
+     * diagonals aren't confined to a div bounding box. Tone → token
+     * mapping mirrors `underlay`; data only ever names a tone. These
+     * are annotations like the rect zones — no pointer events. */
+    zoneShapes: {
+      position: "absolute",
+      inset: "0",
+      pointerEvents: "none",
+      overflow: "visible",
+      "& g[data-tone=brand]": { "--schematic-tone": "{colors.brand.600}" },
+      "& g[data-tone=ink]": { "--schematic-tone": "{colors.fg}" },
+      "& g[data-tone=muted]": { "--schematic-tone": "{colors.border.strong}" },
+      "& g[data-tone=success]": { "--schematic-tone": "{colors.status.ok}" },
+      "& g[data-tone=warning]": { "--schematic-tone": "{colors.status.warn}" },
+      "& g[data-tone=danger]": { "--schematic-tone": "{colors.status.bad}" },
+      "& path": {
+        stroke: "var(--schematic-tone)",
+        fill: "none",
+        strokeLinejoin: "round"
+      },
+      /* Polygon outline echoes the dashed outline-rect zone. */
+      "& path[data-shape=polygon]": {
+        strokeWidth: "1px",
+        strokeDasharray: "4 3"
+      },
+      /* Polyline is a run / road: a thin centre-line, or a soft band
+       * when a world-space width is set inline. */
+      "& path[data-shape=polyline]": {
+        strokeWidth: "1.5px",
+        strokeLinecap: "round",
+        opacity: "0.55"
+      }
+    },
+    /* Standalone eyebrow for a shaped zone — same look as `zoneLabel`
+     * but positioned at the bbox top-left via inline coords. */
+    zoneShapeLabel: {
+      position: "absolute",
+      transform: "translateY(-50%)",
+      marginLeft: "{spacing.2}",
+      fontFamily: "mono",
+      fontSize: "9px",
+      fontWeight: "600",
+      letterSpacing: "0.14em",
+      lineHeight: "normal",
+      textTransform: "uppercase",
+      color: "fg.muted",
+      background: "bg.panel",
+      paddingX: "{spacing.1}",
+      whiteSpace: "nowrap",
+      pointerEvents: "none"
+    },
+    /* Item footprints — the true shape body at close zoom (semantic
+     * zoom). The path is clickable (selects the item); the card still
+     * renders at the anchor, so no item info is lost. */
+    footprints: {
+      position: "absolute",
+      inset: "0",
+      pointerEvents: "none",
+      overflow: "visible",
+      "& g[data-tone=success]": { "--schematic-tone": "{colors.status.ok}" },
+      "& g[data-tone=warning]": { "--schematic-tone": "{colors.status.warn}" },
+      "& g[data-tone=danger]": { "--schematic-tone": "{colors.status.bad}" },
+      "& g[data-tone=info]": { "--schematic-tone": "{colors.brand.500}" },
+      "& g[data-tone=neutral]": { "--schematic-tone": "{colors.fg.muted}" },
+      "& path": {
+        stroke: "var(--schematic-tone)",
+        strokeWidth: "1.5px",
+        strokeLinejoin: "round",
+        fill: "color-mix(in oklch, var(--schematic-tone) 12%, transparent)",
+        cursor: "pointer",
+        pointerEvents: "visiblePainted",
+        transition: "fill {durations.fast}"
+      },
+      "& path[data-shape=polyline]": {
+        fill: "none",
+        strokeLinecap: "round"
+      },
+      "& g:hover path": {
+        fill: "color-mix(in oklch, var(--schematic-tone) 20%, transparent)"
+      },
+      "& g[data-selected] path": {
+        strokeWidth: "2.5px",
+        fill: "color-mix(in oklch, var(--schematic-tone) 24%, transparent)"
+      }
+    },
     /* LOD tiers — constant screen-size markers over scaled geometry.
      * Items are the content layer: the darkest marks on the canvas at
      * every tier. */
@@ -3193,6 +3296,7 @@ const schematicSlotRecipe = react.defineSlotRecipe({
     item: {
       position: "absolute",
       transform: "translate(-50%, -50%)",
+      pointerEvents: "auto",
       display: "flex",
       flexDirection: "column",
       gap: "2px",
@@ -3388,14 +3492,24 @@ const schematicSlotRecipe = react.defineSlotRecipe({
       minHeight: "0",
       overflowY: "auto",
       paddingBottom: "{spacing.2}",
-      lineHeight: "1.7"
-    },
+      lineHeight: "1.7",
+      // Row height shared by the sticky zone headers (their stacked `top`
+      // offset is a multiple of this) so an ancestor chain pins flush.
+      "--nav-row-h": "22px"
+    },
+    /* Zone headers pin to the top of the scroll area like a tree view: each
+     * depth level sticks at `top = depth × --nav-row-h` (set inline), so the
+     * area (and its ancestors) stays visible while you scroll its items.
+     * The opaque surface + z-index occlude the items scrolling underneath. */
     navZone: {
       display: "flex",
       alignItems: "center",
       gap: "{spacing.1}",
-      paddingY: "2px",
-      paddingRight: "{spacing.3}"
+      height: "var(--nav-row-h)",
+      paddingRight: "{spacing.3}",
+      position: "sticky",
+      background: "bg.surface",
+      zIndex: "1"
     },
     navCaret: {
       background: "transparent",
@@ -3442,6 +3556,9 @@ const schematicSlotRecipe = react.defineSlotRecipe({
       border: "none",
       paddingY: "2px",
       paddingRight: "{spacing.3}",
+      // Keep the auto-scroll-to-selected item clear of the pinned zone
+      // headers (up to two ancestor levels).
+      scrollMarginTop: "calc(var(--nav-row-h) * 2)",
       fontFamily: "mono",
       fontSize: "11px",
       letterSpacing: "0.06em",
@@ -9439,7 +9556,7 @@ function transformForCss(_ref2) {
   return val;
 }
 var baseStyles = ":root, :host {\n  --fa-font-solid: normal 900 1em/1 'Font Awesome 7 Free';\n  --fa-font-regular: normal 400 1em/1 'Font Awesome 7 Free';\n  --fa-font-light: normal 300 1em/1 'Font Awesome 7 Pro';\n  --fa-font-thin: normal 100 1em/1 'Font Awesome 7 Pro';\n  --fa-font-duotone: normal 900 1em/1 'Font Awesome 7 Duotone';\n  --fa-font-duotone-regular: normal 400 1em/1 'Font Awesome 7 Duotone';\n  --fa-font-duotone-light: normal 300 1em/1 'Font Awesome 7 Duotone';\n  --fa-font-duotone-thin: normal 100 1em/1 'Font Awesome 7 Duotone';\n  --fa-font-brands: normal 400 1em/1 'Font Awesome 7 Brands';\n  --fa-font-sharp-solid: normal 900 1em/1 'Font Awesome 7 Sharp';\n  --fa-font-sharp-regular: normal 400 1em/1 'Font Awesome 7 Sharp';\n  --fa-font-sharp-light: normal 300 1em/1 'Font Awesome 7 Sharp';\n  --fa-font-sharp-thin: normal 100 1em/1 'Font Awesome 7 Sharp';\n  --fa-font-sharp-duotone-solid: normal 900 1em/1 'Font Awesome 7 Sharp Duotone';\n  --fa-font-sharp-duotone-regular: normal 400 1em/1 'Font Awesome 7 Sharp Duotone';\n  --fa-font-sharp-duotone-light: normal 300 1em/1 'Font Awesome 7 Sharp Duotone';\n  --fa-font-sharp-duotone-thin: normal 100 1em/1 'Font Awesome 7 Sharp Duotone';\n  --fa-font-slab-regular: normal 400 1em/1 'Font Awesome 7 Slab';\n  --fa-font-slab-press-regular: normal 400 1em/1 'Font Awesome 7 Slab Press';\n  --fa-font-whiteboard-semibold: normal 600 1em/1 'Font Awesome 7 Whiteboard';\n  --fa-font-thumbprint-light: normal 300 1em/1 'Font Awesome 7 Thumbprint';\n  --fa-font-notdog-solid: normal 900 1em/1 'Font Awesome 7 Notdog';\n  --fa-font-notdog-duo-solid: normal 900 1em/1 'Font Awesome 7 Notdog Duo';\n  --fa-font-etch-solid: normal 900 1em/1 'Font Awesome 7 Etch';\n  --fa-font-graphite-thin: normal 100 1em/1 'Font Awesome 7 Graphite';\n  --fa-font-jelly-regular: normal 400 1em/1 'Font Awesome 7 Jelly';\n  --fa-font-jelly-fill-regular: normal 400 1em/1 'Font Awesome 7 Jelly Fill';\n  --fa-font-jelly-duo-regular: normal 400 1em/1 'Font Awesome 7 Jelly Duo';\n  --fa-font-chisel-regular: normal 400 1em/1 'Font Awesome 7 Chisel';\n  --fa-font-utility-semibold: normal 600 1em/1 'Font Awesome 7 Utility';\n  --fa-font-utility-duo-semibold: normal 600 1em/1 'Font Awesome 7 Utility Duo';\n  --fa-font-utility-fill-semibold: normal 600 1em/1 'Font Awesome 7 Utility Fill';\n}\n\n.svg-inline--fa {\n  box-sizing: content-box;\n  display: var(--fa-display, inline-block);\n  height: 1em;\n  overflow: visible;\n  vertical-align: -0.125em;\n  width: var(--fa-width, 1.25em);\n}\n.svg-inline--fa.fa-2xs {\n  vertical-align: 0.1em;\n}\n.svg-inline--fa.fa-xs {\n  vertical-align: 0em;\n}\n.svg-inline--fa.fa-sm {\n  vertical-align: -0.0714285714em;\n}\n.svg-inline--fa.fa-lg {\n  vertical-align: -0.2em;\n}\n.svg-inline--fa.fa-xl {\n  vertical-align: -0.25em;\n}\n.svg-inline--fa.fa-2xl {\n  vertical-align: -0.3125em;\n}\n.svg-inline--fa.fa-pull-left,\n.svg-inline--fa .fa-pull-start {\n  float: inline-start;\n  margin-inline-end: var(--fa-pull-margin, 0.3em);\n}\n.svg-inline--fa.fa-pull-right,\n.svg-inline--fa .fa-pull-end {\n  float: inline-end;\n  margin-inline-start: var(--fa-pull-margin, 0.3em);\n}\n.svg-inline--fa.fa-li {\n  width: var(--fa-li-width, 2em);\n  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));\n  inset-block-start: 0.25em; /* syncing vertical alignment with Web Font rendering */\n}\n\n.fa-layers-counter, .fa-layers-text {\n  display: inline-block;\n  position: absolute;\n  text-align: center;\n}\n\n.fa-layers {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  text-align: center;\n  vertical-align: -0.125em;\n  width: var(--fa-width, 1.25em);\n}\n.fa-layers .svg-inline--fa {\n  inset: 0;\n  margin: auto;\n  position: absolute;\n  transform-origin: center center;\n}\n\n.fa-layers-text {\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  transform-origin: center center;\n}\n\n.fa-layers-counter {\n  background-color: var(--fa-counter-background-color, #ff253a);\n  border-radius: var(--fa-counter-border-radius, 1em);\n  box-sizing: border-box;\n  color: var(--fa-inverse, #fff);\n  line-height: var(--fa-counter-line-height, 1);\n  max-width: var(--fa-counter-max-width, 5em);\n  min-width: var(--fa-counter-min-width, 1.5em);\n  overflow: hidden;\n  padding: var(--fa-counter-padding, 0.25em 0.5em);\n  right: var(--fa-right, 0);\n  text-overflow: ellipsis;\n  top: var(--fa-top, 0);\n  transform: scale(var(--fa-counter-scale, 0.25));\n  transform-origin: top right;\n}\n\n.fa-layers-bottom-right {\n  bottom: var(--fa-bottom, 0);\n  right: var(--fa-right, 0);\n  top: auto;\n  transform: scale(var(--fa-layers-scale, 0.25));\n  transform-origin: bottom right;\n}\n\n.fa-layers-bottom-left {\n  bottom: var(--fa-bottom, 0);\n  left: var(--fa-left, 0);\n  right: auto;\n  top: auto;\n  transform: scale(var(--fa-layers-scale, 0.25));\n  transform-origin: bottom left;\n}\n\n.fa-layers-top-right {\n  top: var(--fa-top, 0);\n  right: var(--fa-right, 0);\n  transform: scale(var(--fa-layers-scale, 0.25));\n  transform-origin: top right;\n}\n\n.fa-layers-top-left {\n  left: var(--fa-left, 0);\n  right: auto;\n  top: var(--fa-top, 0);\n  transform: scale(var(--fa-layers-scale, 0.25));\n  transform-origin: top left;\n}\n\n.fa-1x {\n  font-size: 1em;\n}\n\n.fa-2x {\n  font-size: 2em;\n}\n\n.fa-3x {\n  font-size: 3em;\n}\n\n.fa-4x {\n  font-size: 4em;\n}\n\n.fa-5x {\n  font-size: 5em;\n}\n\n.fa-6x {\n  font-size: 6em;\n}\n\n.fa-7x {\n  font-size: 7em;\n}\n\n.fa-8x {\n  font-size: 8em;\n}\n\n.fa-9x {\n  font-size: 9em;\n}\n\n.fa-10x {\n  font-size: 10em;\n}\n\n.fa-2xs {\n  font-size: calc(10 / 16 * 1em); /* converts a 10px size into an em-based value that's relative to the scale's 16px base */\n  line-height: calc(1 / 10 * 1em); /* sets the line-height of the icon back to that of it's parent */\n  vertical-align: calc((6 / 10 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */\n}\n\n.fa-xs {\n  font-size: calc(12 / 16 * 1em); /* converts a 12px size into an em-based value that's relative to the scale's 16px base */\n  line-height: calc(1 / 12 * 1em); /* sets the line-height of the icon back to that of it's parent */\n  vertical-align: calc((6 / 12 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */\n}\n\n.fa-sm {\n  font-size: calc(14 / 16 * 1em); /* converts a 14px size into an em-based value that's relative to the scale's 16px base */\n  line-height: calc(1 / 14 * 1em); /* sets the line-height of the icon back to that of it's parent */\n  vertical-align: calc((6 / 14 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */\n}\n\n.fa-lg {\n  font-size: calc(20 / 16 * 1em); /* converts a 20px size into an em-based value that's relative to the scale's 16px base */\n  line-height: calc(1 / 20 * 1em); /* sets the line-height of the icon back to that of it's parent */\n  vertical-align: calc((6 / 20 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */\n}\n\n.fa-xl {\n  font-size: calc(24 / 16 * 1em); /* converts a 24px size into an em-based value that's relative to the scale's 16px base */\n  line-height: calc(1 / 24 * 1em); /* sets the line-height of the icon back to that of it's parent */\n  vertical-align: calc((6 / 24 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */\n}\n\n.fa-2xl {\n  font-size: calc(32 / 16 * 1em); /* converts a 32px size into an em-based value that's relative to the scale's 16px base */\n  line-height: calc(1 / 32 * 1em); /* sets the line-height of the icon back to that of it's parent */\n  vertical-align: calc((6 / 32 - 0.375) * 1em); /* vertically centers the icon taking into account the surrounding text's descender */\n}\n\n.fa-width-auto {\n  --fa-width: auto;\n}\n\n.fa-fw,\n.fa-width-fixed {\n  --fa-width: 1.25em;\n}\n\n.fa-ul {\n  list-style-type: none;\n  margin-inline-start: var(--fa-li-margin, 2.5em);\n  padding-inline-start: 0;\n}\n.fa-ul > li {\n  position: relative;\n}\n\n.fa-li {\n  inset-inline-start: calc(-1 * var(--fa-li-width, 2em));\n  position: absolute;\n  text-align: center;\n  width: var(--fa-li-width, 2em);\n  line-height: inherit;\n}\n\n/* Heads Up: Bordered Icons will not be supported in the future!\n  - This feature will be deprecated in the next major release of Font Awesome (v8)!\n  - You may continue to use it in this version *v7), but it will not be supported in Font Awesome v8.\n*/\n/* Notes:\n* --@{v.$css-prefix}-border-width = 1/16 by default (to render as ~1px based on a 16px default font-size)\n* --@{v.$css-prefix}-border-padding =\n  ** 3/16 for vertical padding (to give ~2px of vertical whitespace around an icon considering it's vertical alignment)\n  ** 4/16 for horizontal padding (to give ~4px of horizontal whitespace around an icon)\n*/\n.fa-border {\n  border-color: var(--fa-border-color, #eee);\n  border-radius: var(--fa-border-radius, 0.1em);\n  border-style: var(--fa-border-style, solid);\n  border-width: var(--fa-border-width, 0.0625em);\n  box-sizing: var(--fa-border-box-sizing, content-box);\n  padding: var(--fa-border-padding, 0.1875em 0.25em);\n}\n\n.fa-pull-left,\n.fa-pull-start {\n  float: inline-start;\n  margin-inline-end: var(--fa-pull-margin, 0.3em);\n}\n\n.fa-pull-right,\n.fa-pull-end {\n  float: inline-end;\n  margin-inline-start: var(--fa-pull-margin, 0.3em);\n}\n\n.fa-beat {\n  animation-name: fa-beat;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, ease-in-out);\n}\n\n.fa-bounce {\n  animation-name: fa-bounce;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));\n}\n\n.fa-fade {\n  animation-name: fa-fade;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));\n}\n\n.fa-beat-fade {\n  animation-name: fa-beat-fade;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));\n}\n\n.fa-flip {\n  animation-name: fa-flip;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, ease-in-out);\n}\n\n.fa-shake {\n  animation-name: fa-shake;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, linear);\n}\n\n.fa-spin {\n  animation-name: fa-spin;\n  animation-delay: var(--fa-animation-delay, 0s);\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 2s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, linear);\n}\n\n.fa-spin-reverse {\n  --fa-animation-direction: reverse;\n}\n\n.fa-pulse,\n.fa-spin-pulse {\n  animation-name: fa-spin;\n  animation-direction: var(--fa-animation-direction, normal);\n  animation-duration: var(--fa-animation-duration, 1s);\n  animation-iteration-count: var(--fa-animation-iteration-count, infinite);\n  animation-timing-function: var(--fa-animation-timing, steps(8));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fa-beat,\n  .fa-bounce,\n  .fa-fade,\n  .fa-beat-fade,\n  .fa-flip,\n  .fa-pulse,\n  .fa-shake,\n  .fa-spin,\n  .fa-spin-pulse {\n    animation: none !important;\n    transition: none !important;\n  }\n}\n@keyframes fa-beat {\n  0%, 90% {\n    transform: scale(1);\n  }\n  45% {\n    transform: scale(var(--fa-beat-scale, 1.25));\n  }\n}\n@keyframes fa-bounce {\n  0% {\n    transform: scale(1, 1) translateY(0);\n  }\n  10% {\n    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);\n  }\n  30% {\n    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));\n  }\n  50% {\n    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);\n  }\n  57% {\n    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));\n  }\n  64% {\n    transform: scale(1, 1) translateY(0);\n  }\n  100% {\n    transform: scale(1, 1) translateY(0);\n  }\n}\n@keyframes fa-fade {\n  50% {\n    opacity: var(--fa-fade-opacity, 0.4);\n  }\n}\n@keyframes fa-beat-fade {\n  0%, 100% {\n    opacity: var(--fa-beat-fade-opacity, 0.4);\n    transform: scale(1);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(var(--fa-beat-fade-scale, 1.125));\n  }\n}\n@keyframes fa-flip {\n  50% {\n    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));\n  }\n}\n@keyframes fa-shake {\n  0% {\n    transform: rotate(-15deg);\n  }\n  4% {\n    transform: rotate(15deg);\n  }\n  8%, 24% {\n    transform: rotate(-18deg);\n  }\n  12%, 28% {\n    transform: rotate(18deg);\n  }\n  16% {\n    transform: rotate(-22deg);\n  }\n  20% {\n    transform: rotate(22deg);\n  }\n  32% {\n    transform: rotate(-12deg);\n  }\n  36% {\n    transform: rotate(12deg);\n  }\n  40%, 100% {\n    transform: rotate(0deg);\n  }\n}\n@keyframes fa-spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.fa-rotate-90 {\n  transform: rotate(90deg);\n}\n\n.fa-rotate-180 {\n  transform: rotate(180deg);\n}\n\n.fa-rotate-270 {\n  transform: rotate(270deg);\n}\n\n.fa-flip-horizontal {\n  transform: scale(-1, 1);\n}\n\n.fa-flip-vertical {\n  transform: scale(1, -1);\n}\n\n.fa-flip-both,\n.fa-flip-horizontal.fa-flip-vertical {\n  transform: scale(-1, -1);\n}\n\n.fa-rotate-by {\n  transform: rotate(var(--fa-rotate-angle, 0));\n}\n\n.svg-inline--fa .fa-primary {\n  fill: var(--fa-primary-color, currentColor);\n  opacity: var(--fa-primary-opacity, 1);\n}\n\n.svg-inline--fa .fa-secondary {\n  fill: var(--fa-secondary-color, currentColor);\n  opacity: var(--fa-secondary-opacity, 0.4);\n}\n\n.svg-inline--fa.fa-swap-opacity .fa-primary {\n  opacity: var(--fa-secondary-opacity, 0.4);\n}\n\n.svg-inline--fa.fa-swap-opacity .fa-secondary {\n  opacity: var(--fa-primary-opacity, 1);\n}\n\n.svg-inline--fa mask .fa-primary,\n.svg-inline--fa mask .fa-secondary {\n  fill: black;\n}\n\n.svg-inline--fa.fa-inverse {\n  fill: var(--fa-inverse, #fff);\n}\n\n.fa-stack {\n  display: inline-block;\n  height: 2em;\n  line-height: 2em;\n  position: relative;\n  vertical-align: middle;\n  width: 2.5em;\n}\n\n.fa-inverse {\n  color: var(--fa-inverse, #fff);\n}\n\n.svg-inline--fa.fa-stack-1x {\n  --fa-width: 1.25em;\n  height: 1em;\n  width: var(--fa-width);\n}\n.svg-inline--fa.fa-stack-2x {\n  --fa-width: 2.5em;\n  height: 2em;\n  width: var(--fa-width);\n}\n\n.fa-stack-1x,\n.fa-stack-2x {\n  inset: 0;\n  margin: auto;\n  position: absolute;\n  z-index: var(--fa-stack-z-index, auto);\n}";
-function css() {
+function css$1() {
   var dcp = DEFAULT_CSS_PREFIX;
   var drc = DEFAULT_REPLACEMENT_CLASS;
   var fp = config.cssPrefix;
@@ -9456,7 +9573,7 @@ function css() {
 var _cssInserted = false;
 function ensureCss() {
   if (config.autoAddCss && !_cssInserted) {
-    insertCss(css());
+    insertCss(css$1());
     _cssInserted = true;
   }
 }
@@ -9464,7 +9581,7 @@ var InjectCSS = {
   mixout: function mixout() {
     return {
       dom: {
-        css,
+        css: css$1,
         insertCss: ensureCss
       }
     };
@@ -61532,23 +61649,123 @@ function multiSelect(arr, left, right, n2, compare) {
     stack.push(left, mid, mid, right);
   }
 }
-library$1.add(icons$2);
-const schematicEqual = east.equalFor(internal.Schematic.Types.Schematic);
 const IDENTITY = { zoom: 1, tx: 0, ty: 0 };
-const MAX_ZOOM = 40;
-const LOD_CARD_PPU = 30;
-const LOD_LABEL_PPU = 16;
-const MINIMAP_AUTO = 25;
-function statusTone(status) {
-  return status.type === "some" ? status.value.type : void 0;
+function project(x2, y2, cam) {
+  return { sx: x2 * cam.ppu + cam.tx, sy: y2 * cam.ppu + cam.ty };
 }
-function niceScaleLength(ppu, targetPx) {
-  const target = targetPx / ppu;
-  const pow2 = Math.pow(10, Math.floor(Math.log10(target)));
-  for (const m2 of [5, 2, 1]) {
-    if (m2 * pow2 <= target) return m2 * pow2;
+function cardTranslateCss(x2, y2) {
+  return `translate(calc(var(--cam-ppu) * ${x2} * 1px + var(--cam-tx)), calc(var(--cam-ppu) * ${y2} * 1px + var(--cam-ty)))`;
+}
+function cardWidthCss(width) {
+  return `calc(var(--cam-ppu) * ${width} * 1px)`;
+}
+function viewportWorldBbox(cam, width, height) {
+  return {
+    minX: -cam.tx / cam.ppu,
+    minY: -cam.ty / cam.ppu,
+    maxX: (width - cam.tx) / cam.ppu,
+    maxY: (height - cam.ty) / cam.ppu
+  };
+}
+function bboxOverlaps(a2, b2) {
+  return a2.maxX >= b2.minX && a2.minX <= b2.maxX && a2.maxY >= b2.minY && a2.minY <= b2.maxY;
+}
+function pointsBbox(pts) {
+  if (pts.length === 0) return null;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const p2 of pts) {
+    if (p2.x < minX) minX = p2.x;
+    if (p2.y < minY) minY = p2.y;
+    if (p2.x > maxX) maxX = p2.x;
+    if (p2.y > maxY) maxY = p2.y;
+  }
+  return { minX, minY, maxX, maxY };
+}
+function zoomAbout(prev, factor, px, py, min2, max2) {
+  const zoom = Math.max(min2, Math.min(max2, prev.zoom * factor));
+  if (zoom === 1) return IDENTITY;
+  const k2 = zoom / prev.zoom;
+  return { zoom, tx: px - k2 * (px - prev.tx), ty: py - k2 * (py - prev.ty) };
+}
+function nextMode(mode, event) {
+  switch (event) {
+    case "pointerDown":
+      return "panning";
+    case "wheel":
+      return "wheeling";
+    case "zoom":
+      return "wheeling";
+    case "flyStart":
+      return "flying";
+    case "pointerUp":
+      return mode === "panning" ? "idle" : mode;
+    case "flyEnd":
+      return mode === "flying" ? "idle" : mode;
+    case "cancel":
+      return "idle";
+  }
+}
+function cancelsFly(mode, event) {
+  return mode === "flying" && (event === "pointerDown" || event === "wheel" || event === "zoom" || event === "cancel");
+}
+function makeRafCoalescer(schedule, cancel) {
+  let handle2 = null;
+  return {
+    request(run) {
+      if (handle2 !== null) return;
+      handle2 = schedule(() => {
+        handle2 = null;
+        run();
+      });
+    },
+    cancel() {
+      if (handle2 !== null) {
+        cancel(handle2);
+        handle2 = null;
+      }
+    }
+  };
+}
+const css = (c2, a2 = 1) => a2 >= 1 ? `rgb(${c2[0]},${c2[1]},${c2[2]})` : `rgba(${c2[0]},${c2[1]},${c2[2]},${a2})`;
+function toneRGB(p2, tone, kind) {
+  switch (tone) {
+    case "brand":
+      return p2.brand600;
+    case "ink":
+      return p2.fg;
+    case "muted":
+      return kind === "zone" ? p2.borderStrong : p2.fgMuted;
+    case "success":
+      return p2.statusOk;
+    case "warning":
+      return p2.statusWarn;
+    case "danger":
+      return p2.statusBad;
+    default:
+      return p2.fgMuted;
+  }
+}
+function statusRGB(p2, status) {
+  switch (status) {
+    case "success":
+      return p2.statusOk;
+    case "warning":
+      return p2.statusWarn;
+    case "danger":
+      return p2.statusBad;
+    case "info":
+      return p2.brand500;
+    default:
+      return p2.fgMuted;
   }
-  return pow2;
+}
+function statusTone$1(status) {
+  return status.type === "some" ? status.value.type : void 0;
+}
+function resolveTint(p2, color2, tone, fallback) {
+  if (color2 !== void 0) return color2;
+  if (tone !== void 0) return css(toneRGB(p2, tone, "link"));
+  return css(fallback);
 }
 function orthogonalize(points) {
   const out = [];
@@ -61561,26 +61778,410 @@ function orthogonalize(points) {
   }
   return out;
 }
-function roundedPath(pts, radius) {
-  if (pts.length === 0) return "";
-  let d2 = `M ${pts[0].x} ${pts[0].y}`;
+function traceRounded(ctx, pts, radius) {
+  if (pts.length === 0) return;
+  ctx.moveTo(pts[0].x, pts[0].y);
   for (let i2 = 1; i2 < pts.length - 1; i2++) {
     const p2 = pts[i2], a2 = pts[i2 - 1], b2 = pts[i2 + 1];
     const inLen = Math.hypot(p2.x - a2.x, p2.y - a2.y);
     const outLen = Math.hypot(b2.x - p2.x, b2.y - p2.y);
     const r2 = Math.min(radius, inLen / 2, outLen / 2);
     if (r2 < 0.5) {
-      d2 += ` L ${p2.x} ${p2.y}`;
+      ctx.lineTo(p2.x, p2.y);
       continue;
     }
     const inU = { x: (p2.x - a2.x) / inLen, y: (p2.y - a2.y) / inLen };
-    const outU = { x: (b2.x - p2.x) / outLen, y: (b2.y - p2.y) / outLen };
-    d2 += ` L ${p2.x - inU.x * r2} ${p2.y - inU.y * r2}`;
-    d2 += ` Q ${p2.x} ${p2.y} ${p2.x + outU.x * r2} ${p2.y + outU.y * r2}`;
+    ctx.lineTo(p2.x - inU.x * r2, p2.y - inU.y * r2);
+    ctx.quadraticCurveTo(p2.x, p2.y, p2.x + (b2.x - p2.x) / outLen * r2, p2.y + (b2.y - p2.y) / outLen * r2);
   }
   const last = pts[pts.length - 1];
-  if (pts.length > 1) d2 += ` L ${last.x} ${last.y}`;
-  return d2;
+  if (pts.length > 1) ctx.lineTo(last.x, last.y);
+}
+function arcFromBulge(p1, p2, bulge) {
+  const dx = p2.x - p1.x, dy = p2.y - p1.y;
+  const chord = Math.hypot(dx, dy);
+  if (Math.abs(bulge) < 1e-4 || chord < 1e-9) return null;
+  const theta = 4 * Math.atan(bulge);
+  const radius = Math.abs(chord / (2 * Math.sin(theta / 2)));
+  const mx = (p1.x + p2.x) / 2, my = (p1.y + p2.y) / 2;
+  const d2 = chord / 2 / Math.tan(theta / 2);
+  const cx2 = mx - dy / chord * d2, cy = my + dx / chord * d2;
+  if (!Number.isFinite(radius) || !Number.isFinite(d2) || !Number.isFinite(cx2) || !Number.isFinite(cy)) return null;
+  return {
+    cx: cx2,
+    cy,
+    radius,
+    startAngle: Math.atan2(p1.y - cy, p1.x - cx2),
+    endAngle: Math.atan2(p2.y - cy, p2.x - cx2),
+    anticlockwise: theta < 0
+  };
+}
+function traceBulge(ctx, p1, p2, bulge) {
+  const arc = arcFromBulge(p1, p2, bulge);
+  if (arc === null) {
+    ctx.lineTo(p2.x, p2.y);
+    return;
+  }
+  ctx.arc(arc.cx, arc.cy, arc.radius, arc.startAngle, arc.endAngle, arc.anticlockwise);
+}
+function traceVertices(ctx, pts, closed) {
+  if (pts.length === 0) return;
+  ctx.moveTo(pts[0].x, pts[0].y);
+  for (let i2 = 1; i2 < pts.length; i2++) traceBulge(ctx, pts[i2 - 1], pts[i2], pts[i2 - 1].bulge);
+  if (closed) {
+    const last = pts[pts.length - 1];
+    traceBulge(ctx, last, pts[0], last.bulge);
+    ctx.closePath();
+  }
+}
+const MARKER_LABEL_FONT = '600 10px ui-monospace, "SF Mono", Menlo, monospace';
+const MARKER_DOT_RADIUS = 5;
+const MARKER_DOT_HIT_RADIUS = 10;
+const MARKER_PIN_PAD_X = 6, MARKER_PIN_DOT_W = 7, MARKER_PIN_GAP = 4, MARKER_PIN_H = 16;
+function markerHitbox(item, tier, cam, measure) {
+  const { sx, sy } = project(item.x, item.y, cam);
+  if (tier === "dot") return { kind: "circle", cx: sx, cy: sy, r: MARKER_DOT_HIT_RADIUS };
+  const tw = measure(item.label);
+  const w2 = MARKER_PIN_PAD_X + MARKER_PIN_DOT_W + MARKER_PIN_GAP + tw + MARKER_PIN_PAD_X;
+  return { kind: "rect", left: sx - w2 / 2, top: sy - MARKER_PIN_H / 2, w: w2, h: MARKER_PIN_H };
+}
+function markerHit(box, sx, sy) {
+  return box.kind === "circle" ? Math.hypot(sx - box.cx, sy - box.cy) <= box.r : sx >= box.left && sx <= box.left + box.w && sy >= box.top && sy <= box.top + box.h;
+}
+function hatchSpacing(rawSpacing) {
+  return Number.isFinite(rawSpacing) ? Math.max(1, rawSpacing) : 1;
+}
+function hatchSweepBounds(x2, y2, w2, h2, width, height, dx, dy, diag, spacing) {
+  const nx = -dy, ny = dx;
+  if (Math.abs(nx) <= 1e-6) return { oStart: -diag, oEnd: diag };
+  const cx0 = Math.max(x2, 0), cy0 = Math.max(y2, 0);
+  const cx1 = Math.min(x2 + w2, width), cy1 = Math.min(y2 + h2, height);
+  const cs = [cx0 * nx + cy0 * ny, cx1 * nx + cy0 * ny, cx0 * nx + cy1 * ny, cx1 * nx + cy1 * ny];
+  const oOfC = (c2) => (c2 - x2 * nx - (y2 - diag * dy) * ny) / nx;
+  const oA = oOfC(Math.min(...cs)), oB = oOfC(Math.max(...cs));
+  return {
+    oStart: Math.max(-diag, -diag + Math.floor((Math.min(oA, oB) + diag) / spacing) * spacing - spacing),
+    oEnd: Math.min(diag, Math.max(oA, oB) + spacing)
+  };
+}
+function zoneWorldBbox(zone, geom) {
+  const bb = { minX: zone.x, minY: zone.y, maxX: zone.x + zone.width, maxY: zone.y + zone.height };
+  if (geom !== void 0 && geom.type === "circle") {
+    const cx2 = zone.x + zone.width / 2, cy = zone.y + zone.height / 2, r2 = geom.value.radius;
+    bb.minX = Math.min(bb.minX, cx2 - r2);
+    bb.minY = Math.min(bb.minY, cy - r2);
+    bb.maxX = Math.max(bb.maxX, cx2 + r2);
+    bb.maxY = Math.max(bb.maxY, cy + r2);
+  } else if (geom !== void 0 && geom.type !== "rect") {
+    const g2 = pointsBbox(geom.value.vertices);
+    if (g2 !== null) {
+      bb.minX = Math.min(bb.minX, g2.minX);
+      bb.minY = Math.min(bb.minY, g2.minY);
+      bb.maxX = Math.max(bb.maxX, g2.maxX);
+      bb.maxY = Math.max(bb.maxY, g2.maxY);
+    }
+  }
+  return bb;
+}
+function paintSchematic(input) {
+  var _a2, _b, _c, _d;
+  const { ctx, value, cam, width, height, visibleItems, tiers, selected, centers, palette: p2 } = input;
+  const wx = (x2) => x2 * cam.ppu + cam.tx;
+  const wy = (y2) => y2 * cam.ppu + cam.ty;
+  const ppu = cam.ppu;
+  const viewBbox = viewportWorldBbox(cam, width, height);
+  ctx.save();
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.restore();
+  ctx.lineJoin = "round";
+  for (const zone of value.zones) {
+    const geom = getSomeorUndefined(zone.geometry);
+    if (!bboxOverlaps(zoneWorldBbox(zone, geom), viewBbox)) continue;
+    const pattern = zone.pattern;
+    const patternTone = (pattern.value.tone.type === "some" ? pattern.value.tone.value.type : void 0) ?? "muted";
+    const tint = resolveTint(p2, getSomeorUndefined(zone.color), (_a2 = getSomeorUndefined(zone.tone)) == null ? void 0 : _a2.type, toneRGB(p2, patternTone, "zone"));
+    const zbg = getSomeorUndefined(zone.bg);
+    const zFillAlpha = getSomeorUndefined(zone.fillOpacity) ?? 0.15;
+    const zWeight = getSomeorUndefined(zone.weight);
+    const x2 = wx(zone.x), y2 = wy(zone.y), w2 = zone.width * ppu, h2 = zone.height * ppu;
+    const fillShape = () => {
+      if (zbg === void 0) return;
+      ctx.save();
+      ctx.globalAlpha = zFillAlpha;
+      ctx.fillStyle = zbg;
+      ctx.fill();
+      ctx.restore();
+    };
+    if (geom !== void 0 && geom.type !== "rect") {
+      if (geom.type === "circle") {
+        ctx.beginPath();
+        ctx.arc(x2 + w2 / 2, y2 + h2 / 2, geom.value.radius * ppu, 0, Math.PI * 2);
+        fillShape();
+        ctx.setLineDash([4, 3]);
+        ctx.lineWidth = zWeight ?? 1;
+        ctx.strokeStyle = tint;
+        ctx.stroke();
+        ctx.setLineDash([]);
+      } else {
+        const pts = geom.value.vertices.map((q) => ({ x: wx(q.x), y: wy(q.y), bulge: q.bulge }));
+        if (pts.length > 0) {
+          ctx.beginPath();
+          if (geom.type === "polygon") {
+            traceVertices(ctx, pts, true);
+            fillShape();
+            ctx.setLineDash([4, 3]);
+            ctx.lineWidth = zWeight ?? 1;
+            ctx.strokeStyle = tint;
+            ctx.stroke();
+            ctx.setLineDash([]);
+          } else {
+            traceVertices(ctx, pts, false);
+            const band2 = geom.value.width.type === "some" ? geom.value.width.value * ppu : void 0;
+            ctx.setLineDash([]);
+            ctx.lineCap = "round";
+            ctx.lineWidth = zWeight ?? band2 ?? 1.5;
+            ctx.save();
+            ctx.globalAlpha = 0.55;
+            ctx.strokeStyle = tint;
+            ctx.stroke();
+            ctx.restore();
+            ctx.lineCap = "butt";
+          }
+        }
+      }
+    } else if (pattern.type === "hatch") {
+      const spacing = hatchSpacing(getSomeorUndefined(pattern.value.spacing) ?? 8);
+      const angle = (getSomeorUndefined(pattern.value.angle) ?? 45) * Math.PI / 180;
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(x2, y2, w2, h2);
+      ctx.clip();
+      if (zbg !== void 0) {
+        ctx.save();
+        ctx.globalAlpha = zFillAlpha;
+        ctx.fillStyle = zbg;
+        ctx.fillRect(x2, y2, w2, h2);
+        ctx.restore();
+      }
+      ctx.globalAlpha = 0.3;
+      ctx.strokeStyle = tint;
+      ctx.lineWidth = zWeight ?? 1;
+      const dx = Math.cos(angle), dy = Math.sin(angle);
+      const diag = Math.hypot(w2, h2);
+      const { oStart, oEnd } = hatchSweepBounds(x2, y2, w2, h2, width, height, dx, dy, diag, spacing);
+      ctx.beginPath();
+      for (let o2 = oStart; o2 < oEnd; o2 += spacing) {
+        ctx.moveTo(x2 + o2, y2 - diag * dy);
+        ctx.lineTo(x2 + o2 + dx * 2 * diag, y2 - diag * dy + dy * 2 * diag);
+      }
+      ctx.stroke();
+      ctx.restore();
+    } else {
+      if (zbg !== void 0) {
+        ctx.save();
+        ctx.globalAlpha = zFillAlpha;
+        ctx.fillStyle = zbg;
+        ctx.fillRect(x2, y2, w2, h2);
+        ctx.restore();
+      }
+      ctx.setLineDash([5, 4]);
+      ctx.lineWidth = zWeight ?? 1;
+      ctx.strokeStyle = tint;
+      ctx.strokeRect(x2, y2, w2, h2);
+      ctx.setLineDash([]);
+    }
+    if (w2 >= zone.label.length * 6.2 + 24) {
+      ctx.font = '600 9px ui-monospace, "SF Mono", Menlo, monospace';
+      const label = zone.label.toUpperCase();
+      const tw = ctx.measureText(label).width;
+      ctx.fillStyle = css(p2.bgPanel);
+      ctx.fillRect(x2 + 6, y2 - 7, tw + 6, 12);
+      ctx.fillStyle = css(p2.fgMuted);
+      ctx.textBaseline = "middle";
+      ctx.fillText(label, x2 + 9, y2);
+    }
+  }
+  for (const link2 of value.links) {
+    const from = centers.get(link2.from), to = centers.get(link2.to);
+    if (!from || !to) continue;
+    const linkBbox = pointsBbox([from, ...link2.via, to]);
+    if (linkBbox !== null && !bboxOverlaps(linkBbox, viewBbox)) continue;
+    const anchors = [from, ...link2.via, to].map((q) => ({ x: wx(q.x), y: wy(q.y) }));
+    const corner = link2.route.type === "orthogonal" ? link2.route.value.corner.type === "some" ? link2.route.value.corner.value : 8 : 0;
+    const pts = link2.route.type === "orthogonal" ? orthogonalize(anchors) : anchors;
+    const style = link2.style;
+    const tone = (style.value.tone.type === "some" ? style.value.tone.value.type : void 0) ?? (style.type === "solid" ? "brand" : "muted");
+    const weight = style.value.weight.type === "some" ? style.value.weight.value : style.type === "solid" ? 2.5 : 1.5;
+    const color2 = toneRGB(p2, tone, "link");
+    ctx.lineCap = "round";
+    ctx.strokeStyle = css(color2);
+    ctx.lineWidth = weight;
+    ctx.setLineDash(style.type === "dashed" ? [6, 5] : []);
+    ctx.beginPath();
+    traceRounded(ctx, pts, corner);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.fillStyle = css(color2);
+    for (const end3 of [anchors[0], anchors[anchors.length - 1]]) {
+      ctx.beginPath();
+      ctx.arc(end3.x, end3.y, weight + 1.5, 0, Math.PI * 2);
+      ctx.fill();
+    }
+    ctx.lineCap = "butt";
+  }
+  for (const item of visibleItems) {
+    const footprint = getSomeorUndefined(item.footprint);
+    if (footprint === void 0 || footprint.type === "rect") continue;
+    if ((tiers.get(item.key) ?? "dot") !== "card") continue;
+    const isSel = selected === item.key;
+    const tint = resolveTint(p2, getSomeorUndefined(item.color), (_b = getSomeorUndefined(item.tone)) == null ? void 0 : _b.type, statusRGB(p2, statusTone$1(item.status)));
+    const ibg = getSomeorUndefined(item.bg);
+    const fillAlpha = getSomeorUndefined(item.fillOpacity) ?? (isSel ? 0.24 : 0.12);
+    const stroke = getSomeorUndefined(item.weight) ?? (isSel ? 2.5 : 1.5);
+    const fillShape = () => {
+      ctx.save();
+      ctx.globalAlpha = fillAlpha;
+      ctx.fillStyle = ibg ?? tint;
+      ctx.fill();
+      ctx.restore();
+    };
+    if (footprint.type === "circle") {
+      ctx.beginPath();
+      ctx.arc(wx(item.x), wy(item.y), footprint.value.radius * ppu, 0, Math.PI * 2);
+      fillShape();
+      ctx.lineWidth = stroke;
+      ctx.strokeStyle = tint;
+      ctx.stroke();
+      continue;
+    }
+    const pts = footprint.value.vertices.map((q) => ({ x: wx(q.x), y: wy(q.y), bulge: q.bulge }));
+    if (pts.length === 0) continue;
+    ctx.beginPath();
+    if (footprint.type === "polygon") {
+      traceVertices(ctx, pts, true);
+      fillShape();
+      ctx.lineWidth = stroke;
+    } else {
+      traceVertices(ctx, pts, false);
+      const band2 = footprint.value.width.type === "some" ? footprint.value.width.value * ppu : void 0;
+      ctx.lineCap = "round";
+      ctx.lineWidth = getSomeorUndefined(item.weight) ?? band2 ?? (isSel ? 2.5 : 1.5);
+    }
+    ctx.strokeStyle = tint;
+    ctx.stroke();
+    ctx.lineCap = "butt";
+  }
+  for (const item of visibleItems) {
+    const tier = tiers.get(item.key) ?? "dot";
+    if (tier === "card") continue;
+    const tint = resolveTint(p2, getSomeorUndefined(item.color), (_c = getSomeorUndefined(item.tone)) == null ? void 0 : _c.type, statusRGB(p2, statusTone$1(item.status)));
+    const isSel = selected === item.key;
+    const x2 = wx(item.x), y2 = wy(item.y);
+    if (tier === "dot") {
+      ctx.beginPath();
+      ctx.arc(x2, y2, MARKER_DOT_RADIUS, 0, Math.PI * 2);
+      ctx.fillStyle = tint;
+      ctx.fill();
+      ctx.lineWidth = 1.5;
+      ctx.strokeStyle = css(p2.white);
+      ctx.stroke();
+      if (isSel) {
+        ctx.beginPath();
+        ctx.arc(x2, y2, 7.5, 0, Math.PI * 2);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = css(p2.fg);
+        ctx.stroke();
+      }
+      continue;
+    }
+    ctx.font = MARKER_LABEL_FONT;
+    const box = markerHitbox(item, "label", cam, (t4) => ctx.measureText(t4).width);
+    if (box.kind !== "rect") continue;
+    const { left, top, w: w2, h: h2 } = box;
+    ctx.beginPath();
+    (_d = ctx.roundRect) == null ? void 0 : _d.call(ctx, left, top, w2, h2, h2 / 2);
+    if (!ctx.roundRect) ctx.rect(left, top, w2, h2);
+    ctx.fillStyle = css(p2.bgSurface);
+    ctx.fill();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = isSel ? css(p2.fg) : css(p2.borderStrong);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(left + MARKER_PIN_PAD_X + MARKER_PIN_DOT_W / 2, y2, MARKER_PIN_DOT_W / 2, 0, Math.PI * 2);
+    ctx.fillStyle = tint;
+    ctx.fill();
+    ctx.fillStyle = css(p2.fg);
+    ctx.textBaseline = "middle";
+    ctx.fillText(item.label, left + MARKER_PIN_PAD_X + MARKER_PIN_DOT_W + MARKER_PIN_GAP, y2);
+  }
+}
+const TOKENS = {
+  brand600: "brand.600",
+  brand500: "brand.500",
+  fg: "fg",
+  fgMuted: "fg.muted",
+  fgSubtle: "fg.subtle",
+  borderStrong: "border.strong",
+  borderSubtle: "border.subtle",
+  bgSurface: "bg.surface",
+  bgPanel: "bg.panel",
+  statusOk: "status.ok",
+  statusWarn: "status.warn",
+  statusBad: "status.bad",
+  white: "white"
+};
+const KEYS = Object.keys(TOKENS);
+function parseRGB(s2) {
+  const m2 = s2.match(/[\d.]+/g);
+  if (m2 === null || m2.length < 3) return [0, 0, 0];
+  return [Math.round(+m2[0]), Math.round(+m2[1]), Math.round(+m2[2])];
+}
+const SchematicPaletteProbe = React.memo(function SchematicPaletteProbe2({ onResolve }) {
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const read = () => {
+      const el = ref.current;
+      if (el === null) return;
+      const kids = el.children;
+      const palette = {};
+      KEYS.forEach((k2, i2) => {
+        const child = kids[i2];
+        if (child !== void 0) palette[k2] = parseRGB(getComputedStyle(child).color);
+      });
+      onResolve(palette);
+    };
+    read();
+    const obs = new MutationObserver(read);
+    obs.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });
+    return () => obs.disconnect();
+  }, [onResolve]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ref, "aria-hidden": "true", css: { position: "absolute", width: "0", height: "0", overflow: "hidden", pointerEvents: "none" }, children: KEYS.map((k2) => /* @__PURE__ */ jsxRuntime.jsx(react.Box, { color: TOKENS[k2] }, k2)) });
+});
+library$1.add(icons$2);
+const schematicEqual = east.equalFor(internal.Schematic.Types.Schematic);
+const MAX_ZOOM = 40;
+const LOD_CARD_PPU = 30;
+const LOD_LABEL_PPU = 16;
+const MINIMAP_AUTO = 25;
+function statusTone(status) {
+  return status.type === "some" ? status.value.type : void 0;
+}
+function niceScaleLength(ppu, targetPx) {
+  const target = targetPx / ppu;
+  const pow2 = Math.pow(10, Math.floor(Math.log10(target)));
+  for (const m2 of [5, 2, 1]) {
+    if (m2 * pow2 <= target) return m2 * pow2;
+  }
+  return pow2;
+}
+function pointInPolygon(x2, y2, pts) {
+  let inside = false;
+  for (let i2 = 0, j2 = pts.length - 1; i2 < pts.length; j2 = i2++) {
+    const xi = pts[i2].x, yi = pts[i2].y, xj = pts[j2].x, yj = pts[j2].y;
+    if (yi > y2 !== yj > y2 && x2 < (xj - xi) * (y2 - yi) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
 }
 function buildNavTree(zones, items) {
   const nodes = /* @__PURE__ */ new Map();
@@ -61663,7 +62264,7 @@ function declutterTiers(items, tree, baseLod, ppu, selected) {
   if (selected !== null && tiers.has(selected)) tiers.set(selected, baseLod);
   return tiers;
 }
-const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value }) {
+const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value, storageKey }) {
   const styles2 = react.useSlotRecipe({ key: "schematic" })();
   const { width: W2, height: H } = value.extent;
   const onSelectFn = React.useMemo(() => getSomeorUndefined(value.onSelect), [value.onSelect]);
@@ -61671,13 +62272,19 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
   const showGrid = getSomeorUndefined(value.grid) ?? true;
   const showNavigator = getSomeorUndefined(value.navigator) ?? value.zones.length > 0;
   const showMinimap = getSomeorUndefined(value.minimap) ?? value.items.length >= MINIMAP_AUTO;
+  const fixedHeight = getSomeorUndefined(value.height);
   const [selected, setSelected] = React.useState(null);
-  const [view, setView] = React.useState(IDENTITY);
   const [query, setQuery] = React.useState("");
   const [openZone, setOpenZone] = React.useState(null);
-  const [navCollapsed, setNavCollapsed] = React.useState(false);
+  const { state: persisted, setState: setPersisted } = usePersistedState(storageKey, { navCollapsed: false });
+  const navCollapsed = persisted.navCollapsed;
+  const setNavCollapsed = React.useCallback((next) => setPersisted((prev) => ({ ...prev, navCollapsed: next })), [setPersisted]);
+  const [palette, setPalette] = React.useState(null);
   const navTreeRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const drawRef = React.useRef(null);
+  const cardLayerRef = React.useRef(null);
+  const gridRef = React.useRef(null);
   const [size, setSize] = React.useState(null);
   React.useLayoutEffect(() => {
     const el = canvasRef.current;
@@ -61688,10 +62295,30 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
+  const [dpr, setDpr] = React.useState(() => typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    let cleanup = () => {
+    };
+    const subscribe2 = () => {
+      const mql = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+      const onChange2 = () => {
+        cleanup();
+        setDpr(window.devicePixelRatio || 1);
+        subscribe2();
+      };
+      mql.addEventListener("change", onChange2);
+      cleanup = () => mql.removeEventListener("change", onChange2);
+    };
+    subscribe2();
+    return () => cleanup();
+  }, []);
+  const cameraRef = React.useRef(IDENTITY);
+  const modeRef = React.useRef("idle");
+  const animRef = React.useRef(null);
+  const [cameraSnapshot, setCameraSnapshot] = React.useState(IDENTITY);
   const fit = size !== null ? Math.min(size.w / W2, size.h / H) : 0;
-  const ppu = fit * view.zoom;
-  const wx = (x2) => x2 * ppu + view.tx;
-  const wy = (y2) => y2 * ppu + view.ty;
+  const ppu = fit * cameraSnapshot.zoom;
   const centers = React.useMemo(() => {
     const out = /* @__PURE__ */ new Map();
     for (const item of value.items) out.set(item.key, { x: item.x, y: item.y });
@@ -61701,19 +62328,35 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
     const tree = new RBush();
     tree.load(value.items.map((item) => {
       const hw = (getSomeorUndefined(item.width) ?? 0) / 2 + 2.4;
-      return { minX: item.x - hw, minY: item.y - 2, maxX: item.x + hw, maxY: item.y + 2, item };
+      let minX = item.x - hw, minY = item.y - 2, maxX = item.x + hw, maxY = item.y + 2;
+      const fp = getSomeorUndefined(item.footprint);
+      if (fp !== void 0 && fp.type === "circle") {
+        const r2 = fp.value.radius;
+        minX = Math.min(minX, item.x - r2);
+        minY = Math.min(minY, item.y - r2);
+        maxX = Math.max(maxX, item.x + r2);
+        maxY = Math.max(maxY, item.y + r2);
+      } else if (fp !== void 0 && fp.type !== "rect") {
+        for (const v2 of fp.value.vertices) {
+          minX = Math.min(minX, v2.x);
+          minY = Math.min(minY, v2.y);
+          maxX = Math.max(maxX, v2.x);
+          maxY = Math.max(maxY, v2.y);
+        }
+      }
+      return { minX, minY, maxX, maxY, item };
     }));
     return tree;
   }, [value.items]);
   const visibleItems = React.useMemo(() => {
     if (size === null || ppu === 0) return [];
     return index2.search({
-      minX: -view.tx / ppu,
-      minY: -view.ty / ppu,
-      maxX: (size.w - view.tx) / ppu,
-      maxY: (size.h - view.ty) / ppu
+      minX: -cameraSnapshot.tx / ppu,
+      minY: -cameraSnapshot.ty / ppu,
+      maxX: (size.w - cameraSnapshot.tx) / ppu,
+      maxY: (size.h - cameraSnapshot.ty) / ppu
     }).map((b2) => b2.item);
-  }, [index2, size, ppu, view]);
+  }, [index2, size, ppu, cameraSnapshot]);
   const nav = React.useMemo(() => buildNavTree(value.zones, value.items), [value.zones, value.items]);
   const zoneDisplay = React.useMemo(() => {
     const counts = /* @__PURE__ */ new Map();
@@ -61739,39 +62382,194 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
     const indexOf = new Map(ordered.map((item, i2) => [item.key, i2]));
     return { ordered, indexOf };
   }, [nav]);
-  const animRef = React.useRef(null);
-  const viewRef = React.useRef(view);
-  viewRef.current = view;
+  const [currentZone, setCurrentZone] = React.useState(void 0);
+  React.useEffect(() => {
+    const SPY_ENTER = 0.3, SPY_STAY = 0.18, SPY_MARGIN = 0.15;
+    if (size === null || ppu === 0 || cameraSnapshot.zoom <= 1.05) {
+      setCurrentZone(void 0);
+      return;
+    }
+    const vx0 = -cameraSnapshot.tx / ppu, vy0 = -cameraSnapshot.ty / ppu;
+    const vx1 = (size.w - cameraSnapshot.tx) / ppu, vy1 = (size.h - cameraSnapshot.ty) / ppu;
+    const viewArea = (vx1 - vx0) * (vy1 - vy0);
+    const scoreOf = (z) => {
+      const ix = Math.max(0, Math.min(vx1, z.x + z.width) - Math.max(vx0, z.x));
+      const iy = Math.max(0, Math.min(vy1, z.y + z.height) - Math.max(vy0, z.y));
+      return ix * iy / Math.min(viewArea, z.width * z.height);
+    };
+    let best;
+    let bestScore = 0;
+    for (const z of value.zones) {
+      const score = scoreOf(z);
+      if (score > bestScore) {
+        best = z.key;
+        bestScore = score;
+      }
+    }
+    setCurrentZone((prev) => {
+      if (prev !== void 0) {
+        const holder = value.zones.find((z) => z.key === prev);
+        const holderScore = holder !== void 0 ? scoreOf(holder) : 0;
+        if (holderScore >= SPY_STAY && (best === prev || bestScore < holderScore + SPY_MARGIN)) return prev;
+      }
+      return bestScore >= SPY_ENTER ? best : void 0;
+    });
+  }, [size, ppu, cameraSnapshot, value.zones]);
+  const lod = ppu >= LOD_CARD_PPU ? "card" : ppu >= LOD_LABEL_PPU ? "label" : "dot";
+  const centerTree = React.useMemo(() => buildCenterTree(visibleItems), [visibleItems]);
+  const tiers = React.useMemo(() => declutterTiers(visibleItems, centerTree, lod, ppu, selected), [visibleItems, centerTree, lod, ppu, selected]);
+  const lowerQuery = query.trim().toLowerCase();
+  const searchHits = React.useMemo(() => lowerQuery === "" ? [] : value.items.filter((i2) => i2.key.toLowerCase().includes(lowerQuery) || i2.label.toLowerCase().includes(lowerQuery)).slice(0, 12), [lowerQuery, value.items]);
+  const scaleLen = ppu > 0 ? niceScaleLength(ppu, 100) : 0;
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+  const sizeRef = React.useRef(size);
+  sizeRef.current = size;
+  const fitRef = React.useRef(fit);
+  fitRef.current = fit;
+  const dprRef = React.useRef(dpr);
+  dprRef.current = dpr;
+  const paletteRef = React.useRef(palette);
+  paletteRef.current = palette;
+  const visibleItemsRef = React.useRef(visibleItems);
+  visibleItemsRef.current = visibleItems;
+  const tiersRef = React.useRef(tiers);
+  tiersRef.current = tiers;
+  const selectedRef = React.useRef(selected);
+  selectedRef.current = selected;
+  const centersRef = React.useRef(centers);
+  centersRef.current = centers;
+  const openZoneRef = React.useRef(openZone);
+  openZoneRef.current = openZone;
+  const lastPaintRef = React.useRef(null);
+  const applyCamera = React.useCallback(() => {
+    const sz = sizeRef.current;
+    if (sz === null) return;
+    const cam = cameraRef.current;
+    const ppuLive = fitRef.current * cam.zoom;
+    const dprLive = dprRef.current;
+    const layer = cardLayerRef.current;
+    if (layer !== null) {
+      layer.style.setProperty("--cam-ppu", String(ppuLive));
+      layer.style.setProperty("--cam-tx", `${cam.tx}px`);
+      layer.style.setProperty("--cam-ty", `${cam.ty}px`);
+    }
+    const grid = gridRef.current;
+    if (grid !== null) {
+      const len = ppuLive > 0 ? niceScaleLength(ppuLive, 100) : 0;
+      if (len > 0) {
+        const major = len * ppuLive, minor = major / 5;
+        grid.style.backgroundSize = `${major}px ${major}px, ${major}px ${major}px, ${minor}px ${minor}px, ${minor}px ${minor}px`;
+        grid.style.backgroundPosition = `${cam.tx}px 0, 0 ${cam.ty}px, ${cam.tx}px 0, 0 ${cam.ty}px`;
+      }
+    }
+    const canvas = drawRef.current, pal = paletteRef.current;
+    if (canvas === null || pal === null) return;
+    const last = lastPaintRef.current;
+    if (last !== null && last.zoom === cam.zoom && last.tx === cam.tx && last.ty === cam.ty && last.vis === visibleItemsRef.current && last.tiers === tiersRef.current && last.sel === selectedRef.current && last.pal === pal && last.w === sz.w && last.h === sz.h && last.dpr === dprLive && last.val === valueRef.current) return;
+    lastPaintRef.current = {
+      zoom: cam.zoom,
+      tx: cam.tx,
+      ty: cam.ty,
+      vis: visibleItemsRef.current,
+      tiers: tiersRef.current,
+      sel: selectedRef.current,
+      pal,
+      w: sz.w,
+      h: sz.h,
+      dpr: dprLive,
+      val: valueRef.current
+    };
+    const bw = Math.round(sz.w * dprLive), bh = Math.round(sz.h * dprLive);
+    if (canvas.width !== bw || canvas.height !== bh) {
+      canvas.width = bw;
+      canvas.height = bh;
+    }
+    const ctx = canvas.getContext("2d");
+    if (ctx === null) return;
+    ctx.setTransform(dprLive, 0, 0, dprLive, 0, 0);
+    paintSchematic({
+      ctx,
+      value: valueRef.current,
+      cam: { ppu: ppuLive, tx: cam.tx, ty: cam.ty },
+      width: sz.w,
+      height: sz.h,
+      visibleItems: visibleItemsRef.current,
+      tiers: tiersRef.current,
+      selected: selectedRef.current,
+      centers: centersRef.current,
+      palette: pal
+    });
+  }, []);
+  const coalescerRef = React.useRef(null);
+  if (coalescerRef.current === null && typeof requestAnimationFrame !== "undefined") {
+    coalescerRef.current = makeRafCoalescer(requestAnimationFrame, cancelAnimationFrame);
+  }
+  const requestRender = React.useCallback(() => {
+    const run = () => {
+      applyCamera();
+      const cam = cameraRef.current;
+      setCameraSnapshot((prev) => prev.zoom === cam.zoom && prev.tx === cam.tx && prev.ty === cam.ty ? prev : { zoom: cam.zoom, tx: cam.tx, ty: cam.ty });
+    };
+    const cz = coalescerRef.current;
+    if (cz !== null) cz.request(run);
+    else run();
+  }, [applyCamera]);
+  const cancelFlyRaf = React.useCallback(() => {
+    if (animRef.current !== null) {
+      cancelAnimationFrame(animRef.current);
+      animRef.current = null;
+    }
+  }, []);
+  const transition = React.useCallback((event) => {
+    if (cancelsFly(modeRef.current, event)) cancelFlyRaf();
+    modeRef.current = nextMode(modeRef.current, event);
+  }, [cancelFlyRaf]);
   const flyTo = React.useCallback((rect) => {
-    if (size === null || fit === 0) return;
+    if (sizeRef.current === null || fitRef.current === 0) return;
     const pad2 = 1.18;
-    const zoom = Math.min(MAX_ZOOM, Math.min(size.w / (rect.w * pad2 * fit), size.h / (rect.h * pad2 * fit)));
-    const target = {
-      zoom,
-      tx: size.w / 2 - (rect.x + rect.w / 2) * fit * zoom,
-      ty: size.h / 2 - (rect.y + rect.h / 2) * fit * zoom
+    const frame = () => {
+      const sz = sizeRef.current, ft = fitRef.current;
+      if (sz === null || ft === 0) return null;
+      const zoom = Math.min(MAX_ZOOM, Math.min(sz.w / (rect.w * pad2 * ft), sz.h / (rect.h * pad2 * ft)));
+      return {
+        zoom,
+        tx: sz.w / 2 - (rect.x + rect.w / 2) * ft * zoom,
+        ty: sz.h / 2 - (rect.y + rect.h / 2) * ft * zoom
+      };
     };
-    const from = viewRef.current;
+    const from = { ...cameraRef.current };
     const start = performance.now();
     if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+    transition("flyStart");
     const step = (now) => {
       const t4 = Math.min(1, (now - start) / 350);
       const e3 = 1 - Math.pow(1 - t4, 3);
-      setView({
-        zoom: from.zoom + (target.zoom - from.zoom) * e3,
-        tx: from.tx + (target.tx - from.tx) * e3,
-        ty: from.ty + (target.ty - from.ty) * e3
-      });
-      if (t4 < 1) animRef.current = requestAnimationFrame(step);
+      const target = frame();
+      if (target !== null) {
+        cameraRef.current = {
+          zoom: from.zoom + (target.zoom - from.zoom) * e3,
+          tx: from.tx + (target.tx - from.tx) * e3,
+          ty: from.ty + (target.ty - from.ty) * e3
+        };
+        applyCamera();
+        const cam = cameraRef.current;
+        setCameraSnapshot({ zoom: cam.zoom, tx: cam.tx, ty: cam.ty });
+      }
+      if (t4 < 1) {
+        animRef.current = requestAnimationFrame(step);
+      } else {
+        animRef.current = null;
+        transition("flyEnd");
+      }
     };
     animRef.current = requestAnimationFrame(step);
-  }, [size, fit]);
-  React.useEffect(() => () => {
-    if (animRef.current !== null) cancelAnimationFrame(animRef.current);
-  }, []);
+  }, [applyCamera, transition]);
+  const zoneOverrideRef = React.useRef(null);
   const flyToItem = React.useCallback((item) => {
     flyTo({ x: item.x - 4, y: item.y - 3, w: 8, h: 6 });
     setSelected(item.key);
+    zoneOverrideRef.current = null;
     setOpenZone(nav.zoneOf.get(item.key) ?? null);
     if (onSelectFn) queueMicrotask(() => onSelectFn(item.key));
   }, [flyTo, nav.zoneOf, onSelectFn]);
@@ -61783,6 +62581,7 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
   }, [itemOrder, selected, flyToItem]);
   const flyToZone = React.useCallback((zone) => {
     flyTo({ x: zone.x, y: zone.y, w: zone.width, h: zone.height });
+    zoneOverrideRef.current = null;
     setOpenZone(zone.key);
   }, [flyTo]);
   React.useEffect(() => {
@@ -61792,85 +62591,144 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
       e3.preventDefault();
       const rect = el.getBoundingClientRect();
       const px = e3.clientX - rect.left, py = e3.clientY - rect.top;
-      setView((prev) => {
-        const zoom = Math.max(1, Math.min(MAX_ZOOM, prev.zoom * Math.exp(-e3.deltaY * 15e-4)));
-        const k2 = zoom / prev.zoom;
-        const next = { zoom, tx: px - k2 * (px - prev.tx), ty: py - k2 * (py - prev.ty) };
-        return zoom === 1 ? IDENTITY : next;
-      });
+      transition("wheel");
+      cameraRef.current = zoomAbout(cameraRef.current, Math.exp(-e3.deltaY * 15e-4), px, py, 1, MAX_ZOOM);
+      requestRender();
     };
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
-  }, []);
+  }, [transition, requestRender]);
   const panRef = React.useRef(null);
+  const movedRef = React.useRef(false);
+  const pickAt = React.useCallback((host, clientX, clientY) => {
+    var _a2, _b, _c;
+    const sz = sizeRef.current;
+    if (sz === null) return false;
+    const cam = cameraRef.current;
+    const ppuLive = fitRef.current * cam.zoom;
+    if (ppuLive === 0) return false;
+    const rect = host.getBoundingClientRect();
+    const sx = clientX - rect.left, sy = clientY - rect.top;
+    const wxp = (sx - cam.tx) / ppuLive, wyp = (sy - cam.ty) / ppuLive;
+    const select = (key) => {
+      setSelected(key);
+      if (onSelectFn) queueMicrotask(() => onSelectFn(key));
+    };
+    for (const it of visibleItems) {
+      if ((tiers.get(it.key) ?? lod) !== "card") continue;
+      const fp = getSomeorUndefined(it.footprint);
+      if (fp === void 0 || fp.type === "rect") continue;
+      const hit = fp.type === "circle" ? Math.hypot(wxp - it.x, wyp - it.y) <= fp.value.radius : pointInPolygon(wxp, wyp, fp.value.vertices);
+      if (hit) {
+        select(it.key);
+        return true;
+      }
+    }
+    if (typeof document !== "undefined") {
+      const cardKey = (_b = (_a2 = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _a2.closest("[data-card-key]")) == null ? void 0 : _b.getAttribute("data-card-key");
+      if (cardKey !== null && cardKey !== void 0) {
+        select(cardKey);
+        return true;
+      }
+    }
+    const ctx = ((_c = drawRef.current) == null ? void 0 : _c.getContext("2d")) ?? null;
+    if (ctx !== null) {
+      ctx.save();
+      ctx.font = MARKER_LABEL_FONT;
+    }
+    const camScreen = { ppu: ppuLive, tx: cam.tx, ty: cam.ty };
+    let best = null, bestD = Infinity;
+    for (const it of visibleItems) {
+      const tier = tiers.get(it.key) ?? lod;
+      if (tier === "card") continue;
+      const box = markerHitbox(it, tier, camScreen, (t4) => ctx !== null ? ctx.measureText(t4).width : t4.length * 6);
+      if (!markerHit(box, sx, sy)) continue;
+      const d2 = Math.hypot(it.x * ppuLive + cam.tx - sx, it.y * ppuLive + cam.ty - sy);
+      if (d2 < bestD) {
+        best = it;
+        bestD = d2;
+      }
+    }
+    if (ctx !== null) ctx.restore();
+    if (best !== null) {
+      flyToItem(best);
+      return true;
+    }
+    return false;
+  }, [tiers, lod, visibleItems, onSelectFn, flyToItem]);
   const onCanvasPointerDown = React.useCallback((e3) => {
     if (e3.button !== 0) return;
     if (e3.target.closest("button") !== null) return;
-    panRef.current = { x: e3.clientX, y: e3.clientY, tx: viewRef.current.tx, ty: viewRef.current.ty };
+    transition("pointerDown");
+    panRef.current = { x: e3.clientX, y: e3.clientY, tx: cameraRef.current.tx, ty: cameraRef.current.ty };
+    movedRef.current = false;
     e3.currentTarget.setPointerCapture(e3.pointerId);
-  }, []);
+  }, [transition]);
   const onCanvasPointerMove = React.useCallback((e3) => {
     const pan = panRef.current;
     if (!pan) return;
-    setView((prev) => ({ ...prev, tx: pan.tx + e3.clientX - pan.x, ty: pan.ty + e3.clientY - pan.y }));
-  }, []);
-  const onCanvasPointerUp = React.useCallback(() => {
+    if (Math.abs(e3.clientX - pan.x) > 4 || Math.abs(e3.clientY - pan.y) > 4) movedRef.current = true;
+    cameraRef.current = { ...cameraRef.current, tx: pan.tx + e3.clientX - pan.x, ty: pan.ty + e3.clientY - pan.y };
+    requestRender();
+  }, [requestRender]);
+  const endPan = React.useCallback(() => {
+    if (panRef.current === null) return false;
     panRef.current = null;
-  }, []);
-  const resetView = React.useCallback(() => setView(IDENTITY), []);
+    transition("pointerUp");
+    return true;
+  }, [transition]);
+  const onCanvasPointerUp = React.useCallback((e3) => {
+    const wasPress = endPan();
+    if (!wasPress || movedRef.current) return;
+    if (!pickAt(e3.currentTarget, e3.clientX, e3.clientY)) setSelected(null);
+  }, [endPan, pickAt]);
+  const onCanvasPointerCancel = React.useCallback(() => {
+    movedRef.current = false;
+    endPan();
+  }, [endPan]);
+  const resetView = React.useCallback(() => {
+    transition("cancel");
+    cameraRef.current = IDENTITY;
+    requestRender();
+  }, [transition, requestRender]);
   const zoomBy = React.useCallback((factor) => {
-    if (size === null) return;
-    const px = size.w / 2, py = size.h / 2;
-    setView((prev) => {
-      const zoom = Math.max(1, Math.min(MAX_ZOOM, prev.zoom * factor));
-      const k2 = zoom / prev.zoom;
-      return zoom === 1 ? IDENTITY : { zoom, tx: px - k2 * (px - prev.tx), ty: py - k2 * (py - prev.ty) };
-    });
-  }, [size]);
-  const [currentZone, setCurrentZone] = React.useState(void 0);
-  React.useEffect(() => {
-    const SPY_ENTER = 0.3, SPY_STAY = 0.18, SPY_MARGIN = 0.15;
-    if (size === null || ppu === 0 || view.zoom <= 1.05) {
-      setCurrentZone(void 0);
-      return;
-    }
-    const vx0 = -view.tx / ppu, vy0 = -view.ty / ppu;
-    const vx1 = (size.w - view.tx) / ppu, vy1 = (size.h - view.ty) / ppu;
-    const viewArea = (vx1 - vx0) * (vy1 - vy0);
-    const scoreOf = (z) => {
-      const ix = Math.max(0, Math.min(vx1, z.x + z.width) - Math.max(vx0, z.x));
-      const iy = Math.max(0, Math.min(vy1, z.y + z.height) - Math.max(vy0, z.y));
-      return ix * iy / Math.min(viewArea, z.width * z.height);
-    };
-    let best;
-    let bestScore = 0;
-    for (const z of value.zones) {
-      const score = scoreOf(z);
-      if (score > bestScore) {
-        best = z.key;
-        bestScore = score;
-      }
-    }
-    setCurrentZone((prev) => {
-      if (prev !== void 0) {
-        const holder = value.zones.find((z) => z.key === prev);
-        const holderScore = holder !== void 0 ? scoreOf(holder) : 0;
-        if (holderScore >= SPY_STAY && (best === prev || bestScore < holderScore + SPY_MARGIN)) return prev;
-      }
-      return bestScore >= SPY_ENTER ? best : void 0;
-    });
-  }, [size, ppu, view, value.zones]);
-  const lod = ppu >= LOD_CARD_PPU ? "card" : ppu >= LOD_LABEL_PPU ? "label" : "dot";
-  const centerTree = React.useMemo(() => buildCenterTree(visibleItems), [visibleItems]);
-  const tiers = React.useMemo(() => declutterTiers(visibleItems, centerTree, lod, ppu, selected), [visibleItems, centerTree, lod, ppu, selected]);
-  const lowerQuery = query.trim().toLowerCase();
-  const searchHits = React.useMemo(() => lowerQuery === "" ? [] : value.items.filter((i2) => i2.key.toLowerCase().includes(lowerQuery) || i2.label.toLowerCase().includes(lowerQuery)).slice(0, 12), [lowerQuery, value.items]);
-  const scaleLen = ppu > 0 ? niceScaleLength(ppu, 100) : 0;
+    const sz = sizeRef.current;
+    if (sz === null) return;
+    transition("zoom");
+    cameraRef.current = zoomAbout(cameraRef.current, factor, sz.w / 2, sz.h / 2, 1, MAX_ZOOM);
+    requestRender();
+  }, [transition, requestRender]);
+  const minimapDragRef = React.useRef(false);
+  const minimapJump = React.useCallback((el, clientX, clientY) => {
+    const sz = sizeRef.current;
+    if (sz === null) return;
+    const rect = el.getBoundingClientRect();
+    const cx2 = (clientX - rect.left) / rect.width * W2;
+    const cy = (clientY - rect.top) / rect.height * H;
+    const cam = cameraRef.current;
+    cameraRef.current = { ...cam, tx: sz.w / 2 - cx2 * fitRef.current * cam.zoom, ty: sz.h / 2 - cy * fitRef.current * cam.zoom };
+    requestRender();
+  }, [W2, H, requestRender]);
+  React.useEffect(() => () => {
+    var _a2;
+    (_a2 = coalescerRef.current) == null ? void 0 : _a2.cancel();
+    if (animRef.current !== null) cancelAnimationFrame(animRef.current);
+  }, [animRef]);
+  React.useLayoutEffect(() => {
+    applyCamera();
+  }, [applyCamera, value, visibleItems, tiers, selected, palette, size, dpr, fit, cameraSnapshot]);
   const toggleZone = React.useCallback((key) => {
-    setOpenZone((prev) => prev === key ? nav.parentOf.get(key) ?? null : key);
+    const collapsing = openZoneRef.current === key;
+    zoneOverrideRef.current = collapsing ? key : null;
+    setOpenZone(collapsing ? nav.parentOf.get(key) ?? null : key);
   }, [nav.parentOf]);
   React.useEffect(() => {
-    if (currentZone !== void 0) setOpenZone(currentZone);
+    if (currentZone === void 0) return;
+    if (zoneOverrideRef.current !== null) {
+      if (zoneOverrideRef.current === currentZone) return;
+      zoneOverrideRef.current = null;
+    }
+    setOpenZone(currentZone);
   }, [currentZone]);
   const openPath = React.useMemo(() => {
     const path2 = /* @__PURE__ */ new Set();
@@ -61895,7 +62753,15 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
         react.Box,
         {
           css: styles2.navZone,
-          style: { paddingLeft: `${8 + depth * 14}px` },
+          style: {
+            paddingLeft: `${8 + depth * 14}px`,
+            // Pin this header below its ancestors' pinned headers
+            // (each level offset by one row) so the whole path stays
+            // visible while scrolling the zone's items; shallower
+            // levels stack above deeper ones.
+            top: `calc(var(--nav-row-h) * ${depth})`,
+            zIndex: 30 - depth
+          },
           ...node2.zone.key === currentZone ? { "data-current": "" } : {},
           children: [
             expandable ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -61934,7 +62800,8 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
       ))
     ] }, node2.zone.key);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles2.root, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles2.root, ...fixedHeight !== void 0 ? { style: { height: fixedHeight, maxHeight: fixedHeight } } : {}, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SchematicPaletteProbe, { onResolve: setPalette }),
     showNavigator && navCollapsed && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { css: styles2.navCollapsed, children: /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "button", css: styles2.navToggle, "aria-label": "Expand index", title: "Show index", onClick: () => setNavCollapsed(false), children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faAnglesRight }) }) }),
     showNavigator && !navCollapsed && /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles2.nav, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles2.navHeader, children: [
@@ -61979,112 +62846,27 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
         ref: canvasRef,
         css: styles2.canvas,
         "data-schematic-canvas": "",
-        style: { aspectRatio: `${W2} / ${H}` },
+        style: fixedHeight !== void 0 ? { minHeight: 0 } : { aspectRatio: `${W2} / ${H}` },
         onPointerDown: onCanvasPointerDown,
         onPointerMove: onCanvasPointerMove,
         onPointerUp: onCanvasPointerUp,
+        onPointerCancel: onCanvasPointerCancel,
+        onLostPointerCapture: onCanvasPointerCancel,
         onDoubleClick: resetView,
         children: [
-          showGrid && size !== null && scaleLen > 0 && (() => {
-            const major = scaleLen * ppu;
-            const minor = major / 5;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              react.Box,
+          showGrid && size !== null && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ref: gridRef, css: styles2.grid }),
+          size !== null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "canvas",
               {
-                css: styles2.grid,
-                style: {
-                  backgroundSize: `${major}px ${major}px, ${major}px ${major}px, ${minor}px ${minor}px, ${minor}px ${minor}px`,
-                  backgroundPosition: `${view.tx}px 0, 0 ${view.ty}px, ${view.tx}px 0, 0 ${view.ty}px`
-                }
+                ref: drawRef,
+                style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
               }
-            );
-          })(),
-          size !== null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            value.zones.map((zone) => {
-              const pattern = zone.pattern;
-              const tone = (pattern.value.tone.type === "some" ? pattern.value.tone.value.type : void 0) ?? "muted";
-              const hatchVars = pattern.type === "hatch" ? {
-                "--hatch-spacing": `${pattern.value.spacing.type === "some" ? pattern.value.spacing.value : 8}px`,
-                "--hatch-angle": `${pattern.value.angle.type === "some" ? pattern.value.angle.value : 45}deg`
-              } : {};
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                react.Box,
-                {
-                  css: styles2.zone,
-                  "data-pattern": pattern.type,
-                  "data-tone": tone,
-                  style: {
-                    left: wx(zone.x),
-                    top: wy(zone.y),
-                    width: zone.width * ppu,
-                    height: zone.height * ppu,
-                    ...hatchVars
-                  },
-                  children: zone.width * ppu >= zone.label.length * 6.2 + 24 && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles2.zoneLabel, "data-pattern": pattern.type, children: zone.label })
-                },
-                zone.key
-              );
-            }),
-            /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "svg", css: styles2.underlay, ...{ viewBox: `0 0 ${size.w} ${size.h}`, width: size.w, height: size.h }, children: value.links.map((link2) => {
-              const from = centers.get(link2.from);
-              const to = centers.get(link2.to);
-              if (!from || !to) return null;
-              const anchors = [from, ...link2.via, to].map((p2) => ({ x: wx(p2.x), y: wy(p2.y) }));
-              const corner = link2.route.type === "orthogonal" ? link2.route.value.corner.type === "some" ? link2.route.value.corner.value : 8 : 0;
-              const pts = link2.route.type === "orthogonal" ? orthogonalize(anchors) : anchors;
-              const style = link2.style;
-              const tone = (style.value.tone.type === "some" ? style.value.tone.value.type : void 0) ?? (style.type === "solid" ? "brand" : "muted");
-              const weight = style.value.weight.type === "some" ? style.value.weight.value : style.type === "solid" ? 2.5 : 1.5;
-              return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-tone": tone, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "path",
-                  {
-                    d: roundedPath(pts, corner),
-                    fill: "none",
-                    "data-style": style.type,
-                    strokeWidth: weight,
-                    ...style.type === "dashed" ? { strokeDasharray: "6 5" } : {}
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: anchors[0].x, cy: anchors[0].y, r: weight + 1.5 }),
-                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: anchors[anchors.length - 1].x, cy: anchors[anchors.length - 1].y, r: weight + 1.5 })
-              ] }, link2.key);
-            }) }),
-            visibleItems.map((item) => {
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.Box, { ref: cardLayerRef, css: styles2.cardLayer, children: visibleItems.map((item) => {
+              if ((tiers.get(item.key) ?? lod) !== "card") return null;
               const tone = statusTone(item.status);
               const isSelected = selected === item.key;
-              const tier = tiers.get(item.key) ?? lod;
-              if (tier === "dot") {
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  react.Box,
-                  {
-                    css: styles2.itemDot,
-                    "data-tone": tone ?? "neutral",
-                    ...isSelected ? { "data-selected": "" } : {},
-                    style: { left: wx(item.x), top: wy(item.y) },
-                    onClick: () => flyToItem(item),
-                    onPointerDown: (e3) => e3.stopPropagation()
-                  },
-                  item.key
-                );
-              }
-              if (tier === "label") {
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  react.Box,
-                  {
-                    css: styles2.itemPin,
-                    ...isSelected ? { "data-selected": "" } : {},
-                    style: { left: wx(item.x), top: wy(item.y) },
-                    onClick: () => flyToItem(item),
-                    onPointerDown: (e3) => e3.stopPropagation(),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles2.statusDot, "data-tone": tone ?? "neutral" }),
-                      item.label
-                    ]
-                  },
-                  item.key
-                );
-              }
               const sublabel = getSomeorUndefined(item.sublabel);
               const icon3 = getSomeorUndefined(item.icon);
               const meter = getSomeorUndefined(item.meter);
@@ -62095,17 +62877,14 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
                 react.Box,
                 {
                   css: styles2.item,
+                  "data-card-key": item.key,
                   ...isSelected ? { "data-selected": "" } : {},
                   style: {
-                    left: wx(item.x),
-                    top: wy(item.y),
-                    ...typeof width === "number" ? { width: width * ppu } : {}
-                  },
-                  onClick: () => {
-                    setSelected(item.key);
-                    if (onSelectFn) queueMicrotask(() => onSelectFn(item.key));
+                    left: 0,
+                    top: 0,
+                    transform: `${cardTranslateCss(item.x, item.y)} translate(-50%, -50%)`,
+                    ...typeof width === "number" ? { width: cardWidthCss(width) } : {}
                   },
-                  onPointerDown: (e3) => e3.stopPropagation(),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles2.itemHead, children: [
                       iconDef !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "span", css: styles2.itemIcon, children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: iconDef }) }),
@@ -62119,7 +62898,7 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
                 },
                 item.key
               );
-            }),
+            }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { css: styles2.controls, children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "button", css: styles2.controlButton, "aria-label": "Zoom in", title: "Zoom in (scroll)", onClick: () => zoomBy(1.5), children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faPlus }) }),
               /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "button", css: styles2.controlButton, "aria-label": "Zoom out", title: "Zoom out (scroll)", onClick: () => zoomBy(1 / 1.5), children: /* @__PURE__ */ jsxRuntime.jsx(FontAwesomeIcon, { icon: faMinus }) }),
@@ -62163,16 +62942,20 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
                 style: { width: 150, height: 150 * H / W2 },
                 onPointerDown: (e3) => {
                   e3.stopPropagation();
-                  const rect = e3.currentTarget.getBoundingClientRect();
-                  const cx2 = (e3.clientX - rect.left) / rect.width * W2;
-                  const cy = (e3.clientY - rect.top) / rect.height * H;
-                  if (size !== null) {
-                    setView((prev) => ({
-                      ...prev,
-                      tx: size.w / 2 - cx2 * fit * prev.zoom,
-                      ty: size.h / 2 - cy * fit * prev.zoom
-                    }));
-                  }
+                  const el = e3.currentTarget;
+                  el.setPointerCapture(e3.pointerId);
+                  transition("cancel");
+                  minimapDragRef.current = true;
+                  minimapJump(el, e3.clientX, e3.clientY);
+                },
+                onPointerMove: (e3) => {
+                  if (!minimapDragRef.current) return;
+                  e3.stopPropagation();
+                  minimapJump(e3.currentTarget, e3.clientX, e3.clientY);
+                },
+                onPointerUp: (e3) => {
+                  minimapDragRef.current = false;
+                  e3.currentTarget.releasePointerCapture(e3.pointerId);
                 },
                 children: [
                   value.zones.map((zone) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -62193,8 +62976,8 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
                     {
                       css: styles2.minimapViewport,
                       style: {
-                        left: `${Math.max(0, -view.tx / ppu / W2 * 100)}%`,
-                        top: `${Math.max(0, -view.ty / ppu / H * 100)}%`,
+                        left: `${Math.max(0, -cameraSnapshot.tx / ppu / W2 * 100)}%`,
+                        top: `${Math.max(0, -cameraSnapshot.ty / ppu / H * 100)}%`,
                         width: `${Math.min(100, size.w / ppu / W2 * 100)}%`,
                         height: `${Math.min(100, size.h / ppu / H * 100)}%`
                       }