entangle-ui 0.2.0 → 0.4.0

package/dist/esm/components/primitives/canvas/canvasDrawing.js

@@ -0,0 +1,251 @@
+import { domainToCanvas } from './canvasCoords.js';
+import { clamp } from '../../../utils/mathUtils.js';
+
+/**
+ * Format a number for axis labels.
+ * Integers show as "0", "1". Clean fractions show as "0.25", "0.5".
+ * Others show with minimal decimals needed.
+ */
+function formatLabel(value, domainRange) {
+    const rounded = Math.round(value * 1e10) / 1e10;
+    if (Number.isInteger(rounded))
+        return rounded.toFixed(0);
+    if (domainRange <= 1) {
+        const str = rounded.toFixed(2);
+        if (str.endsWith('0'))
+            return rounded.toFixed(1);
+        return str;
+    }
+    if (domainRange <= 10)
+        return rounded.toFixed(1);
+    return rounded.toFixed(0);
+}
+/**
+ * Draw grid lines at clean domain values.
+ * Grid lines subdivide the domain range into equal parts.
+ *
+ * Extracted from CurveEditor's drawGrid — identical visual output.
+ */
+function drawGrid(ctx, w, h, theme, options) {
+    const { subdivisions, domain, viewport, opacity = 1 } = options;
+    const { domainX, domainY } = domain;
+    const dxRange = domainX[1] - domainX[0] || 1;
+    const dyRange = domainY[1] - domainY[0] || 1;
+    ctx.lineWidth = 1;
+    // Vertical grid lines (subdivide domain X)
+    const xStep = dxRange / subdivisions;
+    for (let i = 0; i <= subdivisions; i++) {
+        const domX = domainX[0] + i * xStep;
+        const { px } = domainToCanvas(domX, 0, viewport, w, h);
+        const isBound = i === 0 || i === subdivisions;
+        ctx.globalAlpha = opacity * (isBound ? 0.25 : 0.12);
+        ctx.strokeStyle = theme.borderDefault;
+        ctx.beginPath();
+        ctx.moveTo(Math.round(px) + 0.5, 0);
+        ctx.lineTo(Math.round(px) + 0.5, h);
+        ctx.stroke();
+    }
+    // Horizontal grid lines (subdivide domain Y)
+    const yStep = dyRange / subdivisions;
+    for (let i = 0; i <= subdivisions; i++) {
+        const domY = domainY[0] + i * yStep;
+        const { py } = domainToCanvas(0, domY, viewport, w, h);
+        const isBound = i === 0 || i === subdivisions;
+        ctx.globalAlpha = opacity * (isBound ? 0.25 : 0.12);
+        ctx.strokeStyle = theme.borderDefault;
+        ctx.beginPath();
+        ctx.moveTo(0, Math.round(py) + 0.5);
+        ctx.lineTo(w, Math.round(py) + 0.5);
+        ctx.stroke();
+    }
+}
+/**
+ * Draw stronger lines at the domain boundaries (min/max on both axes).
+ */
+function drawDomainBounds(ctx, w, h, theme, domain, viewport, opacity = 1) {
+    const { domainX, domainY } = domain;
+    ctx.globalAlpha = opacity * 0.35;
+    ctx.strokeStyle = theme.borderDefault;
+    ctx.lineWidth = 1.5;
+    const { px: pxMin } = domainToCanvas(domainX[0], 0, viewport, w, h);
+    ctx.beginPath();
+    ctx.moveTo(Math.round(pxMin) + 0.5, 0);
+    ctx.lineTo(Math.round(pxMin) + 0.5, h);
+    ctx.stroke();
+    const { px: pxMax } = domainToCanvas(domainX[1], 0, viewport, w, h);
+    ctx.beginPath();
+    ctx.moveTo(Math.round(pxMax) + 0.5, 0);
+    ctx.lineTo(Math.round(pxMax) + 0.5, h);
+    ctx.stroke();
+    const { py: pyMin } = domainToCanvas(0, domainY[0], viewport, w, h);
+    ctx.beginPath();
+    ctx.moveTo(0, Math.round(pyMin) + 0.5);
+    ctx.lineTo(w, Math.round(pyMin) + 0.5);
+    ctx.stroke();
+    const { py: pyMax } = domainToCanvas(0, domainY[1], viewport, w, h);
+    ctx.beginPath();
+    ctx.moveTo(0, Math.round(pyMax) + 0.5);
+    ctx.lineTo(w, Math.round(pyMax) + 0.5);
+    ctx.stroke();
+}
+/**
+ * Draw axis labels at clean domain values.
+ *
+ * Y labels on the left side, X labels at the bottom.
+ * Extracted from CurveEditor's drawAxisLabels — identical layout algorithm.
+ */
+function drawAxisLabels(ctx, w, h, theme, options) {
+    const { subdivisions, domain, viewport, opacity = 1, labelX, labelY, } = options;
+    const { domainX, domainY } = domain;
+    const dxRange = domainX[1] - domainX[0] || 1;
+    const dyRange = domainY[1] - domainY[0] || 1;
+    const fontSize = theme.fontSizeXs;
+    ctx.globalAlpha = opacity * 0.7;
+    ctx.fillStyle = theme.textMuted;
+    ctx.font = `${fontSize}px sans-serif`;
+    const sidePadding = 4;
+    const axisGap = 6;
+    const { px: xAxisMin } = domainToCanvas(domainX[0], 0, viewport, w, h);
+    const { px: xAxisMax } = domainToCanvas(domainX[1], 0, viewport, w, h);
+    const { py: yAxisMin } = domainToCanvas(0, domainY[0], viewport, w, h);
+    const { py: yAxisMax } = domainToCanvas(0, domainY[1], viewport, w, h);
+    const xTickTop = clamp(yAxisMin + axisGap, yAxisMax + 2, h - fontSize - (labelX ? fontSize + 8 : 2));
+    const xAxisLabelTop = labelX
+        ? clamp(xTickTop + fontSize + 4, 0, h - fontSize - 1)
+        : 0;
+    const yTickAnchorX = clamp(xAxisMin - axisGap, sidePadding + 1, w - sidePadding);
+    const yTickMinY = fontSize / 2 + 2;
+    const yTickMaxY = Math.max(yTickMinY, xTickTop - 2);
+    const yAxisLabelTop = clamp(yAxisMax - fontSize - 4, sidePadding, Math.max(sidePadding, xTickTop - fontSize - 6));
+    // X axis labels (bottom, aligned to domain subdivisions)
+    ctx.textBaseline = 'top';
+    const xStep = dxRange / subdivisions;
+    for (let i = 0; i <= subdivisions; i++) {
+        const domX = domainX[0] + i * xStep;
+        const { px } = domainToCanvas(domX, 0, viewport, w, h);
+        const label = formatLabel(domX, dxRange);
+        if (i === 0) {
+            ctx.textAlign = 'left';
+            ctx.fillText(label, xAxisMin + 2, xTickTop);
+        }
+        else if (i === subdivisions) {
+            ctx.textAlign = 'right';
+            ctx.fillText(label, xAxisMax - 2, xTickTop);
+        }
+        else {
+            ctx.textAlign = 'center';
+            ctx.fillText(label, clamp(px, xAxisMin + 2, xAxisMax - 2), xTickTop);
+        }
+    }
+    // Y axis labels (left side, aligned to domain subdivisions)
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
+    const yStep = dyRange / subdivisions;
+    for (let i = 0; i <= subdivisions; i++) {
+        const domY = domainY[0] + i * yStep;
+        const { py } = domainToCanvas(0, domY, viewport, w, h);
+        const label = formatLabel(domY, dyRange);
+        const clampedPy = clamp(py, yTickMinY, yTickMaxY);
+        ctx.fillText(label, yTickAnchorX, clampedPy);
+    }
+    // Axis name labels
+    if (labelX) {
+        const textWidth = ctx.measureText(labelX).width;
+        const x = clamp(xAxisMax + axisGap, sidePadding, w - sidePadding - textWidth);
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(labelX, x, xAxisLabelTop);
+    }
+    if (labelY) {
+        const x = clamp(xAxisMin + axisGap, sidePadding, w - sidePadding);
+        ctx.textAlign = 'left';
+        ctx.textBaseline = 'top';
+        ctx.fillText(labelY, x, yAxisLabelTop);
+    }
+}
+/**
+ * Draw crosshair lines through a point.
+ *
+ * Used by CartesianPicker to show the current selection.
+ * Can be solid or dashed, full-span or limited to domain bounds.
+ */
+function drawCrosshair(ctx, w, h, theme, options) {
+    const { point, viewport, lineStyle = 'dashed', lineWidth = 1, fullSpan = true, opacity = 1, } = options;
+    const { px, py } = domainToCanvas(point.x, point.y, viewport, w, h);
+    ctx.globalAlpha = opacity * 0.6;
+    ctx.strokeStyle = theme.accentPrimary;
+    ctx.lineWidth = lineWidth;
+    if (lineStyle === 'dashed') {
+        ctx.setLineDash([4, 4]);
+    }
+    else {
+        ctx.setLineDash([]);
+    }
+    // Vertical line through point
+    ctx.beginPath();
+    ctx.moveTo(Math.round(px) + 0.5, fullSpan ? 0 : py - 20);
+    ctx.lineTo(Math.round(px) + 0.5, fullSpan ? h : py + 20);
+    ctx.stroke();
+    // Horizontal line through point
+    ctx.beginPath();
+    ctx.moveTo(fullSpan ? 0 : px - 20, Math.round(py) + 0.5);
+    ctx.lineTo(fullSpan ? w : px + 20, Math.round(py) + 0.5);
+    ctx.stroke();
+    ctx.setLineDash([]);
+}
+/**
+ * Draw a circular point marker.
+ *
+ * Used by CartesianPicker for the selected point.
+ * Supports hover and drag visual states.
+ */
+function drawPointMarker(ctx, w, h, theme, options) {
+    const { point, viewport, radius = 6, hovered = false, dragging = false, opacity = 1, } = options;
+    const { px, py } = domainToCanvas(point.x, point.y, viewport, w, h);
+    const effectiveRadius = hovered || dragging ? radius + 2 : radius;
+    ctx.globalAlpha = opacity;
+    // Outer ring
+    ctx.beginPath();
+    ctx.arc(px, py, effectiveRadius, 0, Math.PI * 2);
+    ctx.fillStyle = dragging ? theme.accentPrimary : theme.backgroundSecondary;
+    ctx.fill();
+    ctx.strokeStyle = theme.accentPrimary;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    // Inner dot
+    ctx.beginPath();
+    ctx.arc(px, py, 2, 0, Math.PI * 2);
+    ctx.fillStyle = theme.accentPrimary;
+    ctx.fill();
+}
+/**
+ * Draw axis origin lines (X=0 and Y=0 if visible within viewport).
+ *
+ * Useful for CartesianPicker where domain is centered on origin.
+ */
+function drawOriginAxes(ctx, w, h, theme, viewport, opacity = 1) {
+    const [vxMin, vxMax] = viewport.viewX;
+    const [vyMin, vyMax] = viewport.viewY;
+    ctx.globalAlpha = opacity * 0.5;
+    ctx.strokeStyle = theme.textMuted;
+    ctx.lineWidth = 1;
+    // Y axis (x = 0) if in viewport
+    if (vxMin <= 0 && vxMax >= 0) {
+        const { px } = domainToCanvas(0, 0, viewport, w, h);
+        ctx.beginPath();
+        ctx.moveTo(Math.round(px) + 0.5, 0);
+        ctx.lineTo(Math.round(px) + 0.5, h);
+        ctx.stroke();
+    }
+    // X axis (y = 0) if in viewport
+    if (vyMin <= 0 && vyMax >= 0) {
+        const { py } = domainToCanvas(0, 0, viewport, w, h);
+        ctx.beginPath();
+        ctx.moveTo(0, Math.round(py) + 0.5);
+        ctx.lineTo(w, Math.round(py) + 0.5);
+        ctx.stroke();
+    }
+}
+
+export { drawAxisLabels, drawCrosshair, drawDomainBounds, drawGrid, drawOriginAxes, drawPointMarker, formatLabel };
+//# sourceMappingURL=canvasDrawing.js.map

