react-panel-layout 0.5.2 → 0.6.0

package/src/config/panelJsx.spec.tsx

@@ -0,0 +1,54 @@
+/**
+ * @file Unit tests for JSX-based panel declarations
+ */
+import * as React from "react";
+import { buildRoutesFromChildren, Panel } from "./PanelContentDeclaration";
+import { buildLayersFromRoutes } from "./panelRouter";
+
+// layout config is not required for this unit test; routes are converted independently
+
+describe("panelJsx", () => {
+  it("collects grid and floating routes", () => {
+    const tree = (
+      <>
+        <Panel type="grid" id="toolbar" area="toolbar"><div>TB</div></Panel>
+        <Panel type="grid" id="sidebar" area="sidebar"><div>SB</div></Panel>
+        <Panel type="grid" id="canvas" area="canvas"><div>CV</div></Panel>
+        <Panel type="floating" id="preview" position={{ left: 10, top: 20 }} width={200} height={100} draggable>
+          <div>PV</div>
+        </Panel>
+      </>
+    );
+
+    const routes = buildRoutesFromChildren(tree);
+    expect(routes).toHaveLength(4);
+    const layers = buildLayersFromRoutes(routes);
+    expect(layers).toHaveLength(4);
+    expect(layers.find((l) => l.id === "toolbar")?.gridArea).toBe("toolbar");
+    expect(layers.find((l) => l.id === "preview")?.floating?.draggable).toBe(true);
+  });
+
+  it("throws on missing area for grid", () => {
+    const tree = (
+      <>
+        {/* @ts-expect-error intentional missing area */}
+        <Panel type="grid" id="x">x</Panel>
+      </>
+    );
+    expect(() => buildRoutesFromChildren(tree)).toThrow(/requires an explicit 'area'/i);
+  });
+
+  it("throws when floating missing size/position", () => {
+    const noSize = (
+      // @ts-expect-error intentionally missing width/height
+      <Panel type="floating" id="f" position={{ left: 0, top: 0 }}>x</Panel>
+    );
+    expect(() => buildRoutesFromChildren(noSize)).toThrow(/requires 'width' and 'height'/i);
+
+    const noPos = (
+      // @ts-expect-error intentionally missing position
+      <Panel type="floating" id="f" width={100} height={100}>x</Panel>
+    );
+    expect(() => buildRoutesFromChildren(noPos)).toThrow(/requires a 'position'/i);
+  });
+});

package/src/config/panelJsxConfig.spec.tsx

@@ -0,0 +1,54 @@
+/**
+ * @file Unit tests for JSX config builder
+ */
+import * as React from "react";
+import { Areas, Col, Config, Row, Rows, Columns, buildConfigFromChildren } from "./PanelContentDeclaration";
+
+describe("panelJsx config", () => {
+  it("builds config from JSX children", () => {
+    const tree = (
+      <Config gap="0">
+        <Rows>
+          <Row size="60px" />
+          <Row size="1fr" />
+          <Row size="30px" />
+        </Rows>
+        <Columns>
+          <Col size="250px" resizable minSize={200} maxSize={400} />
+          <Col size="1fr" />
+          <Col size="300px" resizable minSize={250} maxSize={500} />
+        </Columns>
+        <Areas
+          matrix={[
+            ["toolbar", "toolbar", "toolbar"],
+            ["sidebar", "canvas", "inspector"],
+            ["statusbar", "statusbar", "statusbar"],
+          ]}
+        />
+      </Config>
+    );
+
+    const cfg = buildConfigFromChildren(tree);
+    expect(cfg).toBeTruthy();
+    expect(cfg?.rows.length).toBe(3);
+    expect(cfg?.columns.length).toBe(3);
+    expect(cfg?.areas[0][0]).toBe("toolbar");
+  });
+
+  it("throws when areas/rows/cols counts mismatch", () => {
+    const bad = (
+      <Config>
+        <Rows>
+          <Row size="60px" />
+          <Row size="1fr" />
+        </Rows>
+        <Columns>
+          <Col size="1fr" />
+        </Columns>
+        <Areas matrix={[["a", "b"], ["c", "d"], ["e", "f"]]} />
+      </Config>
+    );
+
+    expect(() => buildConfigFromChildren(bad)).toThrow(/row count/i);
+  });
+});

