@vertebr/react 0.5.0 → 0.6.0

package/dist/components/fonts/FontLibraryBoard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageUploadControl } from "../resources/ImageUploadControl";
+import { FontPreviewModal } from "./FontPreviewModal";
+import { FontFaceInjector } from "./FontFaceInjector";
+import { GoogleFontsBrowser } from "./GoogleFontsBrowser";
+function previewStyle(item) {
+    const primary = item.files.find((file) => file.weight >= 600) ?? item.files[0];
+    return {
+        fontFamily: `"${item.family}", ui-sans-serif, sans-serif`,
+        fontWeight: primary?.weight ?? 400,
+    };
+}
+export function FontLibraryBoard({ label = "Font Library", data, loading, onRefresh, onUpload, onImportGoogle, onDelete, }) {
+    const [previewItem, setPreviewItem] = useState(null);
+    const meta = {
+        field: "fonts",
+        accept: data.accept,
+        maxBytes: data.maxBytes,
+    };
+    return (_jsxs("div", { className: "vertebr-font-library", children: [_jsx(FontFaceInjector, { items: data.items }), _jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), _jsxs("div", { className: "vertebr-font-library-head-actions", children: [_jsx("span", { className: "vertebr-count", children: data.items.length }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] })] }), _jsxs("div", { className: "vertebr-font-library-body", children: [data.canImportGoogle && onImportGoogle ? (_jsx(GoogleFontsBrowser, { disabled: loading, onImport: onImportGoogle, existingFamilies: data.items.map((item) => item.family.toLowerCase()) })) : null, _jsx(ImageUploadControl, { meta: meta, multiple: true, label: "Drop .woff2 / .woff / .ttf files here or browse to upload", onUpload: async (files) => {
+                            for (const file of files) {
+                                const base = file.name.replace(/\.[^.]+$/, "");
+                                const weightMatch = /(?:^|[\s_-])(100|200|300|400|500|600|700|800|900)(?:[\s_-]|$)/i.exec(base);
+                                const family = base
+                                    .replace(/(?:^|[\s_-])(100|200|300|400|500|600|700|800|900)(?:[\s_-]|$)/gi, " ")
+                                    .replace(/[\s_-]+/g, " ")
+                                    .trim();
+                                await onUpload([file], {
+                                    family: family || undefined,
+                                    weight: weightMatch ? Number(weightMatch[1]) : 400,
+                                });
+                            }
+                        } }), _jsx("p", { className: "vertebr-font-library-note", children: "Upload only fonts you have the right to use. Click a font card to preview before using it in Brand typography." }), data.items.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No fonts in the library yet." })) : (_jsx("div", { className: "vertebr-font-library-grid", children: data.items.map((item) => (_jsxs("article", { className: "vertebr-font-library-card", children: [_jsxs("button", { type: "button", className: "vertebr-font-library-preview-btn", onClick: () => setPreviewItem(item), title: `Preview ${item.label}`, children: [_jsxs("div", { className: "vertebr-font-library-preview", style: previewStyle(item), children: [_jsx("span", { className: "vertebr-font-library-ag", children: "Ag" }), _jsx("p", { children: "The quick brown fox jumps over the lazy dog." })] }), _jsx("span", { className: "vertebr-font-library-preview-hint", children: "Click to preview" })] }), _jsxs("div", { className: "vertebr-font-library-meta", children: [_jsx("strong", { title: item.label, children: item.label }), _jsxs("span", { children: [item.source === "google" ? "Google Fonts" : "Upload", " \u00B7", " ", item.files.length, " file", item.files.length === 1 ? "" : "s"] }), _jsx("code", { children: item.id })] }), data.canDelete && onDelete ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-danger-quiet", onClick: () => {
+                                        if (window.confirm(`Delete "${item.label}" from the font library?`)) {
+                                            void onDelete(item.id);
+                                        }
+                                    }, children: "Delete" })) : null] }, item.id))) }))] }), _jsx(FontPreviewModal, { open: previewItem != null, title: previewItem?.label ?? "Font preview", subtitle: previewItem
+                    ? `${previewItem.source === "google" ? "Google Fonts" : "Upload"} · ${previewItem.family}`
+                    : undefined, family: previewItem?.family ?? "", files: previewItem?.files, onClose: () => setPreviewItem(null) })] }));
+}

package/dist/components/fonts/FontPickerField.d.ts

