@mgz-dev/inspect 0.1.0

package/dist/widgets/tab-bar.d.ts

@@ -0,0 +1,72 @@
+import { Widget } from '../core/widget';
+import { Renderer } from '../core/renderer';
+import { Theme } from '../core/theme';
+/** descriptor for a single tab with its display label and value key. */
+export interface Tab {
+    label: string;
+    value: string;
+}
+/** how tab widths are computed: equal division or sized to label content. */
+export type TabSizing = "equal" | "content";
+/** horizontal tab bar widget with scroll arrows, hover highlighting, and separators. */
+export declare class TabBar extends Widget {
+    /** list of tabs to display. */
+    tabs: Tab[];
+    /** value key of the currently selected tab. */
+    value: string;
+    /** background color override for the bar. */
+    bgColor: number;
+    /** background color of the active tab. */
+    activeColor: number;
+    /** text color for inactive tabs. */
+    textColor: number;
+    /** text color for the active tab. */
+    activeTextColor: number;
+    /** how tab widths are calculated. */
+    tabSizing: TabSizing;
+    /** horizontal padding within each tab in pixels. */
+    tabPadding: number;
+    /** called when the selected tab changes. */
+    onChange: ((value: string) => void) | null;
+    /** reserved space on the right edge for external elements. */
+    reservedEdge: number;
+    private tabPositions;
+    private tabWidths;
+    private scrollOffset;
+    private totalTabWidth;
+    private showLeftArrow;
+    private showRightArrow;
+    private _tabsDirty;
+    private _lastTabCount;
+    private _lastWidth;
+    private _lastCharWidth;
+    private _hoverIndex;
+    /** renders the bar background, the scrolling strip of tabs with active and hover styling, and the scroll arrows. */
+    protected drawSelf(renderer: Renderer, theme: Theme): void;
+    /** handles clicks on scroll arrows and tabs, selecting the hit tab. */
+    onPointerDown(_pointerId: number, x: number, _y: number, button: number): boolean;
+    /** scrolls the tab strip when it overflows. */
+    onWheel(deltaX: number, deltaY: number): boolean;
+    /** updates the hovered tab index under the pointer. */
+    onPointerMove(_pointerId: number, x: number, _y: number): void;
+    /** clears the hover highlight when the pointer leaves the bar. */
+    onPointerLeave(): void;
+    /** width available to the scrolling strip after reserving the edge, side padding, and an arrow. */
+    private scrollAvailableWidth;
+    /** shifts the scroll offset by delta, clamped to the scrollable range, then updates arrow visibility. */
+    private scroll;
+    /** scrolls so the selected tab is fully visible, keeping an 8px margin from the strip edge. */
+    private scrollActiveTabIntoView;
+    /** true when the tabs are wider than the space available to the strip. */
+    private overflows;
+    /** shows the left and right arrows depending on whether tabs extend past each edge. */
+    private updateArrowVisibility;
+    /** marks tab positions as stale so they are recalculated on next draw. */
+    invalidateTabs(): void;
+    /**
+     * recomputes each tab's x offset and width, either sized to its label content or split equally across
+     * the bar, then refreshes arrow visibility. skips the work when tab count, width, and glyph width are
+     * unchanged since the last call.
+     */
+    private computeTabPositions;
+}

package/dist/widgets/tab-bar.mjs

