entangle-ui 0.6.3 → 0.8.0

package/dist/esm/hooks/useKeyboard/utils.js

@@ -0,0 +1,56 @@
+import { devWarn } from '../../utils/devWarn.js';
+
+const isModifierKey = (key) => {
+    return ['ctrl', 'shift', 'alt', 'meta', 'control'].includes(key);
+};
+const KeypressUpdate = (prevState, key) => {
+    if (prevState.has(key)) {
+        return prevState;
+    }
+    const newState = new Set(prevState);
+    newState.add(key);
+    return newState;
+};
+const KeyReleaseUpdate = (prevState, key) => {
+    if (!prevState.has(key)) {
+        return prevState;
+    }
+    const newState = new Set(prevState);
+    newState.delete(key);
+    return newState;
+};
+const updateState = (prevState, event) => {
+    const key = event.key.toLowerCase();
+    const eventType = event.type;
+    switch (eventType) {
+        case 'keydown':
+            return KeypressUpdate(prevState, key);
+        case 'keyup':
+            return KeyReleaseUpdate(prevState, key);
+        default:
+            devWarn(`Unhandled event type: ${eventType}`);
+            return prevState;
+    }
+};
+const mapInnerStateToState = (innerState) => {
+    const modifiers = {
+        control: innerState.has('control') || innerState.has('ctrl'),
+        shift: innerState.has('shift'),
+        alt: innerState.has('alt'),
+        meta: innerState.has('meta'),
+    };
+    const pressedKeys = Array.from(innerState).filter(key => !isModifierKey(key));
+    return {
+        pressedKeys,
+        modifiers,
+    };
+};
+const isKeyPressed = (keyboardState, key) => {
+    if (isModifierKey(key)) {
+        return keyboardState.modifiers[key];
+    }
+    return keyboardState.pressedKeys.includes(key);
+};
+
+export { isKeyPressed, isModifierKey, mapInnerStateToState, updateState };
+//# sourceMappingURL=utils.js.map

package/dist/esm/hooks/useKeyboard/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../src/hooks/useKeyboard/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAQO,MAAM,aAAa,GAAG,CAAC,GAAW,KAAyB;AAChE,IAAA,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;AAClE;AAEA,MAAM,cAAc,GAAG,CACrB,SAA6B,EAC7B,GAAY,KACU;AACtB,IAAA,IAAI,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACtB,QAAA,OAAO,SAAS;IAClB;AACA,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;AACnC,IAAA,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC;AACjB,IAAA,OAAO,QAAQ;AACjB,CAAC;AAED,MAAM,gBAAgB,GAAG,CACvB,SAA6B,EAC7B,GAAY,KACU;IACtB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;AACvB,QAAA,OAAO,SAAS;IAClB;AACA,IAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC;AACnC,IAAA,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC;AACpB,IAAA,OAAO,QAAQ;AACjB,CAAC;MAEY,WAAW,GAAG,CACzB,SAA6B,EAC7B,KAAoB,KACE;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE;AACnC,IAAA,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI;IAC5B,QAAQ,SAAS;AACf,QAAA,KAAK,SAAS;AACZ,YAAA,OAAO,cAAc,CAAC,SAAS,EAAE,GAAG,CAAC;AACvC,QAAA,KAAK,OAAO;AACV,YAAA,OAAO,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC;AACzC,QAAA;AACE,YAAA,OAAO,CAAC,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAE,CAAC;AAC7C,YAAA,OAAO,SAAS;;AAEtB;AAEO,MAAM,oBAAoB,GAAG,CAClC,UAA8B,KACb;AACjB,IAAA,MAAM,SAAS,GAA+B;AAC5C,QAAA,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;AAC5D,QAAA,KAAK,EAAE,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;AAC9B,QAAA,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAI,EAAE,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC;KAC7B;IACD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7E,OAAO;QACL,WAAW;QACX,SAAS;KACV;AACH;MAEa,YAAY,GAAG,CAC1B,aAA4B,EAC5B,GAAY,KACD;AACX,IAAA,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;AACtB,QAAA,OAAO,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC;IACrC;IACA,OAAO,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;AAChD;;;;"}

