@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/previews/AppNavCanvas.js

@@ -0,0 +1,260 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * AppNavCanvas — form-canvas-style editor for an App's top-level
+ * navigation tree. Each nav entry becomes a card with a drag handle,
+ * a kind icon, an inline-rename label, the bound path, and a remove
+ * affordance on hover. Drag-drop reorders within the root list.
+ *
+ * Nested children are rendered indented; cross-level moves and
+ * adding child items are still handled by AppNavInspector (the
+ * canvas keeps DnD focused on the root list to avoid surprising
+ * cross-tree reorders).
+ *
+ * Selection IDs match AppNavInspector:
+ *   { kind: 'nav', id: `${rootKey}[${i}]` }
+ *   { kind: 'nav', id: `${rootKey}[${i}].children[${j}]` }
+ */
+import * as React from 'react';
+import { BarChart3, Compass, Database, FileText, Folder, GripVertical, LayoutDashboard, Link as LinkIcon, Plus, Trash2, } from 'lucide-react';
+import { Badge, cn } from '@object-ui/components';
+import { appendArray, moveArray, spliceArray } from '../inspectors/_shared';
+const DND_MIME = 'text/x-objectui-nav';
+function inferKind(it) {
+    if (it.kind)
+        return String(it.kind);
+    if (it.object || it.objectName)
+        return 'object';
+    if (it.page || it.pageName)
+        return 'page';
+    if (it.dashboard)
+        return 'dashboard';
+    if (it.report)
+        return 'report';
+    if (Array.isArray(it.children) && it.children.length)
+        return 'group';
+    const path = it.path ?? it.href ?? it.route ?? it.url;
+    if (typeof path === 'string' && /^https?:/i.test(path))
+        return 'link';
+    return 'item';
+}
+function kindIcon(kind) {
+    switch (kind) {
+        case 'object':
+            return Database;
+        case 'page':
+            return FileText;
+        case 'dashboard':
+            return LayoutDashboard;
+        case 'report':
+            return BarChart3;
+        case 'link':
+            return LinkIcon;
+        case 'group':
+            return Folder;
+        default:
+            return Compass;
+    }
+}
+const KIND_TONE = {
+    object: {
+        icon: 'text-blue-500',
+        badge: 'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900 dark:bg-blue-950/40 dark:text-blue-300',
+    },
+    page: {
+        icon: 'text-violet-500',
+        badge: 'border-violet-200 bg-violet-50 text-violet-700 dark:border-violet-900 dark:bg-violet-950/40 dark:text-violet-300',
+    },
+    dashboard: {
+        icon: 'text-teal-500',
+        badge: 'border-teal-200 bg-teal-50 text-teal-700 dark:border-teal-900 dark:bg-teal-950/40 dark:text-teal-300',
+    },
+    report: {
+        icon: 'text-amber-500',
+        badge: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-300',
+    },
+    link: {
+        icon: 'text-indigo-500',
+        badge: 'border-indigo-200 bg-indigo-50 text-indigo-700 dark:border-indigo-900 dark:bg-indigo-950/40 dark:text-indigo-300',
+    },
+    group: {
+        icon: 'text-slate-500',
+        badge: 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-900/40 dark:text-slate-300',
+    },
+    item: {
+        icon: 'text-zinc-500',
+        badge: 'border-zinc-200 bg-zinc-50 text-zinc-600 dark:border-zinc-800 dark:bg-zinc-900/40 dark:text-zinc-400',
+    },
+};
+function kindTone(kind) {
+    return KIND_TONE[kind] ?? KIND_TONE.item;
+}
+function navLabel(it, i) {
+    const l = it.label ?? it.title ?? it.name ?? it.path;
+    if (typeof l === 'string' && l.trim())
+        return l.trim();
+    return `Item ${i + 1}`;
+}
+function navPath(it) {
+    const p = it.path ?? it.href ?? it.route ?? it.url;
+    return typeof p === 'string' && p ? p : undefined;
+}
+export function AppNavCanvas({ draft, rootKey, onPatch, selection, onSelectionChange, }) {
+    const items = React.useMemo(() => {
+        const v = draft[rootKey];
+        return Array.isArray(v) ? v : [];
+    }, [draft, rootKey]);
+    const selectedId = selection && selection.kind === 'nav' ? selection.id : null;
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const setItems = React.useCallback((next) => {
+        if (!onPatch)
+            return;
+        onPatch({ [rootKey]: next });
+    }, [onPatch, rootKey]);
+    const addItem = React.useCallback(() => {
+        if (!onPatch)
+            return;
+        const newItem = { label: 'New item', path: '' };
+        const next = appendArray(items, newItem);
+        setItems(next);
+        onSelectionChange?.({
+            kind: 'nav',
+            id: `${rootKey}[${next.length - 1}]`,
+            label: 'New item',
+        });
+    }, [onPatch, items, setItems, rootKey, onSelectionChange]);
+    const removeItem = React.useCallback((index) => {
+        if (!onPatch)
+            return;
+        const next = spliceArray(items, index, null);
+        setItems(next);
+        if (selectedId === `${rootKey}[${index}]`)
+            onSelectionChange?.(null);
+    }, [onPatch, items, setItems, rootKey, selectedId, onSelectionChange]);
+    const renameItem = React.useCallback((index, nextLabel) => {
+        if (!onPatch)
+            return;
+        const cur = items[index] ?? {};
+        const updated = { ...cur, label: nextLabel };
+        const next = spliceArray(items, index, updated);
+        setItems(next);
+        if (selectedId === `${rootKey}[${index}]`) {
+            onSelectionChange?.({ kind: 'nav', id: `${rootKey}[${index}]`, label: nextLabel });
+        }
+    }, [onPatch, items, setItems, rootKey, selectedId, onSelectionChange]);
+    const moveItem = React.useCallback((from, before) => {
+        if (!onPatch)
+            return;
+        let to = before;
+        if (from < before)
+            to = before - 1;
+        if (to === from)
+            return;
+        const next = moveArray(items, from, to);
+        setItems(next);
+        onSelectionChange?.({
+            kind: 'nav',
+            id: `${rootKey}[${to}]`,
+            label: navLabel(next[to] ?? {}, to),
+        });
+    }, [onPatch, items, setItems, rootKey, onSelectionChange]);
+    return (_jsxs("div", { className: "rounded-md border bg-card/40", children: [_jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "font-mono uppercase tracking-wide text-muted-foreground", children: rootKey }), _jsxs(Badge, { variant: "outline", className: "text-[10px]", children: [items.length, " ", items.length === 1 ? 'item' : 'items'] })] }), onPatch && (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded border border-dashed px-2 py-1 text-[11px] text-muted-foreground hover:bg-muted/30 hover:text-foreground", onClick: addItem, children: [_jsx(Plus, { className: "h-3 w-3" }), " Add nav item"] }))] }), _jsx("div", { className: "space-y-1.5 p-2", onDragOver: (e) => {
+                    if (!onPatch)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'move';
+                }, onDrop: (e) => {
+                    if (!onPatch)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    if (dragIndex == null)
+                        return;
+                    moveItem(dragIndex, items.length);
+                    setDragIndex(null);
+                }, children: items.length === 0 ? (_jsx("div", { className: "rounded border border-dashed px-3 py-4 text-center text-[11px] text-muted-foreground", children: onPatch
+                        ? 'Empty — click "Add nav item" to start'
+                        : 'No top-level nav items yet' })) : (items.map((it, i) => (_jsx(NavCardTree, { item: it, index: i, depth: 0, path: `${rootKey}[${i}]`, selectedId: selectedId, canEdit: !!onPatch, onClick: (p, lbl) => onSelectionChange?.({ kind: 'nav', id: p, label: lbl }), onRename: (lbl) => renameItem(i, lbl), onRemove: () => removeItem(i), onDragStart: () => setDragIndex(i), onDragEnd: () => setDragIndex(null), onDropBefore: () => {
+                        if (dragIndex == null)
+                            return;
+                        moveItem(dragIndex, i);
+                        setDragIndex(null);
+                    } }, i)))) })] }));
+}
+function NavCardTree({ item, index, depth, path, selectedId, canEdit, onClick, onRename, onRemove, onDragStart, onDragEnd, onDropBefore, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(NavCard, { item: item, index: index, depth: depth, path: path, isSelected: selectedId === path, canEdit: canEdit && depth === 0, onClick: () => onClick(path, navLabel(item, index)), onRename: onRename, onRemove: onRemove, onDragStart: onDragStart, onDragEnd: onDragEnd, onDropBefore: onDropBefore }), Array.isArray(item.children) &&
+                item.children.map((c, j) => {
+                    const childPath = `${path}.children[${j}]`;
+                    return (_jsx(NavCardTree, { item: c, index: j, depth: depth + 1, path: childPath, selectedId: selectedId, canEdit: canEdit, onClick: onClick, onRename: () => undefined, onRemove: () => undefined, onDragStart: () => undefined, onDragEnd: () => undefined, onDropBefore: () => undefined }, j));
+                })] }));
+}
+function NavCard({ item, index, depth, path, isSelected, canEdit, onClick, onRename, onRemove, onDragStart, onDragEnd, onDropBefore, }) {
+    const kind = inferKind(item);
+    const Icon = kindIcon(kind);
+    const tone = kindTone(kind);
+    const path0 = navPath(item);
+    const [editing, setEditing] = React.useState(false);
+    const [draft, setDraft] = React.useState(navLabel(item, index));
+    const [hover, setHover] = React.useState(false);
+    const [dropPos, setDropPos] = React.useState(null);
+    React.useEffect(() => {
+        if (!editing)
+            setDraft(navLabel(item, index));
+    }, [item, index, editing]);
+    return (_jsxs("div", { className: "relative", style: { paddingLeft: depth * 16 }, children: [dropPos === 'before' && (_jsx("div", { className: "pointer-events-none absolute inset-x-0 -top-0.5 h-0.5 rounded bg-primary" })), _jsxs("button", { type: "button", draggable: canEdit && !editing, onDragStart: (e) => {
+                    if (!canEdit)
+                        return;
+                    e.dataTransfer.effectAllowed = 'move';
+                    e.dataTransfer.setData(DND_MIME, path);
+                    onDragStart();
+                }, onDragEnd: onDragEnd, onDragOver: (e) => {
+                    if (!canEdit)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.dataTransfer.dropEffect = 'move';
+                    setDropPos('before');
+                }, onDragLeave: () => setDropPos(null), onDrop: (e) => {
+                    if (!canEdit)
+                        return;
+                    if (!e.dataTransfer.types.includes(DND_MIME))
+                        return;
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setDropPos(null);
+                    onDropBefore();
+                }, onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), "aria-pressed": isSelected, className: `group flex w-full items-center gap-2 rounded-md border bg-card px-2.5 py-2 text-left text-xs transition-colors hover:border-primary/40 ${isSelected ? 'border-primary ring-1 ring-primary' : 'border-border'} ${canEdit && !editing ? 'cursor-grab active:cursor-grabbing' : ''}`, children: [canEdit ? (_jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/50 group-hover:text-muted-foreground" })) : (_jsx("span", { className: "w-3.5" })), _jsx(Icon, { className: cn('h-3.5 w-3.5 shrink-0', tone.icon) }), editing ? (_jsx("input", { autoFocus: true, value: draft, onChange: (e) => setDraft(e.target.value), onClick: (e) => e.stopPropagation(), onBlur: () => {
+                            setEditing(false);
+                            const v = draft.trim();
+                            if (v && v !== navLabel(item, index))
+                                onRename(v);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                e.preventDefault();
+                                e.target.blur();
+                            }
+                            else if (e.key === 'Escape') {
+                                e.preventDefault();
+                                setDraft(navLabel(item, index));
+                                setEditing(false);
+                            }
+                        }, className: "flex-1 min-w-0 rounded border border-input bg-background px-1.5 py-0.5 text-xs outline-none focus:border-primary" })) : (_jsx("span", { className: "flex-1 min-w-0 truncate font-medium", onDoubleClick: (e) => {
+                            if (!canEdit)
+                                return;
+                            e.stopPropagation();
+                            setEditing(true);
+                        }, children: navLabel(item, index) })), _jsx(Badge, { variant: "outline", className: cn('text-[10px] font-medium', tone.badge), children: kind }), path0 && (_jsx("code", { className: "ml-0 text-[10px] text-muted-foreground truncate max-w-[10rem]", children: path0 })), canEdit && hover && !editing && (_jsx("span", { role: "button", tabIndex: 0, onClick: (e) => {
+                            e.stopPropagation();
+                            onRemove();
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onRemove();
+                            }
+                        }, className: "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-destructive/10 hover:text-destructive", "aria-label": "Remove nav item", children: _jsx(Trash2, { className: "h-3 w-3" }) }))] })] }));
+}