@@ -0,0 +1 @@
+import{Widget as t,THEME_DEFAULT as i}from"../core/widget.mjs";import{DEFAULTS as s}from"../defaults.mjs";const h=s.tabArrowWidth,o=s.tabArrowHalf,e=s.tabStripPaddingTop,a=s.tabStripPaddingSide,l=s.tabRadius,r=s.tabSeparatorHeight,n=s.tabSeparatorColor,b=s.tabHoverColor;class d extends t{tabs=[];value="";bgColor=i;activeColor=i;textColor=i;activeTextColor=i;tabSizing="content";tabPadding=16;onChange=null;reservedEdge=0;tabPositions=new Float32Array(s.tabInitialCapacity);tabWidths=new Float32Array(s.tabInitialCapacity);scrollOffset=0;totalTabWidth=0;showLeftArrow=!1;showRightArrow=!1;_tabsDirty=!0;_lastTabCount=0;_lastWidth=0;_lastCharWidth=0;_hoverIndex=-1;drawSelf(t,s){const d=this.width,c=this.height,f=this.tabs.length;if(0===f)return;const w=this.bgColor===i?s.bgPanel:this.bgColor;t.fillRect(0,0,d,c,w);const u=s.fontAtlas,v=this.textColor===i?s.textMuted:this.textColor,g=this.activeTextColor===i?s.textPrimary:this.activeTextColor,p=this.activeColor===i?s.bgPanelRaised:this.activeColor,C=this.textColor===i?s.textMuted:this.textColor,A=u?.charWidth??8;this.computeTabPositions(d,A);const T=c-e,W=(this.showLeftArrow?h:0)+a,P=d-this.reservedEdge-(this.showRightArrow?h:0)-a-W;t.pushClip(W,0,P,c),t.pushTranslate(-this.scrollOffset+W,e);for(let i=0;i<f;i++){const s=this.tabs[i],h=this.tabPositions[i],o=this.tabWidths[i],e=s.value===this.value;if(e&&p?(t.fillRoundedRect(h,0,o,T+l,l,p),t.pushClip(h,T,o,l),t.fillRect(h,T,o,l,p),t.popClip()):i===this._hoverIndex&&(t.fillRoundedRect(h,0,o,T+l,l,b),t.pushClip(h,T,o,l),t.fillRect(h,T,o,l,b),t.popClip()),u){const a=s.label.length*A,l=Math.round(h+(o-a)/2),r=Math.round((T-u.lineHeight)/2),n=e||i===this._hoverIndex?g:v;t.drawText(u,s.label,l,r,n)}if(!e&&i<f-1&&!(i+1<f&&this.tabs[i+1].value===this.value)){const i=h+o,s=Math.round((T-r)/2);t.fillRect(i,s,1,r,n)}}if(t.popTranslate(),t.popClip(),this.showLeftArrow){t.fillRect(0,0,h+a,c,w);const i=h/2+5|0,s=2+(c/2|0);t.beginPath(),t.moveTo(i+o,s-o),t.lineTo(i-o,s),t.lineTo(i+o,s+o),t.fillPath(C)}if(this.showRightArrow){const i=d-this.reservedEdge-h-a;t.fillRect(i,0,h+a,c,w);const s=i+h/2+5|0,e=2+(c/2|0);t.beginPath(),t.moveTo(s-o,e-o),t.lineTo(s+o,e),t.lineTo(s-o,e+o),t.fillPath(C)}}onPointerDown(t,i,s,o){if(0!==o||!this.enabled)return!1;const e=this.tabs.length;if(0===e)return!1;if(this.showLeftArrow&&i<h+a)return this.scroll(.6*-this.width),!0;const l=this.width-this.reservedEdge-h-a;if(this.showRightArrow&&i>=l)return this.scroll(.6*this.width),!0;const r=i-((this.showLeftArrow?h:0)+a)+this.scrollOffset;for(let t=0;t<e;t++)if(r>=this.tabPositions[t]&&r<this.tabPositions[t]+this.tabWidths[t]){const i=this.tabs[t].value;return i!==this.value&&(this.value=i,this.scrollActiveTabIntoView(),this.onChange&&this.onChange(i),this.markDirty()),!0}return!0}onWheel(t,i){if(!this.overflows())return!1;const s=Math.abs(t)>=Math.abs(i)?t:i;return 0!==s&&(this.scroll(s),!0)}onPointerMove(t,i,s){const o=i-((this.showLeftArrow?h:0)+a)+this.scrollOffset;let e=-1;for(let t=0;t<this.tabs.length;t++)if(o>=this.tabPositions[t]&&o<this.tabPositions[t]+this.tabWidths[t]){this.tabs[t].value!==this.value&&(e=t);break}e!==this._hoverIndex&&(this._hoverIndex=e,this.markDirty())}onPointerLeave(){-1!==this._hoverIndex&&(this._hoverIndex=-1,this.markDirty())}scrollAvailableWidth(){return this.width-this.reservedEdge-2*a-h}scroll(t){const i=Math.max(0,this.totalTabWidth-this.scrollAvailableWidth());this.scrollOffset=Math.max(0,Math.min(i,this.scrollOffset+t)),this.updateArrowVisibility(),this.markDirty()}scrollActiveTabIntoView(){const t=this.tabs.length,i=this.scrollAvailableWidth();for(let s=0;s<t;s++)if(this.tabs[s].value===this.value){const t=this.tabPositions[s],h=t+this.tabWidths[s],o=this.scrollOffset,e=this.scrollOffset+i;if(t<o)this.scrollOffset=Math.max(0,t-8);else if(h>e){const t=Math.max(0,this.totalTabWidth-i);this.scrollOffset=Math.min(t,h-i+8)}this.updateArrowVisibility();break}}overflows(){const t=this.width-this.reservedEdge-2*a;return this.totalTabWidth>t}updateArrowVisibility(){const t=Math.max(0,this.totalTabWidth-this.scrollAvailableWidth()),i=t>1;this.showLeftArrow=i&&this.scrollOffset>1,this.showRightArrow=i&&this.scrollOffset<t-1}invalidateTabs(){this._tabsDirty=!0}computeTabPositions(t,i){const s=this.tabs.length;if(this._tabsDirty||s!==this._lastTabCount||t!==this._lastWidth||i!==this._lastCharWidth){if(this._tabsDirty=!1,this._lastTabCount=s,this._lastWidth=t,this._lastCharWidth=i,s>this.tabPositions.length&&(this.tabPositions=new Float32Array(s),this.tabWidths=new Float32Array(s)),"content"===this.tabSizing){let t=0;for(let h=0;h<s;h++){const s=this.tabs[h].label.length*i+2*this.tabPadding;this.tabPositions[h]=t,this.tabWidths[h]=s,t+=s}this.totalTabWidth=t}else{const i=(t-this.reservedEdge-2*a)/s|0;for(let t=0;t<s;t++)this.tabPositions[t]=t*i,this.tabWidths[t]=i;this.totalTabWidth=i*s}this.updateArrowVisibility()}}}export{d as TabBar};