package/src/config/panelJsxDrawer.spec.tsx

@@ -0,0 +1,33 @@
+/**
+ * @file Unit tests for JSX Panel type="drawer"
+ */
+import * as React from "react";
+import { buildRoutesFromChildren, Panel } from "./PanelContentDeclaration";
+import { buildLayersFromRoutes } from "./panelRouter";
+
+describe("panelJsx drawer", () => {
+  it("collects drawer panels with config and options", () => {
+    const tree = (
+      <>
+        <Panel
+          type="drawer"
+          id="nav"
+          drawer={{ defaultOpen: true, dismissible: true, header: { title: "Nav" } }}
+          position={{ left: 0 }}
+          width={280}
+          backdropStyle={{ backgroundColor: "rgba(0,0,0,0.2)" }}
+        >
+          <div>drawer</div>
+        </Panel>
+      </>
+    );
+
+    const routes = buildRoutesFromChildren(tree);
+    const layers = buildLayersFromRoutes(routes);
+    const layer = layers[0];
+    expect(layer.drawer?.header?.title).toBe("Nav");
+    expect(layer.width).toBe(280);
+    expect(layer.position?.left).toBe(0);
+    expect(layer.backdropStyle).toBeTruthy();
+  });
+});

package/src/config/panelRouter.spec.ts

@@ -0,0 +1,68 @@
+/**
+ * @file Unit tests for router-like builder
+ */
+import * as React from "react";
+import type { PanelLayoutConfig } from "../types";
+import { buildLayersFromRoutes, createPanelLayoutFromRoutes, type PanelRoute } from "./panelRouter";
+
+const baseConfig: PanelLayoutConfig = {
+  areas: [
+    ["toolbar", "toolbar"],
+    ["main", "side"],
+  ],
+  rows: [{ size: "40px" }, { size: "1fr" }],
+  columns: [{ size: "1fr" }, { size: "300px" }],
+  gap: "0",
+};
+
+describe("panelRouter", () => {
+  it("builds a single grid layer from routes", () => {
+    const routes: PanelRoute[] = [
+      { id: "toolbar", area: "toolbar", element: React.createElement("div", null, "TB") },
+    ];
+    const layers = buildLayersFromRoutes(routes);
+    expect(layers).toHaveLength(1);
+    expect(layers[0].id).toBe("toolbar");
+    expect(layers[0].gridArea).toBe("toolbar");
+    expect(layers[0].component).toBeDefined();
+  });
+
+  it("flattens nested routes", () => {
+    const routes: PanelRoute[] = [
+      {
+        id: "main",
+        area: "main",
+        element: React.createElement("div", null, "Main"),
+        children: [
+          { id: "side", area: "side", element: React.createElement("div", null, "Side") },
+        ],
+      },
+    ];
+    const layers = buildLayersFromRoutes(routes);
+    expect(layers.map((l) => l.id)).toEqual(["main", "side"]);
+  });
+
+  it("throws if grid route is missing area", () => {
+    const routes: PanelRoute[] = [{ id: "x", element: React.createElement("div") }];
+    expect(() => buildLayersFromRoutes(routes)).toThrow(/must specify 'area'/i);
+  });
+
+  it("throws on duplicate ids", () => {
+    const routes: PanelRoute[] = [
+      { id: "dup", area: "main", element: React.createElement("div") },
+      { id: "dup", area: "side", element: React.createElement("div") },
+    ];
+    expect(() => buildLayersFromRoutes(routes)).toThrow(/duplicate panelroute id/i);
+  });
+
+  it("builds out a full PanelLayoutProps from routes", () => {
+    const routes: PanelRoute[] = [
+      { id: "toolbar", area: "toolbar", element: React.createElement("div") },
+      { id: "main", area: "main", element: React.createElement("div") },
+      { id: "side", area: "side", element: React.createElement("div") },
+    ];
+    const props = createPanelLayoutFromRoutes({ config: baseConfig, routes });
+    expect(props.config).toBe(baseConfig);
+    expect(props.layers).toHaveLength(3);
+  });
+});

package/src/config/panelRouter.tsx