package/dist/esm/hooks/useMergedRef/useMergedRef.js

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback } from 'react';
+
+/**
+ * Merge multiple refs into a single callback ref. Each provided ref (object
+ * ref, callback ref, or `null`/`undefined`) receives the node when the merged
+ * ref fires.
+ *
+ * Useful when a component needs to keep an internal ref to a DOM node while
+ * also forwarding the same node through an externally supplied `ref` prop
+ * (ref-as-prop in React 19).
+ *
+ * @example
+ * ```tsx
+ * const internalRef = useRef<HTMLDivElement>(null);
+ * const mergedRef = useMergedRef(internalRef, props.ref);
+ *
+ * return <div ref={mergedRef} />;
+ * ```
+ */
+function useMergedRef(...refs) {
+    // The spread of refs is intentional — the merged callback must pick up the
+    // latest set of refs the consumer is passing in.
+    return useCallback((node) => {
+        for (const ref of refs) {
+            if (!ref)
+                continue;
+            if (typeof ref === 'function') {
+                ref(node);
+            }
+            else {
+                ref.current = node;
+            }
+        }
+    }, refs);
+}
+
+export { useMergedRef };
+//# sourceMappingURL=useMergedRef.js.map

package/dist/esm/hooks/useMergedRef/useMergedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMergedRef.js","sources":["../../../../../src/hooks/useMergedRef/useMergedRef.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAIA;;;;;;;;;;;;;;;;AAgBG;AACG;;;AAKJ;AACE;AACE;;AACA;;;;AAGG;;;;AAIT;;"}

package/dist/esm/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,75 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+/**
+ * Observe size changes on an element. SSR-safe; cleans up on unmount.
+ *
+ * The callback is wrapped in a ref so consumers do not have to memoize it —
+ * the underlying observer never re-subscribes when the callback identity
+ * changes.
+ *
+ * The hook re-checks `ref.current` on every render so it picks up nodes that
+ * mount later (e.g. through conditional rendering). When the observed node
+ * has not changed the only cost is a single identity comparison.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * useResizeObserver(ref, entry => {
+ *   console.log(entry.contentRect.width);
+ * });
+ *
+ * return <div ref={ref} />;
+ * ```
+ */
+function useResizeObserver(ref, callback, options) {
+    const { enabled = true } = options ?? {};
+    const callbackRef = useRef(callback);
+    const observerRef = useRef(null);
+    const observedNodeRef = useRef(null);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    // Runs on every render so a node that mounts after the first render
+    // (conditional rendering, lazy children, suspense fallback flips, ...) is
+    // picked up automatically. Short-circuits on the common case where the
+    // observed node has not changed.
+    useEffect(() => {
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        if (!enabled) {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+                observedNodeRef.current = null;
+            }
+            return;
+        }
+        const node = ref.current;
+        if (node === observedNodeRef.current)
+            return;
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        observedNodeRef.current = node;
+        if (!node)
+            return;
+        const observer = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                callbackRef.current(entry);
+            }
+        });
+        observer.observe(node);
+        observerRef.current = observer;
+    });
+    // Final cleanup on unmount.
+    useEffect(() => () => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+        observedNodeRef.current = null;
+    }, []);
+}
+
+export { useResizeObserver };
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/esm/hooks/useResizeObserver/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAaA;;;;;;;;;;;;;;;;;;;;AAoBG;;;AAQD;AACA;AACA;;AAGE;AACF;;;;;;;;;AAUI;AACE;AACA;AACA;;;;AAKJ;AACA;;AAEA;AACE;AACA;;AAEF;AACA;;AAEA;AACE;AACE;;AAEJ;AACA;AACA;AACF;;AAGA;AAEI;AACA;AACA;;AAIN;;"}

package/dist/esm/hooks/useTheme/useTheme.js

