@withpotter/components 0.13.0-next.101

package/dist/create-business-modal.js

@@ -0,0 +1,208 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { useToast } from "@withpotter/ui-kit/use-toast";
+import { AnimatedHeight, Button } from "@withpotter/ui-kit";
+import { navigateWithTransition } from "@withpotter/lib/page-transition";
+import { stepVariants } from "@withpotter/lib/motion";
+import { cn } from "@withpotter/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle
+} from "@withpotter/ui-kit/dialog";
+import {
+  STEP_COPY,
+  StepName,
+  StepShape,
+  useBusinessSetup
+} from "@withpotter/components/business-setup";
+import { SetupPanelArt } from "@withpotter/components/business-setup/setup-panel-art";
+function CreateBusinessModal({
+  open,
+  onClose
+}) {
+  const { toast } = useToast();
+  const router = useRouter();
+  const reduce = useReducedMotion();
+  const setup = useBusinessSetup({
+    onCreated: (slug) => {
+      toast({ title: `${setup.draft.businessName.trim()} is ready` });
+      onClose();
+      navigateWithTransition("forward", () => router.replace("/dashboard"));
+      void slug;
+    }
+  });
+  useEffect(() => {
+    if (!open) setup.reset();
+  }, [open]);
+  const copy = STEP_COPY[setup.step];
+  const setupSteps = ["identity", "shape"];
+  const currentStep = setupSteps.indexOf(
+    setup.step
+  );
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (!next && !setup.busy) onClose();
+      },
+      children: /* @__PURE__ */ jsx(
+        DialogContent,
+        {
+          className: cn(
+            "gap-0 overflow-visible p-0 transition-[max-width]",
+            "w-[calc(100%-2rem)] sm:w-full",
+            // 880, not 760. Half of this box is a photograph, so the questions
+            // were reading in ~340px — two of the ten options on the shape step
+            // wrapped their label onto a second line, and the row that wrapped
+            // was whichever one the merchant had just chosen. Widening the frame
+            // is what pays for the option labels sitting on one line.
+            "max-w-[880px]"
+          ),
+          style: { transitionDuration: reduce ? "0ms" : "420ms" },
+          children: /* @__PURE__ */ jsx(AnimatedHeight, { disabled: !!reduce, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid overflow-hidden rounded-xl",
+                // An even half, not a strip down the side. At 220px the
+                // photograph was too narrow to read as a picture of anything —
+                // it looked like a texture the panel happened to have. Given the
+                // same width as the questions it becomes the other half of the
+                // composition, which is the arrangement the login door already
+                // uses. It disappears entirely for the shelf, where a second
+                // picture would fight the fifteen already on screen.
+                "sm:grid-cols-2"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(SetupPanelArt, { intents: setup.draft.intents }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "px-6 pb-4 pt-3", children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "relative flex min-h-8 items-center justify-center"
+                        ),
+                        children: [
+                          setup.canGoBack && !setup.busy && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: setup.back,
+                              "aria-label": "Back",
+                              className: "absolute left-0 top-1/2 grid size-8 shrink-0 -translate-y-1/2 place-items-center rounded-lg bg-[var(--bg-base)]/70 text-[var(--text-primary)] opacity-90 backdrop-blur-sm transition-[opacity,background-color] hover:bg-[var(--bg-base)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]",
+                              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5 shrink-0" })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-2xl font-semibold tracking-[-0.01em]", children: copy.title })
+                        ]
+                      }
+                    ),
+                    copy.subtitle && /* @__PURE__ */ jsx(DialogDescription, { className: "mt-1 text-sm text-[var(--text-tertiary)]", children: copy.subtitle }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "mt-4 flex gap-2",
+                        "aria-label": `Step ${currentStep + 1} of ${setupSteps.length}`,
+                        children: setupSteps.map((step, index) => /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": true,
+                            className: cn(
+                              "h-1 flex-1 rounded-full",
+                              index <= currentStep ? "bg-[var(--brand-500)]" : "bg-[var(--bg-muted)]"
+                            )
+                          },
+                          step
+                        ))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "overflow-y-auto px-6 pb-4",
+                        "max-h-[min(52vh,460px)]"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        AnimatePresence,
+                        {
+                          mode: "wait",
+                          custom: setup.direction,
+                          initial: false,
+                          children: /* @__PURE__ */ jsx(
+                            motion.div,
+                            {
+                              custom: setup.direction,
+                              variants: reduce ? void 0 : stepVariants,
+                              initial: "enter",
+                              animate: "center",
+                              exit: "exit",
+                              children: /* @__PURE__ */ jsx(StepBody, { setup })
+                            },
+                            setup.step
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2", children: /* @__PURE__ */ jsxs(
+                    Button,
+                    {
+                      disabled: !setup.canContinue || setup.busy,
+                      onClick: setup.next,
+                      className: "w-full",
+                      children: [
+                        setup.busy && /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }),
+                        setup.busy ? "Setting up\u2026" : setup.error ? "Try again" : "Continue"
+                      ]
+                    }
+                  ) }) })
+                ] })
+              ]
+            }
+          ) })
+        }
+      )
+    }
+  );
+}
+function StepBody({ setup }) {
+  switch (setup.step) {
+    case "identity":
+      return /* @__PURE__ */ jsx(
+        StepName,
+        {
+          initialName: setup.draft.businessName,
+          initialSlug: setup.draft.slug,
+          initialCountry: setup.draft.country,
+          initialCategory: setup.draft.category,
+          initialPhone: setup.draft.phone,
+          showCategory: true,
+          onLiveChange: setup.onIdentityChange
+        }
+      );
+    case "shape":
+      return /* @__PURE__ */ jsx(
+        StepShape,
+        {
+          initial: setup.draft.intents,
+          initialOffers: setup.draft.offerIds,
+          initialOfferNote: setup.draft.offerNote,
+          onChange: setup.onIntentsChange
+        }
+      );
+  }
+}
+export {
+  CreateBusinessModal
+};
+//# sourceMappingURL=create-business-modal.js.map

