@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-redesign-mockups/matte-charcoal-apple-white.js

@@ -0,0 +1,452 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  lightTokens
+} from "../mobile-redesign-theme";
+import {
+  ArchetypeGroup,
+  Hero,
+  PhoneFrame
+} from "./pill-presets-tailwind-utilit";
+import { TodaySingleIntent } from "./today-single-intent";
+import { ManageOrders, TodayMultiIntent } from "./today-multi-intent";
+import { ManageMultiIntent } from "./manage-multi-intent-sell-boo";
+import {
+  CatalogMultiIntent,
+  CatalogSingleIntent
+} from "./catalog-single-intent";
+import { DetailOrder, EditorProductStep } from "./detail-order";
+import { EditorBlogLongForm } from "./editor-blog-long-form";
+import { StoreTab } from "./wizard-payments";
+import { InsightsHub } from "./drill-chrome-sub-app-header-";
+import { InsightsSalesDrill, MoneyHub } from "./insights-sales-drill";
+import { BillingHub, MoneyPayoutDetail } from "./money-payout-detail";
+import {
+  BillingCredits,
+  BillingInvoices,
+  BillingPlanUpgrade,
+  BillingTopUpSheet,
+  BillingUsage
+} from "./billing-hub";
+import { MarketingHub } from "./billing-hub-2";
+import { CustomerDetail } from "./marketing-hub";
+import { RecoverRefundOrder } from "./recover-sheets-shared-chrome";
+import {
+  CustomersList,
+  RecoverCancelBooking,
+  RecoverSuspendCustomer
+} from "./cancel-booking-sheet";
+import { CustomerProfileFull } from "./crm-customer-profile-full";
+import { CustomerTimeline, SegmentsHub } from "./crm-customer-timeline-tab";
+import { SendMessageSheet } from "./crm-send-message-sheet";
+import {
+  ManageOrdersLight,
+  TodaySingleIntentLight
+} from "./apple-white-theme-preview-sc";
+function ChapterMatteCharcoalAppleWhite() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Hero, {}),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "THEME",
+        title: "Matte charcoal \xB7 Apple white",
+        purpose: "Dark mode is matte charcoal \u2014 softer than OLED black, lets cards lift naturally. Light mode is Apple white \u2014 iOS systemGroupedBackground, hairline cool-grey separators, near-black text. The same screen, two themes.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Today \u2014 matte charcoal",
+              caption: "Default \xB7 soft charcoal canvas, single-shade card lift",
+              children: /* @__PURE__ */ jsx(TodaySingleIntent, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Today \u2014 Apple white",
+              caption: "Light mode \xB7 iOS grouped-table canvas, hairline separators",
+              theme: lightTokens,
+              children: /* @__PURE__ */ jsx(TodaySingleIntentLight, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Manage \u2014 Apple white",
+              caption: "List rendering against iOS grouped-table canvas",
+              theme: lightTokens,
+              children: /* @__PURE__ */ jsx(ManageOrdersLight, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "GLANCE",
+        title: "Today",
+        purpose: "Read state in under 5 seconds. Composed of cards, never a menu.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Today \u2014 single intent",
+              caption: "Greeting \u2192 metrics \u2192 attention \u2192 activity \u2192 setup",
+              children: /* @__PURE__ */ jsx(TodaySingleIntent, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Today \u2014 multi intent",
+              caption: "Horizontal pager, one card per active intent",
+              children: /* @__PURE__ */ jsx(TodayMultiIntent, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "BROWSE",
+        title: "Manage",
+        purpose: "Find a record in 1\u20132 taps. Search-first, intent-aware filters, swipeable rows. Multi-intent merchants see an intent switcher that reskins the entire surface.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Manage \u2014 single intent",
+              caption: "One business mode \u2014 segment switcher, filter chips, record rows",
+              children: /* @__PURE__ */ jsx(ManageOrders, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Manage \u2014 multi intent",
+              caption: "Intent switcher reskins records, segments, and filters",
+              children: /* @__PURE__ */ jsx(ManageMultiIntent, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "ACT",
+        title: "Catalog",
+        purpose: "A working surface for authoring \u2014 never a tile menu of modules.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Catalog \u2014 single intent",
+              caption: "Primary CTA, drafts strip, published list",
+              children: /* @__PURE__ */ jsx(CatalogSingleIntent, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Catalog \u2014 multi intent",
+              caption: "Intent switcher reskins the working surface",
+              children: /* @__PURE__ */ jsx(CatalogMultiIntent, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ArchetypeGroup,
+      {
+        eyebrow: "DETAIL",
+        title: "Record detail",
+        purpose: "Compact sticky header. Hero summary. Fixed bottom action rail. No floating CTAs in the body.",
+        children: /* @__PURE__ */ jsx(
+          PhoneFrame,
+          {
+            label: "Order detail",
+            caption: "Hero summary, sectioned body, action rail",
+            children: /* @__PURE__ */ jsx(DetailOrder, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "EDITOR",
+        title: "Focused-mode authoring",
+        purpose: "Tab bar collapses. Full viewport. Stepwise. Auto-save. Smart input affordances.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Product editor \u2014 step 2 of 4",
+              caption: "Stepwise sections, camera-first media, currency keypad",
+              children: /* @__PURE__ */ jsx(EditorProductStep, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Blog editor \u2014 long-form",
+              caption: "Sticky format bar above the keyboard",
+              children: /* @__PURE__ */ jsx(EditorBlogLongForm, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ArchetypeGroup,
+      {
+        eyebrow: "HUB",
+        title: "Store \u2014 directory of sub-apps",
+        purpose: "Store becomes the launchpad for everything that isn't daily commerce: Insights, Money, Marketing, Configuration, Account. Each row previews state so a tap is informed.",
+        children: /* @__PURE__ */ jsx(
+          PhoneFrame,
+          {
+            label: "Store hub",
+            caption: "Identity card, then grouped hub directory with stateful previews",
+            children: /* @__PURE__ */ jsx(StoreTab, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "INSIGHTS",
+        title: "Analytics as a sub-app",
+        purpose: "Snapshot card answers 'how's the business' in 2 seconds. Reports list drills into focused, full-bleed analytics.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Insights hub",
+              caption: "Snapshot, KPI grid, reports list",
+              children: /* @__PURE__ */ jsx(InsightsHub, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Insights \u2014 Sales report",
+              caption: "Period chips, hero metric, chart, breakdowns",
+              children: /* @__PURE__ */ jsx(InsightsSalesDrill, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "MONEY",
+        title: "Finance hub",
+        purpose: "Lead with next payout \u2014 the question merchants ask most. Then payouts list, then money tools.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Money hub",
+              caption: "Next payout hero, recent payouts, money tools",
+              children: /* @__PURE__ */ jsx(MoneyHub, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Payout detail",
+              caption: "Hero summary, orders included, fees, statement download",
+              children: /* @__PURE__ */ jsx(MoneyPayoutDetail, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "BILLING",
+        title: "Plan, credits & usage",
+        purpose: "Billing is a first-class hub on the phone. Merchants see their plan and credit balance at a glance, top up in three taps, track usage by channel, and pull invoices without opening a desktop.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Billing hub",
+              caption: "Plan card, credits hero, per-channel balance, recent activity",
+              children: /* @__PURE__ */ jsx(BillingHub, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Credits \u2014 balance & top up",
+              caption: "Per-channel balance with usage bars; top up CTA per channel",
+              children: /* @__PURE__ */ jsx(BillingCredits, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Top up \u2014 pack picker",
+              caption: "Choose channel, choose pack, see VAT and total before paying",
+              children: /* @__PURE__ */ jsx(BillingTopUpSheet, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Usage tracker",
+              caption: "Period chips, total spend, per-channel usage, daily breakdown",
+              children: /* @__PURE__ */ jsx(BillingUsage, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Statements",
+              caption: "List of monthly invoices and top-up receipts, downloadable",
+              children: /* @__PURE__ */ jsx(BillingInvoices, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Plan & upgrade",
+              caption: "Free vs Pro comparison, regional price, single upgrade CTA",
+              children: /* @__PURE__ */ jsx(BillingPlanUpgrade, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ArchetypeGroup,
+      {
+        eyebrow: "MARKETING",
+        title: "Discounts, campaigns, audience",
+        purpose: "One hub for outreach. Discounts and campaigns are first-class lists; audience and tools are secondary.",
+        children: /* @__PURE__ */ jsx(
+          PhoneFrame,
+          {
+            label: "Marketing hub",
+            caption: "Snapshot, primary actions, discounts and campaigns",
+            children: /* @__PURE__ */ jsx(MarketingHub, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ArchetypeGroup,
+      {
+        eyebrow: "CUSTOMER",
+        title: "Profile drill from Manage",
+        purpose: "Customer detail follows the same pattern as Order detail: hero, sections, action rail. The Manage segment switcher unifies the model.",
+        children: /* @__PURE__ */ jsx(
+          PhoneFrame,
+          {
+            label: "Customer profile",
+            caption: "Stats strip, recent orders, notes, contact rail",
+            children: /* @__PURE__ */ jsx(CustomerDetail, {})
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "RECOVER",
+        title: "Reversal & recovery sheets",
+        purpose: "Every undo path \u2014 refund, cancel, suspend \u2014 is a bottom sheet with a confirmation summary, an impact list, and a sticky destructive rail. One pattern, dozens of flows.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Refund order",
+              caption: "Full / partial slider, reason chips, refund-to-source, notify customer",
+              children: /* @__PURE__ */ jsx(RecoverRefundOrder, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Cancel booking",
+              caption: "Refund toggle, notify toggle, reason",
+              children: /* @__PURE__ */ jsx(RecoverCancelBooking, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Suspend customer",
+              caption: "Reason, impact list, destructive rail",
+              children: /* @__PURE__ */ jsx(RecoverSuspendCustomer, {})
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ArchetypeGroup,
+      {
+        eyebrow: "CRM",
+        title: "Customers \u2014 desktop parity on a phone",
+        purpose: "Search-first list with type and spend filters, full profile with badges, loyalty card, marketing toggle, tags, notes, and the same five tabs as desktop. Segments are a sibling, not a buried setting.",
+        children: [
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Customers list",
+              caption: "Manage segment switcher, type/spend chips, bulk-select cue",
+              children: /* @__PURE__ */ jsx(CustomersList, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Customer profile",
+              caption: "Identity + badges, loyalty card, marketing toggle, tags, action rail",
+              children: /* @__PURE__ */ jsx(CustomerProfileFull, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Customer \u2014 Timeline",
+              caption: "Mixed events: orders, bookings, loyalty, account",
+              children: /* @__PURE__ */ jsx(CustomerTimeline, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Segments hub",
+              caption: "Reusable segments, member counts, send-to-segment",
+              children: /* @__PURE__ */ jsx(SegmentsHub, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PhoneFrame,
+            {
+              label: "Send message sheet",
+              caption: "Channel toggle, template picker, preview, schedule",
+              children: /* @__PURE__ */ jsx(SendMessageSheet, {})
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  ChapterMatteCharcoalAppleWhite
+};
+//# sourceMappingURL=matte-charcoal-apple-white.js.map

package/dist/mobile/mobile-redesign-mockups/matte-charcoal-apple-white.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/matte-charcoal-apple-white.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/** Matte charcoal · Apple white */\nexport function ChapterMatteCharcoalAppleWhite() {\n  return (\n    <>\n      <Hero />\n      <ArchetypeGroup\n        eyebrow=\"THEME\"\n        title=\"Matte charcoal · Apple white\"\n        purpose=\"Dark mode is matte charcoal — softer than OLED black, lets cards lift naturally. Light mode is Apple white — iOS systemGroupedBackground, hairline cool-grey separators, near-black text. The same screen, two themes.\"\n      >\n        <PhoneFrame\n          label=\"Today — matte charcoal\"\n          caption=\"Default · soft charcoal canvas, single-shade card lift\"\n        >\n          <TodaySingleIntent />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Today — Apple white\"\n          caption=\"Light mode · iOS grouped-table canvas, hairline separators\"\n          theme={lightTokens}\n        >\n          <TodaySingleIntentLight />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Manage — Apple white\"\n          caption=\"List rendering against iOS grouped-table canvas\"\n          theme={lightTokens}\n        >\n          <ManageOrdersLight />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"GLANCE\"\n        title=\"Today\"\n        purpose=\"Read state in under 5 seconds. Composed of cards, never a menu.\"\n      >\n        <PhoneFrame\n          label=\"Today — single intent\"\n          caption=\"Greeting → metrics → attention → activity → setup\"\n        >\n          <TodaySingleIntent />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Today — multi intent\"\n          caption=\"Horizontal pager, one card per active intent\"\n        >\n          <TodayMultiIntent />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"BROWSE\"\n        title=\"Manage\"\n        purpose=\"Find a record in 1–2 taps. Search-first, intent-aware filters, swipeable rows. Multi-intent merchants see an intent switcher that reskins the entire surface.\"\n      >\n        <PhoneFrame\n          label=\"Manage — single intent\"\n          caption=\"One business mode — segment switcher, filter chips, record rows\"\n        >\n          <ManageOrders />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Manage — multi intent\"\n          caption=\"Intent switcher reskins records, segments, and filters\"\n        >\n          <ManageMultiIntent />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"ACT\"\n        title=\"Catalog\"\n        purpose=\"A working surface for authoring — never a tile menu of modules.\"\n      >\n        <PhoneFrame\n          label=\"Catalog — single intent\"\n          caption=\"Primary CTA, drafts strip, published list\"\n        >\n          <CatalogSingleIntent />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Catalog — multi intent\"\n          caption=\"Intent switcher reskins the working surface\"\n        >\n          <CatalogMultiIntent />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"DETAIL\"\n        title=\"Record detail\"\n        purpose=\"Compact sticky header. Hero summary. Fixed bottom action rail. No floating CTAs in the body.\"\n      >\n        <PhoneFrame\n          label=\"Order detail\"\n          caption=\"Hero summary, sectioned body, action rail\"\n        >\n          <DetailOrder />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"EDITOR\"\n        title=\"Focused-mode authoring\"\n        purpose=\"Tab bar collapses. Full viewport. Stepwise. Auto-save. Smart input affordances.\"\n      >\n        <PhoneFrame\n          label=\"Product editor — step 2 of 4\"\n          caption=\"Stepwise sections, camera-first media, currency keypad\"\n        >\n          <EditorProductStep />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Blog editor — long-form\"\n          caption=\"Sticky format bar above the keyboard\"\n        >\n          <EditorBlogLongForm />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"HUB\"\n        title=\"Store — directory of sub-apps\"\n        purpose=\"Store becomes the launchpad for everything that isn't daily commerce: Insights, Money, Marketing, Configuration, Account. Each row previews state so a tap is informed.\"\n      >\n        <PhoneFrame\n          label=\"Store hub\"\n          caption=\"Identity card, then grouped hub directory with stateful previews\"\n        >\n          <StoreTab />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"INSIGHTS\"\n        title=\"Analytics as a sub-app\"\n        purpose=\"Snapshot card answers 'how's the business' in 2 seconds. Reports list drills into focused, full-bleed analytics.\"\n      >\n        <PhoneFrame\n          label=\"Insights hub\"\n          caption=\"Snapshot, KPI grid, reports list\"\n        >\n          <InsightsHub />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Insights — Sales report\"\n          caption=\"Period chips, hero metric, chart, breakdowns\"\n        >\n          <InsightsSalesDrill />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"MONEY\"\n        title=\"Finance hub\"\n        purpose=\"Lead with next payout — the question merchants ask most. Then payouts list, then money tools.\"\n      >\n        <PhoneFrame\n          label=\"Money hub\"\n          caption=\"Next payout hero, recent payouts, money tools\"\n        >\n          <MoneyHub />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Payout detail\"\n          caption=\"Hero summary, orders included, fees, statement download\"\n        >\n          <MoneyPayoutDetail />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"BILLING\"\n        title=\"Plan, credits & usage\"\n        purpose=\"Billing is a first-class hub on the phone. Merchants see their plan and credit balance at a glance, top up in three taps, track usage by channel, and pull invoices without opening a desktop.\"\n      >\n        <PhoneFrame\n          label=\"Billing hub\"\n          caption=\"Plan card, credits hero, per-channel balance, recent activity\"\n        >\n          <BillingHub />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Credits — balance & top up\"\n          caption=\"Per-channel balance with usage bars; top up CTA per channel\"\n        >\n          <BillingCredits />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Top up — pack picker\"\n          caption=\"Choose channel, choose pack, see VAT and total before paying\"\n        >\n          <BillingTopUpSheet />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Usage tracker\"\n          caption=\"Period chips, total spend, per-channel usage, daily breakdown\"\n        >\n          <BillingUsage />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Statements\"\n          caption=\"List of monthly invoices and top-up receipts, downloadable\"\n        >\n          <BillingInvoices />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Plan & upgrade\"\n          caption=\"Free vs Pro comparison, regional price, single upgrade CTA\"\n        >\n          <BillingPlanUpgrade />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"MARKETING\"\n        title=\"Discounts, campaigns, audience\"\n        purpose=\"One hub for outreach. Discounts and campaigns are first-class lists; audience and tools are secondary.\"\n      >\n        <PhoneFrame\n          label=\"Marketing hub\"\n          caption=\"Snapshot, primary actions, discounts and campaigns\"\n        >\n          <MarketingHub />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"CUSTOMER\"\n        title=\"Profile drill from Manage\"\n        purpose=\"Customer detail follows the same pattern as Order detail: hero, sections, action rail. The Manage segment switcher unifies the model.\"\n      >\n        <PhoneFrame\n          label=\"Customer profile\"\n          caption=\"Stats strip, recent orders, notes, contact rail\"\n        >\n          <CustomerDetail />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"RECOVER\"\n        title=\"Reversal &amp; recovery sheets\"\n        purpose=\"Every undo path — refund, cancel, suspend — is a bottom sheet with a confirmation summary, an impact list, and a sticky destructive rail. One pattern, dozens of flows.\"\n      >\n        <PhoneFrame\n          label=\"Refund order\"\n          caption=\"Full / partial slider, reason chips, refund-to-source, notify customer\"\n        >\n          <RecoverRefundOrder />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Cancel booking\"\n          caption=\"Refund toggle, notify toggle, reason\"\n        >\n          <RecoverCancelBooking />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Suspend customer\"\n          caption=\"Reason, impact list, destructive rail\"\n        >\n          <RecoverSuspendCustomer />\n        </PhoneFrame>\n      </ArchetypeGroup>\n      <ArchetypeGroup\n        eyebrow=\"CRM\"\n        title=\"Customers — desktop parity on a phone\"\n        purpose=\"Search-first list with type and spend filters, full profile with badges, loyalty card, marketing toggle, tags, notes, and the same five tabs as desktop. Segments are a sibling, not a buried setting.\"\n      >\n        <PhoneFrame\n          label=\"Customers list\"\n          caption=\"Manage segment switcher, type/spend chips, bulk-select cue\"\n        >\n          <CustomersList />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Customer profile\"\n          caption=\"Identity + badges, loyalty card, marketing toggle, tags, action rail\"\n        >\n          <CustomerProfileFull />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Customer — Timeline\"\n          caption=\"Mixed events: orders, bookings, loyalty, account\"\n        >\n          <CustomerTimeline />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Segments hub\"\n          caption=\"Reusable segments, member counts, send-to-segment\"\n        >\n          <SegmentsHub />\n        </PhoneFrame>\n        <PhoneFrame\n          label=\"Send message sheet\"\n          caption=\"Channel toggle, template picker, preview, schedule\"\n        >\n          <SendMessageSheet />\n        </PhoneFrame>\n      </ArchetypeGroup>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-redesign-mockups/media-library.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Media library
+ *
+ * One chapter of the mobile visual contract. ~40 screens cite this file as
+ * the spec they implement, so the markup here is the artifact and is never
+ * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:
+ * every screen is the same markup, in a file named for what it draws.
+ */
+export declare function FolderChip({ label, count, active, }: {
+    label: string;
+    count: number;
+    active?: boolean;
+}): import("react").JSX.Element;
+export declare function Footer(): import("react").JSX.Element;

package/dist/mobile/mobile-redesign-mockups/media-library.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Folder } from "lucide-react";
+import { tokens } from "../mobile-redesign-theme";
+function FolderChip({
+  label,
+  count,
+  active
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "flex h-9 shrink-0 items-center gap-1.5 rounded-2xl border px-3",
+      style: {
+        borderColor: active ? tokens.accent : tokens.border,
+        background: active ? `${tokens.accent}1A` : tokens.card
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Folder,
+          {
+            className: "size-[13px]",
+            style: { color: active ? tokens.accent : tokens.textSecondary }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-xs font-medium",
+            style: { color: active ? tokens.accent : tokens.textSecondary },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-2xs tabular-nums",
+            style: {
+              color: active ? tokens.accent : tokens.textTertiary,
+              opacity: 0.85
+            },
+            children: count
+          }
+        )
+      ]
+    }
+  );
+}
+function Footer() {
+  return /* @__PURE__ */ jsxs("section", { className: "surface p-5", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-[var(--text-primary)]", children: "Reading these mocks" }),
+    /* @__PURE__ */ jsxs("ul", { className: "mt-3 space-y-2 text-sm leading-relaxed text-[var(--text-tertiary)]", children: [
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { className: "text-[var(--text-primary)]", children: "No tile menus." }),
+        " ",
+        "Every screen has one primary action and a clear hierarchy."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { className: "text-[var(--text-primary)]", children: "One-handed reach." }),
+        " ",
+        "Primary actions live in the lower 60% of the viewport \u2014 action rails on Detail and Editor, tab bar on every other screen."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { className: "text-[var(--text-primary)]", children: "Focused mode." }),
+        " ",
+        "Editors hide the tab bar and take the full screen \u2014 Notion-class authoring on a phone, not a shrunken desktop form."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { className: "text-[var(--text-primary)]", children: "Multi-intent legibility." }),
+        " ",
+        "Active intent lives at the top; switching is one tap, never two."
+      ] }),
+      /* @__PURE__ */ jsxs("li", { children: [
+        /* @__PURE__ */ jsx("strong", { className: "text-[var(--text-primary)]", children: "Standalone product." }),
+        " ",
+        'Every merchant flow \u2014 onboarding, authoring, configuration, payments \u2014 is reachable on a phone. No "open on desktop" hand-offs.'
+      ] })
+    ] })
+  ] });
+}
+export {
+  FolderChip,
+  Footer
+};
+//# sourceMappingURL=media-library.js.map

package/dist/mobile/mobile-redesign-mockups/media-library.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/mobile-redesign-mockups/media-library.tsx"],"sourcesContent":["'use client';\n\nimport { Folder } from 'lucide-react';\nimport { tokens } from '../mobile-redesign-theme';\n\n/**\n * Media library\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\nexport function FolderChip({\n  label,\n  count,\n  active,\n}: {\n  label: string;\n  count: number;\n  active?: boolean;\n}) {\n  return (\n    <button\n      type=\"button\"\n      className=\"flex h-9 shrink-0 items-center gap-1.5 rounded-2xl border px-3\"\n      style={{\n        borderColor: active ? tokens.accent : tokens.border,\n        background: active ? `${tokens.accent}1A` : tokens.card,\n      }}\n    >\n      <Folder className=\"size-[13px]\"\n        style={{ color: active ? tokens.accent : tokens.textSecondary }}\n      />\n      <span\n        className=\"text-xs font-medium\"\n        style={{ color: active ? tokens.accent : tokens.textSecondary }}\n      >\n        {label}\n      </span>\n      <span\n        className=\"text-2xs tabular-nums\"\n        style={{\n          color: active ? tokens.accent : tokens.textTertiary,\n          opacity: 0.85,\n        }}\n      >\n        {count}\n      </span>\n    </button>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Footer\n// ─────────────────────────────────────────────────────────────\nexport function Footer() {\n  return (\n    <section className=\"surface p-5\">\n      <h3 className=\"text-base font-semibold text-[var(--text-primary)]\">\n        Reading these mocks\n      </h3>\n      <ul className=\"mt-3 space-y-2 text-sm leading-relaxed text-[var(--text-tertiary)]\">\n        <li>\n          <strong className=\"text-[var(--text-primary)]\">No tile menus.</strong>{' '}\n          Every screen has one primary action and a clear hierarchy.\n        </li>\n        <li>\n          <strong className=\"text-[var(--text-primary)]\">\n            One-handed reach.\n          </strong>{' '}\n          Primary actions live in the lower 60% of the viewport — action rails\n          on Detail and Editor, tab bar on every other screen.\n        </li>\n        <li>\n          <strong className=\"text-[var(--text-primary)]\">Focused mode.</strong>{' '}\n          Editors hide the tab bar and take the full screen — Notion-class\n          authoring on a phone, not a shrunken desktop form.\n        </li>\n        <li>\n          <strong className=\"text-[var(--text-primary)]\">\n            Multi-intent legibility.\n          </strong>{' '}\n          Active intent lives at the top; switching is one tap, never two.\n        </li>\n        <li>\n          <strong className=\"text-[var(--text-primary)]\">\n            Standalone product.\n          </strong>{' '}\n          Every merchant flow — onboarding, authoring, configuration, payments —\n          is reachable on a phone. No &quot;open on desktop&quot; hand-offs.\n        </li>\n      </ul>\n    </section>\n  );\n}\n"],"mappings":";AAwBI,SAQE,KARF;AAtBJ,SAAS,cAAc;AACvB,SAAS,cAAc;AAWhB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACL,aAAa,SAAS,OAAO,SAAS,OAAO;AAAA,QAC7C,YAAY,SAAS,GAAG,OAAO,MAAM,OAAO,OAAO;AAAA,MACrD;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YAAO,WAAU;AAAA,YAChB,OAAO,EAAE,OAAO,SAAS,OAAO,SAAS,OAAO,cAAc;AAAA;AAAA,QAChE;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,SAAS,OAAO,SAAS,OAAO,cAAc;AAAA,YAE7D;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAO,SAAS,OAAO,SAAS,OAAO;AAAA,cACvC,SAAS;AAAA,YACX;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAKO,SAAS,SAAS;AACvB,SACE,qBAAC,aAAQ,WAAU,eACjB;AAAA,wBAAC,QAAG,WAAU,sDAAqD,iCAEnE;AAAA,IACA,qBAAC,QAAG,WAAU,sEACZ;AAAA,2BAAC,QACC;AAAA,4BAAC,YAAO,WAAU,8BAA6B,4BAAc;AAAA,QAAU;AAAA,QAAI;AAAA,SAE7E;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,WAAU,8BAA6B,+BAE/C;AAAA,QAAU;AAAA,QAAI;AAAA,SAGhB;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,WAAU,8BAA6B,2BAAa;AAAA,QAAU;AAAA,QAAI;AAAA,SAG5E;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,WAAU,8BAA6B,sCAE/C;AAAA,QAAU;AAAA,QAAI;AAAA,SAEhB;AAAA,MACA,qBAAC,QACC;AAAA,4BAAC,YAAO,WAAU,8BAA6B,iCAE/C;AAAA,QAAU;AAAA,QAAI;AAAA,SAGhB;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/mobile/mobile-redesign-mockups/money-payout-detail.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Money — Payout detail
+ *
+ * One chapter of the mobile visual contract. ~40 screens cite this file as
+ * the spec they implement, so the markup here is the artifact and is never
+ * converted onto primitives — see CLAUDE.md. Splitting it moves nothing:
+ * every screen is the same markup, in a file named for what it draws.
+ */
+export declare function MoneyPayoutDetail(): import("react").JSX.Element;
+export declare function SummaryRow({ label, value, tone, emphasis, }: {
+    label: string;
+    value: string;
+    tone?: 'bad';
+    emphasis?: boolean;
+}): import("react").JSX.Element;
+export declare function RowDivider(): import("react").JSX.Element;
+export declare function PayoutOrderRow({ id, customer, amount, }: {
+    id: string;
+    customer: string;
+    amount: string;
+}): import("react").JSX.Element;
+export declare function BillingHub(): import("react").JSX.Element;