@@ -0,0 +1,16 @@
+import type { FontLibraryItem } from "@vertebr/client";
+export type FontPickerFieldProps = {
+    id: string;
+    value: unknown;
+    label?: string;
+    description?: string;
+    readOnly?: boolean;
+    fonts: FontLibraryItem[];
+    loading?: boolean;
+    onChange: (value: string) => void;
+    onRefreshFonts?: () => Promise<void>;
+    /** Same-origin API base for font file proxy URLs. */
+    fontApiBase?: string;
+};
+export declare function FontPickerField({ id, value, label, description, readOnly, fonts, loading, onChange, onRefreshFonts, fontApiBase, }: FontPickerFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=FontPickerField.d.ts.map

package/dist/components/fonts/FontPickerField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontPickerField.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,WAA0B,GAC3B,EAAE,oBAAoB,+BA0LtB"}

package/dist/components/fonts/FontPickerField.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { FontPreviewSample } from "./FontPreviewSample";
+import { FontFaceInjector } from "./FontFaceInjector";
+function weightForItem(item, kind) {
+    if (!item)
+        return kind === "heading" ? 700 : 400;
+    if (kind === "heading") {
+        return item.files.find((file) => file.weight >= 600)?.weight ?? 700;
+    }
+    return item.files.find((file) => file.weight >= 400 && file.weight < 600)?.weight ?? 400;
+}
+export function FontPickerField({ id, value, label, description, readOnly, fonts, loading, onChange, onRefreshFonts, fontApiBase = "/admin/api", }) {
+    const [open, setOpen] = useState(false);
+    const [previewId, setPreviewId] = useState("");
+    const initialIdRef = useRef("");
+    const selectedId = typeof value === "string" ? value.trim() : "";
+    useEffect(() => {
+        if (open && onRefreshFonts) {
+            void onRefreshFonts();
+        }
+    }, [open, onRefreshFonts]);
+    useEffect(() => {
+        if (open) {
+            initialIdRef.current = selectedId;
+            setPreviewId(selectedId);
+        }
+    }, [open, selectedId]);
+    const closeModal = (revert = false) => {
+        if (revert && previewId !== initialIdRef.current) {
+            onChange(initialIdRef.current);
+        }
+        setOpen(false);
+    };
+    const previewFont = (nextId) => {
+        setPreviewId(nextId);
+        onChange(nextId);
+    };
+    const selected = useMemo(() => fonts.find((item) => item.id === selectedId) ?? null, [fonts, selectedId]);
+    const previewItem = useMemo(() => {
+        if (previewId === "")
+            return null;
+        return fonts.find((item) => item.id === previewId) ?? null;
+    }, [fonts, previewId]);
+    return (_jsxs("div", { className: "vertebr-font-picker", children: [_jsx(FontFaceInjector, { items: fonts, apiBase: fontApiBase }), _jsxs("div", { className: "vertebr-font-picker-current", children: [_jsxs("div", { children: [_jsx("strong", { children: selected?.label ?? "Default system fonts" }), selected ? (_jsx("span", { children: selected.family })) : (_jsx("span", { children: "Manrope / Syne until a library font is chosen" }))] }), !readOnly ? (_jsx("button", { id: id, type: "button", className: "vertebr-btn", onClick: () => setOpen(true), children: "Choose font" })) : (_jsx("span", { id: id, className: "vertebr-font-picker-ro-anchor" }))] }), selected ? (_jsx("div", { className: "vertebr-font-picker-preview", children: _jsx(FontPreviewSample, { family: selected.family, bodyWeight: weightForItem(selected, "body"), headingWeight: weightForItem(selected, "heading"), compact: true }) })) : null, open ? (_jsx("div", { className: "vertebr-font-picker-modal-backdrop", onClick: () => closeModal(true), children: _jsxs("div", { className: "vertebr-font-picker-modal", role: "dialog", "aria-labelledby": `${id}-font-picker-title`, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vertebr-font-picker-modal-head", children: [_jsxs("div", { children: [_jsx("h3", { id: `${id}-font-picker-title`, children: label ?? "Choose a font" }), description ? _jsx("p", { children: description }) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Close" })] }), loading ? (_jsx("div", { className: "vertebr-empty", children: "Loading fonts\u2026" })) : fonts.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No fonts in the library yet. Open Font Library to upload or add Google Fonts." })) : (_jsxs("div", { className: "vertebr-font-picker-modal-body", children: [_jsx("div", { className: "vertebr-font-picker-grid-scroll", children: _jsxs("div", { className: "vertebr-font-picker-grid", children: [_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": previewId === "" || undefined, onClick: () => previewFont(""), children: [_jsx("strong", { children: "Default" }), _jsx("span", { children: "Manrope / Syne" })] }), fonts.map((item) => (_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": item.id === previewId || undefined, style: {
+                                                    fontFamily: `"${item.family}", ui-sans-serif, sans-serif`,
+                                                    fontWeight: weightForItem(item, "heading"),
+                                                }, onClick: () => previewFont(item.id), children: [_jsx("strong", { children: item.label }), _jsx("span", { children: item.family }), _jsx("em", { children: "The quick brown fox" })] }, item.id)))] }) }), _jsxs("aside", { className: "vertebr-font-picker-detail", children: [_jsx("p", { className: "vertebr-font-picker-detail-label", children: "Preview" }), previewId === "" ? (_jsx(FontPreviewSample, { family: "Manrope", bodyWeight: 400, headingWeight: 700 })) : previewItem ? (_jsx(FontPreviewSample, { family: previewItem.family, bodyWeight: weightForItem(previewItem, "body"), headingWeight: weightForItem(previewItem, "heading") })) : (_jsx("div", { className: "vertebr-empty", children: "Select a font to preview." }))] })] })), _jsxs("div", { className: "vertebr-font-picker-modal-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Cancel" }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: loading, onClick: () => closeModal(false), children: "Done" })] })] }) })) : null] }));
+}

