@three-flatland/devtools 0.1.0-alpha.3

package/dist/theme.js

@@ -0,0 +1,235 @@
+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"
+};
+const ACCENT_CSS = `
+/* Slider thumb */
+.tp-sldv_k::after { background-color: #d94c87 !important; }
+.tp-sldv_t:hover .tp-sldv_k::after { background-color: #e0609a !important; }
+.tp-sldv_t:active .tp-sldv_k::after { background-color: #a6216e !important; }
+/* Slider track (filled portion) */
+.tp-sldv_k::before { background-color: rgba(240, 237, 216, 0.25) !important; }
+/* Number spinner drag handle */
+.tp-txtv_k::before { background-color: #d94c87 !important; }
+/* Select/dropdown */
+.tp-lstv_s { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }
+.tp-lstv_s:hover { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }
+.tp-lstv_s:focus { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }
+.tp-lstv_s:active { background-color: #343473 !important; color: #d94c87 !important; }
+.tp-lstv_m { color: rgba(240, 237, 216, 0.5) !important; }
+/* Buttons */
+.tp-btnv_b { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }
+.tp-btnv_b:hover { background-color: rgba(28, 40, 77, 0.9) !important; color: #f0edd8 !important; }
+.tp-btnv_b:active { background-color: #343473 !important; color: #d94c87 !important; }
+/* Radio grid buttons */
+.tp-radv_b { background-color: rgba(28, 40, 77, 0.6) !important; color: rgba(240, 237, 216, 0.5) !important; }
+.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
+   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
+   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
+   the entire visible box puts the hit target directly on the pointer,
+   no label forwarding required. */
+.tp-ckbv_i {
+  /* Absolute positioning + zero opacity is Tweakpane's default; we
+     just add explicit size + cursor so the click area matches the
+     visible affordance exactly. */
+  width: var(--cnt-usz) !important;
+  height: var(--cnt-usz) !important;
+  margin: 0 !important;
+  cursor: pointer !important;
+}
+.tp-ckbv_w { background-color: rgba(28, 40, 77, 0.6) !important; }
+.tp-ckbv_i:hover + .tp-ckbv_w { background-color: rgba(28, 40, 77, 0.9) !important; }
+.tp-ckbv_i:focus + .tp-ckbv_w { background-color: rgba(28, 40, 77, 0.9) !important; }
+.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.
+   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; }
+.tp-flatland-dimmable.tp-flatland-pinned { opacity: 1; }
+@media (hover: hover) {
+  .tp-flatland-dimmable:hover { opacity: 1; }
+}
+
+/* Pin in the pane header (left side, mirrors the collapse caret on the right) */
+.tp-flatland-pin {
+  position: absolute;
+  left: var(--cnt-hp, 4px);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  width: var(--cnt-usz, 20px);
+  height: var(--cnt-usz, 20px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(240, 237, 216, 0.45);
+  cursor: pointer;
+  border-radius: 2px;
+  transition: color 150ms, background-color 150ms;
+}
+.tp-flatland-pin:hover { color: #d94c87; background: transparent; }
+.tp-flatland-pin svg { display: block; }
+.tp-flatland-pin svg circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
+.tp-flatland-pinned .tp-flatland-pin svg circle { fill: currentColor; }
+
+/*
+ * Three-mode cycle toggle in the header (replaces Tweakpane's built-in
+ * fold caret). We hide the native caret via the .tp-rotv_m marker
+ * class and render our own button that cycles full - minimal -
+ * collapsed - full. The data-mode attribute drives icon styling.
+ */
+.tp-rotv_m { display: none !important; }
+.tp-flatland-mode {
+  position: absolute;
+  right: var(--cnt-hp, 4px);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  min-width: var(--cnt-usz, 20px);
+  height: var(--cnt-usz, 20px);
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Match the original tweakpane fold caret and folder-header glyphs \u2014
+   * the muted foreground token pane headers use throughout. */
+  color: var(--tp-label-foreground-color);
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  user-select: none;
+}
+/*
+ * Glyph exactly replicates tweakpane's native fold marker \u2014 a 6\xD76
+ * 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
+ */
+.tp-flatland-mode-glyph {
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  background: linear-gradient(
+    to left,
+    var(--cnt-fg, currentColor),
+    var(--cnt-fg, currentColor) 2px,
+    transparent 2px,
+    transparent 4px,
+    var(--cnt-fg, currentColor) 4px
+  );
+  opacity: 0.5;
+  /* 0.2s ease-in-out \u2014 the exact transition tweakpane applies to its
+   * own fold marker. */
+  transition: transform 0.2s ease-in-out;
+}
+.tp-flatland-mode[data-mode="full"] .tp-flatland-mode-glyph { transform: rotate(0deg); }
+.tp-flatland-mode[data-mode="minimal"] .tp-flatland-mode-glyph { transform: rotate(45deg); }
+.tp-flatland-mode[data-mode="collapsed"] .tp-flatland-mode-glyph { transform: rotate(90deg); }
+
+/*
+ * 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
+ * clipped.
+ *
+ * max-height uses a generous ceiling instead of a measured value so we
+ * can stay declarative; the transition duration matches the native
+ * pane fold for continuity.
+ */
+/*
+ * Animation timings + easings mirror tweakpane's own fold exactly:
+ *   .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
+ *   animate together.
+ *
+ * We use max-height in place of height because content height isn't
+ * known at author time; with a generous ceiling the visual is
+ * indistinguishable from native height tweens.
+ */
+.tp-rotv_c > *:not(.tp-flatland-minimal-keep) {
+  max-height: 1200px;
+  opacity: 1;
+  overflow: hidden;
+  transition:
+    max-height 0.2s ease-in-out,
+    opacity 0.2s linear 0.2s,
+    margin 0.2s ease-in-out,
+    padding 0.2s ease-in-out;
+}
+.tp-flatland-minimal .tp-rotv_c > *:not(.tp-flatland-minimal-keep) {
+  max-height: 0;
+  opacity: 0;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  pointer-events: none;
+  /* On collapse: no delay on opacity \u2014 both animate together,
+   * matching tweakpane's non-expanded transition shape. */
+  transition:
+    max-height 0.2s ease-in-out,
+    opacity 0.2s linear,
+    margin 0.2s ease-in-out,
+    padding 0.2s ease-in-out;
+}
+`;
+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);
+  }
+}
+export {
+  FLATLAND_THEME,
+  applyTheme
+};
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +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":[]}

