@object-ui/app-shell 4.0.6 → 4.0.8

package/dist/views/RecordDetailView.js

@@ -12,7 +12,7 @@ import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { PresenceAvatars } from '@object-ui/collaboration';
 import { useAuth, createAuthenticatedFetch } from '@object-ui/auth';
-import { ActionProvider, useObjectTranslation } from '@object-ui/react';
+import { ActionProvider, useObjectTranslation, useObjectLabel } from '@object-ui/react';
 import { toast } from 'sonner';
 import { Database, Users } from 'lucide-react';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
@@ -23,11 +23,12 @@ import { useRecordBreadcrumbTitle } from '../context/NavigationContext';
 import { getRecordDisplayName } from '../utils';
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 export function RecordDetailView({ dataSource, objects, onEdit }) {
-    const { objectName, recordId } = useParams();
+    const { appName, objectName, recordId } = useParams();
     const { showDebug } = useMetadataInspector();
     const { user } = useAuth();
     const navigate = useNavigate();
     const { t } = useObjectTranslation();
+    const { objectLabel, viewLabel: _vLabel, sectionLabel, actionLabel, actionConfirm, actionSuccess } = useObjectLabel();
     const [isLoading, setIsLoading] = useState(true);
     const [feedItems, setFeedItems] = useState([]);
     const [recordViewers, setRecordViewers] = useState([]);
@@ -368,7 +369,7 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         const formSections = objectDef.views?.form?.sections;
         const sections = formSections && formSections.length > 0
             ? formSections.map((sec) => ({
-                title: sec.title,
+                title: sec.name ? sectionLabel(objectDef.name, sec.name, sec.title || sec.name) : sec.title,
                 collapsible: sec.collapsible,
                 defaultCollapsed: sec.defaultCollapsed,
                 fields: (sec.fields || []).map((f) => {
@@ -423,7 +424,16 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
                     return false;
                 seen.add(a.name);
                 return true;
-            });
+            }).map((a) => ({
+                ...a,
+                label: actionLabel(objectDef.name, a.name, a.label || a.name),
+                ...(a.confirmText !== undefined && {
+                    confirmText: actionConfirm(objectDef.name, a.name, a.confirmText),
+                }),
+                ...(a.successMessage !== undefined && {
+                    successMessage: actionSuccess(objectDef.name, a.name, a.successMessage),
+                }),
+            }));
         })();
         // Build highlightFields: exclusively from objectDef metadata (no hardcoded fallback)
         const highlightFields = objectDef.views?.detail?.highlightFields ?? [];
@@ -432,16 +442,88 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
         // Build related entries from reverse-reference child objects.
         // `referenceField` is the FK field on the child pointing back to this
         // record — passed so the related-list renderer can hide the redundant
