@flanksource/clicky-ui 0.3.10 → 0.3.11

package/dist/layout/Workspace.regions.js

@@ -0,0 +1,305 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { cn } from "../lib/utils.js";
+import { WORKSPACE_COLLAPSED_RAIL_WIDTH } from "./Workspace.model.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+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 = 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__ */ 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: 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__ */ jsxs(Fragment, { children: [
+    pane.collapsible !== false && (collapsed ? /* @__PURE__ */ jsx(UiChevronRight, { className: "size-3.5 shrink-0" }) : /* @__PURE__ */ jsx(UiChevronDown, { className: "size-3.5 shrink-0" })),
+    (_a = pane.slots) == null ? void 0 : _a.headerLeading,
+    pane.icon && /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: pane.icon }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "min-w-0 flex-1 truncate text-xs font-semibold",
+          compact && "[writing-mode:vertical-rl]"
+        ),
+        children: pane.label
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-testid": `workspace-pane-${pane.id}`,
+      className: cn(
+        "flex min-h-0 min-w-0 flex-col overflow-hidden bg-background",
+        collapsed ? "shrink-0" : "flex-1",
+        pane.className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "header",
+          {
+            className: 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__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: headerContent }) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: 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__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: pane.slots.headerTrailing })
+            ]
+          }
+        ),
+        !collapsed && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: 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_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__ */ jsxs(
+    "aside",
+    {
+      "data-testid": `workspace-region-${location}`,
+      "aria-hidden": sideCollapsed,
+      style,
+      className: 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__ */ jsxs(
+            "div",
+            {
+              "data-testid": `workspace-stack-${pane.id}`,
+              className: 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__ */ 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__ */ 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__ */ 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__ */ jsxs(
+    "div",
+    {
+      "data-testid": `workspace-region-${pane.location}`,
+      style,
+      className: 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__ */ jsx(
+          WorkspacePaneView,
+          {
+            pane,
+            collapsed,
+            compact: false,
+            onToggle: () => update((current) => ({
+              ...current,
+              collapsed: { ...current.collapsed, [pane.id]: !collapsed }
+            }))
+          }
+        ),
+        isBottom && !collapsed && pane.resizable !== false && /* @__PURE__ */ 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 }))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  WorkspaceSideRegion,
+  WorkspaceSingleRegion
+};
+//# sourceMappingURL=Workspace.regions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Workspace.regions.js","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":[],"mappings":"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"}

package/dist/lib/tokens.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function compactTokens(value) {
+  if (!value) return "";
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (value >= 1e3) return `${Math.round(value / 1e3)}k`;
+  return String(value);
+}
+function formatCost(value) {
+  return value < 0.01 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;
+}
+exports.compactTokens = compactTokens;
+exports.formatCost = formatCost;
+//# sourceMappingURL=tokens.cjs.map

package/dist/lib/tokens.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.cjs","sources":["../../src/lib/tokens.ts"],"sourcesContent":["// Pure token/cost string formatters, shared by the context meter (chat layer)\n// and the session cost helpers (ai layer). Kept in lib so both can import them\n// without crossing the chat↛ai boundary.\n\n/** Compact token count: \"\" for 0, \"1.2M\", \"12k\", or the raw number. */\nexport function compactTokens(value?: number): string {\n  if (!value) return \"\";\n  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;\n  if (value >= 1_000) return `${Math.round(value / 1_000)}k`;\n  return String(value);\n}\n\n/** USD cost with sub-cent precision for tiny amounts: \"$0.0042\" or \"$0.12\". */\nexport function formatCost(value: number): string {\n  return value < 0.01 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;\n}\n"],"names":[],"mappings":";;AAKO,SAAS,cAAc,OAAwB;AACpD,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,SAAS,IAAW,QAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAChE,MAAI,SAAS,IAAO,QAAO,GAAG,KAAK,MAAM,QAAQ,GAAK,CAAC;AACvD,SAAO,OAAO,KAAK;AACrB;AAGO,SAAS,WAAW,OAAuB;AAChD,SAAO,QAAQ,OAAO,IAAI,MAAM,QAAQ,CAAC,CAAC,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;AACrE;;;"}

package/dist/lib/tokens.d.ts

@@ -0,0 +1,5 @@
+/** Compact token count: "" for 0, "1.2M", "12k", or the raw number. */
+export declare function compactTokens(value?: number): string;
+/** USD cost with sub-cent precision for tiny amounts: "$0.0042" or "$0.12". */
+export declare function formatCost(value: number): string;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/lib/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/lib/tokens.ts"],"names":[],"mappings":"AAIA,uEAAuE;AACvE,wBAAgB,aAAa,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAKpD;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD"}

package/dist/lib/tokens.js

@@ -0,0 +1,14 @@
+function compactTokens(value) {
+  if (!value) return "";
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (value >= 1e3) return `${Math.round(value / 1e3)}k`;
+  return String(value);
+}
+function formatCost(value) {
+  return value < 0.01 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;
+}
+export {
+  compactTokens,
+  formatCost
+};
+//# sourceMappingURL=tokens.js.map

package/dist/lib/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../src/lib/tokens.ts"],"sourcesContent":["// Pure token/cost string formatters, shared by the context meter (chat layer)\n// and the session cost helpers (ai layer). Kept in lib so both can import them\n// without crossing the chat↛ai boundary.\n\n/** Compact token count: \"\" for 0, \"1.2M\", \"12k\", or the raw number. */\nexport function compactTokens(value?: number): string {\n  if (!value) return \"\";\n  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(1)}M`;\n  if (value >= 1_000) return `${Math.round(value / 1_000)}k`;\n  return String(value);\n}\n\n/** USD cost with sub-cent precision for tiny amounts: \"$0.0042\" or \"$0.12\". */\nexport function formatCost(value: number): string {\n  return value < 0.01 ? `$${value.toFixed(4)}` : `$${value.toFixed(2)}`;\n}\n"],"names":[],"mappings":"AAKO,SAAS,cAAc,OAAwB;AACpD,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,SAAS,IAAW,QAAO,IAAI,QAAQ,KAAW,QAAQ,CAAC,CAAC;AAChE,MAAI,SAAS,IAAO,QAAO,GAAG,KAAK,MAAM,QAAQ,GAAK,CAAC;AACvD,SAAO,OAAO,KAAK;AACrB;AAGO,SAAS,WAAW,OAAuB;AAChD,SAAO,QAAQ,OAAO,IAAI,MAAM,QAAQ,CAAC,CAAC,KAAK,IAAI,MAAM,QAAQ,CAAC,CAAC;AACrE;"}

package/dist/monaco/MonacoEditor.cjs

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Editor = require("@monaco-editor/react");
+const monaco = require("monaco-editor");
+const useTheme = require("../hooks/use-theme.cjs");
+const useMonacoWorker = require("./use-monaco-worker.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const monaco__namespace = /* @__PURE__ */ _interopNamespaceDefault(monaco);
+Editor.loader.config({ monaco: monaco__namespace });
+function MonacoEditor({
+  value,
+  onChange,
+  language,
+  path,
+  height = "20rem",
+  beforeMount,
+  onMount,
+  onValidate
+}) {
+  const workers = useMonacoWorker.useMonacoWorkerFactory();
+  const theme = useTheme.useResolvedTheme() === "dark" ? "vs-dark" : "light";
+  if (!workers) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 p-3 text-sm text-destructive", children: "Monaco workers are not configured." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-md border border-input", "data-slot": "monaco-editor", children: /* @__PURE__ */ jsxRuntime.jsx(
+    Editor,
+    {
+      value,
+      onChange: (next) => onChange(next ?? ""),
+      language,
+      path,
+      height,
+      theme,
+      keepCurrentModel: true,
+      ...beforeMount ? { beforeMount } : {},
+      ...onMount ? { onMount: (instance, monacoInstance) => onMount(instance, monacoInstance) } : {},
+      ...onValidate ? { onValidate } : {},
+      options: {
+        automaticLayout: true,
+        fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)",
+        fontSize: 13,
+        lineHeight: 20,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        tabSize: 2,
+        wordWrap: "on",
+        quickSuggestions: { other: true, comments: true, strings: true }
+      }
+    }
+  ) });
+}
+exports.MonacoEditor = MonacoEditor;
+//# sourceMappingURL=MonacoEditor.cjs.map

