@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/cancel-booking-sheet.js

@@ -0,0 +1,475 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Ban,
+  Bell,
+  Calendar,
+  CheckCircle2,
+  ChevronRight,
+  CircleDollarSign,
+  Filter,
+  Gift,
+  Layers,
+  Mail,
+  RotateCcw,
+  Search,
+  UserMinus,
+  XCircle
+} from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+import { Button } from "@withpotter/ui-kit/button";
+import { StatusBar, TabBar } from "./pill-presets-tailwind-utilit";
+import { DetailOrder } from "./detail-order";
+import {
+  ChipRow,
+  ImpactRow,
+  SheetHeader,
+  SheetOverlay,
+  ToggleRow
+} from "./recover-sheets-shared-chrome";
+function RecoverCancelBooking() {
+  return /* @__PURE__ */ jsxs(SheetOverlay, { background: /* @__PURE__ */ jsx(DetailOrder, {}), children: [
+    /* @__PURE__ */ jsx(
+      SheetHeader,
+      {
+        title: "Cancel booking",
+        subtitle: "Aisha O. \xB7 Friday Apr 28, 7:00 PM \xB7 Table for 4"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        className: "mt-4 space-y-2 rounded-2xl border p-4",
+        style: {
+          borderColor: "rgba(244,183,64,0.32)",
+          background: "rgba(244,183,64,0.06)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(ImpactRow, { icon: Bell, text: "Aisha will be notified by SMS and email" }),
+          /* @__PURE__ */ jsx(
+            ImpactRow,
+            {
+              icon: CircleDollarSign,
+              text: "\u20A68,000 deposit will be refunded to source"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ImpactRow,
+            {
+              icon: Calendar,
+              text: "The 7:00 PM slot becomes available for new bookings"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "px-1 text-3xs font-medium",
+          style: { color: tokens.textTertiary },
+          children: "Reason"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        ChipRow,
+        {
+          options: [
+            "Customer request",
+            "Overbooked",
+            "Closed that day",
+            "Staff unavailable",
+            "Other"
+          ],
+          active: "Customer request"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Refund deposit", hint: "\u20A68,000 to GTBank ending 6789" }),
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Notify customer", hint: "SMS + email" }),
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Block this slot", active: false })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "px-1 text-3xs font-medium",
+          style: { color: tokens.textTertiary },
+          children: "Add a note (optional)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mt-2 rounded-2xl border p-3.5",
+          style: { borderColor: tokens.border, background: tokens.elevated },
+          children: /* @__PURE__ */ jsx("p", { className: "text-xs", style: { color: tokens.textTertiary }, children: "Sorry, restaurant is closed for staff training that evening..." })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "sticky bottom-0 -mx-4 mt-4 grid grid-cols-2 gap-2 px-4 pb-2 pt-3",
+        style: {
+          background: `linear-gradient(to top, ${tokens.card} 70%, transparent)`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center rounded-2xl border text-sm font-medium text-white",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: "Keep booking"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white",
+              style: { background: tokens.bad },
+              children: [
+                /* @__PURE__ */ jsx(XCircle, { className: "size-4" }),
+                "Cancel booking"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function RecoverSuspendCustomer() {
+  return /* @__PURE__ */ jsxs(SheetOverlay, { background: /* @__PURE__ */ jsx(DetailOrder, {}), children: [
+    /* @__PURE__ */ jsx(
+      SheetHeader,
+      {
+        title: "Suspend customer",
+        subtitle: "Tunde Adekunle \xB7 8 orders \xB7 \u20A6212K lifetime"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "ul",
+      {
+        className: "mt-4 space-y-2.5 rounded-2xl border p-4",
+        style: {
+          borderColor: "rgba(248,113,113,0.32)",
+          background: "rgba(248,113,113,0.06)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium", style: { color: tokens.bad }, children: "Impact" }),
+          /* @__PURE__ */ jsx(
+            ImpactRow,
+            {
+              icon: Ban,
+              text: "Cannot place new orders or bookings",
+              tone: "bad"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ImpactRow,
+            {
+              icon: Mail,
+              text: "Removed from marketing segments and broadcasts",
+              tone: "bad"
+            }
+          ),
+          /* @__PURE__ */ jsx(ImpactRow, { icon: Gift, text: "Loyalty balance is frozen but not lost" }),
+          /* @__PURE__ */ jsx(
+            ImpactRow,
+            {
+              icon: CheckCircle2,
+              text: "Existing orders, payouts, and history are preserved"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ImpactRow,
+            {
+              icon: RotateCcw,
+              text: "Reversible at any time from this page"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "px-1 text-3xs font-medium",
+          style: { color: tokens.textTertiary },
+          children: "Reason"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        ChipRow,
+        {
+          options: [
+            "Suspected fraud",
+            "Repeated chargebacks",
+            "Customer request",
+            "Policy violation",
+            "Other"
+          ],
+          active: "Suspected fraud"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Notify customer by email", active: false }),
+      /* @__PURE__ */ jsx(ToggleRow, { label: "Add internal note", hint: "Visible to your team only" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "sticky bottom-0 -mx-4 mt-4 grid grid-cols-2 gap-2 px-4 pb-2 pt-3",
+        style: {
+          background: `linear-gradient(to top, ${tokens.card} 70%, transparent)`
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center rounded-2xl border text-sm font-medium text-white",
+              style: { borderColor: tokens.border, background: tokens.elevated },
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white",
+              style: { background: tokens.bad },
+              children: [
+                /* @__PURE__ */ jsx(UserMinus, { className: "size-4" }),
+                "Suspend customer"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function CustomersList() {
+  const rows = [
+    {
+      initials: "TA",
+      name: "Tunde Adekunle",
+      meta: "8 orders \xB7 \u20A6212K \xB7 3d ago",
+      type: "VIP",
+      tone: "warn"
+    },
+    {
+      initials: "AO",
+      name: "Aisha Olatunji",
+      meta: "4 orders \xB7 \u20A664K \xB7 1w ago",
+      type: "Reg",
+      tone: "good"
+    },
+    {
+      initials: "EN",
+      name: "Emeka Nwosu",
+      meta: "New \xB7 joined today",
+      type: "Lead",
+      tone: "info"
+    },
+    {
+      initials: "CI",
+      name: "Chiamaka I.",
+      meta: "2 orders \xB7 \u20A618K \xB7 3w ago",
+      type: "Reg",
+      tone: "good"
+    },
+    {
+      initials: "IA",
+      name: "Ifeoluwa A.",
+      meta: "Subscriber \xB7 no orders",
+      type: "Sub",
+      tone: "info"
+    },
+    {
+      initials: "BA",
+      name: "Bola Adeleke",
+      meta: "Guest \xB7 1 order \u20A65K",
+      type: "Guest",
+      tone: "muted"
+    }
+  ];
+  const toneFor = (t) => t === "good" ? tokens.good : t === "warn" ? tokens.warn : t === "info" ? tokens.accent : tokens.textTertiary;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx(StatusBar, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-32", children: [
+      /* @__PURE__ */ jsx("h1", { className: "pt-2 text-3xl font-bold leading-[1.1] tracking-tight text-white", children: "Manage" }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "mt-4 flex h-[44px] items-center gap-2 rounded-2xl border px-3.5",
+          style: { borderColor: tokens.border, background: tokens.card },
+          children: [
+            /* @__PURE__ */ jsx(Search, { className: "size-4", style: { color: tokens.textTertiary } }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                placeholder: "Search by name, email, phone",
+                className: "flex-1 bg-transparent text-sm text-[#C9D0DD] outline-none placeholder:text-[#94A0B5]"
+              }
+            ),
+            /* @__PURE__ */ jsx(Filter, { className: "size-4", style: { color: tokens.textTertiary } })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-1", children: ["Orders", "Bookings", "Customers", "Invoices"].map((s, i) => {
+        const isActive = i === 2;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "px-3 py-2 text-sm font-medium",
+            style: {
+              color: isActive ? "#FFF" : tokens.textTertiary,
+              borderBottom: isActive ? "2px solid #FFF" : "2px solid transparent"
+            },
+            children: s
+          },
+          s
+        );
+      }) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-2 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pb-1", children: [
+        { label: "All", active: true, count: 412 },
+        { label: "VIP", count: 18 },
+        { label: "New this week", count: 24 },
+        { label: "Subscribers", count: 86 },
+        { label: "Guests", count: 42 }
+      ].map((c) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "secondary",
+          className: "shrink-0 text-2xs",
+          style: {
+            borderColor: c.active ? tokens.accent : tokens.border,
+            background: c.active ? "rgba(17,109,255,0.14)" : tokens.card,
+            color: c.active ? tokens.accent : tokens.textSecondary
+          },
+          children: [
+            c.label,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "rounded-full px-1.5 text-3xs font-semibold",
+                style: {
+                  background: c.active ? "rgba(17,109,255,0.18)" : tokens.elevated
+                },
+                children: c.count
+              }
+            )
+          ]
+        },
+        c.label
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "text-3xs font-medium",
+            style: { color: tokens.textTertiary },
+            children: "412 customers"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "text-2xs font-medium",
+            style: { color: tokens.accent },
+            children: "Select"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: rows.map((r) => {
+        const c = toneFor(r.tone);
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center gap-3 rounded-2xl border p-3 text-left",
+            style: {
+              borderColor: tokens.border,
+              background: tokens.card,
+              minHeight: 72
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold",
+                  style: {
+                    background: "rgba(17,109,255,0.16)",
+                    color: tokens.accent
+                  },
+                  children: r.initials
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "truncate text-md font-medium text-white", children: r.name }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-0.5 truncate text-2xs",
+                    style: { color: tokens.textTertiary },
+                    children: r.meta
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "rounded-full border px-2 py-0.5 text-3xs font-semibold",
+                  style: {
+                    borderColor: `${c}50`,
+                    background: `${c}1A`,
+                    color: c
+                  },
+                  children: r.type
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ChevronRight,
+                {
+                  className: "size-4",
+                  style: { color: tokens.textMuted }
+                }
+              )
+            ]
+          },
+          r.name
+        );
+      }) }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl border text-sm font-medium text-white",
+          style: { borderColor: tokens.border, background: tokens.elevated },
+          children: [
+            /* @__PURE__ */ jsx(Layers, { className: "size-4" }),
+            "Manage segments"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(TabBar, { active: "manage" })
+  ] });
+}
+export {
+  CustomersList,
+  RecoverCancelBooking,
+  RecoverSuspendCustomer
+};
+//# sourceMappingURL=cancel-booking-sheet.js.map

package/dist/mobile/mobile-redesign-mockups/cancel-booking-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/cancel-booking-sheet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Ban,\n  Bell,\n  Calendar,\n  CheckCircle2,\n  ChevronRight,\n  CircleDollarSign,\n  Filter,\n  Gift,\n  Layers,\n  Mail,\n  RotateCcw,\n  Search,\n  UserMinus,\n  XCircle,\n} from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { StatusBar, TabBar } from './pill-presets-tailwind-utilit';\nimport { DetailOrder } from './detail-order';\nimport {\n  ChipRow,\n  ImpactRow,\n  SheetHeader,\n  SheetOverlay,\n  ToggleRow,\n} from './recover-sheets-shared-chrome';\n\n/**\n * Cancel booking sheet\n *\n * One chapter of the mobile visual contract. ~40 screens cite this file as\n * the spec they implement, so the markup here is the artifact and is never\n * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:\n * every screen is the same markup, in a file named for what it draws.\n */\n\n// ─────────────────────────────────────────────────────────────\n// Cancel booking sheet\n// ─────────────────────────────────────────────────────────────\nexport function RecoverCancelBooking() {\n  return (\n    <SheetOverlay background={<DetailOrder />}>\n      <SheetHeader\n        title=\"Cancel booking\"\n        subtitle=\"Aisha O. · Friday Apr 28, 7:00 PM · Table for 4\"\n      />\n\n      <ul\n        className=\"mt-4 space-y-2 rounded-2xl border p-4\"\n        style={{\n          borderColor: 'rgba(244,183,64,0.32)',\n          background: 'rgba(244,183,64,0.06)',\n        }}\n      >\n        <ImpactRow icon={Bell} text=\"Aisha will be notified by SMS and email\" />\n        <ImpactRow\n          icon={CircleDollarSign}\n          text=\"₦8,000 deposit will be refunded to source\"\n        />\n        <ImpactRow\n          icon={Calendar}\n          text=\"The 7:00 PM slot becomes available for new bookings\"\n        />\n      </ul>\n\n      <div className=\"mt-4\">\n        <p\n          className=\"px-1 text-3xs font-medium\"\n          style={{ color: tokens.textTertiary }}\n        >\n          Reason\n        </p>\n        <div className=\"mt-2\">\n          <ChipRow\n            options={[\n              'Customer request',\n              'Overbooked',\n              'Closed that day',\n              'Staff unavailable',\n              'Other',\n            ]}\n            active=\"Customer request\"\n          />\n        </div>\n      </div>\n\n      <div className=\"mt-4 space-y-2\">\n        <ToggleRow label=\"Refund deposit\" hint=\"₦8,000 to GTBank ending 6789\" />\n        <ToggleRow label=\"Notify customer\" hint=\"SMS + email\" />\n        <ToggleRow label=\"Block this slot\" active={false} />\n      </div>\n\n      <div className=\"mt-4\">\n        <p\n          className=\"px-1 text-3xs font-medium\"\n          style={{ color: tokens.textTertiary }}\n        >\n          Add a note (optional)\n        </p>\n        <div\n          className=\"mt-2 rounded-2xl border p-3.5\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          <p className=\"text-xs\" style={{ color: tokens.textTertiary }}>\n            Sorry, restaurant is closed for staff training that evening...\n          </p>\n        </div>\n      </div>\n\n      <div\n        className=\"sticky bottom-0 -mx-4 mt-4 grid grid-cols-2 gap-2 px-4 pb-2 pt-3\"\n        style={{\n          background: `linear-gradient(to top, ${tokens.card} 70%, transparent)`,\n        }}\n      >\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center rounded-2xl border text-sm font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          Keep booking\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white\"\n          style={{ background: tokens.bad }}\n        >\n          <XCircle className=\"size-4\" />\n          Cancel booking\n        </button>\n      </div>\n    </SheetOverlay>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Suspend customer sheet\n// ─────────────────────────────────────────────────────────────\nexport function RecoverSuspendCustomer() {\n  return (\n    <SheetOverlay background={<DetailOrder />}>\n      <SheetHeader\n        title=\"Suspend customer\"\n        subtitle=\"Tunde Adekunle · 8 orders · ₦212K lifetime\"\n      />\n\n      <ul\n        className=\"mt-4 space-y-2.5 rounded-2xl border p-4\"\n        style={{\n          borderColor: 'rgba(248,113,113,0.32)',\n          background: 'rgba(248,113,113,0.06)',\n        }}\n      >\n        <p className=\"text-2xs font-medium\" style={{ color: tokens.bad }}>\n          Impact\n        </p>\n        <ImpactRow\n          icon={Ban}\n          text=\"Cannot place new orders or bookings\"\n          tone=\"bad\"\n        />\n        <ImpactRow\n          icon={Mail}\n          text=\"Removed from marketing segments and broadcasts\"\n          tone=\"bad\"\n        />\n        <ImpactRow icon={Gift} text=\"Loyalty balance is frozen but not lost\" />\n        <ImpactRow\n          icon={CheckCircle2}\n          text=\"Existing orders, payouts, and history are preserved\"\n        />\n        <ImpactRow\n          icon={RotateCcw}\n          text=\"Reversible at any time from this page\"\n        />\n      </ul>\n\n      <div className=\"mt-4\">\n        <p\n          className=\"px-1 text-3xs font-medium\"\n          style={{ color: tokens.textTertiary }}\n        >\n          Reason\n        </p>\n        <div className=\"mt-2\">\n          <ChipRow\n            options={[\n              'Suspected fraud',\n              'Repeated chargebacks',\n              'Customer request',\n              'Policy violation',\n              'Other',\n            ]}\n            active=\"Suspected fraud\"\n          />\n        </div>\n      </div>\n\n      <div className=\"mt-4 space-y-2\">\n        <ToggleRow label=\"Notify customer by email\" active={false} />\n        <ToggleRow label=\"Add internal note\" hint=\"Visible to your team only\" />\n      </div>\n\n      <div\n        className=\"sticky bottom-0 -mx-4 mt-4 grid grid-cols-2 gap-2 px-4 pb-2 pt-3\"\n        style={{\n          background: `linear-gradient(to top, ${tokens.card} 70%, transparent)`,\n        }}\n      >\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center rounded-2xl border text-sm font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          className=\"flex h-12 items-center justify-center gap-2 rounded-2xl text-sm font-semibold text-white\"\n          style={{ background: tokens.bad }}\n        >\n          <UserMinus className=\"size-4\" />\n          Suspend customer\n        </button>\n      </div>\n    </SheetOverlay>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// CRM — Customers list (Manage segment)\n// ─────────────────────────────────────────────────────────────\nexport function CustomersList() {\n  const rows = [\n    {\n      initials: 'TA',\n      name: 'Tunde Adekunle',\n      meta: '8 orders · ₦212K · 3d ago',\n      type: 'VIP',\n      tone: 'warn' as const,\n    },\n    {\n      initials: 'AO',\n      name: 'Aisha Olatunji',\n      meta: '4 orders · ₦64K · 1w ago',\n      type: 'Reg',\n      tone: 'good' as const,\n    },\n    {\n      initials: 'EN',\n      name: 'Emeka Nwosu',\n      meta: 'New · joined today',\n      type: 'Lead',\n      tone: 'info' as const,\n    },\n    {\n      initials: 'CI',\n      name: 'Chiamaka I.',\n      meta: '2 orders · ₦18K · 3w ago',\n      type: 'Reg',\n      tone: 'good' as const,\n    },\n    {\n      initials: 'IA',\n      name: 'Ifeoluwa A.',\n      meta: 'Subscriber · no orders',\n      type: 'Sub',\n      tone: 'info' as const,\n    },\n    {\n      initials: 'BA',\n      name: 'Bola Adeleke',\n      meta: 'Guest · 1 order ₦5K',\n      type: 'Guest',\n      tone: 'muted' as const,\n    },\n  ];\n  const toneFor = (t: 'good' | 'warn' | 'info' | 'muted') =>\n    t === 'good'\n      ? tokens.good\n      : t === 'warn'\n        ? tokens.warn\n        : t === 'info'\n          ? tokens.accent\n          : tokens.textTertiary;\n\n  return (\n    <div className=\"flex h-full flex-col\">\n      <StatusBar />\n      <div className=\"flex-1 overflow-y-auto px-4 pb-32\">\n        <h1 className=\"pt-2 text-3xl font-bold leading-[1.1] tracking-tight text-white\">\n          Manage\n        </h1>\n\n        <div\n          className=\"mt-4 flex h-[44px] items-center gap-2 rounded-2xl border px-3.5\"\n          style={{ borderColor: tokens.border, background: tokens.card }}\n        >\n          <Search className=\"size-4\" style={{ color: tokens.textTertiary }} />\n          <input\n            placeholder=\"Search by name, email, phone\"\n            className=\"flex-1 bg-transparent text-sm text-[#C9D0DD] outline-none placeholder:text-[#94A0B5]\"\n          />\n          <Filter className=\"size-4\" style={{ color: tokens.textTertiary }} />\n        </div>\n\n        <div className=\"mt-3 flex gap-1\">\n          {['Orders', 'Bookings', 'Customers', 'Invoices'].map((s, i) => {\n            const isActive = i === 2;\n            return (\n              <button\n                type=\"button\"\n                key={s}\n                className=\"px-3 py-2 text-sm font-medium\"\n                style={{\n                  color: isActive ? '#FFF' : tokens.textTertiary,\n                  borderBottom: isActive\n                    ? '2px solid #FFF'\n                    : '2px solid transparent',\n                }}\n              >\n                {s}\n              </button>\n            );\n          })}\n        </div>\n\n        <div className=\"mt-3 flex gap-2 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden pb-1\">\n          {[\n            { label: 'All', active: true, count: 412 },\n            { label: 'VIP', count: 18 },\n            { label: 'New this week', count: 24 },\n            { label: 'Subscribers', count: 86 },\n            { label: 'Guests', count: 42 },\n          ].map((c) => (\n            <Button\n              variant=\"secondary\"\n              className=\"shrink-0 text-2xs\"\n              key={c.label}\n              style={{\n                borderColor: c.active ? tokens.accent : tokens.border,\n                background: c.active ? 'rgba(17,109,255,0.14)' : tokens.card,\n                color: c.active ? tokens.accent : tokens.textSecondary,\n              }}\n            >\n              {c.label}\n              <span\n                className=\"rounded-full px-1.5 text-3xs font-semibold\"\n                style={{\n                  background: c.active\n                    ? 'rgba(17,109,255,0.18)'\n                    : tokens.elevated,\n                }}\n              >\n                {c.count}\n              </span>\n            </Button>\n          ))}\n        </div>\n\n        <div className=\"mt-4 flex items-center justify-between\">\n          <p\n            className=\"text-3xs font-medium\"\n            style={{ color: tokens.textTertiary }}\n          >\n            412 customers\n          </p>\n          <button\n            type=\"button\"\n            className=\"text-2xs font-medium\"\n            style={{ color: tokens.accent }}\n          >\n            Select\n          </button>\n        </div>\n\n        <div className=\"mt-2 space-y-2\">\n          {rows.map((r) => {\n            const c = toneFor(r.tone);\n            return (\n              <button\n                type=\"button\"\n                key={r.name}\n                className=\"flex w-full items-center gap-3 rounded-2xl border p-3 text-left\"\n                style={{\n                  borderColor: tokens.border,\n                  background: tokens.card,\n                  minHeight: 72,\n                }}\n              >\n                <div\n                  className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-sm font-semibold\"\n                  style={{\n                    background: 'rgba(17,109,255,0.16)',\n                    color: tokens.accent,\n                  }}\n                >\n                  {r.initials}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <p className=\"truncate text-md font-medium text-white\">\n                    {r.name}\n                  </p>\n                  <p\n                    className=\"mt-0.5 truncate text-2xs\"\n                    style={{ color: tokens.textTertiary }}\n                  >\n                    {r.meta}\n                  </p>\n                </div>\n                <span\n                  className=\"rounded-full border px-2 py-0.5 text-3xs font-semibold\"\n                  style={{\n                    borderColor: `${c}50`,\n                    background: `${c}1A`,\n                    color: c,\n                  }}\n                >\n                  {r.type}\n                </span>\n                <ChevronRight className=\"size-4\"\n                  style={{ color: tokens.textMuted }}\n                />\n              </button>\n            );\n          })}\n        </div>\n\n        <button\n          type=\"button\"\n          className=\"mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl border text-sm font-medium text-white\"\n          style={{ borderColor: tokens.border, background: tokens.elevated }}\n        >\n          <Layers className=\"size-4\" />\n          Manage segments\n        </button>\n      </div>\n      <TabBar active=\"manage\" />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/catalog-browse-and-detail.d.ts

@@ -0,0 +1,2 @@
+/** Catalog browse & detail */
+export declare function ChapterCatalogBrowseAndDetail(): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/catalog-browse-and-detail.js

@@ -0,0 +1,115 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArchetypeGroup,
+  PhoneFrame
+} from "./pill-presets-tailwind-utilit";
+import { ProductsList } from "./products-list-detail";
+import { DiscountsList, ProductDetail } from "./products-list-detail-2";
+import { BookingRequestDetail } from "./discounts-list";
+import { StaffProfile } from "./staff-member-profile";
+import { BlogList, MediaLibrary } from "./blog-list";
+import { Footer } from "./media-library";
+function ChapterCatalogBrowseAndDetail() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "PRODUCTS",
+        title: "Catalog browse & detail",
+        purpose: "Catalog needed real depth: browse with stock and price at a glance, then a detail screen that owns variants, inventory, media, and the lifecycle (active / draft / archived).",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Products \u2014 list",
+              caption: "Search \xB7 filter chips \xB7 variant count \xB7 stock state",
+              children: /* @__PURE__ */ jsx(ProductsList, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Product \u2014 detail",
+              caption: "Hero media, variants & stock, sales tier, action rail",
+              children: /* @__PURE__ */ jsx(ProductDetail, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ArchetypeGroup,
+      {
+        eyebrow: "OFFERS",
+        title: "Discounts & promos",
+        purpose: "The marketing hub had no list. This is the operational view: every discount with status, redemptions, cap, expiry, and the actions to pause, extend, or duplicate.",
+        children: /* @__PURE__ */ jsx(
+          PhoneFrame,
+          {
+            label: "Discounts \u2014 list",
+            caption: "Status chips \xB7 redemption progress \xB7 scheduled / live / expired",
+            children: /* @__PURE__ */ jsx(DiscountsList, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "BOOKINGS",
+        title: "Booking requests & staff",
+        purpose: "Service merchants run on people and time. The booking request screen is the first decision (accept, propose new time, decline). The staff profile is the source of truth for who\u2019s available and how they\u2019re performing.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Booking \u2014 request",
+              caption: "Guest, requested slot, party size, accept / propose / decline",
+              children: /* @__PURE__ */ jsx(BookingRequestDetail, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Staff \u2014 profile",
+              caption: "Availability strip, services, rates, performance, day schedule",
+              children: /* @__PURE__ */ jsx(StaffProfile, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "CONTENT",
+        title: "Blog & media library",
+        purpose: "The editor existed; the surfaces around it didn\u2019t. Blog list is the publishing workbench (drafts \u2192 scheduled \u2192 published). Media library is where every image lives \u2014 searchable, foldered, and bulk-actionable.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Blog \u2014 list",
+              caption: "Drafts, scheduled, published \xB7 view counts \xB7 publish toggle",
+              children: /* @__PURE__ */ jsx(BlogList, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Media library",
+              caption: "Folder picker, recent uploads grid, multi-select & bulk actions",
+              children: /* @__PURE__ */ jsx(MediaLibrary, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Footer, {})
+  ] });
+}
+export {
+  ChapterCatalogBrowseAndDetail
+};
+//# sourceMappingURL=catalog-browse-and-detail.js.map

package/dist/mobile/mobile-redesign-mockups/catalog-browse-and-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/catalog-browse-and-detail.tsx"],"sourcesContent":["'use client';\n\n/**\n * The mobile redesign mockups, routed at `/dashboard/mobile-redesign`.\n *\n * A VISUAL CONTRACT, not an implementation: ~40 screens cite it as the spec\n * they were built from, and CLAUDE.md says its hand-drawn markup IS the\n * artifact and must never be converted onto primitives. That is why it grew to\n * 15,386 lines — nothing was allowed to touch it, including a knife.\n *\n * Splitting is the one change that is safe, because it moves markup rather\n * than rewriting it. Every screen now lives in a file named for what it draws;\n * this shell only assembles them.\n */\n\nimport {\n  tokens,\n  lightTokens,\n  cssVarsFromTheme,\n} from '../mobile-redesign-theme';\nimport {\n  ArchetypeGroup,\n  Hero,\n  PhoneFrame,\n} from './pill-presets-tailwind-utilit';\nimport { TodaySingleIntent } from './today-single-intent';\nimport { ManageOrders, TodayMultiIntent } from './today-multi-intent';\nimport { ManageMultiIntent } from './manage-multi-intent-sell-boo';\nimport {\n  CatalogMultiIntent,\n  CatalogSingleIntent,\n} from './catalog-single-intent';\nimport { DetailOrder, EditorProductStep } from './detail-order';\nimport { EditorBlogLongForm, WizardPayments } from './editor-blog-long-form';\nimport { StoreTab } from './wizard-payments';\nimport { InsightsHub } from './drill-chrome-sub-app-header-';\nimport { InsightsSalesDrill, MoneyHub } from './insights-sales-drill';\nimport { BillingHub, MoneyPayoutDetail } from './money-payout-detail';\nimport {\n  BillingCredits,\n  BillingInvoices,\n  BillingPlanUpgrade,\n  BillingTopUpSheet,\n  BillingUsage,\n} from './billing-hub';\nimport { MarketingHub } from './billing-hub-2';\nimport { CustomerDetail } from './marketing-hub';\nimport { RecoverRefundOrder } from './recover-sheets-shared-chrome';\nimport {\n  CustomersList,\n  RecoverCancelBooking,\n  RecoverSuspendCustomer,\n} from './cancel-booking-sheet';\nimport { CustomerProfileFull } from './crm-customer-profile-full';\nimport { CustomerTimeline, SegmentsHub } from './crm-customer-timeline-tab';\nimport { LoyaltyHub, SendMessageSheet } from './crm-send-message-sheet';\nimport { LoyaltyMemberDetail } from './loyalty-member-detail';\nimport {\n  LoyaltyEarnRuleEditor,\n  LoyaltyRedeemSheet,\n} from './loyalty-earn-rule-editor';\nimport { WizardDomainSearch } from './configure-domain-wizard';\nimport { WizardDomain, WizardShipping } from './configure-domain-wizard-2';\nimport { WizardTax } from './configure-tax-rates';\nimport { CalendarMonth } from './plan-calendar-schedule-resou';\nimport { CalendarDay, ScheduleWeek } from './plan-calendar-schedule-resou-2';\nimport { FloorPlan, ResourcesHub } from './plan-calendar-schedule-resou-3';\nimport { StaffShifts } from './plan-calendar-schedule-resou-4';\nimport {\n  AppearanceHub,\n  ResourceDetail,\n} from './plan-calendar-schedule-resou-5';\nimport {\n  ThemeLibrary,\n  ThemeSwitchPreview,\n} from './appearance-run-the-storefron';\nimport { PageEditor, PagesList } from './appearance-run-the-storefron-2';\nimport {\n  BrandingEditor,\n  NavigationEditor,\n} from './appearance-run-the-storefron-3';\nimport { ComposeSheetOverlay } from './compose-sheet-universal-acti';\nimport {\n  ManageOrdersLight,\n  TodaySingleIntentLight,\n} from './apple-white-theme-preview-sc';\nimport { MeTab, TodayEmpty } from './tranche-1-me-empty-events-pe';\nimport { EventDetail } from './today-first-run-empty-state';\nimport { AttendeesList } from './events-detail-attendees-chec';\nimport {\n  CheckInDashboard,\n  TicketDetail,\n} from './events-detail-attendees-chec-2';\nimport { TodaySubscriptions } from './events-detail-attendees-chec-3';\nimport { TodayDigital, TodayProperty } from './today-per-intent-variants';\nimport { NotificationsInbox } from './tranche-2-inbox-search-produ';\nimport { GlobalSearch } from './global-search';\nimport { ProductsList } from './products-list-detail';\nimport { DiscountsList, ProductDetail } from './products-list-detail-2';\nimport { BookingRequestDetail } from './discounts-list';\nimport { StaffProfile } from './staff-member-profile';\nimport { BlogList, MediaLibrary } from './blog-list';\nimport { Footer } from './media-library';\n\n/** Catalog browse &amp; detail */\nexport function ChapterCatalogBrowseAndDetail() {\n  return (\n    <>\n      <ArchetypeGroup\n        eyebrow=\"PRODUCTS\"\n        title=\"Catalog browse &amp; detail\"\n        purpose=\"Catalog needed real depth: browse with stock and price at a glance, then a detail screen that owns variants, inventory, media, and the lifecycle (active / draft / archived).\"\n      >\n        <PhoneFrame\n          label=\"Products — list\"\n          caption=\"Search · filter chips · variant count · stock state\"\n        >\n          <ProductsList />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Product — detail\"\n          caption=\"Hero media, variants &amp; stock, sales tier, action rail\"\n        >\n          <ProductDetail />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"OFFERS\"\n        title=\"Discounts &amp; promos\"\n        purpose=\"The marketing hub had no list. This is the operational view: every discount with status, redemptions, cap, expiry, and the actions to pause, extend, or duplicate.\"\n      >\n        <PhoneFrame\n          label=\"Discounts — list\"\n          caption=\"Status chips · redemption progress · scheduled / live / expired\"\n        >\n          <DiscountsList />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"BOOKINGS\"\n        title=\"Booking requests &amp; staff\"\n        purpose=\"Service merchants run on people and time. The booking request screen is the first decision (accept, propose new time, decline). The staff profile is the source of truth for who’s available and how they’re performing.\"\n      >\n        <PhoneFrame\n          label=\"Booking — request\"\n          caption=\"Guest, requested slot, party size, accept / propose / decline\"\n        >\n          <BookingRequestDetail />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Staff — profile\"\n          caption=\"Availability strip, services, rates, performance, day schedule\"\n        >\n          <StaffProfile />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"CONTENT\"\n        title=\"Blog &amp; media library\"\n        purpose=\"The editor existed; the surfaces around it didn’t. Blog list is the publishing workbench (drafts → scheduled → published). Media library is where every image lives — searchable, foldered, and bulk-actionable.\"\n      >\n        <PhoneFrame\n          label=\"Blog — list\"\n          caption=\"Drafts, scheduled, published · view counts · publish toggle\"\n        >\n          <BlogList />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Media library\"\n          caption=\"Folder picker, recent uploads grid, multi-select &amp; bulk actions\"\n        >\n          <MediaLibrary />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <Footer />\n    </>\n  );\n}\n"],"mappings":";AA2GI,mBAUM,KATJ,YADF;AAvFJ;AAAA,EACE;AAAA,EAEA;AAAA,OACK;AAyEP,SAAS,oBAAoB;AAC7B,SAAS,eAAe,qBAAqB;AAC7C,SAAS,4BAA4B;AACrC,SAAS,oBAAoB;AAC7B,SAAS,UAAU,oBAAoB;AACvC,SAAS,cAAc;AAGhB,SAAS,gCAAgC;AAC9C,SACE,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAQ;AAAA,QAER;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cAER,8BAAC,gBAAa;AAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cAER,8BAAC,iBAAc;AAAA;AAAA,UACjB;AAAA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,SAAQ;AAAA,YAER,8BAAC,iBAAc;AAAA;AAAA,QACjB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAQ;AAAA,QAER;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cAER,8BAAC,wBAAqB;AAAA;AAAA,UACxB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cAER,8BAAC,gBAAa;AAAA;AAAA,UAChB;AAAA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAM;AAAA,QACN,SAAQ;AAAA,QAER;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cAER,8BAAC,YAAS;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAQ;AAAA,cAER,8BAAC,gBAAa;AAAA;AAAA,UAChB;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,UAAO;AAAA,KACV;AAEJ;","names":[]}