entangle-ui 0.11.0 → 0.13.0

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

@@ -1,16 +1,17 @@
-import './../../../assets/src/components/shell/MenuBar/MenuBar.css.ts.vanilla-TgPcl4yA.css';
+import './../../../assets/src/components/shell/MenuBar/MenuBar.css.ts.vanilla-Dt3w4f-q.css';
 import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
 
 var dropdown = 'MenuBar_dropdown__1h81mxv7';
+var indicatorSlot = 'MenuBar_indicatorSlot__1h81mxva';
 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 separator = 'MenuBar_separator__1h81mxvb';
 var shortcut = 'MenuBar_shortcut__1h81mxv9';
-var subContainer = 'MenuBar_subContainer__1h81mxvd';
-var subDropdown = 'MenuBar_subDropdown__1h81mxvc';
-var subTrigger = 'MenuBar_subTrigger__1h81mxvb MenuBar_menuItem__1h81mxv8';
+var subContainer = 'MenuBar_subContainer__1h81mxve';
+var subDropdown = 'MenuBar_subDropdown__1h81mxvd';
+var subTrigger = 'MenuBar_subTrigger__1h81mxvc 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 };
+export { dropdown, indicatorSlot, menuBarRoot, menuContainer, menuItem, separator, shortcut, subContainer, subDropdown, subTrigger, trigger };
 //# sourceMappingURL=MenuBar.css.js.map

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

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

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useMemo, useCallback, useEffect, useId, createContext, useContext } from 'react';
+import { useState, useRef, useMemo, useCallback, useEffect, useContext, useId, createContext } from 'react';
+import { CheckIcon } from '../../Icons/CheckIcon.js';
+import { CircleIcon } from '../../Icons/CircleIcon.js';
 import { cx } from '../../../utils/cx.js';
