@mgz-dev/inspect 0.1.0

package/dist/core/widget.d.ts

@@ -0,0 +1,213 @@
+import { Layout } from './layout';
+import { Renderer } from './renderer';
+import { Surface } from './surface';
+import { Theme } from './theme';
+declare const SLOT_X = 0;
+declare const SLOT_Y = 1;
+declare const SLOT_WIDTH = 2;
+declare const SLOT_HEIGHT = 3;
+declare const SLOT_PREFERRED_WIDTH = 4;
+declare const SLOT_PREFERRED_HEIGHT = 5;
+declare const SLOT_MIN_WIDTH = 6;
+declare const SLOT_MIN_HEIGHT = 7;
+declare const SLOT_MAX_WIDTH = 8;
+declare const SLOT_MAX_HEIGHT = 9;
+declare const SLOT_FLEX_GROW = 10;
+declare const SLOT_FLEX_SHRINK = 11;
+declare const SLOT_PADDING_TOP = 12;
+declare const SLOT_PADDING_RIGHT = 13;
+declare const SLOT_PADDING_BOTTOM = 14;
+declare const SLOT_PADDING_LEFT = 15;
+declare const SLOT_COUNT = 16;
+export { SLOT_X, SLOT_Y, SLOT_WIDTH, SLOT_HEIGHT, SLOT_PREFERRED_WIDTH, SLOT_PREFERRED_HEIGHT, SLOT_MIN_WIDTH, SLOT_MIN_HEIGHT, SLOT_MAX_WIDTH, SLOT_MAX_HEIGHT, SLOT_FLEX_GROW, SLOT_FLEX_SHRINK, SLOT_PADDING_TOP, SLOT_PADDING_RIGHT, SLOT_PADDING_BOTTOM, SLOT_PADDING_LEFT, SLOT_COUNT };
+/** Horizontal text alignment within a label. */
+export type HAlign = "left" | "center" | "right";
+/** Vertical text alignment within a label. */
+export type VAlign = "top" | "middle" | "bottom";
+/** How a widget computes its size along a given axis. */
+export type SizingType = "fit" | "grow" | "fixed" | "percent";
+/** Cross-axis alignment override for a child within a stack layout. */
+export type CrossAlign = "start" | "center" | "end" | "stretch";
+/** Quantization mode for design-scale rendering (integer or power-of-two steps). */
+export type DesignScaleSnap = "none" | "binary" | "pixel-perfect";
+/** Sentinel value indicating a color should be resolved from the current theme. */
+export declare const THEME_DEFAULT = -1;
+/**
+ * Base class for all UI elements. Holds geometry in a packed Float32Array,
+ * supports layout delegation, absolute positioning, design-scale rendering,
+ * hit testing, and input event dispatch.
+ */
+export declare class Widget {
+    parent: Widget | null;
+    surface: Surface | null;
+    children: Widget[];
+    /** Packed layout geometry: x, y, width, height, preferred sizes, min/max, flex, padding. */
+    readonly geometry: Float32Array<ArrayBuffer>;
+    private _visible;
+    private _effectivelyVisible;
+    enabled: boolean;
+    focusable: boolean;
+    focused: boolean;
+    absolute: boolean;
+    private _hasAbsoluteChildren;
+    anchorTop: number;
+    anchorRight: number;
+    anchorBottom: number;
+    anchorLeft: number;
+    absoluteX: number;
+    absoluteY: number;
+    sizingX: SizingType;
+    sizingY: SizingType;
+    percentWidth: number;
+    percentHeight: number;
+    alignSelf: CrossAlign | null;
+    autoFitScale: boolean;
+    fitReferenceWidth: number;
+    fitReferenceHeight: number;
+    minScale: number;
+    maxScale: number;
+    computedScale: number;
+    designWidth: number;
+    designHeight: number;
+    designScaleSnap: DesignScaleSnap;
+    designScaleStep: number;
+    designScale: number;
+    screenScale: number;
+    private designOffsetX;
+    private designOffsetY;
+    private virtualWidth;
+    private virtualHeight;
+    layout: Layout | null;
+    needsLayout: boolean;
+    /** seeds the max-size slots with a large sentinel so a widget is effectively unbounded until constrained. */
+    constructor();
+    /** whether this widget is shown; hidden widgets are skipped by layout, hit testing, and drawing. */
+    get visible(): boolean;
+    /** toggles visibility and propagates the ancestor-aware effective visibility down to descendants. */
+    set visible(value: boolean);
+    private propagateEffectiveVisibility;
+    /** horizontal offset from the parent's content origin, in local (pre-scale) pixels. */
+    get x(): number;
+    set x(value: number);
+    /** vertical offset from the parent's content origin, in local (pre-scale) pixels. */
+    get y(): number;
+    set y(value: number);
+    /** laid-out width in local pixels, filled in by the layout pass. */
+    get width(): number;
+    set width(value: number);
+    /** laid-out height in local pixels, filled in by the layout pass. */
+    get height(): number;
+    set height(value: number);
+    /** width requested when sizingX is "fixed", and the starting size for other modes. */
+    get preferredWidth(): number;
+    set preferredWidth(value: number);
+    /** height requested when sizingY is "fixed", and the starting size for other modes. */
+    get preferredHeight(): number;
+    set preferredHeight(value: number);
+    /** lower bound the layout clamps the resolved width to. */
+    get minWidth(): number;
+    set minWidth(value: number);
+    /** lower bound the layout clamps the resolved height to. */
+    get minHeight(): number;
+    set minHeight(value: number);
+    /** upper bound the layout clamps the resolved width to (defaults to 1e7). */
+    get maxWidth(): number;
+    set maxWidth(value: number);
+    /** upper bound the layout clamps the resolved height to (defaults to 1e7). */
+    get maxHeight(): number;
+    set maxHeight(value: number);
+    /** share of leftover main-axis space this widget claims when growing. */
+    get flexGrow(): number;
+    set flexGrow(value: number);
+    /** weight used when shrinking this widget to resolve a main-axis overflow. */
+    get flexShrink(): number;
+    set flexShrink(value: number);
+    /** sets per-side padding (top, right, bottom, left). */
+    setPadding(top: number, right: number, bottom: number, left: number): void;
+    /** sets the same padding on all four sides. */
+    setPaddingAll(value: number): void;
+    /** content-box width: width minus left and right padding. */
+    get innerWidth(): number;
+    /** content-box height: height minus top and bottom padding. */
+    get innerHeight(): number;
+    /** local x of the content box, which equals the left padding. */
+    get innerX(): number;
+    /** local y of the content box, which equals the top padding. */
+    get innerY(): number;
+    /** font atlas from the surface's current theme, or null when no surface or font is set. */
+    protected resolveFont(): import('./atlas').FontAtlas | null;
+    /** intrinsic content width, overridden by widgets that render content. */
+    getContentWidth(): number;
+    /** intrinsic content height, overridden by widgets that render content. */
+    getContentHeight(): number;
+    /** Computes the natural width this widget would occupy without external constraints. */
+    measureIntrinsicWidth(): number;
+    /** Computes the natural height this widget would occupy without external constraints. */
+    measureIntrinsicHeight(): number;
+    /** attaches a child, inheriting surface and effective visibility, and marks dirty. */
+    addChild(child: Widget): void;
+    /** detaches a child if present, clearing its surface and marking dirty. */
+    removeChild(child: Widget): void;
+    /** detaches every child, clearing their surfaces and marking dirty. */
+    removeAllChildren(): void;
+    /** rescans children to refresh the cached absolute-children flag after a child is removed. */
+    private recomputeHasAbsoluteChildren;
+    /** true when this widget and all ancestors are visible. */
+    isEffectivelyVisible(): boolean;
+    /** Marks this widget and all ancestors as needing re-layout, then triggers repaint. */
+    invalidateLayout(): void;
+    /** marks this widget's screen rect dirty on the surface for repaint. */
+    markDirty(): void;
+    /** assigns the rendering surface to this widget and its descendants. */
+    setSurface(newSurface: Surface | null): void;
+    /** Recursively computes layout, resolves absolute children, and updates absolute positions. */
+    computeLayout(): void;
+    /**
+     * Snaps a raw design-to-screen scale to the configured stepping so scaled
+     * content lands on stable increments. A positive designScaleStep floors to a
+     * multiple of that step. Otherwise "none" passes the scale through, "binary"
+     * floors to a power of two, and "pixel-perfect" floors to a whole number when
+     * scaling up. Below 1 both snapping modes fall back to a power of two so the
+     * sub-pixel steps stay clean.
+     */
+    private snapScale;
+    /**
+     * Positions and sizes children marked absolute from their anchor offsets.
+     * Anchors on opposite sides stretch the child between them, a single anchor
+     * pins that edge, and no anchor on an axis centers the child within the
+     * parent's content box.
+     */
+    private resolveAbsoluteChildren;
+    /** recomputes the auto-fit content scale when enabled, then paints this widget followed by its children. */
+    draw(renderer: Renderer, theme: Theme): void;
+    /** paints this widget's own content; the base implementation is empty and subclasses override it. */
+    protected drawSelf(_renderer: Renderer, _theme: Theme): void;
+    /**
+     * Paints visible children, applying the design-scale transform, padding
+     * translation and clip, and skipping children that fall outside the current
+     * dirty region.
+     */
+    protected drawChildren(renderer: Renderer, theme: Theme): void;
+    /** Returns the deepest visible child containing the point, or this widget if no child matches. */
+    hitTest(x: number, y: number): Widget | null;
+    /** pointer-down hook; return true to claim the pointer. */
+    onPointerDown(_pointerId: number, _x: number, _y: number, _button: number): boolean;
+    /** pointer-up hook. */
+    onPointerUp(_pointerId: number, _x: number, _y: number, _button: number): void;
+    /** pointer-move hook. */
+    onPointerMove(_pointerId: number, _x: number, _y: number): void;
+    /** pointer-enter hook. */
+    onPointerEnter(): void;
+    /** pointer-leave hook. */
+    onPointerLeave(): void;
+    /** wheel hook; return true to consume the event. */
+    onWheel(_deltaX: number, _deltaY: number): boolean;
+    /** key-down hook; return true to consume the event. */
+    onKeyDown(_key: string, _code: string, _ctrl: boolean, _shift: boolean, _alt: boolean): boolean;
+    /** key-up hook. */
+    onKeyUp(_key: string, _code: string): void;
+    /** focus-gained hook. */
+    onFocus(): void;
+    /** focus-lost hook. */
+    onBlur(): void;
+}