@@ -0,0 +1,155 @@
+/**
+ * @file Router-like builder for GridLayout
+ *
+ * Provides a React Router–style configuration API to declare panel layers.
+ * Converts route objects to the existing GridLayout props without magic.
+ */
+import * as React from "react";
+import type {
+  DrawerBehavior,
+  FloatingBehavior,
+  LayerDefinition,
+  LayerPositionMode,
+  PanelLayoutConfig,
+  PanelLayoutProps,
+  PivotBehavior,
+  WindowPosition,
+} from "../types";
+import { GridLayout } from "../components/grid/GridLayout";
+
+export type PanelRoute = {
+  /** Unique id for the layer. Required. */
+  id: string;
+  /** React node to render for this layer. Required. */
+  element: React.ReactNode;
+  /** Visibility flag. Defaults to visible. */
+  visible?: boolean;
+
+  /**
+   * Grid placement key. When using `positionMode: 'grid'` (default), this must be provided.
+   * Using `area` mirrors React Router's route path intent but for grid cells.
+   */
+  area?: string;
+
+  /** Explicit positioning mode; defaults to 'grid' unless floating/drawer implies otherwise. */
+  positionMode?: LayerPositionMode;
+  /** Offsets when using non-grid modes. */
+  position?: WindowPosition;
+  /** Optional stacking order. */
+  zIndex?: number;
+  /** Optional dimensions; required for resizable/draggable floating layers. */
+  width?: number | string;
+  height?: number | string;
+  /** Pointer events control. */
+  pointerEvents?: boolean | "auto" | "none";
+  /** Optional style overrides. */
+  style?: React.CSSProperties;
+  /** Optional backdrop style (drawer). */
+  backdropStyle?: React.CSSProperties;
+
+  /** Drawer behavior for mobile-friendly panels. */
+  drawer?: DrawerBehavior;
+  /** Floating window configuration. */
+  floating?: FloatingBehavior;
+  /** Pivot behavior for content switching. */
+  pivot?: PivotBehavior;
+
+  /**
+   * Optional child declarations; purely a grouping convenience.
+   * Children are flattened; no implicit inheritance.
+   */
+  children?: PanelRoute[];
+};
+
+const toLayer = (route: PanelRoute): LayerDefinition => {
+  const inferredMode: LayerPositionMode = resolveRoutePositionMode(route);
+
+  if (inferredMode === "grid") {
+    if (!route.area) {
+      throw new Error(`PanelRoute ${route.id} must specify 'area' for grid placement.`);
+    }
+  }
+
+  return {
+    id: route.id,
+    component: route.element,
+    visible: route.visible,
+    gridArea: route.area,
+    positionMode: inferredMode,
+    position: route.position,
+    zIndex: route.zIndex,
+    width: route.width,
+    height: route.height,
+    pointerEvents: route.pointerEvents,
+    style: route.style,
+    drawer: route.drawer,
+    floating: route.floating,
+    pivot: route.pivot,
+    backdropStyle: route.backdropStyle,
+  } satisfies LayerDefinition;
+};
+
+const resolveRoutePositionMode = (route: PanelRoute): LayerPositionMode => {
+  if (route.positionMode) {
+    return route.positionMode;
+  }
+  if (route.floating) {
+    // Embedded => absolute, Popup => relative (handled by renderer); keep explicitness here.
+    return "absolute";
+  }
+  if (route.drawer) {
+    return "grid";
+  }
+  return "grid";
+};
+
+const flattenRoutes = (routes: PanelRoute[]): PanelRoute[] => {
+  const result: PanelRoute[] = [];
+  const walk = (node: PanelRoute): void => {
+    result.push(node);
+    if (node.children) {
+      node.children.forEach((child) => walk(child));
+    }
+  };
+  routes.forEach((r) => walk(r));
+  return result;
+};
+
+const validateUniqueIds = (routes: PanelRoute[]): void => {
+  const seen = new Set<string>();
+  routes.forEach((r) => {
+    if (seen.has(r.id)) {
+      throw new Error(`Duplicate PanelRoute id detected: ${r.id}`);
+    }
+    seen.add(r.id);
+  });
+};
+
+export const buildLayersFromRoutes = (routes: PanelRoute[]): LayerDefinition[] => {
+  const flat = flattenRoutes(routes);
+  validateUniqueIds(flat);
+  return flat.map((r) => toLayer(r));
+};
+
+export const createPanelLayoutFromRoutes = (input: {
+  config: PanelLayoutConfig;
+  routes: PanelRoute[];
+  style?: React.CSSProperties;
+}): PanelLayoutProps => {
+  const layers = buildLayersFromRoutes(input.routes);
+  return {
+    config: input.config,
+    layers,
+  };
+};
+
+export type PanelLayoutRouterProps = {
+  config: PanelLayoutConfig;
+  routes: PanelRoute[];
+  style?: React.CSSProperties;
+};
+
+export const PanelLayoutRouter: React.FC<PanelLayoutRouterProps> = ({ config, routes, style }) => {
+  const layers = React.useMemo(() => buildLayersFromRoutes(routes), [routes]);
+  return <GridLayout config={config} layers={layers} style={style} />;
+};

