@withpotter/components 0.13.0-next.101

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/billing.tsx"],"sourcesContent":["'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { MobileScreenFrame } from '@withpotter/components/mobile/screen-frame-host';\n\n/**\n * Mobile screen — Billing hub\n *\n * Visual contract: `BillingHub` in mobile-redesign-mockups.tsx\n * Route: /dashboard/settings/billing (mobile)\n */\n\nimport React from 'react';\nimport { pickPlanPrice } from '@withpotter/lib/plan-price';\nimport {\n  BOX_EMAIL_ONLY,\n  phoneChannelsLabel,\n} from '@withpotter/lib/box-channels';\nimport {\n  ChevronRight,\n  CreditCard,\n  Mail,\n  MessageCircle,\n  Percent,\n  Receipt,\n  Star,\n  Wallet,\n} from 'lucide-react';\nimport type {\n  BillingPlan,\n  Subscription,\n  PaymentMethod,\n  MessagingCreditsInfo,\n  EmailCreditsInfo,\n} from '@withpotter/pages-core/dashboard/settings/billing/_components';\n\n/**\n * The screens this drawer can send you to, named as the billing page's mobile\n * router names them.\n *\n * It used to keep its own list, and the two drifted: this file emitted\n * `subscription` and `history` where the page renders `plan` and `usage`, so two\n * of the seven rows led nowhere. Exported, and consumed by the page's own state,\n * so a name can only be wrong in one place.\n */\nexport type MobileBillingScreenKey =\n  | 'overview'\n  | 'plan'\n  | 'messaging'\n  | 'email'\n  | 'invoices'\n  | 'usage'\n  | 'payment';\n\ninterface MobileBillingScreenProps {\n  subscription: Subscription | null | undefined;\n  plans?: BillingPlan[];\n  paymentMethods?: PaymentMethod[];\n  invoiceCount?: number;\n  messagingCredits: MessagingCreditsInfo | null | undefined;\n  emailCredits: EmailCreditsInfo | null | undefined;\n  formatCurrency: (n: number) => string;\n  onSelectTab: (tab: MobileBillingScreenKey) => void;\n  onTopUpMessaging?: () => void;\n  onManagePlan?: () => void;\n}\n\nexport function MobileBillingScreen({\n  subscription,\n  paymentMethods,\n  invoiceCount,\n  messagingCredits,\n  emailCredits,\n  formatCurrency,\n  onSelectTab,\n  onTopUpMessaging,\n  onManagePlan,\n}: MobileBillingScreenProps) {\n  const router = useRouter();\n  const plan = subscription?.plan;\n  const planPrice = plan ? (pickPlanPrice(plan.prices)?.amount ?? 0) : 0;\n  const status = subscription?.status ?? 'inactive';\n  const renewsAt = subscription?.currentPeriod?.end ?? null;\n  const defaultPM =\n    paymentMethods?.find((m) => m.isDefault) ?? paymentMethods?.[0];\n\n  // Messaging credits pay for SMS and WhatsApp; an email-only box has neither.\n  const totalCredits =\n    (BOX_EMAIL_ONLY ? 0 : (messagingCredits?.balance ?? 0)) +\n    (emailCredits?.balance ?? 0);\n\n  return (\n    /* The frame owns the app row, the sheet, the title and the tab bar. Every\n       native screen used to draw all four itself — the same root div, the same\n       `env(safe-area-inset-top)`, the same title, the same `<BottomTabBar/>`,\n       thirteen times and already disagreeing on padding and title size. */\n    <MobileScreenFrame title={'Billing'}>\n      {/* Plan card */}\n      <section\n        className=\"mt-6 rounded-3xl border p-4\"\n        style={{\n          borderColor: 'color-mix(in srgb, var(--mb-accent) 28%, transparent)',\n          background: 'color-mix(in srgb, var(--mb-accent) 8%, transparent)',\n        }}\n      >\n        <div className=\"flex items-start justify-between gap-3\">\n          <div className=\"min-w-0\">\n            <p\n              className=\"text-3xs font-medium\"\n              style={{ color: 'var(--mb-accent)' }}\n            >\n              {plan?.name ?? 'No active plan'}\n            </p>\n            <p\n              className=\"mt-1 text-4xl font-bold leading-tight tabular-nums\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {plan ? formatCurrency(planPrice) : '—'}\n            </p>\n            <p\n              className=\"mt-1 text-xs\"\n              style={{ color: 'var(--mb-text-secondary)' }}\n            >\n              {renewsAt\n                ? `Renews ${new Date(renewsAt).toLocaleDateString()}`\n                : 'No renewal date'}\n              {defaultPM?.card\n                ? ` · ${defaultPM.card.brand} ending ${defaultPM.card.last4}`\n                : ''}\n            </p>\n          </div>\n          <StatusPill status={status} />\n        </div>\n        <button\n          type=\"button\"\n          onClick={onManagePlan ?? (() => onSelectTab('plan'))}\n          className=\"mt-4 flex h-11 w-full items-center justify-center gap-2 rounded-2xl text-sm font-semibold\"\n          style={{\n            background: 'var(--mb-accent)',\n            color: 'var(--mb-accent-fg)',\n          }}\n        >\n          Manage plan\n        </button>\n      </section>\n\n      {/* Credits card */}\n      <section\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 items-center justify-between\">\n          <div>\n            <p\n              className=\"text-2xs\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              Credits available\n            </p>\n            <p\n              className=\"mt-1 text-3xl font-bold leading-tight tabular-nums\"\n              style={{ color: 'var(--mb-text)' }}\n            >\n              {totalCredits.toLocaleString()}\n            </p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={\n              BOX_EMAIL_ONLY\n                ? () => onSelectTab('email')\n                : (onTopUpMessaging ?? (() => onSelectTab('messaging')))\n            }\n            className=\"rounded-full px-3 py-1.5 text-2xs font-semibold\"\n            style={{\n              background:\n                'color-mix(in srgb, var(--mb-accent) 15%, transparent)',\n              color: 'var(--mb-accent)',\n            }}\n          >\n            Top up\n          </button>\n        </div>\n        <div className=\"mt-4 space-y-3\">\n          <CreditMeter\n            label=\"Email\"\n            info={emailCredits}\n            color=\"var(--mb-accent)\"\n          />\n          {/* Named for the phone channels the box still has; none, no meter. */}\n          {phoneChannelsLabel() && (\n            <CreditMeter\n              label={phoneChannelsLabel()!}\n              info={messagingCredits}\n              color=\"var(--mb-warn)\"\n            />\n          )}\n        </div>\n      </section>\n\n      {/* Tools */}\n      <section className=\"mt-6\">\n        <Caption>Billing tools</Caption>\n        <div className=\"mt-2 space-y-2\">\n          <ToolRow\n            icon={Star}\n            label=\"Plan\"\n            hint={plan?.name ?? 'Choose a plan'}\n            onClick={() => onSelectTab('plan')}\n          />\n          {!BOX_EMAIL_ONLY && (\n            <ToolRow\n              icon={MessageCircle}\n              label=\"Messaging credits\"\n              hint={`${(messagingCredits?.balance ?? 0).toLocaleString()} available`}\n              onClick={() => onSelectTab('messaging')}\n            />\n          )}\n          <ToolRow\n            icon={Mail}\n            label=\"Email credits\"\n            hint={`${(emailCredits?.balance ?? 0).toLocaleString()} available`}\n            onClick={() => onSelectTab('email')}\n          />\n          <ToolRow\n            icon={Receipt}\n            label=\"Statements\"\n            hint={`${invoiceCount ?? 0} document${invoiceCount === 1 ? '' : 's'}`}\n            onClick={() => onSelectTab('invoices')}\n          />\n          <ToolRow\n            icon={CreditCard}\n            label=\"Payment method\"\n            hint={\n              defaultPM?.card\n                ? `${defaultPM.card.brand} ending ${defaultPM.card.last4}`\n                : 'Add a card'\n            }\n            onClick={() => onSelectTab('payment')}\n          />\n          <ToolRow\n            icon={Percent}\n            label=\"Rates & fees\"\n            hint=\"Policy, preview, ledger\"\n            // Rates live on the Payments hub now — what Box charges per\n            // transaction belongs beside the money it comes out of, not in\n            // the billing drawer.\n            onClick={() => router.push('/dashboard/payments')}\n          />\n          <ToolRow\n            icon={Wallet}\n            label=\"Usage history\"\n            hint=\"Past activity\"\n            onClick={() => onSelectTab('usage')}\n          />\n        </div>\n      </section>\n    </MobileScreenFrame>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n\nfunction Caption({ children }: { children: React.ReactNode }) {\n  return (\n    <p\n      className=\"text-3xs font-medium\"\n      style={{ color: 'var(--mb-text-tertiary)' }}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction StatusPill({ status }: { status: string }) {\n  const isActive = /active|trial/i.test(status);\n  const isCancelled = /cancel/i.test(status);\n  const color = isActive\n    ? 'var(--mb-good)'\n    : isCancelled\n      ? 'var(--mb-warn)'\n      : 'var(--mb-text-tertiary)';\n  const bg = isActive\n    ? 'color-mix(in srgb, var(--mb-good) 12%, transparent)'\n    : isCancelled\n      ? 'color-mix(in srgb, var(--mb-warn) 12%, transparent)'\n      : 'var(--mb-elevated)';\n  const border = isActive\n    ? 'color-mix(in srgb, var(--mb-good) 36%, transparent)'\n    : isCancelled\n      ? 'color-mix(in srgb, var(--mb-warn) 36%, transparent)'\n      : 'var(--mb-border)';\n  return (\n    <span\n      className=\"rounded-full border px-2.5 py-1 text-3xs font-semibold capitalize\"\n      style={{ borderColor: border, background: bg, color }}\n    >\n      {status || 'inactive'}\n    </span>\n  );\n}\n\nfunction CreditMeter({\n  label,\n  info,\n  color,\n}: {\n  label: string;\n  info: MessagingCreditsInfo | EmailCreditsInfo | null | undefined;\n  color: string;\n}) {\n  const balance = info?.balance ?? 0;\n  const allowance = info?.monthlyAllowance ?? 0;\n  const denom = Math.max(allowance, balance, 1);\n  const pct = Math.max(0, Math.min(100, Math.round((balance / denom) * 100)));\n  return (\n    <div>\n      <div className=\"flex items-center justify-between text-2xs\">\n        <span style={{ color: 'var(--mb-text-secondary)' }}>{label}</span>\n        <span\n          className=\"tabular-nums\"\n          style={{ color: 'var(--mb-text)', fontWeight: 600 }}\n        >\n          {balance.toLocaleString()}\n        </span>\n      </div>\n      <div\n        className=\"mt-1.5 h-1.5 w-full overflow-hidden rounded-full\"\n        style={{ background: 'var(--mb-elevated)' }}\n      >\n        <div style={{ width: `${pct}%`, background: color, height: '100%' }} />\n      </div>\n    </div>\n  );\n}\n\nfunction ToolRow({\n  icon: Icon,\n  label,\n  hint,\n  onClick,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  hint?: string;\n  onClick?: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className=\"flex w-full items-center gap-3 rounded-2xl border p-4 text-left\"\n      style={{\n        borderColor: 'var(--mb-border)',\n        background: 'var(--mb-card)',\n        minHeight: 60,\n      }}\n    >\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-xl\"\n        style={{ background: 'var(--mb-elevated)' }}\n      >\n        <Icon\n          className=\"h-4 w-4\"\n          style={{ color: 'var(--mb-text-secondary)' }}\n        />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p\n          className=\"truncate text-sm font-medium\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {label}\n        </p>\n        {hint ? (\n          <p\n            className=\"mt-0.5 truncate text-2xs\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            {hint}\n          </p>\n        ) : null}\n      </div>\n      <ChevronRight\n        className=\"size-4\"\n        style={{ color: 'var(--mb-text-muted)' }}\n      />\n    </button>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/blog-editor.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Mobile screen — Blog editor (long-form, Tiptap edition)
+ *
+ * Used as the mobile branch inside BlogEditorPage. Mounts the same Tiptap
+ * editor as the desktop view and renders mobile-tuned chrome (header,
+ * sticky bottom toolbar, sticky CTA, settings bottom sheet).
+ */
+import React, { type RefObject } from 'react';
+import type { Editor } from '@tiptap/react';
+import type { BlogEditorState, UploadTarget } from '@withpotter/pages-content/dashboard/(content)/blog/_components/editor/types';
+export interface MobileBlogEditorScreenProps {
+    mode: 'create' | 'edit';
+    form: BlogEditorState;
+    setField: <K extends keyof BlogEditorState>(key: K, value: BlogEditorState[K]) => void;
+    editor: Editor | null;
+    onEditorReady: (editor: Editor) => void;
+    onEditorUpdate: (html: string) => void;
+    onUploadInline: (file: File) => Promise<string>;
+    onUploadCover: (file: File) => Promise<void>;
+    onSave: (status: 'draft' | 'published') => Promise<void> | void;
+    saving: boolean;
+    uploading: boolean;
+    uploadTarget: UploadTarget | null;
+    error?: string | null;
+    wordCount: number;
+    readTime: number;
+    onBack: () => void;
+}
+export declare function MobileBlogEditorScreen({ mode, form, setField, editor, onEditorReady, onEditorUpdate, onUploadInline, onUploadCover, onSave, saving, uploading, uploadTarget, error, wordCount, readTime, onBack, }: MobileBlogEditorScreenProps): React.JSX.Element;
+export type { RefObject };

