@mgz-dev/inspect 0.1.0

package/dist/gui/gui-monitor.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./labeled-control.cjs"),i=require("../core/layouts/stack-layout.cjs"),e=require("../defaults.cjs"),r=require("../widgets/box.cjs"),a=require("../widgets/canvas-widget.cjs"),s=require("../widgets/label.cjs");class n extends t.LabeledControl{_config;_valueLabel;_valueBg;_graph;_ringBuffer;_ringHead=0;_ringCount=0;_ringMin=1/0;_ringMax=-1/0;_lastRefreshTime=0;_lastRawValue="";_lastFormattedNum=NaN;_lastFormattedStr="";_lastGraphValue=NaN;_graphStableCount=0;constructor(t){if(super(),this._config=t,this.labelText=t.label,this._ringBuffer=new Float64Array(e.DEFAULTS.monitorRingSize),t.graph)this._valueLabel=null,this._valueBg=null,this.sizingY="fixed",this.preferredHeight=e.DEFAULTS.monitorGraphHeight,this._graph=new a.CanvasWidget,this._graph.sizingX="grow",this._graph.sizingY="grow",this._graph.flexGrow=1,this._graph.onDraw=(t,i,e,r)=>{this.drawGraph(t,i,e,r)},this.controlContainer.addChild(this._graph);else{this._graph=null,this._valueBg=new r.Box;const t=this._valueBg;t.sizingX="grow",t.sizingY="grow",t.flexGrow=1,t.borderRadius=2,t.layout=new i.StackLayout("horizontal",0,"end","stretch"),t.setPadding(0,4,0,4),this._valueLabel=new s.Label,this._valueLabel.sizingX="grow",this._valueLabel.sizingY="grow",this._valueLabel.flexGrow=1,this._valueLabel.hAlign="right",this._valueLabel.vAlign="middle",this._valueLabel.overflow="ellipsis",t.addChild(this._valueLabel),this.controlContainer.addChild(t)}}get config(){return this._config}applyTheme(t){super.applyTheme(t);const i=t;this._graph&&(this.preferredHeight=e.DEFAULTS.monitorGraphHeight),this._valueLabel&&(this._valueLabel.color=i.textValue),this._valueBg&&(this._valueBg.bgColor=t.bgPanelInset)}refresh(){const t=this._config.interval??0;if(t>0){const i=Date.now();if(i-this._lastRefreshTime<t)return;this._lastRefreshTime=i}const i=this._config.value();if(this._graph){const t="number"==typeof i?i:parseFloat(i)||0;t!==this._lastGraphValue?(this._lastGraphValue=t,this._graphStableCount=0,this.pushRingValue(t),this._graph.markDirty()):this._graphStableCount<e.DEFAULTS.monitorRingSize&&(this._graphStableCount++,this.pushRingValue(t),this._graph.markDirty())}else if(this._valueLabel){if(i===this._lastRawValue)return;this._lastRawValue=i;const t=this.formatValue(i);if(this._valueLabel.text===t)return;this._valueLabel.text=t,this._valueLabel.markDirty()}}pushRingValue(t){const i=this._ringCount>=e.DEFAULTS.monitorRingSize?this._ringBuffer[this._ringHead]:void 0;if(this._ringBuffer[this._ringHead]=t,this._ringHead=(this._ringHead+1)%e.DEFAULTS.monitorRingSize,this._ringCount<e.DEFAULTS.monitorRingSize&&this._ringCount++,t<this._ringMin&&(this._ringMin=t),t>this._ringMax&&(this._ringMax=t),void 0!==i&&(i===this._ringMin||i===this._ringMax)){this._ringMin=1/0,this._ringMax=-1/0;for(let t=0;t<this._ringCount;t++){const i=this._ringBuffer[t];i<this._ringMin&&(this._ringMin=i),i>this._ringMax&&(this._ringMax=i)}}}drawGraph(t,i,r,a){const s=i;if(t.fillRoundedRect(0,0,r,a,e.DEFAULTS.monitorGraphBorderRadius,i.bgPanelInset),t.strokeRoundedRect(0,0,r,a,e.DEFAULTS.monitorGraphBorderRadius,i.borderInset,e.DEFAULTS.monitorGraphStrokeWidth),this._ringCount<2)return;const n=this._config.min??this._ringMin,h=(this._config.max??this._ringMax)-n,o=h>0?h:1,l=s.bgAccent||i.textHighlight,g=r/(e.DEFAULTS.monitorRingSize-1),_=this._ringCount<e.DEFAULTS.monitorRingSize?0:this._ringHead;t.beginPath();for(let i=0;i<this._ringCount;i++){const r=(_+i)%e.DEFAULTS.monitorRingSize,s=i*g|0,h=a-1-(this._ringBuffer[r]-n)/o*(a-2)|0;0===i?t.moveTo(s,h):t.lineTo(s,h)}t.strokePath(l,e.DEFAULTS.monitorGraphStrokeWidth)}formatValue(t){return"string"==typeof t?t:(t===this._lastFormattedNum||(this._lastFormattedNum=t,this._config.format?this._lastFormattedStr=this._config.format(t):Number.isInteger(t)?this._lastFormattedStr=String(t):this._lastFormattedStr=t.toFixed(2)),this._lastFormattedStr)}}exports.GuiMonitor=n;

package/dist/gui/gui-monitor.d.ts

@@ -0,0 +1,53 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** Configuration for a read-only monitor display (text or graph). */
+export interface GuiMonitorConfig {
+    key: string;
+    label: string;
+    value: () => string | number;
+    format?: (value: number) => string;
+    graph?: boolean;
+    interval?: number;
+    min?: number;
+    max?: number;
+}
+/**
+ * Read-only control displaying a live value as text or a scrolling line graph.
+ * Uses a ring buffer to store recent samples for graph mode.
+ */
+export declare class GuiMonitor extends LabeledControl {
+    private readonly _config;
+    private readonly _valueLabel;
+    private readonly _valueBg;
+    private readonly _graph;
+    private readonly _ringBuffer;
+    private _ringHead;
+    private _ringCount;
+    private _ringMin;
+    private _ringMax;
+    private _lastRefreshTime;
+    private _lastRawValue;
+    private _lastFormattedNum;
+    private _lastFormattedStr;
+    private _lastGraphValue;
+    private _graphStableCount;
+    /** builds either a graph canvas or a right-aligned value label, depending on config.graph. */
+    constructor(config: GuiMonitorConfig);
+    /** the config this monitor was created with. */
+    get config(): GuiMonitorConfig;
+    /** applies theme colors to the value label and background. */
+    applyTheme(theme: Theme): void;
+    /** samples the current value and updates the text or graph, honoring the refresh interval. */
+    refresh(): void;
+    /**
+     * Appends a sample to the ring buffer, advancing the head and tracking the
+     * running min and max. The min and max update incrementally, but when the
+     * evicted sample was the current min or max the extent is rescanned since its
+     * true value can no longer be known.
+     */
+    private pushRingValue;
+    /** draws the inset background and a polyline of the buffered samples, oldest to newest, scaled to the value range. */
+    private drawGraph;
+    /** formats a number (config formatter, integer, or two decimals), caching the last; strings pass through. */
+    private formatValue;
+}

package/dist/gui/gui-monitor.mjs

