@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/utils/appRoute.d.ts

@@ -0,0 +1,21 @@
+/**
+ * ADR-0048 (option A) — the `/apps/<segment>` route is keyed on the **package
+ * id** (reverse-domain, globally unique), not the app's display name. This makes
+ * two vendors' same-named apps unambiguous and self-describing in the URL.
+ *
+ * - `appRouteSegment(app)` — the canonical route segment for linking TO an app
+ *   (its package id; falls back to `name` for runtime/DB apps with no
+ *   `_packageId`).
+ * - `matchAppBySegment(apps, seg)` — resolve a route segment back to its app,
+ *   preferring the package id and falling back to the app name. The name
+ *   fallback doubles as a per-tenant friendly alias and keeps legacy
+ *   name-based URLs/bookmarks working. Callers keep their own
+ *   default/first-app fallback around this match.
+ */
+type AppLike = {
+    name?: unknown;
+    _packageId?: unknown;
+} & Record<string, unknown>;
+export declare function appRouteSegment(app: AppLike | null | undefined): string | undefined;
+export declare function matchAppBySegment<T extends AppLike>(apps: readonly T[] | null | undefined, seg: string | null | undefined): T | undefined;
+export {};

package/dist/utils/appRoute.js

@@ -0,0 +1,25 @@
+/**
+ * ADR-0048 (option A) — the `/apps/<segment>` route is keyed on the **package
+ * id** (reverse-domain, globally unique), not the app's display name. This makes
+ * two vendors' same-named apps unambiguous and self-describing in the URL.
+ *
+ * - `appRouteSegment(app)` — the canonical route segment for linking TO an app
+ *   (its package id; falls back to `name` for runtime/DB apps with no
+ *   `_packageId`).
+ * - `matchAppBySegment(apps, seg)` — resolve a route segment back to its app,
+ *   preferring the package id and falling back to the app name. The name
+ *   fallback doubles as a per-tenant friendly alias and keeps legacy
+ *   name-based URLs/bookmarks working. Callers keep their own
+ *   default/first-app fallback around this match.
+ */
+export function appRouteSegment(app) {
+    if (!app)
+        return undefined;
+    const seg = app._packageId ?? app.name;
+    return seg ?? undefined;
+}
+export function matchAppBySegment(apps, seg) {
+    if (!apps || seg == null)
+        return undefined;
+    return apps.find((a) => a?._packageId === seg) ?? apps.find((a) => a?.name === seg);
+}

package/dist/utils/deriveRelatedLists.d.ts

@@ -0,0 +1,54 @@
+/**
+ * deriveRelatedLists — the read-side mirror of `attachInlineSubforms`.
+ *
+ * Where `inlineEdit: true` on a child's `master_detail`/`lookup` field pulls
+ * that child INTO the parent's entry form (write side), the detail-page
+ * RELATED LIST is the read-side counterpart: a child collection surfaced on the
+ * parent's record DETAIL page. Both intents live on the relationship in the
+ * data model — not in a hand-authored page.
+ *
+ * This helper scans every object for fields whose `reference`/`reference_to`
+ * points back at the parent object and produces one related-list descriptor per
+ * child collection. The detail page (`RecordDetailView`) feeds these into the
+ * `record:related_list` renderers (and the legacy `DetailView.related`).
+ *
+ * Rules (kept in lockstep with the relationship-level `relatedList` spec flag):
+ *   - Owned children (`master_detail`) and `lookup` children are SHOWN by
+ *     default. Set `relatedList: false` on the FK field to suppress a noisy
+ *     association/audit link.
+ *   - `relatedListTitle` / `relatedListColumns` on the FK field override the
+ *     derived title / columns.
+ *   - Audit FKs (`created_by` / `updated_by` / `owner_id`) are skipped — they
+ *     exist on virtually every object and would balloon the detail page into
+ *     dozens of duplicate cards.
+ *   - One related list per child object (deduped by child object name): the
+ *     first non-audit, non-suppressed FK wins.
+ *   - Owned (`master_detail`) children are ordered before plain `lookup`
+ *     children, preserving discovery order within each group.
+ */
+export interface DerivedRelatedList {
+    /** Child object name (the `api` for the related list query). */
+    childObject: string;
+    /** Best-effort human label for the child object. */
+    childLabel: string;
+    /** FK field on the child pointing back at this parent. */
+    referenceField: string;
+    /** Title override from `relatedListTitle` (else derive from the object label). */
+    title?: string;
+    /** Explicit columns override from `relatedListColumns` (else auto-derived by the renderer). */
+    columns?: any[];
+    /** True when the child→parent link is a `master_detail` (owned) relationship. */
+    isOwned: boolean;
+}
+interface ObjectLike {
+    name?: string;
+    label?: string;
+    fields?: Record<string, any> | any[];
+}
+/**
+ * Derive the detail-page related lists for `objectDef` from the full object
+ * registry. Returns owned (`master_detail`) children first, then `lookup`
+ * children; deterministic and side-effect free (safe to memoize).
+ */
+export declare function deriveRelatedLists(objectDef: ObjectLike | null | undefined, objects: ObjectLike[] | null | undefined): DerivedRelatedList[];
+export {};

