@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,319 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { Plus, Trash2 } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { Input, Toggle } from "@withpotter/ui-kit";
+import { RemovableChip } from "@withpotter/ui-kit";
+import { VariantsTable } from "./variants-table";
+const MAX_OPTIONS = 8;
+function cartesian(options) {
+  if (options.length === 0) return [];
+  const filtered = options.filter((o) => o.name && o.values.length > 0);
+  if (filtered.length === 0) return [];
+  let combos = [{}];
+  for (const opt of filtered) {
+    const next = [];
+    for (const combo of combos) {
+      for (const val of opt.values) {
+        next.push({ ...combo, [opt.name.toLowerCase()]: val });
+      }
+    }
+    combos = next;
+  }
+  return combos;
+}
+function variantName(data) {
+  return Object.values(data).join(" / ");
+}
+function VariantsSection({
+  hasVariants,
+  setHasVariants,
+  variants,
+  setVariants,
+  variantOptions,
+  setVariantOptions,
+  defaultPrice,
+  currencySymbol,
+  bare,
+  productQuantity,
+  showProfitability = false
+}) {
+  const regenerateVariants = useCallback(
+    (options) => {
+      const combos = cartesian(options);
+      if (combos.length === 0) {
+        setVariants([]);
+        return;
+      }
+      setVariants((prev) => {
+        const existingByName = /* @__PURE__ */ new Map();
+        for (const v of prev) {
+          existingByName.set(v.name, v);
+        }
+        return combos.map((data) => {
+          const name = variantName(data);
+          const existing = existingByName.get(name);
+          if (existing) {
+            return { ...existing, data };
+          }
+          return {
+            id: crypto.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+            name,
+            price: defaultPrice,
+            quantity: 0,
+            data
+          };
+        });
+      });
+    },
+    [defaultPrice, setVariants]
+  );
+  const handleToggle = useCallback(() => {
+    setHasVariants(!hasVariants);
+  }, [hasVariants, setHasVariants]);
+  const addOption = useCallback(() => {
+    setVariantOptions((prev) => {
+      if (prev.length >= MAX_OPTIONS) return prev;
+      return [...prev, { name: "", values: [] }];
+    });
+  }, [setVariantOptions]);
+  const removeOption = useCallback(
+    (index) => {
+      setVariantOptions((prev) => {
+        const next = prev.filter((_, i) => i !== index);
+        regenerateVariants(next);
+        return next;
+      });
+    },
+    [setVariantOptions, regenerateVariants]
+  );
+  const updateOptionName = useCallback(
+    (index, name) => {
+      setVariantOptions((prev) => {
+        const next = [...prev];
+        next[index] = { ...next[index], name };
+        regenerateVariants(next);
+        return next;
+      });
+    },
+    [setVariantOptions, regenerateVariants]
+  );
+  const addOptionValue = useCallback(
+    (index, value) => {
+      const trimmed = value.trim();
+      if (!trimmed) return;
+      setVariantOptions((prev) => {
+        const opt = prev[index];
+        if (opt.values.includes(trimmed)) return prev;
+        const next = [...prev];
+        next[index] = { ...opt, values: [...opt.values, trimmed] };
+        regenerateVariants(next);
+        return next;
+      });
+    },
+    [setVariantOptions, regenerateVariants]
+  );
+  const removeOptionValue = useCallback(
+    (optionIndex, valueIndex) => {
+      setVariantOptions((prev) => {
+        const opt = prev[optionIndex];
+        const next = [...prev];
+        next[optionIndex] = {
+          ...opt,
+          values: opt.values.filter((_, i) => i !== valueIndex)
+        };
+        regenerateVariants(next);
+        return next;
+      });
+    },
+    [setVariantOptions, regenerateVariants]
+  );
+  const updateVariantField = useCallback(
+    (variantId, field, value) => {
+      setVariants(
+        (prev) => prev.map((v) => {
+          if (v.id !== variantId) return v;
+          if (field === "sku")
+            return { ...v, sku: value || void 0 };
+          if (field === "price" || field === "costPrice") {
+            const num2 = typeof value === "number" ? value : field === "costPrice" && value == null ? null : value == null || value === "" ? void 0 : Number(value);
+            return { ...v, [field]: num2 };
+          }
+          const num = value === "" || value === void 0 ? void 0 : parseInt(String(value), 10);
+          return { ...v, quantity: num != null && !isNaN(num) ? num : 0 };
+        })
+      );
+    },
+    [setVariants]
+  );
+  const totalVariantQty = useMemo(
+    () => variants.reduce((sum, v) => sum + (v.quantity ?? 0), 0),
+    [variants]
+  );
+  const variantQtyWarning = typeof productQuantity === "number" && productQuantity > 0 && totalVariantQty > productQuantity ? `Total variant quantity (${totalVariantQty}) exceeds product inventory (${productQuantity})` : null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          checked: hasVariants,
+          onChange: handleToggle,
+          label: "This item has options"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--text-primary)]", children: "This item has options (like size or color)" })
+    ] }),
+    hasVariants && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        variantOptions.map((option, optIdx) => /* @__PURE__ */ jsx(
+          OptionRow,
+          {
+            option,
+            index: optIdx,
+            onNameChange: (name) => updateOptionName(optIdx, name),
+            onAddValue: (value) => addOptionValue(optIdx, value),
+            onRemoveValue: (valIdx) => removeOptionValue(optIdx, valIdx),
+            onRemove: () => removeOption(optIdx),
+            canRemove: variantOptions.length > 1
+          },
+          optIdx
+        )),
+        variantOptions.length < MAX_OPTIONS && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: addOption,
+            className: "flex items-center gap-2 text-xs text-brand-500 hover:text-brand-600 font-medium",
+            children: [
+              /* @__PURE__ */ jsx(Plus, {}),
+              "Add another option"
+            ]
+          }
+        )
+      ] }),
+      variantOptions.length === 0 && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          className: "text-brand-500 border-dashed w-full",
+          onClick: addOption,
+          children: [
+            /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+            "Add option (e.g. Size, Color)"
+          ]
+        }
+      ),
+      variants.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        variantQtyWarning && /* @__PURE__ */ jsx("p", { className: "text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-md px-3 py-2", children: variantQtyWarning }),
+        /* @__PURE__ */ jsx(
+          VariantsTable,
+          {
+            variants,
+            currencySymbol,
+            onFieldChange: updateVariantField,
+            showProfitability
+          }
+        )
+      ] })
+    ] })
+  ] });
+  if (bare) return /* @__PURE__ */ jsx("div", { className: "space-y-4", children: content });
+  return /* @__PURE__ */ jsx("section", { id: "section-variants", className: "scroll-mt-36", children: /* @__PURE__ */ jsxs("div", { className: "surface", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-4 border-b border-[var(--border-subtle)]", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Variants" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)] mt-1", children: "Offer different options like size, color, or material" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "p-4 space-y-4", children: content })
+  ] }) });
+}
+function OptionRow({
+  option,
+  index,
+  onNameChange,
+  onAddValue,
+  onRemoveValue,
+  onRemove,
+  canRemove
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      const values = inputValue.split(",");
+      for (const v of values) {
+        onAddValue(v);
+      }
+      setInputValue("");
+    }
+  };
+  const handleBlur = () => {
+    if (inputValue.trim()) {
+      const values = inputValue.split(",");
+      for (const v of values) {
+        onAddValue(v);
+      }
+      setInputValue("");
+    }
+  };
+  const placeholders = [
+    "e.g. Size",
+    "e.g. Color",
+    "e.g. Material",
+    "e.g. Fit",
+    "e.g. Length",
+    "e.g. Sleeve",
+    "e.g. Style",
+    "e.g. Finish"
+  ];
+  return /* @__PURE__ */ jsxs("div", { className: "border border-[var(--border-subtle)] rounded-md p-4 space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: option.name,
+          onChange: (e) => onNameChange(e.target.value),
+          placeholder: placeholders[index] || "Option name",
+          className: "flex-1"
+        }
+      ),
+      canRemove && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onRemove,
+          className: "p-2 text-[var(--text-muted)] hover:text-red-500 transition-colors",
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mb-2", children: option.values.map((val, valIdx) => /* @__PURE__ */ jsx(
+        RemovableChip,
+        {
+          removeLabel: `Remove ${val}`,
+          onRemove: () => onRemoveValue(valIdx),
+          children: val
+        },
+        valIdx
+      )) }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: inputValue,
+          onChange: (e) => setInputValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          placeholder: option.values.length === 0 ? "Type values and press Enter (e.g. S, M, L, XL)" : "Add more values...",
+          className: "w-full"
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  VariantsSection
+};
+//# sourceMappingURL=variants-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/variants-section.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { Plus, Trash2 } from 'lucide-react';\nimport type { ProductVariant } from '@withpotter/lib/product-types';\nimport type { VariantOption } from '@withpotter/hooks/use-product-form-state';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Input, Toggle } from '@withpotter/ui-kit';\nimport { RemovableChip } from '@withpotter/ui-kit';\nimport { VariantsTable } from './variants-table';\n\ninterface VariantsSectionProps {\n  hasVariants: boolean;\n  setHasVariants: (v: boolean) => void;\n  variants: ProductVariant[];\n  setVariants: React.Dispatch<React.SetStateAction<ProductVariant[]>>;\n  variantOptions: VariantOption[];\n  setVariantOptions: React.Dispatch<React.SetStateAction<VariantOption[]>>;\n  defaultPrice?: number;\n  currencySymbol: string;\n  bare?: boolean;\n  productQuantity?: number | '';\n  showProfitability?: boolean;\n}\n\nconst MAX_OPTIONS = 8;\n\n/** Generate cartesian product of option values */\nfunction cartesian(options: VariantOption[]): Record<string, string>[] {\n  if (options.length === 0) return [];\n  const filtered = options.filter((o) => o.name && o.values.length > 0);\n  if (filtered.length === 0) return [];\n\n  let combos: Record<string, string>[] = [{}];\n  for (const opt of filtered) {\n    const next: Record<string, string>[] = [];\n    for (const combo of combos) {\n      for (const val of opt.values) {\n        next.push({ ...combo, [opt.name.toLowerCase()]: val });\n      }\n    }\n    combos = next;\n  }\n  return combos;\n}\n\n/** Build a variant name from attribute values (e.g. \"S / Black\") */\nfunction variantName(data: Record<string, string>): string {\n  return Object.values(data).join(' / ');\n}\n\nexport function VariantsSection({\n  hasVariants,\n  setHasVariants,\n  variants,\n  setVariants,\n  variantOptions,\n  setVariantOptions,\n  defaultPrice,\n  currencySymbol,\n  bare,\n  productQuantity,\n  showProfitability = false,\n}: VariantsSectionProps) {\n  /** Regenerate variants from current options, preserving existing data by name match */\n  const regenerateVariants = useCallback(\n    (options: VariantOption[]) => {\n      const combos = cartesian(options);\n      if (combos.length === 0) {\n        setVariants([]);\n        return;\n      }\n\n      setVariants((prev) => {\n        const existingByName = new Map<string, ProductVariant>();\n        for (const v of prev) {\n          existingByName.set(v.name, v);\n        }\n\n        return combos.map((data) => {\n          const name = variantName(data);\n          const existing = existingByName.get(name);\n          if (existing) {\n            return { ...existing, data };\n          }\n          return {\n            id:\n              crypto.randomUUID?.() ??\n              `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,\n            name,\n            price: defaultPrice,\n            quantity: 0,\n            data,\n          };\n        });\n      });\n    },\n    [defaultPrice, setVariants],\n  );\n\n  const handleToggle = useCallback(() => {\n    setHasVariants(!hasVariants);\n  }, [hasVariants, setHasVariants]);\n\n  const addOption = useCallback(() => {\n    setVariantOptions((prev) => {\n      if (prev.length >= MAX_OPTIONS) return prev;\n      return [...prev, { name: '', values: [] }];\n    });\n  }, [setVariantOptions]);\n\n  const removeOption = useCallback(\n    (index: number) => {\n      setVariantOptions((prev) => {\n        const next = prev.filter((_, i) => i !== index);\n        regenerateVariants(next);\n        return next;\n      });\n    },\n    [setVariantOptions, regenerateVariants],\n  );\n\n  const updateOptionName = useCallback(\n    (index: number, name: string) => {\n      setVariantOptions((prev) => {\n        const next = [...prev];\n        next[index] = { ...next[index], name };\n        regenerateVariants(next);\n        return next;\n      });\n    },\n    [setVariantOptions, regenerateVariants],\n  );\n\n  const addOptionValue = useCallback(\n    (index: number, value: string) => {\n      const trimmed = value.trim();\n      if (!trimmed) return;\n      setVariantOptions((prev) => {\n        const opt = prev[index];\n        if (opt.values.includes(trimmed)) return prev;\n        const next = [...prev];\n        next[index] = { ...opt, values: [...opt.values, trimmed] };\n        regenerateVariants(next);\n        return next;\n      });\n    },\n    [setVariantOptions, regenerateVariants],\n  );\n\n  const removeOptionValue = useCallback(\n    (optionIndex: number, valueIndex: number) => {\n      setVariantOptions((prev) => {\n        const opt = prev[optionIndex];\n        const next = [...prev];\n        next[optionIndex] = {\n          ...opt,\n          values: opt.values.filter((_, i) => i !== valueIndex),\n        };\n        regenerateVariants(next);\n        return next;\n      });\n    },\n    [setVariantOptions, regenerateVariants],\n  );\n\n  const updateVariantField = useCallback(\n    (\n      variantId: string,\n      field: 'price' | 'costPrice' | 'quantity' | 'sku',\n      value: string | number | null | undefined,\n    ) => {\n      setVariants((prev) =>\n        prev.map((v) => {\n          if (v.id !== variantId) return v;\n          if (field === 'sku')\n            return { ...v, sku: (value as string) || undefined };\n          if (field === 'price' || field === 'costPrice') {\n            const num =\n              typeof value === 'number'\n                ? value\n                : field === 'costPrice' && value == null\n                  ? null\n                  : value == null || value === ''\n                    ? undefined\n                    : Number(value);\n            return { ...v, [field]: num };\n          }\n          // quantity: parse as integer to strip leading zeros\n          const num =\n            value === '' || value === undefined\n              ? undefined\n              : parseInt(String(value), 10);\n          return { ...v, quantity: num != null && !isNaN(num) ? num : 0 };\n        }),\n      );\n    },\n    [setVariants],\n  );\n\n  const totalVariantQty = useMemo(\n    () => variants.reduce((sum, v) => sum + (v.quantity ?? 0), 0),\n    [variants],\n  );\n\n  const variantQtyWarning =\n    typeof productQuantity === 'number' &&\n    productQuantity > 0 &&\n    totalVariantQty > productQuantity\n      ? `Total variant quantity (${totalVariantQty}) exceeds product inventory (${productQuantity})`\n      : null;\n\n  const content = (\n    <>\n      {/* Toggle */}\n      <div className=\"flex items-center gap-3\">\n        <Toggle\n          checked={hasVariants}\n          onChange={handleToggle}\n          label=\"This item has options\"\n        />\n        <span className=\"text-sm text-[var(--text-primary)]\">\n          This item has options (like size or color)\n        </span>\n      </div>\n\n      {hasVariants && (\n        <>\n          {/* Options editor */}\n          <div className=\"space-y-4\">\n            {variantOptions.map((option, optIdx) => (\n              <OptionRow\n                key={optIdx}\n                option={option}\n                index={optIdx}\n                onNameChange={(name) => updateOptionName(optIdx, name)}\n                onAddValue={(value) => addOptionValue(optIdx, value)}\n                onRemoveValue={(valIdx) => removeOptionValue(optIdx, valIdx)}\n                onRemove={() => removeOption(optIdx)}\n                canRemove={variantOptions.length > 1}\n              />\n            ))}\n\n            {variantOptions.length < MAX_OPTIONS && (\n              <button\n                type=\"button\"\n                onClick={addOption}\n                className=\"flex items-center gap-2 text-xs text-brand-500 hover:text-brand-600 font-medium\"\n              >\n                <Plus />\n                Add another option\n              </button>\n            )}\n          </div>\n\n          {/* Auto-start with one option if empty */}\n          {variantOptions.length === 0 && (\n            <Button\n              variant=\"secondary\"\n              className=\"text-brand-500 border-dashed w-full\"\n              onClick={addOption}\n            >\n              <Plus className=\"size-4\" />\n              Add option (e.g. Size, Color)\n            </Button>\n          )}\n\n          {/* Generated variants table */}\n          {variants.length > 0 && (\n            <>\n              {variantQtyWarning && (\n                <p className=\"text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-md px-3 py-2\">\n                  {variantQtyWarning}\n                </p>\n              )}\n              <VariantsTable\n                variants={variants}\n                currencySymbol={currencySymbol}\n                onFieldChange={updateVariantField}\n                showProfitability={showProfitability}\n              />\n            </>\n          )}\n        </>\n      )}\n    </>\n  );\n\n  if (bare) return <div className=\"space-y-4\">{content}</div>;\n\n  return (\n    <section id=\"section-variants\" className=\"scroll-mt-36\">\n      <div className=\"surface\">\n        <div className=\"px-4 py-4 border-b border-[var(--border-subtle)]\">\n          <h2 className=\"text-sm font-semibold text-[var(--text-primary)]\">\n            Variants\n          </h2>\n          <p className=\"text-xs text-[var(--text-tertiary)] mt-1\">\n            Offer different options like size, color, or material\n          </p>\n        </div>\n        <div className=\"p-4 space-y-4\">{content}</div>\n      </div>\n    </section>\n  );\n}\n\n// ============================================================================\n// OPTION ROW\n// ============================================================================\n\nfunction OptionRow({\n  option,\n  index,\n  onNameChange,\n  onAddValue,\n  onRemoveValue,\n  onRemove,\n  canRemove,\n}: {\n  option: VariantOption;\n  index: number;\n  onNameChange: (name: string) => void;\n  onAddValue: (value: string) => void;\n  onRemoveValue: (valueIndex: number) => void;\n  onRemove: () => void;\n  canRemove: boolean;\n}) {\n  const [inputValue, setInputValue] = useState('');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' || e.key === ',') {\n      e.preventDefault();\n      const values = inputValue.split(',');\n      for (const v of values) {\n        onAddValue(v);\n      }\n      setInputValue('');\n    }\n  };\n\n  const handleBlur = () => {\n    if (inputValue.trim()) {\n      const values = inputValue.split(',');\n      for (const v of values) {\n        onAddValue(v);\n      }\n      setInputValue('');\n    }\n  };\n\n  const placeholders = [\n    'e.g. Size',\n    'e.g. Color',\n    'e.g. Material',\n    'e.g. Fit',\n    'e.g. Length',\n    'e.g. Sleeve',\n    'e.g. Style',\n    'e.g. Finish',\n  ];\n\n  return (\n    <div className=\"border border-[var(--border-subtle)] rounded-md p-4 space-y-3\">\n      <div className=\"flex items-center gap-2\">\n        <Input\n          type=\"text\"\n          value={option.name}\n          onChange={(e) => onNameChange(e.target.value)}\n          placeholder={placeholders[index] || 'Option name'}\n          className=\"flex-1\"\n        />\n        {canRemove && (\n          <button\n            type=\"button\"\n            onClick={onRemove}\n            className=\"p-2 text-[var(--text-muted)] hover:text-red-500 transition-colors\"\n          >\n            <Trash2 className=\"size-4\" />\n          </button>\n        )}\n      </div>\n\n      {/* Tag input for values */}\n      <div>\n        <div className=\"flex flex-wrap gap-2 mb-2\">\n          {option.values.map((val, valIdx) => (\n            <RemovableChip\n              key={valIdx}\n              removeLabel={`Remove ${val}`}\n              onRemove={() => onRemoveValue(valIdx)}\n            >\n              {val}\n            </RemovableChip>\n          ))}\n        </div>\n        <Input\n          type=\"text\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          placeholder={\n            option.values.length === 0\n              ? 'Type values and press Enter (e.g. S, M, L, XL)'\n              : 'Add more values...'\n          }\n          className=\"w-full\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["num"]}

