@mgz-dev/inspect 0.1.0

package/dist/panel/inspect-panel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../assets/default-atlas.cjs"),t=require("../core/canvas2d-renderer.cjs"),i=require("../core/font-generator.cjs"),s=require("../core/input.cjs"),a=require("../core/layouts/stack-layout.cjs"),r=require("../core/surface.cjs"),n=require("../defaults.cjs"),o=require("./inspect-debugger.cjs"),l=require("../themes/dark.cjs"),h=require("../utils/persistence.cjs"),d=require("../widgets/box.cjs"),c=new Set(["bgApp","bgPanel","bgPanelInset","bgPanelRaised","bgButton","bgButtonHover","bgButtonActive","bgInput","bgSelected","bgScrollTrack","bgScrollThumb","borderPanel","borderInset","borderRaised","textPrimary","textSecondary","textMuted","textValue","textTitle","textHighlight","spacingXS","spacingSM","spacingMD","spacingLG","borderRadius","buttonHeight","labelHeight","separatorThickness","bgFolder","bgFolderHover","textFolder","bgAccent","bgAccentDim","textLabel","bgOverlay","controlHeight","controlGap","labelRatio","folderHeaderHeight","panelPadding","scrollbarWidth","textOffsetY"]);exports.InspectPanel=class{canvas;surface;renderer;input;theme;root;visible;ready;keyHandler=null;options;hovered=!1;enterHandler=null;leaveHandler=null;debugger_=null;panelPosition;panelMargin;panelWidth;constructor(e,i){this.options=i;const c=i.width??n.DEFAULTS.panelDefaultWidth,p=i.position??"right",u=i.margin??0,g=i.storageKey??n.DEFAULTS.panelDefaultStorageKey;if(this.panelPosition=p,this.panelMargin=u,this.panelWidth=c,!1!==i.persistVisibility){const e=h.getVisibilityFromStorage(g);this.visible=null!==e?e:i.initiallyVisible??!1}else this.visible=i.initiallyVisible??!1;this.canvas=document.createElement("canvas"),this.canvas.style.position="fixed",this.canvas.style.top=`${u}px`,this.canvas.style.width=`${c}px`,this.canvas.style.height=`calc(100vh - ${2*u}px)`,this.canvas.style.zIndex=n.DEFAULTS.panelZIndex,i.borderRadius&&(this.canvas.style.borderRadius=`${i.borderRadius}px`),this.canvas.style.transition=`${p} ${n.DEFAULTS.panelTransitionEasing} ${n.DEFAULTS.panelTransitionDuration}`;const v=-(c+n.DEFAULTS.panelHiddenOffsetExtra+u)+"px",b=`${u}px`,y=n.DEFAULTS.panelBoxShadowX,f=n.DEFAULTS.panelBoxShadowBlur,x=n.DEFAULTS.panelBoxShadowColor;"right"===p?(this.canvas.style.right=this.visible?b:v,this.canvas.style.boxShadow=`-${y}px 0px ${f}px ${x}`):(this.canvas.style.left=this.visible?b:v,this.canvas.style.boxShadow=`${y}px 0px ${f}px ${x}`),e.appendChild(this.canvas),this.renderer=new t.Canvas2DRenderer(this.canvas),this.theme=l.createDarkTheme(null),this.surface=new r.Surface(this.canvas,this.renderer,this.theme),this.input=new s.InputDispatcher(this.surface),i.debugMode&&(this.debugger_=new o.InspectDebugger(this.surface,this.canvas)),this.root=new d.Box,this.root.sizingX="grow",this.root.sizingY="grow",this.root.bgColor=this.theme.bgApp,this.root.borderRadius=i.borderRadius??0,this.root.layout=new a.StackLayout("vertical",0,"start","stretch"),this.surface.setRoot(this.root),this.enterHandler=()=>{this.hovered=!0},this.leaveHandler=()=>{this.hovered=!1},this.canvas.addEventListener("pointerenter",this.enterHandler),this.canvas.addEventListener("pointerleave",this.leaveHandler),this.keyHandler=null,this.ready=this.initFontAtlas(i)}async initFontAtlas(t){const s=void 0!==t.fontUrl||void 0!==t.fontData||void 0!==t.fontFamily?await i.createFontAtlas({family:t.fontFamily??n.DEFAULTS.panelDefaultFontFamily,size:t.fontSize??n.DEFAULTS.panelDefaultFontSize,fontUrl:t.fontUrl,fontData:t.fontData,pixelPerfect:void 0!==t.fontUrl||void 0!==t.fontData,extraChars:"v>‹›"}):await e.loadDefaultAtlas(),a=t.theme;this.theme=a&&"string"!=typeof a?{...a,fontAtlas:s}:l.createDarkTheme(s);const r=function(e){let t=null;const i=e;for(const e of c)"borderRadius"!==e&&e in i&&void 0!==i[e]&&(t||(t={}),t[e]=i[e]);return void 0!==e.widgetBorderRadius&&(t||(t={}),t.borderRadius=e.widgetBorderRadius),t}(t);r&&(this.theme={...this.theme,...r,fontAtlas:s}),this.root.bgColor=this.theme.bgApp,this.surface.setTheme(this.theme)}toggle(){this.visible?this.hide():this.show()}applyPosition(){const e=`${this.panelMargin}px`,t=-(this.panelWidth+50+this.panelMargin)+"px";"right"===this.panelPosition?this.canvas.style.right=this.visible?e:t:this.canvas.style.left=this.visible?e:t}show(){this.visible||(this.visible=!0,this.applyPosition(),this.surface.markDirty(),!1!==this.options.persistVisibility&&h.setVisibilityToStorage(!0,this.options.storageKey??n.DEFAULTS.panelDefaultStorageKey))}hide(){this.visible&&(this.visible=!1,this.applyPosition(),!1!==this.options.persistVisibility&&h.setVisibilityToStorage(!1,this.options.storageKey??n.DEFAULTS.panelDefaultStorageKey))}isVisible(){return this.visible}isHovered(){return this.hovered}setContent(e){this.root.removeAllChildren(),this.root.addChild(e),this.surface.markDirty()}dispose(){this.keyHandler&&(window.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.enterHandler&&(this.canvas.removeEventListener("pointerenter",this.enterHandler),this.enterHandler=null),this.leaveHandler&&(this.canvas.removeEventListener("pointerleave",this.leaveHandler),this.leaveHandler=null),this.debugger_&&(this.debugger_.dispose(),this.debugger_=null),this.input.dispose(),this.surface.dispose(),this.canvas.remove()}};

package/dist/panel/inspect-panel.d.ts

