@flanksource/clicky-ui 0.3.26 → 0.3.28

package/dist/data/ai/PromptCatalog/PromptPage.js

@@ -0,0 +1,332 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { Button } from "../../../components/button.js";
+import { cn } from "../../../lib/utils.js";
+import { Tabs } from "../../../layout/Tabs.js";
+import { Modal } from "../../../overlay/Modal.js";
+import { CodeDiff } from "../../CodeDiff.js";
+import { defaultEditLayer, layerLabel } from "./prompt-catalog-model.js";
+import { PROMPT_PAGE_TAB, isDraftDirty, isPromptPageDirty, draftFor, initialSaveSource, defaultFilePath, errorMessage, pageTabs, draftRaw, isConflictError, buildSavePayload } from "./prompt-page-model.js";
+import { PromptLayerStrip } from "./PromptLayerStrip.js";
+import { PromptPageEditor } from "./PromptPageEditor.js";
+import { PromptPageHeader } from "./PromptPageHeader.js";
+import { PromptPagePreview } from "./PromptPagePreview.js";
+import { PromptPageSaveBar } from "./PromptPageSaveBar.js";
+import { UiDiff } from "../../../icons/components/UiDiff.js";
+import { UiEye } from "../../../icons/components/UiEye.js";
+import { UiFileCode } from "../../../icons/components/UiFileCode.js";
+import { UiLock } from "../../../icons/components/UiLock.js";
+const TAB_ICONS = {
+  [PROMPT_PAGE_TAB.prompt]: UiFileCode,
+  [PROMPT_PAGE_TAB.preview]: UiEye,
+  [PROMPT_PAGE_TAB.diff]: UiDiff
+};
+const EMPTY_DRAFT = { mode: "raw", raw: "", value: void 0 };
+function PromptPage({
+  entry,
+  adapter,
+  models,
+  families,
+  onBack,
+  onSaved,
+  extraTabs,
+  initialLayerOrigin,
+  className
+}) {
+  const [selectedOrigin, setSelectedOrigin] = useState(
+    () => {
+      var _a, _b;
+      return initialLayerOrigin ?? ((_a = defaultEditLayer(entry)) == null ? void 0 : _a.origin) ?? ((_b = entry.layers[0]) == null ? void 0 : _b.origin);
+    }
+  );
+  const selectedLayer = useMemo(
+    () => entry.layers.find((layer) => layer.origin === selectedOrigin),
+    [entry, selectedOrigin]
+  );
+  const [state, setState] = useState({ status: "idle" });
+  const [draft, setDraft] = useState(EMPTY_DRAFT);
+  const [saveSource, setSaveSource] = useState("inline");
+  const [path, setPath] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [saveError, setSaveError] = useState("");
+  const [conflict, setConflict] = useState(false);
+  const [pendingTransition, setPendingTransition] = useState(null);
+  const [tab, setTab] = useState(PROMPT_PAGE_TAB.prompt);
+  const [reloadToken, setReloadToken] = useState(0);
+  const readOnly = !(selectedLayer == null ? void 0 : selectedLayer.editable);
+  const draftDirty = state.status === "ready" && isDraftDirty(draft, state.detail);
+  const dirty = state.status === "ready" && selectedLayer ? isPromptPageDirty({
+    draft,
+    detail: state.detail,
+    source: saveSource,
+    path,
+    entry,
+    layer: selectedLayer
+  }) : false;
+  const applyDetail = useCallback(
+    (detail, layer) => {
+      setState({ status: "ready", detail });
+      setDraft(draftFor(detail));
+      setSaveSource(initialSaveSource(detail));
+      setPath(defaultFilePath(entry, layer, detail));
+      setSaveError("");
+      setConflict(false);
+    },
+    [entry]
+  );
+  const latest = useRef({ adapter, entry, applyDetail });
+  latest.current = { adapter, entry, applyDetail };
+  const layerKey = selectedLayer ? `${selectedLayer.origin}\0${selectedLayer.scope ?? ""}` : "";
+  useEffect(() => {
+    const layer = latest.current.entry.layers.find(
+      (candidate) => `${candidate.origin}\0${candidate.scope ?? ""}` === layerKey
+    );
+    if (!layer) {
+      setState({ status: "idle" });
+      return;
+    }
+    let cancelled = false;
+    setState({ status: "loading" });
+    latest.current.adapter.loadDetail(latest.current.entry, layer).then(
+      (detail) => {
+        if (!cancelled) latest.current.applyDetail(detail, layer);
+      },
+      (cause) => {
+        if (!cancelled)
+          setState({
+            status: "error",
+            message: errorMessage(cause, "failed to load prompt")
+          });
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [layerKey, reloadToken]);
+  useEffect(() => {
+    if (!dirty) return;
+    const guard = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", guard);
+    return () => window.removeEventListener("beforeunload", guard);
+  }, [dirty]);
+  const reload = () => setReloadToken((token) => token + 1);
+  function runTransition(transition) {
+    setPendingTransition(null);
+    if (transition.type === "back") {
+      onBack == null ? void 0 : onBack();
+      return;
+    }
+    if (transition.type === "reload") {
+      reload();
+      return;
+    }
+    setSelectedOrigin(transition.origin);
+  }
+  function requestTransition(transition) {
+    if (dirty) {
+      setPendingTransition(transition);
+      return;
+    }
+    runTransition(transition);
+  }
+  async function persist(build, failure) {
+    if (state.status !== "ready" || !selectedLayer) return;
+    setSaving(true);
+    setSaveError("");
+    setConflict(false);
+    try {
+      const next = await adapter.saveDetail(
+        entry,
+        selectedLayer,
+        build(state.detail)
+      );
+      applyDetail(next, selectedLayer);
+      onSaved == null ? void 0 : onSaved(next, selectedLayer);
+    } catch (cause) {
+      const message = errorMessage(cause, failure);
+      setSaveError(message);
+      setConflict(isConflictError(message));
+    } finally {
+      setSaving(false);
+    }
+  }
+  const save = () => persist(
+    (detail) => buildSavePayload(draft, detail, saveSource, path),
+    "save failed"
+  );
+  const remove = () => persist(
+    (detail) => ({ source: "default", baseRaw: detail.raw }),
+    "remove failed"
+  );
+  const render = adapter.render;
+  const tabs = pageTabs({
+    canPreview: render !== void 0,
+    canDiff: entry.defaultRaw !== void 0,
+    extraTabs
+  }).map((item) => {
+    const icon = TAB_ICONS[item.id];
+    return icon ? { ...item, icon } : item;
+  });
+  const activeTab = tabs.some((item) => item.id === tab) ? tab : PROMPT_PAGE_TAB.prompt;
+  const currentRaw = state.status === "ready" ? draftDirty ? draftRaw(draft) : state.detail.raw : "";
+  function selectLayer(layer) {
+    if (layer.origin === selectedOrigin) return;
+    requestTransition({ type: "layer", origin: layer.origin });
+  }
+  function renderPanel() {
+    var _a;
+    if (state.status === "loading" || state.status === "idle") {
+      return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading prompt…" });
+    }
+    if (state.status === "error") {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "flex items-center gap-2 text-sm text-destructive",
+          children: [
+            /* @__PURE__ */ jsx("span", { children: state.message }),
+            /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: reload, children: "Retry" })
+          ]
+        }
+      );
+    }
+    if (activeTab === PROMPT_PAGE_TAB.prompt) {
+      return /* @__PURE__ */ jsx(
+        PromptPageEditor,
+        {
+          detail: state.detail,
+          draft,
+          onChange: setDraft,
+          readOnly,
+          models,
+          families,
+          ...entry.effective.backend ? { effectiveBackend: entry.effective.backend } : {},
+          ...entry.effective.model ? { effectiveModel: entry.effective.model } : {}
+        }
+      );
+    }
+    if (activeTab === PROMPT_PAGE_TAB.preview && render) {
+      return /* @__PURE__ */ jsx(
+        PromptPagePreview,
+        {
+          entry,
+          render: (input) => render(entry, input),
+          draftRaw: draftDirty ? currentRaw : void 0
+        }
+      );
+    }
+    if (activeTab === PROMPT_PAGE_TAB.diff && entry.defaultRaw !== void 0) {
+      return /* @__PURE__ */ jsx(
+        CodeDiff,
+        {
+          original: entry.defaultRaw,
+          modified: currentRaw,
+          language: "markdown"
+        }
+      );
+    }
+    return ((_a = extraTabs == null ? void 0 : extraTabs.find((item) => item.id === activeTab)) == null ? void 0 : _a.content) ?? null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+      /* @__PURE__ */ jsx(
+        PromptPageHeader,
+        {
+          entry,
+          selectedLayer,
+          ...onBack ? { onBack: () => requestTransition({ type: "back" }) } : {}
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        PromptLayerStrip,
+        {
+          entry,
+          selectedOrigin,
+          onSelect: selectLayer
+        }
+      ),
+      readOnly && selectedLayer ? /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "note",
+          className: "mx-density-4 mb-2 flex items-center gap-2 rounded-md border border-border bg-muted px-3 py-2 text-xs",
+          children: [
+            /* @__PURE__ */ jsx(UiLock, { className: "shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              layerLabel(selectedLayer.origin),
+              " is read-only from here —",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "font-mono", children: selectedLayer.path }),
+              ". Edit it directly or pick an editable layer."
+            ] })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          tabs,
+          value: activeTab,
+          onChange: setTab,
+          className: "px-density-4"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-density-4 py-density-3", children: renderPanel() }),
+      state.status === "ready" && !readOnly ? /* @__PURE__ */ jsx(
+        PromptPageSaveBar,
+        {
+          source: saveSource,
+          onSourceChange: setSaveSource,
+          path,
+          onPathChange: setPath,
+          dirty,
+          saving,
+          canRemove: state.detail.source !== "default",
+          error: saveError,
+          conflict,
+          onSave: save,
+          onRemove: remove,
+          onReload: () => requestTransition({ type: "reload" })
+        }
+      ) : null
+    ] }),
+    pendingTransition ? /* @__PURE__ */ jsx(
+      Modal,
+      {
+        open: true,
+        onClose: () => setPendingTransition(null),
+        title: "Discard unsaved prompt changes?",
+        size: "sm",
+        expandable: false,
+        footer: /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              onClick: () => setPendingTransition(null),
+              children: "Keep editing"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              onClick: () => runTransition(pendingTransition),
+              children: "Discard changes"
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Your prompt content, save location, or file path changes will be lost." })
+      }
+    ) : null
+  ] });
+}
+export {
+  PromptPage
+};
+//# sourceMappingURL=PromptPage.js.map