@@ -0,0 +1,198 @@
+"use client";
+import { useRef, useState, useLayoutEffect, useCallback, useMemo } from 'react';
+import { vars } from '../../theme/contract.css.js';
+import { darkThemeValues } from '../../theme/darkThemeValues.js';
+import { lightThemeClass } from '../../theme/lightTheme.css.js';
+import '../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import './../../assets/src/theme/darkTheme.css.ts.vanilla-ab1WD4dr.css';
+import 'react/jsx-runtime';
+import './../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+
+const VAR_REF_PATTERN = /^var\((--[^,)]+)/;
+/**
+ * Walk a dot-path on the theme contract and return the underlying CSS
+ * custom property name (without the leading `var(`/trailing `)`).
+ *
+ * The contract emits hand-tuned, non-derivable names — `colors.accent.primary`
+ * resolves to `--etui-color-accent-primary`, not `--etui-colors-accent-primary`.
+ * Walking the existing `vars` object (whose leaves are already
+ * `var(--etui-...)` references) is the only correct way to get the var name.
+ *
+ * Returns `''` for paths that don't resolve to a leaf reference.
+ */
+function pathToCssVar(path) {
+    const segments = path.split('.');
+    let node = vars;
+    for (const segment of segments) {
+        if (node !== null &&
+            typeof node === 'object' &&
+            segment in node) {
+            node = node[segment];
+        }
+        else {
+            return '';
+        }
+    }
+    if (typeof node !== 'string')
+        return '';
+    const match = VAR_REF_PATTERN.exec(node);
+    return match?.[1] ?? '';
+}
+function pathToVarRef(path) {
+    const cssVar = pathToCssVar(path);
+    return cssVar ? `var(${cssVar})` : '';
+}
+/**
+ * Walk the dark-theme template alongside the contract, replacing each
+ * leaf with the resolved CSS variable value read from `root`. Falls back
+ * to the template value when a property is empty (e.g. before stylesheets
+ * have applied during testing).
+ */
+function resolveValues(template, root, contract) {
+    if (typeof template === 'string') {
+        if (typeof contract === 'string') {
+            const match = VAR_REF_PATTERN.exec(contract);
+            const cssVar = match?.[1];
+            if (cssVar) {
+                const value = getComputedStyle(root).getPropertyValue(cssVar).trim();
+                return (value || template);
+            }
+        }
+        return template;
+    }
+    if (template !== null && typeof template === 'object') {
+        const out = {};
+        for (const key of Object.keys(template)) {
+            const childTemplate = template[key];
+            const childContract = contract?.[key];
+            out[key] = resolveValues(childTemplate, root, childContract);
+        }
+        return out;
+    }
+    return template;
+}
+function readTemplateValue(template, path) {
+    const segments = path.split('.');
+    let node = template;
+    for (const segment of segments) {
+        if (node !== null &&
+            typeof node === 'object' &&
+            segment in node) {
+            node = node[segment];
+        }
+        else {
+            return '';
+        }
+    }
+    return typeof node === 'string' ? node : '';
+}
+/**
+ * Root-only detection: the variant is determined by whether the
+ * light-theme class is applied to `document.documentElement` — the same
+ * element from which `values` are resolved. Anything more permissive
+ * (descendant scan, `<body>` check) would let the variant disagree with
+ * the resolved values for a dark app that contains a single light
+ * subtree.
+ */
+function detectVariant() {
+    if (typeof document === 'undefined')
+        return 'dark';
+    if (document.documentElement.classList.contains(lightThemeClass)) {
+        return 'light';
+    }
+    return 'dark';
+}
+const FALLBACK_SNAPSHOT = {
+    variant: 'dark',
+    values: darkThemeValues,
+};
+/**
+ * Read the current theme at runtime.
+ *
+ * Returns the resolved CSS variable snapshot from `:root`, the detected
+ * theme variant, and helpers for reading individual tokens by path.
+ * Components should prefer compile-time tokens via Vanilla Extract
+ * (`vars.*` from `@/theme`) — reach for `useTheme` only when a runtime
+ * read is genuinely required (canvas drawing, third-party libraries that
+ * take colors as plain strings).
+ *
+ * **Scope:** the hook always reads from `:root` — both the variant and
+ * the resolved values come from `document.documentElement`. A light- or
+ * custom-themed subtree wrapped in `VanillaThemeProvider` will **not** be
+ * reflected here; for that, components inside the subtree should style
+ * via Vanilla Extract `vars.*` (which the browser resolves correctly per
+ * scope) rather than runtime reads.
+ *
+ * **SSR:** returns the dark-theme defaults as a fallback. The hook
+ * re-evaluates against the live DOM on mount via `useLayoutEffect`, so
+ * the second render contains the real values before the browser paints.
+ *
+ * **Reactivity:** v0.8 reads once on mount. Toggling the root theme at
+ * runtime is not reflected — remount the consuming subtree to pick up
+ * the new theme. A `MutationObserver`-based subscription may be added
+ * in a later release if consumer demand emerges.
+ *
+ * @example
+ * ```tsx
+ * const { values, variant, getVar, getToken } = useTheme();
+ *
+ * // Canvas drawing with theme-aware colors
+ * ctx.strokeStyle = values.colors.accent.primary;
+ *
+ * // Conditional logic
+ * if (variant === 'dark') loadDarkAssets();
+ *
+ * // Inline styles that follow theme changes automatically
+ * <div style={{ color: getVar('colors.text.primary') }} />
+ *
+ * // One-off token resolution
+ * const accent = getToken('colors.accent.primary');
+ * ```
+ */
+function useTheme() {
+    const tokenCacheRef = useRef(new Map());
+    const [snapshot, setSnapshot] = useState(FALLBACK_SNAPSHOT);
+    useLayoutEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        const root = document.documentElement;
+        const next = {
+            variant: detectVariant(),
+            values: resolveValues(darkThemeValues, root, vars),
+        };
+        tokenCacheRef.current.clear();
+        setSnapshot(next);
+    }, []);
+    const getToken = useCallback((path) => {
+        const cache = tokenCacheRef.current;
+        const cached = cache.get(path);
+        if (cached !== undefined)
+            return cached;
+        if (typeof document === 'undefined') {
+            const fallback = readTemplateValue(darkThemeValues, path);
+            cache.set(path, fallback);
+            return fallback;
+        }
+        const cssVar = pathToCssVar(path);
+        if (!cssVar) {
+            cache.set(path, '');
+            return '';
+        }
+        const value = getComputedStyle(document.documentElement)
+            .getPropertyValue(cssVar)
+            .trim();
+        const resolved = value || readTemplateValue(darkThemeValues, path);
+        cache.set(path, resolved);
+        return resolved;
+    }, []);
+    const getVar = useCallback((path) => pathToVarRef(path), []);
+    return useMemo(() => ({
+        variant: snapshot.variant,
+        values: snapshot.values,
+        getToken,
+        getVar,
+    }), [snapshot, getToken, getVar]);
+}
+
+export { useTheme };
+//# sourceMappingURL=useTheme.js.map