package/dist/core/widget.mjs

@@ -0,0 +1 @@
+const e=0,t=1,i=2,s=3,h=4,r=5,n=6,o=7,l=8,a=9,g=10,d=11,c=12,u=13,f=14,m=15,y=16,p=-1;class S{parent=null;surface=null;children=[];geometry=new Float32Array(16);_visible=!0;_effectivelyVisible=!0;enabled=!0;focusable=!1;focused=!1;absolute=!1;_hasAbsoluteChildren=!1;anchorTop=NaN;anchorRight=NaN;anchorBottom=NaN;anchorLeft=NaN;absoluteX=0;absoluteY=0;sizingX="fit";sizingY="fit";percentWidth=0;percentHeight=0;alignSelf=null;autoFitScale=!1;fitReferenceWidth=0;fitReferenceHeight=0;minScale=1;maxScale=1;computedScale=1;designWidth=0;designHeight=0;designScaleSnap="none";designScaleStep=0;designScale=1;screenScale=1;designOffsetX=0;designOffsetY=0;virtualWidth=0;virtualHeight=0;layout=null;needsLayout=!0;constructor(){this.geometry[8]=1e7,this.geometry[9]=1e7}get visible(){return this._visible}set visible(e){this._visible!==e&&(this._visible=e,this.propagateEffectiveVisibility(this._visible&&(!this.parent||this.parent._effectivelyVisible)))}propagateEffectiveVisibility(e){const t=this._visible&&e;if(t!==this._effectivelyVisible){this._effectivelyVisible=t;for(let e=0;e<this.children.length;e++)this.children[e].propagateEffectiveVisibility(t)}}get x(){return this.geometry[0]}set x(e){this.geometry[0]=e}get y(){return this.geometry[1]}set y(e){this.geometry[1]=e}get width(){return this.geometry[2]}set width(e){this.geometry[2]=e}get height(){return this.geometry[3]}set height(e){this.geometry[3]=e}get preferredWidth(){return this.geometry[4]}set preferredWidth(e){this.geometry[4]=e}get preferredHeight(){return this.geometry[5]}set preferredHeight(e){this.geometry[5]=e}get minWidth(){return this.geometry[6]}set minWidth(e){this.geometry[6]=e}get minHeight(){return this.geometry[7]}set minHeight(e){this.geometry[7]=e}get maxWidth(){return this.geometry[8]}set maxWidth(e){this.geometry[8]=e}get maxHeight(){return this.geometry[9]}set maxHeight(e){this.geometry[9]=e}get flexGrow(){return this.geometry[10]}set flexGrow(e){this.geometry[10]=e}get flexShrink(){return this.geometry[11]}set flexShrink(e){this.geometry[11]=e}setPadding(e,t,i,s){this.geometry[12]=e,this.geometry[13]=t,this.geometry[14]=i,this.geometry[15]=s}setPaddingAll(e){this.setPadding(e,e,e,e)}get innerWidth(){return this.geometry[2]-this.geometry[15]-this.geometry[13]}get innerHeight(){return this.geometry[3]-this.geometry[12]-this.geometry[14]}get innerX(){return this.geometry[15]}get innerY(){return this.geometry[12]}resolveFont(){return this.surface?.getTheme()?.fontAtlas??null}getContentWidth(){return 0}getContentHeight(){return 0}measureIntrinsicWidth(){return"fixed"===this.sizingX?this.preferredWidth:"grow"===this.sizingX||"percent"===this.sizingX?this.geometry[6]:this.preferredWidth>0?this.preferredWidth:this.layout?this.layout.measureWidth(this)+this.geometry[15]+this.geometry[13]:this.getContentWidth()+this.geometry[15]+this.geometry[13]}measureIntrinsicHeight(){return"fixed"===this.sizingY?this.preferredHeight:"grow"===this.sizingY||"percent"===this.sizingY?this.geometry[7]:this.preferredHeight>0?this.preferredHeight:this.layout?this.layout.measureHeight(this)+this.geometry[12]+this.geometry[14]:this.getContentHeight()+this.geometry[12]+this.geometry[14]}addChild(e){e.parent=this,e.propagateEffectiveVisibility(this._effectivelyVisible),e.absolute&&(this._hasAbsoluteChildren=!0),this.surface&&e.setSurface(this.surface),this.children.push(e),this.needsLayout=!0,this.markDirty()}removeChild(e){const t=this.children.indexOf(e);-1!==t&&(this.children.splice(t,1),e.parent=null,e.setSurface(null),e.absolute&&this.recomputeHasAbsoluteChildren(),this.needsLayout=!0,this.markDirty())}removeAllChildren(){for(let e=this.children.length-1;e>=0;e--)this.children[e].parent=null,this.children[e].setSurface(null);this.children.length=0,this._hasAbsoluteChildren=!1,this.needsLayout=!0,this.markDirty()}recomputeHasAbsoluteChildren(){this._hasAbsoluteChildren=!1;for(let e=0;e<this.children.length;e++)if(this.children[e].absolute)return void(this._hasAbsoluteChildren=!0)}isEffectivelyVisible(){return this._effectivelyVisible}invalidateLayout(){this.needsLayout=!0;let e=this.visible,t=this.parent;for(;t;)t.needsLayout=!0,e&&!t.visible&&(e=!1),t=t.parent;e&&this.surface&&this.surface.markDirty()}markDirty(){if(this.surface){const e=this.screenScale,t=this.width*e|0,i=this.height*e|0;this.surface.markDirtyRect(this.absoluteX-1,this.absoluteY-1,t+2,i+2)}}setSurface(e){this.surface=e;for(let t=0;t<this.children.length;t++)this.children[t].setSurface(e)}computeLayout(){const e=this.designWidth>0||this.designHeight>0;let t=0,i=0;if(e){t=this.geometry[2],i=this.geometry[3],this.virtualWidth=this.designWidth>0?this.designWidth:t,this.virtualHeight=this.designHeight>0?this.designHeight:i,this.geometry[2]=this.virtualWidth,this.geometry[3]=this.virtualHeight;const e=this.designWidth>0?t/this.designWidth:1,s=this.designHeight>0?i/this.designHeight:1;this.designScale=this.snapScale(Math.min(e,s));const h=this.virtualWidth*this.designScale,r=this.virtualHeight*this.designScale;this.designOffsetX=(t-h)/2|0,this.designOffsetY=(i-r)/2|0}else this.designScale=1,this.designOffsetX=0,this.designOffsetY=0;this.layout&&this.needsLayout&&(this.layout.compute(this),this.needsLayout=!1),this._hasAbsoluteChildren&&this.resolveAbsoluteChildren(),e&&(this.geometry[2]=t,this.geometry[3]=i);const s=this.geometry[15],h=this.geometry[12],r=this.screenScale*this.designScale;for(let t=0;t<this.children.length;t++){const i=this.children[t];i.screenScale=r,e?(i.absoluteX=this.absoluteX+this.designOffsetX+(s+i.geometry[0])*this.designScale|0,i.absoluteY=this.absoluteY+this.designOffsetY+(h+i.geometry[1])*this.designScale|0):(i.absoluteX=this.absoluteX+s+i.geometry[0]|0,i.absoluteY=this.absoluteY+h+i.geometry[1]|0),i.computeLayout()}}snapScale(e){if(this.designScaleStep>0){const t=Math.floor(e/this.designScaleStep)*this.designScaleStep;return t>0?t:this.designScaleStep}return"none"===this.designScaleSnap?e:e>=1?"binary"===this.designScaleSnap?2**Math.floor(Math.log2(e)):Math.floor(e)||1:2**Math.floor(Math.log2(e))}resolveAbsoluteChildren(){const e=this.innerWidth,t=this.innerHeight;for(let i=0;i<this.children.length;i++){const s=this.children[i];if(!s.absolute)continue;const h=s.geometry,r=s.anchorLeft==s.anchorLeft,n=s.anchorRight==s.anchorRight,o=s.anchorTop==s.anchorTop,l=s.anchorBottom==s.anchorBottom;let a,g,d,c;a=r&&n?e-s.anchorLeft-s.anchorRight:h[4]>0?h[4]:s.measureIntrinsicWidth(),g=o&&l?t-s.anchorTop-s.anchorBottom:h[5]>0?h[5]:s.measureIntrinsicHeight(),d=r?s.anchorLeft:n?e-a-s.anchorRight:Math.round((e-a)/2),c=o?s.anchorTop:l?t-g-s.anchorBottom:Math.round((t-g)/2),h[0]=d,h[1]=c,h[2]=a>0?a:0,h[3]=g>0?g:0,s.needsLayout=!0}}draw(e,t){if(this.autoFitScale){let e=this.maxScale;this.fitReferenceWidth>0&&(e=Math.min(e,this.innerWidth/this.fitReferenceWidth)),this.fitReferenceHeight>0&&(e=Math.min(e,this.innerHeight/this.fitReferenceHeight)),this.computedScale=Math.max(this.minScale,Math.min(this.maxScale,e))}this.drawSelf(e,t),this.drawChildren(e,t)}drawSelf(e,t){}drawChildren(e,t){const i=this.designWidth>0||this.designHeight>0,s=this.geometry[15],h=this.geometry[13],r=this.geometry[12],n=this.geometry[14],o=r>0||h>0||n>0||s>0;i&&(e.pushTranslate(this.designOffsetX,this.designOffsetY),e.pushScale(this.designScale,this.designScale));const l=i&&this.designScale>0&&this.designScale<1?Math.round(1/this.designScale):1;if(o){const t=l>1?Math.round(s/l)*l:s,o=l>1?Math.round(r/l)*l:r;if(e.pushTranslate(t,o),i){const i=this.virtualWidth-t-(l>1?Math.round(h/l)*l:h),s=this.virtualHeight-o-(l>1?Math.round(n/l)*l:n);e.pushClip(0,0,i,s)}else e.pushClip(0,0,this.innerWidth,this.innerHeight)}for(let i=0;i<this.children.length;i++){const s=this.children[i];if(!s.visible)continue;if(this.surface&&!this.surface.isRectInDirtyArea(s.absoluteX,s.absoluteY,s.geometry[2],s.geometry[3]))continue;const h=s.geometry,r=l>1?Math.round(h[0]/l)*l:h[0],n=l>1?Math.round(h[1]/l)*l:h[1],o=l>1?Math.round(h[2]/l)*l:h[2],a=l>1?Math.round(h[3]/l)*l:h[3];e.pushTranslateClip(r,n,0,0,o,a),s.draw(e,t),e.popTranslateClip()}o&&(e.popClip(),e.popTranslate()),i&&(e.popScale(),e.popTranslate())}hitTest(e,t){if(!this.visible)return null;let i=e,s=t;(this.designWidth>0||this.designHeight>0)&&(i=(e-this.designOffsetX)/this.designScale,s=(t-this.designOffsetY)/this.designScale);const h=i-this.geometry[15],r=s-this.geometry[12];for(let e=this.children.length-1;e>=0;e--){const t=this.children[e];if(!t.visible)continue;const i=t.geometry,s=h-i[0],n=r-i[1];if(s>=0&&s<i[2]&&n>=0&&n<i[3]){const e=t.hitTest(s,n);if(e)return e}}return this}onPointerDown(e,t,i,s){return!1}onPointerUp(e,t,i,s){}onPointerMove(e,t,i){}onPointerEnter(){}onPointerLeave(){}onWheel(e,t){return!1}onKeyDown(e,t,i,s,h){return!1}onKeyUp(e,t){}onFocus(){}onBlur(){}}export{y as SLOT_COUNT,g as SLOT_FLEX_GROW,d as SLOT_FLEX_SHRINK,s as SLOT_HEIGHT,a as SLOT_MAX_HEIGHT,l as SLOT_MAX_WIDTH,o as SLOT_MIN_HEIGHT,n as SLOT_MIN_WIDTH,f as SLOT_PADDING_BOTTOM,m as SLOT_PADDING_LEFT,u as SLOT_PADDING_RIGHT,c as SLOT_PADDING_TOP,r as SLOT_PREFERRED_HEIGHT,h as SLOT_PREFERRED_WIDTH,i as SLOT_WIDTH,e as SLOT_X,t as SLOT_Y,p as THEME_DEFAULT,S as Widget};

