entangle-ui 0.8.2 → 0.10.0

package/dist/types/theme/lightThemeValues.d.ts

@@ -154,7 +154,7 @@ declare const lightThemeValues: {
             readonly dropOverlay: "rgba(0, 102, 204, 0.15)";
         };
     };
-    readonly storybook: {
+    readonly demo: {
         readonly canvas: {
             readonly gradientStart: "#fafafa";
             readonly gradientMid: "#f0f0f3";

package/dist/types/theme/themeContractData.d.ts

@@ -148,11 +148,11 @@ declare const themeContractData: {
             readonly dropOverlay: "etui-shell-dock-drop-overlay";
         };
     };
-    readonly storybook: {
+    readonly demo: {
         readonly canvas: {
-            readonly gradientStart: "etui-storybook-gradient-start";
-            readonly gradientMid: "etui-storybook-gradient-mid";
-            readonly gradientEnd: "etui-storybook-gradient-end";
+            readonly gradientStart: "etui-demo-gradient-start";
+            readonly gradientMid: "etui-demo-gradient-mid";
+            readonly gradientEnd: "etui-demo-gradient-end";
         };
     };
 };

package/dist/types/theme-values.d.ts

@@ -1,6 +1,6 @@
+import { themeContractData } from './theme/themeContractData.js';
 import { DarkThemeValues } from './theme/darkThemeValues.js';
 export { darkThemeValues } from './theme/darkThemeValues.js';
-import { themeContractData } from './theme/themeContractData.js';
 export { LightThemeValues, lightThemeValues } from './theme/lightThemeValues.js';
 
 type ThemeValues = DarkThemeValues;

package/dist/types/types/keyframe.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Shared keyframe / curve data model.
+ *
+ * Used by both CurveEditor and Timeline so they speak the same keyframe
+ * language: Timeline tracks reuse `CurveKeyframe`, and Timeline's graph mode
+ * assembles a `CurveData` per track to reuse `evaluateCurve`. Promoted out of
+ * CurveEditor so neither component depends on the other.
+ */
+/**
+ * Tangent handle mode — controls how handles behave around a keyframe.
+ * - `free`: Each handle moves independently
+ * - `aligned`: Handles stay co-linear but can differ in length
+ * - `mirrored`: Handles are symmetric (same angle and length)
+ * - `auto`: Smooth catmull-rom style — handles auto-computed from neighbors
+ * - `linear`: No handles — straight line segments
+ * - `step`: Constant value until next keyframe (hold / step function)
+ */
+type TangentMode = 'free' | 'aligned' | 'mirrored' | 'auto' | 'linear' | 'step';
+/**
+ * Single control point (keyframe) on the curve.
+ */
+interface CurveKeyframe {
+    /** X position in domain space (e.g., 0-1 for normalized, 0-100 for frames) */
+    x: number;
+    /** Y value at this position */
+    y: number;
+    /** Left tangent handle offset (relative to keyframe position) */
+    handleIn: {
+        x: number;
+        y: number;
+    };
+    /** Right tangent handle offset (relative to keyframe position) */
+    handleOut: {
+        x: number;
+        y: number;
+    };
+    /** Tangent mode for this keyframe */
+    tangentMode: TangentMode;
+    /** Optional unique ID (auto-generated if not provided) */
+    id?: string;
+}
+/**
+ * Complete curve data model.
+ */
+interface CurveData {
+    /** Ordered array of keyframes (sorted by x) */
+    keyframes: CurveKeyframe[];
+    /** Domain bounds — x range */
+    domainX: [number, number];
+    /** Domain bounds — y range */
+    domainY: [number, number];
+    /**
+     * Pre-infinity behavior — what happens before the first keyframe
+     * @default "constant"
+     */
+    preInfinity?: 'constant' | 'linear' | 'cycle' | 'pingpong';
+    /**
+     * Post-infinity behavior — what happens after the last keyframe
+     * @default "constant"
+     */
+    postInfinity?: 'constant' | 'linear' | 'cycle' | 'pingpong';
+}
+
+export type { CurveData, CurveKeyframe, TangentMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "entangle-ui",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "type": "module",
   "sideEffects": [
     "*.css",
@@ -40,10 +40,9 @@
     "LICENSE"
   ],
   "scripts": {
-    "dev": "storybook dev -p 6006",
+    "dev": "npm run --prefix docs-site dev",
     "build": "rollup -c && npm run build:tokens",
     "build:tokens": "tsx scripts/export-tokens.ts",
-    "build-storybook": "storybook build",
     "test": "vitest run",
     "test:ui": "vitest --ui",
     "test:failed": "vitest run --reporter=./scripts/failed-tests-reporter.js",
@@ -57,14 +56,22 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "format:staged": "prettier --write --cache --ignore-unknown",
-    "storybook": "storybook dev -p 6006",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "changeset publish",
     "size": "size-limit",
     "docs:dev": "npm run --prefix docs-site dev",
     "docs:build": "npm run --prefix docs-site build",
-    "docs:preview": "npm run --prefix docs-site preview"
+    "docs:preview": "npm run --prefix docs-site preview",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx,js,jsx}": [
+      "eslint --fix"
+    ],
+    "*.{ts,tsx,js,jsx,json,md,mdx,css,html,yaml,yml}": [
+      "prettier --write --cache --ignore-unknown"
+    ]
   },
   "keywords": [
     "react",
@@ -90,10 +97,11 @@
   "peerDependencies": {
     "@base-ui/react": "^1.1.0",
     "@floating-ui/react": "^0.27.17",
+    "@tanstack/react-virtual": "^3.13.0",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
-    "react": ">=19.1.0",
-    "react-dom": ">=19.1.0"
+    "react": ">=19.2.0",
+    "react-dom": ">=19.2.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
@@ -104,18 +112,15 @@
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-typescript": "^12.3.0",
     "@size-limit/preset-small-lib": "^12.0.0",
-    "@storybook/addon-docs": "^10.2.8",
-    "@storybook/addon-onboarding": "^10.2.8",
-    "@storybook/addon-themes": "^10.2.8",
-    "@storybook/react-vite": "^10.2.8",
+    "@tanstack/react-virtual": "^3.13.24",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.55.0",
-    "@typescript-eslint/parser": "^8.55.0",
+    "@typescript-eslint/eslint-plugin": "^8.60.0",
+    "@typescript-eslint/parser": "^8.60.0",
     "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/rollup-plugin": "^1.5.1",
     "@vanilla-extract/vite-plugin": "^5.1.4",
@@ -124,17 +129,26 @@
     "@vitest/eslint-plugin": "^1.6.7",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "^10.2.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-testing-library": "^7.16.2",
+    "eslint-plugin-unicorn": "^64.0.0",
     "globals": "^16.5.0",
+    "husky": "^9.1.7",
     "jsdom": "^26.1.0",
+    "lint-staged": "^17.0.5",
     "prettier": "^3.8.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "rollup": "^4.57.1",
     "rollup-plugin-dts": "^6.3.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "size-limit": "^12.0.0",
-    "storybook": "^10.2.8",
+    "tslib": "^2.8.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "vite": "^6.3.5",

package/dist/esm/assets/src/components/navigation/Menu/Menu.css.ts.vanilla-DD0c5D10.css

@@ -1,67 +0,0 @@
-.Menu_menuContentStyle__1pkkb710 {
-  min-width: 200px;
-  background: var(--etui-color-bg-elevated);
-  border: 1px solid var(--etui-color-border-default);
-  border-radius: var(--etui-radius-md);
-  box-shadow: var(--etui-shadow-md);
-  padding: var(--etui-spacing-sm);
-  z-index: var(--etui-z-dropdown);
-  outline: none;
-}
-.Menu_interactiveItemBase__1pkkb711 {
-  display: flex;
-  align-items: center;
-  padding: var(--etui-spacing-sm);
-  border-radius: var(--etui-radius-sm);
-  cursor: pointer;
-  user-select: none;
-  outline: none;
-  color: var(--etui-color-text-primary);
-}
-.Menu_interactiveItemBase__1pkkb711[data-highlighted] {
-  background: var(--etui-color-surface-hover);
-}
-.Menu_menuItemDisabledStyle__1pkkb712 {
-  color: var(--etui-color-text-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.Menu_menuItemContentStyle__1pkkb713 {
-  display: flex;
-  align-items: center;
-  gap: var(--etui-spacing-sm);
-  flex: 1;
-  min-height: 20px;
-}
-.Menu_iconContainerStyle__1pkkb714 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-.Menu_iconVisibleStyle__1pkkb715 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  visibility: visible;
-}
-.Menu_iconHiddenStyle__1pkkb716 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  visibility: hidden;
-}
-.Menu_chevronIconStyle__1pkkb717 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: var(--etui-spacing-sm);
-  transform: rotate(90deg);
-  color: var(--etui-color-text-muted);
-}
-.Menu_separatorStyle__1pkkb718 {
-  margin: var(--etui-spacing-xs) 0;
-  border-top: 1px solid var(--etui-color-border-default);
-}

package/dist/esm/components/navigation/ContextMenu/useContextMenuTarget.js

@@ -1,53 +0,0 @@
-"use client";
-import { useState, useCallback, useEffect } from 'react';
-
-function useContextMenuTarget(payload) {
-    const [context, setContext] = useState({
-        event: null,
-        target: null,
-        payload,
-    });
-    const [targetNode, setTargetNode] = useState(null);
-    const updateContext = useCallback((event, target) => {
-        setContext({
-            event,
-            target,
-            payload,
-        });
-    }, [payload]);
-    const onContextMenuCapture = useCallback((event) => {
-        const target = event.target instanceof HTMLElement
-            ? event.target
-            : event.currentTarget;
-        updateContext(event.nativeEvent, target);
-    }, [updateContext]);
-    const targetRef = useCallback((node) => {
-        setTargetNode(node);
-    }, []);
-    useEffect(() => {
-        if (!targetNode)
-            return;
-        const handleContextMenu = (event) => {
-            const target = event.target instanceof HTMLElement ? event.target : targetNode;
-            updateContext(event, target);
-        };
-        targetNode.addEventListener('contextmenu', handleContextMenu, true);
-        return () => {
-            targetNode.removeEventListener('contextmenu', handleContextMenu, true);
-        };
-    }, [targetNode, updateContext]);
-    useEffect(() => {
-        setContext(prev => ({
-            ...prev,
-            payload,
-        }));
-    }, [payload]);
-    return {
-        context,
-        onContextMenuCapture,
-        targetRef,
-    };
-}
-
-export { useContextMenuTarget };
-//# sourceMappingURL=useContextMenuTarget.js.map

package/dist/esm/components/navigation/ContextMenu/useContextMenuTarget.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContextMenuTarget.js","sources":["../../../../../../src/components/navigation/ContextMenu/useContextMenuTarget.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AASM;AAGJ;AACE;AACA;;AAED;;;AAKG;;;;AAIC;AACH;AAIF;AAEI;;AAGI;AACJ;AACF;AAIF;;;;AAKE;;AAEA;AACE;AAEA;AACF;;AAGA;;AAEA;AACF;;AAGE;AACE;;AAED;AACH;;;;;;AAOF;;"}

package/dist/esm/components/navigation/Menu/Menu.helpers.js

@@ -1,53 +0,0 @@
-"use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Menu } from '@base-ui/react/menu';
-import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
-import { Text } from '../../primitives/Text/Text.js';
-import { Stack } from '../../layout/Stack/Stack.js';
-import { cx } from '../../../utils/cx.js';
-import { menuContentStyle, iconVisibleStyle, menuItemDisabledStyle, menuItemStyle, iconHiddenStyle, checkboxItemStyle, radioItemStyle, menuItemContentStyle, iconContainerStyle, chevronIconStyle } from './Menu.css.js';
-
-/**
- * Helper function to render menu item content with consistent structure.
- */
-const renderMenuItemContent = (item, iconSlot) => (jsxs("div", { className: menuItemContentStyle, children: [iconSlot && jsx("div", { className: iconContainerStyle, children: iconSlot }), jsxs(Stack, { direction: "row", justify: "space-between", align: "center", expand: true, children: [jsx(Text, { variant: "caption", size: "md", color: "primary", children: item.label }), item.subMenu && (jsx("div", { className: chevronIconStyle, children: jsx(ChevronUpIcon, { size: "sm" }) }))] })] }));
-/**
- * Helper function to render a radio menu item.
- */
-const renderRadioItem = (item, _group, isSelected, radioIcon, clickHandler) => (jsx(Menu.RadioItem, { value: item.id, disabled: item.disabled, onClick: clickHandler, className: cx(radioItemStyle, item.disabled && menuItemDisabledStyle), children: renderMenuItemContent(item, jsx(Menu.RadioItemIndicator, { children: jsx("div", { className: isSelected ? iconVisibleStyle : iconHiddenStyle, children: radioIcon }) })) }, item.id));
-/**
- * Helper function to render a checkbox menu item.
- */
-const renderCheckboxItem = (item, _group, isSelected, checkboxIcon, clickHandler) => (jsx(Menu.CheckboxItem, { checked: isSelected, disabled: item.disabled, onClick: clickHandler, className: cx(checkboxItemStyle, item.disabled && menuItemDisabledStyle), children: renderMenuItemContent(item, jsx(Menu.CheckboxItemIndicator, { children: jsx("div", { className: isSelected ? iconVisibleStyle : iconHiddenStyle, children: checkboxIcon }) })) }, item.id));
-/**
- * Helper function to render a regular menu item without selection state.
- */
-const renderRegularItem = (item, _group, clickHandler) => (jsx(Menu.Item, { disabled: item.disabled, onClick: clickHandler, className: cx(menuItemStyle, item.disabled && menuItemDisabledStyle), children: renderMenuItemContent(item, item.icon ? (jsx("div", { className: iconVisibleStyle, children: item.icon })) : undefined) }, item.id));
-/**
- * Helper function to render a menu item based on group selection type.
- */
-const renderMenuItem = (item, group, isSelected, checkboxIcon, radioIcon, clickHandler) => {
-    switch (group.itemSelectionType) {
-        case 'radio':
-            return renderRadioItem(item, group, isSelected, radioIcon, clickHandler);
-        case 'checkbox':
-            return renderCheckboxItem(item, group, isSelected, checkboxIcon, clickHandler);
-        case 'none':
-        default:
-            return renderRegularItem(item, group, clickHandler);
-    }
-};
-/**
- * Helper function to render a menu item with optional submenu wrapper.
- */
-const renderItemWithSubmenu = (item, group, isSelected, checkboxIcon, radioIcon, selectedItems, clickHandler, onChange, MenuComponent) => {
-    const menuItem = renderMenuItem(item, group, isSelected, checkboxIcon, radioIcon, clickHandler);
-    // If item has submenu, wrap it in submenu structure
-    if (item.subMenu) {
-        return (jsxs(Menu.Root, { children: [jsx(Menu.SubmenuTrigger, { children: menuItem }), jsx(Menu.Portal, { children: jsx(Menu.Positioner, { children: jsx(Menu.Popup, { className: menuContentStyle, children: jsx(MenuComponent, { isSubmenu: true, config: item.subMenu, selectedItems: selectedItems, onChange: onChange, checkboxIcon: checkboxIcon, radioIcon: radioIcon }) }) }) })] }, item.id));
-    }
-    return menuItem;
-};
-
-export { renderCheckboxItem, renderItemWithSubmenu, renderMenuItem, renderMenuItemContent, renderRadioItem, renderRegularItem };
-//# sourceMappingURL=Menu.helpers.js.map

package/dist/esm/components/navigation/Menu/Menu.helpers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Menu.helpers.js","sources":["../../../../../../src/components/navigation/Menu/Menu.helpers.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AA6BA;;AAEG;AACI;AAmBP;;AAEG;AACI;AAyBP;;AAEG;AACI;AAyBP;;AAEG;AACI;AAoBP;;AAEG;AACI;AAQL;AACE;AACE;AACF;AACE;AAOF;AACA;;;AAGJ;AAEA;;AAEG;;AAYD;;AAUA;AACE;;AAqBF;AACF;;"}

package/dist/esm/components/navigation/Menu/useMenu.js

@@ -1,88 +0,0 @@
-"use client";
-import React, { useCallback } from 'react';
-
-/**
- * Hook for managing menu selection state and interactions.
- * Handles radio/checkbox logic, state updates, and submenu visibility.
- */
-const useMenu = (selectedItems = {}, onChange) => {
-    const [openSubmenus, setOpenSubmenus] = React.useState(new Set());
-    const handleItemClick = useCallback((groupId, itemId, group) => {
-        if (!onChange)
-            return;
-        const currentSelection = selectedItems[groupId] ?? [];
-        let newSelection;
-        switch (group.itemSelectionType) {
-            case 'radio':
-                // Radio: single selection, replace current
-                newSelection = [itemId];
-                break;
-            case 'checkbox':
-                // Checkbox: toggle selection
-                newSelection = currentSelection.includes(itemId)
-                    ? currentSelection.filter(id => id !== itemId)
-                    : [...currentSelection, itemId];
-                break;
-            case 'none':
-            default:
-                // No selection state management
-                return;
-        }
-        onChange({
-            ...selectedItems,
-            [groupId]: newSelection,
-        });
-    }, [selectedItems, onChange]);
-    const isItemSelected = useCallback((groupId, itemId) => {
-        return selectedItems[groupId]?.includes(itemId) ?? false;
-    }, [selectedItems]);
-    const toggleSubmenu = useCallback((itemId) => {
-        setOpenSubmenus(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(itemId)) {
-                newSet.delete(itemId);
-            }
-            else {
-                newSet.add(itemId);
-            }
-            return newSet;
-        });
-    }, []);
-    const openSubmenu = useCallback((itemId) => {
-        setOpenSubmenus(prev => new Set(prev).add(itemId));
-    }, []);
-    const closeSubmenu = useCallback((itemId) => {
-        setOpenSubmenus(prev => {
-            const newSet = new Set(prev);
-            newSet.delete(itemId);
-            return newSet;
-        });
-    }, []);
-    const isSubmenuOpen = useCallback((itemId) => {
-        return openSubmenus.has(itemId);
-    }, [openSubmenus]);
-    return {
-        handleItemClick,
-        isItemSelected,
-        toggleSubmenu,
-        openSubmenu,
-        closeSubmenu,
-        isSubmenuOpen,
-    };
-};
-/**
- * Helper function to create a common click handler for menu items.
- */
-const createItemClickHandler = (item, group, handleItemClick, toggleSubmenu) => (event) => {
-    // Call original onClick handler
-    item.onClick(item.id, event.nativeEvent);
-    // Handle submenu toggle for click trigger
-    if (item.subMenu && item.submenuTrigger === 'click') {
-        toggleSubmenu(item.id);
-    }
-    // Handle selection state
-    handleItemClick(group.id, item.id, group);
-};
-
-export { createItemClickHandler, useMenu };
-//# sourceMappingURL=useMenu.js.map