package/dist/widgets/text-input.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../core/widget.cjs"),s=require("../defaults.cjs");class e extends t.Widget{text="";cursorPos=0;selectionStart=-1;selectionEnd=-1;placeholder="";textColor=t.THEME_DEFAULT;placeholderColor=t.THEME_DEFAULT;bgColor=t.THEME_DEFAULT;cursorColor=t.THEME_DEFAULT;selectionColor=s.DEFAULTS.textInputSelectionColor;borderRadius=2;onChange=null;cursorVisible=!0;constructor(){super(),this.focusable=!0}drawSelf(e,i){const r=this.width,o=this.height,h=i.fontAtlas;if(!h)return;const l=this.bgColor===t.THEME_DEFAULT?i.bgInput:this.bgColor;this.borderRadius>0?e.fillRoundedRect(0,0,r,o,this.borderRadius,l):e.fillRect(0,0,r,o,l);const n=(o-h.lineHeight)/2|0,c=this.innerX||s.DEFAULTS.textInputPadding;if(this.text){if(this.focused&&this.selectionStart>=0&&this.selectionEnd>this.selectionStart){const t=c+this.selectionStart*h.charWidth,s=(this.selectionEnd-this.selectionStart)*h.charWidth;e.fillRect(t,n,s,h.lineHeight,this.selectionColor)}const s=this.textColor===t.THEME_DEFAULT?i.textPrimary:this.textColor;e.drawText(h,this.text,c,n,s)}else if(this.placeholder&&!this.focused){const s=this.placeholderColor===t.THEME_DEFAULT?i.textMuted:this.placeholderColor;e.drawText(h,this.placeholder,c,n,s)}if(this.focused&&this.cursorVisible){const s=c+this.cursorPos*h.charWidth,r=this.cursorColor===t.THEME_DEFAULT?i.textPrimary:this.cursorColor;e.fillRect(s,n,1,h.lineHeight,r)}}onFocus(){this.cursorVisible=!0,this.markDirty()}onBlur(){this.selectionStart=-1,this.selectionEnd=-1,this.markDirty()}onPointerDown(t,s,e,i){return 0===i&&(this.resetBlink(),this.markDirty(),!0)}onKeyDown(t,s,e,i,r){return!(!this.enabled||(e&&"a"===t?(this.selectionStart=0,this.selectionEnd=this.text.length,this.markDirty(),0):"Backspace"===t?(this.hasSelection()?this.deleteSelection():this.cursorPos>0&&(this.text=this.text.slice(0,this.cursorPos-1)+this.text.slice(this.cursorPos),this.cursorPos--,this.onChange&&this.onChange(this.text)),this.resetBlink(),this.markDirty(),0):"Delete"===t?(this.hasSelection()?this.deleteSelection():this.cursorPos<this.text.length&&(this.text=this.text.slice(0,this.cursorPos)+this.text.slice(this.cursorPos+1),this.onChange&&this.onChange(this.text)),this.resetBlink(),this.markDirty(),0):"ArrowLeft"===t?(this.cursorPos>0&&this.cursorPos--,this.clearSelection(),this.resetBlink(),this.markDirty(),0):"ArrowRight"===t?(this.cursorPos<this.text.length&&this.cursorPos++,this.clearSelection(),this.resetBlink(),this.markDirty(),0):"Home"===t?(this.cursorPos=0,this.clearSelection(),this.resetBlink(),this.markDirty(),0):"End"===t?(this.cursorPos=this.text.length,this.clearSelection(),this.resetBlink(),this.markDirty(),0):1!==t.length||e||(this.hasSelection()&&this.deleteSelection(),this.text=this.text.slice(0,this.cursorPos)+t+this.text.slice(this.cursorPos),this.cursorPos++,this.onChange&&this.onChange(this.text),this.resetBlink(),this.markDirty(),0)))}hasSelection(){return this.selectionStart>=0&&this.selectionEnd>this.selectionStart}deleteSelection(){this.hasSelection()&&(this.text=this.text.slice(0,this.selectionStart)+this.text.slice(this.selectionEnd),this.cursorPos=this.selectionStart,this.clearSelection(),this.onChange&&this.onChange(this.text))}clearSelection(){this.selectionStart=-1,this.selectionEnd=-1}resetBlink(){this.cursorVisible=!0}}exports.TextInput=e;

