@object-ui/app-shell 3.3.1 → 4.0.0

package/dist/utils/getIcon.js

@@ -2,23 +2,51 @@
  * Icon utilities
  *
  * Helpers for resolving Lucide icons by name.
+ *
+ * Implementation: instead of statically importing every icon (~1500
+ * components, ~568 KB raw / 140 KB gz), we wrap lucide-react's built-in
+ * `DynamicIcon` so each icon is fetched as its own tiny chunk on first use.
+ *
+ * The exported `getIcon(name)` API stays synchronous and returns a React
+ * component, preserving call sites that do `const Icon = getIcon(name); <Icon />`.
  */
-import * as LucideIcons from 'lucide-react';
+import React from 'react';
 import { Database } from 'lucide-react';
+// @ts-ignore - lucide-react has no `exports` field; subpath types live alongside dynamic.mjs
+import { DynamicIcon } from 'lucide-react/dynamic.mjs';
+/** Convert PascalCase / camelCase / mixed names to kebab-case for DynamicIcon. */
+function toKebab(name) {
+    if (name.includes('-'))
+        return name.toLowerCase();
+    return name
+        .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+        .toLowerCase();
+}
+const cache = new Map();
 /**
- * Resolve a Lucide icon by name (kebab-case or PascalCase)
- * Falls back to Database icon if not found
+ * Resolve a Lucide icon by name (kebab-case or PascalCase).
+ *
+ * Returns a React component that lazy-loads the underlying SVG icon on
+ * mount. Falls back to the `Database` icon (statically imported) when no
+ * `name` is given.
+ *
+ * The returned component is memoised per `name` so repeated calls with the
+ * same name yield the same component reference (stable for React.memo).
  */
 export function getIcon(name) {
     if (!name)
         return Database;
-    if (LucideIcons[name])
-        return LucideIcons[name];
-    const pascal = name
-        .split('-')
-        .map(p => p.charAt(0).toUpperCase() + p.slice(1))
-        .join('');
-    if (LucideIcons[pascal])
-        return LucideIcons[pascal];
-    return Database;
+    const cached = cache.get(name);
+    if (cached)
+        return cached;
+    const kebab = toKebab(name);
+    const Wrapped = (props) => React.createElement(DynamicIcon, {
+        name: kebab,
+        fallback: Database,
+        ...props,
+    });
+    Wrapped.displayName = `LucideIcon(${name})`;
+    cache.set(name, Wrapped);
+    return Wrapped;
 }

package/dist/views/CreateViewDialog.d.ts

