@withpotter/components 0.13.0-next.101

package/dist/product-editor/sections/category-section.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Check, Plus, X } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { EditorSectionHeader } from "./section-header";
+import { Input } from "@withpotter/ui-kit";
+function CategorySection({
+  categories,
+  onChange,
+  categoryKey,
+  tenantCategories,
+  onCreateCategory,
+  onDeleteCategory,
+  bare
+}) {
+  const options = useMemo(() => {
+    const raw = tenantCategories[categoryKey] || [];
+    return [...raw].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+  }, [tenantCategories, categoryKey]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [newLabel, setNewLabel] = useState("");
+  const toggle = (value) => {
+    if (categories.includes(value)) {
+      onChange(categories.filter((c) => c !== value));
+    } else {
+      onChange([...categories, value]);
+    }
+  };
+  const handleCreate = () => {
+    const label = newLabel.trim();
+    if (!label) return;
+    onCreateCategory?.(label);
+    const slug = label.toLowerCase().replace(/[^\w\s-]/g, "").replace(/[\s_]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+    if (slug && !categories.includes(slug)) {
+      onChange([...categories, slug]);
+    }
+    setNewLabel("");
+    setIsCreating(false);
+  };
+  const fields = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    options.map((opt) => {
+      const isSelected = categories.includes(opt.value);
+      return /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggle(opt.value),
+            className: `flex w-full items-center justify-between gap-3 px-3 py-3 rounded-md border transition-colors text-left ${isSelected ? "border-brand-500 bg-brand-500/5" : "border-[var(--border-default)] hover:border-[var(--border-strong)]"}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `text-sm font-medium truncate ${isSelected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"}`,
+                  children: opt.label
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `flex-shrink-0 flex items-center justify-center w-[18px] h-[18px] rounded-[3px] border-2 transition-colors ${isSelected ? "bg-brand-500 border-brand-500" : "border-[var(--border-strong)]"}`,
+                  children: isSelected && /* @__PURE__ */ jsx(Check, { className: "text-white", strokeWidth: 3 })
+                }
+              )
+            ]
+          }
+        ),
+        onDeleteCategory && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDeleteCategory(opt.value);
+            },
+            className: "absolute -top-1.5 -right-1.5 hidden group-hover:flex items-center justify-center w-5 h-5 rounded-full bg-[var(--error)] text-white hover:bg-red-700 transition-colors shadow-sm",
+            title: `Delete "${opt.label}"`,
+            children: /* @__PURE__ */ jsx(X, { strokeWidth: 2.5 })
+          }
+        )
+      ] }, opt.value);
+    }),
+    onCreateCategory && !isCreating && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "secondary",
+        className: "w-full border-dashed hover:border-[var(--border-strong)]",
+        onClick: () => setIsCreating(true),
+        children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          "Add"
+        ]
+      }
+    ),
+    isCreating && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          value: newLabel,
+          onChange: (e) => setNewLabel(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              handleCreate();
+            }
+            if (e.key === "Escape") {
+              setIsCreating(false);
+              setNewLabel("");
+            }
+          },
+          placeholder: "Category name...",
+          className: "min-w-0 flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { onClick: handleCreate, disabled: !newLabel.trim(), children: "Add" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setIsCreating(false);
+            setNewLabel("");
+          },
+          className: "px-2 py-3 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+  if (bare) return fields;
+  return /* @__PURE__ */ jsx("section", { id: "section-category", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsx(EditorSectionHeader, { title: "Category" }),
+    /* @__PURE__ */ jsx("div", { className: "p-4", children: fields })
+  ] }) });
+}
+export {
+  CategorySection
+};
+//# sourceMappingURL=category-section.js.map

