@withpotter/components 0.13.0-next.101

package/dist/mobile/screens/today.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/today.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Today tab\n *\n * Visual contract: `TodaySingleIntent` / `TodayMultiIntent` in mobile-redesign-mockups.tsx\n * Route: /dashboard\n * Archetype: GLANCE\n */\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport Link from 'next/link';\nimport { useMoneyVisibility } from '@withpotter/lib/use-money-visibility';\nimport {\n  Bell,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  Receipt,\n  FileText,\n  Globe,\n  Package,\n  Share2,\n  ShoppingBag,\n  UserPlus,\n  Users,\n} from 'lucide-react';\nimport { MobileScreenFrame } from '@withpotter/components/mobile/screen-frame-host';\nimport { resolveIcon } from '@withpotter/lib/intents/icon-map';\nimport { WorkspaceSwitcherSheet } from '@withpotter/components/mobile/workspace-switcher-sheet';\nimport { QuickActionsSheet } from '@withpotter/components/mobile/quick-actions-sheet';\nimport type { ResolvedIntentConfig, IntentConfig } from '@withpotter/lib/intents/types';\nimport type { ActivityItem } from '@withpotter/components/dashboard/activity-feed';\nimport type { InventoryProduct, OnboardingProgress } from '@withpotter/lib/api/types';\nimport type { Workspace } from '@withpotter/lib/auth-context';\nimport { Icon } from '@withpotter/lib/icon-resolver';\n\n// ─────────────────────────────────────────────────────────────\n// Single-intent: metric tile\n// ─────────────────────────────────────────────────────────────\n\nfunction Metric({\n  value,\n  label,\n  trend,\n  tone,\n}: {\n  value: string;\n  label: string;\n  trend?: string;\n  tone?: 'good' | 'warn';\n}) {\n  const trendColor =\n    tone === 'good'\n      ? 'var(--mb-good)'\n      : tone === 'warn'\n        ? 'var(--mb-warn)'\n        : 'var(--mb-text-tertiary)';\n  return (\n    <div\n      className=\"flex w-[170px] shrink-0 flex-col gap-2 rounded-2xl border p-4\"\n      style={{ borderColor: 'var(--mb-border)', background: 'var(--mb-card)' }}\n    >\n      <p className=\"text-xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        {label}\n      </p>\n      <p\n        className=\"text-3xl font-semibold leading-none tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {value}\n      </p>\n      {trend && (\n        <p className=\"text-2xs font-medium\" style={{ color: trendColor }}>\n          {trend}\n        </p>\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Multi-intent: intent card (260px wide, horizontal pager)\n// ─────────────────────────────────────────────────────────────\n\nfunction IntentCard({\n  intent,\n  metric,\n  metricLabel,\n  chips,\n  accent,\n  href,\n}: {\n  intent: IntentConfig;\n  metric: string;\n  metricLabel: string;\n  chips: string[];\n  accent?: boolean;\n  href: string;\n}) {\n  return (\n    <Link\n      href={href}\n      className=\"flex w-[260px] shrink-0 flex-col gap-3 rounded-2xl border p-4 transition-transform active:scale-[0.98]\"\n      style={{\n        borderColor: accent\n          ? 'color-mix(in srgb, var(--mb-accent) 33%, transparent)'\n          : 'var(--mb-border)',\n        background: accent\n          ? 'color-mix(in srgb, var(--mb-accent) 8%, transparent)'\n          : 'var(--mb-card)',\n      }}\n    >\n      <div className=\"flex items-center gap-2\">\n        <div\n          className=\"flex h-8 w-8 items-center justify-center rounded-full\"\n          style={{\n            background: accent\n              ? 'color-mix(in srgb, var(--mb-accent) 13%, transparent)'\n              : 'var(--mb-elevated)',\n          }}\n        >\n          <Icon\n            name={intent.icon}\n            className=\"h-4 w-4\"\n            style={{\n              color: accent ? 'var(--mb-accent)' : 'var(--mb-text-secondary)',\n            }}\n          />\n        </div>\n        <p\n          className=\"text-xs font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {intent.label}\n        </p>\n      </div>\n      <div>\n        <p\n          className=\"text-3xl font-semibold leading-none tabular-nums\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {metric}\n        </p>\n        {metricLabel && (\n          <p\n            className=\"mt-1 text-2xs\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            {metricLabel}\n          </p>\n        )}\n      </div>\n      {chips.length > 0 && (\n        <div className=\"flex flex-wrap gap-1.5\">\n          {chips.map((c) => (\n            <span\n              key={c}\n              className=\"rounded-full border px-2 py-0.5 text-3xs\"\n              style={{\n                borderColor: 'var(--mb-border)',\n                color: 'var(--mb-text-secondary)',\n              }}\n            >\n              {c}\n            </span>\n          ))}\n        </div>\n      )}\n    </Link>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Shared sub-components\n// ─────────────────────────────────────────────────────────────\n\nfunction ActivityRow({\n  icon: Icon,\n  title,\n  meta,\n  href,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  title: string;\n  meta: string;\n  href?: string;\n}) {\n  const inner = (\n    <>\n      {/* Border colour matches mockup's #262D3A icon circle bg */}\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full\"\n        style={{ background: 'var(--mb-border)' }}\n      >\n        <Icon\n          className=\"h-4 w-4\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-sm font-medium\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {title}\n        </p>\n        <p\n          className=\"truncate text-2xs\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          {meta}\n        </p>\n      </div>\n      <ChevronRight\n        className=\"size-4 shrink-0\"\n        style={{ color: 'var(--mb-text-muted)' }}\n      />\n    </>\n  );\n\n  if (href) {\n    return (\n      <Link href={href} className=\"flex w-full items-center gap-3 px-4 py-3.5\">\n        {inner}\n      </Link>\n    );\n  }\n  return (\n    <div className=\"flex w-full items-center gap-3 px-4 py-3.5\">{inner}</div>\n  );\n}\n\nfunction ChecklistRow({ text, done }: { text: string; done?: boolean }) {\n  return (\n    <li className=\"flex items-center gap-3\">\n      <span\n        className=\"flex h-5 w-5 shrink-0 items-center justify-center rounded-full border\"\n        style={{\n          borderColor: done ? 'var(--mb-good)' : 'var(--mb-border-strong)',\n          background: done\n            ? 'color-mix(in srgb, var(--mb-good) 13%, transparent)'\n            : 'transparent',\n        }}\n      >\n        {done && <Check style={{ color: 'var(--mb-good)' }} strokeWidth={3} />}\n      </span>\n      <span\n        className={`text-sm ${done ? 'line-through' : ''}`}\n        style={{\n          color: done ? 'var(--mb-text-tertiary)' : 'var(--mb-text)',\n          textDecorationColor: done ? 'var(--mb-text-muted)' : undefined,\n        }}\n      >\n        {text}\n      </span>\n    </li>\n  );\n}\n\nfunction Divider() {\n  return (\n    <div\n      className=\"ml-[64px] h-px\"\n      style={{ background: 'var(--mb-border)' }}\n    />\n  );\n}\n\nfunction Caption({ children }: { children: React.ReactNode }) {\n  return (\n    <p\n      className=\"text-3xs font-medium\"\n      style={{ color: 'var(--mb-text-tertiary)' }}\n    >\n      {children}\n    </p>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Utilities\n// ─────────────────────────────────────────────────────────────\n\nfunction getGreeting(): string {\n  const h = new Date().getHours();\n  if (h < 12) return 'Good morning';\n  if (h < 17) return 'Good afternoon';\n  return 'Good evening';\n}\n\nfunction formatRelativeTime(dateStr: string): string {\n  const diffMs = Date.now() - new Date(dateStr).getTime();\n  const diffMin = Math.floor(diffMs / 60_000);\n  if (diffMin < 1) return 'Just now';\n  if (diffMin < 60) return `${diffMin}m ago`;\n  const diffHr = Math.floor(diffMin / 60);\n  if (diffHr < 24) return `${diffHr}h ago`;\n  const diffDay = Math.floor(diffHr / 24);\n  if (diffDay < 7) return `${diffDay}d ago`;\n  return new Date(dateStr).toLocaleDateString('en-US', {\n    month: 'short',\n    day: 'numeric',\n  });\n}\n\nfunction iconForActivity(type: ActivityItem['type']) {\n  switch (type) {\n    case 'order_placed':\n    case 'order_completed':\n      return ShoppingBag;\n    case 'invoice_paid':\n    case 'invoice_sent':\n      return Receipt;\n    case 'member_signup':\n    case 'member_converted':\n      return UserPlus;\n    case 'subscription_created':\n      return Users;\n    case 'product_added':\n    case 'product_updated':\n      return Package;\n    default:\n      return FileText;\n  }\n}\n\n// Derive what metric to show on an intent card given available data.\n// Booking-based intents pull from bookingStats; order-based pull from\n// orderStats on the primary only — secondaries show '—' to avoid\n// showing duplicated totals across cards.\nfunction intentCardStats(\n  intent: IntentConfig,\n  isPrimary: boolean,\n  orderStats: MobileTodayScreenProps['orderStats'],\n  bookingStats: MobileTodayScreenProps['bookingStats'],\n  orderStatsByIntent: MobileTodayScreenProps['orderStatsByIntent'],\n  formatCurrency: (n: number) => string,\n  canSeeEarnings: boolean,\n): { metric: string; metricLabel: string; chips: string[] } {\n  const BOOKING_INTENTS = new Set(['take-bookings', 'rent-property']);\n\n  if (BOOKING_INTENTS.has(intent.key)) {\n    const count = bookingStats?.today ?? 0;\n    return {\n      metric: count > 0 ? String(count) : '—',\n      metricLabel: count > 0 ? \"Today's bookings\" : '',\n      chips: [],\n    };\n  }\n\n  // Order-based intents: prefer per-intent stats from the by-intent map.\n  // Fall back to the global orderStats only on the primary card to avoid\n  // showing duplicated totals across cards when per-intent data is missing.\n  const perIntent = orderStatsByIntent?.[intent.key];\n  const stats = perIntent ?? (isPrimary ? orderStats : null);\n  if (stats) {\n    const revenue = stats.revenue ?? 0;\n    const orders = stats.today ?? 0;\n    // Earnings, not amounts: \"Revenue today\" sums the business's day rather than\n    // pricing anything in front of you. Without it the card counts the work\n    // instead of valuing it, and it does not go blank — an order count is the\n    // number the person who cannot see revenue actually came here for.\n    if (!canSeeEarnings) {\n      return {\n        metric: orders > 0 ? String(orders) : '—',\n        metricLabel: orders > 0 ? 'Orders today' : '',\n        chips: [],\n      };\n    }\n    return {\n      metric: formatCurrency(revenue),\n      metricLabel: 'Revenue today',\n      chips:\n        orders > 0 ? [`${orders} ${orders === 1 ? 'order' : 'orders'}`] : [],\n    };\n  }\n\n  return { metric: '—', metricLabel: '', chips: [] };\n}\n\n// ─────────────────────────────────────────────────────────────\n// MobileTodayScreen\n// ─────────────────────────────────────────────────────────────\n\nexport interface MobileTodayScreenProps {\n  userName: string;\n  workspaceName: string;\n  currentTenantId?: string;\n  workspaces: Workspace[];\n  onSwitchWorkspace: (slug: string) => void | Promise<void>;\n  storefrontUrl: string;\n  isPublished: boolean;\n  orderStats: {\n    today?: number;\n    revenue?: number;\n    total?: number;\n  } | null;\n  bookingStats: {\n    today?: number;\n    total?: number;\n    revenue?: number;\n  } | null;\n  orderStatsByIntent?: Record<\n    string,\n    { today?: number; revenue?: number; total?: number } | undefined\n  >;\n  intentConfig: ResolvedIntentConfig;\n  formatCurrency: (amount: number, currencyOverride?: string) => string;\n  activities: ActivityItem[];\n  inventoryProducts: InventoryProduct[];\n  onboardingProgress: OnboardingProgress | null;\n}\n\nexport function MobileTodayScreen({\n  userName,\n  workspaceName,\n  currentTenantId,\n  workspaces,\n  onSwitchWorkspace,\n  storefrontUrl,\n  isPublished,\n  orderStats,\n  bookingStats,\n  orderStatsByIntent,\n  intentConfig,\n  formatCurrency,\n  activities,\n  inventoryProducts,\n  onboardingProgress,\n}: MobileTodayScreenProps) {\n  const { canSeeEarnings } = useMoneyVisibility();\n  const [workspaceSheetOpen, setWorkspaceSheetOpen] = useState(false);\n  const [quickActionsOpen, setQuickActionsOpen] = useState(false);\n  const [activeIntentIdx, setActiveIntentIdx] = useState(0);\n  const pagerRef = useRef<HTMLDivElement | null>(null);\n  const greeting = getGreeting();\n  const firstName = userName.split(' ')[0] || 'there';\n  const isMulti = intentConfig.mode === 'multi';\n\n  // Track which intent card is centered in the pager\n  useEffect(() => {\n    if (!isMulti) return;\n    const el = pagerRef.current;\n    if (!el) return;\n\n    const onScroll = () => {\n      const center = el.scrollLeft + el.clientWidth / 2;\n      const cards = Array.from(\n        el.querySelectorAll<HTMLElement>('[data-intent-card]'),\n      );\n      let closestIdx = 0;\n      let closestDist = Infinity;\n      cards.forEach((card, idx) => {\n        const cardCenter = card.offsetLeft + card.offsetWidth / 2;\n        const d = Math.abs(cardCenter - center);\n        if (d < closestDist) {\n          closestDist = d;\n          closestIdx = idx;\n        }\n      });\n      setActiveIntentIdx(closestIdx);\n      // Persist for sibling pages (Manage/Catalog) that resolve from sessionStorage\n      const targetIntent = intentConfig.all[closestIdx];\n      if (targetIntent) {\n        try {\n          sessionStorage.setItem('potter:activeIntent', targetIntent.key);\n        } catch {\n          // ignore (privacy mode / SSR)\n        }\n      }\n    };\n    onScroll();\n    el.addEventListener('scroll', onScroll, { passive: true });\n    return () => el.removeEventListener('scroll', onScroll);\n  }, [isMulti, intentConfig.all]);\n\n  const revenueToday = orderStats?.revenue ?? 0;\n  const ordersToday = orderStats?.today ?? 0;\n  const totalOrders = orderStats?.total ?? 0;\n\n  const checklistSteps = onboardingProgress?.checklist?.steps ?? [];\n  const totalSteps = checklistSteps.length;\n  const progressPct = onboardingProgress?.progress ?? 0;\n\n  const recentActivities = activities.slice(0, 4);\n\n  // Attention card: in multi-intent mode, bookings needing action\n  // take 'bad' colour (red); pending orders use 'warn' (amber).\n  const hasBookingsAlert = isMulti && (bookingStats?.today ?? 0) > 0;\n  const hasOrdersAlert = ordersToday > 0;\n  const showAttention = hasBookingsAlert || hasOrdersAlert;\n  const attentionIsBad = hasBookingsAlert && !hasOrdersAlert;\n\n  const storefrontHost = (() => {\n    try {\n      const u = new URL(storefrontUrl);\n      return u.host + u.pathname.replace(/\\/$/, '');\n    } catch {\n      return storefrontUrl.replace(/^https?:\\/\\//, '');\n    }\n  })();\n\n  return (\n    /* The frame owns the app row, the sheet, the title and the tab bar.\n\n       The greeting IS the title here. This screen used to draw the workspace\n       name as its heading with a chevron opening a switcher — which is exactly\n       what the app row above now carries, on every screen rather than this\n       one. Two switchers and two copies of the business name on the same\n       screen is what a fork looks like before it is one. */\n    <MobileScreenFrame title={`${greeting}, ${firstName}`}>\n      {/* ── Active intents badge (multi only) ── */}\n      {isMulti && (\n        <div\n          className=\"mt-2 flex items-center gap-1.5 text-2xs\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          <span\n            className=\"h-1.5 w-1.5 rounded-full\"\n            style={{ background: 'var(--mb-good)' }}\n          />\n          {intentConfig.all.length} active intents\n        </div>\n      )}\n\n      {/* ── Intent cards pager (multi) OR metrics strip (single) ── */}\n      {isMulti ? (\n        <>\n          <div\n            ref={pagerRef}\n            className=\"mt-6 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\"\n          >\n            <div className=\"flex gap-3\">\n              {intentConfig.all.map((intent) => {\n                const isPrimary = intent.key === intentConfig.primary.key;\n                const stats = intentCardStats(\n                  intent,\n                  isPrimary,\n                  orderStats,\n                  bookingStats,\n                  orderStatsByIntent,\n                  formatCurrency,\n                  canSeeEarnings,\n                );\n                const baseHref =\n                  intent.pages?.[0]?.route || '/dashboard/orders';\n                // In multi-intent mode, scope the destination by appending ?intent=key\n                // so Manage/Catalog know which intent to filter to.\n                const intentHref = `${baseHref}${baseHref.includes('?') ? '&' : '?'}intent=${encodeURIComponent(intent.key)}`;\n                return (\n                  <div key={intent.key} data-intent-card>\n                    <IntentCard\n                      intent={intent}\n                      metric={stats.metric}\n                      metricLabel={stats.metricLabel}\n                      chips={stats.chips}\n                      accent={isPrimary}\n                      href={intentHref}\n                    />\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n          {/* Pagination dots — track active intent by scroll position */}\n          <div className=\"mt-3 flex items-center justify-center gap-1.5\">\n            {intentConfig.all.map((intent, idx) => {\n              const isActive = idx === activeIntentIdx;\n              return (\n                <span\n                  key={intent.key}\n                  className={`h-1.5 rounded-full transition ${isActive ? 'w-6' : 'w-1.5'}`}\n                  style={{\n                    background: isActive\n                      ? 'var(--mb-accent)'\n                      : 'var(--mb-border)',\n                  }}\n                />\n              );\n            })}\n          </div>\n        </>\n      ) : (\n        <div className=\"mt-6 overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden\">\n          <div className=\"flex gap-3\">\n            <Metric\n              value={formatCurrency(revenueToday)}\n              label=\"Revenue today\"\n            />\n            <Metric value={String(ordersToday)} label=\"Orders today\" />\n            {ordersToday > 0 && (\n              <Metric\n                value={String(ordersToday)}\n                label=\"Pending\"\n                trend=\"needs you\"\n                tone=\"warn\"\n              />\n            )}\n            <Metric value={String(totalOrders)} label=\"Total orders\" />\n          </div>\n        </div>\n      )}\n\n      {/* ── Attention card ── */}\n      {showAttention && (\n        <Link\n          href={attentionIsBad ? '/dashboard/bookings' : '/dashboard/orders'}\n          className=\"mt-5 flex w-full items-start gap-3 rounded-2xl border p-4\"\n          style={\n            attentionIsBad\n              ? {\n                  borderColor:\n                    'color-mix(in srgb, var(--mb-bad) 28%, transparent)',\n                  background:\n                    'color-mix(in srgb, var(--mb-bad) 8%, transparent)',\n                }\n              : {\n                  borderColor:\n                    'color-mix(in srgb, var(--mb-warn) 30%, transparent)',\n                  background:\n                    'color-mix(in srgb, var(--mb-warn) 8%, transparent)',\n                }\n          }\n        >\n          <div\n            className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full\"\n            style={{\n              background: attentionIsBad\n                ? 'color-mix(in srgb, var(--mb-bad) 18%, transparent)'\n                : 'color-mix(in srgb, var(--mb-warn) 18%, transparent)',\n            }}\n          >\n            <Bell\n              className=\"size-5\"\n              style={{\n                color: attentionIsBad ? 'var(--mb-bad)' : 'var(--mb-warn)',\n              }}\n            />\n          </div>\n          <div className=\"flex-1\">\n            <p\n              className=\"text-md font-semibold\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {attentionIsBad\n                ? `${bookingStats?.today} ${bookingStats?.today === 1 ? 'booking needs' : 'bookings need'} confirmation`\n                : `${ordersToday} ${ordersToday === 1 ? 'order' : 'orders'} waiting on fulfillment`}\n            </p>\n            <p\n              className=\"mt-0.5 text-xs\"\n              style={{ color: 'var(--mb-text-secondary)' }}\n            >\n              Tap to review\n            </p>\n          </div>\n          <ChevronRight\n            className=\"mt-1 size-5 shrink-0\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          />\n        </Link>\n      )}\n\n      {/* ── Assigned inventory ── */}\n      {inventoryProducts.length > 0 && (\n        <section className=\"mt-6\">\n          <div className=\"flex items-center justify-between\">\n            <Caption>Assigned inventory</Caption>\n            <Link\n              href=\"/dashboard/catalog\"\n              className=\"text-2xs font-medium\"\n              style={{ color: 'var(--mb-accent)' }}\n            >\n              View all\n            </Link>\n          </div>\n          <div\n            className=\"mt-3 overflow-hidden rounded-2xl border\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            {inventoryProducts.map((product, idx) => {\n              const available =\n                product.available ??\n                Math.max((product.quantity ?? 0) - (product.reserved ?? 0), 0);\n              const meta = product.trackInventory\n                ? `${available} available`\n                : 'Inventory not tracked';\n              return (\n                <React.Fragment key={product.id}>\n                  {idx > 0 && <Divider />}\n                  <ActivityRow\n                    icon={Package}\n                    title={product.title}\n                    meta={meta}\n                    href={`/dashboard/catalog/${product.id}`}\n                  />\n                </React.Fragment>\n              );\n            })}\n          </div>\n        </section>\n      )}\n\n      {/* ── Recent activity ── */}\n      {recentActivities.length > 0 && (\n        <section className=\"mt-6\">\n          <Caption>\n            {isMulti ? 'Across all intents' : 'Recent activity'}\n          </Caption>\n          <div\n            className=\"mt-3 overflow-hidden rounded-2xl border\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            {recentActivities.map((item, idx) => {\n              const Icon = iconForActivity(item.type);\n              const meta = `${item.description} · ${formatRelativeTime(item.timestamp)}`;\n              return (\n                <React.Fragment key={item.id}>\n                  {idx > 0 && <Divider />}\n                  <ActivityRow\n                    icon={Icon}\n                    title={item.title}\n                    meta={meta}\n                    href={item.href}\n                  />\n                </React.Fragment>\n              );\n            })}\n          </div>\n        </section>\n      )}\n\n      {/* ── Setup checklist ── */}\n      {totalSteps > 0 && !onboardingProgress?.allComplete && (\n        <section\n          className=\"mt-6 rounded-2xl border p-4\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n          }}\n        >\n          <div className=\"flex items-center justify-between\">\n            <Caption>Finish setup</Caption>\n          </div>\n          {/* Track uses border colour — matches mockup's bg-[#262D3A] */}\n          <div\n            className=\"mt-3 h-1.5 overflow-hidden rounded-full\"\n            style={{ background: 'var(--mb-border)' }}\n          >\n            <div\n              className=\"h-full rounded-full transition\"\n              style={{\n                background: 'var(--mb-accent)',\n                width: `${Math.min(100, Math.max(0, progressPct))}%`,\n              }}\n            />\n          </div>\n          <ul className=\"mt-3 space-y-2.5\">\n            {checklistSteps.map((step, idx) => (\n              <ChecklistRow\n                key={step.id ?? `step-${idx}`}\n                text={step.label}\n                done={step.status === 'completed' || step.status === 'skipped'}\n              />\n            ))}\n          </ul>\n        </section>\n      )}\n\n      {/* ── Zero state ── */}\n      {recentActivities.length === 0 && totalSteps === 0 && (\n        <div\n          className=\"mt-8 flex flex-col items-center justify-center gap-2 rounded-2xl border px-6 py-10 text-center\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n          }}\n        >\n          <Check\n            className=\"size-6\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          />\n          <p\n            className=\"text-md font-medium\"\n            style={{ color: 'var(--mb-text)' }}\n          >\n            All quiet today\n          </p>\n          <p className=\"text-xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n            New activity will show up here\n          </p>\n        </div>\n      )}\n\n      {/* ── Storefront link ── */}\n      {storefrontUrl && storefrontUrl !== '#' && (\n        <a\n          href={storefrontUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"mt-5 flex w-full items-center justify-between rounded-2xl border p-4\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n          }}\n        >\n          <div className=\"flex items-center gap-3\">\n            <div\n              className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n              style={{ background: 'var(--mb-border)' }}\n            >\n              <Globe\n                className=\"size-4\"\n                style={{ color: 'var(--mb-text-secondary)' }}\n              />\n            </div>\n            <div className=\"min-w-0\">\n              <p\n                className=\"truncate text-md font-medium\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                {storefrontHost}\n              </p>\n              <p\n                className=\"text-2xs\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                {isPublished\n                  ? 'Live · tap to share'\n                  : 'Draft · not yet published'}\n              </p>\n            </div>\n          </div>\n          <Share2\n            className=\"size-4 shrink-0\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          />\n        </a>\n      )}\n\n      <WorkspaceSwitcherSheet\n        open={workspaceSheetOpen}\n        workspaces={workspaces}\n        currentTenantId={currentTenantId}\n        onDismiss={() => setWorkspaceSheetOpen(false)}\n        onSwitch={(slug) => {\n          setWorkspaceSheetOpen(false);\n          void onSwitchWorkspace(slug);\n        }}\n      />\n\n      <QuickActionsSheet\n        open={quickActionsOpen}\n        onDismiss={() => setQuickActionsOpen(false)}\n      />\n    </MobileScreenFrame>\n  );\n}\n"],"mappings":";AA2DI,SAqIA,UAjIE,KAJF;AAjDJ,OAAO,SAAS,WAAW,QAAQ,gBAAgB;AACnD,OAAO,UAAU;AACjB,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAElC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAKlC,SAAS,YAAY;AAMrB,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,aACJ,SAAS,SACL,mBACA,SAAS,SACP,mBACA;AACR,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,aAAa,oBAAoB,YAAY,iBAAiB;AAAA,MAEvE;AAAA,4BAAC,OAAE,WAAU,WAAU,OAAO,EAAE,OAAO,0BAA0B,GAC9D,iBACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,YAEhC;AAAA;AAAA,QACH;AAAA,QACC,SACC,oBAAC,OAAE,WAAU,wBAAuB,OAAO,EAAE,OAAO,WAAW,GAC5D,iBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAMA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,aAAa,SACT,0DACA;AAAA,QACJ,YAAY,SACR,yDACA;AAAA,MACN;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,YAAY,SACR,0DACA;AAAA,cACN;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,OAAO;AAAA,kBACb,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,OAAO,SAAS,qBAAqB;AAAA,kBACvC;AAAA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,cAEhC,iBAAO;AAAA;AAAA,UACV;AAAA,WACF;AAAA,QACA,qBAAC,SACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,cAEhC;AAAA;AAAA,UACH;AAAA,UACC,eACC;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,cAEzC;AAAA;AAAA,UACH;AAAA,WAEJ;AAAA,QACC,MAAM,SAAS,KACd,oBAAC,SAAI,WAAU,0BACZ,gBAAM,IAAI,CAAC,MACV;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,aAAa;AAAA,cACb,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,UAPI;AAAA,QAQP,CACD,GACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAMA,SAAS,YAAY;AAAA,EACnB,MAAMA;AAAA,EACN;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,QACJ,iCAEE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,YAAY,mBAAmB;AAAA,QAExC;AAAA,UAACA;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,2BAA2B;AAAA;AAAA,QAC7C;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,SAAI,WAAU,kBACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,UAEhC;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,UAEzC;AAAA;AAAA,MACH;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,uBAAuB;AAAA;AAAA,IACzC;AAAA,KACF;AAGF,MAAI,MAAM;AACR,WACE,oBAAC,QAAK,MAAY,WAAU,8CACzB,iBACH;AAAA,EAEJ;AACA,SACE,oBAAC,SAAI,WAAU,8CAA8C,iBAAM;AAEvE;AAEA,SAAS,aAAa,EAAE,MAAM,KAAK,GAAqC;AACtE,SACE,qBAAC,QAAG,WAAU,2BACZ;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAO;AAAA,UACL,aAAa,OAAO,mBAAmB;AAAA,UACvC,YAAY,OACR,wDACA;AAAA,QACN;AAAA,QAEC,kBAAQ,oBAAC,SAAM,OAAO,EAAE,OAAO,iBAAiB,GAAG,aAAa,GAAG;AAAA;AAAA,IACtE;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,WAAW,OAAO,iBAAiB,EAAE;AAAA,QAChD,OAAO;AAAA,UACL,OAAO,OAAO,4BAA4B;AAAA,UAC1C,qBAAqB,OAAO,yBAAyB;AAAA,QACvD;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;AAEA,SAAS,UAAU;AACjB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,mBAAmB;AAAA;AAAA,EAC1C;AAEJ;AAEA,SAAS,QAAQ,EAAE,SAAS,GAAkC;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,MAEzC;AAAA;AAAA,EACH;AAEJ;AAMA,SAAS,cAAsB;AAC7B,QAAM,KAAI,oBAAI,KAAK,GAAE,SAAS;AAC9B,MAAI,IAAI,GAAI,QAAO;AACnB,MAAI,IAAI,GAAI,QAAO;AACnB,SAAO;AACT;AAEA,SAAS,mBAAmB,SAAyB;AACnD,QAAM,SAAS,KAAK,IAAI,IAAI,IAAI,KAAK,OAAO,EAAE,QAAQ;AACtD,QAAM,UAAU,KAAK,MAAM,SAAS,GAAM;AAC1C,MAAI,UAAU,EAAG,QAAO;AACxB,MAAI,UAAU,GAAI,QAAO,GAAG,OAAO;AACnC,QAAM,SAAS,KAAK,MAAM,UAAU,EAAE;AACtC,MAAI,SAAS,GAAI,QAAO,GAAG,MAAM;AACjC,QAAM,UAAU,KAAK,MAAM,SAAS,EAAE;AACtC,MAAI,UAAU,EAAG,QAAO,GAAG,OAAO;AAClC,SAAO,IAAI,KAAK,OAAO,EAAE,mBAAmB,SAAS;AAAA,IACnD,OAAO;AAAA,IACP,KAAK;AAAA,EACP,CAAC;AACH;AAEA,SAAS,gBAAgB,MAA4B;AACnD,UAAQ,MAAM;AAAA,IACZ,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAMA,SAAS,gBACP,QACA,WACA,YACA,cACA,oBACA,gBACA,gBAC0D;AAC1D,QAAM,kBAAkB,oBAAI,IAAI,CAAC,iBAAiB,eAAe,CAAC;AAElE,MAAI,gBAAgB,IAAI,OAAO,GAAG,GAAG;AACnC,UAAM,QAAQ,cAAc,SAAS;AACrC,WAAO;AAAA,MACL,QAAQ,QAAQ,IAAI,OAAO,KAAK,IAAI;AAAA,MACpC,aAAa,QAAQ,IAAI,qBAAqB;AAAA,MAC9C,OAAO,CAAC;AAAA,IACV;AAAA,EACF;AAKA,QAAM,YAAY,qBAAqB,OAAO,GAAG;AACjD,QAAM,QAAQ,cAAc,YAAY,aAAa;AACrD,MAAI,OAAO;AACT,UAAM,UAAU,MAAM,WAAW;AACjC,UAAM,SAAS,MAAM,SAAS;AAK9B,QAAI,CAAC,gBAAgB;AACnB,aAAO;AAAA,QACL,QAAQ,SAAS,IAAI,OAAO,MAAM,IAAI;AAAA,QACtC,aAAa,SAAS,IAAI,iBAAiB;AAAA,QAC3C,OAAO,CAAC;AAAA,MACV;AAAA,IACF;AACA,WAAO;AAAA,MACL,QAAQ,eAAe,OAAO;AAAA,MAC9B,aAAa;AAAA,MACb,OACE,SAAS,IAAI,CAAC,GAAG,MAAM,IAAI,WAAW,IAAI,UAAU,QAAQ,EAAE,IAAI,CAAC;AAAA,IACvE;AAAA,EACF;AAEA,SAAO,EAAE,QAAQ,UAAK,aAAa,IAAI,OAAO,CAAC,EAAE;AACnD;AAmCO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,EAAE,eAAe,IAAI,mBAAmB;AAC9C,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,KAAK;AAC9D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,CAAC;AACxD,QAAM,WAAW,OAA8B,IAAI;AACnD,QAAM,WAAW,YAAY;AAC7B,QAAM,YAAY,SAAS,MAAM,GAAG,EAAE,CAAC,KAAK;AAC5C,QAAM,UAAU,aAAa,SAAS;AAGtC,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,MAAM;AACrB,YAAM,SAAS,GAAG,aAAa,GAAG,cAAc;AAChD,YAAM,QAAQ,MAAM;AAAA,QAClB,GAAG,iBAA8B,oBAAoB;AAAA,MACvD;AACA,UAAI,aAAa;AACjB,UAAI,cAAc;AAClB,YAAM,QAAQ,CAAC,MAAM,QAAQ;AAC3B,cAAM,aAAa,KAAK,aAAa,KAAK,cAAc;AACxD,cAAM,IAAI,KAAK,IAAI,aAAa,MAAM;AACtC,YAAI,IAAI,aAAa;AACnB,wBAAc;AACd,uBAAa;AAAA,QACf;AAAA,MACF,CAAC;AACD,yBAAmB,UAAU;AAE7B,YAAM,eAAe,aAAa,IAAI,UAAU;AAChD,UAAI,cAAc;AAChB,YAAI;AACF,yBAAe,QAAQ,uBAAuB,aAAa,GAAG;AAAA,QAChE,QAAQ;AAAA,QAER;AAAA,MACF;AAAA,IACF;AACA,aAAS;AACT,OAAG,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AACzD,WAAO,MAAM,GAAG,oBAAoB,UAAU,QAAQ;AAAA,EACxD,GAAG,CAAC,SAAS,aAAa,GAAG,CAAC;AAE9B,QAAM,eAAe,YAAY,WAAW;AAC5C,QAAM,cAAc,YAAY,SAAS;AACzC,QAAM,cAAc,YAAY,SAAS;AAEzC,QAAM,iBAAiB,oBAAoB,WAAW,SAAS,CAAC;AAChE,QAAM,aAAa,eAAe;AAClC,QAAM,cAAc,oBAAoB,YAAY;AAEpD,QAAM,mBAAmB,WAAW,MAAM,GAAG,CAAC;AAI9C,QAAM,mBAAmB,YAAY,cAAc,SAAS,KAAK;AACjE,QAAM,iBAAiB,cAAc;AACrC,QAAM,gBAAgB,oBAAoB;AAC1C,QAAM,iBAAiB,oBAAoB,CAAC;AAE5C,QAAM,kBAAkB,MAAM;AAC5B,QAAI;AACF,YAAM,IAAI,IAAI,IAAI,aAAa;AAC/B,aAAO,EAAE,OAAO,EAAE,SAAS,QAAQ,OAAO,EAAE;AAAA,IAC9C,QAAQ;AACN,aAAO,cAAc,QAAQ,gBAAgB,EAAE;AAAA,IACjD;AAAA,EACF,GAAG;AAEH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQE,qBAAC,qBAAkB,OAAO,GAAG,QAAQ,KAAK,SAAS,IAEhD;AAAA,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,UAE1C;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,iBAAiB;AAAA;AAAA,YACxC;AAAA,YACC,aAAa,IAAI;AAAA,YAAO;AAAA;AAAA;AAAA,MAC3B;AAAA,MAID,UACC,iCACE;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAU;AAAA,YAEV,8BAAC,SAAI,WAAU,cACZ,uBAAa,IAAI,IAAI,CAAC,WAAW;AAChC,oBAAM,YAAY,OAAO,QAAQ,aAAa,QAAQ;AACtD,oBAAM,QAAQ;AAAA,gBACZ;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AACA,oBAAM,WACJ,OAAO,QAAQ,CAAC,GAAG,SAAS;AAG9B,oBAAM,aAAa,GAAG,QAAQ,GAAG,SAAS,SAAS,GAAG,IAAI,MAAM,GAAG,UAAU,mBAAmB,OAAO,GAAG,CAAC;AAC3G,qBACE,oBAAC,SAAqB,oBAAgB,MACpC;AAAA,gBAAC;AAAA;AAAA,kBACC;AAAA,kBACA,QAAQ,MAAM;AAAA,kBACd,aAAa,MAAM;AAAA,kBACnB,OAAO,MAAM;AAAA,kBACb,QAAQ;AAAA,kBACR,MAAM;AAAA;AAAA,cACR,KARQ,OAAO,GASjB;AAAA,YAEJ,CAAC,GACH;AAAA;AAAA,QACF;AAAA,QAEA,oBAAC,SAAI,WAAU,iDACZ,uBAAa,IAAI,IAAI,CAAC,QAAQ,QAAQ;AACrC,gBAAM,WAAW,QAAQ;AACzB,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,WAAW,iCAAiC,WAAW,QAAQ,OAAO;AAAA,cACtE,OAAO;AAAA,gBACL,YAAY,WACR,qBACA;AAAA,cACN;AAAA;AAAA,YANK,OAAO;AAAA,UAOd;AAAA,QAEJ,CAAC,GACH;AAAA,SACF,IAEA,oBAAC,SAAI,WAAU,uGACb,+BAAC,SAAI,WAAU,cACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,eAAe,YAAY;AAAA,YAClC,OAAM;AAAA;AAAA,QACR;AAAA,QACA,oBAAC,UAAO,OAAO,OAAO,WAAW,GAAG,OAAM,gBAAe;AAAA,QACxD,cAAc,KACb;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO,WAAW;AAAA,YACzB,OAAM;AAAA,YACN,OAAM;AAAA,YACN,MAAK;AAAA;AAAA,QACP;AAAA,QAEF,oBAAC,UAAO,OAAO,OAAO,WAAW,GAAG,OAAM,gBAAe;AAAA,SAC3D,GACF;AAAA,MAID,iBACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,iBAAiB,wBAAwB;AAAA,UAC/C,WAAU;AAAA,UACV,OACE,iBACI;AAAA,YACE,aACE;AAAA,YACF,YACE;AAAA,UACJ,IACA;AAAA,YACE,aACE;AAAA,YACF,YACE;AAAA,UACJ;AAAA,UAGN;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,YAAY,iBACR,uDACA;AAAA,gBACN;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,OAAO,iBAAiB,kBAAkB;AAAA,oBAC5C;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YACA,qBAAC,SAAI,WAAU,UACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,kBAEhC,2BACG,GAAG,cAAc,KAAK,IAAI,cAAc,UAAU,IAAI,kBAAkB,eAAe,kBACvF,GAAG,WAAW,IAAI,gBAAgB,IAAI,UAAU,QAAQ;AAAA;AAAA,cAC9D;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,2BAA2B;AAAA,kBAC5C;AAAA;AAAA,cAED;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA;AAAA,YAC5C;AAAA;AAAA;AAAA,MACF;AAAA,MAID,kBAAkB,SAAS,KAC1B,qBAAC,aAAQ,WAAU,QACjB;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,WAAQ,gCAAkB;AAAA,UAC3B;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,mBAAmB;AAAA,cACpC;AAAA;AAAA,UAED;AAAA,WACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,aAAa;AAAA,cACb,YAAY;AAAA,YACd;AAAA,YAEC,4BAAkB,IAAI,CAAC,SAAS,QAAQ;AACvC,oBAAM,YACJ,QAAQ,aACR,KAAK,KAAK,QAAQ,YAAY,MAAM,QAAQ,YAAY,IAAI,CAAC;AAC/D,oBAAM,OAAO,QAAQ,iBACjB,GAAG,SAAS,eACZ;AACJ,qBACE,qBAAC,MAAM,UAAN,EACE;AAAA,sBAAM,KAAK,oBAAC,WAAQ;AAAA,gBACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM;AAAA,oBACN,OAAO,QAAQ;AAAA,oBACf;AAAA,oBACA,MAAM,sBAAsB,QAAQ,EAAE;AAAA;AAAA,gBACxC;AAAA,mBAPmB,QAAQ,EAQ7B;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MAID,iBAAiB,SAAS,KACzB,qBAAC,aAAQ,WAAU,QACjB;AAAA,4BAAC,WACE,oBAAU,uBAAuB,mBACpC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,aAAa;AAAA,cACb,YAAY;AAAA,YACd;AAAA,YAEC,2BAAiB,IAAI,CAAC,MAAM,QAAQ;AACnC,oBAAMA,QAAO,gBAAgB,KAAK,IAAI;AACtC,oBAAM,OAAO,GAAG,KAAK,WAAW,SAAM,mBAAmB,KAAK,SAAS,CAAC;AACxE,qBACE,qBAAC,MAAM,UAAN,EACE;AAAA,sBAAM,KAAK,oBAAC,WAAQ;AAAA,gBACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAMA;AAAA,oBACN,OAAO,KAAK;AAAA,oBACZ;AAAA,oBACA,MAAM,KAAK;AAAA;AAAA,gBACb;AAAA,mBAPmB,KAAK,EAQ1B;AAAA,YAEJ,CAAC;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MAID,aAAa,KAAK,CAAC,oBAAoB,eACtC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,aAAa;AAAA,YACb,YAAY;AAAA,UACd;AAAA,UAEA;AAAA,gCAAC,SAAI,WAAU,qCACb,8BAAC,WAAQ,0BAAY,GACvB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,YAAY,mBAAmB;AAAA,gBAExC;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO;AAAA,sBACL,YAAY;AAAA,sBACZ,OAAO,GAAG,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,WAAW,CAAC,CAAC;AAAA,oBACnD;AAAA;AAAA,gBACF;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,QAAG,WAAU,oBACX,yBAAe,IAAI,CAAC,MAAM,QACzB;AAAA,cAAC;AAAA;AAAA,gBAEC,MAAM,KAAK;AAAA,gBACX,MAAM,KAAK,WAAW,eAAe,KAAK,WAAW;AAAA;AAAA,cAFhD,KAAK,MAAM,QAAQ,GAAG;AAAA,YAG7B,CACD,GACH;AAAA;AAAA;AAAA,MACF;AAAA,MAID,iBAAiB,WAAW,KAAK,eAAe,KAC/C;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,OAAO;AAAA,YACL,aAAa;AAAA,YACb,YAAY;AAAA,UACd;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA;AAAA,YAC5C;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,gBAClC;AAAA;AAAA,YAED;AAAA,YACA,oBAAC,OAAE,WAAU,WAAU,OAAO,EAAE,OAAO,0BAA0B,GAAG,4CAEpE;AAAA;AAAA;AAAA,MACF;AAAA,MAID,iBAAiB,kBAAkB,OAClC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAU;AAAA,UACV,OAAO;AAAA,YACL,aAAa;AAAA,YACb,YAAY;AAAA,UACd;AAAA,UAEA;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,YAAY,mBAAmB;AAAA,kBAExC;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,OAAO,2BAA2B;AAAA;AAAA,kBAC7C;AAAA;AAAA,cACF;AAAA,cACA,qBAAC,SAAI,WAAU,WACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,oBAEhC;AAAA;AAAA,gBACH;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,oBAEzC,wBACG,2BACA;AAAA;AAAA,gBACN;AAAA,iBACF;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA;AAAA,YAC5C;AAAA;AAAA;AAAA,MACF;AAAA,MAGF;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA,WAAW,MAAM,sBAAsB,KAAK;AAAA,UAC5C,UAAU,CAAC,SAAS;AAClB,kCAAsB,KAAK;AAC3B,iBAAK,kBAAkB,IAAI;AAAA,UAC7B;AAAA;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAW,MAAM,oBAAoB,KAAK;AAAA;AAAA,MAC5C;AAAA,OACF;AAAA;AAEJ;","names":["Icon"]}

