@flanksource/clicky-ui 0.3.33 → 0.3.35

package/dist/expressions/playground/ExpressionPlayground.js

@@ -0,0 +1,291 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { Combobox } from "../../components/Combobox.js";
+import { Tabs } from "../../layout/Tabs.js";
+import { MonacoEditor } from "../../monaco/MonacoEditor.js";
+import * as monacoEditor from "monaco-editor";
+import { registerGomplateLanguages } from "../lang/index.js";
+import { DEFAULT_API_BASE, fetchSpec, fetchExamples } from "./api.js";
+import { LANGUAGES, languageById } from "./languages.js";
+import { GraphPanel } from "./panels/GraphPanel.js";
+import { ResultPanel } from "./panels/ResultPanel.js";
+import { SpecPanel } from "./panels/SpecPanel.js";
+import { TokensPanel } from "./panels/TokensPanel.js";
+import { RunControls } from "./RunControls.js";
+import { registerRunAction } from "./runAction.js";
+import { useEditorTheme } from "./useEditorTheme.js";
+import { useEvaluator } from "./useEvaluator.js";
+import { useParsedInput } from "./useParsedInput.js";
+import { VerticalSplit } from "./VerticalSplit.js";
+import { rowsToPaneHeight } from "./verticalSplitModel.js";
+import { mergeSpec } from "../lang/merge.js";
+import { spec } from "../lang/generated/index.js";
+const SOURCE_MODEL_PATH = "inmemory://expressions/source";
+const INPUT_MODEL_PATH = "inmemory://expressions/input.yaml";
+const EMPTY_STATE = { language: "cel", source: "", input: "" };
+function ExpressionPlayground({
+  apiBase = DEFAULT_API_BASE,
+  languages: offered = LANGUAGES,
+  examples,
+  value,
+  onChange,
+  defaultValue,
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = useState(
+    () => {
+      var _a;
+      return defaultValue ?? { ...EMPTY_STATE, language: ((_a = offered[0]) == null ? void 0 : _a.id) ?? "cel" };
+    }
+  );
+  const state = value ?? uncontrolled;
+  const update = useCallback(
+    (patch) => {
+      const next = { ...state, ...patch };
+      if (!value) setUncontrolled(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [state, value, onChange]
+  );
+  const language = useMemo(
+    () => languageById(state.language, offered),
+    [state.language, offered]
+  );
+  const [outputTab, setOutputTab] = useState("result");
+  const evaluator = useEvaluator(apiBase, {
+    language: language.evalLanguage,
+    source: state.source,
+    input: state.input
+  });
+  const parsedInput = useParsedInput(state.input);
+  const environmentRef = useRef(void 0);
+  environmentRef.current = parsedInput.value;
+  const [served, setServed] = useState();
+  const servedRef = useRef(void 0);
+  servedRef.current = served;
+  const activeSpec = useMemo(() => mergeSpec(spec, served), [served]);
+  const [fetched, setFetched] = useState();
+  const available = examples ?? fetched ?? [];
+  const forLanguage = available.filter(
+    (example) => example.language === language.evalLanguage
+  );
+  const registered = useRef(null);
+  const registerLanguages = useCallback((monaco) => {
+    const current = servedRef.current;
+    registered.current = registerGomplateLanguages(monaco, {
+      environment: () => environmentRef.current,
+      ...current ? { spec: current } : {}
+    });
+  }, []);
+  useEffect(() => {
+    const controller = new AbortController();
+    void fetchSpec(apiBase, controller.signal).then((next) => {
+      if (!controller.signal.aborted) setServed(next);
+    });
+    return () => controller.abort();
+  }, [apiBase]);
+  useEffect(() => {
+    var _a;
+    if (served) (_a = registered.current) == null ? void 0 : _a.setSpec(served);
+  }, [served]);
+  useEffect(() => {
+    if (examples) return;
+    const controller = new AbortController();
+    void fetchExamples(apiBase, controller.signal).then((next) => {
+      if (!controller.signal.aborted && next) setFetched(next);
+    });
+    return () => controller.abort();
+  }, [apiBase, examples]);
+  useMarkers(evaluator.response);
+  const applyTheme = useEditorTheme();
+  useEffect(() => {
+    if (outputTab === "spec" && !language.catalogue) setOutputTab("result");
+  }, [language.catalogue, outputTab]);
+  const runRef = useRef(evaluator.run);
+  runRef.current = evaluator.run;
+  const sourceEditor = useRef(
+    null
+  );
+  const onEditorMount = useCallback(
+    (editor, monaco) => {
+      var _a;
+      applyTheme();
+      registerRunAction(editor, monaco, () => runRef.current());
+      if (((_a = editor.getModel()) == null ? void 0 : _a.uri.toString()) === SOURCE_MODEL_PATH)
+        sourceEditor.current = editor;
+    },
+    [applyTheme]
+  );
+  const insertExpression = useCallback((expression) => {
+    const editor = sourceEditor.current;
+    const selection = editor == null ? void 0 : editor.getSelection();
+    if (!editor || !selection) return;
+    editor.executeEdits("object-graph", [
+      { range: selection, text: expression, forceMoveMarkers: true }
+    ]);
+    editor.focus();
+  }, []);
+  const catalogue = language.catalogue ? activeSpec[language.catalogue].functions : [];
+  return /* @__PURE__ */ jsxs("div", { className: `flex h-full min-h-0 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-h-0 w-1/2 flex-col border-r border-border", children: /* @__PURE__ */ jsx(
+      VerticalSplit,
+      {
+        storageKey: "expressions:editor-split",
+        defaultTopHeight: rowsToPaneHeight(language.editorRows),
+        top: /* @__PURE__ */ jsx(
+          EditorPane,
+          {
+            label: "Expression",
+            actions: /* @__PURE__ */ jsx(RunControls, { evaluator }),
+            hint: forLanguage.length > 0 ? /* @__PURE__ */ jsx(
+              Combobox,
+              {
+                options: forLanguage.map((example) => ({
+                  value: example.name,
+                  label: example.name
+                })),
+                value: "",
+                allowCustomValue: false,
+                placeholder: "Load an example…",
+                ariaLabel: "Load an example",
+                className: "w-56",
+                onChange: (name) => {
+                  const example = forLanguage.find(
+                    (candidate) => candidate.name === name
+                  );
+                  if (example)
+                    update({
+                      source: example.source,
+                      input: example.input
+                    });
+                }
+              }
+            ) : void 0,
+            children: /* @__PURE__ */ jsx(
+              MonacoEditor,
+              {
+                value: state.source,
+                onChange: (source) => update({ source: source ?? "" }),
+                language: language.editorLanguage,
+                path: SOURCE_MODEL_PATH,
+                height: "100%",
+                beforeMount: registerLanguages,
+                onMount: onEditorMount
+              }
+            )
+          }
+        ),
+        bottom: /* @__PURE__ */ jsx(
+          EditorPane,
+          {
+            label: "Input",
+            hint: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `truncate text-[11px] ${parsedInput.error ? "text-destructive" : "text-muted-foreground/70"}`,
+                title: parsedInput.error ?? void 0,
+                children: parsedInput.error ?? "YAML or JSON"
+              }
+            ),
+            children: /* @__PURE__ */ jsx(
+              MonacoEditor,
+              {
+                value: state.input,
+                onChange: (input) => update({ input: input ?? "" }),
+                language: "yaml",
+                path: INPUT_MODEL_PATH,
+                height: "100%",
+                onMount: onEditorMount
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 w-1/2 flex-col", children: [
+      /* @__PURE__ */ jsx("div", { className: "border-b border-border px-4", children: /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          tabs: [
+            { id: "result", label: "Result" },
+            { id: "graph", label: "Object graph" },
+            { id: "tokens", label: "Tokens" },
+            ...language.catalogue ? [{ id: "spec", label: "Functions", count: catalogue.length }] : []
+          ],
+          value: outputTab,
+          onChange: setOutputTab
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1", children: [
+        outputTab === "result" ? /* @__PURE__ */ jsx(
+          ResultPanel,
+          {
+            response: evaluator.response,
+            pending: evaluator.pending,
+            stale: evaluator.stale,
+            onRun: evaluator.run
+          }
+        ) : null,
+        outputTab === "graph" ? /* @__PURE__ */ jsx(
+          GraphPanel,
+          {
+            document: parsedInput.value,
+            languageId: language.editorLanguage,
+            onInsert: insertExpression
+          }
+        ) : null,
+        outputTab === "tokens" ? /* @__PURE__ */ jsx(
+          TokensPanel,
+          {
+            source: state.source,
+            languageId: language.editorLanguage
+          }
+        ) : null,
+        outputTab === "spec" && language.catalogue ? /* @__PURE__ */ jsx(SpecPanel, { flavour: language.catalogue, spec: activeSpec }) : null
+      ] })
+    ] })
+  ] });
+}
+function EditorPane({
+  label,
+  hint,
+  actions,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "flex h-full min-h-0 flex-col bg-background", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex h-[33px] shrink-0 items-center justify-between gap-2 px-4 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+        hint
+      ] }),
+      actions
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 [&_[data-slot=monaco-editor]]:h-full [&_[data-slot=monaco-editor]]:rounded-none [&_[data-slot=monaco-editor]]:border-0 [&_[data-slot=monaco-editor]]:border-t", children })
+  ] });
+}
+function useMarkers(response) {
+  useEffect(() => {
+    const model = monacoEditor.editor.getModels().find((candidate) => candidate.uri.toString() === SOURCE_MODEL_PATH);
+    if (!model) return;
+    const error = response == null ? void 0 : response.error;
+    if (!(error == null ? void 0 : error.line)) {
+      monacoEditor.editor.setModelMarkers(model, "expressions", []);
+      return;
+    }
+    const column = error.column ?? 1;
+    monacoEditor.editor.setModelMarkers(model, "expressions", [
+      {
+        severity: monacoEditor.MarkerSeverity.Error,
+        message: error.message,
+        startLineNumber: error.line,
+        startColumn: column,
+        endLineNumber: error.line,
+        endColumn: column + 1
+      }
+    ]);
+  }, [response]);
+}
+export {
+  ExpressionPlayground
+};
+//# sourceMappingURL=ExpressionPlayground.js.map

package/dist/expressions/playground/ExpressionPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionPlayground.js","sources":["../../../src/expressions/playground/ExpressionPlayground.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Combobox } from \"../../components/Combobox\";\nimport { Tabs } from \"../../layout/Tabs\";\nimport { MonacoEditor } from \"../../monaco/MonacoEditor\";\nimport type { Monaco } from \"@monaco-editor/react\";\nimport * as monacoEditor from \"monaco-editor\";\n\nimport {\n  mergeSpec,\n  registerGomplateLanguages,\n  spec as packagedSpec,\n} from \"../lang/index.ts\";\nimport type { GomplateSpec, RegisteredLanguages } from \"../lang/index.ts\";\nimport { DEFAULT_API_BASE, fetchExamples, fetchSpec } from \"./api.ts\";\nimport type { EvalResponse, Example } from \"./api.ts\";\nimport { LANGUAGES, languageById } from \"./languages.ts\";\nimport type { PlaygroundLanguage } from \"./languages.ts\";\nimport { GraphPanel } from \"./panels/GraphPanel.tsx\";\nimport { ResultPanel } from \"./panels/ResultPanel.tsx\";\nimport { SpecPanel } from \"./panels/SpecPanel.tsx\";\nimport { TokensPanel } from \"./panels/TokensPanel.tsx\";\nimport { RunControls } from \"./RunControls.tsx\";\nimport { registerRunAction } from \"./runAction.ts\";\nimport { useEditorTheme } from \"./useEditorTheme.ts\";\nimport { useEvaluator } from \"./useEvaluator.ts\";\nimport { useParsedInput } from \"./useParsedInput.ts\";\nimport { VerticalSplit } from \"./VerticalSplit.tsx\";\nimport { rowsToPaneHeight } from \"./verticalSplitModel\";\n\n/** What the author is editing. Hosts persist this wherever suits them. */\nexport interface PlaygroundState {\n  language: string;\n  source: string;\n  input: string;\n}\n\nexport interface ExpressionPlaygroundProps {\n  /**\n   * Where the host mounted the playground API. Defaults to `/api`; a host\n   * serving it behind a prefix passes that instead.\n   */\n  apiBase?: string;\n  /** Languages offered. Defaults to everything gomplate evaluates. */\n  languages?: PlaygroundLanguage[];\n  /**\n   * Samples to offer. Fetched from the server when omitted, so a host that\n   * configured `Options.Examples` needs no prop at all.\n   */\n  examples?: Example[];\n  /** Controlled state. Pair with `onChange`. */\n  value?: PlaygroundState;\n  onChange?: (state: PlaygroundState) => void;\n  /** Starting state when uncontrolled. */\n  defaultValue?: PlaygroundState;\n  className?: string;\n}\n\nconst SOURCE_MODEL_PATH = \"inmemory://expressions/source\";\nconst INPUT_MODEL_PATH = \"inmemory://expressions/input.yaml\";\n\nconst EMPTY_STATE: PlaygroundState = { language: \"cel\", source: \"\", input: \"\" };\n\n/**\n * An editor for one expression, the document it runs against, and its result.\n *\n * Deliberately shell-less: it renders the editors and the output panels and\n * nothing around them, so a host frames it with its own navigation. gomplate's\n * playground wraps it in an AppShell with a language rail; an app embedding it\n * in a drawer wraps it in nothing at all.\n *\n * Highlighting, completion and hover come from the catalogue the *server*\n * reports, so a host's own functions are first-class here without this\n * component knowing anything about them.\n */\nexport function ExpressionPlayground({\n  apiBase = DEFAULT_API_BASE,\n  languages: offered = LANGUAGES,\n  examples,\n  value,\n  onChange,\n  defaultValue,\n  className,\n}: ExpressionPlaygroundProps) {\n  const [uncontrolled, setUncontrolled] = useState<PlaygroundState>(\n    () => defaultValue ?? { ...EMPTY_STATE, language: offered[0]?.id ?? \"cel\" },\n  );\n  const state = value ?? uncontrolled;\n\n  const update = useCallback(\n    (patch: Partial<PlaygroundState>) => {\n      const next = { ...state, ...patch };\n      if (!value) setUncontrolled(next);\n      onChange?.(next);\n    },\n    [state, value, onChange],\n  );\n\n  const language = useMemo(\n    () => languageById(state.language, offered),\n    [state.language, offered],\n  );\n  const [outputTab, setOutputTab] = useState(\"result\");\n\n  const evaluator = useEvaluator(apiBase, {\n    language: language.evalLanguage,\n    source: state.source,\n    input: state.input,\n  });\n\n  // Completion reads the document through a ref: languages are registered once,\n  // before the first editor mounts, while the input keeps being edited after.\n  const parsedInput = useParsedInput(state.input);\n  const environmentRef = useRef<unknown>(undefined);\n  environmentRef.current = parsedInput.value;\n\n  const [served, setServed] = useState<GomplateSpec>();\n  const servedRef = useRef<GomplateSpec>(undefined);\n  servedRef.current = served;\n  const activeSpec = useMemo(() => mergeSpec(packagedSpec, served), [served]);\n\n  const [fetched, setFetched] = useState<Example[]>();\n  const available = examples ?? fetched ?? [];\n  const forLanguage = available.filter(\n    (example) => example.language === language.evalLanguage,\n  );\n\n  // Registration must happen before the first model is created, or Monaco\n  // resolves the language id to plaintext and never revisits it. Which of the\n  // two lands first is a race -- Monaco loads slowly, the fetch returns fast --\n  // so both paths apply the catalogue.\n  const registered = useRef<RegisteredLanguages | null>(null);\n  const registerLanguages = useCallback((monaco: Monaco) => {\n    const current = servedRef.current;\n    registered.current = registerGomplateLanguages(monaco, {\n      environment: () => environmentRef.current,\n      ...(current ? { spec: current } : {}),\n    });\n  }, []);\n\n  useEffect(() => {\n    const controller = new AbortController();\n    void fetchSpec(apiBase, controller.signal).then((next) => {\n      if (!controller.signal.aborted) setServed(next);\n    });\n    return () => controller.abort();\n  }, [apiBase]);\n\n  useEffect(() => {\n    if (served) registered.current?.setSpec(served);\n  }, [served]);\n\n  useEffect(() => {\n    if (examples) return;\n    const controller = new AbortController();\n    void fetchExamples(apiBase, controller.signal).then((next) => {\n      if (!controller.signal.aborted && next) setFetched(next);\n    });\n    return () => controller.abort();\n  }, [apiBase, examples]);\n\n  useMarkers(evaluator.response);\n  const applyTheme = useEditorTheme();\n\n  useEffect(() => {\n    if (outputTab === \"spec\" && !language.catalogue) setOutputTab(\"result\");\n  }, [language.catalogue, outputTab]);\n\n  // The Monaco action is registered once per editor, so it has to reach the\n  // current `run` through a ref rather than capturing it.\n  const runRef = useRef(evaluator.run);\n  runRef.current = evaluator.run;\n  const sourceEditor = useRef<Parameters<typeof registerRunAction>[0] | null>(\n    null,\n  );\n  const onEditorMount = useCallback(\n    (editor: Parameters<typeof registerRunAction>[0], monaco: Monaco) => {\n      applyTheme();\n      registerRunAction(editor, monaco, () => runRef.current());\n      if (editor.getModel()?.uri.toString() === SOURCE_MODEL_PATH)\n        sourceEditor.current = editor;\n    },\n    [applyTheme],\n  );\n\n  /** Writes a path from the object graph where the author last left the caret. */\n  const insertExpression = useCallback((expression: string) => {\n    const editor = sourceEditor.current;\n    const selection = editor?.getSelection();\n    if (!editor || !selection) return;\n    editor.executeEdits(\"object-graph\", [\n      { range: selection, text: expression, forceMoveMarkers: true },\n    ]);\n    editor.focus();\n  }, []);\n\n  const catalogue = language.catalogue\n    ? activeSpec[language.catalogue].functions\n    : [];\n\n  return (\n    <div className={`flex h-full min-h-0 ${className ?? \"\"}`}>\n      <div className=\"flex min-h-0 w-1/2 flex-col border-r border-border\">\n        <VerticalSplit\n          storageKey=\"expressions:editor-split\"\n          defaultTopHeight={rowsToPaneHeight(language.editorRows)}\n          top={\n            <EditorPane\n              label=\"Expression\"\n              actions={<RunControls evaluator={evaluator} />}\n              hint={\n                forLanguage.length > 0 ? (\n                  <Combobox\n                    options={forLanguage.map((example) => ({\n                      value: example.name,\n                      label: example.name,\n                    }))}\n                    value=\"\"\n                    allowCustomValue={false}\n                    placeholder=\"Load an example…\"\n                    ariaLabel=\"Load an example\"\n                    className=\"w-56\"\n                    onChange={(name) => {\n                      const example = forLanguage.find(\n                        (candidate) => candidate.name === name,\n                      );\n                      if (example)\n                        update({\n                          source: example.source,\n                          input: example.input,\n                        });\n                    }}\n                  />\n                ) : undefined\n              }\n            >\n              <MonacoEditor\n                value={state.source}\n                onChange={(source) => update({ source: source ?? \"\" })}\n                language={language.editorLanguage}\n                path={SOURCE_MODEL_PATH}\n                height=\"100%\"\n                beforeMount={registerLanguages}\n                onMount={onEditorMount}\n              />\n            </EditorPane>\n          }\n          bottom={\n            <EditorPane\n              label=\"Input\"\n              hint={\n                <span\n                  className={`truncate text-[11px] ${\n                    parsedInput.error\n                      ? \"text-destructive\"\n                      : \"text-muted-foreground/70\"\n                  }`}\n                  title={parsedInput.error ?? undefined}\n                >\n                  {parsedInput.error ?? \"YAML or JSON\"}\n                </span>\n              }\n            >\n              <MonacoEditor\n                value={state.input}\n                onChange={(input) => update({ input: input ?? \"\" })}\n                language=\"yaml\"\n                path={INPUT_MODEL_PATH}\n                height=\"100%\"\n                onMount={onEditorMount}\n              />\n            </EditorPane>\n          }\n        />\n      </div>\n\n      <div className=\"flex min-h-0 w-1/2 flex-col\">\n        <div className=\"border-b border-border px-4\">\n          <Tabs\n            tabs={[\n              { id: \"result\", label: \"Result\" },\n              { id: \"graph\", label: \"Object graph\" },\n              { id: \"tokens\", label: \"Tokens\" },\n              ...(language.catalogue\n                ? [{ id: \"spec\", label: \"Functions\", count: catalogue.length }]\n                : []),\n            ]}\n            value={outputTab}\n            onChange={setOutputTab}\n          />\n        </div>\n\n        <div className=\"min-h-0 flex-1\">\n          {outputTab === \"result\" ? (\n            <ResultPanel\n              response={evaluator.response}\n              pending={evaluator.pending}\n              stale={evaluator.stale}\n              onRun={evaluator.run}\n            />\n          ) : null}\n          {outputTab === \"graph\" ? (\n            <GraphPanel\n              document={parsedInput.value}\n              languageId={language.editorLanguage}\n              onInsert={insertExpression}\n            />\n          ) : null}\n          {outputTab === \"tokens\" ? (\n            <TokensPanel\n              source={state.source}\n              languageId={language.editorLanguage}\n            />\n          ) : null}\n          {outputTab === \"spec\" && language.catalogue ? (\n            <SpecPanel flavour={language.catalogue} spec={activeSpec} />\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction EditorPane({\n  label,\n  hint,\n  actions,\n  children,\n}: {\n  label: string;\n  hint?: React.ReactNode;\n  actions?: React.ReactNode;\n  children: React.ReactNode;\n}) {\n  return (\n    <section className=\"flex h-full min-h-0 flex-col bg-background\">\n      <header className=\"flex h-[33px] shrink-0 items-center justify-between gap-2 px-4 py-2\">\n        <div className=\"flex items-baseline gap-2\">\n          <h2 className=\"text-xs font-medium uppercase tracking-wide text-muted-foreground\">\n            {label}\n          </h2>\n          {hint}\n        </div>\n        {actions}\n      </header>\n      <div className=\"min-h-0 flex-1 [&_[data-slot=monaco-editor]]:h-full [&_[data-slot=monaco-editor]]:rounded-none [&_[data-slot=monaco-editor]]:border-0 [&_[data-slot=monaco-editor]]:border-t\">\n        {children}\n      </div>\n    </section>\n  );\n}\n\n/**\n * Mirrors a compile error onto the editor as a marker, so the position the\n * server reported is visible where the mistake is rather than only in the\n * result panel.\n */\nfunction useMarkers(response: EvalResponse | null) {\n  useEffect(() => {\n    const model = monacoEditor.editor\n      .getModels()\n      .find((candidate) => candidate.uri.toString() === SOURCE_MODEL_PATH);\n    if (!model) return;\n\n    const error = response?.error;\n    if (!error?.line) {\n      monacoEditor.editor.setModelMarkers(model, \"expressions\", []);\n      return;\n    }\n\n    const column = error.column ?? 1;\n    monacoEditor.editor.setModelMarkers(model, \"expressions\", [\n      {\n        severity: monacoEditor.MarkerSeverity.Error,\n        message: error.message,\n        startLineNumber: error.line,\n        startColumn: column,\n        endLineNumber: error.line,\n        endColumn: column + 1,\n      },\n    ]);\n  }, [response]);\n}\n"],"names":["packagedSpec"],"mappings":"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"}

package/dist/expressions/playground/RunControls.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("../../components/button.cjs");
+const Switch = require("../../components/Switch.cjs");
+const runShortcut = require("./runShortcut.cjs");
+const UiPlay = require("../../icons/components/UiPlay.cjs");
+function RunControls({ evaluator }) {
+  useGlobalRunShortcut(evaluator.run);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Switch.Switch,
+      {
+        checked: evaluator.autoRun,
+        onChange: evaluator.setAutoRun,
+        label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Auto-run" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        onClick: evaluator.run,
+        loading: evaluator.pending,
+        variant: evaluator.stale ? "default" : "outline",
+        size: "sm",
+        className: "[&_svg]:size-3.5",
+        title: `Run (${runShortcut.RUN_SHORTCUT_LABEL})`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UiPlay.UiPlay, { className: "mr-1.5" }),
+          "Run",
+          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "ml-2 rounded border border-current/25 px-1 text-[10px] leading-4 opacity-70", children: runShortcut.RUN_SHORTCUT_LABEL })
+        ]
+      }
+    )
+  ] });
+}
+function useGlobalRunShortcut(run) {
+  react.useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Enter") return;
+      if (!(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      run();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [run]);
+}
+exports.RunControls = RunControls;
+//# sourceMappingURL=RunControls.cjs.map

package/dist/expressions/playground/RunControls.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunControls.cjs","sources":["../../../src/expressions/playground/RunControls.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Switch } from \"../../components/Switch\";\nimport { UiPlay } from \"../../icons\";\nimport { RUN_SHORTCUT_LABEL } from \"./runShortcut\";\nimport type { Evaluator } from \"./useEvaluator.ts\";\n\ninterface RunControlsProps {\n  evaluator: Evaluator;\n}\n\nexport function RunControls({ evaluator }: RunControlsProps) {\n  useGlobalRunShortcut(evaluator.run);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch\n        checked={evaluator.autoRun}\n        onChange={evaluator.setAutoRun}\n        label={<span className=\"text-xs text-muted-foreground\">Auto-run</span>}\n      />\n      <Button\n        onClick={evaluator.run}\n        // No `loadingLabel`: Button renders it whenever it is defined, not only\n        // while loading, so it would replace \"Run\" permanently.\n        loading={evaluator.pending}\n        // A stale result is the case the button exists for, so make it the one\n        // that stands out; otherwise it is a quiet re-run control.\n        variant={evaluator.stale ? \"default\" : \"outline\"}\n        size=\"sm\"\n        className=\"[&_svg]:size-3.5\"\n        title={`Run (${RUN_SHORTCUT_LABEL})`}\n      >\n        <UiPlay className=\"mr-1.5\" />\n        Run\n        <kbd className=\"ml-2 rounded border border-current/25 px-1 text-[10px] leading-4 opacity-70\">\n          {RUN_SHORTCUT_LABEL}\n        </kbd>\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Cmd/Ctrl+Enter outside the editors.\n *\n * Monaco swallows keystrokes while it has focus, so the editors register the\n * same accelerator as a Monaco action of their own (see `runAction`). This\n * covers the rest of the page.\n */\nfunction useGlobalRunShortcut(run: () => void) {\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Enter\") return;\n      if (!(event.metaKey || event.ctrlKey)) return;\n      event.preventDefault();\n      run();\n    };\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [run]);\n}\n"],"names":["jsxs","jsx","Switch","Button","RUN_SHORTCUT_LABEL","UiPlay","useEffect"],"mappings":";;;;;;;;AAWO,SAAS,YAAY,EAAE,aAA+B;AAC3D,uBAAqB,UAAU,GAAG;AAElC,SACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACC,SAAS,UAAU;AAAA,QACnB,UAAU,UAAU;AAAA,QACpB,OAAOD,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,WAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjED,2BAAAA;AAAAA,MAACG,OAAAA;AAAAA,MAAA;AAAA,QACC,SAAS,UAAU;AAAA,QAGnB,SAAS,UAAU;AAAA,QAGnB,SAAS,UAAU,QAAQ,YAAY;AAAA,QACvC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,QAAQC,YAAAA,kBAAkB;AAAA,QAEjC,UAAA;AAAA,UAAAH,2BAAAA,IAACI,OAAAA,QAAA,EAAO,WAAU,SAAA,CAAS;AAAA,UAAE;AAAA,UAE7BJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,+EACZ,UAAAG,YAAAA,mBAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AASA,SAAS,qBAAqB,KAAiB;AAC7CE,QAAAA,UAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,QAAS;AAC3B,UAAI,EAAE,MAAM,WAAW,MAAM,SAAU;AACvC,YAAM,eAAA;AACN,UAAA;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,GAAG,CAAC;AACV;;"}

