@withpotter/components 0.13.0-next.101

package/dist/mobile/mobile-media-picker-sheet.js

@@ -0,0 +1,471 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import {
+  Check,
+  Image as ImageIcon,
+  Link2,
+  Loader2,
+  Upload,
+  X
+} from "lucide-react";
+import { BottomSheet } from "@withpotter/components/mobile/primitives/bottom-sheet";
+import {
+  isCloudinaryEnabled,
+  uploadImageWithAutoCompress
+} from "@withpotter/lib/media-service";
+import { Input, FileInput } from "@withpotter/ui-kit";
+const DEFAULT_ACCEPT = ".png,.jpg,.jpeg,.gif,.webp";
+const IMAGE_MAX_SIZE = 10 * 1024 * 1024;
+const VIDEO_MAX_SIZE = 100 * 1024 * 1024;
+function inferKindFromMime(m) {
+  return m?.startsWith("video/") ? "video" : "image";
+}
+function inferKindFromUrl(u) {
+  return /\.(mp4|mov|webm)(\?.*)?$/i.test(u) ? "video" : "image";
+}
+function isAccepted(file, accept) {
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const mime = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return tokens.some((t) => {
+    if (t === "*/*") return true;
+    if (t.startsWith(".")) return name.endsWith(t);
+    if (t.endsWith("/*")) return mime.startsWith(t.slice(0, -1));
+    return mime === t;
+  });
+}
+function MobileMediaPickerSheet({
+  open,
+  onClose,
+  onSuccess,
+  title = "Add media",
+  initialUrl,
+  initialAlt = "",
+  accept = DEFAULT_ACCEPT
+}) {
+  const titleId = useId();
+  const fileInputRef = useRef(null);
+  const objectUrlRef = useRef(null);
+  const [mode, setMode] = useState("upload");
+  const [preview, setPreview] = useState(initialUrl || null);
+  const [previewKind, setPreviewKind] = useState("image");
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [urlInput, setUrlInput] = useState("");
+  const [altText, setAltText] = useState(initialAlt);
+  const [error, setError] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    if (!open) return;
+    setMode("upload");
+    setPreview(initialUrl || null);
+    setPreviewKind(initialUrl ? inferKindFromUrl(initialUrl) : "image");
+    setSelectedFile(null);
+    setUrlInput("");
+    setAltText(initialAlt);
+    setError(null);
+    setProgress(0);
+    setUploading(false);
+  }, [open, initialUrl, initialAlt]);
+  useEffect(() => {
+    return () => {
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+        objectUrlRef.current = null;
+      }
+    };
+  }, []);
+  const handleFile = useCallback(
+    (file) => {
+      if (!isAccepted(file, accept)) {
+        setError("This file type is not allowed.");
+        return;
+      }
+      const kind = inferKindFromMime(file.type);
+      const limit = kind === "video" ? VIDEO_MAX_SIZE : IMAGE_MAX_SIZE;
+      if (file.size > limit) {
+        setError(
+          kind === "video" ? "Video must be 100 MB or smaller." : "Image must be 10 MB or smaller."
+        );
+        return;
+      }
+      setError(null);
+      setSelectedFile(file);
+      setPreviewKind(kind);
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+        objectUrlRef.current = null;
+      }
+      if (kind === "video") {
+        const u = URL.createObjectURL(file);
+        objectUrlRef.current = u;
+        setPreview(u);
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => setPreview(e.target?.result);
+      reader.readAsDataURL(file);
+    },
+    [accept]
+  );
+  const onPickFile = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const onUrlSubmit = useCallback(() => {
+    const u = urlInput.trim();
+    if (!u) return;
+    try {
+      new URL(u);
+      setError(null);
+      setPreview(u);
+      setPreviewKind(inferKindFromUrl(u));
+      setSelectedFile(null);
+    } catch {
+      setError("Please enter a valid URL.");
+    }
+  }, [urlInput]);
+  const handleSave = async () => {
+    if (!preview || uploading) return;
+    setUploading(true);
+    setProgress(0);
+    setError(null);
+    try {
+      let result;
+      const onProg = (p) => setProgress(5 + Math.round(p * 0.9));
+      if (selectedFile && isCloudinaryEnabled) {
+        result = await uploadImageWithAutoCompress(selectedFile, onProg);
+      } else if (preview.startsWith("data:")) {
+        const blob = await (await fetch(preview)).blob();
+        const file = new File([blob], "image.png", { type: "image/png" });
+        result = await uploadImageWithAutoCompress(file, onProg);
+      } else {
+        setProgress(100);
+        result = {
+          url: preview,
+          publicId: preview,
+          resourceType: previewKind,
+          width: 0,
+          height: 0,
+          format: "unknown",
+          isCloudinary: false
+        };
+      }
+      setProgress(100);
+      onSuccess({ ...result, alt: altText });
+      onClose();
+    } catch (err) {
+      console.error("Upload failed:", err);
+      setError(err instanceof Error ? err.message : "Upload failed.");
+    } finally {
+      setUploading(false);
+      setProgress(0);
+    }
+  };
+  const canSave = !!preview && !uploading;
+  return /* @__PURE__ */ jsx(BottomSheet, { open, onClose, ariaLabelledBy: titleId, children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(
+        "h3",
+        {
+          id: titleId,
+          className: "text-base font-semibold",
+          style: { color: "var(--mb-text)" },
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          "aria-label": "Close",
+          className: "p-2 -mr-2 rounded-full",
+          style: { color: "var(--mb-text-tertiary)" },
+          children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+        }
+      )
+    ] }),
+    preview ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative w-full aspect-[4/3] rounded-2xl overflow-hidden",
+        style: { background: "var(--mb-elevated)" },
+        children: [
+          previewKind === "video" ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: preview,
+              controls: true,
+              className: "w-full h-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: "Preview",
+              className: "w-full h-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                setPreview(null);
+                setSelectedFile(null);
+                setUrlInput("");
+              },
+              className: "absolute top-2 right-2 w-8 h-8 rounded-full flex items-center justify-center",
+              style: { background: "var(--mb-media-scrim)", color: "#fff" },
+              "aria-label": "Remove selection",
+              children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onPickFile,
+        className: "w-full aspect-[4/3] rounded-2xl flex flex-col items-center justify-center gap-3 active:scale-[0.99] transition-transform",
+        style: {
+          background: "var(--mb-elevated)",
+          border: "1px dashed var(--mb-border-strong)"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "w-12 h-12 rounded-full flex items-center justify-center",
+              style: { background: "var(--mb-card)" },
+              children: /* @__PURE__ */ jsx(
+                ImageIcon,
+                {
+                  className: "size-6",
+                  style: { color: "var(--mb-text-tertiary)" }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "text-center px-6", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "text-lg font-medium",
+                style: { color: "var(--mb-text)" },
+                children: "Choose from library"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "text-xs mt-0.5",
+                style: { color: "var(--mb-text-tertiary)" },
+                children: "Images up to 10 MB \xB7 Videos up to 100 MB"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex gap-1 p-1 rounded-full",
+        style: { background: "var(--mb-elevated)" },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMode("upload"),
+              className: "flex-1 flex items-center justify-center gap-2 py-2 rounded-full text-sm font-medium transition-colors",
+              style: {
+                background: mode === "upload" ? "var(--mb-card)" : "transparent",
+                color: mode === "upload" ? "var(--mb-text)" : "var(--mb-text-tertiary)",
+                boxShadow: mode === "upload" ? "var(--shadow-sm)" : "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+                "Upload"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => setMode("url"),
+              className: "flex-1 flex items-center justify-center gap-2 py-2 rounded-full text-sm font-medium transition-colors",
+              style: {
+                background: mode === "url" ? "var(--mb-card)" : "transparent",
+                color: mode === "url" ? "var(--mb-text)" : "var(--mb-text-tertiary)",
+                boxShadow: mode === "url" ? "var(--shadow-sm)" : "none"
+              },
+              children: [
+                /* @__PURE__ */ jsx(Link2, { className: "size-4" }),
+                "URL"
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    mode === "upload" ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onPickFile,
+          className: "w-full py-3 rounded-2xl text-md font-medium flex items-center justify-center gap-2",
+          style: {
+            background: "var(--mb-elevated)",
+            color: "var(--mb-text)",
+            border: "1px solid var(--mb-border)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+            preview ? "Choose a different file" : "Choose file"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        FileInput,
+        {
+          ref: fileInputRef,
+          accept,
+          onFiles: ([f]) => handleFile(f)
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "url",
+          inputMode: "url",
+          autoCapitalize: "none",
+          autoCorrect: "off",
+          spellCheck: false,
+          value: urlInput,
+          onChange: (e) => setUrlInput(e.target.value),
+          placeholder: "https://\u2026",
+          className: "w-full",
+          style: {
+            background: "var(--mb-elevated)",
+            color: "var(--mb-text)",
+            border: "1px solid var(--mb-border)"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onUrlSubmit,
+          disabled: !urlInput.trim(),
+          className: "w-full py-3 rounded-2xl text-md font-medium disabled:opacity-50",
+          style: {
+            background: "var(--mb-elevated)",
+            color: "var(--mb-text)",
+            border: "1px solid var(--mb-border)"
+          },
+          children: "Use this URL"
+        }
+      )
+    ] }),
+    preview && /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "block text-xs mb-1.5",
+          style: { color: "var(--mb-text-tertiary)" },
+          children: "Alt text (optional)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "text",
+          value: altText,
+          onChange: (e) => setAltText(e.target.value),
+          placeholder: "Describe this image for accessibility",
+          className: "w-full",
+          style: {
+            background: "var(--mb-elevated)",
+            color: "var(--mb-text)",
+            border: "1px solid var(--mb-border)"
+          }
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-sm px-3 py-2 rounded-xl",
+        style: {
+          background: "color-mix(in srgb, var(--mb-bad) 15%, transparent)",
+          color: "var(--mb-bad)"
+        },
+        children: error
+      }
+    ),
+    uploading && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-1.5 rounded-full overflow-hidden",
+        style: { background: "var(--mb-elevated)" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full w-full origin-left",
+            style: {
+              width: `${progress}%`,
+              background: "var(--mb-accent)"
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pt-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          disabled: uploading,
+          className: "flex-1 py-3 rounded-2xl text-md font-medium disabled:opacity-50",
+          style: {
+            background: "transparent",
+            color: "var(--mb-text-secondary)",
+            border: "1px solid var(--mb-border)"
+          },
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: handleSave,
+          disabled: !canSave,
+          className: "flex-1 py-3 rounded-2xl text-md font-semibold flex items-center justify-center gap-2 disabled:opacity-50",
+          style: {
+            background: "var(--mb-accent)",
+            color: "var(--mb-accent-fg)"
+          },
+          children: [
+            uploading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "size-4" }),
+            uploading ? "Uploading\u2026" : "Save"
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+export {
+  MobileMediaPickerSheet
+};
+//# sourceMappingURL=mobile-media-picker-sheet.js.map

package/dist/mobile/mobile-media-picker-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-media-picker-sheet.tsx"],"sourcesContent":["/* eslint-disable @next/next/no-img-element */\n'use client';\n\n/**\n * MobileMediaPickerSheet\n *\n * Mobile-native replacement for the desktop `ImageUploadModal` when used\n * inside the mobile product editor. Renders inside a `BottomSheet`, uses\n * the `--mb-*` design tokens, and exposes the same `onSuccess` shape as\n * `ImageUploadModal` so call-sites can swap between them with no other\n * changes.\n *\n * Differences vs the desktop modal:\n *   - Bottom-sheet form factor (one-handed reach, anchored above the\n *     home indicator / tab bar).\n *   - Big touch targets — primary action is \"Choose photo\" (camera roll)\n *     with an \"Add by URL\" toggle for power users.\n *   - No Filerobot CDN editor (kept off mobile to avoid the desktop-sized\n *     editor canvas being unusable on a phone). Editing is delegated to\n *     iOS / Android system photo pickers.\n *   - Sticky save button at the bottom of the sheet.\n */\n\nimport { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport {\n  Check,\n  Image as ImageIcon,\n  Link2,\n  Loader2,\n  Upload,\n  X,\n} from 'lucide-react';\nimport { BottomSheet } from '@withpotter/components/mobile/primitives/bottom-sheet';\nimport {\n  isCloudinaryEnabled,\n  uploadImageWithAutoCompress,\n  type UploadResult,\n} from '@withpotter/lib/media-service';\nimport { Input, FileInput } from '@withpotter/ui-kit';\n\nconst DEFAULT_ACCEPT = '.png,.jpg,.jpeg,.gif,.webp';\nconst IMAGE_MAX_SIZE = 10 * 1024 * 1024;\nconst VIDEO_MAX_SIZE = 100 * 1024 * 1024;\n\ntype MediaKind = 'image' | 'video';\ntype Mode = 'upload' | 'url';\n\nfunction inferKindFromMime(m?: string): MediaKind {\n  return m?.startsWith('video/') ? 'video' : 'image';\n}\nfunction inferKindFromUrl(u: string): MediaKind {\n  return /\\.(mp4|mov|webm)(\\?.*)?$/i.test(u) ? 'video' : 'image';\n}\nfunction isAccepted(file: File, accept: string): boolean {\n  const tokens = accept\n    .split(',')\n    .map((t) => t.trim().toLowerCase())\n    .filter(Boolean);\n  if (tokens.length === 0) return true;\n  const mime = file.type.toLowerCase();\n  const name = file.name.toLowerCase();\n  return tokens.some((t) => {\n    if (t === '*/*') return true;\n    if (t.startsWith('.')) return name.endsWith(t);\n    if (t.endsWith('/*')) return mime.startsWith(t.slice(0, -1));\n    return mime === t;\n  });\n}\n\nexport interface MobileMediaPickerSheetProps {\n  open: boolean;\n  onClose: () => void;\n  onSuccess: (result: UploadResult & { alt?: string }) => void;\n  title?: string;\n  initialUrl?: string;\n  initialAlt?: string;\n  accept?: string;\n}\n\nexport function MobileMediaPickerSheet({\n  open,\n  onClose,\n  onSuccess,\n  title = 'Add media',\n  initialUrl,\n  initialAlt = '',\n  accept = DEFAULT_ACCEPT,\n}: MobileMediaPickerSheetProps) {\n  const titleId = useId();\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const objectUrlRef = useRef<string | null>(null);\n\n  const [mode, setMode] = useState<Mode>('upload');\n  const [preview, setPreview] = useState<string | null>(initialUrl || null);\n  const [previewKind, setPreviewKind] = useState<MediaKind>('image');\n  const [selectedFile, setSelectedFile] = useState<File | null>(null);\n  const [urlInput, setUrlInput] = useState('');\n  const [altText, setAltText] = useState(initialAlt);\n  const [error, setError] = useState<string | null>(null);\n  const [uploading, setUploading] = useState(false);\n  const [progress, setProgress] = useState(0);\n\n  // Reset state whenever the sheet opens.\n  useEffect(() => {\n    if (!open) return;\n    setMode('upload');\n    setPreview(initialUrl || null);\n    setPreviewKind(initialUrl ? inferKindFromUrl(initialUrl) : 'image');\n    setSelectedFile(null);\n    setUrlInput('');\n    setAltText(initialAlt);\n    setError(null);\n    setProgress(0);\n    setUploading(false);\n  }, [open, initialUrl, initialAlt]);\n\n  useEffect(() => {\n    return () => {\n      if (objectUrlRef.current) {\n        URL.revokeObjectURL(objectUrlRef.current);\n        objectUrlRef.current = null;\n      }\n    };\n  }, []);\n\n  const handleFile = useCallback(\n    (file: File) => {\n      if (!isAccepted(file, accept)) {\n        setError('This file type is not allowed.');\n        return;\n      }\n      const kind = inferKindFromMime(file.type);\n      const limit = kind === 'video' ? VIDEO_MAX_SIZE : IMAGE_MAX_SIZE;\n      if (file.size > limit) {\n        setError(\n          kind === 'video'\n            ? 'Video must be 100 MB or smaller.'\n            : 'Image must be 10 MB or smaller.',\n        );\n        return;\n      }\n      setError(null);\n      setSelectedFile(file);\n      setPreviewKind(kind);\n\n      if (objectUrlRef.current) {\n        URL.revokeObjectURL(objectUrlRef.current);\n        objectUrlRef.current = null;\n      }\n      if (kind === 'video') {\n        const u = URL.createObjectURL(file);\n        objectUrlRef.current = u;\n        setPreview(u);\n        return;\n      }\n      const reader = new FileReader();\n      reader.onload = (e) => setPreview(e.target?.result as string);\n      reader.readAsDataURL(file);\n    },\n    [accept],\n  );\n\n  const onPickFile = useCallback(() => {\n    fileInputRef.current?.click();\n  }, []);\n\n  const onUrlSubmit = useCallback(() => {\n    const u = urlInput.trim();\n    if (!u) return;\n    try {\n      new URL(u);\n      setError(null);\n      setPreview(u);\n      setPreviewKind(inferKindFromUrl(u));\n      setSelectedFile(null);\n    } catch {\n      setError('Please enter a valid URL.');\n    }\n  }, [urlInput]);\n\n  const handleSave = async () => {\n    if (!preview || uploading) return;\n    setUploading(true);\n    setProgress(0);\n    setError(null);\n    try {\n      let result: UploadResult;\n      const onProg = (p: number) => setProgress(5 + Math.round(p * 0.9));\n\n      if (selectedFile && isCloudinaryEnabled) {\n        result = await uploadImageWithAutoCompress(selectedFile, onProg);\n      } else if (preview.startsWith('data:')) {\n        const blob = await (await fetch(preview)).blob();\n        const file = new File([blob], 'image.png', { type: 'image/png' });\n        result = await uploadImageWithAutoCompress(file, onProg);\n      } else {\n        setProgress(100);\n        result = {\n          url: preview,\n          publicId: preview,\n          resourceType: previewKind,\n          width: 0,\n          height: 0,\n          format: 'unknown',\n          isCloudinary: false,\n        };\n      }\n      setProgress(100);\n      onSuccess({ ...result, alt: altText });\n      onClose();\n    } catch (err) {\n      console.error('Upload failed:', err);\n      setError(err instanceof Error ? err.message : 'Upload failed.');\n    } finally {\n      setUploading(false);\n      setProgress(0);\n    }\n  };\n\n  const canSave = !!preview && !uploading;\n\n  return (\n    <BottomSheet open={open} onClose={onClose} ariaLabelledBy={titleId}>\n      <div className=\"space-y-4\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between\">\n          <h3\n            id={titleId}\n            className=\"text-base font-semibold\"\n            style={{ color: 'var(--mb-text)' }}\n          >\n            {title}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            aria-label=\"Close\"\n            className=\"p-2 -mr-2 rounded-full\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        {/* Preview tile (shown when something is staged) */}\n        {preview ? (\n          <div\n            className=\"relative w-full aspect-[4/3] rounded-2xl overflow-hidden\"\n            style={{ background: 'var(--mb-elevated)' }}\n          >\n            {previewKind === 'video' ? (\n              <video\n                src={preview}\n                controls\n                className=\"w-full h-full object-cover\"\n              />\n            ) : (\n              <img\n                src={preview}\n                alt=\"Preview\"\n                className=\"w-full h-full object-cover\"\n              />\n            )}\n            <button\n              type=\"button\"\n              onClick={() => {\n                setPreview(null);\n                setSelectedFile(null);\n                setUrlInput('');\n              }}\n              className=\"absolute top-2 right-2 w-8 h-8 rounded-full flex items-center justify-center\"\n              style={{ background: 'var(--mb-media-scrim)', color: '#fff' }}\n              aria-label=\"Remove selection\"\n            >\n              <X className=\"size-4\" />\n            </button>\n          </div>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={onPickFile}\n            className=\"w-full aspect-[4/3] rounded-2xl flex flex-col items-center justify-center gap-3 active:scale-[0.99] transition-transform\"\n            style={{\n              background: 'var(--mb-elevated)',\n              border: '1px dashed var(--mb-border-strong)',\n            }}\n          >\n            <div\n              className=\"w-12 h-12 rounded-full flex items-center justify-center\"\n              style={{ background: 'var(--mb-card)' }}\n            >\n              <ImageIcon\n                className=\"size-6\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              />\n            </div>\n            <div className=\"text-center px-6\">\n              <div\n                className=\"text-lg font-medium\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                Choose from library\n              </div>\n              <div\n                className=\"text-xs mt-0.5\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                Images up to 10 MB · Videos up to 100 MB\n              </div>\n            </div>\n          </button>\n        )}\n\n        {/* Mode segmented control */}\n        <div\n          className=\"flex gap-1 p-1 rounded-full\"\n          style={{ background: 'var(--mb-elevated)' }}\n        >\n          <button\n            type=\"button\"\n            onClick={() => setMode('upload')}\n            className=\"flex-1 flex items-center justify-center gap-2 py-2 rounded-full text-sm font-medium transition-colors\"\n            style={{\n              background: mode === 'upload' ? 'var(--mb-card)' : 'transparent',\n              color:\n                mode === 'upload'\n                  ? 'var(--mb-text)'\n                  : 'var(--mb-text-tertiary)',\n              boxShadow: mode === 'upload' ? 'var(--shadow-sm)' : 'none',\n            }}\n          >\n            <Upload className=\"size-4\" />\n            Upload\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => setMode('url')}\n            className=\"flex-1 flex items-center justify-center gap-2 py-2 rounded-full text-sm font-medium transition-colors\"\n            style={{\n              background: mode === 'url' ? 'var(--mb-card)' : 'transparent',\n              color:\n                mode === 'url' ? 'var(--mb-text)' : 'var(--mb-text-tertiary)',\n              boxShadow: mode === 'url' ? 'var(--shadow-sm)' : 'none',\n            }}\n          >\n            <Link2 className=\"size-4\" />\n            URL\n          </button>\n        </div>\n\n        {/* Mode body */}\n        {mode === 'upload' ? (\n          <div className=\"flex flex-col gap-2\">\n            <button\n              type=\"button\"\n              onClick={onPickFile}\n              className=\"w-full py-3 rounded-2xl text-md font-medium flex items-center justify-center gap-2\"\n              style={{\n                background: 'var(--mb-elevated)',\n                color: 'var(--mb-text)',\n                border: '1px solid var(--mb-border)',\n              }}\n            >\n              <Upload className=\"size-4\" />\n              {preview ? 'Choose a different file' : 'Choose file'}\n            </button>\n            <FileInput\n              ref={fileInputRef}\n              accept={accept}\n              onFiles={([f]) => handleFile(f)}\n            />\n          </div>\n        ) : (\n          <div className=\"flex flex-col gap-2\">\n            <Input\n              type=\"url\"\n              inputMode=\"url\"\n              autoCapitalize=\"none\"\n              autoCorrect=\"off\"\n              spellCheck={false}\n              value={urlInput}\n              onChange={(e) => setUrlInput(e.target.value)}\n              placeholder=\"https://…\"\n              className=\"w-full\"\n              style={{\n                background: 'var(--mb-elevated)',\n                color: 'var(--mb-text)',\n                border: '1px solid var(--mb-border)',\n              }}\n            />\n            <button\n              type=\"button\"\n              onClick={onUrlSubmit}\n              disabled={!urlInput.trim()}\n              className=\"w-full py-3 rounded-2xl text-md font-medium disabled:opacity-50\"\n              style={{\n                background: 'var(--mb-elevated)',\n                color: 'var(--mb-text)',\n                border: '1px solid var(--mb-border)',\n              }}\n            >\n              Use this URL\n            </button>\n          </div>\n        )}\n\n        {/* Alt text — collapsed unless a preview exists */}\n        {preview && (\n          <div>\n            <label\n              className=\"block text-xs mb-1.5\"\n              style={{ color: 'var(--mb-text-tertiary)' }}\n            >\n              Alt text (optional)\n            </label>\n            <Input\n              type=\"text\"\n              value={altText}\n              onChange={(e) => setAltText(e.target.value)}\n              placeholder=\"Describe this image for accessibility\"\n              className=\"w-full\"\n              style={{\n                background: 'var(--mb-elevated)',\n                color: 'var(--mb-text)',\n                border: '1px solid var(--mb-border)',\n              }}\n            />\n          </div>\n        )}\n\n        {error && (\n          <div\n            className=\"text-sm px-3 py-2 rounded-xl\"\n            style={{\n              background: 'color-mix(in srgb, var(--mb-bad) 15%, transparent)',\n              color: 'var(--mb-bad)',\n            }}\n          >\n            {error}\n          </div>\n        )}\n\n        {uploading && (\n          <div\n            className=\"h-1.5 rounded-full overflow-hidden\"\n            style={{ background: 'var(--mb-elevated)' }}\n          >\n            <div\n              className=\"h-full w-full origin-left\"\n              style={{\n                width: `${progress}%`,\n                background: 'var(--mb-accent)',\n              }}\n            />\n          </div>\n        )}\n\n        {/* Sticky-style action row */}\n        <div className=\"flex items-center gap-3 pt-1\">\n          <button\n            type=\"button\"\n            onClick={onClose}\n            disabled={uploading}\n            className=\"flex-1 py-3 rounded-2xl text-md font-medium disabled:opacity-50\"\n            style={{\n              background: 'transparent',\n              color: 'var(--mb-text-secondary)',\n              border: '1px solid var(--mb-border)',\n            }}\n          >\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            onClick={handleSave}\n            disabled={!canSave}\n            className=\"flex-1 py-3 rounded-2xl text-md font-semibold flex items-center justify-center gap-2 disabled:opacity-50\"\n            style={{\n              background: 'var(--mb-accent)',\n              color: 'var(--mb-accent-fg)',\n            }}\n          >\n            {uploading ? (\n              <Loader2 className=\"size-4 animate-spin\" />\n            ) : (\n              <Check className=\"size-4\" />\n            )}\n            {uploading ? 'Uploading…' : 'Save'}\n          </button>\n        </div>\n      </div>\n    </BottomSheet>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/mobile-nav-bar.d.ts

@@ -0,0 +1,16 @@
+import type { LucideIcon } from 'lucide-react';
+interface MobileNavBarProps {
+    title: string;
+    onBack?: () => void;
+    action?: {
+        label: string;
+        icon?: LucideIcon;
+        onClick: () => void;
+    };
+}
+/**
+ * Flat navigation bar for detail/pushed screens.
+ * Left-aligned back arrow + title. No depth, no blur.
+ */
+export declare function MobileNavBar({ title, onBack, action }: MobileNavBarProps): import("react").JSX.Element;
+export {};

package/dist/mobile/mobile-nav-bar.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+import { useRouter } from "next/navigation";
+function MobileNavBar({ title, onBack, action }) {
+  const router = useRouter();
+  const handleBack = () => {
+    if (onBack) onBack();
+    else router.back();
+  };
+  return /* @__PURE__ */ jsx(
+    "header",
+    {
+      className: "sticky top-0 z-30 bg-[var(--bg-base)] mb-3",
+      style: { paddingTop: "env(safe-area-inset-top)" },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between h-12 px-1", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleBack,
+            className: "flex items-center gap-2 min-h-[44px] text-brand-500 active:opacity-50 transition-opacity pl-1 pr-2",
+            "aria-label": "Go back",
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "size-5", strokeWidth: 2 }),
+              /* @__PURE__ */ jsx("span", { className: "text-xl font-semibold text-[var(--text-primary)] truncate max-w-[60vw]", children: title })
+            ]
+          }
+        ),
+        action && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: action.onClick,
+            className: "flex items-center gap-1.5 min-h-[44px] px-3 text-brand-500 active:opacity-50 transition-opacity text-sm font-medium",
+            "aria-label": action.label,
+            children: [
+              action.icon && /* @__PURE__ */ jsx(action.icon, { className: "w-4 h-4" }),
+              action.label
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  MobileNavBar
+};
+//# sourceMappingURL=mobile-nav-bar.js.map

package/dist/mobile/mobile-nav-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-nav-bar.tsx"],"sourcesContent":["'use client';\n\nimport type { LucideIcon } from 'lucide-react';\nimport { ArrowLeft } from 'lucide-react';\nimport { useRouter } from 'next/navigation';\n\ninterface MobileNavBarProps {\n  title: string;\n  onBack?: () => void;\n  action?: { label: string; icon?: LucideIcon; onClick: () => void };\n}\n\n/**\n * Flat navigation bar for detail/pushed screens.\n * Left-aligned back arrow + title. No depth, no blur.\n */\nexport function MobileNavBar({ title, onBack, action }: MobileNavBarProps) {\n  const router = useRouter();\n\n  const handleBack = () => {\n    if (onBack) onBack();\n    else router.back();\n  };\n\n  return (\n    <header\n      className=\"sticky top-0 z-30 bg-[var(--bg-base)] mb-3\"\n      style={{ paddingTop: 'env(safe-area-inset-top)' }}\n    >\n      <div className=\"flex items-center justify-between h-12 px-1\">\n        <button\n          type=\"button\"\n          onClick={handleBack}\n          className=\"flex items-center gap-2 min-h-[44px] text-brand-500 active:opacity-50 transition-opacity pl-1 pr-2\"\n          aria-label=\"Go back\"\n        >\n          <ArrowLeft className=\"size-5\" strokeWidth={2} />\n          <span className=\"text-xl font-semibold text-[var(--text-primary)] truncate max-w-[60vw]\">\n            {title}\n          </span>\n        </button>\n        {action && (\n          <button\n            type=\"button\"\n            onClick={action.onClick}\n            className=\"flex items-center gap-1.5 min-h-[44px] px-3 text-brand-500 active:opacity-50 transition-opacity text-sm font-medium\"\n            aria-label={action.label}\n          >\n            {action.icon && <action.icon className=\"w-4 h-4\" />}\n            {action.label}\n          </button>\n        )}\n      </div>\n    </header>\n  );\n}\n"],"mappings":";AA8BQ,SAME,KANF;AA3BR,SAAS,iBAAiB;AAC1B,SAAS,iBAAiB;AAYnB,SAAS,aAAa,EAAE,OAAO,QAAQ,OAAO,GAAsB;AACzE,QAAM,SAAS,UAAU;AAEzB,QAAM,aAAa,MAAM;AACvB,QAAI,OAAQ,QAAO;AAAA,QACd,QAAO,KAAK;AAAA,EACnB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,2BAA2B;AAAA,MAEhD,+BAAC,SAAI,WAAU,+CACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YACV,cAAW;AAAA,YAEX;AAAA,kCAAC,aAAU,WAAU,UAAS,aAAa,GAAG;AAAA,cAC9C,oBAAC,UAAK,WAAU,0EACb,iBACH;AAAA;AAAA;AAAA,QACF;AAAA,QACC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,OAAO;AAAA,YAChB,WAAU;AAAA,YACV,cAAY,OAAO;AAAA,YAElB;AAAA,qBAAO,QAAQ,oBAAC,OAAO,MAAP,EAAY,WAAU,WAAU;AAAA,cAChD,OAAO;AAAA;AAAA;AAAA,QACV;AAAA,SAEJ;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/mobile/mobile-page-header.d.ts

@@ -0,0 +1,20 @@
+import type { LucideIcon } from 'lucide-react';
+interface MobilePageHeaderProps {
+    title: string;
+    action?: {
+        label: string;
+        icon?: LucideIcon;
+        iconOnly?: boolean;
+        compact?: boolean;
+        onClick: () => void;
+    };
+}
+/**
+ * Bridge component: sets the screen header via context so MobileShell
+ * renders the iOS large-title MobileScreenHeader. Returns null — the
+ * actual header is rendered by MobileShell.
+ *
+ * All 20 existing consumers continue to work without changes.
+ */
+export declare function MobilePageHeader({ title, action }: MobilePageHeaderProps): null;
+export {};

package/dist/mobile/mobile-page-header.js

@@ -0,0 +1,30 @@
+"use client";
+import { useEffect } from "react";
+import {
+  useIsMobile,
+  useResponsiveDesktopPresentation
+} from "@withpotter/hooks/use-mobile";
+import { useMobileHeaderContext } from "./mobile-header-context";
+function MobilePageHeader({ title, action }) {
+  const isMobile = useIsMobile();
+  const responsiveDesktop = useResponsiveDesktopPresentation();
+  const { setScreenHeader, clearScreenHeader } = useMobileHeaderContext();
+  useEffect(() => {
+    if (!isMobile && !responsiveDesktop && !action) return;
+    setScreenHeader({ title, action });
+    return () => clearScreenHeader();
+  }, [
+    isMobile,
+    responsiveDesktop,
+    title,
+    action?.label,
+    action?.icon,
+    action?.iconOnly,
+    action?.compact
+  ]);
+  return null;
+}
+export {
+  MobilePageHeader
+};
+//# sourceMappingURL=mobile-page-header.js.map

package/dist/mobile/mobile-page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/mobile/mobile-page-header.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport type { LucideIcon } from 'lucide-react';\nimport {\n  useIsMobile,\n  useResponsiveDesktopPresentation,\n} from '@withpotter/hooks/use-mobile';\nimport { useMobileHeaderContext } from './mobile-header-context';\n\ninterface MobilePageHeaderProps {\n  title: string;\n  action?: {\n    label: string;\n    icon?: LucideIcon;\n    iconOnly?: boolean;\n    compact?: boolean;\n    onClick: () => void;\n  };\n}\n\n/**\n * Bridge component: sets the screen header via context so MobileShell\n * renders the iOS large-title MobileScreenHeader. Returns null — the\n * actual header is rendered by MobileShell.\n *\n * All 20 existing consumers continue to work without changes.\n */\nexport function MobilePageHeader({ title, action }: MobilePageHeaderProps) {\n  const isMobile = useIsMobile();\n  const responsiveDesktop = useResponsiveDesktopPresentation();\n  const { setScreenHeader, clearScreenHeader } = useMobileHeaderContext();\n\n  useEffect(() => {\n    if (!isMobile && !responsiveDesktop && !action) return;\n    setScreenHeader({ title, action });\n    return () => clearScreenHeader();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isMobile,\n    responsiveDesktop,\n    title,\n    action?.label,\n    action?.icon,\n    action?.iconOnly,\n    action?.compact,\n  ]);\n\n  return null;\n}\n"],"mappings":";AAEA,SAAS,iBAAiB;AAE1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,8BAA8B;AAoBhC,SAAS,iBAAiB,EAAE,OAAO,OAAO,GAA0B;AACzE,QAAM,WAAW,YAAY;AAC7B,QAAM,oBAAoB,iCAAiC;AAC3D,QAAM,EAAE,iBAAiB,kBAAkB,IAAI,uBAAuB;AAEtE,YAAU,MAAM;AACd,QAAI,CAAC,YAAY,CAAC,qBAAqB,CAAC,OAAQ;AAChD,oBAAgB,EAAE,OAAO,OAAO,CAAC;AACjC,WAAO,MAAM,kBAAkB;AAAA,EAEjC,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV,CAAC;AAED,SAAO;AACT;","names":[]}