entangle-ui 0.10.0 → 0.12.0

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

@@ -0,0 +1,35 @@
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+import React from 'react';
+
+/**
+ * Rotate icon component for rotate transforms and rotate-tool actions.
+ *
+ * A clockwise circular arrow — the conventional glyph for the rotate gizmo,
+ * "rotate 90°" actions, and orientation controls in editor viewports.
+ * Distinct from `RefreshIcon` (a two-headed reload arrow) so rotate and
+ * reload never read the same.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <RotateIcon />
+ *
+ * // With custom size and color
+ * <RotateIcon size="md" color="accent" />
+ *
+ * // In a transform toolbar
+ * <Toolbar.Button icon={<RotateIcon />} tooltip="Rotate" />
+ * ```
+ */
+declare const RotateIcon: 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 { RotateIcon };

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

@@ -0,0 +1,35 @@
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+import React from 'react';
+
+/**
+ * Spin icon component for continuous-rotation and turntable actions.
+ *
+ * An open three-quarter ring — the conventional "spinning" glyph used for
+ * auto-rotate / turntable toggles and busy states. Unlike `RotateIcon` it
+ * has no arrowhead, reading as ongoing motion rather than a single rotate
+ * step; pair it with a CSS spin animation for a loading affordance.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SpinIcon />
+ *
+ * // With custom size and color
+ * <SpinIcon size="md" color="accent" />
+ *
+ * // As an auto-rotate toggle
+ * <IconButton icon={<SpinIcon />} label="Auto-rotate" />
+ * ```
+ */
+declare const SpinIcon: 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 { SpinIcon };

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

@@ -0,0 +1,35 @@
+import { IconSize, IconColor } from '../primitives/Icon/Icon.js';
+import React from 'react';
+
+/**
+ * Zoom-to-fit icon component for framing content to the viewport.
+ *
+ * A corner frame around a focal point — the conventional glyph for
+ * "zoom to fit", "frame selected", and "fit to view" actions that reset the
+ * camera so the content fills the viewport. Distinct from `FullscreenIcon`
+ * (outward expand arrows) and `MaximizeIcon` (a plain window outline).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ZoomFitIcon />
+ *
+ * // With custom size and color
+ * <ZoomFitIcon size="md" color="accent" />
+ *
+ * // In a viewport control bar
+ * <IconButton icon={<ZoomFitIcon />} label="Zoom to fit" />
+ * ```
+ */
+declare const ZoomFitIcon: 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 { ZoomFitIcon };

package/dist/types/components/controls/Select/Select.d.ts