package/dist/data/ai/PromptCatalog/PromptPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptPage.js","sources":["../../../../src/data/ai/PromptCatalog/PromptPage.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"../../../components/button\";\nimport { UiDiff, UiEye, UiFileCode, UiLock } from \"../../../icons\";\nimport { cn } from \"../../../lib/utils\";\nimport { Tabs, type TabItem } from \"../../../layout/Tabs\";\nimport { Modal } from \"../../../overlay/Modal\";\nimport type { ChatModel } from \"../../chat/types\";\nimport { CodeDiff } from \"../../CodeDiff\";\nimport type { SpecRuntimeFamily } from \"../../runtime/runtime-mode\";\nimport type { PromptSpecDetail } from \"../PromptPicker/types\";\nimport { defaultEditLayer, layerLabel } from \"./prompt-catalog-model\";\nimport {\n  PROMPT_PAGE_TAB,\n  buildSavePayload,\n  defaultFilePath,\n  draftFor,\n  draftRaw,\n  errorMessage,\n  initialSaveSource,\n  isConflictError,\n  isDraftDirty,\n  isPromptPageDirty,\n  pageTabs,\n  type PromptDraft,\n  type PromptSaveSource,\n} from \"./prompt-page-model\";\nimport { PromptLayerStrip } from \"./PromptLayerStrip\";\nimport { PromptPageEditor } from \"./PromptPageEditor\";\nimport { PromptPageHeader } from \"./PromptPageHeader\";\nimport { PromptPagePreview } from \"./PromptPagePreview\";\nimport { PromptPageSaveBar } from \"./PromptPageSaveBar\";\nimport type {\n  PromptCatalogEntry,\n  PromptCatalogLayer,\n  PromptPageAdapter,\n  PromptPageTab,\n} from \"./types\";\n\nexport type PromptPageProps = {\n  entry: PromptCatalogEntry;\n  adapter: PromptPageAdapter;\n  models?: ChatModel[] | undefined;\n  families?: SpecRuntimeFamily[] | undefined;\n  onBack?: (() => void) | undefined;\n  onSaved?:\n    | ((detail: PromptSpecDetail, layer: PromptCatalogLayer) => void)\n    | undefined;\n  extraTabs?: PromptPageTab[] | undefined;\n  initialLayerOrigin?: string | undefined;\n  className?: string | undefined;\n};\n\ntype LayerState =\n  | { status: \"idle\" }\n  | { status: \"loading\" }\n  | { status: \"error\"; message: string }\n  | { status: \"ready\"; detail: PromptSpecDetail };\n\ntype PendingTransition =\n  | { type: \"back\" }\n  | { type: \"reload\" }\n  | { type: \"layer\"; origin: string };\n\nconst TAB_ICONS: Record<string, TabItem[\"icon\"]> = {\n  [PROMPT_PAGE_TAB.prompt]: UiFileCode,\n  [PROMPT_PAGE_TAB.preview]: UiEye,\n  [PROMPT_PAGE_TAB.diff]: UiDiff,\n};\n\nconst EMPTY_DRAFT: PromptDraft = { mode: \"raw\", raw: \"\", value: undefined };\n\n// PromptPage is the dedicated view of one prompt: what runs and from which\n// layer, the layer chain, and an editor for the layer the user picks — raw or\n// structured — with preview, diff against the built-in, and a save that\n// refuses to clobber a layer that moved on since it was loaded.\nexport function PromptPage({\n  entry,\n  adapter,\n  models,\n  families,\n  onBack,\n  onSaved,\n  extraTabs,\n  initialLayerOrigin,\n  className,\n}: PromptPageProps) {\n  const [selectedOrigin, setSelectedOrigin] = useState<string | undefined>(\n    () =>\n      initialLayerOrigin ??\n      defaultEditLayer(entry)?.origin ??\n      entry.layers[0]?.origin,\n  );\n  const selectedLayer = useMemo(\n    () => entry.layers.find((layer) => layer.origin === selectedOrigin),\n    [entry, selectedOrigin],\n  );\n  const [state, setState] = useState<LayerState>({ status: \"idle\" });\n  const [draft, setDraft] = useState<PromptDraft>(EMPTY_DRAFT);\n  const [saveSource, setSaveSource] = useState<PromptSaveSource>(\"inline\");\n  const [path, setPath] = useState(\"\");\n  const [saving, setSaving] = useState(false);\n  const [saveError, setSaveError] = useState(\"\");\n  const [conflict, setConflict] = useState(false);\n  const [pendingTransition, setPendingTransition] =\n    useState<PendingTransition | null>(null);\n  const [tab, setTab] = useState<string>(PROMPT_PAGE_TAB.prompt);\n  const [reloadToken, setReloadToken] = useState(0);\n\n  const readOnly = !selectedLayer?.editable;\n  const draftDirty =\n    state.status === \"ready\" && isDraftDirty(draft, state.detail);\n  const dirty =\n    state.status === \"ready\" && selectedLayer\n      ? isPromptPageDirty({\n          draft,\n          detail: state.detail,\n          source: saveSource,\n          path,\n          entry,\n          layer: selectedLayer,\n        })\n      : false;\n\n  const applyDetail = useCallback(\n    (detail: PromptSpecDetail, layer: PromptCatalogLayer) => {\n      setState({ status: \"ready\", detail });\n      setDraft(draftFor(detail));\n      setSaveSource(initialSaveSource(detail));\n      setPath(defaultFilePath(entry, layer, detail));\n      setSaveError(\"\");\n      setConflict(false);\n    },\n    [entry],\n  );\n\n  // The load is keyed on the layer's identity, not the entry object: a host\n  // that refetches its catalog while the user is editing must not reset the\n  // draft. The latest adapter/entry are read through a ref for the same reason.\n  const latest = useRef({ adapter, entry, applyDetail });\n  latest.current = { adapter, entry, applyDetail };\n  const layerKey = selectedLayer\n    ? `${selectedLayer.origin}\\u0000${selectedLayer.scope ?? \"\"}`\n    : \"\";\n  useEffect(() => {\n    const layer = latest.current.entry.layers.find(\n      (candidate) =>\n        `${candidate.origin}\\u0000${candidate.scope ?? \"\"}` === layerKey,\n    );\n    if (!layer) {\n      setState({ status: \"idle\" });\n      return;\n    }\n    let cancelled = false;\n    setState({ status: \"loading\" });\n    latest.current.adapter.loadDetail(latest.current.entry, layer).then(\n      (detail) => {\n        if (!cancelled) latest.current.applyDetail(detail, layer);\n      },\n      (cause: unknown) => {\n        if (!cancelled)\n          setState({\n            status: \"error\",\n            message: errorMessage(cause, \"failed to load prompt\"),\n          });\n      },\n    );\n    return () => {\n      cancelled = true;\n    };\n  }, [layerKey, reloadToken]);\n\n  useEffect(() => {\n    if (!dirty) return;\n    const guard = (event: BeforeUnloadEvent) => {\n      event.preventDefault();\n    };\n    window.addEventListener(\"beforeunload\", guard);\n    return () => window.removeEventListener(\"beforeunload\", guard);\n  }, [dirty]);\n\n  const reload = () => setReloadToken((token) => token + 1);\n\n  function runTransition(transition: PendingTransition) {\n    setPendingTransition(null);\n    if (transition.type === \"back\") {\n      onBack?.();\n      return;\n    }\n    if (transition.type === \"reload\") {\n      reload();\n      return;\n    }\n    setSelectedOrigin(transition.origin);\n  }\n\n  function requestTransition(transition: PendingTransition) {\n    if (dirty) {\n      setPendingTransition(transition);\n      return;\n    }\n    runTransition(transition);\n  }\n\n  async function persist(\n    build: (\n      detail: PromptSpecDetail,\n    ) => Parameters<PromptPageAdapter[\"saveDetail\"]>[2],\n    failure: string,\n  ) {\n    if (state.status !== \"ready\" || !selectedLayer) return;\n    setSaving(true);\n    setSaveError(\"\");\n    setConflict(false);\n    try {\n      const next = await adapter.saveDetail(\n        entry,\n        selectedLayer,\n        build(state.detail),\n      );\n      applyDetail(next, selectedLayer);\n      onSaved?.(next, selectedLayer);\n    } catch (cause) {\n      const message = errorMessage(cause, failure);\n      setSaveError(message);\n      setConflict(isConflictError(message));\n    } finally {\n      setSaving(false);\n    }\n  }\n\n  const save = () =>\n    persist(\n      (detail) => buildSavePayload(draft, detail, saveSource, path),\n      \"save failed\",\n    );\n  const remove = () =>\n    persist(\n      (detail) => ({ source: \"default\", baseRaw: detail.raw }),\n      \"remove failed\",\n    );\n\n  const render = adapter.render;\n  const tabs = pageTabs({\n    canPreview: render !== undefined,\n    canDiff: entry.defaultRaw !== undefined,\n    extraTabs,\n  }).map((item) => {\n    const icon = TAB_ICONS[item.id];\n    return icon ? { ...item, icon } : item;\n  });\n  const activeTab = tabs.some((item) => item.id === tab)\n    ? tab\n    : PROMPT_PAGE_TAB.prompt;\n  const currentRaw =\n    state.status === \"ready\"\n      ? draftDirty\n        ? draftRaw(draft)\n        : state.detail.raw\n      : \"\";\n\n  function selectLayer(layer: PromptCatalogLayer) {\n    if (layer.origin === selectedOrigin) return;\n    requestTransition({ type: \"layer\", origin: layer.origin });\n  }\n\n  function renderPanel() {\n    if (state.status === \"loading\" || state.status === \"idle\") {\n      return <p className=\"text-sm text-muted-foreground\">Loading prompt…</p>;\n    }\n    if (state.status === \"error\") {\n      return (\n        <div\n          role=\"alert\"\n          className=\"flex items-center gap-2 text-sm text-destructive\"\n        >\n          <span>{state.message}</span>\n          <Button type=\"button\" size=\"sm\" variant=\"outline\" onClick={reload}>\n            Retry\n          </Button>\n        </div>\n      );\n    }\n    if (activeTab === PROMPT_PAGE_TAB.prompt) {\n      return (\n        <PromptPageEditor\n          detail={state.detail}\n          draft={draft}\n          onChange={setDraft}\n          readOnly={readOnly}\n          models={models}\n          families={families}\n          {...(entry.effective.backend\n            ? { effectiveBackend: entry.effective.backend }\n            : {})}\n          {...(entry.effective.model\n            ? { effectiveModel: entry.effective.model }\n            : {})}\n        />\n      );\n    }\n    if (activeTab === PROMPT_PAGE_TAB.preview && render) {\n      return (\n        <PromptPagePreview\n          entry={entry}\n          render={(input) => render(entry, input)}\n          draftRaw={draftDirty ? currentRaw : undefined}\n        />\n      );\n    }\n    if (activeTab === PROMPT_PAGE_TAB.diff && entry.defaultRaw !== undefined) {\n      return (\n        <CodeDiff\n          original={entry.defaultRaw}\n          modified={currentRaw}\n          language=\"markdown\"\n        />\n      );\n    }\n    return extraTabs?.find((item) => item.id === activeTab)?.content ?? null;\n  }\n\n  return (\n    <>\n      <div className={cn(\"flex h-full min-h-0 flex-col\", className)}>\n        <PromptPageHeader\n          entry={entry}\n          selectedLayer={selectedLayer}\n          {...(onBack\n            ? { onBack: () => requestTransition({ type: \"back\" }) }\n            : {})}\n        />\n        <PromptLayerStrip\n          entry={entry}\n          selectedOrigin={selectedOrigin}\n          onSelect={selectLayer}\n        />\n        {readOnly && selectedLayer ? (\n          <div\n            role=\"note\"\n            className=\"mx-density-4 mb-2 flex items-center gap-2 rounded-md border border-border bg-muted px-3 py-2 text-xs\"\n          >\n            <UiLock className=\"shrink-0 text-muted-foreground\" />\n            <span>\n              {layerLabel(selectedLayer.origin)} is read-only from here —{\" \"}\n              <span className=\"font-mono\">{selectedLayer.path}</span>. Edit it\n              directly or pick an editable layer.\n            </span>\n          </div>\n        ) : null}\n        <Tabs\n          tabs={tabs}\n          value={activeTab}\n          onChange={setTab}\n          className=\"px-density-4\"\n        />\n        <div className=\"min-h-0 flex-1 overflow-y-auto px-density-4 py-density-3\">\n          {renderPanel()}\n        </div>\n        {state.status === \"ready\" && !readOnly ? (\n          <PromptPageSaveBar\n            source={saveSource}\n            onSourceChange={setSaveSource}\n            path={path}\n            onPathChange={setPath}\n            dirty={dirty}\n            saving={saving}\n            canRemove={state.detail.source !== \"default\"}\n            error={saveError}\n            conflict={conflict}\n            onSave={save}\n            onRemove={remove}\n            onReload={() => requestTransition({ type: \"reload\" })}\n          />\n        ) : null}\n      </div>\n      {pendingTransition ? (\n        <Modal\n          open\n          onClose={() => setPendingTransition(null)}\n          title=\"Discard unsaved prompt changes?\"\n          size=\"sm\"\n          expandable={false}\n          footer={\n            <div className=\"flex w-full justify-end gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                onClick={() => setPendingTransition(null)}\n              >\n                Keep editing\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"destructive\"\n                onClick={() => runTransition(pendingTransition)}\n              >\n                Discard changes\n              </Button>\n            </div>\n          }\n        >\n          <p className=\"text-sm text-muted-foreground\">\n            Your prompt content, save location, or file path changes will be\n            lost.\n          </p>\n        </Modal>\n      ) : null}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/ai/PromptCatalog/PromptPageEditor.cjs

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const SegmentedControl = require("../../../components/SegmentedControl.cjs");
+const index = require("../SpecRuntimeEditor/index.cjs");
+const types = require("../PromptPicker/types.cjs");
+const promptPageModel = require("./prompt-page-model.cjs");
+const UiEdit = require("../../../icons/components/UiEdit.cjs");
+const UiFileCode = require("../../../icons/components/UiFileCode.cjs");
+const MODE_OPTIONS = [
+  { id: "structured", label: "Structured", icon: UiEdit.UiEdit },
+  { id: "raw", label: "Raw", icon: UiFileCode.UiFileCode }
+];
+const SECTIONS = [
+  "prompt",
+  "model",
+  "permissions",
+  "environment",
+  "cli"
+];
+const COLLAPSED_SECTIONS = [
+  "model",
+  "permissions",
+  "environment"
+];
+const TEXTAREA = "w-full resize-y rounded-md border border-border bg-background p-2 font-mono text-xs leading-relaxed text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function PromptPageEditor({
+  detail,
+  draft,
+  onChange,
+  readOnly,
+  models,
+  families,
+  effectiveBackend,
+  effectiveModel
+}) {
+  const dirty = promptPageModel.isDraftDirty(draft, detail);
+  const canStructure = types.isValidPromptSpecDetail(detail);
+  const modeOptions = MODE_OPTIONS.map((option) => ({
+    ...option,
+    disabled: dirty && option.id !== draft.mode
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [
+    canStructure ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SegmentedControl.SegmentedControl,
+        {
+          size: "sm",
+          value: draft.mode,
+          options: modeOptions,
+          onChange: (mode) => {
+            if (mode !== draft.mode) onChange(promptPageModel.draftFor(detail, mode));
+          },
+          "aria-label": "Editor mode"
+        }
+      ),
+      dirty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Save or reload before switching views." }) : null
+    ] }) : null,
+    detail.parseError ? /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          "This document's frontmatter could not be parsed:",
+          " ",
+          detail.parseError,
+          ". Fix the raw source and save; the structured view returns once it parses."
+        ]
+      }
+    ) : null,
+    draft.mode === "raw" || !draft.value ? /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        "aria-label": "Prompt source",
+        className: `${TEXTAREA} min-h-[24rem] flex-1`,
+        value: draft.raw,
+        readOnly,
+        spellCheck: false,
+        onChange: (event) => onChange({ ...draft, raw: event.currentTarget.value })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      index.SpecRuntimeEditor,
+      {
+        value: draft.value,
+        onChange: (value) => onChange({ ...draft, value }),
+        models,
+        families,
+        ...effectiveBackend ? { effectiveBackend } : {},
+        ...effectiveModel ? { effectiveModel } : {},
+        sections: SECTIONS,
+        defaultCollapsedSections: COLLAPSED_SECTIONS,
+        promptVariant: "document",
+        readOnly,
+        showHeader: false,
+        className: "min-h-0 flex-1"
+      }
+    )
+  ] });
+}
+exports.PromptPageEditor = PromptPageEditor;
+//# sourceMappingURL=PromptPageEditor.cjs.map

