@object-ui/plugin-dashboard 3.1.4 → 3.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardWithConfig.d.ts","sourceRoot":"","sources":["../../../../src/DashboardWithConfig.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAU/E,MAAM,WAAW,wBAAwB;IACvC,qCAAqC;IACrC,MAAM,EAAE,eAAe,CAAC;IACxB,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,6DAA6D;IAC7D,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,iEAAiE;IACjE,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACvE,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,WAAW,EACX,iBAAyB,EACzB,SAAS,GACV,EAAE,wBAAwB,2CAiJ1B"}

package/dist/{src → packages/plugin-dashboard/src}/MetricCard.d.ts

@@ -13,6 +13,10 @@ export interface MetricCardProps {
         defaultValue?: string;
     };
     className?: string;
+    /** When true, the card is in a loading state (fetching data from server). */
+    loading?: boolean;
+    /** Error message from a failed data fetch. When set, the card shows an error state. */
+    error?: string | null;
 }
 /**
  * MetricCard - Standalone metric card component for dashboard KPIs

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../../src/MetricCard.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACzD,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8DhD,CAAC"}

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

@@ -19,6 +19,10 @@ export interface MetricWidgetProps {
         key?: string;
         defaultValue?: string;
     };
+    /** When true, the widget is in a loading state (fetching data from server). */
+    loading?: boolean;
+    /** Error message from a failed data fetch. When set, the widget shows an error state. */
+    error?: string | null;
 }
-export declare const MetricWidget: ({ label, value, trend, icon, className, description, ...props }: MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetricWidget: ({ label, value, trend, icon, className, description, loading, error, ...props }: MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MetricWidget.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectDataTable.d.ts","sourceRoot":"","sources":["../../../../src/ObjectDataTable.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAmD,MAAM,OAAO,CAAC;AAKxE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACrD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,GAAG,CAAC;QACb,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,OAAO,CAAC,EAAE,GAAG,EAAE,CAAC;QAChB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,UAAU,CAAC,EAAE,OAAO,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IACF,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,6EAA6E;AAC7E,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,gBAAgB,EAAE,CAiB9F;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAiJ1D,CAAC"}

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

@@ -0,0 +1,57 @@
+import { default as React } from 'react';
+/**
+ * ObjectMetricWidget — Data-bound metric widget.
+ *
+ * When a metric widget has an `object` binding and a `dataSource` is available,
+ * this component attempts to fetch the metric value from the server using
+ * aggregation. If the fetch fails, it shows an error state instead of
+ * silently displaying stale/hardcoded data.
+ *
+ * Lifecycle states:
+ * - **Loading** → spinner placeholder
+ * - **Error** → error message (API failure is surfaced, not hidden)
+ * - **Data** → actual metric value from server
+ * - **Fallback** → when no dataSource is available, renders the static
+ *   `options.value` as provided in the widget config (demo/fallback mode)
+ */
+export interface ObjectMetricWidgetProps {
+    /** The object/resource name to query */
+    objectName: string;
+    /** Aggregation config (field, function, groupBy) */
+    aggregate?: {
+        field: string;
+        function: string;
+        groupBy?: string;
+    };
+    /** Filter conditions */
+    filter?: any;
+    /** Static label for the metric */
+    label: string | {
+        key?: string;
+        defaultValue?: string;
+    };
+    /** Fallback static value (used when no dataSource or in demo mode) */
+    fallbackValue?: string | number;
+    /** Trend info */
+    trend?: {
+        value: number;
+        label?: string | {
+            key?: string;
+            defaultValue?: string;
+        };
+        direction?: 'up' | 'down' | 'neutral';
+    };
+    /** Icon name or ReactNode */
+    icon?: React.ReactNode | string;
+    /** Additional CSS class */
+    className?: string;
+    /** Description */
+    description?: string | {
+        key?: string;
+        defaultValue?: string;
+    };
+    /** External data source (overrides context) */
+    dataSource?: any;
+}
+export declare const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps>;
+//# sourceMappingURL=ObjectMetricWidget.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectPivotTable.d.ts","sourceRoot":"","sources":["../../../../src/ObjectPivotTable.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAA0C,MAAM,OAAO,CAAC;AAK/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,gBAAgB,GAAG;QACzB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,YAAY,CAAC,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;QACrD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,GAAG,CAAC;KACd,CAAC;IACF,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyH5D,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"PivotTable.d.ts","sourceRoot":"","sources":["../../../../src/PivotTable.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,kBAAkB,CAAC;AAG3E,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,gBAAgB,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2KhD,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetConfigPanel.d.ts","sourceRoot":"","sources":["../../../../src/WidgetConfigPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwE/B,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAuX5D,MAAM,WAAW,sBAAsB;IACrC,gCAAgC;IAChC,IAAI,EAAE,OAAO,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,wCAAwC;IACxC,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC9C,oCAAoC;IACpC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpD,oEAAoE;IACpE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,YAAY,EAAE,CAAC;IAClC,+EAA+E;IAC/E,eAAe,CAAC,EAAE,YAAY,EAAE,CAAC;CAClC;AAiBD;;;;;;;;;;GAUG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,eAAe,GAChB,EAAE,sBAAsB,2CA8BxB"}

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

@@ -2,18 +2,20 @@ import { DashboardRenderer } from './DashboardRenderer';
 import { DashboardGridLayout } from './DashboardGridLayout';
 import { MetricWidget } from './MetricWidget';
 import { MetricCard } from './MetricCard';
+import { ObjectMetricWidget } from './ObjectMetricWidget';
 import { PivotTable } from './PivotTable';
 import { ObjectPivotTable } from './ObjectPivotTable';
 import { ObjectDataTable } from './ObjectDataTable';
 import { DashboardConfigPanel } from './DashboardConfigPanel';
 import { WidgetConfigPanel } from './WidgetConfigPanel';
 import { DashboardWithConfig } from './DashboardWithConfig';
-export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard, PivotTable, ObjectPivotTable, ObjectDataTable, DashboardConfigPanel, WidgetConfigPanel, DashboardWithConfig };
+export { DashboardRenderer, DashboardGridLayout, MetricWidget, MetricCard, ObjectMetricWidget, PivotTable, ObjectPivotTable, ObjectDataTable, DashboardConfigPanel, WidgetConfigPanel, DashboardWithConfig };
 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, ...props }: import('./MetricWidget').MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