package/dist/defaults.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.DEFAULTS={labeledControlGap:0,valueColumnWidth:210,controlInnerGap:4,buttonRowGap:2,folderHeaderGap:4,folderHeaderPadding:4,folderChevronWidth:12,folderChevronSize:5,folderAnimDurationMs:200,sliderValueBgRadius:2,sliderValuePaddingRight:4,sliderTrackHeight:7,sliderTrackRadius:2,sliderThumbMaxDiameter:12,sliderKnobShadowColor:102,sliderDefaultThumbColor:4294967275,sliderKnobShadowOffsetY:1,scrubHitWidth:12,scrubLineWidth:2,scrubLineInset:2,scrubLineLeft:4,scrubLineHoverColor:4294967278,scrubLineNormalColor:4294967066,editInputBg:"rgba(255, 255, 255, 0.12)",editInputColor:"rgba(255, 255, 255, 0.85)",editInputZIndex:"1000001",editInputCaretColor:"rgba(255, 255, 255, 0.85)",checkboxSize:24,checkboxBorderRadius:3,checkboxCheckLineWidth:2,checkboxDefaultBorderColor:4294967078,colorSvSize:96,colorHueBarHeight:24,colorAlphaBarHeight:24,colorPickerPadding:6,colorSwatchWidth:24,colorSwatchBorderRadius:2,colorSwatchBorderColor:4294967078,colorSwatchBorderWidth:1,colorPickerBorderWidth:1,colorSvSteps:16,colorCrosshairArm:5,colorHueSteps:24,colorHueMarkerWidth:3,colorAlphaCheckSize:4,colorAlphaSteps:24,monitorRingSize:64,monitorGraphHeight:72,monitorGraphBorderRadius:3,monitorGraphStrokeWidth:1,reorderRowHeight:24,reorderHandleWidth:20,reorderIndicatorColor:1149829119,reorderIndicatorHeight:2,reorderRowBgColor:4294967053,reorderRowBorderRadius:4,reorderHandleColor:4294967117,reorderItemLabelColor:4294967219,separatorHeight:2,separatorDefaultColor:572662527,separatorDefaultThickness:1,tabBarHeight:35,tabArrowWidth:18,tabArrowHalf:5,tabStripPaddingTop:8,tabStripPaddingSide:8,tabRadius:9,tabSeparatorHeight:15,tabSeparatorColor:4294967076,tabHoverColor:4294967053,tabInitialCapacity:32,scrollSpeed:40,scrollThumbMinHeight:16,scrollDefaultWidth:5,scrollThumbBorderRadius:3,textInputSelectionColor:709520127,textInputPadding:4,buttonDisabledAlpha:.4,textLogDefaultRows:4,textLogDefaultLineHeight:16,textLogLabelColor:4294967168,textLogBorderRadius:3,textLogThemeLineHeight:14,textLogThemePadding:12,pointInputBorderRadius:2,backdropColor:1,toggleIconHoveredStroke:"rgba(255,255,255,0.9)",toggleIconNormalStroke:"rgba(255,255,255,0.5)",selectDropdownBorderWidth:1,panelDefaultWidth:400,panelDefaultFontSize:11,panelDefaultToggleKey:"p",panelDefaultStorageKey:"inspect-visible",panelDefaultFontFamily:"monospace",panelZIndex:"999999",panelTransitionDuration:"0.7s",panelTransitionEasing:"cubic-bezier(0.83, 0, 0.17, 1)",panelHiddenOffsetExtra:50,panelBoxShadowX:7,panelBoxShadowBlur:12,panelBoxShadowColor:"rgba(0, 0, 0, 0.5)"};

package/dist/defaults.d.ts

@@ -0,0 +1,113 @@
+/** Compile-time layout and style constants for the inspect panel widgets. */
+export declare const DEFAULTS: {
+    labeledControlGap: number;
+    valueColumnWidth: number;
+    controlInnerGap: number;
+    buttonRowGap: number;
+    folderHeaderGap: number;
+    folderHeaderPadding: number;
+    folderChevronWidth: number;
+    folderChevronSize: number;
+    folderAnimDurationMs: number;
+    folderHeaderBorderHeight: number;
+    sliderValueWidth: number;
+    sliderValueBgRadius: number;
+    sliderValuePaddingRight: number;
+    sliderTrackHeight: number;
+    sliderTrackRadius: number;
+    sliderThumbMaxDiameter: number;
+    sliderKnobShadowColor: number;
+    sliderDefaultThumbColor: number;
+    sliderKnobShadowOffsetY: number;
+    scrubHitWidth: number;
+    scrubLineWidth: number;
+    scrubLineInset: number;
+    scrubLineLeft: number;
+    scrubLineHoverColor: number;
+    scrubLineNormalColor: number;
+    editInputBg: string;
+    editInputColor: string;
+    editInputZIndex: string;
+    editInputCaretColor: string;
+    checkboxSize: number;
+    checkboxBorderRadius: number;
+    checkboxCheckLineWidth: number;
+    checkboxDefaultBorderColor: number;
+    colorSvSize: number;
+    colorHueBarHeight: number;
+    colorAlphaBarHeight: number;
+    colorPickerPadding: number;
+    colorSwatchWidth: number;
+    colorSwatchBorderRadius: number;
+    colorSwatchBorderColor: number;
+    colorSwatchBorderWidth: number;
+    colorPickerBorderWidth: number;
+    colorSvSteps: number;
+    colorCrosshairArm: number;
+    colorHueSteps: number;
+    colorHueMarkerWidth: number;
+    colorAlphaCheckSize: number;
+    colorAlphaSteps: number;
+    monitorRingSize: number;
+    monitorGraphHeight: number;
+    monitorGraphBorderRadius: number;
+    monitorGraphStrokeWidth: number;
+    reorderRowHeight: number;
+    reorderHandleWidth: number;
+    reorderIndicatorColor: number;
+    reorderIndicatorHeight: number;
+    reorderRowBgColor: number;
+    reorderRowBorderRadius: number;
+    reorderHandleColor: number;
+    reorderItemLabelColor: number;
+    separatorHeight: number;
+    separatorDefaultColor: number;
+    separatorDefaultThickness: number;
+    tabBarHeight: number;
+    tabArrowWidth: number;
+    tabArrowHalf: number;
+    tabStripPaddingTop: number;
+    tabStripPaddingSide: number;
+    tabRadius: number;
+    tabSeparatorHeight: number;
+    tabSeparatorColor: number;
+    tabHoverColor: number;
+    tabIndicatorHeight: number;
+    tabPadding: number;
+    tabInitialCapacity: number;
+    scrollSpeed: number;
+    scrollThumbMinHeight: number;
+    scrollDefaultWidth: number;
+    scrollThumbBorderRadius: number;
+    textInputSelectionColor: number;
+    textInputPadding: number;
+    buttonDisabledAlpha: number;
+    toggleActiveBorderColor: number;
+    textLogDefaultRows: number;
+    textLogDefaultLineHeight: number;
+    textLogLabelColor: number;
+    textLogBorderRadius: number;
+    textLogThemeLineHeight: number;
+    textLogThemePadding: number;
+    pointAxisGap: number;
+    pointAxisInnerGap: number;
+    pointInputBorderRadius: number;
+    backdropColor: number;
+    overlayDefaultBackdropColor: number;
+    toggleIconHoveredStroke: string;
+    toggleIconNormalStroke: string;
+    selectDropdownBorderWidth: number;
+    guiTabContainerTabBarHeight: number;
+    panelDefaultWidth: number;
+    panelDefaultFontSize: number;
+    panelDefaultToggleKey: string;
+    panelDefaultStorageKey: string;
+    panelDefaultFontFamily: string;
+    panelZIndex: string;
+    panelTransitionDuration: string;
+    panelTransitionEasing: string;
+    panelHiddenOffsetExtra: number;
+    panelBoxShadowX: number;
+    panelBoxShadowBlur: number;
+    panelBoxShadowColor: string;
+};

package/dist/defaults.mjs

