@three-flatland/devtools 0.1.0-alpha.3

package/dist/stats-row.js

@@ -0,0 +1,129 @@
+const ICON_ATTRS = 'viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" style="display:block;width:calc(1em - 1px);height:calc(1em - 1px)"';
+const ICONS = {
+  // Pencil — diagonal parallelogram body with a ferrule band near the eraser
+  draws: `<svg ${ICON_ATTRS}><path d="M1 13 L3 13 L13 3 L11 1 L1 11 Z"/><path d="M9 3 L11 5"/></svg>`,
+  // Isoceles triangle stretched to fill the 12×12 box
+  tris: `<svg ${ICON_ATTRS}><path d="M7 1 L13 13 L1 13 Z"/></svg>`,
+  // Square (aggregated lines + points)
+  prims: `<svg ${ICON_ATTRS}><path d="M1 1 L13 1 L13 13 L1 13 Z"/></svg>`,
+  // Regular-ish pentagon (dodecahedron silhouette), y-scaled to fill the box
+  geoms: `<svg ${ICON_ATTRS}><path d="M7 1 L13 5.6 L10.7 13 L3.3 13 L1 5.6 Z"/></svg>`,
+  // 3×3 dot grid (filled — swap stroke→fill). Centers spread so outer dot
+  // edges touch the same (1,1)–(13,13) box as the other icons.
+  textures: `<svg viewBox="0 0 14 14" fill="currentColor" style="display:block;width:calc(1em - 1px);height:calc(1em - 1px)"><circle cx="2.1" cy="2.1" r="1.1"/><circle cx="7" cy="2.1" r="1.1"/><circle cx="11.9" cy="2.1" r="1.1"/><circle cx="2.1" cy="7" r="1.1"/><circle cx="7" cy="7" r="1.1"/><circle cx="11.9" cy="7" r="1.1"/><circle cx="2.1" cy="11.9" r="1.1"/><circle cx="7" cy="11.9" r="1.1"/><circle cx="11.9" cy="11.9" r="1.1"/></svg>`
+};
+const TOOLTIPS = {
+  draws: "Draw Calls",
+  tris: "Triangles",
+  prims: "Primitives (lines + points)",
+  geoms: "Geometries",
+  textures: "Textures"
+};
+const COMPACT_UNITS = ["K", "M", "B", "T"];
+const NBSP = "\xA0";
+function pad4(s) {
+  return s.length >= 4 ? s : s + NBSP.repeat(4 - s.length);
+}
+function formatCompact(n) {
+  if (!Number.isFinite(n) || n < 0) return pad4("0");
+  if (n < 1e3) return pad4(String(Math.round(n)));
+  let unit = 0;
+  let val = n / 1e3;
+  while (val >= 1e3 && unit < COMPACT_UNITS.length - 1) {
+    val /= 1e3;
+    unit++;
+  }
+  if (val < 9.95) return pad4(val.toFixed(1) + COMPACT_UNITS[unit]);
+  const rounded = Math.round(val);
+  if (rounded >= 1e3 && unit < COMPACT_UNITS.length - 1) {
+    return pad4("1.0" + COMPACT_UNITS[unit + 1]);
+  }
+  return pad4(String(rounded) + COMPACT_UNITS[unit]);
+}
+const STYLE_MARKER = "data-tp-flatland-statsrow";
+const CELL_CLASS = "tp-flatland-statsrow-cell";
+function injectStyles() {
+  if (document.querySelector(`style[${STYLE_MARKER}]`)) return;
+  const style = document.createElement("style");
+  style.setAttribute(STYLE_MARKER, "");
+  style.textContent = `
+    .${CELL_CLASS} { position: relative; }
+    .${CELL_CLASS} + .${CELL_CLASS}::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 3px;
+      bottom: 3px;
+      width: 1px;
+      background: var(--tp-groove-foreground-color, rgba(240, 237, 216, 0.12));
+      pointer-events: none;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function addStatsRow(parent, client) {
+  injectStyles();
+  const blade = parent.addBlade({ view: "separator" });
+  const bladeEl = blade.element;
+  bladeEl.innerHTML = "";
+  bladeEl.className = "tp-cntv";
+  bladeEl.style.cssText = "";
+  const row = document.createElement("div");
+  row.style.cssText = [
+    // Five equal columns spanning the full blade width. Dividers between
+    // cells are drawn by a `::before` pseudo-element on every cell after
+    // the first (see injectStyles). Row padding is intentionally tight
+    // (4px) because each column has only ~50px to fit a 4-char value plus
+    // an icon — shaving 2px per side here gives the triangles cell enough
+    // headroom for "999K" / "1.2M" without clipping.
+    "display:grid",
+    "grid-template-columns:repeat(5,1fr)",
+    "align-items:center",
+    "height:calc(var(--cnt-usz, 20px) * 1.1)",
+    "padding:0 4px",
+    "font-size:12px",
+    "line-height:1",
+    "font-family:var(--tp-base-font-family, ui-monospace, monospace)",
+    "font-variant-numeric:tabular-nums",
+    "color:var(--tp-monitor-foreground-color)"
+  ].join(";");
+  const keys = ["draws", "textures", "geoms", "prims", "tris"];
+  const valueEls = {};
+  for (const key of keys) {
+    const cell = document.createElement("div");
+    cell.className = CELL_CLASS;
+    cell.title = TOOLTIPS[key];
+    cell.style.cssText = "display:flex;align-items:center;gap:3px;padding-left:6px;overflow:hidden;white-space:nowrap;user-select:none;-webkit-user-select:none;-moz-user-select:none";
+    const iconWrap = document.createElement("span");
+    iconWrap.title = TOOLTIPS[key];
+    iconWrap.style.cssText = "display:inline-flex;flex-shrink:0;color:var(--tp-label-foreground-color);align-self:flex-end;transform:translateY(-1px)";
+    iconWrap.innerHTML = ICONS[key];
+    cell.appendChild(iconWrap);
+    const valueEl = document.createElement("span");
+    valueEl.title = TOOLTIPS[key];
+    valueEl.textContent = `0${NBSP}${NBSP}${NBSP}`;
+    valueEl.style.cssText = "min-width:4ch;text-align:left;flex-shrink:0";
+    cell.appendChild(valueEl);
+    row.appendChild(cell);
+    valueEls[key] = valueEl;
+  }
+  bladeEl.appendChild(row);
+  const unsubscribe = client.addListener((s) => {
+    valueEls.draws.textContent = formatCompact(s.drawCalls ?? 0);
+    valueEls.tris.textContent = formatCompact(s.triangles ?? 0);
+    valueEls.prims.textContent = formatCompact(s.primitives ?? 0);
+    valueEls.geoms.textContent = formatCompact(s.geometries ?? 0);
+    valueEls.textures.textContent = formatCompact(s.textures ?? 0);
+  });
+  return {
+    element: bladeEl,
+    dispose() {
+      unsubscribe();
+      blade.dispose();
+    }
+  };
+}
+export {
+  addStatsRow
+};
+//# sourceMappingURL=stats-row.js.map

package/dist/stats-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stats-row.ts"],"sourcesContent":["/**\n * Compact single-row renderer stats blade.\n *\n * Five equal-width cells separated by dim vertical dividers:\n *   `✎ 3 | △ 10K | ◇ 42 | ⌂ 12 | ▦ 3`\n *\n * Each cell shows an outline icon on the left and a left-aligned,\n * compact-formatted number on the right. A native `title=` tooltip on each\n * cell exposes the full field name. Injected via the same \"replace a\n * separator blade's content\" trick that `stats-graph.ts` uses, so the blade\n * still gets a proper slot in the blade rack.\n */\n\nimport type { FolderApi, Pane } from 'tweakpane'\nimport type { DevtoolsClient } from './devtools-client.js'\n\n/** Internal shape of the cells we render — matches the icon + tooltip tables below. */\ninterface StatsRowValues {\n  draws: number\n  tris: number\n  /** Points + lines aggregated — not currently on the bus (reserved for future). */\n  prims: number\n  geoms: number\n  textures: number\n}\n\nexport interface StatsRowHandle {\n  readonly element: HTMLElement\n  dispose(): void\n}\n\n// ── Icons ────────────────────────────────────────────────────────────────\n// Outline glyphs, stroked with currentColor so they inherit theme vars.\n// Sized to `calc(1em - 1px)` (→ 11px at the row's 12px font-size), which\n// lines up with the digit cap-height without looking too tall. Every path\n// fills a `(1,1)–(13,13)` box inside the 14×14 viewBox so all icons share\n// the same visual footprint.\n\nconst ICON_ATTRS =\n  'viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"display:block;width:calc(1em - 1px);height:calc(1em - 1px)\"'\n\nconst ICONS: Record<keyof Required<StatsRowValues>, string> = {\n  // Pencil — diagonal parallelogram body with a ferrule band near the eraser\n  draws: `<svg ${ICON_ATTRS}><path d=\"M1 13 L3 13 L13 3 L11 1 L1 11 Z\"/><path d=\"M9 3 L11 5\"/></svg>`,\n  // Isoceles triangle stretched to fill the 12×12 box\n  tris: `<svg ${ICON_ATTRS}><path d=\"M7 1 L13 13 L1 13 Z\"/></svg>`,\n  // Square (aggregated lines + points)\n  prims: `<svg ${ICON_ATTRS}><path d=\"M1 1 L13 1 L13 13 L1 13 Z\"/></svg>`,\n  // Regular-ish pentagon (dodecahedron silhouette), y-scaled to fill the box\n  geoms: `<svg ${ICON_ATTRS}><path d=\"M7 1 L13 5.6 L10.7 13 L3.3 13 L1 5.6 Z\"/></svg>`,\n  // 3×3 dot grid (filled — swap stroke→fill). Centers spread so outer dot\n  // edges touch the same (1,1)–(13,13) box as the other icons.\n  textures: `<svg viewBox=\"0 0 14 14\" fill=\"currentColor\" style=\"display:block;width:calc(1em - 1px);height:calc(1em - 1px)\"><circle cx=\"2.1\" cy=\"2.1\" r=\"1.1\"/><circle cx=\"7\" cy=\"2.1\" r=\"1.1\"/><circle cx=\"11.9\" cy=\"2.1\" r=\"1.1\"/><circle cx=\"2.1\" cy=\"7\" r=\"1.1\"/><circle cx=\"7\" cy=\"7\" r=\"1.1\"/><circle cx=\"11.9\" cy=\"7\" r=\"1.1\"/><circle cx=\"2.1\" cy=\"11.9\" r=\"1.1\"/><circle cx=\"7\" cy=\"11.9\" r=\"1.1\"/><circle cx=\"11.9\" cy=\"11.9\" r=\"1.1\"/></svg>`,\n}\n\nconst TOOLTIPS: Record<keyof Required<StatsRowValues>, string> = {\n  draws: 'Draw Calls',\n  tris: 'Triangles',\n  prims: 'Primitives (lines + points)',\n  geoms: 'Geometries',\n  textures: 'Textures',\n}\n\n// ── Compact number formatting ────────────────────────────────────────────\n// Always produces exactly 4 characters (short values are right-padded with\n// non-breaking spaces so every cell renders a stable 4-char slot). Auto-\n// scales through K / M / B / T suffixes so triangle counts (the widest-\n// ranging stat — can hit hundreds of millions) stay legible without\n// widening the row.\n\nconst COMPACT_UNITS = ['K', 'M', 'B', 'T']\nconst NBSP = '\\u00A0'\n\nfunction pad4(s: string): string {\n  return s.length >= 4 ? s : s + NBSP.repeat(4 - s.length)\n}\n\nfunction formatCompact(n: number): string {\n  if (!Number.isFinite(n) || n < 0) return pad4('0')\n  if (n < 1000) return pad4(String(Math.round(n)))\n\n  let unit = 0\n  let val = n / 1000\n  while (val >= 1000 && unit < COMPACT_UNITS.length - 1) {\n    val /= 1000\n    unit++\n  }\n\n  // val ∈ [1, 1000). Under 10 shows one decimal (\"1.2K\" / \"9.9K\"); 10+\n  // rounds to integer (\"10K\" / \"999K\"). If the integer would overflow\n  // into the next magnitude (e.g. 999.5 → 1000), promote one unit as\n  // \"1.0X\" so the output never grows beyond 4 characters.\n  if (val < 9.95) return pad4(val.toFixed(1) + COMPACT_UNITS[unit])\n  const rounded = Math.round(val)\n  if (rounded >= 1000 && unit < COMPACT_UNITS.length - 1) {\n    return pad4('1.0' + COMPACT_UNITS[unit + 1])\n  }\n  return pad4(String(rounded) + COMPACT_UNITS[unit])\n}\n\n// ── One-time <style> injection for divider pseudo-elements ───────────────\n// Pseudo-elements can't be set via inline style attributes, so we inject a\n// single stylesheet the first time `addStatsRow` runs. Uses a `data-*`\n// marker so repeat calls are idempotent.\n\nconst STYLE_MARKER = 'data-tp-flatland-statsrow'\nconst CELL_CLASS = 'tp-flatland-statsrow-cell'\n\nfunction injectStyles(): void {\n  if (document.querySelector(`style[${STYLE_MARKER}]`)) return\n  const style = document.createElement('style')\n  style.setAttribute(STYLE_MARKER, '')\n  style.textContent = `\n    .${CELL_CLASS} { position: relative; }\n    .${CELL_CLASS} + .${CELL_CLASS}::before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 3px;\n      bottom: 3px;\n      width: 1px;\n      background: var(--tp-groove-foreground-color, rgba(240, 237, 216, 0.12));\n      pointer-events: none;\n    }\n  `\n  document.head.appendChild(style)\n}\n\n// ── Blade construction ──────────────────────────────────────────────────\n\nexport function addStatsRow(parent: Pane | FolderApi, client: DevtoolsClient): StatsRowHandle {\n  injectStyles()\n\n  // Use a separator blade as a slot so ordering plays nicely with the rack,\n  // then nuke its content and drop in our own layout.\n  const blade = parent.addBlade({ view: 'separator' }) as unknown as {\n    element: HTMLElement\n    dispose(): void\n  }\n  const bladeEl = blade.element\n  bladeEl.innerHTML = ''\n  bladeEl.className = 'tp-cntv'\n  bladeEl.style.cssText = ''\n\n  const row = document.createElement('div')\n  row.style.cssText = [\n    // Five equal columns spanning the full blade width. Dividers between\n    // cells are drawn by a `::before` pseudo-element on every cell after\n    // the first (see injectStyles). Row padding is intentionally tight\n    // (4px) because each column has only ~50px to fit a 4-char value plus\n    // an icon — shaving 2px per side here gives the triangles cell enough\n    // headroom for \"999K\" / \"1.2M\" without clipping.\n    'display:grid',\n    'grid-template-columns:repeat(5,1fr)',\n    'align-items:center',\n    'height:calc(var(--cnt-usz, 20px) * 1.1)',\n    'padding:0 4px',\n    'font-size:12px',\n    'line-height:1',\n    'font-family:var(--tp-base-font-family, ui-monospace, monospace)',\n    'font-variant-numeric:tabular-nums',\n    'color:var(--tp-monitor-foreground-color)',\n  ].join(';')\n\n  const keys = ['draws', 'textures', 'geoms', 'prims', 'tris'] as const\n  const valueEls = {} as Record<(typeof keys)[number], HTMLSpanElement>\n\n  for (const key of keys) {\n    const cell = document.createElement('div')\n    cell.className = CELL_CLASS\n    cell.title = TOOLTIPS[key]\n    // Left-aligned icon + number. `padding-left: 6px` leaves breathing room\n    // between the divider line and the icon; `gap: 3px` keeps the icon tight\n    // against the number. Both are tuned to fit a 4-char value in the\n    // narrowest cell (~49px) without clipping. `user-select: none` (plus\n    // vendor prefixes for Safari/Firefox) so stats aren't accidentally\n    // selectable or copyable — they're a readout, not content.\n    cell.style.cssText =\n      'display:flex;align-items:center;gap:3px;padding-left:6px;overflow:hidden;white-space:nowrap;user-select:none;-webkit-user-select:none;-moz-user-select:none'\n\n    const iconWrap = document.createElement('span')\n    // Tooltip also attached here so hovering the icon (not just the number)\n    // surfaces the field name. Bottom-aligned + shifted up 1px pins the\n    // icon bottom to the digit baseline.\n    iconWrap.title = TOOLTIPS[key]\n    iconWrap.style.cssText =\n      'display:inline-flex;flex-shrink:0;color:var(--tp-label-foreground-color);align-self:flex-end;transform:translateY(-1px)'\n    iconWrap.innerHTML = ICONS[key]\n    cell.appendChild(iconWrap)\n\n    // Value slot reserves 4 chars of width — `formatCompact` always emits\n    // exactly 4 chars (padded with NBSP) so the icon stays planted. Title\n    // mirrored here so the tooltip shows over the number too.\n    const valueEl = document.createElement('span')\n    valueEl.title = TOOLTIPS[key]\n    valueEl.textContent = `0${NBSP}${NBSP}${NBSP}`\n    valueEl.style.cssText = 'min-width:4ch;text-align:left;flex-shrink:0'\n    cell.appendChild(valueEl)\n\n    row.appendChild(cell)\n    valueEls[key] = valueEl\n  }\n\n  bladeEl.appendChild(row)\n\n  // Bus-driven: the client holds the full live state. On every update\n  // we just render the current values — setting textContent to the\n  // same string is a no-op, so diffing locally is unnecessary.\n  const unsubscribe = client.addListener((s) => {\n    valueEls.draws.textContent = formatCompact(s.drawCalls ?? 0)\n    valueEls.tris.textContent = formatCompact(s.triangles ?? 0)\n    valueEls.prims.textContent = formatCompact(s.primitives ?? 0)\n    valueEls.geoms.textContent = formatCompact(s.geometries ?? 0)\n    valueEls.textures.textContent = formatCompact(s.textures ?? 0)\n  })\n\n  return {\n    element: bladeEl,\n    dispose() {\n      unsubscribe()\n      blade.dispose()\n    },\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/theme.cjs

@@ -0,0 +1,260 @@
+"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 theme_exports = {};
+__export(theme_exports, {
+  FLATLAND_THEME: () => FLATLAND_THEME,
+  applyTheme: () => applyTheme
+});
+module.exports = __toCommonJS(theme_exports);
+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);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FLATLAND_THEME,
+  applyTheme
+});
+//# sourceMappingURL=theme.cjs.map

package/dist/theme.cjs.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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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/theme.d.cts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+declare const FLATLAND_THEME: Record<string, string>;
+declare function applyTheme(element: HTMLElement, theme?: Record<string, string>): void;
+
+export { FLATLAND_THEME, applyTheme };

package/dist/theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+declare const FLATLAND_THEME: Record<string, string>;
+declare function applyTheme(element: HTMLElement, theme?: Record<string, string>): void;
+
+export { FLATLAND_THEME, applyTheme };