package/dist/utils/deriveRelatedLists.js

@@ -0,0 +1,91 @@
+/**
+ * deriveRelatedLists — the read-side mirror of `attachInlineSubforms`.
+ *
+ * Where `inlineEdit: true` on a child's `master_detail`/`lookup` field pulls
+ * that child INTO the parent's entry form (write side), the detail-page
+ * RELATED LIST is the read-side counterpart: a child collection surfaced on the
+ * parent's record DETAIL page. Both intents live on the relationship in the
+ * data model — not in a hand-authored page.
+ *
+ * This helper scans every object for fields whose `reference`/`reference_to`
+ * points back at the parent object and produces one related-list descriptor per
+ * child collection. The detail page (`RecordDetailView`) feeds these into the
+ * `record:related_list` renderers (and the legacy `DetailView.related`).
+ *
+ * Rules (kept in lockstep with the relationship-level `relatedList` spec flag):
+ *   - Owned children (`master_detail`) and `lookup` children are SHOWN by
+ *     default. Set `relatedList: false` on the FK field to suppress a noisy
+ *     association/audit link.
+ *   - `relatedListTitle` / `relatedListColumns` on the FK field override the
+ *     derived title / columns.
+ *   - Audit FKs (`created_by` / `updated_by` / `owner_id`) are skipped — they
+ *     exist on virtually every object and would balloon the detail page into
+ *     dozens of duplicate cards.
+ *   - One related list per child object (deduped by child object name): the
+ *     first non-audit, non-suppressed FK wins.
+ *   - Owned (`master_detail`) children are ordered before plain `lookup`
+ *     children, preserving discovery order within each group.
+ */
+/** Audit/ownership FKs that exist on nearly every object — never related lists. */
+const AUDIT_FK_FIELDS = new Set(['created_by', 'updated_by', 'owner_id']);
+/** Normalize an object's `fields` (record or array) into `[name, def]` pairs. */
+function fieldEntries(fields) {
+    if (!fields)
+        return [];
+    if (Array.isArray(fields)) {
+        return fields
+            .filter((f) => f && (f.name != null))
+            .map((f) => [String(f.name), f]);
+    }
+    return Object.entries(fields);
+}
+/**
+ * Derive the detail-page related lists for `objectDef` from the full object
+ * registry. Returns owned (`master_detail`) children first, then `lookup`
+ * children; deterministic and side-effect free (safe to memoize).
+ */
+export function deriveRelatedLists(objectDef, objects) {
+    if (!objectDef?.name || !Array.isArray(objects) || objects.length === 0)
+        return [];
+    const parentName = objectDef.name;
+    const owned = [];
+    const referenced = [];
+    const seenChild = new Set();
+    for (const child of objects) {
+        if (!child?.name || child.name === parentName)
+            continue;
+        for (const [fieldName, fieldDef] of fieldEntries(child.fields)) {
+            if (!fieldDef)
+                continue;
+            const type = fieldDef.type;
+            if (type !== 'lookup' && type !== 'master_detail')
+                continue;
+            if ((fieldDef.reference_to || fieldDef.reference) !== parentName)
+                continue;
+            if (AUDIT_FK_FIELDS.has(fieldName))
+                continue;
+            // Explicit opt-out lives on the relationship.
+            if (fieldDef.relatedList === false)
+                continue;
+            // One related list per child object — the first eligible FK wins.
+            if (seenChild.has(child.name))
+                continue;
+            seenChild.add(child.name);
+            const entry = {
+                childObject: child.name,
+                childLabel: child.label || child.name,
+                referenceField: fieldName,
+                isOwned: type === 'master_detail',
+                ...(typeof fieldDef.relatedListTitle === 'string' && fieldDef.relatedListTitle
+                    ? { title: fieldDef.relatedListTitle }
+                    : {}),
+                ...(Array.isArray(fieldDef.relatedListColumns) && fieldDef.relatedListColumns.length > 0
+                    ? { columns: fieldDef.relatedListColumns }
+                    : {}),
+            };
+            (entry.isOwned ? owned : referenced).push(entry);
+            break; // move on to the next child object
+        }
+    }
+    return [...owned, ...referenced];
+}

