entangle-ui 0.2.0 → 0.4.0

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

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

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

@@ -0,0 +1,215 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect, useId, createContext, useContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { menuBarRoot, separator, subTrigger, subDropdown, subContainer, shortcut, menuItem, trigger, dropdown, menuContainer } from './MenuBar.css.js';
+
+// --- Context ---
+const MenuBarContext = /*#__PURE__*/ createContext({
+    size: 'md',
+    menuOffset: 2,
+    openMenuId: null,
+    setOpenMenuId: () => { },
+    registerMenu: () => { },
+    unregisterMenu: () => { },
+    menuIds: [],
+});
+const useMenuBar = () => useContext(MenuBarContext);
+const SUBMENU_CLOSE_DELAY = 150;
+const MENU_ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
+const ChevronRight = () => (jsx("span", { style: {
+        fontSize: '8px',
+        lineHeight: 1,
+    }, children: "\u25B6" }));
+// --- Sub-components ---
+const MenuBarItem = ({ onClick, shortcut: shortcutText, disabled = false, icon, children, className, style, testId, ref, ...rest }) => {
+    const { setOpenMenuId } = useMenuBar();
+    const handleClick = useCallback(() => {
+        if (onClick) {
+            onClick();
+            setOpenMenuId(null);
+        }
+    }, [onClick, setOpenMenuId]);
+    return (jsxs("button", { role: "menuitem", onClick: handleClick, disabled: disabled, className: cx(menuItem, className), style: style, "data-testid": testId, ref: ref, type: "button", tabIndex: -1, ...rest, children: [icon && jsx("span", { children: icon }), jsx("span", { children: children }), shortcutText && jsx("span", { className: shortcut, children: shortcutText })] }));
+};
+MenuBarItem.displayName = 'MenuBar.Item';
+const MenuBarSub = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
+    const [open, setOpen] = useState(false);
+    const closeTimer = useRef(null);
+    const handleEnter = useCallback(() => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+        if (!disabled)
+            setOpen(true);
+    }, [disabled]);
+    const handleLeave = useCallback(() => {
+        closeTimer.current = setTimeout(() => setOpen(false), SUBMENU_CLOSE_DELAY);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (closeTimer.current)
+                clearTimeout(closeTimer.current);
+        };
+    }, []);
+    return (jsxs("div", { ref: ref, className: cx(subContainer, className), style: style, "data-testid": testId, onMouseEnter: handleEnter, onMouseLeave: handleLeave, ...rest, children: [jsxs("button", { className: subTrigger, role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, disabled: disabled, type: "button", tabIndex: -1, children: [jsx("span", { children: label }), jsx(ChevronRight, {})] }), open && (jsx("div", { className: subDropdown, role: "menu", children: children }))] }));
+};
+MenuBarSub.displayName = 'MenuBar.Sub';
+const MenuBarSeparator = ({ className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { role: "separator", className: cx(separator, className), style: style, "data-testid": testId, ref: ref, ...rest }));
+};
+MenuBarSeparator.displayName = 'MenuBar.Separator';
+// --- MenuBarMenu (top-level dropdown trigger) ---
+const MenuBarMenu = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
+    const menuId = useId();
+    const { openMenuId, setOpenMenuId, registerMenu, unregisterMenu, menuOffset, } = useMenuBar();
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const isOpen = openMenuId === menuId;
+    useEffect(() => {
+        registerMenu(menuId);
+        return () => unregisterMenu(menuId);
+    }, [menuId, registerMenu, unregisterMenu]);
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        setOpenMenuId(isOpen ? null : menuId);
+    }, [disabled, isOpen, menuId, setOpenMenuId]);
+    const handleMouseEnter = useCallback(() => {
+        // Open on hover only when another menu is already open
+        if (openMenuId !== null && openMenuId !== menuId && !disabled) {
+            setOpenMenuId(menuId);
+        }
+    }, [openMenuId, menuId, disabled, setOpenMenuId]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setOpenMenuId(menuId);
+            // Focus first item in dropdown after open
+            setTimeout(() => {
+                const firstItem = dropdownRef.current?.querySelector(MENU_ITEM_SELECTOR);
+                firstItem?.focus();
+            }, 0);
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setOpenMenuId(null);
+            triggerRef.current?.focus();
+        }
+    }, [menuId, setOpenMenuId]);
+    const handleDropdownKeyDown = useCallback((e) => {
+        const items = Array.from(dropdownRef.current?.querySelectorAll(MENU_ITEM_SELECTOR) ?? []);
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;
+            items[next]?.focus();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;
+            items[prev]?.focus();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            setOpenMenuId(null);
+            triggerRef.current?.focus();
+        }
+    }, [setOpenMenuId]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutsideClick = (e) => {
+            const target = e.target;
+            if (!triggerRef.current?.contains(target) &&
+                !dropdownRef.current?.contains(target)) {
+                setOpenMenuId(null);
+            }
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => document.removeEventListener('mousedown', handleOutsideClick);
+    }, [isOpen, setOpenMenuId]);
+    return (jsxs("div", { ref: ref, className: cx(menuContainer, className), style: style, "data-testid": testId, ...rest, children: [jsx("button", { ref: triggerRef, className: trigger({ active: isOpen }), onClick: handleClick, onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, disabled: disabled, type: "button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, tabIndex: -1, children: label }), isOpen && (jsx("div", { ref: dropdownRef, className: dropdown, role: "menu", "aria-label": label, onKeyDown: handleDropdownKeyDown, style: { top: `calc(100% + ${menuOffset}px)` }, children: children }))] }));
+};
+MenuBarMenu.displayName = 'MenuBar.Menu';
+// --- Root Component ---
+const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style, testId, ref: externalRef, ...rest }) => {
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const menuIdsRef = useRef([]);
+    const safeMenuOffset = Math.max(0, menuOffset);
+    const [, forceUpdate] = useState(0);
+    const barRef = useRef(null);
+    const setBarRef = useMemo(() => (node) => {
+        barRef.current = node;
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef && typeof externalRef === 'object') {
+            externalRef.current =
+                node;
+        }
+    }, [externalRef]);
+    const registerMenu = useCallback((id) => {
+        if (!menuIdsRef.current.includes(id)) {
+            menuIdsRef.current = [...menuIdsRef.current, id];
+            forceUpdate(c => c + 1);
+        }
+    }, []);
+    const unregisterMenu = useCallback((id) => {
+        menuIdsRef.current = menuIdsRef.current.filter(m => m !== id);
+        forceUpdate(c => c + 1);
+    }, []);
+    const handleBarKeyDown = useCallback((e) => {
+        if (!barRef.current)
+            return;
+        const triggers = Array.from(barRef.current.querySelectorAll(':scope > div > [role="menuitem"]'));
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            const next = currentIndex + 1 < triggers.length ? currentIndex + 1 : 0;
+            triggers[next]?.focus();
+            // If menu is open, switch to next menu
+            if (openMenuId !== null) {
+                triggers[next]?.click();
+            }
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const prev = currentIndex - 1 >= 0 ? currentIndex - 1 : triggers.length - 1;
+            triggers[prev]?.focus();
+            if (openMenuId !== null) {
+                triggers[prev]?.click();
+            }
+        }
+    }, [openMenuId]);
+    const contextValue = useMemo(() => ({
+        size: $size,
+        menuOffset: safeMenuOffset,
+        openMenuId,
+        setOpenMenuId,
+        registerMenu,
+        unregisterMenu,
+        menuIds: menuIdsRef.current,
+    }), [
+        $size,
+        safeMenuOffset,
+        openMenuId,
+        setOpenMenuId,
+        registerMenu,
+        unregisterMenu,
+    ]);
+    return (jsx(MenuBarContext.Provider, { value: contextValue, children: jsx("div", { ref: setBarRef, className: cx(menuBarRoot({ size: $size }), className), style: style, "data-testid": testId, role: "menubar", onKeyDown: handleBarKeyDown, tabIndex: 0, ...rest, children: children }) }));
+};
+MenuBarRoot.displayName = 'MenuBar';
+// --- Compound Component ---
+const MenuBar = /*#__PURE__*/ Object.assign(MenuBarRoot, {
+    Menu: MenuBarMenu,
+    Item: MenuBarItem,
+    Sub: MenuBarSub,
+    Separator: MenuBarSeparator,
+});
+
+export { MenuBar };
+//# sourceMappingURL=MenuBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAmCA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AAEA;AAEA;AAEA;AAGM;AACA;AACD;AAML;AAEA;AAaE;AAEA;;AAEI;;;AAGJ;AAEA;AAkBF;AAEA;AAEA;;AAYE;AAEA;AACE;AACE;AACA;;AAEF;;AACF;AAEA;AACE;;;AAIA;;AAC0B;AAC1B;;AAGF;AA6BF;AAEA;AAEA;AAOE;AAUF;AAEA;AAEA;AAEA;AAWE;AACA;AAOA;AACA;AACA;;;AAIE;;AAGF;AACE;;;;AAIF;;;;;;AAOA;AAEI;;;;;;;;;AAWA;;;AAGE;;AAEJ;AAIF;AAEI;;AAOA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;;AAGL;;AAEJ;;;AAMA;;AAEA;AACE;;;;;AAOF;AAEA;;AAEF;;AAuCF;AAEA;AAEA;AAEA;;AAYE;;;AAGA;;AAGI;AACA;;;AAEO;AACJ;AACC;;AAEN;AAIF;;;;;;AAOA;AACE;;;AAIF;;;AAII;;AASA;;AAEE;AACA;;AAEA;AACE;;;AAEG;;;AAIL;AACA;AACE;;;AAGN;AAIF;AAEI;AACA;;;;;;AAMD;;;;;;;AAQA;;AAmBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}

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

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/shell/StatusBar/StatusBar.css.ts.vanilla-BwO7oAZi.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var badge = createRuntimeFn({defaultClassName:'StatusBar_badge__1kv0a0b',variantClassNames:{dot:{true:'StatusBar_badge_dot_true__1kv0a0c',false:'StatusBar_badge_dot_false__1kv0a0d'}},defaultVariants:{dot:false},compoundVariants:[]});
+var itemButton = 'StatusBar_itemButton__1kv0a09';
+var itemSpan = 'StatusBar_itemSpan__1kv0a0a';
+var statusBarRoot = createRuntimeFn({defaultClassName:'StatusBar_statusBarRoot__1kv0a00',variantClassNames:{variant:{'default':'StatusBar_statusBarRoot_variant_default__1kv0a01',error:'StatusBar_statusBarRoot_variant_error__1kv0a02',accent:'StatusBar_statusBarRoot_variant_accent__1kv0a03'},size:{sm:'StatusBar_statusBarRoot_size_sm__1kv0a04',md:'StatusBar_statusBarRoot_size_md__1kv0a05'}},defaultVariants:{variant:'default',size:'sm'},compoundVariants:[]});
+var statusBarSection = createRuntimeFn({defaultClassName:'StatusBar_statusBarSection__1kv0a06',variantClassNames:{side:{left:'StatusBar_statusBarSection_side_left__1kv0a07',right:'StatusBar_statusBarSection_side_right__1kv0a08'}},defaultVariants:{side:'left'},compoundVariants:[]});
+
+export { badge, itemButton, itemSpan, statusBarRoot, statusBarSection };
+//# sourceMappingURL=StatusBar.css.js.map

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

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

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

@@ -0,0 +1,38 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useContext, createContext, useMemo } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { statusBarSection, badge, itemButton, itemSpan, statusBarRoot } from './StatusBar.css.js';
+
+const StatusBarContext = /*#__PURE__*/ createContext({
+    size: 'sm',
+});
+const useStatusBar = () => useContext(StatusBarContext);
+// --- Sub-components ---
+const StatusBarSection = /*#__PURE__*/ React.memo(({ $side = 'left', children, className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { ref: ref, className: cx(statusBarSection({ side: $side }), className), style: style, "data-testid": testId, ...rest, children: children }));
+});
+StatusBarSection.displayName = 'StatusBar.Section';
+const StatusBarItem = /*#__PURE__*/ React.memo(({ onClick, icon, children, title, badge: badgeProp, disabled = false, className, style, testId, ref, ...rest }) => {
+    useStatusBar();
+    const content = (jsxs(Fragment, { children: [icon, children && jsx("span", { children: children }), badgeProp !== undefined && badgeProp !== false && (jsx("span", { className: badge({ dot: badgeProp === true }), children: typeof badgeProp === 'number' ? badgeProp : null }))] }));
+    if (onClick) {
+        return (jsx("button", { onClick: onClick, title: title, disabled: disabled, className: cx(itemButton, className), style: style, "data-testid": testId, ref: ref, type: "button", ...rest, children: content }));
+    }
+    return (jsx("span", { title: title, className: cx(itemSpan, className), style: style, "data-testid": testId, ref: ref, ...rest, children: content }));
+});
+StatusBarItem.displayName = 'StatusBar.Item';
+// --- Root Component ---
+const StatusBarRoot = ({ $size = 'sm', $variant = 'default', children, className, style, testId, ref, ...rest }) => {
+    const contextValue = useMemo(() => ({ size: $size }), [$size]);
+    return (jsx(StatusBarContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(statusBarRoot({ variant: $variant, size: $size }), className), style: style, "data-testid": testId, role: "status", "aria-live": "polite", ...rest, children: children }) }));
+};
+StatusBarRoot.displayName = 'StatusBar';
+// --- Compound Component ---
+const StatusBar = /*#__PURE__*/ Object.assign(StatusBarRoot, {
+    Section: StatusBarSection,
+    Item: StatusBarItem,
+});
+
+export { StatusBar };
+//# sourceMappingURL=StatusBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sources":["../../../../../../src/components/shell/StatusBar/StatusBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAkBA;AACE;AACD;AAED;AAEA;AAEA;AAWI;AAWF;AAGF;AAEA;AAeI;;;AAeE;;AAiBF;AAYF;AAGF;AAEA;AAEA;AAWE;;AAoBF;AAEA;AAEA;AAEO;AACL;AACA;AACD;;"}

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