package/dist/esm/hooks/useTheme/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sources":["../../../../../src/hooks/useTheme/useTheme.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAUA;AAEA;;;;;;;;;;AAUG;AACH;;;AAGE;;;;AAMI;;;AAEA;;;;AAG0B;;AAE9B;AACF;AAEA;AACE;;AAEF;AAEA;;;;;AAKG;AACH;AACE;AACE;;AAEE;;AAEE;AACA;;;AAGJ;;;;;AAKE;AACA;AAGA;;AAEF;;AAEF;AACF;AAEA;;;AAGE;;;;AAMI;;;AAEA;;;AAGJ;AACF;AAEA;;;;;;;AAOG;AACH;;AACuC;;AAGnC;;AAEF;AACF;AAOA;AACE;AACA;;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;;;;;;;AAOC;AACA;;;;AAIA;;;AAIF;AACE;;;AAE0B;AAE1B;;AAEE;AACA;;AAGF;;AAEE;AACA;;AAGF;;AAEG;;AAEH;AACA;;AAGF;AAEA;;;;;;AASF;;"}

package/dist/esm/index.js

@@ -1,35 +1,52 @@
 export { vars } from './theme/contract.css.js';
-export { darkThemeValues } from './theme/darkTheme.css.js';
+export { darkThemeValues } from './theme/darkThemeValues.js';
+export { lightThemeValues } from './theme/lightThemeValues.js';
+export { lightThemeClass } from './theme/lightTheme.css.js';
 export { createCustomTheme } from './theme/createCustomTheme.js';
+export { createLightTheme } from './theme/createLightTheme.js';
 export { VanillaThemeProvider } from './theme/VanillaThemeProvider.js';
 export { ThemeProvider } from './theme/ThemeProvider.js';
+import './assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
 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 { Divider } from './components/layout/Divider/Divider.js';
 export { Flex } from './components/layout/Flex/Flex.js';
 export { Grid } from './components/layout/Grid/Grid.js';
+export { ListItem } from './components/layout/ListItem/ListItem.js';
+export { PageHeader } from './components/layout/PageHeader/PageHeader.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';
+export { Avatar } from './components/primitives/Avatar/Avatar.js';
+export { AvatarGroup } from './components/primitives/Avatar/AvatarGroup.js';
+export { Badge } from './components/primitives/Badge/Badge.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 { Code } from './components/primitives/Code/Code.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 { Kbd } from './components/primitives/Kbd/Kbd.js';
+export { Link } from './components/primitives/Link/Link.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 { Radio } from './components/primitives/Radio/Radio.js';
+export { RadioGroup } from './components/primitives/Radio/RadioGroup.js';
 export { Switch } from './components/primitives/Switch/Switch.js';
 export { Text } from './components/primitives/Text/Text.js';
+export { TextArea } from './components/primitives/TextArea/TextArea.js';
 export { Tooltip } from './components/primitives/Tooltip/Tooltip.js';
