@withpotter/components 0.13.0-next.101

package/dist/take-payment.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { formatOrderNumber } from "@withpotter/lib/order-config";
+import { Banknote, ArrowLeftRight, Loader2 } from "lucide-react";
+import { Button, useConfirm } from "@withpotter/ui-kit";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { ordersApi } from "@withpotter/lib/api/orders";
+import { useAuth } from "@withpotter/lib/auth-context";
+function TakePayment({
+  orderId,
+  orderNumber,
+  amountLabel,
+  onRecorded
+}) {
+  const { tenant } = useAuth();
+  const { toast } = useToast();
+  const confirm = useConfirm();
+  const [saving, setSaving] = useState(null);
+  const record = async (channel) => {
+    if (!tenant?.slug) return;
+    const how = channel === "cash" ? "cash" : "a transfer";
+    const ok = await confirm({
+      title: `Record ${amountLabel} as paid?`,
+      description: `This marks ${orderNumber ? `order ${formatOrderNumber(orderNumber)}` : "this order"} paid by ${how}. It goes into today's takings and sends the customer their receipt.`,
+      confirmLabel: "Record payment"
+    });
+    if (!ok) return;
+    setSaving(channel);
+    try {
+      await ordersApi.recordInPersonPayment(tenant.slug, orderId, channel);
+      toast({
+        title: "Payment recorded",
+        description: `${amountLabel} taken by ${how}.`
+      });
+      onRecorded?.();
+    } catch (err) {
+      toast({
+        title: "Could not record the payment",
+        description: err instanceof Error ? err.message : "Check your connection and try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setSaving(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: () => record("cash"),
+        disabled: saving !== null,
+        icon: saving === "cash" ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Banknote, {}),
+        children: "Paid cash"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: () => record("bank_transfer"),
+        disabled: saving !== null,
+        icon: saving === "bank_transfer" ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(ArrowLeftRight, {}),
+        children: "Paid by transfer"
+      }
+    )
+  ] });
+}
+export {
+  TakePayment
+};
+//# sourceMappingURL=take-payment.js.map

