@withpotter/components 0.13.0-next.101

package/dist/product-editor/public-link-row.js

@@ -0,0 +1,141 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { generateSlug } from "@withpotter/lib/product-types";
+import { Input } from "@withpotter/ui-kit";
+function PublicLinkRow({
+  slug,
+  slugManuallyEdited,
+  title,
+  tenantSlug,
+  onSlugChange
+}) {
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(slug);
+  const host = tenantSlug ? `${tenantSlug}.example.com/p/` : "yourstore.com/p/";
+  const commitDraft = () => {
+    const cleaned = generateSlug(draft || "");
+    onSlugChange(cleaned, true);
+    setEditing(false);
+  };
+  const generate = () => {
+    const next = title ? generateSlug(title) : "";
+    onSlugChange(next, false);
+    setDraft(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rounded-2xl px-4 py-3",
+      style: {
+        background: "var(--mb-card)",
+        border: "1px solid var(--mb-border)"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-2xs font-medium uppercase tracking-wide mb-0.5",
+              style: { color: "var(--mb-text-tertiary)" },
+              children: "Public link"
+            }
+          ),
+          editing ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-sm truncate",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: host
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                autoFocus: true,
+                type: "text",
+                value: draft,
+                onChange: (e) => setDraft(e.target.value),
+                onBlur: commitDraft,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commitDraft();
+                  if (e.key === "Escape") {
+                    setDraft(slug);
+                    setEditing(false);
+                  }
+                },
+                placeholder: "my-product",
+                className: "flex-1 min-w-0 font-mono",
+                style: {
+                  background: "var(--mb-elevated)",
+                  color: "var(--mb-text)",
+                  border: "1px solid var(--mb-border-strong)"
+                }
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "text-sm truncate font-mono",
+              style: { color: "var(--mb-text-secondary)" },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-text-tertiary)" }, children: host }),
+                /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-text)" }, children: slug || "untitled-product" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: editing ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: commitDraft,
+            className: "px-3 py-2 rounded-full text-xs font-medium",
+            style: {
+              background: "var(--mb-accent)",
+              color: "var(--mb-accent-fg)"
+            },
+            children: "Done"
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          slugManuallyEdited && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: generate,
+              className: "px-3 py-2 rounded-full text-xs font-medium",
+              style: {
+                background: "var(--mb-elevated)",
+                color: "var(--mb-text-secondary)",
+                border: "1px solid var(--mb-border)"
+              },
+              children: "Generate"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setDraft(slug);
+                setEditing(true);
+              },
+              className: "px-3 py-2 rounded-full text-xs font-medium",
+              style: {
+                background: "var(--mb-elevated)",
+                color: "var(--mb-text-secondary)",
+                border: "1px solid var(--mb-border)"
+              },
+              children: "Edit"
+            }
+          )
+        ] }) })
+      ] })
+    }
+  );
+}
+export {
+  PublicLinkRow
+};
+//# sourceMappingURL=public-link-row.js.map