package/dist/esm/components/primitives/canvas/canvasDrawing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasDrawing.js","sources":["../../../../../../src/components/primitives/canvas/canvasDrawing.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/primitives/canvas/canvasTheme.js

@@ -0,0 +1,43 @@
+import { vars } from '../../../theme/contract.css.js';
+
+/**
+ * Resolve CSS variable references (e.g., `var(--etui-color-text-primary)`)
+ * to their computed values via getComputedStyle.
+ */
+function resolveVar(element, cssVar) {
+    const match = cssVar.match(/var\(([^)]+)\)/);
+    if (!match)
+        return cssVar;
+    const varName = match[1];
+    if (!varName)
+        return cssVar;
+    return getComputedStyle(element).getPropertyValue(varName).trim() || cssVar;
+}
+/**
+ * Resolve Vanilla Extract CSS variables from a canvas element to
+ * actual color values for canvas 2D drawing.
+ *
+ * Canvas 2D contexts cannot read CSS variables — this resolves them
+ * via getComputedStyle.
+ */
+function resolveCanvasTheme(canvas) {
+    return {
+        backgroundSecondary: resolveVar(canvas, vars.colors.background.secondary),
+        borderDefault: resolveVar(canvas, vars.colors.border.default),
+        textMuted: resolveVar(canvas, vars.colors.text.muted),
+        textPrimary: resolveVar(canvas, vars.colors.text.primary),
+        textSecondary: resolveVar(canvas, vars.colors.text.secondary),
+        accentPrimary: resolveVar(canvas, vars.colors.accent.primary),
+        fontSizeXs: parseFloat(resolveVar(canvas, vars.typography.fontSize.xs)) || 10,
+    };
+}
+/**
+ * Resolve a single CSS variable reference string (e.g. `var(--etui-color-accent-primary)`)
+ * to its computed value.
+ */
+function resolveVarValue(element, cssVar) {
+    return resolveVar(element, cssVar);
+}
+
+export { resolveCanvasTheme, resolveVarValue };
+//# sourceMappingURL=canvasTheme.js.map