package/dist/take-payment.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/take-payment.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { formatOrderNumber } from '@withpotter/lib/order-config';\nimport { Banknote, ArrowLeftRight, Loader2 } from 'lucide-react';\nimport { Button, useConfirm } from '@withpotter/ui-kit';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { ordersApi } from '@withpotter/lib/api/orders';\nimport { useAuth } from '@withpotter/lib/auth-context';\n\ninterface TakePaymentProps {\n  orderId: string;\n  orderNumber?: string;\n  amountLabel: string;\n  /** Refresh the record once the money is recorded. */\n  onRecorded?: () => void;\n}\n\n/**\n * Take the money, at the counter, at the moment it changes hands.\n *\n * A record could be settled from a desk afterwards, but not from the phone in\n * the merchant's hand while the customer is standing there — so cash sales were\n * reconciled from memory at the end of the day, if at all.\n *\n * Confirmed before it writes, because this is the one action here that moves\n * money and cannot be undone from this screen. The API refuses a second\n * successful payment on the same order, so a mis-tap cannot double the day's\n * takings, but a merchant should still be asked.\n */\nexport function TakePayment({\n  orderId,\n  orderNumber,\n  amountLabel,\n  onRecorded,\n}: TakePaymentProps) {\n  const { tenant } = useAuth();\n  const { toast } = useToast();\n  const confirm = useConfirm();\n  const [saving, setSaving] = useState<'cash' | 'bank_transfer' | null>(null);\n\n  const record = async (channel: 'cash' | 'bank_transfer') => {\n    if (!tenant?.slug) return;\n    const how = channel === 'cash' ? 'cash' : 'a transfer';\n    const ok = await confirm({\n      title: `Record ${amountLabel} as paid?`,\n      description: `This marks ${orderNumber ? `order ${formatOrderNumber(orderNumber)}` : 'this order'} paid by ${how}. It goes into today's takings and sends the customer their receipt.`,\n      confirmLabel: 'Record payment',\n    });\n    if (!ok) return;\n\n    setSaving(channel);\n    try {\n      await ordersApi.recordInPersonPayment(tenant.slug, orderId, channel);\n      toast({\n        title: 'Payment recorded',\n        description: `${amountLabel} taken by ${how}.`,\n      });\n      onRecorded?.();\n    } catch (err) {\n      toast({\n        title: 'Could not record the payment',\n        description:\n          err instanceof Error\n            ? err.message\n            : 'Check your connection and try again.',\n        variant: 'destructive',\n      });\n    } finally {\n      setSaving(null);\n    }\n  };\n\n  return (\n    <div className=\"flex flex-wrap items-center gap-2\">\n      <Button\n        onClick={() => record('cash')}\n        disabled={saving !== null}\n        icon={\n          saving === 'cash' ? (\n            <Loader2 className=\"animate-spin\" />\n          ) : (\n            <Banknote />\n          )\n        }\n      >\n        Paid cash\n      </Button>\n      <Button\n        variant=\"secondary\"\n        onClick={() => record('bank_transfer')}\n        disabled={saving !== null}\n        icon={\n          saving === 'bank_transfer' ? (\n            <Loader2 className=\"animate-spin\" />\n          ) : (\n            <ArrowLeftRight />\n          )\n        }\n      >\n        Paid by transfer\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";AA0EI,SAMQ,KANR;AAxEJ,SAAS,gBAAgB;AACzB,SAAS,yBAAyB;AAClC,SAAS,UAAU,gBAAgB,eAAe;AAClD,SAAS,QAAQ,kBAAkB;AACnC,SAAS,gBAAgB;AACzB,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AAsBjB,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,EAAE,OAAO,IAAI,QAAQ;AAC3B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,UAAU,WAAW;AAC3B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0C,IAAI;AAE1E,QAAM,SAAS,OAAO,YAAsC;AAC1D,QAAI,CAAC,QAAQ,KAAM;AACnB,UAAM,MAAM,YAAY,SAAS,SAAS;AAC1C,UAAM,KAAK,MAAM,QAAQ;AAAA,MACvB,OAAO,UAAU,WAAW;AAAA,MAC5B,aAAa,cAAc,cAAc,SAAS,kBAAkB,WAAW,CAAC,KAAK,YAAY,YAAY,GAAG;AAAA,MAChH,cAAc;AAAA,IAChB,CAAC;AACD,QAAI,CAAC,GAAI;AAET,cAAU,OAAO;AACjB,QAAI;AACF,YAAM,UAAU,sBAAsB,OAAO,MAAM,SAAS,OAAO;AACnE,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,aAAa,GAAG,WAAW,aAAa,GAAG;AAAA,MAC7C,CAAC;AACD,mBAAa;AAAA,IACf,SAAS,KAAK;AACZ,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,aACE,eAAe,QACX,IAAI,UACJ;AAAA,QACN,SAAS;AAAA,MACX,CAAC;AAAA,IACH,UAAE;AACA,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,qCACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,OAAO,MAAM;AAAA,QAC5B,UAAU,WAAW;AAAA,QACrB,MACE,WAAW,SACT,oBAAC,WAAQ,WAAU,gBAAe,IAElC,oBAAC,YAAS;AAAA,QAGf;AAAA;AAAA,IAED;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM,OAAO,eAAe;AAAA,QACrC,UAAU,WAAW;AAAA,QACrB,MACE,WAAW,kBACT,oBAAC,WAAQ,WAAU,gBAAe,IAElC,oBAAC,kBAAe;AAAA,QAGrB;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/template-editor/canvas-banner.d.ts

@@ -0,0 +1,34 @@
+interface CanvasBannerProps {
+    /** Show the banner when the merchant has unpublished drafts. */
+    visible: boolean;
+    /** Public storefront URL to open in a new tab. */
+    liveUrl?: string;
+    /** Brief "Up to date" pulse after a successful publish; auto-hides upstream. */
+    variant?: 'previewing-draft' | 'up-to-date' | 'previewing-template';
+    /**
+     * When variant is `previewing-template`, the human-readable name of the
+     * template being previewed (or undefined for a generic message).
+     */
+    templateLabel?: string;
+    /**
+     * When variant is `previewing-template`, invoked when the merchant clicks
+     * “Exit preview”. Caller is responsible for stripping the query param.
+     */
+    onExitPreview?: () => void;
+}
+/**
+ * Persistent banner overlaid on the preview iframe, pinned bottom-centre.
+ *
+ * It used to sit top-centre, where it competed with the editor's own chrome
+ * for the one corner you look at when you want out. Draft state is ambient
+ * information — true for as long as it is true, acted on rarely — so it
+ * belongs at the bottom edge with the other status, not in the path of the
+ * controls.
+ *
+ * Two variants:
+ *  - `previewing-draft` (default): tells the merchant they're looking at
+ *    unpublished work and offers a quick jump to the live site.
+ *  - `up-to-date`: brief green confirmation right after a publish.
+ */
+export declare function CanvasBanner({ visible, liveUrl, variant, templateLabel, onExitPreview, }: CanvasBannerProps): import("react").JSX.Element | null;
+export {};

package/dist/template-editor/canvas-banner.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Eye, EyeOff, ExternalLink } from "lucide-react";
+function CanvasBanner({
+  visible,
+  liveUrl,
+  variant = "previewing-draft",
+  templateLabel,
+  onExitPreview
+}) {
+  if (!visible) return null;
+  if (variant === "up-to-date") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        className: "pointer-events-none absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full border border-[var(--success)] bg-[var(--success)] px-3 py-2 text-sm font-medium text-[var(--success-ink)] shadow-md",
+        children: "Up to date"
+      }
+    );
+  }
+  if (variant === "previewing-template") {
+    return /* @__PURE__ */ jsx(PreviewingTemplateBanner, { templateLabel, onExitPreview });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border border-[var(--warning)] bg-[var(--warning)] px-4 py-2 text-sm font-medium text-[var(--warning-ink)] shadow-md",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: "Previewing a draft, not the live site" }),
+        liveUrl ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: liveUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1 whitespace-nowrap border-l border-[var(--warning-ink)]/30 pl-3 font-semibold underline-offset-2 hover:underline",
+            children: [
+              "View live site",
+              /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": true })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function PreviewingTemplateBanner({
+  templateLabel,
+  onExitPreview
+}) {
+  const [hidden, setHidden] = useState(false);
+  if (hidden) {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setHidden(false),
+        "aria-label": "Show preview banner",
+        title: "Show preview banner",
+        className: "absolute left-1/2 top-3 z-10 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-sky-500 bg-sky-400/90 px-3 py-1 text-xs font-medium text-sky-950 shadow-md ring-1 ring-sky-900/10 hover:bg-sky-400",
+        children: [
+          /* @__PURE__ */ jsx(Eye, { className: "size-[13px]", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { children: "Preview" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "absolute left-1/2 top-3 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border border-sky-500 bg-sky-400 px-4 py-2 text-sm font-medium text-sky-950 shadow-md ring-1 ring-sky-900/10",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "whitespace-nowrap", children: [
+          "Previewing template",
+          templateLabel ? `: ${templateLabel}` : "",
+          " \u2014 not your storefront"
+        ] }),
+        onExitPreview ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onExitPreview,
+            className: "inline-flex items-center gap-1 whitespace-nowrap border-l border-sky-900/30 pl-3 font-semibold underline-offset-2 hover:underline",
+            children: "Exit preview"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setHidden(true),
+            "aria-label": "Hide preview banner",
+            title: "Hide preview banner",
+            className: "inline-flex items-center justify-center rounded-full border-l border-sky-900/30 pl-2 text-sky-950/80 hover:text-sky-950",
+            children: /* @__PURE__ */ jsx(EyeOff, { className: "size-4", "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  CanvasBanner
+};
+//# sourceMappingURL=canvas-banner.js.map

package/dist/template-editor/canvas-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/template-editor/canvas-banner.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Eye, EyeOff, ExternalLink } from 'lucide-react';\n\ninterface CanvasBannerProps {\n  /** Show the banner when the merchant has unpublished drafts. */\n  visible: boolean;\n  /** Public storefront URL to open in a new tab. */\n  liveUrl?: string;\n  /** Brief \"Up to date\" pulse after a successful publish; auto-hides upstream. */\n  variant?: 'previewing-draft' | 'up-to-date' | 'previewing-template';\n  /**\n   * When variant is `previewing-template`, the human-readable name of the\n   * template being previewed (or undefined for a generic message).\n   */\n  templateLabel?: string;\n  /**\n   * When variant is `previewing-template`, invoked when the merchant clicks\n   * “Exit preview”. Caller is responsible for stripping the query param.\n   */\n  onExitPreview?: () => void;\n}\n\n/**\n * Persistent banner overlaid on the preview iframe, pinned bottom-centre.\n *\n * It used to sit top-centre, where it competed with the editor's own chrome\n * for the one corner you look at when you want out. Draft state is ambient\n * information — true for as long as it is true, acted on rarely — so it\n * belongs at the bottom edge with the other status, not in the path of the\n * controls.\n *\n * Two variants:\n *  - `previewing-draft` (default): tells the merchant they're looking at\n *    unpublished work and offers a quick jump to the live site.\n *  - `up-to-date`: brief green confirmation right after a publish.\n */\nexport function CanvasBanner({\n  visible,\n  liveUrl,\n  variant = 'previewing-draft',\n  templateLabel,\n  onExitPreview,\n}: CanvasBannerProps) {\n  if (!visible) return null;\n\n  if (variant === 'up-to-date') {\n    return (\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        className=\"pointer-events-none absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full border border-[var(--success)] bg-[var(--success)] px-3 py-2 text-sm font-medium text-[var(--success-ink)] shadow-md\"\n      >\n        Up to date\n      </div>\n    );\n  }\n\n  if (variant === 'previewing-template') {\n    return <PreviewingTemplateBanner templateLabel={templateLabel} onExitPreview={onExitPreview} />;\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className=\"absolute bottom-3 left-1/2 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border border-[var(--warning)] bg-[var(--warning)] px-4 py-2 text-sm font-medium text-[var(--warning-ink)] shadow-md\"\n    >\n      <span className=\"whitespace-nowrap\">\n        Previewing a draft, not the live site\n      </span>\n      {liveUrl ? (\n        <a\n          href={liveUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"inline-flex items-center gap-1 whitespace-nowrap border-l border-[var(--warning-ink)]/30 pl-3 font-semibold underline-offset-2 hover:underline\"\n        >\n          View live site\n          <ExternalLink aria-hidden />\n        </a>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Sky-toned banner shown when the editor is previewing an arbitrary template\n * via `?previewTemplate=<url>` rather than the merchant's own storefront.\n *\n * Includes a hide/show toggle so the merchant can review the template without\n * the banner overlapping content; collapses to a tiny eye pill anchored in the\n * same position. The \"Exit preview\" action remains reachable in both states.\n */\nfunction PreviewingTemplateBanner({\n  templateLabel,\n  onExitPreview,\n}: {\n  templateLabel?: string;\n  onExitPreview?: () => void;\n}) {\n  const [hidden, setHidden] = useState(false);\n\n  if (hidden) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setHidden(false)}\n        aria-label=\"Show preview banner\"\n        title=\"Show preview banner\"\n        className=\"absolute left-1/2 top-3 z-10 inline-flex -translate-x-1/2 items-center gap-2 rounded-full border border-sky-500 bg-sky-400/90 px-3 py-1 text-xs font-medium text-sky-950 shadow-md ring-1 ring-sky-900/10 hover:bg-sky-400\"\n      >\n        <Eye className=\"size-[13px]\" aria-hidden />\n        <span>Preview</span>\n      </button>\n    );\n  }\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className=\"absolute left-1/2 top-3 z-10 flex -translate-x-1/2 items-center gap-3 rounded-full border border-sky-500 bg-sky-400 px-4 py-2 text-sm font-medium text-sky-950 shadow-md ring-1 ring-sky-900/10\"\n    >\n      <span className=\"whitespace-nowrap\">\n        Previewing template{templateLabel ? `: ${templateLabel}` : ''} — not your storefront\n      </span>\n      {onExitPreview ? (\n        <button\n          type=\"button\"\n          onClick={onExitPreview}\n          className=\"inline-flex items-center gap-1 whitespace-nowrap border-l border-sky-900/30 pl-3 font-semibold underline-offset-2 hover:underline\"\n        >\n          Exit preview\n        </button>\n      ) : null}\n      <button\n        type=\"button\"\n        onClick={() => setHidden(true)}\n        aria-label=\"Hide preview banner\"\n        title=\"Hide preview banner\"\n        className=\"inline-flex items-center justify-center rounded-full border-l border-sky-900/30 pl-2 text-sky-950/80 hover:text-sky-950\"\n      >\n        <EyeOff className=\"size-4\" aria-hidden />\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AAiDM,cAwBE,YAxBF;AA/CN,SAAS,gBAAgB;AACzB,SAAS,KAAK,QAAQ,oBAAoB;AAmCnC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAsB;AACpB,MAAI,CAAC,QAAS,QAAO;AAErB,MAAI,YAAY,cAAc;AAC5B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAU;AAAA,QACV,WAAU;AAAA,QACX;AAAA;AAAA,IAED;AAAA,EAEJ;AAEA,MAAI,YAAY,uBAAuB;AACrC,WAAO,oBAAC,4BAAyB,eAA8B,eAA8B;AAAA,EAC/F;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,4BAAC,UAAK,WAAU,qBAAoB,mDAEpC;AAAA,QACC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,WAAU;AAAA,YACX;AAAA;AAAA,cAEC,oBAAC,gBAAa,eAAW,MAAC;AAAA;AAAA;AAAA,QAC5B,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;AAUA,SAAS,yBAAyB;AAAA,EAChC;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,MAAI,QAAQ;AACV,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,UAAU,KAAK;AAAA,QAC9B,cAAW;AAAA,QACX,OAAM;AAAA,QACN,WAAU;AAAA,QAEV;AAAA,8BAAC,OAAI,WAAU,eAAc,eAAW,MAAC;AAAA,UACzC,oBAAC,UAAK,qBAAO;AAAA;AAAA;AAAA,IACf;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,UAAK,WAAU,qBAAoB;AAAA;AAAA,UACd,gBAAgB,KAAK,aAAa,KAAK;AAAA,UAAG;AAAA,WAChE;AAAA,QACC,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACX;AAAA;AAAA,QAED,IACE;AAAA,QACJ;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,UAAU,IAAI;AAAA,YAC7B,cAAW;AAAA,YACX,OAAM;AAAA,YACN,WAAU;AAAA,YAEV,8BAAC,UAAO,WAAU,UAAS,eAAW,MAAC;AAAA;AAAA,QACzC;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/template-editor/copy-preview-link-button.d.ts

@@ -0,0 +1,17 @@
+interface CopyPreviewLinkButtonProps {
+    tenantSlug: string;
+    /** Final URL is `${storefrontOrigin}/?pb_preview=…&pb_preview_token=…`. */
+    storefrontOrigin: string;
+    className?: string;
+    /**
+     * Override the default 'saved' kind. The merchant-facing label for the
+     * current draft is "saved"; `draft` is reserved for the editor iframe.
+     */
+    kind?: 'saved' | 'draft';
+}
+/**
+ * "Copy preview link" header action — mints a signed token via the api,
+ * composes the sharable URL, and writes it to the clipboard.
+ */
+export declare function CopyPreviewLinkButton({ tenantSlug, storefrontOrigin, className, kind, }: CopyPreviewLinkButtonProps): import("react").JSX.Element;
+export {};

package/dist/template-editor/copy-preview-link-button.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Link as LinkIcon, Loader2 } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { templateSettingsApi } from "@withpotter/lib/api/template-settings";
+function CopyPreviewLinkButton({
+  tenantSlug,
+  storefrontOrigin,
+  className,
+  kind = "saved"
+}) {
+  const { toast } = useToast();
+  const [busy, setBusy] = useState(false);
+  const handleClick = async () => {
+    setBusy(true);
+    try {
+      const { token } = await templateSettingsApi.mintPreviewToken(tenantSlug, {
+        kind
+      });
+      const url = `${storefrontOrigin.replace(/\/+$/, "")}/?pb_preview=${kind}&pb_preview_token=${encodeURIComponent(token)}`;
+      await navigator.clipboard.writeText(url);
+      toast({
+        title: "Preview link copied",
+        description: "Anyone with this link can see your saved changes for 7 days."
+      });
+    } catch (err) {
+      toast({
+        title: "Could not copy preview link",
+        description: err instanceof Error ? err.message : "Try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "secondary",
+      size: "sm",
+      onClick: handleClick,
+      disabled: busy,
+      className,
+      children: [
+        busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }) : /* @__PURE__ */ jsx(LinkIcon, { className: "size-4", "aria-hidden": true }),
+        "Copy preview link"
+      ]
+    }
+  );
+}
+export {
+  CopyPreviewLinkButton
+};
+//# sourceMappingURL=copy-preview-link-button.js.map

package/dist/template-editor/copy-preview-link-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/template-editor/copy-preview-link-button.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Link as LinkIcon, Loader2 } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { templateSettingsApi } from '@withpotter/lib/api/template-settings';\n\ninterface CopyPreviewLinkButtonProps {\n  tenantSlug: string;\n  /** Final URL is `${storefrontOrigin}/?pb_preview=…&pb_preview_token=…`. */\n  storefrontOrigin: string;\n  className?: string;\n  /**\n   * Override the default 'saved' kind. The merchant-facing label for the\n   * current draft is \"saved\"; `draft` is reserved for the editor iframe.\n   */\n  kind?: 'saved' | 'draft';\n}\n\n/**\n * \"Copy preview link\" header action — mints a signed token via the api,\n * composes the sharable URL, and writes it to the clipboard.\n */\nexport function CopyPreviewLinkButton({\n  tenantSlug,\n  storefrontOrigin,\n  className,\n  kind = 'saved',\n}: CopyPreviewLinkButtonProps) {\n  const { toast } = useToast();\n  const [busy, setBusy] = useState(false);\n\n  const handleClick = async () => {\n    setBusy(true);\n    try {\n      const { token } = await templateSettingsApi.mintPreviewToken(tenantSlug, {\n        kind,\n      });\n      const url = `${storefrontOrigin.replace(/\\/+$/, '')}/?pb_preview=${kind}&pb_preview_token=${encodeURIComponent(token)}`;\n      await navigator.clipboard.writeText(url);\n      toast({\n        title: 'Preview link copied',\n        description:\n          'Anyone with this link can see your saved changes for 7 days.',\n      });\n    } catch (err) {\n      toast({\n        title: 'Could not copy preview link',\n        description: err instanceof Error ? err.message : 'Try again.',\n        variant: 'destructive',\n      });\n    } finally {\n      setBusy(false);\n    }\n  };\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"secondary\"\n      size=\"sm\"\n      onClick={handleClick}\n      disabled={busy}\n      className={className}\n    >\n      {busy ? (\n        <Loader2 className=\"size-4 animate-spin\" aria-hidden />\n      ) : (\n        <LinkIcon className=\"size-4\" aria-hidden />\n      )}\n      Copy preview link\n    </Button>\n  );\n}\n"],"mappings":";AA0DI,SASI,KATJ;AAxDJ,SAAS,gBAAgB;AACzB,SAAS,QAAQ,UAAU,eAAe;AAC1C,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAkB7B,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAA+B;AAC7B,QAAM,EAAE,MAAM,IAAI,SAAS;AAC3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,cAAc,YAAY;AAC9B,YAAQ,IAAI;AACZ,QAAI;AACF,YAAM,EAAE,MAAM,IAAI,MAAM,oBAAoB,iBAAiB,YAAY;AAAA,QACvE;AAAA,MACF,CAAC;AACD,YAAM,MAAM,GAAG,iBAAiB,QAAQ,QAAQ,EAAE,CAAC,gBAAgB,IAAI,qBAAqB,mBAAmB,KAAK,CAAC;AACrH,YAAM,UAAU,UAAU,UAAU,GAAG;AACvC,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,aACE;AAAA,MACJ,CAAC;AAAA,IACH,SAAS,KAAK;AACZ,YAAM;AAAA,QACJ,OAAO;AAAA,QACP,aAAa,eAAe,QAAQ,IAAI,UAAU;AAAA,QAClD,SAAS;AAAA,MACX,CAAC;AAAA,IACH,UAAE;AACA,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV;AAAA,MAEC;AAAA,eACC,oBAAC,WAAQ,WAAU,uBAAsB,eAAW,MAAC,IAErD,oBAAC,YAAS,WAAU,UAAS,eAAW,MAAC;AAAA,QACzC;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/template-editor/publish-dialog.d.ts

@@ -0,0 +1,20 @@
+interface PublishDialogProps {
+    tenantSlug: string;
+    /** Public storefront URL — used by the success toast's "view live site" hint. */
+    liveUrl?: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Called after a successful publish so the host can refresh its state. */
+    onPublished?: (result: {
+        publishedAt: string;
+        pageIds: string[];
+    }) => void;
+}
+/**
+ * Publish-confirmation dialog per merchant-dashboard#177.
+ *
+ * On open, fetches the server-computed diff and lists the surfaces that
+ * will change. Primary action calls `publish-all` atomically.
+ */
+export declare function PublishDialog({ tenantSlug, liveUrl, open, onOpenChange, onPublished, }: PublishDialogProps): import("react").JSX.Element;
+export {};

package/dist/template-editor/publish-dialog.js

@@ -0,0 +1,223 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Globe2,
+  Loader2,
+  MessageCircle,
+  Share2
+} from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import { Button } from "@withpotter/ui-kit/button";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { completeFlow } from "@withpotter/components/feedback/flow-completion";
+import { templateSettingsApi } from "@withpotter/lib/api/template-settings";
+function PublishDialog({
+  tenantSlug,
+  liveUrl,
+  open,
+  onOpenChange,
+  onPublished
+}) {
+  const { toast } = useToast();
+  const [diff, setDiff] = useState(null);
+  const [publishing, setPublishing] = useState(false);
+  const [published, setPublished] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    templateSettingsApi.getDiff(tenantSlug).then((result) => {
+      if (!cancelled) setDiff(result);
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(
+          err instanceof Error ? err.message : "Failed to load changes"
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, tenantSlug]);
+  const loading = open && !diff && !error && !published;
+  const handleOpenChange = (nextOpen) => {
+    if (nextOpen) {
+      setDiff(null);
+      setError(null);
+    } else {
+      setPublished(false);
+    }
+    onOpenChange(nextOpen);
+  };
+  const handlePublish = async () => {
+    setPublishing(true);
+    setError(null);
+    try {
+      const result = await templateSettingsApi.publishAll(tenantSlug);
+      toast({
+        title: "Published",
+        description: liveUrl ? `View live site: ${liveUrl}` : void 0
+      });
+      completeFlow("site.publish");
+      onPublished?.(result);
+      setPublished(true);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Publish failed. Try again.";
+      setError(message);
+      toast({
+        title: "Publish failed",
+        description: message,
+        variant: "destructive"
+      });
+    } finally {
+      setPublishing(false);
+    }
+  };
+  const changedPages = diff ? Object.entries(diff.pages).filter(([, p]) => p.changed) : [];
+  const appearanceChanged = diff?.appearance.changed ?? false;
+  const nothingToPublish = !!diff && !diff.hasAnyChanges;
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { children: published ? /* @__PURE__ */ jsxs("div", { className: "space-y-4 text-center", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "text-xl", children: "Your site is live" }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto size-4 rounded-full bg-emerald-400 shadow-sm" }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-[18rem] overflow-hidden rounded-3xl border border-[var(--border-default)] bg-[var(--bg-subtle)] shadow-lg", children: liveUrl ? /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: liveUrl,
+        title: "Live site preview",
+        className: "aspect-[9/14] w-full border-0 bg-white"
+      }
+    ) : /* @__PURE__ */ jsx("div", { className: "flex aspect-[9/14] items-center justify-center bg-[var(--bg-muted)]", children: /* @__PURE__ */ jsx(Globe2, { className: "size-10 text-[var(--text-tertiary)]" }) }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        className: "w-full rounded-2xl bg-[var(--text-primary)] py-6 text-base text-[var(--bg-base)] hover:opacity-90",
+        onClick: () => liveUrl && window.open(liveUrl, "_blank", "noopener"),
+        disabled: !liveUrl,
+        icon: /* @__PURE__ */ jsx(Globe2, { className: "size-5" }),
+        children: "Check it out"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-8", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Message someone about your live site",
+          children: /* @__PURE__ */ jsx(MessageCircle, { className: "size-6 text-[var(--text-primary)]" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Share your live site",
+          onClick: () => {
+            if (navigator.share && liveUrl) {
+              void navigator.share({ url: liveUrl });
+            } else if (liveUrl) {
+              void navigator.clipboard?.writeText(liveUrl);
+            }
+          },
+          children: /* @__PURE__ */ jsx(Share2, { className: "size-6 text-[var(--text-primary)]" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        className: "w-full rounded-2xl py-6",
+        onClick: () => onOpenChange(false),
+        children: "Done"
+      }
+    )
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: "Publish changes" }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: "Review what will change before publishing to your live site." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-3 text-sm", children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--text-secondary)]", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { children: "Loading changes\u2026" })
+    ] }) : error ? /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-md border border-red-300 bg-red-50 p-3 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 size-4 shrink-0", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { children: error })
+    ] }) : nothingToPublish ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-[var(--text-secondary)]", children: [
+      /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4", "aria-hidden": true }),
+      /* @__PURE__ */ jsx("span", { children: "No pending changes to publish." })
+    ] }) : /* @__PURE__ */ jsxs("ul", { className: "space-y-2", children: [
+      appearanceChanged ? /* @__PURE__ */ jsxs("li", { className: "rounded-md border border-[var(--border-default)] px-3 py-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--text-primary)]", children: "Appearance" }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-tertiary)]", children: "Theme tokens, fonts, or sections updated." })
+      ] }) : null,
+      changedPages.map(([id, page]) => /* @__PURE__ */ jsxs(
+        "li",
+        {
+          className: "rounded-md border border-[var(--border-default)] px-3 py-2",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--text-primary)]", children: page.title || page.slug }),
+              page.neverPublished ? /* @__PURE__ */ jsx("span", { className: "rounded-full border border-blue-300 px-2 py-0.5 text-3xs font-medium text-blue-700 dark:border-blue-500/30 dark:text-blue-300", children: "New page" }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--text-tertiary)]", children: [
+              page.changedSectionIds.length > 0 ? `${page.changedSectionIds.length} section${page.changedSectionIds.length === 1 ? "" : "s"} changed` : null,
+              page.changedSectionIds.length > 0 && page.seoChanged ? " \u2022 " : null,
+              page.seoChanged ? "SEO updated" : null
+            ] })
+          ]
+        },
+        id
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          onClick: () => onOpenChange(false),
+          disabled: publishing,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          onClick: handlePublish,
+          disabled: loading || publishing || nothingToPublish || !!error,
+          children: publishing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Loader2,
+              {
+                className: "mr-1.5 size-4 animate-spin",
+                "aria-hidden": true
+              }
+            ),
+            "Publishing\u2026"
+          ] }) : "Publish all changes"
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  PublishDialog
+};
+//# sourceMappingURL=publish-dialog.js.map

