@object-ui/app-shell 6.2.3 → 7.0.0

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;

package/dist/views/DashboardConfigPanel.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
+/**
+ * DashboardConfigPanel — the runtime DashboardView's right-rail
+ * "dashboard editor".
+ *
+ * MIGRATED: this single panel replaces BOTH legacy `plugin-dashboard`
+ * panels (the dashboard-level `DashboardConfigPanel` and the per-widget
+ * `WidgetConfigPanel`). Instead of the `buildWidgetSchema` /
+ * `ConfigPanelRenderer` engine it hosts the studio's spec-driven
+ * inspectors so the runtime and the metadata studio share ONE
+ * dashboard-editing surface:
+ *
+ *   - no widget selected → {@link DashboardDefaultInspector} (dashboard level)
+ *   - widget selected     → {@link DashboardWidgetInspector} (widget level)
+ *
+ * It lives in `app-shell` (next to the studio inspectors) rather than in
+ * `plugin-dashboard`: `app-shell` depends on `plugin-dashboard`, so hosting
+ * the inspectors here avoids the circular import a plugin-side panel would
+ * need.
+ *
+ * Unlike the legacy panel, this component is CONTROLLED: it holds no draft
+ * state of its own. Both inspectors edit the FULL nested dashboard `schema`
+ * (`{...,widgets:[{id,...}]}`) directly — the dashboard-level inspector via a
+ * shallow top-level `onPatch`, the widget inspector by addressing
+ * `schema.widgets` by `w.id`. Because the inspectors work on the spec-shaped
+ * draft, the runtime's old flatten / unflatten / extract adapters are gone.
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { Button } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { ArrowLeft, Trash2, X } from 'lucide-react';
+import { DashboardDefaultInspector } from './metadata-admin/inspectors/DashboardDefaultInspector';
+import { DashboardWidgetInspector } from './metadata-admin/inspectors/DashboardWidgetInspector';
+import { RuntimeDraftBar } from './RuntimeDraftBar';
+import { detectLocale } from './metadata-admin/i18n';
+export function DashboardConfigPanel({ open, onClose, schema, selectedWidgetId, onSelectWidget, onSave, onChange, onRemoveWidget, name: artifactName, metadataClient, onAfterChange, }) {
+    const { t } = useObjectTranslation();
+    const locale = useMemo(() => detectLocale(), []);
+    // Unsaved-edits flag — gates Publish (mirrors studio's "save first"). The
+    // panel unmounts on close, so this resets to false on each open.
+    const [dirty, setDirty] = useState(false);
+    // Bumped on save so the draft chrome surfaces the indicator immediately.
+    const [savedSignal, setSavedSignal] = useState(0);
+    // Controlled: merge an inspector patch into the current schema and bubble it
+    // back up. No local draft state — `schema` is the single source of truth.
+    const handlePatch = useCallback((patch) => {
+        setDirty(true);
+        onChange({ ...(schema ?? {}), ...patch });
+    }, [schema, onChange]);
+    // ADR-0034 (#1515): resume a pending draft into the editor on open
+    // (flag-ON only). The dashboard document IS the controlled schema, so push
+    // it up as a live edit (preview only — no save) and treat it as the clean
+    // baseline.
+    const handleResumeDraft = useCallback((body) => {
+        onChange(body);
+        setDirty(false);
+    }, [onChange]);
+    const handleSelectionChange = useCallback((sel) => {
+        onSelectWidget(sel && sel.kind === 'widget' ? sel.id : null);
+    }, [onSelectWidget]);
+    const widgets = Array.isArray(schema?.widgets) ? schema.widgets : [];
+    const selectedWidget = selectedWidgetId
+        ? widgets.find((w) => w?.id === selectedWidgetId)
+        : null;
+    if (!open)
+        return null;
+    const name = typeof schema?.name === 'string' ? schema.name : '';
+    const title = selectedWidget
+        ? t('widget.editor.title', { defaultValue: 'Edit widget' })
+        : t('dashboard.editor.title', { defaultValue: 'Edit dashboard' });
+    return (_jsxs("aside", { className: "hidden sm:flex w-[440px] shrink-0 flex-col border-l bg-background h-full", "data-testid": "dashboard-config-panel", role: "complementary", "aria-label": title, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b px-4 py-2.5 shrink-0", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [selectedWidget && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSelectWidget(null), className: "h-7 w-7 p-0", "aria-label": t('dashboard.editor.backToDashboard', {
+                                    defaultValue: 'Back to dashboard',
+                                }), title: t('dashboard.editor.backToDashboard', {
+                                    defaultValue: 'Back to dashboard',
+                                }), "data-testid": "dashboard-config-back", children: _jsx(ArrowLeft, { className: "h-4 w-4" }) })), _jsx("div", { className: "text-sm font-medium truncate", children: title })] }), _jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [selectedWidget && onRemoveWidget && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => onRemoveWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "aria-label": t('widget.editor.delete', { defaultValue: 'Delete widget' }), title: t('widget.editor.delete', { defaultValue: 'Delete widget' }), "data-testid": "widget-delete-button", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, className: "h-7 w-7 p-0", "aria-label": t('common.close', { defaultValue: 'Close' }), "data-testid": "dashboard-config-close", children: _jsx(X, { className: "h-4 w-4" }) })] })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: selectedWidget ? (_jsx(DashboardWidgetInspector, { type: "dashboard", name: name, draft: schema ?? {}, selection: { kind: 'widget', id: selectedWidgetId }, onPatch: handlePatch, onClearSelection: () => onSelectWidget(null), onSelectionChange: handleSelectionChange, readOnly: false, locale: locale })) : (_jsx(DashboardDefaultInspector, { type: "dashboard", name: name, draft: schema ?? {}, onPatch: handlePatch, onSelectionChange: handleSelectionChange, readOnly: false, locale: locale })) }), _jsxs("div", { "data-testid": "dashboard-config-footer", className: "flex items-center justify-end gap-2 border-t px-4 py-2.5 shrink-0", children: [_jsx(RuntimeDraftBar, { type: "dashboard", name: artifactName || name || undefined, metadataClient: metadataClient, dirty: dirty, onResume: handleResumeDraft, savedSignal: savedSignal, onAfterChange: onAfterChange }), _jsx(Button, { size: "sm", onClick: () => {
+                            onSave((schema ?? {}));
+                            setDirty(false);
+                            setSavedSignal((s) => s + 1);
+                        }, "data-testid": "dashboard-config-save", children: t('common.save', { defaultValue: 'Save' }) })] })] }));
+}

package/dist/views/DashboardView.d.ts

@@ -1,9 +1,10 @@
 /**
  * Dashboard View Component
  * Renders a dashboard based on the dashboardName parameter.
- * Edit mode shows an inline config panel (DashboardConfigPanel / WidgetConfigPanel)
- * on the right side, following the same pattern as ListView.
+ * Edit mode shows a single inline config panel (DashboardConfigPanel) on the
+ * right side that hosts the studio's dashboard / widget inspectors, following
+ * the same pattern as ReportView.
  */
 export declare function DashboardView({ dataSource }: {
     dataSource?: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;