package/dist/components/fonts/FontPreviewModal.d.ts

@@ -0,0 +1,18 @@
+import { type FontFaceFile } from "@vertebr/client";
+export type FontPreviewModalProps = {
+    open: boolean;
+    title: string;
+    subtitle?: string;
+    family: string;
+    /** Self-hosted face files — injected as @font-face rules. */
+    files?: FontFaceFile[];
+    /** Load a Google Font family from the CDN for preview only. */
+    googleFamily?: string;
+    bodyWeight?: number;
+    headingWeight?: number;
+    onClose: () => void;
+    onConfirm?: () => void;
+    confirmLabel?: string;
+};
+export declare function FontPreviewModal({ open, title, subtitle, family, files, googleFamily, bodyWeight, headingWeight, onClose, onConfirm, confirmLabel, }: FontPreviewModalProps): import("react").JSX.Element | null;
+//# sourceMappingURL=FontPreviewModal.d.ts.map

package/dist/components/fonts/FontPreviewModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontPreviewModal.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPreviewModal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGtE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AASF,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAS,EACT,YAA8B,GAC/B,EAAE,qBAAqB,sCA0GvB"}

package/dist/components/fonts/FontPreviewModal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo } from "react";
+import { buildFontFaceCss } from "@vertebr/client";
+import { FontPreviewSample } from "./FontPreviewSample";
+function googleCssUrl(family) {
+    return ("https://fonts.googleapis.com/css2?" +
+        `family=${encodeURIComponent(family)}:wght@400;600;700&display=swap`);
+}
+export function FontPreviewModal({ open, title, subtitle, family, files, googleFamily, bodyWeight, headingWeight, onClose, onConfirm, confirmLabel = "Use this font", }) {
+    const styleId = useId().replace(/:/g, "");
+    const faceCss = useMemo(() => {
+        if (!files?.length)
+            return "";
+        return buildFontFaceCss({
+            id: "preview",
+            label: title,
+            family,
+            source: "upload",
+            files,
+        });
+    }, [files, family, title]);
+    useEffect(() => {
+        if (!open)
+            return;
+        let link = null;
+        if (googleFamily && !files?.length) {
+            link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = googleCssUrl(googleFamily);
+            document.head.appendChild(link);
+        }
+        return () => {
+            link?.remove();
+        };
+    }, [open, googleFamily, files?.length]);
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    const resolvedBody = bodyWeight ??
+        files?.find((file) => file.weight >= 400 && file.weight < 600)?.weight ??
+        files?.[0]?.weight ??
+        400;
+    const resolvedHeading = headingWeight ??
+        files?.find((file) => file.weight >= 600)?.weight ??
+        files?.[files.length - 1]?.weight ??
+        700;
+    return (_jsxs("div", { className: "vertebr-font-preview-modal-backdrop", onClick: onClose, children: [faceCss ? (_jsx("style", { id: styleId, dangerouslySetInnerHTML: { __html: faceCss } })) : null, _jsxs("div", { className: "vertebr-font-preview-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": `${styleId}-title`, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vertebr-font-preview-modal-head", children: [_jsxs("div", { children: [_jsx("h3", { id: `${styleId}-title`, children: title }), subtitle ? _jsx("p", { children: subtitle }) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClose, children: "Close" })] }), _jsx("div", { className: "vertebr-font-preview-modal-body", children: _jsx(FontPreviewSample, { family: family, bodyWeight: resolvedBody, headingWeight: resolvedHeading }) }), onConfirm ? (_jsxs("div", { className: "vertebr-font-preview-modal-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClose, children: "Cancel" }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: onConfirm, children: confirmLabel })] })) : null] })] }));
+}

