@withpotter/components 0.13.0-next.101

package/dist/editor-agent/ask-ai-popover.js

@@ -0,0 +1,221 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  AlertTriangle,
+  Check,
+  Loader2,
+  RotateCcw,
+  Sparkles,
+  X
+} from "lucide-react";
+import { triggerPreviewRefresh } from "@withpotter/components/storefront-preview/preview-refresh";
+import { proposalsApi } from "@withpotter/lib/proposals-api";
+import { applyProposalOptimistically } from "@withpotter/lib/editor-agent/apply-proposal";
+import { useConverse } from "@withpotter/lib/editor-agent/use-converse";
+function hasProposalChanges(response) {
+  if (!response?.proposal) return false;
+  return response.proposal.ops.length > 0 || Boolean(
+    response.proposal.designDiff && Object.keys(response.proposal.designDiff).length > 0
+  );
+}
+function AskAiPopover({
+  pageId,
+  tenantSlug,
+  selection,
+  scopeLabel,
+  templateDocument,
+  onClose,
+  onAccepted
+}) {
+  const [phase, setPhase] = useState("idle");
+  const [prompt, setPrompt] = useState("");
+  const [response, setResponse] = useState(null);
+  const [structuralCount, setStructuralCount] = useState(0);
+  const [error, setError] = useState(null);
+  const { messages, streaming, send } = useConverse({ tenantSlug });
+  const busy = streaming || phase === "accepting";
+  const streamedNarration = [...messages].reverse().find((message) => message.role === "assistant")?.content;
+  const submit = async () => {
+    const trimmed = prompt.trim();
+    if (!trimmed || busy) return;
+    setPhase("proposing");
+    setError(null);
+    try {
+      const result = await send({
+        prompt: trimmed,
+        selection,
+        context: { pageId, templateDocument }
+      });
+      const data = {
+        proposal: result.proposal ?? { pageId, ops: [] },
+        receiptId: result.receiptId,
+        narration: result.clarify?.question ?? result.narration,
+        unavailableTools: result.unavailableTools
+      };
+      setPrompt("");
+      if (!hasProposalChanges(data)) {
+        setResponse(data);
+        setStructuralCount(0);
+        setPhase("proposed");
+        return;
+      }
+      const applied = applyProposalOptimistically(data.proposal);
+      setResponse(data);
+      setStructuralCount(applied.structuralOps.length);
+      setPhase("proposed");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Something went wrong.");
+      setPhase("error");
+    }
+  };
+  const accept = async () => {
+    if (!response?.receiptId || phase === "accepting") return;
+    setPhase("accepting");
+    setError(null);
+    try {
+      await proposalsApi.approve(tenantSlug, response.receiptId);
+      triggerPreviewRefresh("save");
+      onAccepted?.(response.receiptId);
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Could not apply the change."
+      );
+      setPhase("error");
+    }
+  };
+  const discard = async () => {
+    if (response?.receiptId) {
+      await proposalsApi.reject(tenantSlug, response.receiptId).catch(() => {
+      });
+    }
+    triggerPreviewRefresh("manual");
+    setResponse(null);
+    setStructuralCount(0);
+    setPrompt("");
+    setPhase("idle");
+  };
+  const hasProposal = hasProposalChanges(response);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[1px] border border-[var(--border-default)] bg-[var(--bg-base)] shadow-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Sparkles, { className: "size-4 text-brand-500" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[var(--text-primary)]", children: "Ask AI" }),
+        scopeLabel && /* @__PURE__ */ jsx("span", { className: "rounded-[1px] bg-[var(--bg-muted)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--text-tertiary)]", children: selection.scope === "section" ? scopeLabel : "Whole page" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-[1px] p-1 text-[var(--text-muted)] hover:bg-[var(--bg-muted)] hover:text-[var(--text-secondary)]",
+          "aria-label": "Close Ask AI",
+          children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-3", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: prompt,
+          onChange: (e) => setPrompt(e.target.value),
+          onKeyDown: (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key === "Enter") submit();
+          },
+          disabled: busy,
+          rows: 3,
+          placeholder: selection.scope === "section" ? "Describe the change to this section\u2026" : "Describe the change to this page\u2026",
+          className: "w-full resize-none rounded-[1px] border border-[var(--border-default)] bg-[var(--bg-muted)] px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-brand-500 focus:outline-none disabled:opacity-60"
+        }
+      ),
+      phase === "error" && error && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-[1px] bg-[var(--error-bg,rgba(239,68,68,0.1))] px-3 py-2 text-xs text-[var(--error,#b91c1c)]", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-[13px] shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: error })
+      ] }),
+      phase === "proposing" && streamedNarration && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-sm text-[var(--text-secondary)]",
+          "aria-live": "polite",
+          children: streamedNarration
+        }
+      ),
+      phase === "proposed" && response && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-secondary)]", children: response.narration }),
+        !hasProposal && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "No changes were proposed for this prompt." }),
+        structuralCount > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
+          structuralCount,
+          " structural change",
+          structuralCount === 1 ? "" : "s",
+          " will appear in your draft after you accept. You can revert before publishing."
+        ] }),
+        response.unavailableTools && response.unavailableTools.length > 0 && /* @__PURE__ */ jsxs("p", { className: "text-xs text-[var(--text-tertiary)]", children: [
+          "Not available yet: ",
+          response.unavailableTools.join(", "),
+          "."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: phase === "proposed" && hasProposal ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: discard,
+            disabled: phase !== "proposed",
+            className: "inline-flex items-center gap-2 rounded-[1px] border border-[var(--border-default)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-muted)] disabled:opacity-60",
+            children: [
+              /* @__PURE__ */ jsx(RotateCcw, { className: "size-[13px]" }),
+              "Discard"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: accept,
+            disabled: !response?.receiptId || phase !== "proposed",
+            className: "inline-flex items-center gap-2 rounded-[1px] bg-brand-500 px-3 py-2 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60",
+            children: [
+              /* @__PURE__ */ jsx(Check, { className: "size-[13px]" }),
+              "Accept"
+            ]
+          }
+        )
+      ] }) : phase === "proposed" && !hasProposal ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setResponse(null);
+            setPhase("idle");
+          },
+          className: "rounded-[1px] border border-[var(--border-default)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-muted)]",
+          children: "Try again"
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: submit,
+          disabled: !prompt.trim() || busy,
+          className: "inline-flex items-center gap-2 rounded-[1px] bg-brand-500 px-3 py-2 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60",
+          children: [
+            phase === "proposing" ? /* @__PURE__ */ jsx(Loader2, { className: "size-[13px] animate-spin" }) : /* @__PURE__ */ jsx(Sparkles, { className: "size-[13px]" }),
+            phase === "proposing" ? "Thinking\u2026" : "Ask"
+          ]
+        }
+      ) })
+    ] }),
+    phase === "accepting" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-[var(--border-subtle)] px-3 py-2 text-xs text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-[13px] animate-spin" }),
+      "Applying\u2026"
+    ] })
+  ] });
+}
+export {
+  AskAiPopover
+};
+//# sourceMappingURL=ask-ai-popover.js.map