package/dist/product-editor/public-link-row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/public-link-row.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { generateSlug } from '@withpotter/lib/product-types';\nimport { Input } from '@withpotter/ui-kit';\n\nexport function PublicLinkRow({\n  slug,\n  slugManuallyEdited,\n  title,\n  tenantSlug,\n  onSlugChange,\n}: {\n  slug: string;\n  slugManuallyEdited: boolean;\n  title: string;\n  tenantSlug?: string;\n  onSlugChange: (next: string, manual: boolean) => void;\n}) {\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(slug);\n\n  const host = tenantSlug ? `${tenantSlug}.example.com/p/` : 'yourstore.com/p/';\n\n  const commitDraft = () => {\n    const cleaned = generateSlug(draft || '');\n    onSlugChange(cleaned, true);\n    setEditing(false);\n  };\n\n  const generate = () => {\n    const next = title ? generateSlug(title) : '';\n    onSlugChange(next, false);\n    setDraft(next);\n  };\n\n  return (\n    <div\n      className=\"rounded-2xl px-4 py-3\"\n      style={{\n        background: 'var(--mb-card)',\n        border: '1px solid var(--mb-border)',\n      }}\n    >\n      <div className=\"flex items-center justify-between gap-3\">\n        <div className=\"min-w-0 flex-1\">\n          <div\n            className=\"text-2xs font-medium uppercase tracking-wide mb-0.5\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            Public link\n          </div>\n          {editing ? (\n            <div className=\"flex items-center gap-2 mt-1\">\n              <span\n                className=\"text-sm truncate\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                {host}\n              </span>\n              <Input\n                autoFocus\n                type=\"text\"\n                value={draft}\n                onChange={(e) => setDraft(e.target.value)}\n                onBlur={commitDraft}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') commitDraft();\n                  if (e.key === 'Escape') {\n                    setDraft(slug);\n                    setEditing(false);\n                  }\n                }}\n                placeholder=\"my-product\"\n                className=\"flex-1 min-w-0 font-mono\"\n                style={{\n                  background: 'var(--mb-elevated)',\n                  color: 'var(--mb-text)',\n                  border: '1px solid var(--mb-border-strong)',\n                }}\n              />\n            </div>\n          ) : (\n            <div\n              className=\"text-sm truncate font-mono\"\n              style={{ color: 'var(--mb-text-secondary)' }}\n            >\n              <span style={{ color: 'var(--mb-text-tertiary)' }}>{host}</span>\n              <span style={{ color: 'var(--mb-text)' }}>\n                {slug || 'untitled-product'}\n              </span>\n            </div>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2 flex-shrink-0\">\n          {editing ? (\n            <button\n              type=\"button\"\n              onClick={commitDraft}\n              className=\"px-3 py-2 rounded-full text-xs font-medium\"\n              style={{\n                background: 'var(--mb-accent)',\n                color: 'var(--mb-accent-fg)',\n              }}\n            >\n              Done\n            </button>\n          ) : (\n            <>\n              {slugManuallyEdited && (\n                <button\n                  type=\"button\"\n                  onClick={generate}\n                  className=\"px-3 py-2 rounded-full text-xs font-medium\"\n                  style={{\n                    background: 'var(--mb-elevated)',\n                    color: 'var(--mb-text-secondary)',\n                    border: '1px solid var(--mb-border)',\n                  }}\n                >\n                  Generate\n                </button>\n              )}\n              <button\n                type=\"button\"\n                onClick={() => {\n                  setDraft(slug);\n                  setEditing(true);\n                }}\n                className=\"px-3 py-2 rounded-full text-xs font-medium\"\n                style={{\n                  background: 'var(--mb-elevated)',\n                  color: 'var(--mb-text-secondary)',\n                  border: '1px solid var(--mb-border)',\n                }}\n              >\n                Edit\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/save-button.d.ts

@@ -0,0 +1,22 @@
+interface SaveButtonProps {
+    saving: boolean;
+    /** The record exists. Turns the button green before the page moves on. */
+    done: boolean;
+    idleLabel: string;
+    savingLabel: string;
+    doneLabel: string;
+    onClick: () => void;
+    className?: string;
+}
+/**
+ * The editor's primary action, as a three-beat story: press, work, arrive.
+ *
+ * Idle is the ordinary blue button. While the request is in flight a light
+ * sweeps across it and the icon becomes a spinner, so the press is answered at
+ * once and the wait reads as the button working rather than the page stalling.
+ * On success the fill turns green, a check draws itself, and a ring pulses off
+ * the edge — then the caller navigates. The label slot is a fixed width so the
+ * three labels swap without the row around it shifting.
+ */
+export declare function SaveButton({ saving, done, idleLabel, savingLabel, doneLabel, onClick, className, }: SaveButtonProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/save-button.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Save } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { springs } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+function SaveButton({
+  saving,
+  done,
+  idleLabel,
+  savingLabel,
+  doneLabel,
+  onClick,
+  className
+}) {
+  const reduce = useReducedMotion();
+  const phase = done ? "done" : saving ? "saving" : "idle";
+  const label = phase === "done" ? doneLabel : phase === "saving" ? savingLabel : idleLabel;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "relative",
+      animate: phase === "done" && !reduce ? { scale: [1, 1.06, 1] } : { scale: 1 },
+      transition: phase === "done" ? { duration: 0.42, ease: [0.34, 1.56, 0.64, 1] } : { duration: 0.15 },
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: phase === "done" && !reduce && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 rounded-lg border-2 border-[var(--success)]",
+            initial: { opacity: 0.7, scale: 1 },
+            animate: { opacity: 0, scale: 1.45 },
+            transition: { duration: 0.65, ease: "easeOut" }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "primary",
+            "aria-busy": phase === "saving",
+            onClick: () => {
+              if (phase === "idle") onClick();
+            },
+            className: cn(
+              "relative min-w-[8.75rem] overflow-hidden",
+              phase === "done" && "bg-[var(--success)] hover:bg-[var(--success)] focus-visible:ring-[var(--success)]",
+              phase === "saving" && "cursor-progress",
+              className
+            ),
+            children: [
+              phase === "saving" && !reduce && /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-white/35 to-transparent",
+                  initial: { x: "-120%" },
+                  animate: { x: "320%" },
+                  transition: {
+                    duration: 0.9,
+                    ease: "easeInOut",
+                    repeat: Infinity,
+                    repeatDelay: 0.1
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-[13px] items-center justify-center", children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [
+                  phase === "idle" && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute inset-0",
+                      initial: { opacity: 0, scale: 0.6 },
+                      animate: { opacity: 1, scale: 1 },
+                      exit: { opacity: 0, scale: 0.6 },
+                      transition: { duration: 0.15 },
+                      children: /* @__PURE__ */ jsx(Save, {})
+                    },
+                    "save"
+                  ),
+                  phase === "saving" && /* @__PURE__ */ jsx(
+                    motion.svg,
+                    {
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 3,
+                      strokeLinecap: "round",
+                      className: "absolute inset-0",
+                      initial: { opacity: 0, scale: 0.6 },
+                      animate: { opacity: 1, scale: 1, rotate: 360 },
+                      exit: { opacity: 0, scale: 0.6 },
+                      transition: {
+                        opacity: { duration: 0.15 },
+                        scale: { duration: 0.15 },
+                        rotate: reduce ? { duration: 0 } : { duration: 0.7, ease: "linear", repeat: Infinity }
+                      },
+                      children: /* @__PURE__ */ jsx("path", { d: "M12 3a9 9 0 1 0 9 9" })
+                    },
+                    "spin"
+                  ),
+                  phase === "done" && /* @__PURE__ */ jsx(
+                    motion.svg,
+                    {
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 3.5,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "absolute inset-0",
+                      initial: { opacity: 0, scale: 0.4 },
+                      animate: { opacity: 1, scale: 1.25 },
+                      transition: reduce ? { duration: 0 } : springs.bouncy,
+                      children: /* @__PURE__ */ jsx(
+                        motion.path,
+                        {
+                          d: "M5 12.5l4.5 4.5L19 7.5",
+                          initial: { pathLength: reduce ? 1 : 0 },
+                          animate: { pathLength: 1 },
+                          transition: {
+                            duration: reduce ? 0 : 0.32,
+                            delay: reduce ? 0 : 0.08,
+                            ease: "easeOut"
+                          }
+                        }
+                      )
+                    },
+                    "check"
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-[1.25em] items-center overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    initial: reduce ? { opacity: 0 } : { opacity: 0, y: "70%" },
+                    animate: { opacity: 1, y: 0 },
+                    exit: reduce ? { opacity: 0 } : { opacity: 0, y: "-70%" },
+                    transition: { duration: 0.18, ease: "easeOut" },
+                    children: label
+                  },
+                  label
+                ) }) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  SaveButton
+};
+//# sourceMappingURL=save-button.js.map