package/dist/mobile/screens/blog-editor.js

@@ -0,0 +1,462 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import {
+  ArrowLeft,
+  Bold,
+  Italic,
+  Heading2,
+  List,
+  Link as LinkIcon,
+  Image as ImageIcon,
+  Camera,
+  X,
+  Settings2,
+  Loader2
+} from "lucide-react";
+import {
+  BottomSheet,
+  StickyCtaBar,
+  TextField,
+  Toggle,
+  stickyCtaScrollPadding
+} from "@withpotter/components/mobile/primitives";
+import { BlogTiptapEditor } from "@withpotter/pages-content/dashboard/(content)/blog/_components/editor/BlogTiptapEditor";
+import { FileInput, AutoGrowTextarea } from "@withpotter/ui-kit";
+function MobileBlogEditorScreen({
+  mode,
+  form,
+  setField,
+  editor,
+  onEditorReady,
+  onEditorUpdate,
+  onUploadInline,
+  onUploadCover,
+  onSave,
+  saving,
+  uploading,
+  uploadTarget,
+  error,
+  wordCount,
+  readTime,
+  onBack
+}) {
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const coverInputRef = React.useRef(null);
+  const inlineInputRef = React.useRef(null);
+  const handleCoverFile = async ([file]) => {
+    await onUploadCover(file);
+  };
+  const handleInlineFile = async ([file]) => {
+    if (!editor) return;
+    try {
+      const url = await onUploadInline(file);
+      editor.chain().focus().setImage({ src: url }).createParagraphNear().run();
+    } catch {
+    }
+  };
+  const promptLink = () => {
+    if (!editor) return;
+    const current = editor.getAttributes("link").href;
+    const next = window.prompt("Link URL", current ?? "https://");
+    if (next === null) return;
+    if (!next.trim()) {
+      editor.chain().focus().unsetLink().run();
+      return;
+    }
+    const href = /^https?:\/\//i.test(next) ? next : `https://${next}`;
+    editor.chain().focus().extendMarkRange("link").setLink({ href }).run();
+  };
+  const headerLabel = mode === "edit" ? "Edit post" : "New post";
+  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: "sticky top-0 z-20 flex h-14 items-center justify-between gap-2 px-3",
+            style: {
+              background: "color-mix(in srgb, var(--mb-surface) 95%, transparent)",
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              borderBottom: "1px solid var(--mb-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onBack,
+                  "aria-label": "Back",
+                  className: "flex h-9 w-9 items-center justify-center rounded-full",
+                  style: { background: "var(--mb-elevated)" },
+                  children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4", style: { color: "var(--mb-text)" } })
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-3xs", style: { color: "var(--mb-text-muted)" }, children: headerLabel }),
+                /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: "truncate text-xs font-medium",
+                    style: { color: "var(--mb-text-secondary)" },
+                    children: form.title || "Untitled"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSettingsOpen(true),
+                  "aria-label": "Post settings",
+                  className: "flex h-9 w-9 items-center justify-center rounded-full",
+                  style: { background: "var(--mb-elevated)" },
+                  children: /* @__PURE__ */ jsx(Settings2, { className: "size-4", style: { color: "var(--mb-text)" } })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            ref: coverInputRef,
+            accept: "image/*",
+            onFiles: handleCoverFile
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FileInput,
+          {
+            ref: inlineInputRef,
+            accept: "image/*",
+            onFiles: handleInlineFile
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex-1 px-4 pt-6",
+            style: { paddingBottom: stickyCtaScrollPadding(false) },
+            children: [
+              error && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "mb-3 rounded-2xl border p-4 text-sm",
+                  style: {
+                    borderColor: "color-mix(in srgb, var(--mb-bad) 25%, transparent)",
+                    background: "color-mix(in srgb, var(--mb-bad) 6%, transparent)",
+                    color: "var(--mb-bad)"
+                  },
+                  children: error
+                }
+              ),
+              form.coverImage ? /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "relative mb-4 overflow-hidden rounded-2xl",
+                  style: { aspectRatio: "16/9", background: "var(--mb-elevated)" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: form.coverImage,
+                        alt: "",
+                        className: "h-full w-full object-cover"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setField("coverImage", ""),
+                        "aria-label": "Remove cover",
+                        className: "absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full",
+                        style: { background: "var(--mb-media-scrim)", color: "#fff" },
+                        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => coverInputRef.current?.click(),
+                  disabled: uploading && uploadTarget === "cover",
+                  className: "mb-4 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed py-6 text-sm font-medium disabled:opacity-60",
+                  style: {
+                    borderColor: "var(--mb-border)",
+                    color: "var(--mb-text-secondary)",
+                    background: "var(--mb-card)"
+                  },
+                  children: uploading && uploadTarget === "cover" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+                    "Uploading\u2026"
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(Camera, { className: "size-4" }),
+                    "Add cover image"
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AutoGrowTextarea,
+                {
+                  value: form.title,
+                  onChange: (e) => setField("title", e.target.value),
+                  placeholder: "Post title",
+                  className: "w-full bg-transparent text-3xl font-bold leading-tight outline-none placeholder:opacity-50 [overflow-wrap:anywhere]",
+                  style: { color: "var(--mb-text)" }
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+                BlogTiptapEditor,
+                {
+                  initialHtml: form.bodyHtml,
+                  onUpdate: onEditorUpdate,
+                  onReady: onEditorReady,
+                  uploadImage: onUploadInline
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("p", { className: "mt-6 text-2xs", style: { color: "var(--mb-text-muted)" }, children: [
+                wordCount,
+                " words \xB7 ",
+                readTime,
+                " min read"
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "sticky z-10 flex items-center gap-1 overflow-x-auto px-3 py-2",
+            style: {
+              bottom: "calc(64px + env(safe-area-inset-bottom, 0px))",
+              background: "color-mix(in srgb, var(--mb-surface) 95%, transparent)",
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              borderTop: "1px solid var(--mb-border)",
+              borderBottom: "1px solid var(--mb-border)"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                MobileToolbarButton,
+                {
+                  icon: Bold,
+                  aria: "Bold",
+                  onClick: () => editor?.chain().focus().toggleBold().run()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MobileToolbarButton,
+                {
+                  icon: Italic,
+                  aria: "Italic",
+                  onClick: () => editor?.chain().focus().toggleItalic().run()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MobileToolbarButton,
+                {
+                  icon: Heading2,
+                  aria: "Heading",
+                  onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MobileToolbarButton,
+                {
+                  icon: List,
+                  aria: "Bulleted list",
+                  onClick: () => editor?.chain().focus().toggleBulletList().run()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MobileToolbarButton,
+                {
+                  icon: LinkIcon,
+                  aria: "Insert link",
+                  onClick: promptLink
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MobileToolbarButton,
+                {
+                  icon: ImageIcon,
+                  aria: "Insert image",
+                  onClick: () => inlineInputRef.current?.click(),
+                  loading: uploading && uploadTarget === "inline"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(StickyCtaBar, { respectTabBar: false, children: /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void onSave("draft"),
+              disabled: saving,
+              className: "h-12 flex-1 rounded-2xl border text-md font-medium disabled:opacity-60",
+              style: {
+                borderColor: "var(--mb-border)",
+                background: "var(--mb-card)",
+                color: "var(--mb-text)"
+              },
+              children: saving ? "Saving\u2026" : "Save draft"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => void onSave("published"),
+              disabled: saving,
+              className: "h-12 flex-1 rounded-2xl text-md font-semibold disabled:opacity-60",
+              style: {
+                background: "var(--mb-accent)",
+                color: "var(--mb-accent-fg)"
+              },
+              children: saving ? "Publishing\u2026" : form.status === "published" ? "Update" : "Publish"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          BottomSheet,
+          {
+            open: settingsOpen,
+            onClose: () => setSettingsOpen(false),
+            ariaLabelledBy: "blog-settings-title",
+            respectTabBar: false,
+            children: /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 pt-1", children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: "blog-settings-title",
+                  className: "text-base font-semibold",
+                  style: { color: "var(--mb-text)" },
+                  children: "Post settings"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-3 space-y-2", children: [
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: "URL slug",
+                    placeholder: "auto-from-title",
+                    value: form.slug,
+                    onChange: (v) => setField("slug", v)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: "Short description",
+                    placeholder: "One-line summary",
+                    value: form.shortDescription,
+                    onChange: (v) => setField("shortDescription", v),
+                    multiline: true
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: "Category",
+                    placeholder: "e.g. Stories",
+                    value: form.category,
+                    onChange: (v) => setField("category", v)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: "Tags",
+                    placeholder: "Comma-separated",
+                    value: form.tags,
+                    onChange: (v) => setField("tags", v)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TextField,
+                  {
+                    label: "Author",
+                    placeholder: "Defaults to your name",
+                    value: form.author,
+                    onChange: (v) => setField("author", v)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "rounded-2xl border p-4",
+                    style: {
+                      borderColor: "var(--mb-border)",
+                      background: "var(--mb-card)"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Toggle,
+                      {
+                        on: form.featured,
+                        onChange: (v) => setField("featured", v),
+                        label: "Featured",
+                        hint: "Highlight this post on the blog home"
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSettingsOpen(false),
+                  className: "mt-4 h-11 w-full rounded-2xl text-md font-semibold",
+                  style: {
+                    background: "var(--mb-accent)",
+                    color: "var(--mb-accent-fg)"
+                  },
+                  children: "Done"
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function MobileToolbarButton({
+  icon: Icon,
+  aria,
+  onClick,
+  loading
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": aria,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg",
+      style: {
+        color: "var(--mb-text-secondary)",
+        background: "var(--mb-elevated)"
+      },
+      children: loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Icon, { className: "h-[18px] w-[18px]" })
+    }
+  );
+}
+export {
+  MobileBlogEditorScreen
+};
+//# sourceMappingURL=blog-editor.js.map

package/dist/mobile/screens/blog-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/screens/blog-editor.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile screen — Blog editor (long-form, Tiptap edition)\n *\n * Used as the mobile branch inside BlogEditorPage. Mounts the same Tiptap\n * editor as the desktop view and renders mobile-tuned chrome (header,\n * sticky bottom toolbar, sticky CTA, settings bottom sheet).\n */\n\nimport React, { useState, type RefObject } from 'react';\nimport {\n  ArrowLeft,\n  Bold,\n  Italic,\n  Heading2,\n  List,\n  Link as LinkIcon,\n  Image as ImageIcon,\n  Camera,\n  X,\n  Settings2,\n  Loader2,\n} from 'lucide-react';\nimport type { Editor } from '@tiptap/react';\nimport {\n  BottomSheet,\n  StickyCtaBar,\n  TextField,\n  Toggle,\n  stickyCtaScrollPadding,\n} from '@withpotter/components/mobile/primitives';\nimport { BlogTiptapEditor } from '@withpotter/pages-content/dashboard/(content)/blog/_components/editor/BlogTiptapEditor';\nimport type {\n  BlogEditorState,\n  UploadTarget,\n} from '@withpotter/pages-content/dashboard/(content)/blog/_components/editor/types';\nimport { FileInput, AutoGrowTextarea } from '@withpotter/ui-kit';\n\nexport interface MobileBlogEditorScreenProps {\n  mode: 'create' | 'edit';\n  form: BlogEditorState;\n  setField: <K extends keyof BlogEditorState>(\n    key: K,\n    value: BlogEditorState[K],\n  ) => void;\n  editor: Editor | null;\n  onEditorReady: (editor: Editor) => void;\n  onEditorUpdate: (html: string) => void;\n  onUploadInline: (file: File) => Promise<string>;\n  onUploadCover: (file: File) => Promise<void>;\n  onSave: (status: 'draft' | 'published') => Promise<void> | void;\n  saving: boolean;\n  uploading: boolean;\n  uploadTarget: UploadTarget | null;\n  error?: string | null;\n  wordCount: number;\n  readTime: number;\n  onBack: () => void;\n}\n\nexport function MobileBlogEditorScreen({\n  mode,\n  form,\n  setField,\n  editor,\n  onEditorReady,\n  onEditorUpdate,\n  onUploadInline,\n  onUploadCover,\n  onSave,\n  saving,\n  uploading,\n  uploadTarget,\n  error,\n  wordCount,\n  readTime,\n  onBack,\n}: MobileBlogEditorScreenProps) {\n  const [settingsOpen, setSettingsOpen] = useState(false);\n  const coverInputRef = React.useRef<HTMLInputElement>(null);\n  const inlineInputRef = React.useRef<HTMLInputElement>(null);\n\n  const handleCoverFile = async ([file]: File[]) => {\n    await onUploadCover(file);\n  };\n\n  const handleInlineFile = async ([file]: File[]) => {\n    if (!editor) return;\n    try {\n      const url = await onUploadInline(file);\n      editor.chain().focus().setImage({ src: url }).createParagraphNear().run();\n    } catch {\n      /* error surfaced via parent */\n    }\n  };\n\n  const promptLink = () => {\n    if (!editor) return;\n    const current = editor.getAttributes('link').href as string | undefined;\n    const next = window.prompt('Link URL', current ?? 'https://');\n    if (next === null) return;\n    if (!next.trim()) {\n      editor.chain().focus().unsetLink().run();\n      return;\n    }\n    const href = /^https?:\\/\\//i.test(next) ? next : `https://${next}`;\n    editor.chain().focus().extendMarkRange('link').setLink({ href }).run();\n  };\n\n  const headerLabel = mode === 'edit' ? 'Edit post' : 'New post';\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      <header\n        className=\"sticky top-0 z-20 flex h-14 items-center justify-between gap-2 px-3\"\n        style={{\n          background: 'color-mix(in srgb, var(--mb-surface) 95%, transparent)',\n          backdropFilter: 'blur(12px)',\n          WebkitBackdropFilter: 'blur(12px)',\n          borderBottom: '1px solid var(--mb-border)',\n        }}\n      >\n        <button\n          type=\"button\"\n          onClick={onBack}\n          aria-label=\"Back\"\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=\"min-w-0 flex-1 text-center\">\n          <p className=\"text-3xs\" style={{ color: 'var(--mb-text-muted)' }}>\n            {headerLabel}\n          </p>\n          <p\n            className=\"truncate text-xs font-medium\"\n            style={{ color: 'var(--mb-text-secondary)' }}\n          >\n            {form.title || 'Untitled'}\n          </p>\n        </div>\n        <button\n          type=\"button\"\n          onClick={() => setSettingsOpen(true)}\n          aria-label=\"Post settings\"\n          className=\"flex h-9 w-9 items-center justify-center rounded-full\"\n          style={{ background: 'var(--mb-elevated)' }}\n        >\n          <Settings2 className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n        </button>\n      </header>\n\n      <FileInput\n        ref={coverInputRef}\n        accept=\"image/*\"\n        onFiles={handleCoverFile}\n      />\n      <FileInput\n        ref={inlineInputRef}\n        accept=\"image/*\"\n        onFiles={handleInlineFile}\n      />\n\n      <div\n        className=\"flex-1 px-4 pt-6\"\n        style={{ paddingBottom: stickyCtaScrollPadding(false) }}\n      >\n        {error && (\n          <div\n            className=\"mb-3 rounded-2xl border p-4 text-sm\"\n            style={{\n              borderColor: 'color-mix(in srgb, var(--mb-bad) 25%, transparent)',\n              background: 'color-mix(in srgb, var(--mb-bad) 6%, transparent)',\n              color: 'var(--mb-bad)',\n            }}\n          >\n            {error}\n          </div>\n        )}\n\n        {/* Cover image */}\n        {form.coverImage ? (\n          <div\n            className=\"relative mb-4 overflow-hidden rounded-2xl\"\n            style={{ aspectRatio: '16/9', background: 'var(--mb-elevated)' }}\n          >\n            {/* eslint-disable-next-line @next/next/no-img-element */}\n            <img\n              src={form.coverImage}\n              alt=\"\"\n              className=\"h-full w-full object-cover\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => setField('coverImage', '')}\n              aria-label=\"Remove cover\"\n              className=\"absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full\"\n              style={{ background: 'var(--mb-media-scrim)', color: '#fff' }}\n            >\n              <X className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={() => coverInputRef.current?.click()}\n            disabled={uploading && uploadTarget === 'cover'}\n            className=\"mb-4 flex w-full items-center justify-center gap-2 rounded-2xl border border-dashed py-6 text-sm font-medium disabled:opacity-60\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              color: 'var(--mb-text-secondary)',\n              background: 'var(--mb-card)',\n            }}\n          >\n            {uploading && uploadTarget === 'cover' ? (\n              <>\n                <Loader2 className=\"size-4 animate-spin\" />\n                Uploading…\n              </>\n            ) : (\n              <>\n                <Camera className=\"size-4\" />\n                Add cover image\n              </>\n            )}\n          </button>\n        )}\n\n        {/* Title */}\n        {/* Not TextField: this is the post TITLE, the thing being written\n            rather than a field collecting a value, so it carries no card and\n            no 44px tap target. AutoGrowTextarea owns the sizing. */}\n        <AutoGrowTextarea\n          value={form.title}\n          onChange={(e) => setField('title', e.target.value)}\n          placeholder=\"Post title\"\n          className=\"w-full bg-transparent text-3xl font-bold leading-tight outline-none placeholder:opacity-50 [overflow-wrap:anywhere]\"\n          style={{ color: 'var(--mb-text)' }}\n        />\n\n        {/* Body — Tiptap */}\n        <div className=\"mt-4\">\n          <BlogTiptapEditor\n            initialHtml={form.bodyHtml}\n            onUpdate={onEditorUpdate}\n            onReady={onEditorReady}\n            uploadImage={onUploadInline}\n          />\n        </div>\n\n        <p className=\"mt-6 text-2xs\" style={{ color: 'var(--mb-text-muted)' }}>\n          {wordCount} words · {readTime} min read\n        </p>\n      </div>\n\n      {/* Toolbar above sticky CTA */}\n      <div\n        className=\"sticky z-10 flex items-center gap-1 overflow-x-auto px-3 py-2\"\n        style={{\n          bottom: 'calc(64px + env(safe-area-inset-bottom, 0px))',\n          background: 'color-mix(in srgb, var(--mb-surface) 95%, transparent)',\n          backdropFilter: 'blur(12px)',\n          WebkitBackdropFilter: 'blur(12px)',\n          borderTop: '1px solid var(--mb-border)',\n          borderBottom: '1px solid var(--mb-border)',\n        }}\n      >\n        <MobileToolbarButton\n          icon={Bold}\n          aria=\"Bold\"\n          onClick={() => editor?.chain().focus().toggleBold().run()}\n        />\n        <MobileToolbarButton\n          icon={Italic}\n          aria=\"Italic\"\n          onClick={() => editor?.chain().focus().toggleItalic().run()}\n        />\n        <MobileToolbarButton\n          icon={Heading2}\n          aria=\"Heading\"\n          onClick={() =>\n            editor?.chain().focus().toggleHeading({ level: 2 }).run()\n          }\n        />\n        <MobileToolbarButton\n          icon={List}\n          aria=\"Bulleted list\"\n          onClick={() => editor?.chain().focus().toggleBulletList().run()}\n        />\n        <MobileToolbarButton\n          icon={LinkIcon}\n          aria=\"Insert link\"\n          onClick={promptLink}\n        />\n        <MobileToolbarButton\n          icon={ImageIcon}\n          aria=\"Insert image\"\n          onClick={() => inlineInputRef.current?.click()}\n          loading={uploading && uploadTarget === 'inline'}\n        />\n      </div>\n\n      <StickyCtaBar respectTabBar={false}>\n        <div className=\"flex w-full gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => void onSave('draft')}\n            disabled={saving}\n            className=\"h-12 flex-1 rounded-2xl border text-md font-medium disabled:opacity-60\"\n            style={{\n              borderColor: 'var(--mb-border)',\n              background: 'var(--mb-card)',\n              color: 'var(--mb-text)',\n            }}\n          >\n            {saving ? 'Saving…' : 'Save draft'}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => void onSave('published')}\n            disabled={saving}\n            className=\"h-12 flex-1 rounded-2xl text-md font-semibold disabled:opacity-60\"\n            style={{\n              background: 'var(--mb-accent)',\n              color: 'var(--mb-accent-fg)',\n            }}\n          >\n            {saving\n              ? 'Publishing…'\n              : form.status === 'published'\n                ? 'Update'\n                : 'Publish'}\n          </button>\n        </div>\n      </StickyCtaBar>\n\n      {/* Settings sheet */}\n      <BottomSheet\n        open={settingsOpen}\n        onClose={() => setSettingsOpen(false)}\n        ariaLabelledBy=\"blog-settings-title\"\n        respectTabBar={false}\n      >\n        <div className=\"px-4 pb-4 pt-1\">\n          <h2\n            id=\"blog-settings-title\"\n            className=\"text-base font-semibold\"\n            style={{ color: 'var(--mb-text)' }}\n          >\n            Post settings\n          </h2>\n          <div className=\"mt-3 space-y-2\">\n            <TextField\n              label=\"URL slug\"\n              placeholder=\"auto-from-title\"\n              value={form.slug}\n              onChange={(v) => setField('slug', v)}\n            />\n            <TextField\n              label=\"Short description\"\n              placeholder=\"One-line summary\"\n              value={form.shortDescription}\n              onChange={(v) => setField('shortDescription', v)}\n              multiline\n            />\n            <TextField\n              label=\"Category\"\n              placeholder=\"e.g. Stories\"\n              value={form.category}\n              onChange={(v) => setField('category', v)}\n            />\n            <TextField\n              label=\"Tags\"\n              placeholder=\"Comma-separated\"\n              value={form.tags}\n              onChange={(v) => setField('tags', v)}\n            />\n            <TextField\n              label=\"Author\"\n              placeholder=\"Defaults to your name\"\n              value={form.author}\n              onChange={(v) => setField('author', v)}\n            />\n            <div\n              className=\"rounded-2xl border p-4\"\n              style={{\n                borderColor: 'var(--mb-border)',\n                background: 'var(--mb-card)',\n              }}\n            >\n              <Toggle\n                on={form.featured}\n                onChange={(v) => setField('featured', v)}\n                label=\"Featured\"\n                hint=\"Highlight this post on the blog home\"\n              />\n            </div>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => setSettingsOpen(false)}\n            className=\"mt-4 h-11 w-full rounded-2xl text-md font-semibold\"\n            style={{\n              background: 'var(--mb-accent)',\n              color: 'var(--mb-accent-fg)',\n            }}\n          >\n            Done\n          </button>\n        </div>\n      </BottomSheet>\n    </div>\n  );\n}\n\nfunction MobileToolbarButton({\n  icon: Icon,\n  aria,\n  onClick,\n  loading,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  aria: string;\n  onClick: () => void;\n  loading?: boolean;\n}) {\n  return (\n    <button\n      type=\"button\"\n      aria-label={aria}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={onClick}\n      className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-lg\"\n      style={{\n        color: 'var(--mb-text-secondary)',\n        background: 'var(--mb-elevated)',\n      }}\n    >\n      {loading ? (\n        <Loader2 className=\"size-4 animate-spin\" />\n      ) : (\n        <Icon className=\"h-[18px] w-[18px]\" />\n      )}\n    </button>\n  );\n}\n\n// Suppress unused-import warning for refs that some TS configs flag.\nexport type { RefObject };\n"],"mappings":"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","names":[]}

package/dist/mobile/screens/booking-detail.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+interface SummaryRowSpec {
+    label: string;
+    value: string;
+}
+interface MobileBookingDetailScreenProps {
+    statusLabel: string;
+    statusTone?: 'warn' | 'good' | 'bad' | 'accent';
+    requestedRelative?: string;
+    whenLabel: string;
+    whatLabel: string;
+    guestName: string;
+    guestInitials: string;
+    guestMeta?: string;
+    /** Contact details, so the guest can be reached from the record itself. */
+    guestPhone?: string;
+    guestEmail?: string;
+    /** Reference the pre-written message should quote, e.g. a booking number. */
+    reference?: string;
+    noteFromGuest?: string;
+    /**
+     * The room this booking happens in, when it happens on the internet.
+     *
+     * The per-booking Google Meet link the calendar sync mints. It shipped in the
+     * customer's confirmation long before it appeared on any merchant surface,
+     * which made the merchant's own route to their own call the customer's inbox.
+     */
+    meetingLink?: string;
+    /** What to call the control that opens it — "Join Google Meet". */
+    meetingLabel?: string;
+    facts?: SummaryRowSpec[];
+    conflictMessage?: string;
+    onBack?: () => void;
+    onMessage?: () => void;
+    onCall?: () => void;
+    /**
+     * What the header calls this record.
+     *
+     * It said "Booking request" for everything, so a confirmed appointment —
+     * one nobody is being asked to accept — was headed as a request. Callers
+     * pass the merchant's own noun; the old string stays the default.
+     */
+    title?: string;
+    onDecline?: () => void;
+    onPropose?: () => void;
+    onAccept?: () => void;
+}
+export declare function MobileBookingDetailScreen({ statusLabel, statusTone, requestedRelative, whenLabel, whatLabel, guestName, guestInitials, guestMeta, guestPhone, guestEmail, reference, noteFromGuest, meetingLink, meetingLabel, facts, conflictMessage, onBack, onMessage, onCall, title, onDecline, onPropose, onAccept, }: MobileBookingDetailScreenProps): React.JSX.Element;
+export {};