nextpluggable 0.0.0-stage → 0.1.0

package/dist/core/state.d.ts

@@ -0,0 +1,13 @@
+import type { ResolvedConfig } from '../config.js';
+import type { Installs } from './types.js';
+/**
+ * Installed plugins, read through a short-lived per-process cache so that a
+ * page render costs at most one storage read every `cacheTtlMs`.
+ *
+ * The cache lives on `globalThis` and is keyed by the instance's API path, not
+ * by any object identity: Next.js loads the site's setup module once per module
+ * graph (pages, route handlers), and a change made through the dashboard's
+ * route handler must be visible to the very next page render.
+ */
+export declare function getInstalledPlugins(cfg: ResolvedConfig): Promise<Installs>;
+export declare function invalidateInstalledPlugins(cfg: ResolvedConfig): void;

package/dist/core/state.js

@@ -0,0 +1,23 @@
+import { globals } from '../globals.js';
+import { getInstalls } from './store.js';
+/**
+ * Installed plugins, read through a short-lived per-process cache so that a
+ * page render costs at most one storage read every `cacheTtlMs`.
+ *
+ * The cache lives on `globalThis` and is keyed by the instance's API path, not
+ * by any object identity: Next.js loads the site's setup module once per module
+ * graph (pages, route handlers), and a change made through the dashboard's
+ * route handler must be visible to the very next page render.
+ */
+export async function getInstalledPlugins(cfg) {
+    const cache = globals().state;
+    const hit = cache.get(cfg.apiPath);
+    if (hit && Date.now() - hit.at < cfg.cacheTtlMs)
+        return hit.value;
+    const value = await getInstalls(cfg.storage);
+    cache.set(cfg.apiPath, { at: Date.now(), value });
+    return value;
+}
+export function invalidateInstalledPlugins(cfg) {
+    globals().state.delete(cfg.apiPath);
+}

package/dist/core/store.d.ts

@@ -0,0 +1,17 @@
+import { type StorageAdapter } from '../storage/types.js';
+import type { Catalog, FileKind, Installs, SourceRecord, StoredFile } from './types.js';
+export declare const getSources: (s: StorageAdapter) => Promise<SourceRecord[]>;
+export declare const saveSources: (s: StorageAdapter, sources: SourceRecord[]) => Promise<void>;
+export declare const getInstalls: (s: StorageAdapter) => Promise<Installs>;
+export declare const saveInstalls: (s: StorageAdapter, installs: Installs) => Promise<void>;
+export declare const getCatalog: (s: StorageAdapter, sourceId: string) => Promise<Catalog | null>;
+export declare const saveCatalog: (s: StorageAdapter, catalog: Catalog) => Promise<void>;
+export declare const deleteCatalog: (s: StorageAdapter, sourceId: string) => Promise<void>;
+export declare const fileKey: (pluginId: string, kind: FileKind, sha256: string) => string;
+export declare function putFile(s: StorageAdapter, pluginId: string, kind: FileKind, sha256: string, content: string): Promise<void>;
+/** Plugin files are content-addressed and never change, so they are cached in memory for the life of the process. */
+export declare function getFile(s: StorageAdapter, pluginId: string, kind: FileKind, sha256: string): Promise<string | null>;
+/** Delete stored files of a plugin except the ones listed. */
+export declare function pruneFiles(s: StorageAdapter, pluginId: string, keep: Partial<Record<FileKind, StoredFile>>[]): Promise<void>;
+export declare const dataKey: (pluginId: string, key: string) => string;
+export declare function deletePluginData(s: StorageAdapter, pluginId: string): Promise<void>;

package/dist/core/store.js