@@ -0,0 +1,11 @@
+import './../../../assets/src/components/shell/Toolbar/Toolbar.css.ts.vanilla-DPqftT18.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var toolbarButton = createRuntimeFn({defaultClassName:'Toolbar_toolbarButton__sc1ugu3',variantClassNames:{size:{sm:'Toolbar_toolbarButton_size_sm__sc1ugu4',md:'Toolbar_toolbarButton_size_md__sc1ugu5'},variant:{'default':'Toolbar_toolbarButton_variant_default__sc1ugu6',ghost:'Toolbar_toolbarButton_variant_ghost__sc1ugu7',filled:'Toolbar_toolbarButton_variant_filled__sc1ugu8'},active:{true:'Toolbar_toolbarButton_active_true__sc1ugu9',false:'Toolbar_toolbarButton_active_false__sc1ugua'}},defaultVariants:{size:'md',variant:'default',active:false},compoundVariants:[[{active:true},'Toolbar_toolbarButton_compound_0__sc1ugub'],[{active:false},'Toolbar_toolbarButton_compound_1__sc1uguc']]});
+var toolbarGroup = createRuntimeFn({defaultClassName:'Toolbar_toolbarGroup__sc1ugud',variantClassNames:{orientation:{horizontal:'Toolbar_toolbarGroup_orientation_horizontal__sc1ugue',vertical:'Toolbar_toolbarGroup_orientation_vertical__sc1uguf'}},defaultVariants:{orientation:'horizontal'},compoundVariants:[]});
+var toolbarRoot = createRuntimeFn({defaultClassName:'Toolbar_toolbarRoot__sc1ugu0',variantClassNames:{orientation:{horizontal:'Toolbar_toolbarRoot_orientation_horizontal__sc1ugu1',vertical:'Toolbar_toolbarRoot_orientation_vertical__sc1ugu2'}},defaultVariants:{orientation:'horizontal'},compoundVariants:[]});
+var toolbarSeparator = createRuntimeFn({defaultClassName:'Toolbar_toolbarSeparator__sc1ugug',variantClassNames:{orientation:{horizontal:'Toolbar_toolbarSeparator_orientation_horizontal__sc1uguh',vertical:'Toolbar_toolbarSeparator_orientation_vertical__sc1ugui'}},defaultVariants:{orientation:'horizontal'},compoundVariants:[]});
+var toolbarSpacer = 'Toolbar_toolbarSpacer__sc1uguj';
+
+export { toolbarButton, toolbarGroup, toolbarRoot, toolbarSeparator, toolbarSpacer };
+//# sourceMappingURL=Toolbar.css.js.map

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

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

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

