entangle-ui 0.8.2 → 0.10.0

package/dist/types/components/navigation/PathBar/PathBar.types.d.ts

@@ -0,0 +1,79 @@
+import { BreadcrumbsProps, BreadcrumbsSize } from '../Breadcrumbs/Breadcrumbs.types.js';
+import React from 'react';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+
+type PathBarSize = BreadcrumbsSize;
+/**
+ * A single segment of a path. Pass these (instead of a raw string) when a
+ * segment needs its own icon or an explicit navigation value.
+ */
+interface PathSegment {
+    /** Text shown for the segment. */
+    label: string;
+    /**
+     * Path handed to `onNavigate` when this segment is activated. Defaults to the
+     * cumulative path built from the preceding labels and the `delimiter`.
+     */
+    value?: string;
+    /** Icon rendered before the label, overriding any default for this segment. */
+    icon?: React.ReactNode;
+}
+/**
+ * Accepted shapes for a path: a delimited string (split on `delimiter`) or a
+ * pre-split array mixing plain label strings and structured {@link PathSegment}
+ * objects.
+ */
+type PathInput = string | ReadonlyArray<string | PathSegment>;
+interface PathBarBaseProps extends Omit<BaseComponent<HTMLElement>, 'onChange' | 'defaultValue'>, Pick<BreadcrumbsProps, 'maxItems' | 'itemsBeforeCollapse' | 'itemsAfterCollapse' | 'expandable'> {
+    /**
+     * Controlled current path. When provided, PathBar renders exactly this path
+     * and never mutates it — drive changes from `onNavigate`.
+     */
+    value?: PathInput;
+    /**
+     * Uncontrolled initial path. PathBar then tracks the current path itself:
+     * navigating to an ancestor truncates the trail; picking a sibling swaps the
+     * segment.
+     */
+    defaultValue?: PathInput;
+    /**
+     * Delimiter used to split string paths and to join cumulative navigation
+     * values.
+     * @default "/"
+     */
+    delimiter?: string;
+    /**
+     * Called when a segment is activated — by clicking a folder crumb or by
+     * choosing an entry from a segment's sibling dropdown. `path` is the
+     * activated segment's navigation value.
+     */
+    onNavigate?: (path: string, segment: PathSegment, index: number) => void;
+    /**
+     * Return the sibling entries for a segment to enable a dropdown picker on
+     * that crumb. Return an empty array (or omit the prop) to leave a segment
+     * without a dropdown. Choosing a sibling fires `onNavigate` with that
+     * sibling's value.
+     */
+    getSiblings?: (segment: PathSegment, index: number) => ReadonlyArray<string | PathSegment>;
+    /**
+     * Icon rendered before the first segment when that segment has no `icon` of
+     * its own — typically a workspace or home glyph.
+     */
+    rootIcon?: React.ReactNode;
+    /**
+     * Separator inserted between segments. The default chevron scales with
+     * `size`.
+     * @default <ChevronRightIcon size={size} decorative />
+     */
+    separator?: React.ReactNode;
+    /**
+     * Typography and spacing scale. Also scales the default separator and the
+     * sibling-dropdown caret.
+     * @default "sm"
+     */
+    size?: PathBarSize;
+}
+type PathBarProps = Prettify<PathBarBaseProps>;
+
+export type { PathBarBaseProps, PathBarProps, PathBarSize, PathInput, PathSegment };

package/dist/types/components/navigation/SegmentedControl/SegmentedControl.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type SegmentedControlSize = Size;
 type SegmentedControlOrientation = 'horizontal' | 'vertical';
@@ -11,7 +11,7 @@ type SegmentedControlOrientation = 'horizontal' | 'vertical';
  * - `outline`: bordered container, selected segment marked with accent edge
  */
 type SegmentedControlVariant = 'subtle' | 'solid' | 'outline';
