entangle-ui 0.8.2 → 0.9.0

package/dist/esm/hooks/useListboxNav/useListboxNav.js

@@ -0,0 +1,181 @@
+"use client";
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+/**
+ * Shared keyboard navigation for listbox-like surfaces (Select, MultiSelect,
+ * Combobox, CommandPalette). Tracks an `activeIndex`, skips disabled items,
+ * and exposes a single `handleKeyDown` covering Arrow / Home / End / Enter /
+ * Escape semantics.
+ *
+ * The hook is purely logical — consumers render the list and bind the handler
+ * to an input or the listbox container. Scroll-into-view is the consumer's
+ * concern.
+ *
+ * @example
+ * ```tsx
+ * const { activeIndex, handleKeyDown } = useListboxNav({
+ *   items: filtered,
+ *   isItemDisabled: o => o.disabled ?? false,
+ *   onSelect: (item) => commit(item),
+ *   onEscape: () => close(),
+ * });
+ * ```
+ */
+function useListboxNav(options) {
+    const { items, isItemDisabled, defaultActiveIndex = -1, loop = true, resetOnItemsChange = true, onSelect, onEscape, } = options;
+    const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
+    // Stable refs so handlers don't churn when callers pass inline closures.
+    const itemsRef = useRef(items);
+    const isItemDisabledRef = useRef(isItemDisabled);
+    const onSelectRef = useRef(onSelect);
+    const onEscapeRef = useRef(onEscape);
+    const loopRef = useRef(loop);
+    useEffect(() => {
+        itemsRef.current = items;
+    }, [items]);
+    useEffect(() => {
+        isItemDisabledRef.current = isItemDisabled;
+    }, [isItemDisabled]);
+    useEffect(() => {
+        onSelectRef.current = onSelect;
+    }, [onSelect]);
+    useEffect(() => {
+        onEscapeRef.current = onEscape;
+    }, [onEscape]);
+    useEffect(() => {
+        loopRef.current = loop;
+    }, [loop]);
+    // Reset active index when items reference changes (e.g. filter).
+    const prevItemsRef = useRef(items);
+    useEffect(() => {
+        if (!resetOnItemsChange)
+            return;
+        if (prevItemsRef.current !== items) {
+            setActiveIndex(defaultActiveIndex);
+            prevItemsRef.current = items;
+        }
+    }, [items, resetOnItemsChange, defaultActiveIndex]);
+    const getNavigableIndices = useCallback(() => {
+        const list = itemsRef.current;
+        const disabled = isItemDisabledRef.current;
+        if (!disabled)
+            return list.map((_, i) => i);
+        const out = [];
+        for (let i = 0; i < list.length; i += 1) {
+            const item = list[i];
+            if (!disabled(item, i))
+                out.push(i);
+        }
+        return out;
+    }, []);
+    const move = useCallback((direction) => {
+        const navigable = getNavigableIndices();
+        if (navigable.length === 0) {
+            setActiveIndex(-1);
+            return;
+        }
+        setActiveIndex(current => {
+            const currentNavIdx = navigable.indexOf(current);
+            switch (direction) {
+                case 'first':
+                    return navigable[0] ?? -1;
+                case 'last':
+                    return navigable[navigable.length - 1] ?? -1;
+                case 'next': {
+                    if (currentNavIdx === -1)
+                        return navigable[0] ?? -1;
+                    const nextIdx = currentNavIdx + 1;
+                    if (nextIdx >= navigable.length) {
+                        return loopRef.current
+                            ? (navigable[0] ?? -1)
+                            : (navigable[navigable.length - 1] ?? -1);
+                    }
+                    return navigable[nextIdx] ?? -1;
+                }
+                case 'prev': {
+                    if (currentNavIdx === -1)
+                        return navigable[navigable.length - 1] ?? -1;
+                    const prevIdx = currentNavIdx - 1;
+                    if (prevIdx < 0) {
+                        return loopRef.current
+                            ? (navigable[navigable.length - 1] ?? -1)
+                            : (navigable[0] ?? -1);
+                    }
+                    return navigable[prevIdx] ?? -1;
+                }
+            }
+        });
+    }, [getNavigableIndices]);
+    const next = useCallback(() => {
+        move('next');
+    }, [move]);
+    const prev = useCallback(() => {
+        move('prev');
+    }, [move]);
+    const first = useCallback(() => {
+        move('first');
+    }, [move]);
+    const last = useCallback(() => {
+        move('last');
+    }, [move]);
+    const selectActive = useCallback(() => {
+        const list = itemsRef.current;
+        const disabled = isItemDisabledRef.current;
+        setActiveIndex(current => {
+            if (current < 0 || current >= list.length)
+                return current;
+            const item = list[current];
+            if (disabled?.(item, current))
+                return current;
+            onSelectRef.current?.(item, current);
+            return current;
+        });
+    }, []);
+    const handleKeyDown = useCallback((event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                next();
+                return true;
+            case 'ArrowUp':
+                event.preventDefault();
+                prev();
+                return true;
+            case 'Home':
+                event.preventDefault();
+                first();
+                return true;
+            case 'End':
+                event.preventDefault();
+                last();
+                return true;
+            case 'Enter':
+                event.preventDefault();
+                selectActive();
+                return true;
+            case 'Escape':
+                if (onEscapeRef.current) {
+                    event.preventDefault();
+                    onEscapeRef.current();
+                    return true;
+                }
+                return false;
+            default:
+                return false;
+        }
+    }, [next, prev, first, last, selectActive]);
+    return {
+        activeIndex,
+        setActiveIndex,
+        next,
+        prev,
+        first,
+        last,
+        selectActive,
+        handleKeyDown,
+        navigableIndices: getNavigableIndices(),
+    };
+}
+
+export { useListboxNav };
+//# sourceMappingURL=useListboxNav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListboxNav.js","sources":["../../../../../src/hooks/useListboxNav/useListboxNav.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AA8DA;;;;;;;;;;;;;;;;;;;AAmBG;AACG;;;;AAgBJ;AACA;AACA;AACA;AACA;;AAGE;AACF;;AAEE;AACF;;AAEE;AACF;;AAEE;AACF;;AAEE;AACF;;AAGA;;AAEE;;AACA;;AAEE;;;AAIJ;AACE;AACA;AACA;AAAe;;AAEf;AACE;AACA;AAAwB;;AAE1B;;AAGF;AAEI;AACA;AACE;;;;;;AAOE;AACE;AACF;;;;AAG4B;AAC1B;AACA;;;AAGI;;AAEJ;;;;;AAKA;AACA;;AAEI;;;AAGJ;;;AAGN;AACF;AAIF;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AAEA;AACE;AACA;;;AAE6C;AAC3C;AACA;AAA+B;;AAE/B;AACF;;AAGF;AAEI;AACE;;AAEE;AACA;AACF;;AAEE;AACA;AACF;;AAEE;AACA;AACF;;AAEE;AACA;AACF;;AAEE;AACA;AACF;AACE;;;AAGE;;AAEF;AACF;AACE;;AAEN;;;;;;;;;;;;AAeJ;;"}