@@ -0,0 +1,109 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useContext, createContext, useRef, useMemo, useCallback } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { toolbarButton, toolbarGroup, toolbarSeparator, toolbarSpacer, toolbarRoot } from './Toolbar.css.js';
+
+const ToolbarContext = /*#__PURE__*/ createContext({
+    orientation: 'horizontal',
+    size: 'md',
+});
+const useToolbar = () => useContext(ToolbarContext);
+// --- Roving tabindex helper ---
+const FOCUSABLE_ITEM_SELECTOR = 'button:not(:disabled), [role="button"]:not([aria-disabled="true"])';
+function focusableItems(container) {
+    return Array.from(container.querySelectorAll(FOCUSABLE_ITEM_SELECTOR));
+}
+// --- Sub-components ---
+const ToolbarButton = /*#__PURE__*/ React.memo(({ onClick, icon, children, tooltip, $variant = 'default', disabled = false, className, style, testId, ref, ...rest }) => {
+    const { size } = useToolbar();
+    return (jsxs("button", { onClick: onClick, disabled: disabled, className: cx(toolbarButton({ size, variant: $variant, active: false }), className), style: style, "data-testid": testId, ref: ref, title: tooltip, type: "button", tabIndex: -1, ...rest, children: [icon, !icon && children] }));
+});
+ToolbarButton.displayName = 'Toolbar.Button';
+const ToolbarToggle = /*#__PURE__*/ React.memo(({ pressed, onPressedChange, icon, children, tooltip, disabled = false, className, style, testId, ref, ...rest }) => {
+    const { size } = useToolbar();
+    return (jsxs("button", { onClick: () => onPressedChange(!pressed), disabled: disabled, className: cx(toolbarButton({ size, variant: 'default', active: pressed }), className), style: style, "data-testid": testId, ref: ref, title: tooltip, type: "button", tabIndex: -1, "aria-pressed": pressed, ...rest, children: [icon, !icon && children] }));
+});
+ToolbarToggle.displayName = 'Toolbar.Toggle';
+const ToolbarGroupComp = /*#__PURE__*/ React.memo(({ children, className, style, testId, ref, ...rest }) => {
+    const { orientation } = useToolbar();
+    return (jsx("div", { className: cx(toolbarGroup({ orientation }), className), style: style, "data-testid": testId, ref: ref, role: "group", ...rest, children: children }));
+});
+ToolbarGroupComp.displayName = 'Toolbar.Group';
+const ToolbarSeparatorComp = /*#__PURE__*/ React.memo(({ className, style, testId, ref, ...rest }) => {
+    const { orientation } = useToolbar();
+    return (jsx("div", { className: cx(toolbarSeparator({ orientation }), className), style: style, "data-testid": testId, ref: ref, role: "separator", "aria-orientation": orientation === 'horizontal' ? 'vertical' : 'horizontal', ...rest }));
+});
+ToolbarSeparatorComp.displayName = 'Toolbar.Separator';
+const ToolbarSpacerComp = /*#__PURE__*/ React.memo(({ className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { className: cx(toolbarSpacer, className), style: style, "data-testid": testId, ref: ref, ...rest }));
+});
+ToolbarSpacerComp.displayName = 'Toolbar.Spacer';
+// --- Root Component ---
+const ToolbarRoot = ({ $orientation = 'horizontal', $size = 'md', children, className, style, testId, ref: externalRef, ...rest }) => {
+    const internalRef = useRef(null);
+    const setToolbarRef = useMemo(() => (node) => {
+        internalRef.current = node;
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef && typeof externalRef === 'object') {
+            externalRef.current =
+                node;
+        }
+    }, [externalRef]);
+    const handleKeyDown = useCallback((e) => {
+        const container = internalRef.current;
+        if (!container)
+            return;
+        const items = focusableItems(container);
+        if (items.length === 0)
+            return;
+        const current = document.activeElement;
+        const currentIndex = items.indexOf(current);
+        const nextKey = $orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = $orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        if (e.key === nextKey) {
+            e.preventDefault();
+            const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;
+            items[next]?.focus();
+        }
+        else if (e.key === prevKey) {
+            e.preventDefault();
+            const prev = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;
+            items[prev]?.focus();
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            items[0]?.focus();
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            items[items.length - 1]?.focus();
+        }
+    }, [$orientation]);
+    const handleFocus = useCallback(() => {
+        const container = internalRef.current;
+        if (!container)
+            return;
+        // If focus lands on the toolbar container itself, move to first button
+        if (document.activeElement === container) {
+            const items = focusableItems(container);
+            items[0]?.focus();
+        }
+    }, []);
+    const toolbarContextValue = useMemo(() => ({ orientation: $orientation, size: $size }), [$orientation, $size]);
+    return (jsx(ToolbarContext.Provider, { value: toolbarContextValue, children: jsx("div", { ref: setToolbarRef, className: cx(toolbarRoot({ orientation: $orientation }), className), style: style, "data-testid": testId, role: "toolbar", "aria-orientation": $orientation, tabIndex: 0, onKeyDown: handleKeyDown, onFocus: handleFocus, ...rest, children: children }) }));
+};
+ToolbarRoot.displayName = 'Toolbar';
+// --- Compound Component ---
+const Toolbar = /*#__PURE__*/ Object.assign(ToolbarRoot, {
+    Button: ToolbarButton,
+    Toggle: ToolbarToggle,
+    Group: ToolbarGroupComp,
+    Separator: ToolbarSeparatorComp,
+    Spacer: ToolbarSpacerComp,
+});
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../../../../../../src/components/shell/Toolbar/Toolbar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA4BA;AACE;AACA;AACD;AAED;AAEA;AAEA;AAGA;;AAIA;AAEA;AAEA;AAeI;AAEA;AAoBF;AAGF;AAEA;AAeI;AAEA;AAqBF;AAGF;AAEA;AAEI;AAEA;AAYF;AAGF;AAEA;AAEI;;AAcF;AAGF;AAEA;;AAWE;AAGF;AAEA;AAEA;AAWE;;AAII;AACA;;;AAEO;AACJ;AACC;;AAEN;AAIF;AAEI;AACA;;AAEA;AACA;;AAEA;;AAGA;AAEA;AAEA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;AAEL;;AACK;;;;AAIT;AAIF;AACE;AACA;;;AAGA;AACE;AACA;;;;AASJ;AAkBF;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/esm/context/KeyboardContext.js