@@ -0,0 +1,66 @@
+import { Canvas2DRenderer } from '../core/canvas2d-renderer';
+import { InputDispatcher } from '../core/input';
+import { Surface } from '../core/surface';
+import { Box } from '../widgets/box';
+import { Widget } from '../core/widget';
+import { InspectTheme } from '../themes/inspect-theme';
+import { MountOptions } from '../types';
+/**
+ * The main panel component: creates the fixed-position canvas, renderer, surface,
+ * input dispatcher, and manages show/hide transitions and font atlas initialization.
+ */
+export declare class InspectPanel {
+    /** the fixed-position canvas element the panel renders into. */
+    readonly canvas: HTMLCanvasElement;
+    /** surface driving layout and repaint of the widget tree. */
+    readonly surface: Surface;
+    /** the canvas 2D drawing backend. */
+    readonly renderer: Canvas2DRenderer;
+    /** dispatcher routing pointer, wheel, and keyboard events to widgets. */
+    readonly input: InputDispatcher;
+    /** active theme, replaced once the font atlas finishes loading. */
+    theme: InspectTheme;
+    /** root container that holds the panel content. */
+    root: Box;
+    /** whether the panel is currently slid into view. */
+    visible: boolean;
+    /** resolves once the font atlas has loaded and the real theme is applied. */
+    readonly ready: Promise<void>;
+    private keyHandler;
+    private options;
+    private hovered;
+    private enterHandler;
+    private leaveHandler;
+    private debugger_;
+    private panelPosition;
+    private panelMargin;
+    private panelWidth;
+    /**
+     * Creates and styles the fixed-position canvas, wires up the renderer,
+     * surface, input, and root box, restores stored visibility, positions the
+     * panel on or off screen, and starts loading the font atlas.
+     */
+    constructor(container: HTMLElement, options: MountOptions);
+    /**
+     * Loads the font atlas, using a runtime-generated one when a custom font is
+     * requested and the embedded default otherwise, then resolves the theme
+     * (explicit object, dark default, or option overrides) and applies it.
+     */
+    private initFontAtlas;
+    /** toggles panel visibility between shown and hidden. */
+    toggle(): void;
+    /** slides the panel to its shown or hidden offset by setting the anchored side (left/right) by visibility. */
+    private applyPosition;
+    /** slides the panel into view and persists visibility when enabled. */
+    show(): void;
+    /** slides the panel out of view and persists visibility when enabled. */
+    hide(): void;
+    /** returns whether the panel is currently shown. */
+    isVisible(): boolean;
+    /** returns whether the pointer is currently over the panel. */
+    isHovered(): boolean;
+    /** replaces the root content with the given widget. */
+    setContent(widget: Widget): void;
+    /** removes listeners, tears down the surface, and removes the canvas. */
+    dispose(): void;
+}

package/dist/panel/inspect-panel.mjs

