@growth-labs/cms 0.1.0

package/dist/ui/screens/SettingsScreen.js

@@ -0,0 +1,751 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// src/ui/screens/SettingsScreen.tsx — Settings screen (P7 Task 10).
+//
+// 6-tab Settings screen mounted in the 'settings' route slot (previously EmptyRoute).
+// Ported from /tmp/fronts-cms-design/cms/manage.jsx SettingsPage.
+//
+// Tabs:
+//   General           — publication name/tagline/language/timezone + publishing defaults
+//   Branding & theme  — logo upload + accent color + display typeface
+//   Roles & team      — member list + role select + invite
+//   Integrations      — read-only status (placeholder for Task 11)
+//   Domains           — read-only domain list (placeholder for Task 11)
+//   API & webhooks    — API keys + webhooks (placeholder for Task 11)
+//
+// General/Branding/Publishing-defaults call GET|PATCH /admin/api/workspace-settings.
+// Roles & Team calls GET /admin/api/settings/members + PATCH /admin/api/settings/members/:userId
+//   + POST /admin/api/settings/members/invite.
+//
+// SCOPE GUARDS:
+//   - owner-gate on PATCH settings (canEditSettings from settings-data.ts)
+//   - Integrations/Domains render read-only honest state (no mutation in Task 10)
+//   - API & Webhooks tabs are placeholders here (completed in Task 11)
+//   - NO BData, no mock values — live/empty honest rendering
+import { useCallback, useEffect, useReducer, useState } from 'react';
+import { WEBHOOK_EVENTS } from '../../engine/webhooks.js';
+import { Icon } from '../icons.js';
+import { useWorkspace } from '../workspace-context.js';
+import { buildSettingsPatch, canEditSettings, memberRowView, roleLabel, roleOptions, } from './settings-data.js';
+import { domainRowView, integrationStatusView, maskApiKeyView, webhookEventOptions, } from './settings-panels-data.js';
+const TABS = [
+    { id: 'general', label: 'General', icon: 'settings' },
+    { id: 'branding', label: 'Branding & theme', icon: 'image' },
+    { id: 'team', label: 'Roles & team', icon: 'users' },
+    { id: 'integrations', label: 'Integrations', icon: 'layers' },
+    { id: 'domains', label: 'Domains', icon: 'globe' },
+    { id: 'api', label: 'API & webhooks', icon: 'command' },
+];
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+function Card({ kicker, title, desc, children, foot, noRule, }) {
+    return (_jsxs("div", { className: "panel", style: { marginBottom: 'var(--gap)', overflow: 'hidden' }, children: [_jsxs("div", { style: { padding: '16px 18px' }, children: [kicker && _jsx("div", { className: "kicker", children: kicker }), _jsx("div", { className: "card-title", children: title }), desc && (_jsx("div", { className: "page-sub", style: { marginTop: 3, fontSize: 12.5 }, children: desc })), !noRule && _jsx("hr", { className: "masthead-rule", style: { margin: '12px 0 0' } }), _jsx("div", { style: { marginTop: 16 }, children: children })] }), foot && (_jsx("div", { style: {
+                    padding: '12px 18px',
+                    borderTop: '1px solid var(--border)',
+                    background: 'var(--panel-2)',
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    gap: 8,
+                }, children: foot }))] }));
+}
+function Row({ label, children, help, }) {
+    return (_jsxs("div", { style: { marginBottom: 16 }, children: [_jsxs("label", { children: [_jsx("span", { className: "field-label", children: label }), children] }), help && _jsx("div", { className: "help", children: help })] }));
+}
+const SETTINGS_DEFAULTS = {
+    publication_name: null,
+    tagline: null,
+    language: 'en',
+    timezone: 'Europe/Paris',
+    require_review: 0,
+    auto_seo: 1,
+    scheduled_publish: 1,
+    premium_default: 0,
+    accent_color: 'Ink blue',
+    display_typeface: 'serif',
+};
+function ToggleRow({ label, desc, value, onChange, disabled, }) {
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 14,
+            padding: '12px 0',
+            borderBottom: '1px solid var(--border-soft)',
+        }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: { fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }, children: label }), desc && (_jsx("div", { style: { fontSize: 12, color: 'var(--ink-muted)', marginTop: 2 }, children: desc }))] }), _jsx("button", { type: "button", onClick: () => !disabled && onChange(!value), style: {
+                    width: 40,
+                    height: 22,
+                    borderRadius: 12,
+                    border: 0,
+                    background: value ? 'var(--accent)' : 'var(--hover)',
+                    position: 'relative',
+                    flex: 'none',
+                    transition: 'background .2s',
+                    cursor: disabled ? 'default' : 'pointer',
+                    opacity: disabled ? 0.5 : 1,
+                }, children: _jsx("span", { style: {
+                        position: 'absolute',
+                        top: 2,
+                        left: value ? 20 : 2,
+                        width: 18,
+                        height: 18,
+                        borderRadius: '50%',
+                        background: '#fff',
+                        boxShadow: '0 1px 2px rgba(0,0,0,.3)',
+                        transition: 'left .2s',
+                    } }) })] }));
+}
+function GeneralSettings({ data, canEdit, onSave, saving, }) {
+    const [form, setForm] = useState({ ...data });
+    // Keep local form in sync if parent data changes
+    useEffect(() => {
+        setForm({ ...data });
+    }, [data]);
+    function setField(key, value) {
+        if (!canEdit)
+            return;
+        setForm((f) => ({ ...f, [key]: value }));
+    }
+    async function handleSave() {
+        if (!canEdit || saving)
+            return;
+        const patch = buildSettingsPatch(form);
+        await onSave(patch);
+    }
+    function handleCancel() {
+        setForm({ ...data });
+    }
+    const footer = canEdit ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "btn sm", onClick: handleCancel, disabled: saving, children: "Cancel" }), _jsx("button", { type: "button", className: "btn primary sm", onClick: handleSave, disabled: saving, children: saving ? 'Saving…' : 'Save changes' })] })) : (_jsx("span", { style: { fontSize: 12, color: 'var(--ink-muted)' }, children: "Settings editing is restricted to workspace owners." }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Card, { kicker: "Identity", title: "Publication", desc: "Identity shown across the site and in metadata.", foot: footer, children: [_jsx(Row, { label: "Publication name", children: _jsx("input", { className: "input", value: form.publication_name ?? '', onChange: (e) => setField('publication_name', e.target.value), disabled: !canEdit }) }), _jsx(Row, { label: "Tagline", children: _jsx("input", { className: "input", value: form.tagline ?? '', onChange: (e) => setField('tagline', e.target.value), disabled: !canEdit }) }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }, children: [_jsx(Row, { label: "Primary language", children: _jsxs("select", { className: "selectbox", value: form.language, onChange: (e) => setField('language', e.target.value), disabled: !canEdit, children: [_jsx("option", { value: "en", children: "English" }), _jsx("option", { value: "en-GB", children: "English (UK)" }), _jsx("option", { value: "en-US", children: "English (US)" }), _jsx("option", { value: "fr", children: "French" })] }) }), _jsx(Row, { label: "Timezone", children: _jsxs("select", { className: "selectbox", value: form.timezone, onChange: (e) => setField('timezone', e.target.value), disabled: !canEdit, children: [_jsx("option", { value: "Europe/Paris", children: "Europe/Paris (CET)" }), _jsx("option", { value: "Europe/London", children: "Europe/London (GMT)" }), _jsx("option", { value: "America/New_York", children: "America/New_York (ET)" }), _jsx("option", { value: "America/Los_Angeles", children: "America/Los_Angeles (PT)" }), _jsx("option", { value: "UTC", children: "UTC" })] }) })] })] }), _jsx(Card, { kicker: "Defaults", title: "Publishing defaults", desc: "Applied to new content unless overridden.", children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(ToggleRow, { label: "Require editorial review before publish", desc: "New drafts must pass through the review column.", value: form.require_review === 1, onChange: (v) => setField('require_review', v ? 1 : 0), disabled: !canEdit }), _jsx(ToggleRow, { label: "Auto-generate SEO metadata", desc: "Draft meta title, description and OG image on save.", value: form.auto_seo === 1, onChange: (v) => setField('auto_seo', v ? 1 : 0), disabled: !canEdit }), _jsx(ToggleRow, { label: "Enable scheduled publishing", desc: "Allow content to auto-publish at a set time.", value: form.scheduled_publish === 1, onChange: (v) => setField('scheduled_publish', v ? 1 : 0), disabled: !canEdit }), _jsx(ToggleRow, { label: "New articles are premium by default", value: form.premium_default === 1, onChange: (v) => setField('premium_default', v ? 1 : 0), disabled: !canEdit })] }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Branding settings
+// ---------------------------------------------------------------------------
+const ACCENT_PRESETS = ['#0c4a6e', '#b23a2e', '#1f6b4a', '#5b4bc4', '#374151'];
+const TYPEFACE_OPTIONS = ['serif', 'Source Serif 4', 'Spectral', 'Newsreader', 'Inter'];
+function BrandingSettings({ data, canEdit, onSave, saving, }) {
+    const [accent, setAccent] = useState(data.accent_color ?? ACCENT_PRESETS[0]);
+    const [typeface, setTypeface] = useState(data.display_typeface ?? 'serif');
+    useEffect(() => {
+        setAccent(data.accent_color ?? ACCENT_PRESETS[0]);
+        setTypeface(data.display_typeface ?? 'serif');
+    }, [data]);
+    async function handleSaveTheme() {
+        if (!canEdit || saving)
+            return;
+        await onSave({ accent_color: accent, display_typeface: typeface });
+    }
+    const themeFooter = canEdit ? (_jsx("button", { type: "button", className: "btn primary sm", onClick: handleSaveTheme, disabled: saving, children: saving ? 'Saving…' : 'Save theme' })) : (_jsx("span", { style: { fontSize: 12, color: 'var(--ink-muted)' }, children: "Branding editing is restricted to workspace owners." }));
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { kicker: "Brand", title: "Logo & mark", desc: "Shown in the CMS sidebar and the published site header.", children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx("div", { style: {
+                                width: 56,
+                                height: 56,
+                                borderRadius: 12,
+                                background: 'var(--ink)',
+                                display: 'grid',
+                                placeItems: 'center',
+                                flex: 'none',
+                            }, children: _jsx(Icon, { name: "settings", size: 28, style: { color: '#fff' } }) }), canEdit ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "btn sm", children: [_jsx(Icon, { name: "upload", size: 14 }), " Upload logo"] }), _jsx("button", { type: "button", className: "btn ghost sm", children: "Reset" })] })) : (_jsx("span", { style: { fontSize: 12, color: 'var(--ink-muted)' }, children: "Logo editing is restricted to workspace owners." }))] }) }), _jsxs(Card, { kicker: "Appearance", title: "Theme", desc: "Per-site accent and typography. Each site in your workspace keeps its own.", foot: themeFooter, children: [_jsx(Row, { label: "Accent color", children: _jsx("div", { style: { display: 'flex', gap: 10 }, children: ACCENT_PRESETS.map((c) => (_jsx("button", { type: "button", onClick: () => canEdit && setAccent(c), style: {
+                                    width: 34,
+                                    height: 34,
+                                    borderRadius: 8,
+                                    background: c,
+                                    cursor: canEdit ? 'pointer' : 'default',
+                                    outline: accent === c ? '2px solid var(--accent)' : 'none',
+                                    outlineOffset: 2,
+                                    border: 0,
+                                    opacity: canEdit ? 1 : 0.6,
+                                } }, c))) }) }), _jsx(Row, { label: "Display typeface", help: "The serif used for headlines on the public site.", children: _jsx("select", { className: "selectbox", value: typeface, onChange: (e) => canEdit && setTypeface(e.target.value), disabled: !canEdit, children: TYPEFACE_OPTIONS.map((t) => (_jsx("option", { value: t, children: t }, t))) }) })] })] }));
+}
+function teamReducer(state, action) {
+    switch (action.type) {
+        case 'fetch-start':
+            return { ...state, loading: true, error: null };
+        case 'fetch-ok':
+            return { loading: false, error: null, members: action.members };
+        case 'fetch-error':
+            return { loading: false, error: action.error, members: [] };
+        case 'update-role':
+            return {
+                ...state,
+                members: state.members.map((m) => m.userId === action.userId ? { ...m, role: action.role } : m),
+            };
+        default:
+            return state;
+    }
+}
+function TeamSettings({ currentSubject }) {
+    const [state, dispatch] = useReducer(teamReducer, {
+        loading: true,
+        error: null,
+        members: [],
+    });
+    const [inviteEmail, setInviteEmail] = useState('');
+    const [inviteRole, setInviteRole] = useState('editor');
+    const [inviting, setInviting] = useState(false);
+    const [inviteError, setInviteError] = useState(null);
+    const [inviteSuccess, setInviteSuccess] = useState(null);
+    const [showInviteForm, setShowInviteForm] = useState(false);
+    const [roleChanging, setRoleChanging] = useState(null);
+    const fetchMembers = useCallback(async () => {
+        dispatch({ type: 'fetch-start' });
+        try {
+            const res = await fetch('/admin/api/settings/members');
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` });
+                return;
+            }
+            const body = (await res.json());
+            const views = (body.members ?? []).map((m) => memberRowView({
+                userId: m.userId,
+                role: m.role,
+                email: m.email,
+                name: m.name,
+                image: m.image,
+                acceptedAt: m.acceptedAt,
+                createdAt: m.createdAt,
+            }, currentSubject));
+            dispatch({ type: 'fetch-ok', members: views });
+        }
+        catch (err) {
+            dispatch({ type: 'fetch-error', error: String(err) });
+        }
+    }, [currentSubject]);
+    useEffect(() => {
+        fetchMembers().catch(() => { });
+    }, [fetchMembers]);
+    async function handleRoleChange(userId, newRole) {
+        setRoleChanging(userId);
+        try {
+            const res = await fetch(`/admin/api/settings/members/${encodeURIComponent(userId)}`, {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ role: newRole }),
+            });
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                alert(body.reason ?? body.error ?? `Failed to change role (HTTP ${res.status})`);
+                return;
+            }
+            dispatch({ type: 'update-role', userId, role: newRole });
+        }
+        catch (err) {
+            alert(String(err));
+        }
+        finally {
+            setRoleChanging(null);
+        }
+    }
+    async function handleInvite(e) {
+        e.preventDefault();
+        if (!inviteEmail.trim())
+            return;
+        setInviting(true);
+        setInviteError(null);
+        setInviteSuccess(null);
+        try {
+            const res = await fetch('/admin/api/settings/members/invite', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole }),
+            });
+            const body = (await res.json().catch(() => ({})));
+            if (!res.ok) {
+                setInviteError(body.error ?? `HTTP ${res.status}`);
+                return;
+            }
+            setInviteSuccess(body.token
+                ? `Invite sent. Accept link: /invite/accept?token=${body.token}`
+                : 'Invite created. Share the accept link with the invitee.');
+            setInviteEmail('');
+            setShowInviteForm(false);
+        }
+        catch (err) {
+            setInviteError(String(err));
+        }
+        finally {
+            setInviting(false);
+        }
+    }
+    const roles = roleOptions();
+    const foot = (_jsxs("button", { type: "button", className: "btn primary sm", onClick: () => setShowInviteForm((v) => !v), children: [_jsx(Icon, { name: "plus", size: 14 }), " Invite member"] }));
+    return (_jsxs(Card, { kicker: "Access", title: "Team", desc: "People with access to this workspace and their roles.", foot: foot, noRule: true, children: [state.loading && (_jsx("div", { style: { padding: 16, color: 'var(--ink-muted)', fontSize: 13 }, children: "Loading members\u2026" })), state.error && !state.loading && (_jsxs("div", { style: { padding: 16, color: 'var(--red)', fontSize: 13 }, children: ["Failed to load members: ", state.error] })), !state.loading && !state.error && state.members.length === 0 && (_jsx("div", { style: { padding: 16, color: 'var(--ink-muted)', fontSize: 13 }, children: "No members yet." })), !state.loading && !state.error && state.members.length > 0 && (_jsxs("table", { className: "tbl", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Member" }), _jsx("th", { children: "Email" }), _jsx("th", { style: { width: 170 }, children: "Role" })] }) }), _jsx("tbody", { children: state.members.map((m) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 11 }, children: [_jsx("div", { className: "avatar", style: {
+                                                    background: 'var(--accent-tint)',
+                                                    width: 30,
+                                                    height: 30,
+                                                    fontSize: 11,
+                                                    color: 'var(--accent)',
+                                                }, children: (m.name ?? m.email)[0]?.toUpperCase() ?? '?' }), _jsxs("span", { style: { fontSize: 13, fontWeight: 600, color: 'var(--ink)' }, children: [m.name ?? m.email, m.isSelf && (_jsx("span", { style: { fontSize: 11, color: 'var(--ink-muted)', marginLeft: 6 }, children: "(you)" }))] })] }) }), _jsx("td", { style: { fontSize: 12.5, color: 'var(--ink-muted)' }, children: m.email }), _jsx("td", { children: _jsx("select", { className: "selectbox", value: m.role, onChange: (e) => handleRoleChange(m.userId, e.target.value), disabled: roleChanging === m.userId || m.isSelf, style: { width: 150, fontSize: 12.5, padding: '7px 10px' }, children: roles.map((r) => (_jsx("option", { value: r.value, children: r.label }, r.value))) }) })] }, m.userId))) })] })), showInviteForm && (_jsxs("form", { onSubmit: handleInvite, className: "panel panel-pad", style: { marginTop: 16 }, children: [_jsx("div", { className: "kicker", style: { marginBottom: 10 }, children: "Invite a member" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr auto', gap: 8, marginBottom: 8 }, children: [_jsx("input", { type: "email", className: "input", placeholder: "Email address", value: inviteEmail, onChange: (e) => setInviteEmail(e.target.value), required: true }), _jsx("select", { className: "selectbox", value: inviteRole, onChange: (e) => setInviteRole(e.target.value), style: { width: 150 }, children: roles.map((r) => (_jsx("option", { value: r.value, children: r.label }, r.value))) })] }), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", className: "btn sm", onClick: () => {
+                                    setShowInviteForm(false);
+                                    setInviteError(null);
+                                }, children: "Cancel" }), _jsx("button", { type: "submit", className: "btn primary sm", disabled: inviting, children: inviting ? 'Inviting…' : 'Send invite' })] }), inviteError && (_jsx("div", { style: { marginTop: 8, fontSize: 12, color: 'var(--red)' }, children: inviteError })), inviteSuccess && (_jsx("div", { className: "mono", style: { marginTop: 8, fontSize: 12, color: 'var(--green)' }, children: inviteSuccess }))] }))] }));
+}
+function apiKeysReducer(state, action) {
+    switch (action.type) {
+        case 'fetch-start':
+            return { ...state, loading: true, error: null };
+        case 'fetch-ok':
+            return { loading: false, error: null, keys: action.keys };
+        case 'fetch-error':
+            return { loading: false, error: action.error, keys: [] };
+        case 'revoked':
+            return { ...state, keys: state.keys.filter((k) => k.id !== action.id) };
+        default:
+            return state;
+    }
+}
+/** One-time reveal modal shown after key creation. */
+function KeyRevealModal({ rawKey, onDone }) {
+    const [copied, setCopied] = useState(false);
+    function handleCopy() {
+        void navigator.clipboard.writeText(rawKey).then(() => {
+            setCopied(true);
+        });
+    }
+    return (_jsx("div", { className: "scrim", style: { placeItems: 'center' }, children: _jsxs("div", { className: "panel", style: {
+                padding: 28,
+                width: 480,
+                maxWidth: '90vw',
+                boxShadow: 'var(--shadow-lg)',
+            }, children: [_jsx("div", { className: "kicker", style: { marginBottom: 6 }, children: "One-time reveal" }), _jsx("div", { className: "card-title", style: { marginBottom: 8 }, children: "Your new API key" }), _jsx("div", { style: {
+                        fontSize: 12.5,
+                        color: 'var(--red)',
+                        marginBottom: 14,
+                        fontWeight: 600,
+                    }, children: "Copy this key now \u2014 it will not be shown again." }), _jsx("div", { className: "mono", style: {
+                        background: 'var(--panel-2)',
+                        border: '1px solid var(--border)',
+                        borderRadius: 8,
+                        padding: '11px 14px',
+                        fontSize: 13,
+                        wordBreak: 'break-all',
+                        color: 'var(--ink)',
+                        marginBottom: 14,
+                    }, children: rawKey }), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [_jsxs("button", { type: "button", className: "btn sm", onClick: handleCopy, children: [_jsx(Icon, { name: "copy", size: 14 }), " ", copied ? 'Copied!' : 'Copy'] }), _jsx("button", { type: "button", className: "btn primary sm", onClick: onDone, children: "Done \u2014 I've saved this key" })] })] }) }));
+}
+function ApiSettings() {
+    const [state, dispatch] = useReducer(apiKeysReducer, {
+        loading: true,
+        error: null,
+        keys: [],
+    });
+    const [showCreateForm, setShowCreateForm] = useState(false);
+    const [newKeyName, setNewKeyName] = useState('');
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState(null);
+    const [revealedKey, setRevealedKey] = useState(null);
+    const [revoking, setRevoking] = useState(null);
+    const fetchKeys = useCallback(async () => {
+        dispatch({ type: 'fetch-start' });
+        try {
+            const res = await fetch('/admin/api/settings/api-keys');
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` });
+                return;
+            }
+            const body = (await res.json());
+            dispatch({ type: 'fetch-ok', keys: body.apiKeys ?? [] });
+        }
+        catch (err) {
+            dispatch({ type: 'fetch-error', error: String(err) });
+        }
+    }, []);
+    useEffect(() => {
+        fetchKeys().catch(() => { });
+    }, [fetchKeys]);
+    async function handleCreate(e) {
+        e.preventDefault();
+        if (!newKeyName.trim())
+            return;
+        setCreating(true);
+        setCreateError(null);
+        try {
+            const res = await fetch('/admin/api/settings/api-keys', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: newKeyName.trim(), scopes: [] }),
+            });
+            const body = (await res.json().catch(() => ({})));
+            if (!res.ok) {
+                setCreateError(body.error ?? `HTTP ${res.status}`);
+                return;
+            }
+            // Show the one-time reveal modal
+            if (body.rawKey) {
+                setRevealedKey(body.rawKey);
+            }
+            setNewKeyName('');
+            setShowCreateForm(false);
+            await fetchKeys();
+        }
+        catch (err) {
+            setCreateError(String(err));
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    async function handleRevoke(id) {
+        if (!confirm('Revoke this key? Any code using it will immediately lose access.'))
+            return;
+        setRevoking(id);
+        try {
+            const res = await fetch(`/admin/api/settings/api-keys/${encodeURIComponent(id)}`, {
+                method: 'DELETE',
+            });
+            if (res.ok) {
+                dispatch({ type: 'revoked', id });
+            }
+            else {
+                const body = (await res.json().catch(() => ({})));
+                alert(body.error ?? `Failed to revoke (HTTP ${res.status})`);
+            }
+        }
+        catch (err) {
+            alert(String(err));
+        }
+        finally {
+            setRevoking(null);
+        }
+    }
+    const foot = (_jsxs("button", { type: "button", className: "btn primary sm", onClick: () => setShowCreateForm((v) => !v), children: [_jsx(Icon, { name: "plus", size: 14 }), " New key"] }));
+    return (_jsxs(_Fragment, { children: [revealedKey && _jsx(KeyRevealModal, { rawKey: revealedKey, onDone: () => setRevealedKey(null) }), _jsxs(Card, { kicker: "Programmatic access", title: "API keys", desc: "Programmatic access to the content API.", foot: foot, noRule: true, children: [state.loading && (_jsx("div", { style: { padding: 16, color: 'var(--ink-muted)', fontSize: 13 }, children: "Loading API keys\u2026" })), state.error && !state.loading && (_jsxs("div", { style: { padding: 16, color: 'var(--red)', fontSize: 13 }, children: ["Failed to load keys: ", state.error] })), !state.loading && !state.error && state.keys.length === 0 && !showCreateForm && (_jsx("div", { style: { padding: '16px 0', color: 'var(--ink-muted)', fontSize: 13 }, children: "No API keys yet. Create one to allow programmatic access." })), !state.loading && !state.error && state.keys.length > 0 && (_jsxs("table", { className: "tbl", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Key" }), _jsx("th", { children: "Scopes" }), _jsx("th", { style: { width: 110, textAlign: 'right' } })] }) }), _jsx("tbody", { children: state.keys.map((k) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 11 }, children: [_jsx(Icon, { name: "command", size: 17, style: { color: 'var(--ink-muted)', flex: 'none' } }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("div", { style: { fontSize: 13, fontWeight: 600, color: 'var(--ink)' }, children: k.name }), _jsx("div", { className: "mono", style: { fontSize: 12, color: 'var(--ink-muted)' }, children: maskApiKeyView(k) })] })] }) }), _jsx("td", { children: k.scopes.length > 0 ? (_jsx("span", { className: "tag-chip", children: k.scopes.join(', ') })) : (_jsx("span", { className: "mono", style: { fontSize: 11.5, color: 'var(--ink-faint)' }, children: "\u2014" })) }), _jsx("td", { style: { textAlign: 'right' }, children: _jsx("button", { type: "button", className: "btn danger sm", disabled: revoking === k.id, onClick: () => handleRevoke(k.id), children: revoking === k.id ? 'Revoking…' : 'Revoke' }) })] }, k.id))) })] })), showCreateForm && (_jsxs("form", { onSubmit: handleCreate, className: "panel panel-pad", style: { marginTop: 16 }, children: [_jsx("div", { className: "kicker", style: { marginBottom: 10 }, children: "Create API key" }), _jsx("input", { type: "text", className: "input", placeholder: "Key name (e.g. Production build)", value: newKeyName, onChange: (e) => setNewKeyName(e.target.value), required: true, style: { marginBottom: 8 } }), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", className: "btn sm", onClick: () => {
+                                            setShowCreateForm(false);
+                                            setCreateError(null);
+                                        }, children: "Cancel" }), _jsx("button", { type: "submit", className: "btn primary sm", disabled: creating, children: creating ? 'Creating…' : 'Create key' })] }), createError && (_jsx("div", { style: { marginTop: 8, fontSize: 12, color: 'var(--red)' }, children: createError }))] }))] })] }));
+}
+function webhooksReducer(state, action) {
+    switch (action.type) {
+        case 'fetch-start':
+            return { ...state, loading: true, error: null };
+        case 'fetch-ok':
+            return { loading: false, error: null, webhooks: action.webhooks };
+        case 'fetch-error':
+            return { loading: false, error: action.error, webhooks: [] };
+        case 'deleted':
+            return { ...state, webhooks: state.webhooks.filter((w) => w.id !== action.id) };
+        case 'update-status':
+            return {
+                ...state,
+                webhooks: state.webhooks.map((w) => w.id === action.id ? { ...w, lastStatus: action.status } : w),
+            };
+        default:
+            return state;
+    }
+}
+function WebhooksSettings() {
+    const [state, dispatch] = useReducer(webhooksReducer, {
+        loading: true,
+        error: null,
+        webhooks: [],
+    });
+    const [showCreateForm, setShowCreateForm] = useState(false);
+    const [newEventType, setNewEventType] = useState(WEBHOOK_EVENTS[0]);
+    const [newUrl, setNewUrl] = useState('');
+    const [creating, setCreating] = useState(false);
+    const [createError, setCreateError] = useState(null);
+    const [testing, setTesting] = useState(null);
+    const [deleting, setDeleting] = useState(null);
+    const fetchWebhooks = useCallback(async () => {
+        dispatch({ type: 'fetch-start' });
+        try {
+            const res = await fetch('/admin/api/settings/webhooks');
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                dispatch({ type: 'fetch-error', error: body.error ?? `HTTP ${res.status}` });
+                return;
+            }
+            const body = (await res.json());
+            dispatch({ type: 'fetch-ok', webhooks: body.webhooks ?? [] });
+        }
+        catch (err) {
+            dispatch({ type: 'fetch-error', error: String(err) });
+        }
+    }, []);
+    useEffect(() => {
+        fetchWebhooks().catch(() => { });
+    }, [fetchWebhooks]);
+    async function handleCreate(e) {
+        e.preventDefault();
+        if (!newUrl.trim())
+            return;
+        setCreating(true);
+        setCreateError(null);
+        try {
+            const res = await fetch('/admin/api/settings/webhooks', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ eventType: newEventType, url: newUrl.trim() }),
+            });
+            const body = (await res.json().catch(() => ({})));
+            if (!res.ok) {
+                setCreateError(body.error ?? `HTTP ${res.status}`);
+                return;
+            }
+            setNewUrl('');
+            setShowCreateForm(false);
+            await fetchWebhooks();
+        }
+        catch (err) {
+            setCreateError(String(err));
+        }
+        finally {
+            setCreating(false);
+        }
+    }
+    async function handleTest(id) {
+        setTesting(id);
+        try {
+            const res = await fetch(`/admin/api/settings/webhooks/${encodeURIComponent(id)}/test`, {
+                method: 'POST',
+            });
+            const body = (await res.json().catch(() => ({})));
+            if (!res.ok) {
+                alert(body.error ?? `Test failed (HTTP ${res.status})`);
+                return;
+            }
+            dispatch({ type: 'update-status', id, status: 'test' });
+        }
+        catch (err) {
+            alert(String(err));
+        }
+        finally {
+            setTesting(null);
+        }
+    }
+    async function handleDelete(id) {
+        if (!confirm('Delete this webhook? It will stop receiving events.'))
+            return;
+        setDeleting(id);
+        try {
+            const res = await fetch(`/admin/api/settings/webhooks/${encodeURIComponent(id)}`, {
+                method: 'DELETE',
+            });
+            if (res.ok) {
+                dispatch({ type: 'deleted', id });
+            }
+            else {
+                const body = (await res.json().catch(() => ({})));
+                alert(body.error ?? `Failed to delete (HTTP ${res.status})`);
+            }
+        }
+        catch (err) {
+            alert(String(err));
+        }
+        finally {
+            setDeleting(null);
+        }
+    }
+    const eventOptions = webhookEventOptions();
+    const foot = (_jsxs("button", { type: "button", className: "btn primary sm", onClick: () => setShowCreateForm((v) => !v), children: [_jsx(Icon, { name: "plus", size: 14 }), " Add webhook"] }));
+    return (_jsxs(Card, { kicker: "Event hooks", title: "Webhooks", desc: "Fired when content changes \u2014 used by Foundry and the build pipeline.", foot: foot, noRule: true, children: [state.loading && (_jsx("div", { style: { padding: 16, color: 'var(--ink-muted)', fontSize: 13 }, children: "Loading webhooks\u2026" })), state.error && !state.loading && (_jsxs("div", { style: { padding: 16, color: 'var(--red)', fontSize: 13 }, children: ["Failed to load webhooks: ", state.error] })), !state.loading && !state.error && state.webhooks.length === 0 && !showCreateForm && (_jsx("div", { style: { padding: '16px 0', color: 'var(--ink-muted)', fontSize: 13 }, children: "No webhooks registered yet." })), !state.loading && !state.error && state.webhooks.length > 0 && (_jsxs("table", { className: "tbl", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { style: { width: 180 }, children: "Event" }), _jsx("th", { children: "Endpoint" }), _jsx("th", { style: { width: 90 }, children: "Last" }), _jsx("th", { style: { width: 130, textAlign: 'right' } })] }) }), _jsx("tbody", { children: state.webhooks.map((w) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("span", { className: "pill scheduled", style: { background: 'var(--blue-tint)', fontSize: 11.5 }, children: w.eventType }) }), _jsx("td", { className: "mono", style: {
+                                        fontSize: 12,
+                                        color: 'var(--ink-muted)',
+                                        maxWidth: 0,
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                    }, children: w.url }), _jsx("td", { children: w.lastStatus ? (_jsxs("span", { style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: 5,
+                                            fontSize: 11.5,
+                                            color: w.lastStatus === 'test' ? 'var(--ink-muted)' : 'var(--green)',
+                                        }, children: [_jsx(Icon, { name: "checkCircle", size: 13 }), " ", w.lastStatus] })) : (_jsx("span", { className: "mono", style: { fontSize: 11.5, color: 'var(--ink-faint)' }, children: "\u2014" })) }), _jsx("td", { style: { textAlign: 'right' }, children: _jsxs("div", { style: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: 6,
+                                            justifyContent: 'flex-end',
+                                        }, children: [_jsx("button", { type: "button", className: "btn ghost sm", disabled: testing === w.id, onClick: () => handleTest(w.id), style: { fontSize: 12 }, children: testing === w.id ? 'Testing…' : 'Test' }), _jsx("button", { type: "button", className: "icon-btn", disabled: deleting === w.id, onClick: () => handleDelete(w.id), title: "Delete webhook", children: _jsx(Icon, { name: "trash", size: 15 }) })] }) })] }, w.id))) })] })), showCreateForm && (_jsxs("form", { onSubmit: handleCreate, className: "panel panel-pad", style: { marginTop: 16 }, children: [_jsx("div", { className: "kicker", style: { marginBottom: 10 }, children: "Add webhook" }), _jsx("div", { style: { marginBottom: 8 }, children: _jsxs("label", { children: [_jsx("span", { className: "field-label", children: "Event" }), _jsx("select", { className: "selectbox", value: newEventType, onChange: (e) => setNewEventType(e.target.value), children: eventOptions.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value))) })] }) }), _jsx("div", { style: { marginBottom: 8 }, children: _jsxs("label", { children: [_jsx("span", { className: "field-label", children: "Endpoint URL" }), _jsx("input", { type: "url", className: "input", placeholder: "https://your-endpoint.example.com/hook", value: newUrl, onChange: (e) => setNewUrl(e.target.value), required: true })] }) }), _jsxs("div", { style: { display: 'flex', gap: 8, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", className: "btn sm", onClick: () => {
+                                    setShowCreateForm(false);
+                                    setCreateError(null);
+                                }, children: "Cancel" }), _jsx("button", { type: "submit", className: "btn primary sm", disabled: creating, children: creating ? 'Adding…' : 'Add webhook' })] }), createError && (_jsx("div", { style: { marginTop: 8, fontSize: 12, color: 'var(--red)' }, children: createError }))] }))] }));
+}
+const INTEGRATION_DEFS = [
+    {
+        name: 'Cloudflare R2',
+        desc: 'Object storage for media originals',
+        icon: 'media',
+        providerKey: 'r2',
+    },
+    {
+        name: 'Foundry',
+        desc: 'Video & audio processing pipeline',
+        icon: 'bolt',
+        providerKey: 'foundry',
+    },
+    {
+        name: 'LemonSqueezy',
+        desc: 'Subscriptions, billing & checkout',
+        icon: 'inbox',
+        providerKey: 'lemonsqueezy',
+    },
+    {
+        name: 'Customer.io',
+        desc: 'Newsletter & lifecycle email',
+        icon: 'mail',
+        providerKey: 'customerio',
+    },
+    {
+        name: 'Cloudflare Search',
+        desc: 'Full-text content index',
+        icon: 'search',
+        providerKey: 'search',
+    },
+    {
+        name: 'Web Push',
+        desc: 'Browser breaking-news alerts',
+        icon: 'bell',
+        providerKey: 'webpush',
+    },
+];
+function IntegrationsSettings() {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        fetch('/admin/api/settings/integrations')
+            .then(async (res) => {
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                setError(body.error ?? `HTTP ${res.status}`);
+                return;
+            }
+            const body = (await res.json());
+            setData(body);
+        })
+            .catch((err) => {
+            setError(String(err));
+        })
+            .finally(() => setLoading(false));
+    }, []);
+    return (_jsxs(Card, { kicker: "Connected services", title: "Integrations", desc: "Services connected to this workspace.", children: [loading && (_jsx("div", { style: { padding: 16, color: 'var(--ink-muted)', fontSize: 13 }, children: "Loading integrations\u2026" })), error && !loading && (_jsxs("div", { style: { padding: 16, color: 'var(--red)', fontSize: 13 }, children: ["Failed to load integrations: ", error] })), !loading && !error && (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10 }, children: INTEGRATION_DEFS.map((it) => {
+                    const raw = data?.integrations?.[it.providerKey] ?? null;
+                    const view = integrationStatusView(raw);
+                    return (_jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 13,
+                            padding: '13px 14px',
+                            border: '1px solid var(--border)',
+                            borderRadius: 10,
+                            background: 'var(--panel-2)',
+                        }, children: [_jsx("div", { style: {
+                                    width: 38,
+                                    height: 38,
+                                    borderRadius: 9,
+                                    background: 'var(--hover)',
+                                    color: 'var(--ink-soft)',
+                                    display: 'grid',
+                                    placeItems: 'center',
+                                    flex: 'none',
+                                }, children: _jsx(Icon, { name: it.icon, size: 19 }) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }, children: it.name }), _jsx("div", { style: { fontSize: 12, color: 'var(--ink-muted)' }, children: it.desc })] }), _jsxs("div", { style: { textAlign: 'right' }, children: [view.connected ? (_jsxs("span", { className: "pill published", children: [_jsx("span", { className: "pdot" }), view.label] })) : (_jsx("span", { className: "pill draft", children: view.label })), view.detail && (_jsx("div", { className: "mono", style: { fontSize: 10.5, color: 'var(--ink-faint)', marginTop: 4 }, children: view.detail }))] })] }, it.name));
+                }) }))] }));
+}
+function DomainsSettings() {
+    const [data, setData] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        fetch('/admin/api/settings/domains')
+            .then(async (res) => {
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                setError(body.error ?? `HTTP ${res.status}`);
+                return;
+            }
+            const body = (await res.json());
+            setData(body);
+        })
+            .catch((err) => {
+            setError(String(err));
+        })
+            .finally(() => setLoading(false));
+    }, []);
+    const domainRows = (data?.domains ?? []).map((d) => domainRowView(d));
+    return (_jsxs(Card, { kicker: "Delivery", title: "Domains", desc: "Where this site is served. Managed via Cloudflare.", noRule: true, children: [loading && (_jsx("div", { style: { padding: 16, color: 'var(--ink-muted)', fontSize: 13 }, children: "Loading domains\u2026" })), error && !loading && (_jsxs("div", { style: { padding: 16, color: 'var(--red)', fontSize: 13 }, children: ["Failed to load domains: ", error] })), !loading && !error && domainRows.length === 0 && (_jsx("div", { style: { padding: '16px 0', color: 'var(--ink-muted)', fontSize: 13 }, children: "No domains configured. Domains are managed via the Cloudflare dashboard." })), !loading && !error && domainRows.length > 0 && (_jsxs("table", { className: "tbl", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Domain" }), _jsx("th", { children: "Role" }), _jsx("th", { style: { width: 130, textAlign: 'right' }, children: "SSL" })] }) }), _jsx("tbody", { children: domainRows.map((d) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 11 }, children: [_jsx(Icon, { name: "globe", size: 17, style: { color: 'var(--ink-muted)', flex: 'none' } }), _jsx("span", { style: { fontSize: 13, fontWeight: 600, color: 'var(--ink)' }, children: d.domain })] }) }), _jsx("td", { style: { fontSize: 12.5, color: 'var(--ink-muted)' }, children: d.role || '—' }), _jsx("td", { style: { textAlign: 'right' }, children: d.sslActive ? (_jsxs("span", { className: "pill published", children: [_jsx("span", { className: "pdot" }), "SSL active"] })) : (_jsx("span", { className: "pill draft", children: "No SSL" })) })] }, d.domain))) })] }))] }));
+}
+// ---------------------------------------------------------------------------
+// SettingsScreen — top-level screen component
+// ---------------------------------------------------------------------------
+export function SettingsScreen() {
+    const { state } = useWorkspace();
+    const [tab, setTab] = useState('general');
+    const [settingsData, setSettingsData] = useState(null);
+    const [settingsLoading, setSettingsLoading] = useState(true);
+    const [settingsError, setSettingsError] = useState(null);
+    const [saving, setSaving] = useState(false);
+    const currentSubject = state.user?.subject ?? null;
+    const currentRole = state.user?.role ?? null;
+    const editable = canEditSettings(currentRole);
+    // Fetch workspace settings on mount
+    const fetchSettings = useCallback(async () => {
+        setSettingsLoading(true);
+        setSettingsError(null);
+        try {
+            const res = await fetch('/admin/api/workspace-settings');
+            if (!res.ok) {
+                setSettingsError(`Failed to load settings (HTTP ${res.status})`);
+                return;
+            }
+            const body = (await res.json());
+            setSettingsData({ ...SETTINGS_DEFAULTS, ...(body.data ?? {}) });
+        }
+        catch (err) {
+            setSettingsError(String(err));
+        }
+        finally {
+            setSettingsLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        fetchSettings().catch(() => { });
+    }, [fetchSettings]);
+    async function handleSave(patch) {
+        if (!editable)
+            return;
+        setSaving(true);
+        try {
+            const res = await fetch('/admin/api/workspace-settings', {
+                method: 'PATCH',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(patch),
+            });
+            if (!res.ok) {
+                const body = (await res.json().catch(() => ({})));
+                alert(body.error ?? `Failed to save settings (HTTP ${res.status})`);
+                return;
+            }
+            // Re-fetch to ensure the UI is in sync with server state
+            await fetchSettings();
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    const data = settingsData ?? SETTINGS_DEFAULTS;
+    return (_jsxs("div", { className: "page page-wide fade-in", style: { maxWidth: 1180 }, children: [_jsx("div", { className: "page-head", children: _jsxs("div", { children: [_jsx("h1", { className: "page-title", children: "Settings" }), _jsxs("div", { className: "page-sub", children: ["Workspace configuration for ", data.publication_name ?? 'this publication', "."] })] }) }), settingsError && !settingsLoading && (_jsx("div", { className: "panel", style: {
+                    padding: '10px 14px',
+                    marginBottom: 'var(--gap)',
+                    background: 'var(--red-tint)',
+                    borderColor: 'var(--red)',
+                    fontSize: 13,
+                    color: 'var(--red)',
+                }, children: settingsError })), _jsxs("div", { style: {
+                    display: 'grid',
+                    gridTemplateColumns: '208px 1fr',
+                    gap: 'var(--gap)',
+                    alignItems: 'start',
+                }, children: [_jsx("div", { className: "panel", style: { padding: 8, position: 'sticky', top: 0 }, children: TABS.map((t) => (_jsxs("button", { type: "button", className: `nav-item${tab === t.id ? ' active' : ''}`, style: {
+                                width: '100%',
+                                textAlign: 'left',
+                                border: 0,
+                                background: 'transparent',
+                            }, onClick: () => setTab(t.id), children: [_jsx(Icon, { name: t.icon, size: 17, className: "ni-icon" }), _jsx("span", { className: "ni-label", children: t.label })] }, t.id))) }), _jsx("div", { className: "fade-only", children: settingsLoading && (tab === 'general' || tab === 'branding') ? (_jsx("div", { style: { padding: 32, color: 'var(--ink-muted)', fontSize: 13 }, children: "Loading settings\u2026" })) : (_jsxs(_Fragment, { children: [tab === 'general' && (_jsx(GeneralSettings, { data: data, canEdit: editable, onSave: handleSave, saving: saving })), tab === 'branding' && (_jsx(BrandingSettings, { data: data, canEdit: editable, onSave: handleSave, saving: saving })), tab === 'team' && _jsx(TeamSettings, { currentSubject: currentSubject }), tab === 'integrations' && _jsx(IntegrationsSettings, {}), tab === 'domains' && _jsx(DomainsSettings, {}), tab === 'api' && (_jsxs(_Fragment, { children: [_jsx(ApiSettings, {}), _jsx(WebhooksSettings, {})] }))] })) }, tab)] })] }));
+}
+// Re-export roleLabel so callers importing from SettingsScreen.tsx can use it
+export { roleLabel };
+//# sourceMappingURL=SettingsScreen.js.map