package/dist/product-editor/sections/category-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/category-section.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo, useState } from 'react';\nimport { Check, Plus, X } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { EditorSectionHeader } from './section-header';\nimport { Input } from '@withpotter/ui-kit';\n\ninterface CategorySectionProps {\n  categories: string[];\n  onChange: (v: string[]) => void;\n  categoryKey: string;\n  tenantCategories: Record<\n    string,\n    { value: string; label: string; sortOrder?: number }[]\n  >;\n  onCreateCategory?: (label: string) => void;\n  onDeleteCategory?: (value: string) => void;\n  /** Rendered inside a card that already carries the heading. */\n  bare?: boolean;\n}\n\n/**\n * Where the item belongs, as a checklist rather than a chip cloud.\n *\n * This lived inside `product-editor-content.tsx` and wrapped its options in\n * `flex-wrap` with `whitespace-nowrap` labels — a shape that only works across\n * a full-width column. The section now sits in the editor's 320px aside, where\n * a nowrap label spills out of the card, so the options stack: one full-width\n * row each, label truncating, the check on the right where the eye can run\n * down a single edge to see what is on.\n */\nexport function CategorySection({\n  categories,\n  onChange,\n  categoryKey,\n  tenantCategories,\n  onCreateCategory,\n  onDeleteCategory,\n  bare,\n}: CategorySectionProps) {\n  const options = useMemo(() => {\n    const raw = tenantCategories[categoryKey] || [];\n    return [...raw].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));\n  }, [tenantCategories, categoryKey]);\n\n  const [isCreating, setIsCreating] = useState(false);\n  const [newLabel, setNewLabel] = useState('');\n\n  const toggle = (value: string) => {\n    if (categories.includes(value)) {\n      onChange(categories.filter((c) => c !== value));\n    } else {\n      onChange([...categories, value]);\n    }\n  };\n\n  const handleCreate = () => {\n    const label = newLabel.trim();\n    if (!label) return;\n    onCreateCategory?.(label);\n    const slug = label\n      .toLowerCase()\n      .replace(/[^\\w\\s-]/g, '')\n      .replace(/[\\s_]+/g, '-')\n      .replace(/-+/g, '-')\n      .replace(/^-|-$/g, '');\n    if (slug && !categories.includes(slug)) {\n      onChange([...categories, slug]);\n    }\n    setNewLabel('');\n    setIsCreating(false);\n  };\n\n  const fields = (\n    <div className=\"flex flex-col gap-2\">\n      {options.map((opt) => {\n        const isSelected = categories.includes(opt.value);\n        return (\n          <div key={opt.value} className=\"relative group\">\n            <button\n              type=\"button\"\n              onClick={() => toggle(opt.value)}\n              className={`flex w-full items-center justify-between gap-3 px-3 py-3 rounded-md border transition-colors text-left ${\n                isSelected\n                  ? 'border-brand-500 bg-brand-500/5'\n                  : 'border-[var(--border-default)] hover:border-[var(--border-strong)]'\n              }`}\n            >\n              <span\n                className={`text-sm font-medium truncate ${\n                  isSelected\n                    ? 'text-[var(--text-primary)]'\n                    : 'text-[var(--text-secondary)]'\n                }`}\n              >\n                {opt.label}\n              </span>\n              <span\n                className={`flex-shrink-0 flex items-center justify-center w-[18px] h-[18px] rounded-[3px] border-2 transition-colors ${\n                  isSelected\n                    ? 'bg-brand-500 border-brand-500'\n                    : 'border-[var(--border-strong)]'\n                }`}\n              >\n                {isSelected && <Check className=\"text-white\" strokeWidth={3} />}\n              </span>\n            </button>\n            {onDeleteCategory && (\n              <button\n                type=\"button\"\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onDeleteCategory(opt.value);\n                }}\n                className=\"absolute -top-1.5 -right-1.5 hidden group-hover:flex items-center justify-center w-5 h-5 rounded-full bg-[var(--error)] text-white hover:bg-red-700 transition-colors shadow-sm\"\n                title={`Delete \"${opt.label}\"`}\n              >\n                <X strokeWidth={2.5} />\n              </button>\n            )}\n          </div>\n        );\n      })}\n\n      {/* Inline create */}\n      {onCreateCategory && !isCreating && (\n        <Button\n          variant=\"secondary\"\n          className=\"w-full border-dashed hover:border-[var(--border-strong)]\"\n          onClick={() => setIsCreating(true)}\n        >\n          <Plus />\n          Add\n        </Button>\n      )}\n\n      {isCreating && (\n        <div className=\"flex items-center gap-2\">\n          <Input\n            autoFocus\n            value={newLabel}\n            onChange={(e) => setNewLabel(e.target.value)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                e.preventDefault();\n                handleCreate();\n              }\n              if (e.key === 'Escape') {\n                setIsCreating(false);\n                setNewLabel('');\n              }\n            }}\n            placeholder=\"Category name...\"\n            className=\"min-w-0 flex-1\"\n          />\n          <Button onClick={handleCreate} disabled={!newLabel.trim()}>\n            Add\n          </Button>\n          <button\n            type=\"button\"\n            onClick={() => {\n              setIsCreating(false);\n              setNewLabel('');\n            }}\n            className=\"px-2 py-3 text-xs text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors\"\n          >\n            Cancel\n          </button>\n        </div>\n      )}\n    </div>\n  );\n\n  /**\n   * `bare` renders the fields without a card of their own, so Organize can\n   * hold them. Category, Status, Featured and Collections are one question —\n   * where does this sit in the shop — and they were four cards' worth of\n   * chrome asking it in two different columns.\n   */\n  if (bare) return fields;\n\n  return (\n    <section id=\"section-category\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        <EditorSectionHeader title=\"Category\" />\n        <div className=\"p-4\">{fields}</div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/sections/custom-fields-section.d.ts

@@ -0,0 +1,11 @@
+import { type CustomFieldDefinition } from '@withpotter/components/custom-fields-step';
+interface CustomFieldsSectionProps {
+    formValues: Record<string, unknown>;
+    setFormValues: (v: Record<string, unknown>) => void;
+    savedDefinitions: CustomFieldDefinition[];
+    onSaveDefinition: (def: CustomFieldDefinition) => void;
+    onRemoveDefinition: (key: string) => void;
+    bare?: boolean;
+}
+export declare function CustomFieldsSection({ formValues, setFormValues, savedDefinitions, onSaveDefinition, onRemoveDefinition, bare, }: CustomFieldsSectionProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/custom-fields-section.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  CustomFieldsStep
+} from "@withpotter/components/custom-fields-step";
+import { EditorSectionHeader } from "./section-header";
+function CustomFieldsSection({
+  formValues,
+  setFormValues,
+  savedDefinitions,
+  onSaveDefinition,
+  onRemoveDefinition,
+  bare
+}) {
+  const customFields = formValues.customFields || [];
+  const content = /* @__PURE__ */ jsx(
+    CustomFieldsStep,
+    {
+      customFields,
+      onChange: (fields) => setFormValues({ ...formValues, customFields: fields }),
+      savedDefinitions,
+      onSaveDefinition,
+      onRemoveDefinition
+    }
+  );
+  if (bare) return content;
+  return /* @__PURE__ */ jsx("section", { id: "section-customFields", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsx(EditorSectionHeader, { title: "Custom fields" }),
+    /* @__PURE__ */ jsx("div", { className: "p-4", children: content })
+  ] }) });
+}
+export {
+  CustomFieldsSection
+};
+//# sourceMappingURL=custom-fields-section.js.map