@@ -0,0 +1 @@
+import{loadDefaultAtlas as t}from"../assets/default-atlas.mjs";import{Canvas2DRenderer as e}from"../core/canvas2d-renderer.mjs";import{createFontAtlas as i}from"../core/font-generator.mjs";import{InputDispatcher as s}from"../core/input.mjs";import{StackLayout as a}from"../core/layouts/stack-layout.mjs";import{Surface as n}from"../core/surface.mjs";import{DEFAULTS as r}from"../defaults.mjs";import{InspectDebugger as o}from"./inspect-debugger.mjs";import{createDarkTheme as l}from"../themes/dark.mjs";import{getVisibilityFromStorage as h,setVisibilityToStorage as d}from"../utils/persistence.mjs";import{Box as p}from"../widgets/box.mjs";const c=/* @__PURE__ */new Set(["bgApp","bgPanel","bgPanelInset","bgPanelRaised","bgButton","bgButtonHover","bgButtonActive","bgInput","bgSelected","bgScrollTrack","bgScrollThumb","borderPanel","borderInset","borderRaised","textPrimary","textSecondary","textMuted","textValue","textTitle","textHighlight","spacingXS","spacingSM","spacingMD","spacingLG","borderRadius","buttonHeight","labelHeight","separatorThickness","bgFolder","bgFolderHover","textFolder","bgAccent","bgAccentDim","textLabel","bgOverlay","controlHeight","controlGap","labelRatio","folderHeaderHeight","panelPadding","scrollbarWidth","textOffsetY"]);class v{canvas;surface;renderer;input;theme;root;visible;ready;keyHandler=null;options;hovered=!1;enterHandler=null;leaveHandler=null;debugger_=null;panelPosition;panelMargin;panelWidth;constructor(t,i){this.options=i;const d=i.width??r.panelDefaultWidth,c=i.position??"right",v=i.margin??0,g=i.storageKey??r.panelDefaultStorageKey;if(this.panelPosition=c,this.panelMargin=v,this.panelWidth=d,!1!==i.persistVisibility){const t=h(g);this.visible=null!==t?t:i.initiallyVisible??!1}else this.visible=i.initiallyVisible??!1;this.canvas=document.createElement("canvas"),this.canvas.style.position="fixed",this.canvas.style.top=`${v}px`,this.canvas.style.width=`${d}px`,this.canvas.style.height=`calc(100vh - ${2*v}px)`,this.canvas.style.zIndex=r.panelZIndex,i.borderRadius&&(this.canvas.style.borderRadius=`${i.borderRadius}px`),this.canvas.style.transition=`${c} ${r.panelTransitionEasing} ${r.panelTransitionDuration}`;const u=-(d+r.panelHiddenOffsetExtra+v)+"px",b=`${v}px`,m=r.panelBoxShadowX,f=r.panelBoxShadowBlur,y=r.panelBoxShadowColor;"right"===c?(this.canvas.style.right=this.visible?b:u,this.canvas.style.boxShadow=`-${m}px 0px ${f}px ${y}`):(this.canvas.style.left=this.visible?b:u,this.canvas.style.boxShadow=`${m}px 0px ${f}px ${y}`),t.appendChild(this.canvas),this.renderer=new e(this.canvas),this.theme=l(null),this.surface=new n(this.canvas,this.renderer,this.theme),this.input=new s(this.surface),i.debugMode&&(this.debugger_=new o(this.surface,this.canvas)),this.root=new p,this.root.sizingX="grow",this.root.sizingY="grow",this.root.bgColor=this.theme.bgApp,this.root.borderRadius=i.borderRadius??0,this.root.layout=new a("vertical",0,"start","stretch"),this.surface.setRoot(this.root),this.enterHandler=()=>{this.hovered=!0},this.leaveHandler=()=>{this.hovered=!1},this.canvas.addEventListener("pointerenter",this.enterHandler),this.canvas.addEventListener("pointerleave",this.leaveHandler),this.keyHandler=null,this.ready=this.initFontAtlas(i)}async initFontAtlas(e){const s=void 0!==e.fontUrl||void 0!==e.fontData||void 0!==e.fontFamily?await i({family:e.fontFamily??r.panelDefaultFontFamily,size:e.fontSize??r.panelDefaultFontSize,fontUrl:e.fontUrl,fontData:e.fontData,pixelPerfect:void 0!==e.fontUrl||void 0!==e.fontData,extraChars:"v>‹›"}):await t(),a=e.theme;this.theme=a&&"string"!=typeof a?{...a,fontAtlas:s}:l(s);const n=function(t){let e=null;const i=t;for(const t of c)"borderRadius"!==t&&t in i&&void 0!==i[t]&&(e||(e={}),e[t]=i[t]);return void 0!==t.widgetBorderRadius&&(e||(e={}),e.borderRadius=t.widgetBorderRadius),e}(e);n&&(this.theme={...this.theme,...n,fontAtlas:s}),this.root.bgColor=this.theme.bgApp,this.surface.setTheme(this.theme)}toggle(){this.visible?this.hide():this.show()}applyPosition(){const t=`${this.panelMargin}px`,e=-(this.panelWidth+50+this.panelMargin)+"px";"right"===this.panelPosition?this.canvas.style.right=this.visible?t:e:this.canvas.style.left=this.visible?t:e}show(){this.visible||(this.visible=!0,this.applyPosition(),this.surface.markDirty(),!1!==this.options.persistVisibility&&d(!0,this.options.storageKey??r.panelDefaultStorageKey))}hide(){this.visible&&(this.visible=!1,this.applyPosition(),!1!==this.options.persistVisibility&&d(!1,this.options.storageKey??r.panelDefaultStorageKey))}isVisible(){return this.visible}isHovered(){return this.hovered}setContent(t){this.root.removeAllChildren(),this.root.addChild(t),this.surface.markDirty()}dispose(){this.keyHandler&&(window.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.enterHandler&&(this.canvas.removeEventListener("pointerenter",this.enterHandler),this.enterHandler=null),this.leaveHandler&&(this.canvas.removeEventListener("pointerleave",this.leaveHandler),this.leaveHandler=null),this.debugger_&&(this.debugger_.dispose(),this.debugger_=null),this.input.dispose(),this.surface.dispose(),this.canvas.remove()}}export{v as InspectPanel};

package/dist/panel/state-manager.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.StateManager=class{exportState(o){const e={};for(const[n,t]of o.monitors)e[n]=t.config.value();for(const n of o.folders.values())for(const o of n.children)if("config"in o){const n=o.config;n.key&&n.value&&(e[n.key]=n.value())}return e}importState(o,e){for(const n of o.folders.values())for(const o of n.children){if(!("config"in o))continue;const n=o,t=n.config.key;if(!t||!(t in e))continue;const r=e[t];n.config.onChange&&n.config.onChange(r),n.refresh&&n.refresh()}for(const[n,t]of o.monitors)n in e&&t.widget.refresh()}};

package/dist/panel/state-manager.d.ts

@@ -0,0 +1,8 @@
+import { WidgetBuilder } from './widget-builder';
+/** Serializes and deserializes control state to/from plain objects for persistence. */
+export declare class StateManager {
+    /** collects current control and monitor values into a keyed state object. */
+    exportState(builder: WidgetBuilder): Record<string, unknown>;
+    /** applies a keyed state object back onto controls and refreshes monitors. */
+    importState(builder: WidgetBuilder, state: Record<string, unknown>): void;
+}

package/dist/panel/state-manager.mjs

@@ -0,0 +1 @@
+class o{exportState(o){const n={};for(const[e,f]of o.monitors)n[e]=f.config.value();for(const e of o.folders.values())for(const o of e.children)if("config"in o){const e=o.config;e.key&&e.value&&(n[e.key]=e.value())}return n}importState(o,n){for(const e of o.folders.values())for(const o of e.children){if(!("config"in o))continue;const e=o,f=e.config.key;if(!f||!(f in n))continue;const r=n[f];e.config.onChange&&e.config.onChange(r),e.refresh&&e.refresh()}for(const[e,f]of o.monitors)e in n&&f.widget.refresh()}}export{o as StateManager};

package/dist/panel/widget-builder.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../core/widget.cjs"),t=require("../gui/gui-button.cjs"),i=require("../gui/gui-button-row.cjs"),o=require("../gui/gui-color.cjs"),n=require("../gui/gui-folder.cjs"),r=require("../gui/gui-monitor.cjs"),l=require("../gui/gui-reorder-list.cjs"),s=require("../gui/gui-select.cjs"),u=require("../gui/gui-separator.cjs"),a=require("../gui/gui-slider.cjs"),h=require("../gui/gui-text.cjs"),c=require("../gui/gui-text-log.cjs"),g=require("../gui/gui-toggle.cjs");exports.WidgetBuilder=class{theme;monitors=new Map;textLogs=new Map;customControls=new Map;folders=new Map;reorderLists=new Map;_monitorList=[];_textLogList=[];constructor(e){this.theme=e}buildFolder(e){const t=new n.GuiFolder;return t.id=e.id,t.title=e.title,t.expanded=e.expanded??!1,t.applyTheme(this.theme),this.folders.set(e.id,t),t}buildControls(e,t,i){for(let o=0;o<t.length;o++){const n=this.buildControl(e,t[o],i);n&&e.addControl(n)}}buildControl(t,i,o){switch(i.type){case"slider":return this.buildSlider(i.config);case"toggle":return this.buildToggle(i.config);case"select":return this.buildSelect(i.config);case"button":return this.buildButton(i.config);case"monitor":return this.buildMonitor(i.config);case"color":return this.buildColor(i.config);case"text":return this.buildText(i.config);case"point2d":return this.buildPoint2D(i.config);case"point3d":return this.buildPoint3D(i.config);case"separator":return this.buildSeparator();case"buttonRow":return this.buildButtonRow(i.config);case"subfolder":return this.buildSubfolder(i.config.title,i.config.expanded,i.config.controls,o);case"reorderList":return this.buildReorderList(i.config);case"textLog":return this.buildTextLog(i.config);default:{const n=i;if(o){const i=o[n.type];if(i){const o=i(t,n.config),r=n.config.key;if(o&&r&&this.customControls.set(r,o),o instanceof e.Widget)return o}}return null}}}buildSlider(e){const t=new a.GuiSlider({key:e.key,label:e.label??e.key,min:e.min,max:e.max,step:e.step??0,value:e.value,onChange:e.onChange,applyOnRelease:e.applyOnRelease});return t.applyTheme(this.theme),t}buildToggle(e){const t=new g.GuiToggle({key:e.key,label:e.label??e.key,value:e.value,onChange:e.onChange});return t.applyTheme(this.theme),t}buildSelect(e){const t=new s.GuiSelect({key:e.key,label:e.label??e.key,options:e.options,value:e.value,onChange:e.onChange});return t.applyTheme(this.theme),t}buildButton(e){const i=new t.GuiButton(e.title,e.onClick);return i.applyTheme(this.theme),i}buildMonitor(e){const t=new r.GuiMonitor({key:e.key,label:e.label??e.key,value:e.value,format:e.format,graph:"graph"===e.view,interval:e.interval,min:e.min,max:e.max});t.applyTheme(this.theme),t.refresh();const i={widget:t,config:e};return this.monitors.set(e.key,i),this._monitorList.push(i),t}buildColor(e){const t=new o.GuiColor({key:e.key,label:e.label??e.key,value:e.value,onChange:e.onChange,mode:e.colorType??"float",alpha:e.alpha,displayFormat:e.displayFormat});return t.applyTheme(this.theme),t}buildText(e){const t=new h.GuiText({key:e.key,label:e.label??e.key,value:e.value,onChange:e.onChange});return t.applyTheme(this.theme),t}buildPoint2D(e){const t=new n.GuiFolder;t.id=e.key,t.title=e.label??e.key,t.expanded=!0,t.applyTheme(this.theme);const i=new a.GuiSlider({key:e.key+".x",label:"x",min:e.x?.min??-100,max:e.x?.max??100,step:e.x?.step??.01,value:()=>e.value().x,onChange:t=>{const i=e.value();e.onChange({x:t,y:i.y})}});i.applyTheme(this.theme),t.addControl(i);const o=new a.GuiSlider({key:e.key+".y",label:"y",min:e.y?.min??-100,max:e.y?.max??100,step:e.y?.step??.01,value:()=>e.value().y,onChange:t=>{const i=e.value();e.onChange({x:i.x,y:t})}});return o.applyTheme(this.theme),t.addControl(o),t}buildPoint3D(e){const t=new n.GuiFolder;t.id=e.key,t.title=e.label??e.key,t.expanded=!0,t.applyTheme(this.theme);const i=[{name:"x",getter:()=>e.value().x,setter:t=>{const i=e.value();e.onChange({x:t,y:i.y,z:i.z})}},{name:"y",getter:()=>e.value().y,setter:t=>{const i=e.value();e.onChange({x:i.x,y:t,z:i.z})}},{name:"z",getter:()=>e.value().z,setter:t=>{const i=e.value();e.onChange({x:i.x,y:i.y,z:t})}}];for(const o of i){const i=new a.GuiSlider({key:e.key+"."+o.name,label:o.name,min:-100,max:100,step:.01,value:o.getter,onChange:o.setter});i.applyTheme(this.theme),t.addControl(i)}return t}buildSeparator(){const e=new u.GuiSeparator;return e.applyTheme(this.theme),e}buildButtonRow(e){const t=new i.GuiButtonRow(e);return t.applyTheme(this.theme),t}buildSubfolder(e,t,i,o){const r=new n.GuiFolder;return r.id=e,r.title=e,r.expanded=t??!1,r.applyTheme(this.theme),this.buildControls(r,i,o),r}buildReorderList(e){const t=new l.GuiReorderList(e);return t.applyTheme(this.theme),this.reorderLists.set(e.key,t),t}buildTextLog(e){const t=new c.GuiTextLog(e);t.applyTheme(this.theme);const i={widget:t,config:e};return this.textLogs.set(e.key,i),this._textLogList.push(i),t}refreshMonitors(){const e=this._monitorList;for(let t=0;t<e.length;t++){const i=e[t];i.widget.isEffectivelyVisible()&&i.widget.refresh()}}refreshTextLogs(){const e=this._textLogList;for(let t=0;t<e.length;t++){const i=e[t];i.widget.isEffectivelyVisible()&&i.widget.refresh()}}clear(){this.monitors.clear(),this.textLogs.clear(),this.customControls.clear(),this.folders.clear(),this.reorderLists.clear(),this._monitorList.length=0,this._textLogList.length=0}};

package/dist/panel/widget-builder.d.ts

@@ -0,0 +1,80 @@
+import { Widget } from '../core/widget';
+import { GuiFolder } from '../gui/gui-folder';
+import { GuiMonitor } from '../gui/gui-monitor';
+import { GuiReorderList } from '../gui/gui-reorder-list';
+import { GuiTextLog } from '../gui/gui-text-log';
+import { InspectTheme } from '../themes/inspect-theme';
+import { ControlConfig, CustomControlBuilder, FolderConfig, MonitorConfig, TextLogConfig } from '../types';
+/** a monitor widget paired with the config it was built from, for refresh and state access. */
+interface MonitorEntry {
+    widget: GuiMonitor;
+    config: MonitorConfig;
+}
+/** a text log widget paired with the config it was built from, for refresh. */
+interface TextLogEntry {
+    widget: GuiTextLog;
+    config: TextLogConfig;
+}
+/**
+ * Factory that constructs themed GUI widgets from declarative control configs.
+ * Tracks monitors, text logs, custom controls, and folders for refresh and state export.
+ */
+export declare class WidgetBuilder {
+    /** theme applied to every widget this builder creates. */
+    readonly theme: InspectTheme;
+    /** monitor entries keyed by control key. */
+    readonly monitors: Map<string, MonitorEntry>;
+    /** text log entries keyed by control key. */
+    readonly textLogs: Map<string, TextLogEntry>;
+    /** APIs returned by custom control builders, keyed by control key. */
+    readonly customControls: Map<string, unknown>;
+    /** folders keyed by id, used for state export and refresh traversal. */
+    readonly folders: Map<string, GuiFolder>;
+    /** reorder lists keyed by control key. */
+    readonly reorderLists: Map<string, GuiReorderList>;
+    private _monitorList;
+    private _textLogList;
+    /** stores the theme applied to widgets built by this instance. */
+    constructor(theme: InspectTheme);
+    /** builds a themed folder widget and registers it by id. */
+    buildFolder(config: FolderConfig): GuiFolder;
+    /** builds each control config and adds the resulting widgets to the folder. */
+    buildControls(folder: GuiFolder, controls: ControlConfig[], customBuilders?: Record<string, CustomControlBuilder>): void;
+    /** builds a single control by type, falling back to custom builders for unknown types. */
+    buildControl(folder: GuiFolder, control: ControlConfig, customBuilders?: Record<string, CustomControlBuilder>): Widget | null;
+    /** builds a themed slider control from a slider config. */
+    private buildSlider;
+    /** builds a themed toggle control from a toggle config. */
+    private buildToggle;
+    /** builds a themed dropdown select control from a select config. */
+    private buildSelect;
+    /** builds a themed action button from a button config. */
+    private buildButton;
+    /** builds a monitor control, primes it with a first sample, and registers it for later refresh. */
+    private buildMonitor;
+    /** builds a themed color picker control from a color config. */
+    private buildColor;
+    /** builds a themed text input control from a text config. */
+    private buildText;
+    /** builds a 2D point editor as a folder of x and y sliders that read and write the shared point value. */
+    private buildPoint2D;
+    /** builds a 3D point editor as a folder of x, y, and z sliders that read and write the shared point value. */
+    private buildPoint3D;
+    /** builds a themed divider control. */
+    private buildSeparator;
+    /** builds a themed row of action buttons from a button-row config. */
+    private buildButtonRow;
+    /** builds a nested folder and recursively builds its child controls into it. */
+    private buildSubfolder;
+    /** builds a reorder list control and registers it by key. */
+    private buildReorderList;
+    /** builds a text log control and registers it for later refresh. */
+    private buildTextLog;
+    /** refreshes every visible monitor widget. */
+    refreshMonitors(): void;
+    /** refreshes every visible text log widget. */
+    refreshTextLogs(): void;
+    /** clears all tracked monitors, text logs, custom controls, folders, and lists. */
+    clear(): void;
+}
+export {};

package/dist/panel/widget-builder.mjs

@@ -0,0 +1 @@
+import{Widget as e}from"../core/widget.mjs";import{GuiButton as t}from"../gui/gui-button.mjs";import{GuiButtonRow as o}from"../gui/gui-button-row.mjs";import{GuiColor as i}from"../gui/gui-color.mjs";import{GuiFolder as n}from"../gui/gui-folder.mjs";import{GuiMonitor as r}from"../gui/gui-monitor.mjs";import{GuiReorderList as s}from"../gui/gui-reorder-list.mjs";import{GuiSelect as l}from"../gui/gui-select.mjs";import{GuiSeparator as a}from"../gui/gui-separator.mjs";import{GuiSlider as u}from"../gui/gui-slider.mjs";import{GuiText as h}from"../gui/gui-text.mjs";import{GuiTextLog as m}from"../gui/gui-text-log.mjs";import{GuiToggle as g}from"../gui/gui-toggle.mjs";class c{theme;monitors=/* @__PURE__ */new Map;textLogs=/* @__PURE__ */new Map;customControls=/* @__PURE__ */new Map;folders=/* @__PURE__ */new Map;reorderLists=/* @__PURE__ */new Map;_monitorList=[];_textLogList=[];constructor(e){this.theme=e}buildFolder(e){const t=new n;return t.id=e.id,t.title=e.title,t.expanded=e.expanded??!1,t.applyTheme(this.theme),this.folders.set(e.id,t),t}buildControls(e,t,o){for(let i=0;i<t.length;i++){const n=this.buildControl(e,t[i],o);n&&e.addControl(n)}}buildControl(t,o,i){switch(o.type){case"slider":return this.buildSlider(o.config);case"toggle":return this.buildToggle(o.config);case"select":return this.buildSelect(o.config);case"button":return this.buildButton(o.config);case"monitor":return this.buildMonitor(o.config);case"color":return this.buildColor(o.config);case"text":return this.buildText(o.config);case"point2d":return this.buildPoint2D(o.config);case"point3d":return this.buildPoint3D(o.config);case"separator":return this.buildSeparator();case"buttonRow":return this.buildButtonRow(o.config);case"subfolder":return this.buildSubfolder(o.config.title,o.config.expanded,o.config.controls,i);case"reorderList":return this.buildReorderList(o.config);case"textLog":return this.buildTextLog(o.config);default:{const n=o;if(i){const o=i[n.type];if(o){const i=o(t,n.config),r=n.config.key;if(i&&r&&this.customControls.set(r,i),i instanceof e)return i}}return null}}}buildSlider(e){const t=new u({key:e.key,label:e.label??e.key,min:e.min,max:e.max,step:e.step??0,value:e.value,onChange:e.onChange,applyOnRelease:e.applyOnRelease});return t.applyTheme(this.theme),t}buildToggle(e){const t=new g({key:e.key,label:e.label??e.key,value:e.value,onChange:e.onChange});return t.applyTheme(this.theme),t}buildSelect(e){const t=new l({key:e.key,label:e.label??e.key,options:e.options,value:e.value,onChange:e.onChange});return t.applyTheme(this.theme),t}buildButton(e){const o=new t(e.title,e.onClick);return o.applyTheme(this.theme),o}buildMonitor(e){const t=new r({key:e.key,label:e.label??e.key,value:e.value,format:e.format,graph:"graph"===e.view,interval:e.interval,min:e.min,max:e.max});t.applyTheme(this.theme),t.refresh();const o={widget:t,config:e};return this.monitors.set(e.key,o),this._monitorList.push(o),t}buildColor(e){const t=new i({key:e.key,label:e.label??e.key,value:e.value,onChange:e.onChange,mode:e.colorType??"float",alpha:e.alpha,displayFormat:e.displayFormat});return t.applyTheme(this.theme),t}buildText(e){const t=new h({key:e.key,label:e.label??e.key,value:e.value,onChange:e.onChange});return t.applyTheme(this.theme),t}buildPoint2D(e){const t=new n;t.id=e.key,t.title=e.label??e.key,t.expanded=!0,t.applyTheme(this.theme);const o=new u({key:e.key+".x",label:"x",min:e.x?.min??-100,max:e.x?.max??100,step:e.x?.step??.01,value:()=>e.value().x,onChange:t=>{const o=e.value();e.onChange({x:t,y:o.y})}});o.applyTheme(this.theme),t.addControl(o);const i=new u({key:e.key+".y",label:"y",min:e.y?.min??-100,max:e.y?.max??100,step:e.y?.step??.01,value:()=>e.value().y,onChange:t=>{const o=e.value();e.onChange({x:o.x,y:t})}});return i.applyTheme(this.theme),t.addControl(i),t}buildPoint3D(e){const t=new n;t.id=e.key,t.title=e.label??e.key,t.expanded=!0,t.applyTheme(this.theme);const o=[{name:"x",getter:()=>e.value().x,setter:t=>{const o=e.value();e.onChange({x:t,y:o.y,z:o.z})}},{name:"y",getter:()=>e.value().y,setter:t=>{const o=e.value();e.onChange({x:o.x,y:t,z:o.z})}},{name:"z",getter:()=>e.value().z,setter:t=>{const o=e.value();e.onChange({x:o.x,y:o.y,z:t})}}];for(const i of o){const o=new u({key:e.key+"."+i.name,label:i.name,min:-100,max:100,step:.01,value:i.getter,onChange:i.setter});o.applyTheme(this.theme),t.addControl(o)}return t}buildSeparator(){const e=new a;return e.applyTheme(this.theme),e}buildButtonRow(e){const t=new o(e);return t.applyTheme(this.theme),t}buildSubfolder(e,t,o,i){const r=new n;return r.id=e,r.title=e,r.expanded=t??!1,r.applyTheme(this.theme),this.buildControls(r,o,i),r}buildReorderList(e){const t=new s(e);return t.applyTheme(this.theme),this.reorderLists.set(e.key,t),t}buildTextLog(e){const t=new m(e);t.applyTheme(this.theme);const o={widget:t,config:e};return this.textLogs.set(e.key,o),this._textLogList.push(o),t}refreshMonitors(){const e=this._monitorList;for(let t=0;t<e.length;t++){const o=e[t];o.widget.isEffectivelyVisible()&&o.widget.refresh()}}refreshTextLogs(){const e=this._textLogList;for(let t=0;t<e.length;t++){const o=e[t];o.widget.isEffectivelyVisible()&&o.widget.refresh()}}clear(){this.monitors.clear(),this.textLogs.clear(),this.customControls.clear(),this.folders.clear(),this.reorderLists.clear(),this._monitorList.length=0,this._textLogList.length=0}}export{c as WidgetBuilder};

package/dist/themes/dark.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.createDarkTheme=function(e){return{bgApp:232,bgPanel:168431321,bgPanelInset:64,bgPanelRaised:4294967066,bgButton:4294967071,bgButtonHover:4294967078,bgButtonActive:4294967104,bgInput:4294967060,bgSelected:2192900019,bgScrollTrack:0,bgScrollThumb:4294967078,borderPanel:4294967060,borderInset:4294967055,borderRaised:4294967060,textPrimary:4294967282,textSecondary:4294967129,textMuted:4294967168,textValue:3034382297,textTitle:4294967270,textHighlight:4294967295,fontAtlas:e,spacingXS:1,spacingSM:2,spacingMD:4,spacingLG:8,borderRadius:3,buttonHeight:24,labelHeight:24,separatorThickness:2,bgFolder:4294967055,bgFolderHover:4294967063,textFolder:4294967270,bgAccent:2192900019,bgAccentDim:2192899917,textLabel:4294967168,bgOverlay:170,controlHeight:24,controlGap:4,labelRatio:.36,folderHeaderHeight:28,panelPadding:8,scrollbarWidth:5,textOffsetY:0}};

package/dist/themes/dark.d.ts

@@ -0,0 +1,4 @@
+import { InspectTheme } from './inspect-theme';
+import { FontAtlas } from '../core/atlas';
+/** Creates the default dark theme with semi-transparent backgrounds. */
+export declare function createDarkTheme(fontAtlas: FontAtlas): InspectTheme;

package/dist/themes/dark.mjs

@@ -0,0 +1 @@
+function e(e){return{bgApp:232,bgPanel:168431321,bgPanelInset:64,bgPanelRaised:4294967066,bgButton:4294967071,bgButtonHover:4294967078,bgButtonActive:4294967104,bgInput:4294967060,bgSelected:2192900019,bgScrollTrack:0,bgScrollThumb:4294967078,borderPanel:4294967060,borderInset:4294967055,borderRaised:4294967060,textPrimary:4294967282,textSecondary:4294967129,textMuted:4294967168,textValue:3034382297,textTitle:4294967270,textHighlight:4294967295,fontAtlas:e,spacingXS:1,spacingSM:2,spacingMD:4,spacingLG:8,borderRadius:3,buttonHeight:24,labelHeight:24,separatorThickness:2,bgFolder:4294967055,bgFolderHover:4294967063,textFolder:4294967270,bgAccent:2192900019,bgAccentDim:2192899917,textLabel:4294967168,bgOverlay:170,controlHeight:24,controlGap:4,labelRatio:.36,folderHeaderHeight:28,panelPadding:8,scrollbarWidth:5,textOffsetY:0}}export{e as createDarkTheme};

package/dist/themes/inspect-theme.d.ts

@@ -0,0 +1,20 @@
+import { Theme } from '../core/theme';
+/** Extended theme tokens specific to the inspect panel (folders, accents, layout sizes). */
+export interface InspectTheme extends Theme {
+    bgFolder: number;
+    bgFolderHover: number;
+    textFolder: number;
+    bgAccent: number;
+    bgAccentDim: number;
+    textLabel: number;
+    bgOverlay: number;
+    controlHeight: number;
+    controlGap: number;
+    /** fraction of control width given to the label column. */
+    labelRatio: number;
+    folderHeaderHeight: number;
+    panelPadding: number;
+    scrollbarWidth: number;
+    /** vertical nudge applied to baseline-align text within a control. */
+    textOffsetY: number;
+}

package/dist/types.cjs

@@ -0,0 +1 @@
+"use strict";function t(t){return{type:"slider",config:t}}function o(t){return{type:"toggle",config:t}}function e(t){return{type:"select",config:t}}function n(t){return{type:"color",config:t}}function r(t){return{type:"text",config:t}}function i(t){return{type:"point2d",config:t}}function c(t){return{type:"point3d",config:t}}function u(t){return t.replace(/([a-z0-9])([A-Z])/g,"$1 $2").toLowerCase()}Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),(t||(t={})).of=function(t,o,e,n){const r=t;return{type:"slider",config:{key:o,label:e.label??u(o),min:e.min,max:e.max,step:e.step,applyOnRelease:e.applyOnRelease,value:()=>r[o],onChange:t=>{r[o]=t,n?.()}}}},(o||(o={})).of=function(t,o,e,n){const r="function"==typeof e,i=r?void 0:e,c=r?e:n,p=t;return{type:"toggle",config:{key:o,label:i?.label??u(o),value:()=>p[o],onChange:t=>{p[o]=t,c?.()}}}},(e||(e={})).of=function(t,o,e,n){const r=t;return{type:"select",config:{key:o,label:e.label??u(o),options:e.options,value:()=>r[o],onChange:t=>{r[o]=t,n?.()}}}},(n||(n={})).of=function(t,o,e,n){const r="function"==typeof e,i=r?void 0:e,c=r?e:n,p=t;return{type:"color",config:{key:o,label:i?.label??u(o),colorType:i?.colorType,alpha:i?.alpha,displayFormat:i?.displayFormat,value:()=>p[o],onChange:t=>{const e=p[o];null!==t&&"object"==typeof t&&null!==e&&"object"==typeof e?Object.assign(e,t):p[o]=t,c?.()}}}},(r||(r={})).of=function(t,o,e,n){const r="function"==typeof e,i=r?void 0:e,c=r?e:n,p=t;return{type:"text",config:{key:o,label:i?.label??u(o),value:()=>p[o],onChange:t=>{p[o]=t,c?.()}}}},(i||(i={})).of=function(t,o,e,n){const r="function"==typeof e,i=r?void 0:e,c=r?e:n,p=t;return{type:"point2d",config:{key:o,label:i?.label??u(o),x:i?.x,y:i?.y,value:()=>p[o],onChange:t=>{p[o]=t,c?.()}}}},(c||(c={})).of=function(t,o,e,n){const r="function"==typeof e,i=r?void 0:e,c=r?e:n,p=t;return{type:"point3d",config:{key:o,label:i?.label??u(o),value:()=>p[o],onChange:t=>{p[o]=t,c?.()}}}},exports.button=function(t){return{type:"button",config:t}},exports.buttonRow=function(t){return{type:"buttonRow",config:t}},exports.color=n,exports.customControl=function(t,o){return{type:t,config:o}},exports.matrixGrid=function(t){return{type:"matrixGrid",config:t}},exports.monitor=function(t){return{type:"monitor",config:t}},exports.point2d=i,exports.point3d=c,exports.reorderList=function(t){return{type:"reorderList",config:t}},exports.select=e,exports.separator=function(t){return{type:"separator",config:{key:t}}},exports.slider=t,exports.subfolder=function(t){return{type:"subfolder",config:t}},exports.text=r,exports.textLog=function(t){return{type:"textLog",config:t}},exports.toggle=o;

