@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/layout/Workspace.model.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+export type WorkspacePaneLocation = "left" | "center" | "right" | "bottom";
+export type WorkspaceSideLocation = "left" | "right";
+export type WorkspacePaneSlots = {
+    headerLeading?: ReactNode;
+    headerTrailing?: ReactNode;
+};
+export type WorkspacePaneSpec = {
+    id: string;
+    label: ReactNode;
+    icon?: ReactNode;
+    location: WorkspacePaneLocation;
+    content: ReactNode;
+    slots?: WorkspacePaneSlots;
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    collapsible?: boolean;
+    resizable?: boolean;
+    defaultCollapsed?: boolean;
+    className?: string;
+    contentClassName?: string;
+};
+export type WorkspaceLayoutState = {
+    leftWidth: number;
+    rightWidth: number;
+    bottomHeight: number;
+    stackHeights: Record<string, number>;
+    collapsed: Record<string, boolean>;
+    sideCollapsed: Record<WorkspaceSideLocation, boolean>;
+};
+export type WorkspaceLayoutDefaults = Partial<WorkspaceLayoutState>;
+export declare const WORKSPACE_DEFAULT_SIDE_WIDTH = 320;
+export declare const WORKSPACE_DEFAULT_BOTTOM_HEIGHT = 240;
+export declare const WORKSPACE_COLLAPSED_RAIL_WIDTH = 40;
+export declare function validateWorkspacePanes(panes: WorkspacePaneSpec[]): void;
+export declare function createWorkspaceLayoutState(panes: WorkspacePaneSpec[], defaults?: WorkspaceLayoutDefaults): WorkspaceLayoutState;
+export declare function readWorkspaceLayoutState(storageKey: string, panes: WorkspacePaneSpec[], defaults: WorkspaceLayoutDefaults): WorkspaceLayoutState;
+export declare function writeWorkspaceLayoutState(storageKey: string, state: WorkspaceLayoutState): void;
+//# sourceMappingURL=Workspace.model.d.ts.map

package/dist/layout/Workspace.model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workspace.model.d.ts","sourceRoot":"","sources":["../../src/layout/Workspace.model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC3E,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,qBAAqB,CAAC;IAChC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,aAAa,EAAE,MAAM,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAEpE,eAAO,MAAM,4BAA4B,MAAM,CAAC;AAChD,eAAO,MAAM,+BAA+B,MAAM,CAAC;AACnD,eAAO,MAAM,8BAA8B,KAAK,CAAC;AAIjD,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,iBAAiB,EAAE,QAmBhE;AAoDD,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,iBAAiB,EAAE,EAC1B,QAAQ,GAAE,uBAA4B,GACrC,oBAAoB,CA8BtB;AAED,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,iBAAiB,EAAE,EAC1B,QAAQ,EAAE,uBAAuB,GAChC,oBAAoB,CAwBtB;AAED,wBAAgB,yBAAyB,CACvC,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,oBAAoB,QAO5B"}

package/dist/layout/Workspace.model.js