package/dist/widgets/text-input.d.ts

@@ -0,0 +1,54 @@
+import { Widget } from '../core/widget';
+import { Renderer } from '../core/renderer';
+import { Theme } from '../core/theme';
+/** editable single-line text input widget with cursor, selection, and placeholder. */
+export declare class TextInput extends Widget {
+    /** current text content. */
+    text: string;
+    /** character index of the editing cursor. */
+    cursorPos: number;
+    /** start index of the selection range; -1 when no selection. */
+    selectionStart: number;
+    /** end index of the selection range (exclusive); -1 when no selection. */
+    selectionEnd: number;
+    /** placeholder text shown when unfocused and empty. */
+    placeholder: string;
+    /** text color override. */
+    textColor: number;
+    /** placeholder text color override. */
+    placeholderColor: number;
+    /** background fill color override. */
+    bgColor: number;
+    /** cursor line color override. */
+    cursorColor: number;
+    /** selection highlight color. */
+    selectionColor: number;
+    /** corner radius of the background rectangle. */
+    borderRadius: number;
+    /** called on each text change from user input. */
+    onChange: ((text: string) => void) | null;
+    private cursorVisible;
+    /** marks the input focusable so it can receive keyboard focus. */
+    constructor();
+    /** draws the background, selection highlight, text or placeholder, and the cursor when focused. */
+    protected drawSelf(renderer: Renderer, theme: Theme): void;
+    /** shows the cursor and repaints when the input gains focus. */
+    onFocus(): void;
+    /** clears the selection and repaints when the input loses focus. */
+    onBlur(): void;
+    /** claims a primary-button press and shows the cursor. */
+    onPointerDown(_pointerId: number, _x: number, _y: number, button: number): boolean;
+    /**
+     * handles editing keys (select-all, backspace, delete, cursor movement, home/end) and inserts printable
+     * characters, calling onChange on any edit. returns true when the key was consumed.
+     */
+    onKeyDown(key: string, _code: string, ctrl: boolean, _shift: boolean, _alt: boolean): boolean;
+    /** true when a non-empty selection range is set. */
+    private hasSelection;
+    /** removes the selected text, moves the cursor to the selection start, and fires onChange. */
+    private deleteSelection;
+    /** resets the selection range to empty. */
+    private clearSelection;
+    /** forces the cursor visible so it appears immediately after input. */
+    private resetBlink;
+}

package/dist/widgets/text-input.mjs

