@withpotter/components 0.13.0-next.101

package/dist/features/collection-card.js

@@ -0,0 +1,84 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { Layers, Star } from "lucide-react";
+const MOSAIC = 4;
+function imageUrl(image) {
+  if (!image) return null;
+  return typeof image === "string" ? image : image.url ?? null;
+}
+function CollectionCard({
+  collection,
+  allProducts
+}) {
+  const cover = collection.data?.image || null;
+  const byId = new Map(allProducts.map((p) => [p.id, p]));
+  const faces = collection.productIds.map((id) => byId.get(id)).filter(Boolean).map((p) => imageUrl(p.image)).filter(Boolean).slice(0, MOSAIC);
+  const count = collection.productCount;
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: `/dashboard/collections/${collection.id}`,
+      className: "group block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] 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: [
+          cover ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: cover,
+                alt: "",
+                className: "h-full w-full object-cover transition-transform duration-[var(--motion-slow)] ease-out group-hover:scale-[1.04]"
+              }
+            )
+          ) : faces.length > 0 ? (
+            /* A mosaic, not a single product: one picture would claim to BE the
+               collection, and a grid of four reads as a group without promising
+               which member represents it. Fewer than four simply fill the space
+               they have. */
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `grid h-full w-full gap-px ${faces.length === 1 ? "grid-cols-1" : "grid-cols-2"}`,
+                children: faces.map((src, i) => (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src,
+                      alt: "",
+                      className: `h-full w-full object-cover ${faces.length === 3 && i === 0 ? "row-span-2" : ""}`
+                    },
+                    src + i
+                  )
+                ))
+              }
+            )
+          ) : (
+            /* Genuinely empty, and the mark is honest here in a way it was not
+               beside a collection full of photographed products. */
+            /* @__PURE__ */ jsx("div", { className: "grid h-full w-full place-items-center", children: /* @__PURE__ */ jsx(Layers, { className: "size-7 text-[var(--text-muted)]" }) })
+          ),
+          !collection.isActive && /* @__PURE__ */ jsx("span", { className: "absolute left-2 top-2 rounded-md bg-[var(--bg-base)]/90 px-2 py-0.5 text-2xs font-medium text-[var(--text-secondary)] backdrop-blur-sm", children: "Draft" }),
+          collection.featured && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute right-2 top-2 grid h-6 w-6 place-items-center rounded-md bg-[var(--bg-base)]/90 backdrop-blur-sm",
+              title: "Featured",
+              children: /* @__PURE__ */ jsx(Star, { className: "fill-[var(--warning)] text-[var(--warning)]" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 min-w-0 px-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: collection.title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs text-[var(--text-tertiary)]", children: count === 0 ? "Empty" : `${count} ${count === 1 ? "product" : "products"}` })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CollectionCard
+};
+//# sourceMappingURL=collection-card.js.map

package/dist/features/collection-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/collection-card.tsx"],"sourcesContent":["'use client';\n\nimport Link from 'next/link';\nimport { Layers, Star } from 'lucide-react';\nimport type { InventoryProduct } from '@withpotter/lib/api/types';\nimport type { CollectionWithProducts } from '@withpotter/components/features/collections-helpers';\n\n/** How many product pictures make up the cover when there is no cover image. */\nconst MOSAIC = 4;\n\nfunction imageUrl(image: InventoryProduct['image']): string | null {\n  if (!image) return null;\n  return typeof image === 'string' ? image : (image.url ?? null);\n}\n\n/**\n * A collection as a customer meets it.\n *\n * The list was a table — name, slug, a count, a money total — which is the\n * shape you give something you audit. A collection is not audited. It is a\n * SECTION OF A SHOP: it has a cover, a name and a set of products, and the\n * only question a merchant brings to this screen is what it looks like on\n * their site.\n *\n * That framing is not decoration, it is what is left after the alternative was\n * ruled out. \"Where does this collection appear?\" would be the more\n * operational question, and it cannot be answered: `PageSection` stores\n * `blockType` and an untyped `data` blob with no collection reference, and the\n * storefront's `collections` block renders the set rather than naming members.\n * Collections are not placed individually — they all appear wherever that block\n * does. So the only thing a merchant actually controls per collection is how it\n * looks, and that is what this shows.\n *\n * The cover falls back to a mosaic of what is inside, because a collection with\n * no cover still has a face on the storefront, and \"which of mine look empty\"\n * is answered by seeing them rather than by reading a zero in a column.\n */\nexport function CollectionCard({\n  collection,\n  allProducts,\n}: {\n  collection: CollectionWithProducts;\n  allProducts: InventoryProduct[];\n}) {\n  const cover = (collection.data?.image as string) || null;\n\n  const byId = new Map(allProducts.map((p) => [p.id, p]));\n  const faces = collection.productIds\n    .map((id) => byId.get(id))\n    .filter(Boolean)\n    .map((p) => imageUrl(p!.image))\n    .filter(Boolean)\n    .slice(0, MOSAIC) as string[];\n\n  const count = collection.productCount;\n\n  return (\n    <Link\n      href={`/dashboard/collections/${collection.id}`}\n      className=\"group block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2\"\n    >\n      <div className=\"relative aspect-[4/3] 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        {cover ? (\n          // eslint-disable-next-line @next/next/no-img-element\n          <img\n            src={cover}\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        ) : faces.length > 0 ? (\n          /* A mosaic, not a single product: one picture would claim to BE the\n             collection, and a grid of four reads as a group without promising\n             which member represents it. Fewer than four simply fill the space\n             they have. */\n          <div\n            className={`grid h-full w-full gap-px ${\n              faces.length === 1 ? 'grid-cols-1' : 'grid-cols-2'\n            }`}\n          >\n            {faces.map((src, i) => (\n              // eslint-disable-next-line @next/next/no-img-element\n              <img\n                key={src + i}\n                src={src}\n                alt=\"\"\n                className={`h-full w-full object-cover ${\n                  faces.length === 3 && i === 0 ? 'row-span-2' : ''\n                }`}\n              />\n            ))}\n          </div>\n        ) : (\n          /* Genuinely empty, and the mark is honest here in a way it was not\n             beside a collection full of photographed products. */\n          <div className=\"grid h-full w-full place-items-center\">\n            <Layers className=\"size-7 text-[var(--text-muted)]\" />\n          </div>\n        )}\n\n        {/* Draft is the state worth a badge: it decides whether customers see\n            this at all. Published needs no label — it is the default and the\n            card already looks like the thing on the site. */}\n        {!collection.isActive && (\n          <span className=\"absolute left-2 top-2 rounded-md bg-[var(--bg-base)]/90 px-2 py-0.5 text-2xs font-medium text-[var(--text-secondary)] backdrop-blur-sm\">\n            Draft\n          </span>\n        )}\n        {collection.featured && (\n          <span\n            className=\"absolute right-2 top-2 grid h-6 w-6 place-items-center rounded-md bg-[var(--bg-base)]/90 backdrop-blur-sm\"\n            title=\"Featured\"\n          >\n            <Star className=\"fill-[var(--warning)] text-[var(--warning)]\" />\n          </span>\n        )}\n      </div>\n\n      <div className=\"mt-3 min-w-0 px-0.5\">\n        <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n          {collection.title}\n        </p>\n        {/* \"Empty\" rather than \"0 products\". A zero reads as a measurement; the\n            word reads as the thing to fix, which is what it is. */}\n        <p className=\"mt-0.5 text-xs text-[var(--text-tertiary)]\">\n          {count === 0\n            ? 'Empty'\n            : `${count} ${count === 1 ? 'product' : 'products'}`}\n        </p>\n      </div>\n    </Link>\n  );\n}\n"],"mappings":";AA6DM,SAGI,KAHJ;AA3DN,OAAO,UAAU;AACjB,SAAS,QAAQ,YAAY;AAK7B,MAAM,SAAS;AAEf,SAAS,SAAS,OAAiD;AACjE,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,OAAO,UAAU,WAAW,QAAS,MAAM,OAAO;AAC3D;AAwBO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AACF,GAGG;AACD,QAAM,QAAS,WAAW,MAAM,SAAoB;AAEpD,QAAM,OAAO,IAAI,IAAI,YAAY,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;AACtD,QAAM,QAAQ,WAAW,WACtB,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC,EACxB,OAAO,OAAO,EACd,IAAI,CAAC,MAAM,SAAS,EAAG,KAAK,CAAC,EAC7B,OAAO,OAAO,EACd,MAAM,GAAG,MAAM;AAElB,QAAM,QAAQ,WAAW;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,0BAA0B,WAAW,EAAE;AAAA,MAC7C,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,iRACZ;AAAA;AAAA;AAAA,YAEC;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,KAAI;AAAA,gBACJ,WAAU;AAAA;AAAA,YACZ;AAAA,cACE,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,YAKjB;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,6BACT,MAAM,WAAW,IAAI,gBAAgB,aACvC;AAAA,gBAEC,gBAAM,IAAI,CAAC,KAAK;AAAA;AAAA,kBAEf;AAAA,oBAAC;AAAA;AAAA,sBAEC;AAAA,sBACA,KAAI;AAAA,sBACJ,WAAW,8BACT,MAAM,WAAW,KAAK,MAAM,IAAI,eAAe,EACjD;AAAA;AAAA,oBALK,MAAM;AAAA,kBAMb;AAAA,iBACD;AAAA;AAAA,YACH;AAAA;AAAA;AAAA;AAAA,YAIA,oBAAC,SAAI,WAAU,yCACb,8BAAC,UAAO,WAAU,mCAAkC,GACtD;AAAA;AAAA,UAMD,CAAC,WAAW,YACX,oBAAC,UAAK,WAAU,0IAAyI,mBAEzJ;AAAA,UAED,WAAW,YACV;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAM;AAAA,cAEN,8BAAC,QAAK,WAAU,+CAA8C;AAAA;AAAA,UAChE;AAAA,WAEJ;AAAA,QAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,OAAE,WAAU,2DACV,qBAAW,OACd;AAAA,UAGA,oBAAC,OAAE,WAAU,8CACV,oBAAU,IACP,UACA,GAAG,KAAK,IAAI,UAAU,IAAI,YAAY,UAAU,IACtD;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/features/collections-grid.d.ts

@@ -0,0 +1,30 @@
+import type { InventoryProduct } from '@withpotter/lib/api/types';
+import { type CollectionWithProducts } from '@withpotter/components/features/collections-helpers';
+/**
+ * A collection, as a folder you can see into.
+ *
+ * The list was a text table for the most visual object in the catalogue, and
+ * the first pass at fixing that made it a flat picture card — which showed the
+ * contents but said nothing about what a collection *is*. A folder does: it is
+ * a container that holds things, its contents stick out of the top, and it
+ * opens.
+ */
+export declare function CollectionsGrid({ collections, productMap, formatValue, }: {
+    collections: CollectionWithProducts[];
+    productMap: Map<string, InventoryProduct>;
+    /** The collection's total, or null when it cannot be resolved honestly. */
+    formatValue: (collection: CollectionWithProducts) => string | null;
+}): import("react").JSX.Element;
+/**
+ * The folders, before they arrive.
+ *
+ * Shaped like the thing it precedes: a 4:3 tile with the tab on top and the
+ * cover across the bottom, in the same grid at the same gap. The list was
+ * showing `TableSkeleton` — six full-width rows with column cells — so every
+ * load promised a table and then delivered a grid of folders, which is a
+ * layout jump the eye reads as a glitch even when it takes 200ms. A skeleton
+ * that is not the shape of its page is a worse lie than no skeleton.
+ */
+export declare function CollectionsGridSkeleton({ count }: {
+    count?: number;
+}): import("react").JSX.Element;

package/dist/features/collections-grid.js

@@ -0,0 +1,218 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Link from "next/link";
+import { motion, useReducedMotion } from "motion/react";
+import { Star } from "lucide-react";
+import { deriveContentStatus } from "@withpotter/lib/api/misc";
+import { springs } from "@withpotter/lib/motion";
+import { productHue } from "@withpotter/ui-kit/product-thumb";
+import {
+  FOLDER_TEXTURE,
+  collectionHue,
+  folderFill
+} from "@withpotter/components/features/collections-helpers";
+import { useCollectionsView } from "./use-collections-view";
+function imageUrl(image) {
+  if (!image) return null;
+  return typeof image === "string" ? image : image.url;
+}
+const CARD = { rest: { y: 0 }, open: { y: -6 } };
+const COVER = { rest: { rotateX: 0 }, open: { rotateX: -18 } };
+const SHEETS = [
+  {
+    rest: { rotate: -4, x: "-7%", y: "0%" },
+    open: { rotate: -8, x: "-11%", y: "-4%" }
+  },
+  {
+    rest: { rotate: 1, x: "0%", y: "0%" },
+    open: { rotate: 1, x: "0%", y: "-6%" }
+  },
+  {
+    rest: { rotate: 5, x: "7%", y: "0%" },
+    open: { rotate: 9, x: "11%", y: "-4%" }
+  }
+];
+function FolderCard({
+  collection,
+  productMap,
+  formatValue
+}) {
+  const { query } = useCollectionsView();
+  const [focused, setFocused] = useState(false);
+  const reduced = useReducedMotion();
+  const status = deriveContentStatus(collection);
+  const hue = collectionHue(collection);
+  const value = formatValue(collection);
+  const cover = collection.data?.image;
+  const members = collection.productIds.map((id) => productMap.get(id)).filter(Boolean);
+  const sheets = members.map((p) => ({ src: imageUrl(p.image), label: p.title })).slice(0, 3);
+  const slots = Math.max(sheets.length, 1);
+  return /* @__PURE__ */ jsx(
+    motion.li,
+    {
+      className: "group",
+      initial: "rest",
+      animate: !reduced && focused ? "open" : "rest",
+      whileHover: reduced ? void 0 : "open",
+      onFocus: () => setFocused(true),
+      onBlur: () => setFocused(false),
+      children: /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: `/dashboard/collections/${collection.id}${query}`,
+          className: "block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2",
+          "aria-label": `${collection.title}, ${collection.productCount} ${collection.productCount === 1 ? "item" : "items"}`,
+          children: /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              variants: CARD,
+              transition: springs.gentle,
+              className: "relative aspect-[4/3] [perspective:900px]",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute inset-x-0 bottom-0 top-3 overflow-hidden rounded-xl border",
+                    style: {
+                      background: folderFill(hue, 30),
+                      borderColor: `color-mix(in srgb, ${hue} 34%, transparent)`
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        className: "absolute inset-0 opacity-[0.055] mix-blend-overlay",
+                        style: { backgroundImage: FOLDER_TEXTURE }
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute left-0 top-0 h-3.5 w-[42%] rounded-t-lg border border-b-0",
+                    style: {
+                      background: folderFill(hue, 42),
+                      borderColor: `color-mix(in srgb, ${hue} 34%, transparent)`
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "isolate absolute inset-x-0 bottom-0 top-3 overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-x-[16%] bottom-[32%] top-[13%]", children: Array.from({ length: slots }).map((_, i) => {
+                  const sheet = sheets[i];
+                  return /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      variants: SHEETS[i] ?? SHEETS[1],
+                      transition: { ...springs.soft, delay: i * 0.03 },
+                      style: { zIndex: i },
+                      className: "absolute inset-0 overflow-hidden rounded-md 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",
+                        {
+                          "aria-hidden": true,
+                          className: "grid h-full w-full place-items-center text-lg font-semibold",
+                          style: {
+                            background: `color-mix(in srgb, ${sheet ? productHue(sheet.label) : hue} 16%, var(--bg-base))`,
+                            color: `color-mix(in srgb, ${sheet ? productHue(sheet.label) : hue} 70%, var(--text-tertiary))`
+                          },
+                          children: sheet?.label.trim().charAt(0).toUpperCase()
+                        }
+                      )
+                    },
+                    `${collection.id}-sheet-${i}`
+                  );
+                }) }) }),
+                /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    variants: COVER,
+                    transition: springs.gentle,
+                    style: {
+                      transformOrigin: "bottom",
+                      borderColor: `color-mix(in srgb, ${hue} 30%, transparent)`
+                    },
+                    className: "absolute inset-x-0 bottom-0 top-[46%] overflow-hidden rounded-xl border",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-0",
+                          style: { background: folderFill(hue, 20) }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-0 opacity-[0.05] mix-blend-overlay",
+                          style: { backgroundImage: FOLDER_TEXTURE }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col justify-end p-3", children: [
+                        cover ? /* @__PURE__ */ jsx(
+                          "img",
+                          {
+                            src: cover,
+                            alt: "",
+                            className: "mb-2 size-7 shrink-0 rounded-lg border border-[var(--border-subtle)] object-cover"
+                          }
+                        ) : null,
+                        /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: collection.title }),
+                        /* @__PURE__ */ jsxs("p", { className: "mt-0.5 flex items-baseline gap-2 text-xs text-[var(--text-secondary)]", children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            collection.productCount,
+                            " ",
+                            collection.productCount === 1 ? "item" : "items"
+                          ] }),
+                          value && /* @__PURE__ */ jsx("span", { className: "truncate", children: value })
+                        ] })
+                      ] })
+                    ]
+                  }
+                ),
+                status === "draft" && /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-5 rounded-md bg-[var(--bg-base)]/85 px-2 py-0.5 text-2xs font-medium text-[var(--text-secondary)] backdrop-blur-sm", children: "Draft" }),
+                collection.featured && /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-5 grid h-5 w-5 place-items-center rounded-md bg-[var(--bg-base)]/85 backdrop-blur-sm", children: /* @__PURE__ */ jsx(Star, { className: "fill-[var(--warning)] text-[var(--warning)]" }) })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function CollectionsGrid({
+  collections,
+  productMap,
+  formatValue
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-4 p-3 sm:grid-cols-3 xl:grid-cols-4", children: collections.map((collection) => /* @__PURE__ */ jsx(
+    FolderCard,
+    {
+      collection,
+      productMap,
+      formatValue
+    },
+    collection.id
+  )) });
+}
+function CollectionsGridSkeleton({ count = 4 }) {
+  return /* @__PURE__ */ jsx("ul", { className: "grid grid-cols-2 gap-4 p-3 sm:grid-cols-3 xl:grid-cols-4", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs("li", { className: "relative aspect-[4/3] animate-pulse", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-0 h-3.5 w-[42%] rounded-t-lg bg-[var(--bg-muted)]" }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 top-3 rounded-xl bg-[var(--bg-muted)]" }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 top-[46%] rounded-xl bg-[var(--bg-subtle)]" })
+  ] }, i)) });
+}
+export {
+  CollectionsGrid,
+  CollectionsGridSkeleton
+};
+//# sourceMappingURL=collections-grid.js.map