package/dist/mobile/setup-progress-card.d.ts

@@ -0,0 +1,7 @@
+import type { OnboardingProgress } from '@withpotter/lib/api/types';
+interface SetupProgressCardProps {
+    onboardingProgress: OnboardingProgress | null;
+    industryKey: string | null;
+}
+export declare function SetupProgressCard({ onboardingProgress, industryKey, }: SetupProgressCardProps): import("react").JSX.Element | null;
+export {};

package/dist/mobile/setup-progress-card.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { getIndustryConfig } from "@withpotter/lib/industry-configs";
+function SetupProgressCard({
+  onboardingProgress,
+  industryKey
+}) {
+  const [open, setOpen] = useState(false);
+  const config = getIndustryConfig(industryKey);
+  const progress = onboardingProgress?.progress ?? 0;
+  const steps = onboardingProgress?.checklist?.steps ?? [];
+  const showChecklist = !onboardingProgress?.allComplete && steps.length > 0;
+  if (!showChecklist) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "flex items-center justify-between w-full px-4 py-3 min-h-[44px]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-[var(--text-primary)]", children: "Setup progress" }) }),
+            /* @__PURE__ */ jsx("div", { className: "w-full h-1.5 bg-[var(--bg-base)] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full w-full origin-left bg-brand-500",
+                style: {
+                  transform: `scaleX(${progress / 100})`,
+                  transition: "transform var(--motion-normal) var(--motion-ease-out)"
+                }
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ml-3 flex-shrink-0 text-[var(--text-muted)]", children: /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `w-4 h-4 transition-transform ${open ? "rotate-180" : ""}`
+            }
+          ) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border-subtle)] px-4 py-2", children: steps.map((step) => {
+      const stepLabel = (() => {
+        if (step.stepKey === "add_product" || step.stepKey.startsWith("content_"))
+          return config.onboardingSteps.addFirstItem;
+        if (step.stepKey === "availability" || step.stepKey === "schedule")
+          return config.onboardingSteps.setAvailability ?? step.label;
+        if (step.stepKey === "shipping")
+          return config.onboardingSteps.addShipping ?? step.label;
+        return step.label;
+      })();
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-2", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${step.status === "completed" ? "bg-brand-500 border-brand-500" : "border-[var(--border-default)]"}`,
+            children: step.status === "completed" && /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "w-3 h-3 text-white",
+                viewBox: "0 0 12 12",
+                fill: "none",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: "M2 6l3 3 5-5",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `text-sm ${step.status === "completed" ? "text-[var(--text-muted)] line-through" : "text-[var(--text-primary)]"}`,
+            children: stepLabel
+          }
+        )
+      ] }, step.stepKey);
+    }) })
+  ] });
+}
+export {
+  SetupProgressCard
+};
+//# sourceMappingURL=setup-progress-card.js.map

