@flanksource/clicky-ui 0.3.33 → 0.3.35

package/dist/expressions/playground/ExpressionPlayground.cjs

@@ -0,0 +1,308 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Combobox = require("../../components/Combobox.cjs");
+const Tabs = require("../../layout/Tabs.cjs");
+const MonacoEditor = require("../../monaco/MonacoEditor.cjs");
+const monacoEditor = require("monaco-editor");
+const index$1 = require("../lang/index.cjs");
+const api = require("./api.cjs");
+const languages = require("./languages.cjs");
+const GraphPanel = require("./panels/GraphPanel.cjs");
+const ResultPanel = require("./panels/ResultPanel.cjs");
+const SpecPanel = require("./panels/SpecPanel.cjs");
+const TokensPanel = require("./panels/TokensPanel.cjs");
+const RunControls = require("./RunControls.cjs");
+const runAction = require("./runAction.cjs");
+const useEditorTheme = require("./useEditorTheme.cjs");
+const useEvaluator = require("./useEvaluator.cjs");
+const useParsedInput = require("./useParsedInput.cjs");
+const VerticalSplit = require("./VerticalSplit.cjs");
+const verticalSplitModel = require("./verticalSplitModel.cjs");
+const merge = require("../lang/merge.cjs");
+const index = require("../lang/generated/index.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 monacoEditor__namespace = /* @__PURE__ */ _interopNamespaceDefault(monacoEditor);
+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 = api.DEFAULT_API_BASE,
+  languages: offered = languages.LANGUAGES,
+  examples,
+  value,
+  onChange,
+  defaultValue,
+  className
+}) {
+  const [uncontrolled, setUncontrolled] = react.useState(
+    () => {
+      var _a;
+      return defaultValue ?? { ...EMPTY_STATE, language: ((_a = offered[0]) == null ? void 0 : _a.id) ?? "cel" };
+    }
+  );
+  const state = value ?? uncontrolled;
+  const update = react.useCallback(
+    (patch) => {
+      const next = { ...state, ...patch };
+      if (!value) setUncontrolled(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [state, value, onChange]
+  );
+  const language = react.useMemo(
+    () => languages.languageById(state.language, offered),
+    [state.language, offered]
+  );
+  const [outputTab, setOutputTab] = react.useState("result");
+  const evaluator = useEvaluator.useEvaluator(apiBase, {
+    language: language.evalLanguage,
+    source: state.source,
+    input: state.input
+  });
+  const parsedInput = useParsedInput.useParsedInput(state.input);
+  const environmentRef = react.useRef(void 0);
+  environmentRef.current = parsedInput.value;
+  const [served, setServed] = react.useState();
+  const servedRef = react.useRef(void 0);
+  servedRef.current = served;
+  const activeSpec = react.useMemo(() => merge.mergeSpec(index.spec, served), [served]);
+  const [fetched, setFetched] = react.useState();
+  const available = examples ?? fetched ?? [];
+  const forLanguage = available.filter(
+    (example) => example.language === language.evalLanguage
+  );
+  const registered = react.useRef(null);
+  const registerLanguages = react.useCallback((monaco) => {
+    const current = servedRef.current;
+    registered.current = index$1.registerGomplateLanguages(monaco, {
+      environment: () => environmentRef.current,
+      ...current ? { spec: current } : {}
+    });
+  }, []);
+  react.useEffect(() => {
+    const controller = new AbortController();
+    void api.fetchSpec(apiBase, controller.signal).then((next) => {
+      if (!controller.signal.aborted) setServed(next);
+    });
+    return () => controller.abort();
+  }, [apiBase]);
+  react.useEffect(() => {
+    var _a;
+    if (served) (_a = registered.current) == null ? void 0 : _a.setSpec(served);
+  }, [served]);
+  react.useEffect(() => {
+    if (examples) return;
+    const controller = new AbortController();
+    void api.fetchExamples(apiBase, controller.signal).then((next) => {
+      if (!controller.signal.aborted && next) setFetched(next);
+    });
+    return () => controller.abort();
+  }, [apiBase, examples]);
+  useMarkers(evaluator.response);
+  const applyTheme = useEditorTheme.useEditorTheme();
+  react.useEffect(() => {
+    if (outputTab === "spec" && !language.catalogue) setOutputTab("result");
+  }, [language.catalogue, outputTab]);
+  const runRef = react.useRef(evaluator.run);
+  runRef.current = evaluator.run;
+  const sourceEditor = react.useRef(
+    null
+  );
+  const onEditorMount = react.useCallback(
+    (editor, monaco) => {
+      var _a;
+      applyTheme();
+      runAction.registerRunAction(editor, monaco, () => runRef.current());
+      if (((_a = editor.getModel()) == null ? void 0 : _a.uri.toString()) === SOURCE_MODEL_PATH)
+        sourceEditor.current = editor;
+    },
+    [applyTheme]
+  );
+  const insertExpression = react.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__ */ jsxRuntime.jsxs("div", { className: `flex h-full min-h-0 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 w-1/2 flex-col border-r border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+      VerticalSplit.VerticalSplit,
+      {
+        storageKey: "expressions:editor-split",
+        defaultTopHeight: verticalSplitModel.rowsToPaneHeight(language.editorRows),
+        top: /* @__PURE__ */ jsxRuntime.jsx(
+          EditorPane,
+          {
+            label: "Expression",
+            actions: /* @__PURE__ */ jsxRuntime.jsx(RunControls.RunControls, { evaluator }),
+            hint: forLanguage.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+              Combobox.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__ */ jsxRuntime.jsx(
+              MonacoEditor.MonacoEditor,
+              {
+                value: state.source,
+                onChange: (source) => update({ source: source ?? "" }),
+                language: language.editorLanguage,
+                path: SOURCE_MODEL_PATH,
+                height: "100%",
+                beforeMount: registerLanguages,
+                onMount: onEditorMount
+              }
+            )
+          }
+        ),
+        bottom: /* @__PURE__ */ jsxRuntime.jsx(
+          EditorPane,
+          {
+            label: "Input",
+            hint: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              MonacoEditor.MonacoEditor,
+              {
+                value: state.input,
+                onChange: (input) => update({ input: input ?? "" }),
+                language: "yaml",
+                path: INPUT_MODEL_PATH,
+                height: "100%",
+                onMount: onEditorMount
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 w-1/2 flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Tabs.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__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1", children: [
+        outputTab === "result" ? /* @__PURE__ */ jsxRuntime.jsx(
+          ResultPanel.ResultPanel,
+          {
+            response: evaluator.response,
+            pending: evaluator.pending,
+            stale: evaluator.stale,
+            onRun: evaluator.run
+          }
+        ) : null,
+        outputTab === "graph" ? /* @__PURE__ */ jsxRuntime.jsx(
+          GraphPanel.GraphPanel,
+          {
+            document: parsedInput.value,
+            languageId: language.editorLanguage,
+            onInsert: insertExpression
+          }
+        ) : null,
+        outputTab === "tokens" ? /* @__PURE__ */ jsxRuntime.jsx(
+          TokensPanel.TokensPanel,
+          {
+            source: state.source,
+            languageId: language.editorLanguage
+          }
+        ) : null,
+        outputTab === "spec" && language.catalogue ? /* @__PURE__ */ jsxRuntime.jsx(SpecPanel.SpecPanel, { flavour: language.catalogue, spec: activeSpec }) : null
+      ] })
+    ] })
+  ] });
+}
+function EditorPane({
+  label,
+  hint,
+  actions,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex h-full min-h-0 flex-col bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex h-[33px] shrink-0 items-center justify-between gap-2 px-4 py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: label }),
+        hint
+      ] }),
+      actions
+    ] }),
+    /* @__PURE__ */ jsxRuntime.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) {
+  react.useEffect(() => {
+    const model = monacoEditor__namespace.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__namespace.editor.setModelMarkers(model, "expressions", []);
+      return;
+    }
+    const column = error.column ?? 1;
+    monacoEditor__namespace.editor.setModelMarkers(model, "expressions", [
+      {
+        severity: monacoEditor__namespace.MarkerSeverity.Error,
+        message: error.message,
+        startLineNumber: error.line,
+        startColumn: column,
+        endLineNumber: error.line,
+        endColumn: column + 1
+      }
+    ]);
+  }, [response]);
+}
+exports.ExpressionPlayground = ExpressionPlayground;
+//# sourceMappingURL=ExpressionPlayground.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionPlayground.cjs","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":["DEFAULT_API_BASE","LANGUAGES","useState","useCallback","useMemo","languageById","useEvaluator","useParsedInput","useRef","mergeSpec","packagedSpec","registerGomplateLanguages","useEffect","fetchSpec","fetchExamples","useEditorTheme","registerRunAction","jsx","VerticalSplit","rowsToPaneHeight","RunControls","Combobox","MonacoEditor","jsxs","Tabs","ResultPanel","GraphPanel","TokensPanel","SpecPanel","monacoEditor"],"mappings":"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"}

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

@@ -0,0 +1,42 @@
+import { Example } from './api.ts';
+import { PlaygroundLanguage } from './languages.ts';
+/** What the author is editing. Hosts persist this wherever suits them. */
+export interface PlaygroundState {
+    language: string;
+    source: string;
+    input: string;
+}
+export interface ExpressionPlaygroundProps {
+    /**
+     * Where the host mounted the playground API. Defaults to `/api`; a host
+     * serving it behind a prefix passes that instead.
+     */
+    apiBase?: string;
+    /** Languages offered. Defaults to everything gomplate evaluates. */
+    languages?: PlaygroundLanguage[];
+    /**
+     * Samples to offer. Fetched from the server when omitted, so a host that
+     * configured `Options.Examples` needs no prop at all.
+     */
+    examples?: Example[];
+    /** Controlled state. Pair with `onChange`. */
+    value?: PlaygroundState;
+    onChange?: (state: PlaygroundState) => void;
+    /** Starting state when uncontrolled. */
+    defaultValue?: PlaygroundState;
+    className?: string;
+}
+/**
+ * An editor for one expression, the document it runs against, and its result.
+ *
+ * Deliberately shell-less: it renders the editors and the output panels and
+ * nothing around them, so a host frames it with its own navigation. gomplate's
+ * playground wraps it in an AppShell with a language rail; an app embedding it
+ * in a drawer wraps it in nothing at all.
+ *
+ * Highlighting, completion and hover come from the catalogue the *server*
+ * reports, so a host's own functions are first-class here without this
+ * component knowing anything about them.
+ */
+export declare function ExpressionPlayground({ apiBase, languages: offered, examples, value, onChange, defaultValue, className, }: ExpressionPlaygroundProps): import("react").JSX.Element;
+//# sourceMappingURL=ExpressionPlayground.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpressionPlayground.d.ts","sourceRoot":"","sources":["../../../src/expressions/playground/ExpressionPlayground.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAgB,OAAO,EAAE,MAAM,UAAU,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAazD,0EAA0E;AAC1E,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oEAAoE;IACpE,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC5C,wCAAwC;IACxC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAOD;;;;;;;;;;;GAWG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,OAA0B,EAC1B,SAAS,EAAE,OAAmB,EAC9B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,GACV,EAAE,yBAAyB,+BA8O3B"}