@proveanything/smartlinks-utils-ui 0.1.3 → 0.1.5

package/dist/chunk-4Z46C4MJ.js

@@ -0,0 +1,1090 @@
+import { cn } from './chunk-L7FQ52F5.js';
+import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Type, Search, Upload, Loader2, ChevronLeft, ChevronRight, X, CheckCircle2, AlertCircle, ChevronUp, ChevronDown, Trash2, Check } from 'lucide-react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/FontPicker/google-fonts.ts
+var gUrl = (family, weights = [300, 400, 500, 600, 700]) => {
+  const encoded = family.replace(/ /g, "+");
+  const wStr = weights.join(";");
+  return `https://fonts.googleapis.com/css2?family=${encoded}:wght@${wStr}&display=swap`;
+};
+var FONT_DEFS = [
+  // Sans-Serif
+  { family: "Inter", category: "sans-serif" },
+  { family: "Roboto", category: "sans-serif" },
+  { family: "Open Sans", category: "sans-serif" },
+  { family: "Lato", category: "sans-serif" },
+  { family: "Montserrat", category: "sans-serif" },
+  { family: "Poppins", category: "sans-serif" },
+  { family: "Nunito", category: "sans-serif" },
+  { family: "Raleway", category: "sans-serif" },
+  { family: "Work Sans", category: "sans-serif" },
+  { family: "DM Sans", category: "sans-serif" },
+  { family: "Manrope", category: "sans-serif" },
+  { family: "Plus Jakarta Sans", category: "sans-serif" },
+  { family: "Space Grotesk", category: "sans-serif" },
+  { family: "Outfit", category: "sans-serif" },
+  { family: "Sora", category: "sans-serif" },
+  { family: "Figtree", category: "sans-serif" },
+  { family: "Albert Sans", category: "sans-serif" },
+  { family: "Urbanist", category: "sans-serif" },
+  { family: "Lexend", category: "sans-serif" },
+  { family: "Red Hat Display", category: "sans-serif" },
+  { family: "Instrument Sans", category: "sans-serif" },
+  { family: "Geist", category: "sans-serif", weights: [400, 500, 600, 700] },
+  { family: "Onest", category: "sans-serif" },
+  { family: "General Sans", category: "sans-serif", weights: [400, 500, 600, 700] },
+  { family: "Satoshi", category: "sans-serif", weights: [400, 500, 700] },
+  { family: "Cabinet Grotesk", category: "sans-serif", weights: [400, 500, 700, 800] },
+  { family: "Switzer", category: "sans-serif", weights: [400, 500, 600, 700] },
+  { family: "Overpass", category: "sans-serif" },
+  { family: "Nunito Sans", category: "sans-serif" },
+  { family: "Source Sans 3", category: "sans-serif" },
+  { family: "PT Sans", category: "sans-serif", weights: [400, 700] },
+  { family: "Rubik", category: "sans-serif" },
+  { family: "Noto Sans", category: "sans-serif" },
+  { family: "Karla", category: "sans-serif" },
+  { family: "Mukta", category: "sans-serif" },
+  { family: "Libre Franklin", category: "sans-serif" },
+  { family: "Barlow", category: "sans-serif" },
+  { family: "Josefin Sans", category: "sans-serif" },
+  { family: "Quicksand", category: "sans-serif" },
+  { family: "Exo 2", category: "sans-serif" },
+  { family: "Mulish", category: "sans-serif" },
+  { family: "Cabin", category: "sans-serif" },
+  { family: "Archivo", category: "sans-serif" },
+  { family: "Catamaran", category: "sans-serif" },
+  { family: "Hind", category: "sans-serif" },
+  { family: "Asap", category: "sans-serif" },
+  // Serif
+  { family: "Playfair Display", category: "serif" },
+  { family: "Merriweather", category: "serif" },
+  { family: "Lora", category: "serif" },
+  { family: "Source Serif 4", category: "serif" },
+  { family: "PT Serif", category: "serif", weights: [400, 700] },
+  { family: "Noto Serif", category: "serif" },
+  { family: "Crimson Text", category: "serif", weights: [400, 600, 700] },
+  { family: "Libre Baskerville", category: "serif", weights: [400, 700] },
+  { family: "DM Serif Display", category: "serif", weights: [400] },
+  { family: "DM Serif Text", category: "serif", weights: [400] },
+  { family: "Cormorant Garamond", category: "serif" },
+  { family: "EB Garamond", category: "serif" },
+  { family: "Bitter", category: "serif" },
+  { family: "Vollkorn", category: "serif" },
+  { family: "Spectral", category: "serif" },
+  { family: "Fraunces", category: "serif" },
+  { family: "Newsreader", category: "serif" },
+  { family: "Instrument Serif", category: "serif", weights: [400] },
+  { family: "Literata", category: "serif" },
+  { family: "Brygada 1918", category: "serif" },
+  { family: "Bodoni Moda", category: "serif" },
+  { family: "Cardo", category: "serif", weights: [400, 700] },
+  { family: "Baskervville", category: "serif", weights: [400] },
+  { family: "Cormorant", category: "serif" },
+  { family: "Young Serif", category: "serif", weights: [400] },
+  // Display
+  { family: "Bebas Neue", category: "display", weights: [400] },
+  { family: "Oswald", category: "display" },
+  { family: "Righteous", category: "display", weights: [400] },
+  { family: "Alfa Slab One", category: "display", weights: [400] },
+  { family: "Abril Fatface", category: "display", weights: [400] },
+  { family: "Lobster", category: "display", weights: [400] },
+  { family: "Comfortaa", category: "display" },
+  { family: "Fredoka", category: "display" },
+  { family: "Titan One", category: "display", weights: [400] },
+  { family: "Bungee", category: "display", weights: [400] },
+  { family: "Secular One", category: "display", weights: [400] },
+  { family: "Lilita One", category: "display", weights: [400] },
+  { family: "Passion One", category: "display", weights: [400, 700] },
+  { family: "Fugaz One", category: "display", weights: [400] },
+  { family: "Russo One", category: "display", weights: [400] },
+  { family: "Paytone One", category: "display", weights: [400] },
+  { family: "Black Ops One", category: "display", weights: [400] },
+  { family: "Permanent Marker", category: "display", weights: [400] },
+  { family: "Shrikhand", category: "display", weights: [400] },
+  { family: "Chivo", category: "display" },
+  { family: "Staatliches", category: "display", weights: [400] },
+  // Handwriting
+  { family: "Dancing Script", category: "handwriting" },
+  { family: "Pacifico", category: "handwriting", weights: [400] },
+  { family: "Caveat", category: "handwriting" },
+  { family: "Satisfy", category: "handwriting", weights: [400] },
+  { family: "Great Vibes", category: "handwriting", weights: [400] },
+  { family: "Sacramento", category: "handwriting", weights: [400] },
+  { family: "Kalam", category: "handwriting" },
+  { family: "Indie Flower", category: "handwriting", weights: [400] },
+  { family: "Shadows Into Light", category: "handwriting", weights: [400] },
+  { family: "Amatic SC", category: "handwriting", weights: [400, 700] },
+  { family: "Handlee", category: "handwriting", weights: [400] },
+  { family: "Patrick Hand", category: "handwriting", weights: [400] },
+  { family: "Architects Daughter", category: "handwriting", weights: [400] },
+  { family: "Courgette", category: "handwriting", weights: [400] },
+  { family: "Cookie", category: "handwriting", weights: [400] },
+  // Monospace
+  { family: "JetBrains Mono", category: "monospace" },
+  { family: "Fira Code", category: "monospace" },
+  { family: "Source Code Pro", category: "monospace" },
+  { family: "Roboto Mono", category: "monospace" },
+  { family: "Space Mono", category: "monospace", weights: [400, 700] },
+  { family: "IBM Plex Mono", category: "monospace" },
+  { family: "Inconsolata", category: "monospace" },
+  { family: "Ubuntu Mono", category: "monospace", weights: [400, 700] },
+  { family: "Red Hat Mono", category: "monospace" },
+  { family: "Courier Prime", category: "monospace", weights: [400, 700] }
+];
+var DEFAULT_WEIGHTS = [300, 400, 500, 600, 700];
+var GOOGLE_FONTS_CATALOG = FONT_DEFS.map((def) => {
+  const weights = def.weights || DEFAULT_WEIGHTS;
+  return {
+    family: def.family,
+    source: "google",
+    category: def.category,
+    weights,
+    loadUrl: gUrl(def.family, weights)
+  };
+});
+var getGoogleFontUrl = (family, weights) => gUrl(family, weights || DEFAULT_WEIGHTS);
+var CATEGORY_LABELS = {
+  "sans-serif": "Sans Serif",
+  serif: "Serif",
+  display: "Display",
+  handwriting: "Handwriting",
+  monospace: "Monospace"
+};
+var CATEGORY_FALLBACKS = {
+  "sans-serif": "ui-sans-serif, system-ui, sans-serif",
+  serif: "ui-serif, Georgia, serif",
+  display: "ui-sans-serif, system-ui, sans-serif",
+  handwriting: "cursive",
+  monospace: "ui-monospace, monospace"
+};
+
+// src/components/FontPicker/useFontSearch.ts
+var SL = null;
+var getSL = async () => {
+  if (!SL) SL = await import('@proveanything/smartlinks');
+  return SL;
+};
+var WEIGHT_PATTERNS = [
+  [/\b(hairline|thin)\b/i, 100],
+  [/\b(ultra\s?light|extra\s?light)\b/i, 200],
+  [/\blight\b/i, 300],
+  [/\b(regular|normal|book)\b/i, 400],
+  [/\bmedium\b/i, 500],
+  [/\b(semi\s?bold|demi\s?bold)\b/i, 600],
+  [/\bbold\b/i, 700],
+  [/\b(extra\s?bold|ultra\s?bold)\b/i, 800],
+  [/\b(black|heavy)\b/i, 900]
+];
+function detectWeightFromFilename(name) {
+  for (const [pattern, weight] of WEIGHT_PATTERNS) {
+    if (pattern.test(name)) return weight;
+  }
+  return 400;
+}
+function detectItalicFromFilename(name) {
+  return /\b(italic|oblique|ital)\b/i.test(name);
+}
+function fontFamilyFromFilename(name) {
+  let clean = name.replace(/\.(woff2?|ttf|otf|eot)$/i, "");
+  clean = clean.replace(/[-_]?(regular|bold|italic|oblique|ital|light|medium|semibold|semi-bold|demi-bold|thin|black|extra\s?bold|extra\s?light|ultra\s?light|ultra\s?bold|heavy|hairline|book|normal)/gi, "");
+  clean = clean.replace(/[-_]/g, " ").replace(/\s+/g, " ").trim();
+  if (!clean) return "Custom Font";
+  return clean.split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join(" ");
+}
+function customFamiliesToEntries(families) {
+  return families.map((fam) => {
+    const firstStyle = fam.fonts[0];
+    return {
+      family: fam.name,
+      source: "custom",
+      loadUrl: firstStyle?.url,
+      assetId: firstStyle?.assetId,
+      mimeType: firstStyle?.mimeType,
+      weights: fam.fonts.map((f) => f.weight)
+    };
+  });
+}
+function useFontSearch(options = {}) {
+  const {
+    categories,
+    scope,
+    showCustomFonts = false,
+    admin = false,
+    pageSize = 50,
+    fontsConfigAppId = "customFonts"
+  } = options;
+  const [customFamilies, setCustomFamilies] = useState([]);
+  const [customFonts, setCustomFonts] = useState([]);
+  const [loadingCustom, setLoadingCustom] = useState(false);
+  const [activeTab, setActiveTab] = useState("google");
+  const [activeCategory, setActiveCategory] = useState(null);
+  const [query, setQuery] = useState("");
+  const [page, setPage] = useState(0);
+  const debounceRef = useRef();
+  useEffect(() => {
+    if (!showCustomFonts || !scope?.collectionId) return;
+    let cancelled = false;
+    setLoadingCustom(true);
+    (async () => {
+      try {
+        const sl = await getSL();
+        const config = await sl.appConfiguration.getConfig({
+          collectionId: scope.collectionId,
+          appId: fontsConfigAppId,
+          ...admin ? { admin: true } : {}
+        });
+        if (cancelled) return;
+        const fontsConfig = config || { fonts: [] };
+        const families = fontsConfig.fonts || [];
+        setCustomFamilies(families);
+        setCustomFonts(customFamiliesToEntries(families));
+      } catch (err) {
+        console.warn("[FontPicker] Failed to load custom fonts config:", err);
+        setCustomFamilies([]);
+        setCustomFonts([]);
+      } finally {
+        if (!cancelled) setLoadingCustom(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [showCustomFonts, scope?.collectionId, scope?.productId, admin, fontsConfigAppId]);
+  const saveCustomFonts = useCallback(async (families) => {
+    if (!scope?.collectionId) return;
+    try {
+      const sl = await getSL();
+      await sl.appConfiguration.setConfig({
+        collectionId: scope.collectionId,
+        appId: fontsConfigAppId,
+        config: { fonts: families },
+        ...admin ? { admin: true } : {}
+      });
+    } catch (err) {
+      console.error("[FontPicker] Failed to save custom fonts config:", err);
+    }
+  }, [scope?.collectionId, admin, fontsConfigAppId]);
+  const setSearch = useCallback((q) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      setQuery(q.trim().toLowerCase());
+      setPage(0);
+    }, 200);
+  }, []);
+  const source = activeTab === "custom" ? customFonts : GOOGLE_FONTS_CATALOG;
+  const availableCategories = useMemo(() => {
+    const set = /* @__PURE__ */ new Set();
+    for (const font of GOOGLE_FONTS_CATALOG) {
+      if (font.category) {
+        if (!categories || categories.includes(font.category)) {
+          set.add(font.category);
+        }
+      }
+    }
+    const order = ["sans-serif", "serif", "display", "handwriting", "monospace"];
+    return order.filter((c) => set.has(c));
+  }, [categories]);
+  const filtered = useMemo(() => {
+    let result = source;
+    if (activeCategory && activeTab === "google") {
+      result = result.filter((f) => f.category === activeCategory);
+    }
+    if (query) {
+      result = result.filter((f) => f.family.toLowerCase().includes(query));
+    }
+    return result;
+  }, [source, activeCategory, activeTab, query]);
+  const totalPages = Math.ceil(filtered.length / pageSize);
+  const pageFonts = useMemo(
+    () => filtered.slice(page * pageSize, (page + 1) * pageSize),
+    [filtered, page, pageSize]
+  );
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const uploadFont = useCallback(async (file) => {
+    if (!scope?.collectionId) return null;
+    setUploading(true);
+    setUploadProgress(0);
+    try {
+      const sl = await getSL();
+      const scopeObj = scope.productId ? { type: "product", collectionId: scope.collectionId, productId: scope.productId } : { type: "collection", collectionId: scope.collectionId };
+      const result = await sl.asset.upload({
+        file,
+        scope: scopeObj,
+        name: file.name,
+        ...admin ? { admin: true } : {},
+        onProgress: (pct) => setUploadProgress(pct)
+      });
+      const style = {
+        url: result.url,
+        assetId: result.id,
+        weight: detectWeightFromFilename(file.name),
+        italic: detectItalicFromFilename(file.name),
+        mimeType: file.type,
+        fileName: file.name
+      };
+      return style;
+    } catch (err) {
+      console.error("[FontPicker] Upload failed:", err);
+      return null;
+    } finally {
+      setUploading(false);
+      setUploadProgress(0);
+    }
+  }, [scope?.collectionId, scope?.productId, admin]);
+  const addFontStyle = useCallback(async (familyName, style) => {
+    const updated = [...customFamilies];
+    const existing = updated.find((f) => f.name === familyName);
+    if (existing) {
+      existing.fonts.push(style);
+    } else {
+      updated.push({ name: familyName, fonts: [style] });
+    }
+    setCustomFamilies(updated);
+    setCustomFonts(customFamiliesToEntries(updated));
+    await saveCustomFonts(updated);
+  }, [customFamilies, saveCustomFonts]);
+  const updateFontFamily = useCallback(async (index, family) => {
+    const updated = [...customFamilies];
+    updated[index] = family;
+    setCustomFamilies(updated);
+    setCustomFonts(customFamiliesToEntries(updated));
+    await saveCustomFonts(updated);
+  }, [customFamilies, saveCustomFonts]);
+  const deleteFontFamily = useCallback(async (index) => {
+    const updated = customFamilies.filter((_, i) => i !== index);
+    setCustomFamilies(updated);
+    setCustomFonts(customFamiliesToEntries(updated));
+    await saveCustomFonts(updated);
+  }, [customFamilies, saveCustomFonts]);
+  const deleteFontStyle = useCallback(async (familyIndex, styleIndex) => {
+    const updated = [...customFamilies];
+    const family = { ...updated[familyIndex], fonts: [...updated[familyIndex].fonts] };
+    family.fonts.splice(styleIndex, 1);
+    if (family.fonts.length === 0) {
+      updated.splice(familyIndex, 1);
+    } else {
+      updated[familyIndex] = family;
+    }
+    setCustomFamilies(updated);
+    setCustomFonts(customFamiliesToEntries(updated));
+    await saveCustomFonts(updated);
+  }, [customFamilies, saveCustomFonts]);
+  return {
+    loading: loadingCustom,
+    query,
+    setSearch,
+    activeTab,
+    setActiveTab: useCallback((t) => {
+      setActiveTab(t);
+      setPage(0);
+    }, []),
+    hasCustomFonts: showCustomFonts && !!scope?.collectionId,
+    customFontCount: customFamilies.length,
+    customFamilies,
+    activeCategory,
+    setActiveCategory: useCallback((c) => {
+      setActiveCategory(c);
+      setPage(0);
+    }, []),
+    availableCategories,
+    filtered,
+    pageFonts,
+    page,
+    setPage,
+    totalPages,
+    totalCount: filtered.length,
+    categoryLabels: CATEGORY_LABELS,
+    uploading,
+    uploadProgress,
+    uploadFont,
+    addFontStyle,
+    updateFontFamily,
+    deleteFontFamily,
+    deleteFontStyle
+  };
+}
+var ACCEPTED_EXTENSIONS = ".woff,.woff2,.ttf,.otf";
+function isValidFontFile(file) {
+  const ext = file.name.toLowerCase().split(".").pop();
+  return ["woff", "woff2", "ttf", "otf"].includes(ext || "");
+}
+var FontUploadZone = ({
+  uploading,
+  uploadProgress,
+  onUpload,
+  className
+}) => {
+  const [dragOver, setDragOver] = useState(false);
+  const [status, setStatus] = useState("idle");
+  const [errorMsg, setErrorMsg] = useState("");
+  const inputRef = useRef(null);
+  const handleFile = useCallback(async (file) => {
+    if (!isValidFontFile(file)) {
+      setStatus("error");
+      setErrorMsg("Unsupported format. Use .woff2, .ttf, .otf, or .woff");
+      setTimeout(() => setStatus("idle"), 3e3);
+      return;
+    }
+    setStatus("idle");
+    setErrorMsg("");
+    const result = await onUpload(file);
+    if (result) {
+      setStatus("success");
+      setTimeout(() => setStatus("idle"), 2e3);
+    } else {
+      setStatus("error");
+      setErrorMsg("Upload failed");
+      setTimeout(() => setStatus("idle"), 3e3);
+    }
+  }, [onUpload]);
+  const onDrop = useCallback((e) => {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files[0];
+    if (file) handleFile(file);
+  }, [handleFile]);
+  const onDragOver = useCallback((e) => {
+    e.preventDefault();
+    setDragOver(true);
+  }, []);
+  const onDragLeave = useCallback(() => setDragOver(false), []);
+  const onInputChange = useCallback((e) => {
+    const file = e.target.files?.[0];
+    if (file) handleFile(file);
+    if (inputRef.current) inputRef.current.value = "";
+  }, [handleFile]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onDrop,
+      onDragOver,
+      onDragLeave,
+      onClick: () => !uploading && inputRef.current?.click(),
+      className: cn(
+        "relative flex flex-col items-center justify-center gap-2 p-6 rounded-lg border-2 border-dashed cursor-pointer transition-colors",
+        dragOver ? "border-primary bg-primary/5" : status === "error" ? "border-destructive/50 bg-destructive/5" : status === "success" ? "border-primary/50 bg-primary/5" : "border-border hover:border-muted-foreground/40 hover:bg-accent/30",
+        uploading && "pointer-events-none opacity-70",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept: ACCEPTED_EXTENSIONS,
+            onChange: onInputChange,
+            className: "hidden"
+          }
+        ),
+        uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 animate-spin text-primary" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "Uploading\u2026 ",
+            uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ""
+          ] }),
+          uploadProgress > 0 && /* @__PURE__ */ jsx("div", { className: "w-full max-w-[200px] h-1.5 bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-primary rounded-full transition-all duration-300",
+              style: { width: `${uploadProgress}%` }
+            }
+          ) })
+        ] }) : status === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CheckCircle2, { className: "w-6 h-6 text-primary" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-primary", children: "Font uploaded!" })
+        ] }) : status === "error" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AlertCircle, { className: "w-6 h-6 text-destructive" }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: errorMsg })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Upload, { className: "w-6 h-6 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-foreground font-medium", children: [
+              "Drop a font file or ",
+              /* @__PURE__ */ jsx("span", { className: "text-primary", children: "browse" })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: ".woff2, .ttf, .otf, .woff" })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var WEIGHT_OPTIONS = [
+  { value: 100, label: "Thin (100)" },
+  { value: 200, label: "Extra Light (200)" },
+  { value: 300, label: "Light (300)" },
+  { value: 400, label: "Regular (400)" },
+  { value: 500, label: "Medium (500)" },
+  { value: 600, label: "Semi Bold (600)" },
+  { value: 700, label: "Bold (700)" },
+  { value: 800, label: "Extra Bold (800)" },
+  { value: 900, label: "Black (900)" }
+];
+var FontUploadForm = ({
+  defaultFamilyName,
+  style,
+  existingFamilies,
+  onConfirm,
+  onCancel,
+  className
+}) => {
+  const [familyName, setFamilyName] = useState(defaultFamilyName);
+  const [weight, setWeight] = useState(style.weight);
+  const [italic, setItalic] = useState(style.italic);
+  const handleConfirm = useCallback(() => {
+    if (!familyName.trim()) return;
+    onConfirm(familyName.trim(), { ...style, weight, italic });
+  }, [familyName, weight, italic, style, onConfirm]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-card p-4 space-y-3", className), children: [
+    /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground uppercase tracking-wide", children: "New Font Style" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Font Family Name" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: familyName,
+          onChange: (e) => setFamilyName(e.target.value),
+          placeholder: "e.g. Acme Sans",
+          className: "w-full px-2.5 py-1.5 text-sm rounded-md border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring",
+          list: "existing-families"
+        }
+      ),
+      existingFamilies.length > 0 && /* @__PURE__ */ jsx("datalist", { id: "existing-families", children: existingFamilies.map((f) => /* @__PURE__ */ jsx("option", { value: f }, f)) }),
+      existingFamilies.includes(familyName.trim()) && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground", children: [
+        'Will add as a new style to existing family "',
+        familyName.trim(),
+        '"'
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-end", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs text-muted-foreground", children: "Weight" }),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value: weight,
+            onChange: (e) => setWeight(Number(e.target.value)),
+            className: "w-full px-2.5 py-1.5 text-sm rounded-md border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring",
+            children: WEIGHT_OPTIONS.map((w) => /* @__PURE__ */ jsx("option", { value: w.value, children: w.label }, w.value))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setItalic(!italic),
+          className: cn(
+            "px-3 py-1.5 text-sm rounded-md border transition-colors shrink-0",
+            italic ? "border-primary bg-primary/10 text-primary font-medium italic" : "border-border text-muted-foreground hover:border-muted-foreground"
+          ),
+          children: "Italic"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-muted-foreground truncate", children: [
+      "File: ",
+      style.fileName || "unknown"
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-2 justify-end pt-1", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onCancel,
+          className: "px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground hover:bg-accent transition-colors",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleConfirm,
+          disabled: !familyName.trim(),
+          className: "px-3 py-1.5 text-xs font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-40 transition-colors",
+          children: "Add Font"
+        }
+      )
+    ] })
+  ] });
+};
+var weightLabel = (w) => WEIGHT_OPTIONS.find((o) => o.value === w)?.label || `${w}`;
+var FontFamilyCard = ({
+  family,
+  familyIndex,
+  onDeleteFamily,
+  onDeleteStyle,
+  className
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-border bg-card", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center gap-2 px-3 py-2.5 text-left",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground truncate block", children: family.name }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
+              family.fonts.length,
+              " style",
+              family.fonts.length !== 1 ? "s" : ""
+            ] })
+          ] }),
+          expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-muted-foreground shrink-0" })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-border px-3 py-2 space-y-1.5", children: [
+      family.fonts.map((style, idx) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-2 text-xs text-muted-foreground",
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex-1 truncate", children: [
+              weightLabel(style.weight),
+              style.italic ? ", Italic" : "",
+              style.fileName && /* @__PURE__ */ jsxs("span", { className: "ml-1 opacity-50", children: [
+                "\u2014 ",
+                style.fileName
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onDeleteStyle(familyIndex, idx);
+                },
+                className: "p-1 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors shrink-0",
+                title: "Remove style",
+                children: /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3" })
+              }
+            )
+          ]
+        },
+        idx
+      )),
+      /* @__PURE__ */ jsx("div", { className: "pt-1 border-t border-border", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            onDeleteFamily(familyIndex);
+          },
+          className: "text-[11px] text-destructive hover:text-destructive/80 font-medium transition-colors",
+          children: "Delete entire family"
+        }
+      ) })
+    ] })
+  ] });
+};
+var loadedFonts = /* @__PURE__ */ new Set();
+function ensureFontLoaded(entry) {
+  if (!entry.loadUrl || loadedFonts.has(entry.family)) return;
+  loadedFonts.add(entry.family);
+  if (entry.source === "google") {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = entry.loadUrl;
+    link.dataset.fontPicker = entry.family;
+    document.head.appendChild(link);
+  } else if (entry.source === "custom") {
+    const style = document.createElement("style");
+    style.dataset.fontPicker = entry.family;
+    style.textContent = `@font-face { font-family: '${entry.family}'; src: url('${entry.loadUrl}'); font-display: swap; }`;
+    document.head.appendChild(style);
+  }
+}
+function buildSelection(entry) {
+  const fallback = CATEGORY_FALLBACKS[entry.category || "sans-serif"];
+  const cssFontFamily = `'${entry.family}', ${fallback}`;
+  let loadSnippet;
+  if (entry.source === "google" && entry.loadUrl) {
+    loadSnippet = `<link href="${entry.loadUrl}" rel="stylesheet">`;
+  } else if (entry.source === "custom" && entry.loadUrl) {
+    loadSnippet = `@font-face {
+  font-family: '${entry.family}';
+  src: url('${entry.loadUrl}');
+  font-display: swap;
+}`;
+  } else {
+    loadSnippet = `/* Font "${entry.family}" \u2014 no load URL available */`;
+  }
+  return {
+    family: entry.family,
+    source: entry.source,
+    loadUrl: entry.loadUrl,
+    category: entry.category,
+    weights: entry.weights,
+    fileUrl: entry.source === "custom" ? entry.loadUrl : void 0,
+    assetId: entry.assetId,
+    cssFontFamily,
+    loadSnippet
+  };
+}
+var FontItem = ({ entry, isSelected, previewText, showPreview, onClick }) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(
+      ([e]) => {
+        if (e.isIntersecting) {
+          ensureFontLoaded(entry);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "100px" }
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [entry]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      onClick,
+      className: cn(
+        "w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors",
+        isSelected ? "bg-primary/10 ring-1 ring-primary" : "hover:bg-accent/50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground truncate", children: entry.family }),
+            entry.source === "custom" && /* @__PURE__ */ jsxs("span", { className: "shrink-0 inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded bg-accent text-accent-foreground", children: [
+              /* @__PURE__ */ jsx(Upload, { className: "w-2.5 h-2.5" }),
+              "Custom"
+            ] }),
+            entry.source === "custom" && entry.weights && entry.weights.length > 0 && /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: [
+              entry.weights.length,
+              " style",
+              entry.weights.length !== 1 ? "s" : ""
+            ] }),
+            entry.category && entry.source === "google" && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[10px] text-muted-foreground capitalize", children: entry.category })
+          ] }),
+          showPreview && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-base text-muted-foreground mt-0.5 truncate",
+              style: { fontFamily: `'${entry.family}', sans-serif` },
+              children: previewText
+            }
+          )
+        ] }),
+        isSelected && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-primary shrink-0" })
+      ]
+    }
+  );
+};
+var FontPickerContent = ({
+  value,
+  onSelect,
+  onConfirm,
+  scope,
+  fontsConfigAppId,
+  showCustomFonts = false,
+  categories,
+  showPreview = true,
+  previewText = "The quick brown fox jumps over the lazy dog",
+  pageSize = 50,
+  admin,
+  className
+}) => {
+  const {
+    loading,
+    setSearch,
+    activeTab,
+    setActiveTab,
+    hasCustomFonts,
+    customFontCount,
+    customFamilies,
+    activeCategory,
+    setActiveCategory,
+    availableCategories,
+    pageFonts,
+    page,
+    setPage,
+    totalPages,
+    totalCount,
+    categoryLabels,
+    uploading,
+    uploadProgress,
+    uploadFont,
+    addFontStyle,
+    deleteFontFamily,
+    deleteFontStyle
+  } = useFontSearch({ categories, scope, showCustomFonts, admin, pageSize, fontsConfigAppId });
+  const inputRef = useRef(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  const [pendingStyle, setPendingStyle] = useState(null);
+  const [pendingFamilyName, setPendingFamilyName] = useState("");
+  const handleUpload = useCallback(async (file) => {
+    const style = await uploadFont(file);
+    if (style) {
+      setPendingFamilyName(fontFamilyFromFilename(file.name));
+      setPendingStyle(style);
+    }
+    return style;
+  }, [uploadFont]);
+  const handleConfirmUpload = useCallback(async (familyName, style) => {
+    await addFontStyle(familyName, style);
+    setPendingStyle(null);
+    setPendingFamilyName("");
+  }, [addFontStyle]);
+  const handleSelect = useCallback(
+    (entry) => {
+      const selection = buildSelection(entry);
+      onSelect?.(selection);
+      onConfirm?.(selection);
+    },
+    [onSelect, onConfirm]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          placeholder: "Search fonts\u2026",
+          onChange: (e) => setSearch(e.target.value),
+          className: "w-full pl-9 pr-3 py-2 text-sm rounded-md border border-border bg-transparent focus:outline-none focus:ring-1 focus:ring-ring"
+        }
+      )
+    ] }),
+    hasCustomFonts && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 border-b border-border pb-2", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setActiveTab("google"),
+          className: cn(
+            "px-3 py-1.5 text-xs font-semibold rounded-md transition-colors inline-flex items-center gap-1.5",
+            activeTab === "google" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Type, { className: "w-3.5 h-3.5" }),
+            "Google Fonts"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setActiveTab("custom"),
+          className: cn(
+            "px-3 py-1.5 text-xs font-semibold rounded-md transition-colors inline-flex items-center gap-1.5",
+            activeTab === "custom" ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Upload, { className: "w-3.5 h-3.5" }),
+            "Custom",
+            customFontCount > 0 && /* @__PURE__ */ jsxs("span", { className: "ml-1 text-[10px] opacity-70", children: [
+              "(",
+              customFontCount,
+              ")"
+            ] })
+          ]
+        }
+      )
+    ] }),
+    activeTab === "google" && availableCategories.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 flex-wrap items-center", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveCategory(null),
+          className: cn(
+            "px-2.5 py-1 text-xs font-medium rounded-full transition-colors",
+            !activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-accent"
+          ),
+          children: "All"
+        }
+      ),
+      availableCategories.map((c) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setActiveCategory(c === activeCategory ? null : c),
+          className: cn(
+            "px-2.5 py-1 text-xs font-medium rounded-full transition-colors",
+            c === activeCategory ? "bg-foreground text-background" : "bg-muted text-muted-foreground hover:bg-accent"
+          ),
+          children: categoryLabels[c]
+        },
+        c
+      )),
+      /* @__PURE__ */ jsxs("span", { className: "ml-auto text-[11px] text-muted-foreground", children: [
+        totalCount,
+        " fonts"
+      ] })
+    ] }),
+    activeTab === "custom" && !loading && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+      scope?.collectionId && /* @__PURE__ */ jsx(
+        FontUploadZone,
+        {
+          uploading,
+          uploadProgress,
+          onUpload: handleUpload
+        }
+      ),
+      pendingStyle && /* @__PURE__ */ jsx(
+        FontUploadForm,
+        {
+          defaultFamilyName: pendingFamilyName,
+          style: pendingStyle,
+          existingFamilies: customFamilies.map((f) => f.name),
+          onConfirm: handleConfirmUpload,
+          onCancel: () => {
+            setPendingStyle(null);
+            setPendingFamilyName("");
+          }
+        }
+      ),
+      customFamilies.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: [
+          "Uploaded Fonts (",
+          customFamilies.length,
+          ")"
+        ] }),
+        customFamilies.map((fam, idx) => /* @__PURE__ */ jsx(
+          FontFamilyCard,
+          {
+            family: fam,
+            familyIndex: idx,
+            onDeleteFamily: deleteFontFamily,
+            onDeleteStyle: deleteFontStyle
+          },
+          `${fam.name}-${idx}`
+        ))
+      ] })
+    ] }),
+    loading && activeTab === "custom" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 gap-3", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 animate-spin text-muted-foreground" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Loading custom fonts\u2026" })
+    ] }),
+    activeTab === "google" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      !loading && pageFonts.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-10 gap-2", children: [
+        /* @__PURE__ */ jsx(Type, { className: "w-6 h-6 text-muted-foreground/40" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No fonts found" })
+      ] }) : !loading && /* @__PURE__ */ jsx("div", { className: "space-y-0.5 max-h-[400px] overflow-y-auto", children: pageFonts.map((font) => /* @__PURE__ */ jsx(
+        FontItem,
+        {
+          entry: font,
+          isSelected: value === font.family,
+          previewText,
+          showPreview,
+          onClick: () => handleSelect(font)
+        },
+        `${font.source}-${font.family}`
+      )) }),
+      totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setPage(Math.max(0, page - 1)),
+            disabled: page === 0,
+            className: "p-1 rounded hover:bg-accent disabled:opacity-30 transition-colors",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          page + 1,
+          " / ",
+          totalPages
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setPage(Math.min(totalPages - 1, page + 1)),
+            disabled: page >= totalPages - 1,
+            className: "p-1 rounded hover:bg-accent disabled:opacity-30 transition-colors",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    activeTab === "custom" && !loading && pageFonts.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 max-h-[300px] overflow-y-auto border-t border-border pt-3", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide mb-2", children: "Select a Custom Font" }),
+      pageFonts.map((font) => /* @__PURE__ */ jsx(
+        FontItem,
+        {
+          entry: font,
+          isSelected: value === font.family,
+          previewText,
+          showPreview,
+          onClick: () => handleSelect(font)
+        },
+        `${font.source}-${font.family}`
+      ))
+    ] }) })
+  ] });
+};
+var PickerDialog = ({ open, onClose, children }) => {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 w-full max-w-lg max-h-[80vh] bg-background rounded-xl shadow-2xl border border-border flex flex-col overflow-hidden mx-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Select Font" }),
+        /* @__PURE__ */ jsx("button", { onClick: onClose, className: "p-1 rounded hover:bg-accent transition-colors", children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-muted-foreground" }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children })
+    ] })
+  ] });
+};
+var FontPicker = (props) => {
+  const {
+    mode = "inline",
+    trigger,
+    open: controlledOpen,
+    onClose,
+    value,
+    onSelect,
+    className,
+    ...rest
+  } = props;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isOpen = controlledOpen ?? internalOpen;
+  const handleClose = useCallback(() => {
+    setInternalOpen(false);
+    onClose?.();
+  }, [onClose]);
+  const handleSelectAndClose = useCallback(
+    (font) => {
+      onSelect?.(font);
+      handleClose();
+    },
+    [onSelect, handleClose]
+  );
+  if (mode === "inline") {
+    return /* @__PURE__ */ jsx(FontPickerContent, { value, onSelect, className, ...rest });
+  }
+  const triggerElement = trigger || /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 px-3 py-2 rounded-md border border-border cursor-pointer",
+        "hover:border-ring transition-colors",
+        className
+      ),
+      children: [
+        value ? /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", style: { fontFamily: `'${value}', sans-serif` }, children: value }) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Choose font\u2026" }),
+        /* @__PURE__ */ jsx(Type, { className: "w-3.5 h-3.5 text-muted-foreground ml-auto" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setInternalOpen(true), className: "cursor-pointer", children: triggerElement }),
+    /* @__PURE__ */ jsx(PickerDialog, { open: isOpen, onClose: handleClose, children: /* @__PURE__ */ jsx(FontPickerContent, { value, onSelect: handleSelectAndClose, ...rest }) })
+  ] });
+};
+
+export { CATEGORY_FALLBACKS, CATEGORY_LABELS, FontPicker, GOOGLE_FONTS_CATALOG, getGoogleFontUrl };
+//# sourceMappingURL=chunk-4Z46C4MJ.js.map
+//# sourceMappingURL=chunk-4Z46C4MJ.js.map