package/dist/views/metadata-admin/previews/AppPreview.d.ts

@@ -1,2 +1,17 @@
+/**
+ * AppPreview — visual summary of an App metadata record's nav and
+ * landing route, since rendering a full nested AppShell inside the
+ * admin would be confusing (nav-within-nav).
+ *
+ * Shows:
+ *   • App label/icon + landing route
+ *   • Top-level navigation items (tabs/menu) as a clickable list —
+ *     each link opens the runtime app in a new tab so authors can
+ *     test the configured nav without leaving the editor.
+ *
+ * If the App schema doesn't follow the expected shape we degrade to
+ * a "no preview" hint rather than throw.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function AppPreview({ name, draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppPreview({ name, draft, editing, selection, onSelectionChange, onPatch }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/AppPreview.js

@@ -17,6 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import * as React from 'react';
 import { Compass, ExternalLink, LayoutDashboard, FileText, Database, BarChart3 } from 'lucide-react';
 import { PreviewShell, PreviewMessage, PreviewErrorBoundary } from './PreviewShell';
+import { AppNavCanvas } from './AppNavCanvas';
 function normalizeNav(raw) {
     if (!Array.isArray(raw))
         return [];
@@ -61,32 +62,40 @@ function kindIcon(kind) {
             return Compass;
     }
 }
-export function AppPreview({ name, draft }) {
+export function AppPreview({ name, draft, editing, selection, onSelectionChange, onPatch }) {
     const appName = String(draft.name ?? name ?? '');
     const label = draft.label ?? appName;
     const landing = draft.landingRoute ?? draft.landing ?? draft.defaultRoute ?? '/';
-    const navItems = React.useMemo(() => {
-        // Accept the most common shapes used by app schemas in the wild.
+    const { rootKey, navItems } = React.useMemo(() => {
         const candidates = [
-            draft.nav,
-            draft.navigation,
-            draft.tabs,
-            draft.items,
-            draft.menu,
+            ['nav', draft.nav],
+            ['navigation', draft.navigation],
+            ['tabs', draft.tabs],
+            ['items', draft.items],
+            ['menu', draft.menu],
         ];
-        for (const c of candidates) {
+        for (const [k, c] of candidates) {
             if (Array.isArray(c) && c.length)
-                return normalizeNav(c);
+                return { rootKey: k, navItems: normalizeNav(c) };
         }
-        return [];
+        return { rootKey: null, navItems: [] };
     }, [draft]);
+    // For Add we need a root key even when empty — default to "nav".
+    const addRootKey = rootKey ?? 'nav';
+    const designMode = !!(editing && onSelectionChange);
+    const canEdit = designMode && !!onPatch;
+    const selectedId = selection && selection.kind === 'nav' ? selection.id : null;
+    const onSelect = designMode
+        ? (path, item) => onSelectionChange({ kind: 'nav', id: path, label: item.label })
+        : undefined;
     const baseRuntimeUrl = appName ? `/apps/${encodeURIComponent(appName)}/` : null;
-    return (_jsx(PreviewShell, { hint: "app", toolbar: baseRuntimeUrl && (_jsxs("a", { href: baseRuntimeUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1", title: "Open this app in a new tab", children: ["Open ", _jsx(ExternalLink, { className: "h-3 w-3" })] })), children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsxs("div", { className: "rounded border bg-muted/30 p-3", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: String(label) }), _jsx("div", { className: "text-xs text-muted-foreground font-mono mt-0.5", children: appName }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: ["Landing: ", _jsx("code", { className: "font-mono", children: String(landing) })] })] }), navItems.length === 0 ? (_jsxs(PreviewMessage, { children: ["No top-level nav items. Add ", _jsx("code", { children: "nav" }), " / ", _jsx("code", { children: "tabs" }), " entries in the Form tab to populate the app's navigation."] })) : (_jsx("div", { className: "border rounded divide-y", children: navItems.map((item, i) => (_jsx(NavRow, { item: item, appName: appName, depth: 0 }, i))) }))] }) }) }));
+    return (_jsx(PreviewShell, { hint: "app", toolbar: baseRuntimeUrl && (_jsxs("a", { href: baseRuntimeUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1", title: "Open this app in a new tab", children: ["Open ", _jsx(ExternalLink, { className: "h-3 w-3" })] })), children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsxs("div", { className: "rounded border bg-muted/30 p-3", children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: String(label) }), _jsx("div", { className: "text-xs text-muted-foreground font-mono mt-0.5", children: appName }), _jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: ["Landing: ", _jsx("code", { className: "font-mono", children: String(landing) })] })] }), designMode ? (_jsx(AppNavCanvas, { draft: draft, rootKey: addRootKey, onPatch: canEdit ? onPatch : undefined, selection: selection ?? null, onSelectionChange: onSelectionChange })) : navItems.length === 0 ? (_jsxs(PreviewMessage, { children: ["No top-level nav items. Add ", _jsx("code", { children: "nav" }), " / ", _jsx("code", { children: "tabs" }), " entries in the Form tab to populate the app's navigation."] })) : (_jsx("div", { className: "border rounded divide-y", children: navItems.map((item, i) => (_jsx(NavRow, { item: item, appName: appName, depth: 0, path: `${rootKey}[${i}]`, onSelect: onSelect, selectedId: selectedId }, i))) }))] }) }) }));
 }
-function NavRow({ item, appName, depth }) {
+function NavRow({ item, appName, depth, path, onSelect, selectedId, }) {
     const Icon = kindIcon(item.kind);
     const url = buildUrl(appName, item.path);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent/40", style: { paddingLeft: `${12 + depth * 16}px` }, children: [_jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsx("span", { className: "font-medium truncate", children: item.label }), item.kind && (_jsx("span", { className: "text-[10px] uppercase tracking-wider opacity-60", children: item.kind })), url && (_jsxs("a", { href: url, target: "_blank", rel: "noreferrer", className: "ml-auto font-mono text-[10px] text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [item.path, " ", _jsx(ExternalLink, { className: "h-3 w-3" })] }))] }), item.children?.map((c, i) => (_jsx(NavRow, { item: c, appName: appName, depth: depth + 1 }, i)))] }));
+    const selected = selectedId === path;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: `flex items-center gap-2 px-3 py-2 text-xs hover:bg-accent/40 ${onSelect ? 'cursor-pointer' : ''} ${selected ? 'bg-primary/5 ring-1 ring-primary' : ''}`, style: { paddingLeft: `${12 + depth * 16}px` }, onClick: onSelect ? (e) => { e.stopPropagation(); onSelect(path, item); } : undefined, children: [_jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsx("span", { className: "font-medium truncate", children: item.label }), item.kind && (_jsx("span", { className: "text-[10px] uppercase tracking-wider opacity-60", children: item.kind })), url && (_jsxs("a", { href: url, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), className: "ml-auto font-mono text-[10px] text-muted-foreground hover:text-foreground inline-flex items-center gap-1", children: [item.path, " ", _jsx(ExternalLink, { className: "h-3 w-3" })] }))] }), item.children?.map((c, i) => (_jsx(NavRow, { item: c, appName: appName, depth: depth + 1, path: `${path}.children[${i}]`, onSelect: onSelect, selectedId: selectedId }, i)))] }));
 }
 function buildUrl(appName, path) {
     if (!path)

package/dist/views/metadata-admin/previews/BookPreview.d.ts

@@ -0,0 +1,20 @@
+/**
+ * BookPreview — visualises a `book` metadata record's navigation spine
+ * (ADR-0046 §6). A book is the *spine* of a table of contents: an ordered
+ * set of groups (sections) plus identity and access. It deliberately does
+ * NOT store its members — membership is **derived** at render time from a
+ * rule on each group (`include` glob/tag) plus per-doc `order`/`group`.
+ *
+ * Because the derived doc set isn't present in the draft (it's resolved
+ * server-side from the current doc set via `GET /meta/book/:name/tree`),
+ * this preview renders the *authored spine*: each group, its membership
+ * rule, and any explicit `pages` override (the curated-order escape hatch,
+ * incl. `---` separators, `...` rest, and external links). A toolbar link
+ * opens the live-resolved tree so authors can verify which docs land where.
+ *
+ * Drafts can be incomplete or invalid (validation may be in progress), so
+ * every field is read defensively and we degrade to a hint rather than throw.
+ */
+import * as React from 'react';
+import type { MetadataPreviewProps } from '../preview-registry';
+export declare function BookPreview({ name, draft }: MetadataPreviewProps): React.JSX.Element;