package/dist/expressions/playground/RunControls.d.ts

@@ -0,0 +1,7 @@
+import { Evaluator } from './useEvaluator.ts';
+interface RunControlsProps {
+    evaluator: Evaluator;
+}
+export declare function RunControls({ evaluator }: RunControlsProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=RunControls.d.ts.map

package/dist/expressions/playground/RunControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunControls.d.ts","sourceRoot":"","sources":["../../../src/expressions/playground/RunControls.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,UAAU,gBAAgB;IACxB,SAAS,EAAE,SAAS,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA8B1D"}

package/dist/expressions/playground/RunControls.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Button } from "../../components/button.js";
+import { Switch } from "../../components/Switch.js";
+import { RUN_SHORTCUT_LABEL } from "./runShortcut.js";
+import { UiPlay } from "../../icons/components/UiPlay.js";
+function RunControls({ evaluator }) {
+  useGlobalRunShortcut(evaluator.run);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        checked: evaluator.autoRun,
+        onChange: evaluator.setAutoRun,
+        label: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Auto-run" })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        onClick: evaluator.run,
+        loading: evaluator.pending,
+        variant: evaluator.stale ? "default" : "outline",
+        size: "sm",
+        className: "[&_svg]:size-3.5",
+        title: `Run (${RUN_SHORTCUT_LABEL})`,
+        children: [
+          /* @__PURE__ */ jsx(UiPlay, { className: "mr-1.5" }),
+          "Run",
+          /* @__PURE__ */ jsx("kbd", { className: "ml-2 rounded border border-current/25 px-1 text-[10px] leading-4 opacity-70", children: RUN_SHORTCUT_LABEL })
+        ]
+      }
+    )
+  ] });
+}
+function useGlobalRunShortcut(run) {
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key !== "Enter") return;
+      if (!(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      run();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [run]);
+}
+export {
+  RunControls
+};
+//# sourceMappingURL=RunControls.js.map

