@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,10 @@
+import type { useCollectionFormState } from '@withpotter/hooks/use-collection-form-state';
+type CollectionFormState = ReturnType<typeof useCollectionFormState>;
+interface CollectionEditorContentProps {
+    state: CollectionFormState;
+    tenantSlug: string;
+    /** The archetype this collection belongs to; narrows the product picker. */
+    intent?: string | null;
+}
+export declare function CollectionEditorContent({ state, tenantSlug, intent, }: CollectionEditorContentProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,282 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@withpotter/ui-kit/field";
+import { EditorSection } from "@withpotter/ui-kit/editor-section";
+import { Button } from "@withpotter/ui-kit/button";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ImageUploadModal } from "@withpotter/components/image-upload-modal";
+import { ProductPickerModal } from "@withpotter/pages-commerce/dashboard/(commerce)/collections/[collectionId]/_components/product-picker-modal";
+import { CollectionProductList } from "./collection-product-list";
+import { Image as ImageIcon, Package, Plus, X } from "lucide-react";
+import { inventoryApi } from "@withpotter/lib/api/inventory";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { Select } from "@withpotter/ui-kit/select";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { Input, Textarea, Checkbox } from "@withpotter/ui-kit";
+import { HUES } from "@withpotter/ui-kit/product-thumb";
+const FIELD_LABEL = "mb-2 block text-sm font-medium text-[var(--text-secondary)]";
+function CollectionEditorContent({
+  state,
+  tenantSlug,
+  intent
+}) {
+  const [showImageModal, setShowImageModal] = useState(false);
+  const [showProductPicker, setShowProductPicker] = useState(false);
+  const formatCurrency = useFormatCurrency();
+  const { data: inventory, isLoading: productsLoading } = useApiQuery(
+    ["collection-editor-products"],
+    (slug) => inventoryApi.listAll(slug)
+  );
+  const productMap = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    (inventory || []).forEach((p) => m.set(p.id, p));
+    return m;
+  }, [inventory]);
+  const [slugOpen, setSlugOpen] = useState(false);
+  const titleInput = useRef(null);
+  useEffect(() => {
+    if (!state.titleError) return;
+    titleInput.current?.focus();
+    titleInput.current?.scrollIntoView({ block: "center", behavior: "smooth" });
+  }, [state.titleError]);
+  const removeProduct = (pid) => state.setProductIds(state.productIds.filter((id) => id !== pid));
+  return (
+    /**
+     * Two columns, not one flat stack.
+     *
+     * Four cards of equal weight down a single column says every section
+     * matters the same, which is never true: what the collection IS (its name,
+     * its pictures, what's in it) is the work, and how it behaves (active,
+     * featured, sort order) is a handful of switches you set once. The rail
+     * gives the switches somewhere to live without them interrupting the work.
+     */
+    /* @__PURE__ */ jsxs("div", { className: "grid gap-6 pb-12 lg:grid-cols-[minmax(0,1fr)_300px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs(EditorSection, { id: "basic-info", title: "What this collection is", children: [
+          /* @__PURE__ */ jsx(Field, { label: "Name", required: true, children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              ref: titleInput,
+              id: "collection-name",
+              type: "text",
+              value: state.title,
+              onChange: (e) => state.setTitle(e.target.value),
+              placeholder: "Summer collection",
+              error: state.titleError ?? void 0,
+              "aria-invalid": state.titleError ? true : void 0
+            }
+          ) }),
+          slugOpen ? /* @__PURE__ */ jsx(
+            Field,
+            {
+              label: "Web address",
+              hint: "Its name in the link to this collection",
+              children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  type: "text",
+                  autoFocus: true,
+                  value: state.slug,
+                  onChange: (e) => state.setSlug(e.target.value),
+                  className: "font-mono",
+                  placeholder: "summer-collection"
+                }
+              )
+            }
+          ) : state.slug ? /* @__PURE__ */ jsxs("p", { className: "flex flex-wrap items-baseline gap-x-2 text-xs text-[var(--text-tertiary)]", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              "Web address",
+              " ",
+              /* @__PURE__ */ jsxs("span", { className: "font-mono text-[var(--text-secondary)]", children: [
+                "/shop?collection=",
+                state.slug
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSlugOpen(true),
+                className: "underline underline-offset-2 transition-colors hover:text-[var(--text-secondary)]",
+                children: "Change"
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx(Field, { label: "Description", children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              value: state.description,
+              onChange: (e) => state.setDescription(e.target.value),
+              rows: 4,
+              placeholder: "What ties these together?"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          EditorSection,
+          {
+            id: "products",
+            title: "Products",
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                icon: /* @__PURE__ */ jsx(Plus, {}),
+                onClick: () => setShowProductPicker(true),
+                children: "Add products"
+              }
+            ),
+            children: state.productIds.length > 0 ? /* @__PURE__ */ jsx(
+              CollectionProductList,
+              {
+                productIds: state.productIds,
+                productMap,
+                loading: productsLoading,
+                formatCurrency,
+                onReorder: state.setProductIds,
+                onRemove: removeProduct
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowProductPicker(true),
+                className: "flex w-full flex-col items-center gap-2 rounded-md border border-dashed border-[var(--border-default)] py-8 text-[var(--text-tertiary)] transition-colors hover:border-brand-500/40 hover:bg-[var(--accent-secondary)] hover:text-[var(--accent-secondary-ink)]",
+                children: [
+                  /* @__PURE__ */ jsx(Package, { className: "size-6 opacity-60" }),
+                  /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add the first products" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(EditorSection, { id: "images", title: "Cover", children: state.image ? /* @__PURE__ */ jsxs("div", { className: "group relative h-28 w-28 overflow-hidden rounded-md", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: state.image,
+              alt: "",
+              className: "h-full w-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 transition-opacity group-hover:opacity-100", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowImageModal(true),
+                className: "text-xs font-medium text-white hover:underline",
+                children: "Change"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => state.setImage(""),
+                className: "text-white/80 hover:text-white",
+                "aria-label": "Remove cover",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowImageModal(true),
+            className: "flex h-28 w-28 flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-muted)]",
+            children: [
+              /* @__PURE__ */ jsx(ImageIcon, { className: "size-6" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs", children: "Add a cover" })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-6 lg:sticky lg:top-4 lg:self-start", children: /* @__PURE__ */ jsxs(EditorSection, { id: "settings", title: "Colour and status", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: FIELD_LABEL, children: "Colour" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => state.setColor(""),
+                "aria-pressed": !state.color,
+                title: "Auto, from the name",
+                className: `grid h-6 w-6 place-items-center rounded-md border text-2xs font-medium transition-colors ${state.color ? "border-[var(--border-default)] text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)]" : "border-brand-500 bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)]"}`,
+                children: "A"
+              }
+            ),
+            HUES.map((hue) => {
+              const active = state.color === hue;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => state.setColor(hue),
+                  "aria-pressed": active,
+                  "aria-label": `Colour ${hue}`,
+                  className: `h-6 w-6 rounded-md border transition-transform duration-[var(--motion-fast)] hover:scale-110 motion-reduce:transform-none ${active ? "border-[var(--text-primary)]" : "border-transparent"}`,
+                  style: {
+                    background: `color-mix(in srgb, ${hue} 60%, var(--bg-base))`
+                  }
+                },
+                hue
+              );
+            })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Field, { label: "Status", children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            value: state.isActive ? "published" : "draft",
+            onChange: (next) => state.setIsActive(next === "published"),
+            options: [
+              { value: "published", label: "Published" },
+              { value: "draft", label: "Draft" }
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            label: "Featured collection",
+            checked: state.featured,
+            onChange: (e) => state.setFeatured(e.target.checked)
+          }
+        )
+      ] }) }),
+      showImageModal && /* @__PURE__ */ jsx(
+        ImageUploadModal,
+        {
+          isOpen: true,
+          onClose: () => setShowImageModal(false),
+          onSuccess: (result) => {
+            state.setImage(result.url);
+            setShowImageModal(false);
+          },
+          aspectRatio: 1
+        }
+      ),
+      showProductPicker && /* @__PURE__ */ jsx(
+        ProductPickerModal,
+        {
+          excludeIds: state.productIds,
+          onConfirm: (ids) => {
+            state.setProductIds([...state.productIds, ...ids]);
+            setShowProductPicker(false);
+          },
+          onClose: () => setShowProductPicker(false),
+          tenantSlug,
+          intent
+        }
+      )
+    ] })
+  );
+}
+export {
+  CollectionEditorContent
+};
+//# sourceMappingURL=collection-editor-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collection-editor/collection-editor-content.tsx"],"sourcesContent":["'use client';\n\nimport { Field } from '@withpotter/ui-kit/field';\nimport { EditorSection } from '@withpotter/ui-kit/editor-section';\nimport { Button } from '@withpotter/ui-kit/button';\n\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { ImageUploadModal } from '@withpotter/components/image-upload-modal';\nimport { ProductPickerModal } from '@withpotter/pages-commerce/dashboard/(commerce)/collections/[collectionId]/_components/product-picker-modal';\nimport { CollectionProductList } from './collection-product-list';\nimport { Image as ImageIcon, Package, Plus, X } from 'lucide-react';\nimport { inventoryApi } from '@withpotter/lib/api/inventory';\nimport type { InventoryProduct } from '@withpotter/lib/api/types';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { Select } from '@withpotter/ui-kit/select';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport type { useCollectionFormState } from '@withpotter/hooks/use-collection-form-state';\nimport { Input, Textarea, Checkbox } from '@withpotter/ui-kit';\nimport { HUES } from '@withpotter/ui-kit/product-thumb';\n\n/** The label treatment Field draws, for the controls that are not a Field. */\nconst FIELD_LABEL =\n  'mb-2 block text-sm font-medium text-[var(--text-secondary)]';\n\ntype CollectionFormState = ReturnType<typeof useCollectionFormState>;\n\ninterface CollectionEditorContentProps {\n  state: CollectionFormState;\n  tenantSlug: string;\n  /** The archetype this collection belongs to; narrows the product picker. */\n  intent?: string | null;\n}\n\nexport function CollectionEditorContent({\n  state,\n  tenantSlug,\n  intent,\n}: CollectionEditorContentProps) {\n  const [showImageModal, setShowImageModal] = useState(false);\n  const [showProductPicker, setShowProductPicker] = useState(false);\n\n  const formatCurrency = useFormatCurrency();\n  // Every page of the catalogue, not the server's default first twenty. With\n  // twenty, a product past that line was absent from this map and the row\n  // below rendered \"Product no longer available\" over a product that is on\n  // sale — the editor telling you your own item is gone.\n  const { data: inventory, isLoading: productsLoading } = useApiQuery(\n    ['collection-editor-products'],\n    (slug) => inventoryApi.listAll(slug),\n  );\n  const productMap = useMemo(() => {\n    const m = new Map<string, InventoryProduct>();\n    (inventory || []).forEach((p) => m.set(p.id, p));\n    return m;\n  }, [inventory]);\n  const [slugOpen, setSlugOpen] = useState(false);\n\n  /**\n   * A refused save puts the cursor where the refusal is.\n   *\n   * The ref is local, not carried on the form state: attaching one that came\n   * out of the hook makes every other read of that object look like touching a\n   * ref mid-render, and the whole file lights up. The editor owns its own\n   * input; the state only says whether it is wrong.\n   */\n  const titleInput = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (!state.titleError) return;\n    titleInput.current?.focus();\n    titleInput.current?.scrollIntoView({ block: 'center', behavior: 'smooth' });\n  }, [state.titleError]);\n\n  const removeProduct = (pid: string) =>\n    state.setProductIds(state.productIds.filter((id) => id !== pid));\n\n  return (\n    /**\n     * Two columns, not one flat stack.\n     *\n     * Four cards of equal weight down a single column says every section\n     * matters the same, which is never true: what the collection IS (its name,\n     * its pictures, what's in it) is the work, and how it behaves (active,\n     * featured, sort order) is a handful of switches you set once. The rail\n     * gives the switches somewhere to live without them interrupting the work.\n     */\n    <div className=\"grid gap-6 pb-12 lg:grid-cols-[minmax(0,1fr)_300px]\">\n      <div className=\"space-y-6\">\n        {/* Basic Info */}\n        <EditorSection id=\"basic-info\" title=\"What this collection is\">\n          <Field label=\"Name\" required>\n            {/* Not \"Collection Name\". You are on a collection. */}\n            {/* The refusal lands HERE — red edge, the sentence under the box,\n                and the cursor in it — rather than as a toast in the far corner\n                of a screen that does not say which of eight controls it means. */}\n            <Input\n              ref={titleInput}\n              id=\"collection-name\"\n              type=\"text\"\n              value={state.title}\n              onChange={(e) => state.setTitle(e.target.value)}\n              placeholder=\"Summer collection\"\n              error={state.titleError ?? undefined}\n              aria-invalid={state.titleError ? true : undefined}\n            />\n          </Field>\n\n          {/*\n            The address writes itself, and says so.\n\n            It has always DERIVED from the name (use-collection-form-state's\n            `slugManuallyEdited`), but the only way to see that was to open a\n            text field — so the page offered \"Set a custom web address\", which\n            asks the merchant to make a decision the product has already made\n            correctly, and a merchant who took it up got an empty box to fill.\n            Now the derived address is on screen as a fact the moment there is\n            a name to derive it from, and changing it is the exception it\n            actually is.\n          */}\n          {slugOpen ? (\n            <Field\n              label=\"Web address\"\n              hint=\"Its name in the link to this collection\"\n            >\n              <Input\n                type=\"text\"\n                autoFocus\n                value={state.slug}\n                onChange={(e) => state.setSlug(e.target.value)}\n                className=\"font-mono\"\n                placeholder=\"summer-collection\"\n              />\n            </Field>\n          ) : state.slug ? (\n            <p className=\"flex flex-wrap items-baseline gap-x-2 text-xs text-[var(--text-tertiary)]\">\n              {/* Not \"/collections/…\", which is a path the renderer has never\n                  served. The storefront reaches a collection as\n                  `/shop?collection=<slug>`, which is what the record page's\n                  View live opens. */}\n              <span>\n                Web address{' '}\n                <span className=\"font-mono text-[var(--text-secondary)]\">\n                  /shop?collection={state.slug}\n                </span>\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setSlugOpen(true)}\n                className=\"underline underline-offset-2 transition-colors hover:text-[var(--text-secondary)]\"\n              >\n                Change\n              </button>\n            </p>\n          ) : null}\n\n          <Field label=\"Description\">\n            <Textarea\n              value={state.description}\n              onChange={(e) => state.setDescription(e.target.value)}\n              rows={4}\n              placeholder=\"What ties these together?\"\n            />\n          </Field>\n        </EditorSection>\n\n        {/* Products */}\n        {/*\n          \"Products\", and the button says what pressing it does.\n\n          It was titled \"What's in it\" with a button reading \"Manage\", which is\n          two riddles in one row: the heading names no object, and Manage names\n          no act — it opened a picker that both added and removed, so the only\n          way to learn what the button did was to press it. The section lists\n          what is in the collection and each row removes itself; the button\n          adds. Nothing here manages.\n        */}\n        <EditorSection\n          id=\"products\"\n          title=\"Products\"\n          action={\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              icon={<Plus />}\n              onClick={() => setShowProductPicker(true)}\n            >\n              Add products\n            </Button>\n          }\n        >\n          {state.productIds.length > 0 ? (\n            <CollectionProductList\n              productIds={state.productIds}\n              productMap={productMap}\n              loading={productsLoading}\n              formatCurrency={formatCurrency}\n              onReorder={state.setProductIds}\n              onRemove={removeProduct}\n            />\n          ) : (\n            <button\n              type=\"button\"\n              onClick={() => setShowProductPicker(true)}\n              className=\"flex w-full flex-col items-center gap-2 rounded-md border border-dashed border-[var(--border-default)] py-8 text-[var(--text-tertiary)] transition-colors hover:border-brand-500/40 hover:bg-[var(--accent-secondary)] hover:text-[var(--accent-secondary-ink)]\"\n            >\n              <Package className=\"size-6 opacity-60\" />\n              <span className=\"text-sm\">Add the first products</span>\n            </button>\n          )}\n        </EditorSection>\n\n        {/* Images */}\n        <EditorSection id=\"images\" title=\"Cover\">\n          {/*\n            ONE image, not two.\n\n            It asked for a square AND a 16:9 banner, labelled by their aspect\n            ratios, before the merchant had put a single product in. Two\n            pictures for a thing with no page of its own to put them on: the\n            storefront has no collection route, the folder in the list draws\n            itself from the products' own photographs, and the record page\n            shows the one cover. A merchant who has photographed nothing still\n            gets a folder that looks like something, so this is a refinement,\n            which is why it is one optional square and not a pair of empty\n            drop targets sitting where the products should be.\n\n            The stored banner round-trips untouched, so a template already\n            reading `data.bannerImage` keeps what it has.\n          */}\n          {state.image ? (\n            <div className=\"group relative h-28 w-28 overflow-hidden rounded-md\">\n              {/* eslint-disable-next-line @next/next/no-img-element */}\n              <img\n                src={state.image}\n                alt=\"\"\n                className=\"h-full w-full object-cover\"\n              />\n              <div className=\"absolute inset-0 flex items-center justify-center gap-2 bg-black/40 opacity-0 transition-opacity group-hover:opacity-100\">\n                <button\n                  type=\"button\"\n                  onClick={() => setShowImageModal(true)}\n                  className=\"text-xs font-medium text-white hover:underline\"\n                >\n                  Change\n                </button>\n                <button\n                  type=\"button\"\n                  onClick={() => state.setImage('')}\n                  className=\"text-white/80 hover:text-white\"\n                  aria-label=\"Remove cover\"\n                >\n                  <X className=\"size-4\" />\n                </button>\n              </div>\n            </div>\n          ) : (\n            <button\n              type=\"button\"\n              onClick={() => setShowImageModal(true)}\n              className=\"flex h-28 w-28 flex-col items-center justify-center gap-1 rounded-md border-2 border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-muted)]\"\n            >\n              <ImageIcon className=\"size-6\" />\n              <span className=\"text-xs\">Add a cover</span>\n            </button>\n          )}\n        </EditorSection>\n      </div>\n\n      {/* The rail: set once, then left alone. Sticky so it stays in reach\n          while the product picker above it grows. */}\n      <div className=\"space-y-6 lg:sticky lg:top-4 lg:self-start\">\n        {/* The heading NAMES what is in the card.\n            \"How it behaves\" named the container instead — a sentence that only\n            tells you the controls below are settings, which is the kind of\n            heading CLAUDE.md's copy rules exist to stop. What is actually in\n            here is a colour and whether customers can see this, so that is\n            what it says, in the same words the phone uses. */}\n        <EditorSection id=\"settings\" title=\"Colour and status\">\n          {/*\n            The folder's colour, picked or inherited.\n\n            Collections are drawn as coloured folders, and the colour comes\n            from a hash of the name — which is right as a default and wrong as\n            a rule: a merchant with Sale, Bridal and Everyday has an opinion\n            about which one is red. \"Auto\" stays first and stays the default,\n            so this is a choice you can make rather than one you must.\n          */}\n          <div>\n            <span className={FIELD_LABEL}>Colour</span>\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <button\n                type=\"button\"\n                onClick={() => state.setColor('')}\n                aria-pressed={!state.color}\n                title=\"Auto, from the name\"\n                className={`grid h-6 w-6 place-items-center rounded-md border text-2xs font-medium transition-colors ${\n                  state.color\n                    ? 'border-[var(--border-default)] text-[var(--text-tertiary)] hover:bg-[var(--interactive-hover)]'\n                    : 'border-brand-500 bg-[var(--accent-secondary)] text-[var(--accent-secondary-ink)]'\n                }`}\n              >\n                A\n              </button>\n              {HUES.map((hue) => {\n                const active = state.color === hue;\n                return (\n                  <button\n                    key={hue}\n                    type=\"button\"\n                    onClick={() => state.setColor(hue)}\n                    aria-pressed={active}\n                    aria-label={`Colour ${hue}`}\n                    className={`h-6 w-6 rounded-md border transition-transform duration-[var(--motion-fast)] hover:scale-110 motion-reduce:transform-none ${\n                      active\n                        ? 'border-[var(--text-primary)]'\n                        : 'border-transparent'\n                    }`}\n                    style={{\n                      background: `color-mix(in srgb, ${hue} 60%, var(--bg-base))`,\n                    }}\n                  />\n                );\n              })}\n            </div>\n          </div>\n\n          <Field label=\"Status\">\n            <Select\n              value={state.isActive ? 'published' : 'draft'}\n              onChange={(next) => state.setIsActive(next === 'published')}\n              options={[\n                { value: 'published', label: 'Published' },\n                { value: 'draft', label: 'Draft' },\n              ]}\n            />\n          </Field>\n\n          {/*\n            NO SORT ORDER BOX.\n\n            A number field called \"Sort Order\" asks the merchant to hold the\n            whole list in their head and pick an integer that positions this\n            collection against every other one — from a screen that shows\n            neither the other collections nor where this one currently sits.\n            Half the businesses here have one collection, and the box asked\n            them for its rank among itself.\n\n            The stored value is untouched and still saved, so nothing a\n            storefront already orders by changes; what goes is the control\n            that could not be used correctly. Ordering belongs on the list,\n            where the order is visible — the same argument the home drag-\n            reorder work makes for the home.\n          */}\n\n          <Checkbox\n            label=\"Featured collection\"\n            checked={state.featured}\n            onChange={(e) => state.setFeatured(e.target.checked)}\n          />\n        </EditorSection>\n      </div>\n\n      {/* Modals */}\n      {showImageModal && (\n        <ImageUploadModal\n          isOpen\n          onClose={() => setShowImageModal(false)}\n          onSuccess={(result) => {\n            state.setImage(result.url);\n            setShowImageModal(false);\n          }}\n          aspectRatio={1}\n        />\n      )}\n      {showProductPicker && (\n        <ProductPickerModal\n          // Adds. Removing is the X on the row, where the thing being removed\n          // is in front of you.\n          excludeIds={state.productIds}\n          onConfirm={(ids) => {\n            state.setProductIds([...state.productIds, ...ids]);\n            setShowProductPicker(false);\n          }}\n          onClose={() => setShowProductPicker(false)}\n          tenantSlug={tenantSlug}\n          intent={intent}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

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

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