package/dist/views/metadata-admin/previews/BookPreview.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * BookPreview — visualises a `book` metadata record's navigation spine
+ * (ADR-0046 §6). A book is the *spine* of a table of contents: an ordered
+ * set of groups (sections) plus identity and access. It deliberately does
+ * NOT store its members — membership is **derived** at render time from a
+ * rule on each group (`include` glob/tag) plus per-doc `order`/`group`.
+ *
+ * Because the derived doc set isn't present in the draft (it's resolved
+ * server-side from the current doc set via `GET /meta/book/:name/tree`),
+ * this preview renders the *authored spine*: each group, its membership
+ * rule, and any explicit `pages` override (the curated-order escape hatch,
+ * incl. `---` separators, `...` rest, and external links). A toolbar link
+ * opens the live-resolved tree so authors can verify which docs land where.
+ *
+ * Drafts can be incomplete or invalid (validation may be in progress), so
+ * every field is read defensively and we degrade to a hint rather than throw.
+ */
+import * as React from 'react';
+import { BookOpen, FolderTree, FileText, ExternalLink, Globe, Lock, Building2, Tag, Minus, MoreHorizontal, Package, } from 'lucide-react';
+import { PreviewShell, PreviewErrorBoundary, PreviewEmptyState } from './PreviewShell';
+/** Normalise an untrusted `groups` array into a defensively-typed shape. */
+function normalizeGroups(raw) {
+    if (!Array.isArray(raw))
+        return [];
+    const groups = raw
+        .map((g, i) => {
+        if (!g || typeof g !== 'object')
+            return null;
+        const key = String(g.key ?? '').trim();
+        const label = String(g.label ?? key ?? '').trim();
+        if (!key && !label)
+            return null;
+        return {
+            g: {
+                key: key || '(no key)',
+                label: label || key || '(unnamed)',
+                order: typeof g.order === 'number' ? g.order : undefined,
+                include: normalizeInclude(g.include),
+                package: typeof g.package === 'string' ? g.package : undefined,
+                pages: normalizePages(g.pages),
+            },
+            i,
+        };
+    })
+        .filter((x) => x !== null);
+    // Mirror the resolver's ordering: by `order` then authored index (stable).
+    return groups
+        .sort((a, b) => (a.g.order ?? 0) - (b.g.order ?? 0) || a.i - b.i)
+        .map((x) => x.g);
+}
+function normalizeInclude(raw) {
+    if (typeof raw === 'string')
+        return raw;
+    if (raw && typeof raw === 'object' && typeof raw.tag === 'string') {
+        return { tag: raw.tag };
+    }
+    return undefined;
+}
+function normalizePages(raw) {
+    if (!Array.isArray(raw))
+        return undefined;
+    return raw
+        .map((n) => {
+        if (typeof n === 'string')
+            return { literal: n };
+        if (n && typeof n === 'object') {
+            return {
+                doc: typeof n.doc === 'string' ? n.doc : undefined,
+                href: typeof n.href === 'string' ? n.href : undefined,
+                label: typeof n.label === 'string' ? n.label : undefined,
+                badge: typeof n.badge === 'string' ? n.badge : undefined,
+                icon: typeof n.icon === 'string' ? n.icon : undefined,
+            };
+        }
+        return null;
+    })
+        .filter((x) => x !== null);
+}
+function audienceChip(audience) {
+    if (audience === 'public') {
+        return { icon: _jsx(Globe, { className: "h-3 w-3" }), label: 'Public', tone: 'text-emerald-700 bg-emerald-50 border-emerald-200' };
+    }
+    if (audience && typeof audience === 'object' && typeof audience.profile === 'string') {
+        return { icon: _jsx(Lock, { className: "h-3 w-3" }), label: `Profile: ${audience.profile}`, tone: 'text-amber-800 bg-amber-50 border-amber-200' };
+    }
+    // 'org' (default) or absent — inherits the package grant.
+    return { icon: _jsx(Building2, { className: "h-3 w-3" }), label: 'Org', tone: 'text-muted-foreground bg-muted/40 border-muted' };
+}
+export function BookPreview({ name, draft }) {
+    const d = draft;
+    const bookName = String(d.name ?? name ?? '').trim();
+    const label = String(d.label ?? bookName);
+    const description = typeof d.description === 'string' ? d.description : '';
+    const slug = typeof d.slug === 'string' ? d.slug : '';
+    const groups = React.useMemo(() => normalizeGroups(d.groups), [d.groups]);
+    const aud = audienceChip(d.audience);
+    if (!bookName) {
+        return (_jsx(PreviewShell, { hint: "book", children: _jsx(PreviewEmptyState, { icon: _jsx(BookOpen, { className: "h-8 w-8 opacity-50" }), title: "Name your book", description: "Enter a name in the Form tab to start authoring the documentation spine." }) }));
+    }
+    // The live-resolved tree (actual docs per group) is server-derived. Offer a
+    // link so authors can verify membership against the current doc set.
+    const treeUrl = `/meta/book/${encodeURIComponent(bookName)}/tree`;
+    return (_jsx(PreviewShell, { hint: "book \u00B7 spine", toolbar: _jsxs("a", { href: treeUrl, target: "_blank", rel: "noreferrer", className: "text-xs text-muted-foreground hover:text-foreground inline-flex items-center gap-1", title: "Open the live-resolved navigation tree (actual docs per group)", children: ["Resolved tree ", _jsx(ExternalLink, { className: "h-3 w-3" })] }), children: _jsx(PreviewErrorBoundary, { children: _jsxs("div", { className: "p-3 space-y-3", children: [_jsxs("div", { className: "rounded border bg-muted/30 p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(BookOpen, { className: "h-4 w-4 text-muted-foreground shrink-0" }), _jsx("span", { className: "text-sm font-medium text-foreground truncate", children: label }), _jsxs("span", { className: `ml-auto inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] font-medium ${aud.tone}`, children: [aud.icon, aud.label] })] }), _jsx("div", { className: "text-xs text-muted-foreground font-mono mt-0.5", children: bookName }), slug && (_jsxs("div", { className: "text-xs text-muted-foreground mt-1", children: ["Slug: ", _jsx("code", { className: "font-mono", children: slug })] })), description && _jsx("div", { className: "text-xs text-muted-foreground mt-1.5", children: description })] }), groups.length === 0 ? (_jsx(PreviewEmptyState, { icon: _jsx(FolderTree, { className: "h-8 w-8 opacity-50" }), title: "No groups yet", tone: "warn", description: _jsxs(_Fragment, { children: ["A book needs at least one group in its ", _jsx("code", { children: "groups" }), " spine. Each group derives its members from an ", _jsx("code", { children: "include" }), " rule (a glob like", ' ', _jsx("code", { children: "crm_guide_*" }), " or a ", _jsx("code", { children: '{ tag }' }), ")."] }) })) : (_jsx("div", { className: "space-y-2", children: groups.map((g, i) => (_jsx(GroupCard, { group: g }, `${g.key}-${i}`))) }))] }) }) }));
+}
+function GroupCard({ group }) {
+    return (_jsxs("div", { className: "rounded border bg-background", children: [_jsxs("div", { className: "flex items-center gap-2 border-b bg-muted/20 px-3 py-2", children: [_jsx(FolderTree, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }), _jsx("span", { className: "text-xs font-medium text-foreground truncate", children: group.label }), _jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: group.key }), typeof group.order === 'number' && (_jsxs("span", { className: "text-[10px] text-muted-foreground", title: "Order within the book", children: ["#", group.order] })), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [group.package && (_jsxs("span", { className: "inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] text-muted-foreground", title: "Membership rule is scoped to this package", children: [_jsx(Package, { className: "h-3 w-3" }), group.package] })), _jsx(IncludeChip, { include: group.include, hasOverride: !!group.pages?.length })] })] }), _jsx("div", { className: "px-3 py-2", children: group.pages?.length ? (_jsx("ol", { className: "space-y-1", children: group.pages.map((node, i) => (_jsx(PageRow, { node: node }, i))) })) : group.include != null ? (_jsx("div", { className: "text-[11px] text-muted-foreground italic", children: "Members derived from the rule above \u2014 resolved against the live doc set." })) : (_jsxs("div", { className: "text-[11px] text-amber-700 italic", children: ["No ", _jsx("code", { children: "include" }), " rule and no explicit ", _jsx("code", { children: "pages" }), " \u2014 this group matches nothing unless docs set ", _jsxs("code", { children: ["group: \"", group.key, "\""] }), "."] })) })] }));
+}
+function IncludeChip({ include, hasOverride }) {
+    if (include == null) {
+        return hasOverride ? (_jsx("span", { className: "text-[10px] text-muted-foreground", title: "Curated order via explicit pages", children: "curated" })) : null;
+    }
+    if (typeof include === 'string') {
+        return (_jsx("span", { className: "inline-flex items-center gap-1 rounded border border-primary/30 bg-primary/5 px-1.5 py-0.5 font-mono text-[10px] text-foreground", title: "Glob over doc names", children: include }));
+    }
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded border border-primary/30 bg-primary/5 px-1.5 py-0.5 text-[10px] text-foreground", title: "Match by doc tag", children: [_jsx(Tag, { className: "h-3 w-3" }), include.tag] }));
+}
+function PageRow({ node }) {
+    // Separator (`---`).
+    if (node.literal === '---') {
+        return (_jsxs("li", { className: "flex items-center gap-2 text-[10px] uppercase tracking-wider text-muted-foreground/60", children: [_jsx(Minus, { className: "h-3 w-3" }), "separator"] }));
+    }
+    // Rest marker (`...`) — expands to the group's unpinned members at resolve time.
+    if (node.literal === '...') {
+        return (_jsxs("li", { className: "flex items-center gap-2 text-[11px] italic text-muted-foreground", children: [_jsx(MoreHorizontal, { className: "h-3.5 w-3.5" }), "\u2026rest (remaining matched docs, by order)"] }));
+    }
+    const isExternal = !!node.href;
+    const docName = node.literal ?? node.doc;
+    const display = node.label ?? docName ?? node.href ?? '(empty)';
+    return (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [isExternal ? (_jsx(ExternalLink, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })) : (_jsx(FileText, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })), _jsx("span", { className: "truncate", children: display }), !isExternal && docName && node.label && (_jsx("span", { className: "font-mono text-[10px] text-muted-foreground", children: docName })), node.badge && (_jsx("span", { className: "rounded-full border border-primary/30 bg-primary/5 px-1.5 py-0.5 text-[9px] uppercase tracking-wider text-foreground", children: node.badge })), isExternal && (_jsx("a", { href: node.href, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), className: "ml-auto font-mono text-[10px] text-muted-foreground hover:text-foreground truncate max-w-[40%]", title: node.href, children: node.href }))] }));
+}

package/dist/views/metadata-admin/previews/DashboardPreview.d.ts

@@ -1,2 +1,17 @@
+/**
+ * DashboardPreview — interactive design surface for a Dashboard
+ * metadata draft. Clicking a widget emits a {@link MetadataSelection}
+ * so the host swaps the right-side inspector to that widget's form.
+ *
+ * Uses the same DashboardRenderer the runtime DashboardView uses, with
+ * the adapter from app-shell's AdapterProvider so widgets can query
+ * live data. `designMode` is ON whenever the host is editing —
+ * read-only / view mode falls back to a plain runtime preview so the
+ * canvas looks identical to what end users see.
+ *
+ * The plugin is loaded lazily to avoid pulling its dep graph into
+ * every metadata-admin page load.
+ */
+import * as React from 'react';
 import type { MetadataPreviewProps } from '../preview-registry';
-export declare function DashboardPreview({ draft }: MetadataPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function DashboardPreview({ draft, editing, onPatch, selection, onSelectionChange, locale, }: MetadataPreviewProps): React.JSX.Element;