@vertebr/react 0.6.0 → 0.8.0

package/dist/components/fonts/FontPickerField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontPickerField.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,WAA0B,GAC3B,EAAE,oBAAoB,+BA0LtB"}
+{"version":3,"file":"FontPickerField.d.ts","sourceRoot":"","sources":["../../../src/components/fonts/FontPickerField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAKvD,MAAM,MAAM,oBAAoB,GAAG;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAC9B,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,WAA0B,GAC3B,EAAE,oBAAoB,+BAqMtB"}

package/dist/components/fonts/FontPickerField.js

@@ -42,7 +42,18 @@ export function FontPickerField({ id, value, label, description, readOnly, fonts
             return null;
         return fonts.find((item) => item.id === previewId) ?? null;
     }, [fonts, previewId]);
-    return (_jsxs("div", { className: "vertebr-font-picker", children: [_jsx(FontFaceInjector, { items: fonts, apiBase: fontApiBase }), _jsxs("div", { className: "vertebr-font-picker-current", children: [_jsxs("div", { children: [_jsx("strong", { children: selected?.label ?? "Default system fonts" }), selected ? (_jsx("span", { children: selected.family })) : (_jsx("span", { children: "Manrope / Syne until a library font is chosen" }))] }), !readOnly ? (_jsx("button", { id: id, type: "button", className: "vertebr-btn", onClick: () => setOpen(true), children: "Choose font" })) : (_jsx("span", { id: id, className: "vertebr-font-picker-ro-anchor" }))] }), selected ? (_jsx("div", { className: "vertebr-font-picker-preview", children: _jsx(FontPreviewSample, { family: selected.family, bodyWeight: weightForItem(selected, "body"), headingWeight: weightForItem(selected, "heading"), compact: true }) })) : null, open ? (_jsx("div", { className: "vertebr-font-picker-modal-backdrop", onClick: () => closeModal(true), children: _jsxs("div", { className: "vertebr-font-picker-modal", role: "dialog", "aria-labelledby": `${id}-font-picker-title`, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vertebr-font-picker-modal-head", children: [_jsxs("div", { children: [_jsx("h3", { id: `${id}-font-picker-title`, children: label ?? "Choose a font" }), description ? _jsx("p", { children: description }) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Close" })] }), loading ? (_jsx("div", { className: "vertebr-empty", children: "Loading fonts\u2026" })) : fonts.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No fonts in the library yet. Open Font Library to upload or add Google Fonts." })) : (_jsxs("div", { className: "vertebr-font-picker-modal-body", children: [_jsx("div", { className: "vertebr-font-picker-grid-scroll", children: _jsxs("div", { className: "vertebr-font-picker-grid", children: [_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": previewId === "" || undefined, onClick: () => previewFont(""), children: [_jsx("strong", { children: "Default" }), _jsx("span", { children: "Manrope / Syne" })] }), fonts.map((item) => (_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": item.id === previewId || undefined, style: {
+    const faceItems = useMemo(() => {
+        const items = [];
+        const seen = new Set();
+        for (const item of [selected, previewItem]) {
+            if (!item || seen.has(item.id))
+                continue;
+            seen.add(item.id);
+            items.push(item);
+        }
+        return items;
+    }, [previewItem, selected]);
+    return (_jsxs("div", { className: "vertebr-font-picker", children: [_jsx(FontFaceInjector, { items: faceItems, apiBase: fontApiBase }), _jsxs("div", { className: "vertebr-font-picker-current", children: [_jsxs("div", { children: [_jsx("strong", { children: selected?.label ?? "Default system fonts" }), selected ? (_jsx("span", { children: selected.family })) : (_jsx("span", { children: "Manrope / Syne until a library font is chosen" }))] }), !readOnly ? (_jsx("button", { id: id, type: "button", className: "vertebr-btn", onClick: () => setOpen(true), children: "Choose font" })) : (_jsx("span", { id: id, className: "vertebr-font-picker-ro-anchor" }))] }), selected ? (_jsx("div", { className: "vertebr-font-picker-preview", children: _jsx(FontPreviewSample, { family: selected.family, bodyWeight: weightForItem(selected, "body"), headingWeight: weightForItem(selected, "heading"), compact: true }) })) : null, open ? (_jsx("div", { className: "vertebr-font-picker-modal-backdrop", onClick: () => closeModal(true), children: _jsxs("div", { className: "vertebr-font-picker-modal", role: "dialog", "aria-labelledby": `${id}-font-picker-title`, onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "vertebr-font-picker-modal-head", children: [_jsxs("div", { children: [_jsx("h3", { id: `${id}-font-picker-title`, children: label ?? "Choose a font" }), description ? _jsx("p", { children: description }) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Close" })] }), loading ? (_jsx("div", { className: "vertebr-empty", children: "Loading fonts\u2026" })) : fonts.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: "No fonts in the library yet. Open Font Library to upload or add Google Fonts." })) : (_jsxs("div", { className: "vertebr-font-picker-modal-body", children: [_jsx("div", { className: "vertebr-font-picker-grid-scroll", children: _jsxs("div", { className: "vertebr-font-picker-grid", children: [_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": previewId === "" || undefined, onClick: () => previewFont(""), children: [_jsx("strong", { children: "Default" }), _jsx("span", { children: "Manrope / Syne" })] }), fonts.map((item) => (_jsxs("button", { type: "button", className: "vertebr-font-picker-option", "data-active": item.id === previewId || undefined, style: {
                                                     fontFamily: `"${item.family}", ui-sans-serif, sans-serif`,
                                                     fontWeight: weightForItem(item, "heading"),
                                                 }, onClick: () => previewFont(item.id), children: [_jsx("strong", { children: item.label }), _jsx("span", { children: item.family }), _jsx("em", { children: "The quick brown fox" })] }, item.id)))] }) }), _jsxs("aside", { className: "vertebr-font-picker-detail", children: [_jsx("p", { className: "vertebr-font-picker-detail-label", children: "Preview" }), previewId === "" ? (_jsx(FontPreviewSample, { family: "Manrope", bodyWeight: 400, headingWeight: 700 })) : previewItem ? (_jsx(FontPreviewSample, { family: previewItem.family, bodyWeight: weightForItem(previewItem, "body"), headingWeight: weightForItem(previewItem, "heading") })) : (_jsx("div", { className: "vertebr-empty", children: "Select a font to preview." }))] })] })), _jsxs("div", { className: "vertebr-font-picker-modal-actions", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => closeModal(true), children: "Cancel" }), _jsx("button", { type: "button", className: "vertebr-btn", disabled: loading, onClick: () => closeModal(false), children: "Done" })] })] }) })) : null] }));