package/dist/types.d.ts

@@ -0,0 +1,354 @@
+import { InspectTheme } from './themes/inspect-theme';
+/** Configuration for a numeric slider control. */
+export interface SliderConfig {
+    key: string;
+    label?: string;
+    min: number;
+    max: number;
+    step?: number;
+    value: () => number;
+    onChange: (value: number) => void;
+    applyOnRelease?: boolean;
+}
+/** Configuration for a boolean toggle control. */
+export interface ToggleConfig {
+    key: string;
+    label?: string;
+    value: () => boolean;
+    onChange: (value: boolean) => void;
+}
+/** Configuration for a dropdown select control. */
+export interface SelectConfig<T = string | number> {
+    key: string;
+    label?: string;
+    options: Record<string, T>;
+    value: () => T;
+    onChange: (value: T) => void;
+}
+/** Configuration for a clickable button control. */
+export interface ButtonConfig {
+    key: string;
+    title: string;
+    onClick: () => void;
+}
+/** Configuration for a read-only monitor display (text or graph). */
+export interface MonitorConfig {
+    key: string;
+    label?: string;
+    value: () => string | number;
+    interval?: number;
+    format?: (v: number) => string;
+    view?: "graph";
+    min?: number;
+    max?: number;
+    rows?: number;
+}
+/** Supported display representations for color values. */
+export type ColorDisplayFormat = "hex" | "hexAlpha" | "floatRgb" | "floatRgba" | "intRgb" | "intRgba";
+/** Configuration for a color picker control. */
+export interface ColorConfig {
+    key: string;
+    label?: string;
+    value: () => string | {
+        r: number;
+        g: number;
+        b: number;
+    };
+    onChange: (value: string | {
+        r: number;
+        g: number;
+        b: number;
+    }) => void;
+    alpha?: boolean;
+    colorType?: "float" | "int";
+    displayFormat?: ColorDisplayFormat;
+}
+/** Configuration for a text input control. */
+export interface TextConfig {
+    key: string;
+    label?: string;
+    value: () => string;
+    onChange: (value: string) => void;
+}
+/** Configuration for a 2D point editor (x, y). */
+export interface Point2DConfig {
+    key: string;
+    label?: string;
+    value: () => {
+        x: number;
+        y: number;
+    };
+    onChange: (value: {
+        x: number;
+        y: number;
+    }) => void;
+    x?: {
+        min?: number;
+        max?: number;
+        step?: number;
+    };
+    y?: {
+        min?: number;
+        max?: number;
+        step?: number;
+    };
+}
+/** Configuration for a 3D point editor (x, y, z). */
+export interface Point3DConfig {
+    key: string;
+    label?: string;
+    value: () => {
+        x: number;
+        y: number;
+        z: number;
+    };
+    onChange: (value: {
+        x: number;
+        y: number;
+        z: number;
+    }) => void;
+}
+/** Configuration for a visual separator line. */
+export interface SeparatorConfig {
+    key: string;
+}
+/** Configuration for an editable interaction matrix grid. */
+export interface MatrixGridConfig {
+    key: string;
+    label?: string;
+    nTypes: number;
+    matrix: Float32Array;
+    maxTypes: number;
+    palette: Float32Array;
+    onChange: (row: number, col: number, value: number) => void;
+    minValue?: number;
+    maxValue?: number;
+    tooltip?: (row: number, col: number, value: number) => string;
+}
+/** Configuration for a row of buttons sharing one line. */
+export interface ButtonRowConfig {
+    key: string;
+    buttons: {
+        title: string;
+        onClick: () => void;
+    }[];
+}
+/** Configuration for a collapsible subfolder of controls. */
+export interface SubfolderConfig {
+    key: string;
+    title: string;
+    expanded?: boolean;
+    controls: ControlConfig[];
+}
+/** Configuration for a drag-to-reorder list widget. */
+export interface ReorderListConfig {
+    key: string;
+    items: {
+        id: string;
+        label: string;
+    }[];
+    onChange: (newOrder: string[]) => void;
+}
+/** Configuration for a scrollable text log display. */
+export interface TextLogConfig {
+    key: string;
+    rows?: number;
+    getValue: () => string;
+}
+/** Discriminated union of all control configurations. */
+export type ControlConfig = {
+    type: "slider";
+    config: SliderConfig;
+} | {
+    type: "toggle";
+    config: ToggleConfig;
+} | {
+    type: "select";
+    config: SelectConfig;
+} | {
+    type: "button";
+    config: ButtonConfig;
+} | {
+    type: "monitor";
+    config: MonitorConfig;
+} | {
+    type: "color";
+    config: ColorConfig;
+} | {
+    type: "text";
+    config: TextConfig;
+} | {
+    type: "point2d";
+    config: Point2DConfig;
+} | {
+    type: "point3d";
+    config: Point3DConfig;
+} | {
+    type: "separator";
+    config: SeparatorConfig;
+} | {
+    type: "matrixGrid";
+    config: MatrixGridConfig;
+} | {
+    type: "buttonRow";
+    config: ButtonRowConfig;
+} | {
+    type: "subfolder";
+    config: SubfolderConfig;
+} | {
+    type: "reorderList";
+    config: ReorderListConfig;
+} | {
+    type: "textLog";
+    config: TextLogConfig;
+};
+/** Top-level folder containing a set of controls. */
+export interface FolderConfig {
+    id: string;
+    title: string;
+    expanded?: boolean;
+    parent?: string;
+    controls: ControlConfig[];
+}
+/** Configuration for a single tab page containing folders. */
+export interface TabPageConfig {
+    title: string;
+    folders: FolderConfig[];
+    showImportExport?: boolean;
+}
+/** Callback signature for registering a custom control builder. */
+export type CustomControlBuilder = (folder: any, config: Record<string, any>) => any;
+/** Mount options common to the panel, independent of theme and font settings. */
+export interface BaseMountOptions {
+    position?: "left" | "right";
+    width?: number;
+    toggleKey?: string;
+    persistVisibility?: boolean;
+    storageKey?: string;
+    initiallyVisible?: boolean;
+    showImportExport?: boolean;
+    showToggleButton?: boolean;
+    toggleButtonSize?: number;
+    tabBarReservedEdge?: number;
+    borderRadius?: number;
+    margin?: number;
+    debugMode?: boolean;
+    customPlugins?: unknown[];
+    customControlBuilders?: Record<string, CustomControlBuilder>;
+}
+/** Create a slider control config. */
+export declare function slider(config: SliderConfig): ControlConfig;
+/** Create a toggle control config. */
+export declare function toggle(config: ToggleConfig): ControlConfig;
+/** Create a select control config. */
+export declare function select<T = string | number>(config: SelectConfig<T>): ControlConfig;
+/** Create a button control config. */
+export declare function button(config: ButtonConfig): ControlConfig;
+/** Create a monitor control config. */
+export declare function monitor(config: MonitorConfig): ControlConfig;
+/** Create a color picker control config. */
+export declare function color(config: ColorConfig): ControlConfig;
+/** Create a text input control config. */
+export declare function text(config: TextConfig): ControlConfig;
+/** Create a 2D point editor control config. */
+export declare function point2d(config: Point2DConfig): ControlConfig;
+/** Create a 3D point editor control config. */
+export declare function point3d(config: Point3DConfig): ControlConfig;
+/** Create a separator control config. */
+export declare function separator(key: string): ControlConfig;
+/** Create a matrix grid control config. */
+export declare function matrixGrid(config: MatrixGridConfig): ControlConfig;
+/** Create a button row control config. */
+export declare function buttonRow(config: ButtonRowConfig): ControlConfig;
+/** Create a subfolder control config. */
+export declare function subfolder(config: SubfolderConfig): ControlConfig;
+/** Create a reorder list control config. */
+export declare function reorderList(config: ReorderListConfig): ControlConfig;
+/** Create a text log control config. */
+export declare function textLog(config: TextLogConfig): ControlConfig;
+/** Create a custom control config with an arbitrary type string. */
+export declare function customControl(type: string, config: Record<string, any>): ControlConfig;
+/** Extract keys of T whose values extend V. */
+export type KeysOfType<T, V> = {
+    [K in keyof T]: T[K] extends V ? K : never;
+}[keyof T] & string;
+export declare namespace slider {
+    /** Bind a slider to a numeric property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, number>, opts: {
+        min: number;
+        max: number;
+        step?: number;
+        label?: string;
+        applyOnRelease?: boolean;
+    }, onChange?: () => void): ControlConfig;
+}
+export declare namespace toggle {
+    /** Bind a toggle to a boolean property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, boolean>, optsOrOnChange?: {
+        label?: string;
+    } | (() => void), onChange?: () => void): ControlConfig;
+}
+export declare namespace select {
+    /** Bind a select dropdown to a string or number property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, string | number>, opts: {
+        options: Record<string, string | number>;
+        label?: string;
+    }, onChange?: () => void): ControlConfig;
+}
+export declare namespace color {
+    /** Bind a color picker to a color property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, string | {
+        r: number;
+        g: number;
+        b: number;
+    }>, optsOrOnChange?: {
+        colorType?: "float" | "int";
+        alpha?: boolean;
+        label?: string;
+        displayFormat?: ColorDisplayFormat;
+    } | (() => void), onChange?: () => void): ControlConfig;
+}
+export declare namespace text {
+    /** Bind a text input to a string property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, string>, optsOrOnChange?: {
+        label?: string;
+    } | (() => void), onChange?: () => void): ControlConfig;
+}
+export declare namespace point2d {
+    /** Bind a 2D point editor to an {x, y} property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, {
+        x: number;
+        y: number;
+    }>, optsOrOnChange?: {
+        label?: string;
+        x?: {
+            min?: number;
+            max?: number;
+            step?: number;
+        };
+        y?: {
+            min?: number;
+            max?: number;
+            step?: number;
+        };
+    } | (() => void), onChange?: () => void): ControlConfig;
+}
+export declare namespace point3d {
+    /** Bind a 3D point editor to an {x, y, z} property of the target object. */
+    function of<T>(target: T, key: KeysOfType<T, {
+        x: number;
+        y: number;
+        z: number;
+    }>, optsOrOnChange?: {
+        label?: string;
+    } | (() => void), onChange?: () => void): ControlConfig;
+}
+/** Options for mounting the inspect panel into the DOM. */
+export interface MountOptions extends BaseMountOptions, Partial<Omit<InspectTheme, "fontAtlas" | "borderRadius">> {
+    theme?: "dark" | InspectTheme;
+    widgetBorderRadius?: number;
+    fontUrl?: string;
+    fontData?: ArrayBuffer;
+    fontFamily?: string;
+    fontSize?: number;
+}