package/dist/editor-agent/ask-ai-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor-agent/ask-ai-popover.tsx"],"sourcesContent":["'use client';\n\n/**\n * E5d \"Ask AI\" popover — selection-scoped editor agent.\n *\n * Streams the merchant's conversation through the dashboard proxy\n * (`POST /api/editor-agent/converse` → agency-runtime), applies the returned\n * proposal **optimistically** to the preview iframe via the `PB_AUTHOR_PATCH`\n * bridge (E5c), and gates persistence behind **Accept**. Accept approves the\n * host draft (which applies + audits); Discard rejects it and reverts the\n * iframe to the last saved state. The Accept button is the approval gate —\n * nothing persists until the merchant clicks it.\n *\n * Default-off behind `isEditorAgentEnabled()` (roadmap#114 / E4b must be live).\n */\n\nimport { useState } from 'react';\nimport {\n  AlertTriangle,\n  Check,\n  Loader2,\n  RotateCcw,\n  Sparkles,\n  X,\n} from 'lucide-react';\nimport { triggerPreviewRefresh } from '@withpotter/components/storefront-preview/preview-refresh';\nimport { proposalsApi } from '@withpotter/lib/proposals-api';\nimport { applyProposalOptimistically } from '@withpotter/lib/editor-agent/apply-proposal';\nimport { useConverse } from '@withpotter/lib/editor-agent/use-converse';\nimport type {\n  EditSelection,\n  ProposeEditResponse,\n} from '@withpotter/lib/editor-agent/contracts';\n\ntype Phase = 'idle' | 'proposing' | 'proposed' | 'accepting' | 'error';\n\nfunction hasProposalChanges(response: ProposeEditResponse | null): boolean {\n  if (!response?.proposal) return false;\n  return (\n    response.proposal.ops.length > 0 ||\n    Boolean(\n      response.proposal.designDiff &&\n      Object.keys(response.proposal.designDiff).length > 0,\n    )\n  );\n}\n\ninterface AskAiPopoverProps {\n  /** The page/template draft being edited. */\n  pageId: string;\n  /** Tenant slug for the host approve/reject calls. */\n  tenantSlug: string;\n  /** Section-scoped vs whole-page. */\n  selection: EditSelection;\n  /** Human label for the scope, shown in the header (e.g. the section name). */\n  scopeLabel?: string;\n  /** The `GET /api/templates/:id` document, forwarded to ground the agent. */\n  templateDocument: unknown;\n  /** Close the popover. */\n  onClose: () => void;\n  /** Called after a proposal is approved and staged into the page draft. */\n  onAccepted?: (receiptId: string) => void;\n}\n\nexport function AskAiPopover({\n  pageId,\n  tenantSlug,\n  selection,\n  scopeLabel,\n  templateDocument,\n  onClose,\n  onAccepted,\n}: AskAiPopoverProps) {\n  const [phase, setPhase] = useState<Phase>('idle');\n  const [prompt, setPrompt] = useState('');\n  const [response, setResponse] = useState<ProposeEditResponse | null>(null);\n  const [structuralCount, setStructuralCount] = useState(0);\n  const [error, setError] = useState<string | null>(null);\n  const { messages, streaming, send } = useConverse({ tenantSlug });\n\n  const busy = streaming || phase === 'accepting';\n  const streamedNarration = [...messages]\n    .reverse()\n    .find((message) => message.role === 'assistant')?.content;\n\n  const submit = async () => {\n    const trimmed = prompt.trim();\n    if (!trimmed || busy) return;\n    setPhase('proposing');\n    setError(null);\n    try {\n      const result = await send({\n        prompt: trimmed,\n        selection,\n        context: { pageId, templateDocument },\n      });\n      const data: ProposeEditResponse = {\n        proposal: result.proposal ?? { pageId, ops: [] },\n        receiptId: result.receiptId,\n        narration: result.clarify?.question ?? result.narration,\n        unavailableTools: result.unavailableTools,\n      };\n      setPrompt('');\n      if (!hasProposalChanges(data)) {\n        setResponse(data);\n        setStructuralCount(0);\n        setPhase('proposed');\n        return;\n      }\n      const applied = applyProposalOptimistically(data.proposal);\n      setResponse(data);\n      setStructuralCount(applied.structuralOps.length);\n      setPhase('proposed');\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Something went wrong.');\n      setPhase('error');\n    }\n  };\n\n  const accept = async () => {\n    if (!response?.receiptId || phase === 'accepting') return;\n    setPhase('accepting');\n    setError(null);\n    try {\n      await proposalsApi.approve(tenantSlug, response.receiptId);\n      triggerPreviewRefresh('save');\n      onAccepted?.(response.receiptId);\n      onClose();\n    } catch (err) {\n      setError(\n        err instanceof Error ? err.message : 'Could not apply the change.',\n      );\n      setPhase('error');\n    }\n  };\n\n  const discard = async () => {\n    if (response?.receiptId) {\n      // Best-effort reject; the draft can never self-approve, so a failed\n      // reject leaves a harmless pending draft the merchant can dismiss later.\n      await proposalsApi.reject(tenantSlug, response.receiptId).catch(() => {});\n    }\n    // Revert the optimistic patches by reloading the iframe from saved state.\n    triggerPreviewRefresh('manual');\n    setResponse(null);\n    setStructuralCount(0);\n    setPrompt('');\n    setPhase('idle');\n  };\n\n  const hasProposal = hasProposalChanges(response);\n\n  return (\n    <div className=\"w-full rounded-[1px] border border-[var(--border-default)] bg-[var(--bg-base)] shadow-lg\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2\">\n        <div className=\"flex items-center gap-2\">\n          <Sparkles className=\"size-4 text-brand-500\" />\n          <span className=\"text-sm font-medium text-[var(--text-primary)]\">\n            Ask AI\n          </span>\n          {scopeLabel && (\n            <span className=\"rounded-[1px] bg-[var(--bg-muted)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--text-tertiary)]\">\n              {selection.scope === 'section' ? scopeLabel : 'Whole page'}\n            </span>\n          )}\n        </div>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"rounded-[1px] p-1 text-[var(--text-muted)] hover:bg-[var(--bg-muted)] hover:text-[var(--text-secondary)]\"\n          aria-label=\"Close Ask AI\"\n        >\n          <X className=\"size-4\" />\n        </button>\n      </div>\n\n      <div className=\"space-y-3 p-3\">\n        {/* Prompt */}\n        <textarea\n          value={prompt}\n          onChange={(e) => setPrompt(e.target.value)}\n          onKeyDown={(e) => {\n            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit();\n          }}\n          disabled={busy}\n          rows={3}\n          placeholder={\n            selection.scope === 'section'\n              ? 'Describe the change to this section…'\n              : 'Describe the change to this page…'\n          }\n          className=\"w-full resize-none rounded-[1px] border border-[var(--border-default)] bg-[var(--bg-muted)] px-3 py-2 text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:border-brand-500 focus:outline-none disabled:opacity-60\"\n        />\n\n        {/* Error */}\n        {phase === 'error' && error && (\n          <div className=\"flex items-start gap-2 rounded-[1px] bg-[var(--error-bg,rgba(239,68,68,0.1))] px-3 py-2 text-xs text-[var(--error,#b91c1c)]\">\n            <AlertTriangle className=\"mt-0.5 size-[13px] shrink-0\" />\n            <span>{error}</span>\n          </div>\n        )}\n\n        {phase === 'proposing' && streamedNarration && (\n          <p\n            className=\"text-sm text-[var(--text-secondary)]\"\n            aria-live=\"polite\"\n          >\n            {streamedNarration}\n          </p>\n        )}\n\n        {/* Proposed summary */}\n        {phase === 'proposed' && response && (\n          <div className=\"space-y-2\">\n            <p className=\"text-sm text-[var(--text-secondary)]\">\n              {response.narration}\n            </p>\n            {!hasProposal && (\n              <p className=\"text-xs text-[var(--text-tertiary)]\">\n                No changes were proposed for this prompt.\n              </p>\n            )}\n            {structuralCount > 0 && (\n              <p className=\"text-xs text-[var(--text-tertiary)]\">\n                {structuralCount} structural change\n                {structuralCount === 1 ? '' : 's'} will appear in your draft\n                after you accept. You can revert before publishing.\n              </p>\n            )}\n            {response.unavailableTools &&\n              response.unavailableTools.length > 0 && (\n                <p className=\"text-xs text-[var(--text-tertiary)]\">\n                  Not available yet: {response.unavailableTools.join(', ')}.\n                </p>\n              )}\n          </div>\n        )}\n\n        {/* Actions */}\n        <div className=\"flex items-center justify-end gap-2\">\n          {phase === 'proposed' && hasProposal ? (\n            <>\n              <button\n                type=\"button\"\n                onClick={discard}\n                disabled={phase !== 'proposed'}\n                className=\"inline-flex items-center gap-2 rounded-[1px] border border-[var(--border-default)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-muted)] disabled:opacity-60\"\n              >\n                <RotateCcw className=\"size-[13px]\" />\n                Discard\n              </button>\n              <button\n                type=\"button\"\n                onClick={accept}\n                disabled={!response?.receiptId || phase !== 'proposed'}\n                className=\"inline-flex items-center gap-2 rounded-[1px] bg-brand-500 px-3 py-2 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60\"\n              >\n                <Check className=\"size-[13px]\" />\n                Accept\n              </button>\n            </>\n          ) : phase === 'proposed' && !hasProposal ? (\n            <button\n              type=\"button\"\n              onClick={() => {\n                setResponse(null);\n                setPhase('idle');\n              }}\n              className=\"rounded-[1px] border border-[var(--border-default)] px-3 py-2 text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-muted)]\"\n            >\n              Try again\n            </button>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={submit}\n              disabled={!prompt.trim() || busy}\n              className=\"inline-flex items-center gap-2 rounded-[1px] bg-brand-500 px-3 py-2 text-sm font-medium text-white hover:bg-brand-600 disabled:opacity-60\"\n            >\n              {phase === 'proposing' ? (\n                <Loader2 className=\"size-[13px] animate-spin\" />\n              ) : (\n                <Sparkles className=\"size-[13px]\" />\n              )}\n              {phase === 'proposing' ? 'Thinking…' : 'Ask'}\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Accepting overlay hint */}\n      {phase === 'accepting' && (\n        <div className=\"flex items-center gap-2 border-t border-[var(--border-subtle)] px-3 py-2 text-xs text-[var(--text-tertiary)]\">\n          <Loader2 className=\"size-[13px] animate-spin\" />\n          Applying…\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA4JQ,SAsFI,UArFF,KADF;AA5IR,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AAC7B,SAAS,mCAAmC;AAC5C,SAAS,mBAAmB;AAQ5B,SAAS,mBAAmB,UAA+C;AACzE,MAAI,CAAC,UAAU,SAAU,QAAO;AAChC,SACE,SAAS,SAAS,IAAI,SAAS,KAC/B;AAAA,IACE,SAAS,SAAS,cAClB,OAAO,KAAK,SAAS,SAAS,UAAU,EAAE,SAAS;AAAA,EACrD;AAEJ;AAmBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB,MAAM;AAChD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAqC,IAAI;AACzE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,CAAC;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,EAAE,UAAU,WAAW,KAAK,IAAI,YAAY,EAAE,WAAW,CAAC;AAEhE,QAAM,OAAO,aAAa,UAAU;AACpC,QAAM,oBAAoB,CAAC,GAAG,QAAQ,EACnC,QAAQ,EACR,KAAK,CAAC,YAAY,QAAQ,SAAS,WAAW,GAAG;AAEpD,QAAM,SAAS,YAAY;AACzB,UAAM,UAAU,OAAO,KAAK;AAC5B,QAAI,CAAC,WAAW,KAAM;AACtB,aAAS,WAAW;AACpB,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,MAAM,KAAK;AAAA,QACxB,QAAQ;AAAA,QACR;AAAA,QACA,SAAS,EAAE,QAAQ,iBAAiB;AAAA,MACtC,CAAC;AACD,YAAM,OAA4B;AAAA,QAChC,UAAU,OAAO,YAAY,EAAE,QAAQ,KAAK,CAAC,EAAE;AAAA,QAC/C,WAAW,OAAO;AAAA,QAClB,WAAW,OAAO,SAAS,YAAY,OAAO;AAAA,QAC9C,kBAAkB,OAAO;AAAA,MAC3B;AACA,gBAAU,EAAE;AACZ,UAAI,CAAC,mBAAmB,IAAI,GAAG;AAC7B,oBAAY,IAAI;AAChB,2BAAmB,CAAC;AACpB,iBAAS,UAAU;AACnB;AAAA,MACF;AACA,YAAM,UAAU,4BAA4B,KAAK,QAAQ;AACzD,kBAAY,IAAI;AAChB,yBAAmB,QAAQ,cAAc,MAAM;AAC/C,eAAS,UAAU;AAAA,IACrB,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,uBAAuB;AACrE,eAAS,OAAO;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,SAAS,YAAY;AACzB,QAAI,CAAC,UAAU,aAAa,UAAU,YAAa;AACnD,aAAS,WAAW;AACpB,aAAS,IAAI;AACb,QAAI;AACF,YAAM,aAAa,QAAQ,YAAY,SAAS,SAAS;AACzD,4BAAsB,MAAM;AAC5B,mBAAa,SAAS,SAAS;AAC/B,cAAQ;AAAA,IACV,SAAS,KAAK;AACZ;AAAA,QACE,eAAe,QAAQ,IAAI,UAAU;AAAA,MACvC;AACA,eAAS,OAAO;AAAA,IAClB;AAAA,EACF;AAEA,QAAM,UAAU,YAAY;AAC1B,QAAI,UAAU,WAAW;AAGvB,YAAM,aAAa,OAAO,YAAY,SAAS,SAAS,EAAE,MAAM,MAAM;AAAA,MAAC,CAAC;AAAA,IAC1E;AAEA,0BAAsB,QAAQ;AAC9B,gBAAY,IAAI;AAChB,uBAAmB,CAAC;AACpB,cAAU,EAAE;AACZ,aAAS,MAAM;AAAA,EACjB;AAEA,QAAM,cAAc,mBAAmB,QAAQ;AAE/C,SACE,qBAAC,SAAI,WAAU,4FAEb;AAAA,yBAAC,SAAI,WAAU,4FACb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,YAAS,WAAU,yBAAwB;AAAA,QAC5C,oBAAC,UAAK,WAAU,kDAAiD,oBAEjE;AAAA,QACC,cACC,oBAAC,UAAK,WAAU,8HACb,oBAAU,UAAU,YAAY,aAAa,cAChD;AAAA,SAEJ;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAU;AAAA,UACV,cAAW;AAAA,UAEX,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,MACxB;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,iBAEb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,UAAU,EAAE,OAAO,KAAK;AAAA,UACzC,WAAW,CAAC,MAAM;AAChB,iBAAK,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,QAAS,QAAO;AAAA,UAC5D;AAAA,UACA,UAAU;AAAA,UACV,MAAM;AAAA,UACN,aACE,UAAU,UAAU,YAChB,8CACA;AAAA,UAEN,WAAU;AAAA;AAAA,MACZ;AAAA,MAGC,UAAU,WAAW,SACpB,qBAAC,SAAI,WAAU,+HACb;AAAA,4BAAC,iBAAc,WAAU,+BAA8B;AAAA,QACvD,oBAAC,UAAM,iBAAM;AAAA,SACf;AAAA,MAGD,UAAU,eAAe,qBACxB;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MAID,UAAU,cAAc,YACvB,qBAAC,SAAI,WAAU,aACb;AAAA,4BAAC,OAAE,WAAU,wCACV,mBAAS,WACZ;AAAA,QACC,CAAC,eACA,oBAAC,OAAE,WAAU,uCAAsC,uDAEnD;AAAA,QAED,kBAAkB,KACjB,qBAAC,OAAE,WAAU,uCACV;AAAA;AAAA,UAAgB;AAAA,UAChB,oBAAoB,IAAI,KAAK;AAAA,UAAI;AAAA,WAEpC;AAAA,QAED,SAAS,oBACR,SAAS,iBAAiB,SAAS,KACjC,qBAAC,OAAE,WAAU,uCAAsC;AAAA;AAAA,UAC7B,SAAS,iBAAiB,KAAK,IAAI;AAAA,UAAE;AAAA,WAC3D;AAAA,SAEN;AAAA,MAIF,oBAAC,SAAI,WAAU,uCACZ,oBAAU,cAAc,cACvB,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU,UAAU;AAAA,YACpB,WAAU;AAAA,YAEV;AAAA,kCAAC,aAAU,WAAU,eAAc;AAAA,cAAE;AAAA;AAAA;AAAA,QAEvC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAU,CAAC,UAAU,aAAa,UAAU;AAAA,YAC5C,WAAU;AAAA,YAEV;AAAA,kCAAC,SAAM,WAAU,eAAc;AAAA,cAAE;AAAA;AAAA;AAAA,QAEnC;AAAA,SACF,IACE,UAAU,cAAc,CAAC,cAC3B;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAM;AACb,wBAAY,IAAI;AAChB,qBAAS,MAAM;AAAA,UACjB;AAAA,UACA,WAAU;AAAA,UACX;AAAA;AAAA,MAED,IAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,CAAC,OAAO,KAAK,KAAK;AAAA,UAC5B,WAAU;AAAA,UAET;AAAA,sBAAU,cACT,oBAAC,WAAQ,WAAU,4BAA2B,IAE9C,oBAAC,YAAS,WAAU,eAAc;AAAA,YAEnC,UAAU,cAAc,mBAAc;AAAA;AAAA;AAAA,MACzC,GAEJ;AAAA,OACF;AAAA,IAGC,UAAU,eACT,qBAAC,SAAI,WAAU,gHACb;AAAA,0BAAC,WAAQ,WAAU,4BAA2B;AAAA,MAAE;AAAA,OAElD;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/editor-shared/floating-save-bar.d.ts

@@ -0,0 +1,15 @@
+interface FloatingSaveBarProps {
+    isDirty: boolean;
+    saving: boolean;
+    onSave: () => void;
+    entityName: string;
+    isEditing: boolean;
+    /**
+     * The save landed, and the bar says so for as long as the caller holds it
+     * true. A spinner that stops looks the same as a save that failed, so the
+     * one moment worth a word is the moment after it worked.
+     */
+    saved?: boolean;
+}
+export declare function FloatingSaveBar({ isDirty, saving, onSave, entityName, isEditing, saved, }: FloatingSaveBarProps): import("react").JSX.Element | null;
+export {};

package/dist/editor-shared/floating-save-bar.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2, Check } from "lucide-react";
+import { StickyCtaBar } from "@withpotter/components/mobile/primitives/sticky-cta-bar";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+function FloatingSaveBar({
+  isDirty,
+  saving,
+  onSave,
+  entityName,
+  isEditing,
+  saved
+}) {
+  const isMobile = useIsMobile();
+  if (!isMobile) return null;
+  if (isEditing && !isDirty && !saved) return null;
+  const label = saving ? "Saving\u2026" : saved ? isEditing ? "Saved" : `${entityName} created` : isEditing ? "Save Changes" : `Create ${entityName}`;
+  return /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: true, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSave,
+      disabled: saving || saved,
+      className: "mx-auto w-[calc(100%-4rem)] relative overflow-hidden py-3 text-lg font-semibold rounded-ios-lg active:scale-[0.98] disabled:opacity-60 transition flex items-center justify-center gap-3",
+      style: {
+        background: "var(--mb-accent)",
+        color: "var(--mb-accent-fg)"
+      },
+      children: [
+        saving ? /* @__PURE__ */ jsx(Loader2, { className: "w-[18px] h-[18px] animate-spin" }) : isDirty && !saved ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "w-1.5 h-1.5 rounded-full",
+            style: {
+              background: "color-mix(in srgb, var(--mb-accent-fg) 80%, transparent)"
+            }
+          }
+        ) : /* @__PURE__ */ jsx(Check, { className: "w-[18px] h-[18px]" }),
+        label
+      ]
+    }
+  ) });
+}
+export {
+  FloatingSaveBar
+};
+//# sourceMappingURL=floating-save-bar.js.map