package/dist/esm/components/navigation/Menu/useMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMenu.js","sources":["../../../../../../src/components/navigation/Menu/useMenu.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAMA;;;AAGG;AACI;AAIL;;AAMI;;;AAGA;AAEA;AACE;;AAEE;;AAEF;;AAEE;AACE;AACA;;AAEJ;AACA;;;;AAKF;AACE;;AAED;AACH;;;AAOA;AAIF;;AAEI;AACA;AACE;;;AAEA;;AAEF;AACF;;AAGF;AACE;;AAGF;;AAEI;AACA;AACA;AACF;;AAGF;AAEI;AACF;;;;;;;;;AAYJ;AAEA;;AAEG;AACI;;;;;AAiBD;;;;AAKJ;;"}

package/dist/types/components/navigation/ContextMenu/useContextMenuTarget.d.ts

@@ -1,5 +0,0 @@
-import { UseContextMenuTargetResult } from './ContextMenu.types.js';
-
-declare function useContextMenuTarget<TPayload = unknown>(payload?: TPayload): UseContextMenuTargetResult<TPayload>;
-
-export { useContextMenuTarget };

package/dist/types/components/navigation/Menu/useMenu.d.ts

@@ -1,16 +0,0 @@
-import { MenuSelection, MenuGroup } from './Menu.types.js';
-
-/**
- * Hook for managing menu selection state and interactions.
- * Handles radio/checkbox logic, state updates, and submenu visibility.
- */
-declare const useMenu: (selectedItems?: MenuSelection, onChange?: (selection: MenuSelection) => void) => {
-    handleItemClick: (groupId: string, itemId: string, group: MenuGroup) => void;
-    isItemSelected: (groupId: string, itemId: string) => boolean;
-    toggleSubmenu: (itemId: string) => void;
-    openSubmenu: (itemId: string) => void;
-    closeSubmenu: (itemId: string) => void;
-    isSubmenuOpen: (itemId: string) => boolean;
-};
-
-export { useMenu };