@@ -0,0 +1,15 @@
+"use client";
+import 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+
+const KeyboardContext = /*#__PURE__*/ createContext(null);
+const useKeyboardContext = () => {
+    const context = useContext(KeyboardContext);
+    if (!context) {
+        throw new Error('useKeyboardContext must be used within a KeyboardContextProvider');
+    }
+    return context;
+};
+
+export { useKeyboardContext };
+//# sourceMappingURL=KeyboardContext.js.map

package/dist/esm/context/KeyboardContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyboardContext.js","sources":["../../../../src/context/KeyboardContext.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAQA;AAiBO;AACL;;AAEE;;AAIF;AACF;;"}

package/dist/esm/index.js

@@ -0,0 +1,101 @@
+export { vars } from './theme/contract.css.js';
+export { darkThemeValues } from './theme/darkTheme.css.js';
+import './node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+export { VanillaThemeProvider } from './theme/VanillaThemeProvider.js';
+export { ThemeProvider } from './theme/ThemeProvider.js';
+export { Accordion } from './components/layout/Accordion/Accordion.js';
+export { AccordionItem } from './components/layout/Accordion/AccordionItem.js';
+export { AccordionTrigger } from './components/layout/Accordion/AccordionTrigger.js';
+export { AccordionContent } from './components/layout/Accordion/AccordionContent.js';
+export { Flex } from './components/layout/Flex/Flex.js';
+export { Grid } from './components/layout/Grid/Grid.js';
+export { PanelSurface } from './components/layout/PanelSurface/PanelSurface.js';
+export { ScrollArea } from './components/layout/ScrollArea/ScrollArea.js';
+export { Spacer } from './components/layout/Spacer/Spacer.js';
+export { SplitPane } from './components/layout/SplitPane/SplitPane.js';
+export { SplitPanePanel } from './components/layout/SplitPane/SplitPanePanel.js';
+export { Stack } from './components/layout/Stack/Stack.js';
+import './components/primitives/BaseButton/BaseButton.js';
+export { Button } from './components/primitives/Button/Button.js';
+export { Checkbox } from './components/primitives/Checkbox/Checkbox.js';
+export { CheckboxGroup } from './components/primitives/Checkbox/CheckboxGroup.js';
+export { Collapsible } from './components/primitives/Collapsible/Collapsible.js';
+export { Icon } from './components/primitives/Icon/Icon.js';
+export { IconButton } from './components/primitives/IconButton/IconButton.js';
+export { Input } from './components/primitives/Input/Input.js';
+export { Paper } from './components/primitives/Paper/Paper.js';
+export { Popover } from './components/primitives/Popover/Popover.js';
+export { PopoverClose } from './components/primitives/Popover/PopoverClose.js';
+export { PopoverContent } from './components/primitives/Popover/PopoverContent.js';
+export { PopoverTrigger } from './components/primitives/Popover/PopoverTrigger.js';
+export { Switch } from './components/primitives/Switch/Switch.js';
+export { Text } from './components/primitives/Text/Text.js';
+export { Tooltip } from './components/primitives/Tooltip/Tooltip.js';
+import 'react';
+import './components/primitives/canvas/CanvasContainer.js';
+export { ColorPicker } from './components/controls/ColorPicker/ColorPicker.js';
+export { ColorSwatch } from './components/controls/ColorPicker/ColorSwatch.js';
+export { EyeDropper } from './components/controls/ColorPicker/EyeDropper.js';
+export { ColorPalette } from './components/controls/ColorPicker/ColorPalette.js';
+export { MATERIAL_PALETTE } from './components/controls/ColorPicker/palettes/material.js';
+export { TAILWIND_PALETTE } from './components/controls/ColorPicker/palettes/tailwind.js';
+export { EARTH_PALETTE, MONOCHROME_PALETTE, NEON_PALETTE, PASTEL_PALETTE, PROFESSIONAL_PALETTES, SKIN_TONES_PALETTE, VINTAGE_PALETTE } from './components/controls/ColorPicker/palettes/professional.js';
+export { NumberInput } from './components/controls/NumberInput/NumberInput.js';
+import 'react/jsx-runtime';
+export { Select } from './components/controls/Select/Select.js';
+export { Slider } from './components/controls/Slider/Slider.js';
+export { VectorInput } from './components/controls/VectorInput/VectorInput.js';
+export { TreeView } from './components/controls/TreeView/TreeView.js';
+export { CurveEditor } from './components/controls/CurveEditor/CurveEditor.js';
+export { createLinearCurve, domainToCanvas, evaluateCurve, sampleCurve } from './components/controls/CurveEditor/curveUtils.js';
+export { CURVE_PRESETS } from './components/controls/CurveEditor/curvePresets.js';
+export { CartesianPicker } from './components/controls/CartesianPicker/CartesianPicker.js';
+export { ContextMenu } from './components/navigation/ContextMenu/ContextMenu.js';
+export { useContextMenuTarget } from './components/navigation/ContextMenu/useContextMenuTarget.js';
+export { Menu } from './components/navigation/Menu/Menu.js';
+export { useMenu } from './components/navigation/Menu/useMenu.js';
+export { Tabs } from './components/navigation/Tabs/Tabs.js';
+export { TabList } from './components/navigation/Tabs/TabList.js';
+export { Tab } from './components/navigation/Tabs/Tab.js';
+export { TabPanel } from './components/navigation/Tabs/TabPanel.js';
+export { FormLabel } from './components/form/FormLabel.js';
+export { FormHelperText } from './components/form/FormHelperText.js';
+export { InputWrapper } from './components/form/InputWrapper.js';
+export { Dialog } from './components/feedback/Dialog/Dialog.js';
+export { DialogHeader } from './components/feedback/Dialog/DialogHeader.js';
+export { DialogBody } from './components/feedback/Dialog/DialogBody.js';
+export { DialogFooter } from './components/feedback/Dialog/DialogFooter.js';
+export { DialogClose } from './components/feedback/Dialog/DialogClose.js';
+export { ToastProvider } from './components/feedback/Toast/ToastProvider.js';
+export { useToast } from './components/feedback/Toast/useToast.js';
+export { PropertyPanel } from './components/editor/PropertyInspector/PropertyPanel.js';
+export { PropertySection } from './components/editor/PropertyInspector/PropertySection.js';
+export { PropertyRow } from './components/editor/PropertyInspector/PropertyRow.js';
+export { PropertyGroup } from './components/editor/PropertyInspector/PropertyGroup.js';
+export { usePropertyUndo } from './components/editor/PropertyInspector/usePropertyUndo.js';
+export { ViewportGizmo } from './components/editor/ViewportGizmo/ViewportGizmo.js';
+export { axisToPresetView, eulerToRotationMatrix, gizmoHitTest, presetViewToOrientation, projectAxes, projectToCanvas, quaternionToEuler } from './components/editor/ViewportGizmo/gizmoMath.js';
+export { ChatPanel } from './components/editor/ChatPanel/ChatPanel.js';
+export { ChatMessageList } from './components/editor/ChatPanel/ChatMessageList.js';
+export { ChatMessage } from './components/editor/ChatPanel/ChatMessage.js';
+export { ChatBubble } from './components/editor/ChatPanel/ChatBubble.js';
+export { ChatInput } from './components/editor/ChatPanel/ChatInput.js';
+export { ChatTypingIndicator } from './components/editor/ChatPanel/ChatTypingIndicator.js';
+export { ChatToolCall } from './components/editor/ChatPanel/ChatToolCall.js';
+export { ChatCodeBlock } from './components/editor/ChatPanel/ChatCodeBlock.js';
+export { ChatAttachmentChip } from './components/editor/ChatPanel/ChatAttachment.js';
+export { ChatContextChip } from './components/editor/ChatPanel/ChatContextChip.js';
+export { ChatEmptyState } from './components/editor/ChatPanel/ChatEmptyState.js';
+export { ChatActionBar } from './components/editor/ChatPanel/ChatActionBar.js';
+export { ChatInputToolbar } from './components/editor/ChatPanel/ChatInputToolbar.js';
+export { useChatMessages } from './components/editor/ChatPanel/useChatMessages.js';
+export { useChatInput } from './components/editor/ChatPanel/useChatInput.js';
+export { useChatScroll } from './components/editor/ChatPanel/useChatScroll.js';
+export { AppShell, useAppShell } from './components/shell/AppShell/AppShell.js';
+export { FloatingManager, FloatingPanel } from './components/shell/FloatingPanel/FloatingPanel.js';
+export { MenuBar } from './components/shell/MenuBar/MenuBar.js';
+export { StatusBar } from './components/shell/StatusBar/StatusBar.js';
+export { Toolbar } from './components/shell/Toolbar/Toolbar.js';
+export { cn } from './utils/cn.js';
+export { cx } from './utils/cx.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/dist/esm/node_modules/@vanilla-extract/css/adapter/dist/vanilla-extract-css-adapter.esm.js