package/dist/template-editor/publish-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/template-editor/publish-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport {\n  AlertCircle,\n  CheckCircle2,\n  Globe2,\n  Loader2,\n  MessageCircle,\n  Share2,\n} from 'lucide-react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { completeFlow } from '@withpotter/components/feedback/flow-completion';\nimport { templateSettingsApi } from '@withpotter/lib/api/template-settings';\nimport type { TemplateSettingsDiff } from '@withpotter/lib/api/types';\n\ninterface PublishDialogProps {\n  tenantSlug: string;\n  /** Public storefront URL — used by the success toast's \"view live site\" hint. */\n  liveUrl?: string;\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Called after a successful publish so the host can refresh its state. */\n  onPublished?: (result: { publishedAt: string; pageIds: string[] }) => void;\n}\n\n/**\n * Publish-confirmation dialog per merchant-dashboard#177.\n *\n * On open, fetches the server-computed diff and lists the surfaces that\n * will change. Primary action calls `publish-all` atomically.\n */\nexport function PublishDialog({\n  tenantSlug,\n  liveUrl,\n  open,\n  onOpenChange,\n  onPublished,\n}: PublishDialogProps) {\n  const { toast } = useToast();\n  const [diff, setDiff] = useState<TemplateSettingsDiff | null>(null);\n  const [publishing, setPublishing] = useState(false);\n  const [published, setPublished] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    let cancelled = false;\n    templateSettingsApi\n      .getDiff(tenantSlug)\n      .then((result) => {\n        if (!cancelled) setDiff(result);\n      })\n      .catch((err: unknown) => {\n        if (!cancelled) {\n          setError(\n            err instanceof Error ? err.message : 'Failed to load changes',\n          );\n        }\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [open, tenantSlug]);\n\n  const loading = open && !diff && !error && !published;\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (nextOpen) {\n      setDiff(null);\n      setError(null);\n    } else {\n      setPublished(false);\n    }\n    onOpenChange(nextOpen);\n  };\n\n  const handlePublish = async () => {\n    setPublishing(true);\n    setError(null);\n    try {\n      const result = await templateSettingsApi.publishAll(tenantSlug);\n      toast({\n        title: 'Published',\n        description: liveUrl ? `View live site: ${liveUrl}` : undefined,\n      });\n      // A flow with an ending somebody notices. The shell asks how it went.\n      completeFlow('site.publish');\n      onPublished?.(result);\n      setPublished(true);\n    } catch (err) {\n      const message =\n        err instanceof Error ? err.message : 'Publish failed. Try again.';\n      setError(message);\n      toast({\n        title: 'Publish failed',\n        description: message,\n        variant: 'destructive',\n      });\n    } finally {\n      setPublishing(false);\n    }\n  };\n\n  const changedPages = diff\n    ? Object.entries(diff.pages).filter(([, p]) => p.changed)\n    : [];\n  const appearanceChanged = diff?.appearance.changed ?? false;\n  const nothingToPublish = !!diff && !diff.hasAnyChanges;\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogContent>\n        {published ? (\n          <div className=\"space-y-4 text-center\">\n            <DialogTitle className=\"text-xl\">Your site is live</DialogTitle>\n            <div className=\"mx-auto size-4 rounded-full bg-emerald-400 shadow-sm\" />\n            <div className=\"mx-auto max-w-[18rem] overflow-hidden rounded-3xl border border-[var(--border-default)] bg-[var(--bg-subtle)] shadow-lg\">\n              {liveUrl ? (\n                <iframe\n                  src={liveUrl}\n                  title=\"Live site preview\"\n                  className=\"aspect-[9/14] w-full border-0 bg-white\"\n                />\n              ) : (\n                <div className=\"flex aspect-[9/14] items-center justify-center bg-[var(--bg-muted)]\">\n                  <Globe2 className=\"size-10 text-[var(--text-tertiary)]\" />\n                </div>\n              )}\n            </div>\n            <Button\n              type=\"button\"\n              className=\"w-full rounded-2xl bg-[var(--text-primary)] py-6 text-base text-[var(--bg-base)] hover:opacity-90\"\n              onClick={() =>\n                liveUrl && window.open(liveUrl, '_blank', 'noopener')\n              }\n              disabled={!liveUrl}\n              icon={<Globe2 className=\"size-5\" />}\n            >\n              Check it out\n            </Button>\n            <div className=\"flex items-center justify-center gap-8\">\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                aria-label=\"Message someone about your live site\"\n              >\n                <MessageCircle className=\"size-6 text-[var(--text-primary)]\" />\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"ghost\"\n                size=\"icon\"\n                aria-label=\"Share your live site\"\n                onClick={() => {\n                  if (navigator.share && liveUrl) {\n                    void navigator.share({ url: liveUrl });\n                  } else if (liveUrl) {\n                    void navigator.clipboard?.writeText(liveUrl);\n                  }\n                }}\n              >\n                <Share2 className=\"size-6 text-[var(--text-primary)]\" />\n              </Button>\n            </div>\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              className=\"w-full rounded-2xl py-6\"\n              onClick={() => onOpenChange(false)}\n            >\n              Done\n            </Button>\n          </div>\n        ) : (\n          <>\n            <DialogHeader>\n              <DialogTitle>Publish changes</DialogTitle>\n              <DialogDescription>\n                Review what will change before publishing to your live site.\n              </DialogDescription>\n            </DialogHeader>\n\n            <div className=\"space-y-3 text-sm\">\n              {loading ? (\n                <div className=\"flex items-center gap-2 text-[var(--text-secondary)]\">\n                  <Loader2 className=\"size-4 animate-spin\" aria-hidden />\n                  <span>Loading changes…</span>\n                </div>\n              ) : error ? (\n                <div className=\"flex items-start gap-2 rounded-md border border-red-300 bg-red-50 p-3 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-300\">\n                  <AlertCircle className=\"mt-0.5 size-4 shrink-0\" aria-hidden />\n                  <span>{error}</span>\n                </div>\n              ) : nothingToPublish ? (\n                <div className=\"flex items-center gap-2 text-[var(--text-secondary)]\">\n                  <CheckCircle2 className=\"size-4\" aria-hidden />\n                  <span>No pending changes to publish.</span>\n                </div>\n              ) : (\n                <ul className=\"space-y-2\">\n                  {appearanceChanged ? (\n                    <li className=\"rounded-md border border-[var(--border-default)] px-3 py-2\">\n                      <div className=\"font-medium text-[var(--text-primary)]\">\n                        Appearance\n                      </div>\n                      <div className=\"text-xs text-[var(--text-tertiary)]\">\n                        Theme tokens, fonts, or sections updated.\n                      </div>\n                    </li>\n                  ) : null}\n                  {changedPages.map(([id, page]) => (\n                    <li\n                      key={id}\n                      className=\"rounded-md border border-[var(--border-default)] px-3 py-2\"\n                    >\n                      <div className=\"flex items-center justify-between\">\n                        <span className=\"font-medium text-[var(--text-primary)]\">\n                          {page.title || page.slug}\n                        </span>\n                        {page.neverPublished ? (\n                          <span className=\"rounded-full border border-blue-300 px-2 py-0.5 text-3xs font-medium text-blue-700 dark:border-blue-500/30 dark:text-blue-300\">\n                            New page\n                          </span>\n                        ) : null}\n                      </div>\n                      <div className=\"text-xs text-[var(--text-tertiary)]\">\n                        {page.changedSectionIds.length > 0\n                          ? `${page.changedSectionIds.length} section${page.changedSectionIds.length === 1 ? '' : 's'} changed`\n                          : null}\n                        {page.changedSectionIds.length > 0 && page.seoChanged\n                          ? ' • '\n                          : null}\n                        {page.seoChanged ? 'SEO updated' : null}\n                      </div>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n\n            <DialogFooter>\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                onClick={() => onOpenChange(false)}\n                disabled={publishing}\n              >\n                Cancel\n              </Button>\n              <Button\n                type=\"button\"\n                onClick={handlePublish}\n                disabled={loading || publishing || nothingToPublish || !!error}\n              >\n                {publishing ? (\n                  <>\n                    <Loader2\n                      className=\"mr-1.5 size-4 animate-spin\"\n                      aria-hidden\n                    />\n                    Publishing…\n                  </>\n                ) : (\n                  'Publish all changes'\n                )}\n              </Button>\n            </DialogFooter>\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/template-editor/status-pill.d.ts

@@ -0,0 +1,12 @@
+import type { UseTemplateSettingsStatusResult } from '@withpotter/hooks/use-template-settings-status';
+interface StatusPillProps extends UseTemplateSettingsStatusResult {
+    onRetry?: () => void;
+    className?: string;
+}
+/**
+ * Always-visible status pill in the template editor header.
+ * Conveys whether the merchant is looking at unsaved keystrokes,
+ * a persisted draft, the live published copy, or a stuck failure.
+ */
+export declare function StatusPill({ status, label, onRetry, className, }: StatusPillProps): import("react").JSX.Element;
+export {};