package/dist/utils/index.d.ts

@@ -3,6 +3,10 @@
  */
 export { resolveRecordFormTarget, } from './recordFormNavigation';
 export type { ObjectDefinitionForNavigation, RecordFormTarget, } from './recordFormNavigation';
+export { deriveRelatedLists } from './deriveRelatedLists';
+export type { DerivedRelatedList } from './deriveRelatedLists';
+export { preferLocal } from './preferLocal';
+export { appRouteSegment, matchAppBySegment } from './appRoute';
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.

package/dist/utils/index.js

@@ -2,6 +2,9 @@
  * Utility functions for ObjectStack Console
  */
 export { resolveRecordFormTarget, } from './recordFormNavigation';
+export { deriveRelatedLists } from './deriveRelatedLists';
+export { preferLocal } from './preferLocal';
+export { appRouteSegment, matchAppBySegment } from './appRoute';
 /**
  * Resolves an I18nLabel to a plain string.
  * I18nLabel can be either a string or an object { key, defaultValue?, params? }.

package/dist/utils/managedByEmptyState.d.ts

@@ -26,4 +26,11 @@ export interface ManagedByEmptyState {
     message: string;
     icon: string;
 }
-export declare function resolveManagedByEmptyState(managedBy: string | undefined | null): ManagedByEmptyState | undefined;
+/**
+ * Translator function, structurally compatible with the `t` returned by
+ * `useObjectTranslation()`. Accepts a key and optional options (including a
+ * `defaultValue` used as the English fallback when a locale lacks the key).
+ */
+type TranslateFn = (key: string, options?: Record<string, unknown>) => string;
+export declare function resolveManagedByEmptyState(managedBy: string | undefined | null, t: TranslateFn): ManagedByEmptyState | undefined;
+export {};

package/dist/utils/managedByEmptyState.js