package/dist/components/fonts/FontPreviewSample.d.ts

@@ -0,0 +1,8 @@
+export type FontPreviewSampleProps = {
+    family: string;
+    bodyWeight?: number;
+    headingWeight?: number;
+    compact?: boolean;
+};
+export declare function FontPreviewSample({ family, bodyWeight, headingWeight, compact, }: FontPreviewSampleProps): import("react").JSX.Element;
+//# sourceMappingURL=FontPreviewSample.d.ts.map

package/dist/components/fonts/FontPreviewSample.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontPreviewSample.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPreviewSample.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,UAAgB,EAChB,aAAmB,EACnB,OAAe,GAChB,EAAE,sBAAsB,+BA4CxB"}

package/dist/components/fonts/FontPreviewSample.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export function FontPreviewSample({ family, bodyWeight = 400, headingWeight = 700, compact = false, }) {
+    const stack = `"${family.replace(/"/g, "")}", ui-sans-serif, sans-serif`;
+    const headingStyle = {
+        fontFamily: stack,
+        fontWeight: headingWeight,
+    };
+    const bodyStyle = {
+        fontFamily: stack,
+        fontWeight: bodyWeight,
+    };
+    return (_jsxs("div", { className: "vertebr-font-preview-sample", "data-compact": compact ? "true" : undefined, children: [_jsx("span", { className: "vertebr-font-preview-eyebrow", style: headingStyle, children: "Eyebrow label" }), _jsx("strong", { className: "vertebr-font-preview-heading", style: headingStyle, children: "The quick brown fox" }), _jsx("p", { className: "vertebr-font-preview-body", style: bodyStyle, children: "Jumps over the lazy dog. Maxer Mentality essentials for people who hold the standard." }), !compact ? (_jsxs(_Fragment, { children: [_jsxs("p", { className: "vertebr-font-preview-alphabet", style: bodyStyle, children: ["ABCDEFGHIJKLMNOPQRSTUVWXYZ", _jsx("br", {}), "abcdefghijklmnopqrstuvwxyz", _jsx("br", {}), "0123456789"] }), _jsxs("div", { className: "vertebr-font-preview-weights", style: bodyStyle, children: [_jsx("span", { style: { fontWeight: 400 }, children: "Regular 400" }), _jsx("span", { style: { fontWeight: 600 }, children: "Semibold 600" }), _jsx("span", { style: { fontWeight: 700 }, children: "Bold 700" })] })] })) : null] }));
+}

package/dist/components/fonts/GoogleFontsBrowser.d.ts

@@ -0,0 +1,8 @@
+import { type GoogleFontImportRequest } from "@vertebr/client";
+export type GoogleFontsBrowserProps = {
+    disabled?: boolean;
+    existingFamilies: string[];
+    onImport: (payload: GoogleFontImportRequest) => Promise<void>;
+};
+export declare function GoogleFontsBrowser({ disabled, existingFamilies, onImport, }: GoogleFontsBrowserProps): import("react").JSX.Element;
+//# sourceMappingURL=GoogleFontsBrowser.d.ts.map

package/dist/components/fonts/GoogleFontsBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GoogleFontsBrowser.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/GoogleFontsBrowser.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,iBAAiB,CAAC;AAGzB,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,QAAQ,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,gBAAgB,EAChB,QAAQ,GACT,EAAE,uBAAuB,+BAkHzB"}