+export { VisuallyHidden } from './components/primitives/VisuallyHidden/VisuallyHidden.js';
 import 'react';
 import './components/primitives/canvas/CanvasContainer.js';
 export { ColorPicker } from './components/controls/ColorPicker/ColorPicker.js';
@@ -41,7 +58,9 @@ export { TAILWIND_PALETTE } from './components/controls/ColorPicker/palettes/tai
 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 { useKeyboard } from './hooks/useKeyboard/useKeyboard.js';
 import './utils/mathExpression.js';
+import './utils/devWarn.js';
 export { Select } from './components/controls/Select/Select.js';
 export { Slider } from './components/controls/Slider/Slider.js';
 export { VectorInput } from './components/controls/VectorInput/VectorInput.js';
@@ -50,10 +69,16 @@ 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 { Breadcrumbs } from './components/navigation/Breadcrumbs/Breadcrumbs.js';
+export { BreadcrumbItem } from './components/navigation/Breadcrumbs/BreadcrumbItem.js';
+export { BreadcrumbSeparator } from './components/navigation/Breadcrumbs/BreadcrumbSeparator.js';
+export { BreadcrumbEllipsis } from './components/navigation/Breadcrumbs/BreadcrumbEllipsis.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 { SegmentedControl } from './components/navigation/SegmentedControl/SegmentedControl.js';
+export { SegmentedControlItem } from './components/navigation/SegmentedControl/SegmentedControlItem.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';
@@ -61,11 +86,21 @@ 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 { Alert } from './components/feedback/Alert/Alert.js';
+export { AlertTitle } from './components/feedback/Alert/AlertTitle.js';
+export { AlertDescription } from './components/feedback/Alert/AlertDescription.js';
+export { AlertActions } from './components/feedback/Alert/AlertActions.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 { EmptyState } from './components/feedback/EmptyState/EmptyState.js';
+export { ProgressBar } from './components/feedback/ProgressBar/ProgressBar.js';
+export { CircularProgress } from './components/feedback/ProgressBar/CircularProgress.js';
+export { Skeleton } from './components/feedback/Skeleton/Skeleton.js';
+export { SkeletonGroup } from './components/feedback/Skeleton/SkeletonGroup.js';
+export { Spinner } from './components/feedback/Spinner/Spinner.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';
@@ -75,6 +110,7 @@ export { PropertyGroup } from './components/editor/PropertyInspector/PropertyGro
 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 { TransformControl } from './components/editor/TransformControl/TransformControl.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';
@@ -88,6 +124,7 @@ export { ChatContextChip } from './components/editor/ChatPanel/ChatContextChip.j
 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 { ChatMarkdownRenderer } from './components/editor/ChatPanel/ChatMarkdownRenderer.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';
@@ -96,5 +133,17 @@ export { FloatingManager, FloatingPanel } from './components/shell/FloatingPanel
 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 { useControlledState } from './hooks/useControlledState/useControlledState.js';
+export { useFocusTrap } from './hooks/useFocusTrap/useFocusTrap.js';
+export { useMergedRef } from './hooks/useMergedRef/useMergedRef.js';
+export { useResizeObserver } from './hooks/useResizeObserver/useResizeObserver.js';
+export { useDisclosure } from './hooks/useDisclosure/useDisclosure.js';
+export { useClipboard } from './hooks/useClipboard/useClipboard.js';
+export { useClickOutside } from './hooks/useClickOutside/useClickOutside.js';
+export { useHotkey } from './hooks/useHotkey/useHotkey.js';
+export { useTheme } from './hooks/useTheme/useTheme.js';
 export { cx as cn, cx } from './utils/cx.js';
+export { getKeyGlyph, getPlatform, parseShortcut } from './utils/platform.js';
+export { animBlink, animFadeIn, animPulse, animSpin, animWave, blinkKeyframe, fadeInKeyframe, pulseKeyframe, spinKeyframe, waveKeyframe } from './utils/animations.css.js';
+export { isKeyPressed, isModifierKey } from './hooks/useKeyboard/utils.js';
 //# sourceMappingURL=index.js.map

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/theme/ThemeProvider.js

@@ -1,16 +1,30 @@
 "use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { GLOBAL_SCROLLBARS_CLASS } from './globalScrollbars.css.js';
 
 /**
  * Theme provider for Entangle UI components.
  *
- * The dark theme is applied globally via CSS custom properties on `:root`.
- * This provider is a simple pass-through — most apps don't need it.
+ * The dark theme is applied globally via CSS custom properties on `:root`,
+ * so this provider is a pass-through for most apps. Use it to opt into
+ * additional global behaviors such as native-scrollbar theming.
  *
  * For scoped theme overrides, use `VanillaThemeProvider` with a custom
  * class generated by `createCustomTheme()`.
  */