@@ -1,22 +1,28 @@
-export function resolveManagedByEmptyState(managedBy) {
+export function resolveManagedByEmptyState(managedBy, t) {
     switch (managedBy) {
         case 'system':
             return {
                 icon: 'Lock',
-                title: 'Nothing here yet',
-                message: 'Entries appear automatically when their source action runs (e.g. Submit for Approval, Share, Invite). Trigger one of those on a source record to create a row.',
+                title: t('list.managedBy.system.title', { defaultValue: 'Nothing here yet' }),
+                message: t('list.managedBy.system.message', {
+                    defaultValue: 'Entries appear automatically when their source action runs (e.g. Submit for Approval, Share, Invite). Trigger one of those on a source record to create a row.',
+                }),
             };
         case 'append-only':
             return {
                 icon: 'Archive',
-                title: 'No events recorded',
-                message: 'This is an immutable audit log. Rows are written by the platform when events occur — you can export the history but cannot create entries from here.',
+                title: t('list.managedBy.appendOnly.title', { defaultValue: 'No events recorded' }),
+                message: t('list.managedBy.appendOnly.message', {
+                    defaultValue: 'This is an immutable audit log. Rows are written by the platform when events occur — you can export the history but cannot create entries from here.',
+                }),
             };
         case 'better-auth':
             return {
                 icon: 'ShieldAlert',
-                title: 'No identity records',
-                message: 'Identity rows are managed by the authentication provider. Use the dedicated identity workflows (Invite User, Reset Password, …) to create new entries.',
+                title: t('list.managedBy.betterAuth.title', { defaultValue: 'No identity records' }),
+                message: t('list.managedBy.betterAuth.message', {
+                    defaultValue: 'Identity rows are managed by the authentication provider. Use the dedicated identity workflows (Invite User, Reset Password, …) to create new entries.',
+                }),
             };
         default:
             return undefined;

package/dist/utils/preferLocal.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ADR-0048 Phase 2 — prefer-local (container-scoped) metadata resolution.
+ *
+ * Two installed packages may legitimately ship the same bare name (e.g. a
+ * `page` named `home`) — the install-time namespace gate keeps their namespaces
+ * distinct, and resolution disambiguates them by container. When resolving a
+ * bare name we prefer the item owned by the *current* container (the active
+ * app's package), so a user inside `/apps/crm` sees crm's `home`, not whichever
+ * package's `home` happened to load first.
+ *
+ * Falls back to the first name match when the container owns no such item or
+ * its owning package is unknown (runtime/DB apps with no `_packageId`), so this
+ * never regresses the prior first-match behaviour.
+ */
+export declare function preferLocal<T extends {
+    name?: unknown;
+    _packageId?: unknown;
+}>(list: readonly T[] | undefined | null, name: string | undefined | null, ownerPackageId?: unknown): T | undefined;

package/dist/utils/preferLocal.js

@@ -0,0 +1,24 @@
+/**
+ * ADR-0048 Phase 2 — prefer-local (container-scoped) metadata resolution.
+ *
+ * Two installed packages may legitimately ship the same bare name (e.g. a
+ * `page` named `home`) — the install-time namespace gate keeps their namespaces
+ * distinct, and resolution disambiguates them by container. When resolving a
+ * bare name we prefer the item owned by the *current* container (the active
+ * app's package), so a user inside `/apps/crm` sees crm's `home`, not whichever
+ * package's `home` happened to load first.
+ *
+ * Falls back to the first name match when the container owns no such item or
+ * its owning package is unknown (runtime/DB apps with no `_packageId`), so this
+ * never regresses the prior first-match behaviour.
+ */
+export function preferLocal(list, name, ownerPackageId) {
+    if (!list || name == null)
+        return undefined;
+    if (ownerPackageId) {
+        const local = list.find((x) => x.name === name && x._packageId === ownerPackageId);
+        if (local)
+            return local;
+    }
+    return list.find((x) => x.name === name);
+}

package/dist/views/ActionConfirmDialog.d.ts

@@ -18,5 +18,5 @@ interface ActionConfirmDialogProps {
     state: ConfirmDialogState;
     onOpenChange: (open: boolean) => void;
 }
-export declare function ActionConfirmDialog({ state, onOpenChange }: ActionConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionConfirmDialog({ state, onOpenChange }: ActionConfirmDialogProps): import("react").JSX.Element;
 export {};

package/dist/views/ActionConfirmDialog.js

@@ -6,7 +6,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * confirmation dialog. Renders only when state.open is true.
  */
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
 export function ActionConfirmDialog({ state, onOpenChange }) {
+    const { t } = useObjectTranslation();
     const handleConfirm = () => {
         state.resolve?.(true);
         onOpenChange(false);
@@ -18,5 +20,5 @@ export function ActionConfirmDialog({ state, onOpenChange }) {
     return (_jsx(AlertDialog, { open: state.open, onOpenChange: (open) => {
             if (!open)
                 handleCancel();
-        }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: state.options?.title || 'Confirm Action' }), _jsx(AlertDialogDescription, { children: state.message })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: handleCancel, children: state.options?.cancelText || 'Cancel' }), _jsx(AlertDialogAction, { onClick: handleConfirm, children: state.options?.confirmText || 'Continue' })] })] }) }));
+        }, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: state.options?.title || t('actionConfirm.title') }), _jsx(AlertDialogDescription, { children: state.message })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { onClick: handleCancel, children: state.options?.cancelText || t('actionConfirm.cancel') }), _jsx(AlertDialogAction, { onClick: handleConfirm, children: state.options?.confirmText || t('actionConfirm.confirm') })] })] }) }));
 }

package/dist/views/ActionParamDialog.d.ts

@@ -13,11 +13,16 @@ import type { ActionParamDef } from '@object-ui/core';
 export interface ParamDialogState {
     open: boolean;
     params: ActionParamDef[];
+    /** Dialog title — defaults to the generic "Action parameters" label when
+     *  absent. Callers pass the action's own label (e.g. "Create environment")
+     *  so the dialog reads as the task, not a generic param prompt. */
+    title?: string;
+    description?: string;
     resolve?: (value: Record<string, any> | null) => void;
 }
 interface ActionParamDialogProps {
     state: ParamDialogState;
     onOpenChange: (open: boolean) => void;
 }