package/dist/monaco/MonacoEditor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.cjs","sources":["../../src/monaco/MonacoEditor.tsx"],"sourcesContent":["import Editor, { loader, type Monaco } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport { useResolvedTheme } from \"../hooks/use-theme\";\nimport { useMonacoWorkerFactory } from \"./use-monaco-worker\";\nimport type { MonacoEditorProps } from \"./types\";\n\nloader.config({ monaco });\n\nexport function MonacoEditor({\n  value,\n  onChange,\n  language,\n  path,\n  height = \"20rem\",\n  beforeMount,\n  onMount,\n  onValidate,\n}: MonacoEditorProps) {\n  const workers = useMonacoWorkerFactory();\n  const theme = useResolvedTheme() === \"dark\" ? \"vs-dark\" : \"light\";\n\n  if (!workers) {\n    return <div role=\"alert\" className=\"rounded-md border border-destructive/40 p-3 text-sm text-destructive\">Monaco workers are not configured.</div>;\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-md border border-input\" data-slot=\"monaco-editor\">\n      <Editor\n        value={value}\n        onChange={(next) => onChange(next ?? \"\")}\n        language={language}\n        path={path}\n        height={height}\n        theme={theme}\n        keepCurrentModel\n        {...(beforeMount ? { beforeMount } : {})}\n        {...(onMount\n          ? { onMount: (instance, monacoInstance) => onMount(instance, monacoInstance) }\n          : {})}\n        {...(onValidate ? { onValidate } : {})}\n        options={{\n          automaticLayout: true,\n          fontFamily: \"var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)\",\n          fontSize: 13,\n          lineHeight: 20,\n          minimap: { enabled: false },\n          scrollBeyondLastLine: false,\n          tabSize: 2,\n          wordWrap: \"on\",\n          quickSuggestions: { other: true, comments: true, strings: true },\n        }}\n      />\n    </div>\n  );\n}\n\nexport type { Monaco };\n"],"names":["loader","monaco","useMonacoWorkerFactory","useResolvedTheme","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAMAA,OAAAA,OAAO,OAAO,EAAA,QAAEC,mBAAQ;AAEjB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,UAAUC,gBAAAA,uBAAA;AAChB,QAAM,QAAQC,SAAAA,iBAAA,MAAuB,SAAS,YAAY;AAE1D,MAAI,CAAC,SAAS;AACZ,0CAAQ,OAAA,EAAI,MAAK,SAAQ,WAAU,wEAAuE,UAAA,sCAAkC;AAAA,EAC9I;AAEA,SACEC,2BAAAA,IAAC,OAAA,EAAI,WAAU,kDAAiD,aAAU,iBACxE,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,SAAS,SAAS,QAAQ,EAAE;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MACf,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,MACpC,GAAI,UACD,EAAE,SAAS,CAAC,UAAU,mBAAmB,QAAQ,UAAU,cAAc,EAAA,IACzE,CAAA;AAAA,MACH,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MACnC,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,SAAS,EAAE,SAAS,MAAA;AAAA,QACpB,sBAAsB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB,EAAE,OAAO,MAAM,UAAU,MAAM,SAAS,KAAA;AAAA,MAAK;AAAA,IACjE;AAAA,EAAA,GAEJ;AAEJ;;"}