@@ -0,0 +1 @@
+import{LabeledControl as t}from"./labeled-control.mjs";import{StackLayout as i}from"../core/layouts/stack-layout.mjs";import{DEFAULTS as r}from"../defaults.mjs";import{Box as e}from"../widgets/box.mjs";import{CanvasWidget as s}from"../widgets/canvas-widget.mjs";import{Label as a}from"../widgets/label.mjs";class n extends t{_config;_valueLabel;_valueBg;_graph;_ringBuffer;_ringHead=0;_ringCount=0;_ringMin=1/0;_ringMax=-1/0;_lastRefreshTime=0;_lastRawValue="";_lastFormattedNum=NaN;_lastFormattedStr="";_lastGraphValue=NaN;_graphStableCount=0;constructor(t){if(super(),this._config=t,this.labelText=t.label,this._ringBuffer=new Float64Array(r.monitorRingSize),t.graph)this._valueLabel=null,this._valueBg=null,this.sizingY="fixed",this.preferredHeight=r.monitorGraphHeight,this._graph=new s,this._graph.sizingX="grow",this._graph.sizingY="grow",this._graph.flexGrow=1,this._graph.onDraw=(t,i,r,e)=>{this.drawGraph(t,i,r,e)},this.controlContainer.addChild(this._graph);else{this._graph=null,this._valueBg=new e;const t=this._valueBg;t.sizingX="grow",t.sizingY="grow",t.flexGrow=1,t.borderRadius=2,t.layout=new i("horizontal",0,"end","stretch"),t.setPadding(0,4,0,4),this._valueLabel=new a,this._valueLabel.sizingX="grow",this._valueLabel.sizingY="grow",this._valueLabel.flexGrow=1,this._valueLabel.hAlign="right",this._valueLabel.vAlign="middle",this._valueLabel.overflow="ellipsis",t.addChild(this._valueLabel),this.controlContainer.addChild(t)}}get config(){return this._config}applyTheme(t){super.applyTheme(t);const i=t;this._graph&&(this.preferredHeight=r.monitorGraphHeight),this._valueLabel&&(this._valueLabel.color=i.textValue),this._valueBg&&(this._valueBg.bgColor=t.bgPanelInset)}refresh(){const t=this._config.interval??0;if(t>0){const i=Date.now();if(i-this._lastRefreshTime<t)return;this._lastRefreshTime=i}const i=this._config.value();if(this._graph){const t="number"==typeof i?i:parseFloat(i)||0;t!==this._lastGraphValue?(this._lastGraphValue=t,this._graphStableCount=0,this.pushRingValue(t),this._graph.markDirty()):this._graphStableCount<r.monitorRingSize&&(this._graphStableCount++,this.pushRingValue(t),this._graph.markDirty())}else if(this._valueLabel){if(i===this._lastRawValue)return;this._lastRawValue=i;const t=this.formatValue(i);if(this._valueLabel.text===t)return;this._valueLabel.text=t,this._valueLabel.markDirty()}}pushRingValue(t){const i=this._ringCount>=r.monitorRingSize?this._ringBuffer[this._ringHead]:void 0;if(this._ringBuffer[this._ringHead]=t,this._ringHead=(this._ringHead+1)%r.monitorRingSize,this._ringCount<r.monitorRingSize&&this._ringCount++,t<this._ringMin&&(this._ringMin=t),t>this._ringMax&&(this._ringMax=t),void 0!==i&&(i===this._ringMin||i===this._ringMax)){this._ringMin=1/0,this._ringMax=-1/0;for(let t=0;t<this._ringCount;t++){const i=this._ringBuffer[t];i<this._ringMin&&(this._ringMin=i),i>this._ringMax&&(this._ringMax=i)}}}drawGraph(t,i,e,s){const a=i;if(t.fillRoundedRect(0,0,e,s,r.monitorGraphBorderRadius,i.bgPanelInset),t.strokeRoundedRect(0,0,e,s,r.monitorGraphBorderRadius,i.borderInset,r.monitorGraphStrokeWidth),this._ringCount<2)return;const n=this._config.min??this._ringMin,h=(this._config.max??this._ringMax)-n,o=h>0?h:1,l=a.bgAccent||i.textHighlight,g=e/(r.monitorRingSize-1),_=this._ringCount<r.monitorRingSize?0:this._ringHead;t.beginPath();for(let i=0;i<this._ringCount;i++){const e=(_+i)%r.monitorRingSize,a=i*g|0,h=s-1-(this._ringBuffer[e]-n)/o*(s-2)|0;0===i?t.moveTo(a,h):t.lineTo(a,h)}t.strokePath(l,r.monitorGraphStrokeWidth)}formatValue(t){return"string"==typeof t?t:(t===this._lastFormattedNum||(this._lastFormattedNum=t,this._config.format?this._lastFormattedStr=this._config.format(t):Number.isInteger(t)?this._lastFormattedStr=String(t):this._lastFormattedStr=t.toFixed(2)),this._lastFormattedStr)}}export{n as GuiMonitor};

package/dist/gui/gui-point2d.d.ts