package/dist/expressions/playground/RunControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RunControls.js","sources":["../../../src/expressions/playground/RunControls.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { Button } from \"../../components/button\";\nimport { Switch } from \"../../components/Switch\";\nimport { UiPlay } from \"../../icons\";\nimport { RUN_SHORTCUT_LABEL } from \"./runShortcut\";\nimport type { Evaluator } from \"./useEvaluator.ts\";\n\ninterface RunControlsProps {\n  evaluator: Evaluator;\n}\n\nexport function RunControls({ evaluator }: RunControlsProps) {\n  useGlobalRunShortcut(evaluator.run);\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      <Switch\n        checked={evaluator.autoRun}\n        onChange={evaluator.setAutoRun}\n        label={<span className=\"text-xs text-muted-foreground\">Auto-run</span>}\n      />\n      <Button\n        onClick={evaluator.run}\n        // No `loadingLabel`: Button renders it whenever it is defined, not only\n        // while loading, so it would replace \"Run\" permanently.\n        loading={evaluator.pending}\n        // A stale result is the case the button exists for, so make it the one\n        // that stands out; otherwise it is a quiet re-run control.\n        variant={evaluator.stale ? \"default\" : \"outline\"}\n        size=\"sm\"\n        className=\"[&_svg]:size-3.5\"\n        title={`Run (${RUN_SHORTCUT_LABEL})`}\n      >\n        <UiPlay className=\"mr-1.5\" />\n        Run\n        <kbd className=\"ml-2 rounded border border-current/25 px-1 text-[10px] leading-4 opacity-70\">\n          {RUN_SHORTCUT_LABEL}\n        </kbd>\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Cmd/Ctrl+Enter outside the editors.\n *\n * Monaco swallows keystrokes while it has focus, so the editors register the\n * same accelerator as a Monaco action of their own (see `runAction`). This\n * covers the rest of the page.\n */\nfunction useGlobalRunShortcut(run: () => void) {\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Enter\") return;\n      if (!(event.metaKey || event.ctrlKey)) return;\n      event.preventDefault();\n      run();\n    };\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => window.removeEventListener(\"keydown\", onKeyDown);\n  }, [run]);\n}\n"],"names":[],"mappings":";;;;;;AAWO,SAAS,YAAY,EAAE,aAA+B;AAC3D,uBAAqB,UAAU,GAAG;AAElC,SACE,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,UAAU;AAAA,QACnB,UAAU,UAAU;AAAA,QACpB,OAAO,oBAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,WAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,UAAU;AAAA,QAGnB,SAAS,UAAU;AAAA,QAGnB,SAAS,UAAU,QAAQ,YAAY;AAAA,QACvC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,QAAQ,kBAAkB;AAAA,QAEjC,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAO,WAAU,SAAA,CAAS;AAAA,UAAE;AAAA,UAE7B,oBAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,mBAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AASA,SAAS,qBAAqB,KAAiB;AAC7C,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,QAAQ,QAAS;AAC3B,UAAI,EAAE,MAAM,WAAW,MAAM,SAAU;AACvC,YAAM,eAAA;AACN,UAAA;AAAA,IACF;AACA,WAAO,iBAAiB,WAAW,SAAS;AAC5C,WAAO,MAAM,OAAO,oBAAoB,WAAW,SAAS;AAAA,EAC9D,GAAG,CAAC,GAAG,CAAC;AACV;"}