@@ -0,0 +1 @@
+const e={labeledControlGap:0,valueColumnWidth:210,controlInnerGap:4,buttonRowGap:2,folderHeaderGap:4,folderHeaderPadding:4,folderChevronWidth:12,folderChevronSize:5,folderAnimDurationMs:200,sliderValueBgRadius:2,sliderValuePaddingRight:4,sliderTrackHeight:7,sliderTrackRadius:2,sliderThumbMaxDiameter:12,sliderKnobShadowColor:102,sliderDefaultThumbColor:4294967275,sliderKnobShadowOffsetY:1,scrubHitWidth:12,scrubLineWidth:2,scrubLineInset:2,scrubLineLeft:4,scrubLineHoverColor:4294967278,scrubLineNormalColor:4294967066,editInputBg:"rgba(255, 255, 255, 0.12)",editInputColor:"rgba(255, 255, 255, 0.85)",editInputZIndex:"1000001",editInputCaretColor:"rgba(255, 255, 255, 0.85)",checkboxSize:24,checkboxBorderRadius:3,checkboxCheckLineWidth:2,checkboxDefaultBorderColor:4294967078,colorSvSize:96,colorHueBarHeight:24,colorAlphaBarHeight:24,colorPickerPadding:6,colorSwatchWidth:24,colorSwatchBorderRadius:2,colorSwatchBorderColor:4294967078,colorSwatchBorderWidth:1,colorPickerBorderWidth:1,colorSvSteps:16,colorCrosshairArm:5,colorHueSteps:24,colorHueMarkerWidth:3,colorAlphaCheckSize:4,colorAlphaSteps:24,monitorRingSize:64,monitorGraphHeight:72,monitorGraphBorderRadius:3,monitorGraphStrokeWidth:1,reorderRowHeight:24,reorderHandleWidth:20,reorderIndicatorColor:1149829119,reorderIndicatorHeight:2,reorderRowBgColor:4294967053,reorderRowBorderRadius:4,reorderHandleColor:4294967117,reorderItemLabelColor:4294967219,separatorHeight:2,separatorDefaultColor:572662527,separatorDefaultThickness:1,tabBarHeight:35,tabArrowWidth:18,tabArrowHalf:5,tabStripPaddingTop:8,tabStripPaddingSide:8,tabRadius:9,tabSeparatorHeight:15,tabSeparatorColor:4294967076,tabHoverColor:4294967053,tabInitialCapacity:32,scrollSpeed:40,scrollThumbMinHeight:16,scrollDefaultWidth:5,scrollThumbBorderRadius:3,textInputSelectionColor:709520127,textInputPadding:4,buttonDisabledAlpha:.4,textLogDefaultRows:4,textLogDefaultLineHeight:16,textLogLabelColor:4294967168,textLogBorderRadius:3,textLogThemeLineHeight:14,textLogThemePadding:12,pointInputBorderRadius:2,backdropColor:1,toggleIconHoveredStroke:"rgba(255,255,255,0.9)",toggleIconNormalStroke:"rgba(255,255,255,0.5)",selectDropdownBorderWidth:1,panelDefaultWidth:400,panelDefaultFontSize:11,panelDefaultToggleKey:"p",panelDefaultStorageKey:"inspect-visible",panelDefaultFontFamily:"monospace",panelZIndex:"999999",panelTransitionDuration:"0.7s",panelTransitionEasing:"cubic-bezier(0.83, 0, 0.17, 1)",panelHiddenOffsetExtra:50,panelBoxShadowX:7,panelBoxShadowBlur:12,panelBoxShadowColor:"rgba(0, 0, 0, 0.5)"};export{e as DEFAULTS};

package/dist/gui/gui-button-row.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"),o=require("../defaults.cjs"),r=require("../widgets/button.cjs");class s extends e.Widget{_config;_buttons=[];constructor(e){super(),this._config=e,this.sizingX="grow",this.sizingY="fixed",this.layout=new t.StackLayout("horizontal",o.DEFAULTS.buttonRowGap,"start","stretch");for(let t=0;t<e.buttons.length;t++){const o=e.buttons[t],s=new r.Button;s.sizingX="grow",s.sizingY="grow",s.flexGrow=1,s.text=o.title.toUpperCase(),s.onClick=o.onClick,this._buttons.push(s),this.addChild(s)}}applyTheme(t){this.preferredHeight=t.buttonHeight;for(const e of this._buttons)e.borderRadius=t.borderRadius,e.borderColor=t.borderInset,e.borderWidth=1}get config(){return this._config}}exports.GuiButtonRow=s;

package/dist/gui/gui-button-row.d.ts

@@ -0,0 +1,21 @@
+import { Widget } from '../core/widget';
+import { Theme } from '../core/theme';
+/** Configuration for a horizontal row of action buttons. */
+export interface GuiButtonRowConfig {
+    key: string;
+    buttons: {
+        title: string;
+        onClick: () => void;
+    }[];
+}
+/** A horizontal strip of equally-sized action buttons. */
+export declare class GuiButtonRow extends Widget {
+    private readonly _config;
+    private readonly _buttons;
+    /** builds one equally-weighted button per config entry, laid out in a horizontal row. */
+    constructor(config: GuiButtonRowConfig);
+    /** applies theme height and button border styling. */
+    applyTheme(theme: Theme): void;
+    /** the configuration this row was built from. */
+    get config(): GuiButtonRowConfig;
+}

package/dist/gui/gui-button-row.mjs

@@ -0,0 +1 @@
+import{StackLayout as t}from"../core/layouts/stack-layout.mjs";import{Widget as o}from"../core/widget.mjs";import{DEFAULTS as r}from"../defaults.mjs";import{Button as s}from"../widgets/button.mjs";class i extends o{_config;_buttons=[];constructor(o){super(),this._config=o,this.sizingX="grow",this.sizingY="fixed",this.layout=new t("horizontal",r.buttonRowGap,"start","stretch");for(let t=0;t<o.buttons.length;t++){const r=o.buttons[t],i=new s;i.sizingX="grow",i.sizingY="grow",i.flexGrow=1,i.text=r.title.toUpperCase(),i.onClick=r.onClick,this._buttons.push(i),this.addChild(i)}}applyTheme(t){this.preferredHeight=t.buttonHeight;for(const o of this._buttons)o.borderRadius=t.borderRadius,o.borderColor=t.borderInset,o.borderWidth=1}get config(){return this._config}}export{i as GuiButtonRow};

package/dist/gui/gui-button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../widgets/button.cjs");class e extends t.Button{constructor(t,e){super(),this.text=t.toUpperCase(),this.sizingX="grow",this.sizingY="fixed",e&&(this.onClick=e)}applyTheme(t){this.preferredHeight=t.buttonHeight,this.borderRadius=t.borderRadius,this.borderColor=t.borderInset,this.borderWidth=1}}exports.GuiButton=e;

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

@@ -0,0 +1,9 @@
+import { Button } from '../widgets/button';
+import { Theme } from '../core/theme';
+/** Themed action button for use within the inspect panel. */
+export declare class GuiButton extends Button {
+    /** builds a grow-width button; the title is uppercased for the panel's button style. */
+    constructor(title: string, onClick?: () => void);
+    /** applies theme values to the button. */
+    applyTheme(theme: Theme): void;
+}

package/dist/gui/gui-button.mjs

@@ -0,0 +1 @@
+import{Button as t}from"../widgets/button.mjs";class e extends t{constructor(t,e){super(),this.text=t.toUpperCase(),this.sizingX="grow",this.sizingY="fixed",e&&(this.onClick=e)}applyTheme(t){this.preferredHeight=t.buttonHeight,this.borderRadius=t.borderRadius,this.borderColor=t.borderInset,this.borderWidth=1}}export{e as GuiButton};