@@ -0,0 +1,58 @@
+import { globals } from '../globals.js';
+import { encodeSegment } from '../storage/types.js';
+const FILE_NAMES = { client: 'client.js', server: 'server.js', style: 'style.css' };
+async function readJson(storage, key, fallback) {
+    const raw = await storage.get(key);
+    if (raw === null)
+        return fallback;
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        throw new Error(`[nextpluggable] Stored record "${key}" is corrupted.`);
+    }
+}
+export const getSources = (s) => readJson(s, 'sources.json', []);
+export const saveSources = (s, sources) => s.set('sources.json', JSON.stringify(sources));
+export const getInstalls = (s) => readJson(s, 'installs.json', {});
+export const saveInstalls = (s, installs) => s.set('installs.json', JSON.stringify(installs));
+export const getCatalog = (s, sourceId) => readJson(s, `catalogs/${sourceId}.json`, null);
+export const saveCatalog = (s, catalog) => s.set(`catalogs/${catalog.sourceId}.json`, JSON.stringify(catalog));
+export const deleteCatalog = (s, sourceId) => s.delete(`catalogs/${sourceId}.json`);
+export const fileKey = (pluginId, kind, sha256) => `files/${pluginId}/${sha256}.${FILE_NAMES[kind]}`;
+export async function putFile(s, pluginId, kind, sha256, content) {
+    const key = fileKey(pluginId, kind, sha256);
+    await s.set(key, content);
+    globals().files.set(key, content);
+}
+/** Plugin files are content-addressed and never change, so they are cached in memory for the life of the process. */
+export async function getFile(s, pluginId, kind, sha256) {
+    const key = fileKey(pluginId, kind, sha256);
+    const cache = globals().files;
+    const hit = cache.get(key);
+    if (hit !== undefined)
+        return hit;
+    const content = await s.get(key);
+    if (content !== null)
+        cache.set(key, content);
+    return content;
+}
+/** Delete stored files of a plugin except the ones listed. */
+export async function pruneFiles(s, pluginId, keep) {
+    const keepKeys = new Set();
+    for (const set of keep)
+        for (const [kind, f] of Object.entries(set))
+            if (f)
+                keepKeys.add(fileKey(pluginId, kind, f.sha256));
+    for (const key of await s.list(`files/${pluginId}/`)) {
+        if (keepKeys.has(key))
+            continue;
+        await s.delete(key);
+        globals().files.delete(key);
+    }
+}
+export const dataKey = (pluginId, key) => `data/${pluginId}/${encodeSegment(key)}`;
+export async function deletePluginData(s, pluginId) {
+    for (const key of await s.list(`data/${pluginId}/`))
+        await s.delete(key);
+}

package/dist/core/types.d.ts

@@ -0,0 +1,69 @@
+import type { PluginBuild, PluginManifest } from '@nextpluggable/plugin/manifest';
+export interface SourceRecord {
+    id: string;
+    type: 'github' | 'local';
+    /** Human name, e.g. `acme/site-plugins`. */
+    label: string;
+    addedAt: string;
+    github?: {
+        owner: string;
+        repo: string;
+        /** Branch or tag to follow. Default: the repository's default branch. */
+        ref?: string;
+        /** Sub-directory that holds the plugins. */
+        dir?: string;
+        /** Access token, encrypted with the site secret. */
+        token?: string;
+    };
+    local?: {
+        dir: string;
+    };
+}
+export interface CatalogEntry {
+    /** Plugin directory inside the source. */
+    path: string;
+    build: PluginBuild;
+    /** Fingerprint of dist/build.json — changes whenever the plugin is rebuilt. */
+    buildHash: string;
+}
+export interface Catalog {
+    sourceId: string;
+    /** Commit the listing was read at. */
+    revision: string;
+    fetchedAt: string;
+    name?: string;
+    description?: string;
+    plugins: CatalogEntry[];
+    problems: {
+        path: string;
+        message: string;
+    }[];
+}
+export type FileKind = 'client' | 'server' | 'style';
+export interface StoredFile {
+    sha256: string;
+    bytes: number;
+}
+export interface InstallRecord {
+    id: string;
+    manifest: PluginManifest;
+    icon?: string;
+    buildHash: string;
+    source: {
+        id: string;
+        label: string;
+        path: string;
+        revision: string;
+    };
+    files: Partial<Record<FileKind, StoredFile>>;
+    /** Files of the previously installed version, kept so pages cached before an update keep working. */
+    previousFiles?: Partial<Record<FileKind, StoredFile>>;
+    enabled: boolean;
+    /** Setting values; secrets are encrypted. */
+    config: Record<string, string | number | boolean>;
+    /** Page addresses chosen by the site owner, keyed by page id. */
+    paths: Record<string, string>;
+    installedAt: string;
+    updatedAt: string;
+}
+export type Installs = Record<string, InstallRecord>;

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/crypto.d.ts

