@flanksource/clicky-ui 0.3.36 → 0.3.38

package/dist/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/expressions/playground/ExpressionPlayground.cjs

@@ -10,7 +10,7 @@ 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 ResultView = require("./panels/ResultView.cjs");
 const SpecPanel = require("./panels/SpecPanel.cjs");
 const TokensPanel = require("./panels/TokensPanel.cjs");
 const RunControls = require("./RunControls.cjs");
@@ -18,6 +18,7 @@ const runAction = require("./runAction.cjs");
 const useEditorTheme = require("./useEditorTheme.cjs");
 const useEvaluator = require("./useEvaluator.cjs");
 const useParsedInput = require("./useParsedInput.cjs");
+const useSampleRuns = require("./useSampleRuns.cjs");
 const VerticalSplit = require("./VerticalSplit.cjs");
 const verticalSplitModel = require("./verticalSplitModel.cjs");
 const merge = require("../lang/merge.cjs");
@@ -46,6 +47,13 @@ function ExpressionPlayground({
   apiBase = api.DEFAULT_API_BASE,
   languages: offered = languages.LANGUAGES,
   examples,
+  spec,
+  evaluate,
+  beforeRun,
+  samples = [],
+  expectation,
+  executionMode,
+  formatPath,
   value,
   onChange,
   defaultValue,
@@ -75,14 +83,29 @@ function ExpressionPlayground({
     language: language.evalLanguage,
     source: state.source,
     input: state.input
+  }, {
+    ...executionMode ? { mode: executionMode } : {},
+    ...evaluate ? { evaluate } : {},
+    ...beforeRun ? { beforeRun } : {}
   });
+  const [resultView, setResultView] = react.useState("input");
+  const sampleRuns = useSampleRuns.useSampleRuns(apiBase, {
+    language: language.evalLanguage,
+    source: state.source,
+    samples
+  }, {
+    ...evaluate ? { evaluate } : {},
+    ...beforeRun ? { beforeRun } : {}
+  });
+  const showingSamples = samples.length > 1 && outputTab === "result" && resultView === "samples";
+  const runner = showingSamples ? { ...evaluator, explicit: true, autoRun: false, run: sampleRuns.run, pending: sampleRuns.pending, stale: sampleRuns.stale } : evaluator;
   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 activeSpec = react.useMemo(() => merge.mergeSpec(index.spec, spec ?? served), [spec, served]);
   const [fetched, setFetched] = react.useState();
   const available = examples ?? fetched ?? [];
   const forLanguage = available.filter(
@@ -90,23 +113,24 @@ function ExpressionPlayground({
   );
   const registered = react.useRef(null);
   const registerLanguages = react.useCallback((monaco) => {
-    const current = servedRef.current;
+    const current = spec ?? servedRef.current;
     registered.current = index$1.registerGomplateLanguages(monaco, {
       environment: () => environmentRef.current,
       ...current ? { spec: current } : {}
     });
-  }, []);
+  }, [spec]);
   react.useEffect(() => {
+    if (spec) return;
     const controller = new AbortController();
     void api.fetchSpec(apiBase, controller.signal).then((next) => {
       if (!controller.signal.aborted) setServed(next);
     });
     return () => controller.abort();
-  }, [apiBase]);
+  }, [apiBase, spec]);
   react.useEffect(() => {
     var _a;
-    if (served) (_a = registered.current) == null ? void 0 : _a.setSpec(served);
-  }, [served]);
+    if (spec ?? served) (_a = registered.current) == null ? void 0 : _a.setSpec(spec ?? served);
+  }, [spec, served]);
   react.useEffect(() => {
     if (examples) return;
     const controller = new AbortController();
@@ -120,8 +144,8 @@ function ExpressionPlayground({
   react.useEffect(() => {
     if (outputTab === "spec" && !language.catalogue) setOutputTab("result");
   }, [language.catalogue, outputTab]);
-  const runRef = react.useRef(evaluator.run);
-  runRef.current = evaluator.run;
+  const runRef = react.useRef(runner.run);
+  runRef.current = runner.run;
   const sourceEditor = react.useRef(
     null
   );
@@ -155,7 +179,7 @@ function ExpressionPlayground({
           EditorPane,
           {
             label: "Expression",
-            actions: /* @__PURE__ */ jsxRuntime.jsx(RunControls.RunControls, { evaluator }),
+            actions: /* @__PURE__ */ jsxRuntime.jsx(RunControls.RunControls, { evaluator: runner, label: showingSamples ? "Run all" : "Run" }),
             hint: forLanguage.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               Combobox.Combobox,
               {
@@ -237,12 +261,15 @@ function ExpressionPlayground({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1", children: [
         outputTab === "result" ? /* @__PURE__ */ jsxRuntime.jsx(
-          ResultPanel.ResultPanel,
+          ResultView.ResultView,
           {
-            response: evaluator.response,
-            pending: evaluator.pending,
-            stale: evaluator.stale,
-            onRun: evaluator.run
+            view: resultView,
+            onViewChange: setResultView,
+            evaluator,
+            sampleRuns,
+            samples,
+            expectation,
+            onUseInput: (input) => update({ input })
           }
         ) : null,
         outputTab === "graph" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -250,7 +277,8 @@ function ExpressionPlayground({
           {
             document: parsedInput.value,
             languageId: language.editorLanguage,
-            onInsert: insertExpression
+            onInsert: insertExpression,
+            ...formatPath ? { formatPath } : {}
           }
         ) : null,
         outputTab === "tokens" ? /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -1 +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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"}
+{"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 { EvalRequest, EvalResponse, Example, PlaygroundSample, ResultExpectation } from \"./api.ts\";\nimport { LANGUAGES, languageById } from \"./languages.ts\";\nimport type { PlaygroundLanguage } from \"./languages.ts\";\nimport { GraphPanel } from \"./panels/GraphPanel.tsx\";\nimport { ResultView, type ResultViewId } from \"./panels/ResultView.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, type Evaluator } from \"./useEvaluator.ts\";\nimport { useParsedInput } from \"./useParsedInput.ts\";\nimport { useSampleRuns } from \"./useSampleRuns.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  /** Host catalogue. When supplied, the playground does not fetch /spec. */\n  spec?: GomplateSpec;\n  /** Host evaluator for runtimes beyond the packaged playground API. */\n  evaluate?: (request: EvalRequest, signal: AbortSignal) => Promise<EvalResponse>;\n  /**\n   * Runs before every run with the evaluations it is about to make -- one for\n   * the current input, one per sample for \"All samples\". Return false to cancel.\n   */\n  beforeRun?: (requests: EvalRequest[]) => boolean | Promise<boolean>;\n  /**\n   * Inputs the expression should hold for. With two or more, the Result tab\n   * offers \"All samples\", which evaluates the expression against each in turn.\n   */\n  samples?: PlaygroundSample[];\n  /** What the result is going into: allowed values, rules and a validator. */\n  expectation?: ResultExpectation;\n  /** Explicit mode disables evaluation on mount and edits. */\n  executionMode?: \"automatic\" | \"explicit\";\n  /** Host syntax for paths inserted from the object graph. */\n  formatPath?: (segments: Array<string | number>) => string | null;\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  spec,\n  evaluate,\n  beforeRun,\n  samples = [],\n  expectation,\n  executionMode,\n  formatPath,\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    ...(executionMode ? { mode: executionMode } : {}),\n    ...(evaluate ? { evaluate } : {}),\n    ...(beforeRun ? { beforeRun } : {}),\n  });\n\n  const [resultView, setResultView] = useState<ResultViewId>(\"input\");\n  const sampleRuns = useSampleRuns(apiBase, {\n    language: language.evalLanguage,\n    source: state.source,\n    samples,\n  }, {\n    ...(evaluate ? { evaluate } : {}),\n    ...(beforeRun ? { beforeRun } : {}),\n  });\n  // Run, its shortcut and the Monaco action all drive whichever result view is\n  // showing, so \"run\" never means evaluating something the author cannot see.\n  const showingSamples = samples.length > 1 && outputTab === \"result\" && resultView === \"samples\";\n  const runner: Evaluator = showingSamples\n    ? { ...evaluator, explicit: true, autoRun: false, run: sampleRuns.run, pending: sampleRuns.pending, stale: sampleRuns.stale }\n    : evaluator;\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, spec ?? served), [spec, 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 = spec ?? servedRef.current;\n    registered.current = registerGomplateLanguages(monaco, {\n      environment: () => environmentRef.current,\n      ...(current ? { spec: current } : {}),\n    });\n  }, [spec]);\n\n  useEffect(() => {\n    if (spec) return;\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, spec]);\n\n  useEffect(() => {\n    if (spec ?? served) registered.current?.setSpec(spec ?? served);\n  }, [spec, 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(runner.run);\n  runRef.current = runner.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={runner} label={showingSamples ? \"Run all\" : \"Run\"} />}\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            <ResultView\n              view={resultView}\n              onViewChange={setResultView}\n              evaluator={evaluator}\n              sampleRuns={sampleRuns}\n              samples={samples}\n              expectation={expectation}\n              onUseInput={(input) => update({ input })}\n            />\n          ) : null}\n          {outputTab === \"graph\" ? (\n            <GraphPanel\n              document={parsedInput.value}\n              languageId={language.editorLanguage}\n              onInsert={insertExpression}\n              {...(formatPath ? { formatPath } : {})}\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","useSampleRuns","useParsedInput","useRef","mergeSpec","packagedSpec","registerGomplateLanguages","useEffect","fetchSpec","fetchExamples","useEditorTheme","registerRunAction","jsx","VerticalSplit","rowsToPaneHeight","RunControls","Combobox","MonacoEditor","jsxs","Tabs","ResultView","GraphPanel","TokensPanel","SpecPanel","monacoEditor"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
-import { Example } from './api.ts';
+import { GomplateSpec } from '../lang/index.ts';
+import { EvalRequest, EvalResponse, Example, PlaygroundSample, ResultExpectation } from './api.ts';
 import { PlaygroundLanguage } from './languages.ts';
 /** What the author is editing. Hosts persist this wherever suits them. */
 export interface PlaygroundState {
@@ -19,6 +20,26 @@ export interface ExpressionPlaygroundProps {
      * configured `Options.Examples` needs no prop at all.
      */
     examples?: Example[];
+    /** Host catalogue. When supplied, the playground does not fetch /spec. */
+    spec?: GomplateSpec;
+    /** Host evaluator for runtimes beyond the packaged playground API. */
+    evaluate?: (request: EvalRequest, signal: AbortSignal) => Promise<EvalResponse>;
+    /**
+     * Runs before every run with the evaluations it is about to make -- one for
+     * the current input, one per sample for "All samples". Return false to cancel.
+     */
+    beforeRun?: (requests: EvalRequest[]) => boolean | Promise<boolean>;
+    /**
+     * Inputs the expression should hold for. With two or more, the Result tab
+     * offers "All samples", which evaluates the expression against each in turn.
+     */
+    samples?: PlaygroundSample[];
+    /** What the result is going into: allowed values, rules and a validator. */
+    expectation?: ResultExpectation;
+    /** Explicit mode disables evaluation on mount and edits. */
+    executionMode?: "automatic" | "explicit";
+    /** Host syntax for paths inserted from the object graph. */
+    formatPath?: (segments: Array<string | number>) => string | null;
     /** Controlled state. Pair with `onChange`. */
     value?: PlaygroundState;
     onChange?: (state: PlaygroundState) => void;
@@ -38,5 +59,5 @@ export interface ExpressionPlaygroundProps {
  * 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;
+export declare function ExpressionPlayground({ apiBase, languages: offered, examples, spec, evaluate, beforeRun, samples, expectation, executionMode, formatPath, value, onChange, defaultValue, className, }: ExpressionPlaygroundProps): import("react").JSX.Element;
 //# sourceMappingURL=ExpressionPlayground.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"ExpressionPlayground.d.ts","sourceRoot":"","sources":["../../../src/expressions/playground/ExpressionPlayground.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,YAAY,EAAuB,MAAM,kBAAkB,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAExG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAczD,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,0EAA0E;IAC1E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,YAAY,CAAC,CAAC;IAChF;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACpE;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,4EAA4E;IAC5E,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IACzC,4DAA4D;IAC5D,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,IAAI,CAAC;IACjE,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,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,OAAY,EACZ,WAAW,EACX,aAAa,EACb,UAAU,EACV,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,GACV,EAAE,yBAAyB,+BAuQ3B"}

package/dist/expressions/playground/ExpressionPlayground.js

@@ -8,7 +8,7 @@ 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 { ResultView } from "./panels/ResultView.js";
 import { SpecPanel } from "./panels/SpecPanel.js";
 import { TokensPanel } from "./panels/TokensPanel.js";
 import { RunControls } from "./RunControls.js";
@@ -16,6 +16,7 @@ import { registerRunAction } from "./runAction.js";
 import { useEditorTheme } from "./useEditorTheme.js";
 import { useEvaluator } from "./useEvaluator.js";
 import { useParsedInput } from "./useParsedInput.js";
+import { useSampleRuns } from "./useSampleRuns.js";
 import { VerticalSplit } from "./VerticalSplit.js";
 import { rowsToPaneHeight } from "./verticalSplitModel.js";
 import { mergeSpec } from "../lang/merge.js";
@@ -27,6 +28,13 @@ function ExpressionPlayground({
   apiBase = DEFAULT_API_BASE,
   languages: offered = LANGUAGES,
   examples,
+  spec: spec$1,
+  evaluate,
+  beforeRun,
+  samples = [],
+  expectation,
+  executionMode,
+  formatPath,
   value,
   onChange,
   defaultValue,
@@ -56,14 +64,29 @@ function ExpressionPlayground({
     language: language.evalLanguage,
     source: state.source,
     input: state.input
+  }, {
+    ...executionMode ? { mode: executionMode } : {},
+    ...evaluate ? { evaluate } : {},
+    ...beforeRun ? { beforeRun } : {}
   });
+  const [resultView, setResultView] = useState("input");
+  const sampleRuns = useSampleRuns(apiBase, {
+    language: language.evalLanguage,
+    source: state.source,
+    samples
+  }, {
+    ...evaluate ? { evaluate } : {},
+    ...beforeRun ? { beforeRun } : {}
+  });
+  const showingSamples = samples.length > 1 && outputTab === "result" && resultView === "samples";
+  const runner = showingSamples ? { ...evaluator, explicit: true, autoRun: false, run: sampleRuns.run, pending: sampleRuns.pending, stale: sampleRuns.stale } : evaluator;
   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 activeSpec = useMemo(() => mergeSpec(spec, spec$1 ?? served), [spec$1, served]);
   const [fetched, setFetched] = useState();
   const available = examples ?? fetched ?? [];
   const forLanguage = available.filter(
@@ -71,23 +94,24 @@ function ExpressionPlayground({
   );
   const registered = useRef(null);
   const registerLanguages = useCallback((monaco) => {
-    const current = servedRef.current;
+    const current = spec$1 ?? servedRef.current;
     registered.current = registerGomplateLanguages(monaco, {
       environment: () => environmentRef.current,
       ...current ? { spec: current } : {}
     });
-  }, []);
+  }, [spec$1]);
   useEffect(() => {
+    if (spec$1) return;
     const controller = new AbortController();
     void fetchSpec(apiBase, controller.signal).then((next) => {
       if (!controller.signal.aborted) setServed(next);
     });
     return () => controller.abort();
-  }, [apiBase]);
+  }, [apiBase, spec$1]);
   useEffect(() => {
     var _a;
-    if (served) (_a = registered.current) == null ? void 0 : _a.setSpec(served);
-  }, [served]);
+    if (spec$1 ?? served) (_a = registered.current) == null ? void 0 : _a.setSpec(spec$1 ?? served);
+  }, [spec$1, served]);
   useEffect(() => {
     if (examples) return;
     const controller = new AbortController();
@@ -101,8 +125,8 @@ function ExpressionPlayground({
   useEffect(() => {
     if (outputTab === "spec" && !language.catalogue) setOutputTab("result");
   }, [language.catalogue, outputTab]);
-  const runRef = useRef(evaluator.run);
-  runRef.current = evaluator.run;
+  const runRef = useRef(runner.run);
+  runRef.current = runner.run;
   const sourceEditor = useRef(
     null
   );
@@ -136,7 +160,7 @@ function ExpressionPlayground({
           EditorPane,
           {
             label: "Expression",
-            actions: /* @__PURE__ */ jsx(RunControls, { evaluator }),
+            actions: /* @__PURE__ */ jsx(RunControls, { evaluator: runner, label: showingSamples ? "Run all" : "Run" }),
             hint: forLanguage.length > 0 ? /* @__PURE__ */ jsx(
               Combobox,
               {
@@ -218,12 +242,15 @@ function ExpressionPlayground({
       ) }),
       /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1", children: [
         outputTab === "result" ? /* @__PURE__ */ jsx(
-          ResultPanel,
+          ResultView,
           {
-            response: evaluator.response,
-            pending: evaluator.pending,
-            stale: evaluator.stale,
-            onRun: evaluator.run
+            view: resultView,
+            onViewChange: setResultView,
+            evaluator,
+            sampleRuns,
+            samples,
+            expectation,
+            onUseInput: (input) => update({ input })
           }
         ) : null,
         outputTab === "graph" ? /* @__PURE__ */ jsx(
@@ -231,7 +258,8 @@ function ExpressionPlayground({
           {
             document: parsedInput.value,
             languageId: language.editorLanguage,
-            onInsert: insertExpression
+            onInsert: insertExpression,
+            ...formatPath ? { formatPath } : {}
           }
         ) : null,
         outputTab === "tokens" ? /* @__PURE__ */ jsx(

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

@@ -1 +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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"}
+{"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 { EvalRequest, EvalResponse, Example, PlaygroundSample, ResultExpectation } from \"./api.ts\";\nimport { LANGUAGES, languageById } from \"./languages.ts\";\nimport type { PlaygroundLanguage } from \"./languages.ts\";\nimport { GraphPanel } from \"./panels/GraphPanel.tsx\";\nimport { ResultView, type ResultViewId } from \"./panels/ResultView.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, type Evaluator } from \"./useEvaluator.ts\";\nimport { useParsedInput } from \"./useParsedInput.ts\";\nimport { useSampleRuns } from \"./useSampleRuns.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  /** Host catalogue. When supplied, the playground does not fetch /spec. */\n  spec?: GomplateSpec;\n  /** Host evaluator for runtimes beyond the packaged playground API. */\n  evaluate?: (request: EvalRequest, signal: AbortSignal) => Promise<EvalResponse>;\n  /**\n   * Runs before every run with the evaluations it is about to make -- one for\n   * the current input, one per sample for \"All samples\". Return false to cancel.\n   */\n  beforeRun?: (requests: EvalRequest[]) => boolean | Promise<boolean>;\n  /**\n   * Inputs the expression should hold for. With two or more, the Result tab\n   * offers \"All samples\", which evaluates the expression against each in turn.\n   */\n  samples?: PlaygroundSample[];\n  /** What the result is going into: allowed values, rules and a validator. */\n  expectation?: ResultExpectation;\n  /** Explicit mode disables evaluation on mount and edits. */\n  executionMode?: \"automatic\" | \"explicit\";\n  /** Host syntax for paths inserted from the object graph. */\n  formatPath?: (segments: Array<string | number>) => string | null;\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  spec,\n  evaluate,\n  beforeRun,\n  samples = [],\n  expectation,\n  executionMode,\n  formatPath,\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    ...(executionMode ? { mode: executionMode } : {}),\n    ...(evaluate ? { evaluate } : {}),\n    ...(beforeRun ? { beforeRun } : {}),\n  });\n\n  const [resultView, setResultView] = useState<ResultViewId>(\"input\");\n  const sampleRuns = useSampleRuns(apiBase, {\n    language: language.evalLanguage,\n    source: state.source,\n    samples,\n  }, {\n    ...(evaluate ? { evaluate } : {}),\n    ...(beforeRun ? { beforeRun } : {}),\n  });\n  // Run, its shortcut and the Monaco action all drive whichever result view is\n  // showing, so \"run\" never means evaluating something the author cannot see.\n  const showingSamples = samples.length > 1 && outputTab === \"result\" && resultView === \"samples\";\n  const runner: Evaluator = showingSamples\n    ? { ...evaluator, explicit: true, autoRun: false, run: sampleRuns.run, pending: sampleRuns.pending, stale: sampleRuns.stale }\n    : evaluator;\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, spec ?? served), [spec, 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 = spec ?? servedRef.current;\n    registered.current = registerGomplateLanguages(monaco, {\n      environment: () => environmentRef.current,\n      ...(current ? { spec: current } : {}),\n    });\n  }, [spec]);\n\n  useEffect(() => {\n    if (spec) return;\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, spec]);\n\n  useEffect(() => {\n    if (spec ?? served) registered.current?.setSpec(spec ?? served);\n  }, [spec, 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(runner.run);\n  runRef.current = runner.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={runner} label={showingSamples ? \"Run all\" : \"Run\"} />}\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            <ResultView\n              view={resultView}\n              onViewChange={setResultView}\n              evaluator={evaluator}\n              sampleRuns={sampleRuns}\n              samples={samples}\n              expectation={expectation}\n              onUseInput={(input) => update({ input })}\n            />\n          ) : null}\n          {outputTab === \"graph\" ? (\n            <GraphPanel\n              document={parsedInput.value}\n              languageId={language.editorLanguage}\n              onInsert={insertExpression}\n              {...(formatPath ? { formatPath } : {})}\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":["spec","packagedSpec"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8EA,MAAM,oBAAoB;AAC1B,MAAM,mBAAmB;AAEzB,MAAM,cAA+B,EAAE,UAAU,OAAO,QAAQ,IAAI,OAAO,GAAA;AAcpE,SAAS,qBAAqB;AAAA,EACnC,UAAU;AAAA,EACV,WAAW,UAAU;AAAA,EACrB;AAAA,EAAA,MACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAA;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;;AAAM,6BAAgB,EAAE,GAAG,aAAa,YAAU,aAAQ,CAAC,MAAT,mBAAY,OAAM,MAAA;AAAA;AAAA,EAAM;AAE5E,QAAM,QAAQ,SAAS;AAEvB,QAAM,SAAS;AAAA,IACb,CAAC,UAAoC;AACnC,YAAM,OAAO,EAAE,GAAG,OAAO,GAAG,MAAA;AAC5B,UAAI,CAAC,MAAO,iBAAgB,IAAI;AAChC,2CAAW;AAAA,IACb;AAAA,IACA,CAAC,OAAO,OAAO,QAAQ;AAAA,EAAA;AAGzB,QAAM,WAAW;AAAA,IACf,MAAM,aAAa,MAAM,UAAU,OAAO;AAAA,IAC1C,CAAC,MAAM,UAAU,OAAO;AAAA,EAAA;AAE1B,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,QAAQ;AAEnD,QAAM,YAAY,aAAa,SAAS;AAAA,IACtC,UAAU,SAAS;AAAA,IACnB,QAAQ,MAAM;AAAA,IACd,OAAO,MAAM;AAAA,EAAA,GACZ;AAAA,IACD,GAAI,gBAAgB,EAAE,MAAM,cAAA,IAAkB,CAAA;AAAA,IAC9C,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,IAC9B,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,EAAC,CAClC;AAED,QAAM,CAAC,YAAY,aAAa,IAAI,SAAuB,OAAO;AAClE,QAAM,aAAa,cAAc,SAAS;AAAA,IACxC,UAAU,SAAS;AAAA,IACnB,QAAQ,MAAM;AAAA,IACd;AAAA,EAAA,GACC;AAAA,IACD,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,IAC9B,GAAI,YAAY,EAAE,cAAc,CAAA;AAAA,EAAC,CAClC;AAGD,QAAM,iBAAiB,QAAQ,SAAS,KAAK,cAAc,YAAY,eAAe;AACtF,QAAM,SAAoB,iBACtB,EAAE,GAAG,WAAW,UAAU,MAAM,SAAS,OAAO,KAAK,WAAW,KAAK,SAAS,WAAW,SAAS,OAAO,WAAW,UACpH;AAIJ,QAAM,cAAc,eAAe,MAAM,KAAK;AAC9C,QAAM,iBAAiB,OAAgB,MAAS;AAChD,iBAAe,UAAU,YAAY;AAErC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAA;AAC5B,QAAM,YAAY,OAAqB,MAAS;AAChD,YAAU,UAAU;AACpB,QAAM,aAAa,QAAQ,MAAM,UAAUC,MAAcD,UAAQ,MAAM,GAAG,CAACA,QAAM,MAAM,CAAC;AAExF,QAAM,CAAC,SAAS,UAAU,IAAI,SAAA;AAC9B,QAAM,YAAY,YAAY,WAAW,CAAA;AACzC,QAAM,cAAc,UAAU;AAAA,IAC5B,CAAC,YAAY,QAAQ,aAAa,SAAS;AAAA,EAAA;AAO7C,QAAM,aAAa,OAAmC,IAAI;AAC1D,QAAM,oBAAoB,YAAY,CAAC,WAAmB;AACxD,UAAM,UAAUA,UAAQ,UAAU;AAClC,eAAW,UAAU,0BAA0B,QAAQ;AAAA,MACrD,aAAa,MAAM,eAAe;AAAA,MAClC,GAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAAA,IAAC,CACpC;AAAA,EACH,GAAG,CAACA,MAAI,CAAC;AAET,YAAU,MAAM;AACd,QAAIA,OAAM;AACV,UAAM,aAAa,IAAI,gBAAA;AACvB,SAAK,UAAU,SAAS,WAAW,MAAM,EAAE,KAAK,CAAC,SAAS;AACxD,UAAI,CAAC,WAAW,OAAO,mBAAmB,IAAI;AAAA,IAChD,CAAC;AACD,WAAO,MAAM,WAAW,MAAA;AAAA,EAC1B,GAAG,CAAC,SAASA,MAAI,CAAC;AAElB,YAAU,MAAM;;AACd,QAAIA,UAAQ,OAAQ,kBAAW,YAAX,mBAAoB,QAAQA,UAAQ;AAAA,EAC1D,GAAG,CAACA,QAAM,MAAM,CAAC;AAEjB,YAAU,MAAM;AACd,QAAI,SAAU;AACd,UAAM,aAAa,IAAI,gBAAA;AACvB,SAAK,cAAc,SAAS,WAAW,MAAM,EAAE,KAAK,CAAC,SAAS;AAC5D,UAAI,CAAC,WAAW,OAAO,WAAW,iBAAiB,IAAI;AAAA,IACzD,CAAC;AACD,WAAO,MAAM,WAAW,MAAA;AAAA,EAC1B,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,aAAW,UAAU,QAAQ;AAC7B,QAAM,aAAa,eAAA;AAEnB,YAAU,MAAM;AACd,QAAI,cAAc,UAAU,CAAC,SAAS,wBAAwB,QAAQ;AAAA,EACxE,GAAG,CAAC,SAAS,WAAW,SAAS,CAAC;AAIlC,QAAM,SAAS,OAAO,OAAO,GAAG;AAChC,SAAO,UAAU,OAAO;AACxB,QAAM,eAAe;AAAA,IACnB;AAAA,EAAA;AAEF,QAAM,gBAAgB;AAAA,IACpB,CAAC,QAAiD,WAAmB;;AACnE,iBAAA;AACA,wBAAkB,QAAQ,QAAQ,MAAM,OAAO,SAAS;AACxD,YAAI,YAAO,SAAA,MAAP,mBAAmB,IAAI,gBAAe;AACxC,qBAAa,UAAU;AAAA,IAC3B;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAIb,QAAM,mBAAmB,YAAY,CAAC,eAAuB;AAC3D,UAAM,SAAS,aAAa;AAC5B,UAAM,YAAY,iCAAQ;AAC1B,QAAI,CAAC,UAAU,CAAC,UAAW;AAC3B,WAAO,aAAa,gBAAgB;AAAA,MAClC,EAAE,OAAO,WAAW,MAAM,YAAY,kBAAkB,KAAA;AAAA,IAAK,CAC9D;AACD,WAAO,MAAA;AAAA,EACT,GAAG,CAAA,CAAE;AAEL,QAAM,YAAY,SAAS,YACvB,WAAW,SAAS,SAAS,EAAE,YAC/B,CAAA;AAEJ,8BACG,OAAA,EAAI,WAAW,uBAAuB,aAAa,EAAE,IACpD,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,sDACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAW;AAAA,QACX,kBAAkB,iBAAiB,SAAS,UAAU;AAAA,QACtD,KACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,6BAAU,aAAA,EAAY,WAAW,QAAQ,OAAO,iBAAiB,YAAY,OAAO;AAAA,YACpF,MACE,YAAY,SAAS,IACnB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAS,YAAY,IAAI,CAAC,aAAa;AAAA,kBACrC,OAAO,QAAQ;AAAA,kBACf,OAAO,QAAQ;AAAA,gBAAA,EACf;AAAA,gBACF,OAAM;AAAA,gBACN,kBAAkB;AAAA,gBAClB,aAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,WAAU;AAAA,gBACV,UAAU,CAAC,SAAS;AAClB,wBAAM,UAAU,YAAY;AAAA,oBAC1B,CAAC,cAAc,UAAU,SAAS;AAAA,kBAAA;AAEpC,sBAAI;AACF,2BAAO;AAAA,sBACL,QAAQ,QAAQ;AAAA,sBAChB,OAAO,QAAQ;AAAA,oBAAA,CAChB;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA,IAEA;AAAA,YAGN,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,MAAM;AAAA,gBACb,UAAU,CAAC,WAAW,OAAO,EAAE,QAAQ,UAAU,IAAI;AAAA,gBACrD,UAAU,SAAS;AAAA,gBACnB,MAAM;AAAA,gBACN,QAAO;AAAA,gBACP,aAAa;AAAA,gBACb,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,QAGJ,QACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,MACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW,wBACT,YAAY,QACR,qBACA,0BACN;AAAA,gBACA,OAAO,YAAY,SAAS;AAAA,gBAE3B,sBAAY,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,YAI1B,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO,MAAM;AAAA,gBACb,UAAU,CAAC,UAAU,OAAO,EAAE,OAAO,SAAS,IAAI;AAAA,gBAClD,UAAS;AAAA,gBACT,MAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GAGN;AAAA,IAEA,qBAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,YACJ,EAAE,IAAI,UAAU,OAAO,SAAA;AAAA,YACvB,EAAE,IAAI,SAAS,OAAO,eAAA;AAAA,YACtB,EAAE,IAAI,UAAU,OAAO,SAAA;AAAA,YACvB,GAAI,SAAS,YACT,CAAC,EAAE,IAAI,QAAQ,OAAO,aAAa,OAAO,UAAU,OAAA,CAAQ,IAC5D,CAAA;AAAA,UAAC;AAAA,UAEP,OAAO;AAAA,UACP,UAAU;AAAA,QAAA;AAAA,MAAA,GAEd;AAAA,MAEA,qBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,QAAA,cAAc,WACb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,cAAc;AAAA,YACd;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,YAAY,CAAC,UAAU,OAAO,EAAE,OAAO;AAAA,UAAA;AAAA,QAAA,IAEvC;AAAA,QACH,cAAc,UACb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU,YAAY;AAAA,YACtB,YAAY,SAAS;AAAA,YACrB,UAAU;AAAA,YACT,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,UAAC;AAAA,QAAA,IAEpC;AAAA,QACH,cAAc,WACb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAQ,MAAM;AAAA,YACd,YAAY,SAAS;AAAA,UAAA;AAAA,QAAA,IAErB;AAAA,QACH,cAAc,UAAU,SAAS,YAChC,oBAAC,WAAA,EAAU,SAAS,SAAS,WAAW,MAAM,WAAA,CAAY,IACxD;AAAA,MAAA,EAAA,CACN;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE,qBAAC,WAAA,EAAQ,WAAU,8CACjB,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,uEAChB,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,qEACX,UAAA,OACH;AAAA,QACC;AAAA,MAAA,GACH;AAAA,MACC;AAAA,IAAA,GACH;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,gLACZ,SAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAOA,SAAS,WAAW,UAA+B;AACjD,YAAU,MAAM;AACd,UAAM,QAAQ,aAAa,OACxB,UAAA,EACA,KAAK,CAAC,cAAc,UAAU,IAAI,SAAA,MAAe,iBAAiB;AACrE,QAAI,CAAC,MAAO;AAEZ,UAAM,QAAQ,qCAAU;AACxB,QAAI,EAAC,+BAAO,OAAM;AAChB,mBAAa,OAAO,gBAAgB,OAAO,eAAe,CAAA,CAAE;AAC5D;AAAA,IACF;AAEA,UAAM,SAAS,MAAM,UAAU;AAC/B,iBAAa,OAAO,gBAAgB,OAAO,eAAe;AAAA,MACxD;AAAA,QACE,UAAU,aAAa,eAAe;AAAA,QACtC,SAAS,MAAM;AAAA,QACf,iBAAiB,MAAM;AAAA,QACvB,aAAa;AAAA,QACb,eAAe,MAAM;AAAA,QACrB,WAAW,SAAS;AAAA,MAAA;AAAA,IACtB,CACD;AAAA,EACH,GAAG,CAAC,QAAQ,CAAC;AACf;"}

package/dist/expressions/playground/RunControls.cjs

@@ -6,17 +6,19 @@ 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);
+function RunControls({ evaluator, label = "Run" }) {
+  useGlobalRunShortcut(() => {
+    void evaluator.run();
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    !evaluator.explicit ? /* @__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" })
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       button.Button,
       {
@@ -25,10 +27,10 @@ function RunControls({ evaluator }) {
         variant: evaluator.stale ? "default" : "outline",
         size: "sm",
         className: "[&_svg]:size-3.5",
-        title: `Run (${runShortcut.RUN_SHORTCUT_LABEL})`,
+        title: `${label} (${runShortcut.RUN_SHORTCUT_LABEL})`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(UiPlay.UiPlay, { className: "mr-1.5" }),
-          "Run",
+          label,
           /* @__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 })
         ]
       }

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

@@ -1 +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;;"}
+{"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  /** Defaults to \"Run\". */\n  label?: string;\n}\n\nexport function RunControls({ evaluator, label = \"Run\" }: RunControlsProps) {\n  useGlobalRunShortcut(() => { void evaluator.run(); });\n\n  return (\n    <div className=\"flex items-center gap-3\">\n      {!evaluator.explicit ? <Switch\n        checked={evaluator.autoRun}\n        onChange={evaluator.setAutoRun}\n        label={<span className=\"text-xs text-muted-foreground\">Auto-run</span>}\n      /> : null}\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={`${label} (${RUN_SHORTCUT_LABEL})`}\n      >\n        <UiPlay className=\"mr-1.5\" />\n        {label}\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":";;;;;;;;AAaO,SAAS,YAAY,EAAE,WAAW,QAAQ,SAA2B;AAC1E,uBAAqB,MAAM;AAAE,SAAK,UAAU,IAAA;AAAA,EAAO,CAAC;AAEpD,SACEA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,CAAC,UAAU,WAAWC,2BAAAA;AAAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACtB,SAAS,UAAU;AAAA,QACnB,UAAU,UAAU;AAAA,QACpB,OAAOD,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAgC,UAAA,WAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,IAC5D;AAAA,IACLD,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,GAAG,KAAK,KAAKC,YAAAA,kBAAkB;AAAA,QAEtC,UAAA;AAAA,UAAAH,2BAAAA,IAACI,OAAAA,QAAA,EAAO,WAAU,SAAA,CAAS;AAAA,UAC1B;AAAA,UACDJ,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;;"}