@object-ui/plugin-dashboard 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ObjectQL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,233 @@
+# @object-ui/plugin-dashboard
+
+Dashboard plugin for Object UI - Create beautiful dashboards with metrics, charts, and widgets.
+
+## Features
+
+- **Dashboard Layouts** - Grid-based dashboard layouts
+- **Metric Cards** - Display KPIs and statistics
+- **Widget System** - Modular widget components
+- **Responsive** - Mobile-friendly dashboard grids
+- **Customizable** - Tailwind CSS styling support
+
+## Installation
+
+```bash
+pnpm add @object-ui/plugin-dashboard
+```
+
+## Usage
+
+### Automatic Registration (Side-Effect Import)
+
+```typescript
+// In your app entry point (e.g., App.tsx or main.tsx)
+import '@object-ui/plugin-dashboard';
+
+// Now you can use dashboard types in your schemas
+const schema = {
+  type: 'dashboard',
+  widgets: [
+    {
+      type: 'metric-card',
+      title: 'Total Sales',
+      value: '$123,456',
+      trend: 'up',
+      trendValue: '+12%'
+    }
+  ]
+};
+```
+
+### Manual Registration
+
+```typescript
+import { dashboardComponents } from '@object-ui/plugin-dashboard';
+import { ComponentRegistry } from '@object-ui/core';
+
+// Register dashboard components
+Object.entries(dashboardComponents).forEach(([type, component]) => {
+  ComponentRegistry.register(type, component);
+});
+```
+
+## Schema API
+
+### Dashboard
+
+Container for dashboard widgets:
+
+```typescript
+{
+  type: 'dashboard',
+  widgets: Widget[],
+  columns?: number,               // Grid columns (default: 3)
+  gap?: number,                   // Gap between widgets
+  className?: string
+}
+```
+
+### Metric Card
+
+Display a single metric or KPI:
+
+```typescript
+{
+  type: 'metric-card',
+  title: string,
+  value: string | number,
+  icon?: string,                  // Lucide icon name
+  trend?: 'up' | 'down' | 'neutral',
+  trendValue?: string,
+  description?: string,
+  className?: string
+}
+```
+
+## Examples
+
+### Basic Dashboard
+
+```typescript
+const schema = {
+  type: 'dashboard',
+  columns: 3,
+  gap: 4,
+  widgets: [
+    {
+      type: 'metric-card',
+      title: 'Total Users',
+      value: '1,234',
+      icon: 'users',
+      trend: 'up',
+      trendValue: '+12%',
+      description: 'vs last month'
+    },
+    {
+      type: 'metric-card',
+      title: 'Revenue',
+      value: '$56,789',
+      icon: 'dollar-sign',
+      trend: 'up',
+      trendValue: '+8.2%',
+      description: 'vs last month'
+    },
+    {
+      type: 'metric-card',
+      title: 'Active Sessions',
+      value: '432',
+      icon: 'activity',
+      trend: 'down',
+      trendValue: '-3%',
+      description: 'vs last month'
+    }
+  ]
+};
+```
+
+### Dashboard with Charts
+
+```typescript
+const schema = {
+  type: 'dashboard',
+  widgets: [
+    {
+      type: 'metric-card',
+      title: 'Total Revenue',
+      value: '$123,456'
+    },
+    {
+      type: 'card',
+      title: 'Sales Trend',
+      body: {
+        type: 'line-chart',
+        data: [/* chart data */],
+        height: 300
+      }
+    },
+    {
+      type: 'card',
+      title: 'Category Distribution',
+      body: {
+        type: 'pie-chart',
+        data: [/* chart data */]
+      }
+    }
+  ]
+};
+```
+
+### Responsive Dashboard
+
+```typescript
+const schema = {
+  type: 'dashboard',
+  columns: 4,
+  gap: 6,
+  className: 'lg:grid-cols-4 md:grid-cols-2 sm:grid-cols-1',
+  widgets: [/* widgets */]
+};
+```
+
+## Integration with Data Sources
+
+Connect dashboard to live data:
+
+```typescript
+import { createObjectStackAdapter } from '@object-ui/data-objectstack';
+
+const dataSource = createObjectStackAdapter({
+  baseUrl: 'https://api.example.com',
+  token: 'your-auth-token'
+});
+
+const schema = {
+  type: 'dashboard',
+  dataSource,
+  widgets: [
+    {
+      type: 'metric-card',
+      title: 'Total Users',
+      value: '${data.metrics.totalUsers}',
+      trend: '${data.metrics.userTrend}'
+    }
+  ]
+};
+```
+
+## TypeScript Support
+
+```typescript
+import type { DashboardSchema, MetricCardSchema } from '@object-ui/plugin-dashboard';
+
+const metricCard: MetricCardSchema = {
+  type: 'metric-card',
+  title: 'Revenue',
+  value: '$123,456',
+  trend: 'up',
+  trendValue: '+12%'
+};
+
+const dashboard: DashboardSchema = {
+  type: 'dashboard',
+  columns: 3,
+  widgets: [metricCard]
+};
+```
+
+## Customization
+
+All components support Tailwind CSS classes:
+
+```typescript
+const schema = {
+  type: 'metric-card',
+  title: 'Custom Metric',
+  value: '100',
+  className: 'bg-gradient-to-r from-blue-500 to-purple-600 text-white'
+};
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}

package/dist/index.js

@@ -0,0 +1,362 @@
+import { ComponentRegistry as L } from "@object-ui/core";
+import te, { forwardRef as ae } from "react";
+import { SchemaRenderer as ne } from "@object-ui/react";
+import { cn as x, Card as oe, CardHeader as se, CardTitle as le, CardContent as ue } from "@object-ui/components";
+import { ArrowUpIcon as ce, ArrowDownIcon as ie, MinusIcon as fe } from "lucide-react";
+var v = { exports: {} }, b = {};
+var D;
+function me() {
+  if (D) return b;
+  D = 1;
+  var i = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.fragment");
+  function o(f, s, l) {
+    var u = null;
+    if (l !== void 0 && (u = "" + l), s.key !== void 0 && (u = "" + s.key), "key" in s) {
+      l = {};
+      for (var p in s)
+        p !== "key" && (l[p] = s[p]);
+    } else l = s;
+    return s = l.ref, {
+      $$typeof: i,
+      type: f,
+      key: u,
+      ref: s !== void 0 ? s : null,
+      props: l
+    };
+  }
+  return b.Fragment = m, b.jsx = o, b.jsxs = o, b;
+}
+var _ = {};
+var F;
+function de() {
+  return F || (F = 1, process.env.NODE_ENV !== "production" && (function() {
+    function i(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === K ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case T:
+          return "Fragment";
+        case J:
+          return "Profiler";
+        case q:
+          return "StrictMode";
+        case H:
+          return "Suspense";
+        case B:
+          return "SuspenseList";
+        case Q:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case V:
+            return "Portal";
+          case G:
+            return e.displayName || "Context";
+          case z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case X:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case Z:
+            return r = e.displayName || null, r !== null ? r : i(e.type) || "Memo";
+          case h:
+            r = e._payload, e = e._init;
+            try {
+              return i(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function m(e) {
+      return "" + e;
+    }
+    function o(e) {
+      try {
+        m(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          a
+        ), m(e);
+      }
+    }
+    function f(e) {
+      if (e === T) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === h)
+        return "<...>";
+      try {
+        var r = i(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = y.A;
+      return e === null ? null : e.getOwner();
+    }
+    function l() {
+      return Error("react-stack-top-frame");
+    }
+    function u(e) {
+      if (S.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, r) {
+      function t() {
+        P || (P = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function W() {
+      var e = i(this.type);
+      return C[e] || (C[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function U(e, r, t, a, R, j) {
+      var n = t.ref;
+      return e = {
+        $$typeof: O,
+        type: e,
+        key: r,
+        props: t,
+        _owner: a
+      }, (n !== void 0 ? n : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: W
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: R
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: j
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function k(e, r, t, a, R, j) {
+      var n = r.children;
+      if (n !== void 0)
+        if (a)
+          if (ee(n)) {
+            for (a = 0; a < n.length; a++)
+              N(n[a]);
+            Object.freeze && Object.freeze(n);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else N(n);
+      if (S.call(r, "key")) {
+        n = i(e);
+        var d = Object.keys(r).filter(function(re) {
+          return re !== "key";
+        });
+        a = 0 < d.length ? "{key: someKey, " + d.join(": ..., ") + ": ...}" : "{key: someKey}", I[n + a] || (d = 0 < d.length ? "{" + d.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          a,
+          n,
+          d,
+          n
+        ), I[n + a] = !0);
+      }
+      if (n = null, t !== void 0 && (o(t), n = "" + t), u(r) && (o(r.key), n = "" + r.key), "key" in r) {
+        t = {};
+        for (var w in r)
+          w !== "key" && (t[w] = r[w]);
+      } else t = r;
+      return n && p(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), U(
+        e,
+        n,
+        t,
+        s(),
+        R,
+        j
+      );
+    }
+    function N(e) {
+      A(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === h && (e._payload.status === "fulfilled" ? A(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function A(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === O;
+    }
+    var E = te, O = /* @__PURE__ */ Symbol.for("react.transitional.element"), V = /* @__PURE__ */ Symbol.for("react.portal"), T = /* @__PURE__ */ Symbol.for("react.fragment"), q = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), G = /* @__PURE__ */ Symbol.for("react.context"), X = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), B = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), h = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), y = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, S = Object.prototype.hasOwnProperty, ee = Array.isArray, g = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    E = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var P, C = {}, $ = E.react_stack_bottom_frame.bind(
+      E,
+      l
+    )(), Y = g(f(l)), I = {};
+    _.Fragment = T, _.jsx = function(e, r, t) {
+      var a = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return k(
+        e,
+        r,
+        t,
+        !1,
+        a ? Error("react-stack-top-frame") : $,
+        a ? g(f(e)) : Y
+      );
+    }, _.jsxs = function(e, r, t) {
+      var a = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return k(
+        e,
+        r,
+        t,
+        !0,
+        a ? Error("react-stack-top-frame") : $,
+        a ? g(f(e)) : Y
+      );
+    };
+  })()), _;
+}
+var M;
+function pe() {
+  return M || (M = 1, process.env.NODE_ENV === "production" ? v.exports = me() : v.exports = de()), v.exports;
+}
+var c = pe();
+const be = ae(
+  ({ schema: i, className: m, ...o }, f) => {
+    const s = i.columns || 3, l = i.gap || 4;
+    return /* @__PURE__ */ c.jsx(
+      "div",
+      {
+        ref: f,
+        className: x("grid", m),
+        style: {
+          gridTemplateColumns: `repeat(${s}, minmax(0, 1fr))`,
+          gap: `${l * 0.25}rem`
+        },
+        ...o,
+        children: i.widgets?.map((u) => /* @__PURE__ */ c.jsxs(
+          "div",
+          {
+            className: x("border rounded-lg p-4 bg-card text-card-foreground shadow-sm"),
+            style: u.layout ? {
+              gridColumn: `span ${u.layout.w}`,
+              gridRow: `span ${u.layout.h}`
+            } : void 0,
+            children: [
+              u.title && /* @__PURE__ */ c.jsx("h3", { className: "font-semibold mb-2", children: u.title }),
+              /* @__PURE__ */ c.jsx(ne, { schema: u.component })
+            ]
+          },
+          u.id
+        ))
+      }
+    );
+  }
+), _e = ({
+  label: i,
+  value: m,
+  trend: o,
+  icon: f,
+  className: s,
+  description: l,
+  ...u
+}) => /* @__PURE__ */ c.jsxs(oe, { className: x("h-full", s), ...u, children: [
+  /* @__PURE__ */ c.jsxs(se, { className: "flex flex-row items-center justify-between space-y-0 pb-2", children: [
+    /* @__PURE__ */ c.jsx(le, { className: "text-sm font-medium", children: i }),
+    f && /* @__PURE__ */ c.jsx("div", { className: "h-4 w-4 text-muted-foreground", children: f })
+  ] }),
+  /* @__PURE__ */ c.jsxs(ue, { children: [
+    /* @__PURE__ */ c.jsx("div", { className: "text-2xl font-bold", children: m }),
+    (o || l) && /* @__PURE__ */ c.jsxs("p", { className: "text-xs text-muted-foreground flex items-center mt-1", children: [
+      o && /* @__PURE__ */ c.jsxs("span", { className: x(
+        "flex items-center mr-2",
+        o.direction === "up" && "text-green-500",
+        o.direction === "down" && "text-red-500",
+        o.direction === "neutral" && "text-yellow-500"
+      ), children: [
+        o.direction === "up" && /* @__PURE__ */ c.jsx(ce, { className: "h-3 w-3 mr-1" }),
+        o.direction === "down" && /* @__PURE__ */ c.jsx(ie, { className: "h-3 w-3 mr-1" }),
+        o.direction === "neutral" && /* @__PURE__ */ c.jsx(fe, { className: "h-3 w-3 mr-1" }),
+        o.value,
+        "%"
+      ] }),
+      l || o?.label
+    ] })
+  ] })
+] });
+L.register(
+  "dashboard",
+  be,
+  {
+    label: "Dashboard",
+    category: "Complex",
+    icon: "layout-dashboard",
+    inputs: [
+      { name: "columns", type: "number", label: "Columns", defaultValue: 3 },
+      { name: "gap", type: "number", label: "Gap", defaultValue: 4 },
+      { name: "className", type: "string", label: "CSS Class" }
+    ],
+    defaultProps: {
+      columns: 3,
+      widgets: []
+    }
+  }
+);
+L.register(
+  "metric",
+  _e,
+  {
+    label: "Metric Card",
+    category: "Dashboard",
+    inputs: [
+      { name: "label", type: "string", label: "Label" },
+      { name: "value", type: "string", label: "Value" }
+    ]
+  }
+);
+export {
+  be as DashboardRenderer,
+  _e as MetricWidget
+};

package/dist/index.umd.cjs

@@ -0,0 +1,6 @@
+(function(f,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("@object-ui/core"),require("react"),require("@object-ui/react"),require("@object-ui/components"),require("lucide-react")):typeof define=="function"&&define.amd?define(["exports","@object-ui/core","react","@object-ui/react","@object-ui/components","lucide-react"],p):(f=typeof globalThis<"u"?globalThis:f||self,p(f.ObjectUIPluginDashboard={},f.ObjectUICore,f.React,f.ObjectUIReact,f.ObjectUIComponents,f.lucideReact))})(this,(function(f,p,N,z,m,h){"use strict";var x={exports:{}},E={};var A;function G(){if(A)return E;A=1;var i=Symbol.for("react.transitional.element"),b=Symbol.for("react.fragment");function o(d,l,c){var u=null;if(c!==void 0&&(u=""+c),l.key!==void 0&&(u=""+l.key),"key"in l){c={};for(var v in l)v!=="key"&&(c[v]=l[v])}else c=l;return l=c.ref,{$$typeof:i,type:d,key:u,ref:l!==void 0?l:null,props:c}}return E.Fragment=b,E.jsx=o,E.jsxs=o,E}var R={};var P;function X(){return P||(P=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case ee:return"Profiler";case K:return"StrictMode";case ne:return"Suspense";case oe:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case Q:return"Portal";case te:return e.displayName||"Context";case re:return(e._context.displayName||"Context")+".Consumer";case ae:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return r=e.displayName||null,r!==null?r:i(e.type)||"Memo";case g:r=e._payload,e=e._init;try{return i(e(r))}catch{}}return null}function b(e){return""+e}function o(e){try{b(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),b(e)}}function d(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===g)return"<...>";try{var r=i(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=w.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function u(e){if(F.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function v(e,r){function t(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function B(){var e=i(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function Z(e,r,t,a,j,k){var n=t.ref;return e={$$typeof:U,type:e,key:r,props:t,_owner:a},(n!==void 0?n:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:B}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:k}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function D(e,r,t,a,j,k){var n=r.children;if(n!==void 0)if(a)if(ue(n)){for(a=0;a<n.length;a++)$(n[a]);Object.freeze&&Object.freeze(n)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else $(n);if(F.call(r,"key")){n=i(e);var _=Object.keys(r).filter(function(ie){return ie!=="key"});a=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",J[n+a]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,a,n,_,n),J[n+a]=!0)}if(n=null,t!==void 0&&(o(t),n=""+t),u(r)&&(o(r.key),n=""+r.key),"key"in r){t={};for(var S in r)S!=="key"&&(t[S]=r[S])}else t=r;return n&&v(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),Z(e,n,t,l(),j,k)}function $(e){M(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===g&&(e._payload.status==="fulfilled"?M(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function M(e){return typeof e=="object"&&e!==null&&e.$$typeof===U}var T=N,U=Symbol.for("react.transitional.element"),Q=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),K=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),te=Symbol.for("react.context"),ae=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),oe=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),g=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),w=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,ue=Array.isArray,O=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var W,L={},q=T.react_stack_bottom_frame.bind(T,c)(),V=O(d(c)),J={};R.Fragment=y,R.jsx=function(e,r,t){var a=1e4>w.recentlyCreatedOwnerStacks++;return D(e,r,t,!1,a?Error("react-stack-top-frame"):q,a?O(d(e)):V)},R.jsxs=function(e,r,t){var a=1e4>w.recentlyCreatedOwnerStacks++;return D(e,r,t,!0,a?Error("react-stack-top-frame"):q,a?O(d(e)):V)}})()),R}var C;function H(){return C||(C=1,process.env.NODE_ENV==="production"?x.exports=G():x.exports=X()),x.exports}var s=H();const I=N.forwardRef(({schema:i,className:b,...o},d)=>{const l=i.columns||3,c=i.gap||4;return s.jsx("div",{ref:d,className:m.cn("grid",b),style:{gridTemplateColumns:`repeat(${l}, minmax(0, 1fr))`,gap:`${c*.25}rem`},...o,children:i.widgets?.map(u=>s.jsxs("div",{className:m.cn("border rounded-lg p-4 bg-card text-card-foreground shadow-sm"),style:u.layout?{gridColumn:`span ${u.layout.w}`,gridRow:`span ${u.layout.h}`}:void 0,children:[u.title&&s.jsx("h3",{className:"font-semibold mb-2",children:u.title}),s.jsx(z.SchemaRenderer,{schema:u.component})]},u.id))})}),Y=({label:i,value:b,trend:o,icon:d,className:l,description:c,...u})=>s.jsxs(m.Card,{className:m.cn("h-full",l),...u,children:[s.jsxs(m.CardHeader,{className:"flex flex-row items-center justify-between space-y-0 pb-2",children:[s.jsx(m.CardTitle,{className:"text-sm font-medium",children:i}),d&&s.jsx("div",{className:"h-4 w-4 text-muted-foreground",children:d})]}),s.jsxs(m.CardContent,{children:[s.jsx("div",{className:"text-2xl font-bold",children:b}),(o||c)&&s.jsxs("p",{className:"text-xs text-muted-foreground flex items-center mt-1",children:[o&&s.jsxs("span",{className:m.cn("flex items-center mr-2",o.direction==="up"&&"text-green-500",o.direction==="down"&&"text-red-500",o.direction==="neutral"&&"text-yellow-500"),children:[o.direction==="up"&&s.jsx(h.ArrowUpIcon,{className:"h-3 w-3 mr-1"}),o.direction==="down"&&s.jsx(h.ArrowDownIcon,{className:"h-3 w-3 mr-1"}),o.direction==="neutral"&&s.jsx(h.MinusIcon,{className:"h-3 w-3 mr-1"}),o.value,"%"]}),c||o?.label]})]})]});p.ComponentRegistry.register("dashboard",I,{label:"Dashboard",category:"Complex",icon:"layout-dashboard",inputs:[{name:"columns",type:"number",label:"Columns",defaultValue:3},{name:"gap",type:"number",label:"Gap",defaultValue:4},{name:"className",type:"string",label:"CSS Class"}],defaultProps:{columns:3,widgets:[]}}),p.ComponentRegistry.register("metric",Y,{label:"Metric Card",category:"Dashboard",inputs:[{name:"label",type:"string",label:"Label"},{name:"value",type:"string",label:"Value"}]}),f.DashboardRenderer=I,f.MetricWidget=Y,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));

package/dist/src/DashboardRenderer.d.ts

@@ -0,0 +1,7 @@
+import { DashboardSchema } from '@object-ui/types';
+export declare const DashboardRenderer: import('react').ForwardRefExoticComponent<Omit<{
+    [key: string]: any;
+    schema: DashboardSchema;
+    className?: string;
+}, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=DashboardRenderer.d.ts.map

package/dist/src/DashboardRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardRenderer.d.ts","sourceRoot":"","sources":["../../src/DashboardRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,kBAAkB,CAAC;AAK/E,eAAO,MAAM,iBAAiB;;YAAwC,eAAe;gBAAc,MAAM;0DAkCxG,CAAC"}

package/dist/src/MetricWidget.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface MetricWidgetProps {
+    label: string;
+    value: string | number;
+    trend?: {
+        value: number;
+        label?: string;
+        direction?: 'up' | 'down' | 'neutral';
+    };
+    icon?: React.ReactNode;
+    className?: string;
+    description?: string;
+}
+export declare const MetricWidget: ({ label, value, trend, icon, className, description, ...props }: MetricWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricWidget.d.ts.map

package/dist/src/MetricWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricWidget.d.ts","sourceRoot":"","sources":["../../src/MetricWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;KACvC,CAAC;IACF,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,GAAI,iEAQ1B,iBAAiB,4CAgCnB,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,4 @@
+import { DashboardRenderer } from './DashboardRenderer';
+import { MetricWidget } from './MetricWidget';
+export { DashboardRenderer, MetricWidget };
+//# sourceMappingURL=index.d.ts.map

package/dist/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,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@object-ui/plugin-dashboard",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Dashboard plugin for Object UI",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.563.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1",
+    "@object-ui/components": "0.3.0",
+    "@object-ui/core": "0.3.0",
+    "@object-ui/react": "0.3.0",
+    "@object-ui/types": "0.3.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.7.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
+}

package/src/DashboardRenderer.tsx

@@ -0,0 +1,49 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import type { DashboardSchema, DashboardWidgetSchema } from '@object-ui/types';
+import { SchemaRenderer } from '@object-ui/react';
+import { cn } from '@object-ui/components';
+import { forwardRef } from 'react';
+
+export const DashboardRenderer = forwardRef<HTMLDivElement, { schema: DashboardSchema; className?: string; [key: string]: any }>(
+  ({ schema, className, ...props }, ref) => {
+    const columns = schema.columns || 3;
+    const gap = schema.gap || 4;
+
+    // Use style to convert gap number to pixels or use tailwind classes if possible
+    // Here using inline style for grid gap which maps to 0.25rem * 4 * gap = gap rem
+    
+    return (
+      <div 
+        ref={ref} 
+        className={cn("grid", className)} 
+        style={{
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gap: `${gap * 0.25}rem`
+        }}
+        {...props}
+      >
+        {schema.widgets?.map((widget: DashboardWidgetSchema) => (
+            <div 
+                key={widget.id} 
+                className={cn("border rounded-lg p-4 bg-card text-card-foreground shadow-sm")}
+                style={widget.layout ? {
+                    gridColumn: `span ${widget.layout.w}`,
+                    gridRow: `span ${widget.layout.h}`
+                }: undefined}
+            >
+                {widget.title && <h3 className="font-semibold mb-2">{widget.title}</h3>}
+                <SchemaRenderer schema={widget.component} />
+            </div>
+        ))}
+      </div>
+    );
+  }
+);

package/src/MetricWidget.tsx

@@ -0,0 +1,59 @@
+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';
+
+export interface MetricWidgetProps {
+  label: string;
+  value: string | number;
+  trend?: {
+    value: number;
+    label?: string;
+    direction?: 'up' | 'down' | 'neutral';
+  };
+  icon?: React.ReactNode;
+  className?: string;
+  description?: string;
+}
+
+export const MetricWidget = ({
+  label,
+  value,
+  trend,
+  icon,
+  className,
+  description,
+  ...props
+}: MetricWidgetProps) => {
+  return (
+    <Card className={cn("h-full", className)} {...props}>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">
+          {label}
+        </CardTitle>
+        {icon && <div className="h-4 w-4 text-muted-foreground">{icon}</div>}
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        {(trend || description) && (
+          <p className="text-xs text-muted-foreground flex items-center mt-1">
+            {trend && (
+              <span className={cn(
+                "flex items-center mr-2",
+                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>
+            )}
+            {description || trend?.label}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/index.tsx

@@ -0,0 +1,47 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import { DashboardRenderer } from './DashboardRenderer';
+import { MetricWidget } from './MetricWidget';
+
+export { DashboardRenderer, MetricWidget };
+
+// Register dashboard component
+ComponentRegistry.register(
+  'dashboard',
+  DashboardRenderer,
+  {
+    label: 'Dashboard',
+    category: 'Complex',
+    icon: 'layout-dashboard',
+    inputs: [
+      { name: 'columns', type: 'number', label: 'Columns', defaultValue: 3 },
+      { name: 'gap', type: 'number', label: 'Gap', defaultValue: 4 },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+        columns: 3,
+        widgets: []
+    }
+  }
+);
+
+// Register metric component
+ComponentRegistry.register(
+  'metric',
+  MetricWidget,
+  {
+    label: 'Metric Card',
+    category: 'Dashboard',
+    inputs: [
+        { name: 'label', type: 'string', label: 'Label' },
+        { name: 'value', type: 'string', label: 'Value' },
+    ]
+  }
+);

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    // Removed explicit rootDir to prevent file not under rootDir errors when importing from workspace dependencies
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginDashboard',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        '@object-ui/components',
+        '@object-ui/core',
+        '@object-ui/react',
+        '@object-ui/types',
+        'tailwind-merge',
+        'clsx',
+        'lucide-react'
+      ],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+          '@object-ui/types': 'ObjectUITypes',
+        },
+      },
+    },
+  },
+});