@@ -0,0 +1,231 @@
+"use client";
+import { 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 { useToast } from "@withpotter/ui-kit/use-toast";
+import { contentApi } from "@withpotter/lib/api/content";
+import { useCollectionFormState } from "@withpotter/hooks/use-collection-form-state";
+import { useEditorDirtyTracking } from "@withpotter/components/editor-shared";
+import { AlertTriangle, ArrowLeft } from "lucide-react";
+import { useDetailHeader } from "@withpotter/hooks/use-detail-header";
+import { useCollectionsView } from "@withpotter/components/features/use-collections-view";
+import {
+  collectionIntent,
+  parseIntentKeys
+} from "@withpotter/components/features/collections-helpers";
+import { CollectionEditor } from "./collection-editor";
+import {
+  CollectionOverview,
+  CollectionOverviewSkeleton
+} from "./collection-overview";
+import { useConfirm } from "@withpotter/ui-kit/confirm-dialog";
+const CONTENT_TYPE = "collections";
+function CollectionEditorPage({ mode }) {
+  const { query, listHref, intent: viewIntent } = useCollectionsView();
+  const confirm = useConfirm();
+  const { toast } = useToast();
+  const router = useRouter();
+  const params = useParams();
+  const { tenant } = useAuth();
+  const [viewMode, setViewMode] = useState(mode === "edit");
+  const collectionId = mode === "edit" ? params?.collectionId : void 0;
+  const [collection, setCollection] = useState(null);
+  const [loadingCollection, setLoadingCollection] = useState(mode === "edit");
+  const [loadError, setLoadError] = useState(null);
+  useEffect(() => {
+    if (mode !== "edit" || !tenant?.slug || !collectionId) return;
+    let cancelled = false;
+    const fetchData = async () => {
+      setLoadingCollection(true);
+      setLoadError(null);
+      try {
+        const result = await contentApi.get(
+          tenant.slug,
+          CONTENT_TYPE,
+          collectionId
+        );
+        const item = result.data || result;
+        if (!cancelled) setCollection(item);
+      } catch (e) {
+        if (!cancelled) {
+          setLoadError(
+            e instanceof Error ? e.message : "Failed to load collection"
+          );
+        }
+      } finally {
+        if (!cancelled) setLoadingCollection(false);
+      }
+    };
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [mode, tenant?.slug, collectionId]);
+  const intentTag = mode === "edit" ? collectionIntent(collection ?? {}) : parseIntentKeys(viewIntent).join(",") || null;
+  const state = useCollectionFormState({
+    collection: mode === "edit" ? collection : null
+  });
+  const { isDirty, setIsDirty } = useEditorDirtyTracking([
+    state.title,
+    state.slug,
+    state.description,
+    state.image,
+    state.bannerImage,
+    state.color,
+    state.isActive,
+    state.featured,
+    state.sortOrder,
+    state.productIds
+  ]);
+  const [deleting, setDeleting] = useState(false);
+  const handleDelete = useCallback(async () => {
+    if (!tenant?.slug || !collectionId) return;
+    const ok = await confirm({
+      title: "Delete this collection?",
+      description: "The products in it are not deleted \u2014 only the collection that groups them. This cannot be undone.",
+      tone: "danger",
+      confirmLabel: "Delete collection"
+    });
+    if (!ok) return;
+    setDeleting(true);
+    try {
+      await contentApi.delete(tenant.slug, CONTENT_TYPE, collectionId);
+      router.replace(listHref);
+    } catch (e) {
+      state.setError(e instanceof Error ? e.message : "Failed to delete");
+      setDeleting(false);
+    }
+  }, [tenant?.slug, collectionId, router, state, listHref]);
+  const [saved, setSaved] = useState(false);
+  const handleSave = useCallback(async () => {
+    if (!tenant?.slug) return;
+    if (!state.title.trim()) {
+      state.setTitleError("Give the collection a name");
+      return;
+    }
+    state.setSaving(true);
+    state.setError(null);
+    try {
+      const payload = {
+        title: state.title.trim(),
+        slug: state.slug || void 0,
+        description: state.description || void 0,
+        isActive: state.isActive,
+        featured: state.featured,
+        sortOrder: state.sortOrder,
+        data: {
+          productIds: state.productIds,
+          image: state.image || void 0,
+          bannerImage: state.bannerImage || void 0,
+          color: state.color || void 0,
+          // Kept on every save: `data` is replaced wholesale, so leaving it out
+          // would untag the collection the moment it was edited.
+          intent: intentTag || void 0
+        }
+      };
+      if (mode === "edit" && collectionId) {
+        await contentApi.update(
+          tenant.slug,
+          CONTENT_TYPE,
+          collectionId,
+          payload
+        );
+        setIsDirty(false);
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2e3);
+        toast({
+          title: "Collection saved",
+          description: "Your changes have been saved."
+        });
+      } else {
+        const result = await contentApi.create(
+          tenant.slug,
+          CONTENT_TYPE,
+          payload
+        );
+        setIsDirty(false);
+        setSaved(true);
+        toast({
+          title: "Collection created",
+          description: "Your collection has been saved."
+        });
+        setTimeout(
+          () => router.replace(`/dashboard/collections/${result.data.id}${query}`),
+          700
+        );
+      }
+    } catch (err) {
+      state.setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      state.setSaving(false);
+    }
+  }, [
+    tenant?.slug,
+    state,
+    mode,
+    collectionId,
+    router,
+    setIsDirty,
+    toast,
+    query,
+    intentTag
+  ]);
+  const editorTitle = mode === "edit" ? state.title || "Edit collection" : "New collection";
+  const backUrl = listHref;
+  useDetailHeader({
+    title: editorTitle,
+    onBack: () => router.push(backUrl)
+  });
+  if (mode === "edit" && loadingCollection) {
+    return /* @__PURE__ */ jsx(CollectionOverviewSkeleton, {});
+  }
+  if (mode === "edit" && (loadError || !collection)) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto px-6 py-8", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => router.push(backUrl),
+          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 collections"
+          ]
+        }
+      ),
+      /* @__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 || "Collection not found" })
+      ] })
+    ] });
+  }
+  if (mode === "edit" && viewMode && collection) {
+    return /* @__PURE__ */ jsx(
+      CollectionOverview,
+      {
+        collection,
+        onEdit: () => setViewMode(false)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    CollectionEditor,
+    {
+      state,
+      isDirty,
+      onSave: handleSave,
+      saved,
+      onBack: () => router.push(backUrl),
+      onNavigate: (href) => router.push(href),
+      onDelete: mode === "edit" ? handleDelete : void 0,
+      deleting,
+      tenantSlug: tenant?.slug || "",
+      intent: intentTag
+    }
+  );
+}
+export {
+  CollectionEditorPage
+};
+//# sourceMappingURL=collection-editor-page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collection-editor/collection-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 { useToast } from '@withpotter/ui-kit/use-toast';\nimport { contentApi } from '@withpotter/lib/api/content';\nimport { ContentItem } from '@withpotter/lib/api/types';\nimport { useCollectionFormState } from '@withpotter/hooks/use-collection-form-state';\nimport { useEditorDirtyTracking } from '@withpotter/components/editor-shared';\nimport { AlertTriangle, ArrowLeft } from 'lucide-react';\nimport { useDetailHeader } from '@withpotter/hooks/use-detail-header';\nimport { useCollectionsView } from '@withpotter/components/features/use-collections-view';\nimport {\n  collectionIntent,\n  parseIntentKeys,\n} from '@withpotter/components/features/collections-helpers';\nimport { CollectionEditor } from './collection-editor';\nimport {\n  CollectionOverview,\n  CollectionOverviewSkeleton,\n} from './collection-overview';\nimport { useConfirm } from '@withpotter/ui-kit/confirm-dialog';\n\nconst CONTENT_TYPE = 'collections';\n\ninterface CollectionEditorPageProps {\n  mode: 'create' | 'edit';\n}\n\nexport function CollectionEditorPage({ mode }: CollectionEditorPageProps) {\n  const { query, listHref, intent: viewIntent } = useCollectionsView();\n  const confirm = useConfirm();\n  const { toast } = useToast();\n  const router = useRouter();\n  const params = useParams();\n  const { tenant } = useAuth();\n\n  // Start in view mode for edit mode; switch to editor via Edit button\n  const [viewMode, setViewMode] = useState(mode === 'edit');\n\n  const collectionId =\n    mode === 'edit' ? (params?.collectionId as string) : undefined;\n\n  // -- Collection data loading (edit mode) --\n  const [collection, setCollection] = useState<ContentItem | null>(null);\n  const [loadingCollection, setLoadingCollection] = useState(mode === 'edit');\n  const [loadError, setLoadError] = useState<string | null>(null);\n\n  useEffect(() => {\n    if (mode !== 'edit' || !tenant?.slug || !collectionId) return;\n    let cancelled = false;\n\n    const fetchData = async () => {\n      setLoadingCollection(true);\n      setLoadError(null);\n      try {\n        const result = await contentApi.get(\n          tenant.slug,\n          CONTENT_TYPE,\n          collectionId,\n        );\n        const item = result.data || result;\n        if (!cancelled) setCollection(item as ContentItem);\n      } catch (e: unknown) {\n        if (!cancelled) {\n          setLoadError(\n            e instanceof Error ? e.message : 'Failed to load collection',\n          );\n        }\n      } finally {\n        if (!cancelled) setLoadingCollection(false);\n      }\n    };\n    fetchData();\n    return () => {\n      cancelled = true;\n    };\n  }, [mode, tenant?.slug, collectionId]);\n\n  /*\n   * The archetype this collection is filed under.\n   *\n   * New: whichever the link named (`?intent=`). Existing: its own tag, and only\n   * that — an untagged collection opened from a scoped list is not claimed by\n   * that list, because nothing says it belongs there. Null for a\n   * single-archetype business, whose links carry no `?intent=`, so no tag is\n   * written and nothing about its editor changes.\n   */\n  const intentTag =\n    mode === 'edit'\n      ? collectionIntent(collection ?? {})\n      : parseIntentKeys(viewIntent).join(',') || null;\n\n  // -- Form state --\n  const state = useCollectionFormState({\n    collection: mode === 'edit' ? collection : null,\n  });\n\n  // -- Dirty tracking --\n  const { isDirty, setIsDirty } = useEditorDirtyTracking([\n    state.title,\n    state.slug,\n    state.description,\n    state.image,\n    state.bannerImage,\n    state.color,\n    state.isActive,\n    state.featured,\n    state.sortOrder,\n    state.productIds,\n  ]);\n\n  // -- Delete handler (edit mode) --\n  const [deleting, setDeleting] = useState(false);\n  const handleDelete = useCallback(async () => {\n    if (!tenant?.slug || !collectionId) return;\n    const ok = await confirm({\n      title: 'Delete this collection?',\n      description:\n        'The products in it are not deleted — only the collection that groups them. This cannot be undone.',\n      tone: 'danger',\n      confirmLabel: 'Delete collection',\n    });\n    if (!ok) return;\n    setDeleting(true);\n    try {\n      await contentApi.delete(tenant.slug, CONTENT_TYPE, collectionId);\n      router.replace(listHref);\n    } catch (e: unknown) {\n      state.setError(e instanceof Error ? e.message : 'Failed to delete');\n      setDeleting(false);\n    }\n  }, [tenant?.slug, collectionId, router, state, listHref]);\n\n  /**\n   * The save that just landed, held long enough to be read.\n   *\n   * `saved` is what the button says; the toast is the second copy of the same\n   * answer for anyone whose eye left the button. On create it also delays the\n   * navigation — a screen that swaps the instant you press Create gives you a\n   * new page to interpret rather than an answer to the thing you asked.\n   */\n  const [saved, setSaved] = useState(false);\n\n  // -- Save handler --\n  const handleSave = useCallback(async () => {\n    if (!tenant?.slug) return;\n    if (!state.title.trim()) {\n      /*\n       * The complaint goes ON the field.\n       *\n       * This wrote into `state.error`, which renders as a toast in the bottom\n       * right — a sentence about the name, as far from the name box as the\n       * window allows, on a form of eight controls that never says which one\n       * it means. Now the box goes red, carries the sentence under it, and\n       * takes the cursor.\n       */\n      state.setTitleError('Give the collection a name');\n      return;\n    }\n\n    state.setSaving(true);\n    state.setError(null);\n\n    try {\n      const payload = {\n        title: state.title.trim(),\n        slug: state.slug || undefined,\n        description: state.description || undefined,\n        isActive: state.isActive,\n        featured: state.featured,\n        sortOrder: state.sortOrder,\n        data: {\n          productIds: state.productIds,\n          image: state.image || undefined,\n          bannerImage: state.bannerImage || undefined,\n          color: state.color || undefined,\n          // Kept on every save: `data` is replaced wholesale, so leaving it out\n          // would untag the collection the moment it was edited.\n          intent: intentTag || undefined,\n        },\n      };\n\n      /*\n       * SAY THAT IT SAVED.\n       *\n       * Both branches used to succeed in silence: the edit path cleared the\n       * dirty flag and the create path navigated, and the only signal either\n       * gave was the button's spinner stopping. A spinner stopping is what a\n       * FAILURE looks like too — the error only renders if the request threw,\n       * so a merchant who pressed Save and saw nothing had no way to tell a\n       * saved collection from one that had not gone anywhere, and pressed it\n       * again. The product editor next door has always confirmed; this is the\n       * same two lines, in the same words.\n       */\n      if (mode === 'edit' && collectionId) {\n        await contentApi.update(\n          tenant.slug,\n          CONTENT_TYPE,\n          collectionId,\n          payload,\n        );\n        setIsDirty(false);\n        setSaved(true);\n        // Long enough to read, short enough that the button is a button again\n        // before you reach for it.\n        setTimeout(() => setSaved(false), 2000);\n        toast({\n          title: 'Collection saved',\n          description: 'Your changes have been saved.',\n        });\n      } else {\n        const result = await contentApi.create(\n          tenant.slug,\n          CONTENT_TYPE,\n          payload,\n        );\n        setIsDirty(false);\n        setSaved(true);\n        toast({\n          title: 'Collection created',\n          description: 'Your collection has been saved.',\n        });\n        // The confirmation comes BEFORE the new page. Navigating on the same\n        // tick meant the only evidence a collection had been created was the\n        // screen changing — which is also what a redirect after an error looks\n        // like, and what nothing at all looks like if you blinked.\n        setTimeout(\n          () =>\n            router.replace(`/dashboard/collections/${result.data.id}${query}`),\n          700,\n        );\n      }\n    } catch (err) {\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    collectionId,\n    router,\n    setIsDirty,\n    toast,\n    query,\n    intentTag,\n  ]);\n\n  const editorTitle =\n    mode === 'edit' ? state.title || 'Edit collection' : 'New collection';\n  // Collections, not the catalogue. Creating a collection from the\n  // collections list and being returned to Inventory is the app answering a\n  // different question than the one you asked.\n  const backUrl = listHref;\n\n  useDetailHeader({\n    title: editorTitle,\n    onBack: () => router.push(backUrl),\n  });\n\n  // -- Loading states --\n  if (mode === 'edit' && loadingCollection) {\n    // The overview's own shape. The shared detail skeleton drew a title block\n    // and three stacked cards, then handed over to a band and a product grid.\n    return <CollectionOverviewSkeleton />;\n  }\n\n  if (mode === 'edit' && (loadError || !collection)) {\n    return (\n      <div className=\"max-w-4xl mx-auto px-6 py-8\">\n        <button\n          type=\"button\"\n          onClick={() => router.push(backUrl)}\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 collections\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 || 'Collection not found'}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  // -- View mode: the record, not a form --\n  //\n  // Same frame as editing, so viewing and editing a collection are\n  // recognisably the same place; the body lives in CollectionOverview because\n  // showing a collection's contents is a screen, not four label/value rows.\n  if (mode === 'edit' && viewMode && collection) {\n    return (\n      <CollectionOverview\n        collection={collection}\n        onEdit={() => setViewMode(false)}\n      />\n    );\n  }\n\n  return (\n    <CollectionEditor\n      state={state}\n      isDirty={isDirty}\n      onSave={handleSave}\n      saved={saved}\n      onBack={() => router.push(backUrl)}\n      onNavigate={(href) => router.push(href)}\n      onDelete={mode === 'edit' ? handleDelete : undefined}\n      deleting={deleting}\n      tenantSlug={tenant?.slug || ''}\n      intent={intentTag}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,30 @@
+import type { useCollectionFormState } from '@withpotter/hooks/use-collection-form-state';
+type CollectionFormState = ReturnType<typeof useCollectionFormState>;
+interface CollectionEditorProps {
+    state: CollectionFormState;
+    isDirty: boolean;
+    onSave: () => void;
+    /** The save landed. The button says so before anything else moves. */
+    saved?: boolean;
+    onBack: () => void;
+    onNavigate?: (href: string) => void;
+    onDelete?: () => void;
+    deleting?: boolean;
+    tenantSlug: string;
+    /** The archetype the collection belongs to, when it has one. */
+    intent?: string | null;
+}
+/**
+ * The last of the bespoke editor headers.
+ *
+ * Five editors each carried their own copy of this bar — invoice, product,
+ * plan, and collection twice (once here for editing, once in the page wrapper
+ * for viewing). Every copy had the same `sticky top-14` offset for an app
+ * header this shell does not have, so every one overlapped its own first
+ * heading, and fixing it meant fixing it five times.
+ *
+ * `DetailPage` is the frame. Nothing below is collection-specific except what
+ * is being edited.
+ */
+export declare function CollectionEditor({ state, isDirty, onSave, saved, onBack, onNavigate, onDelete, deleting, tenantSlug, intent, }: CollectionEditorProps): import("react").JSX.Element;
+export {};