@drawnagency/primitives 0.1.0 → 0.2.0

package/dist/components/shell/ProcessingIndicator.js

@@ -1,15 +0,0 @@
-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.js

@@ -1,22 +0,0 @@
-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.js

@@ -1,15 +0,0 @@
-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.js

@@ -1,28 +0,0 @@
-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.js

@@ -1,40 +0,0 @@
-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.js

@@ -1,87 +0,0 @@
-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.js

@@ -1,94 +0,0 @@
-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.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { PasswordInput } from "../shared/PasswordInput";
-import { Button } from "../shared/Button";
-import { safeRedirect } from "../../lib/safeRedirect";
-export function ViewerLoginForm({ audiences, next }) {
-    const [audience, setAudience] = useState(audiences.length === 1 ? audiences[0].name : "");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState(null);
-    const [loading, setLoading] = useState(false);
-    async function handleSubmit(e) {
-        e.preventDefault();
-        setLoading(true);
-        setError(null);
-        const body = { audience, password };
-        if (next)
-            body.next = next;
-        try {
-            const response = await fetch("/api/auth/verify-audience", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(body),
-            });
-            if (!response.ok) {
-                const data = await response.json().catch(() => ({}));
-                setError(data.error || "Access denied");
-                return;
-            }
-            const data = await response.json().catch(() => ({}));
-            window.location.assign(safeRedirect(data.redirectTo, "/"));
-        }
-        catch {
-            setError("Network error");
-        }
-        finally {
-            setLoading(false);
-        }
-    }
-    return (_jsx("div", { className: "mx-auto max-w-sm", children: _jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "audience", className: "mb-1.5 block text-sm font-medium text-base-contrast", children: "Audience" }), _jsxs("select", { id: "audience", value: audience, onChange: (e) => setAudience(e.target.value), required: true, className: "w-full rounded border border-base-200 px-3 py-2 text-sm", children: [audiences.length > 1 && _jsx("option", { value: "", children: "Select audience..." }), audiences.map((a) => (_jsx("option", { value: a.name, children: a.displayName }, a.name)))] })] }), _jsx(PasswordInput, { label: "Password", value: password, onChange: setPassword, autoComplete: "current-password" }), error && (_jsx("p", { className: "text-sm text-red-600", children: error })), _jsx(Button, { type: "submit", variant: "brand", size: "md", disabled: loading || !audience, isLoading: loading, loadingLabel: "Verifying...", className: "w-full", children: "Enter" })] }) }));
-}