@@ -21,7 +21,7 @@ import { SelectProps } from './Select.types.js';
  * />
  * ```
  */
-declare function Select<T extends string = string>({ value: valueProp, defaultValue, options, placeholder, searchable, searchPlaceholder, filterFn, emptyMessage, size, variant, label, helperText, error, errorMessage, disabled, required, clearable, maxDropdownHeight, minDropdownWidth, name, onChange, onOpenChange, className, style, testId, ref, id: idProp, ...rest }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Select<T extends string = string>({ value: valueProp, defaultValue, options, placeholder, searchable, searchPlaceholder, filterFn, emptyMessage, size, variant, label, helperText, error, errorMessage, disabled, required, clearable, maxDropdownHeight, minDropdownWidth, fullWidth, name, onChange, onOpenChange, className, style, testId, ref, id: idProp, ...rest }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace Select {
     var displayName: string;
 }

package/dist/types/components/controls/Select/Select.types.d.ts

@@ -97,11 +97,6 @@ interface SelectBaseProps<T extends string = string> extends Omit<BaseComponent<
      * @default false
      */
     required?: boolean;
-    /**
-     * Whether a clear button appears when value is selected
-     * @default false
-     */
-    clearable?: boolean;
     /**
      * Maximum height of the dropdown in pixels
      * @default 240
@@ -113,19 +108,58 @@ interface SelectBaseProps<T extends string = string> extends Omit<BaseComponent<
      * even if the trigger is narrower.
      */
     minDropdownWidth?: number;
+    /**
+     * Whether the select stretches to fill the width of its container.
+     * Useful inside flex rows or property panels where the select would
+     * otherwise shrink to the width of its selected label.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * Name attribute for form submission
      */
     name?: string;
     /**
-     * Change event handler
+     * Open state change handler
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Clearable variant: a clear button is shown, so `onChange` can emit `null`
+ * when the selection is cleared.
+ */
+interface SelectClearableProps<T extends string = string> {
+    /**
+     * Whether a clear button appears when a value is selected.
+     */
+    clearable: true;
+    /**
+     * Change event handler. Receives `null` when the selection is cleared.
      */
     onChange?: (value: T | null) => void;
+}
+/**
+ * Non-clearable variant (default): there is no clear button, so `onChange`
+ * only ever emits a real value — never `null`.
+ */
+interface SelectNonClearableProps<T extends string = string> {
     /**
-     * Open state change handler
+     * Whether a clear button appears when a value is selected.
+     * @default false
      */
-    onOpenChange?: (open: boolean) => void;
+    clearable?: false;
+    /**
+     * Change event handler.
+     */
+    onChange?: (value: T) => void;
 }
-type SelectProps<T extends string = string> = Prettify<SelectBaseProps<T>>;
+/**
+ * Props for the `Select` component.
+ *
+ * `clearable` discriminates the `onChange` contract: a non-clearable select
+ * never emits `null`, so its `onChange` value is `T`; a `clearable` select can
+ * emit `null` from the clear button, so its `onChange` value is `T | null`.
+ */
+type SelectProps<T extends string = string> = Prettify<SelectBaseProps<T> & SelectNonClearableProps<T>> | Prettify<SelectBaseProps<T> & SelectClearableProps<T>>;
 
 export type { SelectBaseProps, SelectOptionGroup, SelectOptionItem, SelectProps, SelectSize, SelectVariant };

package/dist/types/components/controls/Slider/Slider.d.ts

@@ -96,6 +96,13 @@ interface SliderBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default true
      */
     showTooltip?: boolean;
+    /**
+     * Placement of the value tooltip relative to the thumb. The tooltip is
+     * portaled to `document.body`, so it is never clipped by an ancestor's
+     * `overflow`.
+     * @default "top"
+     */
+    tooltipPlacement?: 'top' | 'bottom';
     /**
      * Show tick marks along the track
      * @default false

package/dist/types/components/editor/PropertyInspector/PropertyInspector.types.d.ts

@@ -3,6 +3,13 @@ import { Prettify } from '../../../types/utilities.js';
 import React from 'react';
 
 type PropertyInspectorSize = Size;
+/**
+ * Vertical spacing density applied to property rows.
+ * - `compact`: tighter rows for dense inspectors
+ * - `normal`: default spacing
+ * - `spacious`: roomier rows
+ */
+type PropertyDensity = 'compact' | 'normal' | 'spacious';
 interface PropertyPanelBaseProps extends BaseComponent {
     /**
      * Panel content — PropertySection, PropertyGroup, or any elements
@@ -27,6 +34,19 @@ interface PropertyPanelBaseProps extends BaseComponent {
      * @default "100%"
      */
     maxHeight?: number | string;
+    /**
+     * Fill the available height of the parent and scroll the content when it
+     * overflows, without needing a fixed `maxHeight`. A scrollbar gutter is
+     * reserved so controls never sit under the scrollbar. Ignored when
+     * `maxHeight` is set.
+     * @default false
+     */
+    fillHeight?: boolean;
+    /**
+     * Vertical spacing density applied to all nested rows.
+     * @default "normal"
+     */
+    density?: PropertyDensity;
     /**
      * Whether to show a search/filter input in the header
      * @default false
@@ -102,6 +122,32 @@ interface PropertySectionBaseProps extends Omit<BaseComponent, 'onChange'> {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Whether this section renders a managed enable/disable toggle in its header.
+     * When the toggle is off, the section body is dimmed and made
+     * non-interactive (but stays mounted). The toggle is independent of the
+     * collapse state.
+     * @default false
+     */
+    checkable?: boolean;
+    /**
+     * Whether the section is enabled (controlled). Requires `checkable`.
+     */
+    checked?: boolean;
+    /**
+     * Whether the section starts enabled (uncontrolled). Requires `checkable`.
+     * @default true
+     */
+    defaultChecked?: boolean;
+    /**
+     * Callback when the enable toggle changes. Requires `checkable`.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Accessible label for the enable toggle.
+     * @default the section `title`
+     */
+    checkLabel?: string;
     /**
      * Size override for this section and its rows
      */
@@ -123,9 +169,9 @@ interface PropertySectionBaseProps extends Omit<BaseComponent, 'onChange'> {
 type PropertySectionProps = Prettify<PropertySectionBaseProps>;
 interface PropertyRowBaseProps extends BaseComponent {
     /**
-     * Property label text
+     * Property label. Accepts any renderable node (text, an icon + text, etc.).
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * Tooltip text for the label (shown on hover)
      */
@@ -235,4 +281,4 @@ interface UsePropertyUndoReturn<T = unknown> {
     clear: () => void;
 }
 
-export type { PropertyGroupBaseProps, PropertyGroupProps, PropertyInspectorSize, PropertyPanelBaseProps, PropertyPanelProps, PropertyRowBaseProps, PropertyRowProps, PropertySectionBaseProps, PropertySectionProps, PropertyUndoEntry, UsePropertyUndoOptions, UsePropertyUndoReturn };
+export type { PropertyDensity, PropertyGroupBaseProps, PropertyGroupProps, PropertyInspectorSize, PropertyPanelBaseProps, PropertyPanelProps, PropertyRowBaseProps, PropertyRowProps, PropertySectionBaseProps, PropertySectionProps, PropertyUndoEntry, UsePropertyUndoOptions, UsePropertyUndoReturn };

package/dist/types/components/feedback/Spinner/Spinner.d.ts

@@ -5,13 +5,17 @@ import React from 'react';
  * Loading / activity indicator.
  *
  * Announces itself via `role="status"` and `aria-label`; honors
- * `prefers-reduced-motion` by halting animation and dimming the indicator.
+ * `prefers-reduced-motion` by halting animation and dimming the indicator. Pass
+ * `decorative` to opt out of the live region when nested inside one (e.g. a
+ * `StatusBar`).
  *
  * @example
  * ```tsx
  * <Spinner />
  * <Spinner variant="dots" size="lg" />
  * <Spinner showLabel label="Fetching results..." />