package/dist/gui/gui-color.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./labeled-control.cjs"),a=require("../core/layouts/stack-layout.cjs"),e=require("../core/widget.cjs"),i=require("../defaults.cjs"),h=require("../utils/color-convert.cjs"),s=require("../widgets/box.cjs"),r=require("../widgets/canvas-widget.cjs"),o=require("../widgets/label.cjs"),l=i.DEFAULTS.colorSvSize+2*i.DEFAULTS.colorPickerPadding,n={r:0,g:0,b:0,a:1},c={r:0,g:0,b:0,a:1};function d(t,a){return _(t.charCodeAt(a))<<4|_(t.charCodeAt(a+1))}function _(t){return t>=48&&t<=57?t-48:t>=65&&t<=70?t-55:t>=97&&t<=102?t-87:0}function g(t,a,e,i){const s=255*Math.max(0,Math.min(1,t))+.5|0,r=255*Math.max(0,Math.min(1,a))+.5|0,o=255*Math.max(0,Math.min(1,e))+.5|0;if(void 0!==i){const t=255*Math.max(0,Math.min(1,i))+.5|0;return"#"+h.HEX_LUT[s]+h.HEX_LUT[r]+h.HEX_LUT[o]+h.HEX_LUT[t]}return"#"+h.HEX_LUT[s]+h.HEX_LUT[r]+h.HEX_LUT[o]}function u(t,a,e,i,h){switch(h){case"hex":return g(t,a,e);case"hexAlpha":return g(t,a,e,i);case"floatRgb":return"{r:"+t.toFixed(2)+",g:"+a.toFixed(2)+",b:"+e.toFixed(2)+"}";case"floatRgba":return"{r:"+t.toFixed(2)+",g:"+a.toFixed(2)+",b:"+e.toFixed(2)+",a:"+i.toFixed(2)+"}";case"intRgb":return"{r:"+(255*t+.5|0)+",g:"+(255*a+.5|0)+",b:"+(255*e+.5|0)+"}";case"intRgba":return"{r:"+(255*t+.5|0)+",g:"+(255*a+.5|0)+",b:"+(255*e+.5|0)+",a:"+(255*i+.5|0)+"}"}}const p=new Uint32Array(i.DEFAULTS.colorHueSteps);let b=!1;class v extends t.LabeledControl{_config;_swatch;_valueBg;_valueLabel;_mode;_hasAlpha;_displayFormat;_picker=null;_backdrop=null;_svWidget=null;_hueWidget=null;_alphaWidget=null;_open=!1;_hue=0;_sat=0;_val=1;_alpha=1;_draggingSV=!1;_draggingHue=!1;_draggingAlpha=!1;_svCache=null;_svCacheHue=-1;_alphaCache=null;_alphaCacheHue=-1;_alphaCacheSat=-1;_alphaCacheVal=-1;_lastNormR=-1;_lastNormG=-1;_lastNormB=-1;constructor(t){super(),this._config=t,this.labelText=t.label,this._mode=t.mode??"float",this._hasAlpha=t.alpha??"hexAlpha"===t.mode,this._displayFormat=t.displayFormat??function(t,a){switch(t){case"hex":return"hex";case"hexAlpha":return"hexAlpha";case"float":return a?"floatRgba":"floatRgb";case"int":return a?"intRgba":"intRgb"}}(this._mode,this._hasAlpha),this.controlContainer.layout=new a.StackLayout("horizontal",i.DEFAULTS.controlInnerGap,"start","stretch"),this._swatch=new s.Box,this._swatch.sizingX="fixed",this._swatch.sizingY="grow",this._swatch.preferredWidth=i.DEFAULTS.colorSwatchWidth,this._swatch.borderRadius=i.DEFAULTS.colorSwatchBorderRadius,this._swatch.borderColor=i.DEFAULTS.colorSwatchBorderColor,this._swatch.borderWidth=i.DEFAULTS.colorSwatchBorderWidth,this.controlContainer.addChild(this._swatch),this._valueBg=new s.Box,this._valueBg.sizingX="grow",this._valueBg.sizingY="grow",this._valueBg.flexGrow=1,this._valueBg.borderRadius=2,this._valueBg.layout=new a.StackLayout("horizontal",0,"start","stretch"),this._valueBg.setPadding(0,2,0,2),this._valueBg.onPointerDown=(t,a,e,i)=>(this._open||this.copyValueToClipboard(),!1),this._valueLabel=new o.Label,this._valueLabel.sizingX="grow",this._valueLabel.sizingY="grow",this._valueLabel.flexGrow=1,this._valueLabel.vAlign="middle",this._valueLabel.hAlign="left",this._valueLabel.overflow="ellipsis",this._valueLabel.color=e.THEME_DEFAULT,this._valueBg.addChild(this._valueLabel),this.controlContainer.addChild(this._valueBg),this.syncFromValue()}copyValueToClipboard(){const t=this._valueLabel.text;t&&navigator.clipboard&&navigator.clipboard.writeText(t)}readNormalized(){const t=this._config.value();if("string"==typeof t)return void function(t){const a=35===t.charCodeAt(0)?1:0;n.r=(d(t,a)||0)/255,n.g=(d(t,a+2)||0)/255,n.b=(d(t,a+4)||0)/255,n.a=t.length-a>=8?(d(t,a+6)||0)/255:1}(t);const a="int"===this._mode?1/255:1;n.r=t.r*a,n.g=t.g*a,n.b=t.b*a,n.a=void 0!==t.a?t.a*a:1}emitValue(t,a,e,i){const h=this._config.onChange;switch(this._mode){case"int":c.r=Math.round(255*t),c.g=Math.round(255*a),c.b=Math.round(255*e),this._hasAlpha&&(c.a=Math.round(255*i)),h(c);break;case"hex":h(g(t,a,e));break;case"hexAlpha":h(g(t,a,e,i));break;default:c.r=t,c.g=a,c.b=e,this._hasAlpha&&(c.a=i),h(c)}}syncFromValue(){this.readNormalized();const t=n.r,a=n.g,e=n.b;if(t===this._lastNormR&&a===this._lastNormG&&e===this._lastNormB)return;this._lastNormR=t,this._lastNormG=a,this._lastNormB=e;const i=h.rgbToHsv(t,a,e);this._hue=i[0],this._sat=i[1],this._val=i[2],this._alpha=n.a,this._swatch.bgColor=h.packRGBA(t,a,e,n.a),this._valueLabel.text=u(t,a,e,n.a,this._displayFormat)}updateColor(){const t=h.hsvToRgb(this._hue,this._sat,this._val),a=t[0],e=t[1],i=t[2];this._lastNormR=a,this._lastNormG=e,this._lastNormB=i,this._swatch.bgColor=h.packRGBA(a,e,i,this._alpha),this._swatch.markDirty(),this._valueLabel.text=u(a,e,i,this._alpha,this._displayFormat),this._valueLabel.markDirty(),this.emitValue(a,e,i,this._alpha),this._svWidget&&this._svWidget.markDirty(),this._hueWidget&&this._hueWidget.markDirty(),this._alphaWidget&&this._alphaWidget.markDirty()}getSurfaceRoot(){let t=this.parent;for(;t&&t.parent;)t=t.parent;return t}ensurePickerWidgets(){if(this._picker)return;const t=i.DEFAULTS.colorSvSize+i.DEFAULTS.colorHueBarHeight+(this._hasAlpha?i.DEFAULTS.colorAlphaBarHeight+i.DEFAULTS.colorPickerPadding:0)+3*i.DEFAULTS.colorPickerPadding,e=new s.Box;e.absolute=!0,e.anchorTop=0,e.anchorLeft=0,e.anchorRight=0,e.anchorBottom=0,e.bgColor=i.DEFAULTS.backdropColor,e.onPointerDown=()=>(this.closePicker(),!0);const o=new s.Box;o.absolute=!0,o.sizingX="fixed",o.sizingY="fixed",o.preferredWidth=l,o.preferredHeight=t,o.borderWidth=i.DEFAULTS.colorPickerBorderWidth,o.setPaddingAll(i.DEFAULTS.colorPickerPadding),o.layout=new a.StackLayout("vertical",i.DEFAULTS.colorPickerPadding,"start","stretch");const n=new r.CanvasWidget;n.sizingX="grow",n.sizingY="fixed",n.preferredHeight=i.DEFAULTS.colorSvSize,n.onDraw=(t,a,e,i)=>{this.drawSVGradient(t,e,i)},n.onPointerDown=(t,a,e,i)=>(this._draggingSV=!0,this.updateSV(a,e,n.width,n.height),!0),n.onPointerMove=(t,a,e)=>{this._draggingSV&&this.updateSV(a,e,n.width,n.height)},n.onPointerUp=()=>{this._draggingSV=!1},this._svWidget=n,o.addChild(n),function(){if(b)return;const t=i.DEFAULTS.colorHueSteps;for(let a=0;a<t;a++){const e=(a+.5)/t*360,i=h.hsvToRgb(e,1,1);p[a]=h.packRGBA(i[0],i[1],i[2],1)}b=!0}();const c=new r.CanvasWidget;if(c.sizingX="grow",c.sizingY="fixed",c.preferredHeight=i.DEFAULTS.colorHueBarHeight,c.onDraw=(t,a,e,i)=>{this.drawHueBar(t,e,i)},c.onPointerDown=(t,a,e,i)=>(this._draggingHue=!0,this.updateHue(a,c.width),!0),c.onPointerMove=(t,a,e)=>{this._draggingHue&&this.updateHue(a,c.width)},c.onPointerUp=()=>{this._draggingHue=!1},this._hueWidget=c,o.addChild(c),this._hasAlpha){const t=new r.CanvasWidget;t.sizingX="grow",t.sizingY="fixed",t.preferredHeight=i.DEFAULTS.colorAlphaBarHeight,t.onDraw=(t,a,e,i)=>{this.drawAlphaBar(t,e,i)},t.onPointerDown=(a,e,i,h)=>(this._draggingAlpha=!0,this.updateAlpha(e,t.width),!0),t.onPointerMove=(a,e,i)=>{this._draggingAlpha&&this.updateAlpha(e,t.width)},t.onPointerUp=()=>{this._draggingAlpha=!1},this._alphaWidget=t,o.addChild(t)}this._backdrop=e,this._picker=o}openPicker(){if(this._open)return;this._open=!0,this.syncFromValue();const t=this.getSurfaceRoot();if(!t)return;this.ensurePickerWidgets();const a=this._picker,e=this._backdrop;a.anchorLeft=this._swatch.absoluteX,a.anchorTop=this._swatch.absoluteY+this._swatch.height;const i=this.surface?.getTheme();a.bgColor=i?.bgPanelRaised??858993663,a.borderColor=i?.borderPanel??1431655935,t.addChild(e),t.addChild(a),t.needsLayout=!0}closePicker(){if(!this._open)return;this._open=!1;const t=this.getSurfaceRoot();t&&(this._backdrop&&t.removeChild(this._backdrop),this._picker&&t.removeChild(this._picker)),this._draggingSV=!1,this._draggingHue=!1,this._draggingAlpha=!1}updateSV(t,a,e,i){this._sat=Math.max(0,Math.min(1,t/Math.max(1,e))),this._val=Math.max(0,Math.min(1,1-a/Math.max(1,i))),this.updateColor()}updateHue(t,a){this._hue=Math.max(0,Math.min(360,t/Math.max(1,a)*360)),this._svCacheHue=-1,this.updateColor()}updateAlpha(t,a){this._alpha=Math.max(0,Math.min(1,t/Math.max(1,a))),this.updateColor()}drawSVGradient(t,a,e){const s=i.DEFAULTS.colorSvSteps,r=a/s,o=e/s,l=Math.ceil(r),n=Math.ceil(o);if(!this._svCache||this._svCacheHue!==this._hue){this._svCache||(this._svCache=new Uint32Array(s*s)),this._svCacheHue=this._hue;for(let t=0;t<s;t++)for(let a=0;a<s;a++){const e=(t+.5)/s,i=1-(a+.5)/s,r=h.hsvToRgb(this._hue,e,i);this._svCache[a*s+t]=h.packRGBA(r[0],r[1],r[2],1)}}for(let a=0;a<s;a++)for(let e=0;e<s;e++)t.fillRect(a*r|0,e*o|0,l,n,this._svCache[e*s+a]);const c=this._sat*a|0,d=(1-this._val)*e|0,_=i.DEFAULTS.colorCrosshairArm;t.fillRect(c-_,d,2*_+1,1,4294967295),t.fillRect(c,d-_,1,2*_+1,4294967295)}drawHueBar(t,a,e){const h=i.DEFAULTS.colorHueSteps,s=a/h,r=Math.ceil(s);for(let a=0;a<h;a++)t.fillRect(a*s|0,0,r,e,p[a]);t.fillRect(this._hue/360*a-1|0,0,i.DEFAULTS.colorHueMarkerWidth,e,4294967295)}drawAlphaBar(t,a,e){const s=i.DEFAULTS.colorAlphaCheckSize;for(let i=0;i<a;i+=s)for(let h=0;h<e;h+=s){const r=(i/s+h/s)%2==0;t.fillRect(i,h,Math.min(s,a-i),Math.min(s,e-h),r?2576980479:3435973887)}const r=i.DEFAULTS.colorAlphaSteps;if(!this._alphaCache||this._alphaCacheHue!==this._hue||this._alphaCacheSat!==this._sat||this._alphaCacheVal!==this._val){this._alphaCache||(this._alphaCache=new Uint32Array(r)),this._alphaCacheHue=this._hue,this._alphaCacheSat=this._sat,this._alphaCacheVal=this._val;const t=h.hsvToRgb(this._hue,this._sat,this._val);for(let a=0;a<r;a++){const e=(a+.5)/r;this._alphaCache[a]=h.packRGBA(t[0],t[1],t[2],e)}}const o=a/r,l=Math.ceil(o);for(let a=0;a<r;a++)t.fillRect(a*o|0,0,l,e,this._alphaCache[a]);t.fillRect(this._alpha*a-1|0,0,i.DEFAULTS.colorHueMarkerWidth,e,4294967295)}refresh(){this.syncFromValue()}onPointerDown(t,a,e,i){return this._open||this.openPicker(),!0}applyTheme(t){super.applyTheme(t),this._valueBg.bgColor=t.bgInput,this._valueLabel.color=t.textValue}get config(){return this._config}}exports.GuiColor=v;

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