package/dist/components/resources/ResourceTable.d.ts

@@ -29,8 +29,10 @@ type ResourcePanelProps = {
     galleryUpload?: Pick<ResourceUploadMeta, "accept" | "maxBytes">;
     onListGallery?: () => Promise<GalleryItem[]>;
     onUploadGallery?: (files: File[]) => Promise<GalleryItem[]>;
+    initialEditRowId?: string;
+    onEditRowIdChange?: (rowId: string | null) => void;
 };
-export declare function ResourcePanel({ schema, items, permissions, actions, label, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions, onCollectionAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }: ResourcePanelProps): import("react").JSX.Element;
+export declare function ResourcePanel({ schema, items, permissions, actions, label, uploads, rowIdKeys, storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions, onCollectionAction, onUpload, galleryUpload, onListGallery, onUploadGallery, initialEditRowId, onEditRowIdChange, }: ResourcePanelProps): import("react").JSX.Element;
 /** @deprecated Prefer ResourcePanel */
 export declare function ResourceTable(props: {
     schema: Record<string, FieldSchema>;

package/dist/components/resources/ResourceTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ResourceTable.d.ts","sourceRoot":"","sources":["../../../src/components/resources/ResourceTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/resources/ResourceTable.js

@@ -130,7 +130,7 @@ function titleFromFilename(name) {
         .replace(/\s+/g, " ")
         .trim();
 }
-export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions = {}, onCollectionAction, onUpload, galleryUpload, onListGallery, onUploadGallery, }) {
+export function ResourcePanel({ schema, items, permissions, actions = {}, label, uploads, rowIdKeys = ["id", "slug", "uid", "email"], storageKey, onUpdate, onCreate, onDelete, onAction, onActionDone, onPreviewMail, collectionActions = {}, onCollectionAction, onUpload, galleryUpload, onListGallery, onUploadGallery, initialEditRowId, onEditRowIdChange, }) {
     const [editing, setEditing] = useState(null);
     const [creating, setCreating] = useState(false);
     const [viewing, setViewing] = useState(null);
@@ -159,6 +159,21 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     const fieldKeys = Object.keys(schema);
     const visibilityFields = useMemo(() => fieldKeys.filter((key) => isListVisibilityField(key, schema[key])), [fieldKeys, schema]);
     const selectable = Boolean(onAction && actionEntries.length > 0);
+    const openEdit = useCallback((row) => {
+        setEditing(row);
+        onEditRowIdChange?.(resolveRowId(row, rowIdKeys));
+    }, [onEditRowIdChange, rowIdKeys]);
+    const closeEdit = useCallback(() => {
+        setEditing(null);
+        onEditRowIdChange?.(null);
+    }, [onEditRowIdChange]);
+    useEffect(() => {
+        if (!initialEditRowId)
+            return;
+        const row = items.find((item) => resolveRowId(item, rowIdKeys) === initialEditRowId);
+        if (row)
+            setEditing(row);
+    }, [initialEditRowId, items, rowIdKeys]);
     useEffect(() => {
         setVisibilityDrafts({});
     }, [items]);
@@ -436,7 +451,7 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
             enableHiding: false,
             cell: ({ row }) => {
                 const rowId = resolveRowId(row.original, rowIdKeys);
-                return (_jsxs("div", { className: "vertebr-row-actions", onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setViewing(row.original), children: "View" }), canUpdate ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setEditing(row.original), children: "Edit" })) : null, rowId
+                return (_jsxs("div", { className: "vertebr-row-actions", onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setViewing(row.original), children: "View" }), canUpdate ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => openEdit(row.original), children: "Edit" })) : null, rowId
                             ? actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [rowId]), children: meta.label }, actionId)))
                             : null, canDelete && rowId ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-danger-quiet", onClick: () => {
                                 if (window.confirm("Delete this row? This cannot be undone.")) {
@@ -490,9 +505,9 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
     if (editing && editingId && onUpdate) {
         const editableSchema = Object.fromEntries(Object.entries(schema).filter(([, field]) => !field.readOnly));
         const title = rowTitle(editing, rowIdKeys);
-        return (_jsxs("div", { className: "vertebr-resource-edit", children: [_jsxs("div", { className: "vertebr-resource-edit-head", children: [_jsxs("div", { className: "vertebr-resource-edit-heading", children: [_jsx("p", { className: "vertebr-resource-edit-eyebrow", children: "Editing record" }), _jsx("h2", { children: title }), _jsx("p", { className: "vertebr-resource-edit-id", children: editingId })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => setEditing(null), children: "Back" })] }), _jsx(ConfigForm, { variant: "record", schema: editableSchema, value: editing, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onSave: async (next) => {
+        return (_jsxs("div", { className: "vertebr-resource-edit", children: [_jsxs("div", { className: "vertebr-resource-edit-head", children: [_jsxs("div", { className: "vertebr-resource-edit-heading", children: [_jsx("p", { className: "vertebr-resource-edit-eyebrow", children: "Editing record" }), _jsx("h2", { children: title }), _jsx("p", { className: "vertebr-resource-edit-id", children: editingId })] }), _jsx("button", { type: "button", className: "vertebr-btn", onClick: () => closeEdit(), children: "Back" })] }), _jsx(ConfigForm, { variant: "record", schema: editableSchema, value: editing, uploads: uploads, onUpload: onUpload, galleryUpload: galleryUpload, onListGallery: onListGallery, onUploadGallery: onUploadGallery, onSave: async (next) => {
                         await onUpdate(editingId, next);
-                        setEditing(null);
+                        closeEdit();
                     } })] }));
     }
     const toolbar = (_jsxs("div", { className: "vertebr-table-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [columnOptions.length > 0 ? (_jsx(ColumnVisibilityMenu, { columns: columnOptions, visibility: columnVisibility, onChange: setColumnVisibility })) : null, canUpload ? (_jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon", onClick: () => setBulkOpen(true), children: [_jsx(ImageUploadIcon, {}), "Bulk upload"] })) : null, visibilityFields.length > 0 && dirtyVisibilityCount > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [dirtyVisibilityCount, " visibility change", dirtyVisibilityCount === 1 ? "" : "s"] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", disabled: savingVisibility, onClick: () => void saveVisibility(), children: savingVisibility ? "Saving…" : "Save visibility" }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: savingVisibility, onClick: () => setVisibilityDrafts({}), children: "Discard" })] })) : null, collectionActionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueCollectionAction(actionId), children: meta.label }, actionId))), selectable && selected.size > 0 ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "vertebr-count", children: [selected.size, " selected"] }), actionEntries.map(([actionId, meta]) => (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: busyAction != null, onClick: () => queueAction(actionId, [...selected]), children: meta.label }, actionId))), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: () => setSelected(new Set()), children: "Clear" })] })) : null] }), tableOverflow.overflow ? (_jsxs("div", { className: "vertebr-table-scroll-controls", role: "group", "aria-label": "Scroll columns", children: [_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canLeft, onClick: () => scrollTable("left"), "aria-label": "Scroll columns left", children: _jsx(ChevronLeftIcon, {}) }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-btn-icon vertebr-table-scroll-btn", disabled: !tableOverflow.canRight, onClick: () => scrollTable("right"), "aria-label": "Scroll columns right", children: _jsx(ChevronRightIcon, {}) })] })) : null] }));