package/dist/components/fonts/GoogleFontsBrowser.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { GOOGLE_FONTS_CATALOG, } from "@vertebr/client";
+import { FontPreviewModal } from "./FontPreviewModal";
+export function GoogleFontsBrowser({ disabled, existingFamilies, onImport, }) {
+    const [query, setQuery] = useState("");
+    const [busyFamily, setBusyFamily] = useState(null);
+    const [error, setError] = useState(null);
+    const [previewEntry, setPreviewEntry] = useState(null);
+    const items = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        if (!needle)
+            return GOOGLE_FONTS_CATALOG;
+        return GOOGLE_FONTS_CATALOG.filter((entry) => entry.family.toLowerCase().includes(needle) ||
+            entry.category.includes(needle));
+    }, [query]);
+    const importEntry = async (entry) => {
+        if (disabled || busyFamily)
+            return;
+        setBusyFamily(entry.family);
+        setError(null);
+        try {
+            await onImport({ family: entry.family, weights: entry.weights });
+            setPreviewEntry(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Import failed");
+        }
+        finally {
+            setBusyFamily(null);
+        }
+    };
+    return (_jsxs("section", { className: "vertebr-google-fonts", children: [_jsxs("div", { className: "vertebr-google-fonts-head", children: [_jsxs("div", { children: [_jsx("h3", { children: "Google Fonts" }), _jsx("p", { children: "Browse and add open-source fonts to your library." })] }), _jsx("input", { type: "search", className: "vertebr-google-fonts-search", placeholder: "Search fonts\u2026", value: query, onChange: (event) => setQuery(event.target.value) })] }), error ? _jsx("div", { className: "vertebr-error-inline", children: error }) : null, _jsx("div", { className: "vertebr-google-fonts-grid-scroll", children: _jsx("div", { className: "vertebr-google-fonts-grid", children: items.map((entry) => {
+                        const exists = existingFamilies.includes(entry.family.toLowerCase());
+                        return (_jsxs("article", { className: "vertebr-google-fonts-card", children: [_jsxs("button", { type: "button", className: "vertebr-google-fonts-preview-btn", onClick: () => setPreviewEntry(entry), title: `Preview ${entry.family}`, children: [_jsxs("div", { className: "vertebr-google-fonts-card-copy", children: [_jsx("strong", { children: entry.family }), _jsx("span", { children: entry.category.replace("-", " ") }), _jsx("span", { children: entry.weights.join(", ") })] }), _jsx("span", { className: "vertebr-font-library-preview-hint", children: "Click to preview" })] }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: disabled || exists || busyFamily === entry.family, onClick: () => void importEntry(entry), children: exists
+                                        ? "In library"
+                                        : busyFamily === entry.family
+                                            ? "Adding…"
+                                            : "Add to library" })] }, entry.family));
+                    }) }) }), _jsx(FontPreviewModal, { open: previewEntry != null, title: previewEntry?.family ?? "Font preview", subtitle: previewEntry
+                    ? `${previewEntry.category.replace("-", " ")} · weights ${previewEntry.weights.join(", ")}`
+                    : undefined, family: previewEntry?.family ?? "", googleFamily: previewEntry?.family, onClose: () => setPreviewEntry(null), onConfirm: previewEntry &&
+                    !existingFamilies.includes(previewEntry.family.toLowerCase())
+                    ? () => void importEntry(previewEntry)
+                    : undefined, confirmLabel: previewEntry &&
+                    existingFamilies.includes(previewEntry.family.toLowerCase())
+                    ? "Already in library"
+                    : "Add to library" })] }));
+}

package/dist/components/resources/ResourceCell.js