@@ -0,0 +1,105 @@
+import { LabeledControl } from './labeled-control';
+import { Theme } from '../core/theme';
+/** How color channel values are stored (determines range and output shape). */
+export type ColorMode = "float" | "int" | "hex" | "hexAlpha";
+/** Format for the color value text displayed next to the swatch. */
+export type ColorDisplayFormat = "hex" | "hexAlpha" | "floatRgb" | "floatRgba" | "intRgb" | "intRgba";
+/** Configuration for a color picker control. */
+export interface GuiColorConfig {
+    key: string;
+    label: string;
+    value: () => {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    } | string;
+    onChange: (color: {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    } | string) => void;
+    mode?: ColorMode;
+    alpha?: boolean;
+    displayFormat?: ColorDisplayFormat;
+}
+/**
+ * Color picker control with swatch, value label, and popup HSV picker with
+ * optional alpha channel support.
+ */
+export declare class GuiColor extends LabeledControl {
+    private readonly _config;
+    private readonly _swatch;
+    private readonly _valueBg;
+    private readonly _valueLabel;
+    private readonly _mode;
+    private readonly _hasAlpha;
+    private readonly _displayFormat;
+    private _picker;
+    private _backdrop;
+    private _svWidget;
+    private _hueWidget;
+    private _alphaWidget;
+    private _open;
+    private _hue;
+    private _sat;
+    private _val;
+    private _alpha;
+    private _draggingSV;
+    private _draggingHue;
+    private _draggingAlpha;
+    private _svCache;
+    private _svCacheHue;
+    private _alphaCache;
+    private _alphaCacheHue;
+    private _alphaCacheSat;
+    private _alphaCacheVal;
+    private _lastNormR;
+    private _lastNormG;
+    private _lastNormB;
+    /** resolves storage mode, alpha flag, and display format, then builds the swatch and value label; click-to-copy. */
+    constructor(config: GuiColorConfig);
+    /** copies the current value label text to the clipboard when available. */
+    private copyValueToClipboard;
+    /** reads the bound value into normalized 0..1 channels in _scratchNorm, handling hex, int, and float forms. */
+    private readNormalized;
+    /** converts normalized channels back to the configured storage mode (int, hex, or float) and fires onChange. */
+    private emitValue;
+    /** reads the bound value and, when its RGB changed, refreshes the cached HSV, alpha, swatch, and value label. */
+    private syncFromValue;
+    /** recomputes RGB from the current HSV, updates swatch and label, emits the change, and repaints the picker. */
+    private updateColor;
+    /** walks up to the topmost ancestor, used as the parent for the picker and backdrop so they escape any clipping. */
+    private getSurfaceRoot;
+    /**
+     * Lazily builds the picker on first open: a backdrop that closes on click, the
+     * saturation/value square, the hue bar, and an alpha bar when alpha is
+     * enabled. Each sub-widget draws its gradient and drives its drag handler.
+     */
+    private ensurePickerWidgets;
+    /** syncs from the value, anchors the picker below the swatch, themes it, and attaches it and the backdrop to root. */
+    private openPicker;
+    /** removes the picker and backdrop from the root and clears any in-progress drags. */
+    private closePicker;
+    /** maps a point in the SV square to saturation (x) and value (inverted y), then updates the color. */
+    private updateSV;
+    /** maps a point on the hue bar to a 0..360 hue, invalidates the SV cache, and updates the color. */
+    private updateHue;
+    /** maps a point on the alpha bar to a 0..1 alpha and updates the color. */
+    private updateAlpha;
+    /** draws the saturation/value square from a per-hue cached grid and overlays the selection crosshair. */
+    private drawSVGradient;
+    /** draws the hue bar from the shared color cache and marks the current hue. */
+    private drawHueBar;
+    /** draws a checkerboard under a current-color alpha gradient (cached per HSV) and marks the current alpha. */
+    private drawAlphaBar;
+    /** re-reads the bound value and updates the swatch and label. */
+    refresh(): void;
+    /** opens the popup picker on the first pointer press. */
+    onPointerDown(_pointerId: number, _x: number, _y: number, _button: number): boolean;
+    /** applies theme colors to the value background and label. */
+    applyTheme(theme: Theme): void;
+    /** returns the control configuration. */
+    get config(): GuiColorConfig;
+}

package/dist/gui/gui-color.mjs

