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

package/dist/index.mjs

@@ -0,0 +1,3326 @@
+import React, { createContext, forwardRef, useMemo, useCallback, useContext, useState, useEffect, useRef } from 'react';
+import { cn, Box, Flex, createInterceptor, Text, CloseIcon, Divider, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent } from '@kodiak-finance/orderly-ui';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useTranslation } from '@kodiak-finance/orderly-i18n';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { useSortable, sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useMediaQuery, useLocalStorage } from '@kodiak-finance/orderly-hooks';
+import { TRADING_PANEL_IDS } from '@kodiak-finance/orderly-layout-core';
+import { TradingviewFullscreenKey } from '@kodiak-finance/orderly-types';
+import Split from '@uiw/react-split';
+import { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';
+import { DragDropProvider } from '@dnd-kit/react';
+import { isSortable, useSortable as useSortable$1 } from '@dnd-kit/react/sortable';
+
+// src/components/SplitLayout.tsx
+function ResizablePanelGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Group,
+    {
+      "data-slot": "resizable-panel-group",
+      className: cn(
+        "aria-[orientation=vertical]:oui-flex-col oui-flex oui-w-full oui-h-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ResizablePanel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Panel,
+    {
+      "data-slot": "resizable-panel",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ResizablePrimitive.Separator,
+    {
+      "data-slot": "resizable-handle",
+      className: cn(
+        "oui-bg-primary focus:oui-ring-0 focus-visible:oui-ring-0 focus-visible:oui-outline-none after:oui-absolute after:oui-inset-y-0 after:oui-left-1/2 after:oui-w-1 after:-oui-translate-x-1/2 aria-[orientation=horizontal]:oui-h-px aria-[orientation=horizontal]:oui-w-full aria-[orientation=horizontal]:after:oui-left-0 aria-[orientation=horizontal]:after:oui-h-1 aria-[orientation=horizontal]:after:oui-w-full aria-[orientation=horizontal]:after:oui-translate-x-0 aria-[orientation=horizontal]:after:-oui-translate-y-1/2 [&[aria-orientation=horizontal]>div]:oui-rotate-90 oui-relative oui-flex oui-w-px oui-items-center oui-justify-center",
+        className
+      ),
+      ...props,
+      children: withHandle && /* @__PURE__ */ jsx("div", { className: "oui-bg-primary oui-z-10 oui-flex oui-h-6 oui-w-1 oui-shrink-0 oui-rounded-lg" })
+    }
+  );
+}
+function sizesToDefaultLayout(sizes, count) {
+  if (!sizes || sizes.length !== count) return void 0;
+  const result = {};
+  let fixedTotal = 0;
+  const autoIndices = [];
+  for (let i = 0; i < count; i++) {
+    const s = sizes[i];
+    if (s === "fixed") continue;
+    const num = parseFloat(String(s).replace(/%/g, ""));
+    if (!isNaN(num)) {
+      result[String(i)] = Math.round(num);
+      fixedTotal += num;
+    } else {
+      autoIndices.push(i);
+    }
+  }
+  if (autoIndices.length > 0) {
+    const remainder = Math.max(0, 100 - fixedTotal);
+    const autoSize = remainder / autoIndices.length;
+    for (const i of autoIndices) {
+      result[String(i)] = Math.round(autoSize);
+    }
+  }
+  return Object.keys(result).length > 0 ? result : void 0;
+}
+var SPLIT_HANDLE_BASE_CLASSNAME = [
+  "!oui-transition-none",
+  "!oui-shadow-none",
+  "!oui-bg-transparent",
+  "hover:!oui-bg-primary-light",
+  "hover:!oui-shadow-[0px_0px_2px_0px]",
+  "hover:!oui-shadow-primary-light/80",
+  "active:!oui-bg-primary-light",
+  "active:!oui-shadow-[0px_0px_2px_0px]",
+  "active:!oui-shadow-primary-light/80"
+  // "focus:!oui-bg-primary-light",
+  // "focus:!oui-shadow-[0px_0px_4px_0px]",
+  // "focus:!oui-shadow-primary-light/80",
+];
+function SplitLayout({
+  orientation,
+  sizes,
+  panelConstraints,
+  onSizeChange,
+  children,
+  className,
+  style,
+  classNames,
+  gap
+}) {
+  const childArray = React.Children.toArray(children);
+  const count = childArray.length;
+  const defaultLayout = useMemo(
+    () => sizesToDefaultLayout(sizes, count),
+    [sizes, count]
+  );
+  const handleLayoutChanged = useCallback(
+    (layout) => {
+      const panelIds = Array.from({ length: count }, (_, i) => String(i));
+      const sizesAsStrings = panelIds.map((id, index) => {
+        const value = layout[id];
+        if (typeof value === "number") {
+          return `${Math.round(value)}%`;
+        }
+        const originalSize = sizes?.[index];
+        return originalSize ?? "auto";
+      });
+      onSizeChange?.(sizesAsStrings);
+    },
+    [onSizeChange, count]
+  );
+  if (count === 0) return /* @__PURE__ */ jsx(Fragment, {});
+  const marginPx = gap != null ? gap * 2 : 4;
+  const handleStyle = orientation === "horizontal" ? { width: 2, marginLeft: marginPx, marginRight: marginPx } : { height: 2, marginTop: marginPx, marginBottom: marginPx };
+  return /* @__PURE__ */ jsx(
+    ResizablePanelGroup,
+    {
+      orientation,
+      defaultLayout,
+      onLayoutChanged: handleLayoutChanged,
+      className: cn(className, classNames?.panelGroup),
+      style,
+      children: childArray.map((child, index) => {
+        const constraints = panelConstraints?.[index];
+        const size = sizes?.[index];
+        const isFixed = size === "fixed";
+        const nextIsFixed = sizes?.[index + 1] === "fixed";
+        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          isFixed ? child : /* @__PURE__ */ jsx(
+            ResizablePanel,
+            {
+              id: String(index),
+              defaultSize: size,
+              minSize: constraints?.minSize,
+              maxSize: constraints?.maxSize,
+              disabled: constraints?.disabled,
+              className: classNames?.panel,
+              children: child
+            }
+          ),
+          index < count - 1 && !isFixed && !nextIsFixed && /* @__PURE__ */ jsx(
+            ResizableHandle,
+            {
+              className: cn(SPLIT_HANDLE_BASE_CLASSNAME, classNames?.handle),
+              style: handleStyle
+            }
+          )
+        ] }, `panel-${index}`);
+      })
+    }
+  );
+}
+SplitLayout.displayName = "SplitLayout";
+
+// src/constants.ts
+var BREAKPOINT_KEYS = [
+  "lg",
+  "md",
+  "sm",
+  "xs"
+];
+var BREAKPOINT_VALUES = {
+  lg: 1680,
+  md: 1440,
+  sm: 1280,
+  xs: 768
+};
+var SPLIT_BREAKPOINT_ORDER = BREAKPOINT_KEYS;
+var DEFAULT_SPLIT_BREAKPOINTS = BREAKPOINT_VALUES;
+var VIEWPORT_BREAKPOINTS = BREAKPOINT_VALUES;
+var VIEWPORT_BREAKPOINT_ORDER = BREAKPOINT_KEYS;
+
+// src/utils/splitLayoutUtils.ts
+function getSortableIdForChild(child, path, index) {
+  if (child.type === "panel" && child.id) {
+    return child.id;
+  }
+  return `sortable-${path.join("-")}-${index}`;
+}
+function updateOrderAtPath(node, path, newOrder) {
+  if (node.type === "panel") return node;
+  if (path.length === 0) {
+    return { ...node, children: newOrder };
+  }
+  const [childIndex, ...restPath] = path;
+  const updatedChildren = [...node.children];
+  if (childIndex < updatedChildren.length) {
+    updatedChildren[childIndex] = updateOrderAtPath(
+      updatedChildren[childIndex],
+      restPath,
+      newOrder
+    );
+  }
+  return { ...node, children: updatedChildren };
+}
+function createDefaultSplitLayout(panelIds) {
+  if (panelIds.length === 0) {
+    throw new Error(
+      "Cannot create default split layout: no panel IDs provided"
+    );
+  }
+  let singleRoot;
+  if (panelIds.length === 1) {
+    singleRoot = { type: "panel", id: panelIds[0] };
+  } else {
+    singleRoot = {
+      type: "split",
+      orientation: "horizontal",
+      children: panelIds.map((panelId) => ({
+        type: "panel",
+        id: panelId
+      }))
+    };
+  }
+  const layouts = {
+    lg: singleRoot,
+    md: singleRoot,
+    sm: singleRoot,
+    xs: singleRoot
+  };
+  return {
+    layouts,
+    breakpoints: DEFAULT_SPLIT_BREAKPOINTS
+  };
+}
+function isValidOrientation(v) {
+  return v === "horizontal" || v === "vertical";
+}
+function validateContainerNode(n) {
+  return isValidOrientation(n.orientation) && Array.isArray(n.children) && n.children.every((c) => validateSplitLayoutNode(c));
+}
+function validateSplitLayoutNode(node) {
+  if (!node || typeof node !== "object") return false;
+  const n = node;
+  if (n.type === "panel") {
+    return typeof n.id === "string" && n.id.length > 0 && (n.size === void 0 || typeof n.size === "string") && (n.minSize === void 0 || typeof n.minSize === "string") && (n.maxSize === void 0 || typeof n.maxSize === "string") && (n.disabled === void 0 || typeof n.disabled === "boolean") && (n.className === void 0 || typeof n.className === "string") && (n.style === void 0 || typeof n.style === "object");
+  }
+  if (n.type === "split" || n.type === "sort") return validateContainerNode(n);
+  return false;
+}
+function validateSplitLayoutModel(parsed) {
+  if (!parsed || typeof parsed !== "object") return false;
+  const p = parsed;
+  const layoutsSource = p.layouts ?? p.roots;
+  if (!layoutsSource || typeof layoutsSource !== "object") return false;
+  if (!p.breakpoints || typeof p.breakpoints !== "object") return false;
+  const layouts = layoutsSource;
+  const bp = p.breakpoints;
+  for (const k of SPLIT_BREAKPOINT_ORDER) {
+    if (!validateSplitLayoutNode(layouts[k]) || typeof bp[k] !== "number") {
+      return false;
+    }
+  }
+  return true;
+}
+function serializeSplitLayout(layout) {
+  return JSON.stringify(layout);
+}
+function deserializeSplitLayout(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (!validateSplitLayoutModel(parsed)) {
+      throw new Error(
+        "Invalid split layout: must have layouts (lg,md,sm,xs) and breakpoints"
+      );
+    }
+    const layout = parsed;
+    const layoutsSource = layout.layouts ?? layout.roots;
+    const layouts = {};
+    for (const bp of SPLIT_BREAKPOINT_ORDER) {
+      layouts[bp] = layoutsSource[bp];
+    }
+    const { roots: _roots, ...rest } = layout;
+    return { ...rest, layouts };
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(`Failed to deserialize split layout: ${error.message}`);
+    }
+    throw new Error(`Failed to deserialize split layout: ${error}`);
+  }
+}
+var SplitLayoutConfigContext = createContext(
+  null
+);
+function SplitLayoutConfigProvider({
+  panels,
+  layout,
+  breakpoint,
+  onLayoutChange,
+  onSizeChange,
+  onSizePersist,
+  classNames,
+  gap,
+  collapsedPanels,
+  togglePanelCollapse,
+  isPanelCollapsed,
+  collapsiblePanels,
+  isPanelCollapsible,
+  children
+}) {
+  const value = useMemo(
+    () => ({
+      panels,
+      layout,
+      breakpoint,
+      onLayoutChange,
+      onSizeChange,
+      onSizePersist,
+      classNames,
+      gap,
+      collapsedPanels,
+      togglePanelCollapse,
+      isPanelCollapsed,
+      collapsiblePanels,
+      isPanelCollapsible
+    }),
+    [
+      panels,
+      layout,
+      breakpoint,
+      onLayoutChange,
+      onSizeChange,
+      onSizePersist,
+      classNames,
+      gap,
+      collapsedPanels,
+      togglePanelCollapse,
+      isPanelCollapsed,
+      collapsiblePanels,
+      isPanelCollapsible
+    ]
+  );
+  return /* @__PURE__ */ jsx(SplitLayoutConfigContext.Provider, { value, children });
+}
+function useSplitLayoutConfig() {
+  const ctx = useContext(SplitLayoutConfigContext);
+  if (!ctx) {
+    throw new Error(
+      "useSplitLayoutConfig must be used within SplitLayoutConfigProvider"
+    );
+  }
+  return ctx;
+}
+var OrderEntryIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "36",
+    height: "84",
+    viewBox: "0 0 36 84",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "36", height: "17", rx: "2", fill: "rgb(var(--oui-color-base-7))" }),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          y: "19",
+          width: "36",
+          height: "54",
+          rx: "2",
+          fill: "rgb(var(--oui-color-base-7))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          y: "75",
+          width: "36",
+          height: "9",
+          rx: "2",
+          fill: "rgb(var(--oui-color-base-7))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3",
+          y: "79",
+          width: "30",
+          height: "1",
+          rx: "0.5",
+          fill: "url(#paint0_linear_17647_26849)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3",
+          y: "22",
+          width: "14",
+          height: "6",
+          rx: "2",
+          fill: "rgb(var(--oui-color-success-darken))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "19",
+          y: "22",
+          width: "14",
+          height: "6",
+          rx: "2",
+          fill: "rgb(var(--oui-color-danger-darken))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3",
+          y: "11",
+          width: "14",
+          height: "3",
+          rx: "1.5",
+          fill: "rgb(var(--oui-color-base-4))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "19",
+          y: "11",
+          width: "14",
+          height: "3",
+          rx: "1.5",
+          fill: "rgb(var(--oui-color-primary-darken))"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: "3",
+          y: "62",
+          width: "30",
+          height: "8",
+          rx: "2",
+          fill: "rgb(var(--oui-color-success-darken))"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: "paint0_linear_17647_26849",
+          x1: "33",
+          y1: "79.5",
+          x2: "3",
+          y2: "79.5",
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-color-primary-light))" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
+          ]
+        }
+      ) })
+    ]
+  }
+);
+var MarketLeftIcon = ({
+  isSelected,
+  isHovered,
+  ...props
+}) => {
+  const getStrokeColor = () => {
+    if (isSelected) return "rgb(var(--oui-color-primary-light))";
+    if (isHovered) return "rgb(var(--oui-color-primary-light))";
+    return "rgb(var(--oui-color-base-5))";
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "148",
+      height: "100",
+      viewBox: "0 0 148 100",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "2",
+            y: "2",
+            width: "144",
+            height: "96",
+            rx: "10",
+            fill: "rgb(var(--oui-color-base-10))",
+            stroke: getStrokeColor(),
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "8",
+            y: "8",
+            width: "24",
+            height: "84",
+            rx: "2",
+            fill: "rgb(var(--oui-color-base-7))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "16",
+            y: "10",
+            width: "4",
+            height: "2",
+            rx: "1",
+            fill: "rgb(var(--oui-color-base-4))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "21",
+            y: "10",
+            width: "4",
+            height: "2",
+            rx: "1",
+            fill: "rgb(var(--oui-color-base-4))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "26",
+            y: "10",
+            width: "4",
+            height: "2",
+            rx: "1",
+            fill: "rgb(var(--oui-color-base-4))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "10",
+            y: "10",
+            width: "5",
+            height: "2",
+            rx: "1",
+            fill: "rgb(var(--oui-color-primary-darken))"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "10",
+            y: "14",
+            width: "20",
+            height: "76",
+            rx: "2",
+            fill: "rgb(var(--oui-color-base-5))"
+          }
+        )
+      ]
+    }
+  );
+};
+var MarketTopIcon = ({
+  isSelected,
+  isHovered,
+  ...props
+}) => {
+  const getStrokeColor = () => {
+    if (isSelected) return "rgb(var(--oui-color-primary-light))";
+    if (isHovered) return "rgb(var(--oui-color-primary-light))";
+    return "rgb(var(--oui-color-base-5))";
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "148",
+      height: "100",
+      viewBox: "0 0 148 100",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "2",
+            y: "2",
+            width: "144",
+            height: "96",
+            rx: "10",
+            fill: "rgb(var(--oui-color-base-10))",
+            stroke: getStrokeColor(),
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "8",
+            y: "8",
+            width: "132",
+            height: "8",
+            rx: "2",
+            fill: "rgb(var(--oui-color-base-7))"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_31319_74729)", children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "10",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-primary-darken))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "28",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "46",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "64",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "82",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "100",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "118",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "136",
+              y: "10",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_31319_74729", children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "130",
+            height: "4",
+            fill: "rgb(var(--oui-color-base-foreground))",
+            transform: "translate(10 10)"
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+var MarketBottomIcon = ({
+  isSelected,
+  isHovered,
+  ...props
+}) => {
+  const getStrokeColor = () => {
+    if (isSelected) return "rgb(var(--oui-color-primary-light))";
+    if (isHovered) return "rgb(var(--oui-color-primary-light))";
+    return "rgb(var(--oui-color-base-5))";
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "148",
+      height: "100",
+      viewBox: "0 0 148 100",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "2",
+            y: "2",
+            width: "144",
+            height: "96",
+            rx: "10",
+            fill: "rgb(var(--oui-color-base-10))",
+            stroke: getStrokeColor(),
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "8",
+            y: "84",
+            width: "132",
+            height: "8",
+            rx: "2",
+            fill: "rgb(var(--oui-color-base-7))"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_31319_74743)", children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "10",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-primary-darken))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "28",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "46",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "64",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "82",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "100",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "118",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "136",
+              y: "86",
+              width: "16",
+              height: "4",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-4))"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_31319_74743", children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "130",
+            height: "4",
+            fill: "rgb(var(--oui-color-base-foreground))",
+            transform: "translate(10 86)"
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+var MarketHideIcon = ({
+  isSelected,
+  isHovered,
+  ...props
+}) => {
+  const getStrokeColor = () => {
+    if (isSelected) return "rgb(var(--oui-color-primary-light))";
+    if (isHovered) return "rgb(var(--oui-color-primary-light))";
+    return "rgb(var(--oui-color-base-5))";
+  };
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "148",
+      height: "100",
+      viewBox: "0 0 148 100",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "2",
+            y: "2",
+            width: "144",
+            height: "96",
+            rx: "10",
+            fill: "rgb(var(--oui-color-base-10))",
+            stroke: getStrokeColor(),
+            strokeWidth: "4"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_31319_74757)", children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "8",
+              y: "8",
+              width: "132",
+              height: "84",
+              rx: "2",
+              fill: "rgb(var(--oui-color-base-7))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "66.8789",
+              y: "-76",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 66.8789 -76)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "73.9492",
+              y: "-68.929",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 73.9492 -68.929)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "81.0195",
+              y: "-61.8579",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 81.0195 -61.8579)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "88.0938",
+              y: "-54.7867",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 88.0938 -54.7867)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "95.1641",
+              y: "-47.7157",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 95.1641 -47.7157)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "102.234",
+              y: "-40.6447",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 102.234 -40.6447)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "109.305",
+              y: "-33.5736",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 109.305 -33.5736)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "116.375",
+              y: "-26.5026",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 116.375 -26.5026)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "123.449",
+              y: "-19.4315",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 123.449 -19.4315)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "130.52",
+              y: "-12.3604",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 130.52 -12.3604)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "137.59",
+              y: "-5.28931",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 137.59 -5.28931)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "144.66",
+              y: "1.78174",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 144.66 1.78174)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "151.73",
+              y: "8.85278",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 151.73 8.85278)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "158.805",
+              y: "15.9238",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 158.805 15.9238)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "165.875",
+              y: "22.995",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 165.875 22.995)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "172.945",
+              y: "30.066",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 172.945 30.066)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "180.016",
+              y: "37.1371",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 180.016 37.1371)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "187.086",
+              y: "44.2081",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 187.086 44.2081)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "194.156",
+              y: "51.2792",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 194.156 51.2792)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "201.23",
+              y: "58.3503",
+              width: "4",
+              height: "188",
+              rx: "2",
+              transform: "rotate(45 201.23 58.3503)",
+              fill: "rgb(var(--oui-color-base-6))"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_31319_74757", children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            width: "132",
+            height: "84",
+            fill: "rgb(var(--oui-color-base-foreground))",
+            transform: "translate(8 8)"
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+var LayoutSwitchButton = ({
+  layout,
+  markets,
+  onLayoutChange,
+  onMarketChange
+}) => {
+  const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
+  const [hoveredMarket, setHoveredMarket] = React.useState(null);
+  const renderLayoutItem = (position) => /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      gapY: 2,
+      onClick: () => {
+        onLayoutChange(position);
+        setOpen(false);
+      },
+      className: "oui-group",
+      children: [
+        /* @__PURE__ */ jsx(
+          Flex,
+          {
+            justify: position === "right" ? "end" : "start",
+            className: cn(
+              "oui-w-[148px] oui-h-[100px]",
+              "oui-bg-base-10 oui-rounded-[10px]",
+              "oui-border-[4px] oui-border-base-5 group-hover:oui-border-primary-light",
+              layout === position && "!oui-border-primary-light"
+            ),
+            children: /* @__PURE__ */ jsx(Box, { p: 1, children: /* @__PURE__ */ jsx(OrderEntryIcon, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "2xs",
+            intensity: 54,
+            className: cn(
+              "oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
+              layout === position && "oui-text-base-contrast-80"
+            ),
+            children: String(
+              position === "right" ? t("trading.layout.advanced.right") : t("trading.layout.advanced.left")
+            )
+          }
+        )
+      ]
+    }
+  );
+  const renderMarketItem = (position) => {
+    const isSelected = markets === position;
+    const isHovered = hoveredMarket === position;
+    const getLabel = () => {
+      switch (position) {
+        case "left":
+          return t("trading.layout.markets.left");
+        case "top":
+          return t("trading.layout.markets.top");
+        case "bottom":
+          return t("trading.layout.markets.bottom");
+        case "hide":
+          return t("trading.layout.markets.hide");
+        default:
+          return t("trading.layout.markets.left");
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        direction: "column",
+        gapY: 2,
+        onClick: () => {
+          onMarketChange(position);
+          setOpen(false);
+        },
+        onMouseEnter: () => setHoveredMarket(position),
+        onMouseLeave: () => setHoveredMarket(null),
+        className: "oui-group",
+        children: [
+          /* @__PURE__ */ jsxs(Flex, { justify: "center", className: "oui-w-[148px] oui-h-[100px]", children: [
+            position === "left" && /* @__PURE__ */ jsx(MarketLeftIcon, { isSelected, isHovered }),
+            position === "top" && /* @__PURE__ */ jsx(MarketTopIcon, { isSelected, isHovered }),
+            position === "bottom" && /* @__PURE__ */ jsx(MarketBottomIcon, { isSelected, isHovered }),
+            position === "hide" && /* @__PURE__ */ jsx(MarketHideIcon, { isSelected, isHovered })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "2xs",
+              intensity: 54,
+              className: cn(
+                "oui-text-base-contrast-54 group-hover:oui-text-base-contrast-80",
+                isSelected && "oui-text-base-contrast-80"
+              ),
+              children: String(getLabel())
+            }
+          )
+        ]
+      }
+    );
+  };
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        itemAlign: "center",
+        justify: "between",
+        mt: 3,
+        className: "oui-mb-[10px] oui-min-w-[500px]",
+        children: [
+          /* @__PURE__ */ jsx(Text, { size: "base", intensity: 98, children: t("trading.layout") }),
+          /* @__PURE__ */ jsx(
+            CloseIcon,
+            {
+              size: 16,
+              className: "oui-cursor-pointer oui-text-base-contrast-80",
+              opacity: 0.98,
+              onClick: () => {
+                setOpen(false);
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gapY: 2, mt: 5, itemAlign: "start", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 98, children: String(t("trading.layout.advanced")) }),
+      /* @__PURE__ */ jsxs(Flex, { gapX: 6, children: [
+        renderLayoutItem("left"),
+        renderLayoutItem("right")
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", gapY: 2, mt: 5, itemAlign: "start", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", intensity: 98, children: String(t("trading.layout.markets")) }),
+      /* @__PURE__ */ jsxs(Flex, { gapX: 6, children: [
+        renderMarketItem("left"),
+        renderMarketItem("top"),
+        renderMarketItem("bottom"),
+        renderMarketItem("hide")
+      ] })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxs(DropdownMenuRoot, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Flex,
+      {
+        px: 3,
+        className: cn(
+          "oui-rounded-md",
+          "oui-h-[28px]",
+          "oui-cursor-pointer oui-transition-all",
+          "oui-bg-base-6 hover:oui-bg-base-4",
+          "oui-text-base-contrast-54 hover:oui-text-base-contrast-80"
+        ),
+        gapX: 1,
+        ml: 3,
+        justify: "center",
+        itemAlign: "center",
+        children: /* @__PURE__ */ jsx(Text, { size: "2xs", weight: "semibold", children: t("trading.layout") })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onClick: (e) => e.stopPropagation(),
+        align: "end",
+        className: cn("oui-bg-base-8 oui-p-5 oui-pt-0 oui-font-semibold"),
+        children: content
+      }
+    ) })
+  ] });
+};
+var SymbolBarLayoutSwitcher = ({
+  layout = "right",
+  marketLayout = "left",
+  onLayoutChange,
+  onMarketLayoutChange
+}) => {
+  if (!onLayoutChange || !onMarketLayoutChange) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(
+    LayoutSwitchButton,
+    {
+      layout,
+      markets: marketLayout,
+      onLayoutChange,
+      onMarketChange: onMarketLayoutChange
+    }
+  );
+};
+function getViewportBreakpointKey(viewportWidth, breakpoints = VIEWPORT_BREAKPOINTS) {
+  for (const bp of BREAKPOINT_KEYS) {
+    if (viewportWidth >= breakpoints[bp]) return bp;
+  }
+  return "xs";
+}
+function useViewportBreakpoint(options = {}) {
+  const {
+    breakpoints = VIEWPORT_BREAKPOINTS,
+    fallbackWidth = typeof window !== "undefined" ? window.innerWidth : 1440
+  } = options;
+  const [width, setWidth] = useState(fallbackWidth);
+  useEffect(() => {
+    const element = document.documentElement;
+    if (!element) return;
+    setWidth(window.innerWidth);
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
+  }, []);
+  const bp = getViewportBreakpointKey(width, breakpoints);
+  return bp;
+}
+
+// src/hooks/useSplitLayout.ts
+var ORDER_ENTRY_MIN_WIDTH = 280;
+var ORDER_ENTRY_MAX_WIDTH = 360;
+var ORDERBOOK_MIN_WIDTH = 280;
+var ORDERBOOK_MAX_WIDTH = 732;
+var ORDERBOOK_MIN_HEIGHT = 464;
+var ORDERBOOK_MAX_HEIGHT = 728;
+var TRADINGVIEW_MIN_HEIGHT = 320;
+var TRADINGVIEW_MIN_WIDTH = 540;
+var DATA_LIST_MAX_HEIGHT = 800;
+var DATA_LIST_INITIAL_HEIGHT = 350;
+var SPACE = 8;
+var SYMBOL_INFO_BAR_HEIGHT = 54;
+var ORDERLY_ORDER_ENTRY_SIDE_MARKETS_LAYOUT = "orderly_order_entry_side_markets_layout";
+var ORDERLY_SIDE_MARKETS_MODE_KEY = "orderly_side_markets_mode";
+var ORDERLY_HORIZONTAL_MARKETS_LAYOUT = "orderly_horizontal_markets_layout";
+var ORDERLY_MAIN_SPLIT_SIZE = "orderly_main_split_size";
+var ORDERLY_DATA_LIST_SPLIT_SIZE = "orderly_datalist_split_size";
+var ORDERLY_ORDERBOOK_SPLIT_SIZE = "orderly_orderbook_split_size";
+var ORDERLY_DATA_LIST_SPLIT_HEIGHT_SM = "orderly_datalist_split_height_sm";
+var ORDERLY_ORDERBOOK_SPLIT_HEIGHT_SM = "orderly_orderbook_split_height_sm";
+var ORDERLY_ORDER_ENTRY_EXTRA_HEIGHT = "orderly_order_entry_extra_height";
+function buildLayoutTree(layout, marketLayout, max2XL) {
+  if (max2XL) {
+    return buildSMLayoutTree(layout, marketLayout);
+  }
+  return buildLGLayoutTree(layout, marketLayout);
+}
+function buildLGLayoutTree(layout, marketLayout) {
+  const orderEntrySort = {
+    type: "sort",
+    orientation: "vertical",
+    children: [
+      { type: "panel", id: TRADING_PANEL_IDS.MARGIN },
+      { type: "panel", id: TRADING_PANEL_IDS.ASSETS },
+      { type: "panel", id: TRADING_PANEL_IDS.ORDER_ENTRY }
+    ]
+  };
+  const tvObSplit = {
+    type: "split",
+    orientation: "horizontal",
+    children: [
+      { type: "panel", id: TRADING_PANEL_IDS.TRADING_VIEW },
+      { type: "panel", id: TRADING_PANEL_IDS.ORDERBOOK }
+    ]
+  };
+  const mainCol = {
+    type: "split",
+    orientation: "vertical",
+    children: [
+      {
+        type: "panel",
+        id: TRADING_PANEL_IDS.SYMBOL_INFO_BAR,
+        size: "fixed",
+        disabled: true
+      },
+      tvObSplit,
+      { type: "panel", id: TRADING_PANEL_IDS.DATA_LIST }
+    ]
+  };
+  if (marketLayout === "top") {
+    return {
+      type: "split",
+      orientation: "vertical",
+      children: [
+        {
+          type: "panel",
+          id: TRADING_PANEL_IDS.HORIZONTAL_MARKETS,
+          size: "fixed",
+          disabled: true
+        },
+        layout === "left" ? {
+          type: "split",
+          orientation: "horizontal",
+          children: [orderEntrySort, mainCol]
+        } : {
+          type: "split",
+          orientation: "horizontal",
+          children: [mainCol, orderEntrySort]
+        }
+      ]
+    };
+  }
+  if (marketLayout === "bottom") {
+    return layout === "left" ? {
+      type: "split",
+      orientation: "horizontal",
+      children: [
+        orderEntrySort,
+        {
+          type: "split",
+          orientation: "vertical",
+          children: [
+            mainCol,
+            {
+              type: "panel",
+              id: TRADING_PANEL_IDS.HORIZONTAL_MARKETS,
+              size: "fixed",
+              disabled: true
+            }
+          ]
+        }
+      ]
+    } : {
+      type: "split",
+      orientation: "horizontal",
+      children: [
+        {
+          type: "split",
+          orientation: "vertical",
+          children: [
+            mainCol,
+            {
+              type: "panel",
+              id: TRADING_PANEL_IDS.HORIZONTAL_MARKETS,
+              size: "fixed",
+              disabled: true
+            }
+          ]
+        },
+        orderEntrySort
+      ]
+    };
+  }
+  if (marketLayout === "hide") {
+    return layout === "left" ? {
+      type: "split",
+      orientation: "horizontal",
+      children: [orderEntrySort, mainCol]
+    } : {
+      type: "split",
+      orientation: "horizontal",
+      children: [mainCol, orderEntrySort]
+    };
+  }
+  return {
+    type: "split",
+    orientation: "horizontal",
+    children: [
+      {
+        type: "panel",
+        id: TRADING_PANEL_IDS.MARKETS,
+        size: "fixed",
+        disabled: true
+      },
+      layout === "left" ? {
+        type: "split",
+        orientation: "horizontal",
+        children: [orderEntrySort, mainCol]
+      } : {
+        type: "split",
+        orientation: "horizontal",
+        children: [mainCol, orderEntrySort]
+      }
+    ]
+  };
+}
+function buildSMLayoutTree(layout, marketLayout) {
+  const orderEntrySort = {
+    type: "sort",
+    orientation: "vertical",
+    children: [
+      { type: "panel", id: TRADING_PANEL_IDS.MARGIN },
+      { type: "panel", id: TRADING_PANEL_IDS.ASSETS },
+      { type: "panel", id: TRADING_PANEL_IDS.ORDER_ENTRY }
+    ]
+  };
+  const tvObSplit = {
+    type: "split",
+    orientation: "vertical",
+    children: [
+      { type: "panel", id: TRADING_PANEL_IDS.TRADING_VIEW },
+      { type: "panel", id: TRADING_PANEL_IDS.ORDERBOOK }
+    ]
+  };
+  const mainCol = {
+    type: "split",
+    orientation: "vertical",
+    children: [
+      {
+        type: "panel",
+        id: TRADING_PANEL_IDS.SYMBOL_INFO_BAR,
+        size: "fixed",
+        disabled: true
+      },
+      tvObSplit,
+      { type: "panel", id: TRADING_PANEL_IDS.DATA_LIST }
+    ]
+  };
+  if (marketLayout === "top") {
+    return {
+      type: "split",
+      orientation: "vertical",
+      children: [
+        {
+          type: "panel",
+          id: TRADING_PANEL_IDS.HORIZONTAL_MARKETS,
+          size: "fixed",
+          disabled: true
+        },
+        {
+          type: "split",
+          orientation: "vertical",
+          children: [orderEntrySort, mainCol]
+        }
+      ]
+    };
+  }
+  if (marketLayout === "hide") {
+    return {
+      type: "split",
+      orientation: "vertical",
+      children: [orderEntrySort, mainCol]
+    };
+  }
+  if (marketLayout === "bottom") {
+    return {
+      type: "split",
+      orientation: "vertical",
+      children: [
+        mainCol,
+        {
+          type: "panel",
+          id: TRADING_PANEL_IDS.HORIZONTAL_MARKETS,
+          size: "fixed",
+          disabled: true
+        }
+      ]
+    };
+  }
+  return {
+    type: "split",
+    orientation: "vertical",
+    children: [
+      {
+        type: "split",
+        orientation: "horizontal",
+        children: [orderEntrySort, mainCol]
+      }
+    ]
+  };
+}
+function useSplitLayout(options = {}) {
+  const {
+    initialLayout = "right",
+    initialMarketLayout = "left",
+    canTrade = true,
+    isFirstTimeDeposit = false
+  } = options;
+  const max2XL = useMediaQuery("(max-width: 1279px)");
+  const min3XL = useMediaQuery("(min-width: 1440px)");
+  const max4XL = useMediaQuery("(max-width: 1680px)");
+  const breakpoint = useViewportBreakpoint();
+  const [layout, setLayout] = useLocalStorage(
+    ORDERLY_ORDER_ENTRY_SIDE_MARKETS_LAYOUT,
+    initialLayout
+  );
+  const [marketLayout, setMarketLayout] = useLocalStorage(
+    ORDERLY_HORIZONTAL_MARKETS_LAYOUT,
+    initialMarketLayout
+  );
+  const [panelSize, setPanelSize] = useLocalStorage(
+    ORDERLY_SIDE_MARKETS_MODE_KEY,
+    "large"
+  );
+  const marketsWidth = useMemo(() => {
+    switch (panelSize) {
+      case "small":
+        return 0;
+      case "middle":
+        return 70;
+      case "large":
+        return 280;
+      default:
+        return 0;
+    }
+  }, [panelSize]);
+  const horizontalDraggable = min3XL;
+  const [mainSplitSize, setMainSplitSize] = useLocalStorage(
+    ORDERLY_MAIN_SPLIT_SIZE,
+    `${ORDER_ENTRY_MIN_WIDTH}px`
+  );
+  const [orderBookSplitSize, setOrderbookSplitSize] = useLocalStorage(
+    ORDERLY_ORDERBOOK_SPLIT_SIZE,
+    "280px"
+  );
+  const [dataListSplitSize, setDataListSplitSize] = useLocalStorage(
+    ORDERLY_DATA_LIST_SPLIT_SIZE,
+    `${DATA_LIST_INITIAL_HEIGHT}px`
+  );
+  const [dataListSplitHeightSM, setDataListSplitHeightSM] = useLocalStorage(
+    ORDERLY_DATA_LIST_SPLIT_HEIGHT_SM,
+    "350px"
+  );
+  const [orderBookSplitHeightSM, setOrderbookSplitHeightSM] = useLocalStorage(
+    ORDERLY_ORDERBOOK_SPLIT_HEIGHT_SM,
+    "280px"
+  );
+  const [extraHeight, setExtraHeight] = useLocalStorage(
+    ORDERLY_ORDER_ENTRY_EXTRA_HEIGHT,
+    0
+  );
+  useCallback(
+    (preSize, nextSize, boxHeight) => {
+      if (!boxHeight) return;
+      const splitTradingviewHeight = boxHeight * preSize / 100;
+      const splitOrderbookHeight = boxHeight * nextSize / 100;
+      const tradingviewHeight = Math.min(
+        Math.max(splitTradingviewHeight, TRADINGVIEW_MIN_HEIGHT),
+        max2XL ? 1200 : 600
+      );
+      const orderbookHeight = Math.min(
+        Math.max(splitOrderbookHeight, ORDERBOOK_MIN_HEIGHT),
+        ORDERBOOK_MAX_HEIGHT
+      );
+      if (splitOrderbookHeight >= orderbookHeight) {
+        const offset = splitOrderbookHeight - orderbookHeight;
+        setExtraHeight(Math.max(0, extraHeight - offset));
+      } else if (tradingviewHeight + orderbookHeight < (max2XL ? 1200 : 600) + ORDERBOOK_MAX_HEIGHT) {
+        const height = tradingviewHeight + orderbookHeight + SPACE + SYMBOL_INFO_BAR_HEIGHT;
+        const offset = Math.max(0, height - 0);
+        setExtraHeight(extraHeight + offset);
+      }
+    },
+    [max2XL, extraHeight, setExtraHeight]
+  );
+  const tradingviewMaxHeight = max2XL ? 1200 : 600;
+  const dataListHeight = canTrade ? 379 : 277;
+  const memoizedPanelSize = useMemo(() => {
+    const normalized = panelSize === "large" ? "large" : "middle";
+    return horizontalDraggable ? normalized : "middle";
+  }, [horizontalDraggable, panelSize]);
+  const layoutTree = useMemo(
+    () => buildLayoutTree(layout, marketLayout, max2XL),
+    [layout, marketLayout, max2XL]
+  );
+  return {
+    // Layout position
+    layout,
+    setLayout,
+    marketLayout,
+    setMarketLayout,
+    // Breakpoint
+    breakpoint,
+    max2XL,
+    min3XL,
+    max4XL,
+    horizontalDraggable,
+    // Markets panel
+    panelSize: memoizedPanelSize,
+    setPanelSize: (size) => setPanelSize(size),
+    marketsWidth,
+    // Split sizes
+    mainSplitSize,
+    setMainSplitSize,
+    orderBookSplitSize,
+    setOrderbookSplitSize,
+    dataListSplitSize,
+    setDataListSplitSize,
+    dataListSplitHeightSM,
+    setDataListSplitHeightSM,
+    orderBookSplitHeightSM,
+    setOrderbookSplitHeightSM,
+    // Extra height
+    extraHeight,
+    setExtraHeight,
+    // Data list
+    dataListHeight,
+    // Trading view
+    tradingviewMaxHeight,
+    // Layout tree (for compat)
+    layoutTree,
+    // Constants
+    symbolInfoBarHeight: SYMBOL_INFO_BAR_HEIGHT,
+    space: SPACE,
+    orderbookMinWidth: ORDERBOOK_MIN_WIDTH,
+    orderbookMaxWidth: ORDERBOOK_MAX_WIDTH,
+    orderbookMinHeight: ORDERBOOK_MIN_HEIGHT,
+    orderbookMaxHeight: ORDERBOOK_MAX_HEIGHT,
+    tradingviewMinHeight: TRADINGVIEW_MIN_HEIGHT,
+    orderEntryMinWidth: ORDER_ENTRY_MIN_WIDTH,
+    orderEntryMaxWidth: ORDER_ENTRY_MAX_WIDTH
+  };
+}
+var IndicatorIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "10",
+    height: "16",
+    viewBox: "0 0 10 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "6", height: "2", rx: "1" }),
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "6", height: "2", rx: "1" }),
+      /* @__PURE__ */ jsx("rect", { x: "2", y: "12", width: "6", height: "2", rx: "1" })
+    ]
+  }
+);
+var TradingSortablePanel = (props) => {
+  const { showIndicator, dragOverlay } = props;
+  const nodeRef = useRef(null);
+  const [dimensions, setDimensions] = React.useState(null);
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition,
+    isDragging,
+    setActivatorNodeRef
+  } = useSortable({ id: props.id });
+  useEffect(() => {
+    if (isDragging && nodeRef.current && !dimensions) {
+      const rect = nodeRef.current.getBoundingClientRect();
+      setDimensions({ width: rect.width, height: rect.height });
+    } else if (!isDragging && dimensions) {
+      setDimensions(null);
+    }
+  }, [isDragging, dimensions]);
+  const combinedRef = (node) => {
+    setNodeRef(node);
+    nodeRef.current = node;
+  };
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  if (isDragging && dimensions && !dragOverlay) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        intensity: 900,
+        r: "2xl",
+        p: 3,
+        className: "oui-relative",
+        style: {
+          ...style,
+          width: dimensions.width,
+          height: dimensions.height,
+          minWidth: dimensions.width,
+          minHeight: dimensions.height,
+          maxWidth: dimensions.width,
+          maxHeight: dimensions.height,
+          border: "1px solid rgb(var(--oui-color-primary))",
+          backgroundImage: `repeating-linear-gradient(135deg, rgb(var(--oui-color-base-6)) 0px, rgb(var(--oui-color-base-6)) 4px, transparent 4px, transparent 8px)`
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      intensity: 900,
+      r: "2xl",
+      p: 3,
+      width: "100%",
+      className: cn("oui-relative", props.className),
+      ref: combinedRef,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "inner-content oui-transition-transform",
+              dragOverlay && "oui-scale-95"
+            ),
+            children: props.children
+          }
+        ),
+        showIndicator && /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...attributes,
+            ...listeners,
+            className: "oui-absolute oui-right-0 oui-top-4 oui-cursor-move oui-py-1",
+            style: { touchAction: "none" },
+            ref: setActivatorNodeRef,
+            children: /* @__PURE__ */ jsx(IndicatorIcon, { className: "oui-text-base-contrast-20 hover:oui-text-base-contrast-80" })
+          }
+        )
+      ]
+    }
+  );
+};
+var SplitLineBar = (props) => {
+  const { onMouseDown, mode = "horizontal", ...rest } = props;
+  const disable = useMemo(
+    () => props.className?.split(" ").includes("disable"),
+    [props.className]
+  );
+  const filteredCls = useMemo(
+    () => props.className?.split(" ").filter((cls) => cls !== "disable"),
+    [props.className]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        filteredCls,
+        "!oui-transition-none",
+        "!oui-shadow-none !oui-bg-transparent",
+        "hover:!oui-bg-primary-light hover:!oui-shadow-[0px_0px_4px_0px] hover:!oui-shadow-primary-light/80",
+        "active:!oui-bg-primary-light active:!oui-shadow-[0px_0px_4px_0px] active:!oui-shadow-primary-light/80",
+        "focus:!oui-bg-primary-light focus:!oui-shadow-[0px_0px_4px_0px] focus:!oui-shadow-primary-light/80",
+        mode === "horizontal" ? "!oui-w-[2px] !oui-min-w-[2px] !oui-mx-[3px]" : "!oui-h-[2px] !oui-min-h-[2px] !oui-my-[3px]",
+        disable && "oui-pointer-events-none"
+      ),
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          onMouseDown,
+          className: cn(
+            "!oui-transition-none",
+            mode === "horizontal" ? "after:!oui-w-[2px]" : "after:!oui-h-[2px]",
+            "after:!oui-bg-transparent after:!oui-shadow-transparent"
+          )
+        }
+      )
+    }
+  );
+};
+var TradingSplitLayout = forwardRef(
+  (props, ref) => {
+    const { onSizeChange, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Split,
+      {
+        ref,
+        ...rest,
+        lineBar: true,
+        renderBar: (barProps) => /* @__PURE__ */ jsx(SplitLineBar, { ...barProps, mode: props.mode }),
+        onDragEnd: (_, width) => onSizeChange?.(`${width}`)
+      }
+    );
+  }
+);
+TradingSplitLayout.displayName = "TradingSplitLayout";
+var SCROLLBAR_WIDTH = 6;
+var TOP_BAR_HEIGHT = 48;
+var BOTTOM_BAR_HEIGHT = 29;
+var ORDER_ENTRY_SORT_KEY = "orderly_order_entry_sortable_items";
+var DEFAULT_SORTABLE_ITEMS = [
+  TRADING_PANEL_IDS.MARGIN,
+  TRADING_PANEL_IDS.ASSETS,
+  TRADING_PANEL_IDS.ORDER_ENTRY
+];
+var dropAnimationConfig = {
+  keyframes({
+    transform
+  }) {
+    return [
+      {
+        transform: CSS.Transform.toString({
+          ...transform.initial,
+          scaleX: 1.05,
+          scaleY: 1.05
+        })
+      },
+      {
+        transform: CSS.Transform.toString({
+          ...transform.final,
+          scaleX: 1,
+          scaleY: 1
+        })
+      }
+    ];
+  },
+  sideEffects: ({
+    active,
+    dragOverlay
+  }) => {
+    active.node.style.opacity = "0";
+    const inner = dragOverlay.node.querySelector(".inner-content");
+    if (inner) inner.classList.add("oui-animate-shake");
+    return () => {
+      active.node.style.opacity = "";
+    };
+  }
+};
+function SplitTradingLayout(props) {
+  const { panels, className } = props;
+  const {
+    layout,
+    marketLayout,
+    max2XL,
+    max4XL,
+    horizontalDraggable,
+    panelSize,
+    setPanelSize,
+    marketsWidth,
+    mainSplitSize,
+    setMainSplitSize,
+    orderBookSplitSize,
+    setOrderbookSplitSize,
+    dataListSplitSize,
+    setDataListSplitSize,
+    dataListSplitHeightSM,
+    setDataListSplitHeightSM,
+    orderBookSplitHeightSM,
+    setOrderbookSplitHeightSM,
+    tradingviewMaxHeight: tradindviewMaxHeight,
+    extraHeight,
+    setExtraHeight,
+    dataListHeight: dataListMinHeight,
+    symbolInfoBarHeight
+  } = useSplitLayout();
+  const [tradingViewFullScreen] = useLocalStorage(
+    TradingviewFullscreenKey,
+    false
+  );
+  const [animating, setAnimating] = useState(false);
+  const [sortableItems, setSortableItems] = useLocalStorage(
+    ORDER_ENTRY_SORT_KEY,
+    DEFAULT_SORTABLE_ITEMS
+  );
+  const tradingviewAndOrderbookSplitRef = useRef(null);
+  const max2XLSplitRef = useRef(null);
+  const orderEntryViewRef = useRef(null);
+  const [orderEntryHeight, setOrderEntryHeight] = useState(0);
+  useEffect(() => {
+    const el = orderEntryViewRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setOrderEntryHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const onDataListSplitHeightDragging = useCallback(() => {
+    setExtraHeight(0);
+  }, [setExtraHeight]);
+  const onTradingviewAndOrderbookDragging = useCallback(() => {
+  }, []);
+  const [activeId, setActiveId] = useState(null);
+  const showPositionIcon = true;
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  function handleDragStart(event) {
+    setActiveId(event.active.id);
+  }
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (active.id !== over?.id && over) {
+      const oldIndex = sortableItems.indexOf(active.id);
+      const newIndex = sortableItems.indexOf(over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setSortableItems(arrayMove(sortableItems, oldIndex, newIndex));
+      }
+    }
+    setActiveId(null);
+  }
+  const onMainSplitSizeChange = (width) => layout === "left" ? setMainSplitSize(`${100 - Math.min(Number(width), 100)}`) : setMainSplitSize(width);
+  const minScreenHeight = useMemo(() => {
+    return tradingViewFullScreen ? 0 : symbolInfoBarHeight + ORDERBOOK_MAX_HEIGHT + DATA_LIST_INITIAL_HEIGHT + SPACE * 4;
+  }, [tradingViewFullScreen, symbolInfoBarHeight]);
+  const minScreenHeightSM = TOP_BAR_HEIGHT + BOTTOM_BAR_HEIGHT + symbolInfoBarHeight + TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + dataListMinHeight + SPACE * 4;
+  const containerPaddingX = useMemo(() => max4XL ? 12 : 8, [max4XL]);
+  const getPanel = (id) => panels.get(id)?.node ?? null;
+  const horizontalMarketsView = getPanel(TRADING_PANEL_IDS.HORIZONTAL_MARKETS);
+  const stickyHorizontalMarketsView = /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn(
+        "oui-trading-markets-container",
+        "oui-bg-base-10",
+        "oui-sticky oui-z-30 oui-mb-[-8px] oui-py-2",
+        !max4XL && "oui-mt-[-8px]"
+      ),
+      style: {
+        bottom: 0,
+        minWidth: (max4XL ? 1024 : 1440) - SCROLLBAR_WIDTH - containerPaddingX * 2
+      },
+      children: horizontalMarketsView
+    }
+  );
+  const marketsWidget = getPanel(TRADING_PANEL_IDS.MARKETS);
+  const marketsView = /* @__PURE__ */ jsx(
+    Box,
+    {
+      intensity: 900,
+      pt: 3,
+      r: "2xl",
+      height: "100%",
+      width: marketsWidth,
+      style: { minWidth: marketsWidth },
+      className: "oui-trading-markets-container oui-transition-all oui-duration-150",
+      onTransitionEnd: () => setAnimating(false),
+      children: !animating && marketLayout === "left" && marketsWidget
+    }
+  );
+  const symbolInfoBarView = /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "oui-trading-symbolInfoBar-container",
+      intensity: 900,
+      r: "2xl",
+      px: 3,
+      width: "100%",
+      style: { minHeight: symbolInfoBarHeight, height: symbolInfoBarHeight },
+      children: getPanel(TRADING_PANEL_IDS.SYMBOL_INFO_BAR)
+    }
+  );
+  const tradingviewWidget = getPanel(TRADING_PANEL_IDS.TRADING_VIEW);
+  const tradingView = /* @__PURE__ */ jsx(
+    Box,
+    {
+      width: "100%",
+      height: "100%",
+      intensity: 900,
+      r: "2xl",
+      style: { flex: 1, minWidth: TRADINGVIEW_MIN_WIDTH },
+      className: "oui-trading-tradingview-container oui-overflow-hidden",
+      children: tradingviewWidget
+    }
+  );
+  const orderbookView = /* @__PURE__ */ jsx(
+    Box,
+    {
+      r: "2xl",
+      height: "100%",
+      style: {
+        minWidth: ORDERBOOK_MIN_WIDTH,
+        maxWidth: horizontalDraggable ? ORDERBOOK_MAX_WIDTH : ORDERBOOK_MIN_WIDTH,
+        width: orderBookSplitSize
+      },
+      className: "oui-trading-orderBook-container oui-overflow-hidden",
+      children: getPanel(TRADING_PANEL_IDS.ORDERBOOK)
+    }
+  );
+  const dataListView = /* @__PURE__ */ jsx(
+    Box,
+    {
+      intensity: 900,
+      r: "2xl",
+      p: 2,
+      style: {
+        height: dataListSplitSize,
+        minHeight: DATA_LIST_INITIAL_HEIGHT
+      },
+      className: "oui-trading-dataList-container oui-overflow-hidden",
+      children: getPanel(TRADING_PANEL_IDS.DATA_LIST)
+    }
+  );
+  const orderEntryView = /* @__PURE__ */ jsx(
+    Flex,
+    {
+      className: "oui-trading-orderEntry-container",
+      gapY: 2,
+      direction: "column",
+      height: "100%",
+      style: {
+        minWidth: ORDER_ENTRY_MIN_WIDTH,
+        maxWidth: horizontalDraggable ? ORDER_ENTRY_MAX_WIDTH : ORDER_ENTRY_MIN_WIDTH,
+        width: mainSplitSize
+      },
+      children: sortableItems.map((id) => /* @__PURE__ */ jsx(
+        TradingSortablePanel,
+        {
+          id,
+          showIndicator: showPositionIcon,
+          className: cn(
+            id === TRADING_PANEL_IDS.MARGIN && "oui-trading-riskRate-container",
+            id === TRADING_PANEL_IDS.ASSETS && "oui-trading-assetsView-container oui-border oui-border-line-12",
+            id === TRADING_PANEL_IDS.ORDER_ENTRY && "oui-trading-orderEntry-container",
+            // Support legacy short-name keys
+            id === "margin" && "oui-trading-riskRate-container",
+            id === "assets" && "oui-trading-assetsView-container oui-border oui-border-line-12",
+            id === "orderEntry" && "oui-trading-orderEntry-container"
+          ),
+          children: getPanel(id)
+        },
+        id
+      ))
+    }
+  );
+  const renderTradingView = () => {
+    if (max4XL && layout === "right") {
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gap: 2,
+          className: "oui-flex-1 oui-overflow-hidden",
+          style: { minWidth: marketsWidth + TRADINGVIEW_MIN_WIDTH + SPACE },
+          children: [
+            marketLayout === "left" && marketsView,
+            tradingView
+          ]
+        }
+      );
+    }
+    return tradingView;
+  };
+  const tradingViewAndOrderbookView = /* @__PURE__ */ jsxs(
+    TradingSplitLayout,
+    {
+      style: { flex: 1, minHeight: ORDERBOOK_MIN_HEIGHT },
+      onSizeChange: setOrderbookSplitSize,
+      disable: !horizontalDraggable,
+      children: [
+        renderTradingView(),
+        orderbookView
+      ]
+    }
+  );
+  const renderTradingViewAndOrderbookView = () => {
+    if (max4XL && layout === "left") {
+      return /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          gapX: 2,
+          style: { minHeight: ORDERBOOK_MIN_HEIGHT },
+          height: "100%",
+          children: [
+            tradingViewAndOrderbookView,
+            marketLayout === "left" && marketsView
+          ]
+        }
+      );
+    }
+    return tradingViewAndOrderbookView;
+  };
+  const mainView = /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "column",
+      className: "oui-flex-1 oui-overflow-hidden",
+      gap: 2,
+      style: {
+        minWidth: max4XL ? marketsWidth + TRADINGVIEW_MIN_WIDTH + ORDERBOOK_MIN_WIDTH + SPACE * 2 : TRADINGVIEW_MIN_WIDTH + ORDERBOOK_MIN_WIDTH + SPACE
+      },
+      children: [
+        symbolInfoBarView,
+        /* @__PURE__ */ jsxs(
+          TradingSplitLayout,
+          {
+            style: {
+              maxHeight: `calc(100% - ${symbolInfoBarHeight}px - ${SPACE}px)`
+            },
+            className: "oui-w-full",
+            mode: "vertical",
+            onSizeChange: setDataListSplitSize,
+            children: [
+              renderTradingViewAndOrderbookView(),
+              dataListView
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const dragOverlayContent = activeId ? /* @__PURE__ */ jsx(
+    TradingSortablePanel,
+    {
+      id: activeId,
+      showIndicator: showPositionIcon,
+      dragOverlay: true,
+      className: "oui-shadow-lg oui-shadow-base-9",
+      children: getPanel(activeId)
+    }
+  ) : null;
+  if (max2XL) {
+    return /* @__PURE__ */ jsxs(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        modifiers: [restrictToVerticalAxis],
+        children: [
+          /* @__PURE__ */ jsx(
+            SortableContext,
+            {
+              items: sortableItems,
+              strategy: verticalListSortingStrategy,
+              children: /* @__PURE__ */ jsxs(Box, { height: "100%", children: [
+                marketLayout === "top" && /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    className: cn(
+                      "oui-trading-markets-container oui-mt-2 oui-max-h-8 oui-px-3",
+                      className
+                    ),
+                    children: horizontalMarketsView
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  TradingSplitLayout,
+                  {
+                    ref: max2XLSplitRef,
+                    style: {
+                      minHeight: minScreenHeightSM,
+                      minWidth: 1024 - SCROLLBAR_WIDTH
+                    },
+                    className: cn(
+                      "oui-flex oui-flex-1",
+                      "oui-size-full oui-min-w-[1018px]",
+                      "oui-px-3 oui-py-2",
+                      className
+                    ),
+                    onSizeChange: setDataListSplitHeightSM,
+                    onDragging: onDataListSplitHeightDragging,
+                    mode: "vertical",
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        Flex,
+                        {
+                          gapX: 2,
+                          itemAlign: "stretch",
+                          className: cn(
+                            "oui-flex-1",
+                            layout === "left" && "oui-flex-row-reverse"
+                          ),
+                          style: {
+                            minHeight: Math.max(
+                              symbolInfoBarHeight + TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE * 2,
+                              orderEntryHeight
+                            ),
+                            maxHeight: symbolInfoBarHeight + tradindviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE * 2
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              Flex,
+                              {
+                                height: "100%",
+                                className: "oui-w-[calc(100%_-_280px_-_12px)] oui-flex-1",
+                                direction: "column",
+                                gapY: 2,
+                                children: [
+                                  symbolInfoBarView,
+                                  /* @__PURE__ */ jsxs(
+                                    Flex,
+                                    {
+                                      width: "100%",
+                                      height: "100%",
+                                      gapX: 2,
+                                      itemAlign: "stretch",
+                                      style: {
+                                        minHeight: TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE,
+                                        maxHeight: tradindviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE
+                                      },
+                                      className: cn(
+                                        "oui-flex-1",
+                                        layout === "left" && "oui-flex-row-reverse"
+                                      ),
+                                      children: [
+                                        marketLayout === "left" && /* @__PURE__ */ jsx(
+                                          Box,
+                                          {
+                                            intensity: 900,
+                                            pt: 3,
+                                            r: "2xl",
+                                            width: marketsWidth,
+                                            style: {
+                                              minHeight: TRADINGVIEW_MIN_HEIGHT + ORDERBOOK_MIN_HEIGHT + SPACE,
+                                              maxHeight: tradindviewMaxHeight + ORDERBOOK_MAX_HEIGHT + SPACE
+                                            },
+                                            children: marketsWidget
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsxs(
+                                          TradingSplitLayout,
+                                          {
+                                            ref: tradingviewAndOrderbookSplitRef,
+                                            mode: "vertical",
+                                            style: { width: `calc(100% - ${marketsWidth}px)` },
+                                            className: "oui-flex-1",
+                                            onSizeChange: setOrderbookSplitHeightSM,
+                                            onDragging: onTradingviewAndOrderbookDragging,
+                                            children: [
+                                              /* @__PURE__ */ jsx(
+                                                Box,
+                                                {
+                                                  width: "100%",
+                                                  intensity: 900,
+                                                  r: "2xl",
+                                                  style: {
+                                                    minHeight: TRADINGVIEW_MIN_HEIGHT,
+                                                    maxHeight: tradindviewMaxHeight,
+                                                    height: 1200
+                                                  },
+                                                  children: tradingviewWidget
+                                                }
+                                              ),
+                                              /* @__PURE__ */ jsx(
+                                                Box,
+                                                {
+                                                  r: "2xl",
+                                                  height: "100%",
+                                                  width: "100%",
+                                                  style: {
+                                                    minHeight: ORDERBOOK_MIN_HEIGHT,
+                                                    maxHeight: ORDERBOOK_MAX_HEIGHT,
+                                                    height: orderBookSplitHeightSM
+                                                  },
+                                                  className: "oui-flex-1",
+                                                  children: getPanel(TRADING_PANEL_IDS.ORDERBOOK)
+                                                }
+                                              )
+                                            ]
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              Flex,
+                              {
+                                ref: orderEntryViewRef,
+                                id: "orderEntryView",
+                                gapY: 3,
+                                direction: "column",
+                                className: "oui-relative",
+                                style: {
+                                  width: ORDER_ENTRY_MIN_WIDTH,
+                                  height: "max-content"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Flex,
+                                    {
+                                      gapY: 2,
+                                      direction: "column",
+                                      height: "100%",
+                                      style: {
+                                        minWidth: ORDER_ENTRY_MIN_WIDTH,
+                                        maxWidth: horizontalDraggable ? ORDER_ENTRY_MAX_WIDTH : ORDER_ENTRY_MIN_WIDTH,
+                                        width: mainSplitSize
+                                      },
+                                      children: sortableItems.map((id) => /* @__PURE__ */ jsx(
+                                        TradingSortablePanel,
+                                        {
+                                          id,
+                                          showIndicator: showPositionIcon,
+                                          className: cn(
+                                            id === TRADING_PANEL_IDS.MARGIN && "oui-trading-riskRate-container",
+                                            id === TRADING_PANEL_IDS.ASSETS && "oui-trading-assetsView-container oui-border oui-border-line-12",
+                                            id === TRADING_PANEL_IDS.ORDER_ENTRY && "oui-trading-orderEntry-container",
+                                            id === "margin" && "oui-trading-riskRate-container",
+                                            id === "assets" && "oui-trading-assetsView-container oui-border oui-border-line-12",
+                                            id === "orderEntry" && "oui-trading-orderEntry-container"
+                                          ),
+                                          children: getPanel(id)
+                                        },
+                                        id
+                                      ))
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(Box, { height: extraHeight })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          intensity: 900,
+                          r: "2xl",
+                          p: 2,
+                          style: {
+                            height: dataListSplitHeightSM,
+                            minHeight: Math.max(dataListMinHeight, 0),
+                            maxHeight: DATA_LIST_MAX_HEIGHT
+                          },
+                          className: "oui-overflow-hidden",
+                          children: getPanel(TRADING_PANEL_IDS.DATA_LIST)
+                        }
+                      ),
+                      marketLayout === "bottom" && stickyHorizontalMarketsView
+                    ]
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, children: dragOverlayContent })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      modifiers: [restrictToVerticalAxis],
+      children: [
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: sortableItems,
+            strategy: verticalListSortingStrategy,
+            children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                style: {
+                  minHeight: minScreenHeight,
+                  minWidth: 1440 - SCROLLBAR_WIDTH
+                },
+                className: cn(
+                  className,
+                  "oui-justify-start",
+                  tradingViewFullScreen && "oui-relative oui-h-[calc(100vh-80px)] oui-w-screen oui-overflow-hidden !oui-p-0"
+                ),
+                width: "100%",
+                p: 2,
+                gap: 2,
+                itemAlign: "stretch",
+                direction: "column",
+                children: [
+                  marketLayout === "top" && horizontalMarketsView,
+                  /* @__PURE__ */ jsxs(
+                    Flex,
+                    {
+                      className: cn(
+                        "oui-flex-1 oui-overflow-hidden",
+                        layout === "left" && "oui-flex-row-reverse"
+                      ),
+                      gap: 2,
+                      children: [
+                        !max4XL && marketLayout === "left" && marketsView,
+                        /* @__PURE__ */ jsxs(
+                          TradingSplitLayout,
+                          {
+                            className: "oui-flex oui-flex-1 oui-overflow-hidden",
+                            onSizeChange: onMainSplitSizeChange,
+                            disable: !horizontalDraggable,
+                            children: [
+                              layout === "left" && orderEntryView,
+                              mainView,
+                              layout === "right" && orderEntryView
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  marketLayout === "bottom" && stickyHorizontalMarketsView
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, children: dragOverlayContent })
+      ]
+    }
+  );
+}
+
+// src/splitTradingStrategy.ts
+var splitTradingStrategy = {
+  id: "split-trading",
+  displayName: "Split Trading Layout",
+  /** No layout model needed — state is managed internally by SplitTradingLayout. */
+  defaultLayout: () => ({}),
+  serialize: () => "{}",
+  deserialize: () => ({}),
+  /** SplitTradingLayout implements LayoutRendererProps<Record<string, unknown>>. */
+  Renderer: SplitTradingLayout
+};
+var PLUGIN_ID = "orderly-layout-split";
+var PLUGIN_NAME = "Split Layout";
+var PLUGIN_VERSION = "1.0.0";
+function registerLayoutSplitPlugin(options = {}) {
+  return (SDK) => {
+    SDK.registerPlugin({
+      id: PLUGIN_ID,
+      name: PLUGIN_NAME,
+      version: PLUGIN_VERSION,
+      orderlyVersion: ">=1.0.0",
+      interceptors: [
+        createInterceptor("Trading.Layout.Desktop", (Original, props) => /* @__PURE__ */ jsx(
+          Original,
+          {
+            ...props,
+            layoutStrategy: splitTradingStrategy,
+            getInitialLayout: () => ({}),
+            disableLayoutPersistence: true
+          }
+        )),
+        createInterceptor(
+          "Trading.SymbolInfoBar.Desktop",
+          (Original, props) => /* @__PURE__ */ jsx(
+            Original,
+            {
+              ...props,
+              trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+                props.trailing,
+                /* @__PURE__ */ jsx(SymbolBarLayoutSwitcher, {})
+              ] })
+            }
+          )
+        )
+      ]
+    });
+  };
+}
+var SplitTradingDesktopContext = React.createContext(null);
+SplitTradingDesktopContext.displayName = "SplitTradingDesktopContext";
+function useSplitTradingDesktopContext() {
+  return React.useContext(SplitTradingDesktopContext);
+}
+function useDropAnimationConfig() {
+  return useMemo(
+    () => ({
+      keyframes({
+        transform
+      }) {
+        return [
+          {
+            transform: CSS.Transform.toString({
+              ...transform.initial,
+              scaleX: 1.05,
+              scaleY: 1.05
+            })
+          },
+          {
+            transform: CSS.Transform.toString({
+              ...transform.final,
+              scaleX: 1,
+              scaleY: 1
+            })
+          }
+        ];
+      },
+      sideEffects: ({
+        active,
+        dragOverlay
+      }) => {
+        active.node.style.opacity = "0";
+        const inner = dragOverlay.node.querySelector(".inner-content");
+        if (inner) inner.classList.add("oui-animate-shake");
+        return () => {
+          active.node.style.opacity = "";
+        };
+      }
+    }),
+    []
+  );
+}
+function SplitTradingDesktopChrome(props) {
+  const {
+    children,
+    max2XL,
+    tradingViewFullScreen,
+    sortableItems,
+    setSortableItems,
+    className
+  } = props;
+  const [activeId, setActiveId] = useState(null);
+  const dropAnimationConfig2 = useDropAnimationConfig();
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragStart = (event) => {
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (active.id !== over?.id && over) {
+      const oldIndex = sortableItems?.indexOf(active.id) ?? -1;
+      const newIndex = sortableItems?.indexOf(over.id) ?? -1;
+      if (oldIndex !== -1 && newIndex !== -1) {
+        setSortableItems?.(
+          arrayMove(sortableItems ?? [], oldIndex, newIndex)
+        );
+      }
+    }
+    setActiveId(null);
+  };
+  return /* @__PURE__ */ jsx(SplitTradingDesktopContext.Provider, { value: props, children: /* @__PURE__ */ jsxs(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      modifiers: [restrictToVerticalAxis],
+      children: [
+        /* @__PURE__ */ jsx(
+          SortableContext,
+          {
+            items: sortableItems ?? [],
+            strategy: verticalListSortingStrategy,
+            children: max2XL ? /* @__PURE__ */ jsx(Box, { height: "100%", className, children }) : /* @__PURE__ */ jsx(
+              Flex,
+              {
+                style: {
+                  // minHeight: minScreenHeight,
+                  // minWidth: 1440 - scrollBarWidth,
+                },
+                className: cn(
+                  className,
+                  "oui-flex-1 oui-justify-start oui-overflow-hidden",
+                  tradingViewFullScreen && "oui-relative oui-h-[calc(100vh-80px)] oui-w-screen oui-overflow-hidden !oui-p-0"
+                ),
+                width: "100%",
+                p: 2,
+                gap: 2,
+                itemAlign: "stretch",
+                direction: "column",
+                children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig2, children: activeId ? /* @__PURE__ */ jsxs("div", { className: "oui-pointer-events-none oui-opacity-80", children: [
+          "id: ",
+          activeId
+        ] }) : null })
+      ]
+    }
+  ) });
+}
+var SplitPresetContext = createContext(null);
+function useSplitPresetContext() {
+  return useContext(SplitPresetContext);
+}
+var ExpandIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
+  }
+);
+var CollapseIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
+  }
+);
+var CollapsiblePanel = ({
+  title,
+  collapsible,
+  collapsed,
+  onToggle,
+  minSize,
+  maxSize,
+  children,
+  className,
+  style
+}) => {
+  const computedStyle = Object.assign(
+    {},
+    style,
+    typeof collapsible !== "undefined" ? collapsed ? { width: minSize } : { width: maxSize } : {}
+  );
+  const bodyClassName = useMemo(() => {
+    return typeof !!title ? "oui-h-[calc(100%_-_40px)]" : "oui-h-full";
+  }, [title]);
+  const renderCollapsibleHeader = () => {
+    return /* @__PURE__ */ jsxs(
+      Flex,
+      {
+        className: cn(
+          "oui-text-base-contrast-36"
+          // collapsed ? "oui-absolute oui-end-[-20px] oui-z-50" : "oui-relative",
+        ),
+        justify: collapsed ? "center" : "between",
+        width: "100%",
+        px: 3,
+        pt: 3,
+        children: [
+          !collapsed && title && /* @__PURE__ */ jsx(Text, { size: "base", intensity: 80, children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onToggle,
+              className: cn("oui-cursor-pointer hover:oui-text-base-contrast-80"),
+              children: collapsed ? /* @__PURE__ */ jsx(ExpandIcon, { className: "oui-text-base-contrast-36" }) : /* @__PURE__ */ jsx(CollapseIcon, { className: "oui-text-base-contrast-36" })
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "oui-flex oui-flex-col oui-gap-y-5 oui-overflow-hidden oui-rounded-2xl oui-bg-base-9 oui-w-full oui-h-full",
+        className
+      ),
+      style: computedStyle,
+      children: [
+        renderCollapsibleHeader(),
+        /* @__PURE__ */ jsx("div", { className: cn("oui-collapsible-content", bodyClassName), children: React.cloneElement(children, {
+          collapsed
+          // panelSize: "small",
+        }) })
+      ]
+    }
+  );
+};
+var DEFAULT_SHOW_INDICATOR = true;
+function IndicatorIcon2(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "6", height: "2", rx: "1" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "6", height: "2", rx: "1" }),
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "12", width: "6", height: "2", rx: "1" })
+      ]
+    }
+  );
+}
+function SortableSortChild({
+  id,
+  child,
+  showIndicator,
+  path,
+  rootNode,
+  index
+}) {
+  const { ref, handleRef, isDragging } = useSortable$1({
+    id,
+    index
+  });
+  const showHandle = showIndicator && child.type === "panel";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("oui-relative", isDragging && "oui-opacity-50"),
+      children: [
+        showHandle && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "oui-absolute oui-right-0 oui-top-4 oui-cursor-move oui-py-1",
+            style: { touchAction: "none" },
+            ref: handleRef,
+            children: /* @__PURE__ */ jsx(
+              IndicatorIcon2,
+              {
+                className: cn(
+                  "oui-text-base-contrast-20 hover:oui-text-base-contrast-80"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(SplitNodeRenderer, { node: child, path, rootNode })
+      ]
+    }
+  );
+}
+function SortNodeRenderer({
+  node,
+  path,
+  rootNode,
+  classNames
+}) {
+  const { onLayoutChange, layout, breakpoint } = useSplitLayoutConfig();
+  const { orientation, children } = node;
+  const ctx = useSplitPresetContext();
+  const showIndicator = ctx?.showIndicator ?? DEFAULT_SHOW_INDICATOR;
+  const items = children.map(
+    (child, index) => getSortableIdForChild(child, path, index)
+  );
+  const isVertical = orientation === "vertical";
+  const handleDragEnd = useCallback(
+    (event) => {
+      const anyEvent = event;
+      if (!anyEvent.operation || anyEvent.canceled) return;
+      const { source } = anyEvent.operation;
+      if (!isSortable(source)) return;
+      const { initialIndex, index } = source;
+      if (initialIndex === index) return;
+      const newOrder = [...children];
+      const [removed] = newOrder.splice(initialIndex, 1);
+      newOrder.splice(index, 0, removed);
+      const updatedRoot = updateOrderAtPath(rootNode, path, newOrder);
+      onLayoutChange({
+        ...layout,
+        layouts: {
+          ...layout.layouts,
+          [breakpoint]: updatedRoot
+        }
+      });
+    },
+    [children, path, rootNode, breakpoint, layout, onLayoutChange]
+  );
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    DragDropProvider,
+    {
+      onDragEnd: handleDragEnd,
+      modifiers: (defaults) => [...defaults, RestrictToVerticalAxis],
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            isVertical ? "oui-flex oui-w-full oui-flex-col oui-gap-2" : "oui-flex oui-w-full oui-flex-row oui-gap-2",
+            node.className,
+            classNames?.panel
+          ),
+          style: node.style,
+          children: children.map((child, index) => /* @__PURE__ */ jsx(
+            SortableSortChild,
+            {
+              id: items[index],
+              child,
+              showIndicator,
+              path: [...path, index],
+              rootNode,
+              index
+            },
+            items[index]
+          ))
+        }
+      )
+    }
+  ) });
+}
+function SplitNodeRenderer({
+  node,
+  path,
+  rootNode
+}) {
+  const {
+    panels,
+    onSizeChange,
+    onSizePersist,
+    classNames,
+    gap,
+    isPanelCollapsed,
+    togglePanelCollapse,
+    isPanelCollapsible
+  } = useSplitLayoutConfig();
+  if (node.type === "panel") {
+    const panelWrapper = panels.get(node.id);
+    const panel = panelWrapper?.node;
+    if (!panel) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "oui-text-base-contrast-40 oui-rounded-2xl oui-bg-base-9 oui-p-3 oui-text-xs",
+            node.size !== "fixed" && "oui-size-full",
+            classNames?.panel,
+            node.className
+          ),
+          style: node.style,
+          "data-panel-id": node.id,
+          children: node.id ? `Panel not found: ${node.id}` : "Panel not found"
+        }
+      );
+    }
+    const title = node.title ?? panelWrapper?.props?.title;
+    if (typeof node.collapsible !== "undefined") {
+      return /* @__PURE__ */ jsx(
+        CollapsiblePanel,
+        {
+          title,
+          collapsible: node.collapsible || isPanelCollapsible(node.id),
+          collapsed: isPanelCollapsed(node.id),
+          onToggle: () => togglePanelCollapse(node.id),
+          minSize: node.minSize,
+          maxSize: node.maxSize,
+          className: cn(
+            node.size !== "fixed" && "oui-size-full",
+            classNames?.panel,
+            node.className
+          ),
+          style: node.style,
+          "data-panel-id": node.id,
+          children: panel
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "oui-overflow-hidden oui-rounded-2xl oui-bg-base-9",
+          node.size !== "fixed" && "oui-size-full",
+          classNames?.panel,
+          node.className
+        ),
+        style: node.style,
+        "data-panel-id": node.id,
+        children: panel
+      }
+    );
+  }
+  if (node.type === "sort") {
+    return /* @__PURE__ */ jsx(
+      SortNodeRenderer,
+      {
+        node,
+        path,
+        rootNode,
+        classNames
+      }
+    );
+  }
+  const { orientation, children } = node;
+  const sizes = children.map((child) => child.size ?? "auto");
+  const panelConstraints = children.map((child) => ({
+    // Nested split/sort nodes need minSize to prevent collapse (lib default 0% causes inner area to collapse)
+    minSize: child.minSize ?? (child.type === "split" || child.type === "sort" ? "10%" : void 0),
+    maxSize: child.maxSize,
+    disabled: child.disabled
+  }));
+  return /* @__PURE__ */ jsx(
+    SplitLayout,
+    {
+      orientation,
+      sizes,
+      panelConstraints,
+      onSizeChange: (sizesAsStrings) => {
+        onSizeChange(path, sizesAsStrings);
+        onSizePersist?.(path, sizesAsStrings);
+      },
+      classNames,
+      gap,
+      className: node.className,
+      style: node.style,
+      children: children.map((child, index) => /* @__PURE__ */ jsx(
+        SplitNodeRenderer,
+        {
+          node: child,
+          path: [...path, index],
+          rootNode
+        },
+        `child-${index}`
+      ))
+    }
+  );
+}
+
+// src/utils/splitRendererUtils.ts
+function getNodeAtPath(node, path) {
+  if (path.length === 0) return node;
+  if (node.type === "panel") return null;
+  const [childIndex, ...restPath] = path;
+  if (childIndex >= node.children.length) return null;
+  return getNodeAtPath(node.children[childIndex], restPath);
+}
+function getSizesFromChildren(children) {
+  return children.map((child) => child.size ?? "auto");
+}
+function sizesAreEqual(current, next) {
+  if (!current || current.length !== next.length) return false;
+  const toNum = (value) => Math.round(parseFloat(String(value).replace(/%/g, "")) || 0);
+  return current.every((c, index) => toNum(c) === toNum(next[index]));
+}
+function updateDefaultCollapsedAtPath(node, panelId, defaultCollapsed) {
+  if (node.type === "panel" && node.id === panelId) {
+    return { ...node, defaultCollapsed };
+  }
+  if (node.type === "split" || node.type === "sort") {
+    return {
+      ...node,
+      children: node.children.map(
+        (child) => updateDefaultCollapsedAtPath(child, panelId, defaultCollapsed)
+      )
+    };
+  }
+  return node;
+}
+function updateSizeAtPath(node, path, newSizes) {
+  if (node.type === "panel") {
+    const size = newSizes[0];
+    return size !== void 0 ? { ...node, size } : node;
+  }
+  if (node.type === "sort") {
+    if (path.length === 0) return node;
+    const [childIndex2, ...restPath2] = path;
+    const updatedChildren = [...node.children];
+    if (childIndex2 < updatedChildren.length) {
+      updatedChildren[childIndex2] = updateSizeAtPath(
+        updatedChildren[childIndex2],
+        restPath2,
+        newSizes
+      );
+    }
+    return { ...node, children: updatedChildren };
+  }
+  const updatedNode = {
+    ...node,
+    children: [...node.children]
+  };
+  if (path.length === 0) {
+    updatedNode.children = node.children.map((child, index) => ({
+      ...child,
+      size: newSizes[index] ?? child.size ?? "auto"
+    }));
+    return updatedNode;
+  }
+  const [childIndex, ...restPath] = path;
+  if (childIndex < updatedNode.children.length) {
+    updatedNode.children[childIndex] = updateSizeAtPath(
+      updatedNode.children[childIndex],
+      restPath,
+      newSizes
+    );
+  }
+  return updatedNode;
+}
+function getCollapsiblePanels(node) {
+  const collapsible = /* @__PURE__ */ new Map();
+  const traverse = (n) => {
+    if (n.type === "panel" && n.id) {
+      collapsible.set(n.id, n.collapsible ?? false);
+    }
+    if (n.type === "split" || n.type === "sort") {
+      for (const child of n.children ?? []) {
+        traverse(child);
+      }
+    }
+  };
+  traverse(node);
+  return collapsible;
+}
+function createUpdatedLayout(rootNode, layout, breakpoint, path, sizes) {
+  const updatedRoot = updateSizeAtPath(rootNode, path, sizes);
+  return {
+    ...layout,
+    layouts: {
+      ...layout.layouts,
+      [breakpoint]: updatedRoot
+    }
+  };
+}
+function SplitRenderer(props) {
+  const { layout, panels, onLayoutChange, onLayoutPersist, className, style } = props;
+  const ctx = useSplitPresetContext();
+  const containerRef = useRef(null);
+  const presetName = ctx?.presets?.find(
+    (p) => p.id === ctx?.selectedPresetId
+  )?.name;
+  const breakpoint = useViewportBreakpoint({
+    fallbackWidth: typeof window !== "undefined" ? window.innerWidth : 1440
+  });
+  const rootNode = layout.layouts[breakpoint];
+  const computeUpdatedLayout = useCallback(
+    (path, sizes) => {
+      const nodeAtPath = getNodeAtPath(rootNode, path);
+      const currentSizes = nodeAtPath?.type === "split" ? getSizesFromChildren(nodeAtPath.children) : void 0;
+      if (sizesAreEqual(currentSizes, sizes)) {
+        return null;
+      }
+      return createUpdatedLayout(rootNode, layout, breakpoint, path, sizes);
+    },
+    [layout, breakpoint, rootNode]
+  );
+  const handleSizeChange = useCallback(
+    (path, sizes) => {
+      const updatedLayout = computeUpdatedLayout(path, sizes);
+      if (updatedLayout) {
+        onLayoutChange(updatedLayout);
+      }
+    },
+    [computeUpdatedLayout, onLayoutChange]
+  );
+  const handleSizePersist = useCallback(
+    (path, sizes) => {
+      if (!onLayoutPersist) return;
+      const updatedLayout = computeUpdatedLayout(path, sizes);
+      if (updatedLayout) {
+        onLayoutPersist(updatedLayout);
+      }
+    },
+    [computeUpdatedLayout, onLayoutPersist]
+  );
+  const collapsiblePanels = useMemo(
+    () => getCollapsiblePanels(rootNode),
+    [rootNode]
+  );
+  const collapsedPanels = useMemo(() => {
+    const collapsed = /* @__PURE__ */ new Set();
+    const traverse = (node) => {
+      if (node.type === "panel" && node.id && node.defaultCollapsed) {
+        collapsed.add(node.id);
+      }
+      if (node.type === "split" || node.type === "sort") {
+        node.children?.forEach(traverse);
+      }
+    };
+    traverse(rootNode);
+    return collapsed;
+  }, [rootNode]);
+  const computeUpdatedLayoutForCollapse = useCallback(
+    (panelId, collapsed) => {
+      const updatedLayouts = {};
+      for (const bp of BREAKPOINT_KEYS) {
+        if (layout.layouts[bp]) {
+          updatedLayouts[bp] = updateDefaultCollapsedAtPath(
+            layout.layouts[bp],
+            panelId,
+            collapsed
+          );
+        }
+      }
+      return { ...layout, layouts: updatedLayouts };
+    },
+    [layout]
+  );
+  const isPanelCollapsible = useCallback(
+    (panelId) => collapsiblePanels.get(panelId) ?? false,
+    [collapsiblePanels]
+  );
+  const togglePanelCollapse = useCallback(
+    (panelId) => {
+      const isCurrentlyCollapsed = collapsedPanels.has(panelId);
+      const updatedLayout = computeUpdatedLayoutForCollapse(
+        panelId,
+        !isCurrentlyCollapsed
+      );
+      onLayoutChange(updatedLayout);
+      onLayoutPersist?.(updatedLayout);
+    },
+    [
+      collapsedPanels,
+      computeUpdatedLayoutForCollapse,
+      onLayoutChange,
+      onLayoutPersist
+    ]
+  );
+  const isPanelCollapsed = useCallback(
+    (panelId) => collapsedPanels.has(panelId),
+    [collapsedPanels]
+  );
+  if (panels.size === 0) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+  }
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, children: [
+    /* @__PURE__ */ jsx(
+      SplitLayoutConfigProvider,
+      {
+        panels,
+        layout,
+        breakpoint,
+        onLayoutChange,
+        onSizeChange: handleSizeChange,
+        onSizePersist: handleSizePersist,
+        classNames: ctx?.classNames,
+        gap: ctx?.gap,
+        collapsedPanels,
+        togglePanelCollapse,
+        isPanelCollapsed,
+        collapsiblePanels,
+        isPanelCollapsible,
+        children: /* @__PURE__ */ jsx(SplitNodeRenderer, { node: rootNode, path: [], rootNode })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "oui-fixed oui-right-2 oui-bottom-5 oui-text-lg oui-text-trade-loss oui-flex oui-flex-col oui-items-end",
+        style: { zIndex: 1e3 },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: breakpoint }),
+          presetName && /* @__PURE__ */ jsx("span", { className: "oui-text-sm", children: presetName }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => ctx?.reset(),
+              className: "oui-mt-1 oui-px-2 oui-py-1 oui-text-sm oui-bg-gray-500 oui-text-white oui-rounded",
+              children: "Reset"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/splitStrategy.ts
+var splitStrategy = {
+  id: "split",
+  displayName: "Split Layout",
+  defaultLayout: createDefaultSplitLayout,
+  serialize: serializeSplitLayout,
+  deserialize: deserializeSplitLayout,
+  Renderer: SplitRenderer
+};
+function SplitInlinedLayout({
+  Original,
+  props
+}) {
+  const layoutStrategy = props.layoutStrategy ?? splitStrategy;
+  return /* @__PURE__ */ jsx(SplitTradingDesktopChrome, { ...props, children: /* @__PURE__ */ jsx(Original, { ...props, layoutStrategy }) });
+}
+
+export { DATA_LIST_INITIAL_HEIGHT, DATA_LIST_MAX_HEIGHT, DEFAULT_SPLIT_BREAKPOINTS, ORDERBOOK_MAX_HEIGHT, ORDERBOOK_MAX_WIDTH, ORDERBOOK_MIN_HEIGHT, ORDERBOOK_MIN_WIDTH, ORDER_ENTRY_MAX_WIDTH, ORDER_ENTRY_MIN_WIDTH, SPACE, SPLIT_BREAKPOINT_ORDER, SYMBOL_INFO_BAR_HEIGHT, SplitInlinedLayout, SplitLayout, SplitLayoutConfigProvider, SplitTradingDesktopChrome, SplitTradingLayout, TRADINGVIEW_MIN_HEIGHT, TRADINGVIEW_MIN_WIDTH, TradingSortablePanel, TradingSplitLayout, VIEWPORT_BREAKPOINTS, VIEWPORT_BREAKPOINT_ORDER, createDefaultSplitLayout, deserializeSplitLayout, getSortableIdForChild, registerLayoutSplitPlugin, serializeSplitLayout, splitTradingStrategy, updateOrderAtPath, useSplitLayout, useSplitLayoutConfig, useSplitTradingDesktopContext, useViewportBreakpoint };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map