@@ -102,8 +102,9 @@ function booleanLabel(fieldKey, field, on) {
     if (/^show[A-Z]/.test(fieldKey) || /\bshow\b/i.test(field?.label ?? "")) {
         return on ? "Shown" : "Hidden";
     }
-    if (/\bactive\b/i.test(hay))
-        return on ? "Active" : "Inactive";
+    if (/\bactive\b/i.test(hay) || /\bvisible\b/i.test(hay)) {
+        return on ? "Visible" : "Hidden";
+    }
     return on ? "On" : "Off";
 }
 function ImageThumbs({ urls, detail, }) {

package/dist/components/resources/ResourceTable.d.ts

@@ -21,7 +21,7 @@ type ResourcePanelProps = {
     onActionDone?: () => Promise<void> | void;
     onPreviewMail?: (rowId: string, actionId: string, input?: Record<string, unknown>) => Promise<MailPreviewResponse>;
     collectionActions?: Record<string, ResourceActionMeta>;
-    onCollectionAction?: (actionId: string, input?: Record<string, unknown>) => Promise<void>;
+    onCollectionAction?: (actionId: string, input?: Record<string, unknown>) => Promise<unknown>;
     onUpload?: (field: string, files: File[]) => Promise<Array<{
         url: string;
         name?: string;

package/dist/components/resources/ResourceTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/resources/ResourceTable.js

@@ -9,6 +9,7 @@ import { ResourceCreateModal } from "./ResourceCreateModal";
 import { actionInputSchema, ResourceActionModal, } from "./ResourceActionModal";
 import { ResourceMailModal } from "./ResourceMailModal";
 import { ResourceViewModal } from "./ResourceViewModal";
+import { VisibilityEyeToggle } from "../config/VisibilityEye";
 function actionHasInput(meta) {
     return Boolean(meta?.input && Object.keys(meta.input).length > 0);
 }
@@ -75,6 +76,17 @@ function isDefaultHiddenColumn(key, field, schema) {
     }
     return false;
 }
+/** Boolean fields owners toggle in the list (storefront visibility). */
+function isListVisibilityField(key, field) {
+    if (field?.type !== "boolean" || field.readOnly)
+        return false;
+    if (/^(active|visible|published)$/i.test(key))
+        return true;
+    return /\b(active|visible|published)\b/i.test(field.label ?? "");
+}
+function visibilityValue(row, fieldKey) {
+    return row[fieldKey] !== false;
+}
 function defaultVisibility(schema) {
     const next = {};
     for (const [key, field] of Object.entries(schema)) {
@@ -134,6 +146,9 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
         canRight: false,
     });
     const [columnVisibility, setColumnVisibility] = useState(() => readVisibility(storageKey, schema));
+    /** Pending list visibility toggles keyed by row id → field → value. */
+    const [visibilityDrafts, setVisibilityDrafts] = useState({});
+    const [savingVisibility, setSavingVisibility] = useState(false);
     const canUpdate = Boolean(permissions?.update && onUpdate);
     const canCreate = Boolean(permissions?.create && onCreate);
     const canDelete = Boolean(permissions?.delete && onDelete);
@@ -142,7 +157,11 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     const actionEntries = Object.entries(actions);
     const collectionActionEntries = Object.entries(collectionActions);
     const fieldKeys = Object.keys(schema);
+    const visibilityFields = useMemo(() => fieldKeys.filter((key) => isListVisibilityField(key, schema[key])), [fieldKeys, schema]);
     const selectable = Boolean(onAction && actionEntries.length > 0);
+    useEffect(() => {
+        setVisibilityDrafts({});
+    }, [items]);
     useEffect(() => {
         const valid = new Set(items
             .map((row) => resolveRowId(row, rowIdKeys))
@@ -152,6 +171,70 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
             return next.size === current.size ? current : next;
         });
     }, [items, rowIdKeys]);
+    const dirtyVisibilityCount = useMemo(() => {
+        let count = 0;
+        for (const [rowId, fields] of Object.entries(visibilityDrafts)) {
+            const row = items.find((item) => resolveRowId(item, rowIdKeys) === rowId);
+            if (!row) {
+                count += Object.keys(fields).length;
+                continue;
+            }
+            for (const [fieldKey, value] of Object.entries(fields)) {
+                if (visibilityValue(row, fieldKey) !== value)
+                    count += 1;
+            }
+        }
+        return count;
+    }, [visibilityDrafts, items, rowIdKeys]);
+    const setVisibilityDraft = useCallback((rowId, fieldKey, value) => {
+        setVisibilityDrafts((current) => {
+            const row = items.find((item) => resolveRowId(item, rowIdKeys) === rowId);
+            const saved = row ? visibilityValue(row, fieldKey) : null;
+            const nextRow = { ...(current[rowId] ?? {}) };
+            if (saved === value)
+                delete nextRow[fieldKey];
+            else
+                nextRow[fieldKey] = value;
+            const next = { ...current };
+            if (Object.keys(nextRow).length === 0)
+                delete next[rowId];
+            else
+                next[rowId] = nextRow;
+            return next;
+        });
+    }, [items, rowIdKeys]);
+    const saveVisibility = useCallback(async () => {
+        if (!onUpdate || dirtyVisibilityCount === 0)
+            return;
+        setSavingVisibility(true);
+        const errors = [];
+        try {
+            for (const [rowId, fields] of Object.entries(visibilityDrafts)) {
+                const row = items.find((item) => resolveRowId(item, rowIdKeys) === rowId);
+                if (!row)
+                    continue;
+                try {
+                    await onUpdate(rowId, { ...row, ...fields });
+                }
+                catch (error) {
+                    errors.push(`${rowId}: ${error instanceof Error ? error.message : "Failed"}`);
+                }
+            }
+            setVisibilityDrafts({});
+            if (errors.length > 0) {
+                window.alert(`Saved with ${errors.length} error(s).\n\n${errors.slice(0, 8).join("\n")}`);
+            }
+        }
+        finally {
+            setSavingVisibility(false);
+        }
+    }, [
+        onUpdate,
+        dirtyVisibilityCount,
+        visibilityDrafts,
+        items,
+        rowIdKeys,
+    ]);
     const runActions = useCallback(async (actionId, rowIds, input) => {
         if (!onAction || rowIds.length === 0)
             return;
@@ -194,8 +277,23 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
             return;
         setBusyAction(actionId);
         try {
-            await onCollectionAction(actionId, input);
+            const result = await onCollectionAction(actionId, input);
             await onActionDone?.();
+            if (result &&
+                typeof result === "object" &&
+                "message" in result &&
+                typeof result.message === "string") {
+                window.alert(result.message);
+            }
+            else if (result &&
+                typeof result === "object" &&
+                "result" in result &&
+                result.result &&
+                typeof result.result === "object" &&
+                "message" in result.result &&
+                typeof result.result.message === "string") {
+                window.alert(result.result.message);
+            }
         }
         catch (error) {
             window.alert(error instanceof Error ? error.message : "Action failed");
@@ -212,7 +310,10 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
             setPendingCollectionAction(actionId);
             return;
         }
-        if (!window.confirm(`${meta.label}?`))
+        const detail = meta.confirm
+            ? `${meta.label}?\n\n${meta.confirm}`
+            : `${meta.label}?`;
+        if (!window.confirm(detail))
             return;
         void runCollectionAction(actionId);
     }, [collectionActions, onCollectionAction, runCollectionAction]);
@@ -305,13 +406,28 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
                 const field = schema[key];
                 const isImage = /(image|img|photo|avatar|thumbnail|thumb|cover)/i.test(key) ||
                     /(image|img|photo)/i.test(field?.label ?? "");
+                const listVisibility = canUpdate && isListVisibilityField(key, field);
                 return {
                     id: key,
                     accessorKey: key,
                     header: field?.label ?? humanizeKey(key),
                     meta: { fieldKey: key, field },
-                    cell: ({ getValue, }) => (_jsx(ResourceCell, { fieldKey: key, field: field, value: getValue() })),
-                    size: isImage ? 220 : undefined,
+                    cell: ({ row, getValue, }) => {
+                        if (listVisibility) {
+                            const rowId = resolveRowId(row.original, rowIdKeys);
+                            if (!rowId) {
+                                return (_jsx(ResourceCell, { fieldKey: key, field: field, value: getValue() }));
+                            }
+                            const checked = visibilityDrafts[rowId]?.[key] ??
+                                visibilityValue(row.original, key);
+                            const dirty = visibilityDrafts[rowId]?.[key] !== undefined &&
+                                visibilityDrafts[rowId]?.[key] !==
+                                    visibilityValue(row.original, key);
+                            return (_jsx("div", { className: "vertebr-visibility-check", "data-dirty": dirty ? "true" : undefined, onClick: (event) => event.stopPropagation(), children: _jsx(VisibilityEyeToggle, { visible: checked, dirty: dirty, label: field?.label ?? humanizeKey(key), disabled: savingVisibility, onChange: (next) => setVisibilityDraft(rowId, key, next) }) }));
+                        }
+                        return (_jsx(ResourceCell, { fieldKey: key, field: field, value: getValue() }));
+                    },
+                    size: listVisibility ? 88 : isImage ? 220 : undefined,
                 };
             })));
         defs.push({
@@ -343,6 +459,8 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
         queueAction,
         onDelete,
         rowIdKeys,
+        visibilityDrafts,
+        setVisibilityDraft,
     ]);
     const table = useReactTable({
         data: items,
@@ -377,7 +495,7 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
                         setEditing(null);
                     } })] }));
     }