package/dist/types.mjs

@@ -0,0 +1 @@
+function n(n){return{type:"slider",config:n}}function t(n){return{type:"toggle",config:n}}function e(n){return{type:"select",config:n}}function o(n){return{type:"button",config:n}}function i(n){return{type:"monitor",config:n}}function c(n){return{type:"color",config:n}}function r(n){return{type:"text",config:n}}function f(n){return{type:"point2d",config:n}}function u(n){return{type:"point3d",config:n}}function l(n){return{type:"separator",config:{key:n}}}function p(n){return{type:"matrixGrid",config:n}}function a(n){return{type:"buttonRow",config:n}}function y(n){return{type:"subfolder",config:n}}function g(n){return{type:"reorderList",config:n}}function s(n){return{type:"textLog",config:n}}function b(n,t){return{type:n,config:t}}function d(n){return n.replace(/([a-z0-9])([A-Z])/g,"$1 $2").toLowerCase()}(n||(n={})).of=function(n,t,e,o){const i=n;return{type:"slider",config:{key:t,label:e.label??d(t),min:e.min,max:e.max,step:e.step,applyOnRelease:e.applyOnRelease,value:()=>i[t],onChange:n=>{i[t]=n,o?.()}}}},(t||(t={})).of=function(n,t,e,o){const i="function"==typeof e,c=i?void 0:e,r=i?e:o,f=n;return{type:"toggle",config:{key:t,label:c?.label??d(t),value:()=>f[t],onChange:n=>{f[t]=n,r?.()}}}},(e||(e={})).of=function(n,t,e,o){const i=n;return{type:"select",config:{key:t,label:e.label??d(t),options:e.options,value:()=>i[t],onChange:n=>{i[t]=n,o?.()}}}},(c||(c={})).of=function(n,t,e,o){const i="function"==typeof e,c=i?void 0:e,r=i?e:o,f=n;return{type:"color",config:{key:t,label:c?.label??d(t),colorType:c?.colorType,alpha:c?.alpha,displayFormat:c?.displayFormat,value:()=>f[t],onChange:n=>{const e=f[t];null!==n&&"object"==typeof n&&null!==e&&"object"==typeof e?Object.assign(e,n):f[t]=n,r?.()}}}},(r||(r={})).of=function(n,t,e,o){const i="function"==typeof e,c=i?void 0:e,r=i?e:o,f=n;return{type:"text",config:{key:t,label:c?.label??d(t),value:()=>f[t],onChange:n=>{f[t]=n,r?.()}}}},(f||(f={})).of=function(n,t,e,o){const i="function"==typeof e,c=i?void 0:e,r=i?e:o,f=n;return{type:"point2d",config:{key:t,label:c?.label??d(t),x:c?.x,y:c?.y,value:()=>f[t],onChange:n=>{f[t]=n,r?.()}}}},(u||(u={})).of=function(n,t,e,o){const i="function"==typeof e,c=i?void 0:e,r=i?e:o,f=n;return{type:"point3d",config:{key:t,label:c?.label??d(t),value:()=>f[t],onChange:n=>{f[t]=n,r?.()}}}};export{o as button,a as buttonRow,c as color,b as customControl,p as matrixGrid,i as monitor,f as point2d,u as point3d,g as reorderList,e as select,l as separator,n as slider,y as subfolder,r as text,s as textLog,t as toggle};

