@flanksource/clicky-ui 0.3.36 → 0.3.37

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

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

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

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

package/dist/expressions/playground/RunControls.js

@@ -4,17 +4,19 @@ import { Button } from "../../components/button.js";
 import { Switch } from "../../components/Switch.js";
 import { RUN_SHORTCUT_LABEL } from "./runShortcut.js";
 import { UiPlay } from "../../icons/components/UiPlay.js";
-function RunControls({ evaluator }) {
-  useGlobalRunShortcut(evaluator.run);
+function RunControls({ evaluator, label = "Run" }) {
+  useGlobalRunShortcut(() => {
+    void evaluator.run();
+  });
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ jsx(
+    !evaluator.explicit ? /* @__PURE__ */ jsx(
       Switch,
       {
         checked: evaluator.autoRun,
         onChange: evaluator.setAutoRun,
         label: /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Auto-run" })
       }
-    ),
+    ) : null,
     /* @__PURE__ */ jsxs(
       Button,
       {
@@ -23,10 +25,10 @@ function RunControls({ evaluator }) {
         variant: evaluator.stale ? "default" : "outline",
         size: "sm",
         className: "[&_svg]:size-3.5",
-        title: `Run (${RUN_SHORTCUT_LABEL})`,
+        title: `${label} (${RUN_SHORTCUT_LABEL})`,
         children: [
           /* @__PURE__ */ jsx(UiPlay, { className: "mr-1.5" }),
-          "Run",
+          label,
           /* @__PURE__ */ jsx("kbd", { className: "ml-2 rounded border border-current/25 px-1 text-[10px] leading-4 opacity-70", children: RUN_SHORTCUT_LABEL })
         ]
       }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"api.cjs","sources":["../../../src/expressions/playground/api.ts"],"sourcesContent":["import type { GomplateSpec } from \"../lang/index.ts\";\nimport type { EvalLanguage } from \"./languages.ts\";\n\nexport interface EvalRequest {\n  language: EvalLanguage;\n  source: string;\n  input?: string;\n  leftDelim?: string;\n  rightDelim?: string;\n}\n\nexport interface EvalError {\n  message: string;\n  line?: number;\n  column?: number;\n}\n\nexport interface EvalResponse {\n  result: string;\n  value?: unknown;\n  type?: string;\n  error?: EvalError;\n  durationMs: number;\n}\n\n/** One sample an author can load, as `GET /api/examples` returns it. */\nexport interface Example {\n  name: string;\n  language: EvalLanguage;\n  source: string;\n  input: string;\n}\n\n/**\n * Where the host mounted the playground API.\n *\n * A host serves it under its own prefix -- mission-control behind an\n * authenticated route group -- so nothing here may assume `/api`.\n */\nexport const DEFAULT_API_BASE = \"/api\";\n\n/**\n * Evaluates against the host's Go server.\n *\n * A transport failure is surfaced as an error result rather than thrown: the\n * usual cause is the server not running yet, and the playground should say so\n * rather than blank out.\n */\nexport async function evaluate(\n  apiBase: string,\n  request: EvalRequest,\n  signal?: AbortSignal,\n): Promise<EvalResponse> {\n  let response: Response;\n  try {\n    response = await fetch(`${apiBase}/eval`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify(request),\n      ...(signal ? { signal } : {}),\n    });\n  } catch (cause) {\n    if (signal?.aborted) throw cause;\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `could not reach the evaluation server: ${String(cause)}` },\n    };\n  }\n\n  if (!response.ok && response.status !== 400) {\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `evaluation server returned ${response.status} ${response.statusText}` },\n    };\n  }\n  return (await response.json()) as EvalResponse;\n}\n\n/**\n * The catalogue the running server can actually evaluate.\n *\n * Wider than the one this package ships whenever the host registers functions\n * of its own. Undefined on any failure, which leaves the packaged catalogue in\n * place -- right when the server is simply not up yet.\n */\nexport async function fetchSpec(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<GomplateSpec | undefined> {\n  return fetchJSON<GomplateSpec>(`${apiBase}/spec`, signal);\n}\n\nexport async function fetchExamples(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<Example[] | undefined> {\n  return fetchJSON<Example[]>(`${apiBase}/examples`, signal);\n}\n\nasync function fetchJSON<T>(url: string, signal?: AbortSignal): Promise<T | undefined> {\n  try {\n    const response = await fetch(url, signal ? { signal } : {});\n    if (!response.ok) return undefined;\n    return (await response.json()) as T;\n  } catch {\n    return undefined;\n  }\n}\n"],"names":[],"mappings":";;AAuCO,MAAM,mBAAmB;AAShC,eAAsB,SACpB,SACA,SACA,QACuB;AACvB,MAAI;AACJ,MAAI;AACF,eAAW,MAAM,MAAM,GAAG,OAAO,SAAS;AAAA,MACxC,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAA;AAAA,MAC3B,MAAM,KAAK,UAAU,OAAO;AAAA,MAC5B,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,IAAC,CAC5B;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iCAAQ,QAAS,OAAM;AAC3B,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,0CAA0C,OAAO,KAAK,CAAC,GAAA;AAAA,IAAG;AAAA,EAEhF;AAEA,MAAI,CAAC,SAAS,MAAM,SAAS,WAAW,KAAK;AAC3C,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,8BAA8B,SAAS,MAAM,IAAI,SAAS,UAAU,GAAA;AAAA,IAAG;AAAA,EAE7F;AACA,SAAQ,MAAM,SAAS,KAAA;AACzB;AASA,eAAsB,UACpB,SACA,QACmC;AACnC,SAAO,UAAwB,GAAG,OAAO,SAAS,MAAM;AAC1D;AAEA,eAAsB,cACpB,SACA,QACgC;AAChC,SAAO,UAAqB,GAAG,OAAO,aAAa,MAAM;AAC3D;AAEA,eAAe,UAAa,KAAa,QAA8C;AACrF,MAAI;AACF,UAAM,WAAW,MAAM,MAAM,KAAK,SAAS,EAAE,OAAA,IAAW,EAAE;AAC1D,QAAI,CAAC,SAAS,GAAI,QAAO;AACzB,WAAQ,MAAM,SAAS,KAAA;AAAA,EACzB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;;;;;"}
+{"version":3,"file":"api.cjs","sources":["../../../src/expressions/playground/api.ts"],"sourcesContent":["import type { GomplateSpec } from \"../lang/index.ts\";\nimport type { EvalLanguage } from \"./languages.ts\";\n\nexport interface EvalRequest {\n  language: EvalLanguage;\n  source: string;\n  input?: string;\n  leftDelim?: string;\n  rightDelim?: string;\n}\n\nexport interface EvalError {\n  message: string;\n  line?: number;\n  column?: number;\n}\n\nexport interface EvalResponse {\n  result: string;\n  value?: unknown;\n  type?: string;\n  error?: EvalError;\n  durationMs: number;\n}\n\n/**\n * One input the expression should hold for. With more than one, the Result\n * tab can evaluate the current expression against every sample at once.\n */\nexport interface PlaygroundSample {\n  id: string;\n  label: string;\n  input: string;\n}\n\n/**\n * What the result is going into. The playground shows it beside the result and\n * judges each result by `validate`; it knows nothing about schemas itself.\n */\nexport interface ResultExpectation {\n  /** Allowed values. The one equal to the result is highlighted. */\n  options?: Array<{ value: string; label?: string }>;\n  /** Other constraints, one phrase each (\"Integer\", \"Min: 0\", \"Required\"). */\n  rules?: string[];\n  /** Problems with a successful result; empty when it is acceptable. */\n  validate?: (response: EvalResponse) => string[];\n}\n\n/** One sample an author can load, as `GET /api/examples` returns it. */\nexport interface Example {\n  name: string;\n  language: EvalLanguage;\n  source: string;\n  input: string;\n}\n\n/**\n * Where the host mounted the playground API.\n *\n * A host serves it under its own prefix -- mission-control behind an\n * authenticated route group -- so nothing here may assume `/api`.\n */\nexport const DEFAULT_API_BASE = \"/api\";\n\n/**\n * Evaluates against the host's Go server.\n *\n * A transport failure is surfaced as an error result rather than thrown: the\n * usual cause is the server not running yet, and the playground should say so\n * rather than blank out.\n */\nexport async function evaluate(\n  apiBase: string,\n  request: EvalRequest,\n  signal?: AbortSignal,\n): Promise<EvalResponse> {\n  let response: Response;\n  try {\n    response = await fetch(`${apiBase}/eval`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify(request),\n      ...(signal ? { signal } : {}),\n    });\n  } catch (cause) {\n    if (signal?.aborted) throw cause;\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `could not reach the evaluation server: ${String(cause)}` },\n    };\n  }\n\n  if (!response.ok && response.status !== 400) {\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `evaluation server returned ${response.status} ${response.statusText}` },\n    };\n  }\n  return (await response.json()) as EvalResponse;\n}\n\n/**\n * The catalogue the running server can actually evaluate.\n *\n * Wider than the one this package ships whenever the host registers functions\n * of its own. Undefined on any failure, which leaves the packaged catalogue in\n * place -- right when the server is simply not up yet.\n */\nexport async function fetchSpec(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<GomplateSpec | undefined> {\n  return fetchJSON<GomplateSpec>(`${apiBase}/spec`, signal);\n}\n\nexport async function fetchExamples(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<Example[] | undefined> {\n  return fetchJSON<Example[]>(`${apiBase}/examples`, signal);\n}\n\nasync function fetchJSON<T>(url: string, signal?: AbortSignal): Promise<T | undefined> {\n  try {\n    const response = await fetch(url, signal ? { signal } : {});\n    if (!response.ok) return undefined;\n    return (await response.json()) as T;\n  } catch {\n    return undefined;\n  }\n}\n"],"names":[],"mappings":";;AA8DO,MAAM,mBAAmB;AAShC,eAAsB,SACpB,SACA,SACA,QACuB;AACvB,MAAI;AACJ,MAAI;AACF,eAAW,MAAM,MAAM,GAAG,OAAO,SAAS;AAAA,MACxC,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAA;AAAA,MAC3B,MAAM,KAAK,UAAU,OAAO;AAAA,MAC5B,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,IAAC,CAC5B;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iCAAQ,QAAS,OAAM;AAC3B,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,0CAA0C,OAAO,KAAK,CAAC,GAAA;AAAA,IAAG;AAAA,EAEhF;AAEA,MAAI,CAAC,SAAS,MAAM,SAAS,WAAW,KAAK;AAC3C,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,8BAA8B,SAAS,MAAM,IAAI,SAAS,UAAU,GAAA;AAAA,IAAG;AAAA,EAE7F;AACA,SAAQ,MAAM,SAAS,KAAA;AACzB;AASA,eAAsB,UACpB,SACA,QACmC;AACnC,SAAO,UAAwB,GAAG,OAAO,SAAS,MAAM;AAC1D;AAEA,eAAsB,cACpB,SACA,QACgC;AAChC,SAAO,UAAqB,GAAG,OAAO,aAAa,MAAM;AAC3D;AAEA,eAAe,UAAa,KAAa,QAA8C;AACrF,MAAI;AACF,UAAM,WAAW,MAAM,MAAM,KAAK,SAAS,EAAE,OAAA,IAAW,EAAE;AAC1D,QAAI,CAAC,SAAS,GAAI,QAAO;AACzB,WAAQ,MAAM,SAAS,KAAA;AAAA,EACzB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;;;;;"}

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

@@ -19,6 +19,30 @@ export interface EvalResponse {
     error?: EvalError;
     durationMs: number;
 }
+/**
+ * One input the expression should hold for. With more than one, the Result
+ * tab can evaluate the current expression against every sample at once.
+ */
+export interface PlaygroundSample {
+    id: string;
+    label: string;
+    input: string;
+}
+/**
+ * What the result is going into. The playground shows it beside the result and
+ * judges each result by `validate`; it knows nothing about schemas itself.
+ */
+export interface ResultExpectation {
+    /** Allowed values. The one equal to the result is highlighted. */
+    options?: Array<{
+        value: string;
+        label?: string;
+    }>;
+    /** Other constraints, one phrase each ("Integer", "Min: 0", "Required"). */
+    rules?: string[];
+    /** Problems with a successful result; empty when it is acceptable. */
+    validate?: (response: EvalResponse) => string[];
+}
 /** One sample an author can load, as `GET /api/examples` returns it. */
 export interface Example {
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../src/expressions/playground/api.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wEAAwE;AACxE,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAEvC;;;;;;GAMG;AACH,wBAAsB,QAAQ,CAC5B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,YAAY,CAAC,CA0BvB;AAED;;;;;;GAMG;AACH,wBAAsB,SAAS,CAC7B,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC,CAEnC;AAED,wBAAsB,aAAa,CACjC,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,CAEhC"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../../src/expressions/playground/api.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEnD,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,MAAM,WAAW,iBAAiB;IAChC,kEAAkE;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,KAAK,MAAM,EAAE,CAAC;CACjD;AAED,wEAAwE;AACxE,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,YAAY,CAAC;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,SAAS,CAAC;AAEvC;;;;;;GAMG;AACH,wBAAsB,QAAQ,CAC5B,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,WAAW,EACpB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,YAAY,CAAC,CA0BvB;AAED;;;;;;GAMG;AACH,wBAAsB,SAAS,CAC7B,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC,CAEnC;AAED,wBAAsB,aAAa,CACjC,OAAO,EAAE,MAAM,EACf,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,CAEhC"}

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

@@ -1 +1 @@
-{"version":3,"file":"api.js","sources":["../../../src/expressions/playground/api.ts"],"sourcesContent":["import type { GomplateSpec } from \"../lang/index.ts\";\nimport type { EvalLanguage } from \"./languages.ts\";\n\nexport interface EvalRequest {\n  language: EvalLanguage;\n  source: string;\n  input?: string;\n  leftDelim?: string;\n  rightDelim?: string;\n}\n\nexport interface EvalError {\n  message: string;\n  line?: number;\n  column?: number;\n}\n\nexport interface EvalResponse {\n  result: string;\n  value?: unknown;\n  type?: string;\n  error?: EvalError;\n  durationMs: number;\n}\n\n/** One sample an author can load, as `GET /api/examples` returns it. */\nexport interface Example {\n  name: string;\n  language: EvalLanguage;\n  source: string;\n  input: string;\n}\n\n/**\n * Where the host mounted the playground API.\n *\n * A host serves it under its own prefix -- mission-control behind an\n * authenticated route group -- so nothing here may assume `/api`.\n */\nexport const DEFAULT_API_BASE = \"/api\";\n\n/**\n * Evaluates against the host's Go server.\n *\n * A transport failure is surfaced as an error result rather than thrown: the\n * usual cause is the server not running yet, and the playground should say so\n * rather than blank out.\n */\nexport async function evaluate(\n  apiBase: string,\n  request: EvalRequest,\n  signal?: AbortSignal,\n): Promise<EvalResponse> {\n  let response: Response;\n  try {\n    response = await fetch(`${apiBase}/eval`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify(request),\n      ...(signal ? { signal } : {}),\n    });\n  } catch (cause) {\n    if (signal?.aborted) throw cause;\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `could not reach the evaluation server: ${String(cause)}` },\n    };\n  }\n\n  if (!response.ok && response.status !== 400) {\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `evaluation server returned ${response.status} ${response.statusText}` },\n    };\n  }\n  return (await response.json()) as EvalResponse;\n}\n\n/**\n * The catalogue the running server can actually evaluate.\n *\n * Wider than the one this package ships whenever the host registers functions\n * of its own. Undefined on any failure, which leaves the packaged catalogue in\n * place -- right when the server is simply not up yet.\n */\nexport async function fetchSpec(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<GomplateSpec | undefined> {\n  return fetchJSON<GomplateSpec>(`${apiBase}/spec`, signal);\n}\n\nexport async function fetchExamples(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<Example[] | undefined> {\n  return fetchJSON<Example[]>(`${apiBase}/examples`, signal);\n}\n\nasync function fetchJSON<T>(url: string, signal?: AbortSignal): Promise<T | undefined> {\n  try {\n    const response = await fetch(url, signal ? { signal } : {});\n    if (!response.ok) return undefined;\n    return (await response.json()) as T;\n  } catch {\n    return undefined;\n  }\n}\n"],"names":[],"mappings":"AAuCO,MAAM,mBAAmB;AAShC,eAAsB,SACpB,SACA,SACA,QACuB;AACvB,MAAI;AACJ,MAAI;AACF,eAAW,MAAM,MAAM,GAAG,OAAO,SAAS;AAAA,MACxC,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAA;AAAA,MAC3B,MAAM,KAAK,UAAU,OAAO;AAAA,MAC5B,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,IAAC,CAC5B;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iCAAQ,QAAS,OAAM;AAC3B,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,0CAA0C,OAAO,KAAK,CAAC,GAAA;AAAA,IAAG;AAAA,EAEhF;AAEA,MAAI,CAAC,SAAS,MAAM,SAAS,WAAW,KAAK;AAC3C,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,8BAA8B,SAAS,MAAM,IAAI,SAAS,UAAU,GAAA;AAAA,IAAG;AAAA,EAE7F;AACA,SAAQ,MAAM,SAAS,KAAA;AACzB;AASA,eAAsB,UACpB,SACA,QACmC;AACnC,SAAO,UAAwB,GAAG,OAAO,SAAS,MAAM;AAC1D;AAEA,eAAsB,cACpB,SACA,QACgC;AAChC,SAAO,UAAqB,GAAG,OAAO,aAAa,MAAM;AAC3D;AAEA,eAAe,UAAa,KAAa,QAA8C;AACrF,MAAI;AACF,UAAM,WAAW,MAAM,MAAM,KAAK,SAAS,EAAE,OAAA,IAAW,EAAE;AAC1D,QAAI,CAAC,SAAS,GAAI,QAAO;AACzB,WAAQ,MAAM,SAAS,KAAA;AAAA,EACzB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"api.js","sources":["../../../src/expressions/playground/api.ts"],"sourcesContent":["import type { GomplateSpec } from \"../lang/index.ts\";\nimport type { EvalLanguage } from \"./languages.ts\";\n\nexport interface EvalRequest {\n  language: EvalLanguage;\n  source: string;\n  input?: string;\n  leftDelim?: string;\n  rightDelim?: string;\n}\n\nexport interface EvalError {\n  message: string;\n  line?: number;\n  column?: number;\n}\n\nexport interface EvalResponse {\n  result: string;\n  value?: unknown;\n  type?: string;\n  error?: EvalError;\n  durationMs: number;\n}\n\n/**\n * One input the expression should hold for. With more than one, the Result\n * tab can evaluate the current expression against every sample at once.\n */\nexport interface PlaygroundSample {\n  id: string;\n  label: string;\n  input: string;\n}\n\n/**\n * What the result is going into. The playground shows it beside the result and\n * judges each result by `validate`; it knows nothing about schemas itself.\n */\nexport interface ResultExpectation {\n  /** Allowed values. The one equal to the result is highlighted. */\n  options?: Array<{ value: string; label?: string }>;\n  /** Other constraints, one phrase each (\"Integer\", \"Min: 0\", \"Required\"). */\n  rules?: string[];\n  /** Problems with a successful result; empty when it is acceptable. */\n  validate?: (response: EvalResponse) => string[];\n}\n\n/** One sample an author can load, as `GET /api/examples` returns it. */\nexport interface Example {\n  name: string;\n  language: EvalLanguage;\n  source: string;\n  input: string;\n}\n\n/**\n * Where the host mounted the playground API.\n *\n * A host serves it under its own prefix -- mission-control behind an\n * authenticated route group -- so nothing here may assume `/api`.\n */\nexport const DEFAULT_API_BASE = \"/api\";\n\n/**\n * Evaluates against the host's Go server.\n *\n * A transport failure is surfaced as an error result rather than thrown: the\n * usual cause is the server not running yet, and the playground should say so\n * rather than blank out.\n */\nexport async function evaluate(\n  apiBase: string,\n  request: EvalRequest,\n  signal?: AbortSignal,\n): Promise<EvalResponse> {\n  let response: Response;\n  try {\n    response = await fetch(`${apiBase}/eval`, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify(request),\n      ...(signal ? { signal } : {}),\n    });\n  } catch (cause) {\n    if (signal?.aborted) throw cause;\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `could not reach the evaluation server: ${String(cause)}` },\n    };\n  }\n\n  if (!response.ok && response.status !== 400) {\n    return {\n      result: \"\",\n      durationMs: 0,\n      error: { message: `evaluation server returned ${response.status} ${response.statusText}` },\n    };\n  }\n  return (await response.json()) as EvalResponse;\n}\n\n/**\n * The catalogue the running server can actually evaluate.\n *\n * Wider than the one this package ships whenever the host registers functions\n * of its own. Undefined on any failure, which leaves the packaged catalogue in\n * place -- right when the server is simply not up yet.\n */\nexport async function fetchSpec(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<GomplateSpec | undefined> {\n  return fetchJSON<GomplateSpec>(`${apiBase}/spec`, signal);\n}\n\nexport async function fetchExamples(\n  apiBase: string,\n  signal?: AbortSignal,\n): Promise<Example[] | undefined> {\n  return fetchJSON<Example[]>(`${apiBase}/examples`, signal);\n}\n\nasync function fetchJSON<T>(url: string, signal?: AbortSignal): Promise<T | undefined> {\n  try {\n    const response = await fetch(url, signal ? { signal } : {});\n    if (!response.ok) return undefined;\n    return (await response.json()) as T;\n  } catch {\n    return undefined;\n  }\n}\n"],"names":[],"mappings":"AA8DO,MAAM,mBAAmB;AAShC,eAAsB,SACpB,SACA,SACA,QACuB;AACvB,MAAI;AACJ,MAAI;AACF,eAAW,MAAM,MAAM,GAAG,OAAO,SAAS;AAAA,MACxC,QAAQ;AAAA,MACR,SAAS,EAAE,gBAAgB,mBAAA;AAAA,MAC3B,MAAM,KAAK,UAAU,OAAO;AAAA,MAC5B,GAAI,SAAS,EAAE,WAAW,CAAA;AAAA,IAAC,CAC5B;AAAA,EACH,SAAS,OAAO;AACd,QAAI,iCAAQ,QAAS,OAAM;AAC3B,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,0CAA0C,OAAO,KAAK,CAAC,GAAA;AAAA,IAAG;AAAA,EAEhF;AAEA,MAAI,CAAC,SAAS,MAAM,SAAS,WAAW,KAAK;AAC3C,WAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,EAAE,SAAS,8BAA8B,SAAS,MAAM,IAAI,SAAS,UAAU,GAAA;AAAA,IAAG;AAAA,EAE7F;AACA,SAAQ,MAAM,SAAS,KAAA;AACzB;AASA,eAAsB,UACpB,SACA,QACmC;AACnC,SAAO,UAAwB,GAAG,OAAO,SAAS,MAAM;AAC1D;AAEA,eAAsB,cACpB,SACA,QACgC;AAChC,SAAO,UAAqB,GAAG,OAAO,aAAa,MAAM;AAC3D;AAEA,eAAe,UAAa,KAAa,QAA8C;AACrF,MAAI;AACF,UAAM,WAAW,MAAM,MAAM,KAAK,SAAS,EAAE,OAAA,IAAW,EAAE;AAC1D,QAAI,CAAC,SAAS,GAAI,QAAO;AACzB,WAAQ,MAAM,SAAS,KAAA;AAAA,EACzB,QAAQ;AACN,WAAO;AAAA,EACT;AACF;"}

package/dist/expressions/playground/panels/ExpectationStrip.cjs

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Badge = require("../../../data/Badge.cjs");
+const UiCheck = require("../../../icons/components/UiCheck.cjs");
+const UiWarningTriangle = require("../../../icons/components/UiWarningTriangle.cjs");
+const OPTION_LIMIT = 12;
+function ExpectationStrip({ expectation, response, stale }) {
+  const [showAll, setShowAll] = react.useState(false);
+  const options = expectation.options ?? [];
+  const rules = expectation.rules ?? [];
+  const succeeded = response && !response.error ? response : null;
+  const result = succeeded == null ? void 0 : succeeded.result;
+  const shown = showAll ? options : options.slice(0, OPTION_LIMIT);
+  const issues = succeeded && expectation.validate ? expectation.validate(succeeded) : null;
+  if (options.length === 0 && rules.length === 0 && issues === null) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "aria-label": "Expected result",
+      className: `space-y-1.5 border-b border-border px-4 py-2 text-xs ${stale && response ? "opacity-50" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium uppercase tracking-wide text-muted-foreground", children: "Expected" }),
+          rules.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: rules.join(" · ") }) : null
+        ] }),
+        options.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "flex flex-wrap items-center gap-1", children: [
+          shown.map((option) => {
+            const matched = result !== void 0 && option.value === result;
+            return /* @__PURE__ */ jsxRuntime.jsx("li", { "data-testid": "expected-option", "data-matched": matched, children: /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: matched ? "success" : "neutral", variant: matched ? "soft" : "outline", size: "sm", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("code", { className: "font-mono", children: option.value }),
+              option.label && option.label !== option.value ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-muted-foreground", children: option.label }) : null
+            ] }) }, option.value);
+          }),
+          options.length > OPTION_LIMIT && !showAll ? /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowAll(true),
+              className: "rounded px-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: [
+                "+",
+                options.length - OPTION_LIMIT,
+                " more"
+              ]
+            }
+          ) }) : null
+        ] }) : null,
+        issues === null ? null : issues.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { role: "status", className: "flex items-center gap-1 text-green-700 dark:text-green-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UiCheck.UiCheck, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          "Valid"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "status", className: "space-y-0.5 text-destructive", children: issues.map((issue) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(UiWarningTriangle.UiWarningTriangle, { className: "mt-0.5 size-3 shrink-0", "aria-hidden": "true" }),
+          issue
+        ] }, issue)) })
+      ]
+    }
+  );
+}
+exports.ExpectationStrip = ExpectationStrip;
+//# sourceMappingURL=ExpectationStrip.cjs.map

package/dist/expressions/playground/panels/ExpectationStrip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpectationStrip.cjs","sources":["../../../../src/expressions/playground/panels/ExpectationStrip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Badge } from \"../../../data/Badge\";\nimport { UiCheck, UiWarningTriangle } from \"../../../icons\";\nimport type { EvalResponse, ResultExpectation } from \"../api.ts\";\n\n/** Chips shown before the list collapses behind \"+N more\". */\nconst OPTION_LIMIT = 12;\n\ninterface ExpectationStripProps {\n  expectation: ResultExpectation;\n  response: EvalResponse | null;\n  /** The response predates the current source or input. */\n  stale: boolean;\n}\n\n/**\n * What the result has to be, beside what it is.\n *\n * An expression that evaluates cleanly can still produce a value its target\n * rejects -- a code that is not in the list, text where a number goes -- and\n * that only surfaces much later, when the value is used. So the allowed values\n * and rules sit above the result, and the host's validator judges it here.\n */\nexport function ExpectationStrip({ expectation, response, stale }: ExpectationStripProps) {\n  const [showAll, setShowAll] = useState(false);\n  const options = expectation.options ?? [];\n  const rules = expectation.rules ?? [];\n  const succeeded = response && !response.error ? response : null;\n  // Exact, not trimmed: the validator judges the raw result, and a chip must\n  // never read as matched beside a verdict that rejects the same value.\n  const result = succeeded?.result;\n  const shown = showAll ? options : options.slice(0, OPTION_LIMIT);\n  const issues = succeeded && expectation.validate ? expectation.validate(succeeded) : null;\n\n  if (options.length === 0 && rules.length === 0 && issues === null) return null;\n\n  return (\n    <section\n      aria-label=\"Expected result\"\n      className={`space-y-1.5 border-b border-border px-4 py-2 text-xs ${stale && response ? \"opacity-50\" : \"\"}`}\n    >\n      <div className=\"flex flex-wrap items-baseline gap-x-2 gap-y-1\">\n        <span className=\"font-medium uppercase tracking-wide text-muted-foreground\">Expected</span>\n        {rules.length > 0 ? <span>{rules.join(\" · \")}</span> : null}\n      </div>\n\n      {options.length > 0 ? (\n        <ul className=\"flex flex-wrap items-center gap-1\">\n          {shown.map((option) => {\n            const matched = result !== undefined && option.value === result;\n            return (\n              <li key={option.value} data-testid=\"expected-option\" data-matched={matched}>\n                <Badge tone={matched ? \"success\" : \"neutral\"} variant={matched ? \"soft\" : \"outline\"} size=\"sm\">\n                  <code className=\"font-mono\">{option.value}</code>\n                  {option.label && option.label !== option.value ? (\n                    <span className=\"ml-1 text-muted-foreground\">{option.label}</span>\n                  ) : null}\n                </Badge>\n              </li>\n            );\n          })}\n          {options.length > OPTION_LIMIT && !showAll ? (\n            <li>\n              <button\n                type=\"button\"\n                onClick={() => setShowAll(true)}\n                className=\"rounded px-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n              >\n                +{options.length - OPTION_LIMIT} more\n              </button>\n            </li>\n          ) : null}\n        </ul>\n      ) : null}\n\n      {issues === null ? null : issues.length === 0 ? (\n        <p role=\"status\" className=\"flex items-center gap-1 text-green-700 dark:text-green-400\">\n          <UiCheck className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          Valid\n        </p>\n      ) : (\n        <ul role=\"status\" className=\"space-y-0.5 text-destructive\">\n          {issues.map((issue) => (\n            <li key={issue} className=\"flex items-start gap-1\">\n              <UiWarningTriangle className=\"mt-0.5 size-3 shrink-0\" aria-hidden=\"true\" />\n              {issue}\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n"],"names":["useState","jsxs","jsx","Badge","UiCheck","UiWarningTriangle"],"mappings":";;;;;;;AAMA,MAAM,eAAe;AAiBd,SAAS,iBAAiB,EAAE,aAAa,UAAU,SAAgC;AACxF,QAAM,CAAC,SAAS,UAAU,IAAIA,MAAAA,SAAS,KAAK;AAC5C,QAAM,UAAU,YAAY,WAAW,CAAA;AACvC,QAAM,QAAQ,YAAY,SAAS,CAAA;AACnC,QAAM,YAAY,YAAY,CAAC,SAAS,QAAQ,WAAW;AAG3D,QAAM,SAAS,uCAAW;AAC1B,QAAM,QAAQ,UAAU,UAAU,QAAQ,MAAM,GAAG,YAAY;AAC/D,QAAM,SAAS,aAAa,YAAY,WAAW,YAAY,SAAS,SAAS,IAAI;AAErF,MAAI,QAAQ,WAAW,KAAK,MAAM,WAAW,KAAK,WAAW,KAAM,QAAO;AAE1E,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAW,wDAAwD,SAAS,WAAW,eAAe,EAAE;AAAA,MAExG,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAU,6DAA4D,UAAA,YAAQ;AAAA,UACnF,MAAM,SAAS,IAAIA,2BAAAA,IAAC,UAAM,UAAA,MAAM,KAAK,KAAK,EAAA,CAAE,IAAU;AAAA,QAAA,GACzD;AAAA,QAEC,QAAQ,SAAS,IAChBD,2BAAAA,KAAC,MAAA,EAAG,WAAU,qCACX,UAAA;AAAA,UAAA,MAAM,IAAI,CAAC,WAAW;AACrB,kBAAM,UAAU,WAAW,UAAa,OAAO,UAAU;AACzD,kDACG,MAAA,EAAsB,eAAY,mBAAkB,gBAAc,SACjE,UAAAA,2BAAAA,KAACE,aAAA,EAAM,MAAM,UAAU,YAAY,WAAW,SAAS,UAAU,SAAS,WAAW,MAAK,MACxF,UAAA;AAAA,cAAAD,2BAAAA,IAAC,QAAA,EAAK,WAAU,aAAa,UAAA,OAAO,OAAM;AAAA,cACzC,OAAO,SAAS,OAAO,UAAU,OAAO,QACvCA,2BAAAA,IAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA,OAAO,MAAA,CAAM,IACzD;AAAA,YAAA,GACN,EAAA,GANO,OAAO,KAOhB;AAAA,UAEJ,CAAC;AAAA,UACA,QAAQ,SAAS,gBAAgB,CAAC,yCAChC,MAAA,EACC,UAAAD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,WAAW,IAAI;AAAA,cAC9B,WAAU;AAAA,cACX,UAAA;AAAA,gBAAA;AAAA,gBACG,QAAQ,SAAS;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,GAEpC,IACE;AAAA,QAAA,EAAA,CACN,IACE;AAAA,QAEH,WAAW,OAAO,OAAO,OAAO,WAAW,IAC1CA,2BAAAA,KAAC,KAAA,EAAE,MAAK,UAAS,WAAU,8DACzB,UAAA;AAAA,UAAAC,2BAAAA,IAACE,QAAAA,SAAA,EAAQ,WAAU,qBAAoB,eAAY,QAAO;AAAA,UAAE;AAAA,QAAA,EAAA,CAE9D,IAEAF,2BAAAA,IAAC,MAAA,EAAG,MAAK,UAAS,WAAU,gCACzB,UAAA,OAAO,IAAI,CAAC,UACXD,2BAAAA,KAAC,MAAA,EAAe,WAAU,0BACxB,UAAA;AAAA,UAAAC,2BAAAA,IAACG,kBAAAA,mBAAA,EAAkB,WAAU,0BAAyB,eAAY,QAAO;AAAA,UACxE;AAAA,QAAA,EAAA,GAFM,KAGT,CACD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;;"}

package/dist/expressions/playground/panels/ExpectationStrip.d.ts

@@ -0,0 +1,18 @@
+import { EvalResponse, ResultExpectation } from '../api.ts';
+interface ExpectationStripProps {
+    expectation: ResultExpectation;
+    response: EvalResponse | null;
+    /** The response predates the current source or input. */
+    stale: boolean;
+}
+/**
+ * What the result has to be, beside what it is.
+ *
+ * An expression that evaluates cleanly can still produce a value its target
+ * rejects -- a code that is not in the list, text where a number goes -- and
+ * that only surfaces much later, when the value is used. So the allowed values
+ * and rules sit above the result, and the host's validator judges it here.
+ */
+export declare function ExpectationStrip({ expectation, response, stale }: ExpectationStripProps): import("react").JSX.Element | null;
+export {};
+//# sourceMappingURL=ExpectationStrip.d.ts.map

package/dist/expressions/playground/panels/ExpectationStrip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpectationStrip.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/ExpectationStrip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAKjE,UAAU,qBAAqB;IAC7B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,yDAAyD;IACzD,KAAK,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,qBAAqB,sCAqEvF"}

package/dist/expressions/playground/panels/ExpectationStrip.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge } from "../../../data/Badge.js";
+import { UiCheck } from "../../../icons/components/UiCheck.js";
+import { UiWarningTriangle } from "../../../icons/components/UiWarningTriangle.js";
+const OPTION_LIMIT = 12;
+function ExpectationStrip({ expectation, response, stale }) {
+  const [showAll, setShowAll] = useState(false);
+  const options = expectation.options ?? [];
+  const rules = expectation.rules ?? [];
+  const succeeded = response && !response.error ? response : null;
+  const result = succeeded == null ? void 0 : succeeded.result;
+  const shown = showAll ? options : options.slice(0, OPTION_LIMIT);
+  const issues = succeeded && expectation.validate ? expectation.validate(succeeded) : null;
+  if (options.length === 0 && rules.length === 0 && issues === null) return null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": "Expected result",
+      className: `space-y-1.5 border-b border-border px-4 py-2 text-xs ${stale && response ? "opacity-50" : ""}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-medium uppercase tracking-wide text-muted-foreground", children: "Expected" }),
+          rules.length > 0 ? /* @__PURE__ */ jsx("span", { children: rules.join(" · ") }) : null
+        ] }),
+        options.length > 0 ? /* @__PURE__ */ jsxs("ul", { className: "flex flex-wrap items-center gap-1", children: [
+          shown.map((option) => {
+            const matched = result !== void 0 && option.value === result;
+            return /* @__PURE__ */ jsx("li", { "data-testid": "expected-option", "data-matched": matched, children: /* @__PURE__ */ jsxs(Badge, { tone: matched ? "success" : "neutral", variant: matched ? "soft" : "outline", size: "sm", children: [
+              /* @__PURE__ */ jsx("code", { className: "font-mono", children: option.value }),
+              option.label && option.label !== option.value ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-muted-foreground", children: option.label }) : null
+            ] }) }, option.value);
+          }),
+          options.length > OPTION_LIMIT && !showAll ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setShowAll(true),
+              className: "rounded px-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+              children: [
+                "+",
+                options.length - OPTION_LIMIT,
+                " more"
+              ]
+            }
+          ) }) : null
+        ] }) : null,
+        issues === null ? null : issues.length === 0 ? /* @__PURE__ */ jsxs("p", { role: "status", className: "flex items-center gap-1 text-green-700 dark:text-green-400", children: [
+          /* @__PURE__ */ jsx(UiCheck, { className: "size-3.5 shrink-0", "aria-hidden": "true" }),
+          "Valid"
+        ] }) : /* @__PURE__ */ jsx("ul", { role: "status", className: "space-y-0.5 text-destructive", children: issues.map((issue) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx(UiWarningTriangle, { className: "mt-0.5 size-3 shrink-0", "aria-hidden": "true" }),
+          issue
+        ] }, issue)) })
+      ]
+    }
+  );
+}
+export {
+  ExpectationStrip
+};
+//# sourceMappingURL=ExpectationStrip.js.map

package/dist/expressions/playground/panels/ExpectationStrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpectationStrip.js","sources":["../../../../src/expressions/playground/panels/ExpectationStrip.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Badge } from \"../../../data/Badge\";\nimport { UiCheck, UiWarningTriangle } from \"../../../icons\";\nimport type { EvalResponse, ResultExpectation } from \"../api.ts\";\n\n/** Chips shown before the list collapses behind \"+N more\". */\nconst OPTION_LIMIT = 12;\n\ninterface ExpectationStripProps {\n  expectation: ResultExpectation;\n  response: EvalResponse | null;\n  /** The response predates the current source or input. */\n  stale: boolean;\n}\n\n/**\n * What the result has to be, beside what it is.\n *\n * An expression that evaluates cleanly can still produce a value its target\n * rejects -- a code that is not in the list, text where a number goes -- and\n * that only surfaces much later, when the value is used. So the allowed values\n * and rules sit above the result, and the host's validator judges it here.\n */\nexport function ExpectationStrip({ expectation, response, stale }: ExpectationStripProps) {\n  const [showAll, setShowAll] = useState(false);\n  const options = expectation.options ?? [];\n  const rules = expectation.rules ?? [];\n  const succeeded = response && !response.error ? response : null;\n  // Exact, not trimmed: the validator judges the raw result, and a chip must\n  // never read as matched beside a verdict that rejects the same value.\n  const result = succeeded?.result;\n  const shown = showAll ? options : options.slice(0, OPTION_LIMIT);\n  const issues = succeeded && expectation.validate ? expectation.validate(succeeded) : null;\n\n  if (options.length === 0 && rules.length === 0 && issues === null) return null;\n\n  return (\n    <section\n      aria-label=\"Expected result\"\n      className={`space-y-1.5 border-b border-border px-4 py-2 text-xs ${stale && response ? \"opacity-50\" : \"\"}`}\n    >\n      <div className=\"flex flex-wrap items-baseline gap-x-2 gap-y-1\">\n        <span className=\"font-medium uppercase tracking-wide text-muted-foreground\">Expected</span>\n        {rules.length > 0 ? <span>{rules.join(\" · \")}</span> : null}\n      </div>\n\n      {options.length > 0 ? (\n        <ul className=\"flex flex-wrap items-center gap-1\">\n          {shown.map((option) => {\n            const matched = result !== undefined && option.value === result;\n            return (\n              <li key={option.value} data-testid=\"expected-option\" data-matched={matched}>\n                <Badge tone={matched ? \"success\" : \"neutral\"} variant={matched ? \"soft\" : \"outline\"} size=\"sm\">\n                  <code className=\"font-mono\">{option.value}</code>\n                  {option.label && option.label !== option.value ? (\n                    <span className=\"ml-1 text-muted-foreground\">{option.label}</span>\n                  ) : null}\n                </Badge>\n              </li>\n            );\n          })}\n          {options.length > OPTION_LIMIT && !showAll ? (\n            <li>\n              <button\n                type=\"button\"\n                onClick={() => setShowAll(true)}\n                className=\"rounded px-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n              >\n                +{options.length - OPTION_LIMIT} more\n              </button>\n            </li>\n          ) : null}\n        </ul>\n      ) : null}\n\n      {issues === null ? null : issues.length === 0 ? (\n        <p role=\"status\" className=\"flex items-center gap-1 text-green-700 dark:text-green-400\">\n          <UiCheck className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n          Valid\n        </p>\n      ) : (\n        <ul role=\"status\" className=\"space-y-0.5 text-destructive\">\n          {issues.map((issue) => (\n            <li key={issue} className=\"flex items-start gap-1\">\n              <UiWarningTriangle className=\"mt-0.5 size-3 shrink-0\" aria-hidden=\"true\" />\n              {issue}\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;;AAMA,MAAM,eAAe;AAiBd,SAAS,iBAAiB,EAAE,aAAa,UAAU,SAAgC;AACxF,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,UAAU,YAAY,WAAW,CAAA;AACvC,QAAM,QAAQ,YAAY,SAAS,CAAA;AACnC,QAAM,YAAY,YAAY,CAAC,SAAS,QAAQ,WAAW;AAG3D,QAAM,SAAS,uCAAW;AAC1B,QAAM,QAAQ,UAAU,UAAU,QAAQ,MAAM,GAAG,YAAY;AAC/D,QAAM,SAAS,aAAa,YAAY,WAAW,YAAY,SAAS,SAAS,IAAI;AAErF,MAAI,QAAQ,WAAW,KAAK,MAAM,WAAW,KAAK,WAAW,KAAM,QAAO;AAE1E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,WAAW,wDAAwD,SAAS,WAAW,eAAe,EAAE;AAAA,MAExG,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAU,6DAA4D,UAAA,YAAQ;AAAA,UACnF,MAAM,SAAS,IAAI,oBAAC,UAAM,UAAA,MAAM,KAAK,KAAK,EAAA,CAAE,IAAU;AAAA,QAAA,GACzD;AAAA,QAEC,QAAQ,SAAS,IAChB,qBAAC,MAAA,EAAG,WAAU,qCACX,UAAA;AAAA,UAAA,MAAM,IAAI,CAAC,WAAW;AACrB,kBAAM,UAAU,WAAW,UAAa,OAAO,UAAU;AACzD,uCACG,MAAA,EAAsB,eAAY,mBAAkB,gBAAc,SACjE,UAAA,qBAAC,OAAA,EAAM,MAAM,UAAU,YAAY,WAAW,SAAS,UAAU,SAAS,WAAW,MAAK,MACxF,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,WAAU,aAAa,UAAA,OAAO,OAAM;AAAA,cACzC,OAAO,SAAS,OAAO,UAAU,OAAO,QACvC,oBAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA,OAAO,MAAA,CAAM,IACzD;AAAA,YAAA,GACN,EAAA,GANO,OAAO,KAOhB;AAAA,UAEJ,CAAC;AAAA,UACA,QAAQ,SAAS,gBAAgB,CAAC,8BAChC,MAAA,EACC,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,WAAW,IAAI;AAAA,cAC9B,WAAU;AAAA,cACX,UAAA;AAAA,gBAAA;AAAA,gBACG,QAAQ,SAAS;AAAA,gBAAa;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,GAEpC,IACE;AAAA,QAAA,EAAA,CACN,IACE;AAAA,QAEH,WAAW,OAAO,OAAO,OAAO,WAAW,IAC1C,qBAAC,KAAA,EAAE,MAAK,UAAS,WAAU,8DACzB,UAAA;AAAA,UAAA,oBAAC,SAAA,EAAQ,WAAU,qBAAoB,eAAY,QAAO;AAAA,UAAE;AAAA,QAAA,EAAA,CAE9D,IAEA,oBAAC,MAAA,EAAG,MAAK,UAAS,WAAU,gCACzB,UAAA,OAAO,IAAI,CAAC,UACX,qBAAC,MAAA,EAAe,WAAU,0BACxB,UAAA;AAAA,UAAA,oBAAC,mBAAA,EAAkB,WAAU,0BAAyB,eAAY,QAAO;AAAA,UACxE;AAAA,QAAA,EAAA,GAFM,KAGT,CACD,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/expressions/playground/panels/GraphPanel.cjs

@@ -9,7 +9,8 @@ const environment = require("../../lang/environment.cjs");
 function GraphPanel({
   document,
   languageId,
-  onInsert
+  onInsert,
+  formatPath
 }) {
   const [selectedId, setSelectedId] = react.useState();
   const [note, setNote] = react.useState();
@@ -31,7 +32,7 @@ function GraphPanel({
       setNote("That row has no addressable path.");
       return;
     }
-    const expression = environment.pathExpression(languageId, segments);
+    const expression = formatPath ? formatPath(segments) : environment.pathExpression(languageId, segments);
     if (expression === null) {
       setNote(
         "A go template reaches a list element or a non-identifier key through `index`, which is a call rather than a path — so there is nothing to insert."

package/dist/expressions/playground/panels/GraphPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GraphPanel.cjs","sources":["../../../../src/expressions/playground/panels/GraphPanel.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  createLazyJSONPathTree,\n  literalSegments,\n  type JSONPathNode,\n  type LazyJSONPathTree,\n} from \"../../../components/jsonPathTree\";\nimport { ObjectGraph } from \"../../../data/ObjectGraph\";\nimport { pathExpression } from \"../../lang/index.ts\";\nimport { toGraphNode } from \"./graphNodes.ts\";\nimport type { GraphNode } from \"./graphNodes.ts\";\n\ninterface GraphPanelProps {\n  /** The parsed input document, or undefined when there is nothing to show. */\n  document: unknown;\n  /** Monaco language id, which decides the syntax a click inserts. */\n  languageId: string;\n  /** Writes an expression at the source editor's cursor. */\n  onInsert: (expression: string) => void;\n}\n\n/**\n * The shape of the document being evaluated against.\n *\n * The input pane shows the document as text; this shows it as paths. Clicking a\n * row writes that path into the expression, in the syntax of the language being\n * written, which is the step that otherwise means reading YAML and retyping it\n * by hand.\n */\nexport function GraphPanel({\n  document,\n  languageId,\n  onInsert,\n}: GraphPanelProps) {\n  const [selectedId, setSelectedId] = useState<string>();\n  const [note, setNote] = useState<string>();\n\n  const tree = useMemo<LazyJSONPathTree | null>(\n    () =>\n      document === undefined || document === null\n        ? null\n        : createLazyJSONPathTree(document, { keyPrefix: \"input\" }),\n    [document],\n  );\n\n  const roots = useMemo(\n    () => (tree ? tree.roots.map(toGraphNode) : []),\n    [tree],\n  );\n\n  if (!tree) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground\">\n        Nothing to show yet — write a YAML or JSON document in the input pane\n        and its shape appears here.\n      </div>\n    );\n  }\n\n  const select = (node: GraphNode) => {\n    setSelectedId(node.id);\n    const segments = node.path ? literalSegments(node.path) : undefined;\n    if (!segments) {\n      setNote(\"That row has no addressable path.\");\n      return;\n    }\n    const expression = pathExpression(languageId, segments);\n    if (expression === null) {\n      setNote(\n        \"A go template reaches a list element or a non-identifier key through `index`, \" +\n          \"which is a call rather than a path — so there is nothing to insert.\",\n      );\n      return;\n    }\n    if (expression === \"\") {\n      setNote(\n        \"The whole document has no name in this language — pick a key under it.\",\n      );\n      return;\n    }\n    setNote(undefined);\n    onInsert(expression);\n  };\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        <ObjectGraph\n          roots={roots}\n          showControls\n          defaultOpenDepth={2}\n          {...(selectedId ? { selectedId } : {})}\n          onNodeSelect={select}\n          loadChildren={async (node) => {\n            const source = node.metadata?.node as JSONPathNode | undefined;\n            if (!source) return [];\n            return (await tree.loadChildren(source)).map(toGraphNode);\n          }}\n          empty=\"The document is empty.\"\n        />\n      </div>\n      <footer className=\"shrink-0 border-t border-border px-4 py-2 text-xs text-muted-foreground\">\n        {note ?? \"Click a key to insert its path at the cursor.\"}\n      </footer>\n    </div>\n  );\n}\n"],"names":["useState","useMemo","createLazyJSONPathTree","toGraphNode","jsx","literalSegments","pathExpression","jsxs","ObjectGraph"],"mappings":";;;;;;;;AA6BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAIA,eAAA;AACpC,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAA;AAExB,QAAM,OAAOC,MAAAA;AAAAA,IACX,MACE,aAAa,UAAa,aAAa,OACnC,OACAC,aAAAA,uBAAuB,UAAU,EAAE,WAAW,SAAS;AAAA,IAC7D,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,QAAQD,MAAAA;AAAAA,IACZ,MAAO,OAAO,KAAK,MAAM,IAAIE,WAAAA,WAAW,IAAI,CAAA;AAAA,IAC5C,CAAC,IAAI;AAAA,EAAA;AAGP,MAAI,CAAC,MAAM;AACT,WACEC,2BAAAA,IAAC,OAAA,EAAI,WAAU,yFAAwF,UAAA,qGAGvG;AAAA,EAEJ;AAEA,QAAM,SAAS,CAAC,SAAoB;AAClC,kBAAc,KAAK,EAAE;AACrB,UAAM,WAAW,KAAK,OAAOC,aAAAA,gBAAgB,KAAK,IAAI,IAAI;AAC1D,QAAI,CAAC,UAAU;AACb,cAAQ,mCAAmC;AAC3C;AAAA,IACF;AACA,UAAM,aAAaC,YAAAA,eAAe,YAAY,QAAQ;AACtD,QAAI,eAAe,MAAM;AACvB;AAAA,QACE;AAAA,MAAA;AAGF;AAAA,IACF;AACA,QAAI,eAAe,IAAI;AACrB;AAAA,QACE;AAAA,MAAA;AAEF;AAAA,IACF;AACA,YAAQ,MAAS;AACjB,aAAS,UAAU;AAAA,EACrB;AAEA,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCACb,UAAAA,2BAAAA;AAAAA,MAACI,YAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,kBAAkB;AAAA,QACjB,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,QACnC,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;;AAC5B,gBAAM,UAAS,UAAK,aAAL,mBAAe;AAC9B,cAAI,CAAC,OAAQ,QAAO,CAAA;AACpB,kBAAQ,MAAM,KAAK,aAAa,MAAM,GAAG,IAAIL,sBAAW;AAAA,QAC1D;AAAA,QACA,OAAM;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,IACAC,2BAAAA,IAAC,UAAA,EAAO,WAAU,2EACf,kBAAQ,gDAAA,CACX;AAAA,EAAA,GACF;AAEJ;;"}
+{"version":3,"file":"GraphPanel.cjs","sources":["../../../../src/expressions/playground/panels/GraphPanel.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  createLazyJSONPathTree,\n  literalSegments,\n  type JSONPathNode,\n  type LazyJSONPathTree,\n} from \"../../../components/jsonPathTree\";\nimport { ObjectGraph } from \"../../../data/ObjectGraph\";\nimport { pathExpression } from \"../../lang/index.ts\";\nimport { toGraphNode } from \"./graphNodes.ts\";\nimport type { GraphNode } from \"./graphNodes.ts\";\n\ninterface GraphPanelProps {\n  /** The parsed input document, or undefined when there is nothing to show. */\n  document: unknown;\n  /** Monaco language id, which decides the syntax a click inserts. */\n  languageId: string;\n  /** Writes an expression at the source editor's cursor. */\n  onInsert: (expression: string) => void;\n  formatPath?: (segments: Array<string | number>) => string | null;\n}\n\n/**\n * The shape of the document being evaluated against.\n *\n * The input pane shows the document as text; this shows it as paths. Clicking a\n * row writes that path into the expression, in the syntax of the language being\n * written, which is the step that otherwise means reading YAML and retyping it\n * by hand.\n */\nexport function GraphPanel({\n  document,\n  languageId,\n  onInsert,\n  formatPath,\n}: GraphPanelProps) {\n  const [selectedId, setSelectedId] = useState<string>();\n  const [note, setNote] = useState<string>();\n\n  const tree = useMemo<LazyJSONPathTree | null>(\n    () =>\n      document === undefined || document === null\n        ? null\n        : createLazyJSONPathTree(document, { keyPrefix: \"input\" }),\n    [document],\n  );\n\n  const roots = useMemo(\n    () => (tree ? tree.roots.map(toGraphNode) : []),\n    [tree],\n  );\n\n  if (!tree) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground\">\n        Nothing to show yet — write a YAML or JSON document in the input pane\n        and its shape appears here.\n      </div>\n    );\n  }\n\n  const select = (node: GraphNode) => {\n    setSelectedId(node.id);\n    const segments = node.path ? literalSegments(node.path) : undefined;\n    if (!segments) {\n      setNote(\"That row has no addressable path.\");\n      return;\n    }\n    const expression = formatPath ? formatPath(segments) : pathExpression(languageId, segments);\n    if (expression === null) {\n      setNote(\n        \"A go template reaches a list element or a non-identifier key through `index`, \" +\n          \"which is a call rather than a path — so there is nothing to insert.\",\n      );\n      return;\n    }\n    if (expression === \"\") {\n      setNote(\n        \"The whole document has no name in this language — pick a key under it.\",\n      );\n      return;\n    }\n    setNote(undefined);\n    onInsert(expression);\n  };\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        <ObjectGraph\n          roots={roots}\n          showControls\n          defaultOpenDepth={2}\n          {...(selectedId ? { selectedId } : {})}\n          onNodeSelect={select}\n          loadChildren={async (node) => {\n            const source = node.metadata?.node as JSONPathNode | undefined;\n            if (!source) return [];\n            return (await tree.loadChildren(source)).map(toGraphNode);\n          }}\n          empty=\"The document is empty.\"\n        />\n      </div>\n      <footer className=\"shrink-0 border-t border-border px-4 py-2 text-xs text-muted-foreground\">\n        {note ?? \"Click a key to insert its path at the cursor.\"}\n      </footer>\n    </div>\n  );\n}\n"],"names":["useState","useMemo","createLazyJSONPathTree","toGraphNode","jsx","literalSegments","pathExpression","jsxs","ObjectGraph"],"mappings":";;;;;;;;AA8BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAIA,eAAA;AACpC,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAA;AAExB,QAAM,OAAOC,MAAAA;AAAAA,IACX,MACE,aAAa,UAAa,aAAa,OACnC,OACAC,aAAAA,uBAAuB,UAAU,EAAE,WAAW,SAAS;AAAA,IAC7D,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,QAAQD,MAAAA;AAAAA,IACZ,MAAO,OAAO,KAAK,MAAM,IAAIE,WAAAA,WAAW,IAAI,CAAA;AAAA,IAC5C,CAAC,IAAI;AAAA,EAAA;AAGP,MAAI,CAAC,MAAM;AACT,WACEC,2BAAAA,IAAC,OAAA,EAAI,WAAU,yFAAwF,UAAA,qGAGvG;AAAA,EAEJ;AAEA,QAAM,SAAS,CAAC,SAAoB;AAClC,kBAAc,KAAK,EAAE;AACrB,UAAM,WAAW,KAAK,OAAOC,aAAAA,gBAAgB,KAAK,IAAI,IAAI;AAC1D,QAAI,CAAC,UAAU;AACb,cAAQ,mCAAmC;AAC3C;AAAA,IACF;AACA,UAAM,aAAa,aAAa,WAAW,QAAQ,IAAIC,YAAAA,eAAe,YAAY,QAAQ;AAC1F,QAAI,eAAe,MAAM;AACvB;AAAA,QACE;AAAA,MAAA;AAGF;AAAA,IACF;AACA,QAAI,eAAe,IAAI;AACrB;AAAA,QACE;AAAA,MAAA;AAEF;AAAA,IACF;AACA,YAAQ,MAAS;AACjB,aAAS,UAAU;AAAA,EACrB;AAEA,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCACb,UAAAA,2BAAAA;AAAAA,MAACI,YAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,kBAAkB;AAAA,QACjB,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,QACnC,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;;AAC5B,gBAAM,UAAS,UAAK,aAAL,mBAAe;AAC9B,cAAI,CAAC,OAAQ,QAAO,CAAA;AACpB,kBAAQ,MAAM,KAAK,aAAa,MAAM,GAAG,IAAIL,sBAAW;AAAA,QAC1D;AAAA,QACA,OAAM;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,IACAC,2BAAAA,IAAC,UAAA,EAAO,WAAU,2EACf,kBAAQ,gDAAA,CACX;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/expressions/playground/panels/GraphPanel.d.ts

@@ -5,6 +5,7 @@ interface GraphPanelProps {
     languageId: string;
     /** Writes an expression at the source editor's cursor. */
     onInsert: (expression: string) => void;
+    formatPath?: (segments: Array<string | number>) => string | null;
 }
 /**
  * The shape of the document being evaluated against.
@@ -14,6 +15,6 @@ interface GraphPanelProps {
  * written, which is the step that otherwise means reading YAML and retyping it
  * by hand.
  */
-export declare function GraphPanel({ document, languageId, onInsert, }: GraphPanelProps): import("react").JSX.Element;
+export declare function GraphPanel({ document, languageId, onInsert, formatPath, }: GraphPanelProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=GraphPanel.d.ts.map

package/dist/expressions/playground/panels/GraphPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GraphPanel.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/GraphPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,eAAe;IACvB,6EAA6E;IAC7E,QAAQ,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,QAAQ,GACT,EAAE,eAAe,+BAyEjB"}
+{"version":3,"file":"GraphPanel.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/GraphPanel.tsx"],"names":[],"mappings":"AAYA,UAAU,eAAe;IACvB,6EAA6E;IAC7E,QAAQ,EAAE,OAAO,CAAC;IAClB,oEAAoE;IACpE,UAAU,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,MAAM,GAAG,IAAI,CAAC;CAClE;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,UAAU,GACX,EAAE,eAAe,+BAyEjB"}

package/dist/expressions/playground/panels/GraphPanel.js

@@ -7,7 +7,8 @@ import { pathExpression } from "../../lang/environment.js";
 function GraphPanel({
   document,
   languageId,
-  onInsert
+  onInsert,
+  formatPath
 }) {
   const [selectedId, setSelectedId] = useState();
   const [note, setNote] = useState();
@@ -29,7 +30,7 @@ function GraphPanel({
       setNote("That row has no addressable path.");
       return;
     }
-    const expression = pathExpression(languageId, segments);
+    const expression = formatPath ? formatPath(segments) : pathExpression(languageId, segments);
     if (expression === null) {
       setNote(
         "A go template reaches a list element or a non-identifier key through `index`, which is a call rather than a path — so there is nothing to insert."

package/dist/expressions/playground/panels/GraphPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphPanel.js","sources":["../../../../src/expressions/playground/panels/GraphPanel.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  createLazyJSONPathTree,\n  literalSegments,\n  type JSONPathNode,\n  type LazyJSONPathTree,\n} from \"../../../components/jsonPathTree\";\nimport { ObjectGraph } from \"../../../data/ObjectGraph\";\nimport { pathExpression } from \"../../lang/index.ts\";\nimport { toGraphNode } from \"./graphNodes.ts\";\nimport type { GraphNode } from \"./graphNodes.ts\";\n\ninterface GraphPanelProps {\n  /** The parsed input document, or undefined when there is nothing to show. */\n  document: unknown;\n  /** Monaco language id, which decides the syntax a click inserts. */\n  languageId: string;\n  /** Writes an expression at the source editor's cursor. */\n  onInsert: (expression: string) => void;\n}\n\n/**\n * The shape of the document being evaluated against.\n *\n * The input pane shows the document as text; this shows it as paths. Clicking a\n * row writes that path into the expression, in the syntax of the language being\n * written, which is the step that otherwise means reading YAML and retyping it\n * by hand.\n */\nexport function GraphPanel({\n  document,\n  languageId,\n  onInsert,\n}: GraphPanelProps) {\n  const [selectedId, setSelectedId] = useState<string>();\n  const [note, setNote] = useState<string>();\n\n  const tree = useMemo<LazyJSONPathTree | null>(\n    () =>\n      document === undefined || document === null\n        ? null\n        : createLazyJSONPathTree(document, { keyPrefix: \"input\" }),\n    [document],\n  );\n\n  const roots = useMemo(\n    () => (tree ? tree.roots.map(toGraphNode) : []),\n    [tree],\n  );\n\n  if (!tree) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground\">\n        Nothing to show yet — write a YAML or JSON document in the input pane\n        and its shape appears here.\n      </div>\n    );\n  }\n\n  const select = (node: GraphNode) => {\n    setSelectedId(node.id);\n    const segments = node.path ? literalSegments(node.path) : undefined;\n    if (!segments) {\n      setNote(\"That row has no addressable path.\");\n      return;\n    }\n    const expression = pathExpression(languageId, segments);\n    if (expression === null) {\n      setNote(\n        \"A go template reaches a list element or a non-identifier key through `index`, \" +\n          \"which is a call rather than a path — so there is nothing to insert.\",\n      );\n      return;\n    }\n    if (expression === \"\") {\n      setNote(\n        \"The whole document has no name in this language — pick a key under it.\",\n      );\n      return;\n    }\n    setNote(undefined);\n    onInsert(expression);\n  };\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        <ObjectGraph\n          roots={roots}\n          showControls\n          defaultOpenDepth={2}\n          {...(selectedId ? { selectedId } : {})}\n          onNodeSelect={select}\n          loadChildren={async (node) => {\n            const source = node.metadata?.node as JSONPathNode | undefined;\n            if (!source) return [];\n            return (await tree.loadChildren(source)).map(toGraphNode);\n          }}\n          empty=\"The document is empty.\"\n        />\n      </div>\n      <footer className=\"shrink-0 border-t border-border px-4 py-2 text-xs text-muted-foreground\">\n        {note ?? \"Click a key to insert its path at the cursor.\"}\n      </footer>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA6BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAA;AACpC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAA;AAExB,QAAM,OAAO;AAAA,IACX,MACE,aAAa,UAAa,aAAa,OACnC,OACA,uBAAuB,UAAU,EAAE,WAAW,SAAS;AAAA,IAC7D,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,QAAQ;AAAA,IACZ,MAAO,OAAO,KAAK,MAAM,IAAI,WAAW,IAAI,CAAA;AAAA,IAC5C,CAAC,IAAI;AAAA,EAAA;AAGP,MAAI,CAAC,MAAM;AACT,WACE,oBAAC,OAAA,EAAI,WAAU,yFAAwF,UAAA,qGAGvG;AAAA,EAEJ;AAEA,QAAM,SAAS,CAAC,SAAoB;AAClC,kBAAc,KAAK,EAAE;AACrB,UAAM,WAAW,KAAK,OAAO,gBAAgB,KAAK,IAAI,IAAI;AAC1D,QAAI,CAAC,UAAU;AACb,cAAQ,mCAAmC;AAC3C;AAAA,IACF;AACA,UAAM,aAAa,eAAe,YAAY,QAAQ;AACtD,QAAI,eAAe,MAAM;AACvB;AAAA,QACE;AAAA,MAAA;AAGF;AAAA,IACF;AACA,QAAI,eAAe,IAAI;AACrB;AAAA,QACE;AAAA,MAAA;AAEF;AAAA,IACF;AACA,YAAQ,MAAS;AACjB,aAAS,UAAU;AAAA,EACrB;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,kBAAkB;AAAA,QACjB,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,QACnC,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;;AAC5B,gBAAM,UAAS,UAAK,aAAL,mBAAe;AAC9B,cAAI,CAAC,OAAQ,QAAO,CAAA;AACpB,kBAAQ,MAAM,KAAK,aAAa,MAAM,GAAG,IAAI,WAAW;AAAA,QAC1D;AAAA,QACA,OAAM;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,IACA,oBAAC,UAAA,EAAO,WAAU,2EACf,kBAAQ,gDAAA,CACX;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"GraphPanel.js","sources":["../../../../src/expressions/playground/panels/GraphPanel.tsx"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport {\n  createLazyJSONPathTree,\n  literalSegments,\n  type JSONPathNode,\n  type LazyJSONPathTree,\n} from \"../../../components/jsonPathTree\";\nimport { ObjectGraph } from \"../../../data/ObjectGraph\";\nimport { pathExpression } from \"../../lang/index.ts\";\nimport { toGraphNode } from \"./graphNodes.ts\";\nimport type { GraphNode } from \"./graphNodes.ts\";\n\ninterface GraphPanelProps {\n  /** The parsed input document, or undefined when there is nothing to show. */\n  document: unknown;\n  /** Monaco language id, which decides the syntax a click inserts. */\n  languageId: string;\n  /** Writes an expression at the source editor's cursor. */\n  onInsert: (expression: string) => void;\n  formatPath?: (segments: Array<string | number>) => string | null;\n}\n\n/**\n * The shape of the document being evaluated against.\n *\n * The input pane shows the document as text; this shows it as paths. Clicking a\n * row writes that path into the expression, in the syntax of the language being\n * written, which is the step that otherwise means reading YAML and retyping it\n * by hand.\n */\nexport function GraphPanel({\n  document,\n  languageId,\n  onInsert,\n  formatPath,\n}: GraphPanelProps) {\n  const [selectedId, setSelectedId] = useState<string>();\n  const [note, setNote] = useState<string>();\n\n  const tree = useMemo<LazyJSONPathTree | null>(\n    () =>\n      document === undefined || document === null\n        ? null\n        : createLazyJSONPathTree(document, { keyPrefix: \"input\" }),\n    [document],\n  );\n\n  const roots = useMemo(\n    () => (tree ? tree.roots.map(toGraphNode) : []),\n    [tree],\n  );\n\n  if (!tree) {\n    return (\n      <div className=\"flex h-full items-center justify-center p-6 text-center text-sm text-muted-foreground\">\n        Nothing to show yet — write a YAML or JSON document in the input pane\n        and its shape appears here.\n      </div>\n    );\n  }\n\n  const select = (node: GraphNode) => {\n    setSelectedId(node.id);\n    const segments = node.path ? literalSegments(node.path) : undefined;\n    if (!segments) {\n      setNote(\"That row has no addressable path.\");\n      return;\n    }\n    const expression = formatPath ? formatPath(segments) : pathExpression(languageId, segments);\n    if (expression === null) {\n      setNote(\n        \"A go template reaches a list element or a non-identifier key through `index`, \" +\n          \"which is a call rather than a path — so there is nothing to insert.\",\n      );\n      return;\n    }\n    if (expression === \"\") {\n      setNote(\n        \"The whole document has no name in this language — pick a key under it.\",\n      );\n      return;\n    }\n    setNote(undefined);\n    onInsert(expression);\n  };\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col\">\n      <div className=\"min-h-0 flex-1 overflow-auto p-2\">\n        <ObjectGraph\n          roots={roots}\n          showControls\n          defaultOpenDepth={2}\n          {...(selectedId ? { selectedId } : {})}\n          onNodeSelect={select}\n          loadChildren={async (node) => {\n            const source = node.metadata?.node as JSONPathNode | undefined;\n            if (!source) return [];\n            return (await tree.loadChildren(source)).map(toGraphNode);\n          }}\n          empty=\"The document is empty.\"\n        />\n      </div>\n      <footer className=\"shrink-0 border-t border-border px-4 py-2 text-xs text-muted-foreground\">\n        {note ?? \"Click a key to insert its path at the cursor.\"}\n      </footer>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA8BO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,CAAC,YAAY,aAAa,IAAI,SAAA;AACpC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAA;AAExB,QAAM,OAAO;AAAA,IACX,MACE,aAAa,UAAa,aAAa,OACnC,OACA,uBAAuB,UAAU,EAAE,WAAW,SAAS;AAAA,IAC7D,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,QAAQ;AAAA,IACZ,MAAO,OAAO,KAAK,MAAM,IAAI,WAAW,IAAI,CAAA;AAAA,IAC5C,CAAC,IAAI;AAAA,EAAA;AAGP,MAAI,CAAC,MAAM;AACT,WACE,oBAAC,OAAA,EAAI,WAAU,yFAAwF,UAAA,qGAGvG;AAAA,EAEJ;AAEA,QAAM,SAAS,CAAC,SAAoB;AAClC,kBAAc,KAAK,EAAE;AACrB,UAAM,WAAW,KAAK,OAAO,gBAAgB,KAAK,IAAI,IAAI;AAC1D,QAAI,CAAC,UAAU;AACb,cAAQ,mCAAmC;AAC3C;AAAA,IACF;AACA,UAAM,aAAa,aAAa,WAAW,QAAQ,IAAI,eAAe,YAAY,QAAQ;AAC1F,QAAI,eAAe,MAAM;AACvB;AAAA,QACE;AAAA,MAAA;AAGF;AAAA,IACF;AACA,QAAI,eAAe,IAAI;AACrB;AAAA,QACE;AAAA,MAAA;AAEF;AAAA,IACF;AACA,YAAQ,MAAS;AACjB,aAAS,UAAU;AAAA,EACrB;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,kBAAkB;AAAA,QACjB,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,QACnC,cAAc;AAAA,QACd,cAAc,OAAO,SAAS;;AAC5B,gBAAM,UAAS,UAAK,aAAL,mBAAe;AAC9B,cAAI,CAAC,OAAQ,QAAO,CAAA;AACpB,kBAAQ,MAAM,KAAK,aAAa,MAAM,GAAG,IAAI,WAAW;AAAA,QAC1D;AAAA,QACA,OAAM;AAAA,MAAA;AAAA,IAAA,GAEV;AAAA,IACA,oBAAC,UAAA,EAAO,WAAU,2EACf,kBAAQ,gDAAA,CACX;AAAA,EAAA,GACF;AAEJ;"}

package/dist/expressions/playground/panels/ResultPanel.cjs

@@ -6,27 +6,33 @@ const Badge = require("../../../data/Badge.cjs");
 const CodeBlock = require("../../../data/CodeBlock.cjs");
 const JsonView = require("../../../data/JsonView.cjs");
 const runShortcut = require("../runShortcut.cjs");
+const ExpectationStrip = require("./ExpectationStrip.cjs");
 function ResultPanel({
   response,
   pending,
   stale,
-  onRun
+  onRun,
+  expectation
 }) {
+  const expected = expectation ? /* @__PURE__ */ jsxRuntime.jsx(ExpectationStrip.ExpectationStrip, { expectation, response, stale }) : null;
   if (!response) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: pending ? "Evaluating…" : "Type an expression, then run it." }),
-      stale && !pending ? /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: onRun, size: "sm", className: "mt-3", children: [
-        "Run (",
-        runShortcut.RUN_SHORTCUT_LABEL,
-        ")"
-      ] }) : null
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+      expected,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: pending ? "Evaluating…" : "Type an expression, then run it." }),
+        stale && !pending ? /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: onRun, size: "sm", className: "mt-3", children: [
+          "Run (",
+          runShortcut.RUN_SHORTCUT_LABEL,
+          ")"
+        ] }) : null
+      ] })
     ] });
   }
   if (response.error) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-destructive", children: response.error.line ? `Error at line ${response.error.line}, column ${response.error.column}` : "Error" }),