@@ -0,0 +1,44 @@
+/**
+ * CreateViewDialog — Airtable-style "Create new view" modal.
+ *
+ * Step 1: User picks a view type from a visual grid of cards (icon + label
+ * + short description). Selection is highlighted.
+ * Step 2: For view types that need them, the user picks the required
+ * configuration fields (e.g. the group-by field for kanban, the start-date
+ * field for calendar/timeline/gantt, lat/lng for map, image for gallery).
+ *   The Create button stays disabled until every required field is set.
+ * Step 3: The user enters a name (required, defaults to "Grid 1" etc.).
+ *
+ * On submit, calls `onCreate({ type, label, [type]: {...required fields} })`.
+ * The parent is responsible for actually persisting the view (we keep this
+ * component pure — no dataSource coupling).
+ */
+export interface CreateViewDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Called with a fully-formed view config payload. Required type-specific
+     * fields are nested under their type key (e.g. `kanban.groupByField`),
+     * matching the @objectstack/spec NamedListView shape.
+     */
+    onCreate: (config: Record<string, any> & {
+        type: string;
+        label: string;
+    }) => void;
+    /** Used to suggest unique default names like "Grid 2" if "Grid 1" exists. */
+    existingLabels?: string[];
+    /** Restrict the available view types. Defaults to all built-in types. */
+    availableTypes?: string[];
+    /**
+     * Object definition. Provides the available fields used to populate the
+     * required field selectors (group-by, start-date, etc.). When omitted,
+     * required-field validation is skipped.
+     */
+    objectDef?: {
+        name: string;
+        label?: string;
+        fields?: Record<string, any>;
+        [key: string]: any;
+    };
+}
+export declare function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }: CreateViewDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/CreateViewDialog.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CreateViewDialog — Airtable-style "Create new view" modal.
+ *
+ * Step 1: User picks a view type from a visual grid of cards (icon + label
+ * + short description). Selection is highlighted.
+ * Step 2: For view types that need them, the user picks the required
+ * configuration fields (e.g. the group-by field for kanban, the start-date
+ * field for calendar/timeline/gantt, lat/lng for map, image for gallery).
+ *   The Create button stays disabled until every required field is set.
+ * Step 3: The user enters a name (required, defaults to "Grid 1" etc.).
+ *
+ * On submit, calls `onCreate({ type, label, [type]: {...required fields} })`.
+ * The parent is responsible for actually persisting the view (we keep this
+ * component pure — no dataSource coupling).
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Button, cn, } from '@object-ui/components';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { deriveFieldOptions } from '@object-ui/plugin-view';
+import { LayoutGrid, KanbanSquare, Calendar as CalendarIcon, Image as ImageIcon, GanttChartSquare, Clock, Map as MapIcon, BarChart3, AlertCircle, } from 'lucide-react';
+function buildViewTypeMeta(t) {
+    return [
+        { type: 'grid', icon: LayoutGrid, label: t('console.objectView.viewTypeGrid'), description: t('console.objectView.viewTypeGridDesc') },
+        { type: 'kanban', icon: KanbanSquare, label: t('console.objectView.viewTypeKanban'), description: t('console.objectView.viewTypeKanbanDesc') },
+        { type: 'calendar', icon: CalendarIcon, label: t('console.objectView.viewTypeCalendar'), description: t('console.objectView.viewTypeCalendarDesc') },
+        { type: 'gallery', icon: ImageIcon, label: t('console.objectView.viewTypeGallery'), description: t('console.objectView.viewTypeGalleryDesc') },
+        { type: 'timeline', icon: Clock, label: t('console.objectView.viewTypeTimeline'), description: t('console.objectView.viewTypeTimelineDesc') },
+        { type: 'gantt', icon: GanttChartSquare, label: t('console.objectView.viewTypeGantt'), description: t('console.objectView.viewTypeGanttDesc') },
+        { type: 'map', icon: MapIcon, label: t('console.objectView.viewTypeMap'), description: t('console.objectView.viewTypeMapDesc') },
+        { type: 'chart', icon: BarChart3, label: t('console.objectView.viewTypeChart'), description: t('console.objectView.viewTypeChartDesc') },
+    ];
+}
+/** Suggest a non-colliding default name like "Grid 1", "Grid 2", … */
+function suggestName(typeLabel, existing) {
+    for (let i = 1; i < 1000; i++) {
+        const candidate = `${typeLabel} ${i}`;
+        if (!existing.has(candidate))
+            return candidate;
+    }
+    return typeLabel;
+}
+const REQUIRED_FIELDS_BY_TYPE = {
+    kanban: [{ key: 'groupByField', i18nKey: 'console.objectView.groupByField', filter: (f) => f.type === 'select' || f.type === 'boolean' }],
+    calendar: [{ key: 'startDateField', i18nKey: 'console.objectView.startDateField', filter: (f) => f.type === 'date' }],
+    timeline: [{ key: 'dateField', i18nKey: 'console.objectView.dateField', filter: (f) => f.type === 'date' }],
+    gantt: [{ key: 'dateField', i18nKey: 'console.objectView.dateField', filter: (f) => f.type === 'date' }],
+    gallery: [{ key: 'imageField', i18nKey: 'console.objectView.imageField' /* no filter — accept any */ }],
+    map: [
+        { key: 'latitudeField', i18nKey: 'console.objectView.latitudeField', filter: (f) => f.type === 'number' },
+        { key: 'longitudeField', i18nKey: 'console.objectView.longitudeField', filter: (f) => f.type === 'number' },
+    ],
+    // grid + chart have no strictly required fields at create time
+};
+export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }) {
+    const { t } = useObjectTranslation();
+    const allTypes = useMemo(() => buildViewTypeMeta(t), [t]);
+    const types = useMemo(() => (availableTypes && availableTypes.length > 0
+        ? allTypes.filter(v => availableTypes.includes(v.type))
+        : allTypes), [allTypes, availableTypes]);
+    const existingSet = useMemo(() => new Set(existingLabels ?? []), [existingLabels]);
+    const fieldOptions = useMemo(() => (objectDef ? deriveFieldOptions(objectDef) : []), [objectDef]);
+    const [selectedType, setSelectedType] = useState(types[0]?.type ?? 'grid');
+    const [label, setLabel] = useState('');
+    const [touched, setTouched] = useState(false);
+    /** Map of `${type}.${fieldKey}` → selected field name. Per-type so switching
+     *  view types preserves the user's earlier choices in case they switch back. */
+    const [requiredFieldValues, setRequiredFieldValues] = useState({});
+    // Reset when the dialog opens, and re-suggest name whenever type changes
+    // (only while the user hasn't manually edited it yet).
+    useEffect(() => {
+        if (open) {
+            setSelectedType(types[0]?.type ?? 'grid');
+            setTouched(false);
+            setRequiredFieldValues({});
+        }
+    }, [open, types]);
+    useEffect(() => {
+        if (!touched) {
+            const meta = types.find(v => v.type === selectedType);
+            setLabel(suggestName(meta?.label ?? 'View', existingSet));
+        }
+    }, [selectedType, touched, types, existingSet]);
+    // Required fields for the currently selected type
+    const requiredFields = REQUIRED_FIELDS_BY_TYPE[selectedType] ?? [];
+    const getRequiredValue = (key) => requiredFieldValues[`${selectedType}.${key}`] ?? '';
+    const setRequiredValue = (key, value) => setRequiredFieldValues(prev => ({ ...prev, [`${selectedType}.${key}`]: value }));
+    const trimmed = label.trim();
+    const isDuplicate = trimmed.length > 0 && existingSet.has(trimmed);
+    const allRequiredFilled = requiredFields.every(f => getRequiredValue(f.key).length > 0);
+    const canSubmit = trimmed.length > 0 && !isDuplicate && allRequiredFilled;
+    // Auto-pick a sensible default for any required field when there's only
+    // one eligible option — saves the user a click. Runs whenever the type or
+    // available options change.
+    useEffect(() => {
+        if (requiredFields.length === 0 || fieldOptions.length === 0)
+            return;
+        requiredFields.forEach((rf) => {
+            if (getRequiredValue(rf.key).length > 0)
+                return;
+            const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
+            if (eligible.length === 1)
+                setRequiredValue(rf.key, eligible[0].value);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedType, fieldOptions]);
+    const handleSubmit = () => {
+        if (!canSubmit)
+            return;
+        // Bundle required fields under their type-specific sub-key, matching the
+        // NamedListView spec (e.g. { type: "kanban", kanban: { groupByField: ... } })
+        const subConfig = {};
+        requiredFields.forEach((rf) => {
+            const v = getRequiredValue(rf.key);
+            if (v)
+                subConfig[rf.key] = v;
+        });
+        const payload = {
+            type: selectedType,
+            label: trimmed,
+        };
+        if (Object.keys(subConfig).length > 0) {
+            payload[selectedType] = subConfig;
+        }
+        onCreate(payload);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[560px]", "data-testid": "create-view-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('console.objectView.createView') }), _jsx(DialogDescription, { children: t('console.objectView.createViewDesc') })] }), _jsx("div", { className: "grid grid-cols-4 gap-2 py-2", "data-testid": "create-view-type-grid", children: types.map(({ type, label: typeLabel, description, icon: Icon }) => {
+                        const selected = type === selectedType;
+                        return (_jsxs("button", { type: "button", "data-testid": `create-view-type-${type}`, "aria-pressed": selected, onClick: () => setSelectedType(type), className: cn('group flex flex-col items-start gap-1 rounded-lg border bg-background p-3 text-left transition-colors', 'hover:border-primary/60 hover:bg-accent/40', selected
+                                ? 'border-primary ring-2 ring-primary/30 bg-accent/40'
+                                : 'border-border'), children: [_jsx(Icon, { className: cn('h-5 w-5', selected ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground') }), _jsx("div", { className: "text-xs font-medium leading-tight", children: typeLabel }), _jsx("div", { className: "text-[10px] leading-tight text-muted-foreground line-clamp-2", children: description })] }, type));
+                    }) }), requiredFields.length > 0 && (_jsx("div", { className: "space-y-2 rounded-md border border-dashed bg-muted/30 p-3", "data-testid": "create-view-required-fields", children: requiredFields.map((rf) => {
+                        const selectedFieldValue = getRequiredValue(rf.key);
+                        const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
+                        const noEligible = fieldOptions.length > 0 && eligible.length === 0;
+                        return (_jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: `create-view-required-${rf.key}`, className: "text-xs font-medium", children: [t(rf.i18nKey), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsxs("select", { id: `create-view-required-${rf.key}`, "data-testid": `create-view-required-${rf.key}`, value: selectedFieldValue, onChange: (e) => setRequiredValue(rf.key, e.target.value), disabled: noEligible, className: cn('h-9 w-full rounded-md border bg-background px-2 text-xs', selectedFieldValue ? 'border-input' : 'border-input'), children: [_jsx("option", { value: "", children: t('console.objectView.selectField') }), eligible.map(f => (_jsx("option", { value: f.value, children: f.label }, f.value)))] }), noEligible && (_jsxs("p", { className: "flex items-center gap-1 text-[11px] text-destructive", "data-testid": `create-view-error-no-field-${rf.key}`, children: [_jsx(AlertCircle, { className: "h-3 w-3" }), t('console.objectView.noEligibleFieldForType')] }))] }, rf.key));
+                    }) })), _jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: "create-view-name-input", className: "text-xs font-medium", children: [t('console.objectView.title'), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsx(Input, { id: "create-view-name-input", "data-testid": "create-view-name-input", autoFocus: true, value: label, onChange: (e) => { setLabel(e.target.value); setTouched(true); }, onKeyDown: (e) => { if (e.key === 'Enter' && canSubmit)
+                                handleSubmit(); }, placeholder: t('console.objectView.newView'), className: "h-9" }), isDuplicate && (_jsx("p", { className: "text-[11px] text-destructive", "data-testid": "create-view-error-duplicate", children: t('console.objectView.duplicateViewName') }))] }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), "data-testid": "create-view-cancel", children: t('console.objectView.cancel') }), _jsx(Button, { type: "button", disabled: !canSubmit, onClick: handleSubmit, "data-testid": "create-view-submit", children: t('console.objectView.create') })] })] }) }));
+}