@@ -0,0 +1 @@
+import{LabeledControl as t}from"./labeled-control.mjs";import{StackLayout as a}from"../core/layouts/stack-layout.mjs";import{THEME_DEFAULT as i}from"../core/widget.mjs";import{DEFAULTS as e}from"../defaults.mjs";import{packRGBA as h,hsvToRgb as s,rgbToHsv as r,HEX_LUT as o}from"../utils/color-convert.mjs";import{Box as l}from"../widgets/box.mjs";import{CanvasWidget as n}from"../widgets/canvas-widget.mjs";import{Label as c}from"../widgets/label.mjs";const d=e.colorSvSize+2*e.colorPickerPadding,_={r:0,g:0,b:0,a:1},g={r:0,g:0,b:0,a:1};function u(t,a){return p(t.charCodeAt(a))<<4|p(t.charCodeAt(a+1))}function p(t){return t>=48&&t<=57?t-48:t>=65&&t<=70?t-55:t>=97&&t<=102?t-87:0}function m(t,a,i,e){const h=255*Math.max(0,Math.min(1,t))+.5|0,s=255*Math.max(0,Math.min(1,a))+.5|0,r=255*Math.max(0,Math.min(1,i))+.5|0;if(void 0!==e){const t=255*Math.max(0,Math.min(1,e))+.5|0;return"#"+o[h]+o[s]+o[r]+o[t]}return"#"+o[h]+o[s]+o[r]}function f(t,a,i,e,h){switch(h){case"hex":return m(t,a,i);case"hexAlpha":return m(t,a,i,e);case"floatRgb":return"{r:"+t.toFixed(2)+",g:"+a.toFixed(2)+",b:"+i.toFixed(2)+"}";case"floatRgba":return"{r:"+t.toFixed(2)+",g:"+a.toFixed(2)+",b:"+i.toFixed(2)+",a:"+e.toFixed(2)+"}";case"intRgb":return"{r:"+(255*t+.5|0)+",g:"+(255*a+.5|0)+",b:"+(255*i+.5|0)+"}";case"intRgba":return"{r:"+(255*t+.5|0)+",g:"+(255*a+.5|0)+",b:"+(255*i+.5|0)+",a:"+(255*e+.5|0)+"}"}}const w=new Uint32Array(e.colorHueSteps);let b=!1;class v extends t{_config;_swatch;_valueBg;_valueLabel;_mode;_hasAlpha;_displayFormat;_picker=null;_backdrop=null;_svWidget=null;_hueWidget=null;_alphaWidget=null;_open=!1;_hue=0;_sat=0;_val=1;_alpha=1;_draggingSV=!1;_draggingHue=!1;_draggingAlpha=!1;_svCache=null;_svCacheHue=-1;_alphaCache=null;_alphaCacheHue=-1;_alphaCacheSat=-1;_alphaCacheVal=-1;_lastNormR=-1;_lastNormG=-1;_lastNormB=-1;constructor(t){super(),this._config=t,this.labelText=t.label,this._mode=t.mode??"float",this._hasAlpha=t.alpha??"hexAlpha"===t.mode,this._displayFormat=t.displayFormat??function(t,a){switch(t){case"hex":return"hex";case"hexAlpha":return"hexAlpha";case"float":return a?"floatRgba":"floatRgb";case"int":return a?"intRgba":"intRgb"}}(this._mode,this._hasAlpha),this.controlContainer.layout=new a("horizontal",e.controlInnerGap,"start","stretch"),this._swatch=new l,this._swatch.sizingX="fixed",this._swatch.sizingY="grow",this._swatch.preferredWidth=e.colorSwatchWidth,this._swatch.borderRadius=e.colorSwatchBorderRadius,this._swatch.borderColor=e.colorSwatchBorderColor,this._swatch.borderWidth=e.colorSwatchBorderWidth,this.controlContainer.addChild(this._swatch),this._valueBg=new l,this._valueBg.sizingX="grow",this._valueBg.sizingY="grow",this._valueBg.flexGrow=1,this._valueBg.borderRadius=2,this._valueBg.layout=new a("horizontal",0,"start","stretch"),this._valueBg.setPadding(0,2,0,2),this._valueBg.onPointerDown=(t,a,i,e)=>(this._open||this.copyValueToClipboard(),!1),this._valueLabel=new c,this._valueLabel.sizingX="grow",this._valueLabel.sizingY="grow",this._valueLabel.flexGrow=1,this._valueLabel.vAlign="middle",this._valueLabel.hAlign="left",this._valueLabel.overflow="ellipsis",this._valueLabel.color=i,this._valueBg.addChild(this._valueLabel),this.controlContainer.addChild(this._valueBg),this.syncFromValue()}copyValueToClipboard(){const t=this._valueLabel.text;t&&navigator.clipboard&&navigator.clipboard.writeText(t)}readNormalized(){const t=this._config.value();if("string"==typeof t)return void function(t){const a=35===t.charCodeAt(0)?1:0;_.r=(u(t,a)||0)/255,_.g=(u(t,a+2)||0)/255,_.b=(u(t,a+4)||0)/255,_.a=t.length-a>=8?(u(t,a+6)||0)/255:1}(t);const a="int"===this._mode?1/255:1;_.r=t.r*a,_.g=t.g*a,_.b=t.b*a,_.a=void 0!==t.a?t.a*a:1}emitValue(t,a,i,e){const h=this._config.onChange;switch(this._mode){case"int":g.r=Math.round(255*t),g.g=Math.round(255*a),g.b=Math.round(255*i),this._hasAlpha&&(g.a=Math.round(255*e)),h(g);break;case"hex":h(m(t,a,i));break;case"hexAlpha":h(m(t,a,i,e));break;default:g.r=t,g.g=a,g.b=i,this._hasAlpha&&(g.a=e),h(g)}}syncFromValue(){this.readNormalized();const t=_.r,a=_.g,i=_.b;if(t===this._lastNormR&&a===this._lastNormG&&i===this._lastNormB)return;this._lastNormR=t,this._lastNormG=a,this._lastNormB=i;const e=r(t,a,i);this._hue=e[0],this._sat=e[1],this._val=e[2],this._alpha=_.a,this._swatch.bgColor=h(t,a,i,_.a),this._valueLabel.text=f(t,a,i,_.a,this._displayFormat)}updateColor(){const t=s(this._hue,this._sat,this._val),a=t[0],i=t[1],e=t[2];this._lastNormR=a,this._lastNormG=i,this._lastNormB=e,this._swatch.bgColor=h(a,i,e,this._alpha),this._swatch.markDirty(),this._valueLabel.text=f(a,i,e,this._alpha,this._displayFormat),this._valueLabel.markDirty(),this.emitValue(a,i,e,this._alpha),this._svWidget&&this._svWidget.markDirty(),this._hueWidget&&this._hueWidget.markDirty(),this._alphaWidget&&this._alphaWidget.markDirty()}getSurfaceRoot(){let t=this.parent;for(;t&&t.parent;)t=t.parent;return t}ensurePickerWidgets(){if(this._picker)return;const t=e.colorSvSize+e.colorHueBarHeight+(this._hasAlpha?e.colorAlphaBarHeight+e.colorPickerPadding:0)+3*e.colorPickerPadding,i=new l;i.absolute=!0,i.anchorTop=0,i.anchorLeft=0,i.anchorRight=0,i.anchorBottom=0,i.bgColor=e.backdropColor,i.onPointerDown=()=>(this.closePicker(),!0);const r=new l;r.absolute=!0,r.sizingX="fixed",r.sizingY="fixed",r.preferredWidth=d,r.preferredHeight=t,r.borderWidth=e.colorPickerBorderWidth,r.setPaddingAll(e.colorPickerPadding),r.layout=new a("vertical",e.colorPickerPadding,"start","stretch");const o=new n;o.sizingX="grow",o.sizingY="fixed",o.preferredHeight=e.colorSvSize,o.onDraw=(t,a,i,e)=>{this.drawSVGradient(t,i,e)},o.onPointerDown=(t,a,i,e)=>(this._draggingSV=!0,this.updateSV(a,i,o.width,o.height),!0),o.onPointerMove=(t,a,i)=>{this._draggingSV&&this.updateSV(a,i,o.width,o.height)},o.onPointerUp=()=>{this._draggingSV=!1},this._svWidget=o,r.addChild(o),function(){if(b)return;const t=e.colorHueSteps;for(let a=0;a<t;a++){const i=s((a+.5)/t*360,1,1);w[a]=h(i[0],i[1],i[2],1)}b=!0}();const c=new n;if(c.sizingX="grow",c.sizingY="fixed",c.preferredHeight=e.colorHueBarHeight,c.onDraw=(t,a,i,e)=>{this.drawHueBar(t,i,e)},c.onPointerDown=(t,a,i,e)=>(this._draggingHue=!0,this.updateHue(a,c.width),!0),c.onPointerMove=(t,a,i)=>{this._draggingHue&&this.updateHue(a,c.width)},c.onPointerUp=()=>{this._draggingHue=!1},this._hueWidget=c,r.addChild(c),this._hasAlpha){const t=new n;t.sizingX="grow",t.sizingY="fixed",t.preferredHeight=e.colorAlphaBarHeight,t.onDraw=(t,a,i,e)=>{this.drawAlphaBar(t,i,e)},t.onPointerDown=(a,i,e,h)=>(this._draggingAlpha=!0,this.updateAlpha(i,t.width),!0),t.onPointerMove=(a,i,e)=>{this._draggingAlpha&&this.updateAlpha(i,t.width)},t.onPointerUp=()=>{this._draggingAlpha=!1},this._alphaWidget=t,r.addChild(t)}this._backdrop=i,this._picker=r}openPicker(){if(this._open)return;this._open=!0,this.syncFromValue();const t=this.getSurfaceRoot();if(!t)return;this.ensurePickerWidgets();const a=this._picker,i=this._backdrop;a.anchorLeft=this._swatch.absoluteX,a.anchorTop=this._swatch.absoluteY+this._swatch.height;const e=this.surface?.getTheme();a.bgColor=e?.bgPanelRaised??858993663,a.borderColor=e?.borderPanel??1431655935,t.addChild(i),t.addChild(a),t.needsLayout=!0}closePicker(){if(!this._open)return;this._open=!1;const t=this.getSurfaceRoot();t&&(this._backdrop&&t.removeChild(this._backdrop),this._picker&&t.removeChild(this._picker)),this._draggingSV=!1,this._draggingHue=!1,this._draggingAlpha=!1}updateSV(t,a,i,e){this._sat=Math.max(0,Math.min(1,t/Math.max(1,i))),this._val=Math.max(0,Math.min(1,1-a/Math.max(1,e))),this.updateColor()}updateHue(t,a){this._hue=Math.max(0,Math.min(360,t/Math.max(1,a)*360)),this._svCacheHue=-1,this.updateColor()}updateAlpha(t,a){this._alpha=Math.max(0,Math.min(1,t/Math.max(1,a))),this.updateColor()}drawSVGradient(t,a,i){const r=e.colorSvSteps,o=a/r,l=i/r,n=Math.ceil(o),c=Math.ceil(l);if(!this._svCache||this._svCacheHue!==this._hue){this._svCache||(this._svCache=new Uint32Array(r*r)),this._svCacheHue=this._hue;for(let t=0;t<r;t++)for(let a=0;a<r;a++){const i=(t+.5)/r,e=1-(a+.5)/r,o=s(this._hue,i,e);this._svCache[a*r+t]=h(o[0],o[1],o[2],1)}}for(let a=0;a<r;a++)for(let i=0;i<r;i++)t.fillRect(a*o|0,i*l|0,n,c,this._svCache[i*r+a]);const d=this._sat*a|0,_=(1-this._val)*i|0,g=e.colorCrosshairArm;t.fillRect(d-g,_,2*g+1,1,4294967295),t.fillRect(d,_-g,1,2*g+1,4294967295)}drawHueBar(t,a,i){const h=e.colorHueSteps,s=a/h,r=Math.ceil(s);for(let a=0;a<h;a++)t.fillRect(a*s|0,0,r,i,w[a]);t.fillRect(this._hue/360*a-1|0,0,e.colorHueMarkerWidth,i,4294967295)}drawAlphaBar(t,a,i){const r=e.colorAlphaCheckSize;for(let e=0;e<a;e+=r)for(let h=0;h<i;h+=r){const s=(e/r+h/r)%2==0;t.fillRect(e,h,Math.min(r,a-e),Math.min(r,i-h),s?2576980479:3435973887)}const o=e.colorAlphaSteps;if(!this._alphaCache||this._alphaCacheHue!==this._hue||this._alphaCacheSat!==this._sat||this._alphaCacheVal!==this._val){this._alphaCache||(this._alphaCache=new Uint32Array(o)),this._alphaCacheHue=this._hue,this._alphaCacheSat=this._sat,this._alphaCacheVal=this._val;const t=s(this._hue,this._sat,this._val);for(let a=0;a<o;a++){const i=(a+.5)/o;this._alphaCache[a]=h(t[0],t[1],t[2],i)}}const l=a/o,n=Math.ceil(l);for(let a=0;a<o;a++)t.fillRect(a*l|0,0,n,i,this._alphaCache[a]);t.fillRect(this._alpha*a-1|0,0,e.colorHueMarkerWidth,i,4294967295)}refresh(){this.syncFromValue()}onPointerDown(t,a,i,e){return this._open||this.openPicker(),!0}applyTheme(t){super.applyTheme(t),this._valueBg.bgColor=t.bgInput,this._valueLabel.color=t.textValue}get config(){return this._config}}export{v as GuiColor};