package/dist/esm/components/primitives/canvas/canvasTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasTheme.js","sources":["../../../../../../src/components/primitives/canvas/canvasTheme.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAGA;;;AAGG;AACH,SAAS,UAAU,CAAC,OAAgB,EAAE,MAAc,EAAA;IAClD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;AAC5C,IAAA,IAAI,CAAC,KAAK;AAAE,QAAA,OAAO,MAAM;AACzB,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC;AACxB,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,MAAM;AAC3B,IAAA,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,IAAI,MAAM;AAC7E;AAEA;;;;;;AAMG;AACG,SAAU,kBAAkB,CAChC,MAAyB,EAAA;IAEzB,OAAO;AACL,QAAA,mBAAmB,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC;AACzE,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,QAAA,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AACrD,QAAA,WAAW,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;AACzD,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAC7D,QAAA,aAAa,EAAE,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC;AAC7D,QAAA,UAAU,EACR,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE;KACpE;AACH;AAEA;;;AAGG;AACG,SAAU,eAAe,CAAC,OAAgB,EAAE,MAAc,EAAA;AAC9D,IAAA,OAAO,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC;AACpC;;;;"}

package/dist/esm/components/primitives/canvas/useCanvasRenderer.js

@@ -0,0 +1,26 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+
+/**
+ * Hook that manages a rAF-based render loop for canvas drawing.
+ *
+ * Calls the provided draw function whenever deps change.
+ * Does NOT run continuously — only re-renders when deps trigger a change.
+ *
+ * Extracted from CurveEditor's useCurveRenderer rAF pattern.
+ */
+function useCanvasRenderer(options) {
+    const { draw, deps, paused = false } = options;
+    const rafRef = useRef(0);
+    const stableDraw = useCallback(draw, deps); // deps intentionally dynamic
+    useEffect(() => {
+        if (paused)
+            return;
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = requestAnimationFrame(stableDraw);
+        return () => cancelAnimationFrame(rafRef.current);
+    }, [stableDraw, paused]);
+}
+
+export { useCanvasRenderer };
+//# sourceMappingURL=useCanvasRenderer.js.map

