@flanksource/clicky-ui 0.3.36 → 0.3.37

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

@@ -1 +1 @@
-{"version":3,"file":"ResultPanel.cjs","sources":["../../../../src/expressions/playground/panels/ResultPanel.tsx"],"sourcesContent":["import { Button } from \"../../../components/button\";\nimport { Badge } from \"../../../data/Badge\";\nimport { CodeBlock } from \"../../../data/CodeBlock\";\nimport { JsonView } from \"../../../data/JsonView\";\nimport type { EvalResponse } from \"../api.ts\";\nimport { RUN_SHORTCUT_LABEL } from \"../runShortcut\";\n\ninterface ResultPanelProps {\n  response: EvalResponse | null;\n  pending: boolean;\n  /** The shown result predates the current source or input. */\n  stale: boolean;\n  onRun: () => void;\n}\n\nexport function ResultPanel({\n  response,\n  pending,\n  stale,\n  onRun,\n}: ResultPanelProps) {\n  if (!response) {\n    return (\n      <div className=\"p-4\">\n        <p className=\"text-sm text-muted-foreground\">\n          {pending ? \"Evaluating…\" : \"Type an expression, then run it.\"}\n        </p>\n        {stale && !pending ? (\n          <Button onClick={onRun} size=\"sm\" className=\"mt-3\">\n            Run ({RUN_SHORTCUT_LABEL})\n          </Button>\n        ) : null}\n      </div>\n    );\n  }\n\n  if (response.error) {\n    return (\n      <div className=\"p-4\">\n        <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3\">\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-destructive\">\n            {response.error.line\n              ? `Error at line ${response.error.line}, column ${response.error.column}`\n              : \"Error\"}\n          </p>\n          <CodeBlock source={response.error.message} bare />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center gap-2 border-b border-border px-4 py-2 text-xs text-muted-foreground\">\n        <Badge variant=\"outline\">{response.durationMs.toFixed(2)} ms</Badge>\n        {response.type ? (\n          <Badge variant=\"outline\">{response.type}</Badge>\n        ) : null}\n        {/* Without this, a result that no longer matches what is on screen is\n            indistinguishable from one that does. */}\n        {stale ? (\n          <button\n            type=\"button\"\n            onClick={onRun}\n            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\"\n            title={`Run (${RUN_SHORTCUT_LABEL})`}\n          >\n            Out of date — run again\n          </button>\n        ) : null}\n      </div>\n\n      <div\n        className={`min-h-0 flex-1 overflow-auto p-4 ${stale ? \"opacity-50\" : \"\"}`}\n      >\n        {/* The rendered string is what a gomplate caller receives. A structured\n            result is more readable as a tree, so hand those to JsonView and\n            keep the raw rendering below it. */}\n        {isStructured(response.value) ? (\n          <>\n            <JsonView data={response.value} defaultOpenDepth={3} />\n            <details className=\"mt-4\">\n              <summary className=\"cursor-pointer text-xs text-muted-foreground\">\n                Rendered string\n              </summary>\n              <div className=\"mt-2\">\n                <CodeBlock source={response.result} bare copyable={false} />\n              </div>\n            </details>\n          </>\n        ) : (\n          <CodeBlock\n            source={response.result || \"(empty)\"}\n            language={languageOf(response.result)}\n            copyable\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction isStructured(value: unknown): boolean {\n  return typeof value === \"object\" && value !== null;\n}\n\n/**\n * Templates render whole documents, so highlight the output when it is\n * recognisably YAML or JSON rather than showing a wall of grey.\n */\nfunction languageOf(result: string): string | undefined {\n  const trimmed = result.trim();\n  if (!trimmed) return undefined;\n  if (trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\")) return \"json\";\n  if (/^[A-Za-z_][\\w.-]*:\\s/m.test(trimmed)) return \"yaml\";\n  return undefined;\n}\n"],"names":["jsxs","jsx","Button","RUN_SHORTCUT_LABEL","CodeBlock","Badge","Fragment","JsonView"],"mappings":"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"}
+{"version":3,"file":"ResultPanel.cjs","sources":["../../../../src/expressions/playground/panels/ResultPanel.tsx"],"sourcesContent":["import { Button } from \"../../../components/button\";\nimport { Badge } from \"../../../data/Badge\";\nimport { CodeBlock } from \"../../../data/CodeBlock\";\nimport { JsonView } from \"../../../data/JsonView\";\nimport type { EvalError, EvalResponse, ResultExpectation } from \"../api.ts\";\nimport { RUN_SHORTCUT_LABEL } from \"../runShortcut\";\nimport { ExpectationStrip } from \"./ExpectationStrip.tsx\";\n\ninterface ResultPanelProps {\n  response: EvalResponse | null;\n  pending: boolean;\n  /** The shown result predates the current source or input. */\n  stale: boolean;\n  onRun: () => void;\n  expectation?: ResultExpectation | undefined;\n}\n\nexport function ResultPanel({\n  response,\n  pending,\n  stale,\n  onRun,\n  expectation,\n}: ResultPanelProps) {\n  const expected = expectation ? (\n    <ExpectationStrip expectation={expectation} response={response} stale={stale} />\n  ) : null;\n\n  if (!response) {\n    return (\n      <div className=\"flex h-full flex-col\">\n        {expected}\n        <div className=\"p-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            {pending ? \"Evaluating…\" : \"Type an expression, then run it.\"}\n          </p>\n          {stale && !pending ? (\n            <Button onClick={onRun} size=\"sm\" className=\"mt-3\">\n              Run ({RUN_SHORTCUT_LABEL})\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (response.error) {\n    return (\n      <div className=\"flex h-full flex-col\">\n        {expected}\n        <div className=\"p-4\">\n          <ResultError error={response.error} />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center gap-2 border-b border-border px-4 py-2 text-xs text-muted-foreground\">\n        <Badge variant=\"outline\">{response.durationMs.toFixed(2)} ms</Badge>\n        {response.type ? (\n          <Badge variant=\"outline\">{response.type}</Badge>\n        ) : null}\n        {/* Without this, a result that no longer matches what is on screen is\n            indistinguishable from one that does. */}\n        {stale ? <StaleButton onRun={onRun} /> : null}\n      </div>\n      {expected}\n\n      <div\n        className={`min-h-0 flex-1 overflow-auto p-4 ${stale ? \"opacity-50\" : \"\"}`}\n      >\n        <ResultValue response={response} />\n      </div>\n    </div>\n  );\n}\n\nexport function StaleButton({ onRun, label = \"Out of date — run again\" }: { onRun: () => void; label?: string }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onRun}\n      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\"\n      title={`Run (${RUN_SHORTCUT_LABEL})`}\n    >\n      {label}\n    </button>\n  );\n}\n\nexport function ResultError({ error }: { error: EvalError }) {\n  return (\n    <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3\">\n      <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-destructive\">\n        {error.line\n          ? `Error at line ${error.line}, column ${error.column}`\n          : \"Error\"}\n      </p>\n      <CodeBlock source={error.message} bare />\n    </div>\n  );\n}\n\n/**\n * The rendered string is what a gomplate caller receives. A structured result\n * is more readable as a tree, so hand those to JsonView and keep the raw\n * rendering below it.\n */\nexport function ResultValue({ response }: { response: EvalResponse }) {\n  if (isStructured(response.value)) {\n    return (\n      <>\n        <JsonView data={response.value} defaultOpenDepth={3} />\n        <details className=\"mt-4\">\n          <summary className=\"cursor-pointer text-xs text-muted-foreground\">\n            Rendered string\n          </summary>\n          <div className=\"mt-2\">\n            <CodeBlock source={response.result} bare copyable={false} />\n          </div>\n        </details>\n      </>\n    );\n  }\n  return (\n    <CodeBlock\n      source={response.result || \"(empty)\"}\n      language={languageOf(response.result)}\n      copyable\n    />\n  );\n}\n\nfunction isStructured(value: unknown): boolean {\n  return typeof value === \"object\" && value !== null;\n}\n\n/**\n * Templates render whole documents, so highlight the output when it is\n * recognisably YAML or JSON rather than showing a wall of grey.\n */\nfunction languageOf(result: string): string | undefined {\n  const trimmed = result.trim();\n  if (!trimmed) return undefined;\n  if (trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\")) return \"json\";\n  if (/^[A-Za-z_][\\w.-]*:\\s/m.test(trimmed)) return \"yaml\";\n  return undefined;\n}\n"],"names":["jsx","ExpectationStrip","jsxs","Button","RUN_SHORTCUT_LABEL","Badge","CodeBlock","Fragment","JsonView"],"mappings":";;;;;;;;;AAiBO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,WAAW,cACfA,2BAAAA,IAACC,iBAAAA,oBAAiB,aAA0B,UAAoB,OAAc,IAC5E;AAEJ,MAAI,CAAC,UAAU;AACb,WACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,MAAA;AAAA,MACDA,2BAAAA,KAAC,OAAA,EAAI,WAAU,OACb,UAAA;AAAA,QAAAF,+BAAC,KAAA,EAAE,WAAU,iCACV,UAAA,UAAU,gBAAgB,oCAC7B;AAAA,QACC,SAAS,CAAC,UACTE,2BAAAA,KAACC,OAAAA,QAAA,EAAO,SAAS,OAAO,MAAK,MAAK,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UAC3CC,YAAAA;AAAAA,UAAmB;AAAA,QAAA,EAAA,CAC3B,IACE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,MAAI,SAAS,OAAO;AAClB,WACEF,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,MAAA;AAAA,MACDF,2BAAAA,IAAC,SAAI,WAAU,OACb,yCAAC,aAAA,EAAY,OAAO,SAAS,MAAA,CAAO,EAAA,CACtC;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACEE,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,0FACb,UAAA;AAAA,MAAAA,2BAAAA,KAACG,MAAAA,OAAA,EAAM,SAAQ,WAAW,UAAA;AAAA,QAAA,SAAS,WAAW,QAAQ,CAAC;AAAA,QAAE;AAAA,MAAA,GAAG;AAAA,MAC3D,SAAS,OACRL,+BAACK,MAAAA,OAAA,EAAM,SAAQ,WAAW,UAAA,SAAS,MAAK,IACtC;AAAA,MAGH,QAAQL,2BAAAA,IAAC,aAAA,EAAY,MAAA,CAAc,IAAK;AAAA,IAAA,GAC3C;AAAA,IACC;AAAA,IAEDA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,oCAAoC,QAAQ,eAAe,EAAE;AAAA,QAExE,UAAAA,2BAAAA,IAAC,eAAY,SAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC,GACF;AAEJ;AAEO,SAAS,YAAY,EAAE,OAAO,QAAQ,6BAAoE;AAC/G,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,MACV,OAAO,QAAQI,YAAAA,kBAAkB;AAAA,MAEhC,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,YAAY,EAAE,SAA+B;AAC3D,SACEF,2BAAAA,KAAC,OAAA,EAAI,WAAU,gEACb,UAAA;AAAA,IAAAF,2BAAAA,IAAC,KAAA,EAAE,WAAU,qEACV,UAAA,MAAM,OACH,iBAAiB,MAAM,IAAI,YAAY,MAAM,MAAM,KACnD,SACN;AAAA,mCACCM,UAAAA,WAAA,EAAU,QAAQ,MAAM,SAAS,MAAI,KAAA,CAAC;AAAA,EAAA,GACzC;AAEJ;AAOO,SAAS,YAAY,EAAE,YAAwC;AACpE,MAAI,aAAa,SAAS,KAAK,GAAG;AAChC,WACEJ,2BAAAA,KAAAK,qBAAA,EACE,UAAA;AAAA,MAAAP,2BAAAA,IAACQ,SAAAA,UAAA,EAAS,MAAM,SAAS,OAAO,kBAAkB,GAAG;AAAA,MACrDN,2BAAAA,KAAC,WAAA,EAAQ,WAAU,QACjB,UAAA;AAAA,QAAAF,2BAAAA,IAAC,WAAA,EAAQ,WAAU,gDAA+C,UAAA,mBAElE;AAAA,QACAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,QACb,UAAAA,2BAAAA,IAACM,UAAAA,WAAA,EAAU,QAAQ,SAAS,QAAQ,MAAI,MAAC,UAAU,OAAO,EAAA,CAC5D;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,EAEJ;AACA,SACEN,2BAAAA;AAAAA,IAACM,UAAAA;AAAAA,IAAA;AAAA,MACC,QAAQ,SAAS,UAAU;AAAA,MAC3B,UAAU,WAAW,SAAS,MAAM;AAAA,MACpC,UAAQ;AAAA,IAAA;AAAA,EAAA;AAGd;AAEA,SAAS,aAAa,OAAyB;AAC7C,SAAO,OAAO,UAAU,YAAY,UAAU;AAChD;AAMA,SAAS,WAAW,QAAoC;AACtD,QAAM,UAAU,OAAO,KAAA;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,QAAQ,WAAW,GAAG,KAAK,QAAQ,WAAW,GAAG,EAAG,QAAO;AAC/D,MAAI,wBAAwB,KAAK,OAAO,EAAG,QAAO;AAClD,SAAO;AACT;;;;;"}

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

