react-zeugma 6.3.0 → 6.4.1

package/dist/{types-Diujkc-H.d.cts → types-BN5W7EvY.d.cts}

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, RefObject, ReactNode } from 'react';
+import { Dispatch, SetStateAction, ReactNode } from 'react';
 
 type SplitDirection = 'row' | 'column';
 interface SplitNode {
@@ -16,14 +16,7 @@ interface PaneNode {
     locked?: boolean;
     tabsMetadata?: Record<string, Record<string, unknown>>;
 }
-interface WidgetNode {
-    type: 'widget';
-    id: string;
-    locked?: boolean;
-    metadata?: Record<string, unknown>;
-}
-type LeafNode = PaneNode | WidgetNode;
-type TreeNode = SplitNode | LeafNode;
+type TreeNode = SplitNode | PaneNode;
 interface TabDetails {
     id: string;
     paneId: string;
@@ -44,86 +37,26 @@ interface UseZeugmaOptions {
     onFullscreenChange?: (paneId: string | null) => void;
     /** Whether the layout is locked. When locked, resizing, dragging, and dropping are disabled. */
     locked?: boolean;
-    /** Minimum pixel distance that a user must drag a pane handle before dragging triggers. Defaults to 8. */
-    dragActivationDistance?: number;
-    /** Threshold value in pixels for snapping layout resizing handles to adjacent edges. Defaults to 8. */
-    snapThreshold?: number;
-    /** Minimum split percentage allowed when resizing split panes. Defaults to 5. */
-    minSplitPercentage?: number;
-    /** Maximum split percentage allowed when resizing split panes. Defaults to 95. */
-    maxSplitPercentage?: number;
-    /** Whether dragging a pane far enough outside the container triggers a drag-out/dismiss action. Defaults to false. */
-    enableDragToDismiss?: boolean;
-    /** The threshold in pixels beyond the container boundaries required to activate the drag-out/dismiss action. Defaults to 60. */
-    dismissThreshold?: number;
-    /** Callback triggered when a pane is removed from the dashboard layout tree. */
-    onRemove?: (paneId: string) => void;
-    /** Callback triggered when dragging starts for a pane. */
-    onDragStart?: (activeId: string) => void;
-    /** Callback triggered when dragging ends, providing details on target pane and drop action (split or move). */
-    onDragEnd?: (activeId: string, overId: string | null, dropAction: {
-        type: 'split' | 'move';
-        direction?: SplitDirection;
-        position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
-    } | null) => void;
-    /** Callback triggered when the user starts dragging a resizing handle between split panes. */
-    onResizeStart?: (currentNode: SplitNode) => void;
-    /** Callback triggered continuously while the user is dragging a resizing handle. Passes the new split percentage. */
-    onResize?: (currentNode: SplitNode, percentage: number) => void;
-    /** Callback triggered when the user stops dragging a resizing handle. Passes the final split percentage. */
-    onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
-    /** Callback triggered when the drag-out/dismiss intent changes. */
-    onDismissIntentChange?: (paneId: string | null) => void;
 }
-interface ZeugmaController {
+interface ZeugmaState {
     /** The current active layout tree structure, or null if empty. */
     layout: TreeNode | null;
-    /** Updates the layout tree. Also resets transient states like fullscreenPaneId. */
-    setLayout: Dispatch<SetStateAction<TreeNode | null>>;
-    /** @internal Raw layout setter used by DnD internals — does NOT reset transient states. */
-    _internalSetLayout: Dispatch<SetStateAction<TreeNode | null>>;
     /** The ID of the pane currently zoomed to fullscreen, or null. */
     fullscreenPaneId: string | null;
-    /** Programmatically sets the fullscreen pane ID. */
-    setFullscreenPaneId: (paneId: string | null) => void;
     /** Whether the layout is globally locked. */
     locked: boolean;
+}
+interface ZeugmaStateSetters {
+    /** Updates the layout tree. Also resets transient states like fullscreenPaneId. */
+    setLayout: Dispatch<SetStateAction<TreeNode | null>>;
+    /** Programmatically sets the fullscreen pane ID. */
+    setFullscreenPaneId: (paneId: string | null) => void;
     /** Programmatically updates the global locked status. */
     setLocked: Dispatch<SetStateAction<boolean>>;
-    /** The ID of the active dragged item (pane or tab). */
-    activeId: string | null;
-    /** The type of the active dragged item ('pane' | 'tab'). */
-    activeType: 'pane' | 'tab' | null;
-    /** The ID of the item with active dismiss intent, or null. */
-    dismissIntentId: string | null;
-    setActiveId: Dispatch<SetStateAction<string | null>>;
-    setActiveType: Dispatch<SetStateAction<'pane' | 'tab' | null>>;
-    setDismissIntentId: Dispatch<SetStateAction<string | null>>;
-    containerRef: RefObject<HTMLElement | null>;
-    setContainerRef: (element: HTMLElement | null) => void;
-    layoutBeforeDrag: TreeNode | null;
-    setLayoutBeforeDrag: Dispatch<SetStateAction<TreeNode | null>>;
-    dragActivationDistance: number;
-    snapThreshold: number;
-    minSplitPercentage: number;
-    maxSplitPercentage: number;
-    enableDragToDismiss: boolean;
-    dismissThreshold: number;
-    onRemove?: (paneId: string) => void;
-    onDragStart?: (activeId: string) => void;
-    onDragEnd?: (activeId: string, overId: string | null, dropAction: {
-        type: 'split' | 'move';
-        direction?: SplitDirection;
-        position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
-    } | null) => void;
-    onResizeStart?: (currentNode: SplitNode) => void;
-    onResize?: (currentNode: SplitNode, percentage: number) => void;
-    onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
-    onDismissIntentChange?: (paneId: string | null) => void;
+}
+interface ZeugmaActions {
     /** Removes the specified pane or widget from the layout tree and collapses its parent split. */
     removePane: (paneId: string) => void;
-    /** Appends/inserts a widget at the bottom-rightmost leaf of the layout tree. */
-    addWidget: (widgetId: string, metadata?: Record<string, unknown>) => void;
     /** Appends a tab into a target pane node, or splits/creates a new pane if no target pane ID is provided. */
     addTab: (tabId: string, targetPaneId?: string, metadata?: Record<string, unknown>) => void;
     /** Stable callback to update metadata for a specific tab or widget. */
@@ -142,12 +75,20 @@ interface ZeugmaController {
     updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void;
     /** Moves/reorders a tab relative to another target tab. */
     moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void;
+}
+interface ZeugmaQueries {
     /** Find a PaneNode or WidgetNode by its ID in the layout tree. */
-    findPaneById: (paneId: string) => LeafNode | null;
+    findPaneById: (paneId: string) => PaneNode | null;
     /** Find the PaneNode containing the given tab ID in the layout tree. */
     findPaneContainingTab: (tabId: string) => PaneNode | null;
     /** Find the details of a tab by its ID in the layout tree. */
     findTabById: (tabId: string) => TabDetails | null;
+    /** Get the metadata for a specific tab by its ID. */
+    getTabMetadata: (tabId: string) => Record<string, unknown> | undefined;
+    /** Get the metadata of the active tab in a specific pane by the pane ID. */
+    getActiveTabMetadata: (paneId: string) => Record<string, unknown> | undefined;
+}
+interface ZeugmaController extends ZeugmaState, ZeugmaStateSetters, ZeugmaActions, ZeugmaQueries {
 }
 interface ZeugmaClassNames {
     /** CSS class applied to the root dashboard container. */
@@ -172,106 +113,81 @@ interface ZeugmaClassNames {
     dashboardLocked?: string;
     /** CSS class applied to drop zone indicator when hovering over a locked pane. */
     lockedPreview?: string;
-    /** CSS class applied to tab drop preview splitter line. */
+    /** CSS class applied to drop zone indicator when hovering over a locked pane. */
     tabDropPreview?: string;
     /** CSS class applied to the separator line between tabs. */
     tabSeparator?: string;
+    /** CSS class applied to the wrapper element for a tab's contents. */
+    tabContentWrapper?: string;
+    /** CSS class applied to the tabs container div. */
+    tabsContainer?: string;
+    /** CSS class applied to individual tabs (as static string or dynamic callback). */
+    tab?: string | ((tabId: string) => string);
+    /** CSS class applied to the pane inner container (containing header and content). */
+    paneContainer?: string;
+    /** CSS class applied to the pane header bar. */
+    paneHeader?: string;
+    /** CSS class applied to the pane controls wrapper. */
+    paneControls?: string;
+    /** CSS class applied to the pane buttons (maximize/close). */
+    paneButton?: string;
+    /** CSS class applied to the default tab close button. */
+    tabCloseButton?: string;
+    /** CSS class applied to the drag handle. */
+    dragHandle?: string;
+}
+interface DragOverlayActiveItem {
+    type: 'tab' | 'pane';
+    id: string;
+    isDismissing: boolean;
 }
-interface ZeugmaProps extends ZeugmaController {
-    /** Render function mapping unique pane IDs to React elements. Usually renders a <Pane> wrapper. */
-    renderPane: (paneId: string) => ReactNode;
+interface ZeugmaProps {
+    /** The Zeugma Controller returned by useZeugma() */
+    controller?: ZeugmaController;
     /** Custom overlay renderer function used to customize the cursor-following drag preview for an active pane or tab. */
-    renderDragOverlay?: (activeId: string, type: 'pane' | 'tab') => ReactNode;
+    renderDragOverlay?: (active: DragOverlayActiveItem) => ReactNode;
     /** Optional CSS class name mapping overrides for custom styles of components like panes, drop previews, overlays, etc. */
     classNames?: ZeugmaClassNames;
-    /** Render function mapping tab IDs to React elements. Used to render tab widgets inside portals. */
-    renderWidget?: (tabId: string) => ReactNode;
-    /** Child nodes nested inside the Zeugma context, usually containing a <PaneTree> or similar layout viewer. */
-    children: ReactNode;
-}
-/**
- * State context — holds reactive values that change during runtime.
- * All consumers of this context will re-render when any of these values change.
- */
-interface ZeugmaStateValue {
-    /** The current active layout tree structure, or null if empty. */
-    layout: TreeNode | null;
-    /** Callback to update the layout tree. */
-    setLayout: Dispatch<SetStateAction<TreeNode | null>>;
-    /** Renders the inner content of a pane given its unique ID. */
-    renderPane: (paneId: string) => ReactNode;
-    /** The ID of the pane currently zoomed to fullscreen, or null. */
-    fullscreenPaneId: string | null;
-    /** Normalized or overridden CSS classes for custom layout styling. */
-    classNames: ZeugmaClassNames;
-    /** Whether the layout is globally locked. */
-    locked: boolean;
-    /** Programmatically updates the global locked status. */
-    setLocked: Dispatch<SetStateAction<boolean>>;
-    /** Find a PaneNode or WidgetNode by its ID in the layout tree. */
-    findPaneById: (paneId: string) => LeafNode | null;
-    /** Find the PaneNode containing the given tab ID in the layout tree. */
-    findPaneContainingTab: (tabId: string) => PaneNode | null;
-    /** Find the details of a tab by its ID in the layout tree. */
-    findTabById: (tabId: string) => TabDetails | null;
-    /** The ID of the active dragged item (pane or tab). */
-    activeId: string | null;
-    /** The type of the active dragged item ('pane' | 'tab'). */
-    activeType: 'pane' | 'tab' | null;
-    /** The ID of the item with active dismiss intent, or null. */
-    dismissIntentId: string | null;
-    setContainerRef: (element: HTMLElement | null) => void;
-    onRemove?: (paneId: string) => void;
-    onFullscreenChange?: (paneId: string | null) => void;
+    /** Render function mapping unique pane nodes to React elements. Usually renders a <Pane> wrapper. */
+    renderPane?: (paneId: string) => ReactNode;
+    /** Size/thickness of the split handle resizer bars in pixels. */
+    resizerSize?: number;
+    /** Minimum pixel distance that a user must drag a pane handle before dragging triggers. Defaults to 8. */
+    dragActivationDistance?: number;
+    /** Threshold value in pixels for snapping layout resizing handles to adjacent edges. Defaults to 8. */
     snapThreshold?: number;
+    /** Minimum split percentage allowed when resizing split panes. Defaults to 5. */
+    minSplitPercentage?: number;
+    /** Maximum split percentage allowed when resizing split panes. Defaults to 95. */
+    maxSplitPercentage?: number;
+    /** Whether dragging a pane far enough outside the container triggers a drag-out/dismiss action. Defaults to false. */
+    enableDragToDismiss?: boolean;
+    /** The threshold in pixels beyond the container boundaries required to activate the drag-out/dismiss action. Defaults to 60. */
+    dismissThreshold?: number;
+    /** Callback triggered when a pane is removed from the dashboard layout tree. */
+    onRemove?: (paneId: string) => void;
+    /** Callback triggered when dragging starts for a pane. */
+    onDragStart?: (activeId: string) => void;
+    /** Callback triggered when dragging ends, providing details on target pane and drop action (split or move). */
+    onDragEnd?: (activeId: string, overId: string | null, dropAction: {
+        type: 'split' | 'move';
+        direction?: SplitDirection;
+        position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    } | null) => void;
+    /** Callback triggered when the user starts dragging a resizing handle between split panes. */
     onResizeStart?: (currentNode: SplitNode) => void;
+    /** Callback triggered continuously while the user is dragging a resizing handle. Passes the new split percentage. */
     onResize?: (currentNode: SplitNode, percentage: number) => void;
+    /** Callback triggered when the user stops dragging a resizing handle. Passes the final split percentage. */
     onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
-    minSplitPercentage?: number;
-    maxSplitPercentage?: number;
-}
-interface ZeugmaDragStateValue {
-    /** The ID of the tab currently hovered over during a tab drag, or null. */
-    overTabId: string | null;
-    /** The position of the tab drop preview relative to the hovered tab ('before' | 'after'). */
-    overTabPosition: 'before' | 'after' | null;
-}
-/**
- * Actions context — holds stable dispatch functions with permanent identity.
- * Consumers of only this context will never re-render from layout/drag state changes.
- */
-interface ZeugmaActionsValue {
-    /** Removes the specified pane or widget from the layout tree and collapses its parent split. */
-    removePane: (paneId: string) => void;
-    /** Appends/inserts a widget at the bottom-rightmost leaf of the layout tree. */
-    addWidget: (widgetId: string, metadata?: Record<string, unknown>) => void;
-    /** Appends a tab into a target pane node, or splits/creates a new pane if no target pane ID is provided. */
-    addTab: (tabId: string, targetPaneId?: string, metadata?: Record<string, unknown>) => void;
-    /** Stable callback to update metadata for a specific tab or widget. */
-    updateMetadata: (id: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined) => void;
-    /** Stable callback to update the locked status of a specific pane in the layout tree. */
-    updatePaneLock: (paneId: string, locked: boolean) => void;
-    /** Stable callback to activate a tab within a pane. */
-    selectTab: (paneId: string, tabId: string) => void;
-    /** Stable callback to merge a dragged tab/pane into another pane's tab list. */
-    mergeTab: (draggedTabId: string, targetPaneId: string) => void;
-    /** Stable callback to remove/close a specific tab from the layout. */
-    removeTab: (tabId: string) => void;
-    /** Programmatically sets the fullscreen pane ID. */
-    setFullscreenPaneId: (paneId: string | null) => void;
-    /** Programmatically updates the global locked status. */
-    setLocked: Dispatch<SetStateAction<boolean>>;
-    /** Splits an existing pane and adds a new one. */
-    splitPane: (targetId: string, direction: SplitDirection, splitType: 'left' | 'right' | 'top' | 'bottom', paneToAdd: string) => void;
-    /** Updates the split percentage of a split node. */
-    updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void;
-    /** Moves/reorders a tab relative to another target tab. */
-    moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void;
-}
-interface ZeugmaContextValue extends ZeugmaStateValue, ZeugmaActionsValue {
+    /** Callback triggered when the drag-out/dismiss intent changes. */
+    onDismissIntentChange?: (paneId: string | null) => void;
 }
-interface PortalRegistryValue {
-    registerPortalTarget: (tabId: string, el: HTMLDivElement | null) => void;
+interface ZeugmaProviderProps extends Omit<ZeugmaProps, 'controller'> {
+    /** The Zeugma Controller returned by useZeugma() */
+    controller: ZeugmaController;
+    /** Children components that will have access to the Zeugma context */
+    children: ReactNode;
 }
 
-export type { LeafNode as L, PortalRegistryValue as P, SplitDirection as S, TreeNode as T, UseZeugmaOptions as U, WidgetNode as W, ZeugmaActionsValue as Z, ZeugmaDragStateValue as a, ZeugmaStateValue as b, ZeugmaController as c, ZeugmaContextValue as d, ZeugmaProps as e, SplitNode as f, PaneNode as g, TabDetails as h, ZeugmaClassNames as i };
+export type { DragOverlayActiveItem as D, PaneNode as P, SplitDirection as S, TreeNode as T, UseZeugmaOptions as U, ZeugmaController as Z, ZeugmaProps as a, ZeugmaProviderProps as b, SplitNode as c, TabDetails as d, ZeugmaClassNames as e };

package/dist/{types-Diujkc-H.d.ts → types-BN5W7EvY.d.ts}

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, RefObject, ReactNode } from 'react';
+import { Dispatch, SetStateAction, ReactNode } from 'react';
 
 type SplitDirection = 'row' | 'column';
 interface SplitNode {
@@ -16,14 +16,7 @@ interface PaneNode {
     locked?: boolean;
     tabsMetadata?: Record<string, Record<string, unknown>>;
 }
-interface WidgetNode {
-    type: 'widget';
-    id: string;
-    locked?: boolean;
-    metadata?: Record<string, unknown>;
-}
-type LeafNode = PaneNode | WidgetNode;
-type TreeNode = SplitNode | LeafNode;
+type TreeNode = SplitNode | PaneNode;
 interface TabDetails {
     id: string;
     paneId: string;
@@ -44,86 +37,26 @@ interface UseZeugmaOptions {
     onFullscreenChange?: (paneId: string | null) => void;
     /** Whether the layout is locked. When locked, resizing, dragging, and dropping are disabled. */
     locked?: boolean;
-    /** Minimum pixel distance that a user must drag a pane handle before dragging triggers. Defaults to 8. */
-    dragActivationDistance?: number;
-    /** Threshold value in pixels for snapping layout resizing handles to adjacent edges. Defaults to 8. */
-    snapThreshold?: number;
-    /** Minimum split percentage allowed when resizing split panes. Defaults to 5. */
-    minSplitPercentage?: number;
-    /** Maximum split percentage allowed when resizing split panes. Defaults to 95. */
-    maxSplitPercentage?: number;
-    /** Whether dragging a pane far enough outside the container triggers a drag-out/dismiss action. Defaults to false. */
-    enableDragToDismiss?: boolean;
-    /** The threshold in pixels beyond the container boundaries required to activate the drag-out/dismiss action. Defaults to 60. */
-    dismissThreshold?: number;
-    /** Callback triggered when a pane is removed from the dashboard layout tree. */
-    onRemove?: (paneId: string) => void;
-    /** Callback triggered when dragging starts for a pane. */
-    onDragStart?: (activeId: string) => void;
-    /** Callback triggered when dragging ends, providing details on target pane and drop action (split or move). */
-    onDragEnd?: (activeId: string, overId: string | null, dropAction: {
-        type: 'split' | 'move';
-        direction?: SplitDirection;
-        position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
-    } | null) => void;
-    /** Callback triggered when the user starts dragging a resizing handle between split panes. */
-    onResizeStart?: (currentNode: SplitNode) => void;
-    /** Callback triggered continuously while the user is dragging a resizing handle. Passes the new split percentage. */
-    onResize?: (currentNode: SplitNode, percentage: number) => void;
-    /** Callback triggered when the user stops dragging a resizing handle. Passes the final split percentage. */
-    onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
-    /** Callback triggered when the drag-out/dismiss intent changes. */
-    onDismissIntentChange?: (paneId: string | null) => void;
 }
-interface ZeugmaController {
+interface ZeugmaState {
     /** The current active layout tree structure, or null if empty. */
     layout: TreeNode | null;
-    /** Updates the layout tree. Also resets transient states like fullscreenPaneId. */
-    setLayout: Dispatch<SetStateAction<TreeNode | null>>;
-    /** @internal Raw layout setter used by DnD internals — does NOT reset transient states. */
-    _internalSetLayout: Dispatch<SetStateAction<TreeNode | null>>;
     /** The ID of the pane currently zoomed to fullscreen, or null. */
     fullscreenPaneId: string | null;
-    /** Programmatically sets the fullscreen pane ID. */
-    setFullscreenPaneId: (paneId: string | null) => void;
     /** Whether the layout is globally locked. */
     locked: boolean;
+}
+interface ZeugmaStateSetters {
+    /** Updates the layout tree. Also resets transient states like fullscreenPaneId. */
+    setLayout: Dispatch<SetStateAction<TreeNode | null>>;
+    /** Programmatically sets the fullscreen pane ID. */
+    setFullscreenPaneId: (paneId: string | null) => void;
     /** Programmatically updates the global locked status. */
     setLocked: Dispatch<SetStateAction<boolean>>;
-    /** The ID of the active dragged item (pane or tab). */
-    activeId: string | null;
-    /** The type of the active dragged item ('pane' | 'tab'). */
-    activeType: 'pane' | 'tab' | null;
-    /** The ID of the item with active dismiss intent, or null. */
-    dismissIntentId: string | null;
-    setActiveId: Dispatch<SetStateAction<string | null>>;
-    setActiveType: Dispatch<SetStateAction<'pane' | 'tab' | null>>;
-    setDismissIntentId: Dispatch<SetStateAction<string | null>>;
-    containerRef: RefObject<HTMLElement | null>;
-    setContainerRef: (element: HTMLElement | null) => void;
-    layoutBeforeDrag: TreeNode | null;
-    setLayoutBeforeDrag: Dispatch<SetStateAction<TreeNode | null>>;
-    dragActivationDistance: number;
-    snapThreshold: number;
-    minSplitPercentage: number;
-    maxSplitPercentage: number;
-    enableDragToDismiss: boolean;
-    dismissThreshold: number;
-    onRemove?: (paneId: string) => void;
-    onDragStart?: (activeId: string) => void;
-    onDragEnd?: (activeId: string, overId: string | null, dropAction: {
-        type: 'split' | 'move';
-        direction?: SplitDirection;
-        position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
-    } | null) => void;
-    onResizeStart?: (currentNode: SplitNode) => void;
-    onResize?: (currentNode: SplitNode, percentage: number) => void;
-    onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
-    onDismissIntentChange?: (paneId: string | null) => void;
+}
+interface ZeugmaActions {
     /** Removes the specified pane or widget from the layout tree and collapses its parent split. */
     removePane: (paneId: string) => void;
-    /** Appends/inserts a widget at the bottom-rightmost leaf of the layout tree. */
-    addWidget: (widgetId: string, metadata?: Record<string, unknown>) => void;
     /** Appends a tab into a target pane node, or splits/creates a new pane if no target pane ID is provided. */
     addTab: (tabId: string, targetPaneId?: string, metadata?: Record<string, unknown>) => void;
     /** Stable callback to update metadata for a specific tab or widget. */
@@ -142,12 +75,20 @@ interface ZeugmaController {
     updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void;
     /** Moves/reorders a tab relative to another target tab. */
     moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void;
+}
+interface ZeugmaQueries {
     /** Find a PaneNode or WidgetNode by its ID in the layout tree. */
-    findPaneById: (paneId: string) => LeafNode | null;
+    findPaneById: (paneId: string) => PaneNode | null;
     /** Find the PaneNode containing the given tab ID in the layout tree. */
     findPaneContainingTab: (tabId: string) => PaneNode | null;
     /** Find the details of a tab by its ID in the layout tree. */
     findTabById: (tabId: string) => TabDetails | null;
+    /** Get the metadata for a specific tab by its ID. */
+    getTabMetadata: (tabId: string) => Record<string, unknown> | undefined;
+    /** Get the metadata of the active tab in a specific pane by the pane ID. */
+    getActiveTabMetadata: (paneId: string) => Record<string, unknown> | undefined;
+}
+interface ZeugmaController extends ZeugmaState, ZeugmaStateSetters, ZeugmaActions, ZeugmaQueries {
 }
 interface ZeugmaClassNames {
     /** CSS class applied to the root dashboard container. */
@@ -172,106 +113,81 @@ interface ZeugmaClassNames {
     dashboardLocked?: string;
     /** CSS class applied to drop zone indicator when hovering over a locked pane. */
     lockedPreview?: string;
-    /** CSS class applied to tab drop preview splitter line. */
+    /** CSS class applied to drop zone indicator when hovering over a locked pane. */
     tabDropPreview?: string;
     /** CSS class applied to the separator line between tabs. */
     tabSeparator?: string;
+    /** CSS class applied to the wrapper element for a tab's contents. */
+    tabContentWrapper?: string;
+    /** CSS class applied to the tabs container div. */
+    tabsContainer?: string;
+    /** CSS class applied to individual tabs (as static string or dynamic callback). */
+    tab?: string | ((tabId: string) => string);
+    /** CSS class applied to the pane inner container (containing header and content). */
+    paneContainer?: string;
+    /** CSS class applied to the pane header bar. */
+    paneHeader?: string;
+    /** CSS class applied to the pane controls wrapper. */
+    paneControls?: string;
+    /** CSS class applied to the pane buttons (maximize/close). */
+    paneButton?: string;
+    /** CSS class applied to the default tab close button. */
+    tabCloseButton?: string;
+    /** CSS class applied to the drag handle. */
+    dragHandle?: string;
+}
+interface DragOverlayActiveItem {
+    type: 'tab' | 'pane';
+    id: string;
+    isDismissing: boolean;
 }
-interface ZeugmaProps extends ZeugmaController {
-    /** Render function mapping unique pane IDs to React elements. Usually renders a <Pane> wrapper. */
-    renderPane: (paneId: string) => ReactNode;
+interface ZeugmaProps {
+    /** The Zeugma Controller returned by useZeugma() */
+    controller?: ZeugmaController;
     /** Custom overlay renderer function used to customize the cursor-following drag preview for an active pane or tab. */
-    renderDragOverlay?: (activeId: string, type: 'pane' | 'tab') => ReactNode;
+    renderDragOverlay?: (active: DragOverlayActiveItem) => ReactNode;
     /** Optional CSS class name mapping overrides for custom styles of components like panes, drop previews, overlays, etc. */
     classNames?: ZeugmaClassNames;
-    /** Render function mapping tab IDs to React elements. Used to render tab widgets inside portals. */
-    renderWidget?: (tabId: string) => ReactNode;
-    /** Child nodes nested inside the Zeugma context, usually containing a <PaneTree> or similar layout viewer. */
-    children: ReactNode;
-}
-/**
- * State context — holds reactive values that change during runtime.
- * All consumers of this context will re-render when any of these values change.
- */
-interface ZeugmaStateValue {
-    /** The current active layout tree structure, or null if empty. */
-    layout: TreeNode | null;
-    /** Callback to update the layout tree. */
-    setLayout: Dispatch<SetStateAction<TreeNode | null>>;
-    /** Renders the inner content of a pane given its unique ID. */
-    renderPane: (paneId: string) => ReactNode;
-    /** The ID of the pane currently zoomed to fullscreen, or null. */
-    fullscreenPaneId: string | null;
-    /** Normalized or overridden CSS classes for custom layout styling. */
-    classNames: ZeugmaClassNames;
-    /** Whether the layout is globally locked. */
-    locked: boolean;
-    /** Programmatically updates the global locked status. */
-    setLocked: Dispatch<SetStateAction<boolean>>;
-    /** Find a PaneNode or WidgetNode by its ID in the layout tree. */
-    findPaneById: (paneId: string) => LeafNode | null;
-    /** Find the PaneNode containing the given tab ID in the layout tree. */
-    findPaneContainingTab: (tabId: string) => PaneNode | null;
-    /** Find the details of a tab by its ID in the layout tree. */
-    findTabById: (tabId: string) => TabDetails | null;
-    /** The ID of the active dragged item (pane or tab). */
-    activeId: string | null;
-    /** The type of the active dragged item ('pane' | 'tab'). */
-    activeType: 'pane' | 'tab' | null;
-    /** The ID of the item with active dismiss intent, or null. */
-    dismissIntentId: string | null;
-    setContainerRef: (element: HTMLElement | null) => void;
-    onRemove?: (paneId: string) => void;
-    onFullscreenChange?: (paneId: string | null) => void;
+    /** Render function mapping unique pane nodes to React elements. Usually renders a <Pane> wrapper. */
+    renderPane?: (paneId: string) => ReactNode;
+    /** Size/thickness of the split handle resizer bars in pixels. */
+    resizerSize?: number;
+    /** Minimum pixel distance that a user must drag a pane handle before dragging triggers. Defaults to 8. */
+    dragActivationDistance?: number;
+    /** Threshold value in pixels for snapping layout resizing handles to adjacent edges. Defaults to 8. */
     snapThreshold?: number;
+    /** Minimum split percentage allowed when resizing split panes. Defaults to 5. */
+    minSplitPercentage?: number;
+    /** Maximum split percentage allowed when resizing split panes. Defaults to 95. */
+    maxSplitPercentage?: number;
+    /** Whether dragging a pane far enough outside the container triggers a drag-out/dismiss action. Defaults to false. */
+    enableDragToDismiss?: boolean;
+    /** The threshold in pixels beyond the container boundaries required to activate the drag-out/dismiss action. Defaults to 60. */
+    dismissThreshold?: number;
+    /** Callback triggered when a pane is removed from the dashboard layout tree. */
+    onRemove?: (paneId: string) => void;
+    /** Callback triggered when dragging starts for a pane. */
+    onDragStart?: (activeId: string) => void;
+    /** Callback triggered when dragging ends, providing details on target pane and drop action (split or move). */
+    onDragEnd?: (activeId: string, overId: string | null, dropAction: {
+        type: 'split' | 'move';
+        direction?: SplitDirection;
+        position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    } | null) => void;
+    /** Callback triggered when the user starts dragging a resizing handle between split panes. */
     onResizeStart?: (currentNode: SplitNode) => void;
+    /** Callback triggered continuously while the user is dragging a resizing handle. Passes the new split percentage. */
     onResize?: (currentNode: SplitNode, percentage: number) => void;
+    /** Callback triggered when the user stops dragging a resizing handle. Passes the final split percentage. */
     onResizeEnd?: (currentNode: SplitNode, percentage: number) => void;
-    minSplitPercentage?: number;
-    maxSplitPercentage?: number;
-}
-interface ZeugmaDragStateValue {
-    /** The ID of the tab currently hovered over during a tab drag, or null. */
-    overTabId: string | null;
-    /** The position of the tab drop preview relative to the hovered tab ('before' | 'after'). */
-    overTabPosition: 'before' | 'after' | null;
-}
-/**
- * Actions context — holds stable dispatch functions with permanent identity.
- * Consumers of only this context will never re-render from layout/drag state changes.
- */
-interface ZeugmaActionsValue {
-    /** Removes the specified pane or widget from the layout tree and collapses its parent split. */
-    removePane: (paneId: string) => void;
-    /** Appends/inserts a widget at the bottom-rightmost leaf of the layout tree. */
-    addWidget: (widgetId: string, metadata?: Record<string, unknown>) => void;
-    /** Appends a tab into a target pane node, or splits/creates a new pane if no target pane ID is provided. */
-    addTab: (tabId: string, targetPaneId?: string, metadata?: Record<string, unknown>) => void;
-    /** Stable callback to update metadata for a specific tab or widget. */
-    updateMetadata: (id: string, updater: (current: Record<string, unknown> | undefined) => Record<string, unknown> | undefined) => void;
-    /** Stable callback to update the locked status of a specific pane in the layout tree. */
-    updatePaneLock: (paneId: string, locked: boolean) => void;
-    /** Stable callback to activate a tab within a pane. */
-    selectTab: (paneId: string, tabId: string) => void;
-    /** Stable callback to merge a dragged tab/pane into another pane's tab list. */
-    mergeTab: (draggedTabId: string, targetPaneId: string) => void;
-    /** Stable callback to remove/close a specific tab from the layout. */
-    removeTab: (tabId: string) => void;
-    /** Programmatically sets the fullscreen pane ID. */
-    setFullscreenPaneId: (paneId: string | null) => void;
-    /** Programmatically updates the global locked status. */
-    setLocked: Dispatch<SetStateAction<boolean>>;
-    /** Splits an existing pane and adds a new one. */
-    splitPane: (targetId: string, direction: SplitDirection, splitType: 'left' | 'right' | 'top' | 'bottom', paneToAdd: string) => void;
-    /** Updates the split percentage of a split node. */
-    updateSplitPercentage: (currentNode: SplitNode, percentage: number) => void;
-    /** Moves/reorders a tab relative to another target tab. */
-    moveTab: (draggedTabId: string, targetTabId: string, position?: 'before' | 'after') => void;
-}
-interface ZeugmaContextValue extends ZeugmaStateValue, ZeugmaActionsValue {
+    /** Callback triggered when the drag-out/dismiss intent changes. */
+    onDismissIntentChange?: (paneId: string | null) => void;
 }
-interface PortalRegistryValue {
-    registerPortalTarget: (tabId: string, el: HTMLDivElement | null) => void;
+interface ZeugmaProviderProps extends Omit<ZeugmaProps, 'controller'> {
+    /** The Zeugma Controller returned by useZeugma() */
+    controller: ZeugmaController;
+    /** Children components that will have access to the Zeugma context */
+    children: ReactNode;
 }
 
-export type { LeafNode as L, PortalRegistryValue as P, SplitDirection as S, TreeNode as T, UseZeugmaOptions as U, WidgetNode as W, ZeugmaActionsValue as Z, ZeugmaDragStateValue as a, ZeugmaStateValue as b, ZeugmaController as c, ZeugmaContextValue as d, ZeugmaProps as e, SplitNode as f, PaneNode as g, TabDetails as h, ZeugmaClassNames as i };
+export type { DragOverlayActiveItem as D, PaneNode as P, SplitDirection as S, TreeNode as T, UseZeugmaOptions as U, ZeugmaController as Z, ZeugmaProps as a, ZeugmaProviderProps as b, SplitNode as c, TabDetails as d, ZeugmaClassNames as e };