@@ -0,0 +1,15 @@
+var hasConfiguredAdapter = false;
+var setAdapterIfNotSet = newAdapter => {
+  if (!hasConfiguredAdapter) {
+    setAdapter(newAdapter);
+  }
+};
+var setAdapter = newAdapter => {
+  if (!newAdapter) {
+    throw new Error('No adapter provided when calling "setAdapter"');
+  }
+  hasConfiguredAdapter = true;
+};
+
+export { setAdapter, setAdapterIfNotSet };
+//# sourceMappingURL=vanilla-extract-css-adapter.esm.js.map

package/dist/esm/node_modules/@vanilla-extract/css/adapter/dist/vanilla-extract-css-adapter.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vanilla-extract-css-adapter.esm.js","sources":["../../../../../../../node_modules/@vanilla-extract/css/adapter/dist/vanilla-extract-css-adapter.esm.js"],"sourcesContent":["var mockAdapter = {\n  appendCss: () => {},\n  registerClassName: () => {},\n  onEndFileScope: () => {},\n  registerComposition: () => {},\n  markCompositionUsed: () => {},\n  getIdentOption: () => process.env.NODE_ENV === 'production' ? 'short' : 'debug'\n};\nvar adapterStack = [mockAdapter];\nvar currentAdapter = () => {\n  if (adapterStack.length < 1) {\n    throw new Error('No adapter configured');\n  }\n  return adapterStack[adapterStack.length - 1];\n};\nvar hasConfiguredAdapter = false;\nvar setAdapterIfNotSet = newAdapter => {\n  if (!hasConfiguredAdapter) {\n    setAdapter(newAdapter);\n  }\n};\nvar setAdapter = newAdapter => {\n  if (!newAdapter) {\n    throw new Error('No adapter provided when calling \"setAdapter\"');\n  }\n  hasConfiguredAdapter = true;\n  adapterStack.push(newAdapter);\n};\nvar removeAdapter = () => {\n  adapterStack.pop();\n};\nvar appendCss = function appendCss() {\n  return currentAdapter().appendCss(...arguments);\n};\nvar registerClassName = function registerClassName() {\n  return currentAdapter().registerClassName(...arguments);\n};\nvar registerComposition = function registerComposition() {\n  return currentAdapter().registerComposition(...arguments);\n};\nvar markCompositionUsed = function markCompositionUsed() {\n  return currentAdapter().markCompositionUsed(...arguments);\n};\nvar onBeginFileScope = function onBeginFileScope() {\n  var _currentAdapter$onBeg, _currentAdapter;\n  for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) {\n    props[_key] = arguments[_key];\n  }\n  return (_currentAdapter$onBeg = (_currentAdapter = currentAdapter()).onBeginFileScope) === null || _currentAdapter$onBeg === void 0 ? void 0 : _currentAdapter$onBeg.call(_currentAdapter, ...props);\n};\nvar onEndFileScope = function onEndFileScope() {\n  return currentAdapter().onEndFileScope(...arguments);\n};\nvar getIdentOption = function getIdentOption() {\n  var adapter = currentAdapter();\n\n  // Backwards compatibility with old versions of the integration package\n  if (!('getIdentOption' in adapter)) {\n    return process.env.NODE_ENV === 'production' ? 'short' : 'debug';\n  }\n  return adapter.getIdentOption(...arguments);\n};\n\nexport { appendCss, getIdentOption, markCompositionUsed, mockAdapter, onBeginFileScope, onEndFileScope, registerClassName, registerComposition, removeAdapter, setAdapter, setAdapterIfNotSet };\n"],"names":[],"mappings":"AAeA,IAAI,oBAAoB,GAAG,KAAK;AAC7B,IAAC,kBAAkB,GAAG,UAAU,IAAI;AACvC,EAAE,IAAI,CAAC,oBAAoB,EAAE;AAC7B,IAAI,UAAU,CAAC,UAAU,CAAC;AAC1B,EAAE;AACF;AACG,IAAC,UAAU,GAAG,UAAU,IAAI;AAC/B,EAAE,IAAI,CAAC,UAAU,EAAE;AACnB,IAAI,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC;AACpE,EAAE;AACF,EAAE,oBAAoB,GAAG,IAAI;AAE7B;;;;","x_google_ignoreList":[0]}