package/dist/editor-shared/floating-save-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor-shared/floating-save-bar.tsx"],"sourcesContent":["'use client';\n\nimport { Loader2, Check } from 'lucide-react';\nimport { StickyCtaBar } from '@withpotter/components/mobile/primitives/sticky-cta-bar';\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\n\ninterface FloatingSaveBarProps {\n  isDirty: boolean;\n  saving: boolean;\n  onSave: () => void;\n  entityName: string;\n  isEditing: boolean;\n  /**\n   * The save landed, and the bar says so for as long as the caller holds it\n   * true. A spinner that stops looks the same as a save that failed, so the\n   * one moment worth a word is the moment after it worked.\n   */\n  saved?: boolean;\n}\n\nexport function FloatingSaveBar({\n  isDirty,\n  saving,\n  onSave,\n  entityName,\n  isEditing,\n  saved,\n}: FloatingSaveBarProps) {\n  // StickyCtaBar portals to document.body, so a parent `lg:hidden` wrapper\n  // doesn't actually hide it on desktop. Gate on the runtime breakpoint\n  // instead so the desktop layout's inline save button is the only CTA.\n  const isMobile = useIsMobile();\n  if (!isMobile) return null;\n\n  // In edit mode, only show when there are unsaved changes — or while the bar\n  // is still reporting the save that cleared them.\n  if (isEditing && !isDirty && !saved) return null;\n\n  const label = saving\n    ? 'Saving…'\n    : saved\n      ? isEditing\n        ? 'Saved'\n        : `${entityName} created`\n      : isEditing\n        ? 'Save Changes'\n        : `Create ${entityName}`;\n\n  return (\n    <StickyCtaBar respectTabBar>\n      <button\n        type=\"button\"\n        onClick={onSave}\n        disabled={saving || saved}\n        className=\"mx-auto w-[calc(100%-4rem)] relative overflow-hidden py-3 text-lg font-semibold rounded-ios-lg active:scale-[0.98] disabled:opacity-60 transition flex items-center justify-center gap-3\"\n        style={{\n          background: 'var(--mb-accent)',\n          color: 'var(--mb-accent-fg)',\n        }}\n      >\n        {saving ? (\n          <Loader2 className=\"w-[18px] h-[18px] animate-spin\" />\n        ) : isDirty && !saved ? (\n          <span\n            className=\"w-1.5 h-1.5 rounded-full\"\n            style={{\n              background:\n                'color-mix(in srgb, var(--mb-accent-fg) 80%, transparent)',\n            }}\n          />\n        ) : (\n          <Check className=\"w-[18px] h-[18px]\" />\n        )}\n        {label}\n      </button>\n    </StickyCtaBar>\n  );\n}\n"],"mappings":";AAkDM,SAWI,KAXJ;AAhDN,SAAS,SAAS,aAAa;AAC/B,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAgBrB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AAIvB,QAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,SAAU,QAAO;AAItB,MAAI,aAAa,CAAC,WAAW,CAAC,MAAO,QAAO;AAE5C,QAAM,QAAQ,SACV,iBACA,QACE,YACE,UACA,GAAG,UAAU,aACf,YACE,iBACA,UAAU,UAAU;AAE5B,SACE,oBAAC,gBAAa,eAAa,MACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU,UAAU;AAAA,MACpB,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MAEC;AAAA,iBACC,oBAAC,WAAQ,WAAU,kCAAiC,IAClD,WAAW,CAAC,QACd;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,YACE;AAAA,YACJ;AAAA;AAAA,QACF,IAEA,oBAAC,SAAM,WAAU,qBAAoB;AAAA,QAEtC;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/editor-shared/index.d.ts

@@ -0,0 +1,3 @@
+export { MobileEditorSection } from './mobile-editor-section';
+export { FloatingSaveBar } from './floating-save-bar';
+export { useEditorDirtyTracking } from './use-editor-dirty-tracking';

package/dist/editor-shared/index.js

@@ -0,0 +1,9 @@
+import { MobileEditorSection } from "./mobile-editor-section";
+import { FloatingSaveBar } from "./floating-save-bar";
+import { useEditorDirtyTracking } from "./use-editor-dirty-tracking";
+export {
+  FloatingSaveBar,
+  MobileEditorSection,
+  useEditorDirtyTracking
+};
+//# sourceMappingURL=index.js.map

package/dist/editor-shared/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor-shared/index.ts"],"sourcesContent":["export { MobileEditorSection } from './mobile-editor-section';\nexport { FloatingSaveBar } from './floating-save-bar';\nexport { useEditorDirtyTracking } from './use-editor-dirty-tracking';\n"],"mappings":"AAAA,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;","names":[]}

package/dist/editor-shared/mobile-editor-section.d.ts

@@ -0,0 +1,13 @@
+interface MobileEditorSectionProps {
+    id: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    iconTint?: string;
+    label: string;
+    summary?: string;
+    defaultExpanded?: boolean;
+    children: React.ReactNode;
+}
+export declare function MobileEditorSection({ id, icon: Icon, iconTint, label, summary, defaultExpanded, children, }: MobileEditorSectionProps): import("react").JSX.Element;
+export {};

package/dist/editor-shared/mobile-editor-section.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Card } from "@withpotter/ui-kit/card";
+function MobileEditorSection({
+  id,
+  icon: Icon,
+  iconTint,
+  label,
+  summary,
+  defaultExpanded = false,
+  children
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  return /* @__PURE__ */ jsx("div", { id, children: /* @__PURE__ */ jsxs(Card, { padding: "none", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        className: "min-h-11 w-full justify-start px-4 active:bg-[var(--mb-elevated)]",
+        onClick: () => setExpanded(!expanded),
+        children: [
+          Icon && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `flex size-8 shrink-0 items-center justify-center rounded-xl ${iconTint ?? ""}`,
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 text-left", children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-lg font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: label
+            }
+          ) }),
+          summary && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-xs truncate max-w-[40%] flex-shrink-0",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: summary
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: `w-4 h-4 flex-shrink-0 transition-transform ${expanded ? "rotate-90" : ""}`,
+              style: { color: "var(--mb-text-tertiary)" }
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-4 py-4",
+        style: {
+          borderTop: "1px solid color-mix(in srgb, var(--mb-border) 60%, transparent)"
+        },
+        children
+      }
+    )
+  ] }) });
+}
+export {
+  MobileEditorSection
+};
+//# sourceMappingURL=mobile-editor-section.js.map