@@ -1,11 +1,27 @@
-import { EvalResponse } from '../api.ts';
+import { EvalError, EvalResponse, ResultExpectation } from '../api.ts';
 interface ResultPanelProps {
     response: EvalResponse | null;
     pending: boolean;
     /** The shown result predates the current source or input. */
     stale: boolean;
     onRun: () => void;
+    expectation?: ResultExpectation | undefined;
 }
-export declare function ResultPanel({ response, pending, stale, onRun, }: ResultPanelProps): import("react").JSX.Element;
+export declare function ResultPanel({ response, pending, stale, onRun, expectation, }: ResultPanelProps): import("react").JSX.Element;
+export declare function StaleButton({ onRun, label }: {
+    onRun: () => void;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function ResultError({ error }: {
+    error: EvalError;
+}): import("react").JSX.Element;
+/**
+ * The rendered string is what a gomplate caller receives. A structured result
+ * is more readable as a tree, so hand those to JsonView and keep the raw
+ * rendering below it.
+ */
+export declare function ResultValue({ response }: {
+    response: EvalResponse;
+}): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=ResultPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResultPanel.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/ResultPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,UAAU,gBAAgB;IACxB,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,GACN,EAAE,gBAAgB,+BAgFlB"}
+{"version":3,"file":"ResultPanel.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/ResultPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAI5E,UAAU,gBAAgB;IACxB,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;CAC7C;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,KAAK,EACL,KAAK,EACL,WAAW,GACZ,EAAE,gBAAgB,+BAsDlB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,KAAiC,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAW9G;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,CAAA;CAAE,+BAW1D;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,YAAY,CAAA;CAAE,+BAuBnE"}

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

@@ -4,27 +4,33 @@ import { Badge } from "../../../data/Badge.js";
 import { CodeBlock } from "../../../data/CodeBlock.js";
 import { JsonView } from "../../../data/JsonView.js";
 import { RUN_SHORTCUT_LABEL } from "../runShortcut.js";
+import { ExpectationStrip } from "./ExpectationStrip.js";
 function ResultPanel({
   response,
   pending,
   stale,
-  onRun
+  onRun,
+  expectation
 }) {
+  const expected = expectation ? /* @__PURE__ */ jsx(ExpectationStrip, { expectation, response, stale }) : null;
   if (!response) {
-    return /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: pending ? "Evaluating…" : "Type an expression, then run it." }),
-      stale && !pending ? /* @__PURE__ */ jsxs(Button, { onClick: onRun, size: "sm", className: "mt-3", children: [
-        "Run (",
-        RUN_SHORTCUT_LABEL,
-        ")"
-      ] }) : null
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+      expected,
+      /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: pending ? "Evaluating…" : "Type an expression, then run it." }),
+        stale && !pending ? /* @__PURE__ */ jsxs(Button, { onClick: onRun, size: "sm", className: "mt-3", children: [
+          "Run (",
+          RUN_SHORTCUT_LABEL,
+          ")"
+        ] }) : null
+      ] })
     ] });
   }
   if (response.error) {
-    return /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [
-      /* @__PURE__ */ 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__ */ jsx(CodeBlock, { source: response.error.message, bare: true })
-    ] }) });
+    return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+      expected,
+      /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(ResultError, { error: response.error }) })
+    ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border px-4 py-2 text-xs text-muted-foreground", children: [
@@ -33,39 +39,55 @@ function ResultPanel({
         " ms"
       ] }),
       response.type ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: response.type }) : null,