@@ -551,7 +566,7 @@ export function ResourcePanel({ schema, items, permissions, actions = {}, label,
                                         : cell.column.id === "_select"
                                             ? "vertebr-col-select"
                                             : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }), viewing ? (_jsx(ResourceViewModal, { schema: schema, row: viewing, title: rowTitle(viewing, rowIdKeys), canEdit: canUpdate, onClose: () => setViewing(null), onEdit: () => {
-                    setEditing(viewing);
+                    openEdit(viewing);
                     setViewing(null);
                 } })) : null, pendingActionModal, pendingCollectionModal, bulkModal, createModal] }));
 }

package/dist/components/ui/icons.d.ts

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+type IconProps = SVGProps<SVGSVGElement>;
+export declare function IconHome(props: IconProps): import("react").JSX.Element;
+export declare function IconProducts(props: IconProps): import("react").JSX.Element;
+export declare function IconGallery(props: IconProps): import("react").JSX.Element;
+export declare function IconFonts(props: IconProps): import("react").JSX.Element;
+export declare function IconMail(props: IconProps): import("react").JSX.Element;
+export declare function IconPages(props: IconProps): import("react").JSX.Element;
+export declare function IconSettings(props: IconProps): import("react").JSX.Element;
+export declare function IconChart(props: IconProps): import("react").JSX.Element;
+export declare function IconChevronLeft(props: IconProps): import("react").JSX.Element;
+export declare function IconSearch(props: IconProps): import("react").JSX.Element;
+export declare function iconForNavKey(key: string): typeof IconHome;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/ui/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/ui/icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,KAAK,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC;AAiBzC,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAMxC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,+BAQ3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,+BAOxC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAOzC;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,+BAO5C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,+BAMzC;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,SAAS,+BAM/C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,+BAO1C;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,mBAQxC"}

