@vertebr/react 0.1.0 → 0.2.0

package/dist/components/resources/ResourceViewModal.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { ResourceCell } from "./ResourceCell";
+function humanizeKey(key) {
+    return key
+        .replace(/([a-z])([A-Z])/g, "$1 $2")
+        .replace(/[_-]+/g, " ")
+        .replace(/\bcents\b/i, "")
+        .trim();
+}
+function findHeroImage(schema, row) {
+    for (const [key, value] of Object.entries(row)) {
+        if (typeof value !== "string" || !/^https?:\/\//i.test(value))
+            continue;
+        const field = schema[key];
+        if (/(image|img|photo|avatar|thumbnail|thumb|cover)/i.test(key) ||
+            /(image|img|photo)/i.test(field?.label ?? "") ||
+            /(image|img|media|cdn|photo)/i.test(value)) {
+            return value;
+        }
+    }
+    return null;
+}
+export function ResourceViewModal({ schema, row, title, canEdit, onClose, onEdit, }) {
+    const fields = Object.keys(schema);
+    const entries = fields.length > 0
+        ? fields.map((key) => [key, row[key]])
+        : Object.entries(row);
+    const hero = findHeroImage(schema, row);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [_jsx("p", { className: "vertebr-modal-eyebrow", children: "Record" }), _jsx("h2", { children: title })] }), _jsxs("div", { className: "vertebr-modal-actions", children: [canEdit && onEdit ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: onEdit, children: "Edit" })) : null, _jsx("button", { type: "button", className: "vertebr-btn", onClick: onClose, "aria-label": "Close", children: "Close" })] })] }), _jsxs("div", { className: "vertebr-modal-body", children: [hero ? (_jsx("div", { className: "vertebr-modal-hero", children: _jsx("img", { src: hero, alt: "" }) })) : null, _jsx("dl", { className: "vertebr-modal-fields", children: entries.map(([key, value]) => (_jsxs("div", { className: "vertebr-modal-field", children: [_jsx("dt", { children: schema[key]?.label ?? humanizeKey(key) }), _jsx("dd", { children: _jsx(ResourceCell, { fieldKey: key, field: schema[key], value: value, variant: "detail" }) })] }, key))) })] })] }) }));
+}

package/dist/components/theme/ThemeToggle.d.ts