@@ -0,0 +1 @@
+import{Widget as t,THEME_DEFAULT as s}from"../core/widget.mjs";import{DEFAULTS as e}from"../defaults.mjs";class i extends t{text="";cursorPos=0;selectionStart=-1;selectionEnd=-1;placeholder="";textColor=s;placeholderColor=s;bgColor=s;cursorColor=s;selectionColor=e.textInputSelectionColor;borderRadius=2;onChange=null;cursorVisible=!0;constructor(){super(),this.focusable=!0}drawSelf(t,i){const o=this.width,r=this.height,h=i.fontAtlas;if(!h)return;const l=this.bgColor===s?i.bgInput:this.bgColor;this.borderRadius>0?t.fillRoundedRect(0,0,o,r,this.borderRadius,l):t.fillRect(0,0,o,r,l);const n=(r-h.lineHeight)/2|0,c=this.innerX||e.textInputPadding;if(this.text){if(this.focused&&this.selectionStart>=0&&this.selectionEnd>this.selectionStart){const s=c+this.selectionStart*h.charWidth,e=(this.selectionEnd-this.selectionStart)*h.charWidth;t.fillRect(s,n,e,h.lineHeight,this.selectionColor)}const e=this.textColor===s?i.textPrimary:this.textColor;t.drawText(h,this.text,c,n,e)}else if(this.placeholder&&!this.focused){const e=this.placeholderColor===s?i.textMuted:this.placeholderColor;t.drawText(h,this.placeholder,c,n,e)}if(this.focused&&this.cursorVisible){const e=c+this.cursorPos*h.charWidth,o=this.cursorColor===s?i.textPrimary:this.cursorColor;t.fillRect(e,n,1,h.lineHeight,o)}}onFocus(){this.cursorVisible=!0,this.markDirty()}onBlur(){this.selectionStart=-1,this.selectionEnd=-1,this.markDirty()}onPointerDown(t,s,e,i){return 0===i&&(this.resetBlink(),this.markDirty(),!0)}onKeyDown(t,s,e,i,o){return!(!this.enabled||(e&&"a"===t?(this.selectionStart=0,this.selectionEnd=this.text.length,this.markDirty(),0):"Backspace"===t?(this.hasSelection()?this.deleteSelection():this.cursorPos>0&&(this.text=this.text.slice(0,this.cursorPos-1)+this.text.slice(this.cursorPos),this.cursorPos--,this.onChange&&this.onChange(this.text)),this.resetBlink(),this.markDirty(),0):"Delete"===t?(this.hasSelection()?this.deleteSelection():this.cursorPos<this.text.length&&(this.text=this.text.slice(0,this.cursorPos)+this.text.slice(this.cursorPos+1),this.onChange&&this.onChange(this.text)),this.resetBlink(),this.markDirty(),0):"ArrowLeft"===t?(this.cursorPos>0&&this.cursorPos--,this.clearSelection(),this.resetBlink(),this.markDirty(),0):"ArrowRight"===t?(this.cursorPos<this.text.length&&this.cursorPos++,this.clearSelection(),this.resetBlink(),this.markDirty(),0):"Home"===t?(this.cursorPos=0,this.clearSelection(),this.resetBlink(),this.markDirty(),0):"End"===t?(this.cursorPos=this.text.length,this.clearSelection(),this.resetBlink(),this.markDirty(),0):1!==t.length||e||(this.hasSelection()&&this.deleteSelection(),this.text=this.text.slice(0,this.cursorPos)+t+this.text.slice(this.cursorPos),this.cursorPos++,this.onChange&&this.onChange(this.text),this.resetBlink(),this.markDirty(),0)))}hasSelection(){return this.selectionStart>=0&&this.selectionEnd>this.selectionStart}deleteSelection(){this.hasSelection()&&(this.text=this.text.slice(0,this.selectionStart)+this.text.slice(this.selectionEnd),this.cursorPos=this.selectionStart,this.clearSelection(),this.onChange&&this.onChange(this.text))}clearSelection(){this.selectionStart=-1,this.selectionEnd=-1}resetBlink(){this.cursorVisible=!0}}export{i as TextInput};

package/dist/widgets/toggle-button.d.ts