package/dist/components/ui/icons.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function base(props) {
+    return {
+        width: 18,
+        height: 18,
+        viewBox: "0 0 20 20",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.6,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        ...props,
+    };
+}
+export function IconHome(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M3 8.5 10 2.5l7 6v8.5a1 1 0 0 1-1 1h-4.5v-5H8.5v5H4a1 1 0 0 1-1-1V8.5z" }) }));
+}
+export function IconProducts(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M3 6.5 10 2.5l7 4v9H3v-9z" }), _jsx("path", { d: "M7 11.5h6M7 14h4" })] }));
+}
+export function IconGallery(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 13 3.5-3.5 2.5 2.5L12.5 9l4 4.5" }), _jsx("circle", { cx: "7", cy: "7.5", r: "1", fill: "currentColor", stroke: "none" })] }));
+}
+export function IconFonts(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M5 16.5V5.5h10M7.5 16.5V9h5v7.5" }), _jsx("path", { d: "M7 5.5h6" })] }));
+}
+export function IconMail(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("rect", { x: "2.5", y: "4.5", width: "15", height: "11", rx: "1.5" }), _jsx("path", { d: "m3.5 6.5 6.5 4.5 3.5 2.5 6.5-2.5 6.5 4.5" })] }));
+}
+export function IconPages(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("path", { d: "M6 3.5h5.5L16 8v8.5a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1z" }), _jsx("path", { d: "M11.5 3.5V8H16" })] }));
+}
+export function IconSettings(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "10", cy: "10", r: "2.25" }), _jsx("path", { d: "M10 2.5v2M10 15.5v2M3.5 10h2M14.5 10h2M5.4 5.4l1.4 1.4M13.2 13.2l1.4 1.4M5.4 14.6l1.4-1.4M13.2 6.8l1.4-1.4" })] }));
+}
+export function IconChart(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M4 16.5V12M8 16.5V8M12 16.5V10M16 16.5V5" }) }));
+}
+export function IconChevronLeft(props) {
+    return (_jsx("svg", { ...base(props), children: _jsx("path", { d: "M12 4.5 7.5 10 12 15.5" }) }));
+}
+export function IconSearch(props) {
+    return (_jsxs("svg", { ...base(props), children: [_jsx("circle", { cx: "9", cy: "9", r: "4.75" }), _jsx("path", { d: "M13 13l3.5 3.5" })] }));
+}
+export function iconForNavKey(key) {
+    if (key === "overview")
+        return IconHome;
+    if (key.startsWith("resource:"))
+        return IconProducts;
+    if (key === "gallery")
+        return IconGallery;
+    if (key === "fonts")
+        return IconFonts;
+    if (key === "emails")
+        return IconMail;
+    if (key.startsWith("config:"))
+        return IconPages;
+    return IconSettings;
+}

