@withpotter/components 0.13.0-next.101

package/dist/help/support-cases-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/help/support-cases-view.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useQuery } from '@tanstack/react-query';\nimport { LifeBuoy } from 'lucide-react';\nimport {\n  Button,\n  FilterBar,\n  FilterField,\n  ListStates,\n  Select,\n  StackedCell,\n  StateView,\n  TableRow,\n  TableShell,\n  Th,\n} from '@withpotter/ui-kit';\nimport { useAuth } from '@withpotter/lib/auth-context';\nimport { usePermissions } from '@withpotter/lib/use-permissions';\nimport {\n  serviceOperationsApi,\n  type ServiceCaseStatus,\n} from '@withpotter/lib/service-operations-api';\nimport {\n  formatSupportAge,\n  STATUS_FILTER_OPTIONS,\n  SupportStatus,\n} from '@withpotter/components/support/support-case-ui';\n\n/**\n * Your cases, as a tab of the Support center rather than a page of its own.\n *\n * It was `/dashboard/support`, a separate screen with a different title, a\n * breadcrumb back to Help and its own button, so the cases and the answers read\n * as two products. They are one place now: the same title, the same toolbar and\n * the same Start a case, with this under the second tab. Starting a case is the\n * page's job, not this list's, so it arrives as `onStartCase`.\n */\nexport function SupportCasesView({\n  onStartCase,\n  onOpenCase,\n  openCaseId,\n}: {\n  onStartCase: () => void;\n  /** Open a case in the conversation shell beside the page. */\n  onOpenCase: (id: string) => void;\n  /** The case the shell is showing, so its row can say so. */\n  openCaseId?: string | null;\n}) {\n  const { tenant } = useAuth();\n  const { can, loading: permissionsLoading } = usePermissions();\n  const [search, setSearch] = useState('');\n  const [status, setStatus] = useState('');\n  const [page, setPage] = useState(1);\n\n  /**\n   * NO PERMISSION GATE. Asking Box for help is not a privilege, and this\n   * screen used to say otherwise: it required `canManageCommunications`, which\n   * 16 of the 19 shipped roles do not carry, so a store manager who hit a bug\n   * mid-shift was told \"Support is not yours to open\" — at the one moment a\n   * person most needs the door. The api opens it to every active member now\n   * and narrows the ANSWER instead: you see your own cases unless you are the\n   * owner or handle communications, in which case you see the workspace's.\n   *\n   * `can` is still read, but only to word the empty state — whose cases these\n   * are is worth saying, and it is the one thing the list itself cannot show.\n   */\n  const seesEveryCase = can('canManageCommunications');\n\n  const cases = useQuery({\n    queryKey: ['support-cases', tenant?.slug, status, search, page],\n    queryFn: () =>\n      serviceOperationsApi.list(tenant!.slug, {\n        status: (status || undefined) as ServiceCaseStatus | undefined,\n        search: search || undefined,\n        page,\n      }),\n    enabled: Boolean(tenant?.slug),\n  });\n\n  const rows = cases.data?.items ?? [];\n  const narrowed = Boolean(search || status);\n\n  return (\n    <ListStates\n      framed\n      loading={cases.isLoading || permissionsLoading}\n      isEmpty={rows.length === 0}\n      error={cases.isError ? 'Your cases could not be loaded.' : null}\n      onRetry={() => void cases.refetch()}\n      empty={\n        narrowed ? (\n          <StateView\n            kind=\"empty\"\n            icon={LifeBuoy}\n            title=\"Nothing matches\"\n            description=\"Try a different search, or clear the filter.\"\n            action={{\n              label: 'Clear filters',\n              onClick: () => {\n                setSearch('');\n                setStatus('');\n                setPage(1);\n              },\n            }}\n          />\n        ) : (\n          /* The header already offers this, and it is offered again here on\n               purpose: on an empty page the header button is small and in the\n               far corner, and this is where the eye already is. */\n          <StateView\n            kind=\"empty\"\n            icon={LifeBuoy}\n            title=\"No cases yet\"\n            description={\n              seesEveryCase\n                ? 'Ask us anything. A payout that has not arrived, a screen that will not behave, an idea you want built. Every reply lands back here.'\n                : 'Ask us anything. A screen that will not behave, something you cannot get into, an idea you want built. Every reply lands back here.'\n            }\n            action={{\n              label: 'Start a case',\n              onClick: onStartCase,\n            }}\n          />\n        )\n      }\n    >\n      <TableShell\n        minWidth={640}\n        toolbar={\n          <FilterBar\n            toolbar\n            search={search}\n            onSearchChange={(value) => {\n              setSearch(value);\n              setPage(1);\n            }}\n            placeholder=\"Search subject or case number…\"\n            activeCount={status ? 1 : 0}\n          >\n            <FilterField label=\"Status\">\n              <Select\n                value={status}\n                onChange={(value) => {\n                  setStatus(value);\n                  setPage(1);\n                }}\n                options={STATUS_FILTER_OPTIONS}\n                ariaLabel=\"Filter by status\"\n              />\n            </FilterField>\n          </FilterBar>\n        }\n        footer={\n          cases.data && cases.data.total > cases.data.pageSize ? (\n            <div className=\"flex items-center justify-between gap-3 px-4 py-3 text-sm text-[var(--text-tertiary)]\">\n              <span>{cases.data.total} cases</span>\n              <div className=\"flex gap-2\">\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  disabled={page === 1}\n                  onClick={() => setPage((value) => value - 1)}\n                >\n                  Previous\n                </Button>\n                <Button\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  disabled={page * cases.data.pageSize >= cases.data.total}\n                  onClick={() => setPage((value) => value + 1)}\n                >\n                  Next\n                </Button>\n              </div>\n            </div>\n          ) : undefined\n        }\n        head={\n          <tr>\n            <Th>Case</Th>\n            <Th>Status</Th>\n            <Th>Last activity</Th>\n          </tr>\n        }\n      >\n        {rows.map((serviceCase) => (\n          <TableRow\n            key={serviceCase.id}\n            active={serviceCase.id === openCaseId}\n            onClick={() => onOpenCase(serviceCase.id)}\n          >\n            <td className=\"px-4 py-3\">\n              <StackedCell\n                value={serviceCase.subject}\n                sub={serviceCase.reference}\n              />\n            </td>\n            <td className=\"px-4 py-3\">\n              <SupportStatus status={serviceCase.status} />\n            </td>\n            <td className=\"px-4 py-3 text-sm text-[var(--text-tertiary)]\">\n              {formatSupportAge(serviceCase.updatedAt)}\n            </td>\n          </TableRow>\n        ))}\n      </TableShell>\n    </ListStates>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/image-upload-modal.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { type UploadResult } from '@withpotter/lib/media-service';
+export interface ImageUploadModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSuccess: (result: UploadResult & {
+        alt?: string;
+    }) => void;
+    title?: string;
+    aspectRatio?: number;
+    initialUrl?: string;
+    initialAlt?: string;
+    accept?: string;
+}
+/**
+ * Configuration for opening the shared image upload modal.
+ * Used by ImageUploadContext to avoid per-field modal instances.
+ */
+export interface ImageUploadRequest {
+    onSuccess: (result: UploadResult & {
+        alt?: string;
+    }) => void;
+    title?: string;
+    aspectRatio?: number;
+    initialUrl?: string;
+    initialAlt?: string;
+    accept?: string;
+}
+declare global {
+    interface Window {
+        FilerobotImageEditor: {
+            new (container: HTMLElement, config: Record<string, unknown>): {
+                render: (config?: Record<string, unknown>) => void;
+                terminate: () => void;
+            };
+            TABS: {
+                ADJUST: string;
+                FINETUNE: string;
+                FILTERS: string;
+                ANNOTATE: string;
+                WATERMARK: string;
+                RESIZE: string;
+            };
+            TOOLS: Record<string, string>;
+        };
+    }
+}
+export declare function ImageUploadModal({ isOpen, onClose, onSuccess, title, aspectRatio, initialUrl, initialAlt, accept, }: ImageUploadModalProps): React.JSX.Element | null;

package/dist/image-upload-modal.js

@@ -0,0 +1,519 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BRAND_PRIMARY, BRAND_PRIMARY_DARK } from "@withpotter/lib/brand";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { X, Upload, Link2, Check, Pencil } from "lucide-react";
+import { BoxesLoader } from "@withpotter/ui-kit/boxes-loader";
+import {
+  uploadImageWithAutoCompress,
+  isCloudinaryEnabled
+} from "@withpotter/lib/media-service";
+import { Button } from "@withpotter/ui-kit/button";
+import { Dropzone } from "@withpotter/ui-kit/dropzone";
+import { Input } 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 inferMediaKindFromMime(mimetype) {
+  return mimetype?.startsWith("video/") ? "video" : "image";
+}
+function inferMediaKindFromUrl(url) {
+  return /\.(mp4|mov|webm)(\?.*)?$/i.test(url) ? "video" : "image";
+}
+function isFileAccepted(file, accept) {
+  const normalized = accept.trim();
+  if (!normalized) return true;
+  const tokens = normalized.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const mime = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return tokens.some((token) => {
+    if (token === "*/*") return true;
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) {
+      const prefix = token.slice(0, token.length - 1);
+      return mime.startsWith(prefix);
+    }
+    return mime === token;
+  });
+}
+function ImageEditorCDN({
+  source,
+  onSave,
+  onClose
+}) {
+  const containerRef = useRef(null);
+  const editorRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const script = document.querySelector(
+      'script[src*="filerobot-image-editor"]'
+    );
+    const initEditor = () => {
+      if (!containerRef.current || !window.FilerobotImageEditor) {
+        setError("Editor not available");
+        setIsLoading(false);
+        return;
+      }
+      try {
+        const { TABS } = window.FilerobotImageEditor;
+        const filerobotImageEditor = new window.FilerobotImageEditor(
+          containerRef.current,
+          {
+            source,
+            onSave: (editedImageObject) => {
+              onSave(editedImageObject);
+            },
+            annotationsCommon: {
+              fill: BRAND_PRIMARY
+            },
+            Text: { text: "Add text..." },
+            Rotate: { angle: 90, componentType: "slider" },
+            Crop: {
+              presetsItems: [
+                { titleKey: "classicTv", descriptionKey: "4:3", ratio: 4 / 3 },
+                {
+                  titleKey: "cinemascope",
+                  descriptionKey: "16:9",
+                  ratio: 16 / 9
+                },
+                { titleKey: "square", descriptionKey: "1:1", ratio: 1 },
+                { titleKey: "portrait", descriptionKey: "9:16", ratio: 9 / 16 }
+              ],
+              autoResize: true
+            },
+            tabsIds: [
+              TABS.ADJUST,
+              TABS.FINETUNE,
+              TABS.FILTERS,
+              TABS.ANNOTATE,
+              TABS.RESIZE
+            ],
+            defaultTabId: TABS.ADJUST,
+            defaultToolId: "Crop",
+            savingPixelRatio: 1,
+            previewPixelRatio: 1,
+            defaultSavedImageName: "product-image",
+            defaultSavedImageType: "jpeg",
+            defaultSavedImageQuality: 0.85,
+            avoidChangesNotSavedAlertOnLeave: true,
+            theme: {
+              palette: {
+                "accent-primary": BRAND_PRIMARY,
+                "accent-primary-active": BRAND_PRIMARY_DARK,
+                "bg-primary-active": "#ECF3FF",
+                warning: BRAND_PRIMARY,
+                error: BRAND_PRIMARY
+              },
+              typography: {
+                fontFamily: 'var(--font-body), Commissioner, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+              }
+            }
+          }
+        );
+        filerobotImageEditor.render({
+          onClose: () => {
+            filerobotImageEditor.terminate();
+            onClose();
+          }
+        });
+        editorRef.current = filerobotImageEditor;
+        setIsLoading(false);
+      } catch (err) {
+        console.error("Failed to initialize editor:", err);
+        setError("Failed to initialize editor");
+        setIsLoading(false);
+      }
+    };
+    if (window.FilerobotImageEditor) {
+      initEditor();
+    } else if (script) {
+      script.addEventListener("load", initEditor);
+    } else {
+      const newScript = document.createElement("script");
+      newScript.src = "https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js";
+      newScript.async = true;
+      newScript.onload = initEditor;
+      newScript.onerror = () => {
+        setError("Failed to load editor script");
+        setIsLoading(false);
+      };
+      document.body.appendChild(newScript);
+    }
+    return () => {
+      if (editorRef.current && typeof editorRef.current.terminate === "function") {
+        editorRef.current.terminate();
+      }
+    };
+  }, [source, onSave, onClose]);
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full bg-[#1a1a1a]", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center px-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[var(--error)] text-sm", children: error }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: "Go back" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
+    isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-[#1a1a1a] z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(BoxesLoader, { size: "lg" }),
+      /* @__PURE__ */ jsx("p", { className: "text-white text-sm", children: "Loading editor..." })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full" })
+  ] });
+}
+function ImageUploadModal({
+  isOpen,
+  onClose,
+  onSuccess,
+  title = "Upload image",
+  aspectRatio,
+  initialUrl,
+  initialAlt = "",
+  accept = DEFAULT_ACCEPT
+}) {
+  const [view, setView] = useState("upload");
+  const [mode, setMode] = useState("upload");
+  const [preview, setPreview] = useState(initialUrl || null);
+  const [altText, setAltText] = useState(initialAlt);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [error, setError] = useState(null);
+  const [urlInput, setUrlInput] = useState("");
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [previewKind, setPreviewKind] = useState("image");
+  const fileInputRef = useRef(null);
+  const objectUrlRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      setView("upload");
+      setMode("upload");
+      setPreview(initialUrl || null);
+      setAltText(initialAlt);
+      setError(null);
+      setUrlInput("");
+      setSelectedFile(null);
+      setUploadProgress(0);
+      setPreviewKind(initialUrl ? inferMediaKindFromUrl(initialUrl) : "image");
+    }
+  }, [isOpen, initialUrl, initialAlt]);
+  useEffect(() => {
+    return () => {
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+        objectUrlRef.current = null;
+      }
+    };
+  }, []);
+  const handleFile = useCallback(
+    (file) => {
+      if (!isFileAccepted(file, accept)) {
+        setError("This file type is not allowed for this field");
+        return;
+      }
+      const mediaKind = inferMediaKindFromMime(file.type);
+      const maxSize = mediaKind === "video" ? VIDEO_MAX_SIZE : IMAGE_MAX_SIZE;
+      if (file.size > maxSize) {
+        const limitLabel = mediaKind === "video" ? "100MB" : "10MB";
+        setError(`File size must be less than ${limitLabel}`);
+        return;
+      }
+      setError(null);
+      setSelectedFile(file);
+      setPreviewKind(mediaKind);
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current);
+        objectUrlRef.current = null;
+      }
+      if (mediaKind === "video") {
+        const objectUrl = URL.createObjectURL(file);
+        objectUrlRef.current = objectUrl;
+        setPreview(objectUrl);
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPreview(e.target?.result);
+      };
+      reader.readAsDataURL(file);
+    },
+    [accept]
+  );
+  const handleUrlSubmit = useCallback(() => {
+    const url = urlInput.trim();
+    if (!url) return;
+    try {
+      new URL(url);
+      setError(null);
+      setPreview(url);
+      setPreviewKind(inferMediaKindFromUrl(url));
+      setSelectedFile(null);
+    } catch {
+      setError("Please enter a valid URL");
+    }
+  }, [urlInput]);
+  const handleEditImage = useCallback(() => {
+    if (preview && previewKind === "image") {
+      setView("editor");
+    }
+  }, [preview, previewKind]);
+  const handleEditorSave = useCallback(
+    (editedImageObject) => {
+      if (editedImageObject.imageBase64) {
+        fetch(editedImageObject.imageBase64).then((res) => res.blob()).then((blob) => {
+          const file = new File([blob], "edited-image.png", {
+            type: "image/png"
+          });
+          setSelectedFile(file);
+          setPreview(editedImageObject.imageBase64 || null);
+          setView("upload");
+        });
+      }
+    },
+    []
+  );
+  const handleSave = async () => {
+    if (!preview) return;
+    setUploading(true);
+    setUploadProgress(0);
+    setError(null);
+    try {
+      let result;
+      const handleProgress = (progress) => {
+        setUploadProgress(5 + Math.round(progress * 0.9));
+      };
+      if (selectedFile && isCloudinaryEnabled) {
+        result = await uploadImageWithAutoCompress(selectedFile, handleProgress);
+      } else if (preview.startsWith("data:")) {
+        const response = await fetch(preview);
+        const blob = await response.blob();
+        const file = new File([blob], "image.png", { type: "image/png" });
+        result = await uploadImageWithAutoCompress(file, handleProgress);
+      } else {
+        setUploadProgress(100);
+        result = {
+          url: preview,
+          publicId: preview,
+          resourceType: previewKind,
+          width: 0,
+          height: 0,
+          format: "unknown",
+          isCloudinary: false
+        };
+      }
+      setUploadProgress(100);
+      onSuccess({ ...result, alt: altText });
+      onClose();
+    } catch (err) {
+      console.error("Upload failed:", err);
+      setError(err instanceof Error ? err.message : "Failed to upload image");
+    } finally {
+      setUploading(false);
+      setUploadProgress(0);
+    }
+  };
+  if (!isOpen) return null;
+  if (view === "editor" && preview) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[var(--z-modal)] bg-black", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
+      ImageEditorCDN,
+      {
+        source: preview,
+        onSave: handleEditorSave,
+        onClose: () => setView("upload")
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-4 bg-black/60 modal-scrim", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-lg bg-[var(--bg-base)] rounded-md shadow-2xl flex flex-col max-h-[calc(100vh-2rem)] sm:max-h-[calc(100dvh-2rem)] modal-in", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-4 border-b border-[var(--border-subtle)] shrink-0", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-[var(--text-primary)]", children: title }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          children: /* @__PURE__ */ jsx(X, { className: "size-5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 p-1 bg-[var(--bg-muted)] rounded-md", children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setMode("upload"),
+            className: `flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${mode === "upload" ? "bg-[var(--bg-base)] text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
+            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 px-4 py-2 text-sm font-medium rounded-md transition-colors ${mode === "url" ? "bg-[var(--bg-base)] text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
+            children: [
+              /* @__PURE__ */ jsx(Link2, { className: "size-4" }),
+              "URL"
+            ]
+          }
+        )
+      ] }),
+      preview && /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative overflow-x-auto rounded-md bg-[var(--bg-muted)] max-h-[30vh] sm:max-h-[40vh]",
+            style: { aspectRatio: aspectRatio || "auto" },
+            children: [
+              previewKind === "video" ? /* @__PURE__ */ jsx(
+                "video",
+                {
+                  src: preview,
+                  controls: true,
+                  className: "w-full h-full object-contain"
+                }
+              ) : (
+                // eslint-disable-next-line @next/next/no-img-element
+                /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: preview,
+                    alt: "Preview",
+                    className: "w-full h-full object-contain"
+                  }
+                )
+              ),
+              previewKind === "image" && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute bottom-3 left-1/2 -translate-x-1/2",
+                  onClick: handleEditImage,
+                  children: [
+                    /* @__PURE__ */ jsx(Pencil, { className: "size-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Edit image" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3", children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-[var(--text-secondary)] mb-1", children: "Alt text (optional)" }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: altText,
+              onChange: (e) => setAltText(e.target.value),
+              placeholder: "Describe this image for accessibility"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "absolute top-2 right-2",
+            onClick: () => {
+              setPreview(null);
+              setPreviewKind("image");
+              setSelectedFile(null);
+              setUrlInput("");
+              if (objectUrlRef.current) {
+                URL.revokeObjectURL(objectUrlRef.current);
+                objectUrlRef.current = null;
+              }
+              if (fileInputRef.current) {
+                fileInputRef.current.value = "";
+              }
+            },
+            children: /* @__PURE__ */ jsx(X, { className: "size-4 text-[var(--text-secondary)]" })
+          }
+        )
+      ] }),
+      !preview && mode === "upload" ? /* @__PURE__ */ jsx(
+        Dropzone,
+        {
+          accept,
+          label: "Drop an image here, or browse",
+          hint: "Images up to 10MB, videos up to 100MB",
+          onFiles: (files) => {
+            if (files[0]) handleFile(files[0]);
+          }
+        }
+      ) : !preview && mode === "url" ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "url",
+              value: urlInput,
+              onChange: (e) => setUrlInput(e.target.value),
+              onKeyDown: (e) => e.key === "Enter" && handleUrlSubmit(),
+              placeholder: "https://example.com/image.jpg",
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { onClick: handleUrlSubmit, disabled: !urlInput.trim(), children: "Load" })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--text-tertiary)]", children: "Enter the URL of an image from the web" })
+      ] }) : null,
+      error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--error)] bg-[var(--error-bg)] rounded-md", children: error })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 py-4 border-t border-[var(--border-subtle)] bg-[var(--bg-subtle)] shrink-0", children: [
+      uploading && /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-[var(--text-secondary)] mb-1", children: [
+          /* @__PURE__ */ jsx("span", { children: "Uploading..." }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            uploadProgress,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "w-full h-2 bg-[var(--bg-muted)] rounded-full overflow-x-auto", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full bg-brand-500 rounded-full transition duration-[var(--motion-slow)] ease-out",
+            style: { width: `${uploadProgress}%` }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            disabled: uploading,
+            className: "px-4 py-2 text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors disabled:opacity-50",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "min-w-[100px]",
+            onClick: handleSave,
+            disabled: uploading || !preview,
+            children: uploading ? /* @__PURE__ */ jsxs("span", { children: [
+              uploadProgress,
+              "%"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Check, { className: "size-4" }),
+              "Save"
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  ImageUploadModal
+};
+//# sourceMappingURL=image-upload-modal.js.map

package/dist/image-upload-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-upload-modal.tsx"],"sourcesContent":["'use client';\n\nimport { BRAND_PRIMARY, BRAND_PRIMARY_DARK } from '@withpotter/lib/brand';\nimport React, { useState, useRef, useCallback, useEffect } from 'react';\nimport { X, Upload, Link2, Check, Pencil } from 'lucide-react';\nimport { BoxesLoader } from '@withpotter/ui-kit/boxes-loader';\nimport {\n  uploadImageWithAutoCompress,\n  isCloudinaryEnabled,\n  type UploadResult,\n} from '@withpotter/lib/media-service';\nimport { Button } from '@withpotter/ui-kit/button';\nimport { Dropzone } from '@withpotter/ui-kit/dropzone';\nimport { Input, inputErrorClass } from '@withpotter/ui-kit';\n\nexport interface ImageUploadModalProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onSuccess: (result: UploadResult & { alt?: string }) => void;\n  title?: string;\n  aspectRatio?: number;\n  initialUrl?: string;\n  initialAlt?: string;\n  accept?: string;\n}\n\n/**\n * Configuration for opening the shared image upload modal.\n * Used by ImageUploadContext to avoid per-field modal instances.\n */\nexport interface ImageUploadRequest {\n  onSuccess: (result: UploadResult & { alt?: string }) => void;\n  title?: string;\n  aspectRatio?: number;\n  initialUrl?: string;\n  initialAlt?: string;\n  accept?: string;\n}\n\ntype ModalView = 'upload' | 'editor';\ntype UploadMode = 'upload' | 'url';\ntype MediaKind = 'image' | 'video';\n\nconst DEFAULT_ACCEPT = '.png,.jpg,.jpeg,.gif,.webp';\nconst IMAGE_MAX_SIZE = 10 * 1024 * 1024;\nconst VIDEO_MAX_SIZE = 100 * 1024 * 1024;\n\nfunction inferMediaKindFromMime(mimetype?: string): MediaKind {\n  return mimetype?.startsWith('video/') ? 'video' : 'image';\n}\n\nfunction inferMediaKindFromUrl(url: string): MediaKind {\n  return /\\.(mp4|mov|webm)(\\?.*)?$/i.test(url) ? 'video' : 'image';\n}\n\nfunction isFileAccepted(file: File, accept: string): boolean {\n  const normalized = accept.trim();\n  if (!normalized) return true;\n\n  const tokens = normalized\n    .split(',')\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n\n  if (tokens.length === 0) return true;\n\n  const mime = file.type.toLowerCase();\n  const name = file.name.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token === '*/*') return true;\n    if (token.startsWith('.')) return name.endsWith(token);\n    if (token.endsWith('/*')) {\n      const prefix = token.slice(0, token.length - 1);\n      return mime.startsWith(prefix);\n    }\n    return mime === token;\n  });\n}\n\n// Declare the global FilerobotImageEditor type\ndeclare global {\n  interface Window {\n    FilerobotImageEditor: {\n      new (\n        container: HTMLElement,\n        config: Record<string, unknown>,\n      ): {\n        render: (config?: Record<string, unknown>) => void;\n        terminate: () => void;\n      };\n      TABS: {\n        ADJUST: string;\n        FINETUNE: string;\n        FILTERS: string;\n        ANNOTATE: string;\n        WATERMARK: string;\n        RESIZE: string;\n      };\n      TOOLS: Record<string, string>;\n    };\n  }\n}\n\n// Component that renders the Filerobot editor using the CDN version\nfunction ImageEditorCDN({\n  source,\n  onSave,\n  onClose,\n}: {\n  source: string;\n  onSave: (editedImageObject: { imageBase64?: string }) => void;\n  onClose: () => void;\n}) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const editorRef = useRef<ReturnType<\n    typeof window.FilerobotImageEditor.prototype.render\n  > | null>(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const script = document.querySelector(\n      'script[src*=\"filerobot-image-editor\"]',\n    );\n\n    const initEditor = () => {\n      if (!containerRef.current || !window.FilerobotImageEditor) {\n        setError('Editor not available');\n        setIsLoading(false);\n        return;\n      }\n\n      try {\n        const { TABS } = window.FilerobotImageEditor;\n\n        const filerobotImageEditor = new window.FilerobotImageEditor(\n          containerRef.current,\n          {\n            source: source,\n            onSave: (editedImageObject: { imageBase64?: string }) => {\n              onSave(editedImageObject);\n            },\n            annotationsCommon: {\n              fill: BRAND_PRIMARY,\n            },\n            Text: { text: 'Add text...' },\n            Rotate: { angle: 90, componentType: 'slider' },\n            Crop: {\n              presetsItems: [\n                { titleKey: 'classicTv', descriptionKey: '4:3', ratio: 4 / 3 },\n                {\n                  titleKey: 'cinemascope',\n                  descriptionKey: '16:9',\n                  ratio: 16 / 9,\n                },\n                { titleKey: 'square', descriptionKey: '1:1', ratio: 1 },\n                { titleKey: 'portrait', descriptionKey: '9:16', ratio: 9 / 16 },\n              ],\n              autoResize: true,\n            },\n            tabsIds: [\n              TABS.ADJUST,\n              TABS.FINETUNE,\n              TABS.FILTERS,\n              TABS.ANNOTATE,\n              TABS.RESIZE,\n            ],\n            defaultTabId: TABS.ADJUST,\n            defaultToolId: 'Crop',\n            savingPixelRatio: 1,\n            previewPixelRatio: 1,\n            defaultSavedImageName: 'product-image',\n            defaultSavedImageType: 'jpeg',\n            defaultSavedImageQuality: 0.85,\n            avoidChangesNotSavedAlertOnLeave: true,\n            theme: {\n              palette: {\n                'accent-primary': BRAND_PRIMARY,\n                'accent-primary-active': BRAND_PRIMARY_DARK,\n                'bg-primary-active': '#ECF3FF',\n                warning: BRAND_PRIMARY,\n                error: BRAND_PRIMARY,\n              },\n              typography: {\n                fontFamily:\n                  'var(--font-body), Commissioner, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n              },\n            },\n          },\n        );\n\n        filerobotImageEditor.render({\n          onClose: () => {\n            filerobotImageEditor.terminate();\n            onClose();\n          },\n        });\n\n        editorRef.current = filerobotImageEditor;\n        setIsLoading(false);\n      } catch (err) {\n        console.error('Failed to initialize editor:', err);\n        setError('Failed to initialize editor');\n        setIsLoading(false);\n      }\n    };\n\n    // If script already loaded\n    if (window.FilerobotImageEditor) {\n      initEditor();\n    } else if (script) {\n      // Wait for script to load\n      script.addEventListener('load', initEditor);\n    } else {\n      // Load script dynamically\n      const newScript = document.createElement('script');\n      newScript.src =\n        'https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js';\n      newScript.async = true;\n      newScript.onload = initEditor;\n      newScript.onerror = () => {\n        setError('Failed to load editor script');\n        setIsLoading(false);\n      };\n      document.body.appendChild(newScript);\n    }\n\n    return () => {\n      if (\n        editorRef.current &&\n        typeof editorRef.current.terminate === 'function'\n      ) {\n        editorRef.current.terminate();\n      }\n    };\n  }, [source, onSave, onClose]);\n\n  if (error) {\n    return (\n      <div className=\"flex items-center justify-center h-full bg-[#1a1a1a]\">\n        <div className=\"flex flex-col items-center gap-3 text-center px-4\">\n          <p className=\"text-[var(--error)] text-sm\">{error}</p>\n          <Button variant=\"ghost\" onClick={onClose}>\n            Go back\n          </Button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"relative w-full h-full\">\n      {isLoading && (\n        <div className=\"absolute inset-0 flex items-center justify-center bg-[#1a1a1a] z-10\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <BoxesLoader size=\"lg\" />\n            <p className=\"text-white text-sm\">Loading editor...</p>\n          </div>\n        </div>\n      )}\n      <div ref={containerRef} className=\"w-full h-full\" />\n    </div>\n  );\n}\n\nexport function ImageUploadModal({\n  isOpen,\n  onClose,\n  onSuccess,\n  title = 'Upload image',\n  aspectRatio,\n  initialUrl,\n  initialAlt = '',\n  accept = DEFAULT_ACCEPT,\n}: ImageUploadModalProps) {\n  const [view, setView] = useState<ModalView>('upload');\n  const [mode, setMode] = useState<UploadMode>('upload');\n  const [preview, setPreview] = useState<string | null>(initialUrl || null);\n  const [altText, setAltText] = useState(initialAlt);\n  const [uploading, setUploading] = useState(false);\n  const [uploadProgress, setUploadProgress] = useState(0);\n  const [error, setError] = useState<string | null>(null);\n  const [urlInput, setUrlInput] = useState('');\n  const [selectedFile, setSelectedFile] = useState<File | null>(null);\n  const [previewKind, setPreviewKind] = useState<MediaKind>('image');\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const objectUrlRef = useRef<string | null>(null);\n\n  // Reset state when modal opens/closes\n  useEffect(() => {\n    if (isOpen) {\n      setView('upload');\n      setMode('upload');\n      setPreview(initialUrl || null);\n      setAltText(initialAlt);\n      setError(null);\n      setUrlInput('');\n      setSelectedFile(null);\n      setUploadProgress(0);\n      setPreviewKind(initialUrl ? inferMediaKindFromUrl(initialUrl) : 'image');\n    }\n  }, [isOpen, 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 (!isFileAccepted(file, accept)) {\n        setError('This file type is not allowed for this field');\n        return;\n      }\n\n      const mediaKind = inferMediaKindFromMime(file.type);\n      const maxSize = mediaKind === 'video' ? VIDEO_MAX_SIZE : IMAGE_MAX_SIZE;\n      if (file.size > maxSize) {\n        const limitLabel = mediaKind === 'video' ? '100MB' : '10MB';\n        setError(`File size must be less than ${limitLabel}`);\n        return;\n      }\n\n      setError(null);\n      setSelectedFile(file);\n      setPreviewKind(mediaKind);\n\n      if (objectUrlRef.current) {\n        URL.revokeObjectURL(objectUrlRef.current);\n        objectUrlRef.current = null;\n      }\n\n      if (mediaKind === 'video') {\n        const objectUrl = URL.createObjectURL(file);\n        objectUrlRef.current = objectUrl;\n        setPreview(objectUrl);\n        return;\n      }\n\n      const reader = new FileReader();\n      reader.onload = (e) => {\n        setPreview(e.target?.result as string);\n      };\n      reader.readAsDataURL(file);\n    },\n    [accept],\n  );\n\n  const handleUrlSubmit = useCallback(() => {\n    const url = urlInput.trim();\n    if (!url) return;\n\n    try {\n      new URL(url);\n      setError(null);\n      setPreview(url);\n      setPreviewKind(inferMediaKindFromUrl(url));\n      setSelectedFile(null);\n    } catch {\n      setError('Please enter a valid URL');\n    }\n  }, [urlInput]);\n\n  const handleEditImage = useCallback(() => {\n    if (preview && previewKind === 'image') {\n      setView('editor');\n    }\n  }, [preview, previewKind]);\n\n  const handleEditorSave = useCallback(\n    (editedImageObject: { imageBase64?: string }) => {\n      if (editedImageObject.imageBase64) {\n        // Convert base64 to file for upload\n        fetch(editedImageObject.imageBase64)\n          .then((res) => res.blob())\n          .then((blob) => {\n            const file = new File([blob], 'edited-image.png', {\n              type: 'image/png',\n            });\n            setSelectedFile(file);\n            setPreview(editedImageObject.imageBase64 || null);\n            setView('upload');\n          });\n      }\n    },\n    [],\n  );\n\n  const handleSave = async () => {\n    if (!preview) return;\n\n    setUploading(true);\n    setUploadProgress(0);\n    setError(null);\n\n    try {\n      let result: UploadResult;\n      const handleProgress = (progress: number) => {\n        setUploadProgress(5 + Math.round(progress * 0.9));\n      };\n\n      if (selectedFile && isCloudinaryEnabled) {\n        result = await uploadImageWithAutoCompress(selectedFile, handleProgress);\n      } else if (preview.startsWith('data:')) {\n        // It's a base64 - compress and upload\n        const response = await fetch(preview);\n        const blob = await response.blob();\n        const file = new File([blob], 'image.png', { type: 'image/png' });\n        result = await uploadImageWithAutoCompress(file, handleProgress);\n      } else {\n        // It's a URL - use as-is\n        setUploadProgress(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\n      setUploadProgress(100);\n      onSuccess({ ...result, alt: altText });\n      onClose();\n    } catch (err) {\n      console.error('Upload failed:', err);\n      setError(err instanceof Error ? err.message : 'Failed to upload image');\n    } finally {\n      setUploading(false);\n      setUploadProgress(0);\n    }\n  };\n\n  if (!isOpen) return null;\n\n  // Editor view - fullscreen dark UI\n  if (view === 'editor' && preview) {\n    return (\n      <div className=\"fixed inset-0 z-[var(--z-modal)] bg-black\">\n        <div className=\"w-full h-full\">\n          <ImageEditorCDN\n            source={preview}\n            onSave={handleEditorSave}\n            onClose={() => setView('upload')}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  // Upload view\n  return (\n    <div className=\"fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-4 bg-black/60 modal-scrim\">\n      <div className=\"w-full max-w-lg bg-[var(--bg-base)] rounded-md shadow-2xl flex flex-col max-h-[calc(100vh-2rem)] sm:max-h-[calc(100dvh-2rem)] modal-in\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between px-4 py-4 border-b border-[var(--border-subtle)] shrink-0\">\n          <h3 className=\"text-lg font-semibold text-[var(--text-primary)]\">\n            {title}\n          </h3>\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className=\"p-1 text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n\n        {/* Content */}\n        <div className=\"p-4 space-y-4\">\n          {/* Mode tabs */}\n          <div className=\"flex gap-2 p-1 bg-[var(--bg-muted)] rounded-md\">\n            <button\n              type=\"button\"\n              onClick={() => setMode('upload')}\n              className={`flex-1 flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium rounded-md transition-colors ${\n                mode === 'upload'\n                  ? 'bg-[var(--bg-base)] text-[var(--text-primary)]'\n                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'\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 px-4 py-2 text-sm font-medium rounded-md transition-colors ${\n                mode === 'url'\n                  ? 'bg-[var(--bg-base)] text-[var(--text-primary)]'\n                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'\n              }`}\n            >\n              <Link2 className=\"size-4\" />\n              URL\n            </button>\n          </div>\n\n          {/* Preview area */}\n          {preview && (\n            <div className=\"relative group\">\n              <div\n                className=\"relative overflow-x-auto rounded-md bg-[var(--bg-muted)] max-h-[30vh] sm:max-h-[40vh]\"\n                style={{ aspectRatio: aspectRatio || 'auto' }}\n              >\n                {previewKind === 'video' ? (\n                  <video\n                    src={preview}\n                    controls\n                    className=\"w-full h-full object-contain\"\n                  />\n                ) : (\n                  // eslint-disable-next-line @next/next/no-img-element\n                  <img\n                    src={preview}\n                    alt=\"Preview\"\n                    className=\"w-full h-full object-contain\"\n                  />\n                )}\n\n                {/* Edit overlay */}\n                {previewKind === 'image' && (\n                  <Button\n                    variant=\"ghost\"\n                    className=\"absolute bottom-3 left-1/2 -translate-x-1/2\"\n                    onClick={handleEditImage}\n                  >\n                    <Pencil className=\"size-4\" />\n                    <span className=\"text-sm font-medium\">Edit image</span>\n                  </Button>\n                )}\n              </div>\n\n              {/* Alt text input */}\n              <div className=\"mt-3\">\n                <label className=\"block text-sm font-medium text-[var(--text-secondary)] mb-1\">\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                />\n              </div>\n\n              {/* Clear button */}\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"absolute top-2 right-2\"\n                onClick={() => {\n                  setPreview(null);\n                  setPreviewKind('image');\n                  setSelectedFile(null);\n                  setUrlInput('');\n                  if (objectUrlRef.current) {\n                    URL.revokeObjectURL(objectUrlRef.current);\n                    objectUrlRef.current = null;\n                  }\n                  if (fileInputRef.current) {\n                    fileInputRef.current.value = '';\n                  }\n                }}\n              >\n                <X className=\"size-4 text-[var(--text-secondary)]\" />\n              </Button>\n            </div>\n          )}\n\n          {/* Upload/URL input area */}\n          {!preview && mode === 'upload' ? (\n            <Dropzone\n              accept={accept}\n              label=\"Drop an image here, or browse\"\n              hint=\"Images up to 10MB, videos up to 100MB\"\n              // Type and size are checked in `handleFile`, which knows the\n              // separate video ceiling; the zone hands the file straight over.\n              onFiles={(files) => {\n                if (files[0]) handleFile(files[0]);\n              }}\n            />\n          ) : !preview && mode === 'url' ? (\n            <div className=\"space-y-3\">\n              <div className=\"flex gap-2\">\n                <Input\n                  type=\"url\"\n                  value={urlInput}\n                  onChange={(e) => setUrlInput(e.target.value)}\n                  onKeyDown={(e) => e.key === 'Enter' && handleUrlSubmit()}\n                  placeholder=\"https://example.com/image.jpg\"\n                  className=\"flex-1\"\n                />\n                <Button onClick={handleUrlSubmit} disabled={!urlInput.trim()}>\n                  Load\n                </Button>\n              </div>\n              <p className=\"text-xs text-[var(--text-tertiary)]\">\n                Enter the URL of an image from the web\n              </p>\n            </div>\n          ) : null}\n\n          {/* Error message */}\n          {error && (\n            <div className=\"px-3 py-2 text-sm text-[var(--error)] bg-[var(--error-bg)] rounded-md\">\n              {error}\n            </div>\n          )}\n        </div>\n\n        {/* Footer — always visible */}\n        <div className=\"flex flex-col gap-3 px-4 py-4 border-t border-[var(--border-subtle)] bg-[var(--bg-subtle)] shrink-0\">\n          {/* Progress bar when uploading */}\n          {uploading && (\n            <div className=\"w-full\">\n              <div className=\"flex items-center justify-between text-xs text-[var(--text-secondary)] mb-1\">\n                <span>Uploading...</span>\n                <span>{uploadProgress}%</span>\n              </div>\n              <div className=\"w-full h-2 bg-[var(--bg-muted)] rounded-full overflow-x-auto\">\n                <div\n                  className=\"h-full bg-brand-500 rounded-full transition duration-[var(--motion-slow)] ease-out\"\n                  style={{ width: `${uploadProgress}%` }}\n                />\n              </div>\n            </div>\n          )}\n\n          <div className=\"flex items-center justify-end gap-3\">\n            <button\n              type=\"button\"\n              onClick={onClose}\n              disabled={uploading}\n              className=\"px-4 py-2 text-sm font-medium text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors disabled:opacity-50\"\n            >\n              Cancel\n            </button>\n            <Button\n              className=\"min-w-[100px]\"\n              onClick={handleSave}\n              disabled={uploading || !preview}\n            >\n              {uploading ? (\n                <span>{uploadProgress}%</span>\n              ) : (\n                <>\n                  <Check className=\"size-4\" />\n                  Save\n                </>\n              )}\n            </Button>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}