package/dist/product-editor/sections/variants-table.d.ts

@@ -0,0 +1,9 @@
+import type { ProductVariant } from '@withpotter/lib/product-types';
+interface VariantsTableProps {
+    variants: ProductVariant[];
+    currencySymbol: string;
+    showProfitability: boolean;
+    onFieldChange: (variantId: string, field: 'price' | 'costPrice' | 'quantity' | 'sku', value: string | number | null | undefined) => void;
+}
+export declare function VariantsTable({ variants, currencySymbol, onFieldChange, showProfitability, }: VariantsTableProps): import("react").JSX.Element;
+export {};

package/dist/product-editor/sections/variants-table.js

@@ -0,0 +1,109 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CurrencyInput } from "@withpotter/ui-kit/currency-input";
+import { Input } from "@withpotter/ui-kit";
+import { productProfitability } from "@withpotter/lib/product-cost";
+function profitabilityLabel(variant) {
+  const result = productProfitability(variant.price, variant.costPrice);
+  if (!result) return "\u2014";
+  const margin = result.marginPercent === null ? "\u2014" : `${result.marginPercent.toLocaleString("en-US", {
+    maximumFractionDigits: 1
+  })}%`;
+  const markup = result.markupPercent === null ? "\u2014" : `${result.markupPercent.toLocaleString("en-US", {
+    maximumFractionDigits: 1
+  })}%`;
+  return `${margin} margin \xB7 ${markup} markup`;
+}
+function VariantsTable({
+  variants,
+  currencySymbol,
+  onFieldChange,
+  showProfitability
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "border border-[var(--border-subtle)] rounded-md overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider px-4 py-3 bg-[var(--bg-subtle)] border-b border-[var(--border-subtle)]", children: [
+      variants.length,
+      " variant",
+      variants.length !== 1 ? "s" : "",
+      " generated"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs(
+      "table",
+      {
+        className: `w-full text-sm ${showProfitability ? "min-w-[900px]" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-[var(--border-subtle)] bg-[var(--bg-subtle)]", children: [
+            /* @__PURE__ */ jsx("th", { className: "text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider", children: "Variant" }),
+            /* @__PURE__ */ jsx("th", { className: "text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-36", children: "Price" }),
+            showProfitability && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("th", { className: "text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-36", children: "Cost" }),
+              /* @__PURE__ */ jsx("th", { className: "text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-36", children: "Profit" })
+            ] }),
+            /* @__PURE__ */ jsx("th", { className: "text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-24", children: "Quantity" }),
+            /* @__PURE__ */ jsx("th", { className: "text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-32", children: "SKU" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: variants.map((variant) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              className: "border-b border-[var(--border-subtle)] last:border-b-0",
+              children: [
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-[var(--text-primary)] font-medium", children: variant.name }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                  CurrencyInput,
+                  {
+                    value: variant.price,
+                    onChange: (value) => onFieldChange(variant.id, "price", value),
+                    prefix: currencySymbol,
+                    className: "py-2"
+                  }
+                ) }),
+                showProfitability && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                    CurrencyInput,
+                    {
+                      value: variant.costPrice ?? void 0,
+                      onChange: (value) => onFieldChange(variant.id, "costPrice", value ?? null),
+                      prefix: currencySymbol,
+                      className: "py-2"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-xs text-[var(--text-secondary)] tabular-nums", children: profitabilityLabel(variant) })
+                ] }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    min: "0",
+                    step: "1",
+                    value: variant.quantity != null ? String(variant.quantity) : "",
+                    onChange: (event) => {
+                      const raw = event.target.value;
+                      const parsed = raw === "" ? "" : String(parseInt(raw, 10) || 0);
+                      onFieldChange(variant.id, "quantity", parsed);
+                    },
+                    className: "w-full"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx("td", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "text",
+                    value: variant.sku ?? "",
+                    onChange: (event) => onFieldChange(variant.id, "sku", event.target.value),
+                    placeholder: "Optional",
+                    className: "w-full"
+                  }
+                ) })
+              ]
+            },
+            variant.id
+          )) })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  VariantsTable
+};
+//# sourceMappingURL=variants-table.js.map

package/dist/product-editor/sections/variants-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/product-editor/sections/variants-table.tsx"],"sourcesContent":["'use client';\n\nimport type { ProductVariant } from '@withpotter/lib/product-types';\nimport { CurrencyInput } from '@withpotter/ui-kit/currency-input';\nimport { Input } from '@withpotter/ui-kit';\nimport { productProfitability } from '@withpotter/lib/product-cost';\n\ninterface VariantsTableProps {\n  variants: ProductVariant[];\n  currencySymbol: string;\n  showProfitability: boolean;\n  onFieldChange: (\n    variantId: string,\n    field: 'price' | 'costPrice' | 'quantity' | 'sku',\n    value: string | number | null | undefined,\n  ) => void;\n}\n\nfunction profitabilityLabel(variant: ProductVariant): string {\n  const result = productProfitability(variant.price, variant.costPrice);\n  if (!result) return '—';\n  const margin =\n    result.marginPercent === null\n      ? '—'\n      : `${result.marginPercent.toLocaleString('en-US', {\n          maximumFractionDigits: 1,\n        })}%`;\n  const markup =\n    result.markupPercent === null\n      ? '—'\n      : `${result.markupPercent.toLocaleString('en-US', {\n          maximumFractionDigits: 1,\n        })}%`;\n  return `${margin} margin · ${markup} markup`;\n}\n\nexport function VariantsTable({\n  variants,\n  currencySymbol,\n  onFieldChange,\n  showProfitability,\n}: VariantsTableProps) {\n  return (\n    <div className=\"border border-[var(--border-subtle)] rounded-md overflow-hidden\">\n      <div className=\"text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider px-4 py-3 bg-[var(--bg-subtle)] border-b border-[var(--border-subtle)]\">\n        {variants.length} variant{variants.length !== 1 ? 's' : ''} generated\n      </div>\n      <div className=\"overflow-x-auto\">\n        <table\n          className={`w-full text-sm ${showProfitability ? 'min-w-[900px]' : ''}`}\n        >\n          <thead>\n            <tr className=\"border-b border-[var(--border-subtle)] bg-[var(--bg-subtle)]\">\n              <th className=\"text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider\">\n                Variant\n              </th>\n              <th className=\"text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-36\">\n                Price\n              </th>\n              {showProfitability && (\n                <>\n                  <th className=\"text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-36\">\n                    Cost\n                  </th>\n                  <th className=\"text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-36\">\n                    Profit\n                  </th>\n                </>\n              )}\n              <th className=\"text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-24\">\n                Quantity\n              </th>\n              <th className=\"text-left px-4 py-2 text-xs font-medium text-[var(--text-tertiary)] uppercase tracking-wider w-32\">\n                SKU\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {variants.map((variant) => (\n              <tr\n                key={variant.id}\n                className=\"border-b border-[var(--border-subtle)] last:border-b-0\"\n              >\n                <td className=\"px-4 py-3 text-[var(--text-primary)] font-medium\">\n                  {variant.name}\n                </td>\n                <td className=\"px-4 py-3\">\n                  <CurrencyInput\n                    value={variant.price}\n                    onChange={(value) =>\n                      onFieldChange(variant.id, 'price', value)\n                    }\n                    prefix={currencySymbol}\n                    className=\"py-2\"\n                  />\n                </td>\n                {showProfitability && (\n                  <>\n                    <td className=\"px-4 py-3\">\n                      <CurrencyInput\n                        value={variant.costPrice ?? undefined}\n                        onChange={(value) =>\n                          onFieldChange(variant.id, 'costPrice', value ?? null)\n                        }\n                        prefix={currencySymbol}\n                        className=\"py-2\"\n                      />\n                    </td>\n                    <td className=\"px-4 py-3 text-xs text-[var(--text-secondary)] tabular-nums\">\n                      {profitabilityLabel(variant)}\n                    </td>\n                  </>\n                )}\n                <td className=\"px-4 py-3\">\n                  <Input\n                    type=\"number\"\n                    min=\"0\"\n                    step=\"1\"\n                    value={\n                      variant.quantity != null ? String(variant.quantity) : ''\n                    }\n                    onChange={(event) => {\n                      const raw = event.target.value;\n                      const parsed =\n                        raw === '' ? '' : String(parseInt(raw, 10) || 0);\n                      onFieldChange(variant.id, 'quantity', parsed);\n                    }}\n                    className=\"w-full\"\n                  />\n                </td>\n                <td className=\"px-4 py-3\">\n                  <Input\n                    type=\"text\"\n                    value={variant.sku ?? ''}\n                    onChange={(event) =>\n                      onFieldChange(variant.id, 'sku', event.target.value)\n                    }\n                    placeholder=\"Optional\"\n                    className=\"w-full\"\n                  />\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/product-editor/use-product-editor-categories.d.ts

@@ -0,0 +1,20 @@
+export interface ProductEditorCategory {
+    value: string;
+    label: string;
+    sortOrder?: number;
+}
+export type ProductEditorCategories = Record<string, ProductEditorCategory[]>;
+interface UseProductEditorCategoriesOptions {
+    tenantSlug?: string;
+    tenantSettings?: Record<string, unknown>;
+    categoryKey: string;
+    selectedCategories: string[];
+    setSelectedCategories: (categories: string[]) => void;
+    refreshTenant: () => Promise<unknown>;
+}
+export declare function useProductEditorCategories({ tenantSlug, tenantSettings, categoryKey, selectedCategories, setSelectedCategories, refreshTenant, }: UseProductEditorCategoriesOptions): {
+    tenantCategories: ProductEditorCategories;
+    handleCreateCategory: (label: string) => Promise<void>;
+    handleDeleteCategory: (value: string) => Promise<void>;
+};
+export {};

package/dist/product-editor/use-product-editor-categories.js

@@ -0,0 +1,103 @@
+"use client";
+import { useCallback, useState } from "react";
+import { tenantApi } from "@withpotter/lib/api/tenant";
+function categoriesFromSettings(settings) {
+  return settings?.categories ?? {};
+}
+function useProductEditorCategories({
+  tenantSlug,
+  tenantSettings,
+  categoryKey,
+  selectedCategories,
+  setSelectedCategories,
+  refreshTenant
+}) {
+  const [localCategories, setLocalCategories] = useState(() => ({
+    settings: tenantSettings,
+    categories: categoriesFromSettings(tenantSettings)
+  }));
+  const tenantCategories = localCategories.settings === tenantSettings ? localCategories.categories : categoriesFromSettings(tenantSettings);
+  const persistCategories = useCallback(
+    async (updated) => {
+      if (!tenantSlug) return;
+      const currentSettings = tenantSettings ?? {};
+      const currentCategories = currentSettings.categories || {};
+      await tenantApi.updateSettings(tenantSlug, {
+        ...currentSettings,
+        categories: { ...currentCategories, [categoryKey]: updated }
+      });
+      await refreshTenant();
+    },
+    [tenantSlug, tenantSettings, categoryKey, refreshTenant]
+  );
+  const handleCreateCategory = useCallback(
+    async (label) => {
+      if (!tenantSlug) return;
+      const slug = label.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_]+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+      if (!slug) return;
+      const existing = tenantCategories[categoryKey] || [];
+      if (existing.some((category) => category.value === slug)) return;
+      const newOption = {
+        value: slug,
+        label,
+        sortOrder: existing.length
+      };
+      const updated = [...existing, newOption];
+      setLocalCategories({
+        settings: tenantSettings,
+        categories: { ...tenantCategories, [categoryKey]: updated }
+      });
+      try {
+        await persistCategories(updated);
+      } catch (error) {
+        console.error("Failed to persist category:", error);
+      }
+    },
+    [
+      tenantSlug,
+      tenantSettings,
+      tenantCategories,
+      categoryKey,
+      persistCategories
+    ]
+  );
+  const handleDeleteCategory = useCallback(
+    async (value) => {
+      if (!tenantSlug) return;
+      const existing = tenantCategories[categoryKey] || [];
+      const updated = existing.filter((category) => category.value !== value).map((category, index) => ({ ...category, sortOrder: index }));
+      setLocalCategories({
+        settings: tenantSettings,
+        categories: { ...tenantCategories, [categoryKey]: updated }
+      });
+      if (selectedCategories.includes(value)) {
+        setSelectedCategories(
+          selectedCategories.filter((category) => category !== value)
+        );
+      }
+      try {
+        await persistCategories(updated);
+      } catch (error) {
+        console.error("Failed to delete category:", error);
+      }
+    },
+    [
+      tenantSlug,
+      tenantSettings,
+      tenantCategories,
+      categoryKey,
+      selectedCategories,
+      setSelectedCategories,
+      persistCategories
+    ]
+  );
+  return {
+    tenantCategories,
+    handleCreateCategory,
+    handleDeleteCategory
+  };
+}
+export {
+  useProductEditorCategories
+};
+//# sourceMappingURL=use-product-editor-categories.js.map

package/dist/product-editor/use-product-editor-categories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/product-editor/use-product-editor-categories.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { tenantApi } from '@withpotter/lib/api/tenant';\n\nexport interface ProductEditorCategory {\n  value: string;\n  label: string;\n  sortOrder?: number;\n}\n\nexport type ProductEditorCategories = Record<string, ProductEditorCategory[]>;\n\ninterface UseProductEditorCategoriesOptions {\n  tenantSlug?: string;\n  tenantSettings?: Record<string, unknown>;\n  categoryKey: string;\n  selectedCategories: string[];\n  setSelectedCategories: (categories: string[]) => void;\n  refreshTenant: () => Promise<unknown>;\n}\n\nfunction categoriesFromSettings(\n  settings?: Record<string, unknown>,\n): ProductEditorCategories {\n  return (settings?.categories as ProductEditorCategories | undefined) ?? {};\n}\n\nexport function useProductEditorCategories({\n  tenantSlug,\n  tenantSettings,\n  categoryKey,\n  selectedCategories,\n  setSelectedCategories,\n  refreshTenant,\n}: UseProductEditorCategoriesOptions) {\n  const [localCategories, setLocalCategories] = useState(() => ({\n    settings: tenantSettings,\n    categories: categoriesFromSettings(tenantSettings),\n  }));\n  const tenantCategories =\n    localCategories.settings === tenantSettings\n      ? localCategories.categories\n      : categoriesFromSettings(tenantSettings);\n\n  const persistCategories = useCallback(\n    async (updated: ProductEditorCategory[]) => {\n      if (!tenantSlug) return;\n      const currentSettings = tenantSettings ?? {};\n      const currentCategories =\n        (currentSettings.categories as Record<string, unknown>) || {};\n      await tenantApi.updateSettings(tenantSlug, {\n        ...currentSettings,\n        categories: { ...currentCategories, [categoryKey]: updated },\n      });\n      await refreshTenant();\n    },\n    [tenantSlug, tenantSettings, categoryKey, refreshTenant],\n  );\n\n  const handleCreateCategory = useCallback(\n    async (label: string) => {\n      if (!tenantSlug) return;\n      const slug = label\n        .toLowerCase()\n        .trim()\n        .replace(/[^\\w\\s-]/g, '')\n        .replace(/[\\s_]+/g, '-')\n        .replace(/-+/g, '-')\n        .replace(/^-|-$/g, '');\n      if (!slug) return;\n\n      const existing = tenantCategories[categoryKey] || [];\n      if (existing.some((category) => category.value === slug)) return;\n\n      const newOption = {\n        value: slug,\n        label,\n        sortOrder: existing.length,\n      };\n      const updated = [...existing, newOption];\n      setLocalCategories({\n        settings: tenantSettings,\n        categories: { ...tenantCategories, [categoryKey]: updated },\n      });\n\n      try {\n        await persistCategories(updated);\n      } catch (error) {\n        console.error('Failed to persist category:', error);\n      }\n    },\n    [\n      tenantSlug,\n      tenantSettings,\n      tenantCategories,\n      categoryKey,\n      persistCategories,\n    ],\n  );\n\n  const handleDeleteCategory = useCallback(\n    async (value: string) => {\n      if (!tenantSlug) return;\n\n      const existing = tenantCategories[categoryKey] || [];\n      const updated = existing\n        .filter((category) => category.value !== value)\n        .map((category, index) => ({ ...category, sortOrder: index }));\n\n      setLocalCategories({\n        settings: tenantSettings,\n        categories: { ...tenantCategories, [categoryKey]: updated },\n      });\n\n      if (selectedCategories.includes(value)) {\n        setSelectedCategories(\n          selectedCategories.filter((category) => category !== value),\n        );\n      }\n\n      try {\n        await persistCategories(updated);\n      } catch (error) {\n        console.error('Failed to delete category:', error);\n      }\n    },\n    [\n      tenantSlug,\n      tenantSettings,\n      tenantCategories,\n      categoryKey,\n      selectedCategories,\n      setSelectedCategories,\n      persistCategories,\n    ],\n  );\n\n  return {\n    tenantCategories,\n    handleCreateCategory,\n    handleDeleteCategory,\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa,gBAAgB;AACtC,SAAS,iBAAiB;AAmB1B,SAAS,uBACP,UACyB;AACzB,SAAQ,UAAU,cAAsD,CAAC;AAC3E;AAEO,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,OAAO;AAAA,IAC5D,UAAU;AAAA,IACV,YAAY,uBAAuB,cAAc;AAAA,EACnD,EAAE;AACF,QAAM,mBACJ,gBAAgB,aAAa,iBACzB,gBAAgB,aAChB,uBAAuB,cAAc;AAE3C,QAAM,oBAAoB;AAAA,IACxB,OAAO,YAAqC;AAC1C,UAAI,CAAC,WAAY;AACjB,YAAM,kBAAkB,kBAAkB,CAAC;AAC3C,YAAM,oBACH,gBAAgB,cAA0C,CAAC;AAC9D,YAAM,UAAU,eAAe,YAAY;AAAA,QACzC,GAAG;AAAA,QACH,YAAY,EAAE,GAAG,mBAAmB,CAAC,WAAW,GAAG,QAAQ;AAAA,MAC7D,CAAC;AACD,YAAM,cAAc;AAAA,IACtB;AAAA,IACA,CAAC,YAAY,gBAAgB,aAAa,aAAa;AAAA,EACzD;AAEA,QAAM,uBAAuB;AAAA,IAC3B,OAAO,UAAkB;AACvB,UAAI,CAAC,WAAY;AACjB,YAAM,OAAO,MACV,YAAY,EACZ,KAAK,EACL,QAAQ,aAAa,EAAE,EACvB,QAAQ,WAAW,GAAG,EACtB,QAAQ,OAAO,GAAG,EAClB,QAAQ,UAAU,EAAE;AACvB,UAAI,CAAC,KAAM;AAEX,YAAM,WAAW,iBAAiB,WAAW,KAAK,CAAC;AACnD,UAAI,SAAS,KAAK,CAAC,aAAa,SAAS,UAAU,IAAI,EAAG;AAE1D,YAAM,YAAY;AAAA,QAChB,OAAO;AAAA,QACP;AAAA,QACA,WAAW,SAAS;AAAA,MACtB;AACA,YAAM,UAAU,CAAC,GAAG,UAAU,SAAS;AACvC,yBAAmB;AAAA,QACjB,UAAU;AAAA,QACV,YAAY,EAAE,GAAG,kBAAkB,CAAC,WAAW,GAAG,QAAQ;AAAA,MAC5D,CAAC;AAED,UAAI;AACF,cAAM,kBAAkB,OAAO;AAAA,MACjC,SAAS,OAAO;AACd,gBAAQ,MAAM,+BAA+B,KAAK;AAAA,MACpD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,uBAAuB;AAAA,IAC3B,OAAO,UAAkB;AACvB,UAAI,CAAC,WAAY;AAEjB,YAAM,WAAW,iBAAiB,WAAW,KAAK,CAAC;AACnD,YAAM,UAAU,SACb,OAAO,CAAC,aAAa,SAAS,UAAU,KAAK,EAC7C,IAAI,CAAC,UAAU,WAAW,EAAE,GAAG,UAAU,WAAW,MAAM,EAAE;AAE/D,yBAAmB;AAAA,QACjB,UAAU;AAAA,QACV,YAAY,EAAE,GAAG,kBAAkB,CAAC,WAAW,GAAG,QAAQ;AAAA,MAC5D,CAAC;AAED,UAAI,mBAAmB,SAAS,KAAK,GAAG;AACtC;AAAA,UACE,mBAAmB,OAAO,CAAC,aAAa,aAAa,KAAK;AAAA,QAC5D;AAAA,MACF;AAEA,UAAI;AACF,cAAM,kBAAkB,OAAO;AAAA,MACjC,SAAS,OAAO;AACd,gBAAQ,MAAM,8BAA8B,KAAK;AAAA,MACnD;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/product-editor.d.ts

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

package/dist/product-editor.js

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

package/dist/product-research/privacy-settings-screen.d.ts

@@ -0,0 +1,5 @@
+interface PrivacySettingsScreenProps {
+    embedded?: boolean;
+}
+export declare function PrivacySettingsScreen({ embedded, }: PrivacySettingsScreenProps): import("react").JSX.Element;
+export {};