@withpotter/components 0.13.0-next.101

package/dist/features/discounts/discounts-table.js

@@ -0,0 +1,133 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy, Share2 } from "lucide-react";
+import { StatusBadge } from "@withpotter/components/shared/status-badge";
+import { Checkbox } from "@withpotter/ui-kit/checkbox";
+import { TableRow, TableShell, Th } from "@withpotter/ui-kit/table-shell";
+import { DiscountMark } from "./discount-mark";
+import {
+  formatDate,
+  getDiscountTypeIcon,
+  getDiscountTypeLabel,
+  formatDiscountValue
+} from "./discount-helpers";
+function DiscountsTable({
+  discounts,
+  formatCurrency,
+  copiedCode,
+  onCopyCode,
+  onShareCode,
+  onRowClick,
+  footer,
+  selectedIds,
+  onToggle,
+  onToggleAll,
+  showMoney = false
+}) {
+  const allShownSelected = discounts.length > 0 && discounts.every((d) => selectedIds.has(d.id));
+  return /* @__PURE__ */ jsx(
+    TableShell,
+    {
+      bare: true,
+      footer,
+      minWidth: showMoney ? 1020 : 860,
+      head: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx(Th, { className: "w-10 pr-0", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: allShownSelected,
+            onChange: onToggleAll,
+            "aria-label": "Select every discount on this page"
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Th, { children: "Discount" }),
+        /* @__PURE__ */ jsx(Th, { children: "Type" }),
+        /* @__PURE__ */ jsx(Th, { children: "Value" }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Used" }),
+        showMoney && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Th, { align: "right", children: "Earned" }),
+          /* @__PURE__ */ jsx(Th, { align: "right", children: "Given up" })
+        ] }),
+        /* @__PURE__ */ jsx(Th, { align: "right", children: "Runs" }),
+        /* @__PURE__ */ jsx(Th, { children: "Status" })
+      ] }),
+      children: discounts.map((discount) => /* @__PURE__ */ jsxs(TableRow, { onClick: () => onRowClick(discount), children: [
+        /* @__PURE__ */ jsx(
+          "td",
+          {
+            className: "w-10 py-3 pl-4 pr-0",
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selectedIds.has(discount.id),
+                onChange: () => onToggle(discount.id),
+                "aria-label": `Select ${discount.name}`
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("td", { className: "max-w-[320px]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(DiscountMark, { type: discount.discountType }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: discount.name }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-xs text-[var(--text-tertiary)]", children: discount.code }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Copy ${discount.code}`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onCopyCode(discount.code);
+                  },
+                  className: "cursor-pointer p-0.5 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+                  children: copiedCode === discount.code ? /* @__PURE__ */ jsx(Check, { className: "text-[var(--success)]" }) : /* @__PURE__ */ jsx(Copy, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Share ${discount.code}`,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onShareCode(discount);
+                  },
+                  className: "cursor-pointer p-0.5 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]",
+                  children: /* @__PURE__ */ jsx(Share2, {})
+                }
+              )
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-sm text-[var(--text-secondary)]", children: [
+          getDiscountTypeIcon(discount.discountType),
+          getDiscountTypeLabel(discount.discountType)
+        ] }) }),
+        /* @__PURE__ */ jsx("td", { className: "text-sm font-medium text-[var(--text-primary)]", children: formatDiscountValue(discount, formatCurrency) }),
+        /* @__PURE__ */ jsxs("td", { className: "text-right text-sm tabular-nums text-[var(--text-secondary)]", children: [
+          discount.usageCount.toLocaleString(),
+          discount.usageLimit ? ` / ${discount.usageLimit.toLocaleString()}` : ""
+        ] }),
+        showMoney && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("td", { className: "text-right text-sm tabular-nums text-[var(--text-primary)]", children: discount.revenue != null ? formatCurrency(discount.revenue) : "\u2014" }),
+          /* @__PURE__ */ jsx("td", { className: "text-right text-sm tabular-nums text-[var(--text-secondary)]", children: discount.savings != null ? formatCurrency(discount.savings) : "\u2014" })
+        ] }),
+        /* @__PURE__ */ jsxs("td", { className: "text-right text-sm tabular-nums text-[var(--text-tertiary)]", children: [
+          discount.startsAt ? formatDate(discount.startsAt) : "Any time",
+          discount.endsAt && /* @__PURE__ */ jsxs("span", { className: "block text-xs", children: [
+            "to ",
+            formatDate(discount.endsAt)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(StatusBadge, { status: discount.status }) })
+      ] }, discount.id))
+    }
+  );
+}
+export {
+  DiscountsTable
+};
+//# sourceMappingURL=discounts-table.js.map