-const ThemeProvider = ({ children }) => {
+const ThemeProvider = ({ children, globalScrollbars = false, }) => {
+    useEffect(() => {
+        if (!globalScrollbars)
+            return;
+        if (typeof document === 'undefined')
+            return;
+        const body = document.body;
+        body.classList.add(GLOBAL_SCROLLBARS_CLASS);
+        return () => {
+            body.classList.remove(GLOBAL_SCROLLBARS_CLASS);
+        };
+    }, [globalScrollbars]);
     return jsx(Fragment, { children: children });
 };
 

package/dist/esm/theme/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/theme/ThemeProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;AAQG;;;AAGH;;"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../../../src/theme/ThemeProvider.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAoBA;;;;;;;;;AASG;AACI;;AAKH;;;;AAGA;AACA;AACA;AACE;AACF;AACF;;AAGF;;"}

package/dist/esm/theme/contract.css.js

@@ -1,4 +1,4 @@
-var vars = {colors:{background:{primary:'var(--etui-color-bg-primary)',secondary:'var(--etui-color-bg-secondary)',tertiary:'var(--etui-color-bg-tertiary)',elevated:'var(--etui-color-bg-elevated)'},surface:{'default':'var(--etui-color-surface-default)',hover:'var(--etui-color-surface-hover)',active:'var(--etui-color-surface-active)',disabled:'var(--etui-color-surface-disabled)',whiteOverlay:'var(--etui-color-surface-white-overlay)'},border:{'default':'var(--etui-color-border-default)',focus:'var(--etui-color-border-focus)',error:'var(--etui-color-border-error)',success:'var(--etui-color-border-success)'},text:{primary:'var(--etui-color-text-primary)',secondary:'var(--etui-color-text-secondary)',muted:'var(--etui-color-text-muted)',disabled:'var(--etui-color-text-disabled)'},accent:{primary:'var(--etui-color-accent-primary)',secondary:'var(--etui-color-accent-secondary)',success:'var(--etui-color-accent-success)',warning:'var(--etui-color-accent-warning)',error:'var(--etui-color-accent-error)'},backdrop:'var(--etui-color-backdrop)'},spacing:{xs:'var(--etui-spacing-xs)',sm:'var(--etui-spacing-sm)',md:'var(--etui-spacing-md)',lg:'var(--etui-spacing-lg)',xl:'var(--etui-spacing-xl)',xxl:'var(--etui-spacing-xxl)',xxxl:'var(--etui-spacing-xxxl)'},typography:{fontSize:{xxs:'var(--etui-font-size-xxs)',xs:'var(--etui-font-size-xs)',sm:'var(--etui-font-size-sm)',md:'var(--etui-font-size-md)',lg:'var(--etui-font-size-lg)',xl:'var(--etui-font-size-xl)'},fontWeight:{normal:'var(--etui-font-weight-normal)',medium:'var(--etui-font-weight-medium)',semibold:'var(--etui-font-weight-semibold)'},lineHeight:{tight:'var(--etui-line-height-tight)',normal:'var(--etui-line-height-normal)',relaxed:'var(--etui-line-height-relaxed)'},fontFamily:{mono:'var(--etui-font-family-mono)',sans:'var(--etui-font-family-sans)'}},borderRadius:{none:'var(--etui-radius-none)',sm:'var(--etui-radius-sm)',md:'var(--etui-radius-md)',lg:'var(--etui-radius-lg)'},shadows:{sm:'var(--etui-shadow-sm)',md:'var(--etui-shadow-md)',lg:'var(--etui-shadow-lg)',xl:'var(--etui-shadow-xl)',focus:'var(--etui-shadow-focus)',separatorBottom:'var(--etui-shadow-separator-bottom)',separatorRight:'var(--etui-shadow-separator-right)',separatorLeft:'var(--etui-shadow-separator-left)',thumb:'var(--etui-shadow-thumb)'},transitions:{fast:'var(--etui-transition-fast)',normal:'var(--etui-transition-normal)',slow:'var(--etui-transition-slow)'},zIndex:{base:'var(--etui-z-base)',dropdown:'var(--etui-z-dropdown)',popover:'var(--etui-z-popover)',tooltip:'var(--etui-z-tooltip)',modal:'var(--etui-z-modal)'},shell:{menuBar:{height:'var(--etui-shell-menubar-height)',bg:'var(--etui-shell-menubar-bg)',hoverBg:'var(--etui-shell-menubar-hover-bg)',activeBg:'var(--etui-shell-menubar-active-bg)',text:'var(--etui-shell-menubar-text)',shortcutText:'var(--etui-shell-menubar-shortcut-text)'},toolbar:{height:{sm:'var(--etui-shell-toolbar-height-sm)',md:'var(--etui-shell-toolbar-height-md)'},bg:'var(--etui-shell-toolbar-bg)',separator:'var(--etui-shell-toolbar-separator)'},statusBar:{height:'var(--etui-shell-statusbar-height)',heightMd:'var(--etui-shell-statusbar-height-md)',bg:'var(--etui-shell-statusbar-bg)',text:'var(--etui-shell-statusbar-text)'},dock:{tabHeight:'var(--etui-shell-dock-tab-height)',tabBg:'var(--etui-shell-dock-tab-bg)',tabActiveBg:'var(--etui-shell-dock-tab-active-bg)',tabHoverBg:'var(--etui-shell-dock-tab-hover-bg)',tabText:'var(--etui-shell-dock-tab-text)',tabActiveText:'var(--etui-shell-dock-tab-active-text)',splitterSize:'var(--etui-shell-dock-splitter-size)',splitterColor:'var(--etui-shell-dock-splitter-color)',splitterHoverColor:'var(--etui-shell-dock-splitter-hover-color)',borderBarBg:'var(--etui-shell-dock-border-bar-bg)',borderBarSize:'var(--etui-shell-dock-border-bar-size)',dropOverlay:'var(--etui-shell-dock-drop-overlay)'}},storybook:{canvas:{gradientStart:'var(--etui-storybook-gradient-start)',gradientMid:'var(--etui-storybook-gradient-mid)',gradientEnd:'var(--etui-storybook-gradient-end)'}}};
+var vars = {colors:{background:{primary:'var(--etui-color-bg-primary)',secondary:'var(--etui-color-bg-secondary)',tertiary:'var(--etui-color-bg-tertiary)',elevated:'var(--etui-color-bg-elevated)',inset:'var(--etui-color-bg-inset)'},surface:{'default':'var(--etui-color-surface-default)',hover:'var(--etui-color-surface-hover)',active:'var(--etui-color-surface-active)',disabled:'var(--etui-color-surface-disabled)',whiteOverlay:'var(--etui-color-surface-white-overlay)',row:'var(--etui-color-surface-row)',rowHover:'var(--etui-color-surface-row-hover)'},border:{'default':'var(--etui-color-border-default)',focus:'var(--etui-color-border-focus)',error:'var(--etui-color-border-error)',success:'var(--etui-color-border-success)'},text:{primary:'var(--etui-color-text-primary)',secondary:'var(--etui-color-text-secondary)',muted:'var(--etui-color-text-muted)',disabled:'var(--etui-color-text-disabled)'},accent:{primary:'var(--etui-color-accent-primary)',secondary:'var(--etui-color-accent-secondary)',success:'var(--etui-color-accent-success)',warning:'var(--etui-color-accent-warning)',error:'var(--etui-color-accent-error)'},backdrop:'var(--etui-color-backdrop)'},spacing:{xs:'var(--etui-spacing-xs)',sm:'var(--etui-spacing-sm)',md:'var(--etui-spacing-md)',lg:'var(--etui-spacing-lg)',xl:'var(--etui-spacing-xl)',xxl:'var(--etui-spacing-xxl)',xxxl:'var(--etui-spacing-xxxl)'},typography:{fontSize:{xxs:'var(--etui-font-size-xxs)',xs:'var(--etui-font-size-xs)',sm:'var(--etui-font-size-sm)',md:'var(--etui-font-size-md)',lg:'var(--etui-font-size-lg)',xl:'var(--etui-font-size-xl)'},fontWeight:{normal:'var(--etui-font-weight-normal)',medium:'var(--etui-font-weight-medium)',semibold:'var(--etui-font-weight-semibold)'},lineHeight:{tight:'var(--etui-line-height-tight)',normal:'var(--etui-line-height-normal)',relaxed:'var(--etui-line-height-relaxed)'},fontFamily:{mono:'var(--etui-font-family-mono)',sans:'var(--etui-font-family-sans)'}},borderRadius:{none:'var(--etui-radius-none)',sm:'var(--etui-radius-sm)',md:'var(--etui-radius-md)',lg:'var(--etui-radius-lg)'},shadows:{sm:'var(--etui-shadow-sm)',md:'var(--etui-shadow-md)',lg:'var(--etui-shadow-lg)',xl:'var(--etui-shadow-xl)',focus:'var(--etui-shadow-focus)',separatorBottom:'var(--etui-shadow-separator-bottom)',separatorRight:'var(--etui-shadow-separator-right)',separatorLeft:'var(--etui-shadow-separator-left)',thumb:'var(--etui-shadow-thumb)'},transitions:{fast:'var(--etui-transition-fast)',normal:'var(--etui-transition-normal)',slow:'var(--etui-transition-slow)'},zIndex:{base:'var(--etui-z-base)',dropdown:'var(--etui-z-dropdown)',popover:'var(--etui-z-popover)',tooltip:'var(--etui-z-tooltip)',modal:'var(--etui-z-modal)'},shell:{menuBar:{height:'var(--etui-shell-menubar-height)',bg:'var(--etui-shell-menubar-bg)',hoverBg:'var(--etui-shell-menubar-hover-bg)',activeBg:'var(--etui-shell-menubar-active-bg)',text:'var(--etui-shell-menubar-text)',shortcutText:'var(--etui-shell-menubar-shortcut-text)'},toolbar:{height:{sm:'var(--etui-shell-toolbar-height-sm)',md:'var(--etui-shell-toolbar-height-md)'},bg:'var(--etui-shell-toolbar-bg)',separator:'var(--etui-shell-toolbar-separator)'},statusBar:{height:'var(--etui-shell-statusbar-height)',heightMd:'var(--etui-shell-statusbar-height-md)',bg:'var(--etui-shell-statusbar-bg)',text:'var(--etui-shell-statusbar-text)'},dock:{tabHeight:'var(--etui-shell-dock-tab-height)',tabBg:'var(--etui-shell-dock-tab-bg)',tabActiveBg:'var(--etui-shell-dock-tab-active-bg)',tabHoverBg:'var(--etui-shell-dock-tab-hover-bg)',tabText:'var(--etui-shell-dock-tab-text)',tabActiveText:'var(--etui-shell-dock-tab-active-text)',splitterSize:'var(--etui-shell-dock-splitter-size)',splitterColor:'var(--etui-shell-dock-splitter-color)',splitterHoverColor:'var(--etui-shell-dock-splitter-hover-color)',borderBarBg:'var(--etui-shell-dock-border-bar-bg)',borderBarSize:'var(--etui-shell-dock-border-bar-size)',dropOverlay:'var(--etui-shell-dock-drop-overlay)'}},storybook:{canvas:{gradientStart:'var(--etui-storybook-gradient-start)',gradientMid:'var(--etui-storybook-gradient-mid)',gradientEnd:'var(--etui-storybook-gradient-end)'}}};
 
 export { vars };
 //# sourceMappingURL=contract.css.js.map

