@vertebr/react 0.1.0

package/dist/ConfigForm.d.ts

@@ -0,0 +1,9 @@
+import type { FieldSchema } from "./types";
+type ConfigFormProps = {
+    schema: Record<string, FieldSchema>;
+    value: Record<string, unknown>;
+    onSave: (value: Record<string, unknown>) => Promise<void>;
+};
+export declare function ConfigForm({ schema, value, onSave }: ConfigFormProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ConfigForm.d.ts.map

package/dist/ConfigForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigForm.d.ts","sourceRoot":"","sources":["../src/ConfigForm.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC3D,CAAC;AAgCF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,eAAe,+BA4HpE"}

package/dist/ConfigForm.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useForm, Controller } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as Label from "@radix-ui/react-label";
+import * as Switch from "@radix-ui/react-switch";
+function buildZodSchema(schema) {
+    const shape = {};
+    for (const [key, field] of Object.entries(schema)) {
+        let zodField;
+        switch (field.type) {
+            case "number":
+                zodField = z.number();
+                if (field.min != null)
+                    zodField = zodField.min(field.min);
+                if (field.max != null)
+                    zodField = zodField.max(field.max);
+                break;
+            case "boolean":
+                zodField = z.boolean();
+                break;
+            default:
+                zodField = z.string();
+        }
+        if (!field.required) {
+            zodField = zodField.optional();
+        }
+        shape[key] = zodField;
+    }
+    return z.object(shape);
+}
+function spanFor(field) {
+    if (field.type === "boolean")
+        return "full";
+    if (field.type === "richtext")
+        return "wide";
+    return undefined;
+}
+export function ConfigForm({ schema, value, onSave }) {
+    const zodSchema = useMemo(() => buildZodSchema(schema), [schema]);
+    const [status, setStatus] = useState(null);
+    const [tone, setTone] = useState();
+    const form = useForm({
+        resolver: zodResolver(zodSchema),
+        defaultValues: value,
+    });
+    useEffect(() => {
+        form.reset(value);
+    }, [value, form]);
+    const onSubmit = form.handleSubmit(async (data) => {
+        setStatus("Saving…");
+        setTone(undefined);
+        try {
+            await onSave(data);
+            setStatus("Saved");
+            setTone("ok");
+        }
+        catch (error) {
+            setStatus(error instanceof Error ? error.message : "Save failed");
+            setTone("danger");
+        }
+    });
+    const isDirty = form.formState.isDirty;
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "s") {
+                event.preventDefault();
+                void onSubmit();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [onSubmit]);
+    return (_jsxs("form", { className: "vertebr-form", onSubmit: onSubmit, children: [_jsx("div", { className: "vertebr-form-fields", children: Object.entries(schema).map(([key, field]) => {
+                    if (field.type === "boolean") {
+                        return (_jsxs("div", { className: "vertebr-switch-row", children: [_jsx(Label.Root, { htmlFor: key, children: field.label ?? key }), _jsx(Controller, { control: form.control, name: key, render: ({ field: controllerField }) => (_jsx(Switch.Root, { className: "vertebr-switch", id: key, checked: Boolean(controllerField.value), onCheckedChange: controllerField.onChange, children: _jsx(Switch.Thumb, { className: "vertebr-switch-thumb" }) })) })] }, key));
+                    }
+                    return (_jsxs("div", { className: "vertebr-field", "data-span": spanFor(field), children: [_jsx(Label.Root, { htmlFor: key, children: field.label ?? key }), field.type === "richtext" ? (_jsx("textarea", { id: key, rows: 3, readOnly: field.readOnly, ...form.register(key) })) : (_jsx("input", { id: key, type: field.type === "number" ? "number" : "text", readOnly: field.readOnly, ...form.register(key, {
+                                    valueAsNumber: field.type === "number",
+                                }) }))] }, key));
+                }) }), _jsxs("div", { className: "vertebr-actions", children: [_jsx("button", { className: "vertebr-btn vertebr-btn-primary", type: "submit", disabled: form.formState.isSubmitting || !isDirty, children: form.formState.isSubmitting ? "Saving…" : "Save changes" }), isDirty ? (_jsx("button", { className: "vertebr-btn", type: "button", onClick: () => {
+                            form.reset(value);
+                            setStatus(null);
+                            setTone(undefined);
+                        }, children: "Discard" })) : null, isDirty ? (_jsx("span", { className: "vertebr-dirty", children: "Unsaved" })) : status ? (_jsx("span", { className: "vertebr-status", "data-tone": tone, children: status })) : null, _jsx("span", { className: "vertebr-actions-spacer" }), _jsx("span", { className: "vertebr-kbd", children: "\u2318S" })] })] }));
+}

