@three-flatland/devtools 0.1.0-alpha.3 → 1.0.0-alpha.6

package/dist/theme.js

@@ -1,33 +1,25 @@
+//#region src/theme.ts
+/**
+* Flatland theme — based on the Jehkoba32 retro palette.
+*
+* Uses project dark/neutral colors for backgrounds, retro-white/grey for text,
+* and accent color only on control thumbs and slider grooves.
+*/
 const FLATLAND_THEME = {
-  // Backgrounds — retro darks
-  "--tp-base-background-color": "#00021c",
-  // retro-midnight
-  "--tp-container-background-color": "rgba(28, 40, 77, 0.4)",
-  // retro-deep-purple @ 40%
-  "--tp-input-background-color": "rgba(0, 2, 28, 0.6)",
-  // retro-black @ 60%
-  "--tp-monitor-background-color": "rgba(0, 2, 28, 0.4)",
-  // retro-black @ 40%
-  // Text — retro whites and greys
-  "--tp-container-foreground-color": "#f0edd8",
-  // retro-white
-  "--tp-button-foreground-color": "#f0edd8",
-  // retro-white
-  "--tp-input-foreground-color": "#c8c5b4",
-  // muted retro-white
-  "--tp-label-foreground-color": "rgba(240, 237, 216, 0.55)",
-  // retro-white @ 55%
-  "--tp-monitor-foreground-color": "#c8c5b4",
-  // muted retro-white
-  // Buttons — retro-deep-purple
-  "--tp-button-background-color": "#1c284d",
-  // retro-deep-purple
-  // Accent — slider grooves & separators
-  "--tp-groove-foreground-color": "rgba(240, 237, 216, 0.12)",
-  // muted separator/groove
-  // Typography
-  "--tp-base-font-family": "monospace"
+	"--tp-base-background-color": "#00021c",
+	"--tp-container-background-color": "rgba(28, 40, 77, 0.4)",
+	"--tp-input-background-color": "rgba(0, 2, 28, 0.6)",
+	"--tp-monitor-background-color": "rgba(0, 2, 28, 0.4)",
+	"--tp-container-foreground-color": "#f0edd8",
+	"--tp-button-foreground-color": "#f0edd8",
+	"--tp-input-foreground-color": "#c8c5b4",
+	"--tp-label-foreground-color": "rgba(240, 237, 216, 0.55)",
+	"--tp-monitor-foreground-color": "#c8c5b4",
+	"--tp-button-background-color": "#1c284d",
+	"--tp-groove-foreground-color": "rgba(240, 237, 216, 0.12)",
+	"--tp-base-font-family": "monospace"
 };
