@drawnagency/primitives 0.1.0

package/dist/components/shell/MediaLibraryModal.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { Search, Upload, Trash2 } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
+import { Select } from "../shared/Select";
+import { displayFilenameExt, mimeToExt } from "../../media/utils";
+function formatFileSize(bytes) {
+    if (bytes >= 1048576)
+        return `${Math.round(bytes / 1048576)}MB`;
+    if (bytes >= 1024)
+        return `${Math.round(bytes / 1024)}KB`;
+    return `${bytes}B`;
+}
+function thumbnailSrc(item, localUrls) {
+    const localUrl = localUrls[item.id];
+    if (localUrl)
+        return localUrl;
+    if (item.kind === "video") {
+        return `/api/media/${item.id}/original.${mimeToExt(item.mimeType)}`;
+    }
+    if (item.kind === "image" && item.variants.length > 0) {
+        const smallest = item.variants.reduce((a, b) => (a.width < b.width ? a : b));
+        return `/api/media/${item.id}/${smallest.width}.webp`;
+    }
+    return `/api/media/${item.id}/poster.webp`;
+}
+function displayFilename(item) {
+    return `${item.originalName}${displayFilenameExt(item.mimeType)}`;
+}
+function UploadZone({ onUpload }) {
+    const [dragging, setDragging] = useState(false);
+    const inputRef = useRef(null);
+    const handleFiles = useCallback((files) => {
+        if (!files || files.length === 0)
+            return;
+        onUpload(Array.from(files));
+    }, [onUpload]);
+    return (_jsxs("button", { type: "button", onClick: () => inputRef.current?.click(), onDragOver: (e) => {
+            e.preventDefault();
+            setDragging(true);
+        }, onDragLeave: () => setDragging(false), onDrop: (e) => {
+            e.preventDefault();
+            setDragging(false);
+            handleFiles(e.dataTransfer.files);
+        }, className: cn("flex w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed px-6 py-8 text-center transition-colors", dragging
+            ? "border-primary bg-primary/5"
+            : "border-base-200 hover:border-base-300"), children: [_jsx(Upload, { size: 24, className: "text-base-contrast-light" }), _jsx("span", { className: "text-sm text-base-contrast-light", children: "Drag & drop files or click to browse" }), _jsx("input", { ref: inputRef, type: "file", multiple: true, accept: "image/*,video/*", className: "hidden", onChange: (e) => {
+                    handleFiles(e.target.files);
+                    e.target.value = "";
+                } })] }));
+}
+export function MediaLibraryModal({ mode, items, onSelect, onUpload, onDelete, onAltChange, referenceCountMap, localUrlMap = {}, maxFileSize, }) {
+    const [search, setSearch] = useState("");
+    const [kindFilter, setKindFilter] = useState("all");
+    const [selected, setSelected] = useState(new Set());
+    const [rejectedFiles, setRejectedFiles] = useState([]);
+    const handleUpload = useCallback((files) => {
+        if (!maxFileSize) {
+            onUpload(files);
+            return;
+        }
+        const valid = [];
+        const rejected = [];
+        for (const file of files) {
+            if (file.size > maxFileSize) {
+                rejected.push(file.name);
+            }
+            else {
+                valid.push(file);
+            }
+        }
+        if (rejected.length > 0)
+            setRejectedFiles(rejected);
+        if (valid.length > 0)
+            onUpload(valid);
+    }, [maxFileSize, onUpload]);
+    const filtered = items.filter((item) => {
+        const matchesSearch = item.originalName
+            .toLowerCase()
+            .includes(search.toLowerCase());
+        const matchesKind = kindFilter === "all" || item.kind === kindFilter;
+        return matchesSearch && matchesKind;
+    });
+    function toggleSelect(id) {
+        setSelected((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }
+    const [confirmDelete, setConfirmDelete] = useState(false);
+    const selectedIds = Array.from(selected);
+    const totalUsage = selectedIds.reduce((sum, id) => sum + (referenceCountMap[id] ?? 0), 0);
+    function handleBatchDelete() {
+        if (totalUsage > 0) {
+            setConfirmDelete(true);
+            return;
+        }
+        onDelete(selectedIds);
+        setSelected(new Set());
+    }
+    function handleConfirmDelete() {
+        onDelete(selectedIds);
+        setSelected(new Set());
+        setConfirmDelete(false);
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(UploadZone, { onUpload: handleUpload }), _jsxs("div", { className: "sticky top-[-16px] z-10 -mx-6 space-y-3 bg-base px-6 pb-3 pt-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "relative flex-1", children: [_jsx(Search, { size: 14, className: "pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base-contrast-light" }), _jsx("input", { type: "text", placeholder: "Search media...", value: search, onChange: (e) => setSearch(e.target.value), className: "w-full rounded border border-base-200 bg-base py-1.5 pl-8 pr-3 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary" })] }), _jsx(Select, { value: kindFilter, onChange: (v) => setKindFilter(v), options: [
+                                    { value: "all", label: "All types" },
+                                    { value: "image", label: "Images" },
+                                    { value: "animated", label: "Animated" },
+                                    { value: "video", label: "Video" },
+                                ], selectClassName: "py-1.5 pr-7 pl-2.5" }), mode === "manage" && selected.size > 0 && (_jsxs(Button, { variant: "destructive", size: "sm", onClick: handleBatchDelete, className: "flex items-center gap-1.5", children: [_jsx(Trash2, { size: 13 }), "Delete ", selected.size] }))] }), confirmDelete && (_jsxs("div", { className: "flex flex-col items-center rounded-lg border border-red-200 bg-red-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-red-900/50 dark:bg-red-950/30", children: [_jsx("p", { className: "mb-2 text-center text-sm text-red-800 lg:mb-0 lg:text-left dark:text-red-200", children: "Some of these images are being used. Deleting these will remove them from these references." }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: () => setConfirmDelete(false), children: "Cancel" }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleConfirmDelete, children: "Confirm Delete" })] })] })), rejectedFiles.length > 0 && maxFileSize && (_jsxs("div", { className: "flex flex-col items-center rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 lg:flex-row lg:justify-between dark:border-amber-900/50 dark:bg-amber-950/30", children: [_jsxs("p", { className: "mb-2 text-center text-sm text-amber-800 lg:mb-0 lg:text-left dark:text-amber-200", children: [rejectedFiles.length === 1
+                                        ? `"${rejectedFiles[0]}" exceeds`
+                                        : `${rejectedFiles.length} files exceed`, " the ", formatFileSize(maxFileSize), " file size limit."] }), _jsx("div", { className: "flex shrink-0 items-center", children: _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setRejectedFiles([]), children: "Dismiss" }) })] }))] }), filtered.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-12 text-center", children: [_jsx("p", { className: "text-sm font-medium text-base-contrast", children: items.length === 0 ? "No media uploaded yet" : "No results found" }), _jsx("p", { className: "text-xs text-base-contrast-light", children: items.length === 0
+                            ? "Upload files using the drop zone above."
+                            : "Try a different search or filter." })] })) : (_jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: filtered.map((item) => {
+                    const isSelected = selected.has(item.id);
+                    const refCount = referenceCountMap[item.id] ?? 0;
+                    const usageLabel = refCount === 0 ? "Not used" : `Used ${refCount}x`;
+                    return (_jsxs("div", { className: "group flex flex-col gap-1.5", onClick: () => {
+                            if (mode === "select") {
+                                onSelect(item.id);
+                            }
+                            else {
+                                toggleSelect(item.id);
+                            }
+                        }, children: [_jsxs("div", { className: cn("relative aspect-square cursor-pointer overflow-hidden rounded-lg border-2 transition-colors", mode === "select"
+                                    ? "border-transparent hover:border-primary"
+                                    : isSelected
+                                        ? "border-primary"
+                                        : "border-transparent hover:border-base-300"), children: [_jsx("div", { className: "h-full w-full bg-base-accent", children: item.kind === "video" ? (_jsx("video", { src: thumbnailSrc(item, localUrlMap), muted: true, playsInline: true, className: "h-full w-full object-cover", onMouseEnter: (e) => e.currentTarget.play().catch(() => { }), onMouseLeave: (e) => { e.currentTarget.pause(); e.currentTarget.currentTime = 0; } })) : (_jsx("img", { src: thumbnailSrc(item, localUrlMap), alt: item.originalName, className: "h-full w-full object-cover" })) }), mode === "manage" && (_jsx("div", { className: cn("absolute top-1.5 left-1.5 flex h-5 w-5 items-center justify-center rounded-full border-2 transition-colors", isSelected
+                                            ? "border-primary bg-primary"
+                                            : "border-white/80 bg-white/40 opacity-0 group-hover:opacity-100"), children: isSelected && (_jsx("div", { className: "h-2 w-2 rounded-full bg-white" })) })), mode === "manage" && (_jsx("div", { className: cn("absolute top-1.5 right-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium transition-opacity", isSelected
+                                            ? "opacity-100"
+                                            : "opacity-0 group-hover:opacity-100", refCount > 0
+                                            ? "bg-black/50 text-white"
+                                            : "bg-black/50 text-white/70"), children: usageLabel })), _jsx("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent px-2 pb-1.5 pt-4 opacity-0 transition-opacity group-hover:opacity-100", children: _jsx("p", { className: "truncate text-[11px] text-white", children: displayFilename(item) }) })] }), _jsxs("div", { className: "px-0.5", children: [_jsx("label", { className: "text-[10px] font-medium uppercase leading-none tracking-wide text-base-contrast-light/50", children: "Alt text" }), _jsx("textarea", { value: item.alt, placeholder: "Describe this image for accessibility", rows: 2, onClick: (e) => e.stopPropagation(), onChange: (e) => onAltChange?.(item.id, e.target.value), className: "w-full resize-none border-0 bg-transparent p-0 text-xs leading-snug text-base-contrast placeholder:text-base-contrast-light/40 focus:outline-none focus:ring-0" })] })] }, item.id));
+                }) }))] }));
+}