package/dist/components/ui/primitives.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+export type CardProps = {
+    title?: string;
+    children: ReactNode;
+    subdued?: boolean;
+};
+export declare function Card({ title, children, subdued }: CardProps): import("react").JSX.Element;
+export type BadgeProps = {
+    children: ReactNode;
+    tone?: "neutral" | "ok" | "danger" | "warn";
+};
+export declare function Badge({ children, tone }: BadgeProps): import("react").JSX.Element;
+export type BannerProps = {
+    children: ReactNode;
+    tone?: "neutral" | "ok" | "danger" | "warn";
+};
+export declare function Banner({ children, tone }: BannerProps): import("react").JSX.Element;
+export type EmptyStateProps = {
+    title: string;
+    description?: string;
+    action?: ReactNode;
+};
+export declare function EmptyState({ title, description, action }: EmptyStateProps): import("react").JSX.Element;
+export declare function Skeleton({ lines }: {
+    lines?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/components/ui/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/components/ui/primitives.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,SAAS,+BAO3D;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC7C,CAAC;AAEF,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAgB,EAAE,EAAE,UAAU,+BAM/D;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC7C,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAgB,EAAE,EAAE,WAAW,+BAMjE;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,eAAe,+BAQzE;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAQzD"}

package/dist/components/ui/primitives.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Card({ title, children, subdued }) {
+    return (_jsxs("section", { className: "vertebr-card", "data-subdued": subdued || undefined, children: [title ? _jsx("header", { className: "vertebr-card-head", children: title }) : null, _jsx("div", { className: "vertebr-card-body", children: children })] }));
+}
+export function Badge({ children, tone = "neutral" }) {
+    return (_jsx("span", { className: "vertebr-badge", "data-tone": tone, children: children }));
+}
+export function Banner({ children, tone = "neutral" }) {
+    return (_jsx("div", { className: "vertebr-banner", "data-tone": tone, role: "status", children: children }));
+}
+export function EmptyState({ title, description, action }) {
+    return (_jsxs("div", { className: "vertebr-empty-state", children: [_jsx("h3", { children: title }), description ? _jsx("p", { children: description }) : null, action ? _jsx("div", { className: "vertebr-empty-state-action", children: action }) : null] }));
+}
+export function Skeleton({ lines = 3 }) {
+    return (_jsx("div", { className: "vertebr-skeleton", "aria-hidden": "true", children: Array.from({ length: lines }, (_, index) => (_jsx("span", { style: { width: `${88 - index * 12}%` } }, index))) }));
+}

package/dist/hooks/useSaveBar.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export type SaveBarState = {
+    visible: boolean;
+    message?: string;
+    tone?: "ok" | "danger";
+    isDirty: boolean;
+    saving: boolean;
+    onSave?: () => void | Promise<void>;
+    onDiscard?: () => void;
+};
+type SaveBarContextValue = {
+    state: SaveBarState;
+    register: (next: Partial<SaveBarState>) => void;
+    clear: () => void;
+};
+export declare function SaveBarProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useSaveBar(): SaveBarContextValue;
+export {};
+//# sourceMappingURL=useSaveBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSaveBar.d.ts","sourceRoot":"","sources":["../../src/hooks/useSaveBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;IAChD,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB,CAAC;AAUF,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAuBpE;AAED,wBAAgB,UAAU,wBAMzB"}

package/dist/hooks/useSaveBar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+const defaultState = {
+    visible: false,
+    isDirty: false,
+    saving: false,
+};
+const SaveBarContext = createContext(null);
+export function SaveBarProvider({ children }) {
+    const [state, setState] = useState(defaultState);
+    const register = useCallback((next) => {
+        setState((current) => ({
+            ...current,
+            ...next,
+            visible: next.visible ?? Boolean(next.isDirty || next.saving),
+        }));
+    }, []);
+    const clear = useCallback(() => {
+        setState(defaultState);
+    }, []);
+    const value = useMemo(() => ({ state, register, clear }), [state, register, clear]);
+    return (_jsx(SaveBarContext.Provider, { value: value, children: children }));
+}
+export function useSaveBar() {
+    const ctx = useContext(SaveBarContext);
+    if (!ctx) {
+        throw new Error("useSaveBar must be used within SaveBarProvider");
+    }
+    return ctx;
+}

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export type ToastTone = "ok" | "danger" | "neutral";
+export type ToastItem = {
+    id: string;
+    message: string;
+    tone: ToastTone;
+};
+type ToastContextValue = {
+    toasts: ToastItem[];
+    push: (message: string, tone?: ToastTone) => void;
+    dismiss: (id: string) => void;
+};
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useToast(): ToastContextValue;
+export {};
+//# sourceMappingURL=useToast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,IAAI,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAIF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAwBlE;AAED,wBAAgB,QAAQ,sBAMvB"}

package/dist/hooks/useToast.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState, } from "react";
+const ToastContext = createContext(null);
+export function ToastProvider({ children }) {
+    const [toasts, setToasts] = useState([]);
+    const dismiss = useCallback((id) => {
+        setToasts((current) => current.filter((item) => item.id !== id));
+    }, []);
+    const push = useCallback((message, tone = "neutral") => {
+        const id = `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+        setToasts((current) => [...current, { id, message, tone }]);
+        window.setTimeout(() => dismiss(id), 4000);
+    }, [dismiss]);
+    const value = useMemo(() => ({ toasts, push, dismiss }), [toasts, push, dismiss]);
+    return (_jsx(ToastContext.Provider, { value: value, children: children }));
+}
+export function useToast() {
+    const ctx = useContext(ToastContext);
+    if (!ctx) {
+        throw new Error("useToast must be used within ToastProvider");
+    }
+    return ctx;
+}

package/dist/styles/base.css

@@ -27,27 +27,21 @@ html:has(.vertebr-error) body {
   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%);
+  grid-template-rows: var(--vb-topbar-height) 1fr;
+  background: var(--vb-bg);
   color: var(--vb-text);
   font-family: var(--vb-font);
-  font-size: 15px;
-  line-height: 1.45;
+  font-size: var(--vb-font-size-300);
+  line-height: var(--vb-line-height-normal);
   -webkit-font-smoothing: antialiased;
   isolation: isolate;
   overflow: clip;
 }
 
+.vertebr-root[data-sidebar-collapsed="true"] {
+  grid-template-columns: var(--vb-sidebar-width-collapsed) 1fr;
+}
+
 .vertebr-root *,
 .vertebr-root *::before,
 .vertebr-root *::after {

package/dist/styles/buttons.css

@@ -27,23 +27,14 @@
 }
 
 .vertebr-btn-primary {
-  background: linear-gradient(
-    180deg,
-    var(--vb-btn-primary-from) 0%,
-    var(--vb-btn-primary-to) 100%
-  );
+  background: var(--vb-btn-primary-from);
   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;
+  font-weight: var(--vb-font-weight-semibold);
 }
 
 .vertebr-btn-primary:hover:not(:disabled) {
-  background: linear-gradient(
-    180deg,
-    var(--vb-btn-primary-hover-from) 0%,
-    var(--vb-btn-primary-hover-to) 100%
-  );
+  background: var(--vb-btn-primary-hover-from);
   border-color: var(--vb-btn-primary-hover-border);
 }
 

package/dist/styles/index.css

@@ -20,4 +20,5 @@
 @import "./gallery.css";
 @import "./font-library.css";
 @import "./page-preview.css";
+@import "./shell.css";
 @import "./states.css";

package/dist/styles/main.css

@@ -1,6 +1,7 @@
 /* ── Main ────────────────────────────────────────────── */
 
 .vertebr-main {
+  grid-row: 2;
   min-width: 0;
   min-height: 0;
   height: 100%;
@@ -17,13 +18,8 @@
   align-items: flex-end;
   gap: 1rem;
   padding: 1.6rem 2rem 1.15rem;
-  border-bottom: 1px solid color-mix(in srgb, var(--vb-border) 80%, transparent);
-  background: linear-gradient(
-    180deg,
-    var(--vb-header-from) 0%,
-    var(--vb-header-to) 100%
-  );
-  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--vb-border-subdued);
+  background: var(--vb-header-from);
 }
 
 .vertebr-content {

package/dist/styles/nav.css

@@ -24,7 +24,9 @@
 
 .vertebr-nav button {
   appearance: none;
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--vb-space-300);
   width: 100%;
   border: 0;
   background: transparent;