package/dist/mobile/setup-progress-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/setup-progress-card.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport type { OnboardingProgress } from '@withpotter/lib/api/types';\nimport { getIndustryConfig } from '@withpotter/lib/industry-configs';\n\ninterface SetupProgressCardProps {\n  onboardingProgress: OnboardingProgress | null;\n  industryKey: string | null;\n}\n\nexport function SetupProgressCard({\n  onboardingProgress,\n  industryKey,\n}: SetupProgressCardProps) {\n  const [open, setOpen] = useState(false);\n  const config = getIndustryConfig(industryKey);\n\n  const progress = onboardingProgress?.progress ?? 0;\n  const steps = onboardingProgress?.checklist?.steps ?? [];\n  const showChecklist = !onboardingProgress?.allComplete && steps.length > 0;\n\n  if (!showChecklist) return null;\n\n  return (\n    <div className=\"bg-[var(--bg-subtle)] rounded-ios-lg overflow-hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen(!open)}\n        className=\"flex items-center justify-between w-full px-4 py-3 min-h-[44px]\"\n      >\n        <div className=\"flex-1 min-w-0\">\n          <div className=\"mb-1.5\">\n            <span className=\"text-sm font-semibold text-[var(--text-primary)]\">\n              Setup progress\n            </span>\n          </div>\n          <div className=\"w-full h-1.5 bg-[var(--bg-base)] rounded-full overflow-hidden\">\n            <div\n              className=\"h-full w-full origin-left bg-brand-500\"\n              style={{\n                transform: `scaleX(${progress / 100})`,\n                transition:\n                  'transform var(--motion-normal) var(--motion-ease-out)',\n              }}\n            />\n          </div>\n        </div>\n        <div className=\"ml-3 flex-shrink-0 text-[var(--text-muted)]\">\n          <ChevronDown\n            className={`w-4 h-4 transition-transform ${open ? 'rotate-180' : ''}`}\n          />\n        </div>\n      </button>\n      {open && (\n        <div className=\"border-t border-[var(--border-subtle)] px-4 py-2\">\n          {steps.map((step) => {\n            const stepLabel = (() => {\n              if (\n                step.stepKey === 'add_product' ||\n                step.stepKey.startsWith('content_')\n              )\n                return config.onboardingSteps.addFirstItem;\n              if (\n                step.stepKey === 'availability' ||\n                step.stepKey === 'schedule'\n              )\n                return config.onboardingSteps.setAvailability ?? step.label;\n              if (step.stepKey === 'shipping')\n                return config.onboardingSteps.addShipping ?? step.label;\n              return step.label;\n            })();\n            return (\n              <div key={step.stepKey} className=\"flex items-center gap-3 py-2\">\n                <div\n                  className={`w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 ${\n                    step.status === 'completed'\n                      ? 'bg-brand-500 border-brand-500'\n                      : 'border-[var(--border-default)]'\n                  }`}\n                >\n                  {step.status === 'completed' && (\n                    <svg\n                      className=\"w-3 h-3 text-white\"\n                      viewBox=\"0 0 12 12\"\n                      fill=\"none\"\n                    >\n                      <path\n                        d=\"M2 6l3 3 5-5\"\n                        stroke=\"currentColor\"\n                        strokeWidth=\"2\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                      />\n                    </svg>\n                  )}\n                </div>\n                <span\n                  className={`text-sm ${\n                    step.status === 'completed'\n                      ? 'text-[var(--text-muted)] line-through'\n                      : 'text-[var(--text-primary)]'\n                  }`}\n                >\n                  {stepLabel}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAgCQ,SAEI,KAFJ;AA9BR,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAO3B,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,SAAS,kBAAkB,WAAW;AAE5C,QAAM,WAAW,oBAAoB,YAAY;AACjD,QAAM,QAAQ,oBAAoB,WAAW,SAAS,CAAC;AACvD,QAAM,gBAAgB,CAAC,oBAAoB,eAAe,MAAM,SAAS;AAEzE,MAAI,CAAC,cAAe,QAAO;AAE3B,SACE,qBAAC,SAAI,WAAU,wDACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,QAAQ,CAAC,IAAI;AAAA,QAC5B,WAAU;AAAA,QAEV;AAAA,+BAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,SAAI,WAAU,UACb,8BAAC,UAAK,WAAU,oDAAmD,4BAEnE,GACF;AAAA,YACA,oBAAC,SAAI,WAAU,iEACb;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,WAAW,UAAU,WAAW,GAAG;AAAA,kBACnC,YACE;AAAA,gBACJ;AAAA;AAAA,YACF,GACF;AAAA,aACF;AAAA,UACA,oBAAC,SAAI,WAAU,+CACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,gCAAgC,OAAO,eAAe,EAAE;AAAA;AAAA,UACrE,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IACC,QACC,oBAAC,SAAI,WAAU,oDACZ,gBAAM,IAAI,CAAC,SAAS;AACnB,YAAM,aAAa,MAAM;AACvB,YACE,KAAK,YAAY,iBACjB,KAAK,QAAQ,WAAW,UAAU;AAElC,iBAAO,OAAO,gBAAgB;AAChC,YACE,KAAK,YAAY,kBACjB,KAAK,YAAY;AAEjB,iBAAO,OAAO,gBAAgB,mBAAmB,KAAK;AACxD,YAAI,KAAK,YAAY;AACnB,iBAAO,OAAO,gBAAgB,eAAe,KAAK;AACpD,eAAO,KAAK;AAAA,MACd,GAAG;AACH,aACE,qBAAC,SAAuB,WAAU,gCAChC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,gFACT,KAAK,WAAW,cACZ,kCACA,gCACN;AAAA,YAEC,eAAK,WAAW,eACf;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAQ;AAAA,gBACR,MAAK;AAAA,gBAEL;AAAA,kBAAC;AAAA;AAAA,oBACC,GAAE;AAAA,oBACF,QAAO;AAAA,oBACP,aAAY;AAAA,oBACZ,eAAc;AAAA,oBACd,gBAAe;AAAA;AAAA,gBACjB;AAAA;AAAA,YACF;AAAA;AAAA,QAEJ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,WACT,KAAK,WAAW,cACZ,0CACA,4BACN;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,WAhCQ,KAAK,OAiCf;AAAA,IAEJ,CAAC,GACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/mobile/shell-chrome.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function MobileShellChrome({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/mobile/shell-chrome.js

@@ -0,0 +1,145 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import { usePathname } from "@withpotter/lib/use-pathname";
+import { Bell } from "lucide-react";
+import {
+  AppBar,
+  BottomTabBar,
+  SheetAction,
+  TAB_ROUTES
+} from "@withpotter/components/mobile/primitives";
+import {
+  AccountAvatar,
+  MobileScreenFrame,
+  StorefrontPreviewButton,
+  WorkspaceTitle
+} from "./screen-frame-host";
+import { Button } from "@withpotter/ui-kit";
+import { useMobileHeaderContext } from "./mobile-header-context";
+import { shouldRenderFallbackChrome } from "@withpotter/lib/mobile-routes";
+import { useResponsiveDesktopPresentation } from "@withpotter/hooks/use-mobile";
+import { useNavScreenName } from "@withpotter/lib/use-nav-groups";
+function PersistentMobileAppBar() {
+  return /* @__PURE__ */ jsx(
+    AppBar,
+    {
+      leading: /* @__PURE__ */ jsx(AccountAvatar, {}),
+      center: /* @__PURE__ */ jsx(WorkspaceTitle, {}),
+      trailing: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: "/dashboard/activity",
+            "aria-label": "Notifications",
+            className: "flex size-10 items-center justify-center rounded-full transition-transform active:scale-95",
+            children: /* @__PURE__ */ jsx(
+              Bell,
+              {
+                className: "size-6",
+                style: {
+                  color: "var(--mb-app-ground-text, var(--mb-text))"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(StorefrontPreviewButton, {})
+      ] })
+    }
+  );
+}
+function MobileShellChrome({ children }) {
+  const pathname = usePathname();
+  const { detailConfig, screenConfig } = useMobileHeaderContext();
+  const responsiveDesktop = useResponsiveDesktopPresentation();
+  const navScreenName = useNavScreenName();
+  const pageTitle = screenConfig?.title ?? navScreenName ?? (pathname === "/dashboard" ? "Home" : void 0);
+  const titleInPageBody = pathname === "/dashboard/settings" || pathname === "/dashboard" || pathname === "/dashboard/settings/integrations";
+  const isAccountSettingsChild = [
+    "/dashboard/settings/devices",
+    "/dashboard/settings/language",
+    "/dashboard/settings/accessibility",
+    "/dashboard/settings/data-privacy",
+    "/dashboard/settings/legal",
+    "/dashboard/workspaces"
+  ].includes(pathname);
+  const isConnectorsPage = pathname === "/dashboard/settings/integrations";
+  if (!responsiveDesktop && !shouldRenderFallbackChrome(pathname)) {
+    if (Object.values(TAB_ROUTES).includes(pathname)) return /* @__PURE__ */ jsx(Fragment, { children });
+    return /* @__PURE__ */ jsxs("div", { className: "contents", "data-mobile-chrome-scope": true, children: [
+      /* @__PURE__ */ jsx(PersistentMobileAppBar, {}),
+      children,
+      /* @__PURE__ */ jsx(BottomTabBar, {})
+    ] });
+  }
+  const isDetail = Boolean(detailConfig);
+  const action = (isDetail ? detailConfig?.action : screenConfig?.action) ?? null;
+  const ActionIcon = action?.icon;
+  const trailing = !action ? void 0 : isDetail ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      onClick: action.onClick,
+      "aria-label": action.label,
+      children: ActionIcon ? /* @__PURE__ */ jsx(ActionIcon, {}) : action.label
+    }
+  ) : /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "secondary",
+      size: action.iconOnly ? "icon" : "md",
+      className: action.compact ? "h-[calc(var(--control-h-lg)-2px)] min-h-0" : void 0,
+      onClick: action.onClick,
+      "aria-label": action.label,
+      children: [
+        ActionIcon && /* @__PURE__ */ jsx(ActionIcon, {}),
+        !action.iconOnly && action.label
+      ]
+    }
+  );
+  if (isDetail) {
+    return /* @__PURE__ */ jsx(
+      MobileScreenFrame,
+      {
+        title: detailConfig?.title ?? pageTitle,
+        actions: detailConfig?.actions ?? trailing,
+        children
+      }
+    );
+  }
+  if (isConnectorsPage) {
+    return /* @__PURE__ */ jsx(MobileScreenFrame, { title: pageTitle ?? "Connectors", actions: trailing, children });
+  }
+  if (isAccountSettingsChild) {
+    return /* @__PURE__ */ jsx(MobileScreenFrame, { title: pageTitle ?? "Settings", actions: trailing, children });
+  }
+  return /* @__PURE__ */ jsx(
+    MobileScreenFrame,
+    {
+      title: titleInPageBody ? void 0 : pageTitle,
+      actions: (
+        // Icon actions win the title row when a screen publishes them; the
+        // labelled `action` is the fallback for screens that have one thing to
+        // offer and a word for it.
+        screenConfig?.actions?.length ? /* @__PURE__ */ jsx(Fragment, { children: screenConfig.actions.slice(0, 2).map(
+          (a) => a.icon ? /* @__PURE__ */ jsx(
+            SheetAction,
+            {
+              icon: a.icon,
+              label: a.label,
+              onClick: a.onClick
+            },
+            a.label
+          ) : null
+        ) }) : trailing
+      ),
+      children
+    }
+  );
+}
+export {
+  MobileShellChrome
+};
+//# sourceMappingURL=shell-chrome.js.map