package/dist/monaco/MonacoEditor.d.ts

@@ -0,0 +1,5 @@
+import { Monaco } from '@monaco-editor/react';
+import { MonacoEditorProps } from './types';
+export declare function MonacoEditor({ value, onChange, language, path, height, beforeMount, onMount, onValidate, }: MonacoEditorProps): import("react/jsx-runtime").JSX.Element;
+export type { Monaco };
+//# sourceMappingURL=MonacoEditor.d.ts.map

package/dist/monaco/MonacoEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.d.ts","sourceRoot":"","sources":["../../src/monaco/MonacoEditor.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAU,KAAK,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAInE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAIjD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,MAAgB,EAChB,WAAW,EACX,OAAO,EACP,UAAU,GACX,EAAE,iBAAiB,2CAqCnB;AAED,YAAY,EAAE,MAAM,EAAE,CAAC"}

package/dist/monaco/MonacoEditor.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import Editor, { loader } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import { useResolvedTheme } from "../hooks/use-theme.js";
+import { useMonacoWorkerFactory } from "./use-monaco-worker.js";
+loader.config({ monaco });
+function MonacoEditor({
+  value,
+  onChange,
+  language,
+  path,
+  height = "20rem",
+  beforeMount,
+  onMount,
+  onValidate
+}) {
+  const workers = useMonacoWorkerFactory();
+  const theme = useResolvedTheme() === "dark" ? "vs-dark" : "light";
+  if (!workers) {
+    return /* @__PURE__ */ jsx("div", { role: "alert", className: "rounded-md border border-destructive/40 p-3 text-sm text-destructive", children: "Monaco workers are not configured." });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-input", "data-slot": "monaco-editor", children: /* @__PURE__ */ jsx(
+    Editor,
+    {
+      value,
+      onChange: (next) => onChange(next ?? ""),
+      language,
+      path,
+      height,
+      theme,
+      keepCurrentModel: true,
+      ...beforeMount ? { beforeMount } : {},
+      ...onMount ? { onMount: (instance, monacoInstance) => onMount(instance, monacoInstance) } : {},
+      ...onValidate ? { onValidate } : {},
+      options: {
+        automaticLayout: true,
+        fontFamily: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)",
+        fontSize: 13,
+        lineHeight: 20,
+        minimap: { enabled: false },
+        scrollBeyondLastLine: false,
+        tabSize: 2,
+        wordWrap: "on",
+        quickSuggestions: { other: true, comments: true, strings: true }
+      }
+    }
+  ) });
+}
+export {
+  MonacoEditor
+};
+//# sourceMappingURL=MonacoEditor.js.map