package/dist/esm/components/primitives/canvas/useCanvasRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCanvasRenderer.js","sources":["../../../../../../src/components/primitives/canvas/useCanvasRenderer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAaA;;;;;;;AAOG;AACG;;AAEJ;;;AAKE;;AAEA;AACA;;AAGF;AACF;;"}

package/dist/esm/components/shell/AppShell/AppShell.css.js

@@ -0,0 +1,13 @@
+import './../../../assets/src/components/shell/AppShell/AppShell.css.ts.vanilla-BYmtU0O_.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var dockSlot = 'AppShell_dockSlot__1m62ws2l';
+var menuBarSlot = 'AppShell_menuBarSlot__1m62ws22';
+var shellRoot = 'AppShell_shellRoot__1m62ws21';
+var sideToolbarSlot = createRuntimeFn({defaultClassName:'AppShell_sideToolbarSlot__1m62ws28',variantClassNames:{side:{left:'AppShell_sideToolbarSlot_side_left__1m62ws29',right:'AppShell_sideToolbarSlot_side_right__1m62ws2a'},separator:{none:'AppShell_sideToolbarSlot_separator_none__1m62ws2b',border:'AppShell_sideToolbarSlot_separator_border__1m62ws2c',shadow:'AppShell_sideToolbarSlot_separator_shadow__1m62ws2d',both:'AppShell_sideToolbarSlot_separator_both__1m62ws2e'}},defaultVariants:{side:'left',separator:'border'},compoundVariants:[[{side:'left',separator:'border'},'AppShell_sideToolbarSlot_compound_0__1m62ws2f'],[{side:'left',separator:'shadow'},'AppShell_sideToolbarSlot_compound_1__1m62ws2g'],[{side:'left',separator:'both'},'AppShell_sideToolbarSlot_compound_2__1m62ws2h'],[{side:'right',separator:'border'},'AppShell_sideToolbarSlot_compound_3__1m62ws2i'],[{side:'right',separator:'shadow'},'AppShell_sideToolbarSlot_compound_4__1m62ws2j'],[{side:'right',separator:'both'},'AppShell_sideToolbarSlot_compound_5__1m62ws2k']]});
+var statusBarSlot = 'AppShell_statusBarSlot__1m62ws2m';
+var toolbarTopSlot = createRuntimeFn({defaultClassName:'AppShell_toolbarTopSlot__1m62ws23',variantClassNames:{separator:{none:'AppShell_toolbarTopSlot_separator_none__1m62ws24',border:'AppShell_toolbarTopSlot_separator_border__1m62ws25',shadow:'AppShell_toolbarTopSlot_separator_shadow__1m62ws26',both:'AppShell_toolbarTopSlot_separator_both__1m62ws27'}},defaultVariants:{separator:'border'},compoundVariants:[]});
+var viewportLockClass = 'AppShell_viewportLockClass__1m62ws20';
+
+export { dockSlot, menuBarSlot, shellRoot, sideToolbarSlot, statusBarSlot, toolbarTopSlot, viewportLockClass };
+//# sourceMappingURL=AppShell.css.js.map