-      /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: response.error.message, bare: true })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+      expected,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx(ResultError, { error: response.error }) })
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-2 text-xs text-muted-foreground", children: [
@@ -35,39 +41,55 @@ function ResultPanel({
         " ms"
       ] }),
       response.type ? /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { variant: "outline", children: response.type }) : null,
-      stale ? /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onRun,
-          className: "ml-auto rounded border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-amber-700 hover:bg-amber-500/20 dark:text-amber-400",
-          title: `Run (${runShortcut.RUN_SHORTCUT_LABEL})`,
-          children: "Out of date — run again"
-        }
-      ) : null
+      stale ? /* @__PURE__ */ jsxRuntime.jsx(StaleButton, { onRun }) : null
     ] }),
+    expected,
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: `min-h-0 flex-1 overflow-auto p-4 ${stale ? "opacity-50" : ""}`,
-        children: isStructured(response.value) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: response.value, defaultOpenDepth: 3 }),
-          /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Rendered string" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: response.result, bare: true, copyable: false }) })
-          ] })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-          CodeBlock.CodeBlock,
-          {
-            source: response.result || "(empty)",
-            language: languageOf(response.result),
-            copyable: true
-          }
-        )
+        children: /* @__PURE__ */ jsxRuntime.jsx(ResultValue, { response })
       }
     )
   ] });
 }