package/dist/editor-shared/mobile-editor-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor-shared/mobile-editor-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ChevronRight } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Card } from '@withpotter/ui-kit/card';\n\ninterface MobileEditorSectionProps {\n  id: string;\n  icon?: React.ComponentType<{ className?: string }>;\n  iconTint?: string;\n  label: string;\n  summary?: string;\n  defaultExpanded?: boolean;\n  children: React.ReactNode;\n}\n\nexport function MobileEditorSection({\n  id,\n  icon: Icon,\n  iconTint,\n  label,\n  summary,\n  defaultExpanded = false,\n  children,\n}: MobileEditorSectionProps) {\n  const [expanded, setExpanded] = useState(defaultExpanded);\n\n  return (\n    <div id={id}>\n      <Card padding=\"none\">\n        {/* Header row */}\n        <Button\n          variant=\"ghost\"\n          className=\"min-h-11 w-full justify-start px-4 active:bg-[var(--mb-elevated)]\"\n          onClick={() => setExpanded(!expanded)}\n        >\n          {Icon && (\n            <div\n              className={`flex size-8 shrink-0 items-center justify-center rounded-xl ${iconTint ?? ''}`}\n            >\n              <Icon className=\"size-4\" />\n            </div>\n          )}\n\n          {/* Label + summary */}\n          <div className=\"flex-1 min-w-0 text-left\">\n            <span\n              className=\"text-lg font-semibold\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {label}\n            </span>\n          </div>\n\n          {summary && (\n            <span\n              className=\"text-xs truncate max-w-[40%] flex-shrink-0\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              {summary}\n            </span>\n          )}\n\n          {/* Chevron */}\n          <ChevronRight\n            className={`w-4 h-4 flex-shrink-0 transition-transform ${expanded ? 'rotate-90' : ''}`}\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          />\n        </Button>\n\n        {/* Expandable content */}\n        {expanded && (\n          <div\n            className=\"px-4 py-4\"\n            style={{\n              borderTop:\n                '1px solid color-mix(in srgb, var(--mb-border) 60%, transparent)',\n            }}\n          >\n            {children}\n          </div>\n        )}\n      </Card>\n    </div>\n  );\n}\n"],"mappings":";AAgCQ,SASM,KATN;AA9BR,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,YAAY;AAYd,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AACF,GAA6B;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,eAAe;AAExD,SACE,oBAAC,SAAI,IACH,+BAAC,QAAK,SAAQ,QAEZ;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS,MAAM,YAAY,CAAC,QAAQ;AAAA,QAEnC;AAAA,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,+DAA+D,YAAY,EAAE;AAAA,cAExF,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,UAC3B;AAAA,UAIF,oBAAC,SAAI,WAAU,4BACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,cAEhC;AAAA;AAAA,UACH,GACF;AAAA,UAEC,WACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,cAEzC;AAAA;AAAA,UACH;AAAA,UAIF;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,8CAA8C,WAAW,cAAc,EAAE;AAAA,cACpF,OAAO,EAAE,OAAO,0BAA0B;AAAA;AAAA,UAC5C;AAAA;AAAA;AAAA,IACF;AAAA,IAGC,YACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,WACE;AAAA,QACJ;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ,GACF;AAEJ;","names":[]}