package/dist/EnvSelect.d.ts

@@ -0,0 +1,9 @@
+import type { AdminEnvironment } from "./types";
+type EnvSelectProps = {
+    environments: AdminEnvironment[];
+    value: string;
+    onChange: (next: string) => void;
+};
+export declare function EnvSelect({ environments, value, onChange }: EnvSelectProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=EnvSelect.d.ts.map

package/dist/EnvSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvSelect.d.ts","sourceRoot":"","sources":["../src/EnvSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,KAAK,cAAc,GAAG;IACpB,YAAY,EAAE,gBAAgB,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,CAAC;AAEF,wBAAgB,SAAS,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAqD1E"}

package/dist/EnvSelect.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Select from "@radix-ui/react-select";
+export function EnvSelect({ environments, value, onChange }) {
+    const active = environments.find((env) => env.id === value);
+    return (_jsxs(Select.Root, { value: value, onValueChange: onChange, children: [_jsxs(Select.Trigger, { className: "vertebr-select-trigger", "aria-label": "Environment", "data-tone": active?.tone ?? "neutral", children: [_jsxs("span", { className: "vertebr-select-value", children: [_jsx("span", { className: "vertebr-select-dot", "data-tone": active?.tone ?? "neutral" }), _jsx(Select.Value, { placeholder: "Select environment" })] }), _jsx(Select.Icon, { className: "vertebr-select-icon", children: _jsx(Chevron, {}) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { className: "vertebr-select-content", position: "popper", sideOffset: 6, children: _jsx(Select.Viewport, { className: "vertebr-select-viewport", children: environments.map((env) => (_jsxs(Select.Item, { value: env.id, className: "vertebr-select-item", "data-tone": env.tone ?? "neutral", children: [_jsxs("span", { className: "vertebr-select-value", children: [_jsx("span", { className: "vertebr-select-dot", "data-tone": env.tone ?? "neutral" }), _jsx(Select.ItemText, { children: env.label })] }), env.auth?.required ? (_jsx("span", { className: "vertebr-env-lock", children: "auth" })) : null, _jsx(Select.ItemIndicator, { className: "vertebr-select-check", children: _jsx(Check, {}) })] }, env.id))) }) }) })] }));
+}
+function Chevron() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function Check() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2.5 6.2 4.8 8.5 9.5 3.8", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/MetricsBoard.d.ts

@@ -0,0 +1,10 @@
+import type { MetricCard } from "./types";
+type MetricsBoardProps = {
+    label?: string;
+    metrics: MetricCard[];
+    onRefresh?: () => void;
+    loading?: boolean;
+};
+export declare function MetricsBoard({ label, metrics, onRefresh, loading, }: MetricsBoardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MetricsBoard.d.ts.map

package/dist/MetricsBoard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsBoard.d.ts","sourceRoot":"","sources":["../src/MetricsBoard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAkB,EAClB,OAAO,EACP,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAqCnB"}

package/dist/MetricsBoard.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function MetricsBoard({ label = "Overview", metrics, onRefresh, loading, }) {
+    return (_jsxs("div", { className: "vertebr-metrics", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: label }), onRefresh ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: onRefresh, disabled: loading, children: loading ? "Refreshing…" : "Refresh" })) : null] }), metrics.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No metrics registered yet." })) : (_jsx("div", { className: "vertebr-metrics-grid", children: metrics.map((metric) => (_jsxs("article", { className: "vertebr-metric-card", "data-tone": metric.tone ?? "neutral", children: [_jsx("p", { className: "vertebr-metric-label", children: metric.label }), _jsx("p", { className: "vertebr-metric-value", children: metric.value }), metric.hint ? (_jsx("p", { className: "vertebr-metric-hint", children: metric.hint })) : null] }, metric.id))) }))] }));
+}