package/dist/features/collections-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/collections-grid.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable @next/next/no-img-element */\n\nimport { useState } from 'react';\nimport Link from 'next/link';\nimport { motion, useReducedMotion } from 'motion/react';\nimport { Star } from 'lucide-react';\nimport type { InventoryProduct } from '@withpotter/lib/api/types';\nimport { deriveContentStatus } from '@withpotter/lib/api/misc';\nimport { springs } from '@withpotter/lib/motion';\nimport { productHue } from '@withpotter/ui-kit/product-thumb';\nimport {\n  FOLDER_TEXTURE,\n  collectionHue,\n  folderFill,\n  type CollectionWithProducts,\n} from '@withpotter/components/features/collections-helpers';\nimport { useCollectionsView } from './use-collections-view';\n\nfunction imageUrl(image: InventoryProduct['image']) {\n  if (!image) return null;\n  return typeof image === 'string' ? image : image.url;\n}\n\n/**\n * The folder at rest, and the folder open.\n *\n * Springs rather than the house CSS transition, and deliberately: the rule is\n * that springs are for things you can grab, and this is the one surface where\n * the object IS the interaction. A folder that opens on a 180ms ease reads as\n * a picture changing; the same move on a spring reads as a lid with weight\n * behind it. `soft` on the sheets — they are paper, and they settle late —\n * `gentle` on the cover and the lift.\n */\nconst CARD = { rest: { y: 0 }, open: { y: -6 } };\nconst COVER = { rest: { rotateX: 0 }, open: { rotateX: -18 } };\n/*\n  The fan, sized to the folder that holds it.\n\n  The open state used to throw the outer sheets 26% of their own width sideways\n  and tilt them 13-14°, which on a 4:3 tile puts their corners past the folder's\n  left and right edges and above its top — so a collection of two products drew\n  one sheet standing in the folder and one floating beside it. The thing the\n  card exists to say is that these products are IN this collection, and half the\n  contents were outside the container saying it.\n\n  These numbers are the largest fan that still lands inside the folder body at\n  every card width in the grid, worked from the sheet's rotated bounding box\n  rather than guessed; the clip below is the guarantee, not the mechanism.\n*/\nconst SHEETS = [\n  {\n    rest: { rotate: -4, x: '-7%', y: '0%' },\n    open: { rotate: -8, x: '-11%', y: '-4%' },\n  },\n  {\n    rest: { rotate: 1, x: '0%', y: '0%' },\n    open: { rotate: 1, x: '0%', y: '-6%' },\n  },\n  {\n    rest: { rotate: 5, x: '7%', y: '0%' },\n    open: { rotate: 9, x: '11%', y: '-4%' },\n  },\n];\n\nfunction FolderCard({\n  collection,\n  productMap,\n  formatValue,\n}: {\n  collection: CollectionWithProducts;\n  productMap: Map<string, InventoryProduct>;\n  formatValue: (collection: CollectionWithProducts) => string | null;\n}) {\n  const { query } = useCollectionsView();\n  // Keyboard opens it too. `focus` does not bubble, but React's synthetic\n  // onFocus does, so the state can live on the card while the focus itself\n  // lands on the link inside it.\n  const [focused, setFocused] = useState(false);\n  const reduced = useReducedMotion();\n\n  const status = deriveContentStatus(collection);\n  const hue = collectionHue(collection);\n  const value = formatValue(collection);\n\n  /*\n    What is in the folder: one sheet per PRODUCT, not one per photograph.\n\n    This used to collect image URLs and drop the empties, so a product with no\n    photo put nothing in the folder — add one to a collection, come back to the\n    list, and the folder looks exactly as it did. The thing you just did had no\n    effect on the picture of the thing you did it to. A product without a photo\n    is still a product, so it gets a sheet in its own hue with its initial on\n    it, the way the catalogue draws it everywhere else.\n\n    Three sheets, because a fourth sits behind the others and says nothing.\n  */\n  const cover = collection.data?.image as string | undefined;\n  const members = collection.productIds\n    .map((id) => productMap.get(id))\n    .filter(Boolean) as InventoryProduct[];\n  // The collection's OWN picture is not one of the sheets. Sheets are what is\n  // inside; a cover is what is on the front, which is where it now goes — so\n  // adding one changes the face of the folder rather than shuffling a\n  // photograph into the pile of its contents.\n  const sheets: { src: string | null; label: string }[] = members\n    .map((p) => ({ src: imageUrl(p.image), label: p.title }))\n    .slice(0, 3);\n  // An empty folder still shows paper, or the opening cover reveals nothing\n  // and the card reads as broken rather than as empty.\n  const slots = Math.max(sheets.length, 1);\n\n  return (\n    <motion.li\n      className=\"group\"\n      initial=\"rest\"\n      animate={!reduced && focused ? 'open' : 'rest'}\n      whileHover={reduced ? undefined : 'open'}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n    >\n      <Link\n        href={`/dashboard/collections/${collection.id}${query}`}\n        className=\"block rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2\"\n        aria-label={`${collection.title}, ${collection.productCount} ${collection.productCount === 1 ? 'item' : 'items'}`}\n      >\n        <motion.div\n          variants={CARD}\n          transition={springs.gentle}\n          className=\"relative aspect-[4/3] [perspective:900px]\"\n        >\n          {/*\n            The folder's back, and the tab that makes it one.\n\n            The colour is the merchant's pick, or the hue their title hashes\n            to, and it is allowed to be a colour: the first pass mixed it 12%\n            into `--bg-muted`, which is how eight distinct hues all arrived as\n            the same slate.\n          */}\n          <div\n            className=\"absolute inset-x-0 bottom-0 top-3 overflow-hidden rounded-xl border\"\n            style={{\n              background: folderFill(hue, 30),\n              borderColor: `color-mix(in srgb, ${hue} 34%, transparent)`,\n            }}\n          >\n            <span\n              aria-hidden\n              className=\"absolute inset-0 opacity-[0.055] mix-blend-overlay\"\n              style={{ backgroundImage: FOLDER_TEXTURE }}\n            />\n          </div>\n          <div\n            className=\"absolute left-0 top-0 h-3.5 w-[42%] rounded-t-lg border border-b-0\"\n            style={{\n              background: folderFill(hue, 42),\n              borderColor: `color-mix(in srgb, ${hue} 34%, transparent)`,\n            }}\n          />\n\n          {/*\n            The contents, standing IN the folder.\n\n            Clipped to it, so no amount of tilt can put a product outside the\n            container it is filed in — the clip matches the folder's own back\n            exactly: same inset, same radius.\n\n            And `isolate`, which is the difference between standing in the\n            folder and lying on top of it. Each sheet carries a `zIndex` to\n            stack the fan, and without a stacking context here those numbers\n            were read against the CARD — so sheets 1 and 2 painted over the\n            front flap, which is a later sibling with no z-index of its own.\n            The contents covered the thing holding them: the name, the count\n            and the merchant's cover mark all sat behind a photograph. Isolating\n            keeps the fan's stacking to itself and lets the front be the front.\n          */}\n          <div className=\"isolate absolute inset-x-0 bottom-0 top-3 overflow-hidden rounded-xl\">\n            <div className=\"absolute inset-x-[16%] bottom-[32%] top-[13%]\">\n              {Array.from({ length: slots }).map((_, i) => {\n                const sheet = sheets[i];\n                return (\n                  <motion.div\n                    key={`${collection.id}-sheet-${i}`}\n                    variants={SHEETS[i] ?? SHEETS[1]}\n                    transition={{ ...springs.soft, delay: i * 0.03 }}\n                    style={{ zIndex: i }}\n                    className=\"absolute inset-0 overflow-hidden rounded-md 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                        aria-hidden\n                        className=\"grid h-full w-full place-items-center text-lg font-semibold\"\n                        style={{\n                          background: `color-mix(in srgb, ${sheet ? productHue(sheet.label) : hue} 16%, var(--bg-base))`,\n                          color: `color-mix(in srgb, ${sheet ? productHue(sheet.label) : hue} 70%, var(--text-tertiary))`,\n                        }}\n                      >\n                        {sheet?.label.trim().charAt(0).toUpperCase()}\n                      </div>\n                    )}\n                  </motion.div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* The front: tinted from the folder's own hue, so the flap belongs\n              to the folder rather than sitting on it. The name and the count\n              are ON it, the way a folder is labelled. They used to sit under\n              the card as a caption, which is what you write under a picture,\n              not what you write on the thing holding the things. */}\n          <motion.div\n            variants={COVER}\n            transition={springs.gentle}\n            style={{\n              transformOrigin: 'bottom',\n              borderColor: `color-mix(in srgb, ${hue} 30%, transparent)`,\n            }}\n            className=\"absolute inset-x-0 bottom-0 top-[46%] overflow-hidden rounded-xl border\"\n          >\n            {/*\n              NO FULL-BLEED COVER.\n\n              The merchant's picture used to fill the whole front and then be\n              washed out under 62% of the page background and a 6px blur to\n              keep the name readable — a photograph spent as a texture, so the\n              only thing you could tell about the cover you had chosen was that\n              there was one. It is a mark on the folder now: avatar-sized,\n              sharp, above the name, the size the rest of the app draws an\n              identity at.\n            */}\n            <span\n              aria-hidden\n              className=\"absolute inset-0\"\n              style={{ background: folderFill(hue, 20) }}\n            />\n            <span\n              aria-hidden\n              className=\"absolute inset-0 opacity-[0.05] mix-blend-overlay\"\n              style={{ backgroundImage: FOLDER_TEXTURE }}\n            />\n\n            {/* The name and the count are ON the front, the way a folder is\n                labelled. They used to sit under the card as a caption, which\n                is what you write under a picture, not what you write on the\n                thing holding the things. */}\n            <div className=\"relative flex h-full flex-col justify-end p-3\">\n              {cover ? (\n                <img\n                  src={cover}\n                  alt=\"\"\n                  className=\"mb-2 size-7 shrink-0 rounded-lg border border-[var(--border-subtle)] object-cover\"\n                />\n              ) : null}\n              <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n                {collection.title}\n              </p>\n              <p className=\"mt-0.5 flex items-baseline gap-2 text-xs text-[var(--text-secondary)]\">\n                <span>\n                  {collection.productCount}{' '}\n                  {collection.productCount === 1 ? 'item' : 'items'}\n                </span>\n                {value && <span className=\"truncate\">{value}</span>}\n              </p>\n            </div>\n          </motion.div>\n\n          {/* Draft is the only state worth a chip: \"Published\" on every card in\n              a published list is a label nobody can act on. */}\n          {status === 'draft' && (\n            <span className=\"absolute right-2 top-5 rounded-md bg-[var(--bg-base)]/85 px-2 py-0.5 text-2xs font-medium text-[var(--text-secondary)] backdrop-blur-sm\">\n              Draft\n            </span>\n          )}\n          {collection.featured && (\n            <span className=\"absolute right-2 top-5 grid h-5 w-5 place-items-center rounded-md bg-[var(--bg-base)]/85 backdrop-blur-sm\">\n              <Star className=\"fill-[var(--warning)] text-[var(--warning)]\" />\n            </span>\n          )}\n        </motion.div>\n      </Link>\n    </motion.li>\n  );\n}\n\n/**\n * A collection, as a folder you can see into.\n *\n * The list was a text table for the most visual object in the catalogue, and\n * the first pass at fixing that made it a flat picture card — which showed the\n * contents but said nothing about what a collection *is*. A folder does: it is\n * a container that holds things, its contents stick out of the top, and it\n * opens.\n */\nexport function CollectionsGrid({\n  collections,\n  productMap,\n  formatValue,\n}: {\n  collections: CollectionWithProducts[];\n  productMap: Map<string, InventoryProduct>;\n  /** The collection's total, or null when it cannot be resolved honestly. */\n  formatValue: (collection: CollectionWithProducts) => string | null;\n}) {\n  /*\n    NO DRAG-REORDER.\n\n    It was built and taken out again. Handles on every folder, a persisted\n    sortOrder per collection, a rule about which filter states allow a drop —\n    all of it in service of arranging a screen that shows every collection an\n    account has, in a grid the merchant reads by name and colour. Ordering\n    earns its keep where the order is the product (the products INSIDE a\n    collection are shown in sequence on the storefront, and that list has it);\n    here it was a control with a cost and no question behind it.\n  */\n  return (\n    <ul className=\"grid grid-cols-2 gap-4 p-3 sm:grid-cols-3 xl:grid-cols-4\">\n      {collections.map((collection) => (\n        <FolderCard\n          key={collection.id}\n          collection={collection}\n          productMap={productMap}\n          formatValue={formatValue}\n        />\n      ))}\n    </ul>\n  );\n}\n\n/**\n * The folders, before they arrive.\n *\n * Shaped like the thing it precedes: a 4:3 tile with the tab on top and the\n * cover across the bottom, in the same grid at the same gap. The list was\n * showing `TableSkeleton` — six full-width rows with column cells — so every\n * load promised a table and then delivered a grid of folders, which is a\n * layout jump the eye reads as a glitch even when it takes 200ms. A skeleton\n * that is not the shape of its page is a worse lie than no skeleton.\n */\nexport function CollectionsGridSkeleton({ count = 4 }: { count?: number }) {\n  return (\n    <ul className=\"grid grid-cols-2 gap-4 p-3 sm:grid-cols-3 xl:grid-cols-4\">\n      {Array.from({ length: count }).map((_, i) => (\n        <li key={i} className=\"relative aspect-[4/3] animate-pulse\">\n          <div className=\"absolute left-0 top-0 h-3.5 w-[42%] rounded-t-lg bg-[var(--bg-muted)]\" />\n          <div className=\"absolute inset-x-0 bottom-0 top-3 rounded-xl bg-[var(--bg-muted)]\" />\n          <div className=\"absolute inset-x-0 bottom-0 top-[46%] rounded-xl bg-[var(--bg-subtle)]\" />\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/collections-helpers.d.ts

@@ -0,0 +1,89 @@
+import { ContentItem, InventoryProduct } from '@withpotter/lib/api/types';
+/** Content-type key collections are stored under. */
+export declare const CONTENT_TYPE = "collections";
+export interface CollectionWithProducts extends ContentItem {
+    /** Product IDs assigned to this collection (stored in data.productIds). */
+    productIds: string[];
+    productCount: number;
+}
+export declare function toCollectionWithProducts(item: ContentItem): CollectionWithProducts;
+/**
+ * The folder's colour.
+ *
+ * A merchant's own choice when they made one, and otherwise the hue their
+ * collection's name hashes to — so a folder has a colour from the moment it
+ * exists, and picking one is a refinement rather than a chore standing between
+ * the merchant and a saved collection.
+ */
+export declare function collectionHue(collection: {
+    title: string;
+    data?: ContentItem['data'];
+}): string;
+/**
+ * A little grain, so a folder reads as a made thing rather than a swatch.
+ *
+ * Inline SVG fractal noise rather than an asset: it is 300 bytes, it cannot
+ * 404, and it needs no build step. Laid over the folder at a few percent, it
+ * does what paper stock does — breaks the flat fill just enough that the eye
+ * stops reading it as a rectangle of colour.
+ */
+export declare const FOLDER_TEXTURE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E\")";
+/**
+ * The folder's body and its cover, as backgrounds.
+ *
+ * A gradient, which the house rules ban — John asked for one here specifically
+ * and it earns the exception: a folder is a physical object catching light
+ * from above, and a single flat fill is the one thing that reads as a swatch
+ * no matter how good the colour is. It is 8% of tint from top to bottom, not a
+ * colour ramp; nothing else in the app gets one.
+ */
+export declare function folderFill(hue: string, tint: number): string;
+/**
+ * Does this collection belong in the event or the product view?
+ *
+ * Judged by what is inside it. A collection holding an event is an events
+ * collection; one holding anything else is a products one; a mixed one shows
+ * in both, because it is both. An empty collection — just made, nothing in it
+ * yet — and one whose products cannot be resolved show in both too: hiding
+ * either would make a collection vanish from the only list that could show it.
+ */
+export declare function inScope(collection: CollectionWithProducts, scope: 'event' | 'product', productMap: Map<string, InventoryProduct>): boolean;
+/**
+ * The archetype keys named in a `?intent=` value or a stored tag.
+ *
+ * Comma-joined, because a shared nav row (a restaurant's Menu is dine-in and
+ * takeaway) narrows to several archetypes at once — the same shape
+ * `useIntentConfig` reads.
+ */
+export declare function parseIntentKeys(value: string | null | undefined): string[];
+/**
+ * The archetype a collection was filed under, or null for one with no tag.
+ *
+ * Every collection made before archetypes existed has none, and none of them
+ * may vanish for it; see `inIntentScope`.
+ */
+export declare function collectionIntent(collection: {
+    data?: ContentItem['data'];
+}): string | null;
+/**
+ * Does this collection belong in the view for these archetypes?
+ *
+ * A collection belongs to one archetype, recorded in `data.intent`. A tagged
+ * one shows exactly where its tag says. An untagged one is inferred from what
+ * is inside it, and shows when ANY of its products belongs to the view — the
+ * same "a mixed one is both" rule `inScope` has. When it cannot be inferred
+ * (empty, a product that cannot be resolved, or a product whose archetype is
+ * unknown) it shows everywhere, as `inScope` does for an empty one: hiding it
+ * would make a collection vanish from the only list that could show it.
+ *
+ * `intentOf` is injected so this stays pure; the screen builds it from the
+ * business's archetypes with `productIntent`.
+ */
+export declare function inIntentScope(collection: CollectionWithProducts, intentKeys: string | string[], productMap: Map<string, InventoryProduct>, intentOf: (product: InventoryProduct) => string | null): boolean;
+/**
+ * The list's heading for one archetype: "Event collections", "Service
+ * collections". Built from the archetype's own singular noun so a new
+ * archetype needs no entry here; null when archetypes disagree on the word,
+ * and the caller keeps the neutral heading.
+ */
+export declare function intentCollectionsTitle(singulars: string[]): string | null;

package/dist/features/collections-helpers.js

@@ -0,0 +1,84 @@
+import { HUES, productHue } from "@withpotter/ui-kit/product-thumb";
+const CONTENT_TYPE = "collections";
+function parseProductIds(item) {
+  const ids = item.data?.productIds;
+  if (Array.isArray(ids)) return ids;
+  if (typeof ids === "string") {
+    try {
+      const parsed = JSON.parse(ids);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return ids.split(",").filter(Boolean);
+    }
+  }
+  return [];
+}
+function toCollectionWithProducts(item) {
+  const productIds = parseProductIds(item);
+  return { ...item, productIds, productCount: productIds.length };
+}
+function collectionHue(collection) {
+  const chosen = collection.data?.color;
+  if (typeof chosen === "string" && HUES.includes(chosen)) return chosen;
+  return productHue(collection.title);
+}
+const FOLDER_TEXTURE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")`;
+function folderFill(hue, tint) {
+  return `linear-gradient(163deg, color-mix(in srgb, ${hue} ${tint + 6}%, var(--bg-base)) 0%, color-mix(in srgb, ${hue} ${Math.max(tint - 4, 0)}%, var(--bg-base)) 100%)`;
+}
+function inScope(collection, scope, productMap) {
+  let events = 0;
+  let others = 0;
+  for (const id of collection.productIds) {
+    const product = productMap.get(id);
+    if (!product) return true;
+    if (product.behaviors?.ticketed) events++;
+    else others++;
+  }
+  if (events === 0 && others === 0) return true;
+  return scope === "event" ? events > 0 : others > 0;
+}
+function parseIntentKeys(value) {
+  return (value ?? "").split(",").map((key) => key.trim()).filter(Boolean);
+}
+function collectionIntent(collection) {
+  const tag = collection.data?.intent;
+  if (typeof tag !== "string") return null;
+  const keys = parseIntentKeys(tag);
+  return keys.length > 0 ? keys.join(",") : null;
+}
+function inIntentScope(collection, intentKeys, productMap, intentOf) {
+  const wanted = Array.isArray(intentKeys) ? intentKeys : parseIntentKeys(intentKeys);
+  if (wanted.length === 0) return true;
+  const tag = collectionIntent(collection);
+  if (tag) return parseIntentKeys(tag).some((key) => wanted.includes(key));
+  if (collection.productIds.length === 0) return true;
+  let matches = false;
+  for (const id of collection.productIds) {
+    const product = productMap.get(id);
+    if (!product) return true;
+    const own = intentOf(product);
+    if (own === null) return true;
+    if (wanted.includes(own)) matches = true;
+  }
+  return matches;
+}
+function intentCollectionsTitle(singulars) {
+  const words = [...new Set(singulars.map((w) => w.trim().toLowerCase()))];
+  if (words.length !== 1 || !words[0]) return null;
+  const word = singulars[0].trim();
+  return `${word.charAt(0)}${word.slice(1).toLowerCase()} collections`;
+}
+export {
+  CONTENT_TYPE,
+  FOLDER_TEXTURE,
+  collectionHue,
+  collectionIntent,
+  folderFill,
+  inIntentScope,
+  inScope,
+  intentCollectionsTitle,
+  parseIntentKeys,
+  toCollectionWithProducts
+};
+//# sourceMappingURL=collections-helpers.js.map

package/dist/features/collections-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/collections-helpers.ts"],"sourcesContent":["import { ContentItem, InventoryProduct } from '@withpotter/lib/api/types';\nimport { HUES, productHue } from '@withpotter/ui-kit/product-thumb';\n\n/** Content-type key collections are stored under. */\nexport const CONTENT_TYPE = 'collections';\n\nexport interface CollectionWithProducts extends ContentItem {\n  /** Product IDs assigned to this collection (stored in data.productIds). */\n  productIds: string[];\n  productCount: number;\n}\n\nfunction parseProductIds(item: ContentItem): string[] {\n  const ids = item.data?.productIds;\n  if (Array.isArray(ids)) return ids as string[];\n  if (typeof ids === 'string') {\n    try {\n      const parsed = JSON.parse(ids);\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return ids.split(',').filter(Boolean);\n    }\n  }\n  return [];\n}\n\nexport function toCollectionWithProducts(\n  item: ContentItem,\n): CollectionWithProducts {\n  const productIds = parseProductIds(item);\n  return { ...item, productIds, productCount: productIds.length };\n}\n\n/**\n * The folder's colour.\n *\n * A merchant's own choice when they made one, and otherwise the hue their\n * collection's name hashes to — so a folder has a colour from the moment it\n * exists, and picking one is a refinement rather than a chore standing between\n * the merchant and a saved collection.\n */\nexport function collectionHue(collection: {\n  title: string;\n  data?: ContentItem['data'];\n}): string {\n  const chosen = collection.data?.color;\n  if (typeof chosen === 'string' && HUES.includes(chosen)) return chosen;\n  return productHue(collection.title);\n}\n\n/**\n * A little grain, so a folder reads as a made thing rather than a swatch.\n *\n * Inline SVG fractal noise rather than an asset: it is 300 bytes, it cannot\n * 404, and it needs no build step. Laid over the folder at a few percent, it\n * does what paper stock does — breaks the flat fill just enough that the eye\n * stops reading it as a rectangle of colour.\n */\nexport const FOLDER_TEXTURE =\n  \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E\\\")\";\n\n/**\n * The folder's body and its cover, as backgrounds.\n *\n * A gradient, which the house rules ban — John asked for one here specifically\n * and it earns the exception: a folder is a physical object catching light\n * from above, and a single flat fill is the one thing that reads as a swatch\n * no matter how good the colour is. It is 8% of tint from top to bottom, not a\n * colour ramp; nothing else in the app gets one.\n */\nexport function folderFill(hue: string, tint: number) {\n  return `linear-gradient(163deg, color-mix(in srgb, ${hue} ${tint + 6}%, var(--bg-base)) 0%, color-mix(in srgb, ${hue} ${Math.max(tint - 4, 0)}%, var(--bg-base)) 100%)`;\n}\n\n/**\n * Does this collection belong in the event or the product view?\n *\n * Judged by what is inside it. A collection holding an event is an events\n * collection; one holding anything else is a products one; a mixed one shows\n * in both, because it is both. An empty collection — just made, nothing in it\n * yet — and one whose products cannot be resolved show in both too: hiding\n * either would make a collection vanish from the only list that could show it.\n */\nexport function inScope(\n  collection: CollectionWithProducts,\n  scope: 'event' | 'product',\n  productMap: Map<string, InventoryProduct>,\n): boolean {\n  let events = 0;\n  let others = 0;\n  for (const id of collection.productIds) {\n    const product = productMap.get(id);\n    if (!product) return true;\n    if (product.behaviors?.ticketed) events++;\n    else others++;\n  }\n  if (events === 0 && others === 0) return true;\n  return scope === 'event' ? events > 0 : others > 0;\n}\n\n/**\n * The archetype keys named in a `?intent=` value or a stored tag.\n *\n * Comma-joined, because a shared nav row (a restaurant's Menu is dine-in and\n * takeaway) narrows to several archetypes at once — the same shape\n * `useIntentConfig` reads.\n */\nexport function parseIntentKeys(value: string | null | undefined): string[] {\n  return (value ?? '')\n    .split(',')\n    .map((key) => key.trim())\n    .filter(Boolean);\n}\n\n/**\n * The archetype a collection was filed under, or null for one with no tag.\n *\n * Every collection made before archetypes existed has none, and none of them\n * may vanish for it; see `inIntentScope`.\n */\nexport function collectionIntent(collection: {\n  data?: ContentItem['data'];\n}): string | null {\n  const tag = collection.data?.intent;\n  if (typeof tag !== 'string') return null;\n  const keys = parseIntentKeys(tag);\n  return keys.length > 0 ? keys.join(',') : null;\n}\n\n/**\n * Does this collection belong in the view for these archetypes?\n *\n * A collection belongs to one archetype, recorded in `data.intent`. A tagged\n * one shows exactly where its tag says. An untagged one is inferred from what\n * is inside it, and shows when ANY of its products belongs to the view — the\n * same \"a mixed one is both\" rule `inScope` has. When it cannot be inferred\n * (empty, a product that cannot be resolved, or a product whose archetype is\n * unknown) it shows everywhere, as `inScope` does for an empty one: hiding it\n * would make a collection vanish from the only list that could show it.\n *\n * `intentOf` is injected so this stays pure; the screen builds it from the\n * business's archetypes with `productIntent`.\n */\nexport function inIntentScope(\n  collection: CollectionWithProducts,\n  intentKeys: string | string[],\n  productMap: Map<string, InventoryProduct>,\n  intentOf: (product: InventoryProduct) => string | null,\n): boolean {\n  const wanted = Array.isArray(intentKeys)\n    ? intentKeys\n    : parseIntentKeys(intentKeys);\n  if (wanted.length === 0) return true;\n\n  const tag = collectionIntent(collection);\n  if (tag) return parseIntentKeys(tag).some((key) => wanted.includes(key));\n\n  if (collection.productIds.length === 0) return true;\n  let matches = false;\n  for (const id of collection.productIds) {\n    const product = productMap.get(id);\n    if (!product) return true;\n    const own = intentOf(product);\n    if (own === null) return true;\n    if (wanted.includes(own)) matches = true;\n  }\n  return matches;\n}\n\n/**\n * The list's heading for one archetype: \"Event collections\", \"Service\n * collections\". Built from the archetype's own singular noun so a new\n * archetype needs no entry here; null when archetypes disagree on the word,\n * and the caller keeps the neutral heading.\n */\nexport function intentCollectionsTitle(singulars: string[]): string | null {\n  const words = [...new Set(singulars.map((w) => w.trim().toLowerCase()))];\n  if (words.length !== 1 || !words[0]) return null;\n  const word = singulars[0].trim();\n  return `${word.charAt(0)}${word.slice(1).toLowerCase()} collections`;\n}\n"],"mappings":"AACA,SAAS,MAAM,kBAAkB;AAG1B,MAAM,eAAe;AAQ5B,SAAS,gBAAgB,MAA6B;AACpD,QAAM,MAAM,KAAK,MAAM;AACvB,MAAI,MAAM,QAAQ,GAAG,EAAG,QAAO;AAC/B,MAAI,OAAO,QAAQ,UAAU;AAC3B,QAAI;AACF,YAAM,SAAS,KAAK,MAAM,GAAG;AAC7B,aAAO,MAAM,QAAQ,MAAM,IAAI,SAAS,CAAC;AAAA,IAC3C,QAAQ;AACN,aAAO,IAAI,MAAM,GAAG,EAAE,OAAO,OAAO;AAAA,IACtC;AAAA,EACF;AACA,SAAO,CAAC;AACV;AAEO,SAAS,yBACd,MACwB;AACxB,QAAM,aAAa,gBAAgB,IAAI;AACvC,SAAO,EAAE,GAAG,MAAM,YAAY,cAAc,WAAW,OAAO;AAChE;AAUO,SAAS,cAAc,YAGnB;AACT,QAAM,SAAS,WAAW,MAAM;AAChC,MAAI,OAAO,WAAW,YAAY,KAAK,SAAS,MAAM,EAAG,QAAO;AAChE,SAAO,WAAW,WAAW,KAAK;AACpC;AAUO,MAAM,iBACX;AAWK,SAAS,WAAW,KAAa,MAAc;AACpD,SAAO,8CAA8C,GAAG,IAAI,OAAO,CAAC,6CAA6C,GAAG,IAAI,KAAK,IAAI,OAAO,GAAG,CAAC,CAAC;AAC/I;AAWO,SAAS,QACd,YACA,OACA,YACS;AACT,MAAI,SAAS;AACb,MAAI,SAAS;AACb,aAAW,MAAM,WAAW,YAAY;AACtC,UAAM,UAAU,WAAW,IAAI,EAAE;AACjC,QAAI,CAAC,QAAS,QAAO;AACrB,QAAI,QAAQ,WAAW,SAAU;AAAA,QAC5B;AAAA,EACP;AACA,MAAI,WAAW,KAAK,WAAW,EAAG,QAAO;AACzC,SAAO,UAAU,UAAU,SAAS,IAAI,SAAS;AACnD;AASO,SAAS,gBAAgB,OAA4C;AAC1E,UAAQ,SAAS,IACd,MAAM,GAAG,EACT,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,EACvB,OAAO,OAAO;AACnB;AAQO,SAAS,iBAAiB,YAEf;AAChB,QAAM,MAAM,WAAW,MAAM;AAC7B,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,QAAM,OAAO,gBAAgB,GAAG;AAChC,SAAO,KAAK,SAAS,IAAI,KAAK,KAAK,GAAG,IAAI;AAC5C;AAgBO,SAAS,cACd,YACA,YACA,YACA,UACS;AACT,QAAM,SAAS,MAAM,QAAQ,UAAU,IACnC,aACA,gBAAgB,UAAU;AAC9B,MAAI,OAAO,WAAW,EAAG,QAAO;AAEhC,QAAM,MAAM,iBAAiB,UAAU;AACvC,MAAI,IAAK,QAAO,gBAAgB,GAAG,EAAE,KAAK,CAAC,QAAQ,OAAO,SAAS,GAAG,CAAC;AAEvE,MAAI,WAAW,WAAW,WAAW,EAAG,QAAO;AAC/C,MAAI,UAAU;AACd,aAAW,MAAM,WAAW,YAAY;AACtC,UAAM,UAAU,WAAW,IAAI,EAAE;AACjC,QAAI,CAAC,QAAS,QAAO;AACrB,UAAM,MAAM,SAAS,OAAO;AAC5B,QAAI,QAAQ,KAAM,QAAO;AACzB,QAAI,OAAO,SAAS,GAAG,EAAG,WAAU;AAAA,EACtC;AACA,SAAO;AACT;AAQO,SAAS,uBAAuB,WAAoC;AACzE,QAAM,QAAQ,CAAC,GAAG,IAAI,IAAI,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;AACvE,MAAI,MAAM,WAAW,KAAK,CAAC,MAAM,CAAC,EAAG,QAAO;AAC5C,QAAM,OAAO,UAAU,CAAC,EAAE,KAAK;AAC/B,SAAO,GAAG,KAAK,OAAO,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,EAAE,YAAY,CAAC;AACxD;","names":[]}

package/dist/features/collections.d.ts

@@ -0,0 +1,2 @@
+/** Same label treatment as every other field in a FilterBar panel. */
+export declare function CollectionsFeature(): import("react").JSX.Element;