-import { menuBarRoot, separator, subTrigger, subDropdown, subContainer, shortcut, menuItem, trigger, dropdown, menuContainer } from './MenuBar.css.js';
+import { menuBarRoot, separator, subTrigger, subDropdown, subContainer, indicatorSlot, shortcut, menuItem, trigger, dropdown, menuContainer } from './MenuBar.css.js';
 
 // --- Context ---
 const MenuBarContext = /*#__PURE__*/ createContext({
@@ -16,7 +18,7 @@ const MenuBarContext = /*#__PURE__*/ createContext({
 });
 const useMenuBar = () => useContext(MenuBarContext);
 const SUBMENU_CLOSE_DELAY = 150;
-const MENU_ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
+const MENU_ITEM_SELECTOR = '[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled), [role="menuitemradio"]:not(:disabled)';
 const ChevronRight = () => (jsx("span", { style: {
         fontSize: '8px',
         lineHeight: 1,
@@ -33,6 +35,50 @@ const MenuBarItem = ({ onClick, shortcut: shortcutText, disabled = false, icon,
     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';
+// --- Checkable items (checkbox / radio) ---
+const MenuBarRadioContext = 
+/*#__PURE__*/ createContext(null);
+const MenuBarCheckboxItem = ({ checked, defaultChecked = false, onCheckedChange, shortcut: shortcutText, indicator = jsx(CheckIcon, { size: "sm" }), closeOnClick = false, disabled = false, children, className, style, testId, ref, ...rest }) => {
+    const { setOpenMenuId } = useMenuBar();
+    const [internalChecked, setInternalChecked] = useState(defaultChecked);
+    const isControlled = checked !== undefined;
+    const isChecked = isControlled ? checked : internalChecked;
+    const handleClick = useCallback(() => {
+        const next = !isChecked;
+        if (!isControlled)
+            setInternalChecked(next);
+        onCheckedChange?.(next);
+        if (closeOnClick)
+            setOpenMenuId(null);
+    }, [isChecked, isControlled, onCheckedChange, closeOnClick, setOpenMenuId]);
+    return (jsxs("button", { role: "menuitemcheckbox", "aria-checked": isChecked, onClick: handleClick, disabled: disabled, className: cx(menuItem, className), style: style, "data-testid": testId, ref: ref, type: "button", tabIndex: -1, ...rest, children: [jsx("span", { className: indicatorSlot, "aria-hidden": "true", children: isChecked ? indicator : null }), jsx("span", { children: children }), shortcutText && jsx("span", { className: shortcut, children: shortcutText })] }));
+};
+MenuBarCheckboxItem.displayName = 'MenuBar.CheckboxItem';
+const MenuBarRadioGroup = ({ value, defaultValue, onValueChange, children, className, style, testId, ref, ...rest }) => {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : internalValue;
+    const setValue = useCallback((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onValueChange?.(next);
+    }, [isControlled, onValueChange]);
+    const contextValue = useMemo(() => ({ value: selectedValue, setValue }), [selectedValue, setValue]);
+    return (jsx(MenuBarRadioContext.Provider, { value: contextValue, children: jsx("div", { role: "group", className: className, style: style, "data-testid": testId, ref: ref, ...rest, children: children }) }));
+};
+MenuBarRadioGroup.displayName = 'MenuBar.RadioGroup';
+const MenuBarRadioItem = ({ value, shortcut: shortcutText, indicator = jsx(CircleIcon, { size: "sm" }), closeOnClick = false, disabled = false, children, className, style, testId, ref, ...rest }) => {
+    const { setOpenMenuId } = useMenuBar();
+    const group = useContext(MenuBarRadioContext);
+    const isChecked = group?.value === value;
+    const handleClick = useCallback(() => {
+        group?.setValue(value);
+        if (closeOnClick)
+            setOpenMenuId(null);
+    }, [group, value, closeOnClick, setOpenMenuId]);
+    return (jsxs("button", { role: "menuitemradio", "aria-checked": isChecked, onClick: handleClick, disabled: disabled, className: cx(menuItem, className), style: style, "data-testid": testId, ref: ref, type: "button", tabIndex: -1, ...rest, children: [jsx("span", { className: indicatorSlot, "aria-hidden": "true", children: isChecked ? indicator : null }), jsx("span", { children: children }), shortcutText && jsx("span", { className: shortcut, children: shortcutText })] }));
+};
+MenuBarRadioItem.displayName = 'MenuBar.RadioItem';
 const MenuBarSub = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
     const { menuOffset } = useMenuBar();
     const [open, setOpen] = useState(false);
@@ -214,6 +260,9 @@ MenuBarRoot.displayName = 'MenuBar';
 const MenuBar = /*#__PURE__*/ Object.assign(MenuBarRoot, {
     Menu: MenuBarMenu,
     Item: MenuBarItem,
+    CheckboxItem: MenuBarCheckboxItem,
+    RadioGroup: MenuBarRadioGroup,
+    RadioItem: MenuBarRadioItem,
     Sub: MenuBarSub,
     Separator: MenuBarSeparator,
 });

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

@@ -1 +1 @@
-{"version":3,"file":"MenuBar.js","sources":["src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useId,\n  KeyboardEvent,\n  useMemo,\n} from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  menuBarRoot,\n  menuContainer,\n  trigger,\n  dropdown,\n  menuItem,\n  shortcut,\n  separator,\n  subTrigger,\n  subDropdown,\n  subContainer,\n} from './MenuBar.css';\n\nimport type {\n  MenuBarProps,\n  MenuBarMenuProps,\n  MenuBarItemProps,\n  MenuBarSubProps,\n  MenuBarSeparatorProps,\n  MenuBarContextValue,\n} from './MenuBar.types';\n\n// --- Context ---\n\nconst MenuBarContext = /*#__PURE__*/ createContext<MenuBarContextValue>({\n  size: 'md',\n  menuOffset: 2,\n  openMenuId: null,\n  setOpenMenuId: () => {},\n  registerMenu: () => {},\n  unregisterMenu: () => {},\n  menuIds: [],\n});\n\nconst useMenuBar = () => useContext(MenuBarContext);\n\nconst SUBMENU_CLOSE_DELAY = 150;\n\nconst MENU_ITEM_SELECTOR = '[role=\"menuitem\"]:not(:disabled)';\n\nconst ChevronRight = () => (\n  <span\n    style={{\n      fontSize: '8px',\n      lineHeight: 1,\n    }}\n  >\n    &#x25B6;\n  </span>\n);\n\n// --- Sub-components ---\n\nconst MenuBarItem: React.FC<MenuBarItemProps> = ({\n  onClick,\n  shortcut: shortcutText,\n  disabled = false,\n  icon,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { setOpenMenuId } = useMenuBar();\n\n  const handleClick = useCallback(() => {\n    if (onClick) {\n      onClick();\n      setOpenMenuId(null);\n    }\n  }, [onClick, setOpenMenuId]);\n\n  return (\n    <button\n      role=\"menuitem\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={cx(menuItem, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      type=\"button\"\n      tabIndex={-1}\n      {...rest}\n    >\n      {icon && <span>{icon}</span>}\n      <span>{children}</span>\n      {shortcutText && <span className={shortcut}>{shortcutText}</span>}\n    </button>\n  );\n};\n\nMenuBarItem.displayName = 'MenuBar.Item';\n\nconst MenuBarSub: React.FC<MenuBarSubProps> = ({\n  label,\n  children,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { menuOffset } = useMenuBar();\n  const [open, setOpen] = useState(false);\n  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleEnter = useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current);\n      closeTimer.current = null;\n    }\n    if (!disabled) setOpen(true);\n  }, [disabled]);\n\n  const handleLeave = useCallback(() => {\n    closeTimer.current = setTimeout(() => {\n      setOpen(false);\n    }, SUBMENU_CLOSE_DELAY);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (closeTimer.current) clearTimeout(closeTimer.current);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(subContainer, className)}\n      style={style}\n      data-testid={testId}\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      {...rest}\n    >\n      <button\n        className={subTrigger}\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded={open}\n        disabled={disabled}\n        type=\"button\"\n        tabIndex={-1}\n      >\n        <span>{label}</span>\n        <ChevronRight />\n      </button>\n      {open && (\n        <div\n          className={subDropdown}\n          role=\"menu\"\n          style={{ left: `calc(100% + ${menuOffset}px)` }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nMenuBarSub.displayName = 'MenuBar.Sub';\n\nconst MenuBarSeparator: React.FC<MenuBarSeparatorProps> = ({\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  return (\n    <div\n      role=\"separator\"\n      className={cx(separator, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      {...rest}\n    />\n  );\n};\n\nMenuBarSeparator.displayName = 'MenuBar.Separator';\n\n// --- MenuBarMenu (top-level dropdown trigger) ---\n\nconst MenuBarMenu: React.FC<MenuBarMenuProps> = ({\n  label,\n  children,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const menuId = useId();\n  const {\n    openMenuId,\n    setOpenMenuId,\n    registerMenu,\n    unregisterMenu,\n    menuOffset,\n  } = useMenuBar();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const isOpen = openMenuId === menuId;\n\n  useEffect(() => {\n    registerMenu(menuId);\n    return () => {\n      unregisterMenu(menuId);\n    };\n  }, [menuId, registerMenu, unregisterMenu]);\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    setOpenMenuId(isOpen ? null : menuId);\n  }, [disabled, isOpen, menuId, setOpenMenuId]);\n\n  const handleMouseEnter = useCallback(() => {\n    // Open on hover only when another menu is already open\n    if (openMenuId !== null && openMenuId !== menuId && !disabled) {\n      setOpenMenuId(menuId);\n    }\n  }, [openMenuId, menuId, disabled, setOpenMenuId]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setOpenMenuId(menuId);\n        // Focus first item in dropdown after open\n        setTimeout(() => {\n          const firstItem = dropdownRef.current?.querySelector(\n            MENU_ITEM_SELECTOR\n          ) as HTMLElement | null;\n          firstItem?.focus();\n        }, 0);\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpenMenuId(null);\n        triggerRef.current?.focus();\n      }\n    },\n    [menuId, setOpenMenuId]\n  );\n\n  const handleDropdownKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const items = Array.from(\n        dropdownRef.current?.querySelectorAll<HTMLElement>(\n          MENU_ITEM_SELECTOR\n        ) ?? []\n      );\n      const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n        items[next]?.focus();\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpenMenuId(null);\n        triggerRef.current?.focus();\n      }\n    },\n    [setOpenMenuId]\n  );\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleOutsideClick = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        !triggerRef.current?.contains(target) &&\n        !dropdownRef.current?.contains(target)\n      ) {\n        setOpenMenuId(null);\n      }\n    };\n\n    document.addEventListener('mousedown', handleOutsideClick);\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [isOpen, setOpenMenuId]);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(menuContainer, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <button\n        ref={triggerRef}\n        className={trigger({ active: isOpen })}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        type=\"button\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        tabIndex={-1}\n      >\n        {label}\n      </button>\n      {isOpen && (\n        <div\n          ref={dropdownRef}\n          className={dropdown}\n          role=\"menu\"\n          aria-label={label}\n          // Focusable programmatically so the open menu can receive focus and\n          // handle arrow-key navigation across its items.\n          tabIndex={-1}\n          onKeyDown={handleDropdownKeyDown}\n          style={{ top: `calc(100% + ${menuOffset}px)` }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nMenuBarMenu.displayName = 'MenuBar.Menu';\n\n// --- Root Component ---\n\nconst MenuBarRoot: React.FC<MenuBarProps> = ({\n  size = 'md',\n  menuOffset = 2,\n  children,\n\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const [openMenuId, setOpenMenuId] = useState<string | null>(null);\n  // Registered child menu ids, kept in state so the context value stays\n  // reactive (previously a ref + forceUpdate, which read the ref during render).\n  const [menuIds, setMenuIds] = useState<string[]>([]);\n  const safeMenuOffset = Math.max(0, menuOffset);\n  const barRef = useRef<HTMLDivElement>(null);\n  const setBarRef = useMemo(\n    () => (node: HTMLDivElement | null) => {\n      barRef.current = node;\n      if (typeof externalRef === 'function') {\n        externalRef(node);\n      } else if (externalRef && typeof externalRef === 'object') {\n        externalRef.current = node;\n      }\n    },\n    [externalRef]\n  );\n\n  const registerMenu = useCallback((id: string) => {\n    setMenuIds(prev => (prev.includes(id) ? prev : [...prev, id]));\n  }, []);\n\n  const unregisterMenu = useCallback((id: string) => {\n    setMenuIds(prev => prev.filter(m => m !== id));\n  }, []);\n\n  const handleBarKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!barRef.current) return;\n\n      const triggers = Array.from(\n        barRef.current.querySelectorAll<HTMLElement>(\n          ':scope > div > [role=\"menuitem\"]'\n        )\n      );\n      const currentIndex = triggers.indexOf(\n        document.activeElement as HTMLElement\n      );\n\n      if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        const next = currentIndex + 1 < triggers.length ? currentIndex + 1 : 0;\n        triggers[next]?.focus();\n        // If menu is open, switch to next menu\n        if (openMenuId !== null) {\n          triggers[next]?.click();\n        }\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : triggers.length - 1;\n        triggers[prev]?.focus();\n        if (openMenuId !== null) {\n          triggers[prev]?.click();\n        }\n      }\n    },\n    [openMenuId]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      size,\n      menuOffset: safeMenuOffset,\n      openMenuId,\n      setOpenMenuId,\n      registerMenu,\n      unregisterMenu,\n      menuIds,\n    }),\n    [\n      size,\n      safeMenuOffset,\n      openMenuId,\n      setOpenMenuId,\n      registerMenu,\n      unregisterMenu,\n      menuIds,\n    ]\n  );\n\n  return (\n    <MenuBarContext.Provider value={contextValue}>\n      <div\n        ref={setBarRef}\n        className={cx(menuBarRoot({ size }), className)}\n        style={style}\n        data-testid={testId}\n        role=\"menubar\"\n        onKeyDown={handleBarKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {children}\n      </div>\n    </MenuBarContext.Provider>\n  );\n};\n\nMenuBarRoot.displayName = 'MenuBar';\n\n// --- Compound Component ---\n\nexport const MenuBar = /*#__PURE__*/ Object.assign(MenuBarRoot, {\n  Menu: MenuBarMenu,\n  Item: MenuBarItem,\n  Sub: MenuBarSub,\n  Separator: MenuBarSeparator,\n});\n"],"names":[],"mappings":";;;;;;AAsCA;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;AAWE;;AAEA;AAEA;AACE;AACE;AACA;;AAEF;;AACF;AAEA;AACE;;;;;AAMA;;AAC0B;AAC1B;;;AAoCJ;AAEA;AAEA;AAOE;AAUF;AAEA;AAEA;AAEA;AAWE;AACA;AAOA;AACA;AACA;;;AAIE;;AAEA;;AAGF;AACE;;;;AAIF;;;;;;AAOA;AAEI;;;;;;;;;AAWA;;;AAGE;;AAEJ;AAIF;AAEI;;AAOA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;;AAGL;;AAEJ;;;AAMA;;AAEA;AACE;;;;;AAOF;AAEA;AACA;AACE;AACF;AACF;AAEA;;;;AAwCF;AAEA;AAEA;AAEA;;;;;;AAgBE;;AAGI;AACA;;;AAEO;AACL;;AAEJ;AAIF;;;AAIA;AACE;;AAGF;;;AAII;;AASA;;AAEE;AACA;;AAEA;AACE;;;AAEG;;;AAIL;AACA;AACE;;;AAGN;AAIF;;AAGI;;;;;;AAMD;;;;;;;;AASA;;AAmBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"MenuBar.js","sources":["src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext,\n  useContext,\n  useState,\n  useCallback,\n  useRef,\n  useEffect,\n  useId,\n  KeyboardEvent,\n  useMemo,\n} from 'react';\n\nimport { CheckIcon } from '@/components/Icons/CheckIcon';\nimport { CircleIcon } from '@/components/Icons/CircleIcon';\nimport { cx } from '@/utils/cx';\n\nimport {\n  menuBarRoot,\n  menuContainer,\n  trigger,\n  dropdown,\n  menuItem,\n  shortcut,\n  separator,\n  subTrigger,\n  subDropdown,\n  subContainer,\n  indicatorSlot,\n} from './MenuBar.css';\n\nimport type {\n  MenuBarProps,\n  MenuBarMenuProps,\n  MenuBarItemProps,\n  MenuBarSubProps,\n  MenuBarSeparatorProps,\n  MenuBarContextValue,\n  MenuBarCheckboxItemProps,\n  MenuBarRadioGroupProps,\n  MenuBarRadioItemProps,\n  MenuBarRadioGroupContextValue,\n} from './MenuBar.types';\n\n// --- Context ---\n\nconst MenuBarContext = /*#__PURE__*/ createContext<MenuBarContextValue>({\n  size: 'md',\n  menuOffset: 2,\n  openMenuId: null,\n  setOpenMenuId: () => {},\n  registerMenu: () => {},\n  unregisterMenu: () => {},\n  menuIds: [],\n});\n\nconst useMenuBar = () => useContext(MenuBarContext);\n\nconst SUBMENU_CLOSE_DELAY = 150;\n\nconst MENU_ITEM_SELECTOR =\n  '[role=\"menuitem\"]:not(:disabled), [role=\"menuitemcheckbox\"]:not(:disabled), [role=\"menuitemradio\"]:not(:disabled)';\n\nconst ChevronRight = () => (\n  <span\n    style={{\n      fontSize: '8px',\n      lineHeight: 1,\n    }}\n  >\n    &#x25B6;\n  </span>\n);\n\n// --- Sub-components ---\n\nconst MenuBarItem: React.FC<MenuBarItemProps> = ({\n  onClick,\n  shortcut: shortcutText,\n  disabled = false,\n  icon,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { setOpenMenuId } = useMenuBar();\n\n  const handleClick = useCallback(() => {\n    if (onClick) {\n      onClick();\n      setOpenMenuId(null);\n    }\n  }, [onClick, setOpenMenuId]);\n\n  return (\n    <button\n      role=\"menuitem\"\n      onClick={handleClick}\n      disabled={disabled}\n      className={cx(menuItem, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      type=\"button\"\n      tabIndex={-1}\n      {...rest}\n    >\n      {icon && <span>{icon}</span>}\n      <span>{children}</span>\n      {shortcutText && <span className={shortcut}>{shortcutText}</span>}\n    </button>\n  );\n};\n\nMenuBarItem.displayName = 'MenuBar.Item';\n\n// --- Checkable items (checkbox / radio) ---\n\nconst MenuBarRadioContext =\n  /*#__PURE__*/ createContext<MenuBarRadioGroupContextValue | null>(null);\n\nconst MenuBarCheckboxItem: React.FC<MenuBarCheckboxItemProps> = ({\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  shortcut: shortcutText,\n  indicator = <CheckIcon size=\"sm\" />,\n  closeOnClick = false,\n  disabled = false,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { setOpenMenuId } = useMenuBar();\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const isControlled = checked !== undefined;\n  const isChecked = isControlled ? checked : internalChecked;\n\n  const handleClick = useCallback(() => {\n    const next = !isChecked;\n    if (!isControlled) setInternalChecked(next);\n    onCheckedChange?.(next);\n    if (closeOnClick) setOpenMenuId(null);\n  }, [isChecked, isControlled, onCheckedChange, closeOnClick, setOpenMenuId]);\n\n  return (\n    <button\n      role=\"menuitemcheckbox\"\n      aria-checked={isChecked}\n      onClick={handleClick}\n      disabled={disabled}\n      className={cx(menuItem, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      type=\"button\"\n      tabIndex={-1}\n      {...rest}\n    >\n      <span className={indicatorSlot} aria-hidden=\"true\">\n        {isChecked ? indicator : null}\n      </span>\n      <span>{children}</span>\n      {shortcutText && <span className={shortcut}>{shortcutText}</span>}\n    </button>\n  );\n};\n\nMenuBarCheckboxItem.displayName = 'MenuBar.CheckboxItem';\n\nconst MenuBarRadioGroup: React.FC<MenuBarRadioGroupProps> = ({\n  value,\n  defaultValue,\n  onValueChange,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const [internalValue, setInternalValue] = useState<string | undefined>(\n    defaultValue\n  );\n  const isControlled = value !== undefined;\n  const selectedValue = isControlled ? value : internalValue;\n\n  const setValue = useCallback(\n    (next: string) => {\n      if (!isControlled) setInternalValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange]\n  );\n\n  const contextValue = useMemo(\n    () => ({ value: selectedValue, setValue }),\n    [selectedValue, setValue]\n  );\n\n  return (\n    <MenuBarRadioContext.Provider value={contextValue}>\n      <div\n        role=\"group\"\n        className={className}\n        style={style}\n        data-testid={testId}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    </MenuBarRadioContext.Provider>\n  );\n};\n\nMenuBarRadioGroup.displayName = 'MenuBar.RadioGroup';\n\nconst MenuBarRadioItem: React.FC<MenuBarRadioItemProps> = ({\n  value,\n  shortcut: shortcutText,\n  indicator = <CircleIcon size=\"sm\" />,\n  closeOnClick = false,\n  disabled = false,\n  children,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { setOpenMenuId } = useMenuBar();\n  const group = useContext(MenuBarRadioContext);\n  const isChecked = group?.value === value;\n\n  const handleClick = useCallback(() => {\n    group?.setValue(value);\n    if (closeOnClick) setOpenMenuId(null);\n  }, [group, value, closeOnClick, setOpenMenuId]);\n\n  return (\n    <button\n      role=\"menuitemradio\"\n      aria-checked={isChecked}\n      onClick={handleClick}\n      disabled={disabled}\n      className={cx(menuItem, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      type=\"button\"\n      tabIndex={-1}\n      {...rest}\n    >\n      <span className={indicatorSlot} aria-hidden=\"true\">\n        {isChecked ? indicator : null}\n      </span>\n      <span>{children}</span>\n      {shortcutText && <span className={shortcut}>{shortcutText}</span>}\n    </button>\n  );\n};\n\nMenuBarRadioItem.displayName = 'MenuBar.RadioItem';\n\nconst MenuBarSub: React.FC<MenuBarSubProps> = ({\n  label,\n  children,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const { menuOffset } = useMenuBar();\n  const [open, setOpen] = useState(false);\n  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleEnter = useCallback(() => {\n    if (closeTimer.current) {\n      clearTimeout(closeTimer.current);\n      closeTimer.current = null;\n    }\n    if (!disabled) setOpen(true);\n  }, [disabled]);\n\n  const handleLeave = useCallback(() => {\n    closeTimer.current = setTimeout(() => {\n      setOpen(false);\n    }, SUBMENU_CLOSE_DELAY);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (closeTimer.current) clearTimeout(closeTimer.current);\n    };\n  }, []);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(subContainer, className)}\n      style={style}\n      data-testid={testId}\n      onMouseEnter={handleEnter}\n      onMouseLeave={handleLeave}\n      {...rest}\n    >\n      <button\n        className={subTrigger}\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded={open}\n        disabled={disabled}\n        type=\"button\"\n        tabIndex={-1}\n      >\n        <span>{label}</span>\n        <ChevronRight />\n      </button>\n      {open && (\n        <div\n          className={subDropdown}\n          role=\"menu\"\n          style={{ left: `calc(100% + ${menuOffset}px)` }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nMenuBarSub.displayName = 'MenuBar.Sub';\n\nconst MenuBarSeparator: React.FC<MenuBarSeparatorProps> = ({\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  return (\n    <div\n      role=\"separator\"\n      className={cx(separator, className)}\n      style={style}\n      data-testid={testId}\n      ref={ref}\n      {...rest}\n    />\n  );\n};\n\nMenuBarSeparator.displayName = 'MenuBar.Separator';\n\n// --- MenuBarMenu (top-level dropdown trigger) ---\n\nconst MenuBarMenu: React.FC<MenuBarMenuProps> = ({\n  label,\n  children,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const menuId = useId();\n  const {\n    openMenuId,\n    setOpenMenuId,\n    registerMenu,\n    unregisterMenu,\n    menuOffset,\n  } = useMenuBar();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const isOpen = openMenuId === menuId;\n\n  useEffect(() => {\n    registerMenu(menuId);\n    return () => {\n      unregisterMenu(menuId);\n    };\n  }, [menuId, registerMenu, unregisterMenu]);\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n    setOpenMenuId(isOpen ? null : menuId);\n  }, [disabled, isOpen, menuId, setOpenMenuId]);\n\n  const handleMouseEnter = useCallback(() => {\n    // Open on hover only when another menu is already open\n    if (openMenuId !== null && openMenuId !== menuId && !disabled) {\n      setOpenMenuId(menuId);\n    }\n  }, [openMenuId, menuId, disabled, setOpenMenuId]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setOpenMenuId(menuId);\n        // Focus first item in dropdown after open\n        setTimeout(() => {\n          const firstItem = dropdownRef.current?.querySelector(\n            MENU_ITEM_SELECTOR\n          ) as HTMLElement | null;\n          firstItem?.focus();\n        }, 0);\n      }\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpenMenuId(null);\n        triggerRef.current?.focus();\n      }\n    },\n    [menuId, setOpenMenuId]\n  );\n\n  const handleDropdownKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const items = Array.from(\n        dropdownRef.current?.querySelectorAll<HTMLElement>(\n          MENU_ITEM_SELECTOR\n        ) ?? []\n      );\n      const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;\n        items[next]?.focus();\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;\n        items[prev]?.focus();\n      } else if (e.key === 'Escape') {\n        e.preventDefault();\n        setOpenMenuId(null);\n        triggerRef.current?.focus();\n      }\n    },\n    [setOpenMenuId]\n  );\n\n  // Close dropdown when clicking outside\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleOutsideClick = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        !triggerRef.current?.contains(target) &&\n        !dropdownRef.current?.contains(target)\n      ) {\n        setOpenMenuId(null);\n      }\n    };\n\n    document.addEventListener('mousedown', handleOutsideClick);\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [isOpen, setOpenMenuId]);\n\n  return (\n    <div\n      ref={ref}\n      className={cx(menuContainer, className)}\n      style={style}\n      data-testid={testId}\n      {...rest}\n    >\n      <button\n        ref={triggerRef}\n        className={trigger({ active: isOpen })}\n        onClick={handleClick}\n        onMouseEnter={handleMouseEnter}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        type=\"button\"\n        role=\"menuitem\"\n        aria-haspopup=\"true\"\n        aria-expanded={isOpen}\n        tabIndex={-1}\n      >\n        {label}\n      </button>\n      {isOpen && (\n        <div\n          ref={dropdownRef}\n          className={dropdown}\n          role=\"menu\"\n          aria-label={label}\n          // Focusable programmatically so the open menu can receive focus and\n          // handle arrow-key navigation across its items.\n          tabIndex={-1}\n          onKeyDown={handleDropdownKeyDown}\n          style={{ top: `calc(100% + ${menuOffset}px)` }}\n        >\n          {children}\n        </div>\n      )}\n    </div>\n  );\n};\n\nMenuBarMenu.displayName = 'MenuBar.Menu';\n\n// --- Root Component ---\n\nconst MenuBarRoot: React.FC<MenuBarProps> = ({\n  size = 'md',\n  menuOffset = 2,\n  children,\n\n  className,\n  style,\n  testId,\n  ref: externalRef,\n  ...rest\n}) => {\n  const [openMenuId, setOpenMenuId] = useState<string | null>(null);\n  // Registered child menu ids, kept in state so the context value stays\n  // reactive (previously a ref + forceUpdate, which read the ref during render).\n  const [menuIds, setMenuIds] = useState<string[]>([]);\n  const safeMenuOffset = Math.max(0, menuOffset);\n  const barRef = useRef<HTMLDivElement>(null);\n  const setBarRef = useMemo(\n    () => (node: HTMLDivElement | null) => {\n      barRef.current = node;\n      if (typeof externalRef === 'function') {\n        externalRef(node);\n      } else if (externalRef && typeof externalRef === 'object') {\n        externalRef.current = node;\n      }\n    },\n    [externalRef]\n  );\n\n  const registerMenu = useCallback((id: string) => {\n    setMenuIds(prev => (prev.includes(id) ? prev : [...prev, id]));\n  }, []);\n\n  const unregisterMenu = useCallback((id: string) => {\n    setMenuIds(prev => prev.filter(m => m !== id));\n  }, []);\n\n  const handleBarKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (!barRef.current) return;\n\n      const triggers = Array.from(\n        barRef.current.querySelectorAll<HTMLElement>(\n          ':scope > div > [role=\"menuitem\"]'\n        )\n      );\n      const currentIndex = triggers.indexOf(\n        document.activeElement as HTMLElement\n      );\n\n      if (e.key === 'ArrowRight') {\n        e.preventDefault();\n        const next = currentIndex + 1 < triggers.length ? currentIndex + 1 : 0;\n        triggers[next]?.focus();\n        // If menu is open, switch to next menu\n        if (openMenuId !== null) {\n          triggers[next]?.click();\n        }\n      } else if (e.key === 'ArrowLeft') {\n        e.preventDefault();\n        const prev =\n          currentIndex - 1 >= 0 ? currentIndex - 1 : triggers.length - 1;\n        triggers[prev]?.focus();\n        if (openMenuId !== null) {\n          triggers[prev]?.click();\n        }\n      }\n    },\n    [openMenuId]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      size,\n      menuOffset: safeMenuOffset,\n      openMenuId,\n      setOpenMenuId,\n      registerMenu,\n      unregisterMenu,\n      menuIds,\n    }),\n    [\n      size,\n      safeMenuOffset,\n      openMenuId,\n      setOpenMenuId,\n      registerMenu,\n      unregisterMenu,\n      menuIds,\n    ]\n  );\n\n  return (\n    <MenuBarContext.Provider value={contextValue}>\n      <div\n        ref={setBarRef}\n        className={cx(menuBarRoot({ size }), className)}\n        style={style}\n        data-testid={testId}\n        role=\"menubar\"\n        onKeyDown={handleBarKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {children}\n      </div>\n    </MenuBarContext.Provider>\n  );\n};\n\nMenuBarRoot.displayName = 'MenuBar';\n\n// --- Compound Component ---\n\nexport const MenuBar = /*#__PURE__*/ Object.assign(MenuBarRoot, {\n  Menu: MenuBarMenu,\n  Item: MenuBarItem,\n  CheckboxItem: MenuBarCheckboxItem,\n  RadioGroup: MenuBarRadioGroup,\n  RadioItem: MenuBarRadioItem,\n  Sub: MenuBarSub,\n  Separator: MenuBarSeparator,\n});\n"],"names":[],"mappings":";;;;;;;;AA6CA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AAED;AAEA;AAEA;AAGA;AAGM;AACA;AACD;AAML;AAEA;AAaE;AAEA;;AAEI;;;AAGJ;AAEA;AAkBF;AAEA;AAEA;AAEA;AACE;AAEF;AAgBE;;AAEA;;AAGA;AACE;AACA;;AACA;AACA;;AACF;AAEA;AAqBF;AAEA;AAEA;;AAeE;;AAGA;AAEI;;AACA;AACF;;AASF;AAcF;AAEA;AAEA;AAcE;AACA;AACA;AAEA;AACE;AACA;;;AAGF;AAqBF;AAEA;AAEA;AAWE;;AAEA;AAEA;AACE;AACE;AACA;;AAEF;;AACF;AAEA;AACE;;;;;AAMA;;AAC0B;AAC1B;;;AAoCJ;AAEA;AAEA;AAOE;AAUF;AAEA;AAEA;AAEA;AAWE;AACA;AAOA;AACA;AACA;;;AAIE;;AAEA;;AAGF;AACE;;;;AAIF;;;;;;AAOA;AAEI;;;;;;;;;AAWA;;;AAGE;;AAEJ;AAIF;AAEI;;AAOA;;AAEE;AACA;;AACK;;;AAIL;;AACK;;;AAGL;;AAEJ;;;AAMA;;AAEA;AACE;;;;;AAOF;AAEA;AACA;AACE;AACF;AACF;AAEA;;;;AAwCF;AAEA;AAEA;AAEA;;;;;;AAgBE;;AAGI;AACA;;;AAEO;AACL;;AAEJ;AAIF;;;AAIA;AACE;;AAGF;;;AAII;;AASA;;AAEE;AACA;;AAEA;AACE;;;AAEG;;;AAIL;AACA;AACE;;;AAGN;AAIF;;AAGI;;;;;;AAMD;;;;;;;;AASA;;AAmBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/esm/index.js

@@ -32,6 +32,8 @@ export { Checkbox } from './components/primitives/Checkbox/Checkbox.js';
 export { CheckboxGroup } from './components/primitives/Checkbox/CheckboxGroup.js';
 export { Code } from './components/primitives/Code/Code.js';
 export { Collapsible } from './components/primitives/Collapsible/Collapsible.js';
+export { EditableText } from './components/primitives/EditableText/EditableText.js';
+export { DEFAULT_EDITABLE_TEXT_LABELS, resolveEditableTextLabels } from './components/primitives/EditableText/editableTextLabels.js';
 export { HoverCard } from './components/primitives/HoverCard/HoverCard.js';
 export { Icon } from './components/primitives/Icon/Icon.js';
 export { IconButton } from './components/primitives/IconButton/IconButton.js';

package/dist/esm/index.js.map

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

package/dist/esm/{styles.js → styles.css.js}

@@ -1,3 +1,3 @@
 import './assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
 import './assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
-//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.css.js.map

package/dist/esm/styles.css.js.map

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

package/dist/tokens/tokens.dark.css

@@ -1,4 +1,4 @@
-/* Entangle UI dark theme — token export (v0.11.0) */
+/* Entangle UI dark theme — token export (v0.13.0) */
 /* Generated by scripts/export-tokens.ts — do not edit by hand. */
 :root {
   --etui-color-accent-error: #f44336;

package/dist/tokens/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://design-tokens.org/schema.json",
   "$description": "Entangle UI design tokens",
-  "$version": "0.11.0",
+  "$version": "0.13.0",
   "themes": {
     "dark": {
       "colors": {

package/dist/tokens/tokens.light.css

@@ -1,4 +1,4 @@
-/* Entangle UI light theme — token export (v0.11.0) */
+/* Entangle UI light theme — token export (v0.13.0) */
 /* Generated by scripts/export-tokens.ts — do not edit by hand. */
 .etui-theme-light {
   --etui-color-accent-error: #d32f2f;

package/dist/types/components/controls/Slider/Slider.d.ts

@@ -96,6 +96,13 @@ interface SliderBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default true
      */
     showTooltip?: boolean;
+    /**
+     * Placement of the value tooltip relative to the thumb. The tooltip is
+     * portaled to `document.body`, so it is never clipped by an ancestor's
+     * `overflow`.
+     * @default "top"
+     */
+    tooltipPlacement?: 'top' | 'bottom';
     /**
      * Show tick marks along the track
      * @default false

package/dist/types/components/editor/ViewportGizmo/ViewportGizmo.types.d.ts

@@ -17,11 +17,17 @@ interface GizmoOrientation {
 /**
  * Orbital rotation delta during a drag gesture.
  * The app applies this to its camera orbit controller.
+ *
+ * Sign convention (before any `invertYaw` / `invertPitch`): dragging the
+ * pointer right — or pressing `ArrowRight` — emits a positive `deltaYaw`;
+ * dragging up — or `ArrowUp` — emits a positive `deltaPitch`. Which way the
+ * camera actually turns is the consumer's choice; flip it with the
+ * `invertYaw` / `invertPitch` props if the motion feels mirrored.
  */
 interface OrbitDelta {
-    /** Yaw change in degrees (horizontal drag) */
+    /** Yaw change in degrees. Positive = pointer dragged right / ArrowRight. */
     deltaYaw: number;
-    /** Pitch change in degrees (vertical drag) */
+    /** Pitch change in degrees. Positive = pointer dragged up / ArrowUp. */
     deltaPitch: number;
 }
 /**
@@ -109,7 +115,24 @@ interface ViewportGizmoBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default true
      */
     constrainPitch?: boolean;
-    /** Called continuously while the user drags to orbit. */
+    /**
+     * Invert the horizontal orbit direction. When true, the emitted `deltaYaw`
+     * sign is flipped, so the consumer's camera turns the opposite way for the
+     * same drag / arrow-key gesture. Use this when the orbit feels mirrored
+     * relative to your camera controller (e.g. Three.js OrbitControls).
+     * @default false
+     */
+    invertYaw?: boolean;
+    /**
+     * Invert the vertical orbit direction. When true, the emitted `deltaPitch`
+     * sign is flipped (dragging up turns the camera down).
+     * @default false
+     */
+    invertPitch?: boolean;
+    /**
+     * Called continuously while the user drags to orbit.
+     * See {@link OrbitDelta} for the delta sign convention.
+     */
     onOrbit?: (delta: OrbitDelta) => void;
     /** Called when the user finishes an orbit drag. */
     onOrbitEnd?: (finalOrientation: GizmoOrientation) => void;

package/dist/types/components/feedback/Spinner/Spinner.d.ts

@@ -5,13 +5,17 @@ import React from 'react';
  * Loading / activity indicator.
  *
  * Announces itself via `role="status"` and `aria-label`; honors
- * `prefers-reduced-motion` by halting animation and dimming the indicator.
+ * `prefers-reduced-motion` by halting animation and dimming the indicator. Pass
+ * `decorative` to opt out of the live region when nested inside one (e.g. a
+ * `StatusBar`).
  *
  * @example
  * ```tsx
  * <Spinner />
  * <Spinner variant="dots" size="lg" />
  * <Spinner showLabel label="Fetching results..." />
+ * // Inside a StatusBar (already role="status"):
+ * <Spinner decorative size="sm" />
  * ```
  */
 declare const Spinner: React.NamedExoticComponent<{
@@ -20,6 +24,7 @@ declare const Spinner: React.NamedExoticComponent<{
     color?: SpinnerColor | undefined;
     label?: string | undefined;
     showLabel?: boolean | undefined;
+    decorative?: boolean | undefined;
     id?: string | undefined | undefined;
     className?: string | undefined | undefined;
     testId?: string | undefined;

package/dist/types/components/feedback/Spinner/Spinner.types.d.ts

@@ -35,6 +35,14 @@ interface SpinnerBaseProps extends BaseComponent<HTMLSpanElement> {
      * @default false
      */
     showLabel?: boolean;
+    /**
+     * Render the spinner as purely decorative: `role="presentation"` +
+     * `aria-hidden`, with no live region. Use when the spinner sits inside an
+     * existing live region (e.g. `StatusBar`, which is itself `role="status"`) so
+     * the activity is not announced twice.
+     * @default false
+     */
+    decorative?: boolean;
 }
 type SpinnerProps = Prettify<SpinnerBaseProps>;
 

package/dist/types/components/primitives/EditableText/EditableText.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { EditableTextProps } from './EditableText.types.js';
+
+/**
+ * Text that looks like `<Text>` but turns into an inline editor when the user
+ * activates it — the editor-UI pattern for renaming layers, nodes, assets, and
+ * scene objects in place.
+ *
+ * The idle state renders a real `<Text>` (so it inherits every typography prop),
+ * and the editing state renders a chrome-less `<input>` that shares the exact
+ * same typography recipe, so the swap is visually seamless. The edit field
+ * auto-sizes to its content via a hidden sizer — no measurement effects.
+ *
+ * Editing commits on `Enter` (and on blur when `submitOnBlur`), cancels on
+ * `Escape`. `onChange` fires on commit only, with the new value.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled — click the text to rename in place
+ * <EditableText defaultValue="Untitled Layer" onChange={setName} />
+ *
+ * // Controlled, heading-styled, double-click to edit (rename convention)
+ * <EditableText
+ *   variant="heading"
+ *   value={name}
+ *   onChange={setName}
+ *   activationMode="double"
+ *   placeholder="Name this node"
+ * />
+ * ```
+ */
+declare const EditableText: {
+    ({ value, defaultValue, onChange, placeholder, as, variant, size, weight, color, lineHeight, align, truncate, mono, activationMode, disabled, readOnly, selectOnEdit, submitOnBlur, maxLength, labels: labelsProp, "aria-label": ariaLabel, onEditStart, onEditEnd, onKeyDown, className, style, testId, ref, }: EditableTextProps): React.ReactElement;
+    displayName: string;
+};
+
+export { EditableText };

package/dist/types/components/primitives/EditableText/EditableText.types.d.ts

@@ -0,0 +1,158 @@
+import { TextElement, TextVariant, TextSize, TextWeight, TextColor, TextLineHeight, TextAlign } from '../Text/Text.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+/**
+ * How a pointer starts an edit session.
+ *
+ * Keyboard activation (Enter / F2 while the display is focused) always works,
+ * independent of this setting.
+ * - `single`: a single click on the text starts editing.
+ * - `double`: a double click starts editing; single clicks are left free for
+ *   selection or row activation (the file/node-rename convention).
+ */
+type EditableTextActivationMode = 'single' | 'double';
+/**
+ * Why an edit session ended.
+ * - `commit`: the draft was accepted (Enter, or blur with `submitOnBlur`).
+ * - `cancel`: the draft was discarded (Escape, or blur without `submitOnBlur`).
+ */
+type EditableTextEndReason = 'commit' | 'cancel';
+/**
+ * Every user-facing string EditableText renders. Override any subset via the
+ * `labels` prop; the rest fall back to {@link DEFAULT_EDITABLE_TEXT_LABELS}.
+ */
+interface EditableTextLabels {
+    /**
+     * Accessible name for the edit field while editing, and the fallback
+     * accessible name for the display element when the value is empty (and no
+     * `placeholder` is set). An explicit `aria-label` prop still wins.
+     * @default 'Edit text'
+     */
+    editLabel: string;
+}
+/**
+ * Imperative handle exposed through `ref`. Lets an external control (e.g. a
+ * toolbar "Rename" button) drive the edit session and focus.
+ */
+interface EditableTextHandle {
+    /** Enter edit mode programmatically (no-op when disabled or read-only). */
+    edit: () => void;
+    /** Leave edit mode, committing the current draft. */
+    commit: () => void;
+    /** Leave edit mode, discarding the current draft. */
+    cancel: () => void;
+    /** Focus the edit field while editing, otherwise the display element. */
+    focus: () => void;
+    /** Whether an edit session is currently active. */
+    isEditing: () => boolean;
+    /** The root DOM element for the current state (display element or input). */
+    getElement: () => HTMLElement | null;
+}
+interface EditableTextBaseProps {
+    /**
+     * The committed text value (controlled).
+     */
+    value?: string;
+    /**
+     * Initial committed value (uncontrolled).
+     */
+    defaultValue?: string;
+    /**
+     * Called with the new value when an edit is committed. Fires on commit only
+     * (Enter / blur), not on every keystroke.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Placeholder shown when the value is empty, both in the display and the edit
+     * field. Rendered in the muted placeholder color.
+     */
+    placeholder?: string;
+    /**
+     * HTML element rendered for the display (idle) state.
+     * @default 'span'
+     */
+    as?: TextElement;
+    /**
+     * Semantic typography variant, matching `Text`.
+     * @default 'body'
+     */
+    variant?: TextVariant;
+    /** Text size, matching `Text`. Overrides the variant size. */
+    size?: TextSize;
+    /** Text weight, matching `Text`. Overrides the variant weight. */
+    weight?: TextWeight;
+    /**
+     * Text color, matching `Text`.
+     * @default 'primary'
+     */
+    color?: TextColor;
+    /** Line height, matching `Text`. */
+    lineHeight?: TextLineHeight;
+    /** Text alignment, matching `Text`. */
+    align?: TextAlign;
+    /** Truncate the display text with an ellipsis on overflow. */
+    truncate?: boolean;
+    /** Use the monospace font family (also implied by `variant="code"`). */
+    mono?: boolean;
+    /**
+     * How a pointer starts an edit session.
+     * @default 'single'
+     */
+    activationMode?: EditableTextActivationMode;
+    /**
+     * Disable the field entirely — no editing, no hover affordance, not
+     * focusable.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Render the value but do not allow editing. Still selectable/focusable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Select the whole value when an edit session starts.
+     * @default true
+     */
+    selectOnEdit?: boolean;
+    /**
+     * Commit the draft when the edit field loses focus. When `false`, blurring
+     * discards the draft instead.
+     * @default true
+     */
+    submitOnBlur?: boolean;
+    /** Maximum number of characters accepted by the edit field. */
+    maxLength?: number;
+    /**
+     * String overrides for localization. Pass a stable reference (memoize it) —
+     * it is low-frequency config.
+     */
+    labels?: Partial<EditableTextLabels>;
+    /**
+     * Explicit accessible name. Wins over the value/placeholder-derived name and
+     * over `labels.editLabel`.
+     */
+    'aria-label'?: string;
+    /** Called when an edit session starts. */
+    onEditStart?: () => void;
+    /** Called when an edit session ends, with the reason. */
+    onEditEnd?: (reason: EditableTextEndReason) => void;
+    /** Key-down handler forwarded to the edit field (runs after built-ins). */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Additional CSS class name applied to the current root element. */
+    className?: string;
+    /** Inline styles applied to the current root element. */
+    style?: React.CSSProperties;
+    /** Test identifier for automated testing. */
+    testId?: string;
+    /** Imperative handle — see {@link EditableTextHandle}. */
+    ref?: React.Ref<EditableTextHandle>;
+}
+/**
+ * Props for the EditableText component with a prettified type for better
+ * IntelliSense.
+ */
+type EditableTextProps = Prettify<EditableTextBaseProps>;
+
+export type { EditableTextActivationMode, EditableTextBaseProps, EditableTextEndReason, EditableTextHandle, EditableTextLabels, EditableTextProps };

package/dist/types/components/primitives/EditableText/editableTextLabels.d.ts

@@ -0,0 +1,11 @@
+import { EditableTextLabels } from './EditableText.types.js';
+
+/**
+ * English defaults for every user-facing string EditableText renders. Override
+ * any subset by passing `labels` to `<EditableText>`; the rest fall back here.
+ */
+declare const DEFAULT_EDITABLE_TEXT_LABELS: EditableTextLabels;
+/** Merge a partial `labels` override onto the English defaults. */
+declare function resolveEditableTextLabels(overrides: Partial<EditableTextLabels> | undefined): EditableTextLabels;
+
+export { DEFAULT_EDITABLE_TEXT_LABELS, resolveEditableTextLabels };

package/dist/types/components/primitives/IconButton/IconButton.d.ts

@@ -58,7 +58,8 @@ type IconButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
  * ```
  */
 declare const IconButton: React.NamedExoticComponent<{
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
     size?: IconButtonSize | undefined;
     variant?: IconButtonVariant | undefined;
     radius?: IconButtonRadius | undefined;

package/dist/types/components/primitives/viewport/Viewport.d.ts

@@ -2,8 +2,11 @@ import React from 'react';
 import { ViewportProps } from './Viewport.types.js';
 
 /**
- * Viewport — pan/zoom canvas + HTML container for editor-style surfaces
- * such as node graphs, timelines, and 2D world editors.
+ * Viewport — **2D only.** A pan/zoom canvas + HTML container for editor-style
+ * surfaces such as node graphs, timelines, and 2D world editors. Despite the
+ * name it is *not* a 3D viewport: it owns a 2D pan/zoom transform, not a camera.
+ * For 3D, host your own WebGL/WebGPU canvas (e.g. inside an `AppShell.Dock`) and
+ * reach for `Viewport` only for 2D editor surfaces.
  *
  * Composes:
  * - Multiple perf-isolated `<ViewportLayer>` canvases (one draw cycle each).