@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1,115 @@
+"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, Trash2, LayoutGrid, Check } from "lucide-react";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { BackBar } from "@withpotter/components/mobile/primitives";
+import { MobileCollectionEditor } from "./mobile-collection-editor";
+import { CollectionEditorContent } from "./collection-editor-content";
+import { Button } from "@withpotter/ui-kit/button";
+import { useErrorToast } from "@withpotter/ui-kit";
+import { useCollectionsView } from "@withpotter/components/features/use-collections-view";
+function CollectionEditor({
+  state,
+  isDirty,
+  onSave,
+  saved,
+  onBack,
+  onNavigate,
+  onDelete,
+  deleting,
+  tenantSlug,
+  intent
+}) {
+  const { listHref } = useCollectionsView();
+  const isMobile = useIsMobile();
+  useErrorToast(state.error, () => state.setError(null));
+  const actions = /* @__PURE__ */ jsxs(Fragment, { children: [
+    state.isEditing && onDelete && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        onClick: onDelete,
+        loading: deleting,
+        icon: /* @__PURE__ */ jsx(Trash2, {}),
+        className: "text-[var(--error)] hover:text-[var(--error)]",
+        children: "Delete"
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onBack, children: "Discard" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: saved ? "success" : "primary",
+        onClick: onSave,
+        loading: state.saving,
+        disabled: saved,
+        icon: saved ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Save, {}),
+        children: saved ? state.isEditing ? "Saved" : "Created" : state.isEditing ? "Save changes" : "Create collection"
+      }
+    )
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        BackBar,
+        {
+          title: state.isEditing ? state.title || "Collection" : "New collection",
+          onBack
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "px-4", children: [
+        /* @__PURE__ */ jsx(
+          MobileCollectionEditor,
+          {
+            state,
+            tenantSlug,
+            intent
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FloatingSaveBar,
+          {
+            isDirty,
+            saving: state.saving,
+            saved,
+            isEditing: state.isEditing,
+            entityName: "Collection",
+            onSave
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      breadcrumbs: [
+        {
+          label: "Collections",
+          href: listHref,
+          icon: /* @__PURE__ */ jsx(LayoutGrid, {})
+        },
+        {
+          label: state.isEditing ? state.title || "Collection" : "New collection"
+        }
+      ],
+      onNavigate,
+      actions,
+      maxWidth: "max-w-6xl",
+      children: /* @__PURE__ */ jsx(
+        CollectionEditorContent,
+        {
+          state,
+          tenantSlug,
+          intent
+        }
+      )
+    }
+  ) });
+}
+export {
+  CollectionEditor
+};
+//# sourceMappingURL=collection-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collection-editor/collection-editor.tsx"],"sourcesContent":["'use client';\n\nimport { useIsMobile } from '@withpotter/hooks/use-mobile';\nimport { FloatingSaveBar } from '@withpotter/components/editor-shared';\nimport { Save, Trash2, LayoutGrid, Check } from 'lucide-react';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { BackBar } from '@withpotter/components/mobile/primitives';\nimport { MobileCollectionEditor } from './mobile-collection-editor';\nimport { CollectionEditorContent } from './collection-editor-content';\nimport type { useCollectionFormState } from '@withpotter/hooks/use-collection-form-state';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { useErrorToast } from '@withpotter/ui-kit';\nimport { useCollectionsView } from '@withpotter/components/features/use-collections-view';\n\ntype CollectionFormState = ReturnType<typeof useCollectionFormState>;\n\ninterface CollectionEditorProps {\n  state: CollectionFormState;\n  isDirty: boolean;\n  onSave: () => void;\n  /** The save landed. The button says so before anything else moves. */\n  saved?: boolean;\n  onBack: () => void;\n  onNavigate?: (href: string) => void;\n  onDelete?: () => void;\n  deleting?: boolean;\n  tenantSlug: string;\n  /** The archetype the collection belongs to, when it has one. */\n  intent?: string | null;\n}\n\n/**\n * The last of the bespoke editor headers.\n *\n * Five editors each carried their own copy of this bar — invoice, product,\n * plan, and collection twice (once here for editing, once in the page wrapper\n * for viewing). Every copy had the same `sticky top-14` offset for an app\n * header this shell does not have, so every one overlapped its own first\n * heading, and fixing it meant fixing it five times.\n *\n * `DetailPage` is the frame. Nothing below is collection-specific except what\n * is being edited.\n */\nexport function CollectionEditor({\n  state,\n  isDirty,\n  onSave,\n  saved,\n  onBack,\n  onNavigate,\n  onDelete,\n  deleting,\n  tenantSlug,\n  intent,\n}: CollectionEditorProps) {\n  const { listHref } = useCollectionsView();\n  const isMobile = useIsMobile();\n  useErrorToast(state.error, () => state.setError(null));\n\n  const actions = (\n    <>\n      {state.isEditing && onDelete && (\n        <Button\n          variant=\"secondary\"\n          onClick={onDelete}\n          loading={deleting}\n          icon={<Trash2 />}\n          className=\"text-[var(--error)] hover:text-[var(--error)]\"\n        >\n          Delete\n        </Button>\n      )}\n      <Button variant=\"secondary\" onClick={onBack}>\n        Discard\n      </Button>\n      {/*\n        The button answers its own press.\n\n        A spinner that stops is what success and failure look like from the\n        same seat, so the merchant who pressed Create and saw the screen do\n        nothing pressed it again. For the two seconds after a save lands the\n        button says what happened, in the tense of the thing that happened.\n      */}\n      <Button\n        variant={saved ? 'success' : 'primary'}\n        onClick={onSave}\n        loading={state.saving}\n        disabled={saved}\n        icon={saved ? <Check /> : <Save />}\n      >\n        {saved\n          ? state.isEditing\n            ? 'Saved'\n            : 'Created'\n          : state.isEditing\n            ? 'Save changes'\n            : 'Create collection'}\n      </Button>\n    </>\n  );\n\n  if (isMobile) {\n    return (\n      <>\n        {/* DetailPage is desktop-only here, so the frame's mobile chrome never\n            reaches this branch and the screen opened with no title and no way\n            off it but the browser's own back. Same wording as the last crumb. */}\n        <BackBar\n          title={\n            state.isEditing ? state.title || 'Collection' : 'New collection'\n          }\n          onBack={onBack}\n        />\n        <div className=\"px-4\">\n          <MobileCollectionEditor\n            state={state}\n            tenantSlug={tenantSlug}\n            intent={intent}\n          />\n          <FloatingSaveBar\n            isDirty={isDirty}\n            saving={state.saving}\n            saved={saved}\n            isEditing={state.isEditing}\n            entityName=\"Collection\"\n            onSave={onSave}\n          />\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <>\n      <DetailPage\n        breadcrumbs={[\n          {\n            label: 'Collections',\n            href: listHref,\n            icon: <LayoutGrid />,\n          },\n          {\n            label: state.isEditing\n              ? state.title || 'Collection'\n              : 'New collection',\n          },\n        ]}\n        onNavigate={onNavigate}\n        actions={actions}\n        // The header actions and the content share ONE width. This had a\n        // `max-w-3xl` wrapper inside a `max-w-4xl` frame, so Discard and Create\n        // sat 100px past the right edge of the cards they act on — aligned to\n        // nothing on the page.\n        maxWidth=\"max-w-6xl\"\n      >\n        <CollectionEditorContent\n          state={state}\n          tenantSlug={tenantSlug}\n          intent={intent}\n        />\n      </DetailPage>\n    </>\n  );\n}\n"],"mappings":";AA4DI,mBAMY,KANZ;AA1DJ,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,MAAM,QAAQ,YAAY,aAAa;AAChD,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AAExC,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AA+B5B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,WAAW,YAAY;AAC7B,gBAAc,MAAM,OAAO,MAAM,MAAM,SAAS,IAAI,CAAC;AAErD,QAAM,UACJ,iCACG;AAAA,UAAM,aAAa,YAClB;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,QACT,MAAM,oBAAC,UAAO;AAAA,QACd,WAAU;AAAA,QACX;AAAA;AAAA,IAED;AAAA,IAEF,oBAAC,UAAO,SAAQ,aAAY,SAAS,QAAQ,qBAE7C;AAAA,IASA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,QAAQ,YAAY;AAAA,QAC7B,SAAS;AAAA,QACT,SAAS,MAAM;AAAA,QACf,UAAU;AAAA,QACV,MAAM,QAAQ,oBAAC,SAAM,IAAK,oBAAC,QAAK;AAAA,QAE/B,kBACG,MAAM,YACJ,UACA,YACF,MAAM,YACJ,iBACA;AAAA;AAAA,IACR;AAAA,KACF;AAGF,MAAI,UAAU;AACZ,WACE,iCAIE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OACE,MAAM,YAAY,MAAM,SAAS,eAAe;AAAA,UAElD;AAAA;AAAA,MACF;AAAA,MACA,qBAAC,SAAI,WAAU,QACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,QAAQ,MAAM;AAAA,YACd;AAAA,YACA,WAAW,MAAM;AAAA,YACjB,YAAW;AAAA,YACX;AAAA;AAAA,QACF;AAAA,SACF;AAAA,OACF;AAAA,EAEJ;AAEA,SACE,gCACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,QACX;AAAA,UACE,OAAO;AAAA,UACP,MAAM;AAAA,UACN,MAAM,oBAAC,cAAW;AAAA,QACpB;AAAA,QACA;AAAA,UACE,OAAO,MAAM,YACT,MAAM,SAAS,eACf;AAAA,QACN;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,MAKA,UAAS;AAAA,MAET;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,29 @@
+import type { ContentItem } from '@withpotter/lib/api/types';
+/**
+ * A collection, shown as the thing it is.
+ *
+ * This page used to answer "what is in this collection?" with the sentence
+ * "Count: 1". It listed Name, Slug, Featured and that count as four label/value
+ * rows and stopped — no products, no prices, and not even the two images the
+ * editor had just spent half its screen collecting. You would assign six
+ * products, land here on save, and be told a number.
+ *
+ * So the record shows its contents: the pictures, the products with their own
+ * photos and prices, and the two facts that are actually about the collection
+ * rather than about any one product in it — what it is worth and where it
+ * lives on the storefront.
+ */
+export declare function CollectionOverview({ collection, onEdit, }: {
+    collection: ContentItem;
+    onEdit: () => void;
+}): import("react").JSX.Element;
+/**
+ * The record, before it arrives.
+ *
+ * The crumb, the band, and the product grid, at the sizes they actually
+ * render. It used to show `DetailPageSkeleton` — a back link, a title block
+ * and three stacked cards — which is not this page's shape at all, so the
+ * screen reorganised itself the moment the data landed. The loading state has
+ * one job: hold the place of what is coming.
+ */
+export declare function CollectionOverviewSkeleton(): import("react").JSX.Element;

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

@@ -0,0 +1,334 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { motion, useReducedMotion } from "motion/react";
+import { springs } from "@withpotter/lib/motion";
+import { useMemo } from "react";
+import {
+  Edit2,
+  ExternalLink,
+  LayoutGrid,
+  Package,
+  Plus,
+  Star
+} from "lucide-react";
+import { inventoryApi } from "@withpotter/lib/api/inventory";
+import { useApiQuery } from "@withpotter/hooks/use-api-query";
+import { useFormatCurrency } from "@withpotter/hooks/use-format-currency";
+import { useAuth } from "@withpotter/lib/auth-context";
+import { storefrontPageUrl } from "@withpotter/lib/storefront";
+import { DetailPage } from "@withpotter/ui-kit/detail-page";
+import { Badge } from "@withpotter/ui-kit/badge";
+import { Button } from "@withpotter/ui-kit/button";
+import { StateView } from "@withpotter/ui-kit/state-view";
+import { productHue } from "@withpotter/ui-kit/product-thumb";
+import {
+  FOLDER_TEXTURE,
+  collectionHue,
+  folderFill
+} from "@withpotter/components/features/collections-helpers";
+import { useCollectionsView } from "@withpotter/components/features/use-collections-view";
+const HERO_SHEETS = [
+  {
+    rest: { rotate: -7, x: "-16%", y: "0%" },
+    open: { rotate: -14, x: "-30%", y: "-8%" }
+  },
+  {
+    rest: { rotate: 1, x: "0%", y: "0%" },
+    open: { rotate: 1, x: "0%", y: "-12%" }
+  },
+  {
+    rest: { rotate: 8, x: "16%", y: "0%" },
+    open: { rotate: 15, x: "30%", y: "-7%" }
+  }
+];
+function imageUrl(image) {
+  if (!image) return null;
+  return typeof image === "string" ? image : image.url;
+}
+function CollectionOverview({
+  collection,
+  onEdit
+}) {
+  const { listHref } = useCollectionsView();
+  const router = useRouter();
+  const { tenant } = useAuth();
+  const tenantSlug = tenant?.slug;
+  const reduced = useReducedMotion();
+  const formatCurrency = useFormatCurrency();
+  const { data: inventory, isLoading } = useApiQuery(
+    ["collection-overview-products"],
+    (slug) => inventoryApi.listAll(slug)
+  );
+  const productIds = useMemo(() => {
+    const ids = collection.data?.productIds;
+    return Array.isArray(ids) ? ids : [];
+  }, [collection.data?.productIds]);
+  const products = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    (inventory || []).forEach((p) => map.set(p.id, p));
+    return productIds.map((id) => map.get(id)).filter(Boolean);
+  }, [inventory, productIds]);
+  const total = products.length === productIds.length ? products.reduce((sum, p) => sum + (Number(p.price) || 0), 0) : null;
+  const banner = collection.data?.bannerImage;
+  const square = collection.data?.image;
+  const hue = collectionHue(collection);
+  const sheets = [
+    ...square ? [{ src: square, label: collection.title }] : [],
+    ...products.map((p) => ({
+      src: (typeof p.image === "string" ? p.image : p.image?.url) ?? null,
+      label: p.title
+    }))
+  ].slice(0, 3);
+  return /* @__PURE__ */ jsx(
+    DetailPage,
+    {
+      breadcrumbs: [
+        {
+          label: "Collections",
+          href: listHref,
+          icon: /* @__PURE__ */ jsx(LayoutGrid, {})
+        },
+        { label: collection.title }
+      ],
+      onNavigate: (href) => router.push(href),
+      maxWidth: "max-w-5xl",
+      children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "group relative overflow-hidden rounded-xl border",
+            initial: "rest",
+            whileHover: reduced ? void 0 : "open",
+            animate: "rest",
+            style: {
+              background: folderFill(hue, 22),
+              borderColor: `color-mix(in srgb, ${hue} 30%, transparent)`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute inset-0 opacity-[0.055] mix-blend-overlay",
+                  style: { backgroundImage: FOLDER_TEXTURE }
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "absolute right-4 top-4 z-10 flex items-center gap-2", children: [
+                collection.isActive && tenantSlug && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    asChild: true,
+                    variant: "secondary",
+                    icon: /* @__PURE__ */ jsx(ExternalLink, {}),
+                    className: "bg-[var(--bg-base)] text-[var(--text-primary)] hover:bg-[var(--bg-muted)]",
+                    children: /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: storefrontPageUrl(
+                          tenantSlug,
+                          `/shop?collection=${encodeURIComponent(collection.slug)}`
+                        ),
+                        target: "_blank",
+                        rel: "noreferrer",
+                        children: "View live"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: onEdit,
+                    icon: /* @__PURE__ */ jsx(Edit2, {}),
+                    className: "bg-[var(--bg-base)] text-[var(--text-primary)] hover:bg-[var(--bg-muted)]",
+                    children: "Edit"
+                  }
+                )
+              ] }),
+              banner ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: banner,
+                  alt: "",
+                  className: "h-48 w-full object-cover lg:h-60"
+                }
+              ) : (
+                /* The contents, standing in the band, and they answer the pointer
+                   the same way the folder in the list does. A picture that moves
+                   under the cursor on one screen and sits inert on the next reads
+                   as two different objects. Decorative: every product here is
+                   listed properly below, so a screen reader announcing them would
+                   be reading the page twice. */
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute right-[9%] top-8 hidden h-[58%] w-[20%] sm:block",
+                    children: sheets.map((sheet, i) => /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        variants: HERO_SHEETS[i] ?? HERO_SHEETS[1],
+                        transition: { ...springs.soft, delay: i * 0.03 },
+                        style: { zIndex: i },
+                        className: "absolute inset-0 overflow-hidden rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)]",
+                        children: sheet.src ? /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: sheet.src,
+                            alt: "",
+                            className: "h-full w-full object-cover"
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: "grid h-full w-full place-items-center text-xl font-semibold",
+                            style: {
+                              background: `color-mix(in srgb, ${productHue(sheet.label)} 16%, var(--bg-base))`,
+                              color: `color-mix(in srgb, ${productHue(sheet.label)} 70%, var(--text-tertiary))`
+                            },
+                            children: sheet.label.trim().charAt(0).toUpperCase()
+                          }
+                        )
+                      },
+                      `sheet-${i}`
+                    ))
+                  }
+                )
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: banner ? "absolute inset-x-0 bottom-0 bg-gradient-to-t p-4 backdrop-blur-sm" : "relative flex h-48 flex-col justify-end p-4 lg:h-56",
+                  style: banner ? {
+                    background: `color-mix(in srgb, var(--bg-base) 78%, transparent)`
+                  } : void 0,
+                  children: /* @__PURE__ */ jsxs("div", { className: "max-w-md", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("h2", { className: "text-[length:var(--text-title)] font-semibold text-[var(--text-primary)]", children: collection.title }),
+                      /* @__PURE__ */ jsx(Badge, { children: collection.isActive ? "Published" : "Draft" }),
+                      collection.featured && /* @__PURE__ */ jsxs(Badge, { children: [
+                        /* @__PURE__ */ jsx(Star, { className: "mr-1 fill-[var(--warning)] text-[var(--warning)]" }),
+                        "Featured"
+                      ] })
+                    ] }),
+                    collection.description ? /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-2 text-sm text-[var(--text-secondary)]", children: collection.description }) : /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: onEdit,
+                        className: "mt-2 text-sm text-[var(--text-tertiary)] underline underline-offset-2 transition-colors hover:text-[var(--text-secondary)]",
+                        children: "Say what ties these together"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("p", { className: "mt-3 text-xs text-[var(--text-tertiary)]", children: [
+                      productIds.length,
+                      " ",
+                      productIds.length === 1 ? "product" : "products",
+                      total !== null && productIds.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                        " \xB7 ",
+                        formatCurrency(total)
+                      ] })
+                    ] })
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        banner && collection.description && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-sm text-[var(--text-secondary)]", children: collection.description }),
+        productIds.length === 0 ? /* @__PURE__ */ jsx(
+          StateView,
+          {
+            kind: "empty",
+            animated: true,
+            icon: Package,
+            title: "Nothing in it yet",
+            description: "A collection is the products you put in it. Add a few and they show up here.",
+            action: { label: "Add products", onClick: onEdit }
+          }
+        ) : /* @__PURE__ */ jsxs("ul", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: [
+          isLoading && products.length === 0 ? productIds.map((id) => /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "aspect-square animate-pulse rounded-xl bg-[var(--bg-muted)]"
+            },
+            id
+          )) : products.map((p) => {
+            const src = imageUrl(p.image);
+            return /* @__PURE__ */ jsx("li", { className: "group", children: /* @__PURE__ */ jsxs(
+              Link,
+              {
+                href: `/dashboard/catalog/${p.id}`,
+                className: "block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "relative aspect-square overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-muted)]/40 transition-[border-color,box-shadow,transform] duration-[var(--motion-normal)] ease-out group-hover:-translate-y-0.5 group-hover:border-[var(--border-default)]", children: src ? /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src,
+                      alt: "",
+                      className: "h-full w-full object-cover transition-transform duration-[var(--motion-slow)] ease-out group-hover:scale-[1.04]"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-hidden": true,
+                      className: "grid h-full w-full place-items-center",
+                      style: {
+                        background: `color-mix(in srgb, ${productHue(p.title)} 14%, transparent)`
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-4xl font-semibold",
+                          style: {
+                            color: `color-mix(in srgb, ${productHue(p.title)} 70%, var(--text-tertiary))`
+                          },
+                          children: p.title.trim().charAt(0).toUpperCase()
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "mt-2 min-w-0 px-0.5", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: p.title }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: formatCurrency(Number(p.price) || 0) })
+                  ] })
+                ]
+              }
+            ) }, p.id);
+          }),
+          !isLoading && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onEdit,
+              className: "flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition-colors hover:border-brand-500/40 hover:bg-[var(--accent-secondary)] hover:text-[var(--accent-secondary-ink)]",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "size-5" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: "Add products" })
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+function CollectionOverviewSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-5xl animate-pulse space-y-6 px-2 lg:px-10", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-4 w-40 rounded bg-[var(--bg-muted)]" }),
+    /* @__PURE__ */ jsx("div", { className: "h-48 w-full rounded-xl bg-[var(--bg-muted)] lg:h-56" }),
+    /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs("li", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "aspect-square rounded-xl bg-[var(--bg-muted)]" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-2/3 rounded bg-[var(--bg-muted)]" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3 w-1/3 rounded bg-[var(--bg-muted)]" })
+    ] }, i)) })
+  ] });
+}
+export {
+  CollectionOverview,
+  CollectionOverviewSkeleton
+};
+//# sourceMappingURL=collection-overview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/collection-editor/collection-overview.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable @next/next/no-img-element */\n\nimport Link from 'next/link';\nimport { useRouter } from 'next/navigation';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { springs } from '@withpotter/lib/motion';\nimport { useMemo } from 'react';\nimport {\n  Edit2,\n  ExternalLink,\n  LayoutGrid,\n  Package,\n  Plus,\n  Star,\n} from 'lucide-react';\nimport type { ContentItem, InventoryProduct } from '@withpotter/lib/api/types';\nimport { inventoryApi } from '@withpotter/lib/api/inventory';\nimport { useApiQuery } from '@withpotter/hooks/use-api-query';\nimport { useFormatCurrency } from '@withpotter/hooks/use-format-currency';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { storefrontPageUrl } from '@withpotter/lib/storefront';\nimport { DetailPage } from '@withpotter/ui-kit/detail-page';\nimport { Badge } from '@withpotter/ui-kit/badge';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { StateView } from '@withpotter/ui-kit/state-view';\nimport { productHue } from '@withpotter/ui-kit/product-thumb';\nimport {\n  FOLDER_TEXTURE,\n  collectionHue,\n  folderFill,\n} from '@withpotter/components/features/collections-helpers';\nimport { useCollectionsView } from '@withpotter/components/features/use-collections-view';\n\n/** Where the band's sheets rest, and where they fan when you hover it. */\nconst HERO_SHEETS = [\n  {\n    rest: { rotate: -7, x: '-16%', y: '0%' },\n    open: { rotate: -14, x: '-30%', y: '-8%' },\n  },\n  {\n    rest: { rotate: 1, x: '0%', y: '0%' },\n    open: { rotate: 1, x: '0%', y: '-12%' },\n  },\n  {\n    rest: { rotate: 8, x: '16%', y: '0%' },\n    open: { rotate: 15, x: '30%', y: '-7%' },\n  },\n];\n\nfunction imageUrl(image: InventoryProduct['image']) {\n  if (!image) return null;\n  return typeof image === 'string' ? image : image.url;\n}\n\n/**\n * A collection, shown as the thing it is.\n *\n * This page used to answer \"what is in this collection?\" with the sentence\n * \"Count: 1\". It listed Name, Slug, Featured and that count as four label/value\n * rows and stopped — no products, no prices, and not even the two images the\n * editor had just spent half its screen collecting. You would assign six\n * products, land here on save, and be told a number.\n *\n * So the record shows its contents: the pictures, the products with their own\n * photos and prices, and the two facts that are actually about the collection\n * rather than about any one product in it — what it is worth and where it\n * lives on the storefront.\n */\nexport function CollectionOverview({\n  collection,\n  onEdit,\n}: {\n  collection: ContentItem;\n  onEdit: () => void;\n}) {\n  const { listHref } = useCollectionsView();\n  const router = useRouter();\n  const { tenant } = useAuth();\n  const tenantSlug = tenant?.slug;\n  const reduced = useReducedMotion();\n  const formatCurrency = useFormatCurrency();\n  const { data: inventory, isLoading } = useApiQuery(\n    ['collection-overview-products'],\n    (slug) => inventoryApi.listAll(slug),\n  );\n\n  const productIds = useMemo(() => {\n    const ids = collection.data?.productIds;\n    return Array.isArray(ids) ? (ids as string[]) : [];\n  }, [collection.data?.productIds]);\n\n  const products = useMemo(() => {\n    const map = new Map<string, InventoryProduct>();\n    (inventory || []).forEach((p) => map.set(p.id, p));\n    return productIds\n      .map((id) => map.get(id))\n      .filter(Boolean) as InventoryProduct[];\n  }, [inventory, productIds]);\n\n  // Every ID resolved, or no total. The same rule the list follows: a sum\n  // missing a product it cannot see is not a smaller number, it is a wrong one.\n  const total =\n    products.length === productIds.length\n      ? products.reduce((sum, p) => sum + (Number(p.price) || 0), 0)\n      : null;\n\n  const banner = collection.data?.bannerImage as string | undefined;\n  const square = collection.data?.image as string | undefined;\n  const hue = collectionHue(collection);\n  // The same sheets the folder shows, and by the same rule: one per PRODUCT,\n  // photograph or not. Collecting URLs and dropping the empties meant adding a\n  // product with no photo changed nothing on screen.\n  const sheets: { src: string | null; label: string }[] = [\n    ...(square ? [{ src: square, label: collection.title }] : []),\n    ...products.map((p) => ({\n      src: (typeof p.image === 'string' ? p.image : p.image?.url) ?? null,\n      label: p.title,\n    })),\n  ].slice(0, 3);\n\n  return (\n    <DetailPage\n      breadcrumbs={[\n        {\n          label: 'Collections',\n          href: listHref,\n          icon: <LayoutGrid />,\n        },\n        { label: collection.title },\n      ]}\n      /*\n        NO TITLE, NO BADGES, NO HEADER ACTION.\n\n        The name was on screen three times inside 80 vertical pixels: in the\n        crumb, as the page title, and again on the band under it. Repetition\n        that dense stops reading as emphasis and starts reading as a bug.\n\n        The band below is the folder, and a folder carries its own label — so\n        the identity lives there, with the status chip and Edit beside it, and\n        the frame keeps only the crumb that says where you are. One name, on\n        the object it names.\n      */\n      onNavigate={(href) => router.push(href)}\n      maxWidth=\"max-w-5xl\"\n    >\n      <div className=\"space-y-6\">\n        {/*\n          The folder, opened.\n\n          Clicking a coloured folder that fans its contents and landing on a\n          white page with a title and a line of grey text is the click going\n          nowhere: the list makes a promise about what a collection is and the\n          record dropped it. This band is the same object at rest — the\n          merchant's banner when they have one, and otherwise their colour with\n          the contents standing in it, exactly as the folder draws them.\n        */}\n        <motion.div\n          className=\"group relative overflow-hidden rounded-xl border\"\n          initial=\"rest\"\n          whileHover={reduced ? undefined : 'open'}\n          animate=\"rest\"\n          style={{\n            background: folderFill(hue, 22),\n            borderColor: `color-mix(in srgb, ${hue} 30%, transparent)`,\n          }}\n        >\n          {/* The same grain the folders in the list carry. */}\n          <span\n            aria-hidden\n            className=\"pointer-events-none absolute inset-0 opacity-[0.055] mix-blend-overlay\"\n            style={{ backgroundImage: FOLDER_TEXTURE }}\n          />\n          {/* The action sits on the folder too, because that is what it\n              edits. */}\n          {/* Its own opaque surface, not the secondary button's.\n              `secondary` hovers to `--interactive-active`, which is a\n              near-transparent neutral tuned for the page background — over a\n              saturated band it washed straight into the colour, so the button\n              read as vanishing under the cursor. */}\n          <div className=\"absolute right-4 top-4 z-10 flex items-center gap-2\">\n            {/*\n              The collection on the storefront.\n\n              Only when it is published, because a draft has no page to open,\n              and pointing at `/shop?collection=<slug>` because that — not\n              `/collections/<slug>` — is the address the renderer actually\n              serves. The dashboard advertised the second one for years while\n              only a single template implemented the first; the platform shop\n              page now honours it for every tenant.\n            */}\n            {collection.isActive && tenantSlug && (\n              <Button\n                asChild\n                variant=\"secondary\"\n                icon={<ExternalLink />}\n                className=\"bg-[var(--bg-base)] text-[var(--text-primary)] hover:bg-[var(--bg-muted)]\"\n              >\n                <a\n                  href={storefrontPageUrl(\n                    tenantSlug,\n                    `/shop?collection=${encodeURIComponent(collection.slug)}`,\n                  )}\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                >\n                  View live\n                </a>\n              </Button>\n            )}\n            <Button\n              variant=\"secondary\"\n              onClick={onEdit}\n              icon={<Edit2 />}\n              // The one thing the variant cannot supply: an opaque ground.\n              className=\"bg-[var(--bg-base)] text-[var(--text-primary)] hover:bg-[var(--bg-muted)]\"\n            >\n              Edit\n            </Button>\n          </div>\n\n          {banner ? (\n            <img\n              src={banner}\n              alt=\"\"\n              className=\"h-48 w-full object-cover lg:h-60\"\n            />\n          ) : (\n            /* The contents, standing in the band, and they answer the pointer\n               the same way the folder in the list does. A picture that moves\n               under the cursor on one screen and sits inert on the next reads\n               as two different objects. Decorative: every product here is\n               listed properly below, so a screen reader announcing them would\n               be reading the page twice. */\n            <div\n              aria-hidden\n              // Inset far enough that the fan stays inside the band: the\n              // sheets rotate and slide out from here, and the band clips, so\n              // a stack sitting flush against the right edge lost its corner\n              // to the crop the moment anything moved.\n              className=\"pointer-events-none absolute right-[9%] top-8 hidden h-[58%] w-[20%] sm:block\"\n            >\n              {sheets.map((sheet, i) => (\n                <motion.div\n                  key={`sheet-${i}`}\n                  variants={HERO_SHEETS[i] ?? HERO_SHEETS[1]}\n                  transition={{ ...springs.soft, delay: i * 0.03 }}\n                  style={{ zIndex: i }}\n                  className=\"absolute inset-0 overflow-hidden rounded-lg border border-[var(--border-subtle)] bg-[var(--bg-base)]\"\n                >\n                  {sheet.src ? (\n                    <img\n                      src={sheet.src}\n                      alt=\"\"\n                      className=\"h-full w-full object-cover\"\n                    />\n                  ) : (\n                    <div\n                      className=\"grid h-full w-full place-items-center text-xl font-semibold\"\n                      style={{\n                        background: `color-mix(in srgb, ${productHue(sheet.label)} 16%, var(--bg-base))`,\n                        color: `color-mix(in srgb, ${productHue(sheet.label)} 70%, var(--text-tertiary))`,\n                      }}\n                    >\n                      {sheet.label.trim().charAt(0).toUpperCase()}\n                    </div>\n                  )}\n                </motion.div>\n              ))}\n            </div>\n          )}\n\n          {/*\n            The label, in one block and in one order: what it is called, then\n            what it is, then how big it is.\n\n            It had drifted into a pile of five loose lines — name, chip, count,\n            worth, description — each its own paragraph at its own size, so the\n            eye had no way to tell which line was the heading and which was a\n            footnote. Name and status share a line because the chip qualifies\n            the name. The description follows because it says what the thing\n            IS. The measurements go last and small: they are true, and they are\n            not why anyone opened this page.\n          */}\n          <div\n            className={\n              banner\n                ? 'absolute inset-x-0 bottom-0 bg-gradient-to-t p-4 backdrop-blur-sm'\n                : 'relative flex h-48 flex-col justify-end p-4 lg:h-56'\n            }\n            style={\n              banner\n                ? {\n                    background: `color-mix(in srgb, var(--bg-base) 78%, transparent)`,\n                  }\n                : undefined\n            }\n          >\n            <div className=\"max-w-md\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <h2 className=\"text-[length:var(--text-title)] font-semibold text-[var(--text-primary)]\">\n                  {collection.title}\n                </h2>\n                <Badge>{collection.isActive ? 'Published' : 'Draft'}</Badge>\n                {collection.featured && (\n                  <Badge>\n                    <Star className=\"mr-1 fill-[var(--warning)] text-[var(--warning)]\" />\n                    Featured\n                  </Badge>\n                )}\n              </div>\n\n              {collection.description ? (\n                <p className=\"mt-2 line-clamp-2 text-sm text-[var(--text-secondary)]\">\n                  {collection.description}\n                </p>\n              ) : (\n                <button\n                  type=\"button\"\n                  onClick={onEdit}\n                  className=\"mt-2 text-sm text-[var(--text-tertiary)] underline underline-offset-2 transition-colors hover:text-[var(--text-secondary)]\"\n                >\n                  Say what ties these together\n                </button>\n              )}\n\n              <p className=\"mt-3 text-xs text-[var(--text-tertiary)]\">\n                {productIds.length}{' '}\n                {productIds.length === 1 ? 'product' : 'products'}\n                {total !== null && productIds.length > 0 && (\n                  <> &middot; {formatCurrency(total)}</>\n                )}\n              </p>\n            </div>\n          </div>\n        </motion.div>\n\n        {banner && collection.description && (\n          <p className=\"max-w-2xl text-sm text-[var(--text-secondary)]\">\n            {collection.description}\n          </p>\n        )}\n\n        {productIds.length === 0 ? (\n          <StateView\n            kind=\"empty\"\n            animated\n            icon={Package}\n            title=\"Nothing in it yet\"\n            description=\"A collection is the products you put in it. Add a few and they show up here.\"\n            action={{ label: 'Add products', onClick: onEdit }}\n          />\n        ) : (\n          <ul className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">\n            {isLoading && products.length === 0\n              ? productIds.map((id) => (\n                  <li\n                    key={id}\n                    className=\"aspect-square animate-pulse rounded-xl bg-[var(--bg-muted)]\"\n                  />\n                ))\n              : products.map((p) => {\n                  const src = imageUrl(p.image);\n                  return (\n                    <li key={p.id} className=\"group\">\n                      <Link\n                        href={`/dashboard/catalog/${p.id}`}\n                        className=\"block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2\"\n                      >\n                        {/* The catalogue's card, so a product looks like\n                            itself wherever you meet it — the same lift, the\n                            same slow image push, the same title-derived hue\n                            when there is no photograph. */}\n                        <div className=\"relative aspect-square overflow-hidden rounded-xl border border-[var(--border-subtle)] bg-[var(--bg-muted)]/40 transition-[border-color,box-shadow,transform] duration-[var(--motion-normal)] ease-out group-hover:-translate-y-0.5 group-hover:border-[var(--border-default)]\">\n                          {src ? (\n                            <img\n                              src={src}\n                              alt=\"\"\n                              className=\"h-full w-full object-cover transition-transform duration-[var(--motion-slow)] ease-out group-hover:scale-[1.04]\"\n                            />\n                          ) : (\n                            <div\n                              aria-hidden\n                              className=\"grid h-full w-full place-items-center\"\n                              style={{\n                                background: `color-mix(in srgb, ${productHue(p.title)} 14%, transparent)`,\n                              }}\n                            >\n                              <span\n                                className=\"text-4xl font-semibold\"\n                                style={{\n                                  color: `color-mix(in srgb, ${productHue(p.title)} 70%, var(--text-tertiary))`,\n                                }}\n                              >\n                                {p.title.trim().charAt(0).toUpperCase()}\n                              </span>\n                            </div>\n                          )}\n                        </div>\n                        <div className=\"mt-2 min-w-0 px-0.5\">\n                          <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n                            {p.title}\n                          </p>\n                          <p className=\"text-xs text-[var(--text-tertiary)]\">\n                            {formatCurrency(Number(p.price) || 0)}\n                          </p>\n                        </div>\n                      </Link>\n                    </li>\n                  );\n                })}\n            {/* The way to add another one, in the place you are looking when\n                you notice something is missing. */}\n            {!isLoading && (\n              <li>\n                <button\n                  type=\"button\"\n                  onClick={onEdit}\n                  className=\"flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition-colors hover:border-brand-500/40 hover:bg-[var(--accent-secondary)] hover:text-[var(--accent-secondary-ink)]\"\n                >\n                  <Plus className=\"size-5\" />\n                  <span className=\"text-xs font-medium\">Add products</span>\n                </button>\n              </li>\n            )}\n          </ul>\n        )}\n      </div>\n    </DetailPage>\n  );\n}\n\n/**\n * The record, before it arrives.\n *\n * The crumb, the band, and the product grid, at the sizes they actually\n * render. It used to show `DetailPageSkeleton` — a back link, a title block\n * and three stacked cards — which is not this page's shape at all, so the\n * screen reorganised itself the moment the data landed. The loading state has\n * one job: hold the place of what is coming.\n */\nexport function CollectionOverviewSkeleton() {\n  return (\n    <div className=\"mx-auto max-w-5xl animate-pulse space-y-6 px-2 lg:px-10\">\n      <div className=\"h-4 w-40 rounded bg-[var(--bg-muted)]\" />\n      <div className=\"h-48 w-full rounded-xl bg-[var(--bg-muted)] lg:h-56\" />\n      <ul className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4\">\n        {Array.from({ length: 4 }).map((_, i) => (\n          <li key={i} className=\"space-y-2\">\n            <div className=\"aspect-square rounded-xl bg-[var(--bg-muted)]\" />\n            <div className=\"h-3 w-2/3 rounded bg-[var(--bg-muted)]\" />\n            <div className=\"h-3 w-1/3 rounded bg-[var(--bg-muted)]\" />\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,9 @@
+import type { InventoryProduct } from '@withpotter/lib/api/types';
+export declare function CollectionProductList({ productIds, productMap, loading, formatCurrency, onReorder, onRemove, }: {
+    productIds: string[];
+    productMap: Map<string, InventoryProduct>;
+    loading: boolean;
+    formatCurrency: (amount: number) => string;
+    onReorder: (ids: string[]) => void;
+    onRemove: (id: string) => void;
+}): import("react").JSX.Element;