package/dist/product-editor/save-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/save-button.tsx"],"sourcesContent":["'use client';\n\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { Save } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { springs } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\n\ntype Phase = 'idle' | 'saving' | 'done';\n\ninterface SaveButtonProps {\n  saving: boolean;\n  /** The record exists. Turns the button green before the page moves on. */\n  done: boolean;\n  idleLabel: string;\n  savingLabel: string;\n  doneLabel: string;\n  onClick: () => void;\n  className?: string;\n}\n\n/**\n * The editor's primary action, as a three-beat story: press, work, arrive.\n *\n * Idle is the ordinary blue button. While the request is in flight a light\n * sweeps across it and the icon becomes a spinner, so the press is answered at\n * once and the wait reads as the button working rather than the page stalling.\n * On success the fill turns green, a check draws itself, and a ring pulses off\n * the edge — then the caller navigates. The label slot is a fixed width so the\n * three labels swap without the row around it shifting.\n */\nexport function SaveButton({\n  saving,\n  done,\n  idleLabel,\n  savingLabel,\n  doneLabel,\n  onClick,\n  className,\n}: SaveButtonProps) {\n  const reduce = useReducedMotion();\n  const phase: Phase = done ? 'done' : saving ? 'saving' : 'idle';\n\n  const label =\n    phase === 'done' ? doneLabel : phase === 'saving' ? savingLabel : idleLabel;\n\n  return (\n    <motion.div\n      className=\"relative\"\n      animate={\n        phase === 'done' && !reduce ? { scale: [1, 1.06, 1] } : { scale: 1 }\n      }\n      transition={\n        phase === 'done'\n          ? { duration: 0.42, ease: [0.34, 1.56, 0.64, 1] }\n          : { duration: 0.15 }\n      }\n    >\n      {/* The ring that leaves the button on success. Drawn behind it, so it\n          reads as the button giving off light rather than a second shape. */}\n      <AnimatePresence>\n        {phase === 'done' && !reduce && (\n          <motion.span\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 rounded-lg border-2 border-[var(--success)]\"\n            initial={{ opacity: 0.7, scale: 1 }}\n            animate={{ opacity: 0, scale: 1.45 }}\n            transition={{ duration: 0.65, ease: 'easeOut' }}\n          />\n        )}\n      </AnimatePresence>\n\n      <Button\n        variant=\"primary\"\n        aria-busy={phase === 'saving'}\n        onClick={() => {\n          // Not `disabled`: that dims the button, and the whole point is that\n          // it stays vivid while it works.\n          if (phase === 'idle') onClick();\n        }}\n        className={cn(\n          'relative min-w-[8.75rem] overflow-hidden',\n          phase === 'done' &&\n            'bg-[var(--success)] hover:bg-[var(--success)] focus-visible:ring-[var(--success)]',\n          phase === 'saving' && 'cursor-progress',\n          className,\n        )}\n      >\n        {/* The sweep. A soft highlight crossing left to right, on a loop for\n            as long as the request is out. */}\n        {phase === 'saving' && !reduce && (\n          <motion.span\n            aria-hidden\n            className=\"pointer-events-none absolute inset-y-0 w-1/2 bg-gradient-to-r from-transparent via-white/35 to-transparent\"\n            initial={{ x: '-120%' }}\n            animate={{ x: '320%' }}\n            transition={{\n              duration: 0.9,\n              ease: 'easeInOut',\n              repeat: Infinity,\n              repeatDelay: 0.1,\n            }}\n          />\n        )}\n\n        <span className=\"relative inline-flex items-center gap-2\">\n          <span className=\"relative inline-flex size-[13px] items-center justify-center\">\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              {phase === 'idle' && (\n                <motion.span\n                  key=\"save\"\n                  className=\"absolute inset-0\"\n                  initial={{ opacity: 0, scale: 0.6 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  exit={{ opacity: 0, scale: 0.6 }}\n                  transition={{ duration: 0.15 }}\n                >\n                  <Save />\n                </motion.span>\n              )}\n              {phase === 'saving' && (\n                <motion.svg\n                  key=\"spin\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={3}\n                  strokeLinecap=\"round\"\n                  className=\"absolute inset-0\"\n                  initial={{ opacity: 0, scale: 0.6 }}\n                  animate={{ opacity: 1, scale: 1, rotate: 360 }}\n                  exit={{ opacity: 0, scale: 0.6 }}\n                  transition={{\n                    opacity: { duration: 0.15 },\n                    scale: { duration: 0.15 },\n                    rotate: reduce\n                      ? { duration: 0 }\n                      : { duration: 0.7, ease: 'linear', repeat: Infinity },\n                  }}\n                >\n                  <path d=\"M12 3a9 9 0 1 0 9 9\" />\n                </motion.svg>\n              )}\n              {phase === 'done' && (\n                <motion.svg\n                  key=\"check\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={3.5}\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  className=\"absolute inset-0\"\n                  initial={{ opacity: 0, scale: 0.4 }}\n                  animate={{ opacity: 1, scale: 1.25 }}\n                  transition={reduce ? { duration: 0 } : springs.bouncy}\n                >\n                  <motion.path\n                    d=\"M5 12.5l4.5 4.5L19 7.5\"\n                    initial={{ pathLength: reduce ? 1 : 0 }}\n                    animate={{ pathLength: 1 }}\n                    transition={{\n                      duration: reduce ? 0 : 0.32,\n                      delay: reduce ? 0 : 0.08,\n                      ease: 'easeOut',\n                    }}\n                  />\n                </motion.svg>\n              )}\n            </AnimatePresence>\n          </span>\n\n          <span className=\"relative inline-flex h-[1.25em] items-center overflow-hidden\">\n            <AnimatePresence mode=\"popLayout\" initial={false}>\n              <motion.span\n                key={label}\n                initial={reduce ? { opacity: 0 } : { opacity: 0, y: '70%' }}\n                animate={{ opacity: 1, y: 0 }}\n                exit={reduce ? { opacity: 0 } : { opacity: 0, y: '-70%' }}\n                transition={{ duration: 0.18, ease: 'easeOut' }}\n              >\n                {label}\n              </motion.span>\n            </AnimatePresence>\n          </span>\n        </span>\n      </Button>\n    </motion.div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/section-summaries.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Media is one list now, so this counts one list. It used to read
+ * "1 hero + 3 gallery", from a time when those were two separate fields with
+ * two separate uploaders.
+ */
+export declare function mediaSummary(itemCount: number, hasCover: boolean): string;
+export declare function inventorySummary(trackInventory: boolean, quantity: number | ''): string;
+export declare function variantsSummary(hasVariants: boolean, variantCount: number): string;
+export declare function categorySummary(categories: string[]): string;
+export declare function organizeSummary(isActive: boolean, featured: boolean): string;
+export declare function descriptionSummary(description: string): string;

package/dist/product-editor/section-summaries.js

@@ -0,0 +1,39 @@
+function mediaSummary(itemCount, hasCover) {
+  if (itemCount === 0) return "No media";
+  if (!hasCover) return `${itemCount} ${itemCount === 1 ? "video" : "videos"}`;
+  const rest = itemCount - 1;
+  return rest === 0 ? "Cover only" : `Cover + ${rest} more`;
+}
+function inventorySummary(trackInventory, quantity) {
+  if (!trackInventory) return "Not tracked";
+  return `${quantity || 0} in stock`;
+}
+function variantsSummary(hasVariants, variantCount) {
+  if (!hasVariants) return "No variants";
+  return `${variantCount} variant${variantCount !== 1 ? "s" : ""}`;
+}
+function categorySummary(categories) {
+  if (categories.length === 0) return "None";
+  return categories.join(", ");
+}
+function organizeSummary(isActive, featured) {
+  const parts = [];
+  parts.push(isActive ? "Published" : "Draft");
+  if (featured) parts.push("Featured");
+  return parts.join(", ");
+}
+function descriptionSummary(description) {
+  if (!description) return "No description";
+  const stripped = description.replace(/<[^>]+>/g, "").trim();
+  if (stripped.length <= 40) return stripped;
+  return stripped.slice(0, 40) + "...";
+}
+export {
+  categorySummary,
+  descriptionSummary,
+  inventorySummary,
+  mediaSummary,
+  organizeSummary,
+  variantsSummary
+};
+//# sourceMappingURL=section-summaries.js.map

package/dist/product-editor/section-summaries.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/section-summaries.ts"],"sourcesContent":["/**\n * Media is one list now, so this counts one list. It used to read\n * \"1 hero + 3 gallery\", from a time when those were two separate fields with\n * two separate uploaders.\n */\nexport function mediaSummary(itemCount: number, hasCover: boolean): string {\n  if (itemCount === 0) return 'No media';\n  // A list of nothing but video has no cover — nothing renders a poster frame.\n  if (!hasCover) return `${itemCount} ${itemCount === 1 ? 'video' : 'videos'}`;\n  const rest = itemCount - 1;\n  return rest === 0 ? 'Cover only' : `Cover + ${rest} more`;\n}\n\nexport function inventorySummary(\n  trackInventory: boolean,\n  quantity: number | '',\n): string {\n  if (!trackInventory) return 'Not tracked';\n  return `${quantity || 0} in stock`;\n}\n\nexport function variantsSummary(\n  hasVariants: boolean,\n  variantCount: number,\n): string {\n  if (!hasVariants) return 'No variants';\n  return `${variantCount} variant${variantCount !== 1 ? 's' : ''}`;\n}\n\nexport function categorySummary(categories: string[]): string {\n  if (categories.length === 0) return 'None';\n  return categories.join(', ');\n}\n\nexport function organizeSummary(isActive: boolean, featured: boolean): string {\n  const parts: string[] = [];\n  parts.push(isActive ? 'Published' : 'Draft');\n  if (featured) parts.push('Featured');\n  return parts.join(', ');\n}\n\nexport function descriptionSummary(description: string): string {\n  if (!description) return 'No description';\n  const stripped = description.replace(/<[^>]+>/g, '').trim();\n  if (stripped.length <= 40) return stripped;\n  return stripped.slice(0, 40) + '...';\n}\n"],"mappings":"AAKO,SAAS,aAAa,WAAmB,UAA2B;AACzE,MAAI,cAAc,EAAG,QAAO;AAE5B,MAAI,CAAC,SAAU,QAAO,GAAG,SAAS,IAAI,cAAc,IAAI,UAAU,QAAQ;AAC1E,QAAM,OAAO,YAAY;AACzB,SAAO,SAAS,IAAI,eAAe,WAAW,IAAI;AACpD;AAEO,SAAS,iBACd,gBACA,UACQ;AACR,MAAI,CAAC,eAAgB,QAAO;AAC5B,SAAO,GAAG,YAAY,CAAC;AACzB;AAEO,SAAS,gBACd,aACA,cACQ;AACR,MAAI,CAAC,YAAa,QAAO;AACzB,SAAO,GAAG,YAAY,WAAW,iBAAiB,IAAI,MAAM,EAAE;AAChE;AAEO,SAAS,gBAAgB,YAA8B;AAC5D,MAAI,WAAW,WAAW,EAAG,QAAO;AACpC,SAAO,WAAW,KAAK,IAAI;AAC7B;AAEO,SAAS,gBAAgB,UAAmB,UAA2B;AAC5E,QAAM,QAAkB,CAAC;AACzB,QAAM,KAAK,WAAW,cAAc,OAAO;AAC3C,MAAI,SAAU,OAAM,KAAK,UAAU;AACnC,SAAO,MAAM,KAAK,IAAI;AACxB;AAEO,SAAS,mBAAmB,aAA6B;AAC9D,MAAI,CAAC,YAAa,QAAO;AACzB,QAAM,WAAW,YAAY,QAAQ,YAAY,EAAE,EAAE,KAAK;AAC1D,MAAI,SAAS,UAAU,GAAI,QAAO;AAClC,SAAO,SAAS,MAAM,GAAG,EAAE,IAAI;AACjC;","names":[]}

package/dist/product-editor/sections/add-ons-section.d.ts

@@ -0,0 +1,29 @@
+import { type AddableConfig, type ProductBehaviors } from '@withpotter/lib/product-types';
+interface AddOnsSectionProps {
+    behaviorConfigs: ProductBehaviors;
+    onChange: (config: AddableConfig) => void;
+    currencyCode: string;
+    /** The merchant's own noun — "property", "dish", "service". */
+    itemLabel: string;
+    /** Rendered inside a fold that already carries the card and the heading. */
+    bare?: boolean;
+}
+/**
+ * THE EXTRAS, WHICH THE ENGINE ALREADY SOLD AND NOTHING COULD SET.
+ *
+ * `resolve-item-price` on the API has verified add-ons since the cart was
+ * written: a storefront may send a selection, but every one of them is looked
+ * up in this list and priced from it, so a customer cannot invent a ₦0 airport
+ * pickup. Carts carry them, orders carry them, line totals include them. The
+ * one missing piece was here — no screen in the dashboard could put a single
+ * add-on into that list, so it was empty for every item ever created and the
+ * whole path was dead code with a live price check on the end of it.
+ *
+ * It sits under Variants because that is the question it gets confused with,
+ * and the distinction is worth stating once: a variant REPLACES the price (you
+ * buy the S or the M), an add-on ADDS to it (you buy the shoe and the spare
+ * laces). Three sizes are three prices to pick between; three add-ons are eight
+ * possible baskets. Same row of inputs, entirely different arithmetic.
+ */
+export declare function AddOnsSection({ behaviorConfigs, onChange, currencyCode, itemLabel, bare, }: AddOnsSectionProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/add-ons-section.js

@@ -0,0 +1,164 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import {
+  getBehaviorConfig,
+  isBehaviorEnabled
+} from "@withpotter/lib/product-types";
+import { CurrencyInput } from "@withpotter/ui-kit/currency-input";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, Toggle, Checkbox } from "@withpotter/ui-kit";
+import { EditorSectionHeader } from "./section-header";
+function newAddOn() {
+  return {
+    id: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+    name: "",
+    price: 0
+  };
+}
+function AddOnsSection({
+  behaviorConfigs,
+  onChange,
+  currencyCode,
+  itemLabel,
+  bare
+}) {
+  const enabled = isBehaviorEnabled(behaviorConfigs.addable);
+  const config = getBehaviorConfig(behaviorConfigs.addable);
+  const addOns = config?.addOns ?? [];
+  const commit = useCallback(
+    (next, on = true) => onChange({ enabled: on, addOns: next }),
+    [onChange]
+  );
+  const toggle = useCallback(() => {
+    commit(addOns.length ? addOns : [newAddOn()], !enabled);
+  }, [commit, addOns, enabled]);
+  const update = useCallback(
+    (id, patch) => commit(addOns.map((a) => a.id === id ? { ...a, ...patch } : a)),
+    [commit, addOns]
+  );
+  const remove = useCallback(
+    (id) => commit(addOns.filter((a) => a.id !== id)),
+    [commit, addOns]
+  );
+  const content = /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(Toggle, { checked: enabled, onChange: toggle, label: "Offer extras" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-primary)]", children: "Offer extras" })
+    ] }),
+    enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: addOns.map((addOn) => /* @__PURE__ */ jsx(
+        AddOnRow,
+        {
+          addOn,
+          currencyCode,
+          onChange: (patch) => update(addOn.id, patch),
+          onRemove: () => remove(addOn.id)
+        },
+        addOn.id
+      )) }),
+      addOns.length === 0 ? /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          className: "w-full border-dashed text-brand-500",
+          onClick: () => commit([newAddOn()]),
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            "Add an extra"
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => commit([...addOns, newAddOn()]),
+          className: "flex items-center gap-2 text-xs font-medium text-brand-500 hover:text-brand-600",
+          children: [
+            /* @__PURE__ */ jsx(Plus, {}),
+            "Add another"
+          ]
+        }
+      )
+    ] })
+  ] });
+  if (bare) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium text-[var(--text-primary)]", children: "Add-ons" }),
+      content
+    ] });
+  }
+  return /* @__PURE__ */ jsx("section", { id: "section-add-ons", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsx(
+      EditorSectionHeader,
+      {
+        title: "Add-ons",
+        description: "Charged on top of the price"
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "p-4", children: content })
+  ] }) });
+}
+function AddOnRow({
+  addOn,
+  currencyCode,
+  onChange,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "surface-inset space-y-3 p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_140px]", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            "aria-label": "Add-on name",
+            placeholder: "e.g. Spare laces",
+            value: addOn.name,
+            onChange: (e) => onChange({ name: e.target.value })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CurrencyInput,
+          {
+            value: addOn.price,
+            onChange: (v) => onChange({ price: v ?? 0 }),
+            currencyCode
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          "aria-label": "Remove add-on",
+          onClick: onRemove,
+          className: "text-[var(--text-muted)] hover:text-[var(--error)]",
+          children: /* @__PURE__ */ jsx(Trash2, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        "aria-label": "Add-on description",
+        placeholder: "What it is, if the name does not say it (optional)",
+        value: addOn.description ?? "",
+        onChange: (e) => onChange({ description: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: addOn.required ?? false,
+        onChange: (e) => onChange({ required: e.target.checked }),
+        label: "Always included, customer cannot remove it"
+      }
+    )
+  ] });
+}
+export {
+  AddOnsSection
+};
+//# sourceMappingURL=add-ons-section.js.map

