@object-ui/app-shell 4.0.7 → 4.0.9

package/dist/views/ReportView.js

@@ -206,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
@@ -229,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' });
@@ -241,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/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.7",
+  "version": "4.0.9",
   "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.7",
-    "@object-ui/collaboration": "4.0.7",
-    "@object-ui/components": "4.0.7",
-    "@object-ui/core": "4.0.7",
-    "@object-ui/data-objectstack": "4.0.7",
-    "@object-ui/fields": "4.0.7",
-    "@object-ui/i18n": "4.0.7",
-    "@object-ui/layout": "4.0.7",
-    "@object-ui/permissions": "4.0.7",
-    "@object-ui/react": "4.0.7",
-    "@object-ui/types": "4.0.7"
+    "@object-ui/auth": "4.0.9",
+    "@object-ui/collaboration": "4.0.9",
+    "@object-ui/core": "4.0.9",
+    "@object-ui/data-objectstack": "4.0.9",
+    "@object-ui/fields": "4.0.9",
+    "@object-ui/i18n": "4.0.9",
+    "@object-ui/layout": "4.0.9",
+    "@object-ui/permissions": "4.0.9",
+    "@object-ui/react": "4.0.9",
+    "@object-ui/types": "4.0.9",
+    "@object-ui/components": "4.0.9"
   },
   "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.7",
-    "@object-ui/plugin-charts": "4.0.7",
-    "@object-ui/plugin-chatbot": "4.0.7",
-    "@object-ui/plugin-dashboard": "4.0.7",
-    "@object-ui/plugin-designer": "4.0.7",
-    "@object-ui/plugin-detail": "4.0.7",
-    "@object-ui/plugin-form": "4.0.7",
-    "@object-ui/plugin-grid": "4.0.7",
-    "@object-ui/plugin-kanban": "4.0.7",
-    "@object-ui/plugin-list": "4.0.7",
-    "@object-ui/plugin-report": "4.0.7",
-    "@object-ui/plugin-view": "4.0.7"
+    "@object-ui/plugin-calendar": "4.0.9",
+    "@object-ui/plugin-charts": "4.0.9",
+    "@object-ui/plugin-chatbot": "4.0.9",
+    "@object-ui/plugin-dashboard": "4.0.9",
+    "@object-ui/plugin-designer": "4.0.9",
+    "@object-ui/plugin-detail": "4.0.9",
+    "@object-ui/plugin-form": "4.0.9",
+    "@object-ui/plugin-grid": "4.0.9",
+    "@object-ui/plugin-kanban": "4.0.9",
+    "@object-ui/plugin-list": "4.0.9",
+    "@object-ui/plugin-report": "4.0.9",
+    "@object-ui/plugin-view": "4.0.9"
   },
   "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",