@@ -0,0 +1,43 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** Per-axis numeric constraints for a point control. */
+export interface AxisConfig {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/** Configuration for a 2D point editor control. */
+export interface GuiPoint2dConfig {
+    key: string;
+    label: string;
+    value: () => {
+        x: number;
+        y: number;
+    };
+    onChange: (value: {
+        x: number;
+        y: number;
+    }) => void;
+    x?: AxisConfig;
+    y?: AxisConfig;
+}
+/** Two-axis numeric input for editing a 2D point. */
+export declare class GuiPoint2d extends LabeledControl {
+    private readonly _config;
+    private readonly _inputX;
+    private readonly _inputY;
+    /** builds an X and a Y labeled input side by side, each wired to update its axis. */
+    constructor(config: GuiPoint2dConfig);
+    /** parses the edited axis, clamps to its constraints, and emits the combined point; ignores non-numeric input. */
+    private handleChange;
+    /** clamps a value to the axis's optional min and max, returning it unchanged when no constraints are set. */
+    private clampAxis;
+    private _lastX;
+    private _lastY;
+    /** syncs both axis inputs from the current value when it changed. */
+    refresh(): void;
+    /** applies base theme then styles the two axis inputs. */
+    applyTheme(theme: Theme): void;
+    /** the configuration this control was built from. */
+    get config(): GuiPoint2dConfig;
+}

package/dist/gui/gui-point3d.d.ts

@@ -0,0 +1,48 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** Per-axis numeric constraints for a point control. */
+export interface AxisConfig {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+/** Configuration for a 3D point editor control. */
+export interface GuiPoint3dConfig {
+    key: string;
+    label: string;
+    value: () => {
+        x: number;
+        y: number;
+        z: number;
+    };
+    onChange: (value: {
+        x: number;
+        y: number;
+        z: number;
+    }) => void;
+    x?: AxisConfig;
+    y?: AxisConfig;
+    z?: AxisConfig;
+}
+/** Three-axis numeric input for editing a 3D point. */
+export declare class GuiPoint3d extends LabeledControl {
+    private readonly _config;
+    private readonly _inputX;
+    private readonly _inputY;
+    private readonly _inputZ;
+    /** builds X, Y, and Z labeled inputs side by side, each wired to update its axis. */
+    constructor(config: GuiPoint3dConfig);
+    /** parses the edited axis, clamps to its constraints, and emits the combined point; ignores non-numeric input. */
+    private handleChange;
+    /** clamps a value to the axis's optional min and max, returning it unchanged when no constraints are set. */
+    private clampAxis;
+    private _lastX;
+    private _lastY;
+    private _lastZ;
+    /** syncs the three axis inputs from the current value if any axis changed. */
+    refresh(): void;
+    /** applies theme colors and border radius to the axis inputs. */
+    applyTheme(theme: Theme): void;
+    /** returns the control's configuration. */
+    get config(): GuiPoint3dConfig;
+}

package/dist/gui/gui-reorder-list.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../core/layouts/stack-layout.cjs"),t=require("../core/widget.cjs"),i=require("../defaults.cjs"),r=require("../widgets/box.cjs"),s=require("../widgets/label.cjs");class o extends t.Widget{_config;_rows=[];_itemOrder;_dragging=!1;_dragIndex=-1;_dragPointerId=-1;_insertIndex=-1;constructor(t){super(),this._config=t,this._itemOrder=t.items.map(e=>e.id),this.sizingX="grow",this.sizingY="fit",this.layout=new e.StackLayout("vertical",2,"start","stretch"),this.buildRows()}buildRows(){this.removeAllChildren(),this._rows=[];for(let t=0;t<this._config.items.length;t++){const o=this.findItemById(this._itemOrder[t]);if(!o)continue;const n=new r.Box;n.sizingX="grow",n.sizingY="fixed",n.preferredHeight=i.DEFAULTS.reorderRowHeight,n.bgColor=i.DEFAULTS.reorderRowBgColor,n.borderRadius=i.DEFAULTS.reorderRowBorderRadius,n.layout=new e.StackLayout("horizontal",6,"start","stretch"),n.setPadding(0,8,0,8);const d=new s.Label;d.text="::",d.color=i.DEFAULTS.reorderHandleColor,d.sizingX="fixed",d.sizingY="grow",d.preferredWidth=i.DEFAULTS.reorderHandleWidth,d.hAlign="center",d.vAlign="middle";const h=new s.Label;h.text=o.label,h.sizingX="grow",h.sizingY="grow",h.flexGrow=1,h.vAlign="middle",h.color=i.DEFAULTS.reorderItemLabelColor,n.addChild(d),n.addChild(h),this._rows.push(n),this.addChild(n)}}findItemById(e){const t=this._config.items;for(let i=0;i<t.length;i++)if(t[i].id===e)return t[i]}onPointerDown(e,r,s,o){if(0!==o)return!1;if(r>i.DEFAULTS.reorderHandleWidth+16)return!1;for(let i=0;i<this._rows.length;i++){const r=this._rows[i].geometry[t.SLOT_Y],o=this._rows[i].geometry[t.SLOT_HEIGHT];if(s>=r&&s<r+o)return this._dragging=!0,this._dragIndex=i,this._dragPointerId=e,this._insertIndex=i,this.markDirty(),!0}return!1}onPointerMove(e,i,r){if(!this._dragging||e!==this._dragPointerId)return;let s=0;for(let e=0;e<this._rows.length;e++)r>this._rows[e].geometry[t.SLOT_Y]+this._rows[e].geometry[t.SLOT_HEIGHT]/2&&(s=e+1);s=Math.max(0,Math.min(this._rows.length,s)),s!==this._insertIndex&&(this._insertIndex=s,this.markDirty())}onPointerUp(e,t,i,r){if(this._dragging&&e===this._dragPointerId){if(this._dragging=!1,this._dragPointerId=-1,this._insertIndex!==this._dragIndex&&this._insertIndex!==this._dragIndex+1){const e=this._itemOrder[this._dragIndex],t=[...this._itemOrder];t.splice(this._dragIndex,1);const i=this._insertIndex>this._dragIndex?this._insertIndex-1:this._insertIndex;t.splice(i,0,e),this._itemOrder=t,this._config.onChange(t),this.buildRows()}this._insertIndex=-1,this.markDirty()}}drawSelf(e,r){if(!this._dragging||this._insertIndex<0)return;let s;if(this._insertIndex>=this._rows.length){const e=this._rows[this._rows.length-1];s=e.geometry[t.SLOT_Y]+e.geometry[t.SLOT_HEIGHT]}else s=this._rows[this._insertIndex].geometry[t.SLOT_Y];e.fillRect(0,s-1,this.width,i.DEFAULTS.reorderIndicatorHeight,i.DEFAULTS.reorderIndicatorColor)}applyTheme(e){for(const e of this._rows)e.bgColor=0}get config(){return this._config}}exports.GuiReorderList=o;

package/dist/gui/gui-reorder-list.d.ts

@@ -0,0 +1,42 @@
+import { Widget } from '../core/widget';
+import { Renderer } from '../core/renderer';
+import { Theme } from '../core/theme';
+/** A single item within a reorderable list. */
+export interface ReorderItem {
+    id: string;
+    label: string;
+}
+/** Configuration for a drag-to-reorder list control. */
+export interface GuiReorderListConfig {
+    key: string;
+    items: ReorderItem[];
+    onChange: (newOrder: string[]) => void;
+}
+/** Drag-to-reorder list widget with handle-based pointer interaction. */
+export declare class GuiReorderList extends Widget {
+    private readonly _config;
+    private _rows;
+    private _itemOrder;
+    private _dragging;
+    private _dragIndex;
+    private _dragPointerId;
+    private _insertIndex;
+    /** seeds the working order from the config items and builds the initial rows. */
+    constructor(config: GuiReorderListConfig);
+    /** rebuilds the row widgets from the current order, each with a drag handle and item label. */
+    private buildRows;
+    /** looks up an item by id, or undefined when it is not in the config. */
+    private findItemById;
+    /** begins a drag when the press lands on a row handle with the primary button. */
+    onPointerDown(pointerId: number, x: number, y: number, button: number): boolean;
+    /** tracks the pointer to update the insertion indicator while dragging. */
+    onPointerMove(pointerId: number, _x: number, y: number): void;
+    /** commits the new order on release and notifies the change callback. */
+    onPointerUp(pointerId: number, _x: number, _y: number, _button: number): void;
+    /** while dragging, draws the horizontal insertion indicator at the target drop position. */
+    protected drawSelf(renderer: Renderer, _theme: Theme): void;
+    /** resets row backgrounds when the theme changes. */
+    applyTheme(_theme: Theme): void;
+    /** returns the list configuration. */
+    get config(): GuiReorderListConfig;
+}

package/dist/gui/gui-reorder-list.mjs

@@ -0,0 +1 @@
+import{StackLayout as t}from"../core/layouts/stack-layout.mjs";import{Widget as i,SLOT_Y as r,SLOT_HEIGHT as e}from"../core/widget.mjs";import{DEFAULTS as s}from"../defaults.mjs";import{Box as o}from"../widgets/box.mjs";import{Label as n}from"../widgets/label.mjs";class d extends i{_config;_rows=[];_itemOrder;_dragging=!1;_dragIndex=-1;_dragPointerId=-1;_insertIndex=-1;constructor(i){super(),this._config=i,this._itemOrder=i.items.map(t=>t.id),this.sizingX="grow",this.sizingY="fit",this.layout=new t("vertical",2,"start","stretch"),this.buildRows()}buildRows(){this.removeAllChildren(),this._rows=[];for(let i=0;i<this._config.items.length;i++){const r=this.findItemById(this._itemOrder[i]);if(!r)continue;const e=new o;e.sizingX="grow",e.sizingY="fixed",e.preferredHeight=s.reorderRowHeight,e.bgColor=s.reorderRowBgColor,e.borderRadius=s.reorderRowBorderRadius,e.layout=new t("horizontal",6,"start","stretch"),e.setPadding(0,8,0,8);const d=new n;d.text="::",d.color=s.reorderHandleColor,d.sizingX="fixed",d.sizingY="grow",d.preferredWidth=s.reorderHandleWidth,d.hAlign="center",d.vAlign="middle";const h=new n;h.text=r.label,h.sizingX="grow",h.sizingY="grow",h.flexGrow=1,h.vAlign="middle",h.color=s.reorderItemLabelColor,e.addChild(d),e.addChild(h),this._rows.push(e),this.addChild(e)}}findItemById(t){const i=this._config.items;for(let r=0;r<i.length;r++)if(i[r].id===t)return i[r]}onPointerDown(t,i,o,n){if(0!==n)return!1;if(i>s.reorderHandleWidth+16)return!1;for(let i=0;i<this._rows.length;i++){const s=this._rows[i].geometry[r],n=this._rows[i].geometry[e];if(o>=s&&o<s+n)return this._dragging=!0,this._dragIndex=i,this._dragPointerId=t,this._insertIndex=i,this.markDirty(),!0}return!1}onPointerMove(t,i,s){if(!this._dragging||t!==this._dragPointerId)return;let o=0;for(let t=0;t<this._rows.length;t++)s>this._rows[t].geometry[r]+this._rows[t].geometry[e]/2&&(o=t+1);o=Math.max(0,Math.min(this._rows.length,o)),o!==this._insertIndex&&(this._insertIndex=o,this.markDirty())}onPointerUp(t,i,r,e){if(this._dragging&&t===this._dragPointerId){if(this._dragging=!1,this._dragPointerId=-1,this._insertIndex!==this._dragIndex&&this._insertIndex!==this._dragIndex+1){const t=this._itemOrder[this._dragIndex],i=[...this._itemOrder];i.splice(this._dragIndex,1);const r=this._insertIndex>this._dragIndex?this._insertIndex-1:this._insertIndex;i.splice(r,0,t),this._itemOrder=i,this._config.onChange(i),this.buildRows()}this._insertIndex=-1,this.markDirty()}}drawSelf(t,i){if(!this._dragging||this._insertIndex<0)return;let o;if(this._insertIndex>=this._rows.length){const t=this._rows[this._rows.length-1];o=t.geometry[r]+t.geometry[e]}else o=this._rows[this._insertIndex].geometry[r];t.fillRect(0,o-1,this.width,s.reorderIndicatorHeight,s.reorderIndicatorColor)}applyTheme(t){for(const t of this._rows)t.bgColor=0}get config(){return this._config}}export{d as GuiReorderList};

package/dist/gui/gui-select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./labeled-control.cjs"),e=require("../core/layouts/stack-layout.cjs"),o=require("../defaults.cjs"),r=require("../widgets/box.cjs"),i=require("../widgets/button.cjs");class n extends t.LabeledControl{_config;_button;_cachedKeys;_cachedValues;_dropdown=null;_backdrop=null;_open=!1;constructor(t){super(),this._config=t,this.labelText=t.label;const e=Object.keys(t.options);this._cachedKeys=e,this._cachedValues=e.map(e=>t.options[e]),this._button=new i.Button,this._button.sizingX="grow",this._button.sizingY="grow",this._button.flexGrow=1,this._button.text=this.findCurrentLabel(),this._button.onClick=()=>this.toggleDropdown(),this.controlContainer.addChild(this._button)}findCurrentLabel(){const t=this._config.value();for(let e=0;e<this._cachedValues.length;e++)if(this._cachedValues[e]===t)return this._cachedKeys[e];return""}toggleDropdown(){this._open?this.closeDropdown():this.openDropdown()}getSurfaceRoot(){let t=this.parent;for(;t&&t.parent;)t=t.parent;return t}ensureDropdownWidgets(){if(this._dropdown)return;const t=this._cachedKeys,n=this._cachedValues,s=new r.Box;s.absolute=!0,s.anchorTop=0,s.anchorLeft=0,s.anchorRight=0,s.anchorBottom=0,s.bgColor=o.DEFAULTS.backdropColor,s.onPointerDown=()=>(this.closeDropdown(),!0);const h=new r.Box;h.absolute=!0,h.sizingX="fixed",h.sizingY="fixed",h.borderWidth=o.DEFAULTS.selectDropdownBorderWidth,h.layout=new e.StackLayout("vertical",0,"start","stretch");for(let e=0;e<t.length;e++){const o=t[e],r=n[e],s=new i.Button;s.sizingX="grow",s.sizingY="fixed",s.text=o,s.onClick=()=>{this._config.onChange(r),this._button.text=o,this._button.markDirty(),this.closeDropdown()},h.addChild(s)}this._backdrop=s,this._dropdown=h}openDropdown(){if(this._open)return;this._open=!0;const t=this.getSurfaceRoot();if(!t)return;this.ensureDropdownWidgets();const e=this._dropdown,o=this._backdrop,r=this.surface?.getTheme(),i=r?.controlHeight??24;e.anchorLeft=this._button.absoluteX,e.anchorTop=this._button.absoluteY+this._button.height,e.preferredWidth=this._button.width,e.preferredHeight=this._cachedKeys.length*i,e.bgColor=r?.bgPanelRaised??858993663,e.borderColor=r?.borderPanel??1431655935;for(let t=0;t<e.children.length;t++)e.children[t].preferredHeight=i;t.addChild(o),t.addChild(e),t.needsLayout=!0}closeDropdown(){if(!this._open)return;this._open=!1;const t=this.getSurfaceRoot();t&&(this._backdrop&&t.removeChild(this._backdrop),this._dropdown&&t.removeChild(this._dropdown))}refresh(){this._button.text=this.findCurrentLabel(),this._button.markDirty()}applyTheme(t){super.applyTheme(t),this._button.borderRadius=t.borderRadius,this._button.borderColor=t.borderInset,this._button.borderWidth=1}get config(){return this._config}}exports.GuiSelect=n;

package/dist/gui/gui-select.d.ts

@@ -0,0 +1,40 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** Configuration for a dropdown select control. */
+export interface GuiSelectConfig<T> {
+    key: string;
+    label: string;
+    options: Record<string, T>;
+    value: () => T;
+    onChange: (value: T) => void;
+}
+/** Dropdown select control that shows options in an overlay list. */
+export declare class GuiSelect<T> extends LabeledControl {
+    private readonly _config;
+    private readonly _button;
+    private readonly _cachedKeys;
+    private readonly _cachedValues;
+    private _dropdown;
+    private _backdrop;
+    private _open;
+    /** caches the option keys and values and builds the button that opens the dropdown. */
+    constructor(config: GuiSelectConfig<T>);
+    /** option key whose value equals the current bound value, or an empty string when none matches. */
+    private findCurrentLabel;
+    /** opens the dropdown when closed, closes it when open. */
+    private toggleDropdown;
+    /** walks up to the topmost ancestor, used as the parent for the dropdown and backdrop so they escape any clipping. */
+    private getSurfaceRoot;
+    /** lazily builds the backdrop and the dropdown list of option buttons on first open. */
+    private ensureDropdownWidgets;
+    /** anchors the dropdown below the button, themes it, and attaches it and the backdrop to the root. */
+    private openDropdown;
+    /** removes the dropdown and backdrop from the root. */
+    private closeDropdown;
+    /** updates the button label to reflect the current bound value. */
+    refresh(): void;
+    /** applies theme values to the select button. */
+    applyTheme(theme: Theme): void;
+    /** the configuration this control was built from. */
+    get config(): GuiSelectConfig<T>;
+}

package/dist/gui/gui-select.mjs

@@ -0,0 +1 @@
+import{LabeledControl as t}from"./labeled-control.mjs";import{StackLayout as o}from"../core/layouts/stack-layout.mjs";import{DEFAULTS as e}from"../defaults.mjs";import{Box as r}from"../widgets/box.mjs";import{Button as i}from"../widgets/button.mjs";class n extends t{_config;_button;_cachedKeys;_cachedValues;_dropdown=null;_backdrop=null;_open=!1;constructor(t){super(),this._config=t,this.labelText=t.label;const o=Object.keys(t.options);this._cachedKeys=o,this._cachedValues=o.map(o=>t.options[o]),this._button=new i,this._button.sizingX="grow",this._button.sizingY="grow",this._button.flexGrow=1,this._button.text=this.findCurrentLabel(),this._button.onClick=()=>this.toggleDropdown(),this.controlContainer.addChild(this._button)}findCurrentLabel(){const t=this._config.value();for(let o=0;o<this._cachedValues.length;o++)if(this._cachedValues[o]===t)return this._cachedKeys[o];return""}toggleDropdown(){this._open?this.closeDropdown():this.openDropdown()}getSurfaceRoot(){let t=this.parent;for(;t&&t.parent;)t=t.parent;return t}ensureDropdownWidgets(){if(this._dropdown)return;const t=this._cachedKeys,n=this._cachedValues,s=new r;s.absolute=!0,s.anchorTop=0,s.anchorLeft=0,s.anchorRight=0,s.anchorBottom=0,s.bgColor=e.backdropColor,s.onPointerDown=()=>(this.closeDropdown(),!0);const h=new r;h.absolute=!0,h.sizingX="fixed",h.sizingY="fixed",h.borderWidth=e.selectDropdownBorderWidth,h.layout=new o("vertical",0,"start","stretch");for(let o=0;o<t.length;o++){const e=t[o],r=n[o],s=new i;s.sizingX="grow",s.sizingY="fixed",s.text=e,s.onClick=()=>{this._config.onChange(r),this._button.text=e,this._button.markDirty(),this.closeDropdown()},h.addChild(s)}this._backdrop=s,this._dropdown=h}openDropdown(){if(this._open)return;this._open=!0;const t=this.getSurfaceRoot();if(!t)return;this.ensureDropdownWidgets();const o=this._dropdown,e=this._backdrop,r=this.surface?.getTheme(),i=r?.controlHeight??24;o.anchorLeft=this._button.absoluteX,o.anchorTop=this._button.absoluteY+this._button.height,o.preferredWidth=this._button.width,o.preferredHeight=this._cachedKeys.length*i,o.bgColor=r?.bgPanelRaised??858993663,o.borderColor=r?.borderPanel??1431655935;for(let t=0;t<o.children.length;t++)o.children[t].preferredHeight=i;t.addChild(e),t.addChild(o),t.needsLayout=!0}closeDropdown(){if(!this._open)return;this._open=!1;const t=this.getSurfaceRoot();t&&(this._backdrop&&t.removeChild(this._backdrop),this._dropdown&&t.removeChild(this._dropdown))}refresh(){this._button.text=this.findCurrentLabel(),this._button.markDirty()}applyTheme(t){super.applyTheme(t),this._button.borderRadius=t.borderRadius,this._button.borderColor=t.borderInset,this._button.borderWidth=1}get config(){return this._config}}export{n as GuiSelect};

package/dist/gui/gui-separator.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../core/widget.cjs"),e=require("../defaults.cjs"),s=require("../widgets/separator.cjs");class t extends r.Widget{_separator;constructor(){super(),this.sizingX="grow",this.sizingY="fixed",this.preferredHeight=e.DEFAULTS.separatorHeight,this._separator=new s.Separator,this._separator.sizingX="grow",this._separator.sizingY="grow",this._separator.direction="horizontal",this._separator.color=r.THEME_DEFAULT,this.addChild(this._separator)}applyTheme(r){this._separator.color=r.borderInset,this._separator.thickness=r.separatorThickness}}exports.GuiSeparator=t;

package/dist/gui/gui-separator.d.ts

@@ -0,0 +1,10 @@
+import { Widget } from '../core/widget';
+import { Theme } from '../core/theme';
+/** Themed horizontal divider line between controls. */
+export declare class GuiSeparator extends Widget {
+    private readonly _separator;
+    /** builds a fixed-height row holding a horizontal divider that fills its width. */
+    constructor();
+    /** applies theme color and thickness to the divider. */
+    applyTheme(theme: Theme): void;
+}

package/dist/gui/gui-separator.mjs

@@ -0,0 +1 @@
+import{Widget as r,THEME_DEFAULT as s}from"../core/widget.mjs";import{DEFAULTS as t}from"../defaults.mjs";import{Separator as e}from"../widgets/separator.mjs";class i extends r{_separator;constructor(){super(),this.sizingX="grow",this.sizingY="fixed",this.preferredHeight=t.separatorHeight,this._separator=new e,this._separator.sizingX="grow",this._separator.sizingY="grow",this._separator.direction="horizontal",this._separator.color=s,this.addChild(this._separator)}applyTheme(r){this._separator.color=r.borderInset,this._separator.thickness=r.separatorThickness}}export{i as GuiSeparator};

package/dist/gui/gui-slider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./labeled-control.cjs"),t=require("../core/layouts/stack-layout.cjs"),i=require("../defaults.cjs"),s=require("../widgets/number-input.cjs"),n=require("../widgets/slider.cjs");class l extends e.LabeledControl{_slider;_valueInput;_config;_pendingValue;constructor(e){super(),this._config=e;const l=e.step>=1?0:Math.max(0,Math.ceil(-Math.log10(e.step)));this.labelText=e.label,this._pendingValue=e.value(),this.controlContainer.layout=new t.StackLayout("horizontal",i.DEFAULTS.controlInnerGap,"start","stretch"),this._slider=new n.Slider,this._slider.sizingX="grow",this._slider.sizingY="grow",this._slider.flexGrow=2,this._slider.min=e.min,this._slider.max=e.max,this._slider.value=e.value(),this._slider.onChange=t=>{const i=this.snap(t);this._slider.value=i,this._pendingValue=i,this._valueInput.numValue=i,this._valueInput.markDirty(),e.applyOnRelease||e.onChange(i)},e.applyOnRelease&&(this._slider.onRelease=()=>{e.onChange(this._pendingValue)}),this.controlContainer.addChild(this._slider),this._valueInput=new s.NumberInput,this._valueInput.sizingX="grow",this._valueInput.sizingY="grow",this._valueInput.flexGrow=1,this._valueInput.numValue=e.value(),this._valueInput.min=e.min,this._valueInput.max=e.max,this._valueInput.step=e.step,this._valueInput.decimals=l,this._valueInput.updatePointerScale(),this._valueInput.onChange=t=>{this._slider.value=t,this._slider.markDirty(),this._pendingValue=t,e.applyOnRelease||e.onChange(t)},this._valueInput.onCommit=t=>{e.applyOnRelease&&e.onChange(t)},this.controlContainer.addChild(this._valueInput)}get config(){return this._config}applyTheme(e){super.applyTheme(e);const t=e;this._valueInput.textColor=e.textValue,this._slider.fillColor=t.bgAccent}refresh(){const e=this._config.value(),t=this.snap(e);t!==this._slider.value&&(this._slider.value=t,this._pendingValue=t,this._valueInput.numValue=t,this.markDirty())}snap(e){const t=this._config.step;return t<=0?e:Math.round(e/t)*t}}exports.GuiSlider=l;

package/dist/gui/gui-slider.d.ts

@@ -0,0 +1,34 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** Configuration for a numeric slider control. */
+export interface GuiSliderConfig {
+    key: string;
+    label: string;
+    min: number;
+    max: number;
+    step: number;
+    value: () => number;
+    onChange: (value: number) => void;
+    applyOnRelease?: boolean;
+}
+/** Slider with adjacent numeric input, supporting step-snapping and optional deferred commit. */
+export declare class GuiSlider extends LabeledControl {
+    private readonly _slider;
+    private readonly _valueInput;
+    private readonly _config;
+    private _pendingValue;
+    /**
+     * Builds a slider paired with a numeric input over the same value. Both push
+     * changes to each other and either commit immediately or defer to release when
+     * applyOnRelease is set. Display precision is derived from the step size.
+     */
+    constructor(config: GuiSliderConfig);
+    /** the configuration this control was built from. */
+    get config(): GuiSliderConfig;
+    /** applies theme values to the slider and numeric input. */
+    applyTheme(theme: Theme): void;
+    /** syncs the slider and input to the current bound value if it changed. */
+    refresh(): void;
+    /** rounds a value to the nearest multiple of the step, or returns it unchanged when step is not positive. */
+    private snap;
+}

package/dist/gui/gui-slider.mjs

@@ -0,0 +1 @@
+import{LabeledControl as e}from"./labeled-control.mjs";import{StackLayout as t}from"../core/layouts/stack-layout.mjs";import{DEFAULTS as i}from"../defaults.mjs";import{NumberInput as s}from"../widgets/number-input.mjs";import{Slider as n}from"../widgets/slider.mjs";class l extends e{_slider;_valueInput;_config;_pendingValue;constructor(e){super(),this._config=e;const l=e.step>=1?0:Math.max(0,Math.ceil(-Math.log10(e.step)));this.labelText=e.label,this._pendingValue=e.value(),this.controlContainer.layout=new t("horizontal",i.controlInnerGap,"start","stretch"),this._slider=new n,this._slider.sizingX="grow",this._slider.sizingY="grow",this._slider.flexGrow=2,this._slider.min=e.min,this._slider.max=e.max,this._slider.value=e.value(),this._slider.onChange=t=>{const i=this.snap(t);this._slider.value=i,this._pendingValue=i,this._valueInput.numValue=i,this._valueInput.markDirty(),e.applyOnRelease||e.onChange(i)},e.applyOnRelease&&(this._slider.onRelease=()=>{e.onChange(this._pendingValue)}),this.controlContainer.addChild(this._slider),this._valueInput=new s,this._valueInput.sizingX="grow",this._valueInput.sizingY="grow",this._valueInput.flexGrow=1,this._valueInput.numValue=e.value(),this._valueInput.min=e.min,this._valueInput.max=e.max,this._valueInput.step=e.step,this._valueInput.decimals=l,this._valueInput.updatePointerScale(),this._valueInput.onChange=t=>{this._slider.value=t,this._slider.markDirty(),this._pendingValue=t,e.applyOnRelease||e.onChange(t)},this._valueInput.onCommit=t=>{e.applyOnRelease&&e.onChange(t)},this.controlContainer.addChild(this._valueInput)}get config(){return this._config}applyTheme(e){super.applyTheme(e);const t=e;this._valueInput.textColor=e.textValue,this._slider.fillColor=t.bgAccent}refresh(){const e=this._config.value(),t=this.snap(e);t!==this._slider.value&&(this._slider.value=t,this._pendingValue=t,this._valueInput.numValue=t,this.markDirty())}snap(e){const t=this._config.step;return t<=0?e:Math.round(e/t)*t}}export{l as GuiSlider};

package/dist/gui/gui-tab-container.d.ts

@@ -0,0 +1,26 @@
+import { Widget } from '../core/widget';
+import { Box } from '../widgets/box';
+import { TabBar } from '../widgets/tab-bar';
+import { Theme } from '../core/theme';
+/** Container with a tab bar and switchable page widgets. */
+export declare class GuiTabContainer extends Widget {
+    private readonly _tabBar;
+    private readonly _pages;
+    private _activeIndex;
+    /** builds the tab bar and wires tab selection to switch the active page. */
+    constructor();
+    /** adds a new page with the given tab title and returns its content box. */
+    addPage(title: string): Box;
+    /** returns the number of pages. */
+    getPageCount(): number;
+    /** switches the active page to the given index, ignoring out-of-range values. */
+    setActivePage(index: number): void;
+    /** returns the index of the active page. */
+    getActivePage(): number;
+    /** returns the content box for the page at the given index, or null if out of range. */
+    getPage(index: number): Box | null;
+    /** the underlying tab bar widget. */
+    get tabBar(): TabBar;
+    /** applies theme values to the tab bar. */
+    applyTheme(theme: Theme): void;
+}

package/dist/gui/gui-text-log.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../core/layouts/stack-layout.cjs"),t=require("../core/widget.cjs"),i=require("../defaults.cjs"),s=require("../widgets/label.cjs");class l extends t.Widget{_config;_label;constructor(t){super(),this._config=t;const l=t.rows??i.DEFAULTS.textLogDefaultRows;this.sizingX="grow",this.sizingY="fixed",this.preferredHeight=l*i.DEFAULTS.textLogDefaultLineHeight,this.layout=new e.StackLayout("vertical",0,"start","stretch"),this._label=new s.Label,this._label.sizingX="grow",this._label.sizingY="grow",this._label.flexGrow=1,this._label.vAlign="top",this._label.color=i.DEFAULTS.textLogLabelColor,this._label.text=t.getValue(),this.addChild(this._label)}drawSelf(e,t){e.fillRoundedRect(0,0,this.width,this.height,i.DEFAULTS.textLogBorderRadius,t.bgPanelInset)}refresh(){const e=this._config.getValue();this._label.text!==e&&(this._label.text=e,this.markDirty())}applyTheme(e){const t=this._config.rows??i.DEFAULTS.textLogDefaultRows;this.preferredHeight=t*i.DEFAULTS.textLogThemeLineHeight+i.DEFAULTS.textLogThemePadding}get config(){return this._config}}exports.GuiTextLog=l;

package/dist/gui/gui-text-log.d.ts

@@ -0,0 +1,24 @@
+import { Widget } from '../core/widget';
+import { Renderer } from '../core/renderer';
+import { Theme } from '../core/theme';
+/** Configuration for a multi-line read-only text log widget. */
+export interface GuiTextLogConfig {
+    key: string;
+    rows?: number;
+    getValue: () => string;
+}
+/** Multi-line read-only text display, refreshed each frame. */
+export declare class GuiTextLog extends Widget {
+    private readonly _config;
+    private readonly _label;
+    /** sizes the log to the requested row count and adds a top-aligned label holding the initial value. */
+    constructor(config: GuiTextLogConfig);
+    /** paints the inset rounded background behind the log text. */
+    protected drawSelf(renderer: Renderer, theme: Theme): void;
+    /** pulls the latest value and redraws when the text changed. */
+    refresh(): void;
+    /** recomputes preferred height from row count and theme metrics. */
+    applyTheme(_theme: Theme): void;
+    /** the configuration this log was built from. */
+    get config(): GuiTextLogConfig;
+}

package/dist/gui/gui-text-log.mjs

@@ -0,0 +1 @@
+import{StackLayout as t}from"../core/layouts/stack-layout.mjs";import{Widget as e}from"../core/widget.mjs";import{DEFAULTS as i}from"../defaults.mjs";import{Label as s}from"../widgets/label.mjs";class o extends e{_config;_label;constructor(e){super(),this._config=e;const o=e.rows??i.textLogDefaultRows;this.sizingX="grow",this.sizingY="fixed",this.preferredHeight=o*i.textLogDefaultLineHeight,this.layout=new t("vertical",0,"start","stretch"),this._label=new s,this._label.sizingX="grow",this._label.sizingY="grow",this._label.flexGrow=1,this._label.vAlign="top",this._label.color=i.textLogLabelColor,this._label.text=e.getValue(),this.addChild(this._label)}drawSelf(t,e){t.fillRoundedRect(0,0,this.width,this.height,i.textLogBorderRadius,e.bgPanelInset)}refresh(){const t=this._config.getValue();this._label.text!==t&&(this._label.text=t,this.markDirty())}applyTheme(t){const e=this._config.rows??i.textLogDefaultRows;this.preferredHeight=e*i.textLogThemeLineHeight+i.textLogThemePadding}get config(){return this._config}}export{o as GuiTextLog};

package/dist/gui/gui-text.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./labeled-control.cjs"),i=require("../defaults.cjs"),e=require("../widgets/text-input.cjs");class n extends t.LabeledControl{_input;_config;constructor(t){super(),this._config=t,this.labelText=t.label,this._input=new e.TextInput,this._input.sizingX="grow",this._input.sizingY="grow",this._input.flexGrow=1,this._input.text=t.value(),this._input.onChange=i=>{t.onChange(i)},this.controlContainer.addChild(this._input)}get config(){return this._config}applyTheme(t){super.applyTheme(t),this._input.bgColor=t.bgInput,this._input.textColor=t.textValue,this._input.borderRadius=i.DEFAULTS.pointInputBorderRadius}refresh(){if(this._input.focused)return;const t=this._config.value();this._input.text!==t&&(this._input.text=t,this._input.cursorPos=t.length,this.markDirty())}}exports.GuiText=n;

package/dist/gui/gui-text.d.ts

@@ -0,0 +1,22 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** Configuration for a single-line text input control. */
+export interface GuiTextConfig {
+    key: string;
+    label: string;
+    value: () => string;
+    onChange: (value: string) => void;
+}
+/** Single-line text input control with label. */
+export declare class GuiText extends LabeledControl {
+    private readonly _input;
+    private readonly _config;
+    /** builds the labeled text input and wires its change callback to the config. */
+    constructor(config: GuiTextConfig);
+    /** the configuration this control was built from. */
+    get config(): GuiTextConfig;
+    /** applies base theme spacing then the input's background, text color, and corner radius. */
+    applyTheme(theme: Theme): void;
+    /** syncs the input to the bound value, skipping the update while focused so typing is not clobbered. */
+    refresh(): void;
+}

package/dist/gui/gui-text.mjs

@@ -0,0 +1 @@
+import{LabeledControl as t}from"./labeled-control.mjs";import{DEFAULTS as i}from"../defaults.mjs";import{TextInput as n}from"../widgets/text-input.mjs";class s extends t{_input;_config;constructor(t){super(),this._config=t,this.labelText=t.label,this._input=new n,this._input.sizingX="grow",this._input.sizingY="grow",this._input.flexGrow=1,this._input.text=t.value(),this._input.onChange=i=>{t.onChange(i)},this.controlContainer.addChild(this._input)}get config(){return this._config}applyTheme(t){super.applyTheme(t),this._input.bgColor=t.bgInput,this._input.textColor=t.textValue,this._input.borderRadius=i.pointInputBorderRadius}refresh(){if(this._input.focused)return;const t=this._config.value();this._input.text!==t&&(this._input.text=t,this._input.cursorPos=t.length,this.markDirty())}}export{s as GuiText};

package/dist/gui/gui-toggle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./labeled-control.cjs"),h=require("../core/widget.cjs"),t=require("../defaults.cjs");class c extends h.Widget{checked=!1;boxColor=h.THEME_DEFAULT;checkColor=h.THEME_DEFAULT;onChange=null;constructor(){super(),this.sizingX="fixed",this.sizingY="fixed",this.preferredWidth=t.DEFAULTS.checkboxSize,this.preferredHeight=t.DEFAULTS.checkboxSize,this.focusable=!0}drawSelf(e,c){const i=this.width,o=this.height,s=Math.min(t.DEFAULTS.checkboxBorderRadius,i/4),r=this.boxColor===h.THEME_DEFAULT?t.DEFAULTS.checkboxDefaultBorderColor:this.boxColor;if(e.fillRoundedRect(0,0,i,o,s,c.bgInput),e.strokeRoundedRect(0,0,i,o,s,r,1),this.checked){const s=this.checkColor===h.THEME_DEFAULT?c.textPrimary:this.checkColor;e.pushAlpha(.9),e.drawLine(.2*i|0,.5*o|0,.42*i|0,.72*o|0,s,t.DEFAULTS.checkboxCheckLineWidth),e.drawLine(.42*i|0,.72*o|0,.8*i|0,.28*o|0,s,t.DEFAULTS.checkboxCheckLineWidth),e.popAlpha()}}onPointerDown(e,h,t,c){return this.checked=!this.checked,this.onChange&&this.onChange(this.checked),this.markDirty(),!0}onKeyDown(e,h,t,c,i){return"Space"===h||"Enter"===h?(this.checked=!this.checked,this.onChange&&this.onChange(this.checked),this.markDirty(),!0):super.onKeyDown(e,h,t,c,i)}}class i extends e.LabeledControl{_checkbox;_config;constructor(e){super(),this._config=e,this.labelText=e.label,this._checkbox=new c,this._checkbox.checked=e.value(),this._checkbox.alignSelf="center",this._checkbox.onChange=h=>{e.onChange(h)},this.controlContainer.addChild(this._checkbox)}get config(){return this._config}refresh(){const e=this._config.value();this._checkbox.checked!==e&&(this._checkbox.checked=e,this.markDirty())}}exports.GuiToggle=i;

package/dist/gui/gui-toggle.d.ts

@@ -0,0 +1,19 @@
+import { LabeledControl } from './labeled-control';
+/** Configuration for a boolean toggle control. */
+export interface GuiToggleConfig {
+    key: string;
+    label: string;
+    value: () => boolean;
+    onChange: (value: boolean) => void;
+}
+/** Boolean toggle control displayed as a labeled checkbox. */
+export declare class GuiToggle extends LabeledControl {
+    private readonly _checkbox;
+    private readonly _config;
+    /** builds the labeled checkbox and wires its change callback to the config. */
+    constructor(config: GuiToggleConfig);
+    /** the configuration this control was built from. */
+    get config(): GuiToggleConfig;
+    /** re-reads the bound value and updates the checkbox state. */
+    refresh(): void;
+}

package/dist/gui/gui-toggle.mjs

@@ -0,0 +1 @@
+import{LabeledControl as e}from"./labeled-control.mjs";import{Widget as h,THEME_DEFAULT as c}from"../core/widget.mjs";import{DEFAULTS as t}from"../defaults.mjs";class o extends h{checked=!1;boxColor=c;checkColor=c;onChange=null;constructor(){super(),this.sizingX="fixed",this.sizingY="fixed",this.preferredWidth=t.checkboxSize,this.preferredHeight=t.checkboxSize,this.focusable=!0}drawSelf(e,h){const o=this.width,i=this.height,s=Math.min(t.checkboxBorderRadius,o/4),r=this.boxColor===c?t.checkboxDefaultBorderColor:this.boxColor;if(e.fillRoundedRect(0,0,o,i,s,h.bgInput),e.strokeRoundedRect(0,0,o,i,s,r,1),this.checked){const s=this.checkColor===c?h.textPrimary:this.checkColor;e.pushAlpha(.9),e.drawLine(.2*o|0,.5*i|0,.42*o|0,.72*i|0,s,t.checkboxCheckLineWidth),e.drawLine(.42*o|0,.72*i|0,.8*o|0,.28*i|0,s,t.checkboxCheckLineWidth),e.popAlpha()}}onPointerDown(e,h,c,t){return this.checked=!this.checked,this.onChange&&this.onChange(this.checked),this.markDirty(),!0}onKeyDown(e,h,c,t,o){return"Space"===h||"Enter"===h?(this.checked=!this.checked,this.onChange&&this.onChange(this.checked),this.markDirty(),!0):super.onKeyDown(e,h,c,t,o)}}class i extends e{_checkbox;_config;constructor(e){super(),this._config=e,this.labelText=e.label,this._checkbox=new o,this._checkbox.checked=e.value(),this._checkbox.alignSelf="center",this._checkbox.onChange=h=>{e.onChange(h)},this.controlContainer.addChild(this._checkbox)}get config(){return this._config}refresh(){const e=this._config.value();this._checkbox.checked!==e&&(this._checkbox.checked=e,this.markDirty())}}export{i as GuiToggle};

package/dist/gui/labeled-control.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../core/layouts/stack-layout.cjs"),e=require("../core/widget.cjs"),i=require("../defaults.cjs"),l=require("../widgets/box.cjs"),o=require("../widgets/label.cjs"),r=i.DEFAULTS.valueColumnWidth;class s extends e.Widget{_label;_controlContainer;constructor(){super(),this.sizingX="grow",this.sizingY="fixed",this.layout=new t.StackLayout("horizontal",i.DEFAULTS.labeledControlGap,"start","stretch"),this._label=new o.Label,this._label.sizingX="grow",this._label.sizingY="grow",this._label.flexGrow=1,this._label.overflow="ellipsis",this._label.vAlign="middle",this._label.color=e.THEME_DEFAULT,this.addChild(this._label),this._controlContainer=new l.Box,this._controlContainer.sizingX="fixed",this._controlContainer.preferredWidth=r,this._controlContainer.sizingY="grow",this._controlContainer.flexShrink=0,this._controlContainer.layout=new t.StackLayout("horizontal",i.DEFAULTS.controlInnerGap,"start","stretch"),this.addChild(this._controlContainer)}get controlContainer(){return this._controlContainer}set labelText(t){this._label.text=t,this.markDirty()}get labelText(){return this._label.text}applyTheme(t){const e=t;this.preferredHeight=e.controlHeight,this._label.textOffsetY=e.textOffsetY??0,e.textLabel&&(this._label.color=e.textLabel)}}exports.LabeledControl=s;

package/dist/gui/labeled-control.d.ts

@@ -0,0 +1,21 @@
+import { Widget } from '../core/widget';
+import { Box } from '../widgets/box';
+import { Theme } from '../core/theme';
+/**
+ * Base class for controls that display a label on the left and a value/input
+ * region on the right, using a fixed-width value column.
+ */
+export declare class LabeledControl extends Widget {
+    private readonly _label;
+    private readonly _controlContainer;
+    /** builds the ellipsized label and a fixed-width value column that subclasses fill with their control. */
+    constructor();
+    /** the fixed-width right-hand column that subclasses add their control widgets to. */
+    get controlContainer(): Box;
+    /** sets the label text and marks the control for repaint. */
+    set labelText(value: string);
+    /** the current label text. */
+    get labelText(): string;
+    /** applies theme height, label offset, and label color. */
+    applyTheme(theme: Theme): void;
+}

package/dist/gui/labeled-control.mjs

@@ -0,0 +1 @@
+import{StackLayout as t}from"../core/layouts/stack-layout.mjs";import{Widget as e,THEME_DEFAULT as o}from"../core/widget.mjs";import{DEFAULTS as i}from"../defaults.mjs";import{Box as l}from"../widgets/box.mjs";import{Label as r}from"../widgets/label.mjs";const s=i.valueColumnWidth;class n extends e{_label;_controlContainer;constructor(){super(),this.sizingX="grow",this.sizingY="fixed",this.layout=new t("horizontal",i.labeledControlGap,"start","stretch"),this._label=new r,this._label.sizingX="grow",this._label.sizingY="grow",this._label.flexGrow=1,this._label.overflow="ellipsis",this._label.vAlign="middle",this._label.color=o,this.addChild(this._label),this._controlContainer=new l,this._controlContainer.sizingX="fixed",this._controlContainer.preferredWidth=s,this._controlContainer.sizingY="grow",this._controlContainer.flexShrink=0,this._controlContainer.layout=new t("horizontal",i.controlInnerGap,"start","stretch"),this.addChild(this._controlContainer)}get controlContainer(){return this._controlContainer}set labelText(t){this._label.text=t,this.markDirty()}get labelText(){return this._label.text}applyTheme(t){const e=t;this.preferredHeight=e.controlHeight,this._label.textOffsetY=e.textOffsetY??0,e.textLabel&&(this._label.color=e.textLabel)}}export{n as LabeledControl};

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./types.cjs"),t=require("./utils/activity.cjs"),r=require("./utils/persistence.cjs"),o=require("./Inspect.cjs"),s=require("./InspectRegistry.cjs"),i=require("./core/widget.cjs"),p=require("./core/layouts/stack-layout.cjs"),c=require("./widgets/canvas-widget.cjs"),n=require("./widgets/box.cjs"),x=require("./widgets/label.cjs"),a=require("./widgets/button.cjs"),u=require("./widgets/slider.cjs");exports.button=e.button,exports.buttonRow=e.buttonRow,Object.defineProperty(exports,"color",{enumerable:!0,get:()=>e.color}),exports.customControl=e.customControl,exports.matrixGrid=e.matrixGrid,exports.monitor=e.monitor,Object.defineProperty(exports,"point2d",{enumerable:!0,get:()=>e.point2d}),Object.defineProperty(exports,"point3d",{enumerable:!0,get:()=>e.point3d}),exports.reorderList=e.reorderList,Object.defineProperty(exports,"select",{enumerable:!0,get:()=>e.select}),exports.separator=e.separator,Object.defineProperty(exports,"slider",{enumerable:!0,get:()=>e.slider}),exports.subfolder=e.subfolder,Object.defineProperty(exports,"text",{enumerable:!0,get:()=>e.text}),exports.textLog=e.textLog,Object.defineProperty(exports,"toggle",{enumerable:!0,get:()=>e.toggle}),exports.getGuiActive=t.getGuiActive,exports.setGuiActive=t.setGuiActive,exports.clearConfig=r.clearConfig,exports.copyConfigToClipboard=r.copyConfigToClipboard,exports.exportStateAsJSON=r.exportStateAsJSON,exports.importStateFromJSON=r.importStateFromJSON,exports.loadConfig=r.loadConfig,exports.saveConfig=r.saveConfig,exports.Inspect=o.Inspect,exports.InspectRegistry=s.InspectRegistry,exports.THEME_DEFAULT=i.THEME_DEFAULT,exports.Widget=i.Widget,exports.StackLayout=p.StackLayout,exports.CanvasWidget=c.CanvasWidget,exports.Box=n.Box,exports.Label=x.Label,exports.Button=a.Button,exports.Slider=u.Slider;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export type { SliderConfig, ToggleConfig, SelectConfig, ButtonConfig, ButtonRowConfig, SubfolderConfig, ReorderListConfig, TextLogConfig, MonitorConfig, ColorConfig, ColorDisplayFormat, TextConfig, Point2DConfig, Point3DConfig, SeparatorConfig, MatrixGridConfig, ControlConfig, CustomControlBuilder, FolderConfig, TabPageConfig, BaseMountOptions, MountOptions, KeysOfType } from './types';
+export { slider, toggle, select, button, buttonRow, monitor, color, text, point2d, point3d, separator, matrixGrid, subfolder, reorderList, textLog, customControl } from './types';
+export { setGuiActive, getGuiActive } from './utils/activity';
+export { exportStateAsJSON, importStateFromJSON, saveConfig, loadConfig, clearConfig, copyConfigToClipboard } from './utils/persistence';
+export { Inspect } from './Inspect';
+export { InspectRegistry } from './InspectRegistry';
+export type { InspectTheme } from './themes/inspect-theme';
+export { Widget, THEME_DEFAULT } from './core/widget';
+export type { HAlign, VAlign, SizingType, CrossAlign } from './core/widget';
+export type { Renderer } from './core/renderer';
+export type { Theme } from './core/theme';
+export type { FontAtlas } from './core/atlas';
+export { StackLayout } from './core/layouts/stack-layout';
+export { CanvasWidget } from './widgets/canvas-widget';
+export type { CustomDrawFn } from './widgets/canvas-widget';
+export { Box } from './widgets/box';
+export { Label } from './widgets/label';
+export { Button } from './widgets/button';
+export { Slider } from './widgets/slider';

package/dist/index.mjs

@@ -0,0 +1 @@
+import{button as m,buttonRow as t,color as o,customControl as r,matrixGrid as s,monitor as i,point2d as e,point3d as p,reorderList as f,select as j,separator as c,slider as d,subfolder as g,text as a,textLog as l,toggle as w}from"./types.mjs";import{getGuiActive as n,setGuiActive as u}from"./utils/activity.mjs";import{clearConfig as y,copyConfigToClipboard as b,exportStateAsJSON as v,importStateFromJSON as x,loadConfig as I,saveConfig as k}from"./utils/persistence.mjs";import{Inspect as R}from"./Inspect.mjs";import{InspectRegistry as h}from"./InspectRegistry.mjs";import{THEME_DEFAULT as q,Widget as z}from"./core/widget.mjs";import{StackLayout as A}from"./core/layouts/stack-layout.mjs";import{CanvasWidget as B}from"./widgets/canvas-widget.mjs";import{Box as C}from"./widgets/box.mjs";import{Label as D}from"./widgets/label.mjs";import{Button as E}from"./widgets/button.mjs";import{Slider as F}from"./widgets/slider.mjs";export{C as Box,E as Button,B as CanvasWidget,R as Inspect,h as InspectRegistry,D as Label,F as Slider,A as StackLayout,q as THEME_DEFAULT,z as Widget,m as button,t as buttonRow,y as clearConfig,o as color,b as copyConfigToClipboard,r as customControl,v as exportStateAsJSON,n as getGuiActive,x as importStateFromJSON,I as loadConfig,s as matrixGrid,i as monitor,e as point2d,p as point3d,f as reorderList,k as saveConfig,j as select,c as separator,u as setGuiActive,d as slider,g as subfolder,a as text,l as textLog,w as toggle};

package/dist/panel/inspect-debugger.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=2e3;exports.InspectDebugger=class{surface;overlay;overlayCtx;borderClearTimer=0;labelClearTimer=0;_boundClearBorder;_boundClearLabel;logEntries=new Array(e).fill("");_logHead=0;_logCount=0;_firstPaint=!0;constructor(e,t){this.surface=e,this.overlay=document.createElement("canvas"),this.overlay.style.position="fixed",this.overlay.style.top=t.style.top,this.overlay.style.width=t.style.width,this.overlay.style.height=t.style.height,this.overlay.style.pointerEvents="none",this.overlay.style.zIndex="10000000",t.style.right?this.overlay.style.right=t.style.right:this.overlay.style.left=t.style.left,t.style.borderRadius&&(this.overlay.style.borderRadius=t.style.borderRadius),t.parentElement?.appendChild(this.overlay);const i=this.overlay.getContext("2d");if(!i)throw new Error("Failed to create debug overlay context");this.overlayCtx=i,this._boundClearBorder=()=>{this.borderClearTimer=0,this.overlayCtx.clearRect(0,0,this.overlay.width,this.overlay.height-18)},this._boundClearLabel=()=>{this.labelClearTimer=0;const e=this.overlayCtx,t=this.overlay.height-18;e.clearRect(0,t,this.overlay.width,18)},e.onAfterFlush=e=>this.onFlush(e)}formatEntry(e){const t=performance.now()/1e3|0,i=t%60,r=(t/60|0)%60,l=`${(t/3600|0)%24}:${r<10?"0":""}${r}:${i<10?"0":""}${i}`;if(e.isFullRepaint)return this._firstPaint?(this._firstPaint=!1,`[${l}] FIRST PAINT (FULL) ${e.flushTimeMs.toFixed(2)}ms 100%`):`[${l}] FULL ${e.flushTimeMs.toFixed(2)}ms 100%`;let s=0;for(let t=0;t<e.dirtyRectCount;t++){const i=e.dirtyRects[t];s+=i.width*i.height}const o=(s/(e.canvasWidth*e.canvasHeight)*100).toFixed(1);return`[${l}] ${e.dirtyRectCount}r ${e.flushTimeMs.toFixed(2)}ms ${o}%`}onFlush(t){this.overlay.width===t.canvasWidth&&this.overlay.height===t.canvasHeight||(this.overlay.width=t.canvasWidth,this.overlay.height=t.canvasHeight);const i=this._firstPaint,r=this.formatEntry(t);this.logEntries[this._logHead]=r,this._logHead=(this._logHead+1)%e,this._logCount<e&&this._logCount++;const l=this.overlayCtx;if(l.clearRect(0,0,t.canvasWidth,t.canvasHeight),!t.isFullRepaint){l.strokeStyle="rgba(255, 0, 0, 0.7)",l.lineWidth=2;for(let e=0;e<t.dirtyRectCount;e++){const i=t.dirtyRects[e];l.strokeRect(1+(0|i.x),1+(0|i.y),(0|i.width)-2,(0|i.height)-2)}}const s=t.canvasHeight-18;l.fillStyle="rgba(0, 0, 0, 0.7)",l.fillRect(0,s,t.canvasWidth,18),l.fillStyle=i?"#ffffff":t.isFullRepaint?"#ff4444":"#44ff44",l.font="11px monospace",l.fillText(r,8,s+13),this.borderClearTimer&&clearTimeout(this.borderClearTimer),this.borderClearTimer=window.setTimeout(this._boundClearBorder,60),this.labelClearTimer&&clearTimeout(this.labelClearTimer),this.labelClearTimer=window.setTimeout(this._boundClearLabel,5e3)}dispose(){this.surface.onAfterFlush=null,this.borderClearTimer&&clearTimeout(this.borderClearTimer),this.labelClearTimer&&clearTimeout(this.labelClearTimer),this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)}};

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

@@ -0,0 +1,30 @@
+import { Surface } from '../core/surface';
+/**
+ * Debug overlay that visualizes dirty rects and flush timing on top of the panel canvas.
+ * Renders red stroke outlines around partial repaints and a status bar showing timing.
+ */
+export declare class InspectDebugger {
+    private surface;
+    private overlay;
+    private overlayCtx;
+    private borderClearTimer;
+    private labelClearTimer;
+    private readonly _boundClearBorder;
+    private readonly _boundClearLabel;
+    private logEntries;
+    private _logHead;
+    private _logCount;
+    private _firstPaint;
+    /** creates an overlay canvas mirroring the panel's position and size and hooks the surface's after-flush callback. */
+    constructor(surface: Surface, panelCanvas: HTMLCanvasElement);
+    /** builds the one-line flush status: wall-clock timestamp, repaint kind, flush time, and repainted area percent. */
+    private formatEntry;
+    /**
+     * Runs after each surface flush: logs the entry into the ring buffer, strokes
+     * red outlines around partial dirty rects, and draws the status bar. Timers
+     * then fade the outlines and the label after their respective delays.
+     */
+    private onFlush;
+    /** clears pending timers and removes the overlay canvas. */
+    dispose(): void;
+}

package/dist/panel/inspect-debugger.mjs

@@ -0,0 +1 @@
+const e=2e3;class t{surface;overlay;overlayCtx;borderClearTimer=0;labelClearTimer=0;_boundClearBorder;_boundClearLabel;logEntries=new Array(e).fill("");_logHead=0;_logCount=0;_firstPaint=!0;constructor(e,t){this.surface=e,this.overlay=document.createElement("canvas"),this.overlay.style.position="fixed",this.overlay.style.top=t.style.top,this.overlay.style.width=t.style.width,this.overlay.style.height=t.style.height,this.overlay.style.pointerEvents="none",this.overlay.style.zIndex="10000000",t.style.right?this.overlay.style.right=t.style.right:this.overlay.style.left=t.style.left,t.style.borderRadius&&(this.overlay.style.borderRadius=t.style.borderRadius),t.parentElement?.appendChild(this.overlay);const i=this.overlay.getContext("2d");if(!i)throw new Error("Failed to create debug overlay context");this.overlayCtx=i,this._boundClearBorder=()=>{this.borderClearTimer=0,this.overlayCtx.clearRect(0,0,this.overlay.width,this.overlay.height-18)},this._boundClearLabel=()=>{this.labelClearTimer=0;const e=this.overlayCtx,t=this.overlay.height-18;e.clearRect(0,t,this.overlay.width,18)},e.onAfterFlush=e=>this.onFlush(e)}formatEntry(e){const t=performance.now()/1e3|0,i=t%60,r=(t/60|0)%60,l=`${(t/3600|0)%24}:${r<10?"0":""}${r}:${i<10?"0":""}${i}`;if(e.isFullRepaint)return this._firstPaint?(this._firstPaint=!1,`[${l}] FIRST PAINT (FULL) ${e.flushTimeMs.toFixed(2)}ms 100%`):`[${l}] FULL ${e.flushTimeMs.toFixed(2)}ms 100%`;let s=0;for(let t=0;t<e.dirtyRectCount;t++){const i=e.dirtyRects[t];s+=i.width*i.height}const a=(s/(e.canvasWidth*e.canvasHeight)*100).toFixed(1);return`[${l}] ${e.dirtyRectCount}r ${e.flushTimeMs.toFixed(2)}ms ${a}%`}onFlush(t){this.overlay.width===t.canvasWidth&&this.overlay.height===t.canvasHeight||(this.overlay.width=t.canvasWidth,this.overlay.height=t.canvasHeight);const i=this._firstPaint,r=this.formatEntry(t);this.logEntries[this._logHead]=r,this._logHead=(this._logHead+1)%e,this._logCount<e&&this._logCount++;const l=this.overlayCtx;if(l.clearRect(0,0,t.canvasWidth,t.canvasHeight),!t.isFullRepaint){l.strokeStyle="rgba(255, 0, 0, 0.7)",l.lineWidth=2;for(let e=0;e<t.dirtyRectCount;e++){const i=t.dirtyRects[e];l.strokeRect(1+(0|i.x),1+(0|i.y),(0|i.width)-2,(0|i.height)-2)}}const s=t.canvasHeight-18;l.fillStyle="rgba(0, 0, 0, 0.7)",l.fillRect(0,s,t.canvasWidth,18),l.fillStyle=i?"#ffffff":t.isFullRepaint?"#ff4444":"#44ff44",l.font="11px monospace",l.fillText(r,8,s+13),this.borderClearTimer&&clearTimeout(this.borderClearTimer),this.borderClearTimer=window.setTimeout(this._boundClearBorder,60),this.labelClearTimer&&clearTimeout(this.labelClearTimer),this.labelClearTimer=window.setTimeout(this._boundClearLabel,5e3)}dispose(){this.surface.onAfterFlush=null,this.borderClearTimer&&clearTimeout(this.borderClearTimer),this.labelClearTimer&&clearTimeout(this.labelClearTimer),this.overlay.parentNode&&this.overlay.parentNode.removeChild(this.overlay)}}export{t as InspectDebugger};