+/** Accent CSS — colorizes slider thumb and number spinner drag handle */
 const ACCENT_CSS = `
 /* Slider thumb */
 .tp-sldv_k::after { background-color: #d94c87 !important; }
@@ -52,13 +44,13 @@ const ACCENT_CSS = `
 .tp-radv_i:hover + .tp-radv_b { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }
 .tp-radv_i:checked + .tp-radv_b { background-color: #1c284d !important; color: #d94c87 !important; }
 .tp-radv_i:active + .tp-radv_b { background-color: #343473 !important; color: #f0edd8 !important; }
-/* Checkbox \u2014 default background blends with the container, so bump to
+/* Checkbox — default background blends with the container, so bump to
    the same surface as the select/button controls for a visible hit
    target, and accent the check stroke on :checked. Markup:
    <input.tp-ckbv_i> + <div.tp-ckbv_w><svg><path/></svg></div>
 
-   Tweakpane's hidden input ships at browser-default size (~13\xD713) at
-   top-left of the label, relying on <label>\u2192<input> click forwarding
+   Tweakpane's hidden input ships at browser-default size (~13×13) at
+   top-left of the label, relying on <label>→<input> click forwarding
    to toggle from clicks on the visible box. That forwarding is flaky
    under some pointer-events + z-index combinations (reports: clicks
    sometimes register, sometimes don't). Stretching the input to cover
@@ -79,7 +71,7 @@ const ACCENT_CSS = `
 .tp-ckbv_i:active + .tp-ckbv_w { background-color: #343473 !important; }
 .tp-ckbv_i:checked + .tp-ckbv_w svg path { stroke: #d94c87 !important; }
 
-/* Dimmable pane \u2014 slightly translucent when idle, opaque on hover or when pinned.
+/* Dimmable pane — slightly translucent when idle, opaque on hover or when pinned.
    Hover-promotion is gated on devices that actually have a pointer (desktop),
    so on touch devices the pin toggle is the only way to flip opacity. */
 .tp-flatland-dimmable { opacity: 0.8; transition: opacity 750ms ease; }
@@ -129,7 +121,7 @@ const ACCENT_CSS = `
   display: flex;
   align-items: center;
   justify-content: center;
-  /* Match the original tweakpane fold caret and folder-header glyphs \u2014
+  /* Match the original tweakpane fold caret and folder-header glyphs —
    * the muted foreground token pane headers use throughout. */
   color: var(--tp-label-foreground-color);
   cursor: pointer;
@@ -138,12 +130,12 @@ const ACCENT_CSS = `
   user-select: none;
 }
 /*
- * Glyph exactly replicates tweakpane's native fold marker \u2014 a 6\xD76
+ * Glyph exactly replicates tweakpane's native fold marker — a 6×6
  * square with a horizontal linear-gradient that draws two vertical
  * stripes (screw-head look). Rotating gives the three states:
- *   full     \u2192 0\xB0   (vertical stripes, ||) \u2014 matches tweakpane's expanded
- *   minimal  \u2192 45\xB0  (diagonal, like a flat-head screw)
- *   collapsed \u2192 90\xB0 (horizontal stripes, =) \u2014 matches tweakpane's collapsed
+ *   full     → 0°   (vertical stripes, ||) — matches tweakpane's expanded
+ *   minimal  → 45°  (diagonal, like a flat-head screw)
+ *   collapsed → 90° (horizontal stripes, =) — matches tweakpane's collapsed
  */
 .tp-flatland-mode-glyph {
   display: block;
@@ -159,7 +151,7 @@ const ACCENT_CSS = `
     var(--cnt-fg, currentColor) 4px
   );
   opacity: 0.5;
-  /* 0.2s ease-in-out \u2014 the exact transition tweakpane applies to its
+  /* 0.2s ease-in-out — the exact transition tweakpane applies to its
    * own fold marker. */
   transition: transform 0.2s ease-in-out;
 }
@@ -171,7 +163,7 @@ const ACCENT_CSS = `
  * Minimal mode: keep only blades tagged with .tp-flatland-minimal-keep
  * (stats graph + stats row). Non-keep blades animate max-height to 0
  * and fade out so the whole pane visibly shrinks, matching tweakpane
- * native fold feel. Values and bindings stay intact \u2014 DOM is just
+ * native fold feel. Values and bindings stay intact — DOM is just
  * clipped.
  *
  * max-height uses a generous ceiling instead of a measured value so we
@@ -183,7 +175,7 @@ const ACCENT_CSS = `
  *   .tp-rotv_c / .tp-fldv_c use
  *     height .2s ease-in-out, opacity .2s linear, padding .2s ease-in-out
  *   and on expand, opacity has a 0.2s delay so height finishes first
- *   then opacity fades in. The collapse direction has no delay \u2014 both
+ *   then opacity fades in. The collapse direction has no delay — both
  *   animate together.
  *
  * We use max-height in place of height because content height isn't
@@ -208,7 +200,7 @@ const ACCENT_CSS = `
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   pointer-events: none;
-  /* On collapse: no delay on opacity \u2014 both animate together,
+  /* On collapse: no delay on opacity — both animate together,
    * matching tweakpane's non-expanded transition shape. */
   transition:
     max-height 0.2s ease-in-out,
@@ -218,18 +210,15 @@ const ACCENT_CSS = `
 }
 `;
 function applyTheme(element, theme = FLATLAND_THEME) {
-  for (const [key, value] of Object.entries(theme)) {
-    element.style.setProperty(key, value);
-  }
-  if (!element.querySelector("style[data-flatland]")) {
-    const style = document.createElement("style");
-    style.setAttribute("data-flatland", "");
-    style.textContent = ACCENT_CSS;
-    element.appendChild(style);
-  }
+	for (const [key, value] of Object.entries(theme)) element.style.setProperty(key, value);
+	if (!element.querySelector("style[data-flatland]")) {
+		const style = document.createElement("style");
+		style.setAttribute("data-flatland", "");
+		style.textContent = ACCENT_CSS;
+		element.appendChild(style);
+	}
 }
-export {
-  FLATLAND_THEME,
-  applyTheme
-};
+//#endregion
+export { FLATLAND_THEME, applyTheme };
+
 //# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/theme.ts"],"sourcesContent":["/**\n * Flatland theme — based on the Jehkoba32 retro palette.\n *\n * Uses project dark/neutral colors for backgrounds, retro-white/grey for text,\n * and accent color only on control thumbs and slider grooves.\n */\nexport const FLATLAND_THEME: Record<string, string> = {\n  // Backgrounds — retro darks\n  '--tp-base-background-color': '#00021c', // retro-midnight\n  '--tp-container-background-color': 'rgba(28, 40, 77, 0.4)', // retro-deep-purple @ 40%\n  '--tp-input-background-color': 'rgba(0, 2, 28, 0.6)', // retro-black @ 60%\n  '--tp-monitor-background-color': 'rgba(0, 2, 28, 0.4)', // retro-black @ 40%\n\n  // Text — retro whites and greys\n  '--tp-container-foreground-color': '#f0edd8', // retro-white\n  '--tp-button-foreground-color': '#f0edd8', // retro-white\n  '--tp-input-foreground-color': '#c8c5b4', // muted retro-white\n  '--tp-label-foreground-color': 'rgba(240, 237, 216, 0.55)', // retro-white @ 55%\n  '--tp-monitor-foreground-color': '#c8c5b4', // muted retro-white\n\n  // Buttons — retro-deep-purple\n  '--tp-button-background-color': '#1c284d', // retro-deep-purple\n\n  // Accent — slider grooves & separators\n  '--tp-groove-foreground-color': 'rgba(240, 237, 216, 0.12)', // muted separator/groove\n\n  // Typography\n  '--tp-base-font-family': 'monospace',\n}\n\n/** Accent CSS — colorizes slider thumb and number spinner drag handle */\nconst ACCENT_CSS = `\n/* Slider thumb */\n.tp-sldv_k::after { background-color: #d94c87 !important; }\n.tp-sldv_t:hover .tp-sldv_k::after { background-color: #e0609a !important; }\n.tp-sldv_t:active .tp-sldv_k::after { background-color: #a6216e !important; }\n/* Slider track (filled portion) */\n.tp-sldv_k::before { background-color: rgba(240, 237, 216, 0.25) !important; }\n/* Number spinner drag handle */\n.tp-txtv_k::before { background-color: #d94c87 !important; }\n/* Select/dropdown */\n.tp-lstv_s { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }\n.tp-lstv_s:hover { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-lstv_s:focus { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-lstv_s:active { background-color: #343473 !important; color: #d94c87 !important; }\n.tp-lstv_m { color: rgba(240, 237, 216, 0.5) !important; }\n/* Buttons */\n.tp-btnv_b { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }\n.tp-btnv_b:hover { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-btnv_b:active { background-color: #343473 !important; color: #d94c87 !important; }\n/* Radio grid buttons */\n.tp-radv_b { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }\n.tp-radv_i:hover + .tp-radv_b { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-radv_i:checked + .tp-radv_b { background-color: #1c284d !important; color: #d94c87 !important; }\n.tp-radv_i:active + .tp-radv_b { background-color: #343473 !important; color: #f0edd8 !important; }\n/* Checkbox — default background blends with the container, so bump to\n   the same surface as the select/button controls for a visible hit\n   target, and accent the check stroke on :checked. Markup:\n   <input.tp-ckbv_i> + <div.tp-ckbv_w><svg><path/></svg></div>\n\n   Tweakpane's hidden input ships at browser-default size (~13×13) at\n   top-left of the label, relying on <label>→<input> click forwarding\n   to toggle from clicks on the visible box. That forwarding is flaky\n   under some pointer-events + z-index combinations (reports: clicks\n   sometimes register, sometimes don't). Stretching the input to cover\n   the entire visible box puts the hit target directly on the pointer,\n   no label forwarding required. */\n.tp-ckbv_i {\n  /* Absolute positioning + zero opacity is Tweakpane's default; we\n     just add explicit size + cursor so the click area matches the\n     visible affordance exactly. */\n  width: var(--cnt-usz) !important;\n  height: var(--cnt-usz) !important;\n  margin: 0 !important;\n  cursor: pointer !important;\n}\n.tp-ckbv_w { background-color: rgba(28, 40, 77, 0.6) !important; }\n.tp-ckbv_i:hover + .tp-ckbv_w { background-color: rgba(28, 40, 77, 0.9) !important; }\n.tp-ckbv_i:focus + .tp-ckbv_w { background-color: rgba(28, 40, 77, 0.9) !important; }\n.tp-ckbv_i:active + .tp-ckbv_w { background-color: #343473 !important; }\n.tp-ckbv_i:checked + .tp-ckbv_w svg path { stroke: #d94c87 !important; }\n\n/* Dimmable pane — slightly translucent when idle, opaque on hover or when pinned.\n   Hover-promotion is gated on devices that actually have a pointer (desktop),\n   so on touch devices the pin toggle is the only way to flip opacity. */\n.tp-flatland-dimmable { opacity: 0.8; transition: opacity 750ms ease; }\n.tp-flatland-dimmable.tp-flatland-pinned { opacity: 1; }\n@media (hover: hover) {\n  .tp-flatland-dimmable:hover { opacity: 1; }\n}\n\n/* Pin in the pane header (left side, mirrors the collapse caret on the right) */\n.tp-flatland-pin {\n  position: absolute;\n  left: var(--cnt-hp, 4px);\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  width: var(--cnt-usz, 20px);\n  height: var(--cnt-usz, 20px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(240, 237, 216, 0.45);\n  cursor: pointer;\n  border-radius: 2px;\n  transition: color 150ms, background-color 150ms;\n}\n.tp-flatland-pin:hover { color: #d94c87; background: transparent; }\n.tp-flatland-pin svg { display: block; }\n.tp-flatland-pin svg circle { fill: none; stroke: currentColor; stroke-width: 1.6; }\n.tp-flatland-pinned .tp-flatland-pin svg circle { fill: currentColor; }\n\n/*\n * Three-mode cycle toggle in the header (replaces Tweakpane's built-in\n * fold caret). We hide the native caret via the .tp-rotv_m marker\n * class and render our own button that cycles full - minimal -\n * collapsed - full. The data-mode attribute drives icon styling.\n */\n.tp-rotv_m { display: none !important; }\n.tp-flatland-mode {\n  position: absolute;\n  right: var(--cnt-hp, 4px);\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  min-width: var(--cnt-usz, 20px);\n  height: var(--cnt-usz, 20px);\n  padding: 0 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Match the original tweakpane fold caret and folder-header glyphs —\n   * the muted foreground token pane headers use throughout. */\n  color: var(--tp-label-foreground-color);\n  cursor: pointer;\n  font-size: 11px;\n  line-height: 1;\n  user-select: none;\n}\n/*\n * Glyph exactly replicates tweakpane's native fold marker — a 6×6\n * square with a horizontal linear-gradient that draws two vertical\n * stripes (screw-head look). Rotating gives the three states:\n *   full     → 0°   (vertical stripes, ||) — matches tweakpane's expanded\n *   minimal  → 45°  (diagonal, like a flat-head screw)\n *   collapsed → 90° (horizontal stripes, =) — matches tweakpane's collapsed\n */\n.tp-flatland-mode-glyph {\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 2px;\n  background: linear-gradient(\n    to left,\n    var(--cnt-fg, currentColor),\n    var(--cnt-fg, currentColor) 2px,\n    transparent 2px,\n    transparent 4px,\n    var(--cnt-fg, currentColor) 4px\n  );\n  opacity: 0.5;\n  /* 0.2s ease-in-out — the exact transition tweakpane applies to its\n   * own fold marker. */\n  transition: transform 0.2s ease-in-out;\n}\n.tp-flatland-mode[data-mode=\"full\"] .tp-flatland-mode-glyph { transform: rotate(0deg); }\n.tp-flatland-mode[data-mode=\"minimal\"] .tp-flatland-mode-glyph { transform: rotate(45deg); }\n.tp-flatland-mode[data-mode=\"collapsed\"] .tp-flatland-mode-glyph { transform: rotate(90deg); }\n\n/*\n * Minimal mode: keep only blades tagged with .tp-flatland-minimal-keep\n * (stats graph + stats row). Non-keep blades animate max-height to 0\n * and fade out so the whole pane visibly shrinks, matching tweakpane\n * native fold feel. Values and bindings stay intact — DOM is just\n * clipped.\n *\n * max-height uses a generous ceiling instead of a measured value so we\n * can stay declarative; the transition duration matches the native\n * pane fold for continuity.\n */\n/*\n * Animation timings + easings mirror tweakpane's own fold exactly:\n *   .tp-rotv_c / .tp-fldv_c use\n *     height .2s ease-in-out, opacity .2s linear, padding .2s ease-in-out\n *   and on expand, opacity has a 0.2s delay so height finishes first\n *   then opacity fades in. The collapse direction has no delay — both\n *   animate together.\n *\n * We use max-height in place of height because content height isn't\n * known at author time; with a generous ceiling the visual is\n * indistinguishable from native height tweens.\n */\n.tp-rotv_c > *:not(.tp-flatland-minimal-keep) {\n  max-height: 1200px;\n  opacity: 1;\n  overflow: hidden;\n  transition:\n    max-height 0.2s ease-in-out,\n    opacity 0.2s linear 0.2s,\n    margin 0.2s ease-in-out,\n    padding 0.2s ease-in-out;\n}\n.tp-flatland-minimal .tp-rotv_c > *:not(.tp-flatland-minimal-keep) {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  pointer-events: none;\n  /* On collapse: no delay on opacity — both animate together,\n   * matching tweakpane's non-expanded transition shape. */\n  transition:\n    max-height 0.2s ease-in-out,\n    opacity 0.2s linear,\n    margin 0.2s ease-in-out,\n    padding 0.2s ease-in-out;\n}\n`\n\nexport function applyTheme(\n  element: HTMLElement,\n  theme: Record<string, string> = FLATLAND_THEME,\n): void {\n  for (const [key, value] of Object.entries(theme)) {\n    element.style.setProperty(key, value)\n  }\n\n  // Inject accent styles once\n  if (!element.querySelector('style[data-flatland]')) {\n    const style = document.createElement('style')\n    style.setAttribute('data-flatland', '')\n    style.textContent = ACCENT_CSS\n    element.appendChild(style)\n  }\n}\n"],"mappings":"AAMO,MAAM,iBAAyC;AAAA;AAAA,EAEpD,8BAA8B;AAAA;AAAA,EAC9B,mCAAmC;AAAA;AAAA,EACnC,+BAA+B;AAAA;AAAA,EAC/B,iCAAiC;AAAA;AAAA;AAAA,EAGjC,mCAAmC;AAAA;AAAA,EACnC,gCAAgC;AAAA;AAAA,EAChC,+BAA+B;AAAA;AAAA,EAC/B,+BAA+B;AAAA;AAAA,EAC/B,iCAAiC;AAAA;AAAA;AAAA,EAGjC,gCAAgC;AAAA;AAAA;AAAA,EAGhC,gCAAgC;AAAA;AAAA;AAAA,EAGhC,yBAAyB;AAC3B;AAGA,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8LZ,SAAS,WACd,SACA,QAAgC,gBAC1B;AACN,aAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,YAAQ,MAAM,YAAY,KAAK,KAAK;AAAA,EACtC;AAGA,MAAI,CAAC,QAAQ,cAAc,sBAAsB,GAAG;AAClD,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,aAAa,iBAAiB,EAAE;AACtC,UAAM,cAAc;AACpB,YAAQ,YAAY,KAAK;AAAA,EAC3B;AACF;","names":[]}
+{"version":3,"file":"theme.js","names":[],"sources":["../src/theme.ts"],"sourcesContent":["/**\n * Flatland theme — based on the Jehkoba32 retro palette.\n *\n * Uses project dark/neutral colors for backgrounds, retro-white/grey for text,\n * and accent color only on control thumbs and slider grooves.\n */\nexport const FLATLAND_THEME: Record<string, string> = {\n  // Backgrounds — retro darks\n  '--tp-base-background-color': '#00021c', // retro-midnight\n  '--tp-container-background-color': 'rgba(28, 40, 77, 0.4)', // retro-deep-purple @ 40%\n  '--tp-input-background-color': 'rgba(0, 2, 28, 0.6)', // retro-black @ 60%\n  '--tp-monitor-background-color': 'rgba(0, 2, 28, 0.4)', // retro-black @ 40%\n\n  // Text — retro whites and greys\n  '--tp-container-foreground-color': '#f0edd8', // retro-white\n  '--tp-button-foreground-color': '#f0edd8', // retro-white\n  '--tp-input-foreground-color': '#c8c5b4', // muted retro-white\n  '--tp-label-foreground-color': 'rgba(240, 237, 216, 0.55)', // retro-white @ 55%\n  '--tp-monitor-foreground-color': '#c8c5b4', // muted retro-white\n\n  // Buttons — retro-deep-purple\n  '--tp-button-background-color': '#1c284d', // retro-deep-purple\n\n  // Accent — slider grooves & separators\n  '--tp-groove-foreground-color': 'rgba(240, 237, 216, 0.12)', // muted separator/groove\n\n  // Typography\n  '--tp-base-font-family': 'monospace',\n}\n\n/** Accent CSS — colorizes slider thumb and number spinner drag handle */\nconst ACCENT_CSS = `\n/* Slider thumb */\n.tp-sldv_k::after { background-color: #d94c87 !important; }\n.tp-sldv_t:hover .tp-sldv_k::after { background-color: #e0609a !important; }\n.tp-sldv_t:active .tp-sldv_k::after { background-color: #a6216e !important; }\n/* Slider track (filled portion) */\n.tp-sldv_k::before { background-color: rgba(240, 237, 216, 0.25) !important; }\n/* Number spinner drag handle */\n.tp-txtv_k::before { background-color: #d94c87 !important; }\n/* Select/dropdown */\n.tp-lstv_s { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }\n.tp-lstv_s:hover { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-lstv_s:focus { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-lstv_s:active { background-color: #343473 !important; color: #d94c87 !important; }\n.tp-lstv_m { color: rgba(240, 237, 216, 0.5) !important; }\n/* Buttons */\n.tp-btnv_b { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }\n.tp-btnv_b:hover { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-btnv_b:active { background-color: #343473 !important; color: #d94c87 !important; }\n/* Radio grid buttons */\n.tp-radv_b { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }\n.tp-radv_i:hover + .tp-radv_b { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }\n.tp-radv_i:checked + .tp-radv_b { background-color: #1c284d !important; color: #d94c87 !important; }\n.tp-radv_i:active + .tp-radv_b { background-color: #343473 !important; color: #f0edd8 !important; }\n/* Checkbox — default background blends with the container, so bump to\n   the same surface as the select/button controls for a visible hit\n   target, and accent the check stroke on :checked. Markup:\n   <input.tp-ckbv_i> + <div.tp-ckbv_w><svg><path/></svg></div>\n\n   Tweakpane's hidden input ships at browser-default size (~13×13) at\n   top-left of the label, relying on <label>→<input> click forwarding\n   to toggle from clicks on the visible box. That forwarding is flaky\n   under some pointer-events + z-index combinations (reports: clicks\n   sometimes register, sometimes don't). Stretching the input to cover\n   the entire visible box puts the hit target directly on the pointer,\n   no label forwarding required. */\n.tp-ckbv_i {\n  /* Absolute positioning + zero opacity is Tweakpane's default; we\n     just add explicit size + cursor so the click area matches the\n     visible affordance exactly. */\n  width: var(--cnt-usz) !important;\n  height: var(--cnt-usz) !important;\n  margin: 0 !important;\n  cursor: pointer !important;\n}\n.tp-ckbv_w { background-color: rgba(28, 40, 77, 0.6) !important; }\n.tp-ckbv_i:hover + .tp-ckbv_w { background-color: rgba(28, 40, 77, 0.9) !important; }\n.tp-ckbv_i:focus + .tp-ckbv_w { background-color: rgba(28, 40, 77, 0.9) !important; }\n.tp-ckbv_i:active + .tp-ckbv_w { background-color: #343473 !important; }\n.tp-ckbv_i:checked + .tp-ckbv_w svg path { stroke: #d94c87 !important; }\n\n/* Dimmable pane — slightly translucent when idle, opaque on hover or when pinned.\n   Hover-promotion is gated on devices that actually have a pointer (desktop),\n   so on touch devices the pin toggle is the only way to flip opacity. */\n.tp-flatland-dimmable { opacity: 0.8; transition: opacity 750ms ease; }\n.tp-flatland-dimmable.tp-flatland-pinned { opacity: 1; }\n@media (hover: hover) {\n  .tp-flatland-dimmable:hover { opacity: 1; }\n}\n\n/* Pin in the pane header (left side, mirrors the collapse caret on the right) */\n.tp-flatland-pin {\n  position: absolute;\n  left: var(--cnt-hp, 4px);\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  width: var(--cnt-usz, 20px);\n  height: var(--cnt-usz, 20px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: rgba(240, 237, 216, 0.45);\n  cursor: pointer;\n  border-radius: 2px;\n  transition: color 150ms, background-color 150ms;\n}\n.tp-flatland-pin:hover { color: #d94c87; background: transparent; }\n.tp-flatland-pin svg { display: block; }\n.tp-flatland-pin svg circle { fill: none; stroke: currentColor; stroke-width: 1.6; }\n.tp-flatland-pinned .tp-flatland-pin svg circle { fill: currentColor; }\n\n/*\n * Three-mode cycle toggle in the header (replaces Tweakpane's built-in\n * fold caret). We hide the native caret via the .tp-rotv_m marker\n * class and render our own button that cycles full - minimal -\n * collapsed - full. The data-mode attribute drives icon styling.\n */\n.tp-rotv_m { display: none !important; }\n.tp-flatland-mode {\n  position: absolute;\n  right: var(--cnt-hp, 4px);\n  top: 0;\n  bottom: 0;\n  margin: auto;\n  min-width: var(--cnt-usz, 20px);\n  height: var(--cnt-usz, 20px);\n  padding: 0 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Match the original tweakpane fold caret and folder-header glyphs —\n   * the muted foreground token pane headers use throughout. */\n  color: var(--tp-label-foreground-color);\n  cursor: pointer;\n  font-size: 11px;\n  line-height: 1;\n  user-select: none;\n}\n/*\n * Glyph exactly replicates tweakpane's native fold marker — a 6×6\n * square with a horizontal linear-gradient that draws two vertical\n * stripes (screw-head look). Rotating gives the three states:\n *   full     → 0°   (vertical stripes, ||) — matches tweakpane's expanded\n *   minimal  → 45°  (diagonal, like a flat-head screw)\n *   collapsed → 90° (horizontal stripes, =) — matches tweakpane's collapsed\n */\n.tp-flatland-mode-glyph {\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: 2px;\n  background: linear-gradient(\n    to left,\n    var(--cnt-fg, currentColor),\n    var(--cnt-fg, currentColor) 2px,\n    transparent 2px,\n    transparent 4px,\n    var(--cnt-fg, currentColor) 4px\n  );\n  opacity: 0.5;\n  /* 0.2s ease-in-out — the exact transition tweakpane applies to its\n   * own fold marker. */\n  transition: transform 0.2s ease-in-out;\n}\n.tp-flatland-mode[data-mode=\"full\"] .tp-flatland-mode-glyph { transform: rotate(0deg); }\n.tp-flatland-mode[data-mode=\"minimal\"] .tp-flatland-mode-glyph { transform: rotate(45deg); }\n.tp-flatland-mode[data-mode=\"collapsed\"] .tp-flatland-mode-glyph { transform: rotate(90deg); }\n\n/*\n * Minimal mode: keep only blades tagged with .tp-flatland-minimal-keep\n * (stats graph + stats row). Non-keep blades animate max-height to 0\n * and fade out so the whole pane visibly shrinks, matching tweakpane\n * native fold feel. Values and bindings stay intact — DOM is just\n * clipped.\n *\n * max-height uses a generous ceiling instead of a measured value so we\n * can stay declarative; the transition duration matches the native\n * pane fold for continuity.\n */\n/*\n * Animation timings + easings mirror tweakpane's own fold exactly:\n *   .tp-rotv_c / .tp-fldv_c use\n *     height .2s ease-in-out, opacity .2s linear, padding .2s ease-in-out\n *   and on expand, opacity has a 0.2s delay so height finishes first\n *   then opacity fades in. The collapse direction has no delay — both\n *   animate together.\n *\n * We use max-height in place of height because content height isn't\n * known at author time; with a generous ceiling the visual is\n * indistinguishable from native height tweens.\n */\n.tp-rotv_c > *:not(.tp-flatland-minimal-keep) {\n  max-height: 1200px;\n  opacity: 1;\n  overflow: hidden;\n  transition:\n    max-height 0.2s ease-in-out,\n    opacity 0.2s linear 0.2s,\n    margin 0.2s ease-in-out,\n    padding 0.2s ease-in-out;\n}\n.tp-flatland-minimal .tp-rotv_c > *:not(.tp-flatland-minimal-keep) {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0 !important;\n  margin-bottom: 0 !important;\n  padding-top: 0 !important;\n  padding-bottom: 0 !important;\n  pointer-events: none;\n  /* On collapse: no delay on opacity — both animate together,\n   * matching tweakpane's non-expanded transition shape. */\n  transition:\n    max-height 0.2s ease-in-out,\n    opacity 0.2s linear,\n    margin 0.2s ease-in-out,\n    padding 0.2s ease-in-out;\n}\n`\n\nexport function applyTheme(element: HTMLElement, theme: Record<string, string> = FLATLAND_THEME): void {\n  for (const [key, value] of Object.entries(theme)) {\n    element.style.setProperty(key, value)\n  }\n\n  // Inject accent styles once\n  if (!element.querySelector('style[data-flatland]')) {\n    const style = document.createElement('style')\n    style.setAttribute('data-flatland', '')\n    style.textContent = ACCENT_CSS\n    element.appendChild(style)\n  }\n}\n"],"mappings":";;;;;;;AAMA,MAAa,iBAAyC;CAEpD,8BAA8B;CAC9B,mCAAmC;CACnC,+BAA+B;CAC/B,iCAAiC;CAGjC,mCAAmC;CACnC,gCAAgC;CAChC,+BAA+B;CAC/B,+BAA+B;CAC/B,iCAAiC;CAGjC,gCAAgC;CAGhC,gCAAgC;CAGhC,yBAAyB;AAC3B;;AAGA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8LnB,SAAgB,WAAW,SAAsB,QAAgC,gBAAsB;CACrG,KAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,KAAK,GAC7C,QAAQ,MAAM,YAAY,KAAK,KAAK;CAItC,IAAI,CAAC,QAAQ,cAAc,sBAAsB,GAAG;EAClD,MAAM,QAAQ,SAAS,cAAc,OAAO;EAC5C,MAAM,aAAa,iBAAiB,EAAE;EACtC,MAAM,cAAc;EACpB,QAAQ,YAAY,KAAK;CAC3B;AACF"}

package/dist/vite-plugin.d.ts

@@ -1,9 +1,10 @@
-import { Plugin } from 'vite';
-
+import { Plugin } from "vite";
+//#region src/vite-plugin.d.ts
 interface ThreeFlatlandDevtoolsOptions {
-    /** URL path the dashboard is served under. Default: `/.devtools`. */
-    path?: string;
+  /** URL path the dashboard is served under. Default: `/.devtools`. */
+  path?: string;
 }
 declare function threeFlatlandDevtools(options?: ThreeFlatlandDevtoolsOptions): Plugin;
-
-export { type ThreeFlatlandDevtoolsOptions, threeFlatlandDevtools as default, threeFlatlandDevtools };
+//#endregion
+export { ThreeFlatlandDevtoolsOptions, threeFlatlandDevtools as default, threeFlatlandDevtools };
+//# sourceMappingURL=vite-plugin.d.ts.map

package/dist/vite-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite-plugin.d.ts","names":[],"sources":["../src/vite-plugin.ts"],"mappings":";;UAiCiB;;EAEf;;iBAoBc,sBAAsB,UAAS,+BAAoC"}

package/dist/vite-plugin.js

@@ -2,87 +2,96 @@ import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
+//#region src/vite-plugin.ts
+/**
+* Vite plugin that serves the standalone devtools dashboard alongside the
+* user's app. Mounts a dev-only middleware at a configurable path (default
+* `/.devtools`).
+*
+* The dashboard source lives inside this package
+* (`packages/devtools/src/dashboard/`), not inside the consumer's project.
+* The plugin:
+*   1. Whitelists the dashboard directory via `server.fs.allow` so Vite
+*      is willing to read its files across the workspace boundary.
+*   2. Serves `index.html` at the mount path, rewritten so the entry
+*      script loads via `/@fs/<abs>` — Vite then transforms it with full
+*      HMR.
+*   3. Aliases the vendored Preact files so `import from 'preact'`
+*      resolves locally — no runtime dep on Preact leaks into the
+*      consumer's `node_modules`.
+*
+* Access the dashboard at the Vite dev server's origin directly, e.g.
+* `http://localhost:5174/.devtools`. If the host project sits behind a
+* microfrontend proxy, point the browser at the Vite port — the
+* dashboard's transitive requests (`/@fs/`, `/@vite/client`, pre-bundled
+* `node_modules/.vite/`) are not namespaced and expect to land on the
+* same origin that served the HTML.
+*
+* Dev-only; the plugin is inert in production builds.
+*/
 const DEFAULT_PATH = "/.devtools";
 function resolveDashboardRoot() {
-  const here = dirname(fileURLToPath(import.meta.url));
-  const siblingSrc = resolve(here, "../src/dashboard");
-  if (existsSync(siblingSrc)) return siblingSrc;
-  return resolve(here, "dashboard");
+	const here = dirname(fileURLToPath(import.meta.url));
+	const siblingSrc = resolve(here, "../src/dashboard");
+	if (existsSync(siblingSrc)) return siblingSrc;
+	return resolve(here, "dashboard");
 }
 function threeFlatlandDevtools(options = {}) {
-  const mountPath = options.path ?? DEFAULT_PATH;
-  const dashboardRoot = resolveDashboardRoot();
-  const vendorRoot = resolve(dashboardRoot, "vendor");
-  return {
-    name: "three-flatland-devtools",
-    apply: "serve",
-    config() {
-      return {
-        resolve: {
-          // Order matters — Vite/rollup-plugin-alias matches left-to-right
-          // by string prefix, so the broad `preact` entry must come last
-          // or it swallows `preact/jsx-*` and `preact/hooks`.
-          alias: [
-            {
-              find: "preact/jsx-runtime",
-              replacement: resolve(vendorRoot, "jsx-runtime.js")
-            },
-            {
-              // esbuild dev mode emits `import { jsxDEV } from 'preact/jsx-dev-runtime'`;
-              // the same shim exports `jsxDEV`.
-              find: "preact/jsx-dev-runtime",
-              replacement: resolve(vendorRoot, "jsx-runtime.js")
-            },
-            {
-              find: "preact/hooks",
-              replacement: resolve(vendorRoot, "hooks.module.js")
-            },
-            {
-              find: /^preact$/,
-              replacement: resolve(vendorRoot, "preact.module.js")
-            }
-          ]
-        }
-      };
-    },
-    configResolved(config) {
-      if (!config.server.fs.allow.includes(dashboardRoot)) {
-        config.server.fs.allow.push(dashboardRoot);
-      }
-    },
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        void (async () => {
-          if (req.url === void 0) return next();
-          const url = req.url.split("?")[0] ?? "";
-          if (url !== mountPath && url !== `${mountPath}/`) return next();
-          try {
-            const indexPath = resolve(dashboardRoot, "index.html");
-            let html = await readFile(indexPath, "utf-8");
-            const entryAbs = resolve(dashboardRoot, "index.tsx");
-            html = html.replace("./index.tsx", `/@fs${entryAbs}`);
-            html = await server.transformIndexHtml(req.url, html, req.originalUrl);
-            res.statusCode = 200;
-            res.setHeader("Content-Type", "text/html; charset=utf-8");
-            res.end(html);
-          } catch (err) {
-            next(err);
-          }
-        })();
-      });
-      const logger = server.config.logger;
-      const port = server.config.server.port ?? 5173;
-      logger.info(
-        `
-  \x1B[32m\u279C\x1B[0m  three-flatland devtools: \x1B[36mhttp://localhost:${port}${mountPath}\x1B[0m
-`
-      );
-    }
-  };
+	const mountPath = options.path ?? DEFAULT_PATH;
+	const dashboardRoot = resolveDashboardRoot();
+	const vendorRoot = resolve(dashboardRoot, "vendor");
+	return {
+		name: "three-flatland-devtools",
+		apply: "serve",
+		config() {
+			return { resolve: { alias: [
+				{
+					find: "preact/jsx-runtime",
+					replacement: resolve(vendorRoot, "jsx-runtime.js")
+				},
+				{
+					find: "preact/jsx-dev-runtime",
+					replacement: resolve(vendorRoot, "jsx-runtime.js")
+				},
+				{
+					find: "preact/hooks",
+					replacement: resolve(vendorRoot, "hooks.module.js")
+				},
+				{
+					find: /^preact$/,
+					replacement: resolve(vendorRoot, "preact.module.js")
+				}
+			] } };
+		},
+		configResolved(config) {
+			if (!config.server.fs.allow.includes(dashboardRoot)) config.server.fs.allow.push(dashboardRoot);
+		},
+		configureServer(server) {
+			server.middlewares.use((req, res, next) => {
+				(async () => {
+					if (req.url === void 0) return next();
+					const url = req.url.split("?")[0] ?? "";
+					if (url !== mountPath && url !== `${mountPath}/`) return next();
+					try {
+						let html = await readFile(resolve(dashboardRoot, "index.html"), "utf-8");
+						const entryAbs = resolve(dashboardRoot, "index.tsx");
+						html = html.replace("./index.tsx", `/@fs${entryAbs}`);
+						html = await server.transformIndexHtml(req.url, html, req.originalUrl);
+						res.statusCode = 200;
+						res.setHeader("Content-Type", "text/html; charset=utf-8");
+						res.end(html);
+					} catch (err) {
+						next(err);
+					}
+				})();
+			});
+			const logger = server.config.logger;
+			const port = server.config.server.port ?? 5173;
+			logger.info(`\n  \u001b[32m\u279c\u001b[0m  three-flatland devtools: \u001b[36mhttp://localhost:${port}${mountPath}\u001b[0m\n`);
+		}
+	};
 }
