entangle-ui 0.3.0 → 0.4.0

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

@@ -1,6 +1,5 @@
 import { ToolbarOrientation, ToolbarSize, ToolbarButtonVariant } from './Toolbar.types.js';
 import React from 'react';
-import { Theme } from '../../../theme/types.js';
 
 declare const Toolbar: React.FC<{
     $orientation?: ToolbarOrientation | undefined;
@@ -11,7 +10,6 @@ declare const Toolbar: React.FC<{
     className?: string | undefined | undefined;
     testId?: string | undefined;
     style?: React.CSSProperties | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     ref?: React.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -57,7 +55,7 @@ declare const Toolbar: React.FC<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -136,18 +134,18 @@ declare const Toolbar: React.FC<{
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -296,7 +294,12 @@ declare const Toolbar: React.FC<{
         tooltip?: string | undefined;
         $variant?: ToolbarButtonVariant | undefined;
         disabled?: boolean | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+        id?: string | undefined | undefined;
+        className?: string | undefined | undefined;
+        testId?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.Ref<HTMLButtonElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
         suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -304,19 +307,16 @@ declare const Toolbar: React.FC<{
         accessKey?: string | undefined | undefined;
         autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
         autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined | undefined;
         contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
         contextMenu?: string | undefined | undefined;
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
         hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
         lang?: string | undefined | undefined;
         nonce?: string | undefined | undefined;
         slot?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        style?: React.CSSProperties | undefined;
         tabIndex?: number | undefined | undefined;
         title?: string | undefined | undefined;
         translate?: "yes" | "no" | undefined | undefined;
@@ -344,7 +344,6 @@ declare const Toolbar: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -424,18 +423,18 @@ declare const Toolbar: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -575,8 +574,6 @@ declare const Toolbar: React.FC<{
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
-        testId?: string | undefined;
-        ref?: React.Ref<HTMLButtonElement> | undefined;
     }>;
     Toggle: React.NamedExoticComponent<{
         pressed: boolean;
@@ -589,7 +586,6 @@ declare const Toolbar: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLButtonElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -635,7 +631,7 @@ declare const Toolbar: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -715,18 +711,18 @@ declare const Toolbar: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLButtonElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLButtonElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLButtonElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onError?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -875,7 +871,6 @@ declare const Toolbar: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -921,7 +916,7 @@ declare const Toolbar: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -1000,18 +995,18 @@ declare const Toolbar: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -1158,7 +1153,6 @@ declare const Toolbar: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1204,7 +1198,7 @@ declare const Toolbar: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -1285,18 +1279,18 @@ declare const Toolbar: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -1443,7 +1437,6 @@ declare const Toolbar: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -1489,7 +1482,7 @@ declare const Toolbar: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -1570,18 +1563,18 @@ declare const Toolbar: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onError?: React.ReactEventHandler<HTMLDivElement> | undefined;

package/dist/types/index.d.ts

@@ -1,7 +1,8 @@
-export { Tokens, tokens } from './theme/tokens.js';
-export { ThemeProvider } from './theme/ThemeProvider.js';
-export { createTheme } from './theme/createTheme.js';
-export { Theme } from './theme/types.js';
+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';
@@ -37,6 +38,7 @@ export { Switch, SwitchProps, SwitchSize } from './components/primitives/Switch/
 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';
@@ -57,6 +59,8 @@ 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';
@@ -86,6 +90,26 @@ export { PropertyRow } from './components/editor/PropertyInspector/PropertyRow.j
 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';
@@ -96,6 +120,5 @@ 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 { BaseComponent, Size, Variant } from './types/common.js';
-export { Brand, DeepPartial, DeepReadonly, KeyOf, LiteralUnion, NonEmptyArray, Prettify, RequireFields, StrictExclude, ValueOf } from './types/utilities.js';
 export { cn } from './utils/cn.js';
+export { cx } from './utils/cx.js';

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

@@ -1,10 +1,17 @@
 import React from 'react';
-import { Theme } from './types.js';
 
 interface ThemeProviderProps {
     children: React.ReactNode;
-    theme?: Partial<Theme>;
 }
+/**
+ * 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 };

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 };