@@ -0,0 +1,142 @@
+const WORKSPACE_DEFAULT_SIDE_WIDTH = 320;
+const WORKSPACE_DEFAULT_BOTTOM_HEIGHT = 240;
+const WORKSPACE_COLLAPSED_RAIL_WIDTH = 40;
+const STORAGE_VERSION = 2;
+function validateWorkspacePanes(panes) {
+  const ids = /* @__PURE__ */ new Set();
+  for (const pane of panes) {
+    if (!pane.id.trim())
+      throw new Error("Workspace pane ids must not be empty");
+    if (ids.has(pane.id))
+      throw new Error(`Workspace pane id ${pane.id} is duplicated`);
+    ids.add(pane.id);
+    validatePaneDimensions(pane);
+  }
+  if (panes.filter((pane) => pane.location === "center").length !== 1) {
+    throw new Error("Workspace requires exactly one center pane");
+  }
+  if (panes.filter((pane) => pane.location === "bottom").length > 1) {
+    throw new Error("Workspace allows at most one bottom pane");
+  }
+  validateSharedSideWidth(panes, "left");
+  validateSharedSideWidth(panes, "right");
+}
+function validatePaneDimensions(pane) {
+  const values = [
+    pane.width,
+    pane.height,
+    pane.minWidth,
+    pane.maxWidth,
+    pane.minHeight,
+    pane.maxHeight
+  ];
+  if (values.some(
+    (value) => value !== void 0 && (!Number.isFinite(value) || value <= 0)
+  )) {
+    throw new Error(
+      `Workspace pane ${pane.id} dimensions must be positive finite numbers`
+    );
+  }
+  if (pane.minWidth !== void 0 && pane.maxWidth !== void 0 && pane.minWidth > pane.maxWidth) {
+    throw new Error(`Workspace pane ${pane.id} minWidth exceeds maxWidth`);
+  }
+  if (pane.minHeight !== void 0 && pane.maxHeight !== void 0 && pane.minHeight > pane.maxHeight) {
+    throw new Error(`Workspace pane ${pane.id} minHeight exceeds maxHeight`);
+  }
+}
+function validateSharedSideWidth(panes, location) {
+  const widths = new Set(
+    panes.filter((pane) => pane.location === location && pane.width !== void 0).map((pane) => pane.width)
+  );
+  if (widths.size > 1) {
+    throw new Error(
+      `Workspace panes stacked on the ${location} share one width`
+    );
+  }
+}
+function createWorkspaceLayoutState(panes, defaults = {}) {
+  const left = panes.find((pane) => pane.location === "left");
+  const right = panes.find((pane) => pane.location === "right");
+  const bottom = panes.find((pane) => pane.location === "bottom");
+  const stackHeights = Object.fromEntries(
+    panes.filter(
+      (pane) => (pane.location === "left" || pane.location === "right") && pane.height !== void 0
+    ).map((pane) => [pane.id, pane.height])
+  );
+  const collapsed = Object.fromEntries(
+    panes.map((pane) => [pane.id, pane.defaultCollapsed ?? false])
+  );
+  return {
+    leftWidth: defaults.leftWidth ?? (left == null ? void 0 : left.width) ?? WORKSPACE_DEFAULT_SIDE_WIDTH,
+    rightWidth: defaults.rightWidth ?? (right == null ? void 0 : right.width) ?? WORKSPACE_DEFAULT_SIDE_WIDTH,
+    bottomHeight: defaults.bottomHeight ?? (bottom == null ? void 0 : bottom.height) ?? WORKSPACE_DEFAULT_BOTTOM_HEIGHT,
+    stackHeights: { ...stackHeights, ...defaults.stackHeights },
+    collapsed: { ...collapsed, ...defaults.collapsed },
+    sideCollapsed: { left: false, right: false, ...defaults.sideCollapsed }
+  };
+}
+function readWorkspaceLayoutState(storageKey, panes, defaults) {
+  const fallback = createWorkspaceLayoutState(panes, defaults);
+  if (typeof window === "undefined") return fallback;
+  const saved = window.localStorage.getItem(storageKey);
+  if (!saved) return fallback;
+  try {
+    const parsed = JSON.parse(saved);
+    if (!isStoredWorkspaceState(parsed))
+      throw new Error("unsupported workspace layout state");
+    const paneIds = new Set(panes.map((pane) => pane.id));
+    return createWorkspaceLayoutState(panes, {
+      leftWidth: parsed.state.leftWidth,
+      rightWidth: parsed.state.rightWidth,
+      bottomHeight: parsed.state.bottomHeight,
+      stackHeights: filterPaneRecord(parsed.state.stackHeights, paneIds),
+      collapsed: filterPaneRecord(parsed.state.collapsed, paneIds),
+      sideCollapsed: parsed.state.sideCollapsed
+    });
+  } catch (error) {
+    console.warn(`Resetting invalid Workspace state for ${storageKey}`, error);
+    window.localStorage.removeItem(storageKey);
+    return fallback;
+  }
+}
+function writeWorkspaceLayoutState(storageKey, state) {
+  if (typeof window === "undefined") return;
+  window.localStorage.setItem(
+    storageKey,
+    JSON.stringify({ version: STORAGE_VERSION, state })
+  );
+}
+function filterPaneRecord(record, paneIds) {
+  return Object.fromEntries(
+    Object.entries(record).filter(([id]) => paneIds.has(id))
+  );
+}
+function isStoredWorkspaceState(value) {
+  if (!value || typeof value !== "object") return false;
+  const stored = value;
+  const state = stored.state;
+  return stored.version === STORAGE_VERSION && Boolean(state) && isPositiveNumber(state == null ? void 0 : state.leftWidth) && isPositiveNumber(state == null ? void 0 : state.rightWidth) && isPositiveNumber(state == null ? void 0 : state.bottomHeight) && isRecord(state == null ? void 0 : state.stackHeights, "number") && isRecord(state == null ? void 0 : state.collapsed, "boolean") && isSideCollapsed(state == null ? void 0 : state.sideCollapsed);
+}
+function isSideCollapsed(value) {
+  if (!value || typeof value !== "object") return false;
+  const sides = value;
+  return typeof sides.left === "boolean" && typeof sides.right === "boolean";
+}
+function isPositiveNumber(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+function isRecord(value, valueType) {
+  return Boolean(value) && typeof value === "object" && Object.values(value).every(
+    (entry) => typeof entry === valueType
+  );
+}
+export {
+  WORKSPACE_COLLAPSED_RAIL_WIDTH,
+  WORKSPACE_DEFAULT_BOTTOM_HEIGHT,
+  WORKSPACE_DEFAULT_SIDE_WIDTH,
+  createWorkspaceLayoutState,
+  readWorkspaceLayoutState,
+  validateWorkspacePanes,
+  writeWorkspaceLayoutState
+};
+//# sourceMappingURL=Workspace.model.js.map

package/dist/layout/Workspace.model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workspace.model.js","sources":["../../src/layout/Workspace.model.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport type WorkspacePaneLocation = \"left\" | \"center\" | \"right\" | \"bottom\";\nexport type WorkspaceSideLocation = \"left\" | \"right\";\n\nexport type WorkspacePaneSlots = {\n  headerLeading?: ReactNode;\n  headerTrailing?: ReactNode;\n};\n\nexport type WorkspacePaneSpec = {\n  id: string;\n  label: ReactNode;\n  icon?: ReactNode;\n  location: WorkspacePaneLocation;\n  content: ReactNode;\n  slots?: WorkspacePaneSlots;\n  width?: number;\n  height?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  minHeight?: number;\n  maxHeight?: number;\n  collapsible?: boolean;\n  resizable?: boolean;\n  defaultCollapsed?: boolean;\n  className?: string;\n  contentClassName?: string;\n};\n\nexport type WorkspaceLayoutState = {\n  leftWidth: number;\n  rightWidth: number;\n  bottomHeight: number;\n  stackHeights: Record<string, number>;\n  collapsed: Record<string, boolean>;\n  sideCollapsed: Record<WorkspaceSideLocation, boolean>;\n};\n\nexport type WorkspaceLayoutDefaults = Partial<WorkspaceLayoutState>;\n\nexport const WORKSPACE_DEFAULT_SIDE_WIDTH = 320;\nexport const WORKSPACE_DEFAULT_BOTTOM_HEIGHT = 240;\nexport const WORKSPACE_COLLAPSED_RAIL_WIDTH = 40;\n\nconst STORAGE_VERSION = 2;\n\nexport function validateWorkspacePanes(panes: WorkspacePaneSpec[]) {\n  const ids = new Set<string>();\n  for (const pane of panes) {\n    if (!pane.id.trim())\n      throw new Error(\"Workspace pane ids must not be empty\");\n    if (ids.has(pane.id))\n      throw new Error(`Workspace pane id ${pane.id} is duplicated`);\n    ids.add(pane.id);\n    validatePaneDimensions(pane);\n  }\n\n  if (panes.filter((pane) => pane.location === \"center\").length !== 1) {\n    throw new Error(\"Workspace requires exactly one center pane\");\n  }\n  if (panes.filter((pane) => pane.location === \"bottom\").length > 1) {\n    throw new Error(\"Workspace allows at most one bottom pane\");\n  }\n  validateSharedSideWidth(panes, \"left\");\n  validateSharedSideWidth(panes, \"right\");\n}\n\nfunction validatePaneDimensions(pane: WorkspacePaneSpec) {\n  const values = [\n    pane.width,\n    pane.height,\n    pane.minWidth,\n    pane.maxWidth,\n    pane.minHeight,\n    pane.maxHeight,\n  ];\n  if (\n    values.some(\n      (value) => value !== undefined && (!Number.isFinite(value) || value <= 0),\n    )\n  ) {\n    throw new Error(\n      `Workspace pane ${pane.id} dimensions must be positive finite numbers`,\n    );\n  }\n  if (\n    pane.minWidth !== undefined &&\n    pane.maxWidth !== undefined &&\n    pane.minWidth > pane.maxWidth\n  ) {\n    throw new Error(`Workspace pane ${pane.id} minWidth exceeds maxWidth`);\n  }\n  if (\n    pane.minHeight !== undefined &&\n    pane.maxHeight !== undefined &&\n    pane.minHeight > pane.maxHeight\n  ) {\n    throw new Error(`Workspace pane ${pane.id} minHeight exceeds maxHeight`);\n  }\n}\n\nfunction validateSharedSideWidth(\n  panes: WorkspacePaneSpec[],\n  location: \"left\" | \"right\",\n) {\n  const widths = new Set(\n    panes\n      .filter((pane) => pane.location === location && pane.width !== undefined)\n      .map((pane) => pane.width),\n  );\n  if (widths.size > 1) {\n    throw new Error(\n      `Workspace panes stacked on the ${location} share one width`,\n    );\n  }\n}\n\nexport function createWorkspaceLayoutState(\n  panes: WorkspacePaneSpec[],\n  defaults: WorkspaceLayoutDefaults = {},\n): WorkspaceLayoutState {\n  const left = panes.find((pane) => pane.location === \"left\");\n  const right = panes.find((pane) => pane.location === \"right\");\n  const bottom = panes.find((pane) => pane.location === \"bottom\");\n  const stackHeights = Object.fromEntries(\n    panes\n      .filter(\n        (pane) =>\n          (pane.location === \"left\" || pane.location === \"right\") &&\n          pane.height !== undefined,\n      )\n      .map((pane) => [pane.id, pane.height as number]),\n  );\n  const collapsed = Object.fromEntries(\n    panes.map((pane) => [pane.id, pane.defaultCollapsed ?? false]),\n  );\n\n  return {\n    leftWidth:\n      defaults.leftWidth ?? left?.width ?? WORKSPACE_DEFAULT_SIDE_WIDTH,\n    rightWidth:\n      defaults.rightWidth ?? right?.width ?? WORKSPACE_DEFAULT_SIDE_WIDTH,\n    bottomHeight:\n      defaults.bottomHeight ??\n      bottom?.height ??\n      WORKSPACE_DEFAULT_BOTTOM_HEIGHT,\n    stackHeights: { ...stackHeights, ...defaults.stackHeights },\n    collapsed: { ...collapsed, ...defaults.collapsed },\n    sideCollapsed: { left: false, right: false, ...defaults.sideCollapsed },\n  };\n}\n\nexport function readWorkspaceLayoutState(\n  storageKey: string,\n  panes: WorkspacePaneSpec[],\n  defaults: WorkspaceLayoutDefaults,\n): WorkspaceLayoutState {\n  const fallback = createWorkspaceLayoutState(panes, defaults);\n  if (typeof window === \"undefined\") return fallback;\n  const saved = window.localStorage.getItem(storageKey);\n  if (!saved) return fallback;\n\n  try {\n    const parsed = JSON.parse(saved) as unknown;\n    if (!isStoredWorkspaceState(parsed))\n      throw new Error(\"unsupported workspace layout state\");\n    const paneIds = new Set(panes.map((pane) => pane.id));\n    return createWorkspaceLayoutState(panes, {\n      leftWidth: parsed.state.leftWidth,\n      rightWidth: parsed.state.rightWidth,\n      bottomHeight: parsed.state.bottomHeight,\n      stackHeights: filterPaneRecord(parsed.state.stackHeights, paneIds),\n      collapsed: filterPaneRecord(parsed.state.collapsed, paneIds),\n      sideCollapsed: parsed.state.sideCollapsed,\n    });\n  } catch (error) {\n    console.warn(`Resetting invalid Workspace state for ${storageKey}`, error);\n    window.localStorage.removeItem(storageKey);\n    return fallback;\n  }\n}\n\nexport function writeWorkspaceLayoutState(\n  storageKey: string,\n  state: WorkspaceLayoutState,\n) {\n  if (typeof window === \"undefined\") return;\n  window.localStorage.setItem(\n    storageKey,\n    JSON.stringify({ version: STORAGE_VERSION, state }),\n  );\n}\n\nfunction filterPaneRecord<T>(\n  record: Record<string, T>,\n  paneIds: Set<string>,\n): Record<string, T> {\n  return Object.fromEntries(\n    Object.entries(record).filter(([id]) => paneIds.has(id)),\n  );\n}\n\nfunction isStoredWorkspaceState(\n  value: unknown,\n): value is { version: 2; state: WorkspaceLayoutState } {\n  if (!value || typeof value !== \"object\") return false;\n  const stored = value as {\n    version?: unknown;\n    state?: Partial<WorkspaceLayoutState>;\n  };\n  const state = stored.state;\n  return (\n    stored.version === STORAGE_VERSION &&\n    Boolean(state) &&\n    isPositiveNumber(state?.leftWidth) &&\n    isPositiveNumber(state?.rightWidth) &&\n    isPositiveNumber(state?.bottomHeight) &&\n    isRecord(state?.stackHeights, \"number\") &&\n    isRecord(state?.collapsed, \"boolean\") &&\n    isSideCollapsed(state?.sideCollapsed)\n  );\n}\n\nfunction isSideCollapsed(\n  value: unknown,\n): value is WorkspaceLayoutState[\"sideCollapsed\"] {\n  if (!value || typeof value !== \"object\") return false;\n  const sides = value as Partial<WorkspaceLayoutState[\"sideCollapsed\"]>;\n  return typeof sides.left === \"boolean\" && typeof sides.right === \"boolean\";\n}\n\nfunction isPositiveNumber(value: unknown): value is number {\n  return typeof value === \"number\" && Number.isFinite(value) && value > 0;\n}\n\nfunction isRecord(\n  value: unknown,\n  valueType: \"number\" | \"boolean\",\n): value is Record<string, never> {\n  return (\n    Boolean(value) &&\n    typeof value === \"object\" &&\n    Object.values(value as Record<string, unknown>).every(\n      (entry) => typeof entry === valueType,\n    )\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/layout/Workspace.regions.cjs

@@ -0,0 +1,305 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Workspace_model = require("./Workspace.model.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function WorkspaceResizeHandle(props) {
+  const {
+    orientation,
+    value,
+    min,
+    max,
+    pointerFactor,
+    label,
+    testId,
+    className,
+    onChange
+  } = props;
+  const onPointerDown = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      const start = orientation === "vertical" ? event.clientX : event.clientY;
+      const initial = value;
+      const onMove = (moveEvent) => {
+        const current = orientation === "vertical" ? moveEvent.clientX : moveEvent.clientY;
+        onChange(clamp(initial + (current - start) * pointerFactor, min, max));
+      };
+      const onUp = () => {
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+      document.body.style.cursor = orientation === "vertical" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+    },
+    [max, min, onChange, orientation, pointerFactor, value]
+  );
+  const onKeyDown = (event) => {
+    const step = event.shiftKey ? 48 : 16;
+    const lowerKey = orientation === "vertical" ? "ArrowLeft" : "ArrowUp";
+    const upperKey = orientation === "vertical" ? "ArrowRight" : "ArrowDown";
+    if (event.key === "Home") onChange(min);
+    else if (event.key === "End") onChange(max);
+    else if (event.key === lowerKey)
+      onChange(clamp(value - step * pointerFactor, min, max));
+    else if (event.key === upperKey)
+      onChange(clamp(value + step * pointerFactor, min, max));
+    else return;
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "separator",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-orientation": orientation,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": Math.round(value),
+      "data-testid": testId,
+      className: utils.cn(
+        "absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none md:block",
+        orientation === "vertical" ? "top-0 h-full w-1 cursor-col-resize" : "left-0 h-1 w-full cursor-row-resize",
+        className
+      ),
+      onPointerDown,
+      onKeyDown
+    }
+  );
+}
+function WorkspacePaneView({
+  pane,
+  collapsed,
+  compact,
+  onToggle
+}) {
+  var _a, _b;
+  const headerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    pane.collapsible !== false && (collapsed ? /* @__PURE__ */ jsxRuntime.jsx(UiChevronRight.UiChevronRight, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(UiChevronDown.UiChevronDown, { className: "size-3.5 shrink-0" })),
+    (_a = pane.slots) == null ? void 0 : _a.headerLeading,
+    pane.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: pane.icon }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils.cn(
+          "min-w-0 flex-1 truncate text-xs font-semibold",
+          compact && "[writing-mode:vertical-rl]"
+        ),
+        children: pane.label
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "data-testid": `workspace-pane-${pane.id}`,
+      className: utils.cn(
+        "flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
+        collapsed ? "shrink-0" : "flex-1",
+        pane.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "header",
+          {
+            className: utils.cn(
+              "flex h-9 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-2",
+              compact && "h-auto min-h-12 flex-col px-1 py-2"
+            ),
+            children: [
+              pane.collapsible === false ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: headerContent }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: utils.cn(
+                    "flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                    compact && "flex-col"
+                  ),
+                  "aria-expanded": !collapsed,
+                  "aria-label": `${collapsed ? "Expand" : "Collapse"} ${typeof pane.label === "string" ? pane.label : pane.id}`,
+                  onClick: onToggle,
+                  children: headerContent
+                }
+              ),
+              !compact && ((_b = pane.slots) == null ? void 0 : _b.headerTrailing) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: pane.slots.headerTrailing })
+            ]
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(
+              "min-h-0 min-w-0 flex-1 overflow-auto",
+              pane.contentClassName
+            ),
+            children: pane.content
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkspaceSideRegion({
+  location,
+  panes,
+  state,
+  update
+}) {
+  if (panes.length === 0) return null;
+  const sideCollapsed = state.sideCollapsed[location];
+  const allCollapsed = panes.every((pane) => state.collapsed[pane.id]);
+  const width = sideCollapsed ? 0 : allCollapsed ? Workspace_model.WORKSPACE_COLLAPSED_RAIL_WIDTH : location === "left" ? state.leftWidth : state.rightWidth;
+  const min = Math.max(...panes.map((pane) => pane.minWidth ?? 160));
+  const max = Math.min(...panes.map((pane) => pane.maxWidth ?? 720));
+  const canResize = !sideCollapsed && !allCollapsed && panes.some((pane) => pane.resizable !== false);
+  const style = { "--workspace-region-width": `${width}px` };
+  const openCount = panes.filter(
+    (pane) => !(state.collapsed[pane.id] ?? false)
+  ).length;
+  const stackPointerFactor = openCount > 1 ? openCount / (openCount - 1) : 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      "data-testid": `workspace-region-${location}`,
+      "aria-hidden": sideCollapsed,
+      style,
+      className: utils.cn(
+        "relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border md:row-span-2 md:h-full md:w-[var(--workspace-region-width)]",
+        location === "left" ? "md:order-none md:col-start-1 md:row-start-1 md:border-r" : "order-3 md:order-none md:col-start-3 md:row-start-1 md:border-l",
+        sideCollapsed && "hidden border-0 md:flex"
+      ),
+      children: [
+        !sideCollapsed && panes.map((pane, index) => {
+          const collapsed = state.collapsed[pane.id] ?? false;
+          const nextPane = panes[index + 1];
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-testid": `workspace-stack-${pane.id}`,
+              className: utils.cn(
+                "relative flex min-h-0 flex-col",
+                collapsed ? "shrink-0" : "flex-1"
+              ),
+              style: !collapsed && state.stackHeights[pane.id] !== void 0 ? { flexBasis: `${state.stackHeights[pane.id]}px` } : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  WorkspacePaneView,
+                  {
+                    pane,
+                    collapsed,
+                    compact: allCollapsed,
+                    onToggle: () => update((current) => ({
+                      ...current,
+                      collapsed: { ...current.collapsed, [pane.id]: !collapsed }
+                    }))
+                  }
+                ),
+                !collapsed && nextPane && pane.resizable !== false && nextPane.resizable !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                  WorkspaceResizeHandle,
+                  {
+                    orientation: "horizontal",
+                    value: state.stackHeights[pane.id] ?? 0,
+                    min: pane.minHeight ?? 72,
+                    max: pane.maxHeight ?? 640,
+                    pointerFactor: stackPointerFactor,
+                    label: `Resize ${typeof pane.label === "string" ? pane.label : pane.id}`,
+                    testId: `workspace-resize-stack-${pane.id}`,
+                    className: "bottom-0",
+                    onChange: (height) => update((current) => ({
+                      ...current,
+                      stackHeights: {
+                        ...current.stackHeights,
+                        [pane.id]: height
+                      }
+                    }))
+                  }
+                )
+              ]
+            },
+            pane.id
+          );
+        }),
+        canResize && /* @__PURE__ */ jsxRuntime.jsx(
+          WorkspaceResizeHandle,
+          {
+            orientation: "vertical",
+            value: width,
+            min,
+            max,
+            pointerFactor: location === "left" ? 1 : -1,
+            label: `Resize ${location} workspace panes`,
+            testId: `workspace-resize-${location}`,
+            className: location === "left" ? "right-0" : "left-0",
+            onChange: (nextWidth) => update((current) => ({
+              ...current,
+              [location === "left" ? "leftWidth" : "rightWidth"]: nextWidth
+            }))
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkspaceSingleRegion({
+  pane,
+  state,
+  update
+}) {
+  const collapsed = state.collapsed[pane.id] ?? false;
+  const isBottom = pane.location === "bottom";
+  const style = isBottom && !collapsed ? {
+    "--workspace-bottom-height": `${state.bottomHeight}px`
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": `workspace-region-${pane.location}`,
+      style,
+      className: utils.cn(
+        "relative flex min-h-0 min-w-0 flex-col overflow-hidden",
+        isBottom ? "order-4 w-full border-t border-border md:order-none md:col-start-2 md:row-start-2 md:h-[var(--workspace-bottom-height)]" : "order-1 min-h-80 md:order-none md:col-start-2 md:row-start-1 md:min-h-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          WorkspacePaneView,
+          {
+            pane,
+            collapsed,
+            compact: false,
+            onToggle: () => update((current) => ({
+              ...current,
+              collapsed: { ...current.collapsed, [pane.id]: !collapsed }
+            }))
+          }
+        ),
+        isBottom && !collapsed && pane.resizable !== false && /* @__PURE__ */ jsxRuntime.jsx(
+          WorkspaceResizeHandle,
+          {
+            orientation: "horizontal",
+            value: state.bottomHeight,
+            min: pane.minHeight ?? 96,
+            max: pane.maxHeight ?? 640,
+            pointerFactor: -1,
+            label: `Resize ${typeof pane.label === "string" ? pane.label : pane.id}`,
+            testId: "workspace-resize-bottom",
+            className: "top-0",
+            onChange: (bottomHeight) => update((current) => ({ ...current, bottomHeight }))
+          }
+        )
+      ]
+    }
+  );
+}
+exports.WorkspaceSideRegion = WorkspaceSideRegion;
+exports.WorkspaceSingleRegion = WorkspaceSingleRegion;
+//# sourceMappingURL=Workspace.regions.cjs.map

