entangle-ui 0.8.2 → 0.10.0

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

@@ -1,5 +1,5 @@
-import { LiteralUnion, Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { LiteralUnion, Prettify } from '../../../types/utilities.js';
 
 /**
  * 3D vector with x/y/z components, used for position, rotation (Euler
@@ -78,7 +78,7 @@ interface CoordinateSpaceOption {
     value: string;
     label: string;
 }
-interface TransformControlBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+interface TransformControlBaseProps extends Omit<BaseComponent, 'onChange' | 'defaultValue'> {
     /** Current transform value (controlled). */
     value?: TransformValue;
     /** Default transform value (uncontrolled). */

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

@@ -1,5 +1,5 @@
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent, Size } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
 
 type ViewportGizmoSize = Size;
 /**

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

@@ -1,8 +1,8 @@
 import { AlertVariant, AlertAppearance } from './Alert.types.js';
 import React from 'react';
-import { AlertTitle } from './AlertTitle.js';
-import { AlertDescription } from './AlertDescription.js';
 import { AlertActions } from './AlertActions.js';
+import { AlertDescription } from './AlertDescription.js';
+import { AlertTitle } from './AlertTitle.js';
 
 /**
  * Persistent inline alert / callout.
@@ -41,6 +41,7 @@ declare const AlertImpl: React.NamedExoticComponent<{
     icon?: React.ReactNode;
     onClose?: (() => void) | undefined;
     title?: React.ReactNode;
+    width?: number | string | undefined;
     children?: React.ReactNode;
     popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     id?: string | undefined | undefined;

package/dist/types/components/feedback/Alert/Alert.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';
 
 /**
  * Semantic intent of an alert.
@@ -20,7 +20,7 @@ type AlertVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';
  * - `outline`  — bordered, transparent background; low visual weight
  */
 type AlertAppearance = 'subtle' | 'solid' | 'outline';