package/dist/mobile/shell-chrome.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/shell-chrome.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport Link from 'next/link';\nimport { usePathname } from '@withpotter/lib/use-pathname';\nimport { Bell } from 'lucide-react';\nimport {\n  AppBar,\n  BottomTabBar,\n  SheetAction,\n  TAB_ROUTES,\n} from '@withpotter/components/mobile/primitives';\nimport {\n  AccountAvatar,\n  MobileScreenFrame,\n  StorefrontPreviewButton,\n  WorkspaceTitle,\n} from './screen-frame-host';\nimport { Button } from '@withpotter/ui-kit';\nimport { useMobileHeaderContext } from './mobile-header-context';\nimport { shouldRenderFallbackChrome } from '@withpotter/lib/mobile-routes';\nimport { useResponsiveDesktopPresentation } from '@withpotter/hooks/use-mobile';\nimport { useNavScreenName } from '@withpotter/lib/use-nav-groups';\n\n/**\n * Mobile chrome for shell-tier routes — the ones with no hand-built screen.\n *\n * A shell route on a phone used to render its desktop body and nothing else:\n * no title, no back, no tab bar. `/dashboard/reviews` at 390px opened on a\n * filter row and a wall of cards, naming neither the screen you were on nor\n * offering a way off it.\n *\n * ## Why this is mounted in the layout rather than in the page frames\n *\n * This reads `mobile-header-context`. That context already had 33 writers —\n * `useScreenHeader`, `useDetailHeader` and `<MobilePageHeader>` are called all\n * over the app — and no reader, because its only one\n * (`components/mobile/mobile-header.tsx`) has no importers and never mounts.\n * So every one of those calls was inert.\n *\n * Mounting a reader turns all of them on at once. Measured over the 64 shell\n * routes that draw no chrome of their own: 28 reach a page frame, but **26\n * more publish a title and were getting nothing for it**. Putting the chrome\n * in `ListPage`/`DetailPage` would have reached the first group and missed the\n * second, so the renderer belongs here, above every route, and the frames go\n * back to just publishing a title like everyone else.\n *\n * Every mobile route keeps the bottom tab bar. Detail screens use BackBar for\n * their top chrome, while the tab bar remains the persistent way to leave the\n * current section.\n */\nfunction PersistentMobileAppBar() {\n  return (\n    <AppBar\n      leading={<AccountAvatar />}\n      center={<WorkspaceTitle />}\n      trailing={\n        <div className=\"flex items-center gap-1\">\n          <Link\n            href=\"/dashboard/activity\"\n            aria-label=\"Notifications\"\n            className=\"flex size-10 items-center justify-center rounded-full transition-transform active:scale-95\"\n          >\n            <Bell\n              className=\"size-6\"\n              style={{\n                color: 'var(--mb-app-ground-text, var(--mb-text))',\n              }}\n            />\n          </Link>\n          <StorefrontPreviewButton />\n        </div>\n      }\n    />\n  );\n}\n\nexport function MobileShellChrome({ children }: { children: ReactNode }) {\n  const pathname = usePathname();\n  const { detailConfig, screenConfig } = useMobileHeaderContext();\n  const responsiveDesktop = useResponsiveDesktopPresentation();\n  const navScreenName = useNavScreenName();\n  const pageTitle =\n    screenConfig?.title ??\n    navScreenName ??\n    (pathname === '/dashboard' ? 'Home' : undefined);\n  const titleInPageBody =\n    pathname === '/dashboard/settings' ||\n    pathname === '/dashboard' ||\n    pathname === '/dashboard/settings/integrations';\n  const isAccountSettingsChild = [\n    '/dashboard/settings/devices',\n    '/dashboard/settings/language',\n    '/dashboard/settings/accessibility',\n    '/dashboard/settings/data-privacy',\n    '/dashboard/settings/legal',\n    '/dashboard/workspaces',\n  ].includes(pathname);\n  const isConnectorsPage = pathname === '/dashboard/settings/integrations';\n\n  // A native screen brings its own chrome, and so does a shell route whose\n  // legacy mobile screen has not been deleted yet. Only a route that draws\n  // none of its own gets chrome from here — otherwise screens grow two headers.\n  if (!responsiveDesktop && !shouldRenderFallbackChrome(pathname)) {\n    // …but it is still owed a way back if it drew none.\n    //\n    // The tier says a native route brings its own chrome. Trusted, not checked\n    // — and six of them bring none: `/dashboard/customers` draws a title and\n    // nothing else, `/dashboard/payments/payouts` draws neither, and both are\n    // reached by drilling through a hub. Five tabs cannot return you to a hub\n    // that is not one of the five, so those screens were the end of the road.\n    // \"You can't go back\" is the most common thing merchants say about mobile.\n    //\n    // Whether the screen below drew its own back cannot be known while this\n    // renders — the control mounts inside the children, one frame later — so\n    // the row is always drawn and CSS takes it away again when a real one turns\n    // up underneath (globals.css, keyed on `data-mobile-chrome-scope`). Asked\n    // in React instead, the honest answer costs a frame with two arrows in it.\n    if (Object.values(TAB_ROUTES).includes(pathname)) return <>{children}</>;\n    return (\n      <div className=\"contents\" data-mobile-chrome-scope>\n        <PersistentMobileAppBar />\n        {children}\n        <BottomTabBar />\n      </div>\n    );\n  }\n\n  const isDetail = Boolean(detailConfig);\n\n  // Both header configs carry an optional action, and both bars have a trailing\n  // slot, but nothing joined them — so a route could publish \"Add zone\" and it\n  // went nowhere. That matters beyond tidiness: several desktop bodies put\n  // their primary action inside a `hidden lg:flex` header, so the bar is the\n  // only place a phone can offer it at all.\n  const action =\n    (isDetail ? detailConfig?.action : screenConfig?.action) ?? null;\n  //\n  // The two bars take different shapes here. BackBar's trailing slot is a fixed\n  // h-9 w-9 box built for a glyph, so a labelled button wraps inside it (\"Add\n  // zone\" broke over two lines); TopBar's is an unconstrained flex row. Widening\n  // BackBar would touch the 10 hand-built screens that already use it, so the\n  // chrome adapts instead: icon-only on a drill-down, label on a root screen.\n  const ActionIcon = action?.icon;\n  const trailing = !action ? undefined : isDetail ? (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      onClick={action.onClick}\n      aria-label={action.label}\n    >\n      {ActionIcon ? <ActionIcon /> : action.label}\n    </Button>\n  ) : (\n    <Button\n      variant=\"secondary\"\n      size={action.iconOnly ? 'icon' : 'md'}\n      className={\n        action.compact ? 'h-[calc(var(--control-h-lg)-2px)] min-h-0' : undefined\n      }\n      onClick={action.onClick}\n      aria-label={action.label}\n    >\n      {ActionIcon && <ActionIcon />}\n      {!action.iconOnly && action.label}\n    </Button>\n  );\n\n  if (isDetail) {\n    return (\n      <MobileScreenFrame\n        title={detailConfig?.title ?? pageTitle}\n        actions={detailConfig?.actions ?? trailing}\n      >\n        {children}\n      </MobileScreenFrame>\n    );\n  }\n\n  if (isConnectorsPage) {\n    return (\n      <MobileScreenFrame title={pageTitle ?? 'Connectors'} actions={trailing}>\n        {children}\n      </MobileScreenFrame>\n    );\n  }\n\n  if (isAccountSettingsChild) {\n    return (\n      <MobileScreenFrame title={pageTitle ?? 'Settings'} actions={trailing}>\n        {children}\n      </MobileScreenFrame>\n    );\n  }\n\n  // A root screen gets the shared frame — the same one every native screen\n  // uses. Nothing about the app row or the sheet is decided here any more.\n  return (\n    <MobileScreenFrame\n      title={titleInPageBody ? undefined : pageTitle}\n      actions={\n        // Icon actions win the title row when a screen publishes them; the\n        // labelled `action` is the fallback for screens that have one thing to\n        // offer and a word for it.\n        screenConfig?.actions?.length ? (\n          <>\n            {screenConfig.actions\n              .slice(0, 2)\n              .map((a) =>\n                a.icon ? (\n                  <SheetAction\n                    key={a.label}\n                    icon={a.icon}\n                    label={a.label}\n                    onClick={a.onClick}\n                  />\n                ) : null,\n              )}\n          </>\n        ) : (\n          trailing\n        )\n      }\n    >\n      {children}\n    </MobileScreenFrame>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/site-action-dialog.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+interface SiteActionDialogProps {
+    liveUrl: string;
+    onEdit: () => void;
+    children: ReactNode;
+}
+export declare function SiteActionDialog({ liveUrl, onEdit, children, }: SiteActionDialogProps): import("react").JSX.Element;
+export {};

package/dist/mobile/site-action-dialog.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink, Pencil } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Card } from "@withpotter/ui-kit/card";
+import { Button } from "@withpotter/ui-kit/button";
+function SiteActionDialog({
+  liveUrl,
+  onEdit,
+  children
+}) {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const handlePointerDown = (event) => {
+      if (!containerRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-flex",
+        onClick: () => setOpen((current) => !current),
+        children
+      }
+    ),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute right-0 top-full z-50 mt-2 w-72",
+        onClick: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ jsx(Card, { padding: "sm", className: "w-fit min-w-0 shadow-lg", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              className: "h-20 w-32 flex-col justify-center gap-2",
+              icon: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }),
+              onClick: () => {
+                setOpen(false);
+                window.open(liveUrl, "_blank", "noopener");
+              },
+              children: "Visit site"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              className: "h-20 w-32 flex-col justify-center gap-2",
+              icon: /* @__PURE__ */ jsx(Pencil, { className: "size-4" }),
+              onClick: () => {
+                setOpen(false);
+                onEdit();
+              },
+              children: "Edit site"
+            }
+          )
+        ] }) })
+      }
+    ) : null
+  ] });
+}
+export {
+  SiteActionDialog
+};
+//# sourceMappingURL=site-action-dialog.js.map

