@withpotter/components 0.13.0-next.101

package/dist/mobile/screen-frame-host.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/screen-frame-host.tsx"],"sourcesContent":["'use client';\n\n/**\n * The frame every mobile screen sits in.\n *\n * Two layers. The OUTER is the app: a near-black ground, the status bar, and\n * one slim row that is the same on every screen — the account on the left, the\n * workspace in the middle, search on the right. The INNER is the PAGE: a sheet\n * with rounded top corners that runs off the bottom, carrying the screen title\n * and its own actions.\n *\n * ## Why this is one component and not thirteen copies\n *\n * The `shell` tier got this frame first, from `MobileShellChrome`. The thirteen\n * `native` screens each drew their own version instead: the same root div, the\n * same `env(safe-area-inset-top)`, the same `<h1>`, the same `<BottomTabBar/>`\n * — thirteen times, already disagreeing on padding and title size. That is the\n * shape every fork in this codebase has started as.\n *\n * So the frame is the component and the screen is its child. A screen says what\n * it is called and what is in it; where the title sits, how round the sheet is\n * and what the app row holds are not its business.\n */\n\nimport React, { useState } from 'react';\nimport { useRouter } from 'next/navigation';\nimport Link from 'next/link';\nimport {\n  ArrowUpRight,\n  Bell,\n  ChevronUp,\n  Globe,\n  House,\n  List,\n  Package,\n  Search,\n  Store,\n} from 'lucide-react';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { resolveWebUrl } from '@withpotter/lib/web-url';\nimport { SiteActionDialog } from './site-action-dialog';\nimport { IllustrationFrame } from '@withpotter/ui-kit/illustration-frame';\nimport { generatedAvatarUri } from '@withpotter/ui-kit/generated-avatar';\nimport { RELEASES } from '@withpotter/lib/whats-new';\nimport type { SearchResults } from '@withpotter/components/command-palette/use-command-search';\nimport { useMobileGlobalUi } from '@withpotter/components/mobile/mobile-global-ui-context';\nimport { WorkspaceSwitcherSheet } from '@withpotter/components/mobile/workspace-switcher-sheet';\nimport { ChevronDown } from 'lucide-react';\n\nexport interface MobileAppBarOverride {\n  leading?: React.ReactNode;\n  center?: React.ReactNode;\n  trailing?: React.ReactNode;\n}\n\nexport const MobileAppBarOverrideContext = React.createContext<{\n  setOverride: (override: MobileAppBarOverride | null) => void;\n}>({ setOverride: () => {} });\nexport const MobileAddActionContext = React.createContext<{\n  setAction: (action: (() => void) | null) => void;\n}>({ setAction: () => {} });\n\nexport function useMobileAppBarOverride(override: MobileAppBarOverride | null) {\n  const { setOverride } = React.useContext(MobileAppBarOverrideContext);\n\n  React.useEffect(() => {\n    setOverride(override);\n    return () => setOverride(null);\n  }, [override, setOverride]);\n}\n\nexport function useMobileAddAction(action: (() => void) | null) {\n  const { setAction } = React.useContext(MobileAddActionContext);\n\n  React.useEffect(() => {\n    setAction(() => action);\n    return () => setAction(() => null);\n  }, [action, setAction]);\n}\n\n/**\n * The account, top left — who is signed in, not which business.\n *\n * Identity and location were one control before: a single chip carrying the\n * workspace's mark and name, which answered \"where am I\" twice and \"who am I\"\n * never. On a shared counter phone that second question is the one that\n * matters, and it is the one iOS answers in this corner.\n */\nexport function AccountAvatar() {\n  const { user } = useAuth();\n  const { closeSearch } = useMobileGlobalUi();\n  const name = user?.name || user?.email || 'Account';\n  const avatarUrl = user?.avatarUrl || generatedAvatarUri(user?.email ?? name);\n\n  return (\n    <Link\n      href=\"/dashboard/settings\"\n      onClick={closeSearch}\n      aria-label={`Account and business settings — ${name}`}\n      className=\"relative z-[1] flex size-8 items-center justify-center overflow-hidden rounded-full text-2xs font-semibold transition-transform active:scale-95\"\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img src={avatarUrl} alt=\"\" className=\"size-full object-cover\" />\n    </Link>\n  );\n}\n\n/**\n * The workspace, centred — where you are, and the way to be somewhere else.\n *\n * The chevron is not decoration: this is the only door to the workspace\n * switcher on a phone now that the Me screen is not the one place it lives,\n * and a name with no affordance reads as a label. The sheet behind it already\n * lists every workspace and offers creating one, so switching and starting a\n * new business are one tap from every screen rather than four.\n */\nexport function WorkspaceTitle({ onHistory }: { onHistory?: () => void }) {\n  const router = useRouter();\n  const { tenant, workspaces, switchWorkspace } = useAuth();\n  const [open, setOpen] = useState(false);\n  const name = tenant?.businessName || 'Potter';\n\n  return (\n    <>\n      <div className=\"relative\">\n        <button\n          type=\"button\"\n          onClick={() => setOpen((value) => !value)}\n          onPointerDown={(event) => {\n            if (open) event.stopPropagation();\n          }}\n          data-workspace-switcher-trigger\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          className=\"relative z-[1] flex min-w-0 items-center gap-1 rounded-full px-2 py-1 transition-transform active:scale-95\"\n        >\n          <span\n            className=\"truncate text-base font-semibold\"\n            style={{ color: 'var(--mb-app-ground-text, var(--mb-text))' }}\n          >\n            {name}\n          </span>\n          {open ? (\n            <ChevronUp\n              className=\"size-4 shrink-0\"\n              style={{\n                color: 'var(--mb-app-ground-text, var(--mb-text-tertiary))',\n              }}\n            />\n          ) : (\n            <ChevronDown\n              className=\"size-4 shrink-0\"\n              style={{\n                color: 'var(--mb-app-ground-text, var(--mb-text-tertiary))',\n              }}\n            />\n          )}\n        </button>\n        <WorkspaceSwitcherSheet\n          open={open}\n          workspaces={workspaces}\n          currentTenantId={tenant?.id}\n          onDismiss={() => setOpen(false)}\n          onSwitch={(slug) => {\n            setOpen(false);\n            void (async () => {\n              await switchWorkspace(slug);\n              router.replace('/dashboard');\n            })();\n          }}\n          onHistory={onHistory}\n        />\n      </div>\n    </>\n  );\n}\n\n/** The one global action. Kept here so every screen gets the same one. */\nexport function AppSearchButton() {\n  const { openSearch } = useMobileGlobalUi();\n  return (\n    <button\n      type=\"button\"\n      onClick={openSearch}\n      aria-label=\"Search\"\n      className=\"flex h-9 items-center gap-1.5 rounded-xl border px-2.5\"\n      style={{\n        borderColor: 'var(--mb-border)',\n        background: 'var(--mb-elevated)',\n      }}\n    >\n      <Search\n        className=\"size-4\"\n        style={{ color: 'var(--mb-text-secondary)' }}\n      />\n      <span\n        className=\"text-xs font-medium\"\n        style={{ color: 'var(--mb-text-secondary)' }}\n      >\n        Search\n      </span>\n    </button>\n  );\n}\n\nconst SEARCH_DESTINATIONS = [\n  { label: 'Home', meta: 'Dashboard', href: '/dashboard', icon: House },\n  { label: 'Orders', meta: 'Manage', href: '/dashboard/orders', icon: List },\n  {\n    label: 'Products',\n    meta: 'Catalog',\n    href: '/dashboard/catalog',\n    icon: Package,\n  },\n  {\n    label: 'Customers',\n    meta: 'Manage',\n    href: '/dashboard/customers',\n    icon: Store,\n  },\n  {\n    label: 'Website',\n    meta: 'Storefront',\n    href: '/dashboard/business',\n    icon: Globe,\n  },\n];\n\nexport function GlobalSearchResults({\n  query,\n  results,\n  isLoading,\n  onNavigate,\n}: {\n  query: string;\n  results: SearchResults;\n  isLoading: boolean;\n  onNavigate: (href: string) => void;\n}) {\n  const normalizedQuery = query.trim().toLowerCase();\n  const destinations = SEARCH_DESTINATIONS.filter((destination) =>\n    `${destination.label} ${destination.meta}`\n      .toLowerCase()\n      .includes(normalizedQuery),\n  );\n  const recordGroups = [\n    ['orders', 'Orders'],\n    ['customers', 'Customers'],\n    ['invoices', 'Invoices'],\n    ['products', 'Products'],\n    ['support', 'Support'],\n  ] as const;\n  const hasRecords = recordGroups.some(([key]) => results[key]?.length);\n  const hasDestinations = destinations.length > 0;\n\n  return (\n    <div className=\"pb-6 pt-4\">\n      {normalizedQuery && (\n        <p\n          className=\"text-3xs font-medium uppercase tracking-wider\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          Results\n        </p>\n      )}\n      <div className=\"mt-2 space-y-1\">\n        {normalizedQuery && isLoading ? (\n          <p className=\"px-1 py-4 text-sm text-[var(--mb-text-tertiary)]\">\n            Searching…\n          </p>\n        ) : normalizedQuery && (hasRecords || hasDestinations) ? (\n          <>\n            {recordGroups.map(([key, label]) => {\n              const items = results[key] ?? [];\n              if (!items.length) return null;\n              return (\n                <section key={key} className=\"mb-4\">\n                  <p className=\"px-1 pb-1 text-xs font-semibold text-[var(--mb-text-tertiary)]\">\n                    {label}\n                  </p>\n                  {items.map((item) => (\n                    <button\n                      type=\"button\"\n                      key={`${key}-${item.id}`}\n                      onClick={() => onNavigate(item.href)}\n                      className=\"flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left\"\n                      style={{ background: 'var(--mb-card)' }}\n                    >\n                      <Search\n                        className=\"size-6\"\n                        style={{ color: 'var(--mb-text-secondary)' }}\n                      />\n                      <span className=\"min-w-0 flex-1\">\n                        <span className=\"block truncate text-sm font-medium\">\n                          {item.label}\n                        </span>\n                        <span\n                          className=\"block truncate text-xs\"\n                          style={{ color: 'var(--mb-text-tertiary)' }}\n                        >\n                          {[item.sublabel, item.meta]\n                            .filter(Boolean)\n                            .join(' · ')}\n                        </span>\n                      </span>\n                    </button>\n                  ))}\n                </section>\n              );\n            })}\n            {hasDestinations ? (\n              <section>\n                <p className=\"px-1 pb-1 text-xs font-semibold text-[var(--mb-text-tertiary)]\">\n                  Pages\n                </p>\n                <div className=\"grid grid-cols-2 gap-2\">\n                  {destinations.map(({ label, meta, href, icon: Icon }) => (\n                    <button\n                      type=\"button\"\n                      key={href}\n                      onClick={() => onNavigate(href)}\n                      className=\"flex min-h-24 flex-col items-start justify-between rounded-xl border p-3 text-left\"\n                      style={{\n                        background: 'var(--mb-card)',\n                        borderColor: 'var(--mb-border)',\n                      }}\n                    >\n                      <Icon\n                        className=\"size-5\"\n                        style={{ color: 'var(--mb-accent-ink)' }}\n                      />\n                      <span>\n                        <span className=\"block text-sm font-medium\">\n                          {label}\n                        </span>\n                        <span\n                          className=\"block text-xs\"\n                          style={{ color: 'var(--mb-text-tertiary)' }}\n                        >\n                          {meta}\n                        </span>\n                      </span>\n                    </button>\n                  ))}\n                </div>\n              </section>\n            ) : null}\n          </>\n        ) : normalizedQuery && destinations.length ? (\n          <>\n            <div className=\"grid grid-cols-2 gap-2\">\n              {destinations.map(({ label, meta, href, icon: Icon }) => (\n                <button\n                  type=\"button\"\n                  key={href}\n                  onClick={() => onNavigate(href)}\n                  className=\"flex min-h-24 flex-col items-start justify-between rounded-xl border p-3 text-left\"\n                  style={{\n                    background: 'var(--mb-card)',\n                    borderColor: 'var(--mb-border)',\n                  }}\n                >\n                  <Icon\n                    className=\"size-5\"\n                    style={{ color: 'var(--mb-accent-ink)' }}\n                  />\n                  <span>\n                    <span className=\"block text-sm font-medium\">{label}</span>\n                    <span\n                      className=\"block text-xs\"\n                      style={{ color: 'var(--mb-text-tertiary)' }}\n                    >\n                      {meta}\n                    </span>\n                  </span>\n                </button>\n              ))}\n            </div>\n            {RELEASES[0] ? (\n              <button\n                type=\"button\"\n                onClick={() => onNavigate(RELEASES[0].href ?? '/release-notes')}\n                className=\"mt-3 flex w-full items-center gap-3 rounded-xl border p-3 text-left\"\n                style={{\n                  background: 'var(--mb-card)',\n                  borderColor: 'var(--mb-border)',\n                }}\n              >\n                {RELEASES[0].image ? (\n                  // eslint-disable-next-line @next/next/no-img-element\n                  <img\n                    src={RELEASES[0].image}\n                    alt=\"\"\n                    className=\"size-9 shrink-0 rounded-lg object-cover\"\n                  />\n                ) : null}\n                <span className=\"min-w-0 flex-1\">\n                  <span\n                    className=\"block text-2xs font-medium uppercase tracking-wider\"\n                    style={{ color: 'var(--mb-text-tertiary)' }}\n                  >\n                    What&apos;s new\n                  </span>\n                  <span className=\"block truncate text-sm font-medium\">\n                    {RELEASES[0].title}\n                  </span>\n                </span>\n                <ArrowUpRight\n                  className=\"size-4 shrink-0\"\n                  style={{ color: 'var(--mb-text-secondary)' }}\n                />\n              </button>\n            ) : null}\n          </>\n        ) : (\n          <div\n            className=\"rounded-xl border p-5 text-center\"\n            style={{\n              background: 'var(--mb-card)',\n              borderColor: 'var(--mb-border)',\n            }}\n          >\n            <IllustrationFrame\n              icon={Bell}\n              src=\"/explore/banner.svg\"\n              size=\"sm\"\n              tone=\"free\"\n            />\n            <p className=\"text-sm font-semibold\">No results</p>\n            <p\n              className=\"mt-1 text-xs\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              Try another search.\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport function StorefrontPreviewButton() {\n  const { tenant } = useAuth();\n  const href = tenant?.slug\n    ? `${resolveWebUrl()}/${tenant.slug}`\n    : resolveWebUrl();\n\n  return (\n    <SiteActionDialog\n      liveUrl={href}\n      onEdit={() => window.location.assign('/dashboard/business')}\n    >\n      <button\n        type=\"button\"\n        aria-label=\"Open site actions\"\n        className=\"flex size-10 items-center justify-center rounded-full transition-transform active:scale-95\"\n      >\n        <Globe\n          className=\"size-5\"\n          style={{ color: 'var(--mb-app-ground-text, var(--mb-text))' }}\n        />\n      </button>\n    </SiteActionDialog>\n  );\n}\n\nexport { MobileScreenFrame } from './mobile-screen-frame';\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/analytics-drill.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Mobile screen — Analytics report drill (Sales / Traffic / Products / Customers / Engagement)
+ * Visual contract: `InsightsSalesDrill` in mobile-redesign-mockups.tsx
+ * Route: /dashboard/analytics?tab=<key>
+ */
+import React from 'react';
+export type ReportKey = 'sales' | 'traffic' | 'products' | 'customers' | 'in-person' | 'engagement';
+interface BreakdownItem {
+    label: string;
+    value: string;
+    pct: number;
+}
+export interface DateRangeOption {
+    key: string;
+    label: string;
+}
+interface MobileAnalyticsDrillScreenProps {
+    reportKey: ReportKey;
+    title: string;
+    totalLabel: string;
+    totalValue: string;
+    delta?: {
+        value: number;
+        tone: 'good' | 'bad';
+    };
+    periodLabel: string;
+    bars?: number[];
+    barLabels?: string[];
+    breakdowns?: {
+        caption: string;
+        items: BreakdownItem[];
+    }[];
+    dateRanges?: DateRangeOption[];
+    currentRangeKey?: string;
+    onSelectDateRange?: (key: string) => void;
+    onBack?: () => void;
+    onMore?: () => void;
+    onExport?: () => void;
+    /**
+     * Rendered at the foot of the scrolling body. The one caller uses it for the
+     * "could you act on this" vote that every desktop report already carries —
+     * without it, the question was asked on desktop only, which is the half of
+     * the audience least likely to be the one struggling with a report.
+     */
+    footer?: React.ReactNode;
+}
+export declare function MobileAnalyticsDrillScreen({ title, totalLabel, totalValue, delta, periodLabel, bars, barLabels, breakdowns, dateRanges, currentRangeKey, onSelectDateRange, onBack, onMore, onExport, footer, }: MobileAnalyticsDrillScreenProps): React.JSX.Element;
+export {};

package/dist/mobile/screens/analytics-drill.js

@@ -0,0 +1,319 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  ArrowLeft,
+  Check,
+  Download,
+  MoreHorizontal,
+  TrendingDown,
+  TrendingUp,
+  X
+} from "lucide-react";
+import { Chip, useMobileBack } from "@withpotter/components/mobile/primitives";
+function MobileAnalyticsDrillScreen({
+  title,
+  totalLabel,
+  totalValue,
+  delta,
+  periodLabel,
+  bars = [42, 58, 38, 72, 64, 88, 76],
+  barLabels = ["M", "T", "W", "T", "F", "S", "S"],
+  breakdowns = [],
+  dateRanges,
+  currentRangeKey,
+  onSelectDateRange,
+  onBack,
+  onMore,
+  onExport,
+  footer
+}) {
+  const goBack = useMobileBack(onBack);
+  const max = Math.max(...bars, 1);
+  const deltaColor = delta?.tone === "good" ? "var(--mb-good)" : "var(--mb-bad)";
+  const DeltaIcon = delta?.tone === "good" ? TrendingUp : TrendingDown;
+  const [showRangeSheet, setShowRangeSheet] = useState(false);
+  const canPickRange = Boolean(dateRanges?.length && onSelectDateRange);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex min-h-dvh flex-col",
+      style: {
+        paddingTop: "env(safe-area-inset-top)",
+        background: "var(--mb-canvas)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex h-12 items-center justify-between px-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Back",
+              onClick: goBack,
+              className: "flex h-9 w-9 items-center justify-center rounded-full",
+              style: { background: "var(--mb-card)" },
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", style: { color: "var(--mb-text)" } })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "More",
+              onClick: onMore,
+              className: "flex h-9 w-9 items-center justify-center rounded-full",
+              style: { background: "var(--mb-card)" },
+              children: /* @__PURE__ */ jsx(
+                MoreHorizontal,
+                {
+                  className: "size-4",
+                  style: { color: "var(--mb-text-secondary)" }
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-28", children: [
+          /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(
+            Chip,
+            {
+              label: periodLabel,
+              active: true,
+              onClick: canPickRange ? () => setShowRangeSheet(true) : void 0
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-2xs font-medium",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: totalLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "mt-1 text-4xl font-bold leading-tight",
+                style: { color: "var(--mb-text)" },
+                children: totalValue
+              }
+            ),
+            delta ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "mt-1 flex items-center gap-1.5 text-xs font-medium",
+                style: { color: deltaColor },
+                children: [
+                  /* @__PURE__ */ jsx(DeltaIcon, { className: "h-4 w-4" }),
+                  delta.value > 0 ? "+" : "",
+                  delta.value,
+                  "% vs prev period"
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "mt-4 rounded-2xl border p-4",
+              style: {
+                borderColor: "var(--mb-border)",
+                background: "var(--mb-card)"
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "flex h-32 items-end gap-2", children: bars.map((h, i) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex flex-1 flex-col items-center gap-1.5",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "w-full rounded-t-md",
+                        style: {
+                          height: `${Math.round(h / max * 100)}%`,
+                          background: i === bars.length - 2 ? "var(--mb-accent)" : "color-mix(in srgb, var(--mb-accent) 32%, transparent)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "text-3xs",
+                        style: { color: "var(--mb-text-tertiary)" },
+                        children: barLabels[i] ?? ""
+                      }
+                    )
+                  ]
+                },
+                i
+              )) })
+            }
+          ),
+          breakdowns.map((group) => /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+            /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: "text-3xs font-medium",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: group.caption
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-3", children: [
+              group.items.map((item) => /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs", children: [
+                  /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-text)" }, children: item.label }),
+                  /* @__PURE__ */ jsxs("span", { style: { color: "var(--mb-text-tertiary)" }, children: [
+                    item.value,
+                    " \xB7",
+                    " ",
+                    /* @__PURE__ */ jsxs("span", { style: { color: "var(--mb-text)" }, children: [
+                      item.pct,
+                      "%"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "h-1.5 w-full overflow-hidden rounded-full",
+                    style: { background: "var(--mb-elevated)" },
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "h-full rounded-full",
+                        style: {
+                          width: `${item.pct}%`,
+                          background: "var(--mb-accent)"
+                        }
+                      }
+                    )
+                  }
+                )
+              ] }, item.label)),
+              group.items.length === 0 ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-xs",
+                  style: { color: "var(--mb-text-tertiary)" },
+                  children: "No data yet"
+                }
+              ) : null
+            ] })
+          ] }, group.caption)),
+          footer ? /* @__PURE__ */ jsx("div", { className: "mt-8", children: footer }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-x-3 bottom-3 z-30 rounded-[26px] border p-2",
+            style: {
+              borderColor: "var(--mb-border)",
+              background: "color-mix(in srgb, var(--mb-card) 95%, transparent)",
+              backdropFilter: "blur(12px)"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onExport,
+                className: "flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold",
+                style: {
+                  background: "var(--mb-accent)",
+                  color: "var(--mb-accent-fg)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Download, { className: "size-4" }),
+                  "Export CSV"
+                ]
+              }
+            )
+          }
+        ),
+        showRangeSheet && dateRanges && onSelectDateRange ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed inset-0 z-[var(--z-modal)] flex items-end",
+            style: { background: "var(--mb-media-scrim)" },
+            onClick: () => setShowRangeSheet(false),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "w-full rounded-t-3xl border-t p-4 pb-[calc(16px_+_env(safe-area-inset-bottom))]",
+                style: {
+                  background: "var(--mb-card)",
+                  borderColor: "var(--mb-border)"
+                },
+                onClick: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                    /* @__PURE__ */ jsx(
+                      "p",
+                      {
+                        className: "text-lg font-semibold",
+                        style: { color: "var(--mb-text)" },
+                        children: "Date range"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": "Close",
+                        onClick: () => setShowRangeSheet(false),
+                        className: "flex h-8 w-8 items-center justify-center rounded-full",
+                        style: { background: "var(--mb-elevated)" },
+                        children: /* @__PURE__ */ jsx(
+                          X,
+                          {
+                            className: "size-4",
+                            style: { color: "var(--mb-text-secondary)" }
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mt-3 space-y-1", children: dateRanges.map((range) => {
+                    const active = range.key === currentRangeKey;
+                    return /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onSelectDateRange(range.key);
+                          setShowRangeSheet(false);
+                        },
+                        className: "flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-md font-medium",
+                        style: {
+                          background: active ? "var(--mb-elevated)" : "transparent",
+                          color: active ? "var(--mb-accent)" : "var(--mb-text)"
+                        },
+                        children: [
+                          range.label,
+                          active ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : null
+                        ]
+                      },
+                      range.key
+                    );
+                  }) })
+                ]
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  MobileAnalyticsDrillScreen
+};
+//# sourceMappingURL=analytics-drill.js.map

