@object-ui/app-shell 3.3.2 → 4.0.1

package/dist/views/RecordDetailView.js

@@ -20,6 +20,7 @@ import { SkeletonDetail } from '../skeletons';
 import { ActionConfirmDialog } from './ActionConfirmDialog';
 import { ActionParamDialog } from './ActionParamDialog';
 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();
@@ -477,17 +478,13 @@ export function RecordDetailView({ dataSource, objects, onEdit }) {
     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) => {
                                     if (!record || typeof record !== 'object')
                                         return;
-                                    const primary = detailSchema.primaryField;
-                                    const candidates = [
-                                        primary && record[primary],
-                                        record.name,
-                                        record.title,
-                                        record.label,
-                                        record.subject,
-                                    ];
-                                    const next = candidates.find((v) => typeof v === 'string' && v.trim().length > 0);
-                                    if (next && next !== recordTitle)
-                                        setRecordTitle(next);
+                                    // Resolve the same way DetailView's header does, so the
+                                    // breadcrumb matches the on-page title (e.g. "David Kim"
+                                    // instead of "#lead-1778…").
+                                    const resolved = getRecordDisplayName(objectDef, record);
+                                    if (resolved && resolved !== recordTitle && resolved !== 'Untitled') {
+                                        setRecordTitle(resolved);
+                                    }
                                 }, onEdit: () => {
                                     onEdit({ id: pureRecordId });
                                 }, discussionSlot: _jsx(RecordChatterPanel, { config: {

package/dist/views/ViewConfigPanel.d.ts

@@ -1,10 +1,12 @@
 /**
- * ViewConfigPanel — Schema-Driven
+ * ViewConfigPanel — Airtable-style simplified configuration panel.
  *
- * Airtable-style right-side configuration panel for inline view editing.
- * Migrated to Schema-Driven architecture using ConfigPanelRenderer +
- * useConfigDraft, replacing ~1600 lines of imperative code with a
- * declarative schema factory.
+ * Renders a focused, opinionated set of sections (Page / Data /
+ * Appearance / Toolbar / User actions / Navigation / Advanced) — matching
+ * Airtable's Interface designer right rail. Power-user sections (records,
+ * sharing, accessibility) are intentionally excluded to keep the panel
+ * approachable; they can be re-introduced later as a dedicated "advanced"
+ * settings dialog if needed.
  *
  * All changes are buffered in a local draft state. Clicking Save commits
  * the draft via onSave; Discard resets to the original activeView.

package/dist/views/ViewConfigPanel.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * ViewConfigPanel — Schema-Driven
+ * ViewConfigPanel — Airtable-style simplified configuration panel.
  *
- * Airtable-style right-side configuration panel for inline view editing.
- * Migrated to Schema-Driven architecture using ConfigPanelRenderer +
- * useConfigDraft, replacing ~1600 lines of imperative code with a
- * declarative schema factory.
+ * Renders a focused, opinionated set of sections (Page / Data /
+ * Appearance / Toolbar / User actions / Navigation / Advanced) — matching
+ * Airtable's Interface designer right rail. Power-user sections (records,
+ * sharing, accessibility) are intentionally excluded to keep the panel
+ * approachable; they can be re-introduced later as a dedicated "advanced"
+ * settings dialog if needed.
  *
  * All changes are buffered in a local draft state. Clicking Save commits
  * the draft via onSave; Discard resets to the original activeView.
@@ -51,7 +53,7 @@ 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
+    // Build schema — always essentials-only (Airtable-style focused layout).
     const schema = useMemo(() => buildViewConfigSchema({
         t,
         fieldOptions,
@@ -59,6 +61,7 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
         updateField,
         filterGroupValue,
         sortItemsValue,
+        essentialOnly: true,
     }), [t, fieldOptions, objectDef, updateField, filterGroupValue, sortItemsValue]);
     // Override breadcrumb with dynamic view type
     const viewType = draft.type || 'grid';

package/dist/views/index.d.ts

@@ -8,4 +8,5 @@ export { ActionConfirmDialog } from './ActionConfirmDialog';
 export { ActionParamDialog } from './ActionParamDialog';
 export { MetadataToggle, MetadataPanel } from './MetadataInspector';
 export { ViewConfigPanel } from './ViewConfigPanel';
+export { CreateViewDialog } from './CreateViewDialog';
 export { DesignDrawer } from './DesignDrawer';

package/dist/views/index.js

@@ -8,4 +8,5 @@ export { ActionConfirmDialog } from './ActionConfirmDialog';
 export { ActionParamDialog } from './ActionParamDialog';
 export { MetadataToggle, MetadataPanel } from './MetadataInspector';
 export { ViewConfigPanel } from './ViewConfigPanel';
+export { CreateViewDialog } from './CreateViewDialog';
 export { DesignDrawer } from './DesignDrawer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "3.3.2",
+  "version": "4.0.1",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -21,39 +21,40 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "lucide-react": "^0.544.0",
+    "lucide-react": "^1.14.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "3.3.2",
-    "@object-ui/collaboration": "3.3.2",
-    "@object-ui/components": "3.3.2",
-    "@object-ui/core": "3.3.2",
-    "@object-ui/data-objectstack": "3.3.2",
-    "@object-ui/fields": "3.3.2",
-    "@object-ui/i18n": "3.3.2",
-    "@object-ui/layout": "3.3.2",
-    "@object-ui/permissions": "3.3.2",
-    "@object-ui/react": "3.3.2",
-    "@object-ui/types": "3.3.2"
+    "@object-ui/auth": "4.0.1",
+    "@object-ui/collaboration": "4.0.1",
+    "@object-ui/components": "4.0.1",
+    "@object-ui/core": "4.0.1",
+    "@object-ui/data-objectstack": "4.0.1",
+    "@object-ui/fields": "4.0.1",
+    "@object-ui/i18n": "4.0.1",
+    "@object-ui/layout": "4.0.1",
+    "@object-ui/permissions": "4.0.1",
+    "@object-ui/react": "4.0.1",
+    "@object-ui/types": "4.0.1"
   },
   "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": "3.3.2",
-    "@object-ui/plugin-charts": "3.3.2",
-    "@object-ui/plugin-chatbot": "3.3.2",
-    "@object-ui/plugin-dashboard": "3.3.2",
-    "@object-ui/plugin-designer": "3.3.2",
-    "@object-ui/plugin-detail": "3.3.2",
-    "@object-ui/plugin-form": "3.3.2",
-    "@object-ui/plugin-grid": "3.3.2",
-    "@object-ui/plugin-kanban": "3.3.2",
-    "@object-ui/plugin-list": "3.3.2",
-    "@object-ui/plugin-report": "3.3.2",
-    "@object-ui/plugin-view": "3.3.2"
+    "@object-ui/plugin-calendar": "4.0.1",
+    "@object-ui/plugin-charts": "4.0.1",
+    "@object-ui/plugin-chatbot": "4.0.1",
+    "@object-ui/plugin-dashboard": "4.0.1",
+    "@object-ui/plugin-designer": "4.0.1",
+    "@object-ui/plugin-detail": "4.0.1",
+    "@object-ui/plugin-form": "4.0.1",
+    "@object-ui/plugin-grid": "4.0.1",
+    "@object-ui/plugin-kanban": "4.0.1",
+    "@object-ui/plugin-list": "4.0.1",
+    "@object-ui/plugin-report": "4.0.1",
+    "@object-ui/plugin-view": "4.0.1"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
@@ -84,6 +85,7 @@
   },
   "files": [
     "dist",
+    "src/styles.css",
     "README.md",
     "CHANGELOG.md",
     "LICENSE"

package/src/styles.css

@@ -0,0 +1,16 @@
+/**
+ * @object-ui/app-shell shared Tailwind v4 styles.
+ *
+ * Import once per consumer right after `@import 'tailwindcss';`:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@object-ui/app-shell/styles.css';
+ *
+ * Centralizing here keeps every host app (console, runner, starter, custom
+ * shells) on the same theming/variant contract.
+ */
+
+/* Bind Tailwind's `dark:` variant to the `.dark` class on <html> (or any
+ * ancestor) instead of the OS `prefers-color-scheme`. Required so the
+ * in-app theme toggle fully controls light/dark UI under Tailwind v4. */
+@custom-variant dark (&:where(.dark, .dark *));