@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/calendar.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Calendar\n *\n * Visual contract: `CalendarMonth` and `CalendarDay` in mobile-redesign-mockups.tsx\n * Route: /dashboard/calendar (mobile)\n */\n\nimport React, { useMemo, useState } from 'react';\nimport Link from 'next/link';\nimport { ArrowLeft, ArrowRight, Plus, RefreshCw } from 'lucide-react';\nimport type { CalendarEventItem } from '@withpotter/lib/api/types';\nimport { Button } from '@withpotter/ui-kit/button';\n\ntype ViewMode = 'month' | 'day';\n\ninterface MobileCalendarScreenProps {\n  events: CalendarEventItem[];\n  loading?: boolean;\n  onCreateBlock?: () => void;\n  onSelectEvent?: (event: CalendarEventItem) => void;\n  /**\n   * When true, shows the \"Sync\" button in the header that links to\n   * `/dashboard/calendar-sync`. Caller should gate this on whether the\n   * tenant has an intent that benefits from calendar sync\n   * (take-bookings / rent-property / event-tickets).\n   */\n  showSyncEntry?: boolean;\n}\n\nconst MONTH_NAMES = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n];\n\nfunction intentForEvent(e: CalendarEventItem): 'sell' | 'book' | 'tickets' {\n  if (e.type === 'block') return 'book';\n  if (e.type === 'synced') return 'book';\n  return 'book';\n}\n\nfunction startOfMonth(d: Date): Date {\n  return new Date(d.getFullYear(), d.getMonth(), 1);\n}\n\nfunction isSameDate(a: Date, b: Date): boolean {\n  return (\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\nfunction formatTime(iso: string): string {\n  return new Date(iso).toLocaleTimeString('en-US', {\n    hour: 'numeric',\n    minute: '2-digit',\n    hour12: true,\n  });\n}\n\nexport function MobileCalendarScreen({\n  events,\n  loading = false,\n  onCreateBlock,\n  onSelectEvent,\n  showSyncEntry = false,\n}: MobileCalendarScreenProps) {\n  const today = useMemo(() => new Date(), []);\n  const [view, setView] = useState<ViewMode>('month');\n  const [cursor, setCursor] = useState<Date>(() => startOfMonth(new Date()));\n  const [selectedDate, setSelectedDate] = useState<Date>(() => new Date());\n\n  const monthDays = useMemo(() => {\n    const firstOfMonth = startOfMonth(cursor);\n    const offset = firstOfMonth.getDay(); // 0 = Sunday\n    const daysInMonth = new Date(\n      cursor.getFullYear(),\n      cursor.getMonth() + 1,\n      0,\n    ).getDate();\n\n    // Build day map\n    const dayMap = new Map<number, CalendarEventItem[]>();\n    for (let i = 1; i <= daysInMonth; i++) dayMap.set(i, []);\n    for (const e of events) {\n      const d = new Date(e.start);\n      if (\n        d.getFullYear() === cursor.getFullYear() &&\n        d.getMonth() === cursor.getMonth()\n      ) {\n        const dayNum = d.getDate();\n        const arr = dayMap.get(dayNum);\n        if (arr) arr.push(e);\n      }\n    }\n\n    return { offset, daysInMonth, dayMap };\n  }, [cursor, events]);\n\n  const dayEvents = useMemo(() => {\n    return events\n      .filter((e) => isSameDate(new Date(e.start), selectedDate))\n      .sort(\n        (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime(),\n      );\n  }, [events, selectedDate]);\n\n  const monthTitle = `${MONTH_NAMES[cursor.getMonth()]}`;\n  const yearTitle = `${cursor.getFullYear()}`;\n\n  const goPrev = () =>\n    setCursor(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1));\n  const goNext = () =>\n    setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1));\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 */}\n      <div className=\"flex h-12 items-center justify-between px-2\">\n        {showSyncEntry ? (\n          <Link\n            href=\"/dashboard/calendar-sync\"\n            aria-label=\"Calendar sync\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n            style={{ background: 'var(--mb-card)' }}\n          >\n            <RefreshCw className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n          </Link>\n        ) : (\n          <span className=\"w-9\" />\n        )}\n        <p\n          className=\"text-lg font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          Calendar\n        </p>\n        <button\n          type=\"button\"\n          onClick={onCreateBlock}\n          aria-label=\"New event\"\n          className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n          style={{\n            background: 'var(--mb-accent)',\n            color: 'var(--mb-accent-fg)',\n          }}\n        >\n          <Plus className=\"size-4\" />\n        </button>\n      </div>\n\n      <div className=\"flex-1 overflow-y-auto px-4 pb-24\">\n        {/* Month switcher */}\n        <div className=\"mt-2 flex items-center justify-between\">\n          <button\n            type=\"button\"\n            onClick={goPrev}\n            aria-label=\"Previous month\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n            style={{ background: 'var(--mb-elevated)' }}\n          >\n            <ArrowLeft className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n          </button>\n          <div className=\"text-center\">\n            <p className=\"text-3xs\" style={{ color: 'var(--mb-text-muted)' }}>\n              {yearTitle}\n            </p>\n            <p\n              className=\"text-lg font-semibold\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {monthTitle}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={goNext}\n            aria-label=\"Next month\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n            style={{ background: 'var(--mb-elevated)' }}\n          >\n            <ArrowRight\n              className=\"size-4\"\n              style={{ color: 'var(--mb-text)' }}\n            />\n          </button>\n        </div>\n\n        {/* Tab strip — Month / Day */}\n        <div\n          className=\"mt-3 flex gap-4 border-b\"\n          style={{ borderColor: 'var(--mb-border)' }}\n        >\n          {(['month', 'day'] as const).map((t) => (\n            <button\n              key={t}\n              type=\"button\"\n              onClick={() => setView(t)}\n              className=\"relative h-10 text-xs font-medium capitalize\"\n              style={{\n                color:\n                  view === t ? 'var(--mb-text)' : 'var(--mb-text-tertiary)',\n              }}\n            >\n              {t}\n              {view === t && (\n                <span\n                  className=\"absolute inset-x-0 -bottom-px h-0.5 rounded-full\"\n                  style={{ background: 'var(--mb-accent)' }}\n                />\n              )}\n            </button>\n          ))}\n        </div>\n\n        {view === 'month' ? (\n          <MonthView\n            cursor={cursor}\n            today={today}\n            selectedDate={selectedDate}\n            offset={monthDays.offset}\n            daysInMonth={monthDays.daysInMonth}\n            dayMap={monthDays.dayMap}\n            onSelectDate={(date) => {\n              setSelectedDate(date);\n              setView('day');\n            }}\n            loading={loading}\n          />\n        ) : (\n          <DayView\n            date={selectedDate}\n            events={dayEvents}\n            onSelectEvent={onSelectEvent}\n            onChangeDate={(d) => setSelectedDate(d)}\n            loading={loading}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Month view\n// ─────────────────────────────────────────────────────────────\n\nfunction MonthView({\n  cursor,\n  today,\n  selectedDate,\n  offset,\n  daysInMonth,\n  dayMap,\n  onSelectDate,\n  loading,\n}: {\n  cursor: Date;\n  today: Date;\n  selectedDate: Date;\n  offset: number;\n  daysInMonth: number;\n  dayMap: Map<number, CalendarEventItem[]>;\n  onSelectDate: (date: Date) => void;\n  loading?: boolean;\n}) {\n  const intensityBg = (count: number, isToday: boolean) => {\n    if (isToday) return 'var(--mb-accent)';\n    if (count === 0) return 'var(--mb-elevated)';\n    if (count === 1)\n      return 'color-mix(in srgb, var(--mb-accent) 10%, transparent)';\n    if (count <= 3)\n      return 'color-mix(in srgb, var(--mb-accent) 22%, transparent)';\n    if (count <= 6)\n      return 'color-mix(in srgb, var(--mb-accent) 38%, transparent)';\n    return 'color-mix(in srgb, var(--mb-accent) 55%, transparent)';\n  };\n\n  const intentDot = (intent: string, isToday: boolean) => {\n    if (isToday) return 'var(--mb-accent-fg)';\n    if (intent === 'sell') return 'var(--mb-accent)';\n    if (intent === 'book') return 'var(--mb-good)';\n    if (intent === 'tickets') return 'var(--mb-warn)';\n    return 'var(--mb-text-muted)';\n  };\n\n  // Counts across the month\n  const totals = useMemo(() => {\n    let sell = 0;\n    let book = 0;\n    let tickets = 0;\n    for (const list of dayMap.values()) {\n      for (const e of list) {\n        const intent = intentForEvent(e);\n        if (intent === 'sell') sell++;\n        else if (intent === 'book') book++;\n        else tickets++;\n      }\n    }\n    return { sell, book, tickets };\n  }, [dayMap]);\n\n  // Today's summary (only when current month is today's month)\n  const isCurrentMonth =\n    today.getFullYear() === cursor.getFullYear() &&\n    today.getMonth() === cursor.getMonth();\n  const todayList = isCurrentMonth ? (dayMap.get(today.getDate()) ?? []) : [];\n\n  const bookingCount = todayList.filter((e) => e.type === 'booking').length;\n  const blockCount = todayList.filter((e) => e.type === 'block').length;\n  const syncedCount = todayList.filter((e) => e.type === 'synced').length;\n\n  return (\n    <>\n      {/* Weekday headers */}\n      <div className=\"mt-3 grid grid-cols-7 gap-1.5 px-0.5\">\n        {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => (\n          <p\n            key={i}\n            className=\"text-center text-3xs font-semibold uppercase\"\n            style={{ color: 'var(--mb-text-muted)' }}\n          >\n            {d}\n          </p>\n        ))}\n      </div>\n\n      {/* Day grid */}\n      <div className=\"mt-2 grid grid-cols-7 gap-1.5\">\n        {Array.from({ length: offset }).map((_, i) => (\n          <div key={`pad-${i}`} className=\"aspect-square rounded-xl\" />\n        ))}\n        {Array.from({ length: daysInMonth }).map((_, idx) => {\n          const dayNum = idx + 1;\n          const date = new Date(\n            cursor.getFullYear(),\n            cursor.getMonth(),\n            dayNum,\n          );\n          const isToday = isSameDate(date, today);\n          const isSelected = isSameDate(date, selectedDate);\n          const dayList = dayMap.get(dayNum) ?? [];\n          const intents = Array.from(\n            new Set(dayList.map((e) => intentForEvent(e))),\n          );\n          const count = dayList.length;\n\n          return (\n            <button\n              key={dayNum}\n              type=\"button\"\n              onClick={() => onSelectDate(date)}\n              className=\"relative flex aspect-square flex-col items-center justify-center rounded-xl\"\n              style={{\n                background: intensityBg(count, isToday),\n                boxShadow:\n                  isSelected && !isToday\n                    ? '0 0 0 1.5px var(--mb-accent)'\n                    : isToday\n                      ? '0 0 0 2px var(--mb-accent)'\n                      : undefined,\n              }}\n            >\n              <span\n                className=\"text-2xs font-semibold tabular-nums\"\n                style={{\n                  color: isToday\n                    ? 'var(--mb-accent-fg)'\n                    : count >= 4\n                      ? 'var(--mb-text)'\n                      : 'var(--mb-text-secondary)',\n                }}\n              >\n                {dayNum}\n              </span>\n              {intents.length > 0 && (\n                <div className=\"absolute bottom-1 flex gap-0.5\">\n                  {intents.slice(0, 3).map((intent) => (\n                    <span\n                      key={intent}\n                      className=\"h-1 w-1 rounded-full\"\n                      style={{ background: intentDot(intent, isToday) }}\n                    />\n                  ))}\n                </div>\n              )}\n            </button>\n          );\n        })}\n      </div>\n\n      {/* Legend */}\n      <div className=\"mt-4 flex flex-wrap items-center gap-3 pb-1\">\n        <LegendDot color=\"var(--mb-accent)\" label={`Sell · ${totals.sell}`} />\n        <LegendDot color=\"var(--mb-good)\" label={`Book · ${totals.book}`} />\n        <LegendDot\n          color=\"var(--mb-warn)\"\n          label={`Tickets · ${totals.tickets}`}\n        />\n      </div>\n\n      {/* Today summary */}\n      {isCurrentMonth && (\n        <>\n          <p\n            className=\"mt-5 text-3xs font-medium\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            Today ·{' '}\n            {today.toLocaleDateString('en-US', {\n              month: 'long',\n              day: 'numeric',\n            })}\n          </p>\n          <div className=\"mt-2 grid grid-cols-3 gap-2\">\n            <SummaryCard label=\"Bookings\" value={bookingCount} />\n            <SummaryCard label=\"Blocks\" value={blockCount} />\n            <SummaryCard label=\"Synced\" value={syncedCount} />\n          </div>\n        </>\n      )}\n\n      {loading && (\n        <p\n          className=\"mt-3 text-center text-2xs\"\n          style={{ color: 'var(--mb-text-tertiary)' }}\n        >\n          Loading events…\n        </p>\n      )}\n    </>\n  );\n}\n\nfunction LegendDot({ color, label }: { color: string; label: string }) {\n  return (\n    <div className=\"flex shrink-0 items-center gap-1.5\">\n      <span className=\"h-2 w-2 rounded-full\" style={{ background: color }} />\n      <span className=\"text-3xs\" style={{ color: 'var(--mb-text-tertiary)' }}>\n        {label}\n      </span>\n    </div>\n  );\n}\n\nfunction SummaryCard({ label, value }: { label: string; value: number }) {\n  return (\n    <div\n      className=\"rounded-2xl border p-4\"\n      style={{\n        borderColor: 'var(--mb-border)',\n        background: 'var(--mb-card)',\n      }}\n    >\n      <p className=\"text-3xs\" style={{ color: 'var(--mb-text-muted)' }}>\n        {label}\n      </p>\n      <p\n        className=\"mt-1 text-title font-semibold tabular-nums\"\n        style={{ color: 'var(--mb-text)' }}\n      >\n        {value}\n      </p>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Day view\n// ─────────────────────────────────────────────────────────────\n\nconst HOURS = [\n  '9 AM',\n  '10 AM',\n  '11 AM',\n  '12 PM',\n  '1 PM',\n  '2 PM',\n  '3 PM',\n  '4 PM',\n  '5 PM',\n  '6 PM',\n  '7 PM',\n  '8 PM',\n];\nconst HOUR_HEIGHT = 56;\nconst FIRST_HOUR = 9;\n\nfunction eventTone(type: CalendarEventItem['type']) {\n  if (type === 'booking') {\n    return {\n      bg: 'color-mix(in srgb, var(--mb-good) 14%, transparent)',\n      border: 'color-mix(in srgb, var(--mb-good) 40%, transparent)',\n      label: 'var(--mb-good)',\n    };\n  }\n  if (type === 'block') {\n    return {\n      bg: 'color-mix(in srgb, var(--mb-bad) 14%, transparent)',\n      border: 'color-mix(in srgb, var(--mb-bad) 40%, transparent)',\n      label: 'var(--mb-bad)',\n    };\n  }\n  return {\n    bg: 'color-mix(in srgb, var(--mb-accent) 14%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-accent) 40%, transparent)',\n    label: 'var(--mb-accent)',\n  };\n}\n\nfunction DayView({\n  date,\n  events,\n  onSelectEvent,\n  onChangeDate,\n  loading,\n}: {\n  date: Date;\n  events: CalendarEventItem[];\n  onSelectEvent?: (event: CalendarEventItem) => void;\n  onChangeDate: (date: Date) => void;\n  loading?: boolean;\n}) {\n  const isToday = isSameDate(date, new Date());\n\n  const positionedEvents = useMemo(() => {\n    return events.map((e) => {\n      const start = new Date(e.start);\n      const end = new Date(e.end);\n      const startHour = start.getHours() + start.getMinutes() / 60;\n      const endHour = end.getHours() + end.getMinutes() / 60;\n      const top = Math.max(0, (startHour - FIRST_HOUR) * HOUR_HEIGHT);\n      const height = Math.max(\n        28,\n        Math.min(\n          (HOURS.length - 0.5) * HOUR_HEIGHT - top,\n          (endHour - Math.max(startHour, FIRST_HOUR)) * HOUR_HEIGHT,\n        ),\n      );\n      return { event: e, top, height };\n    });\n  }, [events]);\n\n  // Now line position\n  const nowLine = useMemo(() => {\n    if (!isToday) return null;\n    const now = new Date();\n    const h = now.getHours() + now.getMinutes() / 60;\n    if (h < FIRST_HOUR || h > FIRST_HOUR + HOURS.length) return null;\n    return {\n      top: (h - FIRST_HOUR) * HOUR_HEIGHT + 16,\n      label: now.toLocaleTimeString('en-US', {\n        hour: 'numeric',\n        minute: '2-digit',\n        hour12: false,\n      }),\n    };\n  }, [isToday]);\n\n  const goPrev = () => {\n    const d = new Date(date);\n    d.setDate(d.getDate() - 1);\n    onChangeDate(d);\n  };\n  const goNext = () => {\n    const d = new Date(date);\n    d.setDate(d.getDate() + 1);\n    onChangeDate(d);\n  };\n\n  // Filter chips\n  const counts = useMemo(() => {\n    const all = events.length;\n    const bookings = events.filter((e) => e.type === 'booking').length;\n    const blocks = events.filter((e) => e.type === 'block').length;\n    const synced = events.filter((e) => e.type === 'synced').length;\n    return { all, bookings, blocks, synced };\n  }, [events]);\n\n  return (\n    <>\n      <div\n        className=\"mt-3 flex items-center justify-between rounded-2xl border p-4\"\n        style={{\n          borderColor: 'var(--mb-border)',\n          background: 'var(--mb-card)',\n        }}\n      >\n        <button\n          type=\"button\"\n          aria-label=\"Previous day\"\n          onClick={goPrev}\n          className=\"flex h-8 w-8 items-center justify-center rounded-full\"\n          style={{ background: 'var(--mb-elevated)' }}\n        >\n          <ArrowLeft className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n        </button>\n        <div className=\"text-center\">\n          <p className=\"text-3xs\" style={{ color: 'var(--mb-text-muted)' }}>\n            {date.toLocaleDateString('en-US', { weekday: 'long' })}\n          </p>\n          <p\n            className=\"text-md font-semibold\"\n            style={{ color: 'var(--mb-text)' }}\n          >\n            {date.toLocaleDateString('en-US', {\n              month: 'short',\n              day: 'numeric',\n            })}\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          aria-label=\"Next day\"\n          onClick={goNext}\n          className=\"flex h-8 w-8 items-center justify-center rounded-full\"\n          style={{ background: 'var(--mb-elevated)' }}\n        >\n          <ArrowRight className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n        </button>\n      </div>\n\n      {/* Filter chips */}\n      <div className=\"mt-3 flex gap-2 overflow-x-auto pb-1\">\n        {[\n          { label: `All · ${counts.all}`, active: true },\n          { label: `Bookings · ${counts.bookings}` },\n          { label: `Blocks · ${counts.blocks}` },\n          { label: `Synced · ${counts.synced}` },\n        ].map((c) => (\n          <span\n            key={c.label}\n            className=\"flex h-8 shrink-0 items-center rounded-full px-3 text-2xs font-medium\"\n            style={{\n              background: c.active\n                ? 'color-mix(in srgb, var(--mb-accent) 16%, transparent)'\n                : 'var(--mb-elevated)',\n              color: c.active ? 'var(--mb-accent)' : 'var(--mb-text-secondary)',\n            }}\n          >\n            {c.label}\n          </span>\n        ))}\n      </div>\n\n      {/* Timeline */}\n      <div className=\"relative mt-3\">\n        <div\n          className=\"relative\"\n          style={{ minHeight: HOURS.length * HOUR_HEIGHT }}\n        >\n          {HOURS.map((h, i) => (\n            <div\n              key={h}\n              className=\"absolute inset-x-0 flex items-start gap-3\"\n              style={{ top: i * HOUR_HEIGHT, height: HOUR_HEIGHT }}\n            >\n              <p\n                className=\"w-12 shrink-0 pt-0 text-3xs font-medium tabular-nums\"\n                style={{ color: 'var(--mb-text-muted)' }}\n              >\n                {h}\n              </p>\n              <div\n                className=\"h-px flex-1\"\n                style={{ background: 'var(--mb-border)', marginTop: 6 }}\n              />\n            </div>\n          ))}\n\n          {nowLine && (\n            <div\n              className=\"absolute inset-x-0 flex items-center gap-2\"\n              style={{ top: nowLine.top, left: 60 }}\n            >\n              <span\n                className=\"h-2 w-2 rounded-full\"\n                style={{\n                  background: 'var(--mb-bad)',\n                  boxShadow:\n                    '0 0 0 3px color-mix(in srgb, var(--mb-bad) 20%, transparent)',\n                }}\n              />\n              <div\n                className=\"h-px flex-1\"\n                style={{ background: 'var(--mb-bad)' }}\n              />\n              <span\n                className=\"text-3xs font-semibold tabular-nums\"\n                style={{ color: 'var(--mb-bad)' }}\n              >\n                {nowLine.label}\n              </span>\n            </div>\n          )}\n\n          {positionedEvents.map(({ event, top, height }) => {\n            const t = eventTone(event.type);\n            return (\n              <Button\n                variant=\"secondary\"\n                size=\"icon\"\n                className=\"absolute text-left\"\n                key={event.id}\n                onClick={() => onSelectEvent?.(event)}\n                style={{\n                  top: top + 8,\n                  left: 60,\n                  right: 0,\n                  height,\n                  background: t.bg,\n                  borderColor: t.border,\n                }}\n              >\n                <div className=\"flex items-center gap-1.5\">\n                  <span\n                    className=\"rounded-full px-1.5 py-0.5 text-3xs font-semibold uppercase tracking-wider\"\n                    style={{ background: t.border, color: t.label }}\n                  >\n                    {event.type}\n                  </span>\n                </div>\n                <p\n                  className=\"mt-1 truncate text-2xs font-semibold\"\n                  style={{ color: 'var(--mb-text)' }}\n                >\n                  {event.title}\n                </p>\n                <p\n                  className=\"truncate text-3xs\"\n                  style={{ color: 'var(--mb-text-tertiary)' }}\n                >\n                  {formatTime(event.start)} – {formatTime(event.end)}\n                </p>\n              </Button>\n            );\n          })}\n        </div>\n\n        {events.length === 0 && !loading && (\n          <p\n            className=\"mt-2 text-center text-xs\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            No events on this day.\n          </p>\n        )}\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/campaigns.d.ts

@@ -0,0 +1,13 @@
+import type { Campaign, CampaignChannel, CampaignStats } from '@withpotter/lib/api/types';
+export type { Campaign, CampaignStats };
+interface MobileCampaignsScreenProps {
+    channel: CampaignChannel;
+    campaigns: Campaign[];
+    stats: CampaignStats | null;
+    loading?: boolean;
+    onBack: () => void;
+    /** Absent when the channel cannot be sent on. The + button goes with it. */
+    onNew?: () => void;
+    onOpen?: (id: string) => void;
+}
+export declare function MobileCampaignsScreen({ channel, campaigns, stats, loading, onBack, onNew, onOpen, }: MobileCampaignsScreenProps): import("react").JSX.Element;

package/dist/mobile/screens/campaigns.js

@@ -0,0 +1,335 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  ArrowLeft,
+  Bell,
+  ChevronRight,
+  Mail,
+  MessageSquare,
+  Plus
+} from "lucide-react";
+import { WhatsAppIcon } from "@withpotter/ui-kit/whatsapp-icon";
+import { Caption } from "@withpotter/components/mobile/primitives";
+const STATUS_LABEL = {
+  draft: "Draft",
+  scheduled: "Scheduled",
+  sent: "Sent",
+  failed: "Failed"
+};
+const STATUS_COLOR = {
+  draft: "var(--mb-text-tertiary)",
+  scheduled: "var(--mb-warn)",
+  sent: "var(--mb-good)",
+  failed: "var(--mb-bad)"
+};
+const WA_GREEN = "#25D366";
+const PRESENTATION = {
+  email: {
+    title: "Email campaigns",
+    icon: Mail,
+    tint: "var(--mb-accent)",
+    measure: "sent",
+    emptyDescription: "Write one message, choose who gets it, and see what it earns.",
+    unsendableDescription: "Campaigns created elsewhere will show up here."
+  },
+  whatsapp: {
+    title: "WhatsApp campaigns",
+    icon: WhatsAppIcon,
+    tint: WA_GREEN,
+    measure: "credits",
+    emptyDescription: "Reach customers where they already reply.",
+    unsendableDescription: "Campaigns created elsewhere will show up here."
+  },
+  sms: {
+    title: "SMS campaigns",
+    icon: MessageSquare,
+    tint: "var(--mb-accent)",
+    measure: "credits",
+    emptyDescription: "Send a text drop to your subscribers.",
+    unsendableDescription: "Sending is not wired for SMS yet, so campaigns created elsewhere will show up here."
+  },
+  push: {
+    title: "Push campaigns",
+    icon: Bell,
+    tint: "var(--mb-accent)",
+    // Free to send: no credits, so the figure is how many went out.
+    measure: "sent",
+    emptyDescription: "Notify customers who allowed it after buying, with one tap to your shop.",
+    unsendableDescription: "Campaigns created elsewhere will show up here."
+  }
+};
+const wash = (tint, pct) => `color-mix(in srgb, ${tint} ${pct}%, transparent)`;
+function MobileCampaignsScreen({
+  channel,
+  campaigns,
+  stats,
+  loading = false,
+  onBack,
+  onNew,
+  onOpen
+}) {
+  const p = PRESENTATION[channel];
+  const credits = stats?.creditsRemaining;
+  const low = p.measure === "credits" && credits != null && credits < 50;
+  const tint = low ? "var(--mb-warn)" : p.tint;
+  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",
+              onClick: onBack,
+              "aria-label": "Back",
+              className: "flex h-9 w-9 items-center justify-center",
+              children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5", style: { color: "var(--mb-text)" } })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: p.title
+            }
+          ),
+          onNew ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onNew,
+              "aria-label": "New campaign",
+              className: "flex h-9 w-9 items-center justify-center rounded-full",
+              style: { background: p.tint },
+              children: /* @__PURE__ */ jsx(Plus, { className: "size-4", style: { color: "var(--mb-accent-fg)" } })
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "w-9" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto px-4 pb-24", children: [
+          /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "mt-6 rounded-3xl border p-4",
+              style: {
+                borderColor: wash(tint, low ? 32 : 28),
+                background: wash(tint, 8)
+              },
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-2xs font-medium", style: { color: tint }, children: p.measure === "sent" ? "All time" : low ? "Credits low" : "Messaging credits" }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-baseline gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-4xl font-bold leading-tight tabular-nums",
+                      style: { color: "var(--mb-text)" },
+                      children: p.measure === "sent" ? stats?.totalSent?.toLocaleString() ?? "0" : credits?.toLocaleString() ?? "\u2014"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("p", { className: "text-xs", style: { color: tint }, children: p.measure === "sent" ? "messages sent" : "credits remaining" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "mt-1 text-xs",
+                    style: { color: "var(--mb-text-secondary)" },
+                    children: p.measure === "sent" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                      campaigns.length,
+                      " campaign",
+                      campaigns.length !== 1 ? "s" : ""
+                    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      stats?.totalDelivered?.toLocaleString() ?? "0",
+                      " delivered \xB7",
+                      " ",
+                      stats?.creditsUsed?.toLocaleString() ?? "0",
+                      " credits used"
+                    ] })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("section", { className: "mt-6", children: [
+            /* @__PURE__ */ jsx(Caption, { children: "Campaigns" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: loading && campaigns.length === 0 ? /* @__PURE__ */ jsx(SkeletonRows, {}) : campaigns.length === 0 ? /* @__PURE__ */ jsx(EmptyState, { presentation: p, onNew }) : campaigns.map((c) => /* @__PURE__ */ jsx(
+              CampaignRow,
+              {
+                campaign: c,
+                presentation: p,
+                onOpen
+              },
+              c.id
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function CampaignRow({
+  campaign: c,
+  presentation: p,
+  onOpen
+}) {
+  const Icon = p.icon;
+  const primary = c.channel === "email" ? c.subject || "Untitled campaign" : c.body.length > 60 ? `${c.body.slice(0, 60)}\u2026` : c.body;
+  const openRate = c.channel === "email" && c.openCount != null && c.sentCount ? c.openCount / c.sentCount : void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onOpen?.(c.id),
+      className: "flex w-full items-center gap-3 rounded-2xl p-3 text-left",
+      style: { background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-xl",
+            style: { background: wash(p.tint, 12) },
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4", style: { color: p.tint } })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "truncate text-md font-medium",
+              style: { color: "var(--mb-text)" },
+              children: primary
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-2xs font-medium",
+                style: { color: STATUS_COLOR[c.status] },
+                children: STATUS_LABEL[c.status]
+              }
+            ),
+            c.sentCount != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-border)" }, children: "\xB7" }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "text-2xs",
+                  style: { color: "var(--mb-text-secondary)" },
+                  children: [
+                    c.sentCount.toLocaleString(),
+                    " sent"
+                  ]
+                }
+              )
+            ] }),
+            openRate != null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-border)" }, children: "\xB7" }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: "text-2xs",
+                  style: { color: "var(--mb-text-secondary)" },
+                  children: [
+                    (openRate * 100).toFixed(0),
+                    "% open"
+                  ]
+                }
+              )
+            ] }) : c.audienceLabel && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "var(--mb-border)" }, children: "\xB7" }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "truncate text-2xs",
+                  style: { color: "var(--mb-text-secondary)" },
+                  children: c.audienceLabel
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          ChevronRight,
+          {
+            className: "size-4 shrink-0",
+            style: { color: "var(--mb-text-tertiary)" }
+          }
+        )
+      ]
+    }
+  );
+}
+function EmptyState({
+  presentation: p,
+  onNew
+}) {
+  const Icon = p.icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col items-center gap-3 rounded-3xl p-8 text-center",
+      style: { background: "var(--mb-card)" },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex h-12 w-12 items-center justify-center rounded-2xl",
+            style: { background: wash(p.tint, 12) },
+            children: /* @__PURE__ */ jsx(Icon, { className: "h-6 w-6", style: { color: p.tint } })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-lg font-semibold",
+              style: { color: "var(--mb-text)" },
+              children: "No campaigns yet"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-1 text-sm",
+              style: { color: "var(--mb-text-secondary)" },
+              children: onNew ? p.emptyDescription : p.unsendableDescription
+            }
+          )
+        ] }),
+        onNew && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onNew,
+            className: "h-10 rounded-xl px-5 text-sm font-semibold",
+            style: {
+              background: p.tint,
+              color: "var(--mb-accent-fg)"
+            },
+            children: "Create campaign"
+          }
+        )
+      ]
+    }
+  );
+}
+function SkeletonRows() {
+  return /* @__PURE__ */ jsx(Fragment, { children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "h-[62px] animate-pulse rounded-2xl",
+      style: { background: "var(--mb-card)" }
+    },
+    i
+  )) });
+}
+export {
+  MobileCampaignsScreen
+};
+//# sourceMappingURL=campaigns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/campaigns.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Campaigns\n * Route: /dashboard/marketing/campaigns?channel=… (mobile)\n *\n * One screen for every channel. There were three — email, SMS and WhatsApp —\n * running to 1,146 lines between them and ~90% identical: three copies of the\n * status label map, the status colour map, the header, the skeleton, the empty\n * state and the row. Desktop stopped forking its campaign list by channel for\n * the same reason; this is that change on the phone.\n *\n * What genuinely differs is kept and named: the tint (WhatsApp wears its own\n * green, the rule `WhatsAppIcon` exists for), the headline figure (email counts\n * sends, the messaging channels count credits), what a row leads with (email\n * has a subject; the others have a body), and the third measure on the row\n * (email reports opens, the others report who it went to).\n *\n * Deleted with them: `WhatsAppComposeSheet`, 287 lines of a second, worse\n * composer that no file imported. Composing goes to the one composer.\n */\n\nimport {\n  ArrowLeft,\n  Bell,\n  ChevronRight,\n  Mail,\n  MessageSquare,\n  Plus,\n} from 'lucide-react';\nimport type { LucideIcon } from 'lucide-react';\nimport { WhatsAppIcon } from '@withpotter/ui-kit/whatsapp-icon';\nimport { Caption } from '@withpotter/components/mobile/primitives';\nimport type { Campaign, CampaignChannel, CampaignStats } from '@withpotter/lib/api/types';\n\nexport type { Campaign, CampaignStats };\n\ninterface MobileCampaignsScreenProps {\n  channel: CampaignChannel;\n  campaigns: Campaign[];\n  stats: CampaignStats | null;\n  loading?: boolean;\n  onBack: () => void;\n  /** Absent when the channel cannot be sent on. The + button goes with it. */\n  onNew?: () => void;\n  onOpen?: (id: string) => void;\n}\n\nconst STATUS_LABEL: Record<Campaign['status'], string> = {\n  draft: 'Draft',\n  scheduled: 'Scheduled',\n  sent: 'Sent',\n  failed: 'Failed',\n};\n\nconst STATUS_COLOR: Record<Campaign['status'], string> = {\n  draft: 'var(--mb-text-tertiary)',\n  scheduled: 'var(--mb-warn)',\n  sent: 'var(--mb-good)',\n  failed: 'var(--mb-bad)',\n};\n\n/** WhatsApp green. The one channel with a colour of its own. */\nconst WA_GREEN = '#25D366';\n\ninterface ChannelPresentation {\n  title: string;\n  icon: LucideIcon | typeof WhatsAppIcon;\n  /** The accent this channel is drawn in, as a CSS colour. */\n  tint: string;\n  /** Credits, or sends. The two headline figures this screen knows how to draw. */\n  measure: 'credits' | 'sent';\n  emptyDescription: string;\n  /** Shown instead when the channel cannot be sent on at all. */\n  unsendableDescription: string;\n}\n\nconst PRESENTATION: Record<CampaignChannel, ChannelPresentation> = {\n  email: {\n    title: 'Email campaigns',\n    icon: Mail,\n    tint: 'var(--mb-accent)',\n    measure: 'sent',\n    emptyDescription:\n      'Write one message, choose who gets it, and see what it earns.',\n    unsendableDescription: 'Campaigns created elsewhere will show up here.',\n  },\n  whatsapp: {\n    title: 'WhatsApp campaigns',\n    icon: WhatsAppIcon,\n    tint: WA_GREEN,\n    measure: 'credits',\n    emptyDescription: 'Reach customers where they already reply.',\n    unsendableDescription: 'Campaigns created elsewhere will show up here.',\n  },\n  sms: {\n    title: 'SMS campaigns',\n    icon: MessageSquare,\n    tint: 'var(--mb-accent)',\n    measure: 'credits',\n    emptyDescription: 'Send a text drop to your subscribers.',\n    unsendableDescription:\n      'Sending is not wired for SMS yet, so campaigns created elsewhere will show up here.',\n  },\n  push: {\n    title: 'Push campaigns',\n    icon: Bell,\n    tint: 'var(--mb-accent)',\n    // Free to send: no credits, so the figure is how many went out.\n    measure: 'sent',\n    emptyDescription:\n      'Notify customers who allowed it after buying, with one tap to your shop.',\n    unsendableDescription: 'Campaigns created elsewhere will show up here.',\n  },\n};\n\n/** `color-mix` against the channel tint, which is a var for two of the three. */\nconst wash = (tint: string, pct: number) =>\n  `color-mix(in srgb, ${tint} ${pct}%, transparent)`;\n\nexport function MobileCampaignsScreen({\n  channel,\n  campaigns,\n  stats,\n  loading = false,\n  onBack,\n  onNew,\n  onOpen,\n}: MobileCampaignsScreenProps) {\n  const p = PRESENTATION[channel];\n  const credits = stats?.creditsRemaining;\n  // Low enough to act on before the next send fails, which is the only reason\n  // this figure is on screen.\n  const low = p.measure === 'credits' && credits != null && credits < 50;\n  const tint = low ? 'var(--mb-warn)' : p.tint;\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          onClick={onBack}\n          aria-label=\"Back\"\n          className=\"flex h-9 w-9 items-center justify-center\"\n        >\n          <ArrowLeft className=\"size-5\" style={{ color: 'var(--mb-text)' }} />\n        </button>\n        <p\n          className=\"text-lg font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {p.title}\n        </p>\n        {onNew ? (\n          <button\n            type=\"button\"\n            onClick={onNew}\n            aria-label=\"New campaign\"\n            className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n            style={{ background: p.tint }}\n          >\n            <Plus className=\"size-4\" style={{ color: 'var(--mb-accent-fg)' }} />\n          </button>\n        ) : (\n          <div className=\"w-9\" />\n        )}\n      </header>\n\n      <div className=\"flex-1 overflow-y-auto px-4 pb-24\">\n        <section\n          className=\"mt-6 rounded-3xl border p-4\"\n          style={{\n            borderColor: wash(tint, low ? 32 : 28),\n            background: wash(tint, 8),\n          }}\n        >\n          <p className=\"text-2xs font-medium\" style={{ color: tint }}>\n            {p.measure === 'sent'\n              ? 'All time'\n              : low\n                ? 'Credits low'\n                : 'Messaging credits'}\n          </p>\n          <div className=\"mt-2 flex items-baseline gap-3\">\n            <p\n              className=\"text-4xl font-bold leading-tight tabular-nums\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {p.measure === 'sent'\n                ? (stats?.totalSent?.toLocaleString() ?? '0')\n                : (credits?.toLocaleString() ?? '—')}\n            </p>\n            <p className=\"text-xs\" style={{ color: tint }}>\n              {p.measure === 'sent' ? 'messages sent' : 'credits remaining'}\n            </p>\n          </div>\n          <p\n            className=\"mt-1 text-xs\"\n            style={{ color: 'var(--mb-text-secondary)' }}\n          >\n            {p.measure === 'sent' ? (\n              <>\n                {campaigns.length} campaign{campaigns.length !== 1 ? 's' : ''}\n              </>\n            ) : (\n              <>\n                {stats?.totalDelivered?.toLocaleString() ?? '0'} delivered ·{' '}\n                {stats?.creditsUsed?.toLocaleString() ?? '0'} credits used\n              </>\n            )}\n          </p>\n        </section>\n\n        <section className=\"mt-6\">\n          <Caption>Campaigns</Caption>\n          <div className=\"mt-2 space-y-2\">\n            {loading && campaigns.length === 0 ? (\n              <SkeletonRows />\n            ) : campaigns.length === 0 ? (\n              <EmptyState presentation={p} onNew={onNew} />\n            ) : (\n              campaigns.map((c) => (\n                <CampaignRow\n                  key={c.id}\n                  campaign={c}\n                  presentation={p}\n                  onOpen={onOpen}\n                />\n              ))\n            )}\n          </div>\n        </section>\n      </div>\n    </div>\n  );\n}\n\nfunction CampaignRow({\n  campaign: c,\n  presentation: p,\n  onOpen,\n}: {\n  campaign: Campaign;\n  presentation: ChannelPresentation;\n  onOpen?: (id: string) => void;\n}) {\n  const Icon = p.icon;\n  // Email leads with the subject line, which is the thing the recipient sees\n  // first. The messaging channels have no subject, so the message is the line.\n  const primary =\n    c.channel === 'email'\n      ? c.subject || 'Untitled campaign'\n      : c.body.length > 60\n        ? `${c.body.slice(0, 60)}…`\n        : c.body;\n  const openRate =\n    c.channel === 'email' && c.openCount != null && c.sentCount\n      ? c.openCount / c.sentCount\n      : undefined;\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onOpen?.(c.id)}\n      className=\"flex w-full items-center gap-3 rounded-2xl p-3 text-left\"\n      style={{ background: 'var(--mb-card)' }}\n    >\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-xl\"\n        style={{ background: wash(p.tint, 12) }}\n      >\n        <Icon className=\"h-4 w-4\" style={{ color: p.tint }} />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-md font-medium\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {primary}\n        </p>\n        <div className=\"mt-0.5 flex items-center gap-2\">\n          <span\n            className=\"text-2xs font-medium\"\n            style={{ color: STATUS_COLOR[c.status] }}\n          >\n            {STATUS_LABEL[c.status]}\n          </span>\n          {c.sentCount != null && (\n            <>\n              <span style={{ color: 'var(--mb-border)' }}>·</span>\n              <span\n                className=\"text-2xs\"\n                style={{ color: 'var(--mb-text-secondary)' }}\n              >\n                {c.sentCount.toLocaleString()} sent\n              </span>\n            </>\n          )}\n          {/* Opens where they are counted, and who it went to where they are\n              not. Only email reports opens — the Resend webhook writes those\n              counters — so the other channels carry the audience instead of a\n              measure that would always be blank. */}\n          {openRate != null ? (\n            <>\n              <span style={{ color: 'var(--mb-border)' }}>·</span>\n              <span\n                className=\"text-2xs\"\n                style={{ color: 'var(--mb-text-secondary)' }}\n              >\n                {(openRate * 100).toFixed(0)}% open\n              </span>\n            </>\n          ) : (\n            c.audienceLabel && (\n              <>\n                <span style={{ color: 'var(--mb-border)' }}>·</span>\n                <span\n                  className=\"truncate text-2xs\"\n                  style={{ color: 'var(--mb-text-secondary)' }}\n                >\n                  {c.audienceLabel}\n                </span>\n              </>\n            )\n          )}\n        </div>\n      </div>\n      <ChevronRight\n        className=\"size-4 shrink-0\"\n        style={{ color: 'var(--mb-text-tertiary)' }}\n      />\n    </button>\n  );\n}\n\nfunction EmptyState({\n  presentation: p,\n  onNew,\n}: {\n  presentation: ChannelPresentation;\n  onNew?: () => void;\n}) {\n  const Icon = p.icon;\n  return (\n    <div\n      className=\"flex flex-col items-center gap-3 rounded-3xl p-8 text-center\"\n      style={{ background: 'var(--mb-card)' }}\n    >\n      <div\n        className=\"flex h-12 w-12 items-center justify-center rounded-2xl\"\n        style={{ background: wash(p.tint, 12) }}\n      >\n        <Icon className=\"h-6 w-6\" style={{ color: p.tint }} />\n      </div>\n      <div>\n        <p\n          className=\"text-lg font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          No campaigns yet\n        </p>\n        <p\n          className=\"mt-1 text-sm\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        >\n          {onNew ? p.emptyDescription : p.unsendableDescription}\n        </p>\n      </div>\n      {/* No button where there is nothing to make. A channel that cannot send\n          offering \"Create campaign\" is an invitation into a dead end. */}\n      {onNew && (\n        <button\n          type=\"button\"\n          onClick={onNew}\n          className=\"h-10 rounded-xl px-5 text-sm font-semibold\"\n          style={{\n            background: p.tint,\n            color: 'var(--mb-accent-fg)',\n          }}\n        >\n          Create campaign\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction SkeletonRows() {\n  return (\n    <>\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className=\"h-[62px] animate-pulse rounded-2xl\"\n          style={{ background: 'var(--mb-card)' }}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/catalog-rows.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The cards, rows and states the Catalog screen draws.
+ *
+ * Split out of `catalog.tsx` under the 500-line rule, on the same seam as
+ * `manage-rows.tsx`: the screen is a frame — the title, the search, the
+ * primary action, the two sections — and this is what goes inside it.
+ */
+import React from 'react';
+import type { InventoryProduct } from '@withpotter/lib/api/types';
+import type { CollectionRef } from '@withpotter/pages-commerce/dashboard/(commerce)/catalog/_hooks';
+export declare function Caption({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function DraftCard({ product, memberLabels, }: {
+    product: InventoryProduct;
+    memberLabels: Readonly<Record<string, string>>;
+}): React.JSX.Element;
+export declare function ProductRow({ product, formatCurrency, memberLabels, sold, inCollections, onSoldOut, onRestock, }: {
+    product: InventoryProduct;
+    formatCurrency: (n: number, currency?: string) => string;
+    memberLabels: Readonly<Record<string, string>>;
+    sold: {
+        text: string;
+        cold: boolean;
+    } | null;
+    inCollections: CollectionRef[];
+    /** Take it off sale from the list. Absent when stock is not tracked. */
+    onSoldOut?: () => void;
+    /** Put a single one back, for the correction after a mis-swipe. */
+    onRestock?: () => void;
+}): React.JSX.Element;
+export declare function ListSkeleton(): React.JSX.Element;
+export declare function EmptyPublished({ itemPlural, itemSingular, newItemHref, }: {
+    itemPlural: string;
+    itemSingular: string;
+    newItemHref: string;
+}): React.JSX.Element;