package/dist/features/discounts/discounts-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/discounts/discounts-table.tsx"],"sourcesContent":["'use client';\n\nimport { Check, Copy, Share2 } from 'lucide-react';\nimport { StatusBadge } from '@withpotter/components/shared/status-badge';\nimport { Checkbox } from '@withpotter/ui-kit/checkbox';\nimport { TableRow, TableShell, Th } from '@withpotter/ui-kit/table-shell';\nimport { DiscountMark } from './discount-mark';\nimport type { Discount } from '@withpotter/lib/api/types';\nimport {\n  formatDate,\n  getDiscountTypeIcon,\n  getDiscountTypeLabel,\n  formatDiscountValue,\n} from './discount-helpers';\n\ninterface DiscountsTableProps {\n  discounts: Discount[];\n  formatCurrency: (amount: number, currencyOverride?: string) => string;\n  copiedCode: string | null;\n  onCopyCode: (code: string) => void;\n  onShareCode: (discount: Discount) => void;\n  onRowClick: (discount: Discount) => void;\n  /** Pagination, rendered inside the table container rather than below it. */\n  footer?: React.ReactNode;\n  /** Ids currently ticked. Selection state lives with the page, not the table. */\n  selectedIds: Set<string>;\n  onToggle: (id: string) => void;\n  onToggleAll: () => void;\n  /**\n   * Whether the API reports what each code earned and gave away.\n   *\n   * Off on a build that cannot, and the two columns are absent rather than\n   * present and empty — two columns of em dashes say \"not counted\" correctly\n   * while spending a third of the table width to say it.\n   */\n  showMoney?: boolean;\n}\n\n/**\n * One table for every viewport, on the shared shell.\n *\n * It used to be `hidden lg:block` with a separate card list rendered underneath\n * for phones — two components describing the same rows, free to drift. It also\n * hand-rolled its header cells with `uppercase tracking-wider` and its own\n * status pill colours, both of which the system already owns.\n */\nexport function DiscountsTable({\n  discounts,\n  formatCurrency,\n  copiedCode,\n  onCopyCode,\n  onShareCode,\n  onRowClick,\n  footer,\n  selectedIds,\n  onToggle,\n  onToggleAll,\n  showMoney = false,\n}: DiscountsTableProps) {\n  const allShownSelected =\n    discounts.length > 0 && discounts.every((d) => selectedIds.has(d.id));\n  return (\n    <TableShell\n      bare\n      footer={footer}\n      minWidth={showMoney ? 1020 : 860}\n      head={\n        <tr>\n          <Th className=\"w-10 pr-0\">\n            <Checkbox\n              checked={allShownSelected}\n              onChange={onToggleAll}\n              aria-label=\"Select every discount on this page\"\n            />\n          </Th>\n          <Th>Discount</Th>\n          <Th>Type</Th>\n          <Th>Value</Th>\n          <Th align=\"right\">Used</Th>\n          {/* What the code brought in, and what it gave away to do it. A usage\n              count on its own ranks codes by popularity, which is the wrong\n              question — the code everyone reaches for may be the one handing\n              money to buyers who had already decided. */}\n          {showMoney && (\n            <>\n              <Th align=\"right\">Earned</Th>\n              <Th align=\"right\">Given up</Th>\n            </>\n          )}\n          <Th align=\"right\">Runs</Th>\n          <Th>Status</Th>\n        </tr>\n      }\n    >\n      {discounts.map((discount) => (\n        <TableRow key={discount.id} onClick={() => onRowClick(discount)}>\n          {/* The cell swallows the click so ticking a row does not also open\n              it — the row is a link, the checkbox is not. */}\n          <td\n            className=\"w-10 py-3 pl-4 pr-0\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            <Checkbox\n              checked={selectedIds.has(discount.id)}\n              onChange={() => onToggle(discount.id)}\n              aria-label={`Select ${discount.name}`}\n            />\n          </td>\n          <td className=\"max-w-[320px]\">\n            <div className=\"flex items-center gap-3\">\n              <DiscountMark type={discount.discountType} />\n              <div className=\"min-w-0\">\n                <p className=\"truncate text-sm font-medium text-[var(--text-primary)]\">\n                  {discount.name}\n                </p>\n                <div className=\"mt-0.5 flex items-center gap-2\">\n                  <span className=\"font-mono text-xs text-[var(--text-tertiary)]\">\n                    {discount.code}\n                  </span>\n                  <button\n                    type=\"button\"\n                    aria-label={`Copy ${discount.code}`}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onCopyCode(discount.code);\n                    }}\n                    className=\"cursor-pointer p-0.5 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n                  >\n                    {copiedCode === discount.code ? (\n                      <Check className=\"text-[var(--success)]\" />\n                    ) : (\n                      <Copy />\n                    )}\n                  </button>\n                  <button\n                    type=\"button\"\n                    aria-label={`Share ${discount.code}`}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      onShareCode(discount);\n                    }}\n                    className=\"cursor-pointer p-0.5 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]\"\n                  >\n                    <Share2 />\n                  </button>\n                </div>\n              </div>\n            </div>\n          </td>\n\n          <td>\n            <span className=\"flex items-center gap-2 text-sm text-[var(--text-secondary)]\">\n              {getDiscountTypeIcon(discount.discountType)}\n              {getDiscountTypeLabel(discount.discountType)}\n            </span>\n          </td>\n\n          <td className=\"text-sm font-medium text-[var(--text-primary)]\">\n            {formatDiscountValue(discount, formatCurrency)}\n          </td>\n\n          <td className=\"text-right text-sm tabular-nums text-[var(--text-secondary)]\">\n            {discount.usageCount.toLocaleString()}\n            {discount.usageLimit\n              ? ` / ${discount.usageLimit.toLocaleString()}`\n              : ''}\n          </td>\n\n          {/* An em dash rather than a zero on the odd row the roll-up did not\n              reach: printing a currency-formatted nought would claim the code\n              earned nothing, when nothing was counted. The columns only exist\n              at all on an API that reports the money — see `showMoney`. */}\n          {showMoney && (\n            <>\n              <td className=\"text-right text-sm tabular-nums text-[var(--text-primary)]\">\n                {discount.revenue != null\n                  ? formatCurrency(discount.revenue)\n                  : '—'}\n              </td>\n\n              <td className=\"text-right text-sm tabular-nums text-[var(--text-secondary)]\">\n                {discount.savings != null\n                  ? formatCurrency(discount.savings)\n                  : '—'}\n              </td>\n            </>\n          )}\n\n          <td className=\"text-right text-sm tabular-nums text-[var(--text-tertiary)]\">\n            {discount.startsAt ? formatDate(discount.startsAt) : 'Any time'}\n            {discount.endsAt && (\n              <span className=\"block text-xs\">\n                to {formatDate(discount.endsAt)}\n              </span>\n            )}\n          </td>\n\n          <td>\n            <StatusBadge status={discount.status} />\n          </td>\n        </TableRow>\n      ))}\n    </TableShell>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/discounts.d.ts

@@ -0,0 +1,2 @@
+export { DiscountsPanel } from './discounts/discounts-panel';
+export { DiscountFormModal } from './discounts/discount-form-modal';

package/dist/features/discounts.js

@@ -0,0 +1,7 @@
+import { DiscountsPanel } from "./discounts/discounts-panel";
+import { DiscountFormModal } from "./discounts/discount-form-modal";
+export {
+  DiscountFormModal,
+  DiscountsPanel
+};
+//# sourceMappingURL=discounts.js.map

package/dist/features/discounts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/discounts.tsx"],"sourcesContent":["// Public surface for the discounts feature. Implementation is split across\n// `./discounts/*` so every file stays under the 500-line ceiling. Importers\n// keep using `@withpotter/components/features/discounts` unchanged.\nexport { DiscountsPanel } from './discounts/discounts-panel';\nexport { DiscountFormModal } from './discounts/discount-form-modal';\n"],"mappings":"AAGA,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;","names":[]}

package/dist/features/gallery.d.ts

@@ -0,0 +1 @@
+export declare function GalleryFeature(): import("react").JSX.Element;

package/dist/features/gallery.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Image, Trash2, Eye, X, Upload } from "lucide-react";
+import { Button } from "@withpotter/ui-kit/button";
+const demoImages = [
+  {
+    id: "1",
+    url: "https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=400",
+    alt: "Spa Interior",
+    category: "Interior"
+  },
+  {
+    id: "2",
+    url: "https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=400",
+    alt: "Massage Treatment",
+    category: "Treatments"
+  },
+  {
+    id: "3",
+    url: "https://images.unsplash.com/photo-1519823551278-64ac92734fb1?w=400",
+    alt: "Relaxation Room",
+    category: "Interior"
+  },
+  {
+    id: "4",
+    url: "https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=400",
+    alt: "Facial Treatment",
+    category: "Treatments"
+  },
+  {
+    id: "5",
+    url: "https://images.unsplash.com/photo-1507652313519-d4e9174996dd?w=400",
+    alt: "Products",
+    category: "Products"
+  },
+  {
+    id: "6",
+    url: "https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=400",
+    alt: "Aromatherapy",
+    category: "Products"
+  }
+];
+function GalleryFeature() {
+  const [images] = useState(demoImages);
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [filter, setFilter] = useState("all");
+  const categories = [
+    "all",
+    ...new Set(
+      images.map((i) => i.category).filter((c) => Boolean(c))
+    )
+  ];
+  const filteredImages = filter === "all" ? images : images.filter((i) => i.category === filter);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 lg:space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-title font-semibold text-[var(--text-primary)]", children: "Gallery" }),
+        /* @__PURE__ */ jsx("p", { className: "hidden sm:block text-sm text-[var(--text-secondary)] mt-1", children: "Manage photos for your website" })
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { className: "sm:px-4 shrink-0", children: [
+        /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Upload images" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx("nav", { className: "flex gap-2 overflow-x-auto", children: categories.map((cat) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setFilter(cat),
+        className: `flex items-center gap-2 px-4 py-2 text-sm font-medium rounded transition-colors whitespace-nowrap cursor-pointer ${filter === cat ? "bg-brand-500/10 text-brand-500 border border-brand-500/20" : "text-[var(--text-secondary)] bg-[var(--bg-base)] hover:bg-[var(--interactive-hover)] border border-transparent"}`,
+        children: cat === "all" ? "All" : cat
+      },
+      cat
+    )) }) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: filteredImages.map((image) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group relative aspect-square bg-[var(--bg-muted)] rounded-md overflow-x-auto",
+        children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: image.url,
+              alt: image.alt,
+              className: "w-full h-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: "modal-in",
+                onClick: () => setSelectedImage(image),
+                children: /* @__PURE__ */ jsx(Eye, { className: "size-4 text-[var(--text-secondary)]" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsx(Trash2, { className: "size-4 text-[var(--error)]" }) })
+          ] }),
+          image.category && /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-2", children: /* @__PURE__ */ jsx("span", { className: "px-2 py-1 bg-black/50 text-white text-xs rounded-full", children: image.category }) })
+        ]
+      },
+      image.id
+    )) }),
+    filteredImages.length === 0 && /* @__PURE__ */ jsxs("div", { className: "surface text-center py-12", children: [
+      /* @__PURE__ */ jsx(Image, { className: "size-12 text-[var(--text-muted)] mx-auto mb-4" }),
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--text-secondary)]", children: "No images in this category" })
+    ] }),
+    selectedImage && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/90 flex items-center justify-center z-50 cursor-pointer modal-scrim",
+        onClick: () => setSelectedImage(null),
+        children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "absolute top-4 right-4",
+              children: /* @__PURE__ */ jsx(X, { className: "size-6" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: selectedImage.url,
+              alt: selectedImage.alt,
+              className: "max-w-4xl max-h-[80vh] object-contain cursor-default",
+              onClick: (e) => e.stopPropagation()
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 text-white text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: selectedImage.alt }),
+            selectedImage.category && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--text-muted)]", children: selectedImage.category })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  GalleryFeature
+};
+//# sourceMappingURL=gallery.js.map