-interface SegmentedControlBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'onChange'> {
+interface SegmentedControlBaseProps extends Omit<BaseComponent, 'onChange'> {
     /** Currently selected value (controlled) */
     value?: string;
     /** Default selected value (uncontrolled) */

package/dist/types/components/navigation/Tabs/Tabs.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type TabsSize = Size;
 /**

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Size, BaseComponent } from '../../../types/common.js';
 import { LiteralUnion, Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Avatar size scale.
@@ -101,7 +101,7 @@ interface AvatarBaseProps extends BaseComponent<HTMLSpanElement> {
     bordered?: boolean;
 }
 type AvatarProps = Prettify<AvatarBaseProps>;
-interface AvatarGroupBaseProps extends BaseComponent<HTMLDivElement> {
+interface AvatarGroupBaseProps extends BaseComponent {
     /**
      * Maximum number of avatars to show before collapsing the rest into a
      * `+N` overflow indicator.

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Size, BaseComponent } from '../../../types/common.js';
 import { LiteralUnion, Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Visual style of the badge.

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { Size, Variant } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
 
 /**
  * Button sizes optimized for editor interfaces
@@ -390,6 +390,7 @@ 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;
@@ -397,7 +398,6 @@ 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/Checkbox/Checkbox.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Checkbox size using standard library sizing.

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type CodeSize = 'xs' | 'sm' | 'md';
 interface CodeBaseProps extends BaseComponent<HTMLElement> {

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type CollapsibleSize = Size;
 interface CollapsibleBaseProps extends Omit<BaseComponent, 'onChange'> {

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HoverCardProps, HoverCardTriggerProps, HoverCardContentProps } from './HoverCard.types.js';
+
+interface HoverCardComponent extends React.FC<HoverCardProps> {
+    Trigger: React.FC<HoverCardTriggerProps>;
+    Content: React.FC<HoverCardContentProps>;
+}
+declare const HoverCard: HoverCardComponent;
+
+export { HoverCard };

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { PopoverPlacement } from '../Popover/Popover.types.js';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import { UseFloatingReturn, FloatingContext } from '@floating-ui/react';
+
+interface HoverCardBaseProps {
+    /** Open state (controlled). */
+    open?: boolean;
+    /** Default open state (uncontrolled). @default false */
+    defaultOpen?: boolean;
+    /** Side relative to the trigger. @default "bottom-start" */
+    placement?: PopoverPlacement;
+    /** Distance in pixels from the trigger. @default 8 */
+    offset?: number;
+    /** Delay before opening on hover, in ms. @default 400 */
+    openDelay?: number;
+    /** Delay before closing once cursor leaves, in ms. @default 150 */
+    closeDelay?: number;
+    /** Render the content in a portal. @default true */
+    portal?: boolean;
+    /**
+     * Disable the safe polygon that lets the cursor move from the trigger
+     * onto the content without closing. @default false
+     */
+    disableSafePolygon?: boolean;
+    /** Disable the entire HoverCard (never opens). @default false */
+    disabled?: boolean;
+    /** Callback when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** `HoverCard.Trigger` + `HoverCard.Content` children. */
+    children: React.ReactNode;
+}
+type HoverCardProps = Prettify<HoverCardBaseProps>;
+interface HoverCardTriggerBaseProps {
+    /** Trigger element — must be a single React element. */
+    children: React.ReactElement;
+}
+type HoverCardTriggerProps = Prettify<HoverCardTriggerBaseProps>;
+interface HoverCardContentBaseProps extends BaseComponent {
+    /** Content rendered inside the floating panel. */
+    children: React.ReactNode;
+    /** Width of the content. */
+    width?: number | string;
+    /** Maximum height with scroll. */
+    maxHeight?: number | string;
+    /** Padding inside the content. @default "md" */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+type HoverCardContentProps = Prettify<HoverCardContentBaseProps>;
+interface HoverCardContextValue {
+    isOpen: boolean;
+    hoverCardId: string;
+    portal: boolean;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    floatingRefs: UseFloatingReturn['refs'];
+    floatingStyles: React.CSSProperties;
+    floatingContext: FloatingContext;
+    getReferenceProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getFloatingProps: (props?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+}
+
+export type { HoverCardBaseProps, HoverCardContentBaseProps, HoverCardContentProps, HoverCardContextValue, HoverCardProps, HoverCardTriggerBaseProps, HoverCardTriggerProps };

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

@@ -1,12 +1,25 @@
 import React from 'react';
-import { LiteralUnion, Prettify } from '../../../types/utilities.js';
 import { Size } from '../../../types/common.js';
+import { LiteralUnion, Prettify } from '../../../types/utilities.js';
 
-type IconSize = Size;
+type IconSize = LiteralUnion<Size> | number;
 type IconColor = LiteralUnion<'primary' | 'secondary' | 'muted' | 'accent' | 'success' | 'warning' | 'error'>;
 interface IconBaseProps {
     children: React.ReactNode;
+    /**
+     * Icon size. `'sm' | 'md' | 'lg'` map to 12 / 16 / 20 px through the theme
+     * recipe. Pass a `number` for a custom pixel size, or a `string` for any
+     * CSS length (e.g. `'1.5em'`, `'24px'`).
+     * @default "md"
+     */
     size?: IconSize;
+    /**
+     * Icon color. Standard tokens (`'primary' | 'secondary' | 'muted' |
+     * 'accent' | 'success' | 'warning' | 'error'`) map to theme variables;
+     * any other string is forwarded as an inline `color` value (hex,
+     * `currentColor`, `var(--…)`, etc.).
+     * @default "primary"
+     */
     color?: IconColor;
     className?: string;
     title?: string;

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

@@ -347,6 +347,7 @@ 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;
@@ -354,7 +355,6 @@ 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/Input/Input.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import { Size } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
-import React from 'react';
 
 /**
  * Standard input sizes using library sizing.

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

@@ -1,7 +1,7 @@
-import React from 'react';
 import { Size, BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
 import { Platform } from '../../../utils/platform.js';
+import React from 'react';
 
 type KbdSize = Size;
 type KbdVariant = 'solid' | 'outline' | 'ghost';

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { Size } from '../../../types/common.js';
 import { Prettify, LiteralUnion } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Link size — mirrors the typography scale.

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
 interface PopoverBaseProps extends BaseComponent {

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { Size, BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Radio size using standard library sizing.
@@ -83,7 +83,7 @@ interface RadioBaseProps extends Omit<BaseComponent<HTMLInputElement>, 'onChange
     onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 type RadioProps = Prettify<RadioBaseProps>;
-interface RadioGroupBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'onChange'> {
+interface RadioGroupBaseProps extends Omit<BaseComponent, 'onChange'> {
     /**
      * Currently selected value (controlled)
      */

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
 
 type SwitchSize = Size;
 interface SwitchBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'css'> {

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { BaseComponent, Size } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type TextAreaSize = Size;
 type TextAreaResize = 'none' | 'vertical' | 'horizontal' | 'both';

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { TooltipPlacement, TooltipCollisionStrategy, TooltipCollisionConfig, TooltipPositioner, TooltipAnimation, BaseTooltipRootProps, BaseTooltipPositionerProps } from './types.js';
+import { Prettify } from '../../../types/utilities.js';
 
 interface TooltipBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'css' | 'title'> {
     /**

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * HTML element types that VisuallyHidden can render as.

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

@@ -23,5 +23,20 @@ interface CanvasBackgroundInfo {
     /** Domain Y range */
     domainY: [number, number];
 }
+/**
+ * Resolved theme colors for canvas 2D rendering.
+ *
+ * Canvas contexts can't read CSS variables directly, so these must be
+ * pre-resolved via getComputedStyle before drawing.
+ */
+interface CanvasThemeColors {
+    backgroundSecondary: string;
+    borderDefault: string;
+    textMuted: string;
+    textPrimary: string;
+    textSecondary: string;
+    accentPrimary: string;
+    fontSizeXs: number;
+}
 
-export type { CanvasBackgroundInfo, CanvasViewport, Point2D };
+export type { CanvasBackgroundInfo, CanvasThemeColors, CanvasViewport, Point2D };

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

@@ -0,0 +1,38 @@
+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.
+ *
+ * Composes:
+ * - Multiple perf-isolated `<ViewportLayer>` canvases (one draw cycle each).
+ * - `<ViewportWorld>` for HTML positioned in world coordinates.
+ * - `<ViewportOverlay>` for HTML pinned to the viewport (toolbars, minimap).
+ *
+ * Owns pan/zoom gestures (drag-to-pan, wheel-zoom-toward-cursor, optional
+ * pinch and space-to-pan) and optional marquee selection. Transform is
+ * controlled or uncontrolled (`useControlledState`-style) and mirrored
+ * into an internal `ViewportStore` that powers slice-level subscriptions
+ * for layers, world, and overlay children.
+ *
+ * @example
+ * ```tsx
+ * <Viewport responsive selectionRect={{ enabled: true }}>
+ *   <ViewportLayer name="grid" draw={drawGrid} invalidateOn={[gridStep]} />
+ *   <ViewportLayer name="content" draw={drawNodes} invalidateOn={[nodes]} />
+ *   <ViewportWorld>
+ *     <NodeView style={{ position: 'absolute', left: 100, top: 200 }} />
+ *   </ViewportWorld>
+ *   <ViewportOverlay>
+ *     <Toolbar />
+ *   </ViewportOverlay>
+ * </Viewport>
+ * ```
+ */
+declare const Viewport: {
+    ({ transform: transformProp, defaultTransform, onTransformChange, minZoom, maxZoom, pan, zoom, selectionRect, onSelectionChange, onPanStart, onPanEnd, onZoomStart, onZoomEnd, responsive, height, disabled, role, ariaLabel, ariaRoledescription, className, style, testId, id, children, ref, ...rest }: ViewportProps): React.ReactElement;
+    displayName: string;
+};
+
+export { Viewport };