-export declare function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ActionParamDialog({ state, onOpenChange }: ActionParamDialogProps): import("react").JSX.Element;
 export {};

package/dist/views/ActionParamDialog.js

@@ -12,10 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useEffect } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, Input, Label, Textarea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Checkbox, } from '@object-ui/components';
-import { useObjectTranslation } from '@object-ui/i18n';
+import { useObjectTranslation, pickLocalized } from '@object-ui/i18n';
 import { LookupField } from '@object-ui/fields';
 export function ActionParamDialog({ state, onOpenChange }) {
-    const { t } = useObjectTranslation();
+    const { t, language } = useObjectTranslation();
     const [values, setValues] = useState({});
     const [errors, setErrors] = useState({});
     // Reset values when params change
@@ -69,7 +69,13 @@ export function ActionParamDialog({ state, onOpenChange }) {
     return (_jsx(Dialog, { open: state.open, onOpenChange: (open) => {
             if (!open)
                 handleCancel();
-        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('actionDialog.title') }), _jsx(DialogDescription, { children: t('actionDialog.description') })] }), _jsx("div", { className: "grid gap-4 py-4", children: state.params.map((param) => {
+        }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: state.title || t('actionDialog.title') }), _jsx(DialogDescription, { children: state.description || t('actionDialog.description') })] }), _jsx("div", { className: "grid gap-4 py-4", children: state.params.map((rawParam) => {
+                        const param = {
+                            ...rawParam,
+                            label: pickLocalized(rawParam.label, language),
+                            helpText: rawParam.helpText != null ? pickLocalized(rawParam.helpText, language) : rawParam.helpText,
+                            options: rawParam.options?.map((o) => ({ ...o, label: pickLocalized(o.label, language) })),
+                        };
                         const isBooleanParam = param.type === 'boolean' || param.type === 'checkbox';
                         // Boolean → render as inline checkbox row (label sits beside the
                         // control instead of above it; help text appears underneath).

package/dist/views/ActionResultDialog.d.ts

@@ -0,0 +1,13 @@
+import type { ResultDialogSpec } from '@object-ui/core';
+export interface ResultDialogState {
+    open: boolean;
+    spec?: ResultDialogSpec;
+    data?: unknown;
+    resolve?: () => void;
+}
+interface ActionResultDialogProps {
+    state: ResultDialogState;
+    onAcknowledge: () => void;
+}
+export declare function ActionResultDialog({ state, onAcknowledge }: ActionResultDialogProps): import("react").JSX.Element;
+export {};

package/dist/views/ActionResultDialog.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ActionResultDialog — One-shot reveal of an action's API response.
+ *
+ * Rendered when an action completes successfully AND its spec declares a
+ * `resultDialog`. Used for values the user MUST copy now because the
+ * server will not surface them again: 2FA TOTP URI + backup codes,
+ * freshly minted OAuth client_secret, regenerated recovery codes.
+ *
+ * Contract (mirrors `Action.resultDialog` in @objectstack/spec):
+ *   - `spec.fields[]` selects what to render. Each entry has a dot `path`
+ *     into `data` and an optional `format` (qrcode/code-list/secret/
+ *     text/json). When `fields` is omitted, the dialog renders the whole
+ *     payload as JSON.
+ *   - The dialog has NO close button — the user must click acknowledge.
+ *     This is the whole point: a toast would let them dismiss the value
+ *     before reading it.
+ *   - The handler installed by ObjectView/RecordDetailView is
+ *     promise-based, mirroring the ActionParamDialog pattern.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Button, } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { Copy, Eye, EyeOff, Check } from 'lucide-react';
+import { toCanvas } from 'qrcode';
+function readPath(root, path) {
+    if (root == null)
+        return undefined;
+    return path.split('.').reduce((acc, key) => {
+        if (acc == null)
+            return undefined;
+        return acc[key];
+    }, root);
+}
+export function ActionResultDialog({ state, onAcknowledge }) {
+    const { t } = useObjectTranslation();
+    const { spec, data } = state;
+    // Synthesise a single-field render plan when the action did not declare
+    // explicit fields — keeps the dialog body uniform.
+    const fields = useMemo(() => {
+        if (spec?.fields && spec.fields.length > 0)
+            return spec.fields;
+        return [{ path: '', label: undefined, format: spec?.format ?? 'json' }];
+    }, [spec]);
+    return (_jsx(Dialog, { open: state.open, 
+        // Block click-outside / Escape: the user must explicitly acknowledge.
+        onOpenChange: (open) => { if (open === false)
+            return; /* swallow */ }, children: _jsxs(DialogContent
+        // Block the X close button's intent too.
+        , { 
+            // Block the X close button's intent too.
+            onPointerDownOutside: (e) => e.preventDefault(), onEscapeKeyDown: (e) => e.preventDefault(), className: "max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: spec?.title || t('actions.resultDialog.defaultTitle') || 'Save this value now' }), spec?.description ? (_jsx(DialogDescription, { children: spec.description })) : null] }), _jsx("div", { className: "space-y-4 py-2", children: fields.map((field, idx) => (_jsx(ResultField, { field: field, value: field.path === '' ? data : readPath(data, field.path), defaultFormat: spec?.format }, `${field.path}-${idx}`))) }), _jsx(DialogFooter, { children: _jsx(Button, { onClick: onAcknowledge, children: spec?.acknowledge || t('actions.resultDialog.acknowledge') || 'I have saved this' }) })] }) }));
+}
+function ResultField({ field, value, defaultFormat, }) {
+    const format = field.format ?? defaultFormat ?? 'json';
+    const label = field.label;
+    // Type-guard each renderer rather than crash if the server returned an
+    // unexpected shape (e.g. format=qrcode but value is undefined). We
+    // degrade gracefully to JSON so the user can still recover the value.
+    const safeFormat = (() => {
+        if (format === 'qrcode' && typeof value !== 'string')
+            return 'json';
+        if (format === 'code-list' && !Array.isArray(value))
+            return 'json';
+        if ((format === 'secret' || format === 'text') && typeof value !== 'string')
+            return 'json';
+        return format;
+    })();
+    return (_jsxs("div", { className: "space-y-1.5", children: [label ? (_jsx("div", { className: "text-sm font-medium text-foreground/80", children: label })) : null, safeFormat === 'qrcode' ? _jsx(QrcodeBlock, { value: value }) : null, safeFormat === 'code-list' ? _jsx(CodeListBlock, { value: value }) : null, safeFormat === 'secret' ? _jsx(SecretBlock, { value: value }) : null, safeFormat === 'text' ? _jsx(TextBlock, { value: value }) : null, safeFormat === 'json' ? _jsx(JsonBlock, { value: value }) : null] }));
+}
+function useCopy(value) {
+    const [copied, setCopied] = useState(false);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const id = setTimeout(() => setCopied(false), 1500);
+        return () => clearTimeout(id);
+    }, [copied]);
+    const copy = async () => {
+        if (value == null)
+            return;
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+        }
+        catch {
+            // ignore — typically denied permission. The plaintext is already
+            // visible in the dialog so the user can manually copy.
+        }
+    };
+    return { copy, copied };
+}
+function CopyButton({ value, label }) {
+    const { copy, copied } = useCopy(value);
+    return (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: copy, children: [copied ? _jsx(Check, { className: "w-4 h-4" }) : _jsx(Copy, { className: "w-4 h-4" }), label ? _jsx("span", { className: "ml-2", children: label }) : null] }));
+}
+function QrcodeBlock({ value }) {
+    // QR codes for 2FA carry the shared secret. Render entirely client-side
+    // (toCanvas writes into a local <canvas>) — never round-trip to a third
+    // party. Falls back to plaintext if rendering fails (e.g. value too long
+    // for QR encoding).
+    const [error, setError] = useState(null);
+    const canvasRef = (node) => {
+        if (!node || !value)
+            return;
+        toCanvas(node, value, { width: 200, margin: 1 }, (err) => {
+            if (err)
+                setError(err.message);
+        });
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "flex justify-center rounded-md border bg-white p-3", children: error ? (_jsx("span", { className: "text-sm text-destructive", children: error })) : (_jsx("canvas", { ref: canvasRef })) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 truncate rounded bg-muted px-2 py-1 text-xs font-mono", children: value }), _jsx(CopyButton, { value: value })] })] }));
+}
+function CodeListBlock({ value }) {
+    const joined = value.join('\n');
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "rounded-md border bg-muted/40 p-2", children: _jsx("ul", { className: "space-y-1", children: value.map((code, i) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 rounded bg-background px-2 py-1 text-sm font-mono", children: code }), _jsx(CopyButton, { value: code })] }, `${i}-${code}`))) }) }), _jsx("div", { className: "flex justify-end", children: _jsx(CopyButton, { value: joined, label: "Copy all" }) })] }));
+}
+function SecretBlock({ value }) {
+    const [revealed, setRevealed] = useState(false);
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 rounded bg-muted px-2 py-1 text-sm font-mono break-all", children: revealed ? value : value.replace(/./g, '•') }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setRevealed((v) => !v), children: revealed ? _jsx(EyeOff, { className: "w-4 h-4" }) : _jsx(Eye, { className: "w-4 h-4" }) }), _jsx(CopyButton, { value: value })] }));
+}
+function TextBlock({ value }) {
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { className: "flex-1 rounded bg-muted px-2 py-1 text-sm font-mono break-all", children: value }), _jsx(CopyButton, { value: value })] }));
+}
+function JsonBlock({ value }) {
+    const text = useMemo(() => {
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
+        }
+    }, [value]);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsx("pre", { className: "max-h-80 overflow-auto rounded-md border bg-muted/40 p-3 text-xs font-mono", children: text }), _jsx("div", { className: "flex justify-end", children: _jsx(CopyButton, { value: text }) })] }));
+}