-    const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [columnOptions.length > 0 ? (_jsx(ColumnVisibilityMenu, { columns: columnOptions, visibility: columnVisibility, onChange: setColumnVisibility })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null, collectionActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueCollectionAction(actionId), children: meta.label }, actionId))), selectable && selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [selected.size, " selected"] }), actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [...selected]), children: meta.label }, actionId))), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setSelected(new Set()), children: "Clear" })] })) : null] }), tableOverflow.overflow ? (_jsxs("div", { className: "vertebr-table-scroll-controls", role: "group", "aria-label": "Scroll columns", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canLeft, onClick: () => scrollTable("left"), "aria-label": "Scroll columns left", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canRight, onClick: () => scrollTable("right"), "aria-label": "Scroll columns right", children: _jsx(ChevronRightIcon, {}) })] })) : null] }));
+    const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [columnOptions.length > 0 ? (_jsx(ColumnVisibilityMenu, { columns: columnOptions, visibility: columnVisibility, onChange: setColumnVisibility })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null, visibilityFields.length > 0 && dirtyVisibilityCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [dirtyVisibilityCount, " visibility change", dirtyVisibilityCount === 1 ? "" : "s"] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: savingVisibility, onClick: () => void saveVisibility(), children: savingVisibility ? "Saving…" : "Save visibility" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: savingVisibility, onClick: () => setVisibilityDrafts({}), children: "Discard" })] })) : null, collectionActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueCollectionAction(actionId), children: meta.label }, actionId))), selectable && selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [selected.size, " selected"] }), actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [...selected]), children: meta.label }, actionId))), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setSelected(new Set()), children: "Clear" })] })) : null] }), tableOverflow.overflow ? (_jsxs("div", { className: "vertebr-table-scroll-controls", role: "group", "aria-label": "Scroll columns", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canLeft, onClick: () => scrollTable("left"), "aria-label": "Scroll columns left", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canRight, onClick: () => scrollTable("right"), "aria-label": "Scroll columns right", children: _jsx(ChevronRightIcon, {}) })] })) : null] }));
     const bulkModal = bulkOpen && uploads && onUpload ? (_jsx(BulkImageUploadModal, { uploads: uploads, canCreate: canCreate, fieldLabels: Object.fromEntries(Object.keys(uploads).map((key) => [
             key,
             schema[key]?.label ?? humanizeKey(key),

package/dist/hooks/useVertebrControls.d.ts

@@ -6,19 +6,28 @@ type ControlsContextValue = {
     loading: boolean;
     error: Error | null;
     refresh: () => Promise<void>;
+    /** True when live admin draft preview is active. */
+    preview: boolean;
 };
 export type VertebrControlsProviderProps = {
     /** Vertebr API base, e.g. `/admin/api`. */
     apiBase?: string;
     /** Active app environment (qual / production). */
     environment: string;
+    /**
+     * Listen for admin draft posts.
+     * Defaults to on when the URL has `?vertebrPreview=1`.
+     */
+    enablePreview?: boolean;
     children: ReactNode;
 };
 export type { VertebrControlsMap };
 /**
  * Loads all public Vertebr controls for the storefront once and shares them.
+ * When the URL has `?vertebrPreview=1`, also merges live drafts from the
+ * admin iframe parent (host still renders).
  */
-export declare function VertebrControlsProvider({ apiBase, environment, children, }: VertebrControlsProviderProps): import("react").JSX.Element;
+export declare function VertebrControlsProvider({ apiBase, environment, enablePreview, children, }: VertebrControlsProviderProps): import("react").JSX.Element;
 /**
  * Read a public Vertebr control by id.
  * Falls back to `fallback` while loading or if the control is missing.

package/dist/hooks/useVertebrControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVertebrControls.d.ts","sourceRoot":"","sources":["../../src/hooks/useVertebrControls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAIF,MAAM,MAAM,4BAA4B,GAAG;IACzC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,OAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,4BAA4B,+BAyC9B;AAYD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,GACV;IACD,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAMA;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}
+{"version":3,"file":"useVertebrControls.d.ts","sourceRoot":"","sources":["../../src/hooks/useVertebrControls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,oDAAoD;IACpD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAIF,MAAM,MAAM,4BAA4B,GAAG;IACzC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,OAAsB,EACtB,WAAW,EACX,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,+BA2E9B;AAYD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,GACV;IACD,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAMA;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}