@object-ui/app-shell 3.3.1 → 4.0.0

package/dist/views/ReportView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
-import { ReportViewer, ReportConfigPanel } from '@object-ui/plugin-report';
+const ReportViewer = lazy(() => import('@object-ui/plugin-report').then((m) => ({ default: m.ReportViewer })));
+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 { MetadataPanel, useMetadataInspector } from './MetadataInspector';
@@ -280,5 +281,5 @@ export function ReportView({ dataSource }) {
         allowExport: true,
         loading: dataLoading, // Loading state for data fetching
     };
-    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: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _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": "report-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-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(ReportViewer, { schema: viewerSchema }) }) }), _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
+    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: previewReport.title || previewReport.label || 'Report Viewer' }), previewReport.description && (_jsx("p", { className: "text-sm text-muted-foreground mt-1 line-clamp-2", children: previewReport.description }))] }), _jsx("div", { className: "shrink-0 flex items-center gap-1.5", children: _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": "report-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-4 sm:p-6 lg:p-8 bg-muted/5", children: _jsx("div", { className: "max-w-5xl mx-auto shadow-sm border rounded-lg sm:rounded-xl bg-background overflow-hidden min-h-150", children: _jsx(Suspense, { fallback: _jsx("div", { className: "p-8 text-sm text-muted-foreground", children: "Loading report\u2026" }), children: _jsx(ReportViewer, { schema: viewerSchema }) }) }) }), _jsx(Suspense, { fallback: null, children: _jsx(ReportConfigPanel, { open: configPanelOpen, onClose: handleCloseConfigPanel, config: reportConfig, onSave: handleReportConfigSave, onFieldChange: handleReportFieldChange, availableFields: availableFields }) }), _jsx(MetadataPanel, { open: showDebug, sections: [{ title: 'Report Configuration', data: previewReport }] })] })] }));
 }

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.1",
+  "version": "4.0.0",
   "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.1",
-    "@object-ui/collaboration": "3.3.1",
-    "@object-ui/components": "3.3.1",
-    "@object-ui/core": "3.3.1",
-    "@object-ui/data-objectstack": "3.3.1",
-    "@object-ui/fields": "3.3.1",
-    "@object-ui/i18n": "3.3.1",
-    "@object-ui/layout": "3.3.1",
-    "@object-ui/permissions": "3.3.1",
-    "@object-ui/react": "3.3.1",
-    "@object-ui/types": "3.3.1"
+    "@object-ui/auth": "3.4.0",
+    "@object-ui/collaboration": "3.4.0",
+    "@object-ui/components": "3.4.0",
+    "@object-ui/core": "3.4.0",
+    "@object-ui/data-objectstack": "3.4.0",
+    "@object-ui/fields": "3.4.0",
+    "@object-ui/i18n": "3.4.0",
+    "@object-ui/layout": "3.4.0",
+    "@object-ui/permissions": "3.4.0",
+    "@object-ui/react": "3.4.0",
+    "@object-ui/types": "3.4.0"
   },
   "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.1",
-    "@object-ui/plugin-charts": "3.3.1",
-    "@object-ui/plugin-chatbot": "3.3.1",
-    "@object-ui/plugin-dashboard": "3.3.1",
-    "@object-ui/plugin-designer": "3.3.1",
-    "@object-ui/plugin-detail": "3.3.1",
-    "@object-ui/plugin-form": "3.3.1",
-    "@object-ui/plugin-grid": "3.3.1",
-    "@object-ui/plugin-kanban": "3.3.1",
-    "@object-ui/plugin-list": "3.3.1",
-    "@object-ui/plugin-report": "3.3.1",
-    "@object-ui/plugin-view": "3.3.1"
+    "@object-ui/plugin-calendar": "3.4.0",
+    "@object-ui/plugin-charts": "3.4.0",
+    "@object-ui/plugin-chatbot": "3.4.0",
+    "@object-ui/plugin-dashboard": "3.4.0",
+    "@object-ui/plugin-designer": "3.4.0",
+    "@object-ui/plugin-detail": "3.4.0",
+    "@object-ui/plugin-form": "3.4.0",
+    "@object-ui/plugin-grid": "3.4.0",
+    "@object-ui/plugin-kanban": "3.4.0",
+    "@object-ui/plugin-list": "3.4.0",
+    "@object-ui/plugin-report": "3.4.0",
+    "@object-ui/plugin-view": "3.4.0"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
@@ -64,7 +65,7 @@
     "react-router-dom": "^7.14.2",
     "sonner": "^2.0.7",
     "typescript": "^6.0.3",
-    "vite": "^6.2.2"
+    "vite": "^8.0.10"
   },
   "keywords": [
     "objectui",
@@ -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 *));