package/dist/layout/Workspace.regions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workspace.regions.cjs","sources":["../../src/layout/Workspace.regions.tsx"],"sourcesContent":["import {\n  useCallback,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport {\n  WORKSPACE_COLLAPSED_RAIL_WIDTH,\n  type WorkspaceLayoutState,\n  type WorkspacePaneSpec,\n} from \"./Workspace.model\";\n\nexport type WorkspaceUpdate = (\n  change: (current: WorkspaceLayoutState) => WorkspaceLayoutState,\n) => void;\n\ntype ResizeHandleProps = {\n  orientation: \"horizontal\" | \"vertical\";\n  value: number;\n  min: number;\n  max: number;\n  pointerFactor: number;\n  label: string;\n  testId: string;\n  className?: string;\n  onChange: (value: number) => void;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.max(min, Math.min(max, value));\n}\n\nfunction WorkspaceResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation,\n    value,\n    min,\n    max,\n    pointerFactor,\n    label,\n    testId,\n    className,\n    onChange,\n  } = props;\n  const onPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const start = orientation === \"vertical\" ? event.clientX : event.clientY;\n      const initial = value;\n      const onMove = (moveEvent: PointerEvent) => {\n        const current =\n          orientation === \"vertical\" ? moveEvent.clientX : moveEvent.clientY;\n        onChange(clamp(initial + (current - start) * pointerFactor, min, max));\n      };\n      const onUp = () => {\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n      document.body.style.cursor =\n        orientation === \"vertical\" ? \"col-resize\" : \"row-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [max, min, onChange, orientation, pointerFactor, value],\n  );\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 48 : 16;\n    const lowerKey = orientation === \"vertical\" ? \"ArrowLeft\" : \"ArrowUp\";\n    const upperKey = orientation === \"vertical\" ? \"ArrowRight\" : \"ArrowDown\";\n    if (event.key === \"Home\") onChange(min);\n    else if (event.key === \"End\") onChange(max);\n    else if (event.key === lowerKey)\n      onChange(clamp(value - step * pointerFactor, min, max));\n    else if (event.key === upperKey)\n      onChange(clamp(value + step * pointerFactor, min, max));\n    else return;\n    event.preventDefault();\n  };\n\n  return (\n    <div\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={label}\n      aria-orientation={orientation}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-valuenow={Math.round(value)}\n      data-testid={testId}\n      className={cn(\n        \"absolute z-20 hidden bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none md:block\",\n        orientation === \"vertical\"\n          ? \"top-0 h-full w-1 cursor-col-resize\"\n          : \"left-0 h-1 w-full cursor-row-resize\",\n        className,\n      )}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n\ntype PaneViewProps = {\n  pane: WorkspacePaneSpec;\n  collapsed: boolean;\n  compact: boolean;\n  onToggle: () => void;\n};\n\nfunction WorkspacePaneView({\n  pane,\n  collapsed,\n  compact,\n  onToggle,\n}: PaneViewProps) {\n  const headerContent = (\n    <>\n      {pane.collapsible !== false &&\n        (collapsed ? (\n          <UiChevronRight className=\"size-3.5 shrink-0\" />\n        ) : (\n          <UiChevronDown className=\"size-3.5 shrink-0\" />\n        ))}\n      {pane.slots?.headerLeading}\n      {pane.icon && (\n        <span className=\"flex size-4 shrink-0 items-center justify-center\">\n          {pane.icon}\n        </span>\n      )}\n      <span\n        className={cn(\n          \"min-w-0 flex-1 truncate text-xs font-semibold\",\n          compact && \"[writing-mode:vertical-rl]\",\n        )}\n      >\n        {pane.label}\n      </span>\n    </>\n  );\n\n  return (\n    <section\n      data-testid={`workspace-pane-${pane.id}`}\n      className={cn(\n        \"flex min-h-0 min-w-0 flex-col overflow-hidden bg-background\",\n        collapsed ? \"shrink-0\" : \"flex-1\",\n        pane.className,\n      )}\n    >\n      <header\n        className={cn(\n          \"flex h-9 shrink-0 items-center gap-1 border-b border-border bg-muted/40 px-2\",\n          compact && \"h-auto min-h-12 flex-col px-1 py-2\",\n        )}\n      >\n        {pane.collapsible === false ? (\n          <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">\n            {headerContent}\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            className={cn(\n              \"flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-left hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n              compact && \"flex-col\",\n            )}\n            aria-expanded={!collapsed}\n            aria-label={`${collapsed ? \"Expand\" : \"Collapse\"} ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n            onClick={onToggle}\n          >\n            {headerContent}\n          </button>\n        )}\n        {!compact && pane.slots?.headerTrailing && (\n          <div className=\"flex shrink-0 items-center gap-1\">\n            {pane.slots.headerTrailing}\n          </div>\n        )}\n      </header>\n      {!collapsed && (\n        <div\n          className={cn(\n            \"min-h-0 min-w-0 flex-1 overflow-auto\",\n            pane.contentClassName,\n          )}\n        >\n          {pane.content}\n        </div>\n      )}\n    </section>\n  );\n}\n\ntype SideRegionProps = {\n  location: \"left\" | \"right\";\n  panes: WorkspacePaneSpec[];\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSideRegion({\n  location,\n  panes,\n  state,\n  update,\n}: SideRegionProps) {\n  if (panes.length === 0) return null;\n  const sideCollapsed = state.sideCollapsed[location];\n  const allCollapsed = panes.every((pane) => state.collapsed[pane.id]);\n  const width = sideCollapsed\n    ? 0\n    : allCollapsed\n      ? WORKSPACE_COLLAPSED_RAIL_WIDTH\n      : location === \"left\"\n        ? state.leftWidth\n        : state.rightWidth;\n  const min = Math.max(...panes.map((pane) => pane.minWidth ?? 160));\n  const max = Math.min(...panes.map((pane) => pane.maxWidth ?? 720));\n  const canResize =\n    !sideCollapsed &&\n    !allCollapsed &&\n    panes.some((pane) => pane.resizable !== false);\n  const style = { \"--workspace-region-width\": `${width}px` } as CSSProperties;\n  // Open panes flex-share the region, so changing one pane's basis by d moves its\n  // rendered edge by only d*(open-1)/open; scale the drag so the handle tracks the cursor.\n  const openCount = panes.filter(\n    (pane) => !(state.collapsed[pane.id] ?? false),\n  ).length;\n  const stackPointerFactor = openCount > 1 ? openCount / (openCount - 1) : 1;\n\n  return (\n    <aside\n      data-testid={`workspace-region-${location}`}\n      aria-hidden={sideCollapsed}\n      style={style}\n      className={cn(\n        \"relative order-2 flex min-h-0 w-full flex-col overflow-hidden border-border md:row-span-2 md:h-full md:w-[var(--workspace-region-width)]\",\n        location === \"left\"\n          ? \"md:order-none md:col-start-1 md:row-start-1 md:border-r\"\n          : \"order-3 md:order-none md:col-start-3 md:row-start-1 md:border-l\",\n        sideCollapsed && \"hidden border-0 md:flex\",\n      )}\n    >\n      {!sideCollapsed &&\n        panes.map((pane, index) => {\n          const collapsed = state.collapsed[pane.id] ?? false;\n          const nextPane = panes[index + 1];\n          return (\n            <div\n              key={pane.id}\n              data-testid={`workspace-stack-${pane.id}`}\n              className={cn(\n                \"relative flex min-h-0 flex-col\",\n                collapsed ? \"shrink-0\" : \"flex-1\",\n              )}\n              style={\n                !collapsed && state.stackHeights[pane.id] !== undefined\n                  ? { flexBasis: `${state.stackHeights[pane.id]}px` }\n                  : undefined\n              }\n            >\n              <WorkspacePaneView\n                pane={pane}\n                collapsed={collapsed}\n                compact={allCollapsed}\n                onToggle={() =>\n                  update((current) => ({\n                    ...current,\n                    collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n                  }))\n                }\n              />\n              {!collapsed &&\n                nextPane &&\n                pane.resizable !== false &&\n                nextPane.resizable !== false && (\n                  <WorkspaceResizeHandle\n                    orientation=\"horizontal\"\n                    // Seed from the pane's current flex basis (0 when unsized) so the\n                    // drag starts where the divider actually is — no snap on first move.\n                    value={state.stackHeights[pane.id] ?? 0}\n                    min={pane.minHeight ?? 72}\n                    max={pane.maxHeight ?? 640}\n                    pointerFactor={stackPointerFactor}\n                    label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n                    testId={`workspace-resize-stack-${pane.id}`}\n                    className=\"bottom-0\"\n                    onChange={(height) =>\n                      update((current) => ({\n                        ...current,\n                        stackHeights: {\n                          ...current.stackHeights,\n                          [pane.id]: height,\n                        },\n                      }))\n                    }\n                  />\n                )}\n            </div>\n          );\n        })}\n      {canResize && (\n        <WorkspaceResizeHandle\n          orientation=\"vertical\"\n          value={width}\n          min={min}\n          max={max}\n          pointerFactor={location === \"left\" ? 1 : -1}\n          label={`Resize ${location} workspace panes`}\n          testId={`workspace-resize-${location}`}\n          className={location === \"left\" ? \"right-0\" : \"left-0\"}\n          onChange={(nextWidth) =>\n            update((current) => ({\n              ...current,\n              [location === \"left\" ? \"leftWidth\" : \"rightWidth\"]: nextWidth,\n            }))\n          }\n        />\n      )}\n    </aside>\n  );\n}\n\ntype SingleRegionProps = {\n  pane: WorkspacePaneSpec;\n  state: WorkspaceLayoutState;\n  update: WorkspaceUpdate;\n};\n\nexport function WorkspaceSingleRegion({\n  pane,\n  state,\n  update,\n}: SingleRegionProps) {\n  const collapsed = state.collapsed[pane.id] ?? false;\n  const isBottom = pane.location === \"bottom\";\n  const style =\n    isBottom && !collapsed\n      ? ({\n          \"--workspace-bottom-height\": `${state.bottomHeight}px`,\n        } as CSSProperties)\n      : undefined;\n  return (\n    <div\n      data-testid={`workspace-region-${pane.location}`}\n      style={style}\n      className={cn(\n        \"relative flex min-h-0 min-w-0 flex-col overflow-hidden\",\n        isBottom\n          ? \"order-4 w-full border-t border-border md:order-none md:col-start-2 md:row-start-2 md:h-[var(--workspace-bottom-height)]\"\n          : \"order-1 min-h-80 md:order-none md:col-start-2 md:row-start-1 md:min-h-0\",\n      )}\n    >\n      <WorkspacePaneView\n        pane={pane}\n        collapsed={collapsed}\n        compact={false}\n        onToggle={() =>\n          update((current) => ({\n            ...current,\n            collapsed: { ...current.collapsed, [pane.id]: !collapsed },\n          }))\n        }\n      />\n      {isBottom && !collapsed && pane.resizable !== false && (\n        <WorkspaceResizeHandle\n          orientation=\"horizontal\"\n          value={state.bottomHeight}\n          min={pane.minHeight ?? 96}\n          max={pane.maxHeight ?? 640}\n          pointerFactor={-1}\n          label={`Resize ${typeof pane.label === \"string\" ? pane.label : pane.id}`}\n          testId=\"workspace-resize-bottom\"\n          className=\"top-0\"\n          onChange={(bottomHeight) =>\n            update((current) => ({ ...current, bottomHeight }))\n          }\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["useCallback","jsx","cn","jsxs","Fragment","UiChevronRight","UiChevronDown","WORKSPACE_COLLAPSED_RAIL_WIDTH"],"mappings":"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"}

package/dist/layout/Workspace.regions.d.ts

@@ -0,0 +1,17 @@
+import { WorkspaceLayoutState, WorkspacePaneSpec } from './Workspace.model';
+export type WorkspaceUpdate = (change: (current: WorkspaceLayoutState) => WorkspaceLayoutState) => void;
+type SideRegionProps = {
+    location: "left" | "right";
+    panes: WorkspacePaneSpec[];
+    state: WorkspaceLayoutState;
+    update: WorkspaceUpdate;
+};
+export declare function WorkspaceSideRegion({ location, panes, state, update, }: SideRegionProps): import("react/jsx-runtime").JSX.Element | null;
+type SingleRegionProps = {
+    pane: WorkspacePaneSpec;
+    state: WorkspaceLayoutState;
+    update: WorkspaceUpdate;
+};
+export declare function WorkspaceSingleRegion({ pane, state, update, }: SingleRegionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Workspace.regions.d.ts.map

package/dist/layout/Workspace.regions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Workspace.regions.d.ts","sourceRoot":"","sources":["../../src/layout/Workspace.regions.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACvB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,MAAM,eAAe,GAAG,CAC5B,MAAM,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,oBAAoB,KAC5D,IAAI,CAAC;AAuLV,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,KAAK,EAAE,oBAAoB,CAAC;IAC5B,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,KAAK,EACL,MAAM,GACP,EAAE,eAAe,kDAoHjB;AAED,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,oBAAoB,CAAC;IAC5B,MAAM,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,KAAK,EACL,MAAM,GACP,EAAE,iBAAiB,2CAgDnB"}