package/dist/utils/activity.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});let t=!1;exports.getGuiActive=function(){return t},exports.setGuiActive=function(e){t=e};

package/dist/utils/activity.d.ts

@@ -0,0 +1,4 @@
+/** set whether a GUI control is currently being interacted with. */
+export declare function setGuiActive(active: boolean): void;
+/** whether a GUI control is currently being interacted with. */
+export declare function getGuiActive(): boolean;

package/dist/utils/activity.mjs

@@ -0,0 +1 @@
+let n=!1;function t(t){n=t}function e(){return n}export{e as getGuiActive,t as setGuiActive};

package/dist/utils/color-convert.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=[0,0,0],r=[0,0,0],o=Array.from({length:256},(t,r)=>r.toString(16).padStart(2,"0"));exports.HEX_LUT=o,exports.hsvToRgb=function(t,o,e){const n=e*o,s=n*(1-Math.abs(t/60%2-1)),a=e-n;let c=0,u=0,i=0;return t<60?(c=n,u=s,i=0):t<120?(c=s,u=n,i=0):t<180?(c=0,u=n,i=s):t<240?(c=0,u=s,i=n):t<300?(c=s,u=0,i=n):(c=n,u=0,i=s),r[0]=c+a,r[1]=u+a,r[2]=i+a,r},exports.packRGBA=function(t,r,o,e=1){return(255*t+.5<<24|255*r+.5<<16|255*o+.5<<8|255*e+.5)>>>0},exports.rgbToHsv=function(r,o,e){const n=Math.max(r,o,e),s=n-Math.min(r,o,e);let a=0;return s>0&&(a=n===r?(o-e)/s%6:n===o?(e-r)/s+2:(r-o)/s+4,a*=60,a<0&&(a+=360)),t[0]=a,t[1]=0===n?0:s/n,t[2]=n,t};