-        // parent-ID column.
+        // parent-ID column. Each entry carries action handlers that the renderer
+        // surfaces as header `+ New` / `View All` buttons and per-row Edit /
+        // Delete controls.
+        const baseAppUrl = appName ? `/apps/${appName}` : '';
         const related = childRelations.map(({ childObject, childLabel, referenceField }) => {
             const childObjectDef = objects.find((o) => o.name === childObject);
+            const parentId = pureRecordId || '';
+            const localizedTitle = childObjectDef
+                ? objectLabel({ name: childObjectDef.name, label: childObjectDef.label || childLabel })
+                : childLabel;
+            const buildNewUrl = () => {
+                const qs = new URLSearchParams({ [referenceField]: parentId }).toString();
+                return `${baseAppUrl}/${childObject}/new${qs ? `?${qs}` : ''}`;
+            };
+            const buildListUrl = () => {
+                const qs = new URLSearchParams({
+                    [`filter[${referenceField}]`]: parentId,
+                }).toString();
+                return `${baseAppUrl}/${childObject}${qs ? `?${qs}` : ''}`;
+            };
+            const buildEditUrl = (row) => {
+                const rid = row?.id || row?._id;
+                if (!rid)
+                    return null;
+                return `${baseAppUrl}/${childObject}/record/${encodeURIComponent(String(rid))}/edit`;
+            };
+            const buildRecordUrl = (row) => {
+                const rid = row?.id || row?._id;
+                if (!rid)
+                    return null;
+                return `${baseAppUrl}/${childObject}/record/${encodeURIComponent(String(rid))}`;
+            };
+            const onNew = baseAppUrl
+                ? () => navigate(buildNewUrl())
+                : undefined;
+            const onViewAll = baseAppUrl
+                ? () => navigate(buildListUrl())
+                : undefined;
+            const onRowClick = baseAppUrl
+                ? (row) => {
+                    const url = buildRecordUrl(row);
+                    if (url)
+                        navigate(url);
+                }
+                : undefined;
+            const onRowEdit = baseAppUrl
+                ? (row) => {
+                    const url = buildEditUrl(row);
+                    if (url)
+                        navigate(url);
+                }
+                : undefined;
+            const onRowDelete = dataSource && parentId
+                ? async (row) => {
+                    const rid = row?.id || row?._id;
+                    if (!rid)
+                        return;
+                    try {
+                        await dataSource.delete(childObject, rid);
+                        toast.success(t('detail.deleteSuccess', { defaultValue: 'Deleted' }));
+                        setChildRelatedData((prev) => ({
+                            ...prev,
+                            [childObject]: (prev[childObject] || []).filter((r) => (r.id || r._id) !== rid),
+                        }));
+                    }
+                    catch (err) {
+                        toast.error(err?.message || t('detail.deleteError', { defaultValue: 'Delete failed' }));
+                    }
+                }
+                : undefined;
             return {
-                title: childLabel,
+                title: localizedTitle,
                 type: 'table',
                 api: childObject,
                 data: childRelatedData[childObject] || [],
                 referenceField,
                 icon: childObjectDef?.icon,
+                onNew,
+                onViewAll,
+                onRowClick,
+                onRowEdit,
+                onRowDelete,
             };
         });
         return {
@@ -468,14 +550,14 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
             }),
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey]);
+    }, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey, appName, navigate, dataSource, t, objectLabel, objects]);
     if (isLoading) {
         return _jsx(SkeletonDetail, {});
     }
     if (!objectDef) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", 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(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Object Not Found" }), _jsxs(EmptyDescription, { children: ["Object \"", objectName, "\" definition missing. Check your configuration or navigate back to select a valid object."] })] }) }));
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", 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(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.objectNotFound') }), _jsx(EmptyDescription, { children: t('empty.objectNotFoundDescription', { name: objectName }) })] }) }));
     }