package/dist/views/DashboardView.js

@@ -17,7 +17,7 @@ import { SkeletonDashboard } from '../skeletons';
 import { useMetadata } from '../providers/MetadataProvider';
 import { resolveI18nLabel } from '../utils';
 import { useAdapter } from '../providers/AdapterProvider';
-import { useObjectTranslation } from '@object-ui/i18n';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 // ---------------------------------------------------------------------------
 // Widget type palette for the add-widget toolbar
 // ---------------------------------------------------------------------------
@@ -105,6 +105,7 @@ export function DashboardView({ dataSource }) {
     const { showDebug } = useMetadataInspector();
     const adapter = useAdapter();
     const { t } = useObjectTranslation();
+    const { dashboardLabel, dashboardDescription } = useObjectLabel();
     const [isLoading, setIsLoading] = useState(true);
     const [configPanelOpen, setConfigPanelOpen] = useState(false);
     const [selectedWidgetId, setSelectedWidgetId] = useState(null);
@@ -120,13 +121,28 @@ export function DashboardView({ dataSource }) {
         });
     }, []);
     const modalHandler = useCallback((schema) => new Promise((resolve) => {
-        // Normalize string schema (e.g. action.target = 'opportunity') to a
-        // ModalForm-compatible descriptor so header `modal` actions like
-        // { actionType: 'modal', actionUrl: 'opportunity' } open the create
-        // form for that object.
-        const normalized = typeof schema === 'string'
-            ? { objectName: schema, mode: 'create' }
-            : schema;
+        // Normalize string schema (e.g. action.target = 'opportunity' or
+        // 'create_opportunity') to a ModalForm-compatible descriptor so header
+        // `modal` actions like { actionType: 'modal', actionUrl: 'create_opportunity' }
+        // open the create form for that object. Supports the conventional
+        // `<verb>_<object>` form (create_/new_/add_/edit_/update_) emitted by
+        // server-driven dashboard schemas.
+        let normalized;
+        if (typeof schema === 'string') {
+            const m = schema.match(/^(create|new|add|edit|update)_(.+)$/);
+            if (m) {
+                const verb = m[1];
+                const objectName = m[2];
+                const mode = verb === 'edit' || verb === 'update' ? 'edit' : 'create';
+                normalized = { objectName, mode };
+            }
+            else {
+                normalized = { objectName: schema, mode: 'create' };
+            }
+        }
+        else {
+            normalized = schema;
+        }
         setModalState({ schema: normalized, resolve });
     }), []);
     const scriptHandlers = useMemo(() => ({
@@ -336,7 +352,13 @@ export function DashboardView({ dataSource }) {
         return (_jsx("div", { className: "h-full flex items-center justify-center p-8", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(LayoutDashboard, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Dashboard Not Found" }), _jsxs(EmptyDescription, { children: ["The dashboard \"", dashboardName, "\" could not be found. It may have been removed or renamed."] })] }) }));
     }
     const previewSchema = editSchema || dashboard;