@@ -0,0 +1,14 @@
+export declare const sha256Hex: (data: string | Uint8Array) => string;
+export declare function hmac(secret: string, data: string): string;
+/** Constant-time string comparison (compares digests so length is not leaked). */
+export declare function safeEqual(a: string, b: string): boolean;
+export declare const isEncrypted: (value: unknown) => value is string;
+/** AES-256-GCM with a key derived from the site secret. Used for plugin secrets and source tokens at rest. */
+export declare function encrypt(secret: string, plaintext: string): string;
+/** Returns null when the value cannot be decrypted (wrong secret or tampering). */
+export declare function decrypt(secret: string, value: string): string | null;
+/** A signed, expiring token: `<payload>.<signature>`. */
+export declare function signToken(secret: string, payload: Record<string, unknown>): string;
+export declare function verifyToken<T extends {
+    exp: number;
+}>(secret: string, token: string | undefined | null): T | null;

package/dist/crypto.js

@@ -0,0 +1,61 @@
+import { createCipheriv, createDecipheriv, createHash, createHmac, hkdfSync, randomBytes, timingSafeEqual } from 'node:crypto';
+export const sha256Hex = (data) => createHash('sha256').update(data).digest('hex');
+const b64u = (buf) => Buffer.from(buf).toString('base64url');
+export function hmac(secret, data) {
+    return createHmac('sha256', secret).update(data).digest('base64url');
+}
+/** Constant-time string comparison (compares digests so length is not leaked). */
+export function safeEqual(a, b) {
+    return timingSafeEqual(createHash('sha256').update(a).digest(), createHash('sha256').update(b).digest());
+}
+function key(secret, purpose) {
+    return Buffer.from(hkdfSync('sha256', secret, 'nextpluggable', purpose, 32));
+}
+const ENC_PREFIX = 'enc:v1:';
+export const isEncrypted = (value) => typeof value === 'string' && value.startsWith(ENC_PREFIX);
+/** AES-256-GCM with a key derived from the site secret. Used for plugin secrets and source tokens at rest. */
+export function encrypt(secret, plaintext) {
+    const iv = randomBytes(12);
+    const cipher = createCipheriv('aes-256-gcm', key(secret, 'settings'), iv);
+    const body = Buffer.concat([cipher.update(plaintext, 'utf8'), cipher.final(), cipher.getAuthTag()]);
+    return `${ENC_PREFIX}${b64u(iv)}:${b64u(body)}`;
+}
+/** Returns null when the value cannot be decrypted (wrong secret or tampering). */
+export function decrypt(secret, value) {
+    if (!isEncrypted(value))
+        return null;
+    const [ivPart, bodyPart] = value.slice(ENC_PREFIX.length).split(':');
+    if (!ivPart || !bodyPart)
+        return null;
+    try {
+        const body = Buffer.from(bodyPart, 'base64url');
+        const decipher = createDecipheriv('aes-256-gcm', key(secret, 'settings'), Buffer.from(ivPart, 'base64url'));
+        decipher.setAuthTag(body.subarray(body.length - 16));
+        return Buffer.concat([decipher.update(body.subarray(0, body.length - 16)), decipher.final()]).toString('utf8');
+    }
+    catch {
+        return null;
+    }
+}
+/** A signed, expiring token: `<payload>.<signature>`. */
+export function signToken(secret, payload) {
+    const body = Buffer.from(JSON.stringify(payload)).toString('base64url');
+    return `${body}.${hmac(secret, body)}`;
+}
+export function verifyToken(secret, token) {
+    if (!token)
+        return null;
+    const dot = token.lastIndexOf('.');
+    if (dot < 1)
+        return null;
+    const body = token.slice(0, dot);
+    if (!safeEqual(hmac(secret, body), token.slice(dot + 1)))
+        return null;
+    try {
+        const payload = JSON.parse(Buffer.from(body, 'base64url').toString('utf8'));
+        return typeof payload.exp === 'number' && payload.exp > Date.now() ? payload : null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/dashboard/Dashboard.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { SessionView } from '../views.js';
+export interface DashboardProps {
+    apiPath: string;
+    dashboardPath: string;
+    siteName: string;
+    session: SessionView;
+    /** Set when the site's configuration is incomplete (shown instead of the dashboard). */
+    setupError?: string;
+}
+export declare function Dashboard(props: DashboardProps): React.JSX.Element;

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' })] })] }));
+}