package/dist/create-business-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/create-business-modal.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useRouter } from 'next/navigation';\nimport { AnimatePresence, motion, useReducedMotion } from 'motion/react';\nimport { ArrowLeft, Loader2 } from 'lucide-react';\nimport { useToast } from '@withpotter/ui-kit/use-toast';\nimport { AnimatedHeight, Button } from '@withpotter/ui-kit';\nimport { navigateWithTransition } from '@withpotter/lib/page-transition';\nimport { stepVariants } from '@withpotter/lib/motion';\nimport { cn } from '@withpotter/lib/utils';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n} from '@withpotter/ui-kit/dialog';\nimport {\n  STEP_COPY,\n  StepName,\n  StepShape,\n  useBusinessSetup,\n} from '@withpotter/components/business-setup';\nimport { SetupPanelArt } from '@withpotter/components/business-setup/setup-panel-art';\n\ninterface CreateBusinessModalProps {\n  open: boolean;\n  onClose: () => void;\n}\n\n/**\n * Adding a business without leaving the app.\n *\n * It renders the SAME steps onboarding renders, from the same hook, and\n * `/dashboard/workspaces/new` opens it rather than redirecting to /onboarding.\n * Full-screen onboarding is first run, where there is no app to stay inside.\n *\n * ---------------------------------------------------------------------------\n * IT USED TO BE A DEAD END, and that is the reason this file was rewritten.\n *\n * The flow has four steps. This shell rendered three. `useBusinessSetup`\n * advanced to `template` on the last Continue, nothing was mapped to that step,\n * and the body rendered ZERO elements — a 200px box holding a title, a void, and\n * a \"Create business\" button that could never enable, because the value that\n * enables it is reported by the step that was not there. No business could be\n * created from this modal at all. A shell that enumerates steps by hand will\n * always drift from the hook that owns them; the enumeration is now exhaustive\n * over `SetupStep`, so leaving one out is a type error rather than a blank box.\n *\n * THE LAYOUT IS THE DIALOG'S, not the page's. A 19px title, a body that scrolls,\n * a footer that does not move.\n *\n * TWO COLUMNS, because width follows columns and not content. It was a 576px box\n * around a single column of three fields, which is the widest a form can be\n * before the eye stops tracking from the end of one line to the start of the\n * next — and every pixel of that width was empty. Now half of it is a\n * photograph that answers what the merchant just said, and the questions sit in\n * a column narrow enough to read. The last step is the exception and takes the\n * whole width: it is a shelf of storefronts, not a question.\n */\nexport function CreateBusinessModal({\n  open,\n  onClose,\n}: CreateBusinessModalProps) {\n  const { toast } = useToast();\n  const router = useRouter();\n  const reduce = useReducedMotion();\n\n  const setup = useBusinessSetup({\n    onCreated: (slug) => {\n      toast({ title: `${setup.draft.businessName.trim()} is ready` });\n      onClose();\n      // createWorkspace already switched the active business in context, so\n      // this only needs to land somewhere that shows it. No router.refresh()\n      // afterwards: refreshing the route we are leaving cancels the push, and\n      // the business gets created while the modal just sits there.\n      navigateWithTransition('forward', () => router.replace('/dashboard'));\n      void slug;\n    },\n  });\n\n  // A closed modal keeps nothing: reopening it is a fresh business, not a\n  // resumed one. (Onboarding is the opposite, and persists across reloads.)\n  useEffect(() => {\n    if (!open) setup.reset();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  const copy = STEP_COPY[setup.step];\n  /** The shelf is not a question, so it does not sit in a question's column. */\n  const setupSteps = ['identity', 'shape'] as const;\n  const currentStep = setupSteps.indexOf(\n    setup.step as (typeof setupSteps)[number],\n  );\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(next) => {\n        if (!next && !setup.busy) onClose();\n      }}\n    >\n      <DialogContent\n        // NOT `overflow-hidden`. A Select's menu portals into this element to\n        // escape the dialog's focus trap, and a clipping ancestor put it back\n        // where it started. The art pane clips its own corners instead.\n        className={cn(\n          'gap-0 overflow-visible p-0 transition-[max-width]',\n          'w-[calc(100%-2rem)] sm:w-full',\n          // 880, not 760. Half of this box is a photograph, so the questions\n          // were reading in ~340px — two of the ten options on the shape step\n          // wrapped their label onto a second line, and the row that wrapped\n          // was whichever one the merchant had just chosen. Widening the frame\n          // is what pays for the option labels sitting on one line.\n          'max-w-[880px]',\n        )}\n        style={{ transitionDuration: reduce ? '0ms' : '420ms' }}\n      >\n        <AnimatedHeight disabled={!!reduce}>\n          <div\n            className={cn(\n              'grid overflow-hidden rounded-xl',\n              // An even half, not a strip down the side. At 220px the\n              // photograph was too narrow to read as a picture of anything —\n              // it looked like a texture the panel happened to have. Given the\n              // same width as the questions it becomes the other half of the\n              // composition, which is the arrangement the login door already\n              // uses. It disappears entirely for the shelf, where a second\n              // picture would fight the fifteen already on screen.\n              'sm:grid-cols-2',\n            )}\n          >\n            <SetupPanelArt intents={setup.draft.intents} />\n\n            <div className=\"flex min-w-0 flex-col\">\n              <div className=\"px-6 pb-4 pt-3\">\n                <div\n                  className={cn(\n                    'relative flex min-h-8 items-center justify-center',\n                  )}\n                >\n                  {setup.canGoBack && !setup.busy && (\n                    <button\n                      type=\"button\"\n                      onClick={setup.back}\n                      aria-label=\"Back\"\n                      className=\"absolute left-0 top-1/2 grid size-8 shrink-0 -translate-y-1/2 place-items-center rounded-lg bg-[var(--bg-base)]/70 text-[var(--text-primary)] opacity-90 backdrop-blur-sm transition-[opacity,background-color] hover:bg-[var(--bg-base)] hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--focus-ring)]\"\n                    >\n                      <ArrowLeft className=\"size-5 shrink-0\" />\n                    </button>\n                  )}\n                  <DialogTitle className=\"text-center text-2xl font-semibold tracking-[-0.01em]\">\n                    {copy.title}\n                  </DialogTitle>\n                </div>\n                {copy.subtitle && (\n                  <DialogDescription className=\"mt-1 text-sm text-[var(--text-tertiary)]\">\n                    {copy.subtitle}\n                  </DialogDescription>\n                )}\n                <div\n                  className=\"mt-4 flex gap-2\"\n                  aria-label={`Step ${currentStep + 1} of ${setupSteps.length}`}\n                >\n                  {setupSteps.map((step, index) => (\n                    <span\n                      key={step}\n                      aria-hidden\n                      className={cn(\n                        'h-1 flex-1 rounded-full',\n                        index <= currentStep\n                          ? 'bg-[var(--brand-500)]'\n                          : 'bg-[var(--bg-muted)]',\n                      )}\n                    />\n                  ))}\n                </div>\n              </div>\n\n              {/* Only the question scrolls. The action below it does not move. */}\n              <div\n                className={cn(\n                  'overflow-y-auto px-6 pb-4',\n                  'max-h-[min(52vh,460px)]',\n                )}\n              >\n                {/* `mode=\"wait\"` so the outgoing step is gone before the next\n                    one measures — otherwise the height animation resolves\n                    against both at once and the panel lurches. */}\n                <AnimatePresence\n                  mode=\"wait\"\n                  custom={setup.direction}\n                  initial={false}\n                >\n                  <motion.div\n                    key={setup.step}\n                    custom={setup.direction}\n                    variants={reduce ? undefined : stepVariants}\n                    initial=\"enter\"\n                    animate=\"center\"\n                    exit=\"exit\"\n                  >\n                    <StepBody setup={setup} />\n                  </motion.div>\n                </AnimatePresence>\n              </div>\n\n              <div className=\"border-t border-[var(--border-subtle)] px-6 py-4\">\n                {/* Errors are raised as a toast by useBusinessSetup. In a dialog\n                    an inline banner is worse still: it grows the footer and\n                    shrinks the scrolling question above it. */}\n                {/* The action sits at its own size, at the end of the row.\n                    It was stretched edge to edge — `flex-1` on a 1120px gallery\n                    made one 800px button. `md` IS the button; a commit is not\n                    made more important by being made wider, and nothing else in\n                    the product does this. */}\n                <div className=\"flex items-center justify-end gap-2\">\n                  {/* \"Choose one for me\", and only where there is something to\n                      choose. A merchant who has not decided what their site\n                      should look like should not be held at a wall of\n                      screenshots — the template is the one decision here that is\n                      genuinely reversible. Secondary, and before the commit, so\n                      the primary action stays the last thing in the row. */}\n                  <Button\n                    disabled={!setup.canContinue || setup.busy}\n                    onClick={setup.next}\n                    className=\"w-full\"\n                  >\n                    {setup.busy && <Loader2 className=\"animate-spin\" />}\n                    {setup.busy\n                      ? 'Setting up…'\n                      : setup.error\n                        ? 'Try again'\n                        : 'Continue'}\n                  </Button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </AnimatedHeight>\n      </DialogContent>\n    </Dialog>\n  );\n}\n\n/**\n * The step, chosen exhaustively.\n *\n * `SetupStep` is a union, and this switch returns for every member of it, so\n * adding a fifth step makes TypeScript reject this file rather than letting it\n * render an empty panel the way the missing template step did for weeks.\n */\nfunction StepBody({ setup }: { setup: ReturnType<typeof useBusinessSetup> }) {\n  switch (setup.step) {\n    case 'identity':\n      return (\n        <StepName\n          initialName={setup.draft.businessName}\n          initialSlug={setup.draft.slug}\n          initialCountry={setup.draft.country}\n          initialCategory={setup.draft.category}\n          initialPhone={setup.draft.phone}\n          showCategory\n          onLiveChange={setup.onIdentityChange}\n        />\n      );\n    case 'shape':\n      return (\n        <StepShape\n          initial={setup.draft.intents}\n          initialOffers={setup.draft.offerIds}\n          initialOfferNote={setup.draft.offerNote}\n          onChange={setup.onIntentsChange}\n        />\n      );\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/custom-fields-step.d.ts

@@ -0,0 +1,23 @@
+export type CustomFieldType = 'text' | 'number' | 'select' | 'textarea' | 'url';
+export type CustomFieldPurpose = 'metadata' | 'input';
+export interface CustomFieldDefinition {
+    key: string;
+    label: string;
+    type: CustomFieldType;
+    purpose?: CustomFieldPurpose;
+    options?: string[];
+    required?: boolean;
+    placeholder?: string;
+}
+export interface CustomFieldEntry extends CustomFieldDefinition {
+    value: unknown;
+}
+interface CustomFieldsStepProps {
+    customFields: CustomFieldEntry[];
+    onChange: (fields: CustomFieldEntry[]) => void;
+    savedDefinitions: CustomFieldDefinition[];
+    onSaveDefinition: (def: CustomFieldDefinition) => void;
+    onRemoveDefinition: (key: string) => void;
+}
+export declare function CustomFieldsStep({ customFields, onChange, savedDefinitions, onSaveDefinition, onRemoveDefinition, }: CustomFieldsStepProps): import("react").JSX.Element;
+export {};

package/dist/custom-fields-step.js

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