@@ -0,0 +1,18 @@
+import { Button } from './button';
+import { Renderer } from '../core/renderer';
+import { Theme } from '../core/theme';
+/** button that toggles between active and inactive states on each click. */
+export declare class ToggleButton extends Button {
+    /** whether the button is currently in the active (toggled on) state. */
+    active: boolean;
+    /** background color override for the active state. */
+    activeStateBg: number;
+    /** border color drawn around the button when active. */
+    activeBorderColor: number;
+    /** called when the toggle state changes; receives the new active state. */
+    onToggle: ((active: boolean) => void) | null;
+    /** wires the click handler to flip the active state and fire onToggle. */
+    constructor();
+    /** in the active state, draws the base button with the active background plus an outline; else draws normally. */
+    protected drawSelf(renderer: Renderer, theme: Theme): void;
+}

package/dist/widgets/toggle-icon.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../defaults.cjs"),e=[{x1:28,y1:32,x2:52,y2:32,x3:76,y3:32,x4:100,y4:32,opacity:1},{x1:28,y1:64,x2:52,y2:64,x3:76,y3:64,x4:100,y4:64,opacity:1},{x1:28,y1:96,x2:52,y2:96,x3:76,y3:96,x4:100,y4:96,opacity:1}],i=[{x1:34,y1:34,x2:54,y2:54,x3:74,y3:74,x4:94,y4:94,opacity:1},{x1:64,y1:64,x2:64,y2:64,x3:64,y3:64,x4:64,y4:64,opacity:0},{x1:94,y1:34,x2:74,y2:54,x3:54,y3:74,x4:34,y4:94,opacity:1}];function r(t,e,i){return t+(e-t)*i}exports.ToggleIcon=class{element;onClick=null;ctx;size;state="hamburger";from=[{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0}];current=[{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0}];target=e;animStart=0;animating=!1;hovered=!1;animFrame=0;dpr;_boundTick;constructor(t,i,r,s){this.size=t,this.dpr=window.devicePixelRatio||1,this._boundTick=()=>{this.animFrame=0,this.tick()};for(let t=0;t<3;t++)this.copyLine(e[t],this.from[t]),this.copyLine(e[t],this.current[t]);const y=r+(s-t)/2,n=r+8,o=document.createElement("canvas");o.width=Math.round(t*this.dpr),o.height=Math.round(t*this.dpr),o.style.position="fixed",o.style.top=`${y}px`,o.style[i]=`${n}px`,o.style.width=`${t}px`,o.style.height=`${t}px`,o.style.cursor="pointer",o.style.zIndex="1000000",o.addEventListener("click",()=>{this.onClick&&this.onClick()}),o.addEventListener("mouseenter",()=>{this.hovered=!0,this.draw()}),o.addEventListener("mouseleave",()=>{this.hovered=!1,this.draw()}),this.ctx=o.getContext("2d"),this.element=o,this.draw()}copyLine(t,e){e.x1=t.x1,e.y1=t.y1,e.x2=t.x2,e.y2=t.y2,e.x3=t.x3,e.y3=t.y3,e.x4=t.x4,e.y4=t.y4,e.opacity=t.opacity}setState(t){if(t!==this.state||this.animating){for(let t=0;t<3;t++)this.copyLine(this.current[t],this.from[t]);this.state=t,this.target="x"===t?i:e,this.animStart=performance.now(),this.animating=!0,this.scheduleFrame()}}scheduleFrame(){this.animFrame||(this.animFrame=requestAnimationFrame(this._boundTick))}tick(){if(!this.animating)return;const t=performance.now()-this.animStart,e=Math.min(1,t/320),i=function(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2}(e);for(let t=0;t<3;t++){const e=this.from[t],s=this.target[t];this.current[t].x1=r(e.x1,s.x1,i),this.current[t].y1=r(e.y1,s.y1,i),this.current[t].x2=r(e.x2,s.x2,i),this.current[t].y2=r(e.y2,s.y2,i),this.current[t].x3=r(e.x3,s.x3,i),this.current[t].y3=r(e.y3,s.y3,i),this.current[t].x4=r(e.x4,s.x4,i),this.current[t].y4=r(e.y4,s.y4,i),this.current[t].opacity=r(e.opacity,s.opacity,i)}this.draw(),e>=1?this.animating=!1:this.scheduleFrame()}draw(){const e=this.ctx,i=this.size/128*this.dpr,r=Math.max(2,10/128*this.size*this.dpr);e.clearRect(0,0,this.element.width,this.element.height),e.strokeStyle=this.hovered?t.DEFAULTS.toggleIconHoveredStroke:t.DEFAULTS.toggleIconNormalStroke,e.lineWidth=r,e.lineCap="round",e.lineJoin="round";for(let t=0;t<3;t++){const r=this.current[t];r.opacity<.01||(e.globalAlpha=r.opacity,e.beginPath(),e.moveTo(r.x1*i,r.y1*i),e.lineTo(r.x2*i,r.y2*i),e.lineTo(r.x3*i,r.y3*i),e.lineTo(r.x4*i,r.y4*i),e.stroke())}e.globalAlpha=1}destroy(){this.animFrame&&(cancelAnimationFrame(this.animFrame),this.animFrame=0),this.element.remove()}};