package/dist/data/ai/PromptCatalog/PromptPageEditor.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptPageEditor.cjs","sources":["../../../../src/data/ai/PromptCatalog/PromptPageEditor.tsx"],"sourcesContent":["import {\n  SegmentedControl,\n  type SegmentedOption,\n} from \"../../../components/SegmentedControl\";\nimport { UiEdit, UiFileCode } from \"../../../icons\";\nimport type { ChatModel } from \"../../chat/types\";\nimport type { SpecRuntimeFamily } from \"../../runtime/runtime-mode\";\nimport { SpecRuntimeEditor } from \"../SpecRuntimeEditor\";\nimport type { SpecSectionId } from \"../SpecRuntimeEditor/types\";\nimport {\n  isValidPromptSpecDetail,\n  type PromptSpecDetail,\n} from \"../PromptPicker/types\";\nimport {\n  draftFor,\n  isDraftDirty,\n  type PromptDraft,\n  type PromptEditMode,\n} from \"./prompt-page-model\";\n\nconst MODE_OPTIONS: SegmentedOption<PromptEditMode>[] = [\n  { id: \"structured\", label: \"Structured\", icon: UiEdit },\n  { id: \"raw\", label: \"Raw\", icon: UiFileCode },\n];\n\nconst SECTIONS: readonly SpecSectionId[] = [\n  \"prompt\",\n  \"model\",\n  \"permissions\",\n  \"environment\",\n  \"cli\",\n];\n\nconst COLLAPSED_SECTIONS: readonly SpecSectionId[] = [\n  \"model\",\n  \"permissions\",\n  \"environment\",\n];\n\nconst TEXTAREA =\n  \"w-full resize-y rounded-md border border-border bg-background p-2 font-mono text-xs leading-relaxed text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport type PromptPageEditorProps = {\n  detail: PromptSpecDetail;\n  draft: PromptDraft;\n  onChange: (draft: PromptDraft) => void;\n  readOnly: boolean;\n  models?: ChatModel[] | undefined;\n  families?: SpecRuntimeFamily[] | undefined;\n  effectiveBackend?: string | undefined;\n  effectiveModel?: string | undefined;\n};\n\nexport function PromptPageEditor({\n  detail,\n  draft,\n  onChange,\n  readOnly,\n  models,\n  families,\n  effectiveBackend,\n  effectiveModel,\n}: PromptPageEditorProps) {\n  const dirty = isDraftDirty(draft, detail);\n  const canStructure = isValidPromptSpecDetail(detail);\n  const modeOptions = MODE_OPTIONS.map((option) => ({\n    ...option,\n    disabled: dirty && option.id !== draft.mode,\n  }));\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col gap-3\">\n      {canStructure ? (\n        <div className=\"flex items-center gap-2\">\n          <SegmentedControl\n            size=\"sm\"\n            value={draft.mode}\n            options={modeOptions}\n            onChange={(mode) => {\n              if (mode !== draft.mode) onChange(draftFor(detail, mode));\n            }}\n            aria-label=\"Editor mode\"\n          />\n          {dirty ? (\n            <span className=\"text-xs text-muted-foreground\">\n              Save or reload before switching views.\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {detail.parseError ? (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive\"\n        >\n          This document&apos;s frontmatter could not be parsed:{\" \"}\n          {detail.parseError}. Fix the raw source and save; the structured view\n          returns once it parses.\n        </div>\n      ) : null}\n      {draft.mode === \"raw\" || !draft.value ? (\n        <textarea\n          aria-label=\"Prompt source\"\n          className={`${TEXTAREA} min-h-[24rem] flex-1`}\n          value={draft.raw}\n          readOnly={readOnly}\n          spellCheck={false}\n          onChange={(event) =>\n            onChange({ ...draft, raw: event.currentTarget.value })\n          }\n        />\n      ) : (\n        <SpecRuntimeEditor\n          value={draft.value}\n          onChange={(value) => onChange({ ...draft, value })}\n          models={models}\n          families={families}\n          {...(effectiveBackend ? { effectiveBackend } : {})}\n          {...(effectiveModel ? { effectiveModel } : {})}\n          sections={SECTIONS}\n          defaultCollapsedSections={COLLAPSED_SECTIONS}\n          promptVariant=\"document\"\n          readOnly={readOnly}\n          showHeader={false}\n          className=\"min-h-0 flex-1\"\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["UiEdit","UiFileCode","isDraftDirty","isValidPromptSpecDetail","jsxs","jsx","SegmentedControl","draftFor","SpecRuntimeEditor"],"mappings":";;;;;;;;;AAoBA,MAAM,eAAkD;AAAA,EACtD,EAAE,IAAI,cAAc,OAAO,cAAc,MAAMA,OAAAA,OAAA;AAAA,EAC/C,EAAE,IAAI,OAAO,OAAO,OAAO,MAAMC,WAAAA,WAAA;AACnC;AAEA,MAAM,WAAqC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,qBAA+C;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,WACJ;AAaK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,QAAQC,gBAAAA,aAAa,OAAO,MAAM;AACxC,QAAM,eAAeC,MAAAA,wBAAwB,MAAM;AACnD,QAAM,cAAc,aAAa,IAAI,CAAC,YAAY;AAAA,IAChD,GAAG;AAAA,IACH,UAAU,SAAS,OAAO,OAAO,MAAM;AAAA,EAAA,EACvC;AAEF,SACEC,2BAAAA,KAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,IAAA,eACCA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAAC,2BAAAA;AAAAA,QAACC,iBAAAA;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,SAAS;AAAA,UACT,UAAU,CAAC,SAAS;AAClB,gBAAI,SAAS,MAAM,eAAeC,yBAAS,QAAQ,IAAI,CAAC;AAAA,UAC1D;AAAA,UACA,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,QACCF,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAgC,oDAEhD,IACE;AAAA,IAAA,EAAA,CACN,IACE;AAAA,IACH,OAAO,aACND,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACX,UAAA;AAAA,UAAA;AAAA,UACuD;AAAA,UACrD,OAAO;AAAA,UAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGnB;AAAA,IACH,MAAM,SAAS,SAAS,CAAC,MAAM,QAC9BC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAW;AAAA,QACX,WAAW,GAAG,QAAQ;AAAA,QACtB,OAAO,MAAM;AAAA,QACb;AAAA,QACA,YAAY;AAAA,QACZ,UAAU,CAAC,UACT,SAAS,EAAE,GAAG,OAAO,KAAK,MAAM,cAAc,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA,IAIzDA,2BAAAA;AAAAA,MAACG,MAAAA;AAAAA,MAAA;AAAA,QACC,OAAO,MAAM;AAAA,QACb,UAAU,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,OAAO;AAAA,QACjD;AAAA,QACA;AAAA,QACC,GAAI,mBAAmB,EAAE,iBAAA,IAAqB,CAAA;AAAA,QAC9C,GAAI,iBAAiB,EAAE,eAAA,IAAmB,CAAA;AAAA,QAC3C,UAAU;AAAA,QACV,0BAA0B;AAAA,QAC1B,eAAc;AAAA,QACd;AAAA,QACA,YAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;;"}