package/dist/gui/gui-folder.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../core/layouts/stack-layout.cjs"),i=require("../core/widget.cjs"),e=require("../defaults.cjs"),n=require("../widgets/box.cjs"),s=require("../widgets/canvas-widget.cjs"),h=require("../widgets/label.cjs"),r=e.DEFAULTS.folderChevronSize;class o extends n.Box{_chevron;_title;_hovered=!1;_expanded=!0;_chevronColor=4294967168;onClick=null;constructor(){super(),this.sizingX="grow",this.sizingY="fixed",this.layout=new t.StackLayout("horizontal",e.DEFAULTS.folderHeaderGap,"start","stretch"),this.setPaddingAll(e.DEFAULTS.folderHeaderPadding),this._chevron=new s.CanvasWidget,this._chevron.sizingX="fixed",this._chevron.preferredWidth=e.DEFAULTS.folderChevronWidth,this._chevron.sizingY="grow",this._chevron.onDraw=(t,i,e,n)=>{this.drawChevron(t,e,n)},this.addChild(this._chevron),this._title=new h.Label,this._title.sizingX="grow",this._title.sizingY="grow",this._title.flexGrow=1,this._title.vAlign="middle",this._title.overflow="ellipsis",this.addChild(this._title)}set titleText(t){this._title.text=t.toUpperCase()}get titleText(){return this._title.text}set expanded(t){this._expanded=t,this._chevron.markDirty()}applyTheme(t){const i=t;this.bgColor=i.bgFolder,this.preferredHeight=i.folderHeaderHeight,this.borderRadius=i.borderRadius,this._chevronColor=i.textMuted,this._title.color=i.textFolder}drawChevron(t,i,e){const n=i/2|0,s=e/2|0;t.beginPath(),this._expanded?(t.moveTo(n-r,s-r/2),t.lineTo(n,s+r/2),t.lineTo(n+r,s-r/2)):(t.moveTo(n-r/2,s-r),t.lineTo(n+r/2,s),t.lineTo(n-r/2,s+r)),t.fillPath(this._chevronColor)}drawSelf(t,i){const e=i,n=this._hovered?e.bgFolderHover:this.bgColor;t.fillRoundedRect(0,0,this.width,this.height,this.borderRadius,n),t.strokeRoundedRect(0,0,this.width,this.height,this.borderRadius,e.borderInset,1)}onPointerDown(t,i,e,n){return this.onClick&&this.onClick(),!0}onPointerEnter(){this._hovered=!0,this.markDirty()}onPointerLeave(){this._hovered=!1,this.markDirty()}}class a extends i.Widget{_header;_content;_expanded=!0;_id="";_title="";animated=!0;_animating=!1;_animStartTime=0;_animFromHeight=0;_animToHeight=0;_animRafId=0;_contentGap=-1;_boundTick=()=>{if(!this._animating)return;const t=performance.now()-this._animStartTime,i=Math.min(1,t/e.DEFAULTS.folderAnimDurationMs),n=function(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2}(i);this.preferredHeight=this._animFromHeight+(this._animToHeight-this._animFromHeight)*n,this.needsLayout=!0;let s=this.parent;for(;s;)s.needsLayout=!0,s=s.parent;this.surface&&this.surface.markDirty(),i>=1?(this._animating=!1,this._animRafId=0,this._content.visible=this._expanded,this.sizingY="fit",this.invalidateLayout()):this._animRafId=requestAnimationFrame(this._boundTick)};constructor(){super(),this.sizingX="grow",this.sizingY="fit",this.layout=new t.StackLayout("vertical",0,"start","stretch"),this._header=new o,this._header.onClick=()=>{this.expanded=!this._expanded},this.addChild(this._header),this._content=new n.Box,this._content.sizingX="grow",this._content.sizingY="fit",this.addChild(this._content)}get id(){return this._id}set id(t){this._id=t}get title(){return this._title}set title(t){this._title=t,this._header.titleText=t}get expanded(){return this._expanded}set expanded(t){t!==this._expanded&&(this._expanded=t,this._header.expanded=t,this.animated&&this.surface?this.startAnimation(t):(this._content.visible=t,this.invalidateLayout()))}startAnimation(t){this._animRafId&&(cancelAnimationFrame(this._animRafId),this._animRafId=0);const i=this._header.preferredHeight;t&&(this._content.visible=!0,this._content.needsLayout=!0);const e=this._content.measureIntrinsicHeight();this._animFromHeight=t?i:i+e,this._animToHeight=t?i+e:i,this._animStartTime=performance.now(),this._animating=!0,this.sizingY="fixed",this.preferredHeight=this._animFromHeight,this.invalidateLayout(),this.tickAnimation()}tickAnimation(){this._animRafId=requestAnimationFrame(this._boundTick)}addControl(t){this._content.addChild(t)}applyTheme(i){const e=i;this._header.applyTheme(i),this._contentGap!==e.controlGap&&(this._contentGap=e.controlGap,this._content.layout=new t.StackLayout("vertical",e.controlGap,"start","stretch")),this._content.setPaddingAll(e.panelPadding)}}exports.GuiFolder=a;

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

@@ -0,0 +1,49 @@
+import { Widget } from '../core/widget';
+import { Theme } from '../core/theme';
+/** Collapsible folder widget with a header and animated expand/collapse. */
+export declare class GuiFolder extends Widget {
+    private readonly _header;
+    private readonly _content;
+    private _expanded;
+    private _id;
+    private _title;
+    /** whether expand and collapse are height-animated; when false they toggle instantly. */
+    animated: boolean;
+    private _animating;
+    private _animStartTime;
+    private _animFromHeight;
+    private _animToHeight;
+    private _animRafId;
+    private _contentGap;
+    /**
+     * Animation frame step: eases the preferred height from the start toward the
+     * target, invalidates the ancestor layout chain, and repaints. On the final
+     * frame it settles content visibility and returns the folder to fit sizing.
+     */
+    private readonly _boundTick;
+    /** builds the header and content box and wires the header click to toggle expansion. */
+    constructor();
+    /** stable identifier used to track the folder, for example for persistence. */
+    get id(): string;
+    set id(value: string);
+    /** the folder's display title. */
+    get title(): string;
+    set title(value: string);
+    /** whether the folder content is expanded. */
+    get expanded(): boolean;
+    /** expands or collapses the folder, animating the height when animated and a surface is attached. */
+    set expanded(value: boolean);
+    /**
+     * Starts the expand or collapse height animation. It measures the content
+     * height, sets fixed sizing with the start height, and kicks off the frame
+     * loop that eases toward the target. When expanding, content is made visible
+     * up front so it can be measured and revealed during the slide.
+     */
+    private startAnimation;
+    /** schedules the next animation frame step. */
+    private tickAnimation;
+    /** appends a control widget to the folder content. */
+    addControl(widget: Widget): void;
+    /** applies theme values to the header and content layout. */
+    applyTheme(theme: Theme): void;
+}

package/dist/gui/gui-folder.mjs

@@ -0,0 +1 @@
+import{StackLayout as t}from"../core/layouts/stack-layout.mjs";import{Widget as i}from"../core/widget.mjs";import{DEFAULTS as e}from"../defaults.mjs";import{Box as n}from"../widgets/box.mjs";import{CanvasWidget as s}from"../widgets/canvas-widget.mjs";import{Label as h}from"../widgets/label.mjs";const r=e.folderChevronSize;class o extends n{_chevron;_title;_hovered=!1;_expanded=!0;_chevronColor=4294967168;onClick=null;constructor(){super(),this.sizingX="grow",this.sizingY="fixed",this.layout=new t("horizontal",e.folderHeaderGap,"start","stretch"),this.setPaddingAll(e.folderHeaderPadding),this._chevron=new s,this._chevron.sizingX="fixed",this._chevron.preferredWidth=e.folderChevronWidth,this._chevron.sizingY="grow",this._chevron.onDraw=(t,i,e,n)=>{this.drawChevron(t,e,n)},this.addChild(this._chevron),this._title=new h,this._title.sizingX="grow",this._title.sizingY="grow",this._title.flexGrow=1,this._title.vAlign="middle",this._title.overflow="ellipsis",this.addChild(this._title)}set titleText(t){this._title.text=t.toUpperCase()}get titleText(){return this._title.text}set expanded(t){this._expanded=t,this._chevron.markDirty()}applyTheme(t){const i=t;this.bgColor=i.bgFolder,this.preferredHeight=i.folderHeaderHeight,this.borderRadius=i.borderRadius,this._chevronColor=i.textMuted,this._title.color=i.textFolder}drawChevron(t,i,e){const n=i/2|0,s=e/2|0;t.beginPath(),this._expanded?(t.moveTo(n-r,s-r/2),t.lineTo(n,s+r/2),t.lineTo(n+r,s-r/2)):(t.moveTo(n-r/2,s-r),t.lineTo(n+r/2,s),t.lineTo(n-r/2,s+r)),t.fillPath(this._chevronColor)}drawSelf(t,i){const e=i,n=this._hovered?e.bgFolderHover:this.bgColor;t.fillRoundedRect(0,0,this.width,this.height,this.borderRadius,n),t.strokeRoundedRect(0,0,this.width,this.height,this.borderRadius,e.borderInset,1)}onPointerDown(t,i,e,n){return this.onClick&&this.onClick(),!0}onPointerEnter(){this._hovered=!0,this.markDirty()}onPointerLeave(){this._hovered=!1,this.markDirty()}}class a extends i{_header;_content;_expanded=!0;_id="";_title="";animated=!0;_animating=!1;_animStartTime=0;_animFromHeight=0;_animToHeight=0;_animRafId=0;_contentGap=-1;_boundTick=()=>{if(!this._animating)return;const t=performance.now()-this._animStartTime,i=Math.min(1,t/e.folderAnimDurationMs),n=function(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2}(i);this.preferredHeight=this._animFromHeight+(this._animToHeight-this._animFromHeight)*n,this.needsLayout=!0;let s=this.parent;for(;s;)s.needsLayout=!0,s=s.parent;this.surface&&this.surface.markDirty(),i>=1?(this._animating=!1,this._animRafId=0,this._content.visible=this._expanded,this.sizingY="fit",this.invalidateLayout()):this._animRafId=requestAnimationFrame(this._boundTick)};constructor(){super(),this.sizingX="grow",this.sizingY="fit",this.layout=new t("vertical",0,"start","stretch"),this._header=new o,this._header.onClick=()=>{this.expanded=!this._expanded},this.addChild(this._header),this._content=new n,this._content.sizingX="grow",this._content.sizingY="fit",this.addChild(this._content)}get id(){return this._id}set id(t){this._id=t}get title(){return this._title}set title(t){this._title=t,this._header.titleText=t}get expanded(){return this._expanded}set expanded(t){t!==this._expanded&&(this._expanded=t,this._header.expanded=t,this.animated&&this.surface?this.startAnimation(t):(this._content.visible=t,this.invalidateLayout()))}startAnimation(t){this._animRafId&&(cancelAnimationFrame(this._animRafId),this._animRafId=0);const i=this._header.preferredHeight;t&&(this._content.visible=!0,this._content.needsLayout=!0);const e=this._content.measureIntrinsicHeight();this._animFromHeight=t?i:i+e,this._animToHeight=t?i+e:i,this._animStartTime=performance.now(),this._animating=!0,this.sizingY="fixed",this.preferredHeight=this._animFromHeight,this.invalidateLayout(),this.tickAnimation()}tickAnimation(){this._animRafId=requestAnimationFrame(this._boundTick)}addControl(t){this._content.addChild(t)}applyTheme(i){const e=i;this._header.applyTheme(i),this._contentGap!==e.controlGap&&(this._contentGap=e.controlGap,this._content.layout=new t("vertical",e.controlGap,"start","stretch")),this._content.setPaddingAll(e.panelPadding)}}export{a as GuiFolder};