package/dist/widgets/toggle-icon.d.ts

@@ -0,0 +1,38 @@
+type ToggleState = "hamburger" | "x";
+/** animated hamburger/close icon rendered to a canvas element. */
+export declare class ToggleIcon {
+    /** the canvas DOM element containing the icon. */
+    readonly element: HTMLCanvasElement;
+    /** callback invoked when the icon is clicked. */
+    onClick: (() => void) | null;
+    private ctx;
+    private size;
+    private state;
+    private from;
+    private current;
+    private target;
+    private animStart;
+    private animating;
+    private hovered;
+    private animFrame;
+    private dpr;
+    private readonly _boundTick;
+    /**
+     * builds and positions the fixed canvas element, seeds the line state to the hamburger shape, and wires
+     * the click and hover listeners.
+     */
+    constructor(size: number, position: "left" | "right", margin: number, tabBarHeight: number);
+    /** copies all four control points and the opacity from one line state into another. */
+    private copyLine;
+    /** transitions to the given state with an animated morph. */
+    setState(newState: ToggleState): void;
+    /** requests a single animation frame, coalescing repeated calls made within the same frame. */
+    private scheduleFrame;
+    /** advances the morph one frame, interpolating each line from its start toward the target, then redraws. */
+    private tick;
+    /** clears the canvas and strokes each visible line, scaling from viewbox space to device pixels. */
+    private draw;
+    /** cancels any running animation and removes the canvas element from the DOM. */
+    destroy(): void;
+}
+export {};

package/dist/widgets/toggle-icon.mjs