package/dist/data/ai/PromptCatalog/PromptPageEditor.d.ts

@@ -0,0 +1,16 @@
+import { ChatModel } from '../../chat/types';
+import { SpecRuntimeFamily } from '../../runtime/runtime-mode';
+import { PromptSpecDetail } from '../PromptPicker/types';
+import { PromptDraft } from './prompt-page-model';
+export type PromptPageEditorProps = {
+    detail: PromptSpecDetail;
+    draft: PromptDraft;
+    onChange: (draft: PromptDraft) => void;
+    readOnly: boolean;
+    models?: ChatModel[] | undefined;
+    families?: SpecRuntimeFamily[] | undefined;
+    effectiveBackend?: string | undefined;
+    effectiveModel?: string | undefined;
+};
+export declare function PromptPageEditor({ detail, draft, onChange, readOnly, models, families, effectiveBackend, effectiveModel, }: PromptPageEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PromptPageEditor.d.ts.map

package/dist/data/ai/PromptCatalog/PromptPageEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptPageEditor.d.ts","sourceRoot":"","sources":["../../../../src/data/ai/PromptCatalog/PromptPageEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAGpE,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,qBAAqB,CAAC;AAwB7B,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,EAAE,gBAAgB,CAAC;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,iBAAiB,EAAE,GAAG,SAAS,CAAC;IAC3C,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,cAAc,GACf,EAAE,qBAAqB,2CAmEvB"}

package/dist/data/ai/PromptCatalog/PromptPageEditor.js

@@ -0,0 +1,102 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { SegmentedControl } from "../../../components/SegmentedControl.js";
+import { SpecRuntimeEditor } from "../SpecRuntimeEditor/index.js";
+import { isValidPromptSpecDetail } from "../PromptPicker/types.js";
+import { isDraftDirty, draftFor } from "./prompt-page-model.js";
+import { UiEdit } from "../../../icons/components/UiEdit.js";
+import { UiFileCode } from "../../../icons/components/UiFileCode.js";
+const MODE_OPTIONS = [
+  { id: "structured", label: "Structured", icon: UiEdit },
+  { id: "raw", label: "Raw", icon: UiFileCode }
+];
+const SECTIONS = [
+  "prompt",
+  "model",
+  "permissions",
+  "environment",
+  "cli"
+];
+const COLLAPSED_SECTIONS = [
+  "model",
+  "permissions",
+  "environment"
+];
+const TEXTAREA = "w-full resize-y rounded-md border border-border bg-background p-2 font-mono text-xs leading-relaxed text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function PromptPageEditor({
+  detail,
+  draft,
+  onChange,
+  readOnly,
+  models,
+  families,
+  effectiveBackend,
+  effectiveModel
+}) {
+  const dirty = isDraftDirty(draft, detail);
+  const canStructure = isValidPromptSpecDetail(detail);
+  const modeOptions = MODE_OPTIONS.map((option) => ({
+    ...option,
+    disabled: dirty && option.id !== draft.mode
+  }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col gap-3", children: [
+    canStructure ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        SegmentedControl,
+        {
+          size: "sm",
+          value: draft.mode,
+          options: modeOptions,
+          onChange: (mode) => {
+            if (mode !== draft.mode) onChange(draftFor(detail, mode));
+          },
+          "aria-label": "Editor mode"
+        }
+      ),
+      dirty ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Save or reload before switching views." }) : null
+    ] }) : null,
+    detail.parseError ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        className: "rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive",
+        children: [
+          "This document's frontmatter could not be parsed:",
+          " ",
+          detail.parseError,
+          ". Fix the raw source and save; the structured view returns once it parses."
+        ]
+      }
+    ) : null,
+    draft.mode === "raw" || !draft.value ? /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        "aria-label": "Prompt source",
+        className: `${TEXTAREA} min-h-[24rem] flex-1`,
+        value: draft.raw,
+        readOnly,
+        spellCheck: false,
+        onChange: (event) => onChange({ ...draft, raw: event.currentTarget.value })
+      }
+    ) : /* @__PURE__ */ jsx(
+      SpecRuntimeEditor,
+      {
+        value: draft.value,
+        onChange: (value) => onChange({ ...draft, value }),
+        models,
+        families,
+        ...effectiveBackend ? { effectiveBackend } : {},
+        ...effectiveModel ? { effectiveModel } : {},
+        sections: SECTIONS,
+        defaultCollapsedSections: COLLAPSED_SECTIONS,
+        promptVariant: "document",
+        readOnly,
+        showHeader: false,
+        className: "min-h-0 flex-1"
+      }
+    )
+  ] });
+}
+export {
+  PromptPageEditor
+};
+//# sourceMappingURL=PromptPageEditor.js.map

