entangle-ui 0.3.0 → 0.4.0

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

@@ -1,8 +1,13 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useMemo, createContext, useId, useContext, useEffect } from 'react';
-import styled from '@emotion/styled';
+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 { processCss } from '../../../utils/styledUtils.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 = 
@@ -36,93 +41,8 @@ const FloatingManager = ({ baseZIndex = 100, children, }) => {
     return (jsx(FloatingManagerContext.Provider, { value: contextValue, children: children }));
 };
 FloatingManager.displayName = 'FloatingManager';
-// --- Styled Components ---
-const StyledPanel = styled.div `
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  background: ${({ theme }) => theme.colors.background.secondary};
-  border: 1px solid ${({ theme }) => theme.colors.border.default};
-  border-radius: ${({ theme }) => theme.borderRadius.md}px;
-  box-shadow: ${({ theme }) => theme.shadows.lg};
-  overflow: hidden;
-
-  &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
-  }
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 28px;
-  padding: 0 ${({ theme }) => theme.spacing.md}px;
-  background: ${({ theme }) => theme.colors.background.tertiary};
-  cursor: grab;
-  user-select: none;
-  flex-shrink: 0;
-
-  &:active {
-    cursor: grabbing;
-  }
-`;
-const StyledTitle = styled.span `
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
-  color: ${({ theme }) => theme.colors.text.primary};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const StyledHeaderActions = styled.div `
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing.xs}px;
-  margin-left: ${({ theme }) => theme.spacing.md}px;
-`;
-const StyledHeaderButton = styled.span `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: ${({ theme }) => theme.borderRadius.sm}px;
-  color: ${({ theme }) => theme.colors.text.secondary};
-  cursor: pointer;
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  line-height: 1;
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.surface.whiteOverlay};
-    color: ${({ theme }) => theme.colors.text.primary};
-  }
-`;
-const StyledCollapsible = styled.div `
-  ${({ $collapsed }) => $collapsed ? 'display: none;' : 'display: flex; flex: 1; min-height: 0;'}
-`;
-const StyledResizeHandle = styled.div `
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 12px;
-  height: 12px;
-  cursor: se-resize;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    width: 6px;
-    height: 6px;
-    border-right: 2px solid ${({ theme }) => theme.colors.text.muted};
-    border-bottom: 2px solid ${({ theme }) => theme.colors.text.muted};
-  }
-`;
 // --- FloatingPanel Component ---
-const FloatingPanel = ({ title, 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, css, ref: externalRef, ...rest }) => {
+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();
@@ -151,7 +71,7 @@ const FloatingPanel = ({ title, position: controlledPosition, defaultPosition =
             setInternalCollapsed(next);
         onCollapsedChange?.(next);
     }, [isCollapsed, controlledCollapsed, onCollapsedChange]);
-    // FloatingManager registration — use stable id, run once
+    // FloatingManager registration -- use stable id, run once
     const managerRef = useRef(manager);
     managerRef.current = manager;
     useEffect(() => {
@@ -221,14 +141,17 @@ const FloatingPanel = ({ title, position: controlledPosition, defaultPosition =
         target.addEventListener('pointermove', handleResizeMove);
         target.addEventListener('pointerup', handleResizeEnd);
     }, [currentSize, minWidth, minHeight, maxWidth, maxHeight, setSize]);
-    return (jsxs(StyledPanel, { ref: setPanelRef, className: className, "data-testid": testId, "$css": css, role: "dialog", "aria-modal": "false", "aria-label": title, tabIndex: -1, onPointerDown: handleBringToFront, style: {
+    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,
-            left: pos.x,
-            top: pos.y,
-            width: currentSize.width,
-            height: isCollapsed ? 'auto' : currentSize.height,
-            zIndex,
-        }, ...rest, children: [jsxs(StyledHeader, { onPointerDown: handleDragStart, "data-testid": "panel-header", children: [jsx(StyledTitle, { children: title }), jsxs(StyledHeaderActions, { children: [jsx(StyledHeaderButton, { role: "button", tabIndex: 0, onClick: toggleCollapse, "aria-label": isCollapsed ? 'Expand panel' : 'Collapse panel', children: isCollapsed ? '▼' : '▲' }), closable && onClose && (jsx(StyledHeaderButton, { role: "button", tabIndex: 0, onClick: onClose, "aria-label": "Close panel", children: "\u2715" }))] })] }), jsx(StyledCollapsible, { "$collapsed": isCollapsed, children: jsx(ScrollArea, { direction: "both", scrollbarVisibility: "auto", scrollbarWidth: 5, autoFill: true, children: children }) }), resizable && !isCollapsed && (jsx(StyledResizeHandle, { onPointerDown: handleResizeStart, "data-testid": "resize-handle" }))] }));
+            ...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';
 

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"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

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

@@ -1,7 +1,8 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useMemo, useCallback, createContext, useEffect, useContext, useId } from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+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({
@@ -14,131 +15,6 @@ const MenuBarContext = /*#__PURE__*/ createContext({
     menuIds: [],
 });
 const useMenuBar = () => useContext(MenuBarContext);
-// --- Styled Components ---
-const StyledMenuBar = styled.div `
-  display: flex;
-  align-items: center;
-  height: ${({ $size, theme }) => $size === 'sm' ? '24px' : `${theme.shell.menuBar.height}px`};
-  background: ${({ theme }) => theme.shell.menuBar.bg};
-  color: ${({ theme }) => theme.shell.menuBar.text};
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
-  padding: 0 ${({ theme }) => theme.spacing.sm}px;
-  user-select: none;
-  flex-shrink: 0;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledMenuContainer = styled.div `
-  position: relative;
-  height: 100%;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledTrigger = styled.button `
-  display: inline-flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 ${({ theme }) => theme.spacing.md}px;
-  border: none;
-  background: ${({ $active, theme }) => $active ? theme.shell.menuBar.activeBg : 'transparent'};
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  position: relative;
-
-  &:hover {
-    background: ${({ $active, theme }) => $active ? theme.shell.menuBar.activeBg : theme.shell.menuBar.hoverBg};
-  }
-
-  &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
-    outline-offset: -1px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-`;
-const StyledDropdown = styled.div `
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 200px;
-  background: ${({ theme }) => theme.colors.background.elevated};
-  border: 1px solid ${({ theme }) => theme.colors.border.default};
-  border-radius: ${({ theme }) => theme.borderRadius.md}px;
-  box-shadow: ${({ theme }) => theme.shadows.lg};
-  padding: ${({ theme }) => theme.spacing.xs}px 0;
-  z-index: ${({ theme }) => theme.zIndex.dropdown};
-`;
-const StyledItem = styled.button `
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: ${({ theme }) => theme.spacing.sm}px
-    ${({ theme }) => theme.spacing.lg}px;
-  border: none;
-  background: transparent;
-  color: ${({ theme }) => theme.colors.text.primary};
-  font: inherit;
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  cursor: pointer;
-  white-space: nowrap;
-  gap: ${({ theme }) => theme.spacing.md}px;
-  text-align: left;
-
-  &:hover:not(:disabled) {
-    background: ${({ theme }) => theme.colors.surface.hover};
-  }
-
-  &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
-    outline-offset: -1px;
-    background: ${({ theme }) => theme.colors.surface.hover};
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledShortcut = styled.span `
-  margin-left: auto;
-  color: ${({ theme }) => theme.shell.menuBar.shortcutText};
-  font-size: ${({ theme }) => theme.typography.fontSize.xs}px;
-`;
-const StyledSeparator = styled.div `
-  height: 1px;
-  margin: ${({ theme }) => theme.spacing.xs}px 0;
-  background: ${({ theme }) => theme.colors.border.default};
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledSubTrigger = styled(StyledItem) `
-  justify-content: space-between;
-`;
-const StyledSubDropdown = styled.div `
-  position: absolute;
-  top: -${({ theme }) => theme.spacing.xs}px;
-  left: 100%;
-  min-width: 180px;
-  background: ${({ theme }) => theme.colors.background.elevated};
-  border: 1px solid ${({ theme }) => theme.colors.border.default};
-  border-radius: ${({ theme }) => theme.borderRadius.md}px;
-  box-shadow: ${({ theme }) => theme.shadows.lg};
-  padding: ${({ theme }) => theme.spacing.xs}px 0;
-  z-index: ${({ theme }) => theme.zIndex.dropdown + 1};
-`;
-const StyledSubContainer = styled.div `
-  position: relative;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
 const SUBMENU_CLOSE_DELAY = 150;
 const MENU_ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
 const ChevronRight = () => (jsx("span", { style: {
@@ -146,7 +22,7 @@ const ChevronRight = () => (jsx("span", { style: {
         lineHeight: 1,
     }, children: "\u25B6" }));
 // --- Sub-components ---
-const MenuBarItem = ({ onClick, shortcut, disabled = false, icon, children, className, style, testId, css, ref, ...rest }) => {
+const MenuBarItem = ({ onClick, shortcut: shortcutText, disabled = false, icon, children, className, style, testId, ref, ...rest }) => {
     const { setOpenMenuId } = useMenuBar();
     const handleClick = useCallback(() => {
         if (onClick) {
@@ -154,10 +30,10 @@ const MenuBarItem = ({ onClick, shortcut, disabled = false, icon, children, clas
             setOpenMenuId(null);
         }
     }, [onClick, setOpenMenuId]);
-    return (jsxs(StyledItem, { role: "menuitem", onClick: handleClick, disabled: disabled, className: className, style: style, "data-testid": testId, "$css": css, ref: ref, type: "button", tabIndex: -1, ...rest, children: [icon && jsx("span", { children: icon }), jsx("span", { children: children }), shortcut && jsx(StyledShortcut, { children: shortcut })] }));
+    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, css, ref, ...rest }) => {
+const MenuBarSub = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
     const [open, setOpen] = useState(false);
     const closeTimer = useRef(null);
     const handleEnter = useCallback(() => {
@@ -177,15 +53,15 @@ const MenuBarSub = ({ label, children, disabled = false, className, style, testI
                 clearTimeout(closeTimer.current);
         };
     }, []);
-    return (jsxs(StyledSubContainer, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, onMouseEnter: handleEnter, onMouseLeave: handleLeave, ...rest, children: [jsxs(StyledSubTrigger, { role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, disabled: disabled, type: "button", tabIndex: -1, "$css": css, children: [jsx("span", { children: label }), jsx(ChevronRight, {})] }), open && jsx(StyledSubDropdown, { role: "menu", children: children })] }));
+    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, css, ref, ...rest }) => {
-    return (jsx(StyledSeparator, { role: "separator", className: className, style: style, "data-testid": testId, "$css": css, ref: ref, ...rest }));
+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, css, ref, ...rest }) => {
+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);
@@ -255,11 +131,11 @@ const MenuBarMenu = ({ label, children, disabled = false, className, style, test
         document.addEventListener('mousedown', handleOutsideClick);
         return () => document.removeEventListener('mousedown', handleOutsideClick);
     }, [isOpen, setOpenMenuId]);
-    return (jsxs(StyledMenuContainer, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: [jsx(StyledTrigger, { ref: triggerRef, "$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(StyledDropdown, { ref: dropdownRef, role: "menu", "aria-label": label, onKeyDown: handleDropdownKeyDown, style: { top: `calc(100% + ${menuOffset}px)` }, children: children }))] }));
+    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, css, ref: externalRef, ...rest }) => {
+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);
@@ -296,7 +172,6 @@ const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style,
             triggers[next]?.focus();
             // If menu is open, switch to next menu
             if (openMenuId !== null) {
-                // Get the menu id from the trigger's parent — let the hover handler do its job
                 triggers[next]?.click();
             }
         }
@@ -325,7 +200,7 @@ const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style,
         registerMenu,
         unregisterMenu,
     ]);
-    return (jsx(MenuBarContext.Provider, { value: contextValue, children: jsx(StyledMenuBar, { ref: setBarRef, "$size": $size, className: className, style: style, "data-testid": testId, "$css": css, role: "menubar", onKeyDown: handleBarKeyDown, tabIndex: 0, ...rest, children: children }) }));
+    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 ---

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

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"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

@@ -1,127 +1,31 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useContext, createContext, useMemo } from 'react';
-import styled from '@emotion/styled';
-import { processCss } from '../../../utils/styledUtils.js';
+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);
-// --- Styled Components ---
-const StyledStatusBar = styled.div `
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: ${({ $size, theme }) => $size === 'sm' ? `${theme.shell.statusBar.height}px` : '26px'};
-  background: ${({ $variant, theme }) => {
-    switch ($variant) {
-        case 'error':
-            return theme.colors.accent.error;
-        case 'accent':
-            return theme.shell.statusBar.bg;
-        default:
-            return theme.shell.statusBar.bg;
-    }
-}};
-  color: ${({ theme }) => theme.shell.statusBar.text};
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
-  padding: 0 ${({ theme }) => theme.spacing.md}px;
-  overflow: hidden;
-  flex-shrink: 0;
-  user-select: none;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledSection = styled.div `
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing.sm}px;
-  flex: ${({ $side }) => ($side === 'left' ? '1 1 auto' : '0 0 auto')};
-  justify-content: ${({ $side }) => $side === 'left' ? 'flex-start' : 'flex-end'};
-  overflow: hidden;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const itemStyles = (props) => `
-  display: inline-flex;
-  align-items: center;
-  gap: ${props.theme.spacing.sm}px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  padding: 0 ${props.theme.spacing.sm}px;
-  height: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1;
-  position: relative;
-`;
-const StyledItemButton = styled.button `
-  ${props => itemStyles(props)}
-  cursor: pointer;
-  border-radius: ${({ theme }) => theme.borderRadius.sm}px;
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.surface.whiteOverlay};
-  }
-
-  &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
-    outline-offset: -1px;
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-    &:hover {
-      background: transparent;
-    }
-  }
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledItemSpan = styled.span `
-  ${props => itemStyles(props)}
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledBadge = styled.span `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: ${({ $dot }) => ($dot ? '6px' : '14px')};
-  height: ${({ $dot }) => ($dot ? '6px' : '14px')};
-  border-radius: ${({ $dot }) => ($dot ? '50%' : '7px')};
-  background: ${({ theme }) => theme.colors.accent.warning};
-  color: ${({ theme }) => theme.colors.text.primary};
-  font-size: ${({ theme }) => theme.typography.fontSize.xxs}px;
-  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
-  padding: ${({ $dot }) => ($dot ? '0' : '0 3px')};
-  line-height: 1;
-`;
 // --- Sub-components ---
-const StatusBarSection = /*#__PURE__*/ React.memo(({ $side = 'left', children, className, style, testId, css, ref, ...rest }) => {
-    return (jsx(StyledSection, { ref: ref, "$side": $side, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: children }));
+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, disabled = false, className, style, testId, css, ref, ...rest }) => {
+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 }), badge !== undefined && badge !== false && (jsx(StyledBadge, { "$dot": badge === true, children: typeof badge === 'number' ? badge : null }))] }));
+    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(StyledItemButton, { onClick: onClick, title: title, disabled: disabled, className: className, style: style, "data-testid": testId, "$css": css, ref: ref, type: "button", ...rest, children: content }));
+        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(StyledItemSpan, { title: title, className: className, style: style, "data-testid": testId, "$css": css, ref: ref, ...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, css, ref, ...rest }) => {
+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(StyledStatusBar, { ref: ref, "$variant": $variant, "$size": $size, className: className, style: style, "data-testid": testId, "$css": css, role: "status", "aria-live": "polite", ...rest, children: children }) }));
+    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 ---