package/dist/mobile/screens/analytics-drill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/analytics-drill.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Analytics report drill (Sales / Traffic / Products / Customers / Engagement)\n * Visual contract: `InsightsSalesDrill` in mobile-redesign-mockups.tsx\n * Route: /dashboard/analytics?tab=<key>\n */\n\nimport React, { useState } from 'react';\nimport {\n  ArrowLeft,\n  Check,\n  Download,\n  MoreHorizontal,\n  TrendingDown,\n  TrendingUp,\n  X,\n} from 'lucide-react';\nimport { Chip, useMobileBack } from '@withpotter/components/mobile/primitives';\n\nexport type ReportKey =\n  | 'sales'\n  | 'traffic'\n  | 'products'\n  | 'customers'\n  | 'in-person'\n  | 'engagement';\n\ninterface BreakdownItem {\n  label: string;\n  value: string;\n  pct: number;\n}\n\nexport interface DateRangeOption {\n  key: string;\n  label: string;\n}\n\ninterface MobileAnalyticsDrillScreenProps {\n  reportKey: ReportKey;\n  title: string;\n  totalLabel: string;\n  totalValue: string;\n  delta?: { value: number; tone: 'good' | 'bad' };\n  periodLabel: string;\n  bars?: number[];\n  barLabels?: string[];\n  breakdowns?: { caption: string; items: BreakdownItem[] }[];\n  dateRanges?: DateRangeOption[];\n  currentRangeKey?: string;\n  onSelectDateRange?: (key: string) => void;\n  onBack?: () => void;\n  onMore?: () => void;\n  onExport?: () => void;\n  /**\n   * Rendered at the foot of the scrolling body. The one caller uses it for the\n   * \"could you act on this\" vote that every desktop report already carries —\n   * without it, the question was asked on desktop only, which is the half of\n   * the audience least likely to be the one struggling with a report.\n   */\n  footer?: React.ReactNode;\n}\n\nexport function MobileAnalyticsDrillScreen({\n  title,\n  totalLabel,\n  totalValue,\n  delta,\n  periodLabel,\n  bars = [42, 58, 38, 72, 64, 88, 76],\n  barLabels = ['M', 'T', 'W', 'T', 'F', 'S', 'S'],\n  breakdowns = [],\n  dateRanges,\n  currentRangeKey,\n  onSelectDateRange,\n  onBack,\n  onMore,\n  onExport,\n  footer,\n}: MobileAnalyticsDrillScreenProps) {\n  const goBack = useMobileBack(onBack);\n  const max = Math.max(...bars, 1);\n  const deltaColor =\n    delta?.tone === 'good' ? 'var(--mb-good)' : 'var(--mb-bad)';\n  const DeltaIcon = delta?.tone === 'good' ? TrendingUp : TrendingDown;\n  const [showRangeSheet, setShowRangeSheet] = useState(false);\n  const canPickRange = Boolean(dateRanges?.length && onSelectDateRange);\n\n  return (\n    <div\n      className=\"flex min-h-dvh flex-col\"\n      style={{\n        paddingTop: 'env(safe-area-inset-top)',\n        background: 'var(--mb-canvas)',\n      }}\n    >\n      <header className=\"flex h-12 items-center justify-between px-2\">\n        <button\n          type=\"button\"\n          aria-label=\"Back\"\n          onClick={goBack}\n          className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n          style={{ background: 'var(--mb-card)' }}\n        >\n          <ArrowLeft className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n        </button>\n        <p\n          className=\"text-lg font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {title}\n        </p>\n        <button\n          type=\"button\"\n          aria-label=\"More\"\n          onClick={onMore}\n          className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n          style={{ background: 'var(--mb-card)' }}\n        >\n          <MoreHorizontal\n            className=\"size-4\"\n            style={{ color: 'var(--mb-text-secondary)' }}\n          />\n        </button>\n      </header>\n\n      <div className=\"flex-1 overflow-y-auto px-4 pb-28\">\n        <div className=\"mt-3\">\n          <Chip\n            label={periodLabel}\n            active\n            onClick={canPickRange ? () => setShowRangeSheet(true) : undefined}\n          />\n        </div>\n\n        <section className=\"mt-6\">\n          <p\n            className=\"text-2xs font-medium\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            {totalLabel}\n          </p>\n          <p\n            className=\"mt-1 text-4xl font-bold leading-tight\"\n            style={{ color: 'var(--mb-text)' }}\n          >\n            {totalValue}\n          </p>\n          {delta ? (\n            <div\n              className=\"mt-1 flex items-center gap-1.5 text-xs font-medium\"\n              style={{ color: deltaColor }}\n            >\n              <DeltaIcon className=\"h-4 w-4\" />\n              {delta.value > 0 ? '+' : ''}\n              {delta.value}% vs prev period\n            </div>\n          ) : null}\n        </section>\n\n        <div\n          className=\"mt-4 rounded-2xl border p-4\"\n          style={{\n            borderColor: 'var(--mb-border)',\n            background: 'var(--mb-card)',\n          }}\n        >\n          <div className=\"flex h-32 items-end gap-2\">\n            {bars.map((h, i) => (\n              <div\n                key={i}\n                className=\"flex flex-1 flex-col items-center gap-1.5\"\n              >\n                <div\n                  className=\"w-full rounded-t-md\"\n                  style={{\n                    height: `${Math.round((h / max) * 100)}%`,\n                    background:\n                      i === bars.length - 2\n                        ? 'var(--mb-accent)'\n                        : 'color-mix(in srgb, var(--mb-accent) 32%, transparent)',\n                  }}\n                />\n                <span\n                  className=\"text-3xs\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  {barLabels[i] ?? ''}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {breakdowns.map((group) => (\n          <section key={group.caption} className=\"mt-6\">\n            <p\n              className=\"text-3xs font-medium\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              {group.caption}\n            </p>\n            <div className=\"mt-3 space-y-3\">\n              {group.items.map((item) => (\n                <div key={item.label} className=\"space-y-1.5\">\n                  <div className=\"flex items-center justify-between text-xs\">\n                    <span style={{ color: 'var(--mb-text)' }}>\n                      {item.label}\n                    </span>\n                    <span style={{ color: 'var(--mb-text-tertiary)' }}>\n                      {item.value} ·{' '}\n                      <span style={{ color: 'var(--mb-text)' }}>\n                        {item.pct}%\n                      </span>\n                    </span>\n                  </div>\n                  <div\n                    className=\"h-1.5 w-full overflow-hidden rounded-full\"\n                    style={{ background: 'var(--mb-elevated)' }}\n                  >\n                    <div\n                      className=\"h-full rounded-full\"\n                      style={{\n                        width: `${item.pct}%`,\n                        background: 'var(--mb-accent)',\n                      }}\n                    />\n                  </div>\n                </div>\n              ))}\n              {group.items.length === 0 ? (\n                <p\n                  className=\"text-xs\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  No data yet\n                </p>\n              ) : null}\n            </div>\n          </section>\n        ))}\n\n        {/* The foot of the report, which is where `ReportPage` puts the same\n            question on a desktop. Kept a SLOT rather than the vote itself:\n            this screen is presentational and knows nothing about which report\n            it is drawing, and the identity the vote needs lives one level up\n            with the `report` key. */}\n        {footer ? <div className=\"mt-8\">{footer}</div> : null}\n      </div>\n\n      <div\n        className=\"absolute inset-x-3 bottom-3 z-30 rounded-[26px] border p-2\"\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'color-mix(in srgb, var(--mb-card) 95%, transparent)',\n          backdropFilter: 'blur(12px)',\n        }}\n      >\n        <button\n          type=\"button\"\n          onClick={onExport}\n          className=\"flex h-12 w-full items-center justify-center gap-2 rounded-2xl text-md font-semibold\"\n          style={{\n            background: 'var(--mb-accent)',\n            color: 'var(--mb-accent-fg)',\n          }}\n        >\n          <Download className=\"size-4\" />\n          Export CSV\n        </button>\n      </div>\n\n      {showRangeSheet && dateRanges && onSelectDateRange ? (\n        <div\n          className=\"fixed inset-0 z-[var(--z-modal)] flex items-end\"\n          style={{ background: 'var(--mb-media-scrim)' }}\n          onClick={() => setShowRangeSheet(false)}\n        >\n          <div\n            className=\"w-full rounded-t-3xl border-t p-4 pb-[calc(16px_+_env(safe-area-inset-bottom))]\"\n            style={{\n              background: 'var(--mb-card)',\n              borderColor: 'var(--mb-border)',\n            }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <div className=\"flex items-center justify-between\">\n              <p\n                className=\"text-lg font-semibold\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                Date range\n              </p>\n              <button\n                type=\"button\"\n                aria-label=\"Close\"\n                onClick={() => setShowRangeSheet(false)}\n                className=\"flex h-8 w-8 items-center justify-center rounded-full\"\n                style={{ background: 'var(--mb-elevated)' }}\n              >\n                <X\n                  className=\"size-4\"\n                  style={{ color: 'var(--mb-text-secondary)' }}\n                />\n              </button>\n            </div>\n            <div className=\"mt-3 space-y-1\">\n              {dateRanges.map((range) => {\n                const active = range.key === currentRangeKey;\n                return (\n                  <button\n                    key={range.key}\n                    type=\"button\"\n                    onClick={() => {\n                      onSelectDateRange(range.key);\n                      setShowRangeSheet(false);\n                    }}\n                    className=\"flex w-full items-center justify-between rounded-2xl px-3 py-3 text-left text-md font-medium\"\n                    style={{\n                      background: active ? 'var(--mb-elevated)' : 'transparent',\n                      color: active ? 'var(--mb-accent)' : 'var(--mb-text)',\n                    }}\n                  >\n                    {range.label}\n                    {active ? <Check className=\"size-4\" /> : null}\n                  </button>\n                );\n              })}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAiGM,SAQI,KARJ;AAzFN,SAAgB,gBAAgB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,MAAM,qBAAqB;AA8C7B,SAAS,2BAA2B;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO,CAAC,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AAAA,EAClC,YAAY,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAAA,EAC9C,aAAa,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoC;AAClC,QAAM,SAAS,cAAc,MAAM;AACnC,QAAM,MAAM,KAAK,IAAI,GAAG,MAAM,CAAC;AAC/B,QAAM,aACJ,OAAO,SAAS,SAAS,mBAAmB;AAC9C,QAAM,YAAY,OAAO,SAAS,SAAS,aAAa;AACxD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,eAAe,QAAQ,YAAY,UAAU,iBAAiB;AAEpE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,YAAY;AAAA,MACd;AAAA,MAEA;AAAA,6BAAC,YAAO,WAAU,+CAChB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS;AAAA,cACT,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,iBAAiB;AAAA,cAEtC,8BAAC,aAAU,WAAU,UAAS,OAAO,EAAE,OAAO,iBAAiB,GAAG;AAAA;AAAA,UACpE;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,cAEhC;AAAA;AAAA,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAAS;AAAA,cACT,WAAU;AAAA,cACV,OAAO,EAAE,YAAY,iBAAiB;AAAA,cAEtC;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,2BAA2B;AAAA;AAAA,cAC7C;AAAA;AAAA,UACF;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,SAAI,WAAU,QACb;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAM;AAAA,cACN,SAAS,eAAe,MAAM,kBAAkB,IAAI,IAAI;AAAA;AAAA,UAC1D,GACF;AAAA,UAEA,qBAAC,aAAQ,WAAU,QACjB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,gBAEzC;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,gBAEhC;AAAA;AAAA,YACH;AAAA,YACC,QACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,WAAW;AAAA,gBAE3B;AAAA,sCAAC,aAAU,WAAU,WAAU;AAAA,kBAC9B,MAAM,QAAQ,IAAI,MAAM;AAAA,kBACxB,MAAM;AAAA,kBAAM;AAAA;AAAA;AAAA,YACf,IACE;AAAA,aACN;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO;AAAA,gBACL,aAAa;AAAA,gBACb,YAAY;AAAA,cACd;AAAA,cAEA,8BAAC,SAAI,WAAU,6BACZ,eAAK,IAAI,CAAC,GAAG,MACZ;AAAA,gBAAC;AAAA;AAAA,kBAEC,WAAU;AAAA,kBAEV;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAO;AAAA,0BACL,QAAQ,GAAG,KAAK,MAAO,IAAI,MAAO,GAAG,CAAC;AAAA,0BACtC,YACE,MAAM,KAAK,SAAS,IAChB,qBACA;AAAA,wBACR;AAAA;AAAA,oBACF;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,wBAEzC,oBAAU,CAAC,KAAK;AAAA;AAAA,oBACnB;AAAA;AAAA;AAAA,gBAlBK;AAAA,cAmBP,CACD,GACH;AAAA;AAAA,UACF;AAAA,UAEC,WAAW,IAAI,CAAC,UACf,qBAAC,aAA4B,WAAU,QACrC;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,gBAEzC,gBAAM;AAAA;AAAA,YACT;AAAA,YACA,qBAAC,SAAI,WAAU,kBACZ;AAAA,oBAAM,MAAM,IAAI,CAAC,SAChB,qBAAC,SAAqB,WAAU,eAC9B;AAAA,qCAAC,SAAI,WAAU,6CACb;AAAA,sCAAC,UAAK,OAAO,EAAE,OAAO,iBAAiB,GACpC,eAAK,OACR;AAAA,kBACA,qBAAC,UAAK,OAAO,EAAE,OAAO,0BAA0B,GAC7C;AAAA,yBAAK;AAAA,oBAAM;AAAA,oBAAG;AAAA,oBACf,qBAAC,UAAK,OAAO,EAAE,OAAO,iBAAiB,GACpC;AAAA,2BAAK;AAAA,sBAAI;AAAA,uBACZ;AAAA,qBACF;AAAA,mBACF;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,qBAAqB;AAAA,oBAE1C;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAO;AAAA,0BACL,OAAO,GAAG,KAAK,GAAG;AAAA,0BAClB,YAAY;AAAA,wBACd;AAAA;AAAA,oBACF;AAAA;AAAA,gBACF;AAAA,mBAvBQ,KAAK,KAwBf,CACD;AAAA,cACA,MAAM,MAAM,WAAW,IACtB;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,OAAO,0BAA0B;AAAA,kBAC3C;AAAA;AAAA,cAED,IACE;AAAA,eACN;AAAA,eA3CY,MAAM,OA4CpB,CACD;AAAA,UAOA,SAAS,oBAAC,SAAI,WAAU,QAAQ,kBAAO,IAAS;AAAA,WACnD;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,aAAa;AAAA,cACb,YAAY;AAAA,cACZ,gBAAgB;AAAA,YAClB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,YAAY;AAAA,kBACZ,OAAO;AAAA,gBACT;AAAA,gBAEA;AAAA,sCAAC,YAAS,WAAU,UAAS;AAAA,kBAAE;AAAA;AAAA;AAAA,YAEjC;AAAA;AAAA,QACF;AAAA,QAEC,kBAAkB,cAAc,oBAC/B;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,wBAAwB;AAAA,YAC7C,SAAS,MAAM,kBAAkB,KAAK;AAAA,YAEtC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,YAAY;AAAA,kBACZ,aAAa;AAAA,gBACf;AAAA,gBACA,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,gBAElC;AAAA,uCAAC,SAAI,WAAU,qCACb;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,OAAO,EAAE,OAAO,iBAAiB;AAAA,wBAClC;AAAA;AAAA,oBAED;AAAA,oBACA;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,cAAW;AAAA,wBACX,SAAS,MAAM,kBAAkB,KAAK;AAAA,wBACtC,WAAU;AAAA,wBACV,OAAO,EAAE,YAAY,qBAAqB;AAAA,wBAE1C;AAAA,0BAAC;AAAA;AAAA,4BACC,WAAU;AAAA,4BACV,OAAO,EAAE,OAAO,2BAA2B;AAAA;AAAA,wBAC7C;AAAA;AAAA,oBACF;AAAA,qBACF;AAAA,kBACA,oBAAC,SAAI,WAAU,kBACZ,qBAAW,IAAI,CAAC,UAAU;AACzB,0BAAM,SAAS,MAAM,QAAQ;AAC7B,2BACE;AAAA,sBAAC;AAAA;AAAA,wBAEC,MAAK;AAAA,wBACL,SAAS,MAAM;AACb,4CAAkB,MAAM,GAAG;AAC3B,4CAAkB,KAAK;AAAA,wBACzB;AAAA,wBACA,WAAU;AAAA,wBACV,OAAO;AAAA,0BACL,YAAY,SAAS,uBAAuB;AAAA,0BAC5C,OAAO,SAAS,qBAAqB;AAAA,wBACvC;AAAA,wBAEC;AAAA,gCAAM;AAAA,0BACN,SAAS,oBAAC,SAAM,WAAU,UAAS,IAAK;AAAA;AAAA;AAAA,sBAbpC,MAAM;AAAA,oBAcb;AAAA,kBAEJ,CAAC,GACH;AAAA;AAAA;AAAA,YACF;AAAA;AAAA,QACF,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/mobile/screens/attendees-list.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Mobile screen — Attendees list
+ * Visual contract: `AttendeesList` in mobile-redesign-mockups.tsx
+ */
+import React from 'react';
+export interface AttendeeItem {
+    id: string;
+    name: string;
+    initials: string;
+    ticketType: string;
+    checkedIn: boolean;
+    checkInTime?: string;
+    onClick?: () => void;
+}
+interface MobileAttendeesListScreenProps {
+    eventTitle?: string;
+    attendees: AttendeeItem[];
+    totalCount?: number;
+    checkedInCount?: number;
+    searchTerm?: string;
+    onSearchChange?: (value: string) => void;
+    activeFilter?: 'all' | 'checked-in' | 'not-checked-in';
+    onChangeFilter?: (f: 'all' | 'checked-in' | 'not-checked-in') => void;
+    onBack?: () => void;
+}
+export declare function MobileAttendeesListScreen({ eventTitle, attendees, totalCount, checkedInCount, searchTerm, onSearchChange, activeFilter, onChangeFilter, onBack, }: MobileAttendeesListScreenProps): React.JSX.Element;
+export {};