package/dist/esm/components/shell/AppShell/AppShell.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/dist/esm/components/shell/AppShell/AppShell.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useState, useCallback, useMemo, createContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { viewportLockClass, shellRoot, statusBarSlot, dockSlot, toolbarTopSlot, sideToolbarSlot, menuBarSlot } from './AppShell.css.js';
+
+// --- Context ---
+const AppShellContext = /*#__PURE__*/ createContext({
+    isToolbarVisible: () => true,
+    setToolbarVisible: () => { },
+    topChromeSeparator: 'border',
+    sideChromeSeparator: 'border',
+});
+const useAppShell = () => useContext(AppShellContext);
+// --- Slot Components ---
+const MenuBarSlot = ({ children, className, style, testId, ref, ...rest }) => (jsx("header", { ref: ref, className: cx(menuBarSlot, className), style: style, "data-testid": testId, ...rest, children: children }));
+MenuBarSlot.displayName = 'AppShell.MenuBar';
+const ToolbarSlot = ({ children, className, style, testId, ref, position = 'top', ...rest }) => {
+    const { isToolbarVisible, topChromeSeparator, sideChromeSeparator } = useAppShell();
+    if (!isToolbarVisible(position))
+        return null;
+    switch (position) {
+        case 'left':
+        case 'right':
+            return (jsx("aside", { ref: ref, className: cx(sideToolbarSlot({
+                    side: position,
+                    separator: sideChromeSeparator,
+                }), className), style: style, "data-testid": testId, ...rest, children: children }));
+        default:
+            return (jsx("div", { ref: ref, className: cx(toolbarTopSlot({ separator: topChromeSeparator }), className), style: style, "data-testid": testId, ...rest, children: children }));
+    }
+};
+ToolbarSlot.displayName = 'AppShell.Toolbar';
+const DockSlot = ({ children, className, style, testId, ref, ...rest }) => (jsx("main", { ref: ref, className: cx(dockSlot, className), style: style, "data-testid": testId, ...rest, children: children }));
+DockSlot.displayName = 'AppShell.Dock';
+const StatusBarSlot = ({ children, className, style, testId, ref, ...rest }) => (jsx("footer", { ref: ref, className: cx(statusBarSlot, className), style: style, "data-testid": testId, ...rest, children: children }));
+StatusBarSlot.displayName = 'AppShell.StatusBar';
+// --- Root Component ---
+const AppShellRoot = ({ viewportLock = false, topChromeSeparator = 'border', sideChromeSeparator = 'border', children, className, style, testId, ref, ...rest }) => {
+    const [toolbarVisibility, setToolbarVisibility] = useState({
+        top: true,
+        left: true,
+        right: true,
+    });
+    const isToolbarVisible = useCallback((position) => toolbarVisibility[position] ?? true, [toolbarVisibility]);
+    const setToolbarVisible = useCallback((position, visible) => {
+        setToolbarVisibility(prev => ({ ...prev, [position]: visible }));
+    }, []);
+    const contextValue = useMemo(() => ({
+        isToolbarVisible,
+        setToolbarVisible,
+        topChromeSeparator,
+        sideChromeSeparator,
+    }), [
+        isToolbarVisible,
+        setToolbarVisible,
+        topChromeSeparator,
+        sideChromeSeparator,
+    ]);
+    return (jsx(AppShellContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(shellRoot, viewportLock && viewportLockClass, className), style: style, "data-testid": testId, role: "application", ...rest, children: children }) }));
+};
+AppShellRoot.displayName = 'AppShell';
+// --- Compound Component ---
+const AppShell = /*#__PURE__*/ Object.assign(AppShellRoot, {
+    MenuBar: MenuBarSlot,
+    Toolbar: ToolbarSlot,
+    Dock: DockSlot,
+    StatusBar: StatusBarSlot,
+});
+
+export { AppShell, useAppShell };
+//# sourceMappingURL=AppShell.js.map

