@withpotter/components 0.13.0-next.101

package/dist/custom-fields-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/custom-fields-step.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Trash2, Plus, Bookmark, X } from 'lucide-react';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { Textarea, Checkbox, Input, EmptyNote } from '@withpotter/ui-kit';\nimport { RemovableChip } from '@withpotter/ui-kit';\n\nexport type CustomFieldType = 'text' | 'number' | 'select' | 'textarea' | 'url';\nexport type CustomFieldPurpose = 'metadata' | 'input';\n\nexport interface CustomFieldDefinition {\n  key: string;\n  label: string;\n  type: CustomFieldType;\n  purpose?: CustomFieldPurpose;\n  options?: string[];\n  required?: boolean;\n  placeholder?: string;\n}\n\nexport interface CustomFieldEntry extends CustomFieldDefinition {\n  value: unknown;\n}\n\ninterface CustomFieldsStepProps {\n  customFields: CustomFieldEntry[];\n  onChange: (fields: CustomFieldEntry[]) => void;\n  savedDefinitions: CustomFieldDefinition[];\n  onSaveDefinition: (def: CustomFieldDefinition) => void;\n  onRemoveDefinition: (key: string) => void;\n}\n\nfunction toSnakeCase(str: string): string {\n  return str\n    .trim()\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, '_')\n    .replace(/^_|_$/g, '');\n}\n\nconst TYPE_BADGE: Record<string, string> = {\n  text: 'Abc',\n  number: '123',\n  url: 'URL',\n  select: 'List',\n  textarea: 'Text',\n};\n\nconst TYPE_OPTIONS = [\n  { value: 'text', label: 'Text' },\n  { value: 'number', label: 'Number' },\n  { value: 'select', label: 'Dropdown' },\n  { value: 'textarea', label: 'Long text' },\n  { value: 'url', label: 'URL' },\n] as const;\n\nconst PURPOSE_OPTIONS = [\n  { value: 'metadata', label: 'Product info' },\n  { value: 'input', label: 'Customer input' },\n] as const;\n\nfunction emptyField(): CustomFieldEntry {\n  return { key: '', label: '', type: 'text', purpose: 'metadata', value: '' };\n}\n\nexport function CustomFieldsStep({\n  customFields,\n  onChange,\n  savedDefinitions,\n  onSaveDefinition,\n  onRemoveDefinition,\n}: CustomFieldsStepProps) {\n  const addedKeys = new Set(customFields.map((f) => f.key));\n\n  function addField() {\n    onChange([...customFields, emptyField()]);\n  }\n\n  function addFromDefinition(def: CustomFieldDefinition) {\n    onChange([\n      ...customFields,\n      {\n        key: def.key,\n        label: def.label,\n        type: def.type,\n        purpose: def.purpose || 'metadata',\n        options: def.options,\n        required: def.required,\n        placeholder: def.placeholder,\n        value: '',\n      },\n    ]);\n  }\n\n  function removeField(index: number) {\n    onChange(customFields.filter((_, i) => i !== index));\n  }\n\n  function updateField(index: number, patch: Partial<CustomFieldEntry>) {\n    const updated = customFields.map((field, i) => {\n      if (i !== index) return field;\n      const merged = { ...field, ...patch };\n      if (patch.label !== undefined) {\n        merged.key = toSnakeCase(patch.label);\n      }\n      if (patch.type !== undefined && patch.type !== field.type) {\n        merged.value = '';\n        if (patch.type !== 'select') merged.options = undefined;\n      }\n      if (patch.purpose === 'input') {\n        merged.value = undefined;\n      }\n      if (patch.purpose === 'metadata') {\n        merged.required = undefined;\n        merged.placeholder = undefined;\n      }\n      return merged;\n    });\n    onChange(updated);\n  }\n\n  function handleSaveForReuse(field: CustomFieldEntry) {\n    if (!field.key || !field.label) return;\n    onSaveDefinition({\n      key: field.key,\n      label: field.label,\n      type: field.type,\n      purpose: field.purpose || 'metadata',\n      options: field.options,\n      required: field.required,\n      placeholder: field.placeholder,\n    });\n  }\n\n  const keyCounts = new Map<string, number>();\n  for (const field of customFields) {\n    if (field.key) {\n      keyCounts.set(field.key, (keyCounts.get(field.key) || 0) + 1);\n    }\n  }\n\n  const savedKeys = new Set(savedDefinitions.map((d) => d.key));\n\n  return (\n    <div className=\"space-y-4\">\n      <p className=\"text-xs text-[var(--text-tertiary)]\">\n        Add product info displayed on your store, or fields your customers fill\n        in before purchasing.\n      </p>\n\n      {/* Saved definitions — quick-add chips */}\n      {savedDefinitions.length > 0 && (\n        <div>\n          <p className=\"text-xs font-medium text-[var(--text-secondary)] mb-2\">\n            Saved fields\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {savedDefinitions.map((def) => {\n              const alreadyAdded = addedKeys.has(def.key);\n              return (\n                <span\n                  key={def.key}\n                  className=\"inline-flex items-center gap-1 border border-[var(--border-default)] rounded-full pl-3 pr-1 py-1 text-xs\"\n                >\n                  <button\n                    type=\"button\"\n                    disabled={alreadyAdded}\n                    onClick={() => addFromDefinition(def)}\n                    className={`inline-flex items-center gap-2 ${\n                      alreadyAdded\n                        ? 'text-[var(--text-muted)] cursor-default'\n                        : 'text-[var(--text-primary)] hover:text-brand-500 cursor-pointer'\n                    }`}\n                  >\n                    {def.label}\n                    <span className=\"text-3xs text-[var(--text-muted)] uppercase\">\n                      {TYPE_BADGE[def.type]}\n                    </span>\n                  </button>\n                  <button\n                    type=\"button\"\n                    onClick={() => onRemoveDefinition(def.key)}\n                    className=\"p-0.5 text-[var(--text-muted)] hover:text-red-500 transition-colors\"\n                    aria-label={`Remove ${def.label} from saved fields`}\n                  >\n                    <X />\n                  </button>\n                </span>\n              );\n            })}\n          </div>\n        </div>\n      )}\n\n      {/* Active custom fields */}\n      {customFields.length === 0 ? (\n        <div className=\"border border-dashed border-[var(--border-default)] rounded-md p-6 text-center\">\n          <EmptyNote className=\"mb-3\">No custom fields yet</EmptyNote>\n          <button\n            type=\"button\"\n            onClick={addField}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-brand-500 hover:text-brand-600 transition-colors\"\n          >\n            <Plus className=\"size-4\" />\n            Add field\n          </button>\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {customFields.map((field, index) => {\n            const isDuplicate =\n              field.key !== '' && (keyCounts.get(field.key) || 0) > 1;\n            const isSaved = field.key !== '' && savedKeys.has(field.key);\n            const purpose = field.purpose || 'metadata';\n            const isInput = purpose === 'input';\n\n            return (\n              <div\n                key={index}\n                className=\"border border-[var(--border-default)] rounded-md p-3 space-y-2\"\n              >\n                {/* Purpose toggle */}\n                <div className=\"flex items-center gap-1 mb-1\">\n                  {PURPOSE_OPTIONS.map((opt) => (\n                    <button\n                      key={opt.value}\n                      type=\"button\"\n                      onClick={() =>\n                        updateField(index, {\n                          purpose: opt.value as CustomFieldPurpose,\n                        })\n                      }\n                      className={`px-3 py-1 text-xs rounded-full transition-colors ${\n                        purpose === opt.value\n                          ? 'bg-brand-50 text-brand-600 font-medium border border-brand-200'\n                          : 'text-[var(--text-muted)] hover:text-[var(--text-secondary)] border border-transparent'\n                      }`}\n                    >\n                      {opt.label}\n                    </button>\n                  ))}\n                </div>\n\n                <div className=\"flex items-start gap-2\">\n                  {/* Label */}\n                  <div className=\"flex-1 min-w-0\">\n                    <label className=\"block text-xs font-medium text-[var(--text-secondary)] mb-1\">\n                      Name\n                    </label>\n                    <Input\n                      value={field.label}\n                      onChange={(e) =>\n                        updateField(index, { label: e.target.value })\n                      }\n                      placeholder={\n                        isInput ? 'e.g. Gift Message' : 'e.g. Material'\n                      }\n                    />\n                    {isDuplicate && (\n                      <p className=\"text-xs text-red-500 mt-0.5\">\n                        Duplicate field name\n                      </p>\n                    )}\n                  </div>\n\n                  {/* Type */}\n                  <div className=\"w-24 flex-shrink-0\">\n                    <label className=\"block text-xs font-medium text-[var(--text-secondary)] mb-1\">\n                      Type\n                    </label>\n                    <Select\n                      value={field.type}\n                      onChange={(val) =>\n                        updateField(index, {\n                          type: val as CustomFieldType,\n                        })\n                      }\n                      options={TYPE_OPTIONS}\n                    />\n                  </div>\n\n                  {/* Save for reuse */}\n                  {field.key && !isSaved && (\n                    <button\n                      type=\"button\"\n                      onClick={() => handleSaveForReuse(field)}\n                      className=\"mt-4 p-2 text-[var(--text-muted)] hover:text-brand-500 transition-colors flex-shrink-0\"\n                      aria-label=\"Save field for reuse\"\n                      title=\"Save for reuse\"\n                    >\n                      <Bookmark className=\"size-4\" />\n                    </button>\n                  )}\n\n                  {/* Remove */}\n                  <button\n                    type=\"button\"\n                    onClick={() => removeField(index)}\n                    className=\"mt-4 p-2 text-[var(--text-muted)] hover:text-red-500 transition-colors flex-shrink-0\"\n                    aria-label=\"Remove field\"\n                  >\n                    <Trash2 className=\"size-4\" />\n                  </button>\n                </div>\n\n                {/* Select options (when type = select) */}\n                {field.type === 'select' && (\n                  <SelectOptionsInput\n                    options={field.options || []}\n                    onChange={(options) => updateField(index, { options })}\n                  />\n                )}\n\n                {/* Metadata: Value input */}\n                {!isInput && field.type !== 'select' && (\n                  <div>\n                    <label className=\"block text-xs font-medium text-[var(--text-secondary)] mb-1\">\n                      Value\n                    </label>\n                    {field.type === 'number' ? (\n                      <Input\n                        type=\"number\"\n                        value={field.value as string | number}\n                        onChange={(e) =>\n                          updateField(index, {\n                            value:\n                              e.target.value === ''\n                                ? ''\n                                : parseFloat(e.target.value),\n                          })\n                        }\n                        placeholder=\"0\"\n                      />\n                    ) : field.type === 'textarea' ? (\n                      <Textarea\n                        value={field.value as string}\n                        onChange={(e) =>\n                          updateField(index, { value: e.target.value })\n                        }\n                        placeholder=\"Enter value\"\n                        rows={3}\n                        className=\"w-full resize-y\"\n                      />\n                    ) : (\n                      <Input\n                        type={field.type}\n                        value={field.value as string}\n                        onChange={(e) =>\n                          updateField(index, { value: e.target.value })\n                        }\n                        placeholder={\n                          field.type === 'url' ? 'https://...' : 'Enter value'\n                        }\n                      />\n                    )}\n                  </div>\n                )}\n\n                {/* Metadata: Value for select type */}\n                {!isInput &&\n                  field.type === 'select' &&\n                  (field.options?.length ?? 0) > 0 && (\n                    <div>\n                      <label className=\"block text-xs font-medium text-[var(--text-secondary)] mb-1\">\n                        Value\n                      </label>\n                      <Select\n                        value={(field.value as string) || ''}\n                        onChange={(val) => updateField(index, { value: val })}\n                        options={[\n                          { value: '', label: 'Select...' },\n                          ...(field.options || []).map((o) => ({\n                            value: o,\n                            label: o,\n                          })),\n                        ]}\n                      />\n                    </div>\n                  )}\n\n                {/* Input: Required + Placeholder */}\n                {isInput && (\n                  <div className=\"flex items-center gap-4\">\n                    <Checkbox\n                      checked={field.required ?? false}\n                      onChange={(e) =>\n                        updateField(index, { required: e.target.checked })\n                      }\n                      label=\"Required\"\n                    />\n                    <div className=\"flex-1\">\n                      <Input\n                        value={field.placeholder || ''}\n                        onChange={(e) =>\n                          updateField(index, {\n                            placeholder: e.target.value || undefined,\n                          })\n                        }\n                        placeholder=\"Placeholder text (optional)\"\n                        className=\"text-xs\"\n                      />\n                    </div>\n                  </div>\n                )}\n              </div>\n            );\n          })}\n\n          <button\n            type=\"button\"\n            onClick={addField}\n            className=\"inline-flex items-center gap-2 text-sm font-medium text-brand-500 hover:text-brand-600 transition-colors\"\n          >\n            <Plus className=\"size-4\" />\n            Add field\n          </button>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// SELECT OPTIONS INPUT (tag-style)\n// ============================================================================\n\nfunction SelectOptionsInput({\n  options,\n  onChange,\n}: {\n  options: string[];\n  onChange: (options: string[]) => void;\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      const next = [...options];\n      for (const v of values) {\n        const trimmed = v.trim();\n        if (trimmed && !next.includes(trimmed)) next.push(trimmed);\n      }\n      onChange(next);\n      setInputValue('');\n    }\n  };\n\n  const handleBlur = () => {\n    if (inputValue.trim()) {\n      const values = inputValue.split(',');\n      const next = [...options];\n      for (const v of values) {\n        const trimmed = v.trim();\n        if (trimmed && !next.includes(trimmed)) next.push(trimmed);\n      }\n      onChange(next);\n      setInputValue('');\n    }\n  };\n\n  return (\n    <div>\n      <label className=\"block text-xs font-medium text-[var(--text-secondary)] mb-1\">\n        Options\n      </label>\n      <div className=\"flex flex-wrap gap-2 mb-2\">\n        {options.map((opt, i) => (\n          <RemovableChip\n            key={i}\n            removeLabel={`Remove ${opt}`}\n            onRemove={() => onChange(options.filter((_, j) => j !== i))}\n          >\n            {opt}\n          </RemovableChip>\n        ))}\n      </div>\n      <Input\n        value={inputValue}\n        onChange={(e) => setInputValue(e.target.value)}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        placeholder={\n          options.length === 0\n            ? 'Type options and press Enter (e.g. Small, Medium, Large)'\n            : 'Add more options...'\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/customer-editor/customer-editor-content.d.ts

@@ -0,0 +1,7 @@
+import type { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';
+type CustomerFormState = ReturnType<typeof useCustomerFormState>;
+interface CustomerEditorContentProps {
+    state: CustomerFormState;
+}
+export declare function CustomerEditorContent({ state }: CustomerEditorContentProps): import("react").JSX.Element;
+export {};

package/dist/customer-editor/customer-editor-content.js

@@ -0,0 +1,160 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cardClass } from "@withpotter/ui-kit/card";
+import { User, Tag, Mail, Phone, CircleDot } from "lucide-react";
+import { Select } from "@withpotter/ui-kit/select";
+import { Checkbox } from "@withpotter/ui-kit/checkbox";
+import { GeneratedAvatar } from "@withpotter/ui-kit/generated-avatar";
+import { PhoneInput } from "./phone-input";
+import { Input, DateField } from "@withpotter/ui-kit";
+const STATUS_OPTIONS = [
+  { value: "active", label: "Active" },
+  { value: "suspended", label: "Suspended" },
+  { value: "archived", label: "Archived" }
+];
+const CARD = `${cardClass} p-4`;
+function CardHeading({
+  icon: Icon,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("h2", { className: "mb-4 flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] [&_svg]:text-[var(--text-tertiary)]", children: [
+    /* @__PURE__ */ jsx(Icon, {}),
+    children
+  ] });
+}
+function CustomerEditorContent({ state }) {
+  const previewContact = state.phone || state.email || "Add a phone number or email";
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 items-start gap-4 pb-12 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${cardClass} flex items-center gap-4 p-4 animate-[slide-up_var(--motion-normal)_var(--motion-ease-settle)]`,
+          children: [
+            state.name.trim() ? /* @__PURE__ */ jsx(
+              GeneratedAvatar,
+              {
+                name: state.name,
+                className: "h-14 w-14 shrink-0 transition-transform duration-[var(--motion-normal)]"
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "squircle flex h-14 w-14 shrink-0 items-center justify-center bg-[var(--bg-muted)] text-[var(--text-muted)] [&_svg]:h-5 [&_svg]:w-5", children: /* @__PURE__ */ jsx(User, {}) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-lg font-semibold text-[var(--text-primary)]", children: state.name.trim() || "New customer" }),
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-[var(--text-tertiary)]", children: previewContact })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: CARD, children: [
+        /* @__PURE__ */ jsx(CardHeading, { icon: User, children: "Contact" }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "mb-2 block text-sm font-medium text-[var(--text-secondary)]", children: "Name" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                value: state.name,
+                onChange: (e) => state.setName(e.target.value),
+                placeholder: "Name, nickname, or how they're saved"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "mb-2 flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)] [&_svg]:text-[var(--text-muted)]", children: [
+              /* @__PURE__ */ jsx(Phone, {}),
+              "Phone"
+            ] }),
+            /* @__PURE__ */ jsx(
+              PhoneInput,
+              {
+                value: state.phone,
+                onChange: state.setPhone,
+                variant: "desktop",
+                className: "w-full text-sm"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("label", { className: "mb-2 flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)] [&_svg]:text-[var(--text-muted)]", children: [
+              /* @__PURE__ */ jsx(Mail, {}),
+              "Email"
+            ] }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "email",
+                value: state.email,
+                onChange: (e) => state.setEmail(e.target.value),
+                placeholder: "customer@example.com"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Add at least a phone number or an email so you can reach them." })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: CARD, children: [
+        /* @__PURE__ */ jsx(CardHeading, { icon: Tag, children: "Tags" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: state.tags,
+              onChange: (e) => state.setTags(e.target.value),
+              placeholder: "vip, wholesale (comma-separated)"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: "Separate tags with commas" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 border-t border-[var(--border-subtle)] pt-4", children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              className: "mb-2 block text-sm font-medium text-[var(--text-secondary)]",
+              htmlFor: "customer-birthday",
+              children: "Birthday"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DateField,
+            {
+              id: "customer-birthday",
+              value: state.birthday,
+              onChange: state.setBirthday,
+              max: (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-[var(--text-tertiary)]", children: "Most customers never give one. With it, and with consent below, the birthday automation can greet them." })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-[var(--border-subtle)] pt-4", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: state.acceptsMarketing,
+            onChange: (e) => state.setAcceptsMarketing(e.target.checked),
+            label: /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-[var(--text-secondary)]", children: "Accepts marketing" }),
+              /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--text-tertiary)]", children: "Customer consents to receive promotional messages" })
+            ] })
+          }
+        ) })
+      ] }),
+      state.isEditing && /* @__PURE__ */ jsxs("div", { className: CARD, children: [
+        /* @__PURE__ */ jsx(CardHeading, { icon: CircleDot, children: "Status" }),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: state.status,
+            onChange: (value) => state.setStatus(value),
+            options: STATUS_OPTIONS,
+            className: "max-w-xs"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  CustomerEditorContent
+};
+//# sourceMappingURL=customer-editor-content.js.map

package/dist/customer-editor/customer-editor-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/customer-editor/customer-editor-content.tsx"],"sourcesContent":["'use client';\n\nimport { cardClass } from '@withpotter/ui-kit/card';\nimport { User, Tag, Mail, Phone, CircleDot } from 'lucide-react';\nimport type { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { Checkbox } from '@withpotter/ui-kit/checkbox';\nimport { GeneratedAvatar } from '@withpotter/ui-kit/generated-avatar';\nimport { PhoneInput } from './phone-input';\nimport { Input, DateField } from '@withpotter/ui-kit';\n\ntype CustomerFormState = ReturnType<typeof useCustomerFormState>;\n\nconst STATUS_OPTIONS = [\n  { value: 'active', label: 'Active' },\n  { value: 'suspended', label: 'Suspended' },\n  { value: 'archived', label: 'Archived' },\n] as const;\n\n// Same muted panel tint as the preview + stat cards, so the form has depth\n// instead of reading flat against the shell.\nconst CARD = `${cardClass} p-4`;\n\n/** Section heading with a quiet leading icon. */\nfunction CardHeading({\n  icon: Icon,\n  children,\n}: {\n  icon: typeof User;\n  children: React.ReactNode;\n}) {\n  return (\n    <h2 className=\"mb-4 flex items-center gap-2 text-sm font-semibold text-[var(--text-primary)] [&_svg]:text-[var(--text-tertiary)]\">\n      <Icon />\n      {children}\n    </h2>\n  );\n}\n\ninterface CustomerEditorContentProps {\n  state: CustomerFormState;\n}\n\nexport function CustomerEditorContent({ state }: CustomerEditorContentProps) {\n  const previewContact =\n    state.phone || state.email || 'Add a phone number or email';\n\n  return (\n    <div className=\"grid grid-cols-1 items-start gap-4 pb-12 lg:grid-cols-2\">\n      {/* Left column: identity preview + contact */}\n      <div className=\"space-y-4\">\n        {/* Live identity preview — the avatar's colour is minted from the name,\n            so it paints in as you type. A quiet bit of life on an otherwise\n            plain form (the same avatar shows up across the app). */}\n        <div\n          className={`${cardClass} flex items-center gap-4 p-4 animate-[slide-up_var(--motion-normal)_var(--motion-ease-settle)]`}\n        >\n          {state.name.trim() ? (\n            <GeneratedAvatar\n              name={state.name}\n              className=\"h-14 w-14 shrink-0 transition-transform duration-[var(--motion-normal)]\"\n            />\n          ) : (\n            <span className=\"squircle flex h-14 w-14 shrink-0 items-center justify-center bg-[var(--bg-muted)] text-[var(--text-muted)] [&_svg]:h-5 [&_svg]:w-5\">\n              <User />\n            </span>\n          )}\n          <div className=\"min-w-0\">\n            <p className=\"truncate text-lg font-semibold text-[var(--text-primary)]\">\n              {state.name.trim() || 'New customer'}\n            </p>\n            <p className=\"truncate text-sm text-[var(--text-tertiary)]\">\n              {previewContact}\n            </p>\n          </div>\n        </div>\n\n        {/* Contact */}\n        <div className={CARD}>\n          <CardHeading icon={User}>Contact</CardHeading>\n          <div className=\"space-y-4\">\n            <div>\n              <label className=\"mb-2 block text-sm font-medium text-[var(--text-secondary)]\">\n                Name\n              </label>\n              <Input\n                value={state.name}\n                onChange={(e) => state.setName(e.target.value)}\n                placeholder=\"Name, nickname, or how they're saved\"\n              />\n            </div>\n            <div>\n              <label className=\"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)] [&_svg]:text-[var(--text-muted)]\">\n                <Phone />\n                Phone\n              </label>\n              <PhoneInput\n                value={state.phone}\n                onChange={state.setPhone}\n                variant=\"desktop\"\n                className=\"w-full text-sm\"\n              />\n            </div>\n            <div>\n              <label className=\"mb-2 flex items-center gap-2 text-sm font-medium text-[var(--text-secondary)] [&_svg]:text-[var(--text-muted)]\">\n                <Mail />\n                Email\n              </label>\n              <Input\n                type=\"email\"\n                value={state.email}\n                onChange={(e) => state.setEmail(e.target.value)}\n                placeholder=\"customer@example.com\"\n              />\n            </div>\n            <p className=\"text-xs text-[var(--text-tertiary)]\">\n              Add at least a phone number or an email so you can reach them.\n            </p>\n          </div>\n        </div>\n      </div>\n\n      {/* Right column: tags + status */}\n      <div className=\"space-y-4\">\n        {/* Tags + marketing consent */}\n        <div className={CARD}>\n          <CardHeading icon={Tag}>Tags</CardHeading>\n          <div>\n            <Input\n              value={state.tags}\n              onChange={(e) => state.setTags(e.target.value)}\n              placeholder=\"vip, wholesale (comma-separated)\"\n            />\n            <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n              Separate tags with commas\n            </p>\n          </div>\n\n          {/* A birthday, which is the whole reason the birthday automation can\n              exist. Here rather than beside name and phone because it is a\n              thing a merchant LEARNS about a customer rather than a way of\n              reaching them — and it sits next to marketing consent because a\n              greeting is a marketing message and needs both to be useful. */}\n          <div className=\"mt-4 border-t border-[var(--border-subtle)] pt-4\">\n            <label\n              className=\"mb-2 block text-sm font-medium text-[var(--text-secondary)]\"\n              htmlFor=\"customer-birthday\"\n            >\n              Birthday\n            </label>\n            <DateField\n              id=\"customer-birthday\"\n              value={state.birthday}\n              onChange={state.setBirthday}\n              /* Nobody being greeted was born tomorrow, and a future date is\n                 almost always a typed year that slipped. */\n              max={new Date().toISOString().slice(0, 10)}\n            />\n            <p className=\"mt-2 text-xs text-[var(--text-tertiary)]\">\n              Most customers never give one. With it, and with consent below,\n              the birthday automation can greet them.\n            </p>\n          </div>\n\n          <div className=\"mt-4 border-t border-[var(--border-subtle)] pt-4\">\n            <Checkbox\n              checked={state.acceptsMarketing}\n              onChange={(e) => state.setAcceptsMarketing(e.target.checked)}\n              label={\n                <span>\n                  <span className=\"block text-sm font-medium text-[var(--text-secondary)]\">\n                    Accepts marketing\n                  </span>\n                  <span className=\"block text-xs text-[var(--text-tertiary)]\">\n                    Customer consents to receive promotional messages\n                  </span>\n                </span>\n              }\n            />\n          </div>\n        </div>\n\n        {/* Status — edit only */}\n        {state.isEditing && (\n          <div className={CARD}>\n            <CardHeading icon={CircleDot}>Status</CardHeading>\n            <Select\n              value={state.status}\n              onChange={(value) =>\n                state.setStatus(value as 'active' | 'suspended' | 'archived')\n              }\n              options={STATUS_OPTIONS}\n              className=\"max-w-xs\"\n            />\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/customer-editor/customer-editor-page.d.ts

@@ -0,0 +1,5 @@
+interface CustomerEditorPageProps {
+    mode: 'create' | 'edit';
+}
+export declare function CustomerEditorPage({ mode }: CustomerEditorPageProps): import("react").JSX.Element;
+export {};

package/dist/customer-editor/customer-editor-page.js

@@ -0,0 +1,224 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useRouter, useParams } from "next/navigation";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { membersApi } from "@withpotter/lib/api/members";
+import { useCustomerFormState } from "@withpotter/hooks/use-customer-form-state";
+import { useDraftForm } from "@withpotter/hooks/use-draft-form";
+import { draftKey } from "@withpotter/lib/form-draft";
+import { ImportCustomersModal } from "@withpotter/pages-crm/dashboard/(crm)/customers/_components/import-customers-modal";
+import { useEditorDirtyTracking } from "@withpotter/components/editor-shared";
+import { DetailPageSkeleton } from "@withpotter/ui-kit/page-skeletons";
+import { AlertTriangle, ArrowLeft } from "lucide-react";
+import { useDetailHeader } from "@withpotter/hooks/use-detail-header";
+import { useConfirm } from "@withpotter/ui-kit/confirm-dialog";
+import { CustomerEditor } from "./customer-editor";
+function CustomerEditorPage({ mode }) {
+  const [importOpen, setImportOpen] = useState(false);
+  const router = useRouter();
+  const params = useParams();
+  const { tenant } = useAuth();
+  const confirm = useConfirm();
+  const customerId = mode === "edit" ? params?.customerId : void 0;
+  const [customer, setCustomer] = useState(null);
+  const [loadingCustomer, setLoadingCustomer] = useState(mode === "edit");
+  const [loadError, setLoadError] = useState(null);
+  useEffect(() => {
+    if (mode !== "edit" || !tenant?.slug || !customerId) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setLoadingCustomer(true);
+      setLoadError(null);
+      try {
+        const result = await membersApi.getById(tenant.slug, customerId);
+        if (!cancelled) setCustomer(result);
+      } catch (e) {
+        if (!cancelled) setLoadError(e?.message || "Failed to load customer");
+      } finally {
+        if (!cancelled) setLoadingCustomer(false);
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, tenant?.slug, customerId]);
+  useEffect(() => {
+    router.prefetch("/dashboard/customers");
+  }, [router]);
+  const state = useCustomerFormState({
+    customer: mode === "edit" ? customer : null
+  });
+  const { isDirty, setIsDirty } = useEditorDirtyTracking([
+    state.name,
+    state.email,
+    state.phone,
+    state.tags,
+    state.acceptsMarketing,
+    state.birthday,
+    state.status
+  ]);
+  const discardDraft = useDraftForm({
+    key: mode === "create" ? draftKey(tenant?.slug, "customer") : null,
+    label: "customer",
+    value: {
+      name: state.name,
+      email: state.email,
+      phone: state.phone,
+      tags: state.tags,
+      acceptsMarketing: state.acceptsMarketing,
+      birthday: state.birthday,
+      status: state.status
+    },
+    restore: (d) => {
+      state.setName(d.name);
+      state.setEmail(d.email);
+      state.setPhone(d.phone);
+      state.setTags(d.tags);
+      state.setAcceptsMarketing(d.acceptsMarketing);
+      state.setBirthday(d.birthday);
+      state.setStatus(d.status);
+    }
+  });
+  const [deleting, setDeleting] = useState(false);
+  const handleDelete = useCallback(async () => {
+    if (!tenant?.slug || !customerId) return;
+    const ok = await confirm({
+      title: "Archive this customer?",
+      description: "They will be moved to your archived customers. You can restore them later.",
+      tone: "danger",
+      confirmLabel: "Archive"
+    });
+    if (!ok) return;
+    setDeleting(true);
+    try {
+      await membersApi.update(tenant.slug, customerId, { status: "archived" });
+      router.replace("/dashboard/customers");
+    } catch (e) {
+      state.setError(e?.message || "Failed to archive");
+      setDeleting(false);
+    }
+  }, [tenant?.slug, customerId, router, state, confirm]);
+  const handleSave = useCallback(async () => {
+    if (!tenant?.slug) return;
+    const validationError = state.validate();
+    if (validationError) {
+      state.setError(validationError);
+      return;
+    }
+    state.setSaving(true);
+    state.setError(null);
+    try {
+      if (mode === "edit" && customerId) {
+        const payload = state.buildUpdatePayload();
+        await membersApi.update(tenant.slug, customerId, payload);
+        setIsDirty(false);
+        router.push(`/dashboard/customers/${customerId}`);
+      } else {
+        const payload = state.buildCreatePayload();
+        const result = await membersApi.create(tenant.slug, payload);
+        setIsDirty(false);
+        discardDraft();
+        router.replace(`/dashboard/customers/${result.id}`);
+      }
+    } catch (err) {
+      const existingId = err?.details?.existingMemberId;
+      if (existingId) {
+        const open = await confirm({
+          title: "They are already a customer",
+          description: err instanceof Error ? `${err.message} Open their record?` : "Open their record?",
+          confirmLabel: "Open their record",
+          cancelLabel: "Keep editing"
+        });
+        if (open) {
+          setIsDirty(false);
+          router.push(`/dashboard/customers/${existingId}`);
+        }
+        return;
+      }
+      state.setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      state.setSaving(false);
+    }
+  }, [
+    tenant?.slug,
+    state,
+    mode,
+    customerId,
+    router,
+    setIsDirty,
+    confirm,
+    discardDraft
+  ]);
+  const editorTitle = mode === "edit" ? state.name || "Edit Customer" : "New Customer";
+  const backUrl = mode === "edit" && customerId ? `/dashboard/customers/${customerId}` : "/dashboard/customers";
+  const guardedNavigate = useCallback(
+    async (href) => {
+      if (isDirty) {
+        const ok = await confirm({
+          title: "Discard changes?",
+          description: "Your edits won't be saved.",
+          tone: "danger",
+          confirmLabel: "Discard"
+        });
+        if (!ok) return;
+      }
+      router.push(href);
+    },
+    [isDirty, confirm, router]
+  );
+  useDetailHeader({
+    title: editorTitle,
+    onBack: () => guardedNavigate(backUrl)
+  });
+  if (mode === "edit" && loadingCustomer) {
+    return /* @__PURE__ */ jsx(DetailPageSkeleton, { maxWidth: "max-w-4xl" });
+  }
+  if (mode === "edit" && (loadError || !customer)) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => router.push("/dashboard/customers"),
+          className: "flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] mb-6 transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" }),
+            "Back to customers"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "bg-[var(--error-bg)] border border-[var(--error)]/20 rounded-md p-6 text-center", children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "size-8 text-[var(--error)] mx-auto mb-2" }),
+        /* @__PURE__ */ jsx("p", { className: "text-[var(--error)] font-medium", children: loadError || "Customer not found" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      CustomerEditor,
+      {
+        state,
+        isDirty,
+        onSave: handleSave,
+        onNavigateAway: guardedNavigate,
+        backUrl,
+        onDelete: mode === "edit" ? handleDelete : void 0,
+        deleting,
+        onImport: mode === "create" ? () => setImportOpen(true) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImportCustomersModal,
+      {
+        open: importOpen,
+        onClose: () => setImportOpen(false)
+      }
+    )
+  ] });
+}
+export {
+  CustomerEditorPage
+};
+//# sourceMappingURL=customer-editor-page.js.map

package/dist/customer-editor/customer-editor-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/customer-editor/customer-editor-page.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { useRouter, useParams } from 'next/navigation';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { membersApi } from '@withpotter/lib/api/members';\nimport type { Member } from '@withpotter/lib/api/types';\nimport { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';\nimport { useDraftForm } from '@withpotter/hooks/use-draft-form';\nimport { draftKey } from '@withpotter/lib/form-draft';\nimport { ImportCustomersModal } from '@withpotter/pages-crm/dashboard/(crm)/customers/_components/import-customers-modal';\nimport { useEditorDirtyTracking } from '@withpotter/components/editor-shared';\nimport { DetailPageSkeleton } from '@withpotter/ui-kit/page-skeletons';\nimport { AlertTriangle, ArrowLeft } from 'lucide-react';\nimport { useDetailHeader } from '@withpotter/hooks/use-detail-header';\nimport { useConfirm } from '@withpotter/ui-kit/confirm-dialog';\nimport { CustomerEditor } from './customer-editor';\n\ninterface CustomerEditorPageProps {\n  mode: 'create' | 'edit';\n}\n\nexport function CustomerEditorPage({ mode }: CustomerEditorPageProps) {\n  // The importer moved here from the list toolbar: adding one person and adding\n  // two hundred are the same intention, and splitting them across two screens\n  // made Import a thing you had to already know about.\n  const [importOpen, setImportOpen] = useState(false);\n  const router = useRouter();\n  const params = useParams();\n  const { tenant } = useAuth();\n  const confirm = useConfirm();\n\n  const customerId =\n    mode === 'edit' ? (params?.customerId as string) : undefined;\n\n  const [customer, setCustomer] = useState<Member | null>(null);\n  const [loadingCustomer, setLoadingCustomer] = useState(mode === 'edit');\n  const [loadError, setLoadError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (mode !== 'edit' || !tenant?.slug || !customerId) return;\n    let cancelled = false;\n\n    const fetchData = async () => {\n      setLoadingCustomer(true);\n      setLoadError(null);\n      try {\n        const result = await membersApi.getById(tenant.slug, customerId);\n        if (!cancelled) setCustomer(result);\n      } catch (e: any) {\n        if (!cancelled) setLoadError(e?.message || 'Failed to load customer');\n      } finally {\n        if (!cancelled) setLoadingCustomer(false);\n      }\n    };\n    fetchData();\n    return () => {\n      cancelled = true;\n    };\n  }, [mode, tenant?.slug, customerId]);\n\n  // Prefetch the customers list so Back/Discard returns instantly.\n  useEffect(() => {\n    router.prefetch('/dashboard/customers');\n  }, [router]);\n\n  const state = useCustomerFormState({\n    customer: mode === 'edit' ? customer : null,\n  });\n\n  const { isDirty, setIsDirty } = useEditorDirtyTracking([\n    state.name,\n    state.email,\n    state.phone,\n    state.tags,\n    state.acceptsMarketing,\n    state.birthday,\n    state.status,\n  ]);\n\n  // A new customer survives an interruption (a call, switching apps).\n  const discardDraft = useDraftForm({\n    key: mode === 'create' ? draftKey(tenant?.slug, 'customer') : null,\n    label: 'customer',\n    value: {\n      name: state.name,\n      email: state.email,\n      phone: state.phone,\n      tags: state.tags,\n      acceptsMarketing: state.acceptsMarketing,\n      birthday: state.birthday,\n      status: state.status,\n    },\n    restore: (d) => {\n      state.setName(d.name);\n      state.setEmail(d.email);\n      state.setPhone(d.phone);\n      state.setTags(d.tags);\n      state.setAcceptsMarketing(d.acceptsMarketing);\n      state.setBirthday(d.birthday);\n      state.setStatus(d.status);\n    },\n  });\n\n  const [deleting, setDeleting] = useState(false);\n  const handleDelete = useCallback(async () => {\n    if (!tenant?.slug || !customerId) return;\n    const ok = await confirm({\n      title: 'Archive this customer?',\n      description:\n        'They will be moved to your archived customers. You can restore them later.',\n      tone: 'danger',\n      confirmLabel: 'Archive',\n    });\n    if (!ok) return;\n    setDeleting(true);\n    try {\n      await membersApi.update(tenant.slug, customerId, { status: 'archived' });\n      router.replace('/dashboard/customers');\n    } catch (e: any) {\n      state.setError(e?.message || 'Failed to archive');\n      setDeleting(false);\n    }\n  }, [tenant?.slug, customerId, router, state, confirm]);\n\n  const handleSave = useCallback(async () => {\n    if (!tenant?.slug) return;\n\n    const validationError = state.validate();\n    if (validationError) {\n      state.setError(validationError);\n      return;\n    }\n\n    state.setSaving(true);\n    state.setError(null);\n\n    try {\n      if (mode === 'edit' && customerId) {\n        const payload = state.buildUpdatePayload();\n        await membersApi.update(tenant.slug, customerId, payload);\n        setIsDirty(false);\n        router.push(`/dashboard/customers/${customerId}`);\n      } else {\n        // TODO: before create, look up an existing customer with the same phone\n        // or email (needs a backend lookup, e.g. membersApi.findByContact) and\n        // warn on a likely duplicate instead of silently creating a second record.\n        const payload = state.buildCreatePayload();\n        const result = await membersApi.create(tenant.slug, payload);\n        setIsDirty(false);\n        discardDraft();\n        router.replace(`/dashboard/customers/${result.id}`);\n      }\n    } catch (err) {\n      /**\n       * THEY ARE ALREADY A CUSTOMER, which is a destination, not a failure.\n       *\n       * A second customer on an email already in the book used to 500 — the\n       * API says 409 now and names who holds it — and a merchant who hits this\n       * was trying to reach that person: they typed the address because it is\n       * the address they know. Toasting \"already a customer\" and leaving them\n       * on a filled-in form makes them go and search for a record the app just\n       * finished identifying by id.\n       *\n       * So it is a question, not a message. Keep editing is the other answer,\n       * because two people genuinely do share an address (a couple, an office),\n       * and the form they typed is still here if they say no.\n       */\n      const existingId = (\n        err as { status?: number; details?: { existingMemberId?: string } }\n      )?.details?.existingMemberId;\n\n      if (existingId) {\n        const open = await confirm({\n          title: 'They are already a customer',\n          description:\n            err instanceof Error\n              ? `${err.message} Open their record?`\n              : 'Open their record?',\n          confirmLabel: 'Open their record',\n          cancelLabel: 'Keep editing',\n        });\n        if (open) {\n          setIsDirty(false);\n          router.push(`/dashboard/customers/${existingId}`);\n        }\n        return;\n      }\n\n      state.setError(err instanceof Error ? err.message : 'Failed to save');\n    } finally {\n      state.setSaving(false);\n    }\n  }, [\n    tenant?.slug,\n    state,\n    mode,\n    customerId,\n    router,\n    setIsDirty,\n    confirm,\n    discardDraft,\n  ]);\n\n  const editorTitle =\n    mode === 'edit' ? state.name || 'Edit Customer' : 'New Customer';\n  const backUrl =\n    mode === 'edit' && customerId\n      ? `/dashboard/customers/${customerId}`\n      : '/dashboard/customers';\n\n  // Navigate away, but confirm first if there are unsaved edits.\n  const guardedNavigate = useCallback(\n    async (href: string) => {\n      if (isDirty) {\n        const ok = await confirm({\n          title: 'Discard changes?',\n          description: \"Your edits won't be saved.\",\n          tone: 'danger',\n          confirmLabel: 'Discard',\n        });\n        if (!ok) return;\n      }\n      router.push(href);\n    },\n    [isDirty, confirm, router],\n  );\n\n  useDetailHeader({\n    title: editorTitle,\n    onBack: () => guardedNavigate(backUrl),\n  });\n\n  if (mode === 'edit' && loadingCustomer) {\n    return <DetailPageSkeleton maxWidth=\"max-w-4xl\" />;\n  }\n\n  if (mode === 'edit' && (loadError || !customer)) {\n    return (\n      <div className=\"max-w-4xl mx-auto px-6 py-8\">\n        <button\n          type=\"button\"\n          onClick={() => router.push('/dashboard/customers')}\n          className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)] hover:text-[var(--text-primary)] mb-6 transition-colors\"\n        >\n          <ArrowLeft className=\"size-4\" />\n          Back to customers\n        </button>\n        <div className=\"bg-[var(--error-bg)] border border-[var(--error)]/20 rounded-md p-6 text-center\">\n          <AlertTriangle className=\"size-8 text-[var(--error)] mx-auto mb-2\" />\n          <p className=\"text-[var(--error)] font-medium\">\n            {loadError || 'Customer not found'}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <>\n      <CustomerEditor\n        state={state}\n        isDirty={isDirty}\n        onSave={handleSave}\n        onNavigateAway={guardedNavigate}\n        backUrl={backUrl}\n        onDelete={mode === 'edit' ? handleDelete : undefined}\n        deleting={deleting}\n        onImport={mode === 'create' ? () => setImportOpen(true) : undefined}\n      />\n      <ImportCustomersModal\n        open={importOpen}\n        onClose={() => setImportOpen(false)}\n      />\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/customer-editor/customer-editor.d.ts

@@ -0,0 +1,20 @@
+import type { useCustomerFormState } from '@withpotter/hooks/use-customer-form-state';
+type CustomerFormState = ReturnType<typeof useCustomerFormState>;
+interface CustomerEditorProps {
+    state: CustomerFormState;
+    isDirty: boolean;
+    onSave: () => void;
+    /** Guarded navigation for the breadcrumb + Discard (confirms when dirty). */
+    onNavigateAway: (href: string) => void;
+    /** Where Back/Discard goes (list on create, the record on edit). */
+    backUrl: string;
+    onDelete?: () => void;
+    deleting?: boolean;
+    /**
+     * Open the importer. Only offered when creating: on an existing record,
+     * "import a list" is an action about somebody else.
+     */
+    onImport?: () => void;
+}
+export declare function CustomerEditor({ state, isDirty, onSave, onNavigateAway, backUrl, onDelete, deleting, onImport, }: CustomerEditorProps): import("react").JSX.Element;
+export {};

package/dist/customer-editor/customer-editor.js

@@ -0,0 +1,96 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useIsMobile } from "@withpotter/hooks/use-mobile";
+import { FloatingSaveBar } from "@withpotter/components/editor-shared";
+import { Save, Archive, Users } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { BackBar } from "@withpotter/components/mobile/primitives";
+import { MobileCustomerEditor } from "./mobile-customer-editor";
+import { CustomerEditorContent } from "./customer-editor-content";
+import { useErrorToast } from "@withpotter/ui-kit";
+function CustomerEditor({
+  state,
+  isDirty,
+  onSave,
+  onNavigateAway,
+  backUrl,
+  onDelete,
+  deleting,
+  onImport
+}) {
+  const isMobile = useIsMobile();
+  useErrorToast(state.error, () => state.setError(null));
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    !state.isEditing && onImport && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onImport, children: "Import a list" }),
+    state.isEditing && onDelete && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: onDelete,
+        loading: deleting,
+        icon: /* @__PURE__ */ jsx(Archive, {}),
+        className: "text-[var(--error)] hover:text-[var(--error)]",
+        children: "Archive"
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: () => onNavigateAway(backUrl), children: "Discard" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "primary",
+        onClick: onSave,
+        loading: state.saving,
+        icon: /* @__PURE__ */ jsx(Save, {}),
+        children: state.isEditing ? "Save changes" : "Create customer"
+      }
+    )
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        BackBar,
+        {
+          title: state.isEditing ? state.name || "Customer" : "New customer",
+          onBack: () => onNavigateAway("/dashboard/customers")
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "px-4", children: [
+        /* @__PURE__ */ jsx(MobileCustomerEditor, { state }),
+        /* @__PURE__ */ jsx(
+          FloatingSaveBar,
+          {
+            isDirty,
+            saving: state.saving,
+            isEditing: state.isEditing,
+            entityName: "Customer",
+            onSave
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      breadcrumbs: [
+        {
+          label: "Customers",
+          href: "/dashboard/customers",
+          icon: /* @__PURE__ */ jsx(Users, {})
+        },
+        {
+          label: state.isEditing ? state.name || "Customer" : "New customer"
+        }
+      ],
+      onNavigate: onNavigateAway,
+      actions,
+      maxWidth: "max-w-4xl",
+      children: /* @__PURE__ */ jsx(CustomerEditorContent, { state })
+    }
+  ) });
+}
+export {
+  CustomerEditor
+};
+//# sourceMappingURL=customer-editor.js.map