package/dist/expressions/playground/VerticalSplit.cjs

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const verticalSplitModel = require("./verticalSplitModel.cjs");
+function VerticalSplit({
+  top,
+  bottom,
+  defaultTopHeight,
+  minTop = verticalSplitModel.rowsToPaneHeight(2),
+  minBottom = 96,
+  storageKey
+}) {
+  const container = react.useRef(null);
+  const [topHeight, setTopHeight] = react.useState(
+    () => readStored(storageKey) ?? defaultTopHeight
+  );
+  const [dragging, setDragging] = react.useState(false);
+  const hasStoredSize = react.useRef(readStored(storageKey) !== null);
+  react.useEffect(() => {
+    if (!hasStoredSize.current) setTopHeight(defaultTopHeight);
+  }, [defaultTopHeight]);
+  const clamp = react.useCallback(
+    (height) => {
+      var _a;
+      const available = ((_a = container.current) == null ? void 0 : _a.getBoundingClientRect().height) ?? 0;
+      const upperBound = Math.max(minTop, available - minBottom);
+      return Math.round(Math.max(minTop, Math.min(upperBound, height)));
+    },
+    [minTop, minBottom]
+  );
+  const commit = react.useCallback(
+    (height) => {
+      const next = clamp(height);
+      setTopHeight(next);
+      hasStoredSize.current = true;
+      if (storageKey) window.localStorage.setItem(storageKey, String(next));
+    },
+    [clamp, storageKey]
+  );
+  const onPointerDown = react.useCallback(
+    (event) => {
+      var _a;
+      event.preventDefault();
+      const rect = (_a = container.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      setDragging(true);
+      const onMove = (moveEvent) => commit(moveEvent.clientY - rect.top);
+      const onUp = () => {
+        setDragging(false);
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+    },
+    [commit]
+  );
+  const onKeyDown = react.useCallback(
+    (event) => {
+      const step = event.shiftKey ? verticalSplitModel.EDITOR_LINE_HEIGHT * 5 : verticalSplitModel.EDITOR_LINE_HEIGHT;
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        commit(topHeight - step);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        commit(topHeight + step);
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        commit(minTop);
+      }
+    },
+    [commit, topHeight, minTop]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: container, className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "min-h-0 shrink-0 overflow-hidden",
+        style: { height: topHeight },
+        children: top
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-label": "Resize the expression editor",
+        "aria-valuenow": topHeight,
+        tabIndex: 0,
+        onPointerDown,
+        onKeyDown,
+        className: `group relative h-1.5 shrink-0 cursor-row-resize bg-border transition-colors hover:bg-primary/40 focus-visible:bg-primary/60 focus-visible:outline-none ${dragging ? "bg-primary/60" : ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-x-0 -top-1 -bottom-1" })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: bottom })
+  ] });
+}
+function readStored(key) {
+  if (!key || typeof window === "undefined") return null;
+  const raw = window.localStorage.getItem(key);
+  if (raw === null) return null;
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+exports.VerticalSplit = VerticalSplit;
+//# sourceMappingURL=VerticalSplit.cjs.map

package/dist/expressions/playground/VerticalSplit.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalSplit.cjs","sources":["../../../src/expressions/playground/VerticalSplit.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { EDITOR_LINE_HEIGHT, rowsToPaneHeight } from \"./verticalSplitModel\";\n\nexport interface VerticalSplitProps {\n  top: ReactNode;\n  bottom: ReactNode;\n  /** Top-pane height in pixels, used until the reader drags the divider. */\n  defaultTopHeight: number;\n  /** Smallest the top pane may be dragged. Defaults to two rows. */\n  minTop?: number;\n  /** Smallest the bottom pane may be dragged. */\n  minBottom?: number;\n  /** localStorage key persisting the dragged height. */\n  storageKey?: string;\n}\n\n/**\n * A vertically stacked, resizable pair of panes.\n *\n * clicky-ui's SplitPane only splits horizontally, and the two editors stack, so\n * the divider here is its own component. Sizing is in pixels rather than a\n * percentage because the useful size of the expression editor is a number of\n * rows, which a percentage of a varying viewport does not express.\n */\nexport function VerticalSplit({\n  top,\n  bottom,\n  defaultTopHeight,\n  minTop = rowsToPaneHeight(2),\n  minBottom = 96,\n  storageKey,\n}: VerticalSplitProps) {\n  const container = useRef<HTMLDivElement>(null);\n  const [topHeight, setTopHeight] = useState(\n    () => readStored(storageKey) ?? defaultTopHeight,\n  );\n  const [dragging, setDragging] = useState(false);\n\n  // Only follow the language's default while the reader has not chosen a size:\n  // a dragged divider is a decision, and switching language should not undo it.\n  const hasStoredSize = useRef(readStored(storageKey) !== null);\n  useEffect(() => {\n    if (!hasStoredSize.current) setTopHeight(defaultTopHeight);\n  }, [defaultTopHeight]);\n\n  const clamp = useCallback(\n    (height: number) => {\n      const available = container.current?.getBoundingClientRect().height ?? 0;\n      const upperBound = Math.max(minTop, available - minBottom);\n      return Math.round(Math.max(minTop, Math.min(upperBound, height)));\n    },\n    [minTop, minBottom],\n  );\n\n  const commit = useCallback(\n    (height: number) => {\n      const next = clamp(height);\n      setTopHeight(next);\n      hasStoredSize.current = true;\n      if (storageKey) window.localStorage.setItem(storageKey, String(next));\n    },\n    [clamp, storageKey],\n  );\n\n  const onPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      const rect = container.current?.getBoundingClientRect();\n      if (!rect) return;\n\n      setDragging(true);\n      const onMove = (moveEvent: PointerEvent) =>\n        commit(moveEvent.clientY - rect.top);\n      const onUp = () => {\n        setDragging(false);\n        document.removeEventListener(\"pointermove\", onMove);\n        document.removeEventListener(\"pointerup\", onUp);\n      };\n      document.addEventListener(\"pointermove\", onMove);\n      document.addEventListener(\"pointerup\", onUp);\n    },\n    [commit],\n  );\n\n  // A separator that can only be dragged is unusable without a mouse, and this\n  // one gates access to the input editor.\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      const step = event.shiftKey ? EDITOR_LINE_HEIGHT * 5 : EDITOR_LINE_HEIGHT;\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        commit(topHeight - step);\n      } else if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        commit(topHeight + step);\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        commit(minTop);\n      }\n    },\n    [commit, topHeight, minTop],\n  );\n\n  return (\n    <div ref={container} className=\"flex h-full min-h-0 flex-col\">\n      <div\n        className=\"min-h-0 shrink-0 overflow-hidden\"\n        style={{ height: topHeight }}\n      >\n        {top}\n      </div>\n\n      <div\n        role=\"separator\"\n        aria-orientation=\"horizontal\"\n        aria-label=\"Resize the expression editor\"\n        aria-valuenow={topHeight}\n        tabIndex={0}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n        className={`group relative h-1.5 shrink-0 cursor-row-resize bg-border transition-colors hover:bg-primary/40 focus-visible:bg-primary/60 focus-visible:outline-none ${\n          dragging ? \"bg-primary/60\" : \"\"\n        }`}\n      >\n        {/* A 6px strip is a small target; widen the grab area without moving\n            anything by overflowing an invisible band above and below it. */}\n        <span className=\"absolute inset-x-0 -top-1 -bottom-1\" />\n      </div>\n\n      <div className=\"min-h-0 flex-1 overflow-hidden\">{bottom}</div>\n    </div>\n  );\n}\n\nfunction readStored(key: string | undefined): number | null {\n  if (!key || typeof window === \"undefined\") return null;\n  const raw = window.localStorage.getItem(key);\n  if (raw === null) return null;\n  const parsed = Number.parseInt(raw, 10);\n  return Number.isFinite(parsed) ? parsed : null;\n}\n"],"names":["rowsToPaneHeight","useRef","useState","useEffect","useCallback","EDITOR_LINE_HEIGHT","jsxs","jsx"],"mappings":"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"}

package/dist/expressions/playground/VerticalSplit.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface VerticalSplitProps {
+    top: ReactNode;
+    bottom: ReactNode;
+    /** Top-pane height in pixels, used until the reader drags the divider. */
+    defaultTopHeight: number;
+    /** Smallest the top pane may be dragged. Defaults to two rows. */
+    minTop?: number;
+    /** Smallest the bottom pane may be dragged. */
+    minBottom?: number;
+    /** localStorage key persisting the dragged height. */
+    storageKey?: string;
+}
+/**
+ * A vertically stacked, resizable pair of panes.
+ *
+ * clicky-ui's SplitPane only splits horizontally, and the two editors stack, so
+ * the divider here is its own component. Sizing is in pixels rather than a
+ * percentage because the useful size of the expression editor is a number of
+ * rows, which a percentage of a varying viewport does not express.
+ */
+export declare function VerticalSplit({ top, bottom, defaultTopHeight, minTop, minBottom, storageKey, }: VerticalSplitProps): import("react").JSX.Element;
+//# sourceMappingURL=VerticalSplit.d.ts.map

package/dist/expressions/playground/VerticalSplit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalSplit.d.ts","sourceRoot":"","sources":["../../../src/expressions/playground/VerticalSplit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,SAAS,CAAC;IACf,MAAM,EAAE,SAAS,CAAC;IAClB,0EAA0E;IAC1E,gBAAgB,EAAE,MAAM,CAAC;IACzB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,MAAM,EACN,gBAAgB,EAChB,MAA4B,EAC5B,SAAc,EACd,UAAU,GACX,EAAE,kBAAkB,+BAqGpB"}