package/dist/esm/components/shell/AppShell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","sources":["../../../../../../src/components/shell/AppShell/AppShell.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA2BA;AAEA;AACE;AACA;AACA;AACA;AACD;AAEM;AAEP;AAEA;AAkBA;AAEA;;AAYE;AAAiC;;AAG/B;AACA;;AAMU;AACA;AACD;AAUT;AACE;;AAeN;AACA;AAEA;AAmBA;AAEA;AAmBA;AAEA;AAEA;AAYE;AAGE;AACA;AACA;AACD;;;AASG;;AAKJ;;;;;AAMG;;;;;AAMA;;AAiBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.css.js

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/shell/FloatingPanel/FloatingPanel.css.ts.vanilla-1rIAXEFp.css';
+
+var collapsibleHidden = 'FloatingPanel_collapsibleHidden__exxnv7b';
+var collapsibleVisible = 'FloatingPanel_collapsibleVisible__exxnv7a';
+var header = 'FloatingPanel_header__exxnv76';
+var headerActions = 'FloatingPanel_headerActions__exxnv78';
+var headerButton = 'FloatingPanel_headerButton__exxnv79';
+var panel = 'FloatingPanel_panel__exxnv75';
+var panelHeightVar = 'var(--panelHeightVar__exxnv73)';
+var panelWidthVar = 'var(--panelWidthVar__exxnv72)';
+var panelZIndexVar = 'var(--panelZIndexVar__exxnv74)';
+var posXVar = 'var(--posXVar__exxnv70)';
+var posYVar = 'var(--posYVar__exxnv71)';
+var resizeHandle = 'FloatingPanel_resizeHandle__exxnv7c';
+var title = 'FloatingPanel_title__exxnv77';
+
+export { collapsibleHidden, collapsibleVisible, header, headerActions, headerButton, panel, panelHeightVar, panelWidthVar, panelZIndexVar, posXVar, posYVar, resizeHandle, title };
+//# sourceMappingURL=FloatingPanel.css.js.map

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useMemo, useId, useEffect, createContext, useContext } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
+import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { panelZIndexVar, panelHeightVar, panelWidthVar, posYVar, posXVar, header, title, headerActions, headerButton, collapsibleHidden, collapsibleVisible, resizeHandle, panel } from './FloatingPanel.css.js';
+
+// --- FloatingManager Context ---
+const FloatingManagerContext = 
+/*#__PURE__*/ createContext(null);
+const useFloatingManager = () => useContext(FloatingManagerContext);
+const FloatingManager = ({ baseZIndex = 100, children, }) => {
+    const stackRef = useRef([]);
+    const [revision, setRevision] = useState(0);
+    const register = useCallback((id) => {
+        if (!stackRef.current.includes(id)) {
+            stackRef.current = [...stackRef.current, id];
+            setRevision(c => c + 1);
+        }
+    }, []);
+    const unregister = useCallback((id) => {
+        stackRef.current = stackRef.current.filter(s => s !== id);
+        setRevision(c => c + 1);
+    }, []);
+    const bringToFront = useCallback((id) => {
+        const stack = stackRef.current;
+        if (stack[stack.length - 1] === id)
+            return; // already on top
+        stackRef.current = [...stack.filter(s => s !== id), id];
+        setRevision(c => c + 1);
+    }, []);
+    const getZIndex = useCallback((id) => {
+        const index = stackRef.current.indexOf(id);
+        return baseZIndex + (index >= 0 ? index : 0);
+    }, [baseZIndex]);
+    const contextValue = useMemo(() => ({ bringToFront, getZIndex, register, unregister }), [revision, bringToFront, getZIndex, register, unregister]);
+    return (jsx(FloatingManagerContext.Provider, { value: contextValue, children: children }));
+};
+FloatingManager.displayName = 'FloatingManager';
+// --- FloatingPanel Component ---
+const FloatingPanel = ({ title: panelTitle, position: controlledPosition, defaultPosition = { x: 100, y: 100 }, onPositionChange, size: controlledSize, defaultSize = { width: 280, height: 200 }, onSizeChange, minWidth = 150, minHeight = 100, maxWidth = Infinity, maxHeight = Infinity, collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, onClose, closable = true, resizable = true, children, className, panelId, style, testId, ref: externalRef, ...rest }) => {
+    const generatedId = useId();
+    const id = panelId ?? generatedId;
+    const manager = useFloatingManager();
+    // Position state
+    const [internalPosition, setInternalPosition] = useState(defaultPosition);
+    const pos = controlledPosition ?? internalPosition;
+    const setPos = useCallback((p) => {
+        if (!controlledPosition)
+            setInternalPosition(p);
+        onPositionChange?.(p);
+    }, [controlledPosition, onPositionChange]);
+    // Size state
+    const [internalSize, setInternalSize] = useState(defaultSize);
+    const currentSize = controlledSize ?? internalSize;
+    const setSize = useCallback((s) => {
+        if (!controlledSize)
+            setInternalSize(s);
+        onSizeChange?.(s);
+    }, [controlledSize, onSizeChange]);
+    // Collapsed state
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    const isCollapsed = controlledCollapsed ?? internalCollapsed;
+    const toggleCollapse = useCallback(() => {
+        const next = !isCollapsed;
+        if (controlledCollapsed === undefined)
+            setInternalCollapsed(next);
+        onCollapsedChange?.(next);
+    }, [isCollapsed, controlledCollapsed, onCollapsedChange]);
+    // FloatingManager registration -- use stable id, run once
+    const managerRef = useRef(manager);
+    managerRef.current = manager;
+    useEffect(() => {
+        managerRef.current?.register(id);
+        return () => managerRef.current?.unregister(id);
+    }, [id]);
+    const handleBringToFront = useCallback(() => {
+        managerRef.current?.bringToFront(id);
+    }, [id]);
+    const zIndex = manager?.getZIndex(id) ?? 100;
+    // --- Drag ---
+    const panelRef = useRef(null);
+    const setPanelRef = useMemo(() => (node) => {
+        panelRef.current = node;
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef && typeof externalRef === 'object') {
+            externalRef.current =
+                node;
+        }
+    }, [externalRef]);
+    const dragOffsetRef = useRef({ x: 0, y: 0 });
+    const handleDragStart = useCallback((e) => {
+        e.preventDefault();
+        const target = e.currentTarget;
+        target.setPointerCapture(e.pointerId);
+        dragOffsetRef.current = {
+            x: e.clientX - pos.x,
+            y: e.clientY - pos.y,
+        };
+        const handleDragMove = (me) => {
+            const newX = me.clientX - dragOffsetRef.current.x;
+            const newY = me.clientY - dragOffsetRef.current.y;
+            const clampedX = Math.max(0, Math.min(newX, window.innerWidth - 50));
+            const clampedY = Math.max(0, Math.min(newY, window.innerHeight - 30));
+            setPos({ x: clampedX, y: clampedY });
+        };
+        const handleDragEnd = () => {
+            target.removeEventListener('pointermove', handleDragMove);
+            target.removeEventListener('pointerup', handleDragEnd);
+        };
+        target.addEventListener('pointermove', handleDragMove);
+        target.addEventListener('pointerup', handleDragEnd);
+    }, [pos, setPos]);
+    // --- Resize (bottom-right corner only) ---
+    const handleResizeStart = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const target = e.currentTarget;
+        target.setPointerCapture(e.pointerId);
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startW = currentSize.width;
+        const startH = currentSize.height;
+        const handleResizeMove = (me) => {
+            const dx = me.clientX - startX;
+            const dy = me.clientY - startY;
+            const newW = Math.min(maxWidth, Math.max(minWidth, startW + dx));
+            const newH = Math.min(maxHeight, Math.max(minHeight, startH + dy));
+            setSize({ width: newW, height: newH });
+        };
+        const handleResizeEnd = () => {
+            target.removeEventListener('pointermove', handleResizeMove);
+            target.removeEventListener('pointerup', handleResizeEnd);
+        };
+        target.addEventListener('pointermove', handleResizeMove);
+        target.addEventListener('pointerup', handleResizeEnd);
+    }, [currentSize, minWidth, minHeight, maxWidth, maxHeight, setSize]);
+    const inlineVars = assignInlineVars({
+        [posXVar]: `${pos.x}px`,
+        [posYVar]: `${pos.y}px`,
+        [panelWidthVar]: `${currentSize.width}px`,
+        [panelHeightVar]: isCollapsed ? 'auto' : `${currentSize.height}px`,
+        [panelZIndexVar]: String(zIndex),
+    });
+    return (jsxs("div", { ref: setPanelRef, className: cx(panel, className), "data-testid": testId, role: "dialog", "aria-modal": "false", "aria-label": panelTitle, tabIndex: -1, onPointerDown: handleBringToFront, style: {
+            ...style,
+            ...inlineVars,
+        }, ...rest, children: [jsxs("div", { className: header, onPointerDown: handleDragStart, "data-testid": "panel-header", children: [jsx("span", { className: title, children: panelTitle }), jsxs("div", { className: headerActions, children: [jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: toggleCollapse, "aria-label": isCollapsed ? 'Expand panel' : 'Collapse panel', children: isCollapsed ? (jsx(ChevronDownIcon, { size: "sm", color: "secondary", decorative: true })) : (jsx(ChevronUpIcon, { size: "sm", color: "secondary", decorative: true })) }), closable && onClose && (jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: onClose, "aria-label": "Close panel", children: jsx(CloseIcon, { size: "sm", color: "secondary", decorative: true }) }))] })] }), jsx("div", { className: isCollapsed ? collapsibleHidden : collapsibleVisible, children: jsx(ScrollArea, { direction: "both", scrollbarVisibility: "auto", scrollbarWidth: 5, autoFill: true, children: children }) }), resizable && !isCollapsed && (jsx("div", { className: resizeHandle, onPointerDown: handleResizeStart, "data-testid": "resize-handle" }))] }));
+};
+FloatingPanel.displayName = 'FloatingPanel';
+
+export { FloatingManager, FloatingPanel };
+//# sourceMappingURL=FloatingPanel.js.map

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAyCA;AAEA;AACE;AAEF;AAEO;AAIL;;AAGA;;;;;;AAOA;AACE;;;AAIF;AACE;;AACoC;;;;AAKtC;;AAGI;AACF;AAIF;AAKA;AAKF;AAEA;AAEA;;AA6BE;AACA;AACA;;;AAKA;AACA;AAEI;;AACA;AACF;;;AAOF;AACA;AAEI;;AACA;AACF;;;AAMF;AACA;AACE;;;AAEA;;;AAIF;AACA;;AAGE;;AAEF;AAEA;AACE;AACF;;;AAKA;;AAGI;AACA;;;AAEO;AACJ;AACC;;AAEN;AAGF;AAEA;;AAGI;AACA;;AAGE;AACA;;AAGF;;;;;;AAMA;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKF;;;AAII;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAEF;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKA;AACA;AACA;AACA;AACA;AACD;AAED;AAWM;AACA;;AAwDR;AAEA;;"}