package/dist/product-editor/sections/add-ons-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/add-ons-section.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\nimport { Plus, Trash2 } from 'lucide-react';\nimport {\n  getBehaviorConfig,\n  isBehaviorEnabled,\n  type AddableConfig,\n  type AddOnItem,\n  type ProductBehaviors,\n} from '@withpotter/lib/product-types';\nimport { CurrencyInput } from '@withpotter/ui-kit/currency-input';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, Toggle, Checkbox } from '@withpotter/ui-kit';\nimport { EditorSectionHeader } from './section-header';\n\ninterface AddOnsSectionProps {\n  behaviorConfigs: ProductBehaviors;\n  onChange: (config: AddableConfig) => void;\n  currencyCode: string;\n  /** The merchant's own noun — \"property\", \"dish\", \"service\". */\n  itemLabel: string;\n  /** Rendered inside a fold that already carries the card and the heading. */\n  bare?: boolean;\n}\n\nfunction newAddOn(): AddOnItem {\n  return {\n    id:\n      crypto.randomUUID?.() ??\n      `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,\n    name: '',\n    price: 0,\n  };\n}\n\n/**\n * THE EXTRAS, WHICH THE ENGINE ALREADY SOLD AND NOTHING COULD SET.\n *\n * `resolve-item-price` on the API has verified add-ons since the cart was\n * written: a storefront may send a selection, but every one of them is looked\n * up in this list and priced from it, so a customer cannot invent a ₦0 airport\n * pickup. Carts carry them, orders carry them, line totals include them. The\n * one missing piece was here — no screen in the dashboard could put a single\n * add-on into that list, so it was empty for every item ever created and the\n * whole path was dead code with a live price check on the end of it.\n *\n * It sits under Variants because that is the question it gets confused with,\n * and the distinction is worth stating once: a variant REPLACES the price (you\n * buy the S or the M), an add-on ADDS to it (you buy the shoe and the spare\n * laces). Three sizes are three prices to pick between; three add-ons are eight\n * possible baskets. Same row of inputs, entirely different arithmetic.\n */\nexport function AddOnsSection({\n  behaviorConfigs,\n  onChange,\n  currencyCode,\n  itemLabel,\n  bare,\n}: AddOnsSectionProps) {\n  const enabled = isBehaviorEnabled(behaviorConfigs.addable);\n  const config = getBehaviorConfig<AddableConfig>(behaviorConfigs.addable);\n  const addOns = config?.addOns ?? [];\n\n  const commit = useCallback(\n    (next: AddOnItem[], on = true) => onChange({ enabled: on, addOns: next }),\n    [onChange],\n  );\n\n  const toggle = useCallback(() => {\n    // Keeping the list on the way out means an accidental toggle does not\n    // delete four priced extras that took a minute each to type.\n    commit(addOns.length ? addOns : [newAddOn()], !enabled);\n  }, [commit, addOns, enabled]);\n\n  const update = useCallback(\n    (id: string, patch: Partial<AddOnItem>) =>\n      commit(addOns.map((a) => (a.id === id ? { ...a, ...patch } : a))),\n    [commit, addOns],\n  );\n\n  const remove = useCallback(\n    (id: string) => commit(addOns.filter((a) => a.id !== id)),\n    [commit, addOns],\n  );\n\n  const content = (\n    <div className=\"space-y-4\">\n      <div className=\"flex items-center gap-3\">\n        <Toggle checked={enabled} onChange={toggle} label=\"Offer extras\" />\n        <span className=\"text-sm text-[var(--text-primary)]\">Offer extras</span>\n      </div>\n\n      {enabled && (\n        <>\n          <div className=\"space-y-3\">\n            {addOns.map((addOn) => (\n              <AddOnRow\n                key={addOn.id}\n                addOn={addOn}\n                currencyCode={currencyCode}\n                onChange={(patch) => update(addOn.id, patch)}\n                onRemove={() => remove(addOn.id)}\n              />\n            ))}\n          </div>\n\n          {addOns.length === 0 ? (\n            <Button\n              variant=\"secondary\"\n              className=\"w-full border-dashed text-brand-500\"\n              onClick={() => commit([newAddOn()])}\n            >\n              <Plus className=\"size-4\" />\n              Add an extra\n            </Button>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={() => commit([...addOns, newAddOn()])}\n              className=\"flex items-center gap-2 text-xs font-medium text-brand-500 hover:text-brand-600\"\n            >\n              <Plus />\n              Add another\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n\n  if (bare) {\n    return (\n      <div>\n        <p className=\"mb-3 text-sm font-medium text-[var(--text-primary)]\">\n          Add-ons\n        </p>\n        {content}\n      </div>\n    );\n  }\n\n  return (\n    <section id=\"section-add-ons\">\n      <div className=\"surface\">\n        <EditorSectionHeader\n          title=\"Add-ons\"\n          description=\"Charged on top of the price\"\n        />\n        <div className=\"p-4\">{content}</div>\n      </div>\n    </section>\n  );\n}\n\n// ============================================================================\n// ROW\n// ============================================================================\n\nfunction AddOnRow({\n  addOn,\n  currencyCode,\n  onChange,\n  onRemove,\n}: {\n  addOn: AddOnItem;\n  currencyCode: string;\n  onChange: (patch: Partial<AddOnItem>) => void;\n  onRemove: () => void;\n}) {\n  return (\n    <div className=\"surface-inset space-y-3 p-3\">\n      <div className=\"flex items-start gap-2\">\n        <div className=\"grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_140px]\">\n          <Input\n            aria-label=\"Add-on name\"\n            placeholder=\"e.g. Spare laces\"\n            value={addOn.name}\n            onChange={(e) => onChange({ name: e.target.value })}\n          />\n          <CurrencyInput\n            value={addOn.price}\n            onChange={(v) => onChange({ price: v ?? 0 })}\n            currencyCode={currencyCode}\n          />\n        </div>\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          aria-label=\"Remove add-on\"\n          onClick={onRemove}\n          className=\"text-[var(--text-muted)] hover:text-[var(--error)]\"\n        >\n          <Trash2 />\n        </Button>\n      </div>\n\n      <Input\n        aria-label=\"Add-on description\"\n        placeholder=\"What it is, if the name does not say it (optional)\"\n        value={addOn.description ?? ''}\n        onChange={(e) => onChange({ description: e.target.value })}\n      />\n\n      {/* A required add-on is not an extra the customer chooses, it is a charge\n          they are told about — a cleaning fee, a service charge. Same row, so\n          the merchant does not go looking for a second screen to add one. */}\n      <Checkbox\n        checked={addOn.required ?? false}\n        onChange={(e) => onChange({ required: e.target.checked })}\n        label=\"Always included, customer cannot remove it\"\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}