+function StaleButton({ onRun, label = "Out of date — run again" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onRun,
+      className: "ml-auto rounded border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-amber-700 hover:bg-amber-500/20 dark:text-amber-400",
+      title: `Run (${runShortcut.RUN_SHORTCUT_LABEL})`,
+      children: label
+    }
+  );
+}
+function ResultError({ error }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-xs font-medium uppercase tracking-wide text-destructive", children: error.line ? `Error at line ${error.line}, column ${error.column}` : "Error" }),
+    /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: error.message, bare: true })
+  ] });
+}
+function ResultValue({ response }) {
+  if (isStructured(response.value)) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(JsonView.JsonView, { data: response.value, defaultOpenDepth: 3 }),
+      /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Rendered string" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(CodeBlock.CodeBlock, { source: response.result, bare: true, copyable: false }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CodeBlock.CodeBlock,
+    {
+      source: response.result || "(empty)",
+      language: languageOf(response.result),
+      copyable: true
+    }
+  );
+}
 function isStructured(value) {
   return typeof value === "object" && value !== null;
 }
@@ -78,5 +100,8 @@ function languageOf(result) {
   if (/^[A-Za-z_][\w.-]*:\s/m.test(trimmed)) return "yaml";
   return void 0;
 }
+exports.ResultError = ResultError;
 exports.ResultPanel = ResultPanel;
+exports.ResultValue = ResultValue;
+exports.StaleButton = StaleButton;
 //# sourceMappingURL=ResultPanel.cjs.map