@elaraai/east-ui-components 1.0.12 → 1.0.13

package/dist/index.cjs

@@ -3011,6 +3011,9 @@ const schematicSlotRecipe = react.defineSlotRecipe({
     "underlay",
     "zone",
     "zoneLabel",
+    "zoneShapes",
+    "zoneShapeLabel",
+    "footprints",
     "item",
     "itemHead",
     "itemIcon",
@@ -3140,6 +3143,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. */
@@ -9439,7 +9527,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 +9544,7 @@ function css() {
 var _cssInserted = false;
 function ensureCss() {
   if (config.autoAddCss && !_cssInserted) {
-    insertCss(css());
+    insertCss(css$1());
     _cssInserted = true;
   }
 }
@@ -9464,7 +9552,7 @@ var InjectCSS = {
   mixout: function mixout() {
     return {
       dom: {
-        css,
+        css: css$1,
         insertCss: ensureCss
       }
     };
@@ -61532,23 +61620,46 @@ 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) {
+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;
+  }
+}
+function statusTone$1(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 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 +61672,354 @@ 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;
+  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();
+  }
+}
+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;
+  ctx.clearRect(0, 0, width, height);
+  ctx.lineJoin = "round";
+  for (const zone of value.zones) {
+    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 geom = getSomeorUndefined(zone.geometry);
+    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 = pattern.value.spacing.type === "some" ? pattern.value.spacing.value : 8;
+      const angle = (pattern.value.angle.type === "some" ? pattern.value.angle.value : 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);
+      ctx.beginPath();
+      for (let o2 = -diag; o2 < diag; 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 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, 5, 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 = '600 10px ui-monospace, "SF Mono", Menlo, monospace';
+    const tw = ctx.measureText(item.label).width;
+    const padX = 6, dotW = 7, gap = 4, h2 = 16;
+    const w2 = padX + dotW + gap + tw + padX;
+    const left = x2 - w2 / 2, top = y2 - h2 / 2;
+    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 + padX + dotW / 2, y2, dotW / 2, 0, Math.PI * 2);
+    ctx.fillStyle = tint;
+    ctx.fill();
+    ctx.fillStyle = css(p2.fg);
+    ctx.textBaseline = "middle";
+    ctx.fillText(item.label, left + padX + dotW + 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 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 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();
@@ -61671,13 +62110,16 @@ 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 [palette, setPalette] = React.useState(null);
   const navTreeRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const drawRef = React.useRef(null);
   const [size, setSize] = React.useState(null);
   React.useLayoutEffect(() => {
     const el = canvasRef.current;
@@ -61701,7 +62143,23 @@ 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]);
@@ -61803,15 +62261,18 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
     return () => el.removeEventListener("wheel", onWheel);
   }, []);
   const panRef = React.useRef(null);
+  const movedRef = React.useRef(false);
   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 };
+    movedRef.current = false;
     e3.currentTarget.setPointerCapture(e3.pointerId);
   }, []);
   const onCanvasPointerMove = React.useCallback((e3) => {
     const pan = panRef.current;
     if (!pan) return;
+    if (Math.abs(e3.clientX - pan.x) > 4 || Math.abs(e3.clientY - pan.y) > 4) movedRef.current = true;
     setView((prev) => ({ ...prev, tx: pan.tx + e3.clientX - pan.x, ty: pan.ty + e3.clientY - pan.y }));
   }, []);
   const onCanvasPointerUp = React.useCallback(() => {
@@ -61866,6 +62327,61 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
   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;
+  React.useEffect(() => {
+    const canvas = drawRef.current;
+    if (canvas === null || size === null || palette === null) return;
+    const dpr = window.devicePixelRatio || 1;
+    const bw = Math.round(size.w * dpr), bh = Math.round(size.h * dpr);
+    if (canvas.width !== bw || canvas.height !== bh) {
+      canvas.width = bw;
+      canvas.height = bh;
+    }
+    const ctx = canvas.getContext("2d");
+    if (ctx === null) return;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    paintSchematic({
+      ctx,
+      value,
+      cam: { ppu, tx: view.tx, ty: view.ty },
+      width: size.w,
+      height: size.h,
+      visibleItems,
+      tiers,
+      selected,
+      centers,
+      palette
+    });
+  }, [value, view, ppu, size, visibleItems, tiers, selected, centers, palette]);
+  const onCanvasClick = React.useCallback((e3) => {
+    if (size === null || movedRef.current) return;
+    const rect = e3.currentTarget.getBoundingClientRect();
+    const sx = e3.clientX - rect.left, sy = e3.clientY - rect.top;
+    const wxp = (sx - view.tx) / ppu, wyp = (sy - view.ty) / ppu;
+    for (const box of index2.search({ minX: wxp, minY: wyp, maxX: wxp, maxY: wyp })) {
+      const it = box.item;
+      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) {
+        setSelected(it.key);
+        if (onSelectFn) queueMicrotask(() => onSelectFn(it.key));
+        return;
+      }
+    }
+    let best = null, bestD = Infinity;
+    for (const it of visibleItems) {
+      const tier = tiers.get(it.key) ?? lod;
+      if (tier === "card") continue;
+      const d2 = Math.hypot(it.x * ppu + view.tx - sx, it.y * ppu + view.ty - sy);
+      const reach = tier === "dot" ? 9 : 18;
+      if (d2 < reach && d2 < bestD) {
+        best = it;
+        bestD = d2;
+      }
+    }
+    if (best !== null) flyToItem(best);
+  }, [size, view, ppu, index2, tiers, lod, visibleItems, onSelectFn, flyToItem]);
   const toggleZone = React.useCallback((key) => {
     setOpenZone((prev) => prev === key ? nav.parentOf.get(key) ?? null : key);
   }, [nav.parentOf]);
@@ -61934,7 +62450,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,7 +62496,7 @@ 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,
@@ -62000,91 +62517,18 @@ const EastChakraSchematic = React.memo(function EastChakraSchematic2({ value })
             );
           })(),
           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);
-            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "canvas",
+              {
+                ref: drawRef,
+                onClick: onCanvasClick,
+                style: { position: "absolute", inset: 0, width: "100%", height: "100%" }
+              }
+            ),
             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);