+ * // Inside a StatusBar (already role="status"):
+ * <Spinner decorative size="sm" />
  * ```
  */
 declare const Spinner: React.NamedExoticComponent<{
@@ -20,6 +24,7 @@ declare const Spinner: React.NamedExoticComponent<{
     color?: SpinnerColor | undefined;
     label?: string | undefined;
     showLabel?: boolean | undefined;
+    decorative?: boolean | undefined;
     id?: string | undefined | undefined;
     className?: string | undefined | undefined;
     testId?: string | undefined;

package/dist/types/components/feedback/Spinner/Spinner.types.d.ts

@@ -35,6 +35,14 @@ interface SpinnerBaseProps extends BaseComponent<HTMLSpanElement> {
      * @default false
      */
     showLabel?: boolean;
+    /**
+     * Render the spinner as purely decorative: `role="presentation"` +
+     * `aria-hidden`, with no live region. Use when the spinner sits inside an
+     * existing live region (e.g. `StatusBar`, which is itself `role="status"`) so
+     * the activity is not announced twice.
+     * @default false
+     */
+    decorative?: boolean;
 }
 type SpinnerProps = Prettify<SpinnerBaseProps>;
 

package/dist/types/components/primitives/Button/Button.d.ts

@@ -390,7 +390,6 @@ declare const Button: React.NamedExoticComponent<{
     onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     form?: string | undefined | undefined;
-    value?: string | number | readonly string[] | undefined;
     name?: string | undefined | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
@@ -398,6 +397,7 @@ declare const Button: React.NamedExoticComponent<{
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
 }>;
 
 export { Button };

package/dist/types/components/primitives/IconButton/IconButton.d.ts

@@ -58,7 +58,8 @@ type IconButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
  * ```
  */
 declare const IconButton: React.NamedExoticComponent<{
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    icon?: React.ReactNode;
     size?: IconButtonSize | undefined;
     variant?: IconButtonVariant | undefined;
     radius?: IconButtonRadius | undefined;
@@ -347,7 +348,6 @@ declare const IconButton: React.NamedExoticComponent<{
     onTransitionStart?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     form?: string | undefined | undefined;
-    value?: string | number | readonly string[] | undefined;
     name?: string | undefined | undefined;
     formAction?: string | ((formData: FormData) => void | Promise<void>) | undefined;
     formEncType?: string | undefined | undefined;
@@ -355,6 +355,7 @@ declare const IconButton: React.NamedExoticComponent<{
     formNoValidate?: boolean | undefined | undefined;
     formTarget?: string | undefined | undefined;
     type?: "submit" | "reset" | "button" | undefined | undefined;
+    value?: string | number | readonly string[] | undefined;
 }>;
 
 export { IconButton };

package/dist/types/components/primitives/viewport/Viewport.d.ts

@@ -2,8 +2,11 @@ import React from 'react';
 import { ViewportProps } from './Viewport.types.js';
 
 /**
- * Viewport — pan/zoom canvas + HTML container for editor-style surfaces
- * such as node graphs, timelines, and 2D world editors.
+ * Viewport — **2D only.** A pan/zoom canvas + HTML container for editor-style
+ * surfaces such as node graphs, timelines, and 2D world editors. Despite the
+ * name it is *not* a 3D viewport: it owns a 2D pan/zoom transform, not a camera.
+ * For 3D, host your own WebGL/WebGPU canvas (e.g. inside an `AppShell.Dock`) and
+ * reach for `Viewport` only for 2D editor surfaces.
  *
  * Composes:
  * - Multiple perf-isolated `<ViewportLayer>` canvases (one draw cycle each).