-    return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsx("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: recordViewers.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", title: "Users viewing this record", children: [_jsx(Users, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx(PresenceAvatars, { users: recordViewers, size: "sm", maxVisible: 4, showStatus: true })] })) }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsx("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: _jsx(ActionProvider, { context: { record: {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectDef.label, onDataLoaded: (record) => {
+    return (_jsxs("div", { className: "h-full bg-background overflow-hidden flex flex-col relative", children: [_jsx("div", { className: "absolute top-2 sm:top-4 right-2 sm:right-4 z-50 flex items-center gap-2", children: recordViewers.length > 0 && (_jsxs("div", { className: "flex items-center gap-1.5", title: t('recordDetail.viewersTooltip'), children: [_jsx(Users, { className: "h-3.5 w-3.5 text-muted-foreground" }), _jsx(PresenceAvatars, { users: recordViewers, size: "sm", maxVisible: 4, showStatus: true })] })) }), _jsxs("div", { className: "flex-1 overflow-hidden flex flex-row", children: [_jsx("div", { className: "flex-1 overflow-auto p-3 sm:p-4 lg:p-6 scroll-pb-48", children: _jsx(ActionProvider, { context: { record: {}, objectName, user: currentUser }, onConfirm: confirmHandler, onToast: toastHandler, onNavigate: navigateHandler, onParamCollection: paramCollectionHandler, handlers: { api: apiHandler, flow: flowHandler, script: serverActionHandler, modal: serverActionHandler }, children: _jsx(DetailView, { schema: detailSchema, dataSource: dataSource, objectLabel: objectLabel({ name: objectDef.name, label: objectDef.label }), onDataLoaded: (record) => {
                                     if (!record || typeof record !== 'object')
                                         return;
                                     // Resolve the same way DetailView's header does, so the

package/dist/views/RecordFormPage.js

@@ -29,7 +29,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module views/RecordFormPage
  */
 import { useCallback, useMemo } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams, Link } from 'react-router-dom';
 import { ObjectForm } from '@object-ui/plugin-form';
 import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { ArrowLeft, Database } from 'lucide-react';
@@ -52,11 +52,29 @@ import { ExpressionEvaluator } from '@object-ui/core';
 export function RecordFormPage({ mode }) {
     const { appName, objectName, recordId } = useParams();
     const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
     const dataSource = useAdapter();
     const { objects, loading: metadataLoading } = useMetadata();
     const { t } = useObjectTranslation();
     const { objectLabel } = useObjectLabel();
     const { user } = useAuth();
+    /**
+     * Query-string prefills for create mode. Used by related-list "+ New"
+     * buttons that pass the parent record id as a `<referenceField>=<id>`
+     * pair so the new child record is auto-linked back to the parent.
+     * Stable identity: only changes when the actual search string changes.
+     */
+    const prefillValues = useMemo(() => {
+        if (mode !== 'create')
+            return undefined;
+        const entries = [];
+        for (const [k, v] of searchParams.entries()) {
+            if (k && v)
+                entries.push([k, v]);
+        }
+        return entries.length > 0 ? Object.fromEntries(entries) : undefined;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [mode, searchParams.toString()]);
     const objectDef = useMemo(() => objects.find((o) => o.name === objectName), [objects, objectName]);
     const baseUrl = `/apps/${appName}`;
     const objectListUrl = `${baseUrl}/${objectName}`;
@@ -141,7 +159,7 @@ export function RecordFormPage({ mode }) {
         return _jsx(SkeletonDetail, {});
     }
     if (!objectDef) {
-        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", 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(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Object Not Found" }), _jsxs(EmptyDescription, { children: ["Object \"", objectName, "\" definition missing. Check your configuration or navigate back to select a valid object."] }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back"] }) })] }) }));
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", 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(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.objectNotFound') }), _jsx(EmptyDescription, { children: t('empty.objectNotFoundDescription', { name: objectName }) }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), t('empty.back')] }) })] }) }));
     }
     return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
                                 type: 'object-form',
@@ -149,6 +167,7 @@ export function RecordFormPage({ mode }) {
                                 objectName: objectDef.name,
                                 mode,
                                 recordId: mode === 'edit' ? recordId : undefined,
+                                ...(prefillValues && { initialValues: prefillValues }),
                                 title: pageTitle,
                                 description: mode === 'create'
                                     ? t('form.createDescription', {

package/dist/views/ReportView.js

@@ -5,6 +5,7 @@ const ReportViewer = lazy(() => import('@object-ui/plugin-report').then((m) => (
 const ReportConfigPanel = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportConfigPanel })));
 import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
 import { Pencil, BarChart3, Loader2 } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { useMetadata } from '../providers/MetadataProvider';
 import { useAdapter } from '../providers/AdapterProvider';
@@ -20,6 +21,7 @@ const FALLBACK_FIELDS = [
     { value: 'amount', label: 'Amount', type: 'number' },
 ];
 export function ReportView({ dataSource }) {
+    const { t } = useObjectTranslation();
     const { reportName } = useParams();
     const { showDebug } = useMetadataInspector();
     const adapter = useAdapter();
@@ -194,7 +196,7 @@ export function ReportView({ dataSource }) {
     }
     if (!initialReport || !reportData) {
         if (!loading && !initialReport) {
-            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(BarChart3, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Report Not Found" }), _jsxs(EmptyDescription, { children: ["The report \"", reportName, "\" could not be found. It may have been removed or renamed."] })] }) }));
+            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(BarChart3, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('empty.reportNotFound') }), _jsx(EmptyDescription, { children: t('empty.reportNotFoundDescription', { name: reportName }) })] }) }));
         }
         return (_jsx("div", { className: "h-full flex items-center justify-center p-8", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }));
     }
@@ -204,22 +206,66 @@ export function ReportView({ dataSource }) {
     // Map @objectstack/spec report format to @object-ui/types ReportSchema:
     //   - 'label' → 'title'
     //   - 'columns' (with 'field') → 'fields' (with 'name') + auto-generate 'sections'
+    //   - Hydrate type/options/referenceTo from the bound object's field metadata
+    //     so the type-aware cell renderer can show select badges, lookup links,
+    //     boolean ✓/✗, email/url/phone links, etc. instead of raw values.
     const mapReportForViewer = (src) => {
         const mapped = { ...src };
         if (!mapped.title && mapped.label) {
             mapped.title = mapped.label;
         }
+        // Build a lookup of object-field metadata to hydrate column type info.
+        const objName = mapped.objectName || mapped.dataSource?.object || mapped.dataSource?.resource;
+        const objDef = objName ? objects?.find((o) => o.name === objName) : null;
+        const objFieldsArr = Array.isArray(objDef?.fields)
+            ? objDef.fields
+            : objDef?.fields
+                ? Object.entries(objDef.fields).map(([name, def]) => ({ name, ...def }))
+                : [];
+        const objFieldMap = {};
+        for (const f of objFieldsArr) {
+            if (f && f.name)
+                objFieldMap[f.name] = f;
+        }
+        const hydrate = (col) => {
+            const name = col.name || col.field;
+            const meta = name ? objFieldMap[name] : undefined;
+            if (!meta)
+                return col;
+            // Author-provided values win; only fill in what's missing.
+            const out = { ...col };
+            if (out.type === undefined && meta.type !== undefined)
+                out.type = meta.type;
+            if (out.options === undefined && Array.isArray(meta.options))
+                out.options = meta.options;
+            if (out.referenceTo === undefined) {
+                const ref = meta.referenceTo || meta.reference?.to || meta.target;
+                if (ref)
+                    out.referenceTo = ref;
+            }
+            if (out.label === undefined && meta.label)
+                out.label = meta.label;
+            return out;
+        };
         // Map spec 'columns' (field/label/aggregate) → ReportSchema 'fields' (name/label/aggregation)
         if (!mapped.fields && Array.isArray(mapped.columns)) {
-            mapped.fields = mapped.columns.map((col) => ({
-                name: col.field || col.name,
-                label: col.label,
-                type: col.type,
-                format: col.format,
-                renderAs: col.renderAs,
-                colorMap: col.colorMap,
-                ...(col.aggregate ? { aggregation: col.aggregate, showInSummary: true } : {}),
-            }));
+            mapped.fields = mapped.columns.map((col) => {
+                const hydrated = hydrate(col);
+                return {
+                    name: hydrated.field || hydrated.name,
+                    label: hydrated.label,
+                    type: hydrated.type,
+                    options: hydrated.options,
+                    referenceTo: hydrated.referenceTo,
+                    format: hydrated.format,
+                    renderAs: hydrated.renderAs,
+                    colorMap: hydrated.colorMap,
+                    ...(hydrated.aggregate ? { aggregation: hydrated.aggregate, showInSummary: true } : {}),
+                };
+            });
+        }
+        else if (Array.isArray(mapped.fields)) {
+            mapped.fields = mapped.fields.map(hydrate);
         }
         // Always regenerate sections from current fields so that live config
         // changes (e.g. field picker updates) are immediately reflected in
@@ -227,7 +273,8 @@ export function ReportView({ dataSource }) {
         // did not update the rendered report.
         if (mapped.fields && Array.isArray(mapped.fields) && mapped.fields.length > 0) {
             const hasSummaryFields = mapped.fields.some((f) => f.showInSummary || f.aggregation);
-            const reportType = mapped.reportType || 'tabular';
+            // Spec key is `type`; legacy renderer used `reportType`. Accept either.
+            const reportType = mapped.type || mapped.reportType || 'tabular';
             const sections = [];
             if (reportType === 'summary' || hasSummaryFields) {
                 sections.push({ type: 'summary', title: 'Key Metrics' });
@@ -239,27 +286,34 @@ export function ReportView({ dataSource }) {
                     name: f.name,
                     label: f.label,
                     type: f.type,
+                    options: f.options,
+                    referenceTo: f.referenceTo,
                     format: f.format,
                     renderAs: f.renderAs,
                     colorMap: f.colorMap,
                 })),
             });
-            // Generate chart section from chartConfig if configured
-            if (mapped.chartConfig?.chartType) {
+            // Generate chart section from chart config if configured.
+            // Spec keys: type / xAxis / yAxis. Legacy: chartType / xAxisField / yAxisFields[0].
+            const chartCfg = mapped.chart || mapped.chartConfig;
+            const chartTypeVal = chartCfg?.type || chartCfg?.chartType;
+            if (chartTypeVal) {
+                const xField = chartCfg.xAxis || chartCfg.xAxisField;
+                const yField = chartCfg.yAxis || chartCfg.yAxisFields?.[0];
                 sections.push({
                     type: 'chart',
                     title: 'Chart',
                     chart: {
                         type: 'chart',
-                        chartType: mapped.chartConfig.chartType,
-                        xAxisField: mapped.chartConfig.xAxisField,
-                        yAxisFields: mapped.chartConfig.yAxisFields,
+                        chartType: chartTypeVal,
+                        xAxisField: xField,
+                        yAxisFields: yField ? [yField] : chartCfg.yAxisFields,
                     },
                 });
             }
             // Preserve any user-defined chart sections from the original schema
             if (Array.isArray(src.sections)) {
-                const chartSections = src.sections.filter((s) => s.type === 'chart' && !mapped.chartConfig?.chartType);
+                const chartSections = src.sections.filter((s) => s.type === 'chart' && !chartTypeVal);
                 sections.push(...chartSections);
             }
             mapped.sections = sections;

package/dist/views/SearchResultsPage.js

@@ -11,6 +11,7 @@ import { useState, useMemo } from 'react';
 import { useSearchParams, Link, useParams } from 'react-router-dom';
 import { Input, Card, CardContent, Badge, } from '@object-ui/components';
 import { Search, Database, LayoutDashboard, FileText, BarChart3, ArrowLeft, } from 'lucide-react';
+import { useObjectTranslation } from '@object-ui/i18n';
 import { useMetadata } from '../providers/MetadataProvider';
 /** Flatten nested navigation groups into a flat list of leaf items */
 function flattenNavigation(items) {
@@ -38,6 +39,7 @@ const TYPE_COLORS = {
     report: 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200',
 };
 export function SearchResultsPage() {
+    const { t } = useObjectTranslation();
     const { appName } = useParams();
     const [searchParams, setSearchParams] = useSearchParams();
     const queryParam = searchParams.get('q') || '';
@@ -95,13 +97,16 @@ export function SearchResultsPage() {
         }
         return groups;
     }, [results]);
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6 max-w-4xl mx-auto", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Link, { to: baseUrl, className: "flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), "Back"] }), _jsx("h1", { className: "text-xl font-semibold", children: "Search" })] }), _jsxs("div", { className: "relative", children: [_jsx("label", { htmlFor: "search-results-input", className: "sr-only", children: "Search objects, dashboards, pages, reports" }), _jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "search-results-input", value: query, onChange: (e) => handleSearch(e.target.value), placeholder: "Search objects, dashboards, pages, reports...", className: "pl-10 h-11 text-base", autoFocus: true })] }), _jsx("div", { className: "text-sm text-muted-foreground", children: query.trim()
-                    ? `${results.length} result${results.length !== 1 ? 's' : ''} for "${query}"`
-                    : `${allItems.length} items available` }), results.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Search, { className: "h-12 w-12 text-muted-foreground/30 mb-4" }), _jsx("p", { className: "text-lg font-medium text-muted-foreground", children: "No results found" }), _jsx("p", { className: "text-sm text-muted-foreground/80 mt-1", children: "Try adjusting your search terms" })] })) : (_jsx("div", { className: "space-y-6", children: Object.entries(grouped).map(([type, items]) => {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4 sm:p-6 max-w-4xl mx-auto", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs(Link, { to: baseUrl, className: "flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground transition-colors", children: [_jsx(ArrowLeft, { className: "h-4 w-4" }), t('search.back')] }), _jsx("h1", { className: "text-xl font-semibold", children: t('search.title') })] }), _jsxs("div", { className: "relative", children: [_jsx("label", { htmlFor: "search-results-input", className: "sr-only", children: t('search.placeholder') }), _jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", "aria-hidden": "true" }), _jsx(Input, { id: "search-results-input", value: query, onChange: (e) => handleSearch(e.target.value), placeholder: t('search.placeholder'), className: "pl-10 h-11 text-base", autoFocus: true })] }), _jsx("div", { className: "text-sm text-muted-foreground", children: query.trim()
+                    ? t(results.length === 1 ? 'search.resultsCount' : 'search.resultsCountPlural', { count: results.length, query })
+                    : t('search.itemsAvailable', { count: allItems.length }) }), results.length === 0 ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx(Search, { className: "h-12 w-12 text-muted-foreground/30 mb-4" }), _jsx("p", { className: "text-lg font-medium text-muted-foreground", children: t('search.noResults') }), _jsx("p", { className: "text-sm text-muted-foreground/80 mt-1", children: t('search.noResultsHint') })] })) : (_jsx("div", { className: "space-y-6", children: Object.entries(grouped).map(([type, items]) => {
                     const TypeIcon = TYPE_ICONS[type] || Database;
-                    return (_jsxs("div", { children: [_jsxs("h2", { className: "text-sm font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [_jsx(TypeIcon, { className: "h-4 w-4" }), type.charAt(0).toUpperCase() + type.slice(1), "s", _jsx(Badge, { variant: "secondary", className: "ml-1 text-xs", children: items.length })] }), _jsx("div", { className: "grid gap-2", children: items.map(item => {
+                    const typeLabelKey = `search.type${type.charAt(0).toUpperCase()}${type.slice(1)}s`;
+                    const badgeKey = `search.badge${type.charAt(0).toUpperCase()}${type.slice(1)}`;
+                    return (_jsxs("div", { children: [_jsxs("h2", { className: "text-sm font-medium text-muted-foreground mb-2 flex items-center gap-1.5", children: [_jsx(TypeIcon, { className: "h-4 w-4" }), t(typeLabelKey), _jsx(Badge, { variant: "secondary", className: "ml-1 text-xs", children: items.length })] }), _jsx("div", { className: "grid gap-2", children: items.map(item => {
                                     const ItemIcon = TYPE_ICONS[item.type] || Database;
-                                    return (_jsx(Link, { to: item.href, className: "rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(Card, { className: "hover:bg-accent/50 transition-colors cursor-pointer", children: _jsxs(CardContent, { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded ${TYPE_COLORS[item.type] || ''}`, children: _jsx(ItemIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: item.label }), item.description && (_jsx("p", { className: "text-xs text-muted-foreground truncate", children: item.description }))] }), _jsx(Badge, { variant: "outline", className: "text-xs shrink-0", children: item.type })] }) }) }, item.id));
+                                    const itemBadgeKey = `search.badge${item.type.charAt(0).toUpperCase()}${item.type.slice(1)}`;
+                                    return (_jsx(Link, { to: item.href, className: "rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", children: _jsx(Card, { className: "hover:bg-accent/50 transition-colors cursor-pointer", children: _jsxs(CardContent, { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: `flex h-8 w-8 items-center justify-center rounded ${TYPE_COLORS[item.type] || ''}`, children: _jsx(ItemIcon, { className: "h-4 w-4" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium truncate", children: item.label }), item.description && (_jsx("p", { className: "text-xs text-muted-foreground truncate", children: item.description }))] }), _jsx(Badge, { variant: "outline", className: "text-xs shrink-0", children: t(itemBadgeKey) })] }) }) }, item.id));
                                 }) })] }, type));
                 }) }))] }));
 }

package/dist/views/ViewConfigPanel.js

@@ -12,13 +12,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * All changes are buffered in a local draft state. Clicking Save commits
  * the draft via onSave; Discard resets to the original activeView.
  */
-import { useMemo, useEffect, useRef, useCallback } from 'react';
-import { ConfigPanelRenderer, useConfigDraft } from '@object-ui/components';
+import { useMemo, useEffect, useRef, useCallback, useState } from 'react';
+import { ConfigPanelRenderer, useConfigDraft, Button } from '@object-ui/components';
+import { Settings2 } from 'lucide-react';
 import { useObjectTranslation } from '@object-ui/i18n';
 import { buildViewConfigSchema, deriveFieldOptions, toFilterGroup, toSortItems, VIEW_TYPE_LABELS, } from '@object-ui/plugin-view';
 export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, objectDef, onViewUpdate, onSave, onCreate }) {
     const { t } = useObjectTranslation();
     const panelRef = useRef(null);
+    // "Show advanced settings" — when false (default), the panel only shows
+    // the Airtable-essential subset. When true, every section/field is
+    // surfaced for power users. Reset whenever the panel closes so reopening
+    // returns to the simplified view.
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    useEffect(() => {
+        if (!open)
+            setShowAdvanced(false);
+    }, [open]);
     // Default empty view for create mode
     const defaultNewView = useMemo(() => ({
         id: `view_${Date.now()}`,
@@ -53,7 +63,8 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
     // Bridge: filter/sort → builder format
     const filterGroupValue = useMemo(() => toFilterGroup(draft.filter), [draft.filter]);
     const sortItemsValue = useMemo(() => toSortItems(draft.sort), [draft.sort]);
-    // Build schema — always essentials-only (Airtable-style focused layout).
+    // Build schema. essentialOnly is the default; the user can opt-in to the
+    // full advanced surface via the "Show advanced settings" toggle below.
     const schema = useMemo(() => buildViewConfigSchema({
         t,
         fieldOptions,
@@ -61,8 +72,8 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
         updateField,
         filterGroupValue,
         sortItemsValue,
-        essentialOnly: true,
-    }), [t, fieldOptions, objectDef, updateField, filterGroupValue, sortItemsValue]);
+        essentialOnly: !showAdvanced,
+    }), [t, fieldOptions, objectDef, updateField, filterGroupValue, sortItemsValue, showAdvanced]);
     // Override breadcrumb with dynamic view type
     const viewType = draft.type || 'grid';
     const dynamicSchema = useMemo(() => ({
@@ -90,5 +101,12 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
     const panelTitle = mode === 'create'
         ? t('console.objectView.createView')
         : t('console.objectView.configureView');
-    return (_jsx(ConfigPanelRenderer, { open: open, onClose: onClose, schema: dynamicSchema, draft: draft, isDirty: isDirty, onFieldChange: updateField, onSave: handleSave, onDiscard: handleDiscard, onUndo: undo, onRedo: redo, canUndo: canUndo, canRedo: canRedo, undoLabel: t('designer.undo'), redoLabel: t('designer.redo'), objectDef: objectDef, saveLabel: t('console.objectView.save'), discardLabel: t('console.objectView.discard'), panelRef: panelRef, role: "complementary", ariaLabel: panelTitle, tabIndex: -1, testId: "view-config-panel", closeTitle: t('console.objectView.closePanel'), footerTestId: "view-config-footer", saveTestId: "view-config-save", discardTestId: "view-config-discard", className: "transition-all overflow-hidden" }));
+    // Header-extra: "Show advanced" toggle button. Subtle gear icon button
+    // sitting next to undo/redo/close — clearly affordant but not visually
+    // dominant. Title swaps between "Show advanced settings" and "Show fewer
+    // settings" so the user always knows what the next click will do.
+    const advancedToggle = (_jsx(Button, { size: "sm", variant: showAdvanced ? 'secondary' : 'ghost', onClick: () => setShowAdvanced(v => !v), className: "h-7 w-7 p-0", "data-testid": "view-config-advanced-toggle", "aria-pressed": showAdvanced, title: showAdvanced
+            ? t('console.objectView.showFewerSettings', { defaultValue: 'Show fewer settings' })
+            : t('console.objectView.showAdvancedSettings', { defaultValue: 'Show advanced settings' }), children: _jsx(Settings2, { className: "h-3.5 w-3.5" }) }));
+    return (_jsx(ConfigPanelRenderer, { open: open, onClose: onClose, schema: dynamicSchema, draft: draft, isDirty: isDirty, onFieldChange: updateField, onSave: handleSave, onDiscard: handleDiscard, onUndo: undo, onRedo: redo, canUndo: canUndo, canRedo: canRedo, undoLabel: t('designer.undo'), redoLabel: t('designer.redo'), objectDef: objectDef, saveLabel: t('console.objectView.save'), discardLabel: t('console.objectView.discard'), panelRef: panelRef, role: "complementary", ariaLabel: panelTitle, tabIndex: -1, testId: "view-config-panel", closeTitle: t('console.objectView.closePanel'), footerTestId: "view-config-footer", saveTestId: "view-config-save", discardTestId: "view-config-discard", headerExtra: advancedToggle, className: "transition-all overflow-hidden" }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,45 +27,45 @@
   "dependencies": {
     "lucide-react": "^1.14.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "4.0.6",
-    "@object-ui/collaboration": "4.0.6",
-    "@object-ui/components": "4.0.6",
-    "@object-ui/core": "4.0.6",
-    "@object-ui/data-objectstack": "4.0.6",
-    "@object-ui/fields": "4.0.6",
-    "@object-ui/i18n": "4.0.6",
-    "@object-ui/layout": "4.0.6",
-    "@object-ui/permissions": "4.0.6",
-    "@object-ui/react": "4.0.6",
-    "@object-ui/types": "4.0.6"
+    "@object-ui/auth": "4.0.8",
+    "@object-ui/collaboration": "4.0.8",
+    "@object-ui/components": "4.0.8",
+    "@object-ui/core": "4.0.8",
+    "@object-ui/data-objectstack": "4.0.8",
+    "@object-ui/fields": "4.0.8",
+    "@object-ui/i18n": "4.0.8",
+    "@object-ui/layout": "4.0.8",
+    "@object-ui/permissions": "4.0.8",
+    "@object-ui/react": "4.0.8",
+    "@object-ui/types": "4.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "4.0.6",
-    "@object-ui/plugin-charts": "4.0.6",
-    "@object-ui/plugin-chatbot": "4.0.6",
-    "@object-ui/plugin-dashboard": "4.0.6",
-    "@object-ui/plugin-designer": "4.0.6",
-    "@object-ui/plugin-detail": "4.0.6",
-    "@object-ui/plugin-form": "4.0.6",
-    "@object-ui/plugin-grid": "4.0.6",
-    "@object-ui/plugin-kanban": "4.0.6",
-    "@object-ui/plugin-list": "4.0.6",
-    "@object-ui/plugin-report": "4.0.6",
-    "@object-ui/plugin-view": "4.0.6"
+    "@object-ui/plugin-calendar": "4.0.8",
+    "@object-ui/plugin-charts": "4.0.8",
+    "@object-ui/plugin-chatbot": "4.0.8",
+    "@object-ui/plugin-dashboard": "4.0.8",
+    "@object-ui/plugin-designer": "4.0.8",
+    "@object-ui/plugin-detail": "4.0.8",
+    "@object-ui/plugin-form": "4.0.8",
+    "@object-ui/plugin-grid": "4.0.8",
+    "@object-ui/plugin-kanban": "4.0.8",
+    "@object-ui/plugin-list": "4.0.8",
+    "@object-ui/plugin-report": "4.0.8",
+    "@object-ui/plugin-view": "4.0.8"
   },
   "devDependencies": {
-    "@types/node": "^25.6.0",
+    "@types/node": "^25.7.0",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "react": "19.2.5",
-    "react-dom": "19.2.5",
-    "react-router-dom": "^7.14.2",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-router-dom": "^7.15.0",
     "sonner": "^2.0.7",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10"
+    "vite": "^8.0.12"
   },
   "keywords": [
     "objectui",