package/dist/views/ComponentNavView.d.ts

@@ -1,6 +1,19 @@
+/**
+ * ComponentNavView — route target for `<Route path="component/:ns/:name/*">`.
+ *
+ * Phase 3b: resolves the colon-joined registry key (e.g. `metadata:resource`)
+ * from `:ns/:name` URL segments, looks it up in the ComponentRegistry,
+ * and renders the matching component. Props are the union of the URL
+ * query string and any extra props passed by the parent route element.
+ *
+ * If no component is registered for the ref, we render a structured empty
+ * state that tells the operator which plugin is likely missing — much
+ * better than a blank screen or a thrown error.
+ */
+import React from 'react';
 export interface ComponentNavViewProps {
     /** Extra props injected by the parent route element (typically empty). */
     extraProps?: Record<string, unknown>;
 }
-export declare function ComponentNavView({ extraProps }?: ComponentNavViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ComponentNavView({ extraProps }?: ComponentNavViewProps): React.JSX.Element;
 export default ComponentNavView;

package/dist/views/CreateViewDialog.d.ts

@@ -41,4 +41,4 @@ export interface CreateViewDialogProps {
         [key: string]: any;
     };
 }
-export declare function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }: CreateViewDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }: CreateViewDialogProps): import("react").JSX.Element;