package/dist/components/shell/ProcessingIndicator.d.ts

@@ -0,0 +1,7 @@
+import type { QueueItem } from "../../media/queue";
+interface ProcessingIndicatorProps {
+    items: QueueItem[];
+}
+export declare function ProcessingIndicator({ items }: ProcessingIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ProcessingIndicator.d.ts.map

package/dist/components/shell/ProcessingIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProcessingIndicator.d.ts","sourceRoot":"","sources":["../../../src/components/shell/ProcessingIndicator.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,UAAU,wBAAwB;IAChC,KAAK,EAAE,SAAS,EAAE,CAAC;CACpB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,EAAE,wBAAwB,kDA0EtE"}

package/dist/components/shell/ProcessingIndicator.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { cn } from "../../lib/cn";
+export function ProcessingIndicator({ items }) {
+    const [open, setOpen] = useState(false);
+    const buttonRef = useRef(null);
+    const activeItems = items.filter((i) => i.state === "active");
+    const queuedItems = items.filter((i) => i.state === "queued");
+    const errorItems = items.filter((i) => i.state === "error");
+    const visibleCount = activeItems.length + queuedItems.length + errorItems.length;
+    if (visibleCount === 0)
+        return null;
+    return (_jsxs("div", { className: "relative inline-flex", children: [_jsxs("button", { ref: buttonRef, type: "button", onClick: () => setOpen((o) => !o), className: cn("relative inline-flex items-center gap-1.5 rounded-md border border-base-200 bg-base px-3 py-1.5 text-sm font-medium text-base-contrast transition-colors hover:bg-base-accent"), "aria-label": "Processing status", children: [_jsx(Loader2, { size: 14, className: "animate-spin text-primary" }), _jsx("span", { className: "text-xs font-semibold tabular-nums", children: visibleCount })] }), open && (_jsx("div", { className: "absolute bottom-full left-0 z-50 mb-2 w-64 rounded-lg border border-base-200 bg-base shadow-lg", children: _jsxs("div", { className: "flex flex-col divide-y divide-base-200", children: [activeItems.map((item) => (_jsxs("div", { className: "flex flex-col gap-1.5 px-3 py-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "truncate text-xs font-medium text-base-contrast", children: item.originalName }), _jsxs("span", { className: "ml-2 shrink-0 text-xs text-base-contrast-light", children: [item.percent, "%"] })] }), _jsx("div", { className: "h-1 overflow-hidden rounded-full bg-base-accent", children: _jsx("div", { className: "h-full rounded-full bg-primary transition-all", style: { width: `${item.percent}%` } }) })] }, item.id))), errorItems.map((item) => (_jsxs("div", { className: "flex flex-col gap-0.5 px-3 py-2", children: [_jsx("span", { className: "truncate text-xs font-medium text-red-600", children: item.originalName }), item.error && (_jsx("span", { className: "text-xs text-red-500", children: item.error }))] }, item.id))), queuedItems.length > 0 && (_jsx("div", { className: "px-3 py-2", children: _jsxs("span", { className: "text-xs text-base-contrast-light", children: ["+", queuedItems.length, " queued"] }) }))] }) }))] }));
+}

package/dist/components/shell/SectionSkeleton.d.ts

@@ -0,0 +1,9 @@
+import { type TypeOption } from "./SectionTypePicker";
+interface SectionSkeletonProps {
+    types: TypeOption[];
+    onSelect: (type: string) => void;
+    onDismiss: () => void;
+}
+export declare function SectionSkeleton({ types, onSelect, onDismiss }: SectionSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SectionSkeleton.d.ts.map

package/dist/components/shell/SectionSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SectionSkeleton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqB,KAAK,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAIzE,UAAU,oBAAoB;IAC5B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,oBAAoB,2CA0CnF"}

package/dist/components/shell/SectionSkeleton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { SectionTypePicker } from "./SectionTypePicker";
+import { SectionLayout } from "../sections/SectionLayout";
+import { cn } from "../../lib/cn";
+export function SectionSkeleton({ types, onSelect, onDismiss }) {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        // Trigger animation on next frame
+        requestAnimationFrame(() => setIsVisible(true));
+    }, []);
+    useEffect(() => {
+        function handleKeyDown(e) {
+            if (e.key === "Escape") {
+                onDismiss();
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [onDismiss]);
+    return (_jsx(SectionLayout, { type: "skeleton", status: "draft", children: _jsxs("div", { className: cn("relative transition-all duration-200", isVisible ? "opacity-100" : "opacity-0 -translate-y-2"), children: [_jsx("div", { className: "flex h-20 items-center justify-center rounded-lg bg-base-accent", children: _jsx("span", { className: "text-sm text-base-contrast-light/50", children: "New section" }) }), _jsx("div", { className: "relative flex justify-center", children: _jsx(SectionTypePicker, { types: types, onSelect: onSelect, onClose: onDismiss }) })] }) }));
+}

package/dist/components/shell/SectionTypePicker.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentType } from "react";
+export interface TypeOption {
+    type: string;
+    label: string;
+    icon: ComponentType;
+}
+interface SectionTypePickerProps {
+    types: TypeOption[];
+    onSelect: (type: string) => void;
+    onClose: () => void;
+}
+export declare function SectionTypePicker({ types, onSelect, onClose }: SectionTypePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SectionTypePicker.d.ts.map

package/dist/components/shell/SectionTypePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionTypePicker.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SectionTypePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,aAAa,CAAC;CACrB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAgCrF"}

package/dist/components/shell/SectionTypePicker.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+export function SectionTypePicker({ types, onSelect, onClose }) {
+    const panelRef = useRef(null);
+    useEffect(() => {
+        function handleMouseDown(e) {
+            if (panelRef.current && !panelRef.current.contains(e.target)) {
+                onClose();
+            }
+        }
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [onClose]);
+    return (_jsx("div", { ref: panelRef, className: "absolute z-50 mt-1 w-64 rounded-lg border border-base-200 bg-base p-2 shadow-lg", children: types.map(({ type, label, icon: Icon }) => (_jsxs("button", { className: "cursor-pointer flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm text-base-contrast-light hover:bg-base-accent hover:text-base-contrast", onClick: () => onSelect(type), children: [_jsx("span", { className: "flex h-6 w-6 items-center justify-center text-base", children: _jsx(Icon, {}) }), _jsx("span", { children: label })] }, type))) }));
+}

package/dist/components/shell/SiteSettingsDisplay.d.ts

@@ -0,0 +1,8 @@
+import type { SiteConfig } from "../../schemas/site-config";
+interface Props {
+    siteConfig: SiteConfig;
+    onChange: (config: SiteConfig) => void;
+}
+export declare function SiteSettingsDisplay({ siteConfig, onChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SiteSettingsDisplay.d.ts.map

package/dist/components/shell/SiteSettingsDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteSettingsDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsDisplay.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,UAAU,KAAK;IACb,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAQD,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyDlE"}

package/dist/components/shell/SiteSettingsDisplay.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColorPicker } from "../shared/ColorPicker";
+import { FontPicker } from "../shared/FontPicker";
+import { Input } from "../shared/Input";
+import { Select } from "../shared/Select";
+import { FormLabel } from "../shared/FormLabel";
+import { deriveContrast } from "../../lib/contrast";
+import { buildGoogleFontsUrl } from "../../lib/google-fonts";
+const darkModeOptions = [
+    { label: "Light", value: "light" },
+    { label: "Dark", value: "dark" },
+    { label: "Optional (viewer toggle)", value: "optional" },
+];
+export function SiteSettingsDisplay({ siteConfig, onChange }) {
+    function update(patch) {
+        onChange({ ...siteConfig, ...patch });
+    }
+    function handleColorChange(color) {
+        const contrast = deriveContrast(color);
+        onChange({ ...siteConfig, primaryColor: color, primaryContrast: contrast });
+    }
+    function handleFontChange(field, family) {
+        const next = { ...siteConfig, [field]: family };
+        next.googleFontsUrl = buildGoogleFontsUrl(next.headingFont, next.bodyFont);
+        onChange(next);
+    }
+    return (_jsxs("div", { className: "space-y-5", children: [_jsx(Input, { label: "Site name", value: siteConfig.siteName, onChange: (value) => update({ siteName: value }), placeholder: "Brand Portal" }), _jsxs("div", { children: [_jsx(FormLabel, { children: "Primary color" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ColorPicker, { value: siteConfig.primaryColor, onChange: handleColorChange, label: "Primary color" }), _jsx("span", { className: "text-sm text-base-contrast-light", children: siteConfig.primaryColor })] })] }), _jsx(Select, { label: "Dark mode", value: siteConfig.darkMode, onChange: (value) => update({ darkMode: value }), options: darkModeOptions }), _jsx(FontPicker, { label: "Heading font", value: siteConfig.headingFont, onChange: (family) => handleFontChange("headingFont", family) }), _jsx(FontPicker, { label: "Body font", value: siteConfig.bodyFont, onChange: (family) => handleFontChange("bodyFont", family) })] }));
+}

package/dist/components/shell/SiteSettingsModal.d.ts

@@ -0,0 +1,24 @@
+import type { SiteConfig } from "../../schemas/site-config";
+import type { Audience } from "../../auth/types";
+interface Props {
+    isOpen: boolean;
+    onClose: () => void;
+    siteConfig: SiteConfig;
+    onSiteConfigChange: (config: SiteConfig) => void;
+    onAudiencesChange: (audiences: Audience[]) => void;
+    capabilities: {
+        oauth: boolean;
+        emailPassword: boolean;
+        passwordOnly: boolean;
+        userManagement: boolean;
+        audienceManagement: boolean;
+        passwordToggle: boolean;
+    };
+    currentUser: {
+        email: string;
+        role: "owner" | "editor";
+    } | null;
+}
+export declare function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SiteSettingsModal.d.ts.map

package/dist/components/shell/SiteSettingsModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteSettingsModal.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsModal.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEjD,UAAU,KAAK;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,iBAAiB,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IACnD,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAID,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,KAAK,2CAmGzI"}

package/dist/components/shell/SiteSettingsModal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { EditorModal } from "./EditorModal";
+import { Button } from "../shared/Button";
+import { SiteSettingsViewerAccess } from "./SiteSettingsViewerAccess";
+import { SiteSettingsDisplay } from "./SiteSettingsDisplay";
+import { SiteSettingsUsers } from "./SiteSettingsUsers";
+import { cn } from "../../lib/cn";
+export function SiteSettingsModal({ isOpen, onClose, siteConfig, onSiteConfigChange, onAudiencesChange, capabilities, currentUser }) {
+    const tabs = [
+        { id: "users", label: "Users", show: capabilities.userManagement },
+        { id: "viewer-access", label: "Viewer Access", show: true },
+        { id: "display", label: "Display", show: true },
+    ];
+    const visibleTabs = tabs.filter((t) => t.show);
+    const [activeTab, setActiveTab] = useState(visibleTabs[0]?.id ?? "display");
+    const [signOutError, setSignOutError] = useState(null);
+    async function handleSignOut() {
+        setSignOutError(null);
+        try {
+            const res = await fetch("/api/auth/sign-out", { method: "POST" });
+            if (!res.ok) {
+                setSignOutError("Sign out failed");
+                return;
+            }
+            window.location.assign("/edit/login");
+        }
+        catch {
+            setSignOutError("Network error during sign out");
+        }
+    }
+    const identityLabel = currentUser?.email
+        ? currentUser.email
+        : currentUser
+            ? (currentUser.role === "owner" ? "Owner" : "Editor")
+            : null;
+    return (_jsx(EditorModal, { isOpen: isOpen, onClose: onClose, title: "Site Settings", size: "settings", noPadding: true, children: _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx("div", { className: "border-b border-base-200", children: _jsx("div", { className: "flex px-6", role: "tablist", children: visibleTabs.map((tab) => (_jsx("button", { role: "tab", "aria-selected": activeTab === tab.id, onClick: () => setActiveTab(tab.id), className: cn("cursor-pointer px-4 py-2 text-sm font-medium border-b-2 -mb-px", activeTab === tab.id
+                                ? "border-brand text-brand"
+                                : "border-transparent text-base-contrast-light hover:text-base-contrast"), children: tab.label }, tab.id))) }) }), _jsxs("div", { "data-testid": "site-settings-tab-panel", className: "flex flex-1 flex-col overflow-y-auto px-6 py-4", children: [activeTab === "users" && _jsx(SiteSettingsUsers, { currentUser: currentUser }), activeTab === "viewer-access" && (_jsx(SiteSettingsViewerAccess, { audienceManagement: capabilities.audienceManagement, passwordToggle: capabilities.passwordToggle, onAudiencesChange: onAudiencesChange })), activeTab === "display" && (_jsx(SiteSettingsDisplay, { siteConfig: siteConfig, onChange: onSiteConfigChange }))] }), currentUser && (_jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-base-200 px-6 py-3", children: [_jsxs("div", { className: "text-xs text-base-contrast-light", children: ["Signed in as", " ", _jsx("span", { className: "font-medium text-base-contrast", children: identityLabel }), currentUser.email && (_jsxs("span", { className: "ml-1 capitalize", children: ["(", currentUser.role, ")"] })), signOutError && (_jsxs("span", { className: "ml-2 text-red-600", children: ["\u2014 ", signOutError] }))] }), _jsx(Button, { type: "button", variant: "destructive", onClick: handleSignOut, children: "Sign out" })] }))] }) }));
+}

package/dist/components/shell/SiteSettingsUsers.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    currentUser: {
+        email: string;
+        role: "owner" | "editor";
+    } | null;
+}
+export declare function SiteSettingsUsers({ currentUser }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SiteSettingsUsers.d.ts.map

package/dist/components/shell/SiteSettingsUsers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteSettingsUsers.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsUsers.tsx"],"names":[],"mappings":"AAYA,UAAU,KAAK;IACb,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;CACjE;AAED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,EAAE,KAAK,2CA6KvD"}

package/dist/components/shell/SiteSettingsUsers.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState, useEffect } from "react";
+import { ChevronDown } from "lucide-react";
+import { Button } from "../shared/Button";
+export function SiteSettingsUsers({ currentUser }) {
+    const [users, setUsers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [inviteEmail, setInviteEmail] = useState("");
+    const [inviteRole, setInviteRole] = useState("editor");
+    const [error, setError] = useState(null);
+    const [confirmingRevoke, setConfirmingRevoke] = useState(null);
+    async function loadUsers() {
+        try {
+            const res = await fetch("/api/auth/users");
+            if (!res.ok) {
+                setError("Failed to load users");
+                setUsers([]);
+                return;
+            }
+            const data = await res.json();
+            setUsers(data.users);
+        }
+        catch {
+            setError("Network error while loading users");
+            setUsers([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }
+    useEffect(() => {
+        loadUsers();
+    }, []);
+    async function handleInvite(e) {
+        e.preventDefault();
+        setError(null);
+        try {
+            const res = await fetch("/api/auth/users", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ email: inviteEmail, role: inviteRole }),
+            });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                setError(data.error || "Invite failed");
+                return;
+            }
+            setInviteEmail("");
+            await loadUsers();
+        }
+        catch {
+            setError("Network error while inviting");
+        }
+    }
+    function handleRevoke(userId) {
+        setError(null);
+        const ownerCount = users.filter((u) => u.role === "owner").length;
+        const user = users.find((u) => u.id === userId);
+        if (user?.role === "owner" && ownerCount <= 1) {
+            setError("Cannot remove the last owner");
+            return;
+        }
+        setConfirmingRevoke(userId);
+    }
+    async function confirmRevoke(userId) {
+        setConfirmingRevoke(null);
+        try {
+            const res = await fetch("/api/auth/users", {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ userId }),
+            });
+            if (!res.ok) {
+                const data = await res.json().catch(() => ({}));
+                setError(data.error || "Revoke failed");
+                return;
+            }
+            await loadUsers();
+        }
+        catch {
+            setError("Network error while removing user");
+        }
+    }
+    if (loading)
+        return _jsx("p", { className: "text-sm text-base-contrast-light", children: "Loading users..." });
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "grid grid-cols-[1fr_7rem_5rem] text-sm", children: [_jsx("div", { className: "flex items-center border-b border-base-200 pr-2 pb-2 text-base-contrast-light", children: "Email" }), _jsx("div", { className: "flex items-center border-b border-base-200 pr-2 pb-2 text-base-contrast-light", children: "Role" }), _jsx("div", { className: "border-b border-base-200 pb-2" }), users.map((user) => (_jsxs(Fragment, { children: [_jsx("div", { className: "flex items-center border-b border-base-200 py-2 pr-2 text-base-contrast", children: user.email }), _jsx("div", { className: "flex items-center border-b border-base-200 py-2 pr-2 capitalize text-base-contrast-light", children: user.role }), _jsx("div", { className: "flex items-center justify-end border-b border-base-200 py-2", children: currentUser?.email === user.email ? (_jsx("span", { className: "text-xs text-base-contrast-light", children: "\u2014" })) : confirmingRevoke === user.id ? (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Button, { type: "button", variant: "ghost", tone: "destructive", onClick: () => confirmRevoke(user.id), children: "Confirm" }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => setConfirmingRevoke(null), children: "Cancel" })] })) : (_jsx(Button, { type: "button", variant: "ghost", tone: "destructive", onClick: () => handleRevoke(user.id), children: "Remove" })) })] }, user.id)))] }), _jsxs("form", { onSubmit: handleInvite, className: "grid grid-cols-[1fr_7rem_5rem] text-sm", children: [_jsx("div", { className: "pr-2", children: _jsx("input", { type: "email", placeholder: "Email address", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), required: true, "aria-label": "Email address", className: "w-full rounded border border-base-200 bg-base px-3 py-2 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast" }) }), _jsx("div", { className: "pr-2", children: _jsxs("div", { className: "relative", children: [_jsxs("select", { value: inviteRole, onChange: (e) => setInviteRole(e.target.value), "aria-label": "Role", className: "w-full appearance-none rounded border border-base-200 bg-base py-2 pr-8 pl-3 text-sm text-base-contrast focus:border-base-contrast focus:outline-none focus:ring-1 focus:ring-base-contrast", children: [_jsx("option", { value: "editor", children: "Editor" }), _jsx("option", { value: "owner", children: "Owner" })] }), _jsx(ChevronDown, { size: 14, className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-base-contrast-light" })] }) }), _jsx(Button, { type: "submit", variant: "primary", size: "md", className: "w-full", children: "Invite" })] }), error && _jsx("p", { className: "text-sm text-red-600", children: error })] }));
+}

package/dist/components/shell/SiteSettingsViewerAccess.d.ts

@@ -0,0 +1,9 @@
+import type { Audience } from "../../auth/types";
+interface Props {
+    audienceManagement: boolean;
+    passwordToggle: boolean;
+    onAudiencesChange: (audiences: Audience[]) => void;
+}
+export declare function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, onAudiencesChange }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SiteSettingsViewerAccess.d.ts.map

package/dist/components/shell/SiteSettingsViewerAccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteSettingsViewerAccess.d.ts","sourceRoot":"","sources":["../../../src/components/shell/SiteSettingsViewerAccess.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAOjD,UAAU,KAAK;IACb,kBAAkB,EAAE,OAAO,CAAC;IAC5B,cAAc,EAAE,OAAO,CAAC;IACxB,iBAAiB,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,wBAAwB,CAAC,EAAE,kBAAkB,EAAE,cAAc,EAAE,iBAAiB,EAAE,EAAE,KAAK,2CA4JxG"}

package/dist/components/shell/SiteSettingsViewerAccess.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "../shared/Button";
+import { Toggle } from "../shared/Toggle";
+import { AudienceRow } from "./AudienceRow";
+import { AudienceAddForm } from "./AudienceAddForm";
+import { cn } from "../../lib/cn";
+export function SiteSettingsViewerAccess({ audienceManagement, passwordToggle, onAudiencesChange }) {
+    const [audiences, setAudiences] = useState([]);
+    const [passwordEnabled, setPasswordEnabled] = useState(true);
+    const [loading, setLoading] = useState(true);
+    const [showAddForm, setShowAddForm] = useState(false);
+    const [toggleError, setToggleError] = useState(null);
+    const loadAudiences = useCallback(async () => {
+        try {
+            const res = await fetch("/api/auth/audiences");
+            const data = await res.json();
+            const list = data.audiences ?? [];
+            setAudiences(list);
+            onAudiencesChange(list);
+            setPasswordEnabled(data.passwordEnabled ?? true);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [onAudiencesChange]);
+    useEffect(() => {
+        loadAudiences();
+    }, [loadAudiences]);
+    async function handlePasswordToggle(enabled) {
+        setToggleError(null);
+        const previous = passwordEnabled;
+        setPasswordEnabled(enabled);
+        try {
+            const res = await fetch("/api/auth/password-enabled", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ enabled }),
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(() => ({}));
+                setToggleError(body.error ?? "Update failed");
+                setPasswordEnabled(previous);
+            }
+        }
+        catch {
+            setToggleError("Network error");
+            setPasswordEnabled(previous);
+        }
+    }
+    async function handleAdd(data) {
+        const res = await fetch("/api/auth/audiences", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(data),
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({}));
+            throw new Error(err.error ?? "Add failed");
+        }
+        setShowAddForm(false);
+        await loadAudiences();
+    }
+    async function handleSave(name, patch) {
+        const res = await fetch("/api/auth/audiences", {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name, ...patch }),
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({}));
+            throw new Error(err.error ?? "Save failed");
+        }
+        await loadAudiences();
+    }
+    async function handleDelete(name) {
+        const res = await fetch("/api/auth/audiences", {
+            method: "DELETE",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ name }),
+        });
+        if (!res.ok) {
+            const err = await res.json().catch(() => ({}));
+            throw new Error(err.error ?? "Delete failed");
+        }
+        await loadAudiences();
+    }
+    if (loading) {
+        return _jsx("p", { className: "text-sm text-base-contrast-light", children: "Loading audiences..." });
+    }
+    return (_jsxs("div", { className: "space-y-4", children: [!audienceManagement && (_jsx("p", { className: "text-xs text-base-contrast-light", children: "This site is running in password-only mode. A developer can configure the environment variables for Admin, Editor, and Viewer details." })), passwordToggle && (_jsxs("div", { className: "space-y-2 rounded border border-base-200 p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Toggle, { checked: passwordEnabled, onChange: handlePasswordToggle, label: "Require password to view site" }), _jsx("span", { className: "text-sm font-medium", children: "Require password to view site" })] }), _jsx("p", { className: "text-xs text-base-contrast-light", children: passwordEnabled
+                            ? "Viewers must select an audience and enter a password to see any content."
+                            : "Site is fully public. All published sections are visible to anyone." }), toggleError && _jsx("p", { className: "text-xs text-red-600", children: toggleError })] })), _jsxs("div", { className: cn("space-y-2", !passwordEnabled && "opacity-60"), children: [!passwordEnabled && (_jsx("p", { className: "mb-2 text-xs text-base-contrast-light", children: "Audiences are saved but not enforced while the password is disabled." })), audiences.map((a) => (_jsx(AudienceRow, { audience: a, isDefault: a.isDefault, canMutate: audienceManagement, onSave: (patch) => handleSave(a.name, patch), onDelete: () => handleDelete(a.name) }, a.name))), audiences.length === 0 && (_jsx("p", { className: "text-sm text-base-contrast-light", children: "No audiences configured." }))] }), audienceManagement && (showAddForm ? (_jsx(AudienceAddForm, { onSubmit: handleAdd, onCancel: () => setShowAddForm(false) })) : (_jsx(Button, { variant: "secondary", onClick: () => setShowAddForm(true), children: "Add audience" })))] }));
+}

package/dist/components/shell/ViewerLoginForm.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    audiences: Array<{
+        name: string;
+        displayName: string;
+    }>;
+    next?: string | null;
+}
+export declare function ViewerLoginForm({ audiences, next }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ViewerLoginForm.d.ts.map

package/dist/components/shell/ViewerLoginForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewerLoginForm.d.ts","sourceRoot":"","sources":["../../../src/components/shell/ViewerLoginForm.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,KAAK,2CAoFzD"}