package/dist/esm/components/shell/MenuBar/MenuBar.css.js

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/shell/MenuBar/MenuBar.css.ts.vanilla-TgPcl4yA.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var dropdown = 'MenuBar_dropdown__1h81mxv7';
+var menuBarRoot = createRuntimeFn({defaultClassName:'MenuBar_menuBarRoot__1h81mxv0',variantClassNames:{size:{sm:'MenuBar_menuBarRoot_size_sm__1h81mxv1',md:'MenuBar_menuBarRoot_size_md__1h81mxv2'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var menuContainer = 'MenuBar_menuContainer__1h81mxv3';
+var menuItem = 'MenuBar_menuItem__1h81mxv8';
+var separator = 'MenuBar_separator__1h81mxva';
+var shortcut = 'MenuBar_shortcut__1h81mxv9';
+var subContainer = 'MenuBar_subContainer__1h81mxvd';
+var subDropdown = 'MenuBar_subDropdown__1h81mxvc';
+var subTrigger = 'MenuBar_subTrigger__1h81mxvb MenuBar_menuItem__1h81mxv8';
+var trigger = createRuntimeFn({defaultClassName:'MenuBar_trigger__1h81mxv4',variantClassNames:{active:{true:'MenuBar_trigger_active_true__1h81mxv5',false:'MenuBar_trigger_active_false__1h81mxv6'}},defaultVariants:{active:false},compoundVariants:[]});
+
+export { dropdown, menuBarRoot, menuContainer, menuItem, separator, shortcut, subContainer, subDropdown, subTrigger, trigger };
+//# sourceMappingURL=MenuBar.css.js.map