package/dist/esm/theme/createLightTheme.js

@@ -0,0 +1,29 @@
+import { lightThemeClass } from './lightTheme.css.js';
+
+/**
+ * Returns the light-theme CSS class. Apply the returned class to any
+ * subtree (typically via `VanillaThemeProvider`) to flip its tokens
+ * from the dark default to the light preset.
+ *
+ * The class is generated at build time inside `lightTheme.css.ts` (where
+ * Vanilla Extract's file scope is set), so this helper is safe to call
+ * from any `.ts`/`.tsx` file — no `.css.ts` wrapper required. Consumers
+ * who prefer can also import `lightThemeClass` directly from the package.
+ *
+ * @example
+ * ```tsx
+ * import { createLightTheme, VanillaThemeProvider } from 'entangle-ui';
+ *
+ * const lightThemeClass = createLightTheme();
+ *
+ * <VanillaThemeProvider className={lightThemeClass}>
+ *   <SettingsPanel />
+ * </VanillaThemeProvider>
+ * ```
+ */
+function createLightTheme() {
+    return lightThemeClass;
+}
+
+export { createLightTheme };
+//# sourceMappingURL=createLightTheme.js.map

package/dist/esm/theme/createLightTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLightTheme.js","sources":["../../../../src/theme/createLightTheme.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAEA;;;;;;;;;;;;;;;;;;;;AAoBG;SACa,gBAAgB,GAAA;AAC9B,IAAA,OAAO,eAAe;AACxB;;;;"}