@object-ui/plugin-dashboard 3.3.0 → 3.3.1

package/dist/packages/plugin-dashboard/src/DashboardRenderer.d.ts

@@ -1,4 +1,5 @@
 import { DashboardSchema } from '../../types/src';
+import { ActionDef, ActionResult, ActionContext, ModalHandler } from '../../core/src';
 export interface DashboardRendererProps {
     schema: DashboardSchema;
     className?: string;
@@ -18,6 +19,10 @@ export interface DashboardRendererProps {
     selectedWidgetId?: string | null;
     /** Callback when a widget is clicked in design mode */
     onWidgetClick?: (widgetId: string | null) => void;
+    /** Optional handler for actionType="modal" header actions. Receives a schema and ActionContext. */
+    modalHandler?: ModalHandler;
+    /** Optional named handlers for actionType="script" header actions, keyed by action name (actionUrl). */
+    scriptHandlers?: Record<string, (action: ActionDef, context: ActionContext) => Promise<ActionResult> | ActionResult>;
     [key: string]: any;
 }
 export declare const DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<DashboardRendererProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/packages/plugin-dashboard/src/DashboardRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../../../src/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAuB/E,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,gIA6a7B,CAAC"}
+{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../../../src/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAE/E,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAgC5F,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IACrE,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,mGAAmG;IACnG,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,wGAAwG;IACxG,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,KAAK,OAAO,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,CAAC;IACrH,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,gIA2gB7B,CAAC"}

package/dist/packages/plugin-dashboard/src/MetricWidget.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+export type MetricColorVariant = 'default' | 'blue' | 'teal' | 'orange' | 'purple' | 'success' | 'warning' | 'danger';
 export interface MetricWidgetProps {
     label: string | {
         key?: string;
@@ -23,6 +24,8 @@ export interface MetricWidgetProps {
     loading?: boolean;
     /** Error message from a failed data fetch. When set, the widget shows an error state. */
     error?: string | null;
+    /** Visual color variant — tints the icon container while keeping the card neutral. */
+    colorVariant?: MetricColorVariant;
 }
-export declare const MetricWidget: ({ label, value, trend, icon, className, description, loading, error, ...props }: MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetricWidget: ({ label, value, trend, icon, className, description, loading, error, colorVariant, ...props }: MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MetricWidget.d.ts.map

package/dist/packages/plugin-dashboard/src/MetricWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MetricWidget.d.ts","sourceRoot":"","sources":["../../../../src/MetricWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAavC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,GAAG;YAAE,GAAG,CAAC,EAAE,MAAM,CAAC;YAAC,YAAY,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACzD,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;KACvC,CAAC;IACF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,GAAI,iFAU1B,iBAAiB,4CAuDnB,CAAC"}
+{"version":3,"file":"MetricWidget.d.ts","sourceRoot":"","sources":["../../../../src/MetricWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAavC,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GACjD,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAmBrC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,GAAG;YAAE,GAAG,CAAC,EAAE,MAAM,CAAC;YAAC,YAAY,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACzD,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;KACvC,CAAC;IACF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,+EAA+E;IAC/E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,sFAAsF;IACtF,YAAY,CAAC,EAAE,kBAAkB,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,GAAI,+FAW1B,iBAAiB,4CAkEnB,CAAC"}

package/dist/packages/plugin-dashboard/src/ObjectMetricWidget.d.ts

@@ -52,6 +52,8 @@ export interface ObjectMetricWidgetProps {
     };
     /** External data source (overrides context) */
     dataSource?: any;
+    /** Visual color variant for the icon container */
+    colorVariant?: 'default' | 'blue' | 'teal' | 'orange' | 'purple' | 'success' | 'warning' | 'danger';
 }
 export declare const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps>;
 //# sourceMappingURL=ObjectMetricWidget.d.ts.map

package/dist/packages/plugin-dashboard/src/ObjectMetricWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectMetricWidget.d.ts","sourceRoot":"","sources":["../../../../src/ObjectMetricWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAuD,MAAM,OAAO,CAAC;AAI5E;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClE,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,kCAAkC;IAClC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,iBAAiB;IACjB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,GAAG;YAAE,GAAG,CAAC,EAAE,MAAM,CAAC;YAAC,YAAY,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACzD,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;KACvC,CAAC;IACF,6BAA6B;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,+CAA+C;IAC/C,UAAU,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAwGhE,CAAC"}
+{"version":3,"file":"ObjectMetricWidget.d.ts","sourceRoot":"","sources":["../../../../src/ObjectMetricWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAuD,MAAM,OAAO,CAAC;AAI5E;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,uBAAuB;IACtC,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClE,wBAAwB;IACxB,MAAM,CAAC,EAAE,GAAG,CAAC;IACb,kCAAkC;IAClC,KAAK,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,sEAAsE;IACtE,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,iBAAiB;IACjB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,GAAG;YAAE,GAAG,CAAC,EAAE,MAAM,CAAC;YAAC,YAAY,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACzD,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;KACvC,CAAC;IACF,6BAA6B;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IAChC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,+CAA+C;IAC/C,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACrG;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA0GhE,CAAC"}

package/dist/packages/plugin-dashboard/src/index.d.ts

@@ -13,7 +13,7 @@ export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard, Objec
 export declare const dashboardComponents: {
     DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<import('./DashboardRenderer').DashboardRendererProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     DashboardGridLayout: import('react').FC<import('./DashboardGridLayout').DashboardGridLayoutProps>;
-    MetricWidget: ({ label, value, trend, icon, className, description, loading, error, ...props }: import('./MetricWidget').MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
+    MetricWidget: ({ label, value, trend, icon, className, description, loading, error, colorVariant, ...props }: import('./MetricWidget').MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
     MetricCard: import('react').FC<import('./MetricCard').MetricCardProps>;
     ObjectMetricWidget: import('react').FC<import('./ObjectMetricWidget').ObjectMetricWidgetProps>;
     PivotTable: import('react').FC<import('./PivotTable').PivotTableProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-dashboard",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "type": "module",
   "license": "MIT",
   "description": "Dashboard plugin for Object UI",
@@ -21,10 +21,10 @@
     "react-dom": "19.2.5",
     "react-grid-layout": "^2.2.3",
     "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "3.3.0",
-    "@object-ui/core": "3.3.0",
-    "@object-ui/react": "3.3.0",
-    "@object-ui/types": "3.3.0"
+    "@object-ui/components": "3.3.1",
+    "@object-ui/core": "3.3.1",
+    "@object-ui/react": "3.3.1",
+    "@object-ui/types": "3.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -33,10 +33,43 @@
   "devDependencies": {
     "@types/react-grid-layout": "^2.1.0",
     "@vitejs/plugin-react": "^6.0.1",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.8",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
     "vite-plugin-dts": "^4.5.4"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "plugin",
+    "dashboard",
+    "bi",
+    "widgets",
+    "grid-layout"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/plugin-dashboard"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "homepage": "https://www.objectui.org/docs/plugins/plugin-dashboard",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
   "scripts": {
     "build": "vite build",
     "test": "vitest run",

package/.turbo/turbo-build.log

@@ -1,41 +0,0 @@
-
-> @object-ui/plugin-dashboard@3.3.0 build /home/runner/work/objectui/objectui/packages/plugin-dashboard
-> vite build
-
-vite v8.0.8 building client environment for production...
-
-rendering chunks...
-
-src/DashboardGridLayout.tsx:3:8 - error TS2882: Cannot find module or type declarations for side-effect import of 'react-grid-layout/css/styles.css'.
-
-[vite:dts] Start generate declaration files...
-3 import 'react-grid-layout/css/styles.css';
-         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-src/ObjectDataTable.tsx:47:3 - error TS2322: Type 'Record<string, any>[]' is not assignable to type 'NormalizedColumn[]'.
-  Type 'Record<string, any>' is missing the following properties from type 'NormalizedColumn': header, accessorKey
-
-47   return columns.map((col) => {
-     ~~~~~~
-
-[vite:dts] Declaration files built in 29662ms.
-
-computing gzip size...
-dist/index.css    2.32 kB │ gzip:  0.57 kB
-dist/index.js   161.81 kB │ gzip: 39.97 kB
-
-[PLUGIN_TIMINGS] Warning: Your build spent significant time in plugins. Here is a breakdown:
-  - vite:dts (93%)
-  - vite:css (7%)
-See https://rolldown.rs/options/checks#plugintimings for more details.
-
-
-rendering chunks...
-computing gzip size...
-dist/index.css        2.32 kB │ gzip:  0.57 kB
-dist/index.umd.cjs  121.27 kB │ gzip: 34.65 kB
-
-[MISSING_GLOBAL_NAME] Warning: No name was provided for external module "lucide-react" in "output.globals" – guessing "lucide_react".
-
-[MISSING_GLOBAL_NAME] Warning: No name was provided for external module "clsx" in "output.globals" – guessing "clsx".
-
-✓ built in 32.80s

package/src/DashboardConfigPanel.stories.tsx

@@ -1,164 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { WidgetConfigPanel } from './WidgetConfigPanel';
-import { DashboardWithConfig } from './DashboardWithConfig';
-import type { DashboardSchema } from '@object-ui/types';
-
-// ─── WidgetConfigPanel Stories ──────────────────────────────────────────────
-
-const widgetMeta = {
-  title: 'Plugins/DashboardConfigPanel',
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-} satisfies Meta;
-
-export default widgetMeta;
-type Story = StoryObj<typeof widgetMeta>;
-
-// --- WidgetConfigPanel ---
-
-const widgetConfig = {
-  title: 'Revenue Chart',
-  description: 'Monthly revenue by region',
-  type: 'bar',
-  object: 'orders',
-  categoryField: 'region',
-  valueField: 'amount',
-  aggregate: 'sum',
-  colorVariant: 'blue',
-  actionUrl: '',
-  layoutW: 2,
-  layoutH: 1,
-};
-
-function WidgetConfigStory() {
-  const [config, setConfig] = useState(widgetConfig);
-  return (
-    <div style={{ position: 'relative', height: 600, width: 320, border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
-      <WidgetConfigPanel
-        open={true}
-        onClose={() => alert('Close clicked')}
-        config={config}
-        onSave={(newConfig) => {
-          setConfig(newConfig as typeof widgetConfig);
-          alert('Saved: ' + JSON.stringify(newConfig, null, 2));
-        }}
-      />
-    </div>
-  );
-}
-
-export const WidgetConfig: Story = {
-  render: () => <WidgetConfigStory />,
-};
-
-// --- DashboardWithConfig ---
-
-const dashboardSchema: DashboardSchema = {
-  type: 'dashboard',
-  title: 'Sales Dashboard',
-  columns: 3,
-  gap: 4,
-  widgets: [
-    {
-      id: 'mc-1',
-      component: {
-        type: 'metric-card',
-        title: 'Total Revenue',
-        value: '$128,430',
-        icon: 'DollarSign',
-        trend: 'up',
-        trendValue: '+14.2%',
-      },
-      layout: { x: 0, y: 0, w: 1, h: 1 },
-    },
-    {
-      id: 'mc-2',
-      component: {
-        type: 'metric-card',
-        title: 'Active Users',
-        value: '3,842',
-        icon: 'Users',
-        trend: 'up',
-        trendValue: '+8.1%',
-      },
-      layout: { x: 1, y: 0, w: 1, h: 1 },
-    },
-    {
-      id: 'mc-3',
-      component: {
-        type: 'metric-card',
-        title: 'Churn Rate',
-        value: '1.8%',
-        icon: 'TrendingDown',
-        trend: 'down',
-        trendValue: '-0.3%',
-      },
-      layout: { x: 2, y: 0, w: 1, h: 1 },
-    },
-  ],
-  header: {
-    showTitle: true,
-    showDescription: true,
-  },
-};
-
-const dashboardConfig = {
-  columns: 3,
-  gap: 4,
-  rowHeight: '120',
-  refreshInterval: '0',
-  title: 'Sales Dashboard',
-  showDescription: true,
-  theme: 'auto',
-};
-
-function DashboardWithConfigStory() {
-  const [config, setConfig] = useState(dashboardConfig);
-  return (
-    <div style={{ height: 600, width: '100%', border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
-      <DashboardWithConfig
-        schema={dashboardSchema}
-        config={config}
-        onConfigSave={(newConfig) => {
-          setConfig(newConfig as typeof dashboardConfig);
-        }}
-        defaultConfigOpen={true}
-      />
-    </div>
-  );
-}
-
-export const DashboardWithConfigPanel: Story = {
-  render: () => <DashboardWithConfigStory />,
-};
-
-function DashboardWithConfigClosedStory() {
-  const [config, setConfig] = useState(dashboardConfig);
-  return (
-    <div style={{ height: 600, width: '100%', border: '1px solid #e5e7eb', borderRadius: 8, overflow: 'hidden' }}>
-      <DashboardWithConfig
-        schema={dashboardSchema}
-        config={config}
-        onConfigSave={(newConfig) => {
-          setConfig(newConfig as typeof dashboardConfig);
-        }}
-        defaultConfigOpen={false}
-      />
-    </div>
-  );
-}
-
-export const DashboardWithConfigClosed: Story = {
-  render: () => <DashboardWithConfigClosedStory />,
-};

package/src/DashboardConfigPanel.tsx

@@ -1,158 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import {
-  ConfigPanelRenderer,
-  useConfigDraft,
-} from '@object-ui/components';
-import type { ConfigPanelSchema } from '@object-ui/components';
-
-// ---------------------------------------------------------------------------
-// Schema — describes the full DashboardConfigPanel structure
-// ---------------------------------------------------------------------------
-
-const dashboardSchema: ConfigPanelSchema = {
-  breadcrumb: ['Dashboard', 'Configuration'],
-  sections: [
-    {
-      key: 'layout',
-      title: 'Layout',
-      fields: [
-        {
-          key: 'columns',
-          label: 'Columns',
-          type: 'slider',
-          defaultValue: 3,
-          min: 1,
-          max: 12,
-          step: 1,
-        },
-        {
-          key: 'gap',
-          label: 'Gap',
-          type: 'slider',
-          defaultValue: 4,
-          min: 0,
-          max: 16,
-          step: 1,
-        },
-        {
-          key: 'rowHeight',
-          label: 'Row height',
-          type: 'input',
-          defaultValue: '120',
-          placeholder: 'e.g. 120',
-        },
-      ],
-    },
-    {
-      key: 'data',
-      title: 'Data',
-      collapsible: true,
-      fields: [
-        {
-          key: 'refreshInterval',
-          label: 'Refresh interval',
-          type: 'select',
-          defaultValue: '0',
-          options: [
-            { value: '0', label: 'Manual' },
-            { value: '30', label: '30s' },
-            { value: '60', label: '1 min' },
-            { value: '300', label: '5 min' },
-          ],
-        },
-      ],
-    },
-    {
-      key: 'appearance',
-      title: 'Appearance',
-      collapsible: true,
-      defaultCollapsed: true,
-      fields: [
-        {
-          key: 'title',
-          label: 'Title',
-          type: 'input',
-          placeholder: 'Dashboard title',
-        },
-        {
-          key: 'showDescription',
-          label: 'Show description',
-          type: 'switch',
-          defaultValue: true,
-        },
-        {
-          key: 'theme',
-          label: 'Theme',
-          type: 'select',
-          defaultValue: 'auto',
-          options: [
-            { value: 'light', label: 'Light' },
-            { value: 'dark', label: 'Dark' },
-            { value: 'auto', label: 'Auto' },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-export interface DashboardConfigPanelProps {
-  /** Whether the panel is open */
-  open: boolean;
-  /** Close handler */
-  onClose: () => void;
-  /** Initial / committed dashboard configuration */
-  config: Record<string, any>;
-  /** Persist the updated config */
-  onSave: (config: Record<string, any>) => void;
-  /** Optional live-update callback */
-  onFieldChange?: (field: string, value: any) => void;
-}
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-/**
- * DashboardConfigPanel — Schema-driven configuration panel for dashboards.
- *
- * Built entirely on the generic ConfigPanelRenderer + useConfigDraft,
- * demonstrating that a full config panel can be expressed in ~60 lines
- * of declarative schema rather than 1500+ lines of imperative code.
- */
-export function DashboardConfigPanel({
-  open,
-  onClose,
-  config,
-  onSave,
-  onFieldChange,
-}: DashboardConfigPanelProps) {
-  const { draft, isDirty, updateField, discard } = useConfigDraft(config, {
-    onUpdate: onFieldChange,
-  });
-
-  return (
-    <ConfigPanelRenderer
-      open={open}
-      onClose={onClose}
-      schema={dashboardSchema}
-      draft={draft}
-      isDirty={isDirty}
-      onFieldChange={updateField}
-      onSave={() => onSave(draft)}
-      onDiscard={discard}
-    />
-  );
-}