package/dist/editor-shared/use-editor-dirty-tracking.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Tracks whether editor form state has changed since initial render.
+ * Installs a `beforeunload` guard when dirty to prevent accidental navigation.
+ *
+ * @param dependencies - Array of values to watch for changes (form fields).
+ *   Any change after first render marks the editor as dirty.
+ */
+export declare function useEditorDirtyTracking(dependencies: unknown[]): {
+    isDirty: boolean;
+    setIsDirty: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    resetDirty: () => void;
+};

package/dist/editor-shared/use-editor-dirty-tracking.js

@@ -0,0 +1,26 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+function useEditorDirtyTracking(dependencies) {
+  const initialRef = useRef(false);
+  const [isDirty, setIsDirty] = useState(false);
+  useEffect(() => {
+    if (!initialRef.current) {
+      initialRef.current = true;
+      return;
+    }
+    setIsDirty(true);
+  }, dependencies);
+  useEffect(() => {
+    if (!isDirty) return;
+    const handler = (e) => {
+      e.preventDefault();
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [isDirty]);
+  const resetDirty = useCallback(() => setIsDirty(false), []);
+  return { isDirty, setIsDirty, resetDirty };
+}
+export {
+  useEditorDirtyTracking
+};
+//# sourceMappingURL=use-editor-dirty-tracking.js.map

package/dist/editor-shared/use-editor-dirty-tracking.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/editor-shared/use-editor-dirty-tracking.ts"],"sourcesContent":["import { useState, useEffect, useRef, useCallback } from 'react';\n\n/**\n * Tracks whether editor form state has changed since initial render.\n * Installs a `beforeunload` guard when dirty to prevent accidental navigation.\n *\n * @param dependencies - Array of values to watch for changes (form fields).\n *   Any change after first render marks the editor as dirty.\n */\nexport function useEditorDirtyTracking(dependencies: unknown[]) {\n  const initialRef = useRef(false);\n  const [isDirty, setIsDirty] = useState(false);\n\n  // Mark dirty on any dependency change after initial render\n  useEffect(() => {\n    if (!initialRef.current) {\n      initialRef.current = true;\n      return;\n    }\n    setIsDirty(true);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  // beforeunload guard\n  useEffect(() => {\n    if (!isDirty) return;\n    const handler = (e: BeforeUnloadEvent) => {\n      e.preventDefault();\n    };\n    window.addEventListener('beforeunload', handler);\n    return () => window.removeEventListener('beforeunload', handler);\n  }, [isDirty]);\n\n  const resetDirty = useCallback(() => setIsDirty(false), []);\n\n  return { isDirty, setIsDirty, resetDirty };\n}\n"],"mappings":"AAAA,SAAS,UAAU,WAAW,QAAQ,mBAAmB;AASlD,SAAS,uBAAuB,cAAyB;AAC9D,QAAM,aAAa,OAAO,KAAK;AAC/B,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAG5C,YAAU,MAAM;AACd,QAAI,CAAC,WAAW,SAAS;AACvB,iBAAW,UAAU;AACrB;AAAA,IACF;AACA,eAAW,IAAI;AAAA,EAEjB,GAAG,YAAY;AAGf,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,UAAU,CAAC,MAAyB;AACxC,QAAE,eAAe;AAAA,IACnB;AACA,WAAO,iBAAiB,gBAAgB,OAAO;AAC/C,WAAO,MAAM,OAAO,oBAAoB,gBAAgB,OAAO;AAAA,EACjE,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,YAAY,MAAM,WAAW,KAAK,GAAG,CAAC,CAAC;AAE1D,SAAO,EAAE,SAAS,YAAY,WAAW;AAC3C;","names":[]}

package/dist/editor-shared.d.ts

@@ -0,0 +1 @@
+export * from './editor-shared/index';

package/dist/editor-shared.js

@@ -0,0 +1 @@
+export * from './editor-shared/index.js';

package/dist/feature-toggles-step.d.ts

@@ -0,0 +1,12 @@
+import type { Dispatch, SetStateAction } from 'react';
+import type { ProductBehaviors } from '@withpotter/lib/product-types';
+import type { ContentBehavior } from '@withpotter/lib/template-types';
+import { type BehaviorLabelOverrides } from '@withpotter/components/behaviors/behavior-config-section';
+interface FeatureTogglesStepProps {
+    industryBehaviors: ContentBehavior[];
+    behaviorConfigs: ProductBehaviors;
+    setBehaviorConfigs: Dispatch<SetStateAction<ProductBehaviors>>;
+    behaviorLabelOverrides?: BehaviorLabelOverrides;
+}
+export declare function FeatureTogglesStep({ industryBehaviors, behaviorConfigs, setBehaviorConfigs, behaviorLabelOverrides, }: FeatureTogglesStepProps): import("react").JSX.Element;
+export {};

package/dist/feature-toggles-step.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isBehaviorEnabled } from "@withpotter/lib/product-types";
+import {
+  DEFAULT_BEHAVIOR_DEFINITIONS
+} from "@withpotter/components/behaviors/behavior-config-section";
+import { getAdditiveBehaviors } from "@withpotter/components/product-editor/sections/features-section";
+function FeatureTogglesStep({
+  industryBehaviors,
+  behaviorConfigs,
+  setBehaviorConfigs,
+  behaviorLabelOverrides
+}) {
+  const additiveBehaviors = getAdditiveBehaviors(industryBehaviors);
+  if (additiveBehaviors.length === 0) {
+    return /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-tertiary)]", children: "All capabilities are already included with your business type." });
+  }
+  function handleToggle(key) {
+    const currentValue = behaviorConfigs[key];
+    const isEnabled = isBehaviorEnabled(
+      currentValue
+    );
+    if (isEnabled) {
+      setBehaviorConfigs((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    } else {
+      setBehaviorConfigs((prev) => ({
+        ...prev,
+        [key]: { enabled: true }
+      }));
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] mb-4", children: "Enable additional capabilities for this item." }),
+    additiveBehaviors.map((key) => {
+      const def = DEFAULT_BEHAVIOR_DEFINITIONS.find((d) => d.key === key);
+      if (!def) return null;
+      const isEnabled = isBehaviorEnabled(
+        behaviorConfigs[key]
+      );
+      const label = behaviorLabelOverrides?.[key]?.label || def.label;
+      const subtitle = behaviorLabelOverrides?.[key]?.subtitle || def.subtitle;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `border rounded-md transition-colors ${isEnabled ? "border-brand-500/30 bg-[var(--accent-secondary)]/5" : "border-[var(--border-default)]"}`,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "switch",
+                "aria-checked": isEnabled,
+                onClick: () => handleToggle(key),
+                className: `relative inline-flex h-5 w-9 items-center rounded-full transition-colors flex-shrink-0 ${isEnabled ? "bg-brand-500" : "bg-[var(--bg-muted)]"}`,
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `inline-block h-3.5 w-3.5 transform rounded-full bg-[var(--bg-base)] transition-transform ${isEnabled ? "translate-x-4" : "translate-x-0.5"}`
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-3 flex-1 min-w-0 text-left",
+                onClick: () => handleToggle(key),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `flex-shrink-0 ${isEnabled ? "text-brand-500" : "text-[var(--text-muted)]"}`,
+                      children: def.icon
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: `text-sm font-medium ${isEnabled ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"}`,
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] truncate", children: subtitle })
+                  ] })
+                ]
+              }
+            )
+          ] })
+        },
+        key
+      );
+    })
+  ] });
+}
+export {
+  FeatureTogglesStep
+};
+//# sourceMappingURL=feature-toggles-step.js.map

