nextpluggable 0.0.0-stage → 0.1.1

package/dist/dashboard/Dashboard.js

@@ -0,0 +1,324 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { usePathname } from 'next/navigation';
+import * as React from 'react';
+import { PluginIsland } from '../client/island.js';
+import { dashboardCss } from './styles.js';
+import { ApiError, Button, createApi, describePlugin, Modal, PluginIcon, SettingInput, Switch, timeAgo, Toasts, } from './ui.js';
+/**
+ * Move between dashboard screens without a server round trip. Next.js keeps
+ * `usePathname()` in sync with `history.pushState`, and, unlike a full
+ * navigation (which remounts a catch-all page whenever its segments change),
+ * this keeps the dashboard mounted, so loaded data and notices survive.
+ */
+function go(href) {
+    window.history.pushState(null, '', href);
+    document.querySelector('.np-root')?.scrollTo(0, 0);
+}
+function Link({ href, onClick, ...rest }) {
+    return (_jsx("a", { href: href, ...rest, onClick: (e) => {
+            onClick?.(e);
+            if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+                return;
+            e.preventDefault();
+            go(href);
+        } }));
+}
+const DashboardContext = React.createContext(null);
+const useDash = () => React.useContext(DashboardContext);
+export function Dashboard(props) {
+    const [session, setSession] = React.useState(props.session);
+    const [toasts, setToasts] = React.useState([]);
+    const nextId = React.useRef(1);
+    const dismiss = React.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+    const notify = React.useCallback((text, kind = 'ok') => {
+        const id = nextId.current++;
+        setToasts((t) => [...t.slice(-2), { id, kind, text }]);
+        setTimeout(() => dismiss(id), kind === 'error' ? 9000 : 4500);
+    }, [dismiss]);
+    const api = React.useMemo(() => createApi(props.apiPath, () => setSession((s) => ({ ...s, user: null }))), [props.apiPath]);
+    // The dashboard covers the site it is embedded in; keep the page behind it from scrolling.
+    React.useEffect(() => {
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = previous;
+        };
+    }, []);
+    let content;
+    if (props.setupError || !session.configured)
+        content = _jsx(Setup, { message: props.setupError });
+    else if (!session.user)
+        content = session.mode === 'password' ? _jsx(SignIn, { api: api, siteName: props.siteName, onDone: (user) => setSession((s) => ({ ...s, user })) }) : _jsx(NotAllowed, { loginUrl: session.loginUrl });
+    else
+        content = (_jsx(App, { api: api, base: props.dashboardPath, siteName: props.siteName, notify: notify, onSignOut: session.mode === 'password'
+                ? async () => {
+                    await api('POST', '/logout').catch(() => { });
+                    setSession((s) => ({ ...s, user: null }));
+                }
+                : undefined }));
+    return (_jsxs("div", { className: "np-root", children: [_jsx("style", { href: "nextpluggable-dashboard", precedence: "nextpluggable", children: dashboardCss }), content, _jsx(Toasts, { toasts: toasts, dismiss: dismiss })] }));
+}
+// ------------------------------------------------------------------ gates
+function Setup({ message }) {
+    return (_jsx("div", { className: "np-center", children: _jsxs("div", { className: "np-card np-auth", style: { maxWidth: 520 }, children: [_jsx("span", { className: "np-brand-mark", "aria-hidden": "true", children: "\u25C6" }), _jsx("h1", { children: "One more step to finish setup" }), _jsx("p", { children: "The plugin dashboard is installed but not switched on yet. Whoever looks after this website\u2019s hosting needs to do this once:" }), message ? _jsx("div", { className: "np-note np-note-warn", children: message }) : null, _jsxs("ol", { className: "np-steps", children: [_jsx("li", { children: _jsxs("span", { children: ["Add ", _jsx("code", { className: "np-code", children: "NEXTPLUGGABLE_PASSWORD" }), " to the site\u2019s environment variables: the password you will use to sign in here."] }) }), _jsx("li", { children: _jsxs("span", { children: ["Add ", _jsx("code", { className: "np-code", children: "NEXTPLUGGABLE_SECRET" }), ": a long random value used to keep sign-ins and saved keys safe."] }) }), _jsx("li", { children: _jsx("span", { children: "Restart or redeploy the site, then reload this page." }) })] })] }) }));
+}
+function NotAllowed({ loginUrl }) {
+    return (_jsx("div", { className: "np-center", children: _jsxs("div", { className: "np-card np-auth", children: [_jsx("span", { className: "np-brand-mark", "aria-hidden": "true", children: "\u25C6" }), _jsx("h1", { children: "Sign in to manage plugins" }), _jsx("p", { children: "You need to be signed in to this website with an account that is allowed to manage plugins." }), loginUrl ? (_jsx("a", { className: "np-btn np-btn-primary", href: loginUrl, children: "Go to sign in" })) : null] }) }));
+}
+function SignIn(props) {
+    const [password, setPassword] = React.useState('');
+    const [error, setError] = React.useState(null);
+    const [busy, setBusy] = React.useState(false);
+    return (_jsx("div", { className: "np-center", children: _jsxs("form", { className: "np-card np-auth", onSubmit: async (e) => {
+                e.preventDefault();
+                setBusy(true);
+                setError(null);
+                try {
+                    const res = await props.api('POST', '/login', { password });
+                    props.onDone(res.user);
+                }
+                catch (err) {
+                    setError(err.message);
+                    setBusy(false);
+                }
+            }, children: [_jsx("span", { className: "np-brand-mark", "aria-hidden": "true", children: "\u25C6" }), _jsxs("h1", { children: ["Plugins for ", props.siteName] }), _jsx("p", { children: "Enter the dashboard password to continue." }), _jsxs("div", { className: "np-field", children: [_jsx("label", { htmlFor: "np-password", children: "Password" }), _jsx("input", { id: "np-password", className: "np-input", type: "password", autoComplete: "current-password", autoFocus: true, required: true, value: password, "aria-invalid": error ? true : undefined, "aria-describedby": error ? 'np-password-error' : undefined, onChange: (e) => setPassword(e.target.value) }), error ? (_jsx("span", { className: "np-error", id: "np-password-error", role: "alert", children: error })) : null] }), _jsx(Button, { type: "submit", variant: "primary", busy: busy, style: { width: '100%' }, children: "Sign in" })] }) }));
+}
+// ------------------------------------------------------------------ shell
+function App(props) {
+    const { api, base, notify } = props;
+    const [state, setState] = React.useState(null);
+    const [loadError, setLoadError] = React.useState(null);
+    const pathname = usePathname() ?? base;
+    const load = React.useCallback(() => {
+        setLoadError(null);
+        api('GET', '/admin/state').then(setState, (e) => setLoadError(e.message));
+    }, [api]);
+    React.useEffect(load, [load]);
+    const act = React.useCallback(async (work, done) => {
+        try {
+            const next = await work();
+            setState(next);
+            if (done)
+                notify(done);
+            return next;
+        }
+        catch (e) {
+            notify(e.message, 'error');
+            return null;
+        }
+    }, [notify]);
+    const at = pathname.indexOf(base);
+    const [section, id] = (at === -1 ? '' : pathname.slice(at + base.length)).split('/').filter(Boolean);
+    const current = section === 'add' ? 'add' : section === 'sources' ? 'sources' : 'installed';
+    const tab = (href, key, label) => (_jsx(Link, { href: href, "aria-current": current === key ? 'page' : undefined, children: label }));
+    let view;
+    if (loadError)
+        view = (_jsxs("div", { className: "np-card np-empty", children: [_jsx("h2", { children: "The dashboard could not load" }), _jsx("p", { children: loadError }), _jsx(Button, { variant: "primary", onClick: load, children: "Try again" })] }));
+    else if (!state)
+        view = (_jsxs("div", { className: "np-list", "aria-busy": "true", "aria-label": "Loading", children: [_jsx("div", { className: "np-skel" }), _jsx("div", { className: "np-skel" })] }));
+    else if (section === 'plugin' && id)
+        view = _jsx(PluginDetail, { id: decodeURIComponent(id) }, id);
+    else if (section === 'add')
+        view = _jsx(AddPlugins, {});
+    else if (section === 'sources')
+        view = _jsx(Sources, {});
+    else
+        view = _jsx(Installed, {});
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: "np-top", children: _jsxs("div", { className: "np-top-in", children: [_jsxs(Link, { href: base, className: "np-brand", children: [_jsx("span", { className: "np-brand-mark", "aria-hidden": "true", children: "\u25C6" }), "Plugins ", _jsx("small", { children: props.siteName })] }), _jsxs("nav", { className: "np-nav", "aria-label": "Dashboard", children: [tab(base, 'installed', 'Installed'), tab(`${base}/add`, 'add', 'Add plugins'), tab(`${base}/sources`, 'sources', 'Sources')] }), _jsx("a", { className: "np-btn np-btn-sm", href: "/", target: "_blank", rel: "noreferrer", children: "View site \u2197" }), props.onSignOut ? (_jsx(Button, { small: true, onClick: props.onSignOut, children: "Sign out" })) : null] }) }), _jsx("main", { className: "np-main", children: state ? _jsx(DashboardContext.Provider, { value: { api, base, state, setState, notify, act }, children: view }) : view })] }));
+}
+function StatusChip({ plugin }) {
+    if (plugin.needsSetup)
+        return _jsx("span", { className: "np-chip np-chip-warn", children: "Needs setup" });
+    return plugin.enabled ? _jsx("span", { className: "np-chip np-chip-on", children: "Active" }) : _jsx("span", { className: "np-chip", children: "Paused" });
+}
+function useRefresh() {
+    const { api, act, notify } = useDash();
+    const [busy, setBusy] = React.useState(false);
+    const refresh = React.useCallback(async (announce) => {
+        setBusy(true);
+        const res = await act(() => api('POST', '/admin/refresh'));
+        setBusy(false);
+        if (!res)
+            return;
+        for (const f of res.failures)
+            notify(`${f.label}: ${f.message}`, 'error');
+        if (announce && !res.failures.length)
+            notify('Everything is up to date with your sources.');
+    }, [api, act, notify]);
+    return { busy, refresh };
+}
+// ------------------------------------------------------------------ installed
+function Installed() {
+    const { state, base } = useDash();
+    const { busy, refresh } = useRefresh();
+    const updates = state.plugins.filter((p) => p.update).length;
+    if (!state.plugins.length)
+        return (_jsxs("div", { className: "np-card np-empty", children: [_jsx("div", { className: "np-empty-art", "aria-hidden": "true", children: "\uD83E\uDDE9" }), _jsx("h2", { children: "No plugins installed yet" }), state.sources.length ? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Plugins add new pages and features to your site. Pick one to get started." }), _jsx(Link, { className: "np-btn np-btn-primary", href: `${base}/add`, children: "Browse plugins" })] })) : (_jsxs(_Fragment, { children: [_jsx("p", { children: "Plugins add new pages and features to your site. First, connect a place to get plugins from." }), _jsx(Link, { className: "np-btn np-btn-primary", href: `${base}/sources`, children: "Connect a plugin source" })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "np-head", children: [_jsxs("div", { children: [_jsx("h1", { children: "Installed plugins" }), _jsxs("p", { children: [state.plugins.length, " installed", updates ? ` · ${updates} update${updates === 1 ? '' : 's'} available` : ''] })] }), _jsxs("div", { style: { display: 'flex', gap: 10 }, children: [_jsx(Button, { busy: busy, onClick: () => refresh(true), children: "Check for updates" }), _jsx(Link, { className: "np-btn np-btn-primary", href: `${base}/add`, children: "Add plugins" })] })] }), _jsx("ul", { className: "np-list", children: state.plugins.map((p) => (_jsx(InstalledRow, { plugin: p }, p.id))) })] }));
+}
+function InstalledRow({ plugin }) {
+    const { api, act, base } = useDash();
+    const [busy, setBusy] = React.useState(null);
+    const run = async (name, work, done) => {
+        setBusy(name);
+        await act(work, done);
+        setBusy(null);
+    };
+    const settingsHref = `${base}/plugin/${encodeURIComponent(plugin.id)}`;
+    return (_jsxs("li", { className: "np-card np-row", children: [_jsx(PluginIcon, { icon: plugin.icon, name: plugin.name }), _jsxs("div", { children: [_jsxs("div", { className: "np-title", children: [_jsx(Link, { href: settingsHref, children: plugin.name }), _jsx(StatusChip, { plugin: plugin }), _jsxs("span", { className: "np-meta", children: ["v", plugin.version] })] }), plugin.description ? _jsx("p", { className: "np-desc", children: plugin.description }) : null, plugin.enabled && plugin.pages.some((pg) => pg.linkable) ? (_jsx("div", { className: "np-links", children: plugin.pages
+                            .filter((pg) => pg.linkable)
+                            .map((pg) => (_jsxs("a", { href: pg.path, target: "_blank", rel: "noreferrer", children: [pg.path, " \u2197"] }, pg.id))) })) : null] }), _jsxs("div", { className: "np-row-actions", children: [plugin.update ? (_jsxs(Button, { small: true, variant: "primary", busy: busy === 'update', onClick: () => run('update', () => api('POST', `/admin/plugins/${plugin.id}/update`), `${plugin.name} was updated to version ${plugin.update.version}.`), children: ["Update to ", plugin.update.version] })) : null, _jsx(Link, { className: "np-btn np-btn-sm", href: settingsHref, children: plugin.needsSetup ? 'Finish setup' : 'Settings' }), _jsx(Switch, { checked: plugin.enabled, disabled: busy !== null || plugin.needsSetup, label: `${plugin.name} is ${plugin.enabled ? 'on' : 'off'}`, onChange: (enabled) => run('toggle', () => api('PATCH', `/admin/plugins/${plugin.id}`, { enabled }), enabled ? `${plugin.name} is now live on your site.` : `${plugin.name} is paused. Its pages are hidden.`) })] })] }));
+}
+// ------------------------------------------------------------------ add plugins
+function AddPlugins() {
+    const { state, base, api, act, notify } = useDash();
+    const { busy, refresh } = useRefresh();
+    const [query, setQuery] = React.useState('');
+    const [confirm, setConfirm] = React.useState(null);
+    const [installing, setInstalling] = React.useState(false);
+    // Pick up newly published plugins without asking the owner to think about it.
+    const stale = state.sources.some((s) => !s.checkedAt || Date.now() - new Date(s.checkedAt).getTime() > 5 * 60_000);
+    const refreshed = React.useRef(false);
+    React.useEffect(() => {
+        if (stale && !refreshed.current) {
+            refreshed.current = true;
+            void refresh(false);
+        }
+    }, [stale, refresh]);
+    if (!state.sources.length)
+        return (_jsxs("div", { className: "np-card np-empty", children: [_jsx("div", { className: "np-empty-art", "aria-hidden": "true", children: "\uD83D\uDD0C" }), _jsx("h2", { children: "Connect a plugin source first" }), _jsx("p", { children: "Plugins come from GitHub repositories. Connect one and everything it offers will show up here, ready to install." }), _jsx(Link, { className: "np-btn np-btn-primary", href: `${base}/sources`, children: "Connect a plugin source" })] }));
+    const q = query.trim().toLowerCase();
+    const items = state.catalog.filter((p) => !q || `${p.name} ${p.description ?? ''} ${p.category ?? ''}`.toLowerCase().includes(q));
+    const install = async (p) => {
+        setInstalling(true);
+        const res = await act(() => api('POST', '/admin/install', { sourceId: p.sourceId, path: p.path }));
+        setInstalling(false);
+        if (!res)
+            return;
+        setConfirm(null);
+        const installed = res.plugins.find((x) => x.id === p.id);
+        notify(installed?.needsSetup ? `${p.name} is installed. Fill in its settings to switch it on.` : `${p.name} is installed and live.`);
+        go(`${base}/plugin/${encodeURIComponent(p.id)}`);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "np-head", children: [_jsxs("div", { children: [_jsx("h1", { children: "Add plugins" }), _jsx("p", { children: "Everything offered by your connected sources. Installing takes a few seconds and needs no rebuild." })] }), _jsxs("div", { style: { display: 'flex', gap: 10, flexWrap: 'wrap' }, children: [_jsx("input", { className: "np-input np-search", type: "search", placeholder: "Search plugins", "aria-label": "Search plugins", value: query, onChange: (e) => setQuery(e.target.value) }), _jsx(Button, { busy: busy, onClick: () => refresh(true), children: "Refresh" })] })] }), items.length ? (_jsx("ul", { className: "np-grid", children: items.map((p) => (_jsxs("li", { className: "np-card np-tile", children: [_jsxs("div", { className: "np-tile-head", children: [_jsx(PluginIcon, { icon: p.icon, name: p.name }), _jsxs("div", { children: [_jsx("div", { className: "np-title", children: p.name }), _jsxs("div", { className: "np-meta", children: ["v", p.version, p.category ? ` · ${p.category}` : ''] })] })] }), p.description ? _jsx("p", { className: "np-desc", children: p.description }) : null, _jsxs("div", { className: "np-tile-foot", children: [_jsxs("span", { className: "np-meta", children: ["from ", p.sourceLabel] }), p.installed ? (_jsx(Link, { className: "np-btn np-btn-sm", href: `${base}/plugin/${encodeURIComponent(p.id)}`, children: "Installed \u2713" })) : (_jsx(Button, { small: true, variant: "primary", onClick: () => setConfirm(p), children: "Install" }))] })] }, `${p.sourceId}:${p.path}`))) })) : (_jsxs("div", { className: "np-card np-empty", children: [_jsx("h2", { children: q ? 'No plugins match your search' : 'Your sources have no plugins yet' }), _jsx("p", { children: q ? 'Try a different word.' : 'When plugins are published to a connected source they will appear here.' })] })), confirm ? (_jsxs(Modal, { title: `Install ${confirm.name}?`, onClose: () => !installing && setConfirm(null), footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setConfirm(null), disabled: installing, children: "Cancel" }), _jsx(Button, { variant: "primary", busy: installing, onClick: () => install(confirm), children: "Install" })] }), children: [_jsxs("p", { children: ["From ", _jsx("strong", { children: confirm.sourceLabel }), ". This plugin:"] }), _jsx("ul", { className: "np-adds", style: { marginTop: 10 }, children: describePlugin(confirm).map((line) => (_jsx("li", { children: line }, line))) }), _jsx("p", { style: { marginTop: 12, fontSize: 13 }, children: "Only install plugins from sources you trust: a plugin can do anything your website can." })] })) : null] }));
+}
+// ------------------------------------------------------------------ sources
+function Sources() {
+    const { state, api, setState, notify } = useDash();
+    const [url, setUrl] = React.useState('');
+    const [isPrivate, setIsPrivate] = React.useState(false);
+    const [token, setToken] = React.useState('');
+    const [busy, setBusy] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [removing, setRemoving] = React.useState(null);
+    const connect = async (e) => {
+        e.preventDefault();
+        setBusy(true);
+        setError(null);
+        try {
+            const res = await api('POST', '/admin/sources', { url, token: isPrivate ? token : undefined });
+            const added = res.sources[res.sources.length - 1];
+            setState(res);
+            notify(added ? `Connected ${added.label}: ${added.pluginCount} plugin${added.pluginCount === 1 ? '' : 's'} found.` : 'Connected.');
+            setUrl('');
+            setToken('');
+            setIsPrivate(false);
+        }
+        catch (err) {
+            setError(err.message);
+        }
+        setBusy(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "np-head", children: _jsxs("div", { children: [_jsx("h1", { children: "Plugin sources" }), _jsx("p", { children: "A source is a GitHub repository that holds plugins. Connect one and its plugins appear under \u201CAdd plugins\u201D." })] }) }), _jsxs("form", { className: "np-card np-pad np-section", onSubmit: connect, children: [_jsxs("div", { className: "np-field", children: [_jsx("label", { htmlFor: "np-source-url", children: "Repository address" }), _jsx("input", { id: "np-source-url", className: "np-input", required: true, placeholder: "https://github.com/your-company/plugins", value: url, "aria-invalid": error ? true : undefined, "aria-describedby": error ? 'np-source-error' : 'np-source-help', onChange: (e) => setUrl(e.target.value) }), _jsxs("span", { className: "np-help", id: "np-source-help", children: ["Copy it from your browser\u2019s address bar while looking at the repository on GitHub.", state.site.allowLocalSources ? ' While developing you can also enter a folder path on this computer.' : ''] }), error ? (_jsx("span", { className: "np-error", id: "np-source-error", role: "alert", children: error })) : null] }), _jsxs("label", { className: "np-check", style: { marginTop: 0, marginBottom: 14 }, children: [_jsx("input", { type: "checkbox", checked: isPrivate, onChange: (e) => setIsPrivate(e.target.checked) }), _jsx("span", { children: "This repository is private" })] }), isPrivate ? (_jsxs("div", { className: "np-field", children: [_jsx("label", { htmlFor: "np-source-token", children: "Access token" }), _jsx("input", { id: "np-source-token", className: "np-input", type: "password", autoComplete: "off", required: true, value: token, placeholder: "github_pat_\u2026", onChange: (e) => setToken(e.target.value) }), _jsx("span", { className: "np-help", children: "A private repository needs a key that lets this site read it. To create one:" }), _jsxs("ol", { className: "np-steps", children: [_jsx("li", { children: _jsxs("span", { children: ["Open", ' ', _jsx("a", { href: "https://github.com/settings/personal-access-tokens/new", target: "_blank", rel: "noreferrer", children: "GitHub \u2192 New fine-grained token \u2197" }), "."] }) }), _jsx("li", { children: _jsx("span", { children: "Under \u201CRepository access\u201D choose \u201COnly select repositories\u201D and pick this repository." }) }), _jsx("li", { children: _jsx("span", { children: "Under \u201CPermissions \u2192 Repository permissions\u201D set \u201CContents\u201D to \u201CRead-only\u201D." }) }), _jsx("li", { children: _jsx("span", { children: "Create the token, copy it, and paste it above. It is stored encrypted and never shown again." }) })] })] })) : null, _jsx(Button, { type: "submit", variant: "primary", busy: busy, children: "Connect source" })] }), state.sources.length ? (_jsx("ul", { className: "np-list", children: state.sources.map((s) => (_jsxs("li", { className: "np-card np-row", children: [_jsx("span", { className: "np-icon", "aria-hidden": "true", children: s.type === 'github' ? '🐙' : '📁' }), _jsxs("div", { children: [_jsxs("div", { className: "np-title", children: [s.url ? (_jsx("a", { href: s.url, target: "_blank", rel: "noreferrer", children: s.label })) : (s.label), s.hasToken ? _jsx("span", { className: "np-chip", children: "Private" }) : null] }), _jsxs("p", { className: "np-desc", children: [s.pluginCount, " plugin", s.pluginCount === 1 ? '' : 's', " \u00B7 checked ", timeAgo(s.checkedAt)] }), s.problems.map((p) => (_jsxs("p", { className: "np-error", style: { marginTop: 6 }, children: [p.path || 'This source', ": ", p.message] }, p.path)))] }), _jsx("div", { className: "np-row-actions", children: _jsx(Button, { small: true, variant: "danger", busy: removing === s.id, onClick: async () => {
+                                    setRemoving(s.id);
+                                    try {
+                                        setState(await api('DELETE', `/admin/sources/${s.id}`));
+                                        notify(`${s.label} was disconnected. Plugins already installed from it keep working.`);
+                                    }
+                                    catch (err) {
+                                        notify(err.message, 'error');
+                                    }
+                                    setRemoving(null);
+                                }, children: "Disconnect" }) })] }, s.id))) })) : null] }));
+}
+// ------------------------------------------------------------------ plugin detail
+function PluginDetail({ id }) {
+    const { state, base, api, act } = useDash();
+    const plugin = state.plugins.find((p) => p.id === id);
+    const [tab, setTab] = React.useState('settings');
+    const [busy, setBusy] = React.useState(null);
+    const [removeOpen, setRemoveOpen] = React.useState(false);
+    const [deleteData, setDeleteData] = React.useState(false);
+    if (!plugin)
+        return (_jsxs("div", { className: "np-card np-empty", children: [_jsx("h2", { children: "That plugin is not installed" }), _jsx("p", { children: "It may have been removed." }), _jsx(Link, { className: "np-btn np-btn-primary", href: base, children: "Back to installed plugins" })] }));
+    const run = async (name, work, done) => {
+        setBusy(name);
+        const res = await act(work, done);
+        setBusy(null);
+        return res;
+    };
+    const adminTab = plugin.adminPages.find((a) => `admin:${a.id}` === tab);
+    return (_jsxs(_Fragment, { children: [_jsx("p", { style: { marginBottom: 14 }, children: _jsx(Link, { href: base, children: "\u2190 Installed plugins" }) }), _jsxs("div", { className: "np-head", children: [_jsxs("div", { style: { display: 'flex', gap: 14, alignItems: 'center' }, children: [_jsx(PluginIcon, { icon: plugin.icon, name: plugin.name }), _jsxs("div", { children: [_jsxs("h1", { className: "np-title", style: { fontSize: 24 }, children: [plugin.name, " ", _jsx(StatusChip, { plugin: plugin })] }), _jsxs("p", { children: ["Version ", plugin.version, plugin.author ? ` · by ${plugin.author}` : ''] })] })] }), _jsxs("div", { style: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }, children: [plugin.update ? (_jsxs(Button, { variant: "primary", busy: busy === 'update', onClick: () => run('update', () => api('POST', `/admin/plugins/${plugin.id}/update`), `${plugin.name} was updated to version ${plugin.update.version}.`), children: ["Update to ", plugin.update.version] })) : null, _jsx(Switch, { checked: plugin.enabled, disabled: busy !== null || plugin.needsSetup, showLabel: true, label: plugin.enabled ? 'On' : 'Off', onChange: (enabled) => run('toggle', () => api('PATCH', `/admin/plugins/${plugin.id}`, { enabled }), enabled ? `${plugin.name} is now live on your site.` : `${plugin.name} is paused. Its pages are hidden.`) })] })] }), plugin.needsSetup ? _jsx("div", { className: "np-note np-note-warn", children: "Fill in the required settings (marked *) and save. The plugin switches on once they are complete." }) : null, _jsx("div", { className: "np-tabs", role: "tablist", children: [{ key: 'settings', title: 'Settings' }, ...plugin.adminPages.map((a) => ({ key: `admin:${a.id}`, title: a.title })), { key: 'about', title: 'About' }].map((t) => (_jsx("button", { type: "button", role: "tab", "aria-selected": tab === t.key, onClick: () => setTab(t.key), children: t.title }, t.key))) }), tab === 'settings' ? _jsx(SettingsForm, { plugin: plugin }, plugin.updatedAt) : null, adminTab ? (plugin.enabled && plugin.runtime ? (_jsxs("div", { className: "np-card np-pad", children: [plugin.runtime.styleHref ? _jsx("link", { rel: "stylesheet", href: plugin.runtime.styleHref, precedence: "nextpluggable" }) : null, _jsx(PluginIsland, { moduleKey: plugin.runtime.moduleKey, src: plugin.runtime.scriptSrc, component: adminTab.component, info: { id: plugin.id, version: plugin.version, apiBase: plugin.runtime.apiBase, paths: plugin.runtime.paths }, config: plugin.runtime.publicConfig, loadingFallback: _jsx("div", { className: "np-skel" }), errorFallback: _jsx("div", { className: "np-note np-note-danger", children: "This screen could not be loaded. Try reloading the page." }) }, `${plugin.runtime.moduleKey}:${adminTab.id}`)] })) : (_jsx("div", { className: "np-note", children: "Switch the plugin on to use this screen." }))) : null, tab === 'about' ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "np-card np-pad np-section", children: [plugin.description ? _jsx("p", { style: { marginBottom: 16 }, children: plugin.description }) : null, _jsxs("dl", { className: "np-dl", children: [_jsx("dt", { children: "What it does" }), _jsx("dd", { children: _jsx("ul", { className: "np-adds", children: describePlugin({ ...plugin, adminPages: plugin.adminPages.map((a) => a.title) }).map((line) => (_jsx("li", { children: line }, line))) }) }), _jsx("dt", { children: "Comes from" }), _jsxs("dd", { children: [plugin.source.label, plugin.source.connected ? '' : ' (no longer connected, so updates are unavailable)'] }), _jsx("dt", { children: "Installed" }), _jsx("dd", { children: new Date(plugin.installedAt).toLocaleDateString(undefined, { dateStyle: 'long' }) })] })] }), _jsxs("div", { className: "np-card np-pad", style: { display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsxs("div", { children: [_jsx("div", { className: "np-label", children: "Remove this plugin" }), _jsx("p", { className: "np-help", children: "Its pages and features disappear from your site straight away." })] }), _jsx(Button, { variant: "danger", onClick: () => setRemoveOpen(true), children: "Remove plugin" })] })] })) : null, removeOpen ? (_jsxs(Modal, { title: `Remove ${plugin.name}?`, onClose: () => busy === null && setRemoveOpen(false), footer: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setRemoveOpen(false), disabled: busy !== null, children: "Keep plugin" }), _jsx(Button, { variant: "danger-solid", busy: busy === 'remove', onClick: async () => {
+                                const res = await run('remove', () => api('DELETE', `/admin/plugins/${plugin.id}`, { deleteData }), `${plugin.name} was removed.`);
+                                if (res)
+                                    go(base);
+                            }, children: "Remove" })] }), children: [_jsxs("p", { children: [plugin.pages.length ? `Its page${plugin.pages.length === 1 ? '' : 's'} (${plugin.pages.map((p) => p.path).join(', ')}) will stop working immediately. ` : '', "You can install it again later."] }), _jsxs("label", { className: "np-check", children: [_jsx("input", { type: "checkbox", checked: deleteData, onChange: (e) => setDeleteData(e.target.checked) }), _jsxs("span", { children: ["Also delete everything this plugin has saved. ", _jsx("strong", { children: "This cannot be undone." })] })] })] })) : null] }));
+}
+function SettingsForm({ plugin }) {
+    const { api, state, setState, notify } = useDash();
+    const initial = React.useMemo(() => {
+        const values = {};
+        for (const f of plugin.settings)
+            if (f.type !== 'secret')
+                values[f.key] = plugin.values[f.key] ?? (f.type === 'toggle' ? false : undefined);
+        const paths = {};
+        for (const p of plugin.pages)
+            paths[p.id] = p.path;
+        return { values, paths };
+    }, [plugin]);
+    const [values, setValues] = React.useState(initial.values);
+    const [secrets, setSecrets] = React.useState({});
+    const [paths, setPaths] = React.useState(initial.paths);
+    const [errors, setErrors] = React.useState({});
+    const [saving, setSaving] = React.useState(false);
+    const dirty = JSON.stringify([values, paths]) !== JSON.stringify([initial.values, initial.paths]) || Object.values(secrets).some((v) => v !== undefined);
+    const groups = React.useMemo(() => {
+        const map = new Map();
+        for (const f of plugin.settings)
+            map.set(f.group ?? 'Settings', [...(map.get(f.group ?? 'Settings') ?? []), f]);
+        return [...map.entries()];
+    }, [plugin]);
+    const editablePages = plugin.pages.filter((p) => p.configurable);
+    const save = async (e) => {
+        e.preventDefault();
+        setSaving(true);
+        setErrors({});
+        const config = {};
+        for (const f of plugin.settings) {
+            if (f.type === 'secret') {
+                if (secrets[f.key] !== undefined)
+                    config[f.key] = secrets[f.key];
+            }
+            else
+                config[f.key] = values[f.key] ?? null;
+        }
+        try {
+            setState(await api('PATCH', `/admin/plugins/${plugin.id}`, { config, paths, ...(plugin.needsSetup ? { enabled: true } : {}) }));
+            notify('Saved. Your site is already using the new settings.');
+        }
+        catch (err) {
+            if (err instanceof ApiError && err.fields)
+                setErrors(err.fields);
+            else
+                notify(err.message, 'error');
+        }
+        setSaving(false);
+    };
+    if (!plugin.settings.length && !editablePages.length)
+        return (_jsxs("div", { className: "np-card np-empty", children: [_jsx("h2", { children: "Nothing to set up" }), _jsx("p", { children: "This plugin works out of the box and has no settings." })] }));
+    return (_jsxs("form", { onSubmit: save, noValidate: true, children: [plugin.pages.length ? (_jsxs("section", { className: "np-card np-section", children: [_jsx("h2", { children: "Pages" }), _jsx("div", { className: "np-pad", children: plugin.pages.map((p) => {
+                            const err = errors[`path:${p.id}`];
+                            return (_jsxs("div", { className: "np-field", children: [_jsxs("label", { htmlFor: `np-path-${p.id}`, children: ["Address of \u201C", p.title, "\u201D"] }), p.configurable ? (_jsxs("span", { className: "np-affix", children: [_jsx("span", { children: state.site.url.replace(/^https?:\/\//, '') }), _jsx("input", { id: `np-path-${p.id}`, value: paths[p.id] ?? '', "aria-invalid": err ? true : undefined, onChange: (e) => setPaths({ ...paths, [p.id]: e.target.value }) })] })) : (_jsx("span", { id: `np-path-${p.id}`, className: "np-code", children: p.path })), _jsxs("span", { className: "np-help", children: [p.description ? `${p.description} ` : '', plugin.enabled && p.linkable ? (_jsx("a", { href: p.path, target: "_blank", rel: "noreferrer", children: "Open page \u2197" })) : null] }), err ? _jsx("span", { className: "np-error", children: err }) : null] }, p.id));
+                        }) })] })) : null, groups.map(([group, fields]) => (_jsxs("section", { className: "np-card np-section", children: [_jsx("h2", { children: group }), _jsx("div", { className: "np-pad", children: fields.map((f) => (_jsx(SettingInput, { field: f, value: f.type === 'secret' ? secrets[f.key] : values[f.key], secretSet: plugin.secretsSet[f.key], error: errors[f.key], onChange: (v) => (f.type === 'secret' ? setSecrets({ ...secrets, [f.key]: v }) : setValues({ ...values, [f.key]: v })) }, f.key))) })] }, group))), _jsxs("div", { className: "np-card np-savebar", children: [_jsx("span", { className: "np-meta", children: Object.keys(errors).length ? 'Some fields need your attention.' : dirty ? 'You have unsaved changes.' : 'All changes saved.' }), _jsx(Button, { type: "submit", variant: "primary", busy: saving, disabled: !dirty && !plugin.needsSetup, children: plugin.needsSetup ? 'Save and switch on' : 'Save changes' })] })] }));
+}

package/dist/dashboard/styles.d.ts

@@ -0,0 +1,2 @@
+/** Dashboard styles, shipped as a string so the package needs no CSS tooling in the host site. Everything is scoped under `.np-root`. */
+export declare const dashboardCss = "\n.np-root{--np-bg:#f5f6f8;--np-surface:#fff;--np-surface-2:#f9fafb;--np-text:#111827;--np-muted:#667085;--np-border:#e4e7ec;--np-primary:#4f46e5;--np-primary-hover:#4338ca;--np-primary-soft:#eef2ff;--np-danger:#d92d20;--np-danger-soft:#fef3f2;--np-success:#067647;--np-success-soft:#ecfdf3;--np-warn:#b54708;--np-warn-soft:#fffaeb;--np-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);--np-radius:12px;--np-accent:var(--np-primary);\nposition:fixed;inset:0;z-index:2147483000;overflow-y:auto;background:var(--np-bg);color:var(--np-text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}\n@media (prefers-color-scheme:dark){.np-root{--np-bg:#0c0e13;--np-surface:#161a22;--np-surface-2:#1b202a;--np-text:#eceef2;--np-muted:#98a2b3;--np-border:#2a303c;--np-primary:#818cf8;--np-primary-hover:#a5b4fc;--np-primary-soft:#1e2140;--np-danger:#f97066;--np-danger-soft:#3a1614;--np-success:#47cd89;--np-success-soft:#0d2a1c;--np-warn:#fdb022;--np-warn-soft:#33240a;--np-shadow:0 1px 2px rgba(0,0,0,.4)}}\n.np-root *,.np-root *::before,.np-root *::after{box-sizing:border-box}\n.np-root h1,.np-root h2,.np-root h3,.np-root p,.np-root ul,.np-root ol,.np-root dl,.np-root dd{margin:0;padding:0}\n.np-root ul,.np-root ol{list-style:none}\n.np-root a{color:var(--np-primary);text-decoration:none}\n.np-root a:hover{text-decoration:underline}\n.np-root button,.np-root input,.np-root select,.np-root textarea{font:inherit;color:inherit}\n.np-root :focus-visible{outline:2px solid var(--np-primary);outline-offset:2px}\n.np-top{background:var(--np-surface);border-bottom:1px solid var(--np-border);position:sticky;top:0;z-index:5}\n.np-top-in{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}\n.np-brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;margin-right:auto;color:var(--np-text)!important;text-decoration:none!important}\n.np-brand-mark{width:28px;height:28px;border-radius:8px;background:var(--np-primary);color:#fff;display:grid;place-items:center;font-size:15px}\n.np-brand small{font-weight:400;color:var(--np-muted);font-size:13px}\n.np-nav{display:flex;gap:4px;order:3;width:100%;margin:0 -8px;overflow-x:auto}\n@media (min-width:720px){.np-nav{order:0;width:auto;margin:0}}\n.np-nav a{padding:8px 12px;border-radius:8px;color:var(--np-muted);font-weight:500;white-space:nowrap;text-decoration:none!important}\n.np-nav a:hover{color:var(--np-text);background:var(--np-surface-2)}\n.np-nav a[aria-current=page]{color:var(--np-primary);background:var(--np-primary-soft)}\n.np-main{max-width:1040px;margin:0 auto;padding:28px 20px 80px}\n.np-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}\n.np-head h1{font-size:24px;line-height:1.25;letter-spacing:-.01em}\n.np-head p{color:var(--np-muted);margin-top:4px;max-width:60ch}\n.np-card{background:var(--np-surface);border:1px solid var(--np-border);border-radius:var(--np-radius);box-shadow:var(--np-shadow)}\n.np-pad{padding:20px}\n.np-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--np-border);background:var(--np-surface);border-radius:8px;padding:8px 14px;font-weight:550;cursor:pointer;white-space:nowrap;text-decoration:none!important;color:var(--np-text)!important;min-height:38px}\n.np-btn:hover{background:var(--np-surface-2)}\n.np-btn:disabled{opacity:.55;cursor:not-allowed}\n.np-btn-primary{background:var(--np-primary);border-color:var(--np-primary);color:#fff!important}\n.np-btn-primary:hover{background:var(--np-primary-hover);border-color:var(--np-primary-hover)}\n@media (prefers-color-scheme:dark){.np-btn-primary{color:#0c0e13!important}}\n.np-btn-danger{color:var(--np-danger)!important}\n.np-btn-danger-solid{background:var(--np-danger);border-color:var(--np-danger);color:#fff!important}\n.np-btn-sm{padding:5px 10px;min-height:32px;font-size:14px}\n.np-btn-link{border:0;background:none;padding:0;min-height:0;color:var(--np-primary)!important;font-weight:500;cursor:pointer}\n.np-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:np-spin .7s linear infinite;flex:none}\n@keyframes np-spin{to{transform:rotate(360deg)}}\n.np-list{display:grid;gap:12px}\n.np-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:18px 20px;align-items:start}\n@media (min-width:720px){.np-row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}}\n.np-row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;grid-column:1/-1}\n@media (min-width:720px){.np-row-actions{grid-column:auto;justify-content:flex-end}}\n.np-icon{width:44px;height:44px;border-radius:10px;background:var(--np-primary-soft);display:grid;place-items:center;font-size:22px;flex:none;overflow:hidden}\n.np-icon img{width:100%;height:100%;object-fit:cover}\n.np-title{font-weight:650;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n.np-title a{color:inherit}\n.np-meta{color:var(--np-muted);font-size:14px}\n.np-desc{color:var(--np-muted);margin-top:2px;overflow-wrap:anywhere}\n.np-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--np-surface-2);color:var(--np-muted);border:1px solid var(--np-border);white-space:nowrap}\n.np-chip::before{content:\"\";width:6px;height:6px;border-radius:50%;background:currentColor}\n.np-chip-on{background:var(--np-success-soft);color:var(--np-success);border-color:transparent}\n.np-chip-warn{background:var(--np-warn-soft);color:var(--np-warn);border-color:transparent}\n.np-links{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font-size:14px}\n.np-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}\n.np-tile{padding:18px;display:flex;flex-direction:column;gap:12px}\n.np-tile-head{display:flex;gap:12px;align-items:center}\n.np-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}\n.np-adds{font-size:14px;color:var(--np-muted);display:grid;gap:4px}\n.np-adds li{display:flex;gap:8px;overflow-wrap:anywhere}\n.np-adds li::before{content:\"+\";color:var(--np-primary);font-weight:700}\n.np-empty{text-align:center;padding:56px 24px}\n.np-empty-art{font-size:40px;margin-bottom:10px}\n.np-empty h2{font-size:19px;margin-bottom:6px}\n.np-empty p{color:var(--np-muted);max-width:46ch;margin:0 auto 18px}\n.np-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--np-muted);user-select:none}\n.np-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}\n.np-switch i{width:40px;height:24px;border-radius:999px;background:var(--np-border);position:relative;transition:background .15s;flex:none}\n.np-switch i::after{content:\"\";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}\n.np-switch input:checked+i{background:var(--np-success)}\n.np-switch input:checked+i::after{transform:translateX(16px)}\n.np-switch input:focus-visible+i{outline:2px solid var(--np-primary);outline-offset:2px}\n.np-switch input:disabled+i{opacity:.5}\n.np-field{display:grid;gap:6px;margin-bottom:18px}\n.np-field:last-child{margin-bottom:0}\n.np-field label,.np-label{font-weight:600;font-size:14px}\n.np-help{color:var(--np-muted);font-size:13px}\n.np-error{color:var(--np-danger);font-size:13px;font-weight:500}\n.np-input{width:100%;border:1px solid var(--np-border);background:var(--np-surface);border-radius:8px;padding:9px 12px;min-height:40px}\n.np-input:focus{outline:2px solid var(--np-primary);outline-offset:-1px;border-color:transparent}\n.np-input[aria-invalid=true]{border-color:var(--np-danger)}\ntextarea.np-input{min-height:96px;resize:vertical}\n.np-affix{display:flex;align-items:stretch;border:1px solid var(--np-border);border-radius:8px;overflow:hidden;background:var(--np-surface)}\n.np-affix span{padding:9px 10px;background:var(--np-surface-2);color:var(--np-muted);border-right:1px solid var(--np-border);white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis;font-size:14px;display:flex;align-items:center}\n.np-affix input{border:0;flex:1;min-width:0;padding:9px 12px;background:transparent}\n.np-affix:focus-within{outline:2px solid var(--np-primary);outline-offset:-1px;border-color:transparent}\n.np-affix input:focus{outline:0}\n.np-color{display:flex;gap:8px;align-items:center}\n.np-color input[type=color]{width:44px;height:40px;padding:2px;border:1px solid var(--np-border);border-radius:8px;background:var(--np-surface);cursor:pointer}\n.np-section{margin-bottom:16px}\n.np-section>h2{font-size:15px;padding:14px 20px;border-bottom:1px solid var(--np-border)}\n.np-tabs{display:flex;gap:2px;border-bottom:1px solid var(--np-border);margin-bottom:20px;overflow-x:auto}\n.np-tabs button{border:0;background:none;padding:10px 14px;font-weight:550;color:var(--np-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}\n.np-tabs button[aria-selected=true]{color:var(--np-primary);border-bottom-color:var(--np-primary)}\n.np-savebar{position:sticky;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-top:16px}\n.np-note{padding:12px 14px;border-radius:10px;font-size:14px;background:var(--np-primary-soft);margin-bottom:16px}\n.np-note-warn{background:var(--np-warn-soft);color:var(--np-warn)}\n.np-note-danger{background:var(--np-danger-soft);color:var(--np-danger)}\n.np-steps{counter-reset:s;display:grid;gap:8px;font-size:14px;margin:10px 0 0}\n.np-steps li{counter-increment:s;display:flex;gap:10px}\n.np-steps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;background:var(--np-primary-soft);color:var(--np-primary);font-weight:700;font-size:12px;display:grid;place-items:center}\n.np-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--np-surface-2);border:1px solid var(--np-border);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}\n.np-overlay{position:fixed;inset:0;background:rgba(10,13,20,.55);display:grid;place-items:center;padding:16px;z-index:20}\n.np-modal{background:var(--np-surface);border-radius:14px;max-width:480px;width:100%;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}\n.np-modal header{padding:20px 22px 0}\n.np-modal header h2{font-size:18px}\n.np-modal-body{padding:12px 22px 4px;color:var(--np-muted)}\n.np-modal-body strong{color:var(--np-text)}\n.np-modal footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 20px;flex-wrap:wrap}\n.np-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--np-text);margin-top:12px;cursor:pointer}\n.np-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--np-primary)}\n.np-toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:30;width:min(440px,calc(100vw - 32px))}\n.np-toast{padding:12px 16px;border-radius:10px;background:#111827;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px;display:flex;gap:10px;align-items:flex-start}\n.np-toast-error{background:#b42318}\n.np-toast button{margin-left:auto;border:0;background:none;color:inherit;cursor:pointer;opacity:.8;font-size:16px;line-height:1}\n.np-center{min-height:100%;display:grid;place-items:center;padding:24px}\n.np-auth{width:100%;max-width:400px;padding:28px}\n.np-auth h1{font-size:21px;margin:14px 0 6px}\n.np-auth p{color:var(--np-muted);margin-bottom:18px}\n.np-search{width:240px;max-width:100%}\n.np-dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:10px 20px;font-size:14px}\n.np-dl dt{color:var(--np-muted)}\n.np-dl dd{overflow-wrap:anywhere}\n.np-skel{height:84px;border-radius:var(--np-radius);background:linear-gradient(90deg,var(--np-surface) 25%,var(--np-surface-2) 50%,var(--np-surface) 75%);background-size:200% 100%;animation:np-sh 1.2s infinite;border:1px solid var(--np-border)}\n@keyframes np-sh{to{background-position:-200% 0}}\n@media (prefers-reduced-motion:reduce){.np-root *{animation:none!important;transition:none!important}}\n";

package/dist/dashboard/styles.js

@@ -0,0 +1,129 @@
+/** Dashboard styles, shipped as a string so the package needs no CSS tooling in the host site. Everything is scoped under `.np-root`. */
+export const dashboardCss = `
+.np-root{--np-bg:#f5f6f8;--np-surface:#fff;--np-surface-2:#f9fafb;--np-text:#111827;--np-muted:#667085;--np-border:#e4e7ec;--np-primary:#4f46e5;--np-primary-hover:#4338ca;--np-primary-soft:#eef2ff;--np-danger:#d92d20;--np-danger-soft:#fef3f2;--np-success:#067647;--np-success-soft:#ecfdf3;--np-warn:#b54708;--np-warn-soft:#fffaeb;--np-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);--np-radius:12px;--np-accent:var(--np-primary);
+position:fixed;inset:0;z-index:2147483000;overflow-y:auto;background:var(--np-bg);color:var(--np-text);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-align:left}
+@media (prefers-color-scheme:dark){.np-root{--np-bg:#0c0e13;--np-surface:#161a22;--np-surface-2:#1b202a;--np-text:#eceef2;--np-muted:#98a2b3;--np-border:#2a303c;--np-primary:#818cf8;--np-primary-hover:#a5b4fc;--np-primary-soft:#1e2140;--np-danger:#f97066;--np-danger-soft:#3a1614;--np-success:#47cd89;--np-success-soft:#0d2a1c;--np-warn:#fdb022;--np-warn-soft:#33240a;--np-shadow:0 1px 2px rgba(0,0,0,.4)}}
+.np-root *,.np-root *::before,.np-root *::after{box-sizing:border-box}
+.np-root h1,.np-root h2,.np-root h3,.np-root p,.np-root ul,.np-root ol,.np-root dl,.np-root dd{margin:0;padding:0}
+.np-root ul,.np-root ol{list-style:none}
+.np-root a{color:var(--np-primary);text-decoration:none}
+.np-root a:hover{text-decoration:underline}
+.np-root button,.np-root input,.np-root select,.np-root textarea{font:inherit;color:inherit}
+.np-root :focus-visible{outline:2px solid var(--np-primary);outline-offset:2px}
+.np-top{background:var(--np-surface);border-bottom:1px solid var(--np-border);position:sticky;top:0;z-index:5}
+.np-top-in{max-width:1040px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:20px;min-height:60px;flex-wrap:wrap}
+.np-brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;margin-right:auto;color:var(--np-text)!important;text-decoration:none!important}
+.np-brand-mark{width:28px;height:28px;border-radius:8px;background:var(--np-primary);color:#fff;display:grid;place-items:center;font-size:15px}
+.np-brand small{font-weight:400;color:var(--np-muted);font-size:13px}
+.np-nav{display:flex;gap:4px;order:3;width:100%;margin:0 -8px;overflow-x:auto}
+@media (min-width:720px){.np-nav{order:0;width:auto;margin:0}}
+.np-nav a{padding:8px 12px;border-radius:8px;color:var(--np-muted);font-weight:500;white-space:nowrap;text-decoration:none!important}
+.np-nav a:hover{color:var(--np-text);background:var(--np-surface-2)}
+.np-nav a[aria-current=page]{color:var(--np-primary);background:var(--np-primary-soft)}
+.np-main{max-width:1040px;margin:0 auto;padding:28px 20px 80px}
+.np-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
+.np-head h1{font-size:24px;line-height:1.25;letter-spacing:-.01em}
+.np-head p{color:var(--np-muted);margin-top:4px;max-width:60ch}
+.np-card{background:var(--np-surface);border:1px solid var(--np-border);border-radius:var(--np-radius);box-shadow:var(--np-shadow)}
+.np-pad{padding:20px}
+.np-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--np-border);background:var(--np-surface);border-radius:8px;padding:8px 14px;font-weight:550;cursor:pointer;white-space:nowrap;text-decoration:none!important;color:var(--np-text)!important;min-height:38px}
+.np-btn:hover{background:var(--np-surface-2)}
+.np-btn:disabled{opacity:.55;cursor:not-allowed}
+.np-btn-primary{background:var(--np-primary);border-color:var(--np-primary);color:#fff!important}
+.np-btn-primary:hover{background:var(--np-primary-hover);border-color:var(--np-primary-hover)}
+@media (prefers-color-scheme:dark){.np-btn-primary{color:#0c0e13!important}}
+.np-btn-danger{color:var(--np-danger)!important}
+.np-btn-danger-solid{background:var(--np-danger);border-color:var(--np-danger);color:#fff!important}
+.np-btn-sm{padding:5px 10px;min-height:32px;font-size:14px}
+.np-btn-link{border:0;background:none;padding:0;min-height:0;color:var(--np-primary)!important;font-weight:500;cursor:pointer}
+.np-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:np-spin .7s linear infinite;flex:none}
+@keyframes np-spin{to{transform:rotate(360deg)}}
+.np-list{display:grid;gap:12px}
+.np-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:18px 20px;align-items:start}
+@media (min-width:720px){.np-row{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}}
+.np-row-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;grid-column:1/-1}
+@media (min-width:720px){.np-row-actions{grid-column:auto;justify-content:flex-end}}
+.np-icon{width:44px;height:44px;border-radius:10px;background:var(--np-primary-soft);display:grid;place-items:center;font-size:22px;flex:none;overflow:hidden}
+.np-icon img{width:100%;height:100%;object-fit:cover}
+.np-title{font-weight:650;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.np-title a{color:inherit}
+.np-meta{color:var(--np-muted);font-size:14px}
+.np-desc{color:var(--np-muted);margin-top:2px;overflow-wrap:anywhere}
+.np-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--np-surface-2);color:var(--np-muted);border:1px solid var(--np-border);white-space:nowrap}
+.np-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
+.np-chip-on{background:var(--np-success-soft);color:var(--np-success);border-color:transparent}
+.np-chip-warn{background:var(--np-warn-soft);color:var(--np-warn);border-color:transparent}
+.np-links{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:8px;font-size:14px}
+.np-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
+.np-tile{padding:18px;display:flex;flex-direction:column;gap:12px}
+.np-tile-head{display:flex;gap:12px;align-items:center}
+.np-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
+.np-adds{font-size:14px;color:var(--np-muted);display:grid;gap:4px}
+.np-adds li{display:flex;gap:8px;overflow-wrap:anywhere}
+.np-adds li::before{content:"+";color:var(--np-primary);font-weight:700}
+.np-empty{text-align:center;padding:56px 24px}
+.np-empty-art{font-size:40px;margin-bottom:10px}
+.np-empty h2{font-size:19px;margin-bottom:6px}
+.np-empty p{color:var(--np-muted);max-width:46ch;margin:0 auto 18px}
+.np-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--np-muted);user-select:none}
+.np-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
+.np-switch i{width:40px;height:24px;border-radius:999px;background:var(--np-border);position:relative;transition:background .15s;flex:none}
+.np-switch i::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+.np-switch input:checked+i{background:var(--np-success)}
+.np-switch input:checked+i::after{transform:translateX(16px)}
+.np-switch input:focus-visible+i{outline:2px solid var(--np-primary);outline-offset:2px}
+.np-switch input:disabled+i{opacity:.5}
+.np-field{display:grid;gap:6px;margin-bottom:18px}
+.np-field:last-child{margin-bottom:0}
+.np-field label,.np-label{font-weight:600;font-size:14px}
+.np-help{color:var(--np-muted);font-size:13px}
+.np-error{color:var(--np-danger);font-size:13px;font-weight:500}
+.np-input{width:100%;border:1px solid var(--np-border);background:var(--np-surface);border-radius:8px;padding:9px 12px;min-height:40px}
+.np-input:focus{outline:2px solid var(--np-primary);outline-offset:-1px;border-color:transparent}
+.np-input[aria-invalid=true]{border-color:var(--np-danger)}
+textarea.np-input{min-height:96px;resize:vertical}
+.np-affix{display:flex;align-items:stretch;border:1px solid var(--np-border);border-radius:8px;overflow:hidden;background:var(--np-surface)}
+.np-affix span{padding:9px 10px;background:var(--np-surface-2);color:var(--np-muted);border-right:1px solid var(--np-border);white-space:nowrap;max-width:50%;overflow:hidden;text-overflow:ellipsis;font-size:14px;display:flex;align-items:center}
+.np-affix input{border:0;flex:1;min-width:0;padding:9px 12px;background:transparent}
+.np-affix:focus-within{outline:2px solid var(--np-primary);outline-offset:-1px;border-color:transparent}
+.np-affix input:focus{outline:0}
+.np-color{display:flex;gap:8px;align-items:center}
+.np-color input[type=color]{width:44px;height:40px;padding:2px;border:1px solid var(--np-border);border-radius:8px;background:var(--np-surface);cursor:pointer}
+.np-section{margin-bottom:16px}
+.np-section>h2{font-size:15px;padding:14px 20px;border-bottom:1px solid var(--np-border)}
+.np-tabs{display:flex;gap:2px;border-bottom:1px solid var(--np-border);margin-bottom:20px;overflow-x:auto}
+.np-tabs button{border:0;background:none;padding:10px 14px;font-weight:550;color:var(--np-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
+.np-tabs button[aria-selected=true]{color:var(--np-primary);border-bottom-color:var(--np-primary)}
+.np-savebar{position:sticky;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-top:16px}
+.np-note{padding:12px 14px;border-radius:10px;font-size:14px;background:var(--np-primary-soft);margin-bottom:16px}
+.np-note-warn{background:var(--np-warn-soft);color:var(--np-warn)}
+.np-note-danger{background:var(--np-danger-soft);color:var(--np-danger)}
+.np-steps{counter-reset:s;display:grid;gap:8px;font-size:14px;margin:10px 0 0}
+.np-steps li{counter-increment:s;display:flex;gap:10px}
+.np-steps li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;background:var(--np-primary-soft);color:var(--np-primary);font-weight:700;font-size:12px;display:grid;place-items:center}
+.np-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;background:var(--np-surface-2);border:1px solid var(--np-border);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere}
+.np-overlay{position:fixed;inset:0;background:rgba(10,13,20,.55);display:grid;place-items:center;padding:16px;z-index:20}
+.np-modal{background:var(--np-surface);border-radius:14px;max-width:480px;width:100%;max-height:calc(100vh - 32px);overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.3)}
+.np-modal header{padding:20px 22px 0}
+.np-modal header h2{font-size:18px}
+.np-modal-body{padding:12px 22px 4px;color:var(--np-muted)}
+.np-modal-body strong{color:var(--np-text)}
+.np-modal footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 20px;flex-wrap:wrap}
+.np-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--np-text);margin-top:12px;cursor:pointer}
+.np-check input{margin-top:3px;width:16px;height:16px;accent-color:var(--np-primary)}
+.np-toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:grid;gap:8px;z-index:30;width:min(440px,calc(100vw - 32px))}
+.np-toast{padding:12px 16px;border-radius:10px;background:#111827;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px;display:flex;gap:10px;align-items:flex-start}
+.np-toast-error{background:#b42318}
+.np-toast button{margin-left:auto;border:0;background:none;color:inherit;cursor:pointer;opacity:.8;font-size:16px;line-height:1}
+.np-center{min-height:100%;display:grid;place-items:center;padding:24px}
+.np-auth{width:100%;max-width:400px;padding:28px}
+.np-auth h1{font-size:21px;margin:14px 0 6px}
+.np-auth p{color:var(--np-muted);margin-bottom:18px}
+.np-search{width:240px;max-width:100%}
+.np-dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:10px 20px;font-size:14px}
+.np-dl dt{color:var(--np-muted)}
+.np-dl dd{overflow-wrap:anywhere}
+.np-skel{height:84px;border-radius:var(--np-radius);background:linear-gradient(90deg,var(--np-surface) 25%,var(--np-surface-2) 50%,var(--np-surface) 75%);background-size:200% 100%;animation:np-sh 1.2s infinite;border:1px solid var(--np-border)}
+@keyframes np-sh{to{background-position:-200% 0}}
+@media (prefers-reduced-motion:reduce){.np-root *{animation:none!important;transition:none!important}}
+`;

package/dist/dashboard/ui.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import type { SettingField } from '@nextpluggable/plugin/manifest';
+export declare class ApiError extends Error {
+    status: number;
+    fields?: Record<string, string> | undefined;
+    constructor(message: string, status: number, fields?: Record<string, string> | undefined);
+}
+export type ApiCall = <T = unknown>(method: string, path: string, body?: unknown) => Promise<T>;
+export declare function createApi(apiPath: string, onUnauthorized: () => void): ApiCall;
+export declare function Button(props: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'primary' | 'danger' | 'danger-solid' | 'link';
+    small?: boolean;
+    busy?: boolean;
+}): React.JSX.Element;
+export declare function Switch(props: {
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    showLabel?: boolean;
+}): React.JSX.Element;
+export declare function PluginIcon({ icon, name }: {
+    icon?: string;
+    name: string;
+}): React.JSX.Element;
+export declare function Modal(props: {
+    title: string;
+    onClose: () => void;
+    children: React.ReactNode;
+    footer: React.ReactNode;
+}): React.JSX.Element;
+export interface Toast {
+    id: number;
+    kind: 'ok' | 'error';
+    text: string;
+}
+export declare function Toasts({ toasts, dismiss }: {
+    toasts: Toast[];
+    dismiss: (id: number) => void;
+}): React.JSX.Element;
+export type FieldValue = string | number | boolean | undefined;
+/** One auto-generated form control for a plugin setting. */
+export declare function SettingInput(props: {
+    field: SettingField;
+    value: FieldValue;
+    secretSet?: boolean;
+    error?: string;
+    onChange: (value: FieldValue) => void;
+}): React.JSX.Element;
+/** What a plugin adds and is allowed to do, in plain language. */
+export declare function describePlugin(p: {
+    pages: {
+        title: string;
+        path: string;
+    }[];
+    slots: string[];
+    adminPages: string[];
+    permissions: string[];
+    hasServer: boolean;
+}): string[];
+export declare function timeAgo(iso: string | undefined): string;