+    MetricWidget: ({ label, value, trend, icon, className, description, loading, error, ...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>;
     ObjectPivotTable: import('react').FC<import('./ObjectPivotTable').ObjectPivotTableProps>;
     ObjectDataTable: import('react').FC<import('./ObjectDataTable').ObjectDataTableProps>;

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,CAAC;AA0M7M,eAAO,MAAM,mBAAmB;;;;;;;;;;;;CAY/B,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,4FAA4F;AAC5F,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,OAAO,GAAG,UAAU,IAAI;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,MAAM,CAAC,EAAE,GAAG,CAAA;CAAE,CAO1I"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-dashboard",
-  "version": "3.1.4",
+  "version": "3.3.0",
   "type": "module",
   "license": "MIT",
   "description": "Dashboard plugin for Object UI",
@@ -16,15 +16,15 @@
   },
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-grid-layout": "^2.2.2",
+    "lucide-react": "^1.8.0",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "react-grid-layout": "^2.2.3",
     "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "3.1.4",
-    "@object-ui/core": "3.1.4",
-    "@object-ui/react": "3.1.4",
-    "@object-ui/types": "3.1.4"
+    "@object-ui/components": "3.3.0",
+    "@object-ui/core": "3.3.0",
+    "@object-ui/react": "3.3.0",
+    "@object-ui/types": "3.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",
@@ -33,8 +33,8 @@
   "devDependencies": {
     "@types/react-grid-layout": "^2.1.0",
     "@vitejs/plugin-react": "^6.0.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {

package/src/DashboardRenderer.tsx

@@ -124,6 +124,40 @@ export const DashboardRenderer = forwardRef<HTMLDivElement, DashboardRendererPro
             // Handle Shorthand Registry Mappings
             const widgetType = widget.type;
             const options = (widget.options || {}) as Record<string, any>;
+
+            // Metric widgets with object binding — delegate to ObjectMetricWidget
+            // for async data loading with proper error/loading states.
+            // Static metric options (label, value, trend, icon) are passed as
+            // fallback values that render only when no dataSource is available.
+            if (widgetType === 'metric' && widget.object) {
+                const widgetData = options.data;
+                const aggregate = isObjectProvider(widgetData) && widgetData.aggregate
+                    ? {
+                        field: widget.valueField || widgetData.aggregate.field,
+                        function: widget.aggregate || widgetData.aggregate.function,
+                        // Prefer explicit categoryField or aggregate.groupBy; otherwise, default to a single bucket.
+                        groupBy: widget.categoryField ?? widgetData.aggregate.groupBy ?? '_all',
+                    }
+                    : widget.aggregate ? {
+                        field: widget.valueField || 'value',
+                        function: widget.aggregate,
+                        // Default to a single group unless the user explicitly configures a categoryField.
+                        groupBy: widget.categoryField || '_all',
+                    } : undefined;
+
+                return {
+                    type: 'object-metric',
+                    objectName: widget.object || (isObjectProvider(widgetData) ? widgetData.object : undefined),
+                    aggregate,
+                    filter: (isObjectProvider(widgetData) ? widgetData.filter : undefined) || widget.filter,
+                    label: options.label || resolveLabel(widget.title) || '',
+                    fallbackValue: options.value,
+                    trend: options.trend,
+                    icon: options.icon,
+                    description: options.description,
+                };
+            }
+
             if (widgetType === 'bar' || widgetType === 'line' || widgetType === 'area' || widgetType === 'pie' || widgetType === 'donut' || widgetType === 'scatter') {
                 // Support data at widget level or nested inside options
                 const widgetData = (widget as any).data || options.data;

package/src/MetricCard.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
 import { cn } from '@object-ui/components';
-import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, MinusIcon, AlertCircle, Loader2 } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 
 /** Resolve an I18nLabel (string or {key, defaultValue}) to a plain string. */
@@ -27,6 +27,10 @@ export interface MetricCardProps {
   trendValue?: string;
   description?: string | { key?: string; defaultValue?: string };
   className?: string;
+  /** When true, the card is in a loading state (fetching data from server). */
+  loading?: boolean;
+  /** Error message from a failed data fetch. When set, the card shows an error state. */
+  error?: string | null;
 }
 
 /**
@@ -41,6 +45,8 @@ export const MetricCard: React.FC<MetricCardProps> = ({
   trendValue,
   description,
   className,
+  loading,
+  error,
   ...props
 }) => {
   // Resolve icon from lucide-react
@@ -57,24 +63,38 @@ export const MetricCard: React.FC<MetricCardProps> = ({
         )}
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold">{value}</div>
-        {(trend || trendValue || description) && (
-          <p className="text-xs text-muted-foreground flex items-center mt-1">
-            {trend && trendValue && (
-              <span className={cn(
-                "flex items-center mr-2",
-                trend === 'up' && "text-green-500",
-                trend === 'down' && "text-red-500",
-                trend === 'neutral' && "text-yellow-500"
-              )}>
-                {trend === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
-                {trend === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
-                {trend === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
-                {trendValue}
-              </span>
+        {loading ? (
+          <div className="flex items-center gap-2 text-muted-foreground" data-testid="metric-card-loading">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm">Loading…</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center gap-2" data-testid="metric-card-error" role="alert">
+            <AlertCircle className="h-4 w-4 text-destructive shrink-0" />
+            <span className="text-xs text-destructive truncate">{error}</span>
+          </div>
+        ) : (
+          <>
+            <div className="text-2xl font-bold">{value}</div>
+            {(trend || trendValue || description) && (
+              <p className="text-xs text-muted-foreground flex items-center mt-1">
+                {trend && trendValue && (
+                  <span className={cn(
+                    "flex items-center mr-2",
+                    trend === 'up' && "text-green-500",
+                    trend === 'down' && "text-red-500",
+                    trend === 'neutral' && "text-yellow-500"
+                  )}>
+                    {trend === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
+                    {trend === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
+                    {trend === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
+                    {trendValue}
+                  </span>
+                )}
+                {resolveLabel(description)}
+              </p>
             )}
-            {resolveLabel(description)}
-          </p>
+          </>
         )}
       </CardContent>
     </Card>

package/src/MetricWidget.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
 import { cn } from '@object-ui/components';
-import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from 'lucide-react';
+import { ArrowDownIcon, ArrowUpIcon, MinusIcon, AlertCircle, Loader2 } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 
 /** Resolve an I18nLabel (string or {key, defaultValue}) to a plain string. */
@@ -22,6 +22,10 @@ export interface MetricWidgetProps {
   icon?: React.ReactNode | string;
   className?: string;
   description?: string | { key?: string; defaultValue?: string };
+  /** When true, the widget is in a loading state (fetching data from server). */
+  loading?: boolean;
+  /** Error message from a failed data fetch. When set, the widget shows an error state. */
+  error?: string | null;
 }
 
 export const MetricWidget = ({
@@ -31,6 +35,8 @@ export const MetricWidget = ({
   icon,
   className,
   description,
+  loading,
+  error,
   ...props
 }: MetricWidgetProps) => {
   // Resolve icon if it's a string
@@ -51,24 +57,38 @@ export const MetricWidget = ({
         {resolvedIcon && <div className="h-4 w-4 text-muted-foreground shrink-0">{resolvedIcon}</div>}
       </CardHeader>
       <CardContent>
-        <div className="text-2xl font-bold truncate">{value}</div>
-        {(trend || description) && (
-          <p className="text-xs text-muted-foreground flex items-center mt-1 truncate">
-            {trend && (
-              <span className={cn(
-                "flex items-center mr-2 shrink-0",
-                trend.direction === 'up' && "text-green-500",
-                trend.direction === 'down' && "text-red-500",
-                trend.direction === 'neutral' && "text-yellow-500"
-              )}>
-                {trend.direction === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
-                {trend.direction === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
-                {trend.direction === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
-                {trend.value}%
-              </span>
+        {loading ? (
+          <div className="flex items-center gap-2 text-muted-foreground" data-testid="metric-loading">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span className="text-sm">Loading…</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center gap-2" data-testid="metric-error" role="alert">
+            <AlertCircle className="h-4 w-4 text-destructive shrink-0" />
+            <span className="text-xs text-destructive truncate">{error}</span>
+          </div>
+        ) : (
+          <>
+            <div className="text-2xl font-bold truncate">{value}</div>
+            {(trend || description) && (
+              <p className="text-xs text-muted-foreground flex items-center mt-1 truncate">
+                {trend && (
+                  <span className={cn(
+                    "flex items-center mr-2 shrink-0",
+                    trend.direction === 'up' && "text-green-500",
+                    trend.direction === 'down' && "text-red-500",
+                    trend.direction === 'neutral' && "text-yellow-500"
+                  )}>
+                    {trend.direction === 'up' && <ArrowUpIcon className="h-3 w-3 mr-1" />}
+                    {trend.direction === 'down' && <ArrowDownIcon className="h-3 w-3 mr-1" />}
+                    {trend.direction === 'neutral' && <MinusIcon className="h-3 w-3 mr-1" />}
+                    {trend.value}%
+                  </span>
+                )}
+                <span className="truncate">{resolveLabel(description) || resolveLabel(trend?.label)}</span>
+              </p>
             )}
-            <span className="truncate">{resolveLabel(description) || resolveLabel(trend?.label)}</span>
-          </p>
+          </>
         )}
       </CardContent>
     </Card>

package/src/ObjectMetricWidget.tsx

@@ -0,0 +1,159 @@
+/**
+ * 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, useEffect, useContext, useCallback } from 'react';
+import { SchemaRendererContext } from '@object-ui/react';
+import { MetricWidget } from './MetricWidget';
+
+/**
+ * ObjectMetricWidget — Data-bound metric widget.
+ *
+ * When a metric widget has an `object` binding and a `dataSource` is available,
+ * this component attempts to fetch the metric value from the server using
+ * aggregation. If the fetch fails, it shows an error state instead of
+ * silently displaying stale/hardcoded data.
+ *
+ * Lifecycle states:
+ * - **Loading** → spinner placeholder
+ * - **Error** → error message (API failure is surfaced, not hidden)
+ * - **Data** → actual metric value from server
+ * - **Fallback** → when no dataSource is available, renders the static
+ *   `options.value` as provided in the widget config (demo/fallback mode)
+ */
+export interface ObjectMetricWidgetProps {
+  /** The object/resource name to query */
+  objectName: string;
+  /** Aggregation config (field, function, groupBy) */
+  aggregate?: { field: string; function: string; groupBy?: string };
+  /** Filter conditions */
+  filter?: any;
+  /** Static label for the metric */
+  label: string | { key?: string; defaultValue?: string };
+  /** Fallback static value (used when no dataSource or in demo mode) */
+  fallbackValue?: string | number;
+  /** Trend info */
+  trend?: {
+    value: number;
+    label?: string | { key?: string; defaultValue?: string };
+    direction?: 'up' | 'down' | 'neutral';
+  };
+  /** Icon name or ReactNode */
+  icon?: React.ReactNode | string;
+  /** Additional CSS class */
+  className?: string;
+  /** Description */
+  description?: string | { key?: string; defaultValue?: string };
+  /** External data source (overrides context) */
+  dataSource?: any;
+}
+
+export const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps> = ({
+  objectName,
+  aggregate,
+  filter,
+  label,
+  fallbackValue,
+  trend,
+  icon,
+  className,
+  description,
+  dataSource: propDataSource,
+}) => {
+  const context = useContext(SchemaRendererContext);
+  const dataSource = propDataSource || context?.dataSource;
+
+  const [fetchedValue, setFetchedValue] = useState<string | number | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchMetric = useCallback(async (ds: any, mounted: { current: boolean }) => {
+    if (!ds || !objectName) return;
+    if (mounted.current) {
+      setLoading(true);
+      setError(null);
+    }
+
+    try {
+      let value: string | number;
+
+      if (aggregate && typeof ds.aggregate === 'function') {
+        // Server-side aggregation
+        const results = await ds.aggregate(objectName, {
+          field: aggregate.field,
+          function: aggregate.function,
+          groupBy: aggregate.groupBy || '_all',
+          filter,
+        });
+        const data = Array.isArray(results) ? results : [];
+
+        if (data.length === 0) {
+          value = 0;
+        } else if (aggregate.function === 'count') {
+          // Sum all count results
+          value = data.reduce((sum: number, r: any) => sum + (Number(r[aggregate.field]) || Number(r.count) || 0), 0);
+        } else {
+          // Take the first result's value
+          value = data[0][aggregate.field] ?? 0;
+        }
+      } else if (typeof ds.find === 'function') {
+        // Fallback: count records
+        const results = await ds.find(objectName, { $filter: filter });
+        const records = Array.isArray(results) ? results : results?.data || results?.records || [];
+        value = records.length;
+      } else {
+        return;
+      }
+
+      if (mounted.current) {
+        setFetchedValue(value);
+      }
+    } catch (e) {
+      console.error('[ObjectMetricWidget] Fetch error:', e);
+      if (mounted.current) {
+        setError(e instanceof Error ? e.message : 'Failed to load metric');
+      }
+    } finally {
+      if (mounted.current) setLoading(false);
+    }
+  }, [objectName, aggregate, filter]);
+
+  useEffect(() => {
+    const mounted = { current: true };
+
+    if (dataSource && objectName) {
+      fetchMetric(dataSource, mounted);
+    } else {
+      // Reset state when dataSource becomes unavailable so we fall back
+      // to the static fallbackValue instead of showing stale server data.
+      setFetchedValue(null);
+      setError(null);
+    }
+
+    return () => { mounted.current = false; };
+  }, [dataSource, objectName, fetchMetric]);
+
+  // Determine the display value:
+  // - If we fetched a value from the server, use it
+  // - If there's no data source, use the fallback (demo/static value)
+  const displayValue = fetchedValue !== null
+    ? fetchedValue
+    : (!dataSource ? (fallbackValue ?? '—') : '—');
+
+  return (
+    <MetricWidget
+      label={label}
+      value={displayValue}
+      trend={trend}
+      icon={icon}
+      className={className}
+      description={description}
+      loading={loading}
+      error={error}
+    />
+  );
+};