@kodiak-finance/orderly-layout-split 2.9.2-alpha.0

package/dist/index.d.ts

@@ -0,0 +1,506 @@
+import React, { PropsWithChildren, FC } from 'react';
+import { PanelRegistry, LayoutRendererProps, LayoutStrategy } from '@kodiak-finance/orderly-layout-core';
+import { OrderlySDK } from '@kodiak-finance/orderly-ui';
+import { DesktopLayoutProps } from '@kodiak-finance/orderly-trading-next';
+export { DesktopLayoutProps } from '@kodiak-finance/orderly-trading-next';
+import Split, { SplitProps } from '@uiw/react-split';
+
+/** Breakpoint keys for responsive split layout (viewport-based). */
+type SplitLayoutBreakpointKey = "lg" | "md" | "sm" | "xs";
+/**
+ * Constraints shared by panel and split-child nodes (size per child).
+ * minSize/maxSize use "%" format, e.g. "20%", "80%".
+ */
+interface SplitLayoutChildConstraints {
+    /** Default size, e.g. "40%", "auto" */
+    size?: string;
+    /** Minimum size in "%" format, e.g. "20%" */
+    minSize?: string;
+    /** Maximum size in "%" format, e.g. "80%" */
+    maxSize?: string;
+    /** When true, panel cannot be resized (maps to ResizablePanel disabled) */
+    disabled?: boolean;
+    /** When true, panel can be collapsed/expanded by user */
+    collapsible?: boolean;
+    /** When true, panel is initially collapsed */
+    defaultCollapsed?: boolean;
+    /** Panel title displayed in collapsible header */
+    title?: string;
+}
+/**
+ * Split layout node: single panel, split container, or sort container.
+ * Panel identifier is kept as `id` with no conversion.
+ */
+type SplitLayoutNode$1 = ({
+    type: "panel";
+    /** Panel ID */
+    id: string;
+    /** Optional class name applied to the outer panel wrapper. */
+    className?: string;
+    /** Optional inline style applied to the outer panel wrapper. */
+    style?: React.CSSProperties;
+} & SplitLayoutChildConstraints) | ({
+    type: "split";
+    orientation: "horizontal" | "vertical";
+    /** Children; each has size/minSize/maxSize/disabled. */
+    children: SplitLayoutNode$1[];
+    /** Size of this split when used as a child (e.g. "30%", "auto"). Used by parent SplitLayout for ResizablePanel. */
+    size?: string;
+    /** Optional class name applied to the ResizablePanelGroup wrapper. */
+    className?: string;
+    /** Optional inline style applied to the ResizablePanelGroup wrapper. */
+    style?: React.CSSProperties;
+} & Partial<SplitLayoutChildConstraints>) | ({
+    type: "sort";
+    /** Layout orientation for the sortable list (vertical = list, horizontal = row). */
+    orientation: "horizontal" | "vertical";
+    /** Sortable panel children; order can be changed via drag-and-drop. */
+    children: SplitLayoutNode$1[];
+    /** Size of this sort when used as a child (e.g. "30%", "auto"). Used by parent SplitLayout for ResizablePanel. */
+    size?: string;
+    /** Optional class name applied to the sort container wrapper. */
+    className?: string;
+    /** Optional inline style applied to the sort container wrapper. */
+    style?: React.CSSProperties;
+} & Partial<SplitLayoutChildConstraints>);
+/** Breakpoint width map (min width for each key). */
+interface SplitLayoutBreakpoints {
+    lg: number;
+    md: number;
+    sm: number;
+    xs: number;
+}
+/** Plugin classNames applied to panel group, panel, and handle. */
+type SplitLayoutClassNames = {
+    panelGroup?: string;
+    panel?: string;
+    handle?: string;
+};
+/**
+ * Split layout model for backward compatibility.
+ * In the fixed layout approach, this is less relevant but kept for plugin API compatibility.
+ */
+interface SplitLayoutModel {
+    layouts: {
+        lg: SplitLayoutNode$1;
+        md: SplitLayoutNode$1;
+        sm: SplitLayoutNode$1;
+        xs: SplitLayoutNode$1;
+    };
+    breakpoints: SplitLayoutBreakpoints;
+}
+
+/** Per-panel constraints for minSize, maxSize (both "%" format), and fixed. */
+interface PanelConstraints {
+    minSize?: string;
+    maxSize?: string;
+    /** When true, panel cannot be resized (ResizablePanel disabled) */
+    disabled?: boolean;
+}
+/**
+ * Props for SplitLayout component.
+ * Uses Resizable (react-resizable-panels); no dependency on @uiw/react-split.
+ */
+interface SplitLayoutProps extends PropsWithChildren {
+    /** Layout orientation: horizontal or vertical */
+    orientation: "horizontal" | "vertical";
+    /** Optional initial sizes per panel (e.g. ["40%", "60%"], "auto" for equal share, "fixed" for non-resizable content) */
+    sizes?: string[];
+    /** Optional per-panel constraints (minSize, maxSize in "%", disabled for fixed) */
+    panelConstraints?: PanelConstraints[];
+    /** Callback when panel sizes change (full array of percentage strings) */
+    onSizeChange?: (sizes: string[]) => void;
+    /** Optional class name for the group container */
+    className?: string;
+    /** Optional inline style for the group container */
+    style?: React.CSSProperties;
+    /** Optional classNames for panel group, panel, and handle (from plugin options). */
+    classNames?: SplitLayoutClassNames;
+    /** Optional gap between panels in px (total; handle margin = gap/2 each side). Undefined preserves default 3px per side. */
+    gap?: number;
+}
+declare function SplitLayout({ orientation, sizes, panelConstraints, onSizeChange, children, className, style, classNames, gap, }: SplitLayoutProps): React.ReactElement;
+declare namespace SplitLayout {
+    var displayName: string;
+}
+
+/**
+ * Returns a stable sortable id for a child node (panel uses id, others use path).
+ * Never returns empty string to avoid React duplicate key warnings when id is missing.
+ */
+declare function getSortableIdForChild(child: SplitLayoutNode$1, path: number[], index: number): string;
+/**
+ * Reorders children at the given path and returns the updated root.
+ * Used when user drags to reorder within a sort container.
+ */
+declare function updateOrderAtPath(node: SplitLayoutNode$1, path: number[], newOrder: SplitLayoutNode$1[]): SplitLayoutNode$1;
+/**
+ * Creates default split layout for given panel IDs (strategy.defaultLayout).
+ * This is a fallback when getInitialLayout is not provided.
+ * Same simple horizontal tree for all breakpoints.
+ *
+ * @param panelIds - Panel IDs to include
+ * @returns Split layout model with layouts and breakpoints
+ */
+declare function createDefaultSplitLayout(panelIds: string[]): SplitLayoutModel;
+/**
+ * Serializes split layout model to JSON (layouts + breakpoints only).
+ */
+declare function serializeSplitLayout(layout: SplitLayoutModel): string;
+/**
+ * Deserializes JSON to split layout model; validates layouts and breakpoints.
+ * No conversion: panel nodes keep `id` as stored.
+ */
+declare function deserializeSplitLayout(json: string): SplitLayoutModel;
+
+/**
+ * Context for split layout configuration (panels, layout, breakpoint, callbacks).
+ * Provides configuration to SplitNodeRenderer without prop drilling.
+ */
+
+interface SplitLayoutConfigValue {
+    /** Registry of panel components (id -> React.ReactNode). */
+    panels: PanelRegistry;
+    /** Current layout model with breakpoint roots. */
+    layout: SplitLayoutModel;
+    /** Current breakpoint key (e.g. "md", "sm"). */
+    breakpoint: keyof SplitLayoutModel["layouts"];
+    /** Callback when layout model changes. */
+    onLayoutChange: (layout: SplitLayoutModel) => void;
+    /** Callback when panel sizes change at a path. */
+    onSizeChange: (path: number[], sizes: string[]) => void;
+    /** Callback when panel sizes should be persisted (e.g., on resize end). */
+    onSizePersist?: (path: number[], sizes: string[]) => void;
+    /** Optional classNames for panel group, panel, and handle (from plugin options). */
+    classNames?: SplitLayoutClassNames;
+    /** Optional gap between panels in px (from plugin options). */
+    gap?: number;
+    /** Set of collapsed panel IDs. */
+    collapsedPanels: Set<string>;
+    /** Toggle collapse state for a panel. */
+    togglePanelCollapse: (panelId: string) => void;
+    /** Check if a panel is collapsed. */
+    isPanelCollapsed: (panelId: string) => boolean;
+    /** Map of panel IDs that are collapsible. */
+    collapsiblePanels: Map<string, boolean>;
+    /** Check if a panel is collapsible. */
+    isPanelCollapsible: (panelId: string) => boolean;
+}
+interface SplitLayoutConfigProviderProps {
+    /** Registry of panel components. */
+    panels: PanelRegistry;
+    /** Current layout model. */
+    layout: SplitLayoutModel;
+    /** Current breakpoint key. */
+    breakpoint: keyof SplitLayoutModel["layouts"];
+    /** Callback when layout model changes. */
+    onLayoutChange: (layout: SplitLayoutModel) => void;
+    /** Callback when panel sizes change. */
+    onSizeChange: (path: number[], sizes: string[]) => void;
+    /** Callback when panel sizes should be persisted. */
+    onSizePersist?: (path: number[], sizes: string[]) => void;
+    /** Optional classNames for panel group, panel, and handle. */
+    classNames?: SplitLayoutClassNames;
+    /** Optional gap between panels in px. */
+    gap?: number;
+    /** Set of collapsed panel IDs. */
+    collapsedPanels: Set<string>;
+    /** Toggle collapse state for a panel. */
+    togglePanelCollapse: (panelId: string) => void;
+    /** Check if a panel is collapsed. */
+    isPanelCollapsed: (panelId: string) => boolean;
+    /** Map of panel IDs that are collapsible. */
+    collapsiblePanels: Map<string, boolean>;
+    /** Check if a panel is collapsible. */
+    isPanelCollapsible: (panelId: string) => boolean;
+    children: React.ReactNode;
+}
+/**
+ * Provides layout configuration to SplitNodeRenderer.
+ * Use at the root of the split layout renderer.
+ */
+declare function SplitLayoutConfigProvider({ panels, layout, breakpoint, onLayoutChange, onSizeChange, onSizePersist, classNames, gap, collapsedPanels, togglePanelCollapse, isPanelCollapsed, collapsiblePanels, isPanelCollapsible, children, }: SplitLayoutConfigProviderProps): React.ReactElement;
+/**
+ * Hook to read layout config from context.
+ * Throws if used outside SplitLayoutConfigProvider.
+ */
+declare function useSplitLayoutConfig(): SplitLayoutConfigValue;
+
+/** Plugin registration options */
+interface LayoutSplitPluginOptions {
+    gap?: number;
+    classNames?: {
+        panelGroup?: string;
+        panel?: string;
+        handle?: string;
+        container?: string;
+    };
+}
+/**
+ * Registers the split trading layout plugin.
+ *
+ * Intercepts `Trading.Layout.Desktop` and injects `layoutStrategy` into the
+ * original DesktopLayout component — exactly like GridDesktopInjector.
+ * DesktopLayout calls LayoutHost, which calls splitTradingStrategy.Renderer
+ * (SplitTradingLayout) with the PanelRegistry built by trading-next.
+ */
+declare function registerLayoutSplitPlugin(options?: LayoutSplitPluginOptions): (SDK: OrderlySDK) => void;
+
+/**
+ * Split layout chrome: DnD for order-entry sortable, Flex wrapper.
+ * Wraps the minimal desktop layout (Trading’s DesktopLayout); strategy is injected by the plugin.
+ */
+
+interface SplitTradingDesktopChromeProps extends DesktopLayoutProps {
+    /** The minimal desktop layout (panels + LayoutHost) to wrap */
+    children: React.ReactNode;
+}
+/**
+ * Wraps Trading’s minimal desktop layout with split-specific chrome:
+ * DnD (order-entry sortable), Flex structure. Markets rendered by LayoutHost from rule tree.
+ */
+declare function SplitTradingDesktopChrome(props: SplitTradingDesktopChromeProps): React.ReactElement;
+
+/**
+ * SplitInlinedLayout - Legacy component kept for backward compatibility.
+ *
+ * The split plugin no longer uses this component (plugin.tsx now renders
+ * SplitTradingLayout directly). Kept exported so external consumers are not broken.
+ */
+
+/** @deprecated Use SplitTradingLayout directly. */
+declare function SplitInlinedLayout({ Original, props, }: {
+    Original: React.ComponentType<DesktopLayoutProps>;
+    props: DesktopLayoutProps;
+}): React.ReactElement;
+
+/**
+ * SplitTradingLayout - LayoutStrategy Renderer for the split trading desktop layout.
+ *
+ * Implements LayoutRendererProps<Record<string, unknown>> so it can be used as
+ * the Renderer in splitTradingStrategy. Receives the PanelRegistry from LayoutHost
+ * (populated by trading-next's createTradingPanelRegistry) and all layout state
+ * comes from useSplitLayout internally.
+ *
+ * This mirrors the JSX structure of trading.ui.desktop.tsx but all panel content
+ * is sourced from the panels registry - no direct widget imports.
+ */
+
+/** @deprecated Use PanelRegistry from @kodiak-finance/orderly-layout-core instead. */
+type SplitLayoutPanelRegistryEntry = {
+    node: React.ReactNode;
+    props?: Record<string, unknown>;
+};
+/** @deprecated Use PanelRegistry from @kodiak-finance/orderly-layout-core instead. */
+type SplitLayoutPanelRegistry = PanelRegistry;
+/**
+ * SplitTradingLayout implements LayoutRendererProps so it works as the Renderer
+ * in splitTradingStrategy. The panels registry is built by trading-next's
+ * DesktopLayout and passed through LayoutHost.
+ */
+type SplitTradingLayoutProps = LayoutRendererProps<Record<string, unknown>>;
+/**
+ * Full trading desktop layout that implements LayoutRendererProps.
+ *
+ * Receives the PanelRegistry from LayoutHost (populated by trading-next's
+ * createTradingPanelRegistry). All layout state is managed by useSplitLayout
+ * and local hooks — no dependency on DesktopLayoutProps.
+ */
+declare function SplitTradingLayout(props: SplitTradingLayoutProps): React.ReactElement;
+
+/**
+ * Split trading layout strategy.
+ *
+ * Implements the full trading desktop layout (chart, orderbook, order entry,
+ * data list, markets) with resizable split panels and drag-to-reorder order
+ * entry sub-panels. All state is managed internally by the Renderer.
+ *
+ * Pass this as `layoutStrategy` to DesktopLayout (via the interceptor in
+ * registerLayoutSplitPlugin) so LayoutHost calls SplitTradingLayout as the
+ * Renderer with the PanelRegistry built by trading-next.
+ */
+declare const splitTradingStrategy: LayoutStrategy<Record<string, unknown>>;
+
+/**
+ * React Context for trading desktop props passed from TradingWidget via SplitTradingDesktopChrome.
+ * Any component under SplitTradingDesktopChrome (e.g. SplitNodeRenderer, SortNodeRenderer, panel content)
+ * can use useSplitTradingDesktopContext() to access TradingState and layout-related props without prop drilling.
+ */
+
+/**
+ * Hook to read trading desktop props from context.
+ * Returns null when used outside SplitTradingDesktopChrome (e.g. in tests or non-split layout).
+ * @returns DesktopLayoutProps or null
+ */
+declare function useSplitTradingDesktopContext(): DesktopLayoutProps | null;
+
+/**
+ * TradingSplitLayout - @uiw/react-split wrapper for trading layout.
+ *
+ * Ported from packages/trading-next/src/components/desktop/layout/splitLayout/.
+ * Keeps all layout logic inside layout-split; trading-next only provides panels.
+ */
+
+/**
+ * Thin forwardRef wrapper around @uiw/react-split with a styled SplitLineBar.
+ * API matches the internal splitLayout used in trading.ui.desktop.tsx.
+ */
+declare const TradingSplitLayout: React.ForwardRefExoticComponent<SplitProps & {
+    children?: React.ReactNode | undefined;
+} & {
+    /** Called with the pixel width/height string of the first panel on drag end. */
+    onSizeChange?: (size: string) => void;
+} & React.RefAttributes<Split>>;
+
+/**
+ * TradingSortablePanel - Drag-and-drop sortable panel for order-entry column.
+ *
+ * Ported from packages/trading-next/src/components/desktop/layout/sortablePanel.tsx.
+ * Uses @dnd-kit/sortable (already a layout-split dep). Renders a drag-indicator
+ * button when showIndicator is true and a placeholder while the item is being dragged.
+ */
+
+type TradingSortablePanelProps = {
+    /** Unique DnD id for this panel (matches SortableContext items array). */
+    id: string;
+    /** Additional class name for the outer box. */
+    className?: string;
+    /**
+     * When true, shows the vertical drag-handle indicator button.
+     * Typically set when the user can trade (canTrade && !isFirstTimeDeposit).
+     */
+    showIndicator: boolean;
+    /**
+     * When true, renders the drag-overlay variant (slightly scaled down).
+     * Pass this when rendering inside DragOverlay.
+     */
+    dragOverlay?: boolean;
+};
+/**
+ * Sortable panel that wraps order-entry widgets (margin, assets, order form).
+ * While actively dragging, renders a fixed-size placeholder with a hatched border
+ * so the layout doesn't collapse; the real content is rendered in DragOverlay.
+ */
+declare const TradingSortablePanel: FC<PropsWithChildren<TradingSortablePanelProps>>;
+
+/** @deprecated Use BREAKPOINT_KEYS */
+declare const SPLIT_BREAKPOINT_ORDER: SplitLayoutBreakpointKey[];
+/** @deprecated Use BREAKPOINT_VALUES */
+declare const DEFAULT_SPLIT_BREAKPOINTS: SplitLayoutBreakpoints;
+/** Viewport-based breakpoint keys for responsive split layout. */
+type ViewportBreakpointKey = SplitLayoutBreakpointKey;
+/** Viewport breakpoint values (max width in px). */
+declare const VIEWPORT_BREAKPOINTS: SplitLayoutBreakpoints;
+/** @deprecated Use BREAKPOINT_KEYS */
+declare const VIEWPORT_BREAKPOINT_ORDER: SplitLayoutBreakpointKey[];
+
+interface UseViewportBreakpointOptions {
+    /** Breakpoint map; defaults to VIEWPORT_BREAKPOINTS. */
+    breakpoints?: typeof VIEWPORT_BREAKPOINTS;
+    /** Initial width when ref not yet mounted. */
+    fallbackWidth?: number;
+}
+/**
+ * Observes viewport width and returns current breakpoint key.
+ * Uses ResizeObserver on document.documentElement; before mount uses fallbackWidth.
+ *
+ * @param options - Optional breakpoints and fallbackWidth
+ * @returns Current breakpoint key (lg | md | sm | xs)
+ */
+declare function useViewportBreakpoint(options?: UseViewportBreakpointOptions): ViewportBreakpointKey;
+
+declare const ORDER_ENTRY_MIN_WIDTH = 280;
+declare const ORDER_ENTRY_MAX_WIDTH = 360;
+declare const ORDERBOOK_MIN_WIDTH = 280;
+declare const ORDERBOOK_MAX_WIDTH = 732;
+declare const ORDERBOOK_MIN_HEIGHT = 464;
+declare const ORDERBOOK_MAX_HEIGHT = 728;
+declare const TRADINGVIEW_MIN_HEIGHT = 320;
+declare const TRADINGVIEW_MIN_WIDTH = 540;
+declare const DATA_LIST_MAX_HEIGHT = 800;
+declare const DATA_LIST_INITIAL_HEIGHT = 350;
+declare const SPACE = 8;
+declare const SYMBOL_INFO_BAR_HEIGHT = 54;
+type MarketLayoutPosition = "left" | "top" | "bottom" | "hide";
+type PanelSize = "small" | "middle" | "large";
+interface UseSplitLayoutOptions {
+    symbol?: string;
+    /** Initial layout side (order entry left/right) */
+    initialLayout?: "left" | "right";
+    /** Initial market layout position */
+    initialMarketLayout?: MarketLayoutPosition;
+    /** Whether user can trade */
+    canTrade?: boolean;
+    /** First time depositor */
+    isFirstTimeDeposit?: boolean;
+    /** Disable features */
+    disableFeatures?: Record<string, boolean>;
+    /** Navigate callback */
+    onRouteChange?: (route: {
+        href: string;
+        name: string;
+    }) => void;
+}
+interface UseSplitLayoutReturn {
+    layout: "left" | "right";
+    setLayout: (layout: "left" | "right") => void;
+    marketLayout: MarketLayoutPosition;
+    setMarketLayout: (layout: MarketLayoutPosition) => void;
+    breakpoint: SplitLayoutBreakpointKey;
+    max2XL: boolean;
+    min3XL: boolean;
+    max4XL: boolean;
+    horizontalDraggable: boolean;
+    panelSize: PanelSize;
+    setPanelSize: (size: PanelSize) => void;
+    marketsWidth: number;
+    mainSplitSize: string;
+    setMainSplitSize: (size: string) => void;
+    orderBookSplitSize: string;
+    setOrderbookSplitSize: (size: string) => void;
+    dataListSplitSize: string;
+    setDataListSplitSize: (size: string) => void;
+    dataListSplitHeightSM: string;
+    setDataListSplitHeightSM: (size: string) => void;
+    orderBookSplitHeightSM: string;
+    setOrderbookSplitHeightSM: (size: string) => void;
+    extraHeight: number;
+    setExtraHeight: (height: number) => void;
+    dataListHeight: number;
+    tradingviewMaxHeight: number;
+    layoutTree: SplitLayoutNode;
+    symbolInfoBarHeight: number;
+    space: number;
+    orderbookMinWidth: number;
+    orderbookMaxWidth: number;
+    orderbookMinHeight: number;
+    orderbookMaxHeight: number;
+    tradingviewMinHeight: number;
+    orderEntryMinWidth: number;
+    orderEntryMaxWidth: number;
+}
+/** Simplified split layout node for backward compat */
+type SplitLayoutNode = {
+    type: "panel";
+    id: string;
+    size?: string;
+    minSize?: string;
+    maxSize?: string;
+    disabled?: boolean;
+} | {
+    type: "split";
+    orientation: "horizontal" | "vertical";
+    children: SplitLayoutNode[];
+    size?: string;
+} | {
+    type: "sort";
+    orientation: "horizontal" | "vertical";
+    children: SplitLayoutNode[];
+    size?: string;
+};
+/**
+ * Hook for computing split layout state and sizes
+ */
+declare function useSplitLayout(options?: UseSplitLayoutOptions): UseSplitLayoutReturn;
+
+export { DATA_LIST_INITIAL_HEIGHT, DATA_LIST_MAX_HEIGHT, DEFAULT_SPLIT_BREAKPOINTS, type LayoutSplitPluginOptions, type MarketLayoutPosition, ORDERBOOK_MAX_HEIGHT, ORDERBOOK_MAX_WIDTH, ORDERBOOK_MIN_HEIGHT, ORDERBOOK_MIN_WIDTH, ORDER_ENTRY_MAX_WIDTH, ORDER_ENTRY_MIN_WIDTH, type PanelConstraints, type PanelSize, SPACE, SPLIT_BREAKPOINT_ORDER, SYMBOL_INFO_BAR_HEIGHT, SplitInlinedLayout, SplitLayout, type SplitLayoutBreakpointKey, type SplitLayoutBreakpoints, type SplitLayoutChildConstraints, SplitLayoutConfigProvider, type SplitLayoutConfigProviderProps, type SplitLayoutConfigValue, type SplitLayoutModel, type SplitLayoutNode$1 as SplitLayoutNode, type SplitLayoutPanelRegistry, type SplitLayoutPanelRegistryEntry, type SplitLayoutProps, SplitTradingDesktopChrome, type SplitTradingDesktopChromeProps, SplitTradingLayout, type SplitTradingLayoutProps, TRADINGVIEW_MIN_HEIGHT, TRADINGVIEW_MIN_WIDTH, TradingSortablePanel, type TradingSortablePanelProps, TradingSplitLayout, type UseSplitLayoutOptions, type UseSplitLayoutReturn, VIEWPORT_BREAKPOINTS, VIEWPORT_BREAKPOINT_ORDER, type ViewportBreakpointKey, createDefaultSplitLayout, deserializeSplitLayout, getSortableIdForChild, registerLayoutSplitPlugin, serializeSplitLayout, splitTradingStrategy, updateOrderAtPath, useSplitLayout, useSplitLayoutConfig, useSplitTradingDesktopContext, useViewportBreakpoint };