package/dist/ResourceTable.d.ts

@@ -0,0 +1,23 @@
+import type { FieldSchema, ResourceActionMeta } from "./types";
+type ResourcePanelProps = {
+    schema: Record<string, FieldSchema>;
+    items: Record<string, unknown>[];
+    permissions?: {
+        create?: boolean;
+        update?: boolean;
+        delete?: boolean;
+    };
+    actions?: Record<string, ResourceActionMeta>;
+    rowIdKeys?: string[];
+    onUpdate?: (rowId: string, value: Record<string, unknown>) => Promise<void>;
+    onDelete?: (rowId: string) => Promise<void>;
+    onAction?: (rowId: string, actionId: string) => Promise<void>;
+};
+export declare function ResourcePanel({ schema, items, permissions, actions, rowIdKeys, onUpdate, onDelete, onAction, }: ResourcePanelProps): import("react").JSX.Element;
+/** @deprecated Prefer ResourcePanel */
+export declare function ResourceTable(props: {
+    schema: Record<string, FieldSchema>;
+    items: Record<string, unknown>[];
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ResourceTable.d.ts.map

package/dist/ResourceTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../src/ResourceTable.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE/D,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,OAAO,CAAC;KAClB,CAAC;IACF,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC;AAmCF,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAY,EACZ,SAA0C,EAC1C,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAqKpB;AAED,uCAAuC;AACvC,wBAAgB,aAAa,CAAC,KAAK,EAAE;IACnC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;CAClC,+BAEA"}

package/dist/ResourceTable.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { flexRender, getCoreRowModel, useReactTable, } from "@tanstack/react-table";
+import { ConfigForm } from "./ConfigForm";
+function formatCell(value) {
+    if (value == null)
+        return "—";
+    if (typeof value === "boolean")
+        return value ? "Yes" : "No";
+    if (typeof value === "object") {
+        if (value &&
+            typeof value === "object" &&
+            "toDate" in value &&
+            typeof value.toDate === "function") {
+            try {
+                return value.toDate().toLocaleString();
+            }
+            catch {
+                // fall through
+            }
+        }
+        return JSON.stringify(value);
+    }
+    return String(value);
+}
+function resolveRowId(row, keys) {
+    for (const key of keys) {
+        const value = row[key];
+        if (typeof value === "string" && value.trim())
+            return value;
+        if (typeof value === "number")
+            return String(value);
+    }
+    return null;
+}
+export function ResourcePanel({ schema, items, permissions, actions = {}, rowIdKeys = ["id", "slug", "uid", "email"], onUpdate, onDelete, onAction, }) {
+    const [editing, setEditing] = useState(null);
+    const [busyAction, setBusyAction] = useState(null);
+    const canUpdate = Boolean(permissions?.update && onUpdate);
+    const canDelete = Boolean(permissions?.delete && onDelete);
+    const actionEntries = Object.entries(actions);
+    const columns = useMemo(() => {
+        const keys = Object.keys(schema);
+        const defs = keys.length === 0
+            ? [
+                {
+                    id: "raw",
+                    header: "Item",
+                    cell: ({ row }) => formatCell(row.original),
+                },
+            ]
+            : keys.map((key) => ({
+                accessorKey: key,
+                header: schema[key]?.label ?? key,
+                cell: ({ getValue }) => formatCell(getValue()),
+            }));
+        if (canUpdate || canDelete || actionEntries.length > 0) {
+            defs.push({
+                id: "_actions",
+                header: "",
+                cell: ({ row }) => {
+                    const rowId = resolveRowId(row.original, rowIdKeys);
+                    if (!rowId)
+                        return null;
+                    return (_jsxs("div", { className: "vertebr-row-actions", children: [canUpdate ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: () => setEditing(row.original), children: "Edit" })) : null, actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn", disabled: busyAction === `${rowId}:${actionId}`, onClick: () => {
+                                    if (!onAction)
+                                        return;
+                                    setBusyAction(`${rowId}:${actionId}`);
+                                    void onAction(rowId, actionId).finally(() => setBusyAction(null));
+                                }, children: meta.label }, actionId))), canDelete ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: () => {
+                                    if (window.confirm("Delete this row? This cannot be undone.")) {
+                                        void onDelete?.(rowId);
+                                    }
+                                }, children: "Delete" })) : null] }));
+                },
+            });
+        }
+        return defs;
+    }, [
+        schema,
+        canUpdate,
+        canDelete,
+        actionEntries,
+        busyAction,
+        onAction,
+        onDelete,
+        rowIdKeys,
+    ]);
+    const table = useReactTable({
+        data: items,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const editingId = editing ? resolveRowId(editing, rowIdKeys) : null;
+    if (editing && editingId && onUpdate) {
+        const editableSchema = Object.fromEntries(Object.entries(schema).filter(([, field]) => !field.readOnly));
+        return (_jsxs("div", { className: "vertebr-resource-edit", children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsxs("h2", { children: ["Edit ", editingId] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => setEditing(null), children: "Back" })] }), _jsx(ConfigForm, { schema: editableSchema, value: editing, onSave: async (next) => {
+                        await onUpdate(editingId, next);
+                        setEditing(null);
+                    } })] }));
+    }
+    if (items.length === 0) {
+        return _jsx("div", { className: "vertebr-empty", children: "No rows yet." });
+    }
+    return (_jsx("div", { className: "vertebr-table-wrap", children: _jsxs("table", { className: "vertebr-table", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => (_jsx("th", { children: header.isPlaceholder
+                                ? null
+                                : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx("tr", { children: row.getVisibleCells().map((cell) => (_jsx("td", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }));
+}
+/** @deprecated Prefer ResourcePanel */
+export function ResourceTable(props) {
+    return _jsx(ResourcePanel, { ...props });
+}

package/dist/VertebrAdmin.d.ts

@@ -0,0 +1,17 @@
+export type VertebrAdminProps = {
+    /** Base URL for Vertebr API, e.g. `/admin/api` */
+    apiBase?: string;
+    title?: string;
+    /** localStorage key for remembering the selected environment */
+    envStorageKey?: string;
+    /** localStorage key for the access token */
+    tokenStorageKey?: string;
+    /** Optional host-provided token getter (Firebase ID token, etc.) */
+    getAccessToken?: () => string | null | undefined | Promise<string | null | undefined>;
+    /** Signed-in identity shown in the dashboard. */
+    authUserLabel?: string;
+    /** Host-provided sign-out action. */
+    onSignOut?: () => void | Promise<void>;
+};
+export declare function VertebrAdmin({ apiBase, title, envStorageKey, tokenStorageKey, getAccessToken, authUserLabel, onSignOut, }: VertebrAdminProps): import("react").JSX.Element;
+//# sourceMappingURL=VertebrAdmin.d.ts.map

package/dist/VertebrAdmin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VertebrAdmin.d.ts","sourceRoot":"","sources":["../src/VertebrAdmin.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACtF,iDAAiD;IACjD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAgCF,wBAAgB,YAAY,CAAC,EAC3B,OAAsB,EACtB,KAAuB,EACvB,aAA6B,EAC7B,eAAiC,EACjC,cAAc,EACd,aAAa,EACb,SAAS,GACV,EAAE,iBAAiB,+BAgdnB"}

package/dist/VertebrAdmin.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createVertebrClient } from "./client";
+import { ConfigForm } from "./ConfigForm";
+import { EnvSelect } from "./EnvSelect";
+import { MetricsBoard } from "./MetricsBoard";
+import { ResourcePanel } from "./ResourceTable";
+function readStored(key) {
+    try {
+        return localStorage.getItem(key);
+    }
+    catch {
+        return null;
+    }
+}
+function writeStored(key, value) {
+    try {
+        localStorage.setItem(key, value);
+    }
+    catch {
+        // ignore
+    }
+}
+function clearStored(key) {
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}
+export function VertebrAdmin({ apiBase = "/admin/api", title = "Control plane", envStorageKey = "vertebr:env", tokenStorageKey = "vertebr:token", getAccessToken, authUserLabel, onSignOut, }) {
+    const [environment, setEnvironment] = useState(() => readStored(envStorageKey) ?? "");
+    const [token, setToken] = useState(() => readStored(tokenStorageKey) ?? "");
+    const [tokenDraft, setTokenDraft] = useState(token);
+    const getEnvironment = useCallback(() => environment, [environment]);
+    const client = useMemo(() => createVertebrClient({
+        apiBase,
+        getEnvironment,
+        getAccessToken: getAccessToken ?? (() => token || null),
+    }), [apiBase, getEnvironment, getAccessToken, token]);
+    const [bootstrap, setBootstrap] = useState(null);
+    const [catalog, setCatalog] = useState(null);
+    const [selection, setSelection] = useState({ kind: "overview" });
+    const [resourceData, setResourceData] = useState(null);
+    const [configData, setConfigData] = useState(null);
+    const [metricsData, setMetricsData] = useState(null);
+    const [metricsLoading, setMetricsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const next = await client.getBootstrap();
+                if (cancelled)
+                    return;
+                setBootstrap(next);
+                const known = next.environments.map((env) => env.id);
+                const preferred = (environment && known.includes(environment) && environment) ||
+                    next.defaultEnvironment;
+                if (preferred !== environment) {
+                    setEnvironment(preferred);
+                    writeStored(envStorageKey, preferred);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to load bootstrap");
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, environment, envStorageKey]);
+    useEffect(() => {
+        if (!bootstrap || !environment)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                setLoading(true);
+                setError(null);
+                const next = await client.getCatalog();
+                if (cancelled)
+                    return;
+                setCatalog(next);
+                setSelection((current) => {
+                    if (current?.kind === "overview")
+                        return current;
+                    if (current?.kind === "resource") {
+                        if (next.resources.some((r) => r.id === current.id))
+                            return current;
+                    }
+                    if (current?.kind === "config") {
+                        if (next.configs.some((c) => c.id === current.id))
+                            return current;
+                    }
+                    if (next.metrics)
+                        return { kind: "overview" };
+                    const firstResource = next.resources[0];
+                    if (firstResource)
+                        return { kind: "resource", id: firstResource.id };
+                    const firstConfig = next.configs[0];
+                    if (firstConfig)
+                        return { kind: "config", id: firstConfig.id };
+                    return { kind: "overview" };
+                });
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setCatalog(null);
+                    setError(err instanceof Error ? err.message : "Failed to load catalog");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, bootstrap, environment]);
+    useEffect(() => {
+        if (!selection || !catalog)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                setError(null);
+                if (selection.kind === "overview") {
+                    setMetricsLoading(true);
+                    const data = await client.getMetrics();
+                    if (!cancelled) {
+                        setMetricsData(data);
+                        setResourceData(null);
+                        setConfigData(null);
+                    }
+                }
+                else if (selection.kind === "resource") {
+                    const data = await client.listResource(selection.id);
+                    if (!cancelled) {
+                        setResourceData(data);
+                        setConfigData(null);
+                        setMetricsData(null);
+                    }
+                }
+                else {
+                    const data = await client.getConfig(selection.id);
+                    if (!cancelled) {
+                        setConfigData(data);
+                        setResourceData(null);
+                        setMetricsData(null);
+                    }
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : "Failed to load panel");
+                }
+            }
+            finally {
+                if (!cancelled)
+                    setMetricsLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, selection, catalog, environment]);
+    const refreshResource = useCallback(async () => {
+        if (selection?.kind !== "resource")
+            return;
+        const data = await client.listResource(selection.id);
+        setResourceData(data);
+    }, [client, selection]);
+    const refreshMetrics = useCallback(async () => {
+        setMetricsLoading(true);
+        try {
+            const data = await client.getMetrics();
+            setMetricsData(data);
+        }
+        finally {
+            setMetricsLoading(false);
+        }
+    }, [client]);
+    const envList = catalog?.environments ?? bootstrap?.environments ?? [];
+    const activeEnv = envList.find((env) => env.id === environment);
+    const authRequired = Boolean(activeEnv?.auth?.required);
+    const switchEnvironment = (nextEnv) => {
+        if (nextEnv === environment)
+            return;
+        const meta = envList.find((env) => env.id === nextEnv);
+        if (meta?.tone === "danger") {
+            const ok = window.confirm(`Switch to ${meta.label}? Writes will affect this environment.`);
+            if (!ok)
+                return;
+        }
+        writeStored(envStorageKey, nextEnv);
+        setEnvironment(nextEnv);
+        setResourceData(null);
+        setConfigData(null);
+    };
+    const saveToken = () => {
+        const next = tokenDraft.trim();
+        setToken(next);
+        if (next)
+            writeStored(tokenStorageKey, next);
+        else
+            clearStored(tokenStorageKey);
+    };
+    const clearToken = () => {
+        setToken("");
+        setTokenDraft("");
+        clearStored(tokenStorageKey);
+    };
+    if (!bootstrap && loading) {
+        return _jsx("div", { className: "vertebr-loading", children: "Loading Vertebr\u2026" });
+    }
+    if (error && !bootstrap) {
+        return _jsx("div", { className: "vertebr-error", children: error });
+    }
+    const activeLabel = selection?.kind === "overview"
+        ? (catalog?.metrics?.label ?? "Overview")
+        : selection?.kind === "resource"
+            ? catalog?.resources.find((r) => r.id === selection.id)?.label
+            : selection?.kind === "config"
+                ? catalog?.configs.find((c) => c.id === selection.id)?.label
+                : null;
+    return (_jsxs("div", { className: "vertebr-root", "data-env": environment, children: [_jsxs("aside", { className: "vertebr-sidebar", children: [_jsxs("div", { className: "vertebr-sidebar-top", children: [_jsxs("div", { className: "vertebr-brand", children: [_jsx("strong", { children: bootstrap?.brand ?? catalog?.brand ?? "Vertebr" }), _jsx("span", { children: title })] }), envList.length > 0 ? (_jsxs("div", { className: "vertebr-env", children: [_jsx("div", { className: "vertebr-nav-label", children: "Environment" }), _jsx(EnvSelect, { environments: envList, value: environment, onChange: switchEnvironment })] })) : null, _jsxs("nav", { className: "vertebr-nav", children: [catalog?.metrics ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Analytics" }), _jsx("button", { type: "button", "data-active": selection?.kind === "overview", onClick: () => setSelection({ kind: "overview" }), children: catalog.metrics.label })] })) : null, catalog && catalog.resources.length > 0 ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Resources" }), catalog.resources.map((resource) => (_jsx("button", { type: "button", "data-active": selection?.kind === "resource" &&
+                                                    selection.id === resource.id, onClick: () => setSelection({ kind: "resource", id: resource.id }), children: resource.label }, resource.id)))] })) : null, catalog && catalog.configs.length > 0 ? (_jsxs("div", { className: "vertebr-nav-group", children: [_jsx("div", { className: "vertebr-nav-label", children: "Config" }), catalog.configs.map((config) => (_jsx("button", { type: "button", "data-active": selection?.kind === "config" && selection.id === config.id, onClick: () => setSelection({ kind: "config", id: config.id }), children: config.label }, config.id)))] })) : null] })] }), _jsxs("div", { className: "vertebr-sidebar-bottom", children: [getAccessToken && authUserLabel ? (_jsxs("div", { className: "vertebr-auth", children: [_jsx("div", { className: "vertebr-nav-label", children: "Signed in" }), _jsx("p", { className: "vertebr-auth-hint", children: authUserLabel }), onSignOut ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: () => void onSignOut(), children: "Sign out" })) : null] })) : null, !getAccessToken && (authRequired || token) ? (_jsxs("div", { className: "vertebr-auth", children: [_jsx("div", { className: "vertebr-nav-label", children: "Access" }), _jsx("p", { className: "vertebr-auth-hint", children: authRequired
+                                            ? `This environment requires auth${activeEnv?.auth?.claimKey
+                                                ? ` (${activeEnv.auth.claimKey})`
+                                                : ""}.`
+                                            : "Optional access token for protected environments." }), _jsx("input", { className: "vertebr-auth-input", type: "password", placeholder: "Bearer token", value: tokenDraft, onChange: (event) => setTokenDraft(event.target.value), autoComplete: "off" }), _jsxs("div", { className: "vertebr-auth-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: saveToken, children: "Use token" }), token ? (_jsx("button", { type: "button", className: "vertebr-btn", onClick: clearToken, children: "Clear" })) : null] })] })) : null] })] }), _jsxs("main", { className: "vertebr-main", children: [_jsxs("header", { className: "vertebr-header", children: [_jsxs("div", { children: [_jsxs("div", { className: "vertebr-heading-row", children: [_jsx("h1", { children: activeLabel ?? (catalog ? "Dashboard" : "Sign in") }), activeEnv ? (_jsx("span", { className: "vertebr-env-badge", "data-tone": activeEnv.tone ?? "neutral", children: activeEnv.label })) : null] }), _jsx("p", { children: !catalog && authRequired
+                                            ? "Provide an access token to load this environment."
+                                            : selection?.kind === "overview"
+                                                ? "Live metrics for the selected environment."
+                                                : selection?.kind === "resource"
+                                                    ? "Manage records scoped to the selected environment."
+                                                    : selection?.kind === "config"
+                                                        ? "Owner-managed config for this environment."
+                                                        : "Select a panel." })] }), error ? (_jsx("span", { className: "vertebr-status", "data-tone": "danger", children: error })) : null] }), _jsx("div", { className: "vertebr-content", children: catalog ? (_jsxs("section", { className: "vertebr-panel", children: [selection?.kind === "overview" ? (_jsx(MetricsBoard, { label: metricsData?.label ?? catalog.metrics?.label, metrics: metricsData?.metrics ?? [], loading: metricsLoading, onRefresh: () => void refreshMetrics() })) : null, selection?.kind === "resource" && resourceData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Records" }), _jsx("span", { className: "vertebr-count", children: resourceData.items.length })] }), _jsx(ResourcePanel, { schema: resourceData.schema, items: resourceData.items, permissions: resourceData.permissions, actions: resourceData.actions, onUpdate: resourceData.permissions.update
+                                                ? async (rowId, value) => {
+                                                    await client.updateResource(resourceData.id, rowId, value);
+                                                    await refreshResource();
+                                                }
+                                                : undefined, onDelete: resourceData.permissions.delete
+                                                ? async (rowId) => {
+                                                    await client.deleteResource(resourceData.id, rowId);
+                                                    await refreshResource();
+                                                }
+                                                : undefined, onAction: async (rowId, actionId) => {
+                                                await client.runResourceAction(resourceData.id, rowId, actionId);
+                                                await refreshResource();
+                                            } })] })) : null, selection?.kind === "config" && configData ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "vertebr-panel-head", children: [_jsx("h2", { children: "Settings" }), _jsxs("span", { className: "vertebr-count", children: [Object.keys(configData.schema).length, " fields"] })] }), _jsx(ConfigForm, { schema: configData.schema, value: configData.value, onSave: async (next) => {
+                                                const saved = await client.setConfig(configData.id, next);
+                                                setConfigData({
+                                                    ...configData,
+                                                    value: saved.value,
+                                                });
+                                            } })] })) : null] })) : (_jsx("section", { className: "vertebr-panel", children: _jsx("div", { className: "vertebr-empty", children: authRequired
+                                    ? "Authenticated access required for this environment."
+                                    : loading
+                                        ? "Loading…"
+                                        : "Unable to load catalog." }) })) })] })] }));
+}