package/dist/data/ai/PromptCatalog/PromptPageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptPageEditor.js","sources":["../../../../src/data/ai/PromptCatalog/PromptPageEditor.tsx"],"sourcesContent":["import {\n  SegmentedControl,\n  type SegmentedOption,\n} from \"../../../components/SegmentedControl\";\nimport { UiEdit, UiFileCode } from \"../../../icons\";\nimport type { ChatModel } from \"../../chat/types\";\nimport type { SpecRuntimeFamily } from \"../../runtime/runtime-mode\";\nimport { SpecRuntimeEditor } from \"../SpecRuntimeEditor\";\nimport type { SpecSectionId } from \"../SpecRuntimeEditor/types\";\nimport {\n  isValidPromptSpecDetail,\n  type PromptSpecDetail,\n} from \"../PromptPicker/types\";\nimport {\n  draftFor,\n  isDraftDirty,\n  type PromptDraft,\n  type PromptEditMode,\n} from \"./prompt-page-model\";\n\nconst MODE_OPTIONS: SegmentedOption<PromptEditMode>[] = [\n  { id: \"structured\", label: \"Structured\", icon: UiEdit },\n  { id: \"raw\", label: \"Raw\", icon: UiFileCode },\n];\n\nconst SECTIONS: readonly SpecSectionId[] = [\n  \"prompt\",\n  \"model\",\n  \"permissions\",\n  \"environment\",\n  \"cli\",\n];\n\nconst COLLAPSED_SECTIONS: readonly SpecSectionId[] = [\n  \"model\",\n  \"permissions\",\n  \"environment\",\n];\n\nconst TEXTAREA =\n  \"w-full resize-y rounded-md border border-border bg-background p-2 font-mono text-xs leading-relaxed text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\";\n\nexport type PromptPageEditorProps = {\n  detail: PromptSpecDetail;\n  draft: PromptDraft;\n  onChange: (draft: PromptDraft) => void;\n  readOnly: boolean;\n  models?: ChatModel[] | undefined;\n  families?: SpecRuntimeFamily[] | undefined;\n  effectiveBackend?: string | undefined;\n  effectiveModel?: string | undefined;\n};\n\nexport function PromptPageEditor({\n  detail,\n  draft,\n  onChange,\n  readOnly,\n  models,\n  families,\n  effectiveBackend,\n  effectiveModel,\n}: PromptPageEditorProps) {\n  const dirty = isDraftDirty(draft, detail);\n  const canStructure = isValidPromptSpecDetail(detail);\n  const modeOptions = MODE_OPTIONS.map((option) => ({\n    ...option,\n    disabled: dirty && option.id !== draft.mode,\n  }));\n\n  return (\n    <div className=\"flex h-full min-h-0 flex-col gap-3\">\n      {canStructure ? (\n        <div className=\"flex items-center gap-2\">\n          <SegmentedControl\n            size=\"sm\"\n            value={draft.mode}\n            options={modeOptions}\n            onChange={(mode) => {\n              if (mode !== draft.mode) onChange(draftFor(detail, mode));\n            }}\n            aria-label=\"Editor mode\"\n          />\n          {dirty ? (\n            <span className=\"text-xs text-muted-foreground\">\n              Save or reload before switching views.\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      {detail.parseError ? (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-destructive/40 bg-destructive/10 px-3 py-2 text-xs text-destructive\"\n        >\n          This document&apos;s frontmatter could not be parsed:{\" \"}\n          {detail.parseError}. Fix the raw source and save; the structured view\n          returns once it parses.\n        </div>\n      ) : null}\n      {draft.mode === \"raw\" || !draft.value ? (\n        <textarea\n          aria-label=\"Prompt source\"\n          className={`${TEXTAREA} min-h-[24rem] flex-1`}\n          value={draft.raw}\n          readOnly={readOnly}\n          spellCheck={false}\n          onChange={(event) =>\n            onChange({ ...draft, raw: event.currentTarget.value })\n          }\n        />\n      ) : (\n        <SpecRuntimeEditor\n          value={draft.value}\n          onChange={(value) => onChange({ ...draft, value })}\n          models={models}\n          families={families}\n          {...(effectiveBackend ? { effectiveBackend } : {})}\n          {...(effectiveModel ? { effectiveModel } : {})}\n          sections={SECTIONS}\n          defaultCollapsedSections={COLLAPSED_SECTIONS}\n          promptVariant=\"document\"\n          readOnly={readOnly}\n          showHeader={false}\n          className=\"min-h-0 flex-1\"\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,eAAkD;AAAA,EACtD,EAAE,IAAI,cAAc,OAAO,cAAc,MAAM,OAAA;AAAA,EAC/C,EAAE,IAAI,OAAO,OAAO,OAAO,MAAM,WAAA;AACnC;AAEA,MAAM,WAAqC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,qBAA+C;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,WACJ;AAaK,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,QAAQ,aAAa,OAAO,MAAM;AACxC,QAAM,eAAe,wBAAwB,MAAM;AACnD,QAAM,cAAc,aAAa,IAAI,CAAC,YAAY;AAAA,IAChD,GAAG;AAAA,IACH,UAAU,SAAS,OAAO,OAAO,MAAM;AAAA,EAAA,EACvC;AAEF,SACE,qBAAC,OAAA,EAAI,WAAU,sCACZ,UAAA;AAAA,IAAA,eACC,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO,MAAM;AAAA,UACb,SAAS;AAAA,UACT,UAAU,CAAC,SAAS;AAClB,gBAAI,SAAS,MAAM,eAAe,SAAS,QAAQ,IAAI,CAAC;AAAA,UAC1D;AAAA,UACA,cAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAEZ,QACC,oBAAC,QAAA,EAAK,WAAU,iCAAgC,oDAEhD,IACE;AAAA,IAAA,EAAA,CACN,IACE;AAAA,IACH,OAAO,aACN;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACX,UAAA;AAAA,UAAA;AAAA,UACuD;AAAA,UACrD,OAAO;AAAA,UAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAGnB;AAAA,IACH,MAAM,SAAS,SAAS,CAAC,MAAM,QAC9B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,cAAW;AAAA,QACX,WAAW,GAAG,QAAQ;AAAA,QACtB,OAAO,MAAM;AAAA,QACb;AAAA,QACA,YAAY;AAAA,QACZ,UAAU,CAAC,UACT,SAAS,EAAE,GAAG,OAAO,KAAK,MAAM,cAAc,MAAA,CAAO;AAAA,MAAA;AAAA,IAAA,IAIzD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,MAAM;AAAA,QACb,UAAU,CAAC,UAAU,SAAS,EAAE,GAAG,OAAO,OAAO;AAAA,QACjD;AAAA,QACA;AAAA,QACC,GAAI,mBAAmB,EAAE,iBAAA,IAAqB,CAAA;AAAA,QAC9C,GAAI,iBAAiB,EAAE,eAAA,IAAmB,CAAA;AAAA,QAC3C,UAAU;AAAA,QACV,0BAA0B;AAAA,QAC1B,eAAc;AAAA,QACd;AAAA,QACA,YAAY;AAAA,QACZ,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;"}