package/dist/monaco/MonacoEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoEditor.js","sources":["../../src/monaco/MonacoEditor.tsx"],"sourcesContent":["import Editor, { loader, type Monaco } from \"@monaco-editor/react\";\nimport * as monaco from \"monaco-editor\";\nimport { useResolvedTheme } from \"../hooks/use-theme\";\nimport { useMonacoWorkerFactory } from \"./use-monaco-worker\";\nimport type { MonacoEditorProps } from \"./types\";\n\nloader.config({ monaco });\n\nexport function MonacoEditor({\n  value,\n  onChange,\n  language,\n  path,\n  height = \"20rem\",\n  beforeMount,\n  onMount,\n  onValidate,\n}: MonacoEditorProps) {\n  const workers = useMonacoWorkerFactory();\n  const theme = useResolvedTheme() === \"dark\" ? \"vs-dark\" : \"light\";\n\n  if (!workers) {\n    return <div role=\"alert\" className=\"rounded-md border border-destructive/40 p-3 text-sm text-destructive\">Monaco workers are not configured.</div>;\n  }\n\n  return (\n    <div className=\"overflow-hidden rounded-md border border-input\" data-slot=\"monaco-editor\">\n      <Editor\n        value={value}\n        onChange={(next) => onChange(next ?? \"\")}\n        language={language}\n        path={path}\n        height={height}\n        theme={theme}\n        keepCurrentModel\n        {...(beforeMount ? { beforeMount } : {})}\n        {...(onMount\n          ? { onMount: (instance, monacoInstance) => onMount(instance, monacoInstance) }\n          : {})}\n        {...(onValidate ? { onValidate } : {})}\n        options={{\n          automaticLayout: true,\n          fontFamily: \"var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace)\",\n          fontSize: 13,\n          lineHeight: 20,\n          minimap: { enabled: false },\n          scrollBeyondLastLine: false,\n          tabSize: 2,\n          wordWrap: \"on\",\n          quickSuggestions: { other: true, comments: true, strings: true },\n        }}\n      />\n    </div>\n  );\n}\n\nexport type { Monaco };\n"],"names":[],"mappings":";;;;;AAMA,OAAO,OAAO,EAAE,QAAQ;AAEjB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,UAAU,uBAAA;AAChB,QAAM,QAAQ,iBAAA,MAAuB,SAAS,YAAY;AAE1D,MAAI,CAAC,SAAS;AACZ,+BAAQ,OAAA,EAAI,MAAK,SAAQ,WAAU,wEAAuE,UAAA,sCAAkC;AAAA,EAC9I;AAEA,SACE,oBAAC,OAAA,EAAI,WAAU,kDAAiD,aAAU,iBACxE,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,SAAS,SAAS,QAAQ,EAAE;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAgB;AAAA,MACf,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,MACpC,GAAI,UACD,EAAE,SAAS,CAAC,UAAU,mBAAmB,QAAQ,UAAU,cAAc,EAAA,IACzE,CAAA;AAAA,MACH,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MACnC,SAAS;AAAA,QACP,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,SAAS,EAAE,SAAS,MAAA;AAAA,QACpB,sBAAsB;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,kBAAkB,EAAE,OAAO,MAAM,UAAU,MAAM,SAAS,KAAA;AAAA,MAAK;AAAA,IACjE;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/monaco/MonacoProvider.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const useMonacoWorker = require("./use-monaco-worker.cjs");
+function MonacoProvider({ getWorker, children }) {
+  react.useEffect(() => {
+    const scope = globalThis;
+    const previous = scope.MonacoEnvironment;
+    scope.MonacoEnvironment = {
+      ...previous,
+      getWorker: (_moduleId, label) => getWorker(label)
+    };
+    return () => {
+      if (previous) scope.MonacoEnvironment = previous;
+      else delete scope.MonacoEnvironment;
+    };
+  }, [getWorker]);
+  return /* @__PURE__ */ jsxRuntime.jsx(useMonacoWorker.WorkerContext.Provider, { value: getWorker, children });
+}
+exports.MonacoProvider = MonacoProvider;
+//# sourceMappingURL=MonacoProvider.cjs.map