package/dist/vite-plugin.cjs

@@ -0,0 +1,113 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var vite_plugin_exports = {};
+__export(vite_plugin_exports, {
+  default: () => vite_plugin_default,
+  threeFlatlandDevtools: () => threeFlatlandDevtools
+});
+module.exports = __toCommonJS(vite_plugin_exports);
+var import_node_fs = require("node:fs");
+var import_promises = require("node:fs/promises");
+var import_node_url = require("node:url");
+var import_node_path = require("node:path");
+const import_meta = {};
+const DEFAULT_PATH = "/.devtools";
+function resolveDashboardRoot() {
+  const here = (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
+  const siblingSrc = (0, import_node_path.resolve)(here, "../src/dashboard");
+  if ((0, import_node_fs.existsSync)(siblingSrc)) return siblingSrc;
+  return (0, import_node_path.resolve)(here, "dashboard");
+}
+function threeFlatlandDevtools(options = {}) {
+  const mountPath = options.path ?? DEFAULT_PATH;
+  const dashboardRoot = resolveDashboardRoot();
+  const vendorRoot = (0, import_node_path.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: (0, import_node_path.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: (0, import_node_path.resolve)(vendorRoot, "jsx-runtime.js")
+            },
+            {
+              find: "preact/hooks",
+              replacement: (0, import_node_path.resolve)(vendorRoot, "hooks.module.js")
+            },
+            {
+              find: /^preact$/,
+              replacement: (0, import_node_path.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 = (0, import_node_path.resolve)(dashboardRoot, "index.html");
+            let html = await (0, import_promises.readFile)(indexPath, "utf-8");
+            const entryAbs = (0, import_node_path.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
+`
+      );
+    }
+  };
+}
+var vite_plugin_default = threeFlatlandDevtools;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  threeFlatlandDevtools
+});
+//# sourceMappingURL=vite-plugin.cjs.map

package/dist/vite-plugin.cjs.map

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BA,qBAA2B;AAC3B,sBAAyB;AACzB,sBAA8B;AAC9B,uBAAiC;AA7BjC;AAsCA,MAAM,eAAe;AAErB,SAAS,uBAA+B;AAStC,QAAM,WAAO,8BAAQ,+BAAc,YAAY,GAAG,CAAC;AACnD,QAAM,iBAAa,0BAAQ,MAAM,kBAAkB;AACnD,UAAI,2BAAW,UAAU,EAAG,QAAO;AACnC,aAAO,0BAAQ,MAAM,WAAW;AAClC;AAEO,SAAS,sBACd,UAAwC,CAAC,GACjC;AACR,QAAM,YAAY,QAAQ,QAAQ;AAClC,QAAM,gBAAgB,qBAAqB;AAC3C,QAAM,iBAAa,0BAAQ,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,iBAAa,0BAAQ,YAAY,gBAAgB;AAAA,YACnD;AAAA,YACA;AAAA;AAAA;AAAA,cAGE,MAAM;AAAA,cACN,iBAAa,0BAAQ,YAAY,gBAAgB;AAAA,YACnD;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,iBAAa,0BAAQ,YAAY,iBAAiB;AAAA,YACpD;AAAA,YACA;AAAA,cACE,MAAM;AAAA,cACN,iBAAa,0BAAQ,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,gBAAY,0BAAQ,eAAe,YAAY;AACrD,gBAAI,OAAO,UAAM,0BAAS,WAAW,OAAO;AAC5C,kBAAM,eAAW,0BAAQ,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":[]}

package/dist/vite-plugin.d.cts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface ThreeFlatlandDevtoolsOptions {
+    /** URL path the dashboard is served under. Default: `/.devtools`. */
+    path?: string;
+}
+declare function threeFlatlandDevtools(options?: ThreeFlatlandDevtoolsOptions): Plugin;
+
+export { type ThreeFlatlandDevtoolsOptions, threeFlatlandDevtools as default, threeFlatlandDevtools };

package/dist/vite-plugin.d.ts

@@ -0,0 +1,9 @@
+import { Plugin } from 'vite';
+
+interface ThreeFlatlandDevtoolsOptions {
+    /** URL path the dashboard is served under. Default: `/.devtools`. */
+    path?: string;
+}
+declare function threeFlatlandDevtools(options?: ThreeFlatlandDevtoolsOptions): Plugin;
+
+export { type ThreeFlatlandDevtoolsOptions, threeFlatlandDevtools as default, threeFlatlandDevtools };

package/dist/vite-plugin.js

@@ -0,0 +1,88 @@
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+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");
+}
+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
+`
+      );
+    }
+  };
+}
+var vite_plugin_default = threeFlatlandDevtools;
+export {
+  vite_plugin_default as default,
+  threeFlatlandDevtools
+};
+//# sourceMappingURL=vite-plugin.js.map

package/dist/vite-plugin.js.map

@@ -0,0 +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":[]}

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@three-flatland/devtools",
+  "version": "0.1.0-alpha.3",
+  "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",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "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",
+    "tweakpane": "^4.0.5",
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@react-three/fiber": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "three-flatland": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@react-three/fiber": "10.0.0-alpha.2",
+    "@testing-library/react": "^16.1.0",
+    "@tweakpane/core": "^2.0.5",
+    "@tweakpane/plugin-essentials": "^0.2.1",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/three": "^0.183.1",
+    "happy-dom": "^15.11.7",
+    "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"
+  },
+  "keywords": [
+    "three.js",
+    "tweakpane",
+    "debug",
+    "controls",
+    "webgpu"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thejustinwalsh/three-flatland.git",
+    "directory": "packages/devtools"
+  },
+  "scripts": {
+    "build": "tsup",
+    "build:bundle": "vite build --config vite.config.bundle.ts",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p src/dashboard/tsconfig.json",
+    "clean": "rm -rf dist bundle"
+  }
+}