package/dist/client.d.ts

@@ -0,0 +1,32 @@
+import type { BootstrapResponse, CatalogResponse, ConfigResponse, MetricsResponse, ResourceListResponse } from "./types";
+export declare const VERTEBR_ENV_HEADER = "x-vertebr-env";
+export type VertebrClientOptions = {
+    apiBase: string;
+    getEnvironment: () => string;
+    getAccessToken?: () => string | null | undefined | Promise<string | null | undefined>;
+};
+export type VertebrClient = {
+    getBootstrap: () => Promise<BootstrapResponse>;
+    getCatalog: () => Promise<CatalogResponse>;
+    getMetrics: () => Promise<MetricsResponse>;
+    listResource: (id: string) => Promise<ResourceListResponse>;
+    createResource: (id: string, value: Record<string, unknown>) => Promise<{
+        ok: boolean;
+        item: Record<string, unknown>;
+    }>;
+    updateResource: (id: string, rowId: string, value: Record<string, unknown>) => Promise<{
+        ok: boolean;
+        item: Record<string, unknown>;
+    }>;
+    deleteResource: (id: string, rowId: string) => Promise<{
+        ok: boolean;
+    }>;
+    runResourceAction: (id: string, rowId: string, actionId: string, input?: Record<string, unknown>) => Promise<{
+        ok: boolean;
+        result?: unknown;
+    }>;
+    getConfig: (id: string) => Promise<ConfigResponse>;
+    setConfig: (id: string, value: Record<string, unknown>) => Promise<ConfigResponse>;
+};
+export declare function createVertebrClient(apiBaseOrOptions: string | VertebrClientOptions, getEnvironment?: () => string): VertebrClient;
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,cAAc,EACd,eAAe,EACf,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,kBAAkB,kBAAkB,CAAC;AAElD,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MACb,MAAM,GACN,IAAI,GACJ,SAAS,GACT,OAAO,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,EAAE,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC/C,UAAU,EAAE,MAAM,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3C,UAAU,EAAE,MAAM,OAAO,CAAC,eAAe,CAAC,CAAC;IAC3C,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC5D,cAAc,EAAE,CACd,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC;IAC7D,cAAc,EAAE,CACd,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC;IAC7D,cAAc,EAAE,CACd,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,KACV,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC9B,iBAAiB,EAAE,CACjB,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,EAChB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC5B,OAAO,CAAC;QAAE,EAAE,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChD,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IACnD,SAAS,EAAE,CACT,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC3B,OAAO,CAAC,cAAc,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,mBAAmB,CACjC,gBAAgB,EAAE,MAAM,GAAG,oBAAoB,EAC/C,cAAc,CAAC,EAAE,MAAM,MAAM,GAC5B,aAAa,CA4Ff"}