entangle-ui 0.2.0 → 0.4.0

package/dist/types/components/shell/Toolbar/Toolbar.types.d.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+
+type ToolbarOrientation = 'horizontal' | 'vertical';
+type ToolbarSize = 'sm' | 'md';
+type ToolbarButtonVariant = 'default' | 'ghost' | 'filled';
+interface ToolbarBaseProps extends BaseComponent<HTMLDivElement> {
+    /** Orientation of the toolbar */
+    $orientation?: ToolbarOrientation;
+    /** Size of toolbar items */
+    $size?: ToolbarSize;
+    /** Children (Toolbar.Button, Toolbar.Group, Toolbar.Separator, etc.) */
+    children?: ReactNode;
+    /** ARIA label for the toolbar */
+    'aria-label'?: string;
+}
+type ToolbarProps = Prettify<ToolbarBaseProps>;
+interface ToolbarButtonBaseProps extends Omit<BaseComponent<HTMLButtonElement>, 'onClick'> {
+    /** Click handler */
+    onClick?: () => void;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Label text (visually hidden if icon provided) */
+    children?: ReactNode;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Visual variant */
+    $variant?: ToolbarButtonVariant;
+    /** Disabled state */
+    disabled?: boolean;
+}
+type ToolbarButtonProps = Prettify<ToolbarButtonBaseProps>;
+interface ToolbarToggleBaseProps extends BaseComponent<HTMLButtonElement> {
+    /** Whether the toggle is pressed */
+    pressed: boolean;
+    /** Called when the pressed state changes */
+    onPressedChange: (pressed: boolean) => void;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Label text */
+    children?: ReactNode;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+type ToolbarToggleProps = Prettify<ToolbarToggleBaseProps>;
+interface ToolbarGroupBaseProps extends BaseComponent<HTMLDivElement> {
+    /** Group label for accessibility */
+    'aria-label'?: string;
+    /** Children (Toolbar.Button, Toolbar.Toggle) */
+    children?: ReactNode;
+}
+type ToolbarGroupProps = Prettify<ToolbarGroupBaseProps>;
+type ToolbarSeparatorProps = Prettify<BaseComponent<HTMLDivElement>>;
+type ToolbarSpacerProps = Prettify<BaseComponent<HTMLDivElement>>;
+
+export type { ToolbarBaseProps, ToolbarButtonBaseProps, ToolbarButtonProps, ToolbarButtonVariant, ToolbarGroupBaseProps, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparatorProps, ToolbarSize, ToolbarSpacerProps, ToolbarToggleBaseProps, ToolbarToggleProps };

package/dist/types/index.d.ts

@@ -0,0 +1,124 @@
+export { ThemeVars, vars } from './theme/contract.css.js';
+export { DarkThemeValues, darkThemeValues } from './theme/darkTheme.css.js';
+export { Brand, DeepPartial, DeepReadonly, KeyOf, LiteralUnion, NonEmptyArray, Prettify, RequireFields, StrictExclude, ValueOf } from './types/utilities.js';
+export { VanillaThemeProvider, VanillaThemeProviderProps } from './theme/VanillaThemeProvider.js';
+export { ThemeProvider, ThemeProviderProps } from './theme/ThemeProvider.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 { AccordionContentProps, AccordionItemProps, AccordionProps, AccordionSize, AccordionTriggerProps, AccordionVariant } from './components/layout/Accordion/Accordion.types.js';
+export { Flex, FlexAlign, FlexAlignContent, FlexDirection, FlexJustify, FlexProps, FlexSpacing, FlexWrap } from './components/layout/Flex/Flex.js';
+export { Grid, GridProps, GridSize, GridSpacing } from './components/layout/Grid/Grid.js';
+export { PanelSurface } from './components/layout/PanelSurface/PanelSurface.js';
+export { PanelSurfaceBodyProps, PanelSurfaceFooterProps, PanelSurfaceHeaderProps, PanelSurfaceProps, PanelSurfaceSize } from './components/layout/PanelSurface/PanelSurface.types.js';
+export { ScrollArea } from './components/layout/ScrollArea/ScrollArea.js';
+export { ScrollAreaDirection, ScrollAreaProps, ScrollbarVisibility } from './components/layout/ScrollArea/ScrollArea.types.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 { PanelConfig, PanelSize, SplitDirection, SplitPanePanelProps, SplitPaneProps } from './components/layout/SplitPane/SplitPane.types.js';
+export { Stack } from './components/layout/Stack/Stack.js';
+export { Button, ButtonProps, ButtonSize, ButtonVariant } from './components/primitives/Button/Button.js';
+export { Checkbox } from './components/primitives/Checkbox/Checkbox.js';
+export { CheckboxGroup } from './components/primitives/Checkbox/CheckboxGroup.js';
+export { CheckboxGroupProps, CheckboxProps, CheckboxSize, CheckboxVariant } from './components/primitives/Checkbox/Checkbox.types.js';
+export { Collapsible } from './components/primitives/Collapsible/Collapsible.js';
+export { CollapsibleProps, CollapsibleSize } from './components/primitives/Collapsible/Collapsible.types.js';
+export { Icon, IconProps, IconSize } from './components/primitives/Icon/Icon.js';
+export { IconButton } from './components/primitives/IconButton/IconButton.js';
+export { Input, InputProps, InputSize } from './components/primitives/Input/Input.js';
+export { Paper, PaperElevation, PaperNestLevel, PaperProps, PaperSpacing } 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 { PopoverCloseProps, PopoverContentProps, PopoverPlacement, PopoverProps, PopoverTriggerProps } from './components/primitives/Popover/Popover.types.js';
+export { Switch, SwitchProps, SwitchSize } from './components/primitives/Switch/Switch.js';
+export { Text, TextAlign, TextColor, TextElement, TextLineHeight, TextProps, TextSize, TextVariant, TextWeight } from './components/primitives/Text/Text.js';
+export { Tooltip, TooltipProps } from './components/primitives/Tooltip/Tooltip.js';
+export { CollisionAvoidance, TooltipCollisionConfig, TooltipCollisionStrategy, TooltipPlacement } from './components/primitives/Tooltip/types.js';
+export { BaseComponent, Size, Variant } from './types/common.js';
+export { ColorPicker } from './components/controls/ColorPicker/ColorPicker.js';
+export { ColorSwatch } from './components/controls/ColorPicker/ColorSwatch.js';
+export { EyeDropper, EyeDropperProps } from './components/controls/ColorPicker/EyeDropper.js';
+export { ColorPalette, ColorPaletteProps } from './components/controls/ColorPicker/ColorPalette.js';
+export { MATERIAL_PALETTE, Palette, PaletteColor, PaletteShade } 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 { ColorFormat, ColorInputMode, ColorPickerProps, ColorPickerSize, ColorPreset, ColorSwatchPublicProps as ColorSwatchProps } from './components/controls/ColorPicker/ColorPicker.types.js';
+export { NumberInput, NumberInputProps } from './components/controls/NumberInput/NumberInput.js';
+export { Select } from './components/controls/Select/Select.js';
+export { SelectOptionGroup, SelectOptionItem, SelectProps, SelectSize, SelectVariant } from './components/controls/Select/Select.types.js';
+export { Slider, SliderProps } from './components/controls/Slider/Slider.js';
+export { VectorInput } from './components/controls/VectorInput/VectorInput.js';
+export { VectorColorPreset, VectorDimension, VectorInputProps, VectorInputSize, VectorLabelPreset } from './components/controls/VectorInput/VectorInput.types.js';
+export { TreeView } from './components/controls/TreeView/TreeView.js';
+export { TreeNodeData, TreeNodeState, TreeSelectionMode, TreeViewProps, TreeViewSize } from './components/controls/TreeView/TreeView.types.js';
+export { CurveEditor } from './components/controls/CurveEditor/CurveEditor.js';
+export { CurveBackgroundInfo, CurveBottomBarInfo, CurveData, CurveEditorProps, CurveEditorSize, CurveKeyframe, CurvePreset, TangentMode } from './components/controls/CurveEditor/CurveEditor.types.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 { CartesianPickerInfo, CartesianPickerProps, CartesianPickerSize } from './components/controls/CartesianPicker/CartesianPicker.types.js';
+export { ContextMenu } from './components/navigation/ContextMenu/ContextMenu.js';
+export { useContextMenuTarget } from './components/navigation/ContextMenu/useContextMenuTarget.js';
+export { ContextMenuBaseProps, ContextMenuConfig, ContextMenuProps, ContextMenuTargetDetails, UseContextMenuTargetResult } from './components/navigation/ContextMenu/ContextMenu.types.js';
+export { Menu } from './components/navigation/Menu/Menu.js';
+export { useMenu } from './components/navigation/Menu/useMenu.js';
+export { ItemSelectionType, MenuBaseProps, MenuConfig, MenuGroup, MenuItem, MenuProps, MenuSelection, SubmenuTrigger } from './components/navigation/Menu/Menu.types.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 { TabListProps, TabPanelProps, TabProps, TabsProps, TabsSize, TabsVariant } from './components/navigation/Tabs/Tabs.types.js';
+export { FormLabel, FormLabelProps } from './components/form/FormLabel.js';
+export { FormHelperText, FormHelperTextProps } from './components/form/FormHelperText.js';
+export { InputWrapper, InputWrapperProps } from './components/form/InputWrapper.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 { DialogBodyProps, DialogFooterProps, DialogHeaderProps, DialogProps, DialogSize } from './components/feedback/Dialog/Dialog.types.js';
+export { ToastProvider } from './components/feedback/Toast/ToastProvider.js';
+export { useToast } from './components/feedback/Toast/useToast.js';
+export { ToastData, ToastPosition, ToastProviderProps, ToastSeverity, UseToastReturn } from './components/feedback/Toast/Toast.types.js';
+export { PropertyPanel } from './components/editor/PropertyInspector/PropertyPanel.js';
+export { PropertySection } from './components/editor/PropertyInspector/PropertySection.js';
+export { PropertyRow } from './components/editor/PropertyInspector/PropertyRow.js';
+export { PropertyGroup } from './components/editor/PropertyInspector/PropertyGroup.js';
+export { usePropertyUndo } from './components/editor/PropertyInspector/usePropertyUndo.js';
+export { PropertyGroupProps, PropertyInspectorSize, PropertyPanelProps, PropertyRowProps, PropertySectionProps, PropertyUndoEntry, UsePropertyUndoOptions, UsePropertyUndoReturn } from './components/editor/PropertyInspector/PropertyInspector.types.js';
+export { ViewportGizmo } from './components/editor/ViewportGizmo/ViewportGizmo.js';
+export { GizmoAxisColorPreset, GizmoAxisConfig, GizmoHitRegion, GizmoOrientation, GizmoPresetView, GizmoUpAxis, OrbitDelta, ViewportGizmoProps, ViewportGizmoSize } from './components/editor/ViewportGizmo/ViewportGizmo.types.js';
+export { ProjectedArm, Vec3, axisToPresetView, eulerToRotationMatrix, gizmoHitTest, presetViewToOrientation, projectAxes, projectToCanvas, quaternionToEuler } from './components/editor/ViewportGizmo/gizmoMath.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';
+export { ChatBubble } from './components/editor/ChatPanel/ChatBubble.js';
+export { ChatInput } from './components/editor/ChatPanel/ChatInput.js';
+export { ChatTypingIndicator } from './components/editor/ChatPanel/ChatTypingIndicator.js';
+export { ChatToolCall } from './components/editor/ChatPanel/ChatToolCall.js';
+export { ChatCodeBlock } from './components/editor/ChatPanel/ChatCodeBlock.js';
+export { ChatAttachmentChip } from './components/editor/ChatPanel/ChatAttachment.js';
+export { ChatContextChip } from './components/editor/ChatPanel/ChatContextChip.js';
+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 { useChatMessages } from './components/editor/ChatPanel/useChatMessages.js';
+export { useChatInput } from './components/editor/ChatPanel/useChatInput.js';
+export { useChatScroll } from './components/editor/ChatPanel/useChatScroll.js';
+export { ChatActionBarProps, ChatAttachmentChipProps, ChatAttachmentData, ChatBubbleProps, ChatCodeBlockProps, ChatContextChipProps, ChatEmptyStateProps, ChatInputProps, ChatInputToolbarProps, ChatMessageData, ChatMessageListProps, ChatMessageProps, ChatMessageRole, ChatMessageStatus, ChatPanelDensity, ChatPanelProps, ChatToolCallData, ChatToolCallProps, ChatToolCallStatus, ChatTypingIndicatorProps, UseChatInputOptions, UseChatInputReturn, UseChatMessagesOptions, UseChatMessagesReturn, UseChatScrollOptions, UseChatScrollReturn } from './components/editor/ChatPanel/ChatPanel.types.js';
+export { AppShell, useAppShell } from './components/shell/AppShell/AppShell.js';
+export { AppShellContextValue, AppShellProps, AppShellSlotProps, AppShellToolbarSlotProps, ToolbarPosition } from './components/shell/AppShell/AppShell.types.js';
+export { FloatingManager, FloatingPanel } from './components/shell/FloatingPanel/FloatingPanel.js';
+export { FloatingManagerProps, FloatingPanelProps, FloatingPanelSize, Position } from './components/shell/FloatingPanel/FloatingPanel.types.js';
+export { MenuBar } from './components/shell/MenuBar/MenuBar.js';
+export { MenuBarItemProps, MenuBarMenuProps, MenuBarProps, MenuBarSeparatorProps, MenuBarSize, MenuBarSubProps } from './components/shell/MenuBar/MenuBar.types.js';
+export { StatusBar } from './components/shell/StatusBar/StatusBar.js';
+export { StatusBarItemProps, StatusBarProps, StatusBarSectionProps, StatusBarSectionSide, StatusBarSize, StatusBarVariant } from './components/shell/StatusBar/StatusBar.types.js';
+export { Toolbar } from './components/shell/Toolbar/Toolbar.js';
+export { ToolbarButtonProps, ToolbarButtonVariant, ToolbarGroupProps, ToolbarOrientation, ToolbarProps, ToolbarSeparatorProps, ToolbarSize, ToolbarSpacerProps, ToolbarToggleProps } from './components/shell/Toolbar/Toolbar.types.js';
+export { cn } from './utils/cn.js';
+export { cx } from './utils/cx.js';

package/dist/types/palettes.d.ts

@@ -0,0 +1,3 @@
+export { MATERIAL_PALETTE, Palette, PaletteColor, PaletteShade } 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';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+}
+/**
+ * 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.
+ *
+ * For scoped theme overrides, use `VanillaThemeProvider` with a custom
+ * class generated by `createCustomTheme()`.
+ */
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+
+export { ThemeProvider };
+export type { ThemeProviderProps };

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

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface VanillaThemeProviderProps {
+    children: React.ReactNode;
+    /**
+     * CSS class name that sets theme CSS custom properties.
+     * Can be a class from createTheme() or a custom class.
+     *
+     * When omitted, components inherit tokens from :root (dark theme).
+     */
+    className?: string;
+}
+/**
+ * Optional wrapper for scoped theme overrides.
+ *
+ * The dark theme is applied globally on :root — most apps don't need
+ * VanillaThemeProvider at all. Use it only when you need a different theme
+ * for a subtree (e.g. a light-themed dialog inside a dark app).
+ *
+ * @example
+ * ```tsx
+ * // No provider needed for default dark theme:
+ * <App />
+ *
+ * // Scoped override for a subtree:
+ * <VanillaThemeProvider className="my-light-section">
+ *   <SettingsPanel />
+ * </VanillaThemeProvider>
+ * ```
+ */
+declare const VanillaThemeProvider: React.FC<VanillaThemeProviderProps>;
+
+export { VanillaThemeProvider };
+export type { VanillaThemeProviderProps };

package/dist/types/theme/contract.css.d.ts

@@ -0,0 +1,164 @@
+/**
+ * Theme contract with stable CSS custom property names.
+ *
+ * Every value is the CSS custom property name (without --)
+ * that will be used in the output CSS. This means consumers
+ * can override any token with plain CSS:
+ *
+ * ```css
+ * .my-brand {
+ *   --etui-color-accent-primary: #ff6600;
+ * }
+ * ```
+ *
+ * All property names follow the pattern: etui-{category}-{path}
+ * These names are part of the PUBLIC API — do not rename without
+ * a major version bump.
+ */
+declare const vars: {
+    colors: {
+        background: {
+            primary: `var(--${string})`;
+            secondary: `var(--${string})`;
+            tertiary: `var(--${string})`;
+            elevated: `var(--${string})`;
+        };
+        surface: {
+            default: `var(--${string})`;
+            hover: `var(--${string})`;
+            active: `var(--${string})`;
+            disabled: `var(--${string})`;
+            whiteOverlay: `var(--${string})`;
+        };
+        border: {
+            default: `var(--${string})`;
+            focus: `var(--${string})`;
+            error: `var(--${string})`;
+            success: `var(--${string})`;
+        };
+        text: {
+            primary: `var(--${string})`;
+            secondary: `var(--${string})`;
+            muted: `var(--${string})`;
+            disabled: `var(--${string})`;
+        };
+        accent: {
+            primary: `var(--${string})`;
+            secondary: `var(--${string})`;
+            success: `var(--${string})`;
+            warning: `var(--${string})`;
+            error: `var(--${string})`;
+        };
+        backdrop: `var(--${string})`;
+    };
+    spacing: {
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        xxl: `var(--${string})`;
+        xxxl: `var(--${string})`;
+    };
+    typography: {
+        fontSize: {
+            xxs: `var(--${string})`;
+            xs: `var(--${string})`;
+            sm: `var(--${string})`;
+            md: `var(--${string})`;
+            lg: `var(--${string})`;
+            xl: `var(--${string})`;
+        };
+        fontWeight: {
+            normal: `var(--${string})`;
+            medium: `var(--${string})`;
+            semibold: `var(--${string})`;
+        };
+        lineHeight: {
+            tight: `var(--${string})`;
+            normal: `var(--${string})`;
+            relaxed: `var(--${string})`;
+        };
+        fontFamily: {
+            mono: `var(--${string})`;
+            sans: `var(--${string})`;
+        };
+    };
+    borderRadius: {
+        none: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+    };
+    shadows: {
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        focus: `var(--${string})`;
+        separatorBottom: `var(--${string})`;
+        separatorRight: `var(--${string})`;
+        separatorLeft: `var(--${string})`;
+        thumb: `var(--${string})`;
+    };
+    transitions: {
+        fast: `var(--${string})`;
+        normal: `var(--${string})`;
+        slow: `var(--${string})`;
+    };
+    zIndex: {
+        base: `var(--${string})`;
+        dropdown: `var(--${string})`;
+        popover: `var(--${string})`;
+        tooltip: `var(--${string})`;
+        modal: `var(--${string})`;
+    };
+    shell: {
+        menuBar: {
+            height: `var(--${string})`;
+            bg: `var(--${string})`;
+            hoverBg: `var(--${string})`;
+            activeBg: `var(--${string})`;
+            text: `var(--${string})`;
+            shortcutText: `var(--${string})`;
+        };
+        toolbar: {
+            height: {
+                sm: `var(--${string})`;
+                md: `var(--${string})`;
+            };
+            bg: `var(--${string})`;
+            separator: `var(--${string})`;
+        };
+        statusBar: {
+            height: `var(--${string})`;
+            bg: `var(--${string})`;
+            text: `var(--${string})`;
+        };
+        dock: {
+            tabHeight: `var(--${string})`;
+            tabBg: `var(--${string})`;
+            tabActiveBg: `var(--${string})`;
+            tabHoverBg: `var(--${string})`;
+            tabText: `var(--${string})`;
+            tabActiveText: `var(--${string})`;
+            splitterSize: `var(--${string})`;
+            splitterColor: `var(--${string})`;
+            splitterHoverColor: `var(--${string})`;
+            borderBarBg: `var(--${string})`;
+            borderBarSize: `var(--${string})`;
+            dropOverlay: `var(--${string})`;
+        };
+    };
+    storybook: {
+        canvas: {
+            gradientStart: `var(--${string})`;
+            gradientMid: `var(--${string})`;
+            gradientEnd: `var(--${string})`;
+        };
+    };
+};
+type ThemeVars = typeof vars;
+
+export { vars };
+export type { ThemeVars };

package/dist/types/theme/darkTheme.css.d.ts

@@ -0,0 +1,151 @@
+/**
+ * Dark theme values — exported separately so the createCustomTheme helper
+ * can deep-merge consumer overrides onto these defaults.
+ */
+declare const darkThemeValues: {
+    readonly colors: {
+        readonly background: {
+            readonly primary: "#1a1a1a";
+            readonly secondary: "#2d2d2d";
+            readonly tertiary: "#3a3a3a";
+            readonly elevated: "#404040";
+        };
+        readonly surface: {
+            readonly default: "#2d2d2d";
+            readonly hover: "#363636";
+            readonly active: "#404040";
+            readonly disabled: "#1f1f1f";
+            readonly whiteOverlay: "rgba(255, 255, 255, 0.1)";
+        };
+        readonly border: {
+            readonly default: "#4a4a4a";
+            readonly focus: "#007acc";
+            readonly error: "#f44336";
+            readonly success: "#4caf50";
+        };
+        readonly text: {
+            readonly primary: "#ffffff";
+            readonly secondary: "#cccccc";
+            readonly muted: "#888888";
+            readonly disabled: "#555555";
+        };
+        readonly accent: {
+            readonly primary: "#007acc";
+            readonly secondary: "#005a9e";
+            readonly success: "#4caf50";
+            readonly warning: "#ff9800";
+            readonly error: "#f44336";
+        };
+        readonly backdrop: "rgba(0, 0, 0, 0.6)";
+    };
+    readonly spacing: {
+        readonly xs: "2px";
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        readonly xl: "16px";
+        readonly xxl: "24px";
+        readonly xxxl: "32px";
+    };
+    readonly typography: {
+        readonly fontSize: {
+            readonly xxs: "9px";
+            readonly xs: "10px";
+            readonly sm: "11px";
+            readonly md: "12px";
+            readonly lg: "14px";
+            readonly xl: "16px";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.2";
+            readonly normal: "1.4";
+            readonly relaxed: "1.6";
+        };
+        readonly fontFamily: {
+            readonly mono: "SF Mono, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+            readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        };
+    };
+    readonly borderRadius: {
+        readonly none: "0px";
+        readonly sm: "2px";
+        readonly md: "4px";
+        readonly lg: "6px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.2)";
+        readonly md: "0 2px 4px rgba(0, 0, 0, 0.3)";
+        readonly lg: "0 4px 8px rgba(0, 0, 0, 0.4)";
+        readonly xl: "0 8px 16px rgba(0, 0, 0, 0.5)";
+        readonly focus: "0 0 0 2px rgba(0, 122, 204, 0.4)";
+        readonly separatorBottom: "0 1px 2px rgba(0, 0, 0, 0.18)";
+        readonly separatorRight: "1px 0 2px rgba(0, 0, 0, 0.18)";
+        readonly separatorLeft: "-1px 0 2px rgba(0, 0, 0, 0.18)";
+        readonly thumb: "0 0 2px rgba(0, 0, 0, 0.5)";
+    };
+    readonly transitions: {
+        readonly fast: "100ms ease-out";
+        readonly normal: "200ms ease-out";
+        readonly slow: "300ms ease-out";
+    };
+    readonly zIndex: {
+        readonly base: "1";
+        readonly dropdown: "1000";
+        readonly popover: "1000";
+        readonly tooltip: "1000";
+        readonly modal: "1100";
+    };
+    readonly shell: {
+        readonly menuBar: {
+            readonly height: "28px";
+            readonly bg: "#2d2d2d";
+            readonly hoverBg: "#363636";
+            readonly activeBg: "#005a9e";
+            readonly text: "#ffffff";
+            readonly shortcutText: "#888888";
+        };
+        readonly toolbar: {
+            readonly height: {
+                readonly sm: "32px";
+                readonly md: "40px";
+            };
+            readonly bg: "#2d2d2d";
+            readonly separator: "#4a4a4a";
+        };
+        readonly statusBar: {
+            readonly height: "22px";
+            readonly bg: "#007acc";
+            readonly text: "#ffffff";
+        };
+        readonly dock: {
+            readonly tabHeight: "28px";
+            readonly tabBg: "#2d2d2d";
+            readonly tabActiveBg: "#1a1a1a";
+            readonly tabHoverBg: "#363636";
+            readonly tabText: "#cccccc";
+            readonly tabActiveText: "#ffffff";
+            readonly splitterSize: "4px";
+            readonly splitterColor: "#4a4a4a";
+            readonly splitterHoverColor: "#007acc";
+            readonly borderBarBg: "#2d2d2d";
+            readonly borderBarSize: "28px";
+            readonly dropOverlay: "rgba(0, 122, 204, 0.2)";
+        };
+    };
+    readonly storybook: {
+        readonly canvas: {
+            readonly gradientStart: "#061f21";
+            readonly gradientMid: "#031a1a";
+            readonly gradientEnd: "#091010";
+        };
+    };
+};
+type DarkThemeValues = typeof darkThemeValues;
+
+export { darkThemeValues };
+export type { DarkThemeValues };

package/dist/types/types/common.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface BaseComponent<T = HTMLDivElement> extends React.HTMLAttributes<T> {
+    /** Unique identifier for the component */
+    id?: string | undefined;
+    /** Additional CSS class names */
+    className?: string | undefined;
+    /** Test identifier for automated testing */
+    testId?: string;
+    /** Custom inline styles */
+    style?: React.CSSProperties | undefined;
+    ref?: React.Ref<T> | undefined;
+}
+type Size = 'sm' | 'md' | 'lg';
+type Variant = 'default' | 'ghost' | 'filled';
+
+export type { BaseComponent, Size, Variant };

package/dist/types/types/utilities.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Makes complex intersection types readable by flattening them
+ * @example
+ * type Complex = { a: string } & { b: number } & { c: boolean }
+ * type Pretty = Prettify<Complex> // { a: string; b: number; c: boolean }
+ */
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+/**
+ * Allows autocomplete for union values while still accepting any string
+ * @example
+ * type Colors = LiteralUnion<'red' | 'blue' | 'green', string>
+ * // Shows autocomplete for 'red', 'blue', 'green' but accepts any string
+ */
+type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+/**
+ * Makes all properties optional recursively
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Extracts the value type from a record/object
+ * @example
+ * type Colors = { red: '#ff0000', blue: '#0000ff' }
+ * type ColorValue = ValueOf<Colors> // '#ff0000' | '#0000ff'
+ */
+type ValueOf<T> = T[keyof T];
+/**
+ * Creates a union from object keys
+ * @example
+ * type Sizes = { sm: 1, md: 2, lg: 3 }
+ * type SizeKey = KeyOf<Sizes> // 'sm' | 'md' | 'lg'
+ */
+type KeyOf<T> = keyof T;
+/**
+ * Makes specific properties required
+ * @example
+ * type User = { name?: string; age?: number; email?: string }
+ * type UserWithName = RequireFields<User, 'name'> // { name: string; age?: number; email?: string }
+ */
+type RequireFields<T, K extends keyof T> = Prettify<T & Required<Pick<T, K>>>;
+/**
+ * Strict exclude that shows what was excluded
+ * @example
+ * type Colors = 'red' | 'blue' | 'green'
+ * type WarmColors = StrictExclude<Colors, 'blue'> // 'red' | 'green'
+ */
+type StrictExclude<T, U extends T> = Exclude<T, U>;
+/**
+ * Creates a branded type for better type safety
+ * @example
+ * type UserId = Brand<string, 'UserId'>
+ * type ProductId = Brand<string, 'ProductId'>
+ * // UserId and ProductId are not assignable to each other
+ */
+type Brand<T, B> = T & {
+    __brand: B;
+};
+/**
+ * Recursive readonly type
+ */
+type DeepReadonly<T> = {
+    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
+};
+/**
+ * Non-empty array type
+ */
+type NonEmptyArray<T> = [T, ...T[]];
+
+export type { Brand, DeepPartial, DeepReadonly, KeyOf, LiteralUnion, NonEmptyArray, Prettify, RequireFields, StrictExclude, ValueOf };

package/dist/types/utils/cn.d.ts

@@ -0,0 +1,3 @@
+declare const cn: (...classes: (string | undefined | null | false)[]) => string;
+
+export { cn };