@@ -0,0 +1 @@
+import{DEFAULTS as t}from"../defaults.mjs";const i=[{x1:28,y1:32,x2:52,y2:32,x3:76,y3:32,x4:100,y4:32,opacity:1},{x1:28,y1:64,x2:52,y2:64,x3:76,y3:64,x4:100,y4:64,opacity:1},{x1:28,y1:96,x2:52,y2:96,x3:76,y3:96,x4:100,y4:96,opacity:1}],e=[{x1:34,y1:34,x2:54,y2:54,x3:74,y3:74,x4:94,y4:94,opacity:1},{x1:64,y1:64,x2:64,y2:64,x3:64,y3:64,x4:64,y4:64,opacity:0},{x1:94,y1:34,x2:74,y2:54,x3:54,y3:74,x4:34,y4:94,opacity:1}];function r(t,i,e){return t+(i-t)*e}class y{element;onClick=null;ctx;size;state="hamburger";from=[{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0}];current=[{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0},{x1:0,y1:0,x2:0,y2:0,x3:0,y3:0,x4:0,y4:0,opacity:0}];target=i;animStart=0;animating=!1;hovered=!1;animFrame=0;dpr;_boundTick;constructor(t,e,r,y){this.size=t,this.dpr=window.devicePixelRatio||1,this._boundTick=()=>{this.animFrame=0,this.tick()};for(let t=0;t<3;t++)this.copyLine(i[t],this.from[t]),this.copyLine(i[t],this.current[t]);const s=r+(y-t)/2,n=r+8,a=document.createElement("canvas");a.width=Math.round(t*this.dpr),a.height=Math.round(t*this.dpr),a.style.position="fixed",a.style.top=`${s}px`,a.style[e]=`${n}px`,a.style.width=`${t}px`,a.style.height=`${t}px`,a.style.cursor="pointer",a.style.zIndex="1000000",a.addEventListener("click",()=>{this.onClick&&this.onClick()}),a.addEventListener("mouseenter",()=>{this.hovered=!0,this.draw()}),a.addEventListener("mouseleave",()=>{this.hovered=!1,this.draw()}),this.ctx=a.getContext("2d"),this.element=a,this.draw()}copyLine(t,i){i.x1=t.x1,i.y1=t.y1,i.x2=t.x2,i.y2=t.y2,i.x3=t.x3,i.y3=t.y3,i.x4=t.x4,i.y4=t.y4,i.opacity=t.opacity}setState(t){if(t!==this.state||this.animating){for(let t=0;t<3;t++)this.copyLine(this.current[t],this.from[t]);this.state=t,this.target="x"===t?e:i,this.animStart=performance.now(),this.animating=!0,this.scheduleFrame()}}scheduleFrame(){this.animFrame||(this.animFrame=requestAnimationFrame(this._boundTick))}tick(){if(!this.animating)return;const t=performance.now()-this.animStart,i=Math.min(1,t/320),e=function(t){return t<.5?4*t*t*t:1-Math.pow(-2*t+2,3)/2}(i);for(let t=0;t<3;t++){const i=this.from[t],y=this.target[t];this.current[t].x1=r(i.x1,y.x1,e),this.current[t].y1=r(i.y1,y.y1,e),this.current[t].x2=r(i.x2,y.x2,e),this.current[t].y2=r(i.y2,y.y2,e),this.current[t].x3=r(i.x3,y.x3,e),this.current[t].y3=r(i.y3,y.y3,e),this.current[t].x4=r(i.x4,y.x4,e),this.current[t].y4=r(i.y4,y.y4,e),this.current[t].opacity=r(i.opacity,y.opacity,e)}this.draw(),i>=1?this.animating=!1:this.scheduleFrame()}draw(){const i=this.ctx,e=this.size/128*this.dpr,r=Math.max(2,10/128*this.size*this.dpr);i.clearRect(0,0,this.element.width,this.element.height),i.strokeStyle=this.hovered?t.toggleIconHoveredStroke:t.toggleIconNormalStroke,i.lineWidth=r,i.lineCap="round",i.lineJoin="round";for(let t=0;t<3;t++){const r=this.current[t];r.opacity<.01||(i.globalAlpha=r.opacity,i.beginPath(),i.moveTo(r.x1*e,r.y1*e),i.lineTo(r.x2*e,r.y2*e),i.lineTo(r.x3*e,r.y3*e),i.lineTo(r.x4*e,r.y4*e),i.stroke())}i.globalAlpha=1}destroy(){this.animFrame&&(cancelAnimationFrame(this.animFrame),this.animFrame=0),this.element.remove()}}export{y as ToggleIcon};

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@mgz-dev/inspect",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "A canvas based GUI panel for games and dev tools.",
+  "keywords": [
+    "gui",
+    "panel",
+    "canvas",
+    "inspector",
+    "debug",
+    "devtools",
+    "controls",
+    "sliders",
+    "tweak",
+    "parameters",
+    "hud",
+    "overlay",
+    "gamedev",
+    "webgl",
+    "webgpu",
+    "typescript"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "Marco Gomez",
+    "email": "marcogomez@mgz.me",
+    "url": "https://mgz.me"
+  },
+  "homepage": "https://github.com/marcogomez/inspect#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/marcogomez/inspect.git"
+  },
+  "bugs": {
+    "url": "https://github.com/marcogomez/inspect/issues"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "./dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch --mode development",
+    "type-check": "tsc --noEmit && tsc --noEmit -p tsconfig.test.json",
+    "lint": "eslint src test --max-warnings 0",
+    "lint-fix": "eslint src test --fix",
+    "test": "vitest run",
+    "test-coverage": "vitest run --coverage",
+    "demo:install": "pnpm --dir demo install",
+    "demo": "pnpm install && pnpm build && pnpm --dir demo dev",
+    "demo:build": "pnpm install && pnpm build && pnpm --dir demo build",
+    "changeset": "changeset",
+    "version": "changeset version",
+    "release": "changeset publish"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.4",
+    "@happy-dom/node-canvas-adapter": "^20.10.2",
+    "happy-dom": "^20.10.2",
+    "@mgz-dev/codestyle": "^1.0.0",
+    "@mgz-dev/viteforge": "^1.0.1",
+    "@types/node": "^25.0.3",
+    "@vitest/coverage-v8": "^3.2.4",
+    "canvas": "^3.2.3",
+    "eslint": "^9.39.4",
+    "prettier": "^3.8.3",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vitest": "^3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.28.2",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "canvas"
+    ],
+    "ignoredBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild"
+    ]
+  }
+}