package/src/constants/styles.ts

@@ -0,0 +1,261 @@
+/**
+ * @file Style constants for library components
+ *
+ * All style values are defined here with CSS variable fallbacks.
+ * Users can override these via CSS variables (--rpl-*).
+ *
+ * All CSS variables use the unified prefix: --rpl- (react-panel-layout)
+ *
+ * @example
+ * // In your CSS:
+ * :root {
+ *   --rpl-color-primary: #ff0000;
+ * }
+ */
+
+// ========================================
+// CSS VARIABLE PREFIX
+// ========================================
+
+/**
+ * Unified CSS variable prefix for all react-panel-layout variables
+ * All theme variables use this prefix: --rpl-*
+ */
+export const CSS_VAR_PREFIX = "rpl";
+
+// ========================================
+// COLORS
+// ========================================
+
+/**
+ * Tab colors - used in TabBar component
+ */
+export const COLOR_TAB_FG = "var(--rpl-color-tab-fg, #d5d7de)";
+export const COLOR_TAB_ACTIVE_BG = "var(--rpl-color-tab-active-bg, #2b2d35)";
+export const COLOR_TABBAR_BG = "var(--rpl-color-tabbar-bg, #1e1f24)";
+
+/**
+ * Panel colors - used in panel layouts
+ */
+export const COLOR_PANEL_BORDER = "var(--rpl-color-panel-border, rgba(0, 0, 0, 0.3))";
+export const COLOR_PANEL_BG = "var(--rpl-color-panel-bg, #0b0b0c)";
+
+/**
+ * Primary color - used for resize handles, highlights
+ */
+export const COLOR_PRIMARY = "var(--rpl-color-primary, #2196f3)";
+export const COLOR_RESIZE_HANDLE_IDLE = "var(--rpl-color-resize-handle-idle, rgba(255, 255, 255, 0.0))";
+export const COLOR_RESIZE_HANDLE_HOVER = "var(--rpl-color-resize-handle-hover, rgba(33, 150, 243, 0.35))";
+export const COLOR_RESIZE_HANDLE_ACTIVE = "var(--rpl-color-resize-handle-active, rgba(33, 150, 243, 0.55))";
+
+/**
+ * Drop suggestion overlay colors
+ */
+export const COLOR_DROP_SUGGEST_BORDER = "var(--rpl-color-drop-suggest-border, rgba(90, 150, 255, 0.9))";
+export const COLOR_DROP_SUGGEST_BG = "var(--rpl-color-drop-suggest-bg, rgba(90, 150, 255, 0.15))";
+
+/**
+ * Tab drag overlay colors
+ */
+export const COLOR_TABDRAG_BG = "var(--rpl-color-tabdrag-bg, rgba(34, 36, 42, 0.95))";
+export const COLOR_TABDRAG_FG = "var(--rpl-color-tabdrag-fg, #e9ebf0)";
+export const COLOR_TABDRAG_BORDER = "var(--rpl-color-tabdrag-border, rgba(120, 160, 255, 0.6))";
+export const COLOR_TABDRAG_SHADOW = "var(--rpl-color-tabdrag-shadow, 0 6px 20px rgba(0, 0, 0, 0.35))";
+
+/**
+ * Insert guide colors
+ */
+export const COLOR_INSERT_GUIDE = "var(--rpl-color-insert-guide, rgba(120, 160, 255, 0.95))";
+export const COLOR_INSERT_GUIDE_SHADOW = "var(--rpl-color-insert-guide-shadow, 0 0 0 2px rgba(120, 160, 255, 0.2))";
+
+/**
+ * Node editor / floating panel colors
+ * These are used by Drawer and FloatingPanelFrame components
+ */
+export const COLOR_NODE_EDITOR_SURFACE = "var(--rpl-color-surface, #fff)";
+export const COLOR_NODE_EDITOR_SURFACE_2 = "var(--rpl-color-surface-2, #fafafa)";
+export const COLOR_NODE_EDITOR_BORDER = "var(--rpl-color-border, #e5e7eb)";
+export const COLOR_NODE_EDITOR_MUTED_FG = "var(--rpl-color-muted-fg, #6b7280)";
+export const COLOR_NODE_EDITOR_CARD_SHADOW = "var(--rpl-shadow-card, 0 2px 10px rgba(0, 0, 0, 0.08))";
+export const COLOR_DRAWER_BACKDROP = "var(--rpl-color-drawer-backdrop, rgba(0, 0, 0, 0.5))";
+
+/**
+ * Drawer transitions
+ */
+export const DRAWER_TRANSITION_DURATION = "var(--rpl-drawer-transition-duration, 220ms)";
+export const DRAWER_TRANSITION_EASING = "var(--rpl-drawer-transition-easing, cubic-bezier(0.22, 1, 0.36, 1))";
+
+/**
+ * Pivot animations
+ * User defines @keyframes in their CSS and references via these tokens.
+ * - Enter: Applied when content becomes active
+ * - Leave: Applied when content becomes inactive
+ */
+export const PIVOT_ANIMATION_ENTER = "var(--rpl-pivot-animation-enter, none)";
+export const PIVOT_ANIMATION_LEAVE = "var(--rpl-pivot-animation-leave, none)";
+
+/**
+ * Pivot swipe animations
+ * Used by SwipePivotContent for snap-back animation after swipe ends.
+ */
+export const PIVOT_SWIPE_SNAP_DURATION = "var(--rpl-pivot-swipe-snap-duration, 300ms)";
+export const PIVOT_SWIPE_SNAP_EASING = "var(--rpl-pivot-swipe-snap-easing, cubic-bezier(0.22, 1, 0.36, 1))";
+
+/**
+ * Stack animations
+ * User defines @keyframes in their CSS and references via these tokens.
+ * - Push: Applied when a new panel is pushed onto the stack
+ * - Pop: Applied when a panel is popped from the stack
+ */
+export const STACK_ANIMATION_PUSH = "var(--rpl-stack-animation-push, none)";
+export const STACK_ANIMATION_POP = "var(--rpl-stack-animation-pop, none)";
+export const STACK_TRANSITION_DURATION = "var(--rpl-stack-transition-duration, 350ms)";
+export const STACK_TRANSITION_EASING = "var(--rpl-stack-transition-easing, cubic-bezier(0.32, 0.72, 0, 1))";
+
+// ========================================
+// SIZING & SPACING
+// ========================================
+
+/**
+ * Tab sizing
+ */
+export const SIZE_TAB_FONT = "var(--rpl-size-tab-font, 12px)";
+export const SPACE_TAB_PADDING_Y = "var(--rpl-space-tab-padding-y, 4px)";
+export const SPACE_TAB_PADDING_X = "var(--rpl-space-tab-padding-x, 8px)";
+
+/**
+ * Tabbar spacing
+ */
+export const SPACE_TABBAR_GAP = "var(--rpl-space-tabbar-gap, 6px)";
+export const SPACE_TABBAR_PADDING_Y = "var(--rpl-space-tabbar-padding-y, 4px)";
+export const SPACE_TABBAR_PADDING_X = "var(--rpl-space-tabbar-padding-x, 6px)";
+
+/**
+ * Border radius (decorative, using CSS variables)
+ */
+export const RADIUS_TAB = "var(--rpl-radius-tab, 4px)";
+export const RADIUS_SUGGEST = "var(--rpl-radius-suggest, 6px)";
+
+/**
+ * Border widths
+ */
+export const SIZE_SUGGEST_BORDER = "var(--rpl-size-suggest-border, 2px)";
+
+/**
+ * Handle thicknesses
+ * Note: SIZE_GRID_HANDLE_THICKNESS is kept as number for JavaScript calculations
+ */
+export const SIZE_GRID_HANDLE_THICKNESS = 4; // Used in GridTrackResizeHandle.tsx for offset calculation
+export const SIZE_RESIZE_HANDLE_THICKNESS = "var(--rpl-size-resize-handle-thickness, 4px)";
+export const SIZE_SPLIT_HANDLE_THICKNESS = "var(--rpl-size-split-handle-thickness, 6px)";
+
+/**
+ * Drop suggest padding
+ */
+export const SPACE_DROP_SUGGEST_PADDING = "var(--rpl-space-drop-suggest-padding, 6px)";
+
+// ========================================
+// Z-INDEXES
+// ========================================
+
+export const Z_OVERLAY = "var(--rpl-z-overlay, 9998)";
+export const Z_TABDRAG_OVERLAY = "var(--rpl-z-tabdrag-overlay, 9999)";
+export const Z_DIALOG_OVERLAY = "var(--rpl-z-dialog-overlay, 10000)";
+
+// ========================================
+// COMPONENT-SPECIFIC CONSTANTS
+// ========================================
+
+/**
+ * Resize Handle
+ */
+export const RESIZE_HANDLE_THICKNESS = SIZE_RESIZE_HANDLE_THICKNESS;
+export const RESIZE_HANDLE_Z_INDEX = "var(--rpl-z-resize-handle, 1000)";
+
+/**
+ * Grid Track Resize Handle
+ */
+export const GRID_HANDLE_THICKNESS = SIZE_GRID_HANDLE_THICKNESS;
+
+/**
+ * Grid Layer Resize Handles
+ */
+export const GRID_LAYER_CORNER_HIT_SIZE = "var(--rpl-size-grid-layer-corner-hit, 14px)";
+export const GRID_LAYER_EDGE_HIT_THICKNESS = "var(--rpl-size-grid-layer-edge-hit-thickness, 12px)";
+
+/**
+ * Drop Suggest Overlay
+ */
+export const DROP_SUGGEST_Z_INDEX = Z_OVERLAY;
+export const DROP_SUGGEST_BORDER_WIDTH = SIZE_SUGGEST_BORDER;
+export const DROP_SUGGEST_BORDER_RADIUS = RADIUS_SUGGEST;
+export const DROP_SUGGEST_BORDER_COLOR = COLOR_DROP_SUGGEST_BORDER;
+export const DROP_SUGGEST_BG_COLOR = COLOR_DROP_SUGGEST_BG;
+export const DROP_SUGGEST_PADDING = SPACE_DROP_SUGGEST_PADDING;
+export const DROP_SUGGEST_PADDING_PX = 6;
+
+/**
+ * Tab Drag Overlay
+ */
+export const TAB_DRAG_OVERLAY_Z_INDEX = Z_TABDRAG_OVERLAY;
+export const TAB_DRAG_PREVIEW_OFFSET_X = "var(--rpl-space-tab-drag-preview-offset-x, 12px)";
+export const TAB_DRAG_PREVIEW_OFFSET_Y = "var(--rpl-space-tab-drag-preview-offset-y, 12px)";
+export const TAB_DRAG_PREVIEW_BORDER_RADIUS = "var(--rpl-radius-tab-drag-preview, 6px)";
+export const TAB_DRAG_PREVIEW_PADDING_Y = "var(--rpl-space-tab-drag-preview-padding-y, 4px)";
+export const TAB_DRAG_PREVIEW_PADDING_X = "var(--rpl-space-tab-drag-preview-padding-x, 8px)";
+export const TAB_DRAG_PREVIEW_FONT_SIZE = "var(--rpl-size-tab-drag-preview-font, 12px)";
+export const TAB_DRAG_INSERT_GUIDE_WIDTH = "var(--rpl-size-tab-drag-insert-guide-width, 2px)";
+export const TAB_DRAG_INSERT_GUIDE_BORDER_RADIUS = "var(--rpl-radius-tab-drag-insert-guide, 1px)";
+export const TAB_DRAG_PREVIEW_BG_COLOR = COLOR_TABDRAG_BG;
+export const TAB_DRAG_PREVIEW_FG_COLOR = COLOR_TABDRAG_FG;
+export const TAB_DRAG_PREVIEW_BORDER_COLOR = COLOR_TABDRAG_BORDER;
+export const TAB_DRAG_PREVIEW_SHADOW = COLOR_TABDRAG_SHADOW;
+export const TAB_DRAG_INSERT_GUIDE_COLOR = COLOR_INSERT_GUIDE;
+export const TAB_DRAG_INSERT_GUIDE_SHADOW = COLOR_INSERT_GUIDE_SHADOW;
+
+/**
+ * Dialog Overlay
+ */
+export const DIALOG_OVERLAY_Z_INDEX = Z_DIALOG_OVERLAY;
+
+/**
+ * Floating Panel Frame
+ */
+export const FLOATING_PANEL_BORDER_RADIUS = "var(--rpl-radius-floating-panel, 8px)";
+export const FLOATING_PANEL_GAP = "var(--rpl-space-floating-panel-gap, 8px)";
+export const FLOATING_PANEL_HEADER_PADDING_Y = "var(--rpl-space-floating-panel-header-padding-y, 8px)";
+export const FLOATING_PANEL_HEADER_PADDING_X = "var(--rpl-space-floating-panel-header-padding-x, 12px)";
+export const FLOATING_PANEL_CONTENT_PADDING = "var(--rpl-space-floating-panel-content-padding, 12px)";
+export const FLOATING_PANEL_META_FONT_SIZE = "var(--rpl-size-floating-panel-meta-font, 12px)";
+export const FLOATING_PANEL_CONTROLS_GAP = "var(--rpl-space-floating-panel-controls-gap, 6px)";
+export const FLOATING_PANEL_CLOSE_BUTTON_FONT_SIZE = "var(--rpl-size-floating-panel-close-button-font, 1.25rem)";
+export const FLOATING_PANEL_CLOSE_BUTTON_PADDING =
+  "var(--rpl-space-floating-panel-close-button-padding, 0.25rem 0.5rem)";
+export const FLOATING_PANEL_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;
+export const FLOATING_PANEL_SURFACE_2_COLOR = COLOR_NODE_EDITOR_SURFACE_2;
+export const FLOATING_PANEL_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;
+export const FLOATING_PANEL_MUTED_FG_COLOR = COLOR_NODE_EDITOR_MUTED_FG;
+export const FLOATING_PANEL_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;
+
+/**
+ * Drawer
+ */
+export const DRAWER_HEADER_PADDING_Y = "var(--rpl-space-drawer-header-padding-y, 10px)";
+export const DRAWER_HEADER_PADDING_X = "var(--rpl-space-drawer-header-padding-x, 12px)";
+export const DRAWER_HEADER_GAP = "var(--rpl-space-drawer-header-gap, 8px)";
+export const DRAWER_CONTENT_PADDING = "var(--rpl-space-drawer-content-padding, 12px)";
+export const DRAWER_CLOSE_BUTTON_FONT_SIZE = "var(--rpl-size-drawer-close-button-font, 18px)";
+export const DRAWER_SURFACE_COLOR = COLOR_NODE_EDITOR_SURFACE;
+export const DRAWER_BORDER_COLOR = COLOR_NODE_EDITOR_BORDER;
+export const DRAWER_SHADOW = COLOR_NODE_EDITOR_CARD_SHADOW;
+
+/**
+ * Split Handles
+ */
+export const SPLIT_HANDLE_THICKNESS = SIZE_SPLIT_HANDLE_THICKNESS;
+
+/**
+ * HorizontalDivider
+ */
+export const HORIZONTAL_DIVIDER_WIDTH = "var(--rpl-size-horizontal-divider-width, 4px)";
+export const HORIZONTAL_DIVIDER_HIT_AREA_OFFSET = "var(--rpl-space-horizontal-divider-hit-area-offset, 4px)";