-interface AlertBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'title'> {
+interface AlertBaseProps extends Omit<BaseComponent, 'title'> {
     /**
      * Semantic intent. Drives color and the default icon.
      * @default "info"
@@ -54,6 +54,13 @@ interface AlertBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'title'> {
      * (don't do this; pick one).
      */
     title?: React.ReactNode;
+    /**
+     * Width of the alert. Number → px, string → CSS value.
+     * Defaults to `100%` so the alert fills its parent and keeps a stable width
+     * regardless of content length; long text wraps inside.
+     * @default "100%"
+     */
+    width?: number | string;
     /**
      * Children — typically `Alert.Title` / `Alert.Description` / `Alert.Actions`.
      * Plain string content is also fine (treated as description).
@@ -61,15 +68,15 @@ interface AlertBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'title'> {
     children?: React.ReactNode;
 }
 type AlertProps = Prettify<AlertBaseProps>;
-interface AlertTitleBaseProps extends BaseComponent<HTMLDivElement> {
+interface AlertTitleBaseProps extends BaseComponent {
     children: React.ReactNode;
 }
 type AlertTitleProps = Prettify<AlertTitleBaseProps>;
-interface AlertDescriptionBaseProps extends BaseComponent<HTMLDivElement> {
+interface AlertDescriptionBaseProps extends BaseComponent {
     children: React.ReactNode;
 }
 type AlertDescriptionProps = Prettify<AlertDescriptionBaseProps>;
-interface AlertActionsBaseProps extends BaseComponent<HTMLDivElement> {
+interface AlertActionsBaseProps extends BaseComponent {
     /**
      * Horizontal alignment of action buttons.
      * @default "left"

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { CommandPaletteProps } from './CommandPalette.types.js';
+
+/**
+ * Search-driven command list shown as a centred floating dialog. Type to
+ * fuzzy-filter, ArrowUp/ArrowDown to navigate, Enter to select, Escape to
+ * close. Recent selections are tracked in localStorage when `recentKey` is
+ * set. The component does not bind a global hotkey — wire `useHotkey` in
+ * the consumer.
+ *
+ * @example
+ * ```tsx
+ * useHotkey('Mod+K', () => { setOpen(true); });
+ *
+ * <CommandPalette
+ *   open={open}
+ *   onClose={() => setOpen(false)}
+ *   items={[
+ *     { id: 'open', label: 'Open File', shortcut: 'Cmd+O', group: 'File' },
+ *     { id: 'save', label: 'Save', shortcut: 'Cmd+S', group: 'File' },
+ *   ]}
+ *   onSelect={(item) => runCommand(item.id)}
+ *   recentKey="myapp:command-palette"
+ * />
+ * ```
+ */
+declare const CommandPalette: React.FC<CommandPaletteProps>;
+
+export { CommandPalette };

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

@@ -0,0 +1,59 @@
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+interface CommandItem {
+    /** Stable unique identifier — used for keys and the recent list. */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /** Optional secondary description. */
+    description?: string;
+    /** Group name for sectioning the list. Items without a group go into "default". */
+    group?: string;
+    /** Leading icon. */
+    icon?: React.ReactNode;
+    /** Keyboard shortcut to display (e.g. "Cmd+S"). */
+    shortcut?: string;
+    /** Extra strings used by the fuzzy matcher in addition to label/description. */
+    keywords?: string[];
+    /** When true, the item is rendered but cannot be selected. */
+    disabled?: boolean;
+    /** Callback fired when this item is chosen. Falls back to top-level `onSelect`. */
+    onSelect?: () => void;
+}
+interface CommandPaletteRenderItemState {
+    selected: boolean;
+    query: string;
+}
+interface CommandPaletteBaseProps extends Omit<BaseComponent, 'onSelect'> {
+    /** Whether the palette is open. */
+    open: boolean;
+    /** Called when the palette requests close (Escape, overlay, after select). */
+    onClose: () => void;
+    /** All commands. The component filters them as the user types. */
+    items: readonly CommandItem[];
+    /** Default handler invoked when an item without its own `onSelect` is chosen. */
+    onSelect?: (item: CommandItem) => void;
+    /** Placeholder text for the search input. @default "Type a command or search..." */
+    placeholder?: string;
+    /** Custom node when no items match the current query. */
+    emptyState?: React.ReactNode;
+    /** Localised label for the recent items group header. @default "Recent" */
+    recentLabel?: string;
+    /** localStorage key for tracking recently selected items. Recent tracking is off when omitted. */
+    recentKey?: string;
+    /** Maximum number of recent items to track. @default 5 */
+    maxRecent?: number;
+    /** Custom renderer for each item — replaces the default row layout. */
+    renderItem?: (item: CommandItem, state: CommandPaletteRenderItemState) => React.ReactNode;
+    /** Render in a portal. @default true */
+    portal?: boolean;
+    /** Maximum height of the results list in px. @default 400 */
+    maxHeight?: number;
+    /** Width in px or any CSS value. @default 640 */
+    width?: number | string;
+}
+type CommandPaletteProps = Prettify<CommandPaletteBaseProps>;
+
+export type { CommandItem, CommandPaletteBaseProps, CommandPaletteProps, CommandPaletteRenderItemState };

package/dist/types/components/feedback/CommandPalette/fuzzySearch.d.ts

@@ -0,0 +1,6 @@
+interface FuzzyMatch<T> {
+    item: T;
+    score: number;
+}
+
+export type { FuzzyMatch };

package/dist/types/components/feedback/Dialog/Dialog.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 DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
 interface DialogBaseProps extends BaseComponent {

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DrawerProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseButtonProps } from './Drawer.types.js';
+
+interface DrawerComponent extends React.FC<DrawerProps> {
+    Header: React.FC<DrawerHeaderProps>;
+    Body: React.FC<DrawerBodyProps>;
+    Footer: React.FC<DrawerFooterProps>;
+    CloseButton: React.FC<DrawerCloseButtonProps>;
+}
+declare const Drawer: DrawerComponent;
+
+export { Drawer };

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

@@ -0,0 +1,70 @@
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
+
+type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSizePreset = 'sm' | 'md' | 'lg' | 'xl';
+type DrawerSize = DrawerSizePreset | (string & {}) | number;
+type DrawerFooterAlign = 'left' | 'center' | 'right' | 'space-between';
+interface DrawerBaseProps extends BaseComponent {
+    /** Whether the drawer is open. */
+    open: boolean;
+    /** Called when the drawer requests close (overlay click, Escape, close button). */
+    onClose: () => void;
+    /** Edge from which the drawer enters. @default "right" */
+    anchor?: DrawerAnchor;
+    /** Drawer size on the cross axis. Strings like "sm" use presets, number = px, string = CSS. @default "md" */
+    size?: DrawerSize;
+    /** Modal mode renders a backdrop and traps focus. @default true */
+    modal?: boolean;
+    /** Close when the overlay is clicked. Only applies when modal. @default true */
+    closeOnOverlayClick?: boolean;
+    /** Close on Escape. @default true */
+    closeOnEscape?: boolean;
+    /** Trap focus inside the drawer. Defaults to `modal`. */
+    trapFocus?: boolean;
+    /** Element to focus on open. */
+    initialFocusRef?: React.RefObject<HTMLElement | null>;
+    /** Render in a portal on document.body. @default true */
+    portal?: boolean;
+    /** Used as aria-labelledby reference. Pass as a string or use Drawer.Header. */
+    title?: string;
+    /** Used as aria-describedby reference. */
+    description?: string;
+    /** Drawer content (typically Drawer.Header/Body/Footer). */
+    children: React.ReactNode;
+}
+type DrawerProps = Prettify<DrawerBaseProps>;
+interface DrawerHeaderBaseProps extends BaseComponent {
+    /** Title content. */
+    children: React.ReactNode;
+    /** Whether to render a close button on the right. @default true */
+    showClose?: boolean;
+    /** Optional description below the title. */
+    description?: string;
+}
+type DrawerHeaderProps = Prettify<DrawerHeaderBaseProps>;
+interface DrawerBodyBaseProps extends BaseComponent {
+    children: React.ReactNode;
+}
+type DrawerBodyProps = Prettify<DrawerBodyBaseProps>;
+interface DrawerFooterBaseProps extends BaseComponent {
+    children: React.ReactNode;
+    /** Horizontal alignment. @default "right" */
+    align?: DrawerFooterAlign;
+}
+type DrawerFooterProps = Prettify<DrawerFooterBaseProps>;
+interface DrawerCloseButtonBaseProps extends Omit<BaseComponent<HTMLButtonElement>, 'children'> {
+    /** Custom button content; defaults to an X icon. */
+    children?: React.ReactNode;
+    /** Override aria-label. @default "Close drawer" */
+    'aria-label'?: string;
+}
+type DrawerCloseButtonProps = Prettify<DrawerCloseButtonBaseProps>;
+interface DrawerContextValue {
+    onClose: () => void;
+    titleId: string;
+    descriptionId: string;
+}
+
+export type { DrawerAnchor, DrawerBaseProps, DrawerBodyBaseProps, DrawerBodyProps, DrawerCloseButtonBaseProps, DrawerCloseButtonProps, DrawerContextValue, DrawerFooterAlign, DrawerFooterBaseProps, DrawerFooterProps, DrawerHeaderBaseProps, DrawerHeaderProps, DrawerProps, DrawerSize, DrawerSizePreset };

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

@@ -1,9 +1,9 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 type EmptyStateVariant = 'default' | 'compact';
-interface EmptyStateBaseProps extends Omit<BaseComponent<HTMLDivElement>, 'title'> {
+interface EmptyStateBaseProps extends Omit<BaseComponent, 'title'> {
     /** Icon or illustration (typically 48–64px). */
     icon?: React.ReactNode;
     /** Main heading. */

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { LogViewBody } from './LogViewBody.js';
+import { LogViewToolbar, LogViewFooter, LogViewSearch, LogViewLevelFilter, LogViewClear, LogViewCopy } from './LogViewParts.js';
+import { LogViewProps } from './LogView.types.js';
+
+interface LogViewComponent {
+    (props: LogViewProps): React.ReactElement;
+    displayName?: string;
+    Toolbar: typeof LogViewToolbar;
+    Footer: typeof LogViewFooter;
+    Search: typeof LogViewSearch;
+    LevelFilter: typeof LogViewLevelFilter;
+    Clear: typeof LogViewClear;
+    Copy: typeof LogViewCopy;
+    Body: typeof LogViewBody;
+}
+/**
+ * A virtualized console / log output panel.
+ *
+ * Renders a large, append-only stream of {@link LogEntry} efficiently
+ * (virtualized via `@tanstack/react-virtual`), with level coloring, level
+ * filtering, text search with match highlighting, follow-tail auto-scroll, per
+ * line and bulk copy, timestamps, and source tags.
+ *
+ * **Data flow.** Pass a controlled `entries` array, or go uncontrolled and push
+ * via the imperative handle — `ref.append(entry)` / `appendMany` / `clear` are
+ * rAF-batched, so a high-frequency stream collapses to one render per frame.
+ *
+ * **Composition.** Use it batteries-included (default toolbar + body), or
+ * compose the slots yourself: `LogView.Toolbar`, `LogView.Search`,
+ * `LogView.LevelFilter`, `LogView.Copy`, `LogView.Clear`, `LogView.Body`.
+ *
+ * @example Uncontrolled streaming
+ * ```tsx
+ * const ref = useRef<LogViewHandle>(null);
+ * useEffect(() => {
+ *   const id = setInterval(() => {
+ *     ref.current?.append({ level: 'info', message: 'tick', timestamp: Date.now() });
+ *   }, 50);
+ *   return () => clearInterval(id);
+ * }, []);
+ * return <LogView ref={ref} showTimestamps height={360} />;
+ * ```
+ *
+ * @example Custom composition
+ * ```tsx
+ * <LogView entries={entries} wrap>
+ *   <LogView.Toolbar>
+ *     <LogView.LevelFilter />
+ *     <LogView.Search />
+ *   </LogView.Toolbar>
+ *   <LogView.Body />
+ * </LogView>
+ * ```
+ */
+declare const LogView: LogViewComponent;
+
+export { LogView };