package/dist/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -0,0 +1,54 @@
+"use client";
+import { useState, useEffect } from 'react';
+
+function getInitialMatch(query, fallback) {
+    if (typeof window === 'undefined' ||
+        typeof window.matchMedia !== 'function') {
+        return fallback;
+    }
+    return window.matchMedia(query).matches;
+}
+/**
+ * Reactive media query matching.
+ *
+ * Returns `true` when the current viewport matches the query and updates as
+ * the viewport changes. SSR-safe — returns `defaultMatches` when `matchMedia`
+ * is unavailable. Uses the modern `addEventListener('change')` API with a
+ * fallback to the legacy `addListener` for older browsers.
+ *
+ * @example
+ * ```tsx
+ * const isWide = useMediaQuery('(min-width: 768px)');
+ * return isWide ? <DesktopLayout /> : <MobileLayout />;
+ * ```
+ */
+function useMediaQuery(query, options = {}) {
+    const { defaultMatches = false } = options;
+    const [matches, setMatches] = useState(() => getInitialMatch(query, defaultMatches));
+    useEffect(() => {
+        if (typeof window === 'undefined' ||
+            typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const mql = window.matchMedia(query);
+        setMatches(mql.matches);
+        const handler = (event) => {
+            setMatches(event.matches);
+        };
+        if (typeof mql.addEventListener === 'function') {
+            mql.addEventListener('change', handler);
+            return () => {
+                mql.removeEventListener('change', handler);
+            };
+        }
+        // Legacy Safari fallback.
+        mql.addListener(handler);
+        return () => {
+            mql.removeListener(handler);
+        };
+    }, [query]);
+    return matches;
+}
+
+export { useMediaQuery };
+//# sourceMappingURL=useMediaQuery.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.js","sources":["../../../../../src/hooks/useMediaQuery/useMediaQuery.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAKA;;AAGI;AAEA;;;AAGJ;AAEA;;;;;;;;;;;;;AAaG;;AAKD;AAEA;;;AAOI;;;;AAMF;AAEA;AACE;AACF;AAEA;AACE;AACA;AACE;AACF;;;AAIF;AACA;AACE;AACF;AACF;AAEA;AACF;;"}

package/dist/esm/hooks/useThrottledCallback/useThrottledCallback.js

@@ -0,0 +1,78 @@
+"use client";
+import { useRef, useMemo, useEffect } from 'react';
+
+/**
+ * Wrap a function so it fires at most once per `delay` ms. With both
+ * `leading` and `trailing` enabled (the default), the first call fires
+ * immediately and the most recent call inside the window fires at its
+ * end. Set `leading: false` to defer the first call; set
+ * `trailing: false` to drop calls inside the window.
+ *
+ * Typical use: drag handlers, scroll listeners, resize observers — places
+ * where the input rate exceeds the work rate and you want to bound the
+ * latter.
+ *
+ * The wrapper identity is stable across renders.
+ *
+ * @example
+ * ```tsx
+ * const onPointerMove = useThrottledCallback(updateGuide, 16);
+ * ```
+ */
+function useThrottledCallback(fn, delay, options = {}) {
+    const { leading = true, trailing = true } = options;
+    const fnRef = useRef(fn);
+    fnRef.current = fn;
+    const lastCallRef = useRef(0);
+    const timerRef = useRef(null);
+    const lastArgsRef = useRef(null);
+    const throttled = useMemo(() => {
+        const invoke = (now) => {
+            lastCallRef.current = now;
+            const args = lastArgsRef.current;
+            lastArgsRef.current = null;
+            if (args)
+                fnRef.current(...args);
+        };
+        const wrapper = (...args) => {
+            const now = Date.now();
+            if (lastCallRef.current === 0 && !leading) {
+                // Skip the leading fire by anchoring the window to "now".
+                lastCallRef.current = now;
+            }
+            const elapsed = now - lastCallRef.current;
+            lastArgsRef.current = args;
+            if (elapsed >= delay) {
+                if (timerRef.current !== null) {
+                    clearTimeout(timerRef.current);
+                    timerRef.current = null;
+                }
+                invoke(now);
+                return;
+            }
+            if (trailing && timerRef.current === null) {
+                timerRef.current = setTimeout(() => {
+                    timerRef.current = null;
+                    invoke(Date.now());
+                }, delay - elapsed);
+            }
+        };
+        wrapper.cancel = () => {
+            if (timerRef.current !== null) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+            lastArgsRef.current = null;
+            lastCallRef.current = 0;
+        };
+        return wrapper;
+    }, [delay, leading, trailing]);
+    useEffect(() => () => {
+        if (timerRef.current !== null)
+            clearTimeout(timerRef.current);
+    }, []);
+    return throttled;
+}
+
+export { useThrottledCallback };
+//# sourceMappingURL=useThrottledCallback.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useThrottledCallback.js","sources":["../../../../../src/hooks/useThrottledCallback/useThrottledCallback.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAQA;;;;;;;;;;;;;;;;;AAiBG;AACG;;AAOJ;AACA;AAEA;AACA;AACA;AAEA;AACE;AACE;AACA;AACA;AACA;AAAU;AACZ;AAEA;AACE;;;AAGE;;AAGF;AACA;AAEA;AACE;AACE;AACA;;;;;;AAOF;AACE;AACA;AACF;;AAEJ;AAEA;AACE;AACE;AACA;;AAEF;AACA;AACF;AAEA;;AAGF;AAEI;AAA+B;;AAKnC;AACF;;"}

package/dist/esm/index.js

@@ -7,10 +7,12 @@ 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 { BREAKPOINT_ORDER, breakpoints } from './theme/breakpoints.js';
 export { Accordion } from './components/layout/Accordion/Accordion.js';
 export { AccordionItem } from './components/layout/Accordion/AccordionItem.js';
 export { AccordionTrigger } from './components/layout/Accordion/AccordionTrigger.js';
 export { AccordionContent } from './components/layout/Accordion/AccordionContent.js';
+export { Card } from './components/layout/Card/Card.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';
@@ -30,6 +32,7 @@ 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 { HoverCard } from './components/primitives/HoverCard/HoverCard.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';
@@ -56,12 +59,16 @@ export { ColorPalette } from './components/controls/ColorPicker/ColorPalette.js'
 export { MATERIAL_PALETTE } from './components/controls/ColorPicker/palettes/material.js';
 export { TAILWIND_PALETTE } from './components/controls/ColorPicker/palettes/tailwind.js';
 export { EARTH_PALETTE, MONOCHROME_PALETTE, NEON_PALETTE, PASTEL_PALETTE, PROFESSIONAL_PALETTES, SKIN_TONES_PALETTE, VINTAGE_PALETTE } from './components/controls/ColorPicker/palettes/professional.js';
+export { Combobox } from './components/controls/Combobox/Combobox.js';
+export { FileUploader } from './components/controls/FileUploader/FileUploader.js';
+export { MultiSelect } from './components/controls/MultiSelect/MultiSelect.js';
 export { NumberInput } from './components/controls/NumberInput/NumberInput.js';
 export { KeyboardContextProvider, useEffectsOnKeyboard, useKeyboardContext } from './context/KeyboardContext.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 { TagInput } from './components/controls/TagInput/TagInput.js';
 export { VectorInput } from './components/controls/VectorInput/VectorInput.js';
 export { TreeView } from './components/controls/TreeView/TreeView.js';
 export { CurveEditor } from './components/controls/CurveEditor/CurveEditor.js';
@@ -76,12 +83,14 @@ 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 { Pagination } from './components/navigation/Pagination/Pagination.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';
 export { TabPanel } from './components/navigation/Tabs/TabPanel.js';
+export { DataTable } from './components/data/DataTable/DataTable.js';
 export { FormLabel } from './components/form/FormLabel.js';
 export { FormHelperText } from './components/form/FormHelperText.js';
 export { InputWrapper } from './components/form/InputWrapper.js';
@@ -94,12 +103,16 @@ 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 { CommandPalette } from './components/feedback/CommandPalette/CommandPalette.js';
+export { Drawer } from './components/feedback/Drawer/Drawer.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 { SkeletonLayout } from './components/feedback/Skeleton/SkeletonLayout.js';
 export { Spinner } from './components/feedback/Spinner/Spinner.js';
+export { Stat } from './components/feedback/Stat/Stat.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';
@@ -145,15 +158,18 @@ export { ChevronDownIcon } from './components/Icons/ChevronDownIcon.js';
 export { ChevronUpIcon } from './components/Icons/ChevronUpIcon.js';
 export { ClockIcon } from './components/Icons/ClockIcon.js';
 export { CloseIcon } from './components/Icons/CloseIcon.js';
+export { CloudUploadIcon } from './components/Icons/CloudUploadIcon.js';
 export { CodeIcon } from './components/Icons/CodeIcon.js';
 export { CopyIcon } from './components/Icons/CopyIcon.js';
 export { CutIcon } from './components/Icons/CutIcon.js';
 export { DownloadIcon } from './components/Icons/DownloadIcon.js';
 export { EditIcon } from './components/Icons/EditIcon.js';
 export { ErrorIcon } from './components/Icons/ErrorIcon.js';
+export { ExternalLinkIcon } from './components/Icons/ExternalLinkIcon.js';
 export { EyeDropperIcon } from './components/Icons/EyeDropperIcon.js';
 export { EyeIcon } from './components/Icons/EyeIcon.js';
 export { FilterIcon } from './components/Icons/FilterIcon.js';
+export { FirstIcon } from './components/Icons/FirstIcon.js';
 export { FolderIcon } from './components/Icons/FolderIcon.js';
 export { FullscreenIcon } from './components/Icons/FullscreenIcon.js';
 export { GridIcon } from './components/Icons/GridIcon.js';
@@ -161,6 +177,7 @@ export { HeartIcon } from './components/Icons/HeartIcon.js';
 export { HelpIcon } from './components/Icons/HelpIcon.js';
 export { HomeIcon } from './components/Icons/HomeIcon.js';
 export { InfoIcon } from './components/Icons/InfoIcon.js';
+export { LastIcon } from './components/Icons/LastIcon.js';
 export { LinkIcon } from './components/Icons/LinkIcon.js';
 export { ListIcon } from './components/Icons/ListIcon.js';
 export { LockIcon } from './components/Icons/LockIcon.js';
@@ -181,6 +198,7 @@ export { SuccessIcon } from './components/Icons/SuccessIcon.js';
 export { TagIcon } from './components/Icons/TagIcon.js';
 export { TrashIcon } from './components/Icons/TrashIcon.js';
 export { UndoIcon } from './components/Icons/UndoIcon.js';
+export { UnlinkIcon } from './components/Icons/UnlinkIcon.js';
 export { UnlockIcon } from './components/Icons/UnlockIcon.js';
 export { UploadIcon } from './components/Icons/UploadIcon.js';
 export { UserIcon } from './components/Icons/UserIcon.js';
@@ -222,6 +240,13 @@ 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 { useMediaQuery } from './hooks/useMediaQuery/useMediaQuery.js';
+export { useBreakpoint } from './hooks/useBreakpoint/useBreakpoint.js';
+export { useDebouncedValue } from './hooks/useDebounced/useDebouncedValue.js';
+export { useDebouncedCallback } from './hooks/useDebounced/useDebouncedCallback.js';
+export { useThrottledCallback } from './hooks/useThrottledCallback/useThrottledCallback.js';
+export { useIntersectionObserver } from './hooks/useIntersectionObserver/useIntersectionObserver.js';
+export { useListboxNav } from './hooks/useListboxNav/useListboxNav.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';

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/breakpoints.js

@@ -0,0 +1,27 @@
+/**
+ * Library breakpoint values (px) — used by responsive components like
+ * `Stack` and exposed via `useBreakpoint`.
+ *
+ * Values follow the same scale Stack already uses (576/768/992/1200) and
+ * are part of the public API.
+ *
+ * `xs` is always `0` and effectively means "no minimum"; every viewport
+ * matches `xs`.
+ */
+const breakpoints = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+};
+const BREAKPOINT_ORDER = [
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl',
+];
+
+export { BREAKPOINT_ORDER, breakpoints };
+//# sourceMappingURL=breakpoints.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breakpoints.js","sources":["../../../../src/theme/breakpoints.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;;;;;;;;;AASG;AACI,MAAM,WAAW,GAAG;AACzB,IAAA,EAAE,EAAE,CAAC;AACL,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,GAAG;AACP,IAAA,EAAE,EAAE,IAAI;;AAKH,MAAM,gBAAgB,GAA8B;IACzD,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;;;;;"}

