react-zeugma 6.3.0 → 6.4.0

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

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, RefObject, ReactNode } from 'react';
+import { ReactNode, RefObject, Dispatch, SetStateAction } 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,34 @@ 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 {
+}
+/** @internal Internal controller containing transient drag-and-drop orchestration state. */
+interface ZeugmaControllerInternal extends ZeugmaController {
+    _internalSetLayout: Dispatch<SetStateAction<TreeNode | null>>;
+    activeId: string | null;
+    setActiveId: Dispatch<SetStateAction<string | null>>;
+    activeType: 'pane' | 'tab' | null;
+    setActiveType: Dispatch<SetStateAction<'pane' | 'tab' | null>>;
+    dismissIntentId: string | null;
+    setDismissIntentId: Dispatch<SetStateAction<string | null>>;
+    containerRef: RefObject<HTMLElement | null>;
+    setContainerRef: (element: HTMLElement | null) => void;
+    layoutBeforeDrag: TreeNode | null;
+    setLayoutBeforeDrag: Dispatch<SetStateAction<TreeNode | null>>;
 }
 interface ZeugmaClassNames {
     /** CSS class applied to the root dashboard container. */
@@ -172,48 +127,93 @@ 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 ZeugmaProps extends ZeugmaController {
-    /** Render function mapping unique pane IDs to React elements. Usually renders a <Pane> wrapper. */
-    renderPane: (paneId: string) => ReactNode;
+interface DragOverlayActiveItem {
+    type: 'tab' | 'pane';
+    id: string;
+    isDismissing: boolean;
+}
+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;
+    /** 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;
+    /** Callback triggered when the drag-out/dismiss intent changes. */
+    onDismissIntentChange?: (paneId: string | null) => void;
 }
 /**
  * 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;
+/**
+ * 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 extends ZeugmaState, ZeugmaQueries {
     /** 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;
+    /** Normalized or overridden CSS classes for custom layout styling. */
+    classNames: ZeugmaClassNames;
+    /** Render function mapping unique pane nodes to React elements. */
+    renderPane: (paneId: string) => ReactNode;
     /** The ID of the active dragged item (pane or tab). */
     activeId: string | null;
     /** The type of the active dragged item ('pane' | 'tab'). */
@@ -240,38 +240,16 @@ interface ZeugmaDragStateValue {
  * 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;
+interface ZeugmaActionsValue extends ZeugmaActions {
     /** 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 {
 }
 interface PortalRegistryValue {
     registerPortalTarget: (tabId: string, el: HTMLDivElement | null) => void;
+    registerRenderCallback: (tabId: string, render: (tab: TabDetails) => ReactNode) => void;
+    renderCallbacksRef: RefObject<Record<string, (tab: TabDetails) => 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, PortalRegistryValue as P, SplitDirection as S, TreeNode as T, UseZeugmaOptions as U, ZeugmaActionsValue as Z, ZeugmaDragStateValue as a, ZeugmaStateValue as b, ZeugmaController as c, ZeugmaProps as d, SplitNode as e, TabDetails as f, PaneNode as g, ZeugmaActions as h, ZeugmaClassNames as i, ZeugmaControllerInternal as j, ZeugmaQueries as k, ZeugmaState as l, ZeugmaStateSetters as m };

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

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, RefObject, ReactNode } from 'react';
+import { ReactNode, RefObject, Dispatch, SetStateAction } 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,34 @@ 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 {
+}
+/** @internal Internal controller containing transient drag-and-drop orchestration state. */
+interface ZeugmaControllerInternal extends ZeugmaController {
+    _internalSetLayout: Dispatch<SetStateAction<TreeNode | null>>;
+    activeId: string | null;
+    setActiveId: Dispatch<SetStateAction<string | null>>;
+    activeType: 'pane' | 'tab' | null;
+    setActiveType: Dispatch<SetStateAction<'pane' | 'tab' | null>>;
+    dismissIntentId: string | null;
+    setDismissIntentId: Dispatch<SetStateAction<string | null>>;
+    containerRef: RefObject<HTMLElement | null>;
+    setContainerRef: (element: HTMLElement | null) => void;
+    layoutBeforeDrag: TreeNode | null;
+    setLayoutBeforeDrag: Dispatch<SetStateAction<TreeNode | null>>;
 }
 interface ZeugmaClassNames {
     /** CSS class applied to the root dashboard container. */
@@ -172,48 +127,93 @@ 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 ZeugmaProps extends ZeugmaController {
-    /** Render function mapping unique pane IDs to React elements. Usually renders a <Pane> wrapper. */
-    renderPane: (paneId: string) => ReactNode;
+interface DragOverlayActiveItem {
+    type: 'tab' | 'pane';
+    id: string;
+    isDismissing: boolean;
+}
+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;
+    /** 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;
+    /** Callback triggered when the drag-out/dismiss intent changes. */
+    onDismissIntentChange?: (paneId: string | null) => void;
 }
 /**
  * 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;
+/**
+ * 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 extends ZeugmaState, ZeugmaQueries {
     /** 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;
+    /** Normalized or overridden CSS classes for custom layout styling. */
+    classNames: ZeugmaClassNames;
+    /** Render function mapping unique pane nodes to React elements. */
+    renderPane: (paneId: string) => ReactNode;
     /** The ID of the active dragged item (pane or tab). */
     activeId: string | null;
     /** The type of the active dragged item ('pane' | 'tab'). */
@@ -240,38 +240,16 @@ interface ZeugmaDragStateValue {
  * 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;
+interface ZeugmaActionsValue extends ZeugmaActions {
     /** 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 {
 }
 interface PortalRegistryValue {
     registerPortalTarget: (tabId: string, el: HTMLDivElement | null) => void;
+    registerRenderCallback: (tabId: string, render: (tab: TabDetails) => ReactNode) => void;
+    renderCallbacksRef: RefObject<Record<string, (tab: TabDetails) => 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, PortalRegistryValue as P, SplitDirection as S, TreeNode as T, UseZeugmaOptions as U, ZeugmaActionsValue as Z, ZeugmaDragStateValue as a, ZeugmaStateValue as b, ZeugmaController as c, ZeugmaProps as d, SplitNode as e, TabDetails as f, PaneNode as g, ZeugmaActions as h, ZeugmaClassNames as i, ZeugmaControllerInternal as j, ZeugmaQueries as k, ZeugmaState as l, ZeugmaStateSetters as m };