package/dist/features/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/gallery.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Image, Plus, Trash2, Eye, X, Upload } from 'lucide-react';\nimport { Button } from '@withpotter/ui-kit/button';\n\ninterface GalleryImage {\n  id: string;\n  url: string;\n  alt: string;\n  category?: string;\n}\n\nconst demoImages: GalleryImage[] = [\n  {\n    id: '1',\n    url: 'https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=400',\n    alt: 'Spa Interior',\n    category: 'Interior',\n  },\n  {\n    id: '2',\n    url: 'https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=400',\n    alt: 'Massage Treatment',\n    category: 'Treatments',\n  },\n  {\n    id: '3',\n    url: 'https://images.unsplash.com/photo-1519823551278-64ac92734fb1?w=400',\n    alt: 'Relaxation Room',\n    category: 'Interior',\n  },\n  {\n    id: '4',\n    url: 'https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=400',\n    alt: 'Facial Treatment',\n    category: 'Treatments',\n  },\n  {\n    id: '5',\n    url: 'https://images.unsplash.com/photo-1507652313519-d4e9174996dd?w=400',\n    alt: 'Products',\n    category: 'Products',\n  },\n  {\n    id: '6',\n    url: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=400',\n    alt: 'Aromatherapy',\n    category: 'Products',\n  },\n];\n\nexport function GalleryFeature() {\n  const [images] = useState<GalleryImage[]>(demoImages);\n  const [selectedImage, setSelectedImage] = useState<GalleryImage | null>(null);\n  const [filter, setFilter] = useState('all');\n\n  const categories = [\n    'all',\n    ...new Set(\n      images.map((i) => i.category).filter((c): c is string => Boolean(c)),\n    ),\n  ];\n  const filteredImages =\n    filter === 'all' ? images : images.filter((i) => i.category === filter);\n\n  return (\n    <div className=\"space-y-4 lg:space-y-6\">\n      <div className=\"flex items-center justify-between gap-3\">\n        <div className=\"min-w-0\">\n          <h1 className=\"text-title font-semibold text-[var(--text-primary)]\">\n            Gallery\n          </h1>\n          <p className=\"hidden sm:block text-sm text-[var(--text-secondary)] mt-1\">\n            Manage photos for your website\n          </p>\n        </div>\n        <Button className=\"sm:px-4 shrink-0\">\n          <Upload className=\"size-4\" />\n          <span className=\"hidden sm:inline\">Upload images</span>\n        </Button>\n      </div>\n\n      {/* Tab Navigation - matching settings pages design */}\n      <div className=\"mb-4\">\n        <nav className=\"flex gap-2 overflow-x-auto\">\n          {categories.map((cat) => (\n            <button\n              type=\"button\"\n              key={cat}\n              onClick={() => setFilter(cat)}\n              className={`flex items-center gap-2 px-4 py-2 text-sm font-medium rounded transition-colors whitespace-nowrap cursor-pointer ${\n                filter === cat\n                  ? 'bg-brand-500/10 text-brand-500 border border-brand-500/20'\n                  : 'text-[var(--text-secondary)] bg-[var(--bg-base)] hover:bg-[var(--interactive-hover)] border border-transparent'\n              }`}\n            >\n              {cat === 'all' ? 'All' : cat}\n            </button>\n          ))}\n        </nav>\n      </div>\n\n      <div className=\"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4\">\n        {filteredImages.map((image) => (\n          <div\n            key={image.id}\n            className=\"group relative aspect-square bg-[var(--bg-muted)] rounded-md overflow-x-auto\"\n          >\n            <img\n              src={image.url}\n              alt={image.alt}\n              className=\"w-full h-full object-cover\"\n            />\n            <div className=\"absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2\">\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"modal-in\"\n                onClick={() => setSelectedImage(image)}\n              >\n                <Eye className=\"size-4 text-[var(--text-secondary)]\" />\n              </Button>\n              <Button variant=\"ghost\" size=\"icon\">\n                <Trash2 className=\"size-4 text-[var(--error)]\" />\n              </Button>\n            </div>\n            {image.category && (\n              <div className=\"absolute bottom-2 left-2\">\n                <span className=\"px-2 py-1 bg-black/50 text-white text-xs rounded-full\">\n                  {image.category}\n                </span>\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n\n      {filteredImages.length === 0 && (\n        <div className=\"surface text-center py-12\">\n          <Image className=\"size-12 text-[var(--text-muted)] mx-auto mb-4\" />\n          <p className=\"text-[var(--text-secondary)]\">\n            No images in this category\n          </p>\n        </div>\n      )}\n\n      {/* Lightbox */}\n      {selectedImage && (\n        <div\n          className=\"fixed inset-0 bg-black/90 flex items-center justify-center z-50 cursor-pointer modal-scrim\"\n          onClick={() => setSelectedImage(null)}\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"absolute top-4 right-4\"\n          >\n            <X className=\"size-6\" />\n          </Button>\n          <img\n            src={selectedImage.url}\n            alt={selectedImage.alt}\n            className=\"max-w-4xl max-h-[80vh] object-contain cursor-default\"\n            onClick={(e) => e.stopPropagation()}\n          />\n          <div className=\"absolute bottom-4 text-white text-center\">\n            <p className=\"font-medium\">{selectedImage.alt}</p>\n            {selectedImage.category && (\n              <p className=\"text-sm text-[var(--text-muted)]\">\n                {selectedImage.category}\n              </p>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/features/gift-card-artwork.d.ts

@@ -0,0 +1,18 @@
+import type { GiftCardDesignSnapshot } from '@withpotter/lib/api';
+export declare const GIFT_CARD_PRESETS: GiftCardDesignSnapshot[];
+interface GiftCardArtworkProps {
+    design: GiftCardDesignSnapshot;
+    merchantName: string;
+    amount?: string;
+    recipientName?: string;
+    senderName?: string;
+    code?: string;
+    className?: string;
+}
+export interface GiftCardArtworkData extends Omit<GiftCardArtworkProps, 'className'> {
+}
+export declare function createGiftCardSvg({ design, merchantName, amount, recipientName, senderName, code, }: GiftCardArtworkData): string;
+export declare function downloadGiftCardArtwork(data: GiftCardArtworkData): Promise<void>;
+export declare function createGiftCardEmailHtml(data: GiftCardArtworkData): string;
+export declare function GiftCardArtwork({ design, merchantName, amount, recipientName, senderName, code, className, }: GiftCardArtworkProps): import("react").JSX.Element;
+export {};

package/dist/features/gift-card-artwork.js

@@ -0,0 +1,216 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Gift } from "lucide-react";
+const GIFT_CARD_PRESETS = [
+  {
+    designId: "gold",
+    name: "Gold",
+    imageUrl: null,
+    palette: {
+      background: "#a16207",
+      foreground: "#fffbeb",
+      accent: "#fbbf24"
+    },
+    occasion: "general"
+  },
+  {
+    designId: "platinum",
+    name: "Platinum",
+    imageUrl: null,
+    palette: {
+      background: "#334155",
+      foreground: "#f8fafc",
+      accent: "#cbd5e1"
+    },
+    occasion: "general"
+  },
+  {
+    designId: "bronze",
+    name: "Bronze",
+    imageUrl: null,
+    palette: {
+      background: "#7c2d12",
+      foreground: "#fff7ed",
+      accent: "#fb923c"
+    },
+    occasion: "general"
+  },
+  {
+    designId: "silver",
+    name: "Silver",
+    imageUrl: null,
+    palette: {
+      background: "#475569",
+      foreground: "#f8fafc",
+      accent: "#e2e8f0"
+    },
+    occasion: "general"
+  }
+];
+function escapeXml(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&apos;");
+}
+function createGiftCardSvg({
+  design,
+  merchantName,
+  amount,
+  recipientName,
+  senderName,
+  code
+}) {
+  const foreground = design.palette.foreground;
+  const background = design.palette.background;
+  const accent = design.palette.accent;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="756" viewBox="0 0 1200 756">
+  <defs><pattern id="lines" width="72" height="72" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><line x1="0" y1="0" x2="0" y2="72" stroke="${accent}" stroke-opacity="0.14" stroke-width="3"/></pattern></defs>
+  <rect width="1200" height="756" rx="32" fill="${background}"/>
+  <rect width="1200" height="756" rx="32" fill="url(#lines)"/>
+  <rect width="1200" height="12" rx="6" fill="${accent}"/>
+  <circle cx="78" cy="82" r="28" fill="${accent}"/>
+  <text x="126" y="72" fill="${foreground}" font-family="Arial, sans-serif" font-size="30" font-weight="700">${escapeXml(merchantName)}</text>
+  <text x="126" y="104" fill="${foreground}" fill-opacity="0.7" font-family="Arial, sans-serif" font-size="20">GIFT CARD</text>
+  ${amount ? `<text x="1120" y="82" text-anchor="end" fill="${foreground}" fill-opacity="0.82" font-family="Arial, sans-serif" font-size="26" font-weight="600">${escapeXml(amount)}</text>` : ""}
+  <text x="72" y="330" fill="${foreground}" font-family="Arial, sans-serif" font-size="58" font-weight="700">${escapeXml(design.name)}</text>
+  <text x="72" y="470" fill="${foreground}" fill-opacity="0.58" font-family="Arial, sans-serif" font-size="18" font-weight="700">TO</text>
+  <text x="72" y="515" fill="${foreground}" font-family="Arial, sans-serif" font-size="34" font-weight="600">${escapeXml(recipientName || "Someone special")}</text>
+  <text x="600" y="470" fill="${foreground}" fill-opacity="0.58" font-family="Arial, sans-serif" font-size="18" font-weight="700">FROM</text>
+  <text x="600" y="515" fill="${foreground}" font-family="Arial, sans-serif" font-size="34" font-weight="600">${escapeXml(senderName || merchantName)}</text>
+  ${code ? `<text x="72" y="664" fill="${foreground}" fill-opacity="0.58" font-family="Arial, sans-serif" font-size="18" font-weight="700">REDEEM WITH</text><text x="72" y="704" fill="${foreground}" font-family="monospace" font-size="30" font-weight="700">${escapeXml(code)}</text>` : ""}
+</svg>`;
+}
+async function downloadGiftCardArtwork(data) {
+  const svgBlob = new Blob([createGiftCardSvg(data)], {
+    type: "image/svg+xml;charset=utf-8"
+  });
+  const svgUrl = URL.createObjectURL(svgBlob);
+  const image = new Image();
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error("Unable to render gift card image"));
+    image.src = svgUrl;
+  });
+  const canvas = document.createElement("canvas");
+  canvas.width = 1200;
+  canvas.height = 756;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    URL.revokeObjectURL(svgUrl);
+    throw new Error("Unable to create gift card image");
+  }
+  context.drawImage(image, 0, 0, canvas.width, canvas.height);
+  URL.revokeObjectURL(svgUrl);
+  const pngBlob = await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error("Unable to encode gift card image")),
+      "image/png"
+    );
+  });
+  const url = URL.createObjectURL(pngBlob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `gift-card-${data.code || "preview"}.png`;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+function createGiftCardEmailHtml(data) {
+  const { design, merchantName, amount, recipientName, senderName, code } = data;
+  return `<div style="margin:0;padding:32px 16px;background:#f4f4f5;font-family:Arial,sans-serif;color:#18181b">
+  <div style="max-width:620px;margin:0 auto">
+    <p style="margin:0 0 16px;font-size:16px">${escapeXml(senderName || merchantName)} sent you a gift card.</p>
+    <div style="padding:28px;border-radius:12px;background:${design.palette.background};color:${design.palette.foreground};border-top:6px solid ${design.palette.accent}">
+      <div style="font-size:20px;font-weight:700">${escapeXml(merchantName)}</div>
+      <div style="margin-top:4px;font-size:12px;opacity:.7">GIFT CARD</div>
+      <div style="margin-top:56px;font-size:30px;font-weight:700">${escapeXml(design.name)}</div>
+      <table role="presentation" style="width:100%;margin-top:40px;color:inherit"><tr>
+        <td><div style="font-size:11px;opacity:.6">TO</div><div style="margin-top:6px;font-size:18px;font-weight:600">${escapeXml(recipientName || "Someone special")}</div></td>
+        <td><div style="font-size:11px;opacity:.6">FROM</div><div style="margin-top:6px;font-size:18px;font-weight:600">${escapeXml(senderName || merchantName)}</div></td>
+        ${amount ? `<td style="text-align:right;font-size:16px;font-weight:600">${escapeXml(amount)}</td>` : ""}
+      </tr></table>
+      ${code ? `<div style="margin-top:36px;font-size:11px;opacity:.6">REDEEM WITH</div><div style="margin-top:6px;font-family:monospace;font-size:20px;font-weight:700">${escapeXml(code)}</div>` : ""}
+    </div>
+  </div>
+</div>`;
+}
+function GiftCardArtwork({
+  design,
+  merchantName,
+  amount,
+  recipientName,
+  senderName,
+  code,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative aspect-[1.586/1] w-full overflow-hidden rounded-md p-5 ${className}`,
+      style: {
+        color: design.palette.foreground,
+        backgroundColor: design.palette.background,
+        backgroundImage: `repeating-linear-gradient(135deg, transparent 0 18px, ${design.palette.accent}22 18px 19px)`
+      },
+      children: [
+        design.imageUrl && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: design.imageUrl,
+            alt: "",
+            className: "absolute inset-0 h-full w-full object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-x-0 top-0 h-1",
+            style: { backgroundColor: design.palette.accent }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex h-7 w-7 items-center justify-center rounded-full",
+                  style: {
+                    color: design.palette.background,
+                    backgroundColor: design.palette.accent
+                  },
+                  children: /* @__PURE__ */ jsx(Gift, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: merchantName }),
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium uppercase opacity-65", children: "Gift card" })
+              ] })
+            ] }),
+            amount && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm font-medium opacity-80", children: amount })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", children: design.name }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 grid grid-cols-2 gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase opacity-55", children: "To" }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: recipientName || "Someone special" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase opacity-55", children: "From" }),
+                /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: senderName || merchantName })
+              ] })
+            ] }),
+            code && /* @__PURE__ */ jsx("p", { className: "mt-2 truncate font-mono text-xs opacity-70", children: code })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  GIFT_CARD_PRESETS,
+  GiftCardArtwork,
+  createGiftCardEmailHtml,
+  createGiftCardSvg,
+  downloadGiftCardArtwork
+};
+//# sourceMappingURL=gift-card-artwork.js.map