package/dist/esm/theme/index.js

@@ -7,4 +7,5 @@ export { createLightTheme } from './createLightTheme.js';
 export { VanillaThemeProvider } from './VanillaThemeProvider.js';
 export { ThemeProvider } from './ThemeProvider.js';
 export { GLOBAL_SCROLLBARS_CLASS } from './globalScrollbars.css.js';
+export { BREAKPOINT_ORDER, breakpoints } from './breakpoints.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/theme/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/tokens/tokens.dark.css

@@ -1,4 +1,4 @@
-/* Entangle UI dark theme — token export (v0.8.2) */
+/* Entangle UI dark theme — token export (v0.9.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.8.2",
+  "$version": "0.9.0",
   "themes": {
     "dark": {
       "colors": {

package/dist/tokens/tokens.light.css

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

package/dist/types/components/Icons/CloudUploadIcon.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Cloud upload icon — a cloud silhouette with an upward arrow inside.
+ *
+ * Use for file-upload drop zones, "send to cloud" actions, and any other
+ * upload-to-remote affordance. For a generic up-arrow without the cloud,
+ * use `UploadIcon` instead.
+ *
+ * @example
+ * ```tsx
+ * <CloudUploadIcon size="lg" color="muted" />
+ * ```
+ */
+declare const CloudUploadIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { CloudUploadIcon };