package/dist/mobile/site-action-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/site-action-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { ExternalLink, Pencil } from 'lucide-react';\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { Card } from '@withpotter/ui-kit/card';\nimport { Button } from '@withpotter/ui-kit/button';\n\ninterface SiteActionDialogProps {\n  liveUrl: string;\n  onEdit: () => void;\n  children: ReactNode;\n}\n\nexport function SiteActionDialog({\n  liveUrl,\n  onEdit,\n  children,\n}: SiteActionDialogProps) {\n  const [open, setOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const handlePointerDown = (event: PointerEvent) => {\n      if (!containerRef.current?.contains(event.target as Node)) {\n        setOpen(false);\n      }\n    };\n    document.addEventListener('pointerdown', handlePointerDown);\n    return () => document.removeEventListener('pointerdown', handlePointerDown);\n  }, [open]);\n\n  return (\n    <div ref={containerRef} className=\"relative\">\n      <span\n        className=\"inline-flex\"\n        onClick={() => setOpen((current) => !current)}\n      >\n        {children}\n      </span>\n      {open ? (\n        <div\n          className=\"absolute right-0 top-full z-50 mt-2 w-72\"\n          onClick={(event) => event.stopPropagation()}\n        >\n          <Card padding=\"sm\" className=\"w-fit min-w-0 shadow-lg\">\n            <div className=\"grid grid-cols-2 gap-2\">\n              <Button\n                type=\"button\"\n                className=\"h-20 w-32 flex-col justify-center gap-2\"\n                icon={<ExternalLink className=\"size-4\" />}\n                onClick={() => {\n                  setOpen(false);\n                  window.open(liveUrl, '_blank', 'noopener');\n                }}\n              >\n                Visit site\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className=\"h-20 w-32 flex-col justify-center gap-2\"\n                icon={<Pencil className=\"size-4\" />}\n                onClick={() => {\n                  setOpen(false);\n                  onEdit();\n                }}\n              >\n                Edit site\n              </Button>\n            </div>\n          </Card>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAkCM,cAYM,YAZN;AAhCN,SAAS,cAAc,cAAc;AACrC,SAAS,WAAW,QAAQ,gBAAgC;AAC5D,SAAS,YAAY;AACrB,SAAS,cAAc;AAQhB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,eAAe,OAAuB,IAAI;AAEhD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,oBAAoB,CAAC,UAAwB;AACjD,UAAI,CAAC,aAAa,SAAS,SAAS,MAAM,MAAc,GAAG;AACzD,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AACA,aAAS,iBAAiB,eAAe,iBAAiB;AAC1D,WAAO,MAAM,SAAS,oBAAoB,eAAe,iBAAiB;AAAA,EAC5E,GAAG,CAAC,IAAI,CAAC;AAET,SACE,qBAAC,SAAI,KAAK,cAAc,WAAU,YAChC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,MAAM,QAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,QAE3C;AAAA;AAAA,IACH;AAAA,IACC,OACC;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS,CAAC,UAAU,MAAM,gBAAgB;AAAA,QAE1C,8BAAC,QAAK,SAAQ,MAAK,WAAU,2BAC3B,+BAAC,SAAI,WAAU,0BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,MAAM,oBAAC,gBAAa,WAAU,UAAS;AAAA,cACvC,SAAS,MAAM;AACb,wBAAQ,KAAK;AACb,uBAAO,KAAK,SAAS,UAAU,UAAU;AAAA,cAC3C;AAAA,cACD;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,MAAM,oBAAC,UAAO,WAAU,UAAS;AAAA,cACjC,SAAS,MAAM;AACb,wBAAQ,KAAK;AACb,uBAAO;AAAA,cACT;AAAA,cACD;AAAA;AAAA,UAED;AAAA,WACF,GACF;AAAA;AAAA,IACF,IACE;AAAA,KACN;AAEJ;","names":[]}

package/dist/mobile/workspace-switcher-sheet.d.ts

@@ -0,0 +1,15 @@
+import type { Workspace } from '@withpotter/lib/auth-context';
+interface WorkspaceSwitcherSheetProps {
+    open: boolean;
+    workspaces: Workspace[];
+    currentTenantId?: string;
+    onDismiss: () => void;
+    onSwitch: (slug: string) => void;
+    onHistory?: () => void;
+}
+/**
+ * Anchored business popover that lists all workspaces and lets them switch
+ * without taking over the whole screen.
+ */
+export declare function WorkspaceSwitcherSheet({ open, workspaces, currentTenantId, onDismiss, onSwitch, onHistory, }: WorkspaceSwitcherSheetProps): import("react").JSX.Element;
+export {};