-var vite_plugin_default = threeFlatlandDevtools;
-export {
-  vite_plugin_default as default,
-  threeFlatlandDevtools
-};
+//#endregion
+export { threeFlatlandDevtools as default, threeFlatlandDevtools };
+
 //# sourceMappingURL=vite-plugin.js.map

package/dist/vite-plugin.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite-plugin.ts"],"sourcesContent":["/**\n * Vite plugin that serves the standalone devtools dashboard alongside the\n * user's app. Mounts a dev-only middleware at a configurable path (default\n * `/.devtools`).\n *\n * The dashboard source lives inside this package\n * (`packages/devtools/src/dashboard/`), not inside the consumer's project.\n * The plugin:\n *   1. Whitelists the dashboard directory via `server.fs.allow` so Vite\n *      is willing to read its files across the workspace boundary.\n *   2. Serves `index.html` at the mount path, rewritten so the entry\n *      script loads via `/@fs/<abs>` — Vite then transforms it with full\n *      HMR.\n *   3. Aliases the vendored Preact files so `import from 'preact'`\n *      resolves locally — no runtime dep on Preact leaks into the\n *      consumer's `node_modules`.\n *\n * Access the dashboard at the Vite dev server's origin directly, e.g.\n * `http://localhost:5174/.devtools`. If the host project sits behind a\n * microfrontend proxy, point the browser at the Vite port — the\n * dashboard's transitive requests (`/@fs/`, `/@vite/client`, pre-bundled\n * `node_modules/.vite/`) are not namespaced and expect to land on the\n * same origin that served the HTML.\n *\n * Dev-only; the plugin is inert in production builds.\n */\nimport { existsSync } from 'node:fs'\nimport { readFile } from 'node:fs/promises'\nimport { fileURLToPath } from 'node:url'\nimport { dirname, resolve } from 'node:path'\n\nimport type { Plugin, ViteDevServer } from 'vite'\n\nexport interface ThreeFlatlandDevtoolsOptions {\n  /** URL path the dashboard is served under. Default: `/.devtools`. */\n  path?: string\n}\n\nconst DEFAULT_PATH = '/.devtools'\n\nfunction resolveDashboardRoot(): string {\n  // Three possible layouts for this file at runtime:\n  //   1. `packages/devtools/src/vite-plugin.ts`      (source condition)\n  //   2. `packages/devtools/dist/vite-plugin.js`     (workspace, Node import condition)\n  //   3. `node_modules/@three-flatland/devtools/dist/vite-plugin.js` (published)\n  //\n  // For (2) — the dev workflow where Node loads the built plugin but we\n  // want HMR over the unbuilt sources — prefer the sibling `../src/dashboard/`\n  // if it exists. Otherwise resolve `./dashboard` relative to this file.\n  const here = dirname(fileURLToPath(import.meta.url))\n  const siblingSrc = resolve(here, '../src/dashboard')\n  if (existsSync(siblingSrc)) return siblingSrc\n  return resolve(here, 'dashboard')\n}\n\nexport function threeFlatlandDevtools(\n  options: ThreeFlatlandDevtoolsOptions = {},\n): Plugin {\n  const mountPath = options.path ?? DEFAULT_PATH\n  const dashboardRoot = resolveDashboardRoot()\n  const vendorRoot = resolve(dashboardRoot, 'vendor')\n\n  return {\n    name: 'three-flatland-devtools',\n    apply: 'serve',\n\n    config() {\n      return {\n        resolve: {\n          // Order matters — Vite/rollup-plugin-alias matches left-to-right\n          // by string prefix, so the broad `preact` entry must come last\n          // or it swallows `preact/jsx-*` and `preact/hooks`.\n          alias: [\n            {\n              find: 'preact/jsx-runtime',\n              replacement: resolve(vendorRoot, 'jsx-runtime.js'),\n            },\n            {\n              // esbuild dev mode emits `import { jsxDEV } from 'preact/jsx-dev-runtime'`;\n              // the same shim exports `jsxDEV`.\n              find: 'preact/jsx-dev-runtime',\n              replacement: resolve(vendorRoot, 'jsx-runtime.js'),\n            },\n            {\n              find: 'preact/hooks',\n              replacement: resolve(vendorRoot, 'hooks.module.js'),\n            },\n            {\n              find: /^preact$/,\n              replacement: resolve(vendorRoot, 'preact.module.js'),\n            },\n          ],\n        },\n      }\n    },\n\n    configResolved(config) {\n      // Append, don't replace. Returning an array from `config` would\n      // overwrite Vite's default allow-list (project + workspace root),\n      // locking the host app out of its own files.\n      if (!config.server.fs.allow.includes(dashboardRoot)) {\n        config.server.fs.allow.push(dashboardRoot)\n      }\n    },\n\n    configureServer(server: ViteDevServer) {\n      server.middlewares.use((req, res, next) => {\n        void (async () => {\n          if (req.url === undefined) return next()\n          const url = req.url.split('?')[0] ?? ''\n          if (url !== mountPath && url !== `${mountPath}/`) return next()\n\n          try {\n            const indexPath = resolve(dashboardRoot, 'index.html')\n            let html = await readFile(indexPath, 'utf-8')\n            const entryAbs = resolve(dashboardRoot, 'index.tsx')\n            html = html.replace('./index.tsx', `/@fs${entryAbs}`)\n            html = await server.transformIndexHtml(req.url, html, req.originalUrl)\n            res.statusCode = 200\n            res.setHeader('Content-Type', 'text/html; charset=utf-8')\n            res.end(html)\n          } catch (err) {\n            next(err)\n          }\n        })()\n      })\n\n      const logger = server.config.logger\n      const port = server.config.server.port ?? 5173\n      logger.info(\n        `\\n  \\u001b[32m\\u279c\\u001b[0m  three-flatland devtools: \\u001b[36mhttp://localhost:${port}${mountPath}\\u001b[0m\\n`,\n      )\n    },\n  }\n}\n\nexport default threeFlatlandDevtools\n"],"mappings":"AA0BA,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,SAAS,eAAe;AASjC,MAAM,eAAe;AAErB,SAAS,uBAA+B;AAStC,QAAM,OAAO,QAAQ,cAAc,YAAY,GAAG,CAAC;AACnD,QAAM,aAAa,QAAQ,MAAM,kBAAkB;AACnD,MAAI,WAAW,UAAU,EAAG,QAAO;AACnC,SAAO,QAAQ,MAAM,WAAW;AAClC;AAEO,SAAS,sBACd,UAAwC,CAAC,GACjC;AACR,QAAM,YAAY,QAAQ,QAAQ;AAClC,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,aAAa,QAAQ,eAAe,QAAQ;AAElD,SAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IAEP,SAAS;AACP,aAAO;AAAA,QACL,SAAS;AAAA;AAAA;AAAA;AAAA,UAIP,OAAO;AAAA,YACL;AAAA,cACE,MAAM;AAAA,cACN,aAAa,QAAQ,YAAY,gBAAgB;AAAA,YACnD;AAAA,YACA;AAAA;AAAA;AAAA,cAGE,MAAM;AAAA,cACN,aAAa,QAAQ,YAAY,gBAAgB;AAAA,YACnD;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,aAAa,QAAQ,YAAY,iBAAiB;AAAA,YACpD;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,aAAa,QAAQ,YAAY,kBAAkB;AAAA,YACrD;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEA,eAAe,QAAQ;AAIrB,UAAI,CAAC,OAAO,OAAO,GAAG,MAAM,SAAS,aAAa,GAAG;AACnD,eAAO,OAAO,GAAG,MAAM,KAAK,aAAa;AAAA,MAC3C;AAAA,IACF;AAAA,IAEA,gBAAgB,QAAuB;AACrC,aAAO,YAAY,IAAI,CAAC,KAAK,KAAK,SAAS;AACzC,cAAM,YAAY;AAChB,cAAI,IAAI,QAAQ,OAAW,QAAO,KAAK;AACvC,gBAAM,MAAM,IAAI,IAAI,MAAM,GAAG,EAAE,CAAC,KAAK;AACrC,cAAI,QAAQ,aAAa,QAAQ,GAAG,SAAS,IAAK,QAAO,KAAK;AAE9D,cAAI;AACF,kBAAM,YAAY,QAAQ,eAAe,YAAY;AACrD,gBAAI,OAAO,MAAM,SAAS,WAAW,OAAO;AAC5C,kBAAM,WAAW,QAAQ,eAAe,WAAW;AACnD,mBAAO,KAAK,QAAQ,eAAe,OAAO,QAAQ,EAAE;AACpD,mBAAO,MAAM,OAAO,mBAAmB,IAAI,KAAK,MAAM,IAAI,WAAW;AACrE,gBAAI,aAAa;AACjB,gBAAI,UAAU,gBAAgB,0BAA0B;AACxD,gBAAI,IAAI,IAAI;AAAA,UACd,SAAS,KAAK;AACZ,iBAAK,GAAG;AAAA,UACV;AAAA,QACF,GAAG;AAAA,MACL,CAAC;AAED,YAAM,SAAS,OAAO,OAAO;AAC7B,YAAM,OAAO,OAAO,OAAO,OAAO,QAAQ;AAC1C,aAAO;AAAA,QACL;AAAA,6EAAsF,IAAI,GAAG,SAAS;AAAA;AAAA,MACxG;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"file":"vite-plugin.js","names":[],"sources":["../src/vite-plugin.ts"],"sourcesContent":["/**\n * Vite plugin that serves the standalone devtools dashboard alongside the\n * user's app. Mounts a dev-only middleware at a configurable path (default\n * `/.devtools`).\n *\n * The dashboard source lives inside this package\n * (`packages/devtools/src/dashboard/`), not inside the consumer's project.\n * The plugin:\n *   1. Whitelists the dashboard directory via `server.fs.allow` so Vite\n *      is willing to read its files across the workspace boundary.\n *   2. Serves `index.html` at the mount path, rewritten so the entry\n *      script loads via `/@fs/<abs>` — Vite then transforms it with full\n *      HMR.\n *   3. Aliases the vendored Preact files so `import from 'preact'`\n *      resolves locally — no runtime dep on Preact leaks into the\n *      consumer's `node_modules`.\n *\n * Access the dashboard at the Vite dev server's origin directly, e.g.\n * `http://localhost:5174/.devtools`. If the host project sits behind a\n * microfrontend proxy, point the browser at the Vite port — the\n * dashboard's transitive requests (`/@fs/`, `/@vite/client`, pre-bundled\n * `node_modules/.vite/`) are not namespaced and expect to land on the\n * same origin that served the HTML.\n *\n * Dev-only; the plugin is inert in production builds.\n */\nimport { existsSync } from 'node:fs'\nimport { readFile } from 'node:fs/promises'\nimport { fileURLToPath } from 'node:url'\nimport { dirname, resolve } from 'node:path'\n\nimport type { Plugin, ViteDevServer } from 'vite'\n\nexport interface ThreeFlatlandDevtoolsOptions {\n  /** URL path the dashboard is served under. Default: `/.devtools`. */\n  path?: string\n}\n\nconst DEFAULT_PATH = '/.devtools'\n\nfunction resolveDashboardRoot(): string {\n  // Three possible layouts for this file at runtime:\n  //   1. `packages/devtools/src/vite-plugin.ts`      (source condition)\n  //   2. `packages/devtools/dist/vite-plugin.js`     (workspace, Node import condition)\n  //   3. `node_modules/@three-flatland/devtools/dist/vite-plugin.js` (published)\n  //\n  // For (2) — the dev workflow where Node loads the built plugin but we\n  // want HMR over the unbuilt sources — prefer the sibling `../src/dashboard/`\n  // if it exists. Otherwise resolve `./dashboard` relative to this file.\n  const here = dirname(fileURLToPath(import.meta.url))\n  const siblingSrc = resolve(here, '../src/dashboard')\n  if (existsSync(siblingSrc)) return siblingSrc\n  return resolve(here, 'dashboard')\n}\n\nexport function threeFlatlandDevtools(options: ThreeFlatlandDevtoolsOptions = {}): Plugin {\n  const mountPath = options.path ?? DEFAULT_PATH\n  const dashboardRoot = resolveDashboardRoot()\n  const vendorRoot = resolve(dashboardRoot, 'vendor')\n\n  return {\n    name: 'three-flatland-devtools',\n    apply: 'serve',\n\n    config() {\n      return {\n        resolve: {\n          // Order matters — Vite/rollup-plugin-alias matches left-to-right\n          // by string prefix, so the broad `preact` entry must come last\n          // or it swallows `preact/jsx-*` and `preact/hooks`.\n          alias: [\n            {\n              find: 'preact/jsx-runtime',\n              replacement: resolve(vendorRoot, 'jsx-runtime.js'),\n            },\n            {\n              // esbuild dev mode emits `import { jsxDEV } from 'preact/jsx-dev-runtime'`;\n              // the same shim exports `jsxDEV`.\n              find: 'preact/jsx-dev-runtime',\n              replacement: resolve(vendorRoot, 'jsx-runtime.js'),\n            },\n            {\n              find: 'preact/hooks',\n              replacement: resolve(vendorRoot, 'hooks.module.js'),\n            },\n            {\n              find: /^preact$/,\n              replacement: resolve(vendorRoot, 'preact.module.js'),\n            },\n          ],\n        },\n      }\n    },\n\n    configResolved(config) {\n      // Append, don't replace. Returning an array from `config` would\n      // overwrite Vite's default allow-list (project + workspace root),\n      // locking the host app out of its own files.\n      if (!config.server.fs.allow.includes(dashboardRoot)) {\n        config.server.fs.allow.push(dashboardRoot)\n      }\n    },\n\n    configureServer(server: ViteDevServer) {\n      server.middlewares.use((req, res, next) => {\n        void (async () => {\n          if (req.url === undefined) return next()\n          const url = req.url.split('?')[0] ?? ''\n          if (url !== mountPath && url !== `${mountPath}/`) return next()\n\n          try {\n            const indexPath = resolve(dashboardRoot, 'index.html')\n            let html = await readFile(indexPath, 'utf-8')\n            const entryAbs = resolve(dashboardRoot, 'index.tsx')\n            html = html.replace('./index.tsx', `/@fs${entryAbs}`)\n            html = await server.transformIndexHtml(req.url, html, req.originalUrl)\n            res.statusCode = 200\n            res.setHeader('Content-Type', 'text/html; charset=utf-8')\n            res.end(html)\n          } catch (err) {\n            next(err)\n          }\n        })()\n      })\n\n      const logger = server.config.logger\n      const port = server.config.server.port ?? 5173\n      logger.info(\n        `\\n  \\u001b[32m\\u279c\\u001b[0m  three-flatland devtools: \\u001b[36mhttp://localhost:${port}${mountPath}\\u001b[0m\\n`\n      )\n    },\n  }\n}\n\nexport default threeFlatlandDevtools\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,MAAM,eAAe;AAErB,SAAS,uBAA+B;CAStC,MAAM,OAAO,QAAQ,cAAc,OAAO,KAAK,GAAG,CAAC;CACnD,MAAM,aAAa,QAAQ,MAAM,kBAAkB;CACnD,IAAI,WAAW,UAAU,GAAG,OAAO;CACnC,OAAO,QAAQ,MAAM,WAAW;AAClC;AAEA,SAAgB,sBAAsB,UAAwC,CAAC,GAAW;CACxF,MAAM,YAAY,QAAQ,QAAQ;CAClC,MAAM,gBAAgB,qBAAqB;CAC3C,MAAM,aAAa,QAAQ,eAAe,QAAQ;CAElD,OAAO;EACL,MAAM;EACN,OAAO;EAEP,SAAS;GACP,OAAO,EACL,SAAS,EAIP,OAAO;IACL;KACE,MAAM;KACN,aAAa,QAAQ,YAAY,gBAAgB;IACnD;IACA;KAGE,MAAM;KACN,aAAa,QAAQ,YAAY,gBAAgB;IACnD;IACA;KACE,MAAM;KACN,aAAa,QAAQ,YAAY,iBAAiB;IACpD;IACA;KACE,MAAM;KACN,aAAa,QAAQ,YAAY,kBAAkB;IACrD;GACF,EACF,EACF;EACF;EAEA,eAAe,QAAQ;GAIrB,IAAI,CAAC,OAAO,OAAO,GAAG,MAAM,SAAS,aAAa,GAChD,OAAO,OAAO,GAAG,MAAM,KAAK,aAAa;EAE7C;EAEA,gBAAgB,QAAuB;GACrC,OAAO,YAAY,KAAK,KAAK,KAAK,SAAS;IACzC,CAAM,YAAY;KAChB,IAAI,IAAI,QAAQ,KAAA,GAAW,OAAO,KAAK;KACvC,MAAM,MAAM,IAAI,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM;KACrC,IAAI,QAAQ,aAAa,QAAQ,GAAG,UAAU,IAAI,OAAO,KAAK;KAE9D,IAAI;MAEF,IAAI,OAAO,MAAM,SADC,QAAQ,eAAe,YACP,GAAG,OAAO;MAC5C,MAAM,WAAW,QAAQ,eAAe,WAAW;MACnD,OAAO,KAAK,QAAQ,eAAe,OAAO,UAAU;MACpD,OAAO,MAAM,OAAO,mBAAmB,IAAI,KAAK,MAAM,IAAI,WAAW;MACrE,IAAI,aAAa;MACjB,IAAI,UAAU,gBAAgB,0BAA0B;MACxD,IAAI,IAAI,IAAI;KACd,SAAS,KAAK;MACZ,KAAK,GAAG;KACV;IACF,EAAA,CAAG;GACL,CAAC;GAED,MAAM,SAAS,OAAO,OAAO;GAC7B,MAAM,OAAO,OAAO,OAAO,OAAO,QAAQ;GAC1C,OAAO,KACL,sFAAsF,OAAO,UAAU,YACzG;EACF;CACF;AACF"}

package/package.json

@@ -1,69 +1,70 @@
 {
   "name": "@three-flatland/devtools",
-  "version": "0.1.0-alpha.3",
+  "version": "1.0.0-alpha.6",
   "description": "Dev-time introspection toolkit for three-flatland — Tweakpane v4 UI plugin, stats monitor, and buffer inspection",
   "type": "module",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "import": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
       }
     },
     "./react": {
-      "source": "./src/react.ts",
       "import": {
         "types": "./dist/react.d.ts",
         "default": "./dist/react.js"
-      },
-      "require": {
-        "types": "./dist/react.d.cts",
-        "default": "./dist/react.cjs"
       }
     },
     "./react/*": {
-      "source": "./src/react/*.ts",
       "import": {
         "types": "./dist/react/*.d.ts",
         "default": "./dist/react/*.js"
-      },
-      "require": {
-        "types": "./dist/react/*.d.cts",
-        "default": "./dist/react/*.cjs"
       }
     },
     "./vite": {
-      "source": "./src/vite-plugin.ts",
       "import": {
         "types": "./dist/vite-plugin.d.ts",
         "default": "./dist/vite-plugin.js"
-      },
-      "require": {
-        "types": "./dist/vite-plugin.d.cts",
-        "default": "./dist/vite-plugin.cjs"
       }
     }
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "sideEffects": false,
+  "nx": {
+    "tags": [
+      "scope:consumer"
+    ],
+    "targets": {
+      "test": {
+        "executor": "nx:run-commands",
+        "options": {
+          "command": "vitest run",
+          "cwd": "{projectRoot}"
+        }
+      },
+      "lint": {
+        "executor": "nx:run-commands",
+        "options": {
+          "command": "oxlint --type-aware .",
+          "cwd": "{projectRoot}"
+        }
+      }
+    }
+  },
   "peerDependencies": {
     "@react-three/fiber": "^10.0.0-alpha.2",
     "@tweakpane/plugin-essentials": "^0.2.1",
     "react": "^19.2.0",
     "three": "^0.183.0",
-    "three-flatland": "^0.1.0-alpha.4",
+    "three-flatland": "^0.1.0-alpha.9",
     "tweakpane": "^4.0.5",
-    "vite": "^5.0.0 || ^6.0.0"
+    "vite": "^7.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -90,14 +91,14 @@
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@types/three": "^0.183.1",
-    "happy-dom": "^15.11.7",
+    "happy-dom": "^20.8.9",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "three": "^0.183.1",
     "tweakpane": "^4.0.5",
     "typescript": "^5.7.3",
-    "vite": "^6.4.1",
-    "three-flatland": "0.1.0-alpha.6"
+    "vite": "^7.3.6",
+    "three-flatland": "0.1.0-alpha.9"
   },
   "keywords": [
     "three.js",
@@ -112,10 +113,13 @@
     "url": "https://github.com/thejustinwalsh/three-flatland.git",
     "directory": "packages/devtools"
   },
+  "bin": {
+    "flatland-devtools-relay": "./dist/relay.js"
+  },
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown",
     "build:bundle": "vite build --config vite.config.bundle.ts",
-    "dev": "tsup --watch",
+    "dev": "tsdown --watch",
     "test": "vitest run",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit && tsc --noEmit -p src/dashboard/tsconfig.json",