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

package/dist/index.js

@@ -0,0 +1,541 @@
+'use strict';
+
+require('react-grid-layout/css/styles.css');
+require('react-resizable/css/styles.css');
+var React = require('react');
+var reactGridLayout = require('react-grid-layout');
+var orderlyUi = require('@kodiak-finance/orderly-ui');
+var orderlyLayoutCore = require('@kodiak-finance/orderly-layout-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/index.ts
+var S = orderlyLayoutCore.TRADING_PANEL_IDS;
+var regularLayoutRule = [
+  {
+    panelId: S.SYMBOL_INFO_BAR,
+    x: 0,
+    y: 0,
+    w: 19,
+    h: 4,
+    minW: 8,
+    minH: 2,
+    static: true,
+    isResizable: false,
+    className: "oui-px-3"
+  },
+  {
+    panelId: S.MARKETS,
+    x: 0,
+    y: 4,
+    w: 5,
+    h: 38,
+    minW: 1
+  },
+  {
+    panelId: S.TRADING_VIEW,
+    x: 5,
+    y: 3,
+    w: 10,
+    h: 38,
+    minW: 4,
+    minH: 8,
+    resizeHandles: ["se"]
+  },
+  {
+    panelId: S.ORDERBOOK,
+    x: 15,
+    y: 3,
+    w: 4,
+    h: 38,
+    minW: 3,
+    minH: 4,
+    resizeHandles: ["se"]
+  },
+  {
+    panelId: S.MARGIN,
+    x: 19,
+    y: 0,
+    w: 5,
+    h: 4,
+    minW: 3,
+    minH: 2,
+    isResizable: false,
+    className: "oui-p-3"
+  },
+  {
+    panelId: S.ASSETS,
+    x: 19,
+    y: 15,
+    w: 5,
+    h: 20,
+    minW: 3,
+    minH: 24,
+    isResizable: false,
+    className: "oui-p-3"
+  },
+  {
+    panelId: S.ORDER_ENTRY,
+    x: 19,
+    y: 4,
+    w: 5,
+    h: 38,
+    minW: 3,
+    minH: 38,
+    className: "oui-p-3",
+    isResizable: false,
+    autoHeight: true
+  },
+  {
+    panelId: S.DATA_LIST,
+    x: 0,
+    y: 39,
+    w: 19,
+    h: 20,
+    className: "oui-p-2"
+  }
+];
+var exchangeStyleRule = {
+  lg: regularLayoutRule,
+  md: regularLayoutRule,
+  sm: regularLayoutRule,
+  xs: regularLayoutRule
+  // md: [
+  //   { panelId: S.SYMBOL_INFO_BAR, x: 0, y: 0, w: 10, h: 3, minW: 6, minH: 2 },
+  //   { panelId: S.TRADING_VIEW, x: 0, y: 3, w: 6, h: 14, minW: 4, minH: 8 },
+  //   { panelId: S.ORDERBOOK, x: 6, y: 3, w: 4, h: 5, minW: 3, minH: 3 },
+  //   {
+  //     panelId: S.ORDER_ENTRY,
+  //     x: 6,
+  //     y: 8,
+  //     w: 4,
+  //     h: 5,
+  //     minW: 3,
+  //     minH: 4,
+  //     autoHeight: true,
+  //   },
+  //   { panelId: S.DATA_LIST, x: 6, y: 13, w: 4, h: 4, minW: 3, minH: 3 },
+  //   { panelId: S.MARKETS, x: 0, y: 17, w: 10, h: 6, minW: 4, minH: 4 },
+  // ],
+};
+var DEFAULT_GRID_LAYOUT_RULE = exchangeStyleRule;
+var DEFAULT_GRID_PRESETS = [
+  {
+    id: "exchange-style",
+    name: "Exchange Style",
+    rule: exchangeStyleRule,
+    rowHeight: 10
+  }
+];
+function getDefaultGridPresets() {
+  return [...DEFAULT_GRID_PRESETS];
+}
+
+// src/utils/gridLayoutUtils.ts
+var BREAKPOINT_ORDER = ["lg", "md", "sm", "xs"];
+var DEFAULT_GRID_CONFIG = {
+  rowHeight: 30,
+  margin: [4, 4],
+  containerPadding: [0, 0],
+  compactType: "vertical",
+  isDraggable: true,
+  isResizable: true
+};
+function mergeGridConfig(userConfig, presetRowHeight) {
+  return {
+    ...DEFAULT_GRID_CONFIG,
+    ...presetRowHeight !== void 0 && { rowHeight: presetRowHeight },
+    ...userConfig
+  };
+}
+var DEFAULT_BREAKPOINTS = {
+  lg: 1680,
+  md: 1440,
+  sm: 1280,
+  xs: 768
+};
+var DEFAULT_COLS = {
+  lg: 24,
+  md: 24,
+  sm: 24,
+  xs: 24
+};
+function specsToItems(specs, panelIds) {
+  const idSet = new Set(panelIds);
+  return specs.filter((spec) => idSet.has(spec.panelId)).map((spec) => ({
+    i: spec.panelId,
+    panelId: spec.panelId,
+    x: spec.x,
+    y: spec.y,
+    w: spec.w,
+    h: spec.h,
+    minW: spec.minW,
+    minH: spec.minH,
+    maxW: spec.maxW,
+    maxH: spec.maxH,
+    isDraggable: spec.isDraggable,
+    isResizable: spec.isResizable,
+    resizeHandles: spec.resizeHandles,
+    static: spec.static,
+    className: spec.className,
+    style: spec.style,
+    autoHeight: spec.autoHeight
+  }));
+}
+function buildLayoutsFromRule(rule, panelIds) {
+  const result = {};
+  const fallbackSpecs = rule.lg ?? [];
+  for (const bp of BREAKPOINT_ORDER) {
+    const specs = rule[bp] ?? fallbackSpecs;
+    result[bp] = specsToItems(specs, panelIds);
+  }
+  return result;
+}
+function createDefaultGridLayout(panelIds, rule, rowHeight) {
+  const effectiveRule = rule ?? DEFAULT_GRID_LAYOUT_RULE;
+  const layouts = buildLayoutsFromRule(effectiveRule, panelIds);
+  const effectiveConfig = mergeGridConfig(void 0, rowHeight);
+  return {
+    layouts,
+    breakpoints: DEFAULT_BREAKPOINTS,
+    cols: DEFAULT_COLS,
+    // For the default layout we always use vertical compaction.
+    compactType: "vertical",
+    isDraggable: effectiveConfig.isDraggable,
+    isResizable: effectiveConfig.isResizable,
+    margin: effectiveConfig.margin,
+    containerPadding: effectiveConfig.containerPadding,
+    rowHeight: effectiveConfig.rowHeight
+  };
+}
+function serializeGridLayout(layout) {
+  return JSON.stringify(layout);
+}
+function deserializeGridLayout(json) {
+  try {
+    const parsed = JSON.parse(json);
+    if (!parsed.layouts) {
+      throw new Error("Invalid grid layout: missing layouts");
+    }
+    return parsed;
+  } catch (error) {
+    throw new Error(`Failed to deserialize grid layout: ${error}`);
+  }
+}
+function toReactGridLayouts(layouts) {
+  const result = {};
+  Object.keys(layouts).forEach((breakpoint) => {
+    const items = layouts[breakpoint];
+    if (items) {
+      result[breakpoint] = items.map((item) => ({
+        i: item.i,
+        x: item.x,
+        y: item.y,
+        w: item.w,
+        h: item.h,
+        minW: item.minW,
+        minH: item.minH,
+        maxW: item.maxW,
+        maxH: item.maxH,
+        static: item.static,
+        isDraggable: item.isDraggable,
+        isResizable: item.isResizable,
+        resizeHandles: item.resizeHandles
+      }));
+    }
+  });
+  return result;
+}
+function GridRenderer(props) {
+  const { layout, panels, onLayoutChange, className, style } = props;
+  const { width, containerRef, mounted } = reactGridLayout.useContainerWidth();
+  const layoutsRef = React.useRef(layout.layouts);
+  React.useEffect(() => {
+    layoutsRef.current = layout.layouts;
+  }, [layout.layouts]);
+  const reactGridLayouts = React.useMemo(
+    () => toReactGridLayouts(layout.layouts),
+    [layout.layouts]
+  );
+  const handleLayoutChange = React.useCallback(
+    (_currentLayout, allLayouts) => {
+      const updatedLayouts = {};
+      Object.keys(allLayouts).forEach((bp) => {
+        const items = allLayouts[bp];
+        if (items) {
+          const originalItems = layout.layouts[bp] || [];
+          updatedLayouts[bp] = items.map((item) => {
+            const originalItem = originalItems.find((i) => i.i === item.i);
+            return {
+              ...item,
+              panelId: originalItem?.panelId || item.i,
+              className: originalItem?.className,
+              style: originalItem?.style
+            };
+          });
+        }
+      });
+      layoutsRef.current = updatedLayouts;
+      onLayoutChange({ ...layout, layouts: updatedLayouts });
+    },
+    [layout, onLayoutChange]
+  );
+  const { layout: currentLayout, cols } = reactGridLayout.useResponsiveLayout({
+    width,
+    breakpoints: layout.breakpoints || DEFAULT_BREAKPOINTS,
+    cols: layout.cols || DEFAULT_COLS,
+    layouts: reactGridLayouts,
+    onLayoutChange: handleLayoutChange
+  });
+  const layoutItems = React.useMemo(() => {
+    const breakpoints = ["lg", "md", "sm", "xs", "xxs"];
+    for (const bp of breakpoints) {
+      const items = layout.layouts[bp];
+      if (items?.length)
+        return items;
+    }
+    return [];
+  }, [layout.layouts]);
+  const children = React.useMemo(
+    () => layoutItems.map((config) => {
+      const panelId = config.panelId;
+      const panelWrapper = panels.get(panelId);
+      const panel = panelWrapper?.node;
+      if (!panel) {
+        return null;
+      }
+      const title = panelWrapper?.props?.title;
+      const isCollapsible = config.collapsible === true;
+      const layoutItem = currentLayout?.find(
+        (item) => item.i === config.i
+      );
+      let collapsed = false;
+      if (isCollapsible && layoutItem && typeof config.minW === "number" && Number.isFinite(config.minW)) {
+        collapsed = layoutItem.w <= config.minW;
+      }
+      const bodyClassName = typeof title !== "undefined" && title !== null ? "oui-h-[calc(100%_-_44px)]" : "oui-h-full";
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: orderlyUi.cn(
+            "oui-layout-grid-item oui-relative oui-size-full oui-overflow-hidden oui-rounded oui-bg-base-9",
+            config.className
+          ),
+          style: config.style,
+          children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx(
+              orderlyUi.Flex,
+              {
+                className: "oui-text-base-contrast-36",
+                justify: "between",
+                width: "100%",
+                px: 3,
+                pt: 3,
+                pb: 2,
+                children: /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Text, { size: "base", intensity: 80, children: title })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: orderlyUi.cn("oui-collapsible-content", bodyClassName), children: React__default.default.isValidElement(panel) ? React__default.default.cloneElement(panel, {
+              /** Pass collapsed state down so panel can adjust its own UI. */
+              collapsed
+            }) : panel })
+          ]
+        },
+        panelId
+      );
+    }),
+    [currentLayout, layoutItems, panels]
+  );
+  if (panels.size === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style
+      }
+    );
+  }
+  if (!mounted) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        className,
+        style
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: orderlyUi.cn("oui-grid-layout-container oui-p-1", className),
+      style,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactGridLayout.GridLayout,
+        {
+          width,
+          layout: currentLayout,
+          gridConfig: {
+            cols,
+            rowHeight: layout.rowHeight ?? 30,
+            margin: layout.margin || [4, 4],
+            containerPadding: layout.containerPadding || [0, 0]
+          },
+          compactor: reactGridLayout.getCompactor(
+            layout.compactType,
+            false,
+            layout.compactType === null
+          ),
+          dragConfig: {
+            enabled: layout.isDraggable !== false
+          },
+          resizeConfig: {
+            enabled: layout.isResizable !== false
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/gridStrategy.ts
+var gridStrategy = {
+  id: "grid",
+  displayName: "Grid Layout",
+  defaultLayout: createDefaultGridLayout,
+  serialize: serializeGridLayout,
+  deserialize: deserializeGridLayout,
+  Renderer: GridRenderer
+};
+function createTradingGridLayoutFromPreset(preset) {
+  const panelIds = orderlyLayoutCore.getTradingPanelIds();
+  const p = preset ?? DEFAULT_GRID_PRESETS[0];
+  if (!p)
+    throw new Error("Grid layout: no default presets");
+  return createDefaultGridLayout(panelIds, p.rule, p.rowHeight);
+}
+function createTradingGridLayout() {
+  return createTradingGridLayoutFromPreset();
+}
+var GridPresetContext = React.createContext(null);
+function useGridPresetContext() {
+  return React.useContext(GridPresetContext);
+}
+function GridLayoutSwitcher({
+  className,
+  style,
+  "aria-label": ariaLabel = "Grid layout preset"
+}) {
+  const ctx = useGridPresetContext();
+  if (!ctx || ctx.presets.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      className,
+      style,
+      "aria-label": ariaLabel,
+      value: ctx.selectedPresetId,
+      onChange: (e) => ctx.setSelectedPresetId(e.target.value),
+      children: ctx.presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, children: p.name }, p.id))
+    }
+  );
+}
+
+// src/utils/gridPluginConfig.ts
+function createDefaultGetInitialLayout(presets) {
+  return () => {
+    const preset = presets[0];
+    return createTradingGridLayoutFromPreset(preset);
+  };
+}
+function GridDesktopInjector({
+  Original,
+  props,
+  options
+}) {
+  const presets = options.presets ?? getDefaultGridPresets();
+  const presetRowHeight = presets[0]?.rowHeight;
+  const gridConfig = mergeGridConfig(options.grid, presetRowHeight);
+  const { persistLayout = false } = options;
+  const getInitialLayout = React__default.default.useCallback(() => {
+    const baseLayout = options.getInitialLayout?.() ?? createDefaultGetInitialLayout(presets)();
+    return {
+      ...baseLayout,
+      rowHeight: gridConfig.rowHeight,
+      margin: gridConfig.margin,
+      containerPadding: gridConfig.containerPadding,
+      compactType: gridConfig.compactType,
+      isDraggable: gridConfig.isDraggable,
+      isResizable: gridConfig.isResizable
+    };
+  }, [
+    options.getInitialLayout,
+    presets,
+    gridConfig.rowHeight,
+    gridConfig.margin,
+    gridConfig.containerPadding,
+    gridConfig.compactType,
+    gridConfig.isDraggable,
+    gridConfig.isResizable
+  ]);
+  const storageKey = persistLayout ? "orderly_trading_grid" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Original,
+    {
+      ...props,
+      layoutStrategy: gridStrategy,
+      getInitialLayout: props.getInitialLayout ?? ((_opts) => getInitialLayout()),
+      storageKey,
+      disableLayoutPersistence: !persistLayout
+    }
+  );
+}
+var PLUGIN_ID = "orderly-layout-grid";
+var PLUGIN_NAME = "Grid Layout";
+var PLUGIN_VERSION = "1.0.0";
+function registerLayoutGridPlugin(options) {
+  const resolvedPresets = options?.presets ?? getDefaultGridPresets();
+  return (SDK) => {
+    SDK.registerPlugin({
+      id: PLUGIN_ID,
+      name: PLUGIN_NAME,
+      version: PLUGIN_VERSION,
+      orderlyVersion: ">=1.0.0",
+      interceptors: [
+        orderlyUi.createInterceptor("Trading.Layout.Desktop", (Original, props) => /* @__PURE__ */ jsxRuntime.jsx(
+          GridDesktopInjector,
+          {
+            Original,
+            props,
+            options: {
+              ...options,
+              presets: resolvedPresets
+            }
+          }
+        ))
+      ]
+    });
+  };
+}
+
+exports.DEFAULT_BREAKPOINTS = DEFAULT_BREAKPOINTS;
+exports.DEFAULT_COLS = DEFAULT_COLS;
+exports.DEFAULT_GRID_PRESETS = DEFAULT_GRID_PRESETS;
+exports.GridLayoutSwitcher = GridLayoutSwitcher;
+exports.createDefaultGridLayout = createDefaultGridLayout;
+exports.createTradingGridLayout = createTradingGridLayout;
+exports.createTradingGridLayoutFromPreset = createTradingGridLayoutFromPreset;
+exports.deserializeGridLayout = deserializeGridLayout;
+exports.getDefaultGridPresets = getDefaultGridPresets;
+exports.gridStrategy = gridStrategy;
+exports.registerLayoutGridPlugin = registerLayoutGridPlugin;
+exports.serializeGridLayout = serializeGridLayout;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/GridRenderer.tsx","../src/utils/defaultPresets.ts","../src/utils/gridLayoutUtils.ts","../src/gridStrategy.ts","../src/utils/tradingGridLayout.ts","../src/GridPresetContext.tsx","../src/GridLayoutSwitcher.tsx","../src/plugin.tsx","../src/components/GridDesktopInjector.tsx","../src/utils/gridPluginConfig.ts"],"names":["useMemo","jsx","React"],"mappings":"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","sourcesContent":["/** @orderly.network/layout-grid */\nimport \"react-grid-layout/css/styles.css\";\nimport \"react-resizable/css/styles.css\";\nimport \"./styles.css\";\n\nexport { gridStrategy } from \"./gridStrategy\";\nexport type {\n  GridLayoutModel,\n  GridLayoutItem,\n  GridLayoutRule,\n  GridLayoutItemSpec,\n  // GridLayoutBreakpointKey,\n  GridLayoutPreset,\n  GridConfig,\n} from \"./types\";\nexport {\n  createDefaultGridLayout,\n  serializeGridLayout,\n  deserializeGridLayout,\n  DEFAULT_BREAKPOINTS,\n  DEFAULT_COLS,\n} from \"./utils/gridLayoutUtils\";\nexport {\n  createTradingGridLayout,\n  createTradingGridLayoutFromPreset,\n} from \"./utils/tradingGridLayout\";\nexport {\n  getDefaultGridPresets,\n  DEFAULT_GRID_PRESETS,\n} from \"./utils/defaultPresets\";\nexport type { GridPresetContextValue } from \"./GridPresetContext\";\nexport { GridLayoutSwitcher } from \"./GridLayoutSwitcher\";\nexport type { GridLayoutSwitcherProps } from \"./GridLayoutSwitcher\";\n\nexport {\n  registerLayoutGridPlugin,\n  type LayoutGridPluginOptions,\n} from \"./plugin\";\n","import React, { useMemo, useCallback, useEffect, useRef } from \"react\";\nimport {\n  GridLayout,\n  useContainerWidth,\n  useResponsiveLayout,\n  getCompactor,\n  type Layout,\n  type LayoutItem,\n  type CompactType,\n} from \"react-grid-layout\";\nimport type { LayoutRendererProps } from \"@kodiak-finance/orderly-layout-core\";\nimport { cn, Flex, Text } from \"@kodiak-finance/orderly-ui\";\nimport type { GridLayoutModel, GridLayoutItem, BreakpointKey } from \"./types\";\nimport { DEFAULT_BREAKPOINTS, DEFAULT_COLS } from \"./utils/gridLayoutUtils\";\n\ntype ResponsiveLayouts = Partial<Record<string, Layout>>;\n\n/** GridLayoutItem[] -> react-grid-layout Layout */\nfunction toReactGridLayouts(\n  layouts: GridLayoutModel[\"layouts\"],\n): ResponsiveLayouts {\n  const result: Record<string, LayoutItem[]> = {};\n\n  (Object.keys(layouts) as BreakpointKey[]).forEach((breakpoint) => {\n    const items = layouts[breakpoint];\n    if (items) {\n      result[breakpoint] = items.map((item) => ({\n        i: item.i,\n        x: item.x,\n        y: item.y,\n        w: item.w,\n        h: item.h,\n        minW: item.minW,\n        minH: item.minH,\n        maxW: item.maxW,\n        maxH: item.maxH,\n        static: item.static,\n        isDraggable: item.isDraggable,\n        isResizable: item.isResizable,\n        resizeHandles: item.resizeHandles,\n      }));\n    }\n  });\n\n  return result as ResponsiveLayouts;\n}\n\n/** Responsive grid layout renderer (react-grid-layout). */\nexport function GridRenderer(\n  props: LayoutRendererProps<GridLayoutModel>,\n): React.ReactElement {\n  const { layout, panels, onLayoutChange, className, style } = props;\n  const { width, containerRef, mounted } = useContainerWidth();\n\n  const layoutsRef = useRef(layout.layouts);\n\n  useEffect(() => {\n    layoutsRef.current = layout.layouts;\n  }, [layout.layouts]);\n\n  const reactGridLayouts = useMemo(\n    () => toReactGridLayouts(layout.layouts),\n    [layout.layouts],\n  );\n\n  const handleLayoutChange = useCallback(\n    (_currentLayout: Layout, allLayouts: ResponsiveLayouts) => {\n      const updatedLayouts: GridLayoutModel[\"layouts\"] = {};\n      (Object.keys(allLayouts) as BreakpointKey[]).forEach((bp) => {\n        const items = allLayouts[bp];\n        if (items) {\n          const originalItems = layout.layouts[bp] || [];\n          updatedLayouts[bp] = items.map((item: LayoutItem) => {\n            const originalItem = originalItems.find((i) => i.i === item.i);\n            return {\n              ...item,\n              panelId: originalItem?.panelId || item.i,\n              className: originalItem?.className,\n              style: originalItem?.style,\n            } as GridLayoutItem;\n          });\n        }\n      });\n      layoutsRef.current = updatedLayouts;\n      onLayoutChange({ ...layout, layouts: updatedLayouts });\n    },\n    [layout, onLayoutChange],\n  );\n\n  const { layout: currentLayout, cols } = useResponsiveLayout({\n    width,\n    breakpoints: layout.breakpoints || DEFAULT_BREAKPOINTS,\n    cols: layout.cols || DEFAULT_COLS,\n    layouts: reactGridLayouts,\n    onLayoutChange: handleLayoutChange,\n  });\n\n  // const handleGridLayoutChange = useCallback(\n  //   (newLayout: Layout) => setLayoutForBreakpoint(breakpoint, newLayout),\n  //   [breakpoint, setLayoutForBreakpoint],\n  // );\n\n  // const handlePersistLayout = useCallback(\n  //   (_: Layout) => {\n  //     if (onLayoutPersist) {\n  //       onLayoutPersist({ ...layout, layouts: layoutsRef.current });\n  //     }\n  //   },\n  //   [layout, onLayoutPersist],\n  // );\n\n  const layoutItems = useMemo(() => {\n    const breakpoints: BreakpointKey[] = [\"lg\", \"md\", \"sm\", \"xs\", \"xxs\"];\n    for (const bp of breakpoints) {\n      const items = layout.layouts[bp];\n      if (items?.length) return items;\n    }\n    return [];\n  }, [layout.layouts]);\n\n  const children = useMemo(\n    () =>\n      layoutItems.map((config) => {\n        const panelId = config.panelId;\n        const panelWrapper = panels.get(panelId);\n        const panel = panelWrapper?.node;\n        if (!panel) {\n          console.warn(`Panel ${panelId} not found in registry`);\n          return null;\n        }\n\n        /** Resolve title from panel registration props (if any). */\n        const title = panelWrapper?.props?.title as\n          | string\n          | React.ReactNode\n          | undefined;\n\n        /** Determine whether this item should participate in collapse logic. */\n        const isCollapsible = config.collapsible === true;\n\n        /**\n         * Derive collapsed state from current layout width.\n         *\n         * - For collapsible items, `w` is the expanded width and `minW` is the\n         *   collapsed width.\n         * - When the user drags the item so that its current width is at or\n         *   below `minW`, we treat it as collapsed.\n         */\n        const layoutItem = currentLayout?.find(\n          (item) => item.i === config.i,\n        ) as LayoutItem | undefined;\n\n        let collapsed = false;\n        // console.log(\">>>>>>>>>layoutItem\", layoutItem);\n        if (\n          isCollapsible &&\n          layoutItem &&\n          typeof config.minW === \"number\" &&\n          Number.isFinite(config.minW)\n        ) {\n          collapsed = layoutItem.w <= config.minW;\n        }\n\n        /** Body height adjusts when a title header is present. */\n        const bodyClassName =\n          typeof title !== \"undefined\" && title !== null\n            ? \"oui-h-[calc(100%_-_44px)]\"\n            : \"oui-h-full\";\n\n        return (\n          <div\n            key={panelId}\n            className={cn(\n              \"oui-layout-grid-item oui-relative oui-size-full oui-overflow-hidden oui-rounded oui-bg-base-9\",\n              config.className,\n            )}\n            style={config.style}\n          >\n            {title && (\n              <Flex\n                className=\"oui-text-base-contrast-36\"\n                justify=\"between\"\n                width=\"100%\"\n                px={3}\n                pt={3}\n                pb={2}\n              >\n                <Text size=\"base\" intensity={80}>\n                  {title}\n                </Text>\n              </Flex>\n            )}\n\n            <div className={cn(\"oui-collapsible-content\", bodyClassName)}>\n              {React.isValidElement(panel)\n                ? React.cloneElement(panel, {\n                    /** Pass collapsed state down so panel can adjust its own UI. */\n                    collapsed,\n                  })\n                : panel}\n            </div>\n          </div>\n        );\n      }),\n    [currentLayout, layoutItems, panels],\n  );\n\n  if (panels.size === 0) {\n    return (\n      <div\n        ref={containerRef as React.RefObject<HTMLDivElement>}\n        className={className}\n        style={style}\n      ></div>\n    );\n  }\n\n  if (!mounted) {\n    return (\n      <div\n        ref={containerRef as React.RefObject<HTMLDivElement>}\n        className={className}\n        style={style}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={containerRef as React.RefObject<HTMLDivElement>}\n      className={cn(\"oui-grid-layout-container oui-p-1\", className)}\n      style={style}\n    >\n      <GridLayout\n        width={width}\n        layout={currentLayout}\n        gridConfig={{\n          cols: cols,\n          rowHeight: layout.rowHeight ?? 30,\n          margin: layout.margin || [4, 4],\n          containerPadding: layout.containerPadding || [0, 0],\n        }}\n        compactor={getCompactor(\n          layout.compactType as CompactType,\n          false,\n          layout.compactType === null,\n        )}\n        dragConfig={{\n          enabled: layout.isDraggable !== false,\n        }}\n        resizeConfig={{\n          enabled: layout.isResizable !== false,\n        }}\n        // onLayoutChange={handleGridLayoutChange}\n        // onDragStop={handlePersistLayout}\n        // onResizeStop={handlePersistLayout}\n      >\n        {children}\n      </GridLayout>\n    </div>\n  );\n}\n","import { TRADING_PANEL_IDS } from \"@kodiak-finance/orderly-layout-core\";\nimport type {\n  GridLayoutItemSpec,\n  GridLayoutPreset,\n  GridLayoutRule,\n} from \"../types\";\n\nconst S = TRADING_PANEL_IDS;\n\nconst regularLayoutRule: GridLayoutItemSpec[] = [\n  {\n    panelId: S.SYMBOL_INFO_BAR,\n    x: 0,\n    y: 0,\n    w: 19,\n    h: 4,\n    minW: 8,\n    minH: 2,\n    static: true,\n    isResizable: false,\n    className: \"oui-px-3\",\n  },\n  {\n    panelId: S.MARKETS,\n    x: 0,\n    y: 4,\n    w: 5,\n    h: 38,\n    minW: 1,\n  },\n  {\n    panelId: S.TRADING_VIEW,\n    x: 5,\n    y: 3,\n    w: 10,\n    h: 38,\n    minW: 4,\n    minH: 8,\n    resizeHandles: [\"se\"],\n  },\n  {\n    panelId: S.ORDERBOOK,\n    x: 15,\n    y: 3,\n    w: 4,\n    h: 38,\n    minW: 3,\n    minH: 4,\n    resizeHandles: [\"se\"],\n  },\n  {\n    panelId: S.MARGIN,\n    x: 19,\n    y: 0,\n    w: 5,\n    h: 4,\n    minW: 3,\n    minH: 2,\n    isResizable: false,\n    className: \"oui-p-3\",\n  },\n  {\n    panelId: S.ASSETS,\n    x: 19,\n    y: 15,\n    w: 5,\n    h: 20,\n    minW: 3,\n    minH: 24,\n    isResizable: false,\n    className: \"oui-p-3\",\n  },\n  {\n    panelId: S.ORDER_ENTRY,\n    x: 19,\n    y: 4,\n    w: 5,\n    h: 38,\n    minW: 3,\n    minH: 38,\n    className: \"oui-p-3\",\n    isResizable: false,\n    autoHeight: true,\n  },\n  {\n    panelId: S.DATA_LIST,\n    x: 0,\n    y: 39,\n    w: 19,\n    h: 20,\n    className: \"oui-p-2\",\n  },\n];\n\nconst exchangeStyleRule: GridLayoutRule = {\n  lg: regularLayoutRule,\n  md: regularLayoutRule,\n  sm: regularLayoutRule,\n  xs: regularLayoutRule,\n  // md: [\n  //   { panelId: S.SYMBOL_INFO_BAR, x: 0, y: 0, w: 10, h: 3, minW: 6, minH: 2 },\n  //   { panelId: S.TRADING_VIEW, x: 0, y: 3, w: 6, h: 14, minW: 4, minH: 8 },\n  //   { panelId: S.ORDERBOOK, x: 6, y: 3, w: 4, h: 5, minW: 3, minH: 3 },\n  //   {\n  //     panelId: S.ORDER_ENTRY,\n  //     x: 6,\n  //     y: 8,\n  //     w: 4,\n  //     h: 5,\n  //     minW: 3,\n  //     minH: 4,\n  //     autoHeight: true,\n  //   },\n  //   { panelId: S.DATA_LIST, x: 6, y: 13, w: 4, h: 4, minW: 3, minH: 3 },\n  //   { panelId: S.MARKETS, x: 0, y: 17, w: 10, h: 6, minW: 4, minH: 4 },\n  // ],\n};\n\n/** Default layout rule when none is provided; uses lg (and md) so all breakpoints fall back to lg. */\nexport const DEFAULT_GRID_LAYOUT_RULE: GridLayoutRule = exchangeStyleRule;\n\nexport const DEFAULT_GRID_PRESETS: GridLayoutPreset[] = [\n  {\n    id: \"exchange-style\",\n    name: \"Exchange Style\",\n    rule: exchangeStyleRule,\n    rowHeight: 10,\n  } as GridLayoutPreset,\n];\n\nexport function getDefaultGridPresets(): GridLayoutPreset[] {\n  return [...DEFAULT_GRID_PRESETS];\n}\n","import type {\n  GridLayoutModel,\n  GridLayoutItem,\n  GridLayoutRule,\n  GridLayoutItemSpec,\n  BreakpointKey,\n  GridConfig,\n} from \"../types\";\nimport { DEFAULT_GRID_LAYOUT_RULE } from \"./defaultPresets\";\n\nconst BREAKPOINT_ORDER: BreakpointKey[] = [\"lg\", \"md\", \"sm\", \"xs\"];\n\n/** Default grid configuration shared by layout utils and plugin config. */\nexport const DEFAULT_GRID_CONFIG: GridConfig = {\n  rowHeight: 30,\n  margin: [4, 4],\n  containerPadding: [0, 0],\n  compactType: \"vertical\",\n  isDraggable: true,\n  isResizable: true,\n};\n\n/** Merge user grid config with defaults and optional preset rowHeight. */\nexport function mergeGridConfig(\n  userConfig: GridConfig | undefined,\n  presetRowHeight?: number,\n): GridConfig {\n  return {\n    ...DEFAULT_GRID_CONFIG,\n    ...(presetRowHeight !== undefined && { rowHeight: presetRowHeight }),\n    ...userConfig,\n  };\n}\n\nexport const DEFAULT_BREAKPOINTS = {\n  lg: 1680,\n  md: 1440,\n  sm: 1280,\n  xs: 768,\n};\n\nexport const DEFAULT_COLS = {\n  lg: 24,\n  md: 24,\n  sm: 24,\n  xs: 24,\n};\n\nfunction specsToItems(\n  specs: GridLayoutItemSpec[],\n  panelIds: string[],\n): GridLayoutItem[] {\n  const idSet = new Set(panelIds);\n  return specs\n    .filter((spec) => idSet.has(spec.panelId))\n    .map((spec) => ({\n      i: spec.panelId,\n      panelId: spec.panelId,\n      x: spec.x,\n      y: spec.y,\n      w: spec.w,\n      h: spec.h,\n      minW: spec.minW,\n      minH: spec.minH,\n      maxW: spec.maxW,\n      maxH: spec.maxH,\n      isDraggable: spec.isDraggable,\n      isResizable: spec.isResizable,\n      resizeHandles: spec.resizeHandles,\n      static: spec.static,\n      className: spec.className,\n      style: spec.style,\n      autoHeight: spec.autoHeight,\n    }));\n}\n\nfunction buildLayoutsFromRule(\n  rule: GridLayoutRule,\n  panelIds: string[],\n): GridLayoutModel[\"layouts\"] {\n  const result: GridLayoutModel[\"layouts\"] = {};\n  const fallbackSpecs = rule.lg ?? [];\n  for (const bp of BREAKPOINT_ORDER) {\n    const specs = rule[bp] ?? fallbackSpecs;\n    result[bp] = specsToItems(specs, panelIds);\n  }\n  return result;\n}\n\n/** Build grid layout from panelIds; optional rule (missing breakpoints fall back to lg), else default lg rule from defaultPresets. */\nexport function createDefaultGridLayout(\n  panelIds: string[],\n  rule?: GridLayoutRule,\n  rowHeight?: number,\n): GridLayoutModel {\n  const effectiveRule = rule ?? DEFAULT_GRID_LAYOUT_RULE;\n  const layouts = buildLayoutsFromRule(effectiveRule, panelIds);\n\n  const effectiveConfig = mergeGridConfig(undefined, rowHeight);\n\n  return {\n    layouts,\n    breakpoints: DEFAULT_BREAKPOINTS,\n    cols: DEFAULT_COLS,\n    // For the default layout we always use vertical compaction.\n    compactType: \"vertical\",\n    isDraggable: effectiveConfig.isDraggable,\n    isResizable: effectiveConfig.isResizable,\n    margin: effectiveConfig.margin,\n    containerPadding: effectiveConfig.containerPadding,\n    rowHeight: effectiveConfig.rowHeight,\n  };\n}\n\nexport function serializeGridLayout(layout: GridLayoutModel): string {\n  return JSON.stringify(layout);\n}\n\nexport function deserializeGridLayout(json: string): GridLayoutModel {\n  try {\n    const parsed = JSON.parse(json);\n    if (!parsed.layouts) {\n      throw new Error(\"Invalid grid layout: missing layouts\");\n    }\n    return parsed as GridLayoutModel;\n  } catch (error) {\n    throw new Error(`Failed to deserialize grid layout: ${error}`);\n  }\n}\n","import type { LayoutStrategy } from \"@kodiak-finance/orderly-layout-core\";\nimport { GridRenderer } from \"./GridRenderer\";\nimport type { GridLayoutModel } from \"./types\";\nimport {\n  createDefaultGridLayout,\n  serializeGridLayout,\n  deserializeGridLayout,\n} from \"./utils/gridLayoutUtils\";\n\nexport const gridStrategy: LayoutStrategy<GridLayoutModel> = {\n  id: \"grid\",\n  displayName: \"Grid Layout\",\n  defaultLayout: createDefaultGridLayout,\n  serialize: serializeGridLayout,\n  deserialize: deserializeGridLayout,\n  Renderer: GridRenderer,\n};\n","import { getTradingPanelIds } from \"@kodiak-finance/orderly-layout-core\";\nimport type { GridLayoutModel, GridLayoutPreset } from \"../types\";\nimport { DEFAULT_GRID_PRESETS } from \"./defaultPresets\";\nimport { createDefaultGridLayout } from \"./gridLayoutUtils\";\n\nexport function createTradingGridLayoutFromPreset(\n  preset?: GridLayoutPreset | null,\n): GridLayoutModel {\n  const panelIds = getTradingPanelIds();\n  const p = preset ?? DEFAULT_GRID_PRESETS[0];\n  if (!p) throw new Error(\"Grid layout: no default presets\");\n  return createDefaultGridLayout(panelIds as string[], p.rule, p.rowHeight);\n}\n\nexport function createTradingGridLayout(): GridLayoutModel {\n  return createTradingGridLayoutFromPreset();\n}\n","/** Preset list + selected id (LayoutRuleManager); used by plugin for getInitialLayout/storageKey. */\nimport React, { createContext, useContext, useMemo } from \"react\";\nimport {\n  LayoutRuleManager,\n  useLayoutRuleManager,\n} from \"@kodiak-finance/orderly-layout-core\";\nimport {\n  GRID_PRESET_ID_STORAGE_KEY,\n  GRID_LAYOUT_STORAGE_KEY_PREFIX,\n} from \"./constants\";\nimport type { GridLayoutPreset } from \"./types\";\n\nexport interface GridPresetContextValue {\n  presets: GridLayoutPreset[];\n  selectedPresetId: string;\n  setSelectedPresetId: (id: string) => void;\n  layoutStorageKey: string;\n  reset: () => void;\n  rowHeight?: number;\n}\n\nconst GridPresetContext = createContext<GridPresetContextValue | null>(null);\n\nexport interface GridPresetProviderProps {\n  presets: GridLayoutPreset[];\n  persistLayout?: boolean;\n  children: React.ReactNode;\n}\n\nexport function GridPresetProvider({\n  presets,\n  persistLayout = true,\n  children,\n}: GridPresetProviderProps): React.ReactElement {\n  const manager = useMemo(\n    () =>\n      new LayoutRuleManager(presets, {\n        presetIdStorageKey: GRID_PRESET_ID_STORAGE_KEY,\n        layoutStorageKeyPrefix: GRID_LAYOUT_STORAGE_KEY_PREFIX,\n        persist: persistLayout,\n      }),\n    [presets, persistLayout],\n  );\n\n  const ruleState = useLayoutRuleManager(manager);\n\n  const value = useMemo<GridPresetContextValue>(() => {\n    const selectedPreset = (ruleState.presets as GridLayoutPreset[]).find(\n      (p) => p.id === ruleState.selectedPresetId,\n    );\n    return {\n      presets: ruleState.presets as GridLayoutPreset[],\n      selectedPresetId: ruleState.selectedPresetId,\n      setSelectedPresetId: ruleState.setSelectedPresetId,\n      layoutStorageKey: ruleState.layoutStorageKey,\n      reset: ruleState.reset,\n      rowHeight: selectedPreset?.rowHeight,\n    };\n  }, [\n    ruleState.presets,\n    ruleState.selectedPresetId,\n    ruleState.setSelectedPresetId,\n    ruleState.layoutStorageKey,\n    ruleState.reset,\n  ]);\n\n  return (\n    <GridPresetContext.Provider value={value}>\n      {children}\n    </GridPresetContext.Provider>\n  );\n}\n\nexport function useGridPresetContext(): GridPresetContextValue | null {\n  return useContext(GridPresetContext);\n}\n","/** Preset dropdown; use inside GridPresetProvider. */\nimport React from \"react\";\nimport { useGridPresetContext } from \"./GridPresetContext\";\n\nexport interface GridLayoutSwitcherProps {\n  className?: string;\n  style?: React.CSSProperties;\n  \"aria-label\"?: string;\n}\n\nexport function GridLayoutSwitcher({\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Grid layout preset\",\n}: GridLayoutSwitcherProps): React.ReactElement | null {\n  const ctx = useGridPresetContext();\n  if (!ctx || ctx.presets.length === 0) return null;\n\n  return (\n    <select\n      className={className}\n      style={style}\n      aria-label={ariaLabel}\n      value={ctx.selectedPresetId}\n      onChange={(e) => ctx.setSelectedPresetId(e.target.value)}\n    >\n      {ctx.presets.map((p) => (\n        <option key={p.id} value={p.id}>\n          {p.name}\n        </option>\n      ))}\n    </select>\n  );\n}\n","/// <reference types=\"@kodiak-finance/orderly-trading-next\" />\nimport React from \"react\";\nimport type { OrderlySDK } from \"@kodiak-finance/orderly-ui\";\nimport { createInterceptor } from \"@kodiak-finance/orderly-ui\";\nimport { GridDesktopInjector } from \"./components/GridDesktopInjector\";\nimport type { LayoutGridPluginOptions } from \"./types\";\nimport { getDefaultGridPresets } from \"./utils/defaultPresets\";\n\nconst PLUGIN_ID = \"orderly-layout-grid\";\nconst PLUGIN_NAME = \"Grid Layout\";\nconst PLUGIN_VERSION = \"1.0.0\";\n\nexport type { LayoutGridPluginOptions } from \"./types\";\n\n/** Registers the grid layout plugin (Trading.Layout.Desktop interceptor). */\nexport function registerLayoutGridPlugin(\n  options?: LayoutGridPluginOptions,\n): (SDK: OrderlySDK) => void {\n  const resolvedPresets = options?.presets ?? getDefaultGridPresets();\n\n  return (SDK: OrderlySDK) => {\n    SDK.registerPlugin({\n      id: PLUGIN_ID,\n      name: PLUGIN_NAME,\n      version: PLUGIN_VERSION,\n      orderlyVersion: \">=1.0.0\",\n      interceptors: [\n        createInterceptor(\"Trading.Layout.Desktop\", (Original, props) => (\n          <GridDesktopInjector\n            Original={\n              Original as unknown as React.ComponentType<\n                Record<string, unknown>\n              >\n            }\n            props={props as unknown as Record<string, unknown>}\n            options={{\n              ...options,\n              presets: resolvedPresets,\n            }}\n          />\n        )),\n      ],\n    });\n  };\n}\n","import React from \"react\";\nimport type { LayoutStrategy } from \"@kodiak-finance/orderly-layout-core\";\nimport type { DesktopLayoutInitialOptions } from \"@kodiak-finance/orderly-trading-next\";\nimport { gridStrategy } from \"../gridStrategy\";\nimport type { GridLayoutModel, LayoutGridPluginOptions } from \"../types\";\nimport { getDefaultGridPresets } from \"../utils/defaultPresets\";\nimport { mergeGridConfig } from \"../utils/gridLayoutUtils\";\nimport { createDefaultGetInitialLayout } from \"../utils/gridPluginConfig\";\n\nexport interface GridDesktopInjectorProps {\n  Original: React.ComponentType<Record<string, unknown>>;\n  props: Record<string, unknown>;\n  options: LayoutGridPluginOptions;\n}\n\nexport function GridDesktopInjector({\n  Original,\n  props,\n  options,\n}: GridDesktopInjectorProps): React.ReactElement {\n  const presets = options.presets ?? getDefaultGridPresets();\n  const presetRowHeight = presets[0]?.rowHeight;\n  const gridConfig = mergeGridConfig(options.grid, presetRowHeight);\n\n  const { persistLayout = false } = options;\n\n  const getInitialLayout = React.useCallback(() => {\n    const baseLayout =\n      options.getInitialLayout?.() ?? createDefaultGetInitialLayout(presets)();\n    return {\n      ...baseLayout,\n      rowHeight: gridConfig.rowHeight,\n      margin: gridConfig.margin,\n      containerPadding: gridConfig.containerPadding,\n      compactType: gridConfig.compactType,\n      isDraggable: gridConfig.isDraggable,\n      isResizable: gridConfig.isResizable,\n    };\n  }, [\n    options.getInitialLayout,\n    presets,\n    gridConfig.rowHeight,\n    gridConfig.margin,\n    gridConfig.containerPadding,\n    gridConfig.compactType,\n    gridConfig.isDraggable,\n    gridConfig.isResizable,\n  ]);\n\n  const storageKey = persistLayout ? \"orderly_trading_grid\" : undefined;\n\n  return (\n    <Original\n      {...props}\n      layoutStrategy={gridStrategy as unknown as LayoutStrategy}\n      getInitialLayout={\n        (props.getInitialLayout as\n          | ((opts: DesktopLayoutInitialOptions) => GridLayoutModel | undefined)\n          | undefined) ??\n        ((_opts: DesktopLayoutInitialOptions) => getInitialLayout())\n      }\n      storageKey={storageKey}\n      disableLayoutPersistence={!persistLayout}\n    />\n  );\n}\n","import type { GridLayoutModel, GridLayoutPreset } from \"../types\";\nimport { createTradingGridLayoutFromPreset } from \"./tradingGridLayout\";\n\nexport function createDefaultGetInitialLayout(\n  presets: GridLayoutPreset[],\n): () => GridLayoutModel {\n  return () => {\n    const preset = presets[0];\n    return createTradingGridLayoutFromPreset(preset);\n  };\n}\n"]}