package/dist/features/gift-card-artwork.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/features/gift-card-artwork.tsx"],"sourcesContent":["import { Gift } from 'lucide-react';\nimport type { GiftCardDesignSnapshot } from '@withpotter/lib/api';\n\nexport const GIFT_CARD_PRESETS: GiftCardDesignSnapshot[] = [\n  {\n    designId: 'gold',\n    name: 'Gold',\n    imageUrl: null,\n    palette: {\n      background: '#a16207',\n      foreground: '#fffbeb',\n      accent: '#fbbf24',\n    },\n    occasion: 'general',\n  },\n  {\n    designId: 'platinum',\n    name: 'Platinum',\n    imageUrl: null,\n    palette: {\n      background: '#334155',\n      foreground: '#f8fafc',\n      accent: '#cbd5e1',\n    },\n    occasion: 'general',\n  },\n  {\n    designId: 'bronze',\n    name: 'Bronze',\n    imageUrl: null,\n    palette: {\n      background: '#7c2d12',\n      foreground: '#fff7ed',\n      accent: '#fb923c',\n    },\n    occasion: 'general',\n  },\n  {\n    designId: 'silver',\n    name: 'Silver',\n    imageUrl: null,\n    palette: {\n      background: '#475569',\n      foreground: '#f8fafc',\n      accent: '#e2e8f0',\n    },\n    occasion: 'general',\n  },\n];\n\ninterface GiftCardArtworkProps {\n  design: GiftCardDesignSnapshot;\n  merchantName: string;\n  amount?: string;\n  recipientName?: string;\n  senderName?: string;\n  code?: string;\n  className?: string;\n}\n\nexport interface GiftCardArtworkData\n  extends Omit<GiftCardArtworkProps, 'className'> {}\n\nfunction escapeXml(value: string): string {\n  return value\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&apos;');\n}\n\nexport function createGiftCardSvg({\n  design,\n  merchantName,\n  amount,\n  recipientName,\n  senderName,\n  code,\n}: GiftCardArtworkData): string {\n  const foreground = design.palette.foreground;\n  const background = design.palette.background;\n  const accent = design.palette.accent;\n\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1200\" height=\"756\" viewBox=\"0 0 1200 756\">\n  <defs><pattern id=\"lines\" width=\"72\" height=\"72\" patternUnits=\"userSpaceOnUse\" patternTransform=\"rotate(45)\"><line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"72\" stroke=\"${accent}\" stroke-opacity=\"0.14\" stroke-width=\"3\"/></pattern></defs>\n  <rect width=\"1200\" height=\"756\" rx=\"32\" fill=\"${background}\"/>\n  <rect width=\"1200\" height=\"756\" rx=\"32\" fill=\"url(#lines)\"/>\n  <rect width=\"1200\" height=\"12\" rx=\"6\" fill=\"${accent}\"/>\n  <circle cx=\"78\" cy=\"82\" r=\"28\" fill=\"${accent}\"/>\n  <text x=\"126\" y=\"72\" fill=\"${foreground}\" font-family=\"Arial, sans-serif\" font-size=\"30\" font-weight=\"700\">${escapeXml(merchantName)}</text>\n  <text x=\"126\" y=\"104\" fill=\"${foreground}\" fill-opacity=\"0.7\" font-family=\"Arial, sans-serif\" font-size=\"20\">GIFT CARD</text>\n  ${amount ? `<text x=\"1120\" y=\"82\" text-anchor=\"end\" fill=\"${foreground}\" fill-opacity=\"0.82\" font-family=\"Arial, sans-serif\" font-size=\"26\" font-weight=\"600\">${escapeXml(amount)}</text>` : ''}\n  <text x=\"72\" y=\"330\" fill=\"${foreground}\" font-family=\"Arial, sans-serif\" font-size=\"58\" font-weight=\"700\">${escapeXml(design.name)}</text>\n  <text x=\"72\" y=\"470\" fill=\"${foreground}\" fill-opacity=\"0.58\" font-family=\"Arial, sans-serif\" font-size=\"18\" font-weight=\"700\">TO</text>\n  <text x=\"72\" y=\"515\" fill=\"${foreground}\" font-family=\"Arial, sans-serif\" font-size=\"34\" font-weight=\"600\">${escapeXml(recipientName || 'Someone special')}</text>\n  <text x=\"600\" y=\"470\" fill=\"${foreground}\" fill-opacity=\"0.58\" font-family=\"Arial, sans-serif\" font-size=\"18\" font-weight=\"700\">FROM</text>\n  <text x=\"600\" y=\"515\" fill=\"${foreground}\" font-family=\"Arial, sans-serif\" font-size=\"34\" font-weight=\"600\">${escapeXml(senderName || merchantName)}</text>\n  ${code ? `<text x=\"72\" y=\"664\" fill=\"${foreground}\" fill-opacity=\"0.58\" font-family=\"Arial, sans-serif\" font-size=\"18\" font-weight=\"700\">REDEEM WITH</text><text x=\"72\" y=\"704\" fill=\"${foreground}\" font-family=\"monospace\" font-size=\"30\" font-weight=\"700\">${escapeXml(code)}</text>` : ''}\n</svg>`;\n}\n\nexport async function downloadGiftCardArtwork(\n  data: GiftCardArtworkData,\n): Promise<void> {\n  const svgBlob = new Blob([createGiftCardSvg(data)], {\n    type: 'image/svg+xml;charset=utf-8',\n  });\n  const svgUrl = URL.createObjectURL(svgBlob);\n  const image = new Image();\n  await new Promise<void>((resolve, reject) => {\n    image.onload = () => resolve();\n    image.onerror = () => reject(new Error('Unable to render gift card image'));\n    image.src = svgUrl;\n  });\n\n  const canvas = document.createElement('canvas');\n  canvas.width = 1200;\n  canvas.height = 756;\n  const context = canvas.getContext('2d');\n  if (!context) {\n    URL.revokeObjectURL(svgUrl);\n    throw new Error('Unable to create gift card image');\n  }\n  context.drawImage(image, 0, 0, canvas.width, canvas.height);\n  URL.revokeObjectURL(svgUrl);\n\n  const pngBlob = await new Promise<Blob>((resolve, reject) => {\n    canvas.toBlob(\n      (blob) =>\n        blob\n          ? resolve(blob)\n          : reject(new Error('Unable to encode gift card image')),\n      'image/png',\n    );\n  });\n  const url = URL.createObjectURL(pngBlob);\n  const link = document.createElement('a');\n  link.href = url;\n  link.download = `gift-card-${data.code || 'preview'}.png`;\n  document.body.appendChild(link);\n  link.click();\n  link.remove();\n  setTimeout(() => URL.revokeObjectURL(url), 0);\n}\n\nexport function createGiftCardEmailHtml(data: GiftCardArtworkData): string {\n  const { design, merchantName, amount, recipientName, senderName, code } = data;\n  return `<div style=\"margin:0;padding:32px 16px;background:#f4f4f5;font-family:Arial,sans-serif;color:#18181b\">\n  <div style=\"max-width:620px;margin:0 auto\">\n    <p style=\"margin:0 0 16px;font-size:16px\">${escapeXml(senderName || merchantName)} sent you a gift card.</p>\n    <div style=\"padding:28px;border-radius:12px;background:${design.palette.background};color:${design.palette.foreground};border-top:6px solid ${design.palette.accent}\">\n      <div style=\"font-size:20px;font-weight:700\">${escapeXml(merchantName)}</div>\n      <div style=\"margin-top:4px;font-size:12px;opacity:.7\">GIFT CARD</div>\n      <div style=\"margin-top:56px;font-size:30px;font-weight:700\">${escapeXml(design.name)}</div>\n      <table role=\"presentation\" style=\"width:100%;margin-top:40px;color:inherit\"><tr>\n        <td><div style=\"font-size:11px;opacity:.6\">TO</div><div style=\"margin-top:6px;font-size:18px;font-weight:600\">${escapeXml(recipientName || 'Someone special')}</div></td>\n        <td><div style=\"font-size:11px;opacity:.6\">FROM</div><div style=\"margin-top:6px;font-size:18px;font-weight:600\">${escapeXml(senderName || merchantName)}</div></td>\n        ${amount ? `<td style=\"text-align:right;font-size:16px;font-weight:600\">${escapeXml(amount)}</td>` : ''}\n      </tr></table>\n      ${code ? `<div style=\"margin-top:36px;font-size:11px;opacity:.6\">REDEEM WITH</div><div style=\"margin-top:6px;font-family:monospace;font-size:20px;font-weight:700\">${escapeXml(code)}</div>` : ''}\n    </div>\n  </div>\n</div>`;\n}\n\nexport function GiftCardArtwork({\n  design,\n  merchantName,\n  amount,\n  recipientName,\n  senderName,\n  code,\n  className = '',\n}: GiftCardArtworkProps) {\n  return (\n    <div\n      className={`relative aspect-[1.586/1] w-full overflow-hidden rounded-md p-5 ${className}`}\n      style={{\n        color: design.palette.foreground,\n        backgroundColor: design.palette.background,\n        backgroundImage: `repeating-linear-gradient(135deg, transparent 0 18px, ${design.palette.accent}22 18px 19px)`,\n      }}\n    >\n      {design.imageUrl && (\n        <img\n          src={design.imageUrl}\n          alt=\"\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n        />\n      )}\n      <div\n        className=\"absolute inset-x-0 top-0 h-1\"\n        style={{ backgroundColor: design.palette.accent }}\n      />\n      <div className=\"relative flex h-full flex-col justify-between\">\n        <div className=\"flex items-center justify-between gap-3\">\n          <div className=\"flex min-w-0 items-center gap-2\">\n            <span\n              className=\"flex h-7 w-7 items-center justify-center rounded-full\"\n              style={{\n                color: design.palette.background,\n                backgroundColor: design.palette.accent,\n              }}\n            >\n              <Gift className=\"h-4 w-4\" />\n            </span>\n            <div className=\"min-w-0\">\n              <p className=\"truncate text-sm font-semibold\">{merchantName}</p>\n              <p className=\"text-[10px] font-medium uppercase opacity-65\">\n                Gift card\n              </p>\n            </div>\n          </div>\n          {amount && (\n            <span className=\"shrink-0 text-sm font-medium opacity-80\">\n              {amount}\n            </span>\n          )}\n        </div>\n        <div>\n          <p className=\"text-lg font-semibold\">{design.name}</p>\n          <div className=\"mt-3 grid grid-cols-2 gap-3\">\n            <div className=\"min-w-0\">\n              <p className=\"text-[10px] font-semibold uppercase opacity-55\">To</p>\n              <p className=\"truncate text-sm font-medium\">\n                {recipientName || 'Someone special'}\n              </p>\n            </div>\n            <div className=\"min-w-0\">\n              <p className=\"text-[10px] font-semibold uppercase opacity-55\">\n                From\n              </p>\n              <p className=\"truncate text-sm font-medium\">\n                {senderName || merchantName}\n              </p>\n            </div>\n          </div>\n          {code && <p className=\"mt-2 truncate font-mono text-xs opacity-70\">{code}</p>}\n        </div>\n      </div>\n    </div>\n  );\n}"],"mappings":"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","names":[]}