package/dist/monaco/MonacoProvider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoProvider.cjs","sources":["../../src/monaco/MonacoProvider.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { MonacoProviderProps } from \"./types\";\nimport { WorkerContext } from \"./use-monaco-worker\";\n\nexport function MonacoProvider({ getWorker, children }: MonacoProviderProps) {\n  useEffect(() => {\n    const scope = globalThis as unknown as {\n      MonacoEnvironment?: { getWorker?: (moduleId: string, label: string) => Worker };\n    };\n    const previous = scope.MonacoEnvironment;\n    scope.MonacoEnvironment = {\n      ...previous,\n      getWorker: (_moduleId: string, label: string) => getWorker(label),\n    };\n    return () => {\n      if (previous) scope.MonacoEnvironment = previous;\n      else delete scope.MonacoEnvironment;\n    };\n  }, [getWorker]);\n\n  return <WorkerContext.Provider value={getWorker}>{children}</WorkerContext.Provider>;\n}\n"],"names":["useEffect","WorkerContext"],"mappings":";;;;;AAIO,SAAS,eAAe,EAAE,WAAW,YAAiC;AAC3EA,QAAAA,UAAU,MAAM;AACd,UAAM,QAAQ;AAGd,UAAM,WAAW,MAAM;AACvB,UAAM,oBAAoB;AAAA,MACxB,GAAG;AAAA,MACH,WAAW,CAAC,WAAmB,UAAkB,UAAU,KAAK;AAAA,IAAA;AAElE,WAAO,MAAM;AACX,UAAI,gBAAgB,oBAAoB;AAAA,kBAC5B,MAAM;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,wCAAQC,gBAAAA,cAAc,UAAd,EAAuB,OAAO,WAAY,UAAS;AAC7D;;"}

package/dist/monaco/MonacoProvider.d.ts

@@ -0,0 +1,3 @@
+import { MonacoProviderProps } from './types';
+export declare function MonacoProvider({ getWorker, children }: MonacoProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MonacoProvider.d.ts.map

package/dist/monaco/MonacoProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoProvider.d.ts","sourceRoot":"","sources":["../../src/monaco/MonacoProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnD,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAiB1E"}

package/dist/monaco/MonacoProvider.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { WorkerContext } from "./use-monaco-worker.js";
+function MonacoProvider({ getWorker, children }) {
+  useEffect(() => {
+    const scope = globalThis;
+    const previous = scope.MonacoEnvironment;
+    scope.MonacoEnvironment = {
+      ...previous,
+      getWorker: (_moduleId, label) => getWorker(label)
+    };
+    return () => {
+      if (previous) scope.MonacoEnvironment = previous;
+      else delete scope.MonacoEnvironment;
+    };
+  }, [getWorker]);
+  return /* @__PURE__ */ jsx(WorkerContext.Provider, { value: getWorker, children });
+}
+export {
+  MonacoProvider
+};
+//# sourceMappingURL=MonacoProvider.js.map

package/dist/monaco/MonacoProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonacoProvider.js","sources":["../../src/monaco/MonacoProvider.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { MonacoProviderProps } from \"./types\";\nimport { WorkerContext } from \"./use-monaco-worker\";\n\nexport function MonacoProvider({ getWorker, children }: MonacoProviderProps) {\n  useEffect(() => {\n    const scope = globalThis as unknown as {\n      MonacoEnvironment?: { getWorker?: (moduleId: string, label: string) => Worker };\n    };\n    const previous = scope.MonacoEnvironment;\n    scope.MonacoEnvironment = {\n      ...previous,\n      getWorker: (_moduleId: string, label: string) => getWorker(label),\n    };\n    return () => {\n      if (previous) scope.MonacoEnvironment = previous;\n      else delete scope.MonacoEnvironment;\n    };\n  }, [getWorker]);\n\n  return <WorkerContext.Provider value={getWorker}>{children}</WorkerContext.Provider>;\n}\n"],"names":[],"mappings":";;;AAIO,SAAS,eAAe,EAAE,WAAW,YAAiC;AAC3E,YAAU,MAAM;AACd,UAAM,QAAQ;AAGd,UAAM,WAAW,MAAM;AACvB,UAAM,oBAAoB;AAAA,MACxB,GAAG;AAAA,MACH,WAAW,CAAC,WAAmB,UAAkB,UAAU,KAAK;AAAA,IAAA;AAElE,WAAO,MAAM;AACX,UAAI,gBAAgB,oBAAoB;AAAA,kBAC5B,MAAM;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,6BAAQ,cAAc,UAAd,EAAuB,OAAO,WAAY,UAAS;AAC7D;"}