package/dist/feature-toggles-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feature-toggles-step.tsx"],"sourcesContent":["'use client';\n\nimport type { Dispatch, SetStateAction } from 'react';\nimport type { ProductBehaviors, BehaviorConfig } from '@withpotter/lib/product-types';\nimport { isBehaviorEnabled } from '@withpotter/lib/product-types';\nimport type { ContentBehavior } from '@withpotter/lib/template-types';\nimport {\n  DEFAULT_BEHAVIOR_DEFINITIONS,\n  type BehaviorKey,\n  type BehaviorLabelOverrides,\n} from '@withpotter/components/behaviors/behavior-config-section';\nimport { getAdditiveBehaviors } from '@withpotter/components/product-editor/sections/features-section';\n\ninterface FeatureTogglesStepProps {\n  industryBehaviors: ContentBehavior[];\n  behaviorConfigs: ProductBehaviors;\n  setBehaviorConfigs: Dispatch<SetStateAction<ProductBehaviors>>;\n  behaviorLabelOverrides?: BehaviorLabelOverrides;\n}\n\nexport function FeatureTogglesStep({\n  industryBehaviors,\n  behaviorConfigs,\n  setBehaviorConfigs,\n  behaviorLabelOverrides,\n}: FeatureTogglesStepProps) {\n  const additiveBehaviors = getAdditiveBehaviors(industryBehaviors);\n\n  if (additiveBehaviors.length === 0) {\n    return (\n      <p className=\"text-sm text-[var(--text-tertiary)]\">\n        All capabilities are already included with your business type.\n      </p>\n    );\n  }\n\n  function handleToggle(key: BehaviorKey) {\n    const currentValue = behaviorConfigs[key];\n    const isEnabled = isBehaviorEnabled(\n      currentValue as boolean | BehaviorConfig | undefined,\n    );\n\n    if (isEnabled) {\n      setBehaviorConfigs((prev) => {\n        const next = { ...prev };\n        delete next[key];\n        return next;\n      });\n    } else {\n      setBehaviorConfigs((prev) => ({\n        ...prev,\n        [key]: { enabled: true },\n      }));\n    }\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <p className=\"text-xs text-[var(--text-tertiary)] mb-4\">\n        Enable additional capabilities for this item.\n      </p>\n\n      {additiveBehaviors.map((key) => {\n        const def = DEFAULT_BEHAVIOR_DEFINITIONS.find((d) => d.key === key);\n        if (!def) return null;\n\n        const isEnabled = isBehaviorEnabled(\n          behaviorConfigs[key] as boolean | BehaviorConfig | undefined,\n        );\n\n        const label = behaviorLabelOverrides?.[key]?.label || def.label;\n        const subtitle =\n          behaviorLabelOverrides?.[key]?.subtitle || def.subtitle;\n\n        return (\n          <div\n            key={key}\n            className={`border rounded-md transition-colors ${\n              isEnabled\n                ? 'border-brand-500/30 bg-[var(--accent-secondary)]/5'\n                : 'border-[var(--border-default)]'\n            }`}\n          >\n            <div className=\"flex items-center gap-3 px-4 py-3\">\n              <button\n                type=\"button\"\n                role=\"switch\"\n                aria-checked={isEnabled}\n                onClick={() => handleToggle(key)}\n                className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors flex-shrink-0 ${\n                  isEnabled ? 'bg-brand-500' : 'bg-[var(--bg-muted)]'\n                }`}\n              >\n                <span\n                  className={`inline-block h-3.5 w-3.5 transform rounded-full bg-[var(--bg-base)] transition-transform ${\n                    isEnabled ? 'translate-x-4' : 'translate-x-0.5'\n                  }`}\n                />\n              </button>\n\n              <button\n                type=\"button\"\n                className=\"flex items-center gap-3 flex-1 min-w-0 text-left\"\n                onClick={() => handleToggle(key)}\n              >\n                <span\n                  className={`flex-shrink-0 ${\n                    isEnabled ? 'text-brand-500' : 'text-[var(--text-muted)]'\n                  }`}\n                >\n                  {def.icon}\n                </span>\n                <div className=\"min-w-0\">\n                  <p\n                    className={`text-sm font-medium ${\n                      isEnabled\n                        ? 'text-[var(--text-primary)]'\n                        : 'text-[var(--text-secondary)]'\n                    }`}\n                  >\n                    {label}\n                  </p>\n                  <p className=\"text-xs text-[var(--text-tertiary)] truncate\">\n                    {subtitle}\n                  </p>\n                </div>\n              </button>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA8BM,cAkFU,YAlFV;AA1BN,SAAS,yBAAyB;AAElC;AAAA,EACE;AAAA,OAGK;AACP,SAAS,4BAA4B;AAS9B,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,oBAAoB,qBAAqB,iBAAiB;AAEhE,MAAI,kBAAkB,WAAW,GAAG;AAClC,WACE,oBAAC,OAAE,WAAU,uCAAsC,4EAEnD;AAAA,EAEJ;AAEA,WAAS,aAAa,KAAkB;AACtC,UAAM,eAAe,gBAAgB,GAAG;AACxC,UAAM,YAAY;AAAA,MAChB;AAAA,IACF;AAEA,QAAI,WAAW;AACb,yBAAmB,CAAC,SAAS;AAC3B,cAAM,OAAO,EAAE,GAAG,KAAK;AACvB,eAAO,KAAK,GAAG;AACf,eAAO;AAAA,MACT,CAAC;AAAA,IACH,OAAO;AACL,yBAAmB,CAAC,UAAU;AAAA,QAC5B,GAAG;AAAA,QACH,CAAC,GAAG,GAAG,EAAE,SAAS,KAAK;AAAA,MACzB,EAAE;AAAA,IACJ;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,OAAE,WAAU,4CAA2C,2DAExD;AAAA,IAEC,kBAAkB,IAAI,CAAC,QAAQ;AAC9B,YAAM,MAAM,6BAA6B,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAClE,UAAI,CAAC,IAAK,QAAO;AAEjB,YAAM,YAAY;AAAA,QAChB,gBAAgB,GAAG;AAAA,MACrB;AAEA,YAAM,QAAQ,yBAAyB,GAAG,GAAG,SAAS,IAAI;AAC1D,YAAM,WACJ,yBAAyB,GAAG,GAAG,YAAY,IAAI;AAEjD,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,uCACT,YACI,uDACA,gCACN;AAAA,UAEA,+BAAC,SAAI,WAAU,qCACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,MAAK;AAAA,gBACL,gBAAc;AAAA,gBACd,SAAS,MAAM,aAAa,GAAG;AAAA,gBAC/B,WAAW,0FACT,YAAY,iBAAiB,sBAC/B;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAW,4FACT,YAAY,kBAAkB,iBAChC;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,MAAM,aAAa,GAAG;AAAA,gBAE/B;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAW,iBACT,YAAY,mBAAmB,0BACjC;AAAA,sBAEC,cAAI;AAAA;AAAA,kBACP;AAAA,kBACA,qBAAC,SAAI,WAAU,WACb;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAW,uBACT,YACI,+BACA,8BACN;AAAA,wBAEC;AAAA;AAAA,oBACH;AAAA,oBACA,oBAAC,OAAE,WAAU,gDACV,oBACH;AAAA,qBACF;AAAA;AAAA;AAAA,YACF;AAAA,aACF;AAAA;AAAA,QAnDK;AAAA,MAoDP;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":[]}

package/dist/features/booking-editor.d.ts

@@ -0,0 +1,6 @@
+import { type UseBookingFormArgs } from './use-booking-form';
+export declare function BookingEditor(props: UseBookingFormArgs & {
+    entityLabel: string;
+    bookingLabel: string;
+    onSavingChange?: (saving: boolean) => void;
+}): import("react").JSX.Element;