package/dist/types/components/Icons/ExternalLinkIcon.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * External link icon — a box with an arrow exiting the top-right corner.
+ *
+ * Use for links that open in a new tab/window or otherwise navigate
+ * outside the current surface. For an in-app link (chain shape) use
+ * `LinkIcon` instead.
+ *
+ * @example
+ * ```tsx
+ * <Link href="https://example.com" target="_blank">
+ *   Docs <ExternalLinkIcon size="sm" decorative />
+ * </Link>
+ * ```
+ */
+declare const ExternalLinkIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { ExternalLinkIcon };

package/dist/types/components/Icons/FirstIcon.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Skip to first icon — vertical bar plus a leftward chevron.
+ *
+ * Used by Pagination's "first page" button and similar
+ * jump-to-start controls.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="First page"><FirstIcon /></IconButton>
+ * ```
+ */
+declare const FirstIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { FirstIcon };

package/dist/types/components/Icons/LastIcon.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Skip to last icon — rightward chevron plus a vertical bar.
+ *
+ * Used by Pagination's "last page" button and similar
+ * jump-to-end controls.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Last page"><LastIcon /></IconButton>
+ * ```
+ */
+declare const LastIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { LastIcon };

package/dist/types/components/Icons/UnlinkIcon.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+
+/**
+ * Unlink icon — a broken chain.
+ *
+ * Indicates that two values are decoupled (no longer linked). Pair with
+ * `LinkIcon` to render a toggle: link → unlink. Common in coordinate
+ * inputs, transform locks, color-channel groups.
+ *
+ * @example
+ * ```tsx
+ * <IconButton aria-label="Unlink axes">
+ *   <UnlinkIcon />
+ * </IconButton>
+ * ```
+ */
+declare const UnlinkIcon: React.NamedExoticComponent<Omit<{
+    children: React.ReactNode;
+    size?: IconSize | undefined;
+    color?: IconColor | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+    decorative?: boolean | undefined;
+    testId?: string | undefined;
+    ref?: React.Ref<SVGSVGElement> | undefined;
+}, "children">>;
+
+export { UnlinkIcon };