package/dist/views/DashboardConfigPanel.d.ts

@@ -0,0 +1,28 @@
+export interface DashboardConfigPanelProps<T extends Record<string, any> = Record<string, any>> {
+    /** Whether the panel is open. */
+    open: boolean;
+    /** Close callback. */
+    onClose: () => void;
+    /** The current dashboard definition (full nested spec Dashboard document). */
+    schema: T | null;
+    /** The id of the widget selected on the canvas, or null for dashboard level. */
+    selectedWidgetId: string | null;
+    /** Switch the selected widget (null returns to the dashboard-level panel). */
+    onSelectWidget: (id: string | null) => void;
+    /** Persist the current schema. */
+    onSave: (schema: T) => void;
+    /** Called on every edit so the host can drive a live preview / autosave. */
+    onChange: (schema: T) => void;
+    /** Remove the given widget (used by the widget-level header trash button). */
+    onRemoveWidget?: (id: string) => void;
+    /** Dashboard artifact name — the `:name` for the draft/publish chrome. */
+    name?: string;
+    /**
+     * Studio metadata client — drives the ADR-0034 draft/publish chrome
+     * ({@link RuntimeDraftBar}).
+     */
+    metadataClient?: any;
+    /** Called after a publish / discard so the host can refresh its read. */
+    onAfterChange?: () => void;
+}
+export declare function DashboardConfigPanel<T extends Record<string, any> = Record<string, any>>({ open, onClose, schema, selectedWidgetId, onSelectWidget, onSave, onChange, onRemoveWidget, name: artifactName, metadataClient, onAfterChange, }: DashboardConfigPanelProps<T>): import("react").JSX.Element | null;