@@ -0,0 +1,7 @@
+import type { VbTheme } from "../../hooks/useVertebrTheme";
+export type ThemeToggleProps = {
+    theme: VbTheme;
+    onChange: (theme: VbTheme) => void;
+};
+export declare function ThemeToggle({ theme, onChange }: ThemeToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=ThemeToggle.d.ts.map

package/dist/components/theme/ThemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeToggle.d.ts","sourceRoot":"","sources":["../../../src/components/theme/ThemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAgChE"}

package/dist/components/theme/ThemeToggle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ThemeToggle({ theme, onChange }) {
+    return (_jsxs("div", { className: "vertebr-theme", children: [_jsx("div", { className: "vertebr-nav-label", children: "Appearance" }), _jsxs("div", { className: "vertebr-theme-toggle", role: "group", "aria-label": "Color theme", children: [_jsxs("button", { type: "button", className: "vertebr-theme-option", "data-active": theme === "light", "aria-pressed": theme === "light", onClick: () => onChange("light"), children: [_jsx(ThemeSunIcon, {}), "Light"] }), _jsxs("button", { type: "button", className: "vertebr-theme-option", "data-active": theme === "dark", "aria-pressed": theme === "dark", onClick: () => onChange("dark"), children: [_jsx(ThemeMoonIcon, {}), "Dark"] })] })] }));
+}
+function ThemeSunIcon() {
+    return (_jsxs("svg", { className: "vertebr-theme-icon", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "12", cy: "12", r: "4" }), _jsx("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" })] }));
+}
+function ThemeMoonIcon() {
+    return (_jsx("svg", { className: "vertebr-theme-icon", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M21 14.5A8.5 8.5 0 0 1 9.5 3 7 7 0 1 0 21 14.5z" }) }));
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useVertebrTheme } from "./useVertebrTheme";
+export type { VbTheme } from "./useVertebrTheme";
+export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./useVertebrControls";
+export type { VertebrControlsProviderProps } from "./useVertebrControls";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { useVertebrTheme } from "./useVertebrTheme";
+export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./useVertebrControls";

package/dist/{useVertebrControls.d.ts → hooks/useVertebrControls.d.ts}

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-export type VertebrControlsMap = Record<string, Record<string, unknown>>;
+import { type VertebrControlsMap } from "@vertebr/client";
 type ControlsContextValue = {
     environment: string;
     controls: VertebrControlsMap;
@@ -14,6 +14,7 @@ export type VertebrControlsProviderProps = {
     environment: string;
     children: ReactNode;
 };
+export type { VertebrControlsMap };
 /**
  * Loads all public Vertebr controls for the storefront once and shares them.
  */
@@ -30,5 +31,4 @@ export declare function useVertebrConfig<T extends Record<string, unknown>>(id:
 };
 /** Access the full public controls map (for gates like comingSoon). */
 export declare function useVertebrControls(): ControlsContextValue;
-export {};
 //# sourceMappingURL=useVertebrControls.d.ts.map

package/dist/hooks/useVertebrControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVertebrControls.d.ts","sourceRoot":"","sources":["../../src/hooks/useVertebrControls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE/E,KAAK,oBAAoB,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAAC;AAIF,MAAM,MAAM,4BAA4B,GAAG;IACzC,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAEnC;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,OAAsB,EACtB,WAAW,EACX,QAAQ,GACT,EAAE,4BAA4B,+BAuC9B;AAYD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,EAAE,EAAE,MAAM,EACV,QAAQ,EAAE,CAAC,GACV;IACD,IAAI,EAAE,CAAC,CAAC;IACR,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B,CAMA;AAED,uEAAuE;AACvE,wBAAgB,kBAAkB,IAAI,oBAAoB,CAEzD"}

package/dist/{useVertebrControls.js → hooks/useVertebrControls.js}

@@ -1,22 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
-import { VERTEBR_ENV_HEADER } from "./client";
+import { createVertebrClient } from "@vertebr/client";
 const ControlsContext = createContext(null);
-async function fetchPublicControls(apiBase, environment) {
-    const base = apiBase.replace(/\/$/, "");
-    const response = await fetch(`${base}/public/controls`, {
-        headers: {
-            Accept: "application/json",
-            [VERTEBR_ENV_HEADER]: environment,
-        },
-    });
-    if (!response.ok) {
-        const text = await response.text();
-        throw new Error(text || `Failed to load controls (${response.status})`);
-    }
-    const body = (await response.json());
-    return body.configs ?? {};
-}
 /**
  * Loads all public Vertebr controls for the storefront once and shares them.
  */
@@ -24,11 +9,15 @@ export function VertebrControlsProvider({ apiBase = "/admin/api", environment, c
     const [controls, setControls] = useState({});
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
+    const client = useMemo(() => createVertebrClient({
+        apiBase,
+        getEnvironment: () => environment,
+    }), [apiBase, environment]);
     const refresh = useCallback(async () => {
         setLoading(true);
         setError(null);
         try {
-            const next = await fetchPublicControls(apiBase, environment);
+            const next = await client.getPublicControls();
             setControls(next);
         }
         catch (err) {
@@ -37,7 +26,7 @@ export function VertebrControlsProvider({ apiBase = "/admin/api", environment, c
         finally {
             setLoading(false);
         }
-    }, [apiBase, environment]);
+    }, [client]);
     useEffect(() => {
         void refresh();
     }, [refresh]);

package/dist/hooks/useVertebrTheme.d.ts

@@ -0,0 +1,7 @@
+export type VbTheme = "light" | "dark";
+export declare function useVertebrTheme(storageKey?: string): {
+    theme: VbTheme;
+    setTheme: (next: VbTheme) => void;
+    toggleTheme: () => void;
+};
+//# sourceMappingURL=useVertebrTheme.d.ts.map

package/dist/hooks/useVertebrTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVertebrTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useVertebrTheme.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AA0BvC,wBAAgB,eAAe,CAAC,UAAU,SAAsB;;qBAU1B,OAAO;;EAS5C"}

package/dist/hooks/useVertebrTheme.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from "react";
+const DEFAULT_STORAGE_KEY = "vertebr:theme";
+function readStoredTheme(key) {
+    try {
+        const value = localStorage.getItem(key);
+        if (value === "light" || value === "dark")
+            return value;
+    }
+    catch {
+        // ignore
+    }
+    return null;
+}
+function writeStoredTheme(key, theme) {
+    try {
+        localStorage.setItem(key, theme);
+    }
+    catch {
+        // ignore
+    }
+}
+function applyTheme(theme) {
+    document.documentElement.setAttribute("data-vb-theme", theme);
+}
+export function useVertebrTheme(storageKey = DEFAULT_STORAGE_KEY) {
+    const [theme, setThemeState] = useState(() => readStoredTheme(storageKey) ?? "dark");
+    useEffect(() => {
+        applyTheme(theme);
+        writeStoredTheme(storageKey, theme);
+    }, [theme, storageKey]);
+    const setTheme = useCallback((next) => {
+        setThemeState(next);
+    }, []);
+    const toggleTheme = useCallback(() => {
+        setThemeState((current) => (current === "dark" ? "light" : "dark"));
+    }, []);
+    return { theme, setTheme, toggleTheme };
+}

package/dist/index.d.ts

@@ -1,11 +1,16 @@
-export { VertebrAdmin } from "./VertebrAdmin";
-export type { VertebrAdminProps } from "./VertebrAdmin";
-export { createVertebrClient } from "./client";
-export type { VertebrClient } from "./client";
-export { MetricsBoard } from "./MetricsBoard";
-export { ResourcePanel, ResourceTable } from "./ResourceTable";
-export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./useVertebrControls";
-export type { VertebrControlsProviderProps, VertebrControlsMap, } from "./useVertebrControls";
-export type { AdminEnvironment, BootstrapResponse, CatalogResponse, CatalogResource, CatalogConfig, EnvironmentAuthPublic, FieldSchema, FieldType, MetricCard, MetricsResponse, ResourceListResponse, ResourceActionMeta, ConfigResponse, } from "./types";
-export { VERTEBR_ENV_HEADER } from "./client";
+export { VertebrAdmin } from "./components/admin/VertebrAdmin";
+export type { VertebrAdminProps } from "./components/admin/VertebrAdmin";
+export { MetricsBoard } from "./components/metrics/MetricsBoard";
+export { GalleryBoard } from "./components/gallery/GalleryBoard";
+export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
+export { ThemeToggle } from "./components/theme/ThemeToggle";
+export type { ThemeToggleProps } from "./components/theme/ThemeToggle";
+export { ConfigForm } from "./components/config/ConfigForm";
+export { EnvSelect } from "./components/env/EnvSelect";
+export { useVertebrTheme } from "./hooks/useVertebrTheme";
+export type { VbTheme } from "./hooks/useVertebrTheme";
+export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./hooks/useVertebrControls";
+export type { VertebrControlsProviderProps } from "./hooks/useVertebrControls";
+export { createVertebrClient, VERTEBR_ENV_HEADER, } from "@vertebr/client";
+export type { VertebrClient, VertebrClientOptions, AdminEnvironment, BootstrapResponse, CatalogResponse, CatalogResource, CatalogConfig, CatalogConfigSection, EnvironmentAuthPublic, FieldSchema, FieldType, GalleryItem, GalleryMeta, GalleryResponse, MetricCard, MetricsResponse, ResourceListResponse, ResourceActionMeta, ResourceUploadMeta, ResourceUploadResponse, ResourceBulkUploadResponse, ConfigResponse, VertebrControlsMap, } from "@vertebr/client";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,4BAA4B,EAC5B,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,GACf,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,YAAY,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sCAAsC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AAG/E,OAAO,EACL,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,iBAAiB,CAAC;AACzB,YAAY,EACV,aAAa,EACb,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,SAAS,EACT,WAAW,EACX,WAAW,EACX,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,kBAAkB,EAClB,kBAAkB,EAClB,sBAAsB,EACtB,0BAA0B,EAC1B,cAAc,EACd,kBAAkB,GACnB,MAAM,iBAAiB,CAAC"}

package/dist/index.js

@@ -1,6 +1,11 @@
-export { VertebrAdmin } from "./VertebrAdmin";
-export { createVertebrClient } from "./client";
-export { MetricsBoard } from "./MetricsBoard";
-export { ResourcePanel, ResourceTable } from "./ResourceTable";
-export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./useVertebrControls";
-export { VERTEBR_ENV_HEADER } from "./client";
+export { VertebrAdmin } from "./components/admin/VertebrAdmin";
+export { MetricsBoard } from "./components/metrics/MetricsBoard";
+export { GalleryBoard } from "./components/gallery/GalleryBoard";
+export { ResourcePanel, ResourceTable } from "./components/resources/ResourceTable";
+export { ThemeToggle } from "./components/theme/ThemeToggle";
+export { ConfigForm } from "./components/config/ConfigForm";
+export { EnvSelect } from "./components/env/EnvSelect";
+export { useVertebrTheme } from "./hooks/useVertebrTheme";
+export { VertebrControlsProvider, useVertebrConfig, useVertebrControls, } from "./hooks/useVertebrControls";
+// Re-export the framework-agnostic client for convenience.
+export { createVertebrClient, VERTEBR_ENV_HEADER, } from "@vertebr/client";

package/dist/styles/auth.css

@@ -0,0 +1,39 @@
+/* ── Auth ────────────────────────────────────────────── */
+
+.vertebr-auth {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.15rem 0.2rem 0.35rem;
+}
+
+.vertebr-auth-hint {
+  margin: 0;
+  color: var(--vb-text-muted);
+  font-size: 0.78rem;
+  line-height: 1.4;
+  word-break: break-all;
+}
+
+.vertebr-auth-input {
+  width: 100%;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg);
+  color: var(--vb-text);
+  border-radius: var(--vb-radius-sm);
+  padding: 0.55rem 0.65rem;
+  font: inherit;
+  font-size: 0.85rem;
+  transition: border-color 140ms ease, box-shadow 140ms ease;
+}
+
+.vertebr-auth-input:focus {
+  outline: none;
+  border-color: var(--vb-accent-dim);
+  box-shadow: 0 0 0 3px var(--vb-accent-soft);
+}
+
+.vertebr-auth-actions {
+  display: flex;
+  gap: 0.5rem;
+}

package/dist/styles/base.css

@@ -0,0 +1,70 @@
+html:has(.vertebr-root),
+html:has(.vertebr-login),
+html:has(.vertebr-loading),
+html:has(.vertebr-error) {
+  background: var(--vb-bg);
+}
+
+html:has(.vertebr-root) body,
+html:has(.vertebr-login) body,
+html:has(.vertebr-loading) body,
+html:has(.vertebr-error) body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: var(--vb-bg);
+  color: var(--vb-text);
+  font-family: var(--vb-font);
+}
+
+.vertebr-root {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  height: 100vh;
+  max-height: 100vh;
+  min-height: 100vh;
+  width: 100%;
+  display: grid;
+  grid-template-columns: var(--vb-sidebar-width) 1fr;
+  background:
+    radial-gradient(
+      900px 480px at 0% -10%,
+      var(--vb-glow-accent),
+      transparent 55%
+    ),
+    radial-gradient(
+      700px 400px at 100% 100%,
+      var(--vb-glow-cool),
+      transparent 50%
+    ),
+    linear-gradient(180deg, var(--vb-bg-deep) 0%, var(--vb-bg) 45%);
+  color: var(--vb-text);
+  font-family: var(--vb-font);
+  font-size: 15px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  isolation: isolate;
+  overflow: clip;
+}
+
+.vertebr-root *,
+.vertebr-root *::before,
+.vertebr-root *::after {
+  box-sizing: border-box;
+}
+
+/* Guard against host-page CSS leaking into the sidebar. */
+.vertebr-sidebar,
+.vertebr-sidebar-top,
+.vertebr-sidebar-bottom,
+.vertebr-nav,
+.vertebr-nav-group,
+.vertebr-brand,
+.vertebr-env,
+.vertebr-auth,
+.vertebr-theme {
+  position: relative;
+  float: none;
+  inset: auto;
+}

package/dist/styles/buttons.css

@@ -0,0 +1,86 @@
+/* ── Buttons / status ────────────────────────────────── */
+
+.vertebr-btn {
+  appearance: none;
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  color: var(--vb-text);
+  border-radius: var(--vb-radius-sm);
+  padding: 0.52rem 0.95rem;
+  font: inherit;
+  font-size: 0.88rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    border-color 120ms ease,
+    transform 80ms ease;
+}
+
+.vertebr-btn:hover:not(:disabled) {
+  background: var(--vb-bg-hover);
+  border-color: var(--vb-border-strong);
+}
+
+.vertebr-btn:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.vertebr-btn-primary {
+  background: linear-gradient(
+    180deg,
+    var(--vb-btn-primary-from) 0%,
+    var(--vb-btn-primary-to) 100%
+  );
+  border-color: var(--vb-btn-primary-border);
+  color: var(--vb-accent-contrast);
+  font-weight: 600;
+  box-shadow: 0 1px 0 var(--vb-surface-tint-strong) inset;
+}
+
+.vertebr-btn-primary:hover:not(:disabled) {
+  background: linear-gradient(
+    180deg,
+    var(--vb-btn-primary-hover-from) 0%,
+    var(--vb-btn-primary-hover-to) 100%
+  );
+  border-color: var(--vb-btn-primary-hover-border);
+}
+
+.vertebr-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.vertebr-btn-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--vb-text-muted);
+  box-shadow: none;
+}
+
+.vertebr-btn-quiet:hover:not(:disabled) {
+  background: var(--vb-bg-hover);
+  border-color: transparent;
+  color: var(--vb-text);
+}
+
+.vertebr-btn-danger-quiet:hover:not(:disabled) {
+  background: var(--vb-danger-soft);
+  color: var(--vb-danger);
+}
+
+.vertebr-status {
+  font-family: var(--vb-mono);
+  font-size: 0.75rem;
+  color: var(--vb-text-muted);
+  letter-spacing: 0.02em;
+}
+
+.vertebr-status[data-tone="ok"] {
+  color: var(--vb-ok);
+}
+
+.vertebr-status[data-tone="danger"] {
+  color: var(--vb-danger);
+}

package/dist/styles/cells.css

@@ -0,0 +1,178 @@
+/* ── Cells ───────────────────────────────────────────── */
+
+.vertebr-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.vertebr-table td:has(.vertebr-cell-clamp),
+.vertebr-table td:has(.vertebr-cell-media),
+.vertebr-table td:has(.vertebr-cell-link) {
+  white-space: normal;
+  min-width: 10rem;
+  max-width: 16rem;
+}
+
+.vertebr-cell-empty {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-cell-text,
+.vertebr-cell-number,
+.vertebr-cell-money,
+.vertebr-cell-datetime {
+  color: var(--vb-text);
+}
+
+.vertebr-cell-number,
+.vertebr-cell-money {
+  font-variant-numeric: tabular-nums;
+  font-family: var(--vb-mono);
+  font-size: 0.86rem;
+}
+
+.vertebr-cell-money {
+  font-weight: 600;
+}
+
+.vertebr-cell-datetime {
+  font-family: var(--vb-mono);
+  font-size: 0.8rem;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-cell-clamp {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal;
+  line-height: 1.35;
+  color: var(--vb-text-muted);
+  max-width: 16rem;
+}
+
+.vertebr-cell-link {
+  display: inline-block;
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--vb-accent);
+  text-decoration: none;
+  font-size: 0.82rem;
+}
+
+.vertebr-cell-link:hover {
+  text-decoration: underline;
+}
+
+.vertebr-cell-media {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.65rem;
+  max-width: 16rem;
+  text-decoration: none;
+  color: inherit;
+}
+
+.vertebr-cell-media img {
+  width: 44px;
+  height: 44px;
+  object-fit: cover;
+  border-radius: var(--vb-radius-sm);
+  border: 1px solid var(--vb-border);
+  background: var(--vb-bg-muted);
+  flex: none;
+}
+
+.vertebr-cell-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--vb-text-subtle);
+  font-family: var(--vb-mono);
+}
+
+.vertebr-cell-json {
+  display: inline-block;
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--vb-mono);
+  font-size: 0.75rem;
+  color: var(--vb-text-muted);
+}
+
+.vertebr-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.18rem 0.55rem;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  border: 1px solid var(--vb-border);
+  color: var(--vb-text-muted);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-badge[data-tone="ok"] {
+  color: var(--vb-ok);
+  border-color: color-mix(in srgb, var(--vb-ok) 40%, transparent);
+  background: var(--vb-ok-soft);
+}
+
+.vertebr-badge[data-tone="neutral"] {
+  color: var(--vb-text-subtle);
+}
+
+.vertebr-chip-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  max-width: 14rem;
+}
+
+.vertebr-chip {
+  border: 1px solid var(--vb-border);
+  border-radius: 999px;
+  padding: 0.1rem 0.45rem;
+  font-size: 0.72rem;
+  color: var(--vb-text-muted);
+  background: var(--vb-surface-tint);
+}
+
+.vertebr-empty {
+  flex: 1 1 auto;
+  display: grid;
+  place-items: center;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: var(--vb-text-muted);
+  font-size: 0.92rem;
+}
+
+.vertebr-cell-media-detail {
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: none;
+}
+
+.vertebr-cell-media-detail img {
+  width: min(100%, 280px);
+  height: auto;
+  max-height: 280px;
+  object-fit: cover;
+}
+
+.vertebr-cell-prose {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.5;
+  color: var(--vb-text);
+  max-width: 40rem;
+}
+