package/dist/product-editor/sections/custom-fields-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/custom-fields-section.tsx"],"sourcesContent":["'use client';\n\nimport {\n  CustomFieldsStep,\n  type CustomFieldEntry,\n  type CustomFieldDefinition,\n} from '@withpotter/components/custom-fields-step';\nimport { EditorSectionHeader } from './section-header';\n\ninterface CustomFieldsSectionProps {\n  formValues: Record<string, unknown>;\n  setFormValues: (v: Record<string, unknown>) => void;\n  savedDefinitions: CustomFieldDefinition[];\n  onSaveDefinition: (def: CustomFieldDefinition) => void;\n  onRemoveDefinition: (key: string) => void;\n  bare?: boolean;\n}\n\nexport function CustomFieldsSection({\n  formValues,\n  setFormValues,\n  savedDefinitions,\n  onSaveDefinition,\n  onRemoveDefinition,\n  bare,\n}: CustomFieldsSectionProps) {\n  const customFields =\n    (formValues.customFields as CustomFieldEntry[] | undefined) || [];\n\n  const content = (\n    <CustomFieldsStep\n      customFields={customFields}\n      onChange={(fields) =>\n        setFormValues({ ...formValues, customFields: fields })\n      }\n      savedDefinitions={savedDefinitions}\n      onSaveDefinition={onSaveDefinition}\n      onRemoveDefinition={onRemoveDefinition}\n    />\n  );\n\n  if (bare) return content;\n\n  return (\n    <section id=\"section-customFields\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        <EditorSectionHeader title=\"Custom fields\" />\n        <div className=\"p-4\">{content}</div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA8BI,cAeE,YAfF;AA5BJ;AAAA,EACE;AAAA,OAGK;AACP,SAAS,2BAA2B;AAW7B,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,eACH,WAAW,gBAAmD,CAAC;AAElE,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,CAAC,WACT,cAAc,EAAE,GAAG,YAAY,cAAc,OAAO,CAAC;AAAA,MAEvD;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAGF,MAAI,KAAM,QAAO;AAEjB,SACE,oBAAC,aAAQ,IAAG,wBAAuB,WAAU,gBAC3C,+BAAC,SAAI,WAAU,WACb;AAAA,wBAAC,uBAAoB,OAAM,iBAAgB;AAAA,IAC3C,oBAAC,SAAI,WAAU,OAAO,mBAAQ;AAAA,KAChC,GACF;AAEJ;","names":[]}

package/dist/product-editor/sections/features-section.d.ts

@@ -0,0 +1,14 @@
+import { type ProductBehaviors } from '@withpotter/lib/product-types';
+import type { ContentBehavior } from '@withpotter/lib/template-types';
+import { type BehaviorKey, type BehaviorLabelOverrides } from '@withpotter/components/behaviors/behavior-config-section';
+interface FeaturesSectionProps {
+    industryBehaviors: ContentBehavior[];
+    behaviorConfigs: ProductBehaviors;
+    setBehaviorConfigs: React.Dispatch<React.SetStateAction<ProductBehaviors>>;
+    behaviorLabelOverrides?: BehaviorLabelOverrides;
+    bare?: boolean;
+}
+/** Returns the additive behaviors (not intrinsic to the content type). */
+export declare function getAdditiveBehaviors(industryBehaviors: ContentBehavior[]): BehaviorKey[];
+export declare function FeaturesSection({ industryBehaviors, behaviorConfigs, setBehaviorConfigs, behaviorLabelOverrides, bare, }: FeaturesSectionProps): import("react").JSX.Element | null;
+export {};

package/dist/product-editor/sections/features-section.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toggle } from "@withpotter/ui-kit";
+import { useState } from "react";
+import {
+  isBehaviorEnabled
+} from "@withpotter/lib/product-types";
+import {
+  DEFAULT_BEHAVIOR_DEFINITIONS
+} from "@withpotter/components/behaviors/behavior-config-section";
+const CONFIGURABLE_BEHAVIORS = [
+  "sellable",
+  "bookable",
+  "shippable",
+  "subscribable",
+  "downloadable",
+  "rentable",
+  "ticketed"
+];
+function getAdditiveBehaviors(industryBehaviors) {
+  const intrinsicSet = new Set(industryBehaviors);
+  return CONFIGURABLE_BEHAVIORS.filter((key) => !intrinsicSet.has(key));
+}
+function FeaturesSection({
+  industryBehaviors,
+  behaviorConfigs,
+  setBehaviorConfigs,
+  behaviorLabelOverrides,
+  bare
+}) {
+  const additiveBehaviors = getAdditiveBehaviors(industryBehaviors);
+  const [isOpen, setIsOpen] = useState(false);
+  if (additiveBehaviors.length === 0) return null;
+  function handleToggle(key) {
+    const currentValue = behaviorConfigs[key];
+    const isEnabled = isBehaviorEnabled(
+      currentValue
+    );
+    if (isEnabled) {
+      setBehaviorConfigs((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+    } else {
+      setBehaviorConfigs((prev) => ({
+        ...prev,
+        [key]: { enabled: true }
+      }));
+    }
+  }
+  const toggleList = /* @__PURE__ */ jsx("div", { className: "space-y-3", children: additiveBehaviors.map((key) => {
+    const def = DEFAULT_BEHAVIOR_DEFINITIONS.find((d) => d.key === key);
+    if (!def) return null;
+    const isEnabled = isBehaviorEnabled(
+      behaviorConfigs[key]
+    );
+    const label = behaviorLabelOverrides?.[key]?.label || def.label;
+    const subtitle = behaviorLabelOverrides?.[key]?.subtitle || def.subtitle;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `border rounded-md transition-colors ${isEnabled ? "border-brand-500/30 bg-[var(--accent-secondary)]/5" : "border-[var(--border-default)]"}`,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              checked: isEnabled,
+              onChange: () => handleToggle(key),
+              label: def.label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-3 flex-1 min-w-0 text-left",
+              onClick: () => handleToggle(key),
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `flex-shrink-0 ${isEnabled ? "text-brand-500" : "text-[var(--text-muted)]"}`,
+                    children: def.icon
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: `text-sm font-medium ${isEnabled ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"}`,
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] truncate", children: subtitle })
+                ] })
+              ]
+            }
+          )
+        ] })
+      },
+      key
+    );
+  }) });
+  if (bare) return toggleList;
+  return /* @__PURE__ */ jsx("section", { id: "section-features", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen((prev) => !prev),
+        className: "w-full px-4 py-4 flex items-center justify-between text-left",
+        children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Additional capabilities" }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] mt-1", children: "Enable extra features for this item" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? "rotate-180" : ""}`,
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M19 9l-7 7-7-7"
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "p-4 pt-0 space-y-3 border-t border-[var(--border-subtle)]", children: toggleList })
+  ] }) });
+}
+export {
+  FeaturesSection,
+  getAdditiveBehaviors
+};
+//# sourceMappingURL=features-section.js.map

package/dist/product-editor/sections/features-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/features-section.tsx"],"sourcesContent":["'use client';\n\nimport { Toggle } from '@withpotter/ui-kit';\n\nimport { useState } from 'react';\nimport {\n  isBehaviorEnabled,\n  type ProductBehaviors,\n  type BehaviorConfig,\n} from '@withpotter/lib/product-types';\nimport type { ContentBehavior } from '@withpotter/lib/template-types';\nimport {\n  DEFAULT_BEHAVIOR_DEFINITIONS,\n  type BehaviorKey,\n  type BehaviorLabelOverrides,\n} from '@withpotter/components/behaviors/behavior-config-section';\n\nconst CONFIGURABLE_BEHAVIORS: BehaviorKey[] = [\n  'sellable',\n  'bookable',\n  'shippable',\n  'subscribable',\n  'downloadable',\n  'rentable',\n  'ticketed',\n];\n\ninterface FeaturesSectionProps {\n  industryBehaviors: ContentBehavior[];\n  behaviorConfigs: ProductBehaviors;\n  setBehaviorConfigs: React.Dispatch<React.SetStateAction<ProductBehaviors>>;\n  behaviorLabelOverrides?: BehaviorLabelOverrides;\n  bare?: boolean;\n}\n\n/** Returns the additive behaviors (not intrinsic to the content type). */\nexport function getAdditiveBehaviors(\n  industryBehaviors: ContentBehavior[],\n): BehaviorKey[] {\n  const intrinsicSet = new Set(industryBehaviors);\n  return CONFIGURABLE_BEHAVIORS.filter((key) => !intrinsicSet.has(key));\n}\n\nexport function FeaturesSection({\n  industryBehaviors,\n  behaviorConfigs,\n  setBehaviorConfigs,\n  behaviorLabelOverrides,\n  bare,\n}: FeaturesSectionProps) {\n  const additiveBehaviors = getAdditiveBehaviors(industryBehaviors);\n\n  // Declared BEFORE the early return below. It used to sit after it, so a\n  // render where `additiveBehaviors` was empty called one fewer hook than the\n  // next one — and `industryBehaviors` is a prop, so it genuinely goes from\n  // empty to populated when the template resolves. That is the exact shape of\n  // \"Rendered more hooks than during the previous render\".\n  const [isOpen, setIsOpen] = useState(false);\n\n  // Nothing to show — intrinsic behaviors are invisible, no additive ones exist\n  if (additiveBehaviors.length === 0) return null;\n\n  function handleToggle(key: BehaviorKey) {\n    const currentValue = behaviorConfigs[key];\n    const isEnabled = isBehaviorEnabled(\n      currentValue as boolean | BehaviorConfig | undefined,\n    );\n\n    if (isEnabled) {\n      setBehaviorConfigs((prev) => {\n        const next = { ...prev };\n        delete next[key];\n        return next;\n      });\n    } else {\n      setBehaviorConfigs((prev) => ({\n        ...prev,\n        [key]: { enabled: true },\n      }));\n    }\n  }\n\n  const toggleList = (\n    <div className=\"space-y-3\">\n      {additiveBehaviors.map((key) => {\n        const def = DEFAULT_BEHAVIOR_DEFINITIONS.find((d) => d.key === key);\n        if (!def) return null;\n\n        const isEnabled = isBehaviorEnabled(\n          behaviorConfigs[key] as boolean | BehaviorConfig | undefined,\n        );\n\n        const label = behaviorLabelOverrides?.[key]?.label || def.label;\n        const subtitle =\n          behaviorLabelOverrides?.[key]?.subtitle || def.subtitle;\n\n        return (\n          <div\n            key={key}\n            className={`border rounded-md transition-colors ${\n              isEnabled\n                ? 'border-brand-500/30 bg-[var(--accent-secondary)]/5'\n                : 'border-[var(--border-default)]'\n            }`}\n          >\n            <div className=\"flex items-center gap-3 px-4 py-3\">\n              <Toggle\n                checked={isEnabled}\n                onChange={() => handleToggle(key)}\n                label={def.label}\n              />\n\n              <button\n                type=\"button\"\n                className=\"flex items-center gap-3 flex-1 min-w-0 text-left\"\n                onClick={() => handleToggle(key)}\n              >\n                <span\n                  className={`flex-shrink-0 ${\n                    isEnabled ? 'text-brand-500' : 'text-[var(--text-muted)]'\n                  }`}\n                >\n                  {def.icon}\n                </span>\n                <div className=\"min-w-0\">\n                  <p\n                    className={`text-sm font-medium ${\n                      isEnabled\n                        ? 'text-[var(--text-primary)]'\n                        : 'text-[var(--text-secondary)]'\n                    }`}\n                  >\n                    {label}\n                  </p>\n                  <p className=\"text-xs text-[var(--text-tertiary)] truncate\">\n                    {subtitle}\n                  </p>\n                </div>\n              </button>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  if (bare) return toggleList;\n\n  return (\n    <section id=\"section-features\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        <button\n          type=\"button\"\n          onClick={() => setIsOpen((prev) => !prev)}\n          className=\"w-full px-4 py-4 flex items-center justify-between text-left\"\n        >\n          <div>\n            <h2 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n              Additional capabilities\n            </h2>\n            <p className=\"text-xs text-[var(--text-tertiary)] mt-1\">\n              Enable extra features for this item\n            </p>\n          </div>\n          <svg\n            className={`w-4 h-4 text-[var(--text-muted)] transition-transform ${isOpen ? 'rotate-180' : ''}`}\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n            strokeWidth={2}\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              d=\"M19 9l-7 7-7-7\"\n            />\n          </svg>\n        </button>\n        {isOpen && (\n          <div className=\"p-4 pt-0 space-y-3 border-t border-[var(--border-subtle)]\">\n            {toggleList}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/sections/folded-section.d.ts

@@ -0,0 +1,27 @@
+interface FoldedSectionProps {
+    title: string;
+    /**
+     * What is inside, in a few words, read while it is still shut — "3 variants
+     * · 2 extras", "4 of 17 filled". A fold with no summary is a mystery box,
+     * and a merchant opens all of them to find out, which costs more than
+     * leaving everything open would have.
+     */
+    summary: string;
+    defaultOpen?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A section that is true of some items and not most of them.
+ *
+ * The editor's problem was never that its sections were in the wrong order —
+ * it was that every item paid for every question. Variants, capabilities and a
+ * template's seventeen optional fields are real and needed, and they are
+ * needed by a minority of items each, so they are here: shut, named, with a
+ * line that says what is inside so nothing has to be opened to be checked.
+ *
+ * `defaultOpen` is for a fold that already has something in it. An item with
+ * three variants opens on its variants, because for that item the fold is not
+ * an option any more, it is a fact.
+ */
+export declare function FoldedSection({ title, summary, defaultOpen, children, }: FoldedSectionProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/folded-section.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from "@withpotter/ui-kit";
+function FoldedSection({
+  title,
+  summary,
+  defaultOpen = false,
+  children
+}) {
+  const [value, setValue] = useState(defaultOpen ? "open" : "");
+  return /* @__PURE__ */ jsx("section", { className: "surface px-4", children: /* @__PURE__ */ jsx(
+    Accordion,
+    {
+      type: "single",
+      collapsible: true,
+      value,
+      onValueChange: setValue,
+      children: /* @__PURE__ */ jsxs(AccordionItem, { value: "open", className: "border-b-0", children: [
+        /* @__PURE__ */ jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline justify-between gap-3 pr-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }),
+          /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-normal text-[var(--text-tertiary)]", children: summary })
+        ] }) }),
+        /* @__PURE__ */ jsx(AccordionContent, { className: "space-y-4 pb-4 text-sm text-[var(--text-primary)]", children })
+      ] })
+    }
+  ) });
+}
+export {
+  FoldedSection
+};
+//# sourceMappingURL=folded-section.js.map

package/dist/product-editor/sections/folded-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/folded-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionTrigger,\n  AccordionContent,\n} from '@withpotter/ui-kit';\n\ninterface FoldedSectionProps {\n  title: string;\n  /**\n   * What is inside, in a few words, read while it is still shut — \"3 variants\n   * · 2 extras\", \"4 of 17 filled\". A fold with no summary is a mystery box,\n   * and a merchant opens all of them to find out, which costs more than\n   * leaving everything open would have.\n   */\n  summary: string;\n  defaultOpen?: boolean;\n  children: React.ReactNode;\n}\n\n/**\n * A section that is true of some items and not most of them.\n *\n * The editor's problem was never that its sections were in the wrong order —\n * it was that every item paid for every question. Variants, capabilities and a\n * template's seventeen optional fields are real and needed, and they are\n * needed by a minority of items each, so they are here: shut, named, with a\n * line that says what is inside so nothing has to be opened to be checked.\n *\n * `defaultOpen` is for a fold that already has something in it. An item with\n * three variants opens on its variants, because for that item the fold is not\n * an option any more, it is a fact.\n */\nexport function FoldedSection({\n  title,\n  summary,\n  defaultOpen = false,\n  children,\n}: FoldedSectionProps) {\n  const [value, setValue] = useState(defaultOpen ? 'open' : '');\n\n  return (\n    <section className=\"surface px-4\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        value={value}\n        onValueChange={setValue}\n      >\n        <AccordionItem value=\"open\" className=\"border-b-0\">\n          <AccordionTrigger>\n            <span className=\"flex min-w-0 flex-1 items-baseline justify-between gap-3 pr-3\">\n              <span className=\"text-sm font-semibold text-[var(--text-primary)]\">\n                {title}\n              </span>\n              <span className=\"truncate text-xs font-normal text-[var(--text-tertiary)]\">\n                {summary}\n              </span>\n            </span>\n          </AccordionTrigger>\n          <AccordionContent className=\"space-y-4 pb-4 text-sm text-[var(--text-primary)]\">\n            {children}\n          </AccordionContent>\n        </AccordionItem>\n      </Accordion>\n    </section>\n  );\n}\n"],"mappings":";AAsDY,SACE,KADF;AApDZ,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA4BA,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAuB;AACrB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,cAAc,SAAS,EAAE;AAE5D,SACE,oBAAC,aAAQ,WAAU,gBACjB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAW;AAAA,MACX;AAAA,MACA,eAAe;AAAA,MAEf,+BAAC,iBAAc,OAAM,QAAO,WAAU,cACpC;AAAA,4BAAC,oBACC,+BAAC,UAAK,WAAU,iEACd;AAAA,8BAAC,UAAK,WAAU,oDACb,iBACH;AAAA,UACA,oBAAC,UAAK,WAAU,4DACb,mBACH;AAAA,WACF,GACF;AAAA,QACA,oBAAC,oBAAiB,WAAU,qDACzB,UACH;AAAA,SACF;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/product-editor/sections/gallery-to-media.d.ts

@@ -0,0 +1,8 @@
+import type { GalleryItem } from '@withpotter/lib/api/types';
+import { type ProductGalleryItem } from '@withpotter/lib/media-utils';
+/**
+ * Photos chosen from the Gallery's "My photos" become product media the same
+ * shape an upload does: a fresh tile id, the picture's own address and size,
+ * and its alt text (or its title when it has none).
+ */
+export declare function galleryToMedia(picked: GalleryItem[]): ProductGalleryItem[];

package/dist/product-editor/sections/gallery-to-media.js

@@ -0,0 +1,18 @@
+import {
+  createGalleryItemId
+} from "@withpotter/lib/media-utils";
+function galleryToMedia(picked) {
+  return picked.map((p) => ({
+    id: createGalleryItemId(p.url),
+    url: p.url,
+    type: p.type === "video" ? "video" : "image",
+    alt: p.altText || p.title || void 0,
+    width: p.width,
+    height: p.height,
+    thumbnail: p.thumbnailUrl || void 0
+  }));
+}
+export {
+  galleryToMedia
+};
+//# sourceMappingURL=gallery-to-media.js.map

package/dist/product-editor/sections/gallery-to-media.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/gallery-to-media.ts"],"sourcesContent":["import type { GalleryItem } from '@withpotter/lib/api/types';\nimport {\n  createGalleryItemId,\n  type ProductGalleryItem,\n} from '@withpotter/lib/media-utils';\n\n/**\n * Photos chosen from the Gallery's \"My photos\" become product media the same\n * shape an upload does: a fresh tile id, the picture's own address and size,\n * and its alt text (or its title when it has none).\n */\nexport function galleryToMedia(picked: GalleryItem[]): ProductGalleryItem[] {\n  return picked.map((p) => ({\n    id: createGalleryItemId(p.url),\n    url: p.url,\n    type: p.type === 'video' ? 'video' : 'image',\n    alt: p.altText || p.title || undefined,\n    width: p.width,\n    height: p.height,\n    thumbnail: p.thumbnailUrl || undefined,\n  }));\n}\n"],"mappings":"AACA;AAAA,EACE;AAAA,OAEK;AAOA,SAAS,eAAe,QAA6C;AAC1E,SAAO,OAAO,IAAI,CAAC,OAAO;AAAA,IACxB,IAAI,oBAAoB,EAAE,GAAG;AAAA,IAC7B,KAAK,EAAE;AAAA,IACP,MAAM,EAAE,SAAS,UAAU,UAAU;AAAA,IACrC,KAAK,EAAE,WAAW,EAAE,SAAS;AAAA,IAC7B,OAAO,EAAE;AAAA,IACT,QAAQ,EAAE;AAAA,IACV,WAAW,EAAE,gBAAgB;AAAA,EAC/B,EAAE;AACJ;","names":[]}

package/dist/product-editor/sections/general-section.d.ts

@@ -0,0 +1,18 @@
+interface GeneralSectionProps {
+    title: string;
+    setTitle: (v: string) => void;
+    slug: string;
+    setSlug: (v: string) => void;
+    slugManuallyEdited: boolean;
+    setSlugManuallyEdited: (v: boolean) => void;
+    description: string;
+    setDescription: (v: string) => void;
+    formValues: Record<string, unknown>;
+    setFormValues: (v: Record<string, unknown>) => void;
+    isEditing?: boolean;
+    bare?: boolean;
+    hideTitle?: boolean;
+    hideSlug?: boolean;
+}
+export declare function GeneralSection({ title, setTitle, slug, setSlug, slugManuallyEdited, setSlugManuallyEdited, description, setDescription, formValues, setFormValues, isEditing, bare, hideTitle, hideSlug, }: GeneralSectionProps): import("react").JSX.Element;
+export {};