-      stale ? /* @__PURE__ */ 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 (${RUN_SHORTCUT_LABEL})`,
-          children: "Out of date — run again"
-        }
-      ) : null
+      stale ? /* @__PURE__ */ jsx(StaleButton, { onRun }) : null
     ] }),
+    expected,
     /* @__PURE__ */ jsx(
       "div",
       {
         className: `min-h-0 flex-1 overflow-auto p-4 ${stale ? "opacity-50" : ""}`,
-        children: isStructured(response.value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(JsonView, { data: response.value, defaultOpenDepth: 3 }),
-          /* @__PURE__ */ jsxs("details", { className: "mt-4", children: [
-            /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Rendered string" }),
-            /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(CodeBlock, { source: response.result, bare: true, copyable: false }) })
-          ] })
-        ] }) : /* @__PURE__ */ jsx(
-          CodeBlock,
-          {
-            source: response.result || "(empty)",
-            language: languageOf(response.result),
-            copyable: true
-          }
-        )
+        children: /* @__PURE__ */ jsx(ResultValue, { response })
       }
     )
   ] });
 }
+function StaleButton({ onRun, label = "Out of date — run again" }) {
+  return /* @__PURE__ */ 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 (${RUN_SHORTCUT_LABEL})`,
+      children: label
+    }
+  );
+}
+function ResultError({ error }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-3", children: [
+    /* @__PURE__ */ 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__ */ jsx(CodeBlock, { source: error.message, bare: true })
+  ] });
+}
+function ResultValue({ response }) {
+  if (isStructured(response.value)) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(JsonView, { data: response.value, defaultOpenDepth: 3 }),
+      /* @__PURE__ */ jsxs("details", { className: "mt-4", children: [
+        /* @__PURE__ */ jsx("summary", { className: "cursor-pointer text-xs text-muted-foreground", children: "Rendered string" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(CodeBlock, { source: response.result, bare: true, copyable: false }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    CodeBlock,
+    {
+      source: response.result || "(empty)",
+      language: languageOf(response.result),
+      copyable: true
+    }
+  );
+}
 function isStructured(value) {
   return typeof value === "object" && value !== null;
 }
@@ -77,6 +99,9 @@ function languageOf(result) {
   return void 0;
 }
 export {
-  ResultPanel
+  ResultError,
+  ResultPanel,
+  ResultValue,
+  StaleButton
 };
 //# sourceMappingURL=ResultPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ResultPanel.js","sources":["../../../../src/expressions/playground/panels/ResultPanel.tsx"],"sourcesContent":["import { Button } from \"../../../components/button\";\nimport { Badge } from \"../../../data/Badge\";\nimport { CodeBlock } from \"../../../data/CodeBlock\";\nimport { JsonView } from \"../../../data/JsonView\";\nimport type { EvalResponse } from \"../api.ts\";\nimport { RUN_SHORTCUT_LABEL } from \"../runShortcut\";\n\ninterface ResultPanelProps {\n  response: EvalResponse | null;\n  pending: boolean;\n  /** The shown result predates the current source or input. */\n  stale: boolean;\n  onRun: () => void;\n}\n\nexport function ResultPanel({\n  response,\n  pending,\n  stale,\n  onRun,\n}: ResultPanelProps) {\n  if (!response) {\n    return (\n      <div className=\"p-4\">\n        <p className=\"text-sm text-muted-foreground\">\n          {pending ? \"Evaluating…\" : \"Type an expression, then run it.\"}\n        </p>\n        {stale && !pending ? (\n          <Button onClick={onRun} size=\"sm\" className=\"mt-3\">\n            Run ({RUN_SHORTCUT_LABEL})\n          </Button>\n        ) : null}\n      </div>\n    );\n  }\n\n  if (response.error) {\n    return (\n      <div className=\"p-4\">\n        <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3\">\n          <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-destructive\">\n            {response.error.line\n              ? `Error at line ${response.error.line}, column ${response.error.column}`\n              : \"Error\"}\n          </p>\n          <CodeBlock source={response.error.message} bare />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center gap-2 border-b border-border px-4 py-2 text-xs text-muted-foreground\">\n        <Badge variant=\"outline\">{response.durationMs.toFixed(2)} ms</Badge>\n        {response.type ? (\n          <Badge variant=\"outline\">{response.type}</Badge>\n        ) : null}\n        {/* Without this, a result that no longer matches what is on screen is\n            indistinguishable from one that does. */}\n        {stale ? (\n          <button\n            type=\"button\"\n            onClick={onRun}\n            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\"\n            title={`Run (${RUN_SHORTCUT_LABEL})`}\n          >\n            Out of date — run again\n          </button>\n        ) : null}\n      </div>\n\n      <div\n        className={`min-h-0 flex-1 overflow-auto p-4 ${stale ? \"opacity-50\" : \"\"}`}\n      >\n        {/* The rendered string is what a gomplate caller receives. A structured\n            result is more readable as a tree, so hand those to JsonView and\n            keep the raw rendering below it. */}\n        {isStructured(response.value) ? (\n          <>\n            <JsonView data={response.value} defaultOpenDepth={3} />\n            <details className=\"mt-4\">\n              <summary className=\"cursor-pointer text-xs text-muted-foreground\">\n                Rendered string\n              </summary>\n              <div className=\"mt-2\">\n                <CodeBlock source={response.result} bare copyable={false} />\n              </div>\n            </details>\n          </>\n        ) : (\n          <CodeBlock\n            source={response.result || \"(empty)\"}\n            language={languageOf(response.result)}\n            copyable\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction isStructured(value: unknown): boolean {\n  return typeof value === \"object\" && value !== null;\n}\n\n/**\n * Templates render whole documents, so highlight the output when it is\n * recognisably YAML or JSON rather than showing a wall of grey.\n */\nfunction languageOf(result: string): string | undefined {\n  const trimmed = result.trim();\n  if (!trimmed) return undefined;\n  if (trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\")) return \"json\";\n  if (/^[A-Za-z_][\\w.-]*:\\s/m.test(trimmed)) return \"yaml\";\n  return undefined;\n}\n"],"names":[],"mappings":";;;;;;AAeO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,MAAI,CAAC,UAAU;AACb,WACE,qBAAC,OAAA,EAAI,WAAU,OACb,UAAA;AAAA,MAAA,oBAAC,KAAA,EAAE,WAAU,iCACV,UAAA,UAAU,gBAAgB,oCAC7B;AAAA,MACC,SAAS,CAAC,UACT,qBAAC,QAAA,EAAO,SAAS,OAAO,MAAK,MAAK,WAAU,QAAO,UAAA;AAAA,QAAA;AAAA,QAC3C;AAAA,QAAmB;AAAA,MAAA,EAAA,CAC3B,IACE;AAAA,IAAA,GACN;AAAA,EAEJ;AAEA,MAAI,SAAS,OAAO;AAClB,+BACG,OAAA,EAAI,WAAU,OACb,UAAA,qBAAC,OAAA,EAAI,WAAU,gEACb,UAAA;AAAA,MAAA,oBAAC,KAAA,EAAE,WAAU,qEACV,UAAA,SAAS,MAAM,OACZ,iBAAiB,SAAS,MAAM,IAAI,YAAY,SAAS,MAAM,MAAM,KACrE,SACN;AAAA,0BACC,WAAA,EAAU,QAAQ,SAAS,MAAM,SAAS,MAAI,KAAA,CAAC;AAAA,IAAA,EAAA,CAClD,EAAA,CACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,0FACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAM,SAAQ,WAAW,UAAA;AAAA,QAAA,SAAS,WAAW,QAAQ,CAAC;AAAA,QAAE;AAAA,MAAA,GAAG;AAAA,MAC3D,SAAS,OACR,oBAAC,OAAA,EAAM,SAAQ,WAAW,UAAA,SAAS,MAAK,IACtC;AAAA,MAGH,QACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACV,OAAO,QAAQ,kBAAkB;AAAA,UAClC,UAAA;AAAA,QAAA;AAAA,MAAA,IAGC;AAAA,IAAA,GACN;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,oCAAoC,QAAQ,eAAe,EAAE;AAAA,QAKvE,UAAA,aAAa,SAAS,KAAK,IAC1B,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAS,MAAM,SAAS,OAAO,kBAAkB,GAAG;AAAA,UACrD,qBAAC,WAAA,EAAQ,WAAU,QACjB,UAAA;AAAA,YAAA,oBAAC,WAAA,EAAQ,WAAU,gDAA+C,UAAA,mBAElE;AAAA,YACA,oBAAC,OAAA,EAAI,WAAU,QACb,UAAA,oBAAC,WAAA,EAAU,QAAQ,SAAS,QAAQ,MAAI,MAAC,UAAU,OAAO,EAAA,CAC5D;AAAA,UAAA,EAAA,CACF;AAAA,QAAA,EAAA,CACF,IAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAQ,SAAS,UAAU;AAAA,YAC3B,UAAU,WAAW,SAAS,MAAM;AAAA,YACpC,UAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MACV;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,SAAS,aAAa,OAAyB;AAC7C,SAAO,OAAO,UAAU,YAAY,UAAU;AAChD;AAMA,SAAS,WAAW,QAAoC;AACtD,QAAM,UAAU,OAAO,KAAA;AACvB,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,QAAQ,WAAW,GAAG,KAAK,QAAQ,WAAW,GAAG,EAAG,QAAO;AAC/D,MAAI,wBAAwB,KAAK,OAAO,EAAG,QAAO;AAClD,SAAO;AACT;"}
+{"version":3,"file":"ResultPanel.js","sources":["../../../../src/expressions/playground/panels/ResultPanel.tsx"],"sourcesContent":["import { Button } from \"../../../components/button\";\nimport { Badge } from \"../../../data/Badge\";\nimport { CodeBlock } from \"../../../data/CodeBlock\";\nimport { JsonView } from \"../../../data/JsonView\";\nimport type { EvalError, EvalResponse, ResultExpectation } from \"../api.ts\";\nimport { RUN_SHORTCUT_LABEL } from \"../runShortcut\";\nimport { ExpectationStrip } from \"./ExpectationStrip.tsx\";\n\ninterface ResultPanelProps {\n  response: EvalResponse | null;\n  pending: boolean;\n  /** The shown result predates the current source or input. */\n  stale: boolean;\n  onRun: () => void;\n  expectation?: ResultExpectation | undefined;\n}\n\nexport function ResultPanel({\n  response,\n  pending,\n  stale,\n  onRun,\n  expectation,\n}: ResultPanelProps) {\n  const expected = expectation ? (\n    <ExpectationStrip expectation={expectation} response={response} stale={stale} />\n  ) : null;\n\n  if (!response) {\n    return (\n      <div className=\"flex h-full flex-col\">\n        {expected}\n        <div className=\"p-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            {pending ? \"Evaluating…\" : \"Type an expression, then run it.\"}\n          </p>\n          {stale && !pending ? (\n            <Button onClick={onRun} size=\"sm\" className=\"mt-3\">\n              Run ({RUN_SHORTCUT_LABEL})\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  if (response.error) {\n    return (\n      <div className=\"flex h-full flex-col\">\n        {expected}\n        <div className=\"p-4\">\n          <ResultError error={response.error} />\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex items-center gap-2 border-b border-border px-4 py-2 text-xs text-muted-foreground\">\n        <Badge variant=\"outline\">{response.durationMs.toFixed(2)} ms</Badge>\n        {response.type ? (\n          <Badge variant=\"outline\">{response.type}</Badge>\n        ) : null}\n        {/* Without this, a result that no longer matches what is on screen is\n            indistinguishable from one that does. */}\n        {stale ? <StaleButton onRun={onRun} /> : null}\n      </div>\n      {expected}\n\n      <div\n        className={`min-h-0 flex-1 overflow-auto p-4 ${stale ? \"opacity-50\" : \"\"}`}\n      >\n        <ResultValue response={response} />\n      </div>\n    </div>\n  );\n}\n\nexport function StaleButton({ onRun, label = \"Out of date — run again\" }: { onRun: () => void; label?: string }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onRun}\n      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\"\n      title={`Run (${RUN_SHORTCUT_LABEL})`}\n    >\n      {label}\n    </button>\n  );\n}\n\nexport function ResultError({ error }: { error: EvalError }) {\n  return (\n    <div className=\"rounded-md border border-destructive/40 bg-destructive/5 p-3\">\n      <p className=\"mb-2 text-xs font-medium uppercase tracking-wide text-destructive\">\n        {error.line\n          ? `Error at line ${error.line}, column ${error.column}`\n          : \"Error\"}\n      </p>\n      <CodeBlock source={error.message} bare />\n    </div>\n  );\n}\n\n/**\n * The rendered string is what a gomplate caller receives. A structured result\n * is more readable as a tree, so hand those to JsonView and keep the raw\n * rendering below it.\n */\nexport function ResultValue({ response }: { response: EvalResponse }) {\n  if (isStructured(response.value)) {\n    return (\n      <>\n        <JsonView data={response.value} defaultOpenDepth={3} />\n        <details className=\"mt-4\">\n          <summary className=\"cursor-pointer text-xs text-muted-foreground\">\n            Rendered string\n          </summary>\n          <div className=\"mt-2\">\n            <CodeBlock source={response.result} bare copyable={false} />\n          </div>\n        </details>\n      </>\n    );\n  }\n  return (\n    <CodeBlock\n      source={response.result || \"(empty)\"}\n      language={languageOf(response.result)}\n      copyable\n    />\n  );\n}\n\nfunction isStructured(value: unknown): boolean {\n  return typeof value === \"object\" && value !== null;\n}\n\n/**\n * Templates render whole documents, so highlight the output when it is\n * recognisably YAML or JSON rather than showing a wall of grey.\n */\nfunction languageOf(result: string): string | undefined {\n  const trimmed = result.trim();\n  if (!trimmed) return undefined;\n  if (trimmed.startsWith(\"{\") || trimmed.startsWith(\"[\")) return \"json\";\n  if (/^[A-Za-z_][\\w.-]*:\\s/m.test(trimmed)) return \"yaml\";\n  return undefined;\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SegmentedControl = require("../../../components/SegmentedControl.cjs");
+const ResultPanel = require("./ResultPanel.cjs");
+const SamplesPanel = require("./SamplesPanel.cjs");
+function ResultView({
+  view,
+  onViewChange,
+  evaluator,
+  sampleRuns,
+  samples,
+  expectation,
+  onUseInput
+}) {
+  const single = /* @__PURE__ */ jsxRuntime.jsx(
+    ResultPanel.ResultPanel,
+    {
+      response: evaluator.response,
+      pending: evaluator.pending,
+      stale: evaluator.stale,
+      onRun: evaluator.run,
+      expectation
+    }
+  );
+  if (samples.length < 2) return single;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-4 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+      SegmentedControl.SegmentedControl,
+      {
+        size: "sm",
+        value: view,
+        options: [
+          { id: "input", label: "This input" },
+          { id: "samples", label: `All samples · ${samples.length}` }
+        ],
+        onChange: onViewChange,
+        "aria-label": "Result scope"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1", children: view === "samples" ? /* @__PURE__ */ jsxRuntime.jsx(SamplesPanel.SamplesPanel, { samples, runs: sampleRuns, expectation, onUseInput }) : single })
+  ] });
+}
+exports.ResultView = ResultView;
+//# sourceMappingURL=ResultView.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultView.cjs","sources":["../../../../src/expressions/playground/panels/ResultView.tsx"],"sourcesContent":["import { SegmentedControl } from \"../../../components/SegmentedControl\";\nimport type { PlaygroundSample, ResultExpectation } from \"../api.ts\";\nimport type { Evaluator } from \"../useEvaluator.ts\";\nimport type { SampleRuns } from \"../useSampleRuns.ts\";\nimport { ResultPanel } from \"./ResultPanel.tsx\";\nimport { SamplesPanel } from \"./SamplesPanel.tsx\";\n\nexport type ResultViewId = \"input\" | \"samples\";\n\ninterface ResultViewProps {\n  view: ResultViewId;\n  onViewChange: (view: ResultViewId) => void;\n  evaluator: Evaluator;\n  sampleRuns: SampleRuns;\n  samples: PlaygroundSample[];\n  expectation?: ResultExpectation | undefined;\n  onUseInput: (input: string) => void;\n}\n\n/** The Result tab: the current input's result, or every sample's once there are several. */\nexport function ResultView({\n  view,\n  onViewChange,\n  evaluator,\n  sampleRuns,\n  samples,\n  expectation,\n  onUseInput,\n}: ResultViewProps) {\n  const single = (\n    <ResultPanel\n      response={evaluator.response}\n      pending={evaluator.pending}\n      stale={evaluator.stale}\n      onRun={evaluator.run}\n      expectation={expectation}\n    />\n  );\n  if (samples.length < 2) return single;\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"border-b border-border px-4 py-1.5\">\n        <SegmentedControl\n          size=\"sm\"\n          value={view}\n          options={[\n            { id: \"input\", label: \"This input\" },\n            { id: \"samples\", label: `All samples · ${samples.length}` },\n          ]}\n          onChange={onViewChange}\n          aria-label=\"Result scope\"\n        />\n      </div>\n      <div className=\"min-h-0 flex-1\">\n        {view === \"samples\" ? (\n          <SamplesPanel samples={samples} runs={sampleRuns} expectation={expectation} onUseInput={onUseInput} />\n        ) : (\n          single\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","ResultPanel","jsxs","SegmentedControl","SamplesPanel"],"mappings":";;;;;;AAoBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,SACJA,2BAAAA;AAAAA,IAACC,YAAAA;AAAAA,IAAA;AAAA,MACC,UAAU,UAAU;AAAA,MACpB,SAAS,UAAU;AAAA,MACnB,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGJ,MAAI,QAAQ,SAAS,EAAG,QAAO;AAE/B,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,sCACb,UAAAA,2BAAAA;AAAAA,MAACG,iBAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,IAAI,SAAS,OAAO,aAAA;AAAA,UACtB,EAAE,IAAI,WAAW,OAAO,iBAAiB,QAAQ,MAAM,GAAA;AAAA,QAAG;AAAA,QAE5D,UAAU;AAAA,QACV,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IACAH,2BAAAA,IAAC,OAAA,EAAI,WAAU,kBACZ,mBAAS,YACRA,2BAAAA,IAACI,aAAAA,cAAA,EAAa,SAAkB,MAAM,YAAY,aAA0B,WAAA,CAAwB,IAEpG,OAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;;"}

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

@@ -0,0 +1,17 @@
+import { PlaygroundSample, ResultExpectation } from '../api.ts';
+import { Evaluator } from '../useEvaluator.ts';
+import { SampleRuns } from '../useSampleRuns.ts';
+export type ResultViewId = "input" | "samples";
+interface ResultViewProps {
+    view: ResultViewId;
+    onViewChange: (view: ResultViewId) => void;
+    evaluator: Evaluator;
+    sampleRuns: SampleRuns;
+    samples: PlaygroundSample[];
+    expectation?: ResultExpectation | undefined;
+    onUseInput: (input: string) => void;
+}
+/** The Result tab: the current input's result, or every sample's once there are several. */
+export declare function ResultView({ view, onViewChange, evaluator, sampleRuns, samples, expectation, onUseInput, }: ResultViewProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ResultView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultView.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/ResultView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AACrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAItD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAE/C,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAC3C,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC5C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,UAAU,EACV,OAAO,EACP,WAAW,EACX,UAAU,GACX,EAAE,eAAe,+BAmCjB"}

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SegmentedControl } from "../../../components/SegmentedControl.js";
+import { ResultPanel } from "./ResultPanel.js";
+import { SamplesPanel } from "./SamplesPanel.js";
+function ResultView({
+  view,
+  onViewChange,
+  evaluator,
+  sampleRuns,
+  samples,
+  expectation,
+  onUseInput
+}) {
+  const single = /* @__PURE__ */ jsx(
+    ResultPanel,
+    {
+      response: evaluator.response,
+      pending: evaluator.pending,
+      stale: evaluator.stale,
+      onRun: evaluator.run,
+      expectation
+    }
+  );
+  if (samples.length < 2) return single;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx("div", { className: "border-b border-border px-4 py-1.5", children: /* @__PURE__ */ jsx(
+      SegmentedControl,
+      {
+        size: "sm",
+        value: view,
+        options: [
+          { id: "input", label: "This input" },
+          { id: "samples", label: `All samples · ${samples.length}` }
+        ],
+        onChange: onViewChange,
+        "aria-label": "Result scope"
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: view === "samples" ? /* @__PURE__ */ jsx(SamplesPanel, { samples, runs: sampleRuns, expectation, onUseInput }) : single })
+  ] });
+}
+export {
+  ResultView
+};
+//# sourceMappingURL=ResultView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultView.js","sources":["../../../../src/expressions/playground/panels/ResultView.tsx"],"sourcesContent":["import { SegmentedControl } from \"../../../components/SegmentedControl\";\nimport type { PlaygroundSample, ResultExpectation } from \"../api.ts\";\nimport type { Evaluator } from \"../useEvaluator.ts\";\nimport type { SampleRuns } from \"../useSampleRuns.ts\";\nimport { ResultPanel } from \"./ResultPanel.tsx\";\nimport { SamplesPanel } from \"./SamplesPanel.tsx\";\n\nexport type ResultViewId = \"input\" | \"samples\";\n\ninterface ResultViewProps {\n  view: ResultViewId;\n  onViewChange: (view: ResultViewId) => void;\n  evaluator: Evaluator;\n  sampleRuns: SampleRuns;\n  samples: PlaygroundSample[];\n  expectation?: ResultExpectation | undefined;\n  onUseInput: (input: string) => void;\n}\n\n/** The Result tab: the current input's result, or every sample's once there are several. */\nexport function ResultView({\n  view,\n  onViewChange,\n  evaluator,\n  sampleRuns,\n  samples,\n  expectation,\n  onUseInput,\n}: ResultViewProps) {\n  const single = (\n    <ResultPanel\n      response={evaluator.response}\n      pending={evaluator.pending}\n      stale={evaluator.stale}\n      onRun={evaluator.run}\n      expectation={expectation}\n    />\n  );\n  if (samples.length < 2) return single;\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"border-b border-border px-4 py-1.5\">\n        <SegmentedControl\n          size=\"sm\"\n          value={view}\n          options={[\n            { id: \"input\", label: \"This input\" },\n            { id: \"samples\", label: `All samples · ${samples.length}` },\n          ]}\n          onChange={onViewChange}\n          aria-label=\"Result scope\"\n        />\n      </div>\n      <div className=\"min-h-0 flex-1\">\n        {view === \"samples\" ? (\n          <SamplesPanel samples={samples} runs={sampleRuns} expectation={expectation} onUseInput={onUseInput} />\n        ) : (\n          single\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAoBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,SACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU,UAAU;AAAA,MACpB,SAAS,UAAU;AAAA,MACnB,OAAO,UAAU;AAAA,MACjB,OAAO,UAAU;AAAA,MACjB;AAAA,IAAA;AAAA,EAAA;AAGJ,MAAI,QAAQ,SAAS,EAAG,QAAO;AAE/B,SACE,qBAAC,OAAA,EAAI,WAAU,wBACb,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,sCACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,QACP,SAAS;AAAA,UACP,EAAE,IAAI,SAAS,OAAO,aAAA;AAAA,UACtB,EAAE,IAAI,WAAW,OAAO,iBAAiB,QAAQ,MAAM,GAAA;AAAA,QAAG;AAAA,QAE5D,UAAU;AAAA,QACV,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,kBACZ,mBAAS,YACR,oBAAC,cAAA,EAAa,SAAkB,MAAM,YAAY,aAA0B,WAAA,CAAwB,IAEpG,OAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("../../../components/button.cjs");
+const Badge = require("../../../data/Badge.cjs");
+const runShortcut = require("../runShortcut.cjs");
+const sampleOutcome = require("../sampleOutcome.cjs");
+const ExpectationStrip = require("./ExpectationStrip.cjs");
+const ResultPanel = require("./ResultPanel.cjs");
+const UiArrowRight = require("../../../icons/components/UiArrowRight.cjs");
+const UiWarningTriangle = require("../../../icons/components/UiWarningTriangle.cjs");
+const DOT = {
+  valid: "bg-green-500",
+  empty: "bg-muted-foreground/40",
+  invalid: "bg-amber-500",
+  failed: "bg-destructive"
+};
+function SamplesPanel({ samples, runs, expectation, onUseInput }) {
+  const [focused, setFocused] = react.useState(0);
+  const classified = samples.map((sample) => {
+    var _a;
+    const response = (_a = runs.results.find((entry) => entry.sample.id === sample.id)) == null ? void 0 : _a.response;
+    return { sample, response, ...response ? sampleOutcome.classifySample(response, expectation == null ? void 0 : expectation.validate) : {} };
+  });
+  const outcomes = classified.map((entry) => entry.outcome);
+  const ran = classified.flatMap((entry) => entry.outcome ? [entry.outcome] : []);
+  const tally = sampleOutcome.tallySamples(ran);
+  const types = sampleOutcome.resultTypes(runs.results.map((entry) => entry.response));
+  const jump = sampleOutcome.nextFailure(outcomes, focused);
+  const current = classified[Math.min(focused, classified.length - 1)];
+  const outdated = runs.stale && runs.results.length > 0;
+  const outcomesRef = react.useRef(outcomes);
+  outcomesRef.current = outcomes;
+  react.useEffect(() => {
+    if (runs.pending || runs.results.length === 0) return;
+    const first = sampleOutcome.nextFailure(outcomesRef.current, -1);
+    if (first !== void 0) setFocused(first);
+  }, [runs.pending, runs.results.length]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 border-b border-border px-4 py-2 text-xs", children: [
+      runs.progress ? /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "info", variant: "soft", size: "sm", children: [
+        "Running ",
+        runs.progress.done,
+        "/",
+        runs.progress.total
+      ] }) : null,
+      ran.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Tally, { tally }) : null,
+      types.length > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "warning", variant: "soft", size: "sm", children: [
+        "returns ",
+        types.join(" | ")
+      ] }) : null,
+      jump !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { size: "sm", variant: "outline", className: "h-6 gap-1 px-2 text-xs", onClick: () => setFocused(jump), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UiArrowRight.UiArrowRight, { className: "size-3", "aria-hidden": "true" }),
+        "Next failure"
+      ] }) : null,
+      outdated && !runs.pending ? /* @__PURE__ */ jsxRuntime.jsx(ResultPanel.StaleButton, { onRun: () => void runs.run() }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        "aria-label": "Samples",
+        className: `max-h-[40%] shrink-0 overflow-auto border-b border-border py-1 ${outdated ? "opacity-60" : ""}`,
+        children: classified.map((entry, index) => {
+          var _a;
+          return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              "aria-current": index === focused,
+              onClick: () => setFocused(index),
+              className: `flex w-full items-center gap-2 px-4 py-1 text-left text-xs hover:bg-muted ${index === focused ? "bg-primary/[0.06]" : ""}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: `size-2 shrink-0 rounded-full ${entry.outcome ? DOT[entry.outcome] : "border border-border"}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-20 shrink-0 truncate font-medium", children: entry.sample.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("code", { className: "min-w-0 flex-1 truncate font-mono text-muted-foreground", children: entry.response ? preview(entry.response) : runs.pending ? "…" : "not run" }),
+                ((_a = entry.issues) == null ? void 0 : _a[0]) ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: `min-w-0 max-w-[45%] truncate ${entry.outcome === "failed" ? "text-destructive" : "text-amber-700 dark:text-amber-400"}`,
+                    title: entry.issues.join("\n"),
+                    children: entry.issues[0]
+                  }
+                ) : null
+              ]
+            }
+          ) }, entry.sample.id);
+        })
+      }
+    ),
+    runs.results.length === 0 && !runs.pending ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+        "Run the expression against all ",
+        samples.length,
+        " samples to see which ones it holds for."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: () => void runs.run(), size: "sm", className: "mt-3", children: [
+        "Run all samples (",
+        runShortcut.RUN_SHORTCUT_LABEL,
+        ")"
+      ] })
+    ] }) : current ? /* @__PURE__ */ jsxRuntime.jsx(
+      FocusedSample,
+      {
+        label: current.sample.label,
+        response: current.response,
+        expectation,
+        stale: outdated,
+        onUseInput: () => onUseInput(current.sample.input)
+      }
+    ) : null
+  ] });
+}
+function Tally({ tally }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "success", variant: "soft", size: "sm", children: [
+      tally.valid,
+      " valid"
+    ] }),
+    tally.empty > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "neutral", variant: "soft", size: "sm", children: [
+      tally.empty,
+      " empty"
+    ] }) : null,
+    tally.invalid > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "warning", variant: "soft", size: "sm", icon: UiWarningTriangle.UiWarningTriangle, children: [
+      tally.invalid,
+      " invalid"
+    ] }) : null,
+    tally.failed > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { tone: "danger", variant: "soft", size: "sm", icon: UiWarningTriangle.UiWarningTriangle, children: [
+      tally.failed,
+      " failed"
+    ] }) : null
+  ] });
+}
+function FocusedSample({
+  label,
+  response,
+  expectation,
+  stale,
+  onUseInput
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { "aria-label": `${label} result`, className: "flex min-h-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex items-center gap-2 px-4 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: label }),
+      response && !response.error ? /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { variant: "outline", size: "sm", children: [
+        response.durationMs.toFixed(2),
+        " ms"
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { size: "sm", variant: "ghost", className: "ml-auto h-6 px-2 text-xs", onClick: onUseInput, children: "Use as input" })
+    ] }),
+    expectation ? /* @__PURE__ */ jsxRuntime.jsx(ExpectationStrip.ExpectationStrip, { expectation, response: response ?? null, stale }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `min-h-0 flex-1 overflow-auto p-4 ${stale ? "opacity-50" : ""}`, children: !response ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Evaluating…" }) : response.error ? /* @__PURE__ */ jsxRuntime.jsx(ResultPanel.ResultError, { error: response.error }) : /* @__PURE__ */ jsxRuntime.jsx(ResultPanel.ResultValue, { response }) })
+  ] });
+}
+function preview(response) {
+  if (response.error) return "error";
+  return response.result === "" ? '""' : response.result.replace(/\s+/g, " ");
+}
+exports.SamplesPanel = SamplesPanel;
+//# sourceMappingURL=SamplesPanel.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SamplesPanel.cjs","sources":["../../../../src/expressions/playground/panels/SamplesPanel.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"../../../components/button\";\nimport { Badge } from \"../../../data/Badge\";\nimport { UiArrowRight, UiWarningTriangle } from \"../../../icons\";\nimport type { EvalResponse, PlaygroundSample, ResultExpectation } from \"../api.ts\";\nimport { RUN_SHORTCUT_LABEL } from \"../runShortcut\";\nimport { classifySample, nextFailure, resultTypes, tallySamples, type SampleOutcome } from \"../sampleOutcome.ts\";\nimport type { SampleRuns } from \"../useSampleRuns.ts\";\nimport { ExpectationStrip } from \"./ExpectationStrip.tsx\";\nimport { ResultError, ResultValue, StaleButton } from \"./ResultPanel.tsx\";\n\ninterface SamplesPanelProps {\n  samples: PlaygroundSample[];\n  runs: SampleRuns;\n  expectation?: ResultExpectation | undefined;\n  /** Loads a sample into the Input editor. */\n  onUseInput: (input: string) => void;\n}\n\nconst DOT: Record<SampleOutcome, string> = {\n  valid: \"bg-green-500\",\n  empty: \"bg-muted-foreground/40\",\n  invalid: \"bg-amber-500\",\n  failed: \"bg-destructive\",\n};\n\n/**\n * The current expression against every sample.\n *\n * The author writes against the input in front of them; the samples that break\n * the expression are, by definition, the ones they have not looked at. So every\n * sample is listed with its outcome, and \"Next failure\" walks the broken ones.\n */\nexport function SamplesPanel({ samples, runs, expectation, onUseInput }: SamplesPanelProps) {\n  const [focused, setFocused] = useState(0);\n  const classified = samples.map((sample) => {\n    const response = runs.results.find((entry) => entry.sample.id === sample.id)?.response;\n    return { sample, response, ...(response ? classifySample(response, expectation?.validate) : {}) };\n  });\n  const outcomes = classified.map((entry) => entry.outcome);\n  const ran = classified.flatMap((entry) => (entry.outcome ? [entry.outcome] : []));\n  const tally = tallySamples(ran);\n  const types = resultTypes(runs.results.map((entry) => entry.response));\n  const jump = nextFailure(outcomes, focused);\n  const current = classified[Math.min(focused, classified.length - 1)];\n  // Nothing has run yet is not the same as out of date: only dim results.\n  const outdated = runs.stale && runs.results.length > 0;\n\n  // Land on the first broken sample once a run completes, not on whatever row\n  // happened to be focused before it.\n  const outcomesRef = useRef(outcomes);\n  outcomesRef.current = outcomes;\n  useEffect(() => {\n    if (runs.pending || runs.results.length === 0) return;\n    const first = nextFailure(outcomesRef.current, -1);\n    if (first !== undefined) setFocused(first);\n  }, [runs.pending, runs.results.length]);\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <div className=\"flex flex-wrap items-center gap-1.5 border-b border-border px-4 py-2 text-xs\">\n        {runs.progress ? (\n          <Badge tone=\"info\" variant=\"soft\" size=\"sm\">\n            Running {runs.progress.done}/{runs.progress.total}\n          </Badge>\n        ) : null}\n        {ran.length > 0 ? <Tally tally={tally} /> : null}\n        {types.length > 1 ? (\n          <Badge tone=\"warning\" variant=\"soft\" size=\"sm\">\n            returns {types.join(\" | \")}\n          </Badge>\n        ) : null}\n        {jump !== undefined ? (\n          <Button size=\"sm\" variant=\"outline\" className=\"h-6 gap-1 px-2 text-xs\" onClick={() => setFocused(jump)}>\n            <UiArrowRight className=\"size-3\" aria-hidden=\"true\" />\n            Next failure\n          </Button>\n        ) : null}\n        {outdated && !runs.pending ? <StaleButton onRun={() => void runs.run()} /> : null}\n      </div>\n\n      <ul\n        aria-label=\"Samples\"\n        className={`max-h-[40%] shrink-0 overflow-auto border-b border-border py-1 ${outdated ? \"opacity-60\" : \"\"}`}\n      >\n        {classified.map((entry, index) => (\n          <li key={entry.sample.id}>\n            <button\n              type=\"button\"\n              aria-current={index === focused}\n              onClick={() => setFocused(index)}\n              className={`flex w-full items-center gap-2 px-4 py-1 text-left text-xs hover:bg-muted ${\n                index === focused ? \"bg-primary/[0.06]\" : \"\"\n              }`}\n            >\n              <span\n                aria-hidden=\"true\"\n                className={`size-2 shrink-0 rounded-full ${entry.outcome ? DOT[entry.outcome] : \"border border-border\"}`}\n              />\n              <span className=\"w-20 shrink-0 truncate font-medium\">{entry.sample.label}</span>\n              <code className=\"min-w-0 flex-1 truncate font-mono text-muted-foreground\">\n                {entry.response ? preview(entry.response) : runs.pending ? \"…\" : \"not run\"}\n              </code>\n              {entry.issues?.[0] ? (\n                <span\n                  className={`min-w-0 max-w-[45%] truncate ${entry.outcome === \"failed\" ? \"text-destructive\" : \"text-amber-700 dark:text-amber-400\"}`}\n                  title={entry.issues.join(\"\\n\")}\n                >\n                  {entry.issues[0]}\n                </span>\n              ) : null}\n            </button>\n          </li>\n        ))}\n      </ul>\n\n      {runs.results.length === 0 && !runs.pending ? (\n        <div className=\"p-4\">\n          <p className=\"text-sm text-muted-foreground\">\n            Run the expression against all {samples.length} samples to see which ones it holds for.\n          </p>\n          <Button onClick={() => void runs.run()} size=\"sm\" className=\"mt-3\">\n            Run all samples ({RUN_SHORTCUT_LABEL})\n          </Button>\n        </div>\n      ) : current ? (\n        <FocusedSample\n          label={current.sample.label}\n          response={current.response}\n          expectation={expectation}\n          stale={outdated}\n          onUseInput={() => onUseInput(current.sample.input)}\n        />\n      ) : null}\n    </div>\n  );\n}\n\nfunction Tally({ tally }: { tally: Record<SampleOutcome, number> }) {\n  return (\n    <>\n      <Badge tone=\"success\" variant=\"soft\" size=\"sm\">\n        {tally.valid} valid\n      </Badge>\n      {tally.empty > 0 ? (\n        <Badge tone=\"neutral\" variant=\"soft\" size=\"sm\">\n          {tally.empty} empty\n        </Badge>\n      ) : null}\n      {tally.invalid > 0 ? (\n        <Badge tone=\"warning\" variant=\"soft\" size=\"sm\" icon={UiWarningTriangle}>\n          {tally.invalid} invalid\n        </Badge>\n      ) : null}\n      {tally.failed > 0 ? (\n        <Badge tone=\"danger\" variant=\"soft\" size=\"sm\" icon={UiWarningTriangle}>\n          {tally.failed} failed\n        </Badge>\n      ) : null}\n    </>\n  );\n}\n\nfunction FocusedSample({\n  label,\n  response,\n  expectation,\n  stale,\n  onUseInput,\n}: {\n  label: string;\n  response: EvalResponse | undefined;\n  expectation: ResultExpectation | undefined;\n  stale: boolean;\n  onUseInput: () => void;\n}) {\n  return (\n    <section aria-label={`${label} result`} className=\"flex min-h-0 flex-1 flex-col\">\n      <header className=\"flex items-center gap-2 px-4 py-2 text-xs\">\n        <span className=\"font-medium\">{label}</span>\n        {response && !response.error ? (\n          <Badge variant=\"outline\" size=\"sm\">\n            {response.durationMs.toFixed(2)} ms\n          </Badge>\n        ) : null}\n        <Button size=\"sm\" variant=\"ghost\" className=\"ml-auto h-6 px-2 text-xs\" onClick={onUseInput}>\n          Use as input\n        </Button>\n      </header>\n      {expectation ? <ExpectationStrip expectation={expectation} response={response ?? null} stale={stale} /> : null}\n      <div className={`min-h-0 flex-1 overflow-auto p-4 ${stale ? \"opacity-50\" : \"\"}`}>\n        {!response ? (\n          <p className=\"text-sm text-muted-foreground\">Evaluating…</p>\n        ) : response.error ? (\n          <ResultError error={response.error} />\n        ) : (\n          <ResultValue response={response} />\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction preview(response: EvalResponse): string {\n  if (response.error) return \"error\";\n  return response.result === \"\" ? '\"\"' : response.result.replace(/\\s+/g, \" \");\n}\n"],"names":["useState","classifySample","tallySamples","resultTypes","nextFailure","useRef","useEffect","jsxs","Badge","jsx","Button","UiArrowRight","StaleButton","RUN_SHORTCUT_LABEL","Fragment","UiWarningTriangle","ExpectationStrip","ResultError","ResultValue"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { PlaygroundSample, ResultExpectation } from '../api.ts';
+import { SampleRuns } from '../useSampleRuns.ts';
+interface SamplesPanelProps {
+    samples: PlaygroundSample[];
+    runs: SampleRuns;
+    expectation?: ResultExpectation | undefined;
+    /** Loads a sample into the Input editor. */
+    onUseInput: (input: string) => void;
+}
+/**
+ * The current expression against every sample.
+ *
+ * The author writes against the input in front of them; the samples that break
+ * the expression are, by definition, the ones they have not looked at. So every
+ * sample is listed with its outcome, and "Next failure" walks the broken ones.
+ */
+export declare function SamplesPanel({ samples, runs, expectation, onUseInput }: SamplesPanelProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=SamplesPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SamplesPanel.d.ts","sourceRoot":"","sources":["../../../../src/expressions/playground/panels/SamplesPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAgB,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGnF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAItD,UAAU,iBAAiB;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,WAAW,CAAC,EAAE,iBAAiB,GAAG,SAAS,CAAC;IAC5C,4CAA4C;IAC5C,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AASD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,iBAAiB,+BAuGzF"}