-    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: resolveI18nLabel(dashboard.label, t) || dashboard.name }), dashboard.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: resolveI18nLabel(dashboard.description, t) }))] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), "Edit"] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, modalHandler: modalHandler, scriptHandlers: scriptHandlers }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
+    return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", children: [_jsxs("div", { className: "flex flex-col sm:flex-row justify-between sm:items-center gap-3 sm:gap-4 p-4 sm:p-6 border-b shrink-0", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "text-lg sm:text-xl md:text-2xl font-bold tracking-tight truncate", children: dashboardLabel({ name: dashboard.name, label: resolveI18nLabel(dashboard.label, t) }) || dashboard.name }), (() => {
+                                const desc = dashboardDescription({
+                                    name: dashboard.name,
+                                    description: resolveI18nLabel(dashboard.description, t),
+                                });
+                                return desc ? (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: desc })) : null;
+                            })()] }), _jsxs("div", { className: "shrink-0 flex items-center gap-1.5", children: [configPanelOpen && (_jsx("div", { className: "flex items-center gap-1 mr-2", role: "toolbar", "aria-label": "Add widgets", "data-testid": "dashboard-widget-toolbar", children: WIDGET_TYPES.map(({ type, label, Icon }) => (_jsxs("button", { type: "button", "data-testid": `dashboard-add-${type}`, onClick: () => addWidget(type), className: "inline-flex items-center gap-1 rounded-md border border-input bg-background px-2 py-1.5 text-[11px] font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: `Add ${label}`, "aria-label": `Add ${label} widget`, children: [_jsx(Plus, { className: "h-3 w-3" }), _jsx(Icon, { className: "h-3 w-3" })] }, type))) })), _jsxs("button", { type: "button", onClick: handleOpenConfigPanel, className: "inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm hover:bg-accent hover:text-accent-foreground", "data-testid": "dashboard-edit-button", children: [_jsx(Pencil, { className: "h-3.5 w-3.5" }), t('common.edit', { defaultValue: 'Edit' })] })] })] }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-col sm:flex-row relative", children: [_jsx("div", { className: "flex-1 min-w-0 overflow-auto p-2 sm:p-4 md:p-6", children: _jsx(DashboardRenderer, { schema: previewSchema, dataSource: dataSource, designMode: configPanelOpen, selectedWidgetId: selectedWidgetId, onWidgetClick: setSelectedWidgetId, modalHandler: modalHandler, scriptHandlers: scriptHandlers }) }), selectedWidget ? (_jsx(WidgetConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: widgetConfig, onSave: handleWidgetConfigSave, onFieldChange: handleWidgetFieldChange, availableObjects: availableObjects, availableFields: availableFields, headerExtra: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => removeWidget(selectedWidgetId), className: "h-7 w-7 p-0 text-destructive hover:text-destructive", "data-testid": "widget-delete-button", title: "Delete widget", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }, selectedWidgetId)) : (_jsx(DashboardConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: dashboardConfig, onSave: handleDashboardConfigSave, onFieldChange: handleDashboardFieldChange })), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Dashboard Configuration', data: previewSchema }] })] }), modalState && modalState.schema?.objectName ? (_jsx(ModalForm, { schema: {
                     type: 'object-form',
                     formType: 'modal',
                     objectName: modalState.schema.objectName,

package/dist/views/ObjectView.d.ts

@@ -8,7 +8,4 @@
  * - useObjectActions for toolbar create button
  * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
  */
-import '@object-ui/plugin-grid';
-import '@object-ui/plugin-kanban';
-import '@object-ui/plugin-calendar';
 export declare function ObjectView({ dataSource, objects, onEdit }: any): import("react/jsx-runtime").JSX.Element;