@object-ui/plugin-designer 0.1.0 → 2.0.0

package/dist/index.js

@@ -1,335 +1,335 @@
-import { ComponentRegistry as G } from "@object-ui/core";
-import xe, { useState as A, useMemo as Z, useCallback as P, createContext as fe } from "react";
-import { Plus as K, Undo2 as be, Redo2 as ge, Eye as ye, GripVertical as ve, Trash2 as L, Layers as we, Database as le, Link2 as je, GitBranch as Ne, Play as Ee, Square as oe, Diamond as ke, FileText as Re, Type as Te, ImageIcon as _e, BarChart3 as Se, Table2 as Ae } from "lucide-react";
-import { clsx as M } from "clsx";
-import { twMerge as Y } from "tailwind-merge";
-var F = { exports: {} }, $ = {};
-var ne;
-function Pe() {
-  if (ne) return $;
-  ne = 1;
-  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
-  function p(w, i, d) {
-    var x = null;
-    if (d !== void 0 && (x = "" + d), i.key !== void 0 && (x = "" + i.key), "key" in i) {
-      d = {};
-      for (var E in i)
-        E !== "key" && (d[E] = i[E]);
-    } else d = i;
-    return i = d.ref, {
-      $$typeof: l,
-      type: w,
-      key: x,
-      ref: i !== void 0 ? i : null,
-      props: d
+import { ComponentRegistry as Z } from "@object-ui/core";
+import ve, { useState as F, useMemo as ae, useCallback as D, createContext as je } from "react";
+import { Plus as Y, Undo2 as we, Redo2 as Ne, Eye as be, GripVertical as ge, Trash2 as G, Layers as ye, Database as de, Link2 as ke, GitBranch as Ee, Play as Se, Square as ce, Diamond as Ce, FileText as Te, Type as Re, ImageIcon as _e, BarChart3 as Ae, Table2 as Pe, Settings2 as De, X as Fe, Save as $e, LayoutGrid as Ie, Kanban as Ve, Image as Le, Calendar as ze, Clock as Ge, GanttChart as Me, Map as Ye, Columns3 as Ue, ArrowUp as We, ArrowDown as qe, EyeOff as He } from "lucide-react";
+import { clsx as K } from "clsx";
+import { twMerge as Q } from "tailwind-merge";
+var re = { exports: {} }, J = {};
+var ue;
+function Be() {
+  if (ue) return J;
+  ue = 1;
+  var i = /* @__PURE__ */ Symbol.for("react.transitional.element"), g = /* @__PURE__ */ Symbol.for("react.fragment");
+  function w(T, h, b) {
+    var N = null;
+    if (b !== void 0 && (N = "" + b), h.key !== void 0 && (N = "" + h.key), "key" in h) {
+      b = {};
+      for (var c in h)
+        c !== "key" && (b[c] = h[c]);
+    } else b = h;
+    return h = b.ref, {
+      $$typeof: i,
+      type: T,
+      key: N,
+      ref: h !== void 0 ? h : null,
+      props: b
     };
   }
-  return $.Fragment = u, $.jsx = p, $.jsxs = p, $;
+  return J.Fragment = g, J.jsx = w, J.jsxs = w, J;
 }
-var z = {};
-var ie;
-function Ce() {
-  return ie || (ie = 1, process.env.NODE_ENV !== "production" && (function() {
-    function l(t) {
-      if (t == null) return null;
-      if (typeof t == "function")
-        return t.$$typeof === pe ? null : t.displayName || t.name || null;
-      if (typeof t == "string") return t;
-      switch (t) {
-        case o:
+var X = {};
+var me;
+function Je() {
+  return me || (me = 1, process.env.NODE_ENV !== "production" && (function() {
+    function i(r) {
+      if (r == null) return null;
+      if (typeof r == "function")
+        return r.$$typeof === z ? null : r.displayName || r.name || null;
+      if (typeof r == "string") return r;
+      switch (r) {
+        case u:
           return "Fragment";
-        case c:
+        case x:
           return "Profiler";
-        case r:
+        case a:
           return "StrictMode";
-        case h:
-          return "Suspense";
         case f:
+          return "Suspense";
+        case p:
           return "SuspenseList";
-        case V:
+        case L:
           return "Activity";
       }
-      if (typeof t == "object")
-        switch (typeof t.tag == "number" && console.error(
+      if (typeof r == "object")
+        switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), t.$$typeof) {
-          case S:
+        ), r.$$typeof) {
+          case k:
             return "Portal";
-          case T:
-            return t.displayName || "Context";
-          case s:
-            return (t._context.displayName || "Context") + ".Consumer";
-          case m:
-            var a = t.render;
-            return t = t.displayName, t || (t = a.displayName || a.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
-          case C:
-            return a = t.displayName || null, a !== null ? a : l(t.type) || "Memo";
-          case D:
-            a = t._payload, t = t._init;
+          case A:
+            return r.displayName || "Context";
+          case o:
+            return (r._context.displayName || "Context") + ".Consumer";
+          case j:
+            var d = r.render;
+            return r = r.displayName, r || (r = d.displayName || d.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case V:
+            return d = r.displayName || null, d !== null ? d : i(r.type) || "Memo";
+          case $:
+            d = r._payload, r = r._init;
             try {
-              return l(t(a));
+              return i(r(d));
             } catch {
             }
         }
       return null;
     }
-    function u(t) {
-      return "" + t;
+    function g(r) {
+      return "" + r;
     }
-    function p(t) {
+    function w(r) {
       try {
-        u(t);
-        var a = !1;
+        g(r);
+        var d = !1;
       } catch {
-        a = !0;
+        d = !0;
       }
-      if (a) {
-        a = console;
-        var y = a.error, j = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
-        return y.call(
-          a,
+      if (d) {
+        d = console;
+        var S = d.error, P = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return S.call(
+          d,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          j
-        ), u(t);
+          P
+        ), g(r);
       }
     }
-    function w(t) {
-      if (t === o) return "<>";
-      if (typeof t == "object" && t !== null && t.$$typeof === D)
+    function T(r) {
+      if (r === u) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === $)
         return "<...>";
       try {
-        var a = l(t);
-        return a ? "<" + a + ">" : "<...>";
+        var d = i(r);
+        return d ? "<" + d + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function i() {
-      var t = U.A;
-      return t === null ? null : t.getOwner();
+    function h() {
+      var r = U.A;
+      return r === null ? null : r.getOwner();
     }
-    function d() {
+    function b() {
       return Error("react-stack-top-frame");
     }
-    function x(t) {
-      if (Q.call(t, "key")) {
-        var a = Object.getOwnPropertyDescriptor(t, "key").get;
-        if (a && a.isReactWarning) return !1;
+    function N(r) {
+      if (W.call(r, "key")) {
+        var d = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (d && d.isReactWarning) return !1;
       }
-      return t.key !== void 0;
+      return r.key !== void 0;
     }
-    function E(t, a) {
-      function y() {
-        ee || (ee = !0, console.error(
+    function c(r, d) {
+      function S() {
+        O || (O = !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)",
-          a
+          d
         ));
       }
-      y.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: y,
+      S.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: S,
         configurable: !0
       });
     }
-    function n() {
-      var t = l(this.type);
-      return te[t] || (te[t] = !0, console.error(
+    function m() {
+      var r = i(this.type);
+      return H[r] || (H[r] = !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."
-      )), t = this.props.ref, t !== void 0 ? t : null;
+      )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function _(t, a, y, j, I, q) {
-      var N = y.ref;
-      return t = {
-        $$typeof: v,
-        type: t,
-        key: a,
-        props: y,
-        _owner: j
-      }, (N !== void 0 ? N : null) !== null ? Object.defineProperty(t, "ref", {
+    function l(r, d, S, P, t, n) {
+      var s = S.ref;
+      return r = {
+        $$typeof: C,
+        type: r,
+        key: d,
+        props: S,
+        _owner: P
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: n
-      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        get: m
+      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(t, "_debugInfo", {
+      }), Object.defineProperty(r, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(t, "_debugStack", {
+      }), Object.defineProperty(r, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: I
-      }), Object.defineProperty(t, "_debugTask", {
+        value: t
+      }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: q
-      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+        value: n
+      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function b(t, a, y, j, I, q) {
-      var N = a.children;
-      if (N !== void 0)
-        if (j)
-          if (he(N)) {
-            for (j = 0; j < N.length; j++)
-              k(N[j]);
-            Object.freeze && Object.freeze(N);
+    function y(r, d, S, P, t, n) {
+      var s = d.children;
+      if (s !== void 0)
+        if (P)
+          if (le(s)) {
+            for (P = 0; P < s.length; P++)
+              _(s[P]);
+            Object.freeze && Object.freeze(s);
           } 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 k(N);
-      if (Q.call(a, "key")) {
-        N = l(t);
-        var O = Object.keys(a).filter(function(me) {
-          return me !== "key";
+        else _(s);
+      if (W.call(d, "key")) {
+        s = i(r);
+        var v = Object.keys(d).filter(function(B) {
+          return B !== "key";
         });
-        j = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", ae[N + j] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
+        P = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", M[s + P] || (v = 0 < v.length ? "{" + v.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} />`,
-          j,
-          N,
-          O,
-          N
-        ), ae[N + j] = !0);
+          P,
+          s,
+          v,
+          s
+        ), M[s + P] = !0);
       }
-      if (N = null, y !== void 0 && (p(y), N = "" + y), x(a) && (p(a.key), N = "" + a.key), "key" in a) {
-        y = {};
-        for (var H in a)
-          H !== "key" && (y[H] = a[H]);
-      } else y = a;
-      return N && E(
-        y,
-        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
-      ), _(
+      if (s = null, S !== void 0 && (w(S), s = "" + S), N(d) && (w(d.key), s = "" + d.key), "key" in d) {
+        S = {};
+        for (var I in d)
+          I !== "key" && (S[I] = d[I]);
+      } else S = d;
+      return s && c(
+        S,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      ), l(
+        r,
+        s,
+        S,
+        h(),
         t,
-        N,
-        y,
-        i(),
-        I,
-        q
+        n
       );
     }
-    function k(t) {
-      g(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === D && (t._payload.status === "fulfilled" ? g(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
+    function _(r) {
+      E(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === $ && (r._payload.status === "fulfilled" ? E(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
     }
-    function g(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === v;
+    function E(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === C;
     }
-    var R = xe, v = /* @__PURE__ */ Symbol.for("react.transitional.element"), S = /* @__PURE__ */ Symbol.for("react.portal"), o = /* @__PURE__ */ Symbol.for("react.fragment"), r = /* @__PURE__ */ Symbol.for("react.strict_mode"), c = /* @__PURE__ */ Symbol.for("react.profiler"), s = /* @__PURE__ */ Symbol.for("react.consumer"), T = /* @__PURE__ */ Symbol.for("react.context"), m = /* @__PURE__ */ Symbol.for("react.forward_ref"), h = /* @__PURE__ */ Symbol.for("react.suspense"), f = /* @__PURE__ */ Symbol.for("react.suspense_list"), C = /* @__PURE__ */ Symbol.for("react.memo"), D = /* @__PURE__ */ Symbol.for("react.lazy"), V = /* @__PURE__ */ Symbol.for("react.activity"), pe = /* @__PURE__ */ Symbol.for("react.client.reference"), U = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, Q = Object.prototype.hasOwnProperty, he = Array.isArray, W = console.createTask ? console.createTask : function() {
+    var R = ve, C = /* @__PURE__ */ Symbol.for("react.transitional.element"), k = /* @__PURE__ */ Symbol.for("react.portal"), u = /* @__PURE__ */ Symbol.for("react.fragment"), a = /* @__PURE__ */ Symbol.for("react.strict_mode"), x = /* @__PURE__ */ Symbol.for("react.profiler"), o = /* @__PURE__ */ Symbol.for("react.consumer"), A = /* @__PURE__ */ Symbol.for("react.context"), j = /* @__PURE__ */ Symbol.for("react.forward_ref"), f = /* @__PURE__ */ Symbol.for("react.suspense"), p = /* @__PURE__ */ Symbol.for("react.suspense_list"), V = /* @__PURE__ */ Symbol.for("react.memo"), $ = /* @__PURE__ */ Symbol.for("react.lazy"), L = /* @__PURE__ */ Symbol.for("react.activity"), z = /* @__PURE__ */ Symbol.for("react.client.reference"), U = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, le = Array.isArray, q = console.createTask ? console.createTask : function() {
       return null;
     };
     R = {
-      react_stack_bottom_frame: function(t) {
-        return t();
+      react_stack_bottom_frame: function(r) {
+        return r();
       }
     };
-    var ee, te = {}, re = R.react_stack_bottom_frame.bind(
+    var O, H = {}, ee = R.react_stack_bottom_frame.bind(
       R,
-      d
-    )(), se = W(w(d)), ae = {};
-    z.Fragment = o, z.jsx = function(t, a, y) {
-      var j = 1e4 > U.recentlyCreatedOwnerStacks++;
-      return b(
-        t,
-        a,
-        y,
+      b
+    )(), te = q(T(b)), M = {};
+    X.Fragment = u, X.jsx = function(r, d, S) {
+      var P = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return y(
+        r,
+        d,
+        S,
         !1,
-        j ? Error("react-stack-top-frame") : re,
-        j ? W(w(t)) : se
+        P ? Error("react-stack-top-frame") : ee,
+        P ? q(T(r)) : te
       );
-    }, z.jsxs = function(t, a, y) {
-      var j = 1e4 > U.recentlyCreatedOwnerStacks++;
-      return b(
-        t,
-        a,
-        y,
+    }, X.jsxs = function(r, d, S) {
+      var P = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return y(
+        r,
+        d,
+        S,
         !0,
-        j ? Error("react-stack-top-frame") : re,
-        j ? W(w(t)) : se
+        P ? Error("react-stack-top-frame") : ee,
+        P ? q(T(r)) : te
       );
     };
-  })()), z;
+  })()), X;
 }
-var de;
-function De() {
-  return de || (de = 1, process.env.NODE_ENV === "production" ? F.exports = Pe() : F.exports = Ce()), F.exports;
+var xe;
+function Xe() {
+  return xe || (xe = 1, process.env.NODE_ENV === "production" ? re.exports = Be() : re.exports = Je()), re.exports;
 }
-var e = De();
-function J(...l) {
-  return Y(M(l));
+var e = Xe();
+function ne(...i) {
+  return Q(K(i));
 }
-function Oe({
-  canvas: l = { width: 1200, height: 800, gridSize: 8, showGrid: !0, snapToGrid: !0 },
-  components: u = [],
-  palette: p = $e,
-  showComponentTree: w = !0,
-  undoRedo: i = !0,
-  readOnly: d = !1,
-  onChange: x,
-  className: E
+function Ze({
+  canvas: i = { width: 1200, height: 800, gridSize: 8, showGrid: !0, snapToGrid: !0 },
+  components: g = [],
+  palette: w = Ke,
+  showComponentTree: T = !0,
+  undoRedo: h = !0,
+  readOnly: b = !1,
+  onChange: N,
+  className: c
 }) {
-  const [n, _] = A(u), [b, k] = A(null), [g, R] = A(l.zoom ?? 1), v = Z(
-    () => n.find((r) => r.id === b),
-    [n, b]
-  ), S = P(
-    (r, c) => {
-      if (d) return;
-      const s = {
+  const [m, l] = F(g), [y, _] = F(null), [E, R] = F(i.zoom ?? 1), C = ae(
+    () => m.find((a) => a.id === y),
+    [m, y]
+  ), k = D(
+    (a, x) => {
+      if (b) return;
+      const o = {
         id: `comp-${Date.now()}`,
-        type: r,
-        label: c,
+        type: a,
+        label: x,
         position: { x: 100, y: 100, width: 200, height: 100 },
         props: {}
-      }, T = [...n, s];
-      _(T), k(s.id), x?.(T);
+      }, A = [...m, o];
+      l(A), _(o.id), N?.(A);
     },
-    [n, d, x]
-  ), o = P(
-    (r) => {
-      if (d) return;
-      const c = n.filter((s) => s.id !== r);
-      _(c), b === r && k(null), x?.(c);
+    [m, b, N]
+  ), u = D(
+    (a) => {
+      if (b) return;
+      const x = m.filter((o) => o.id !== a);
+      l(x), y === a && _(null), N?.(x);
     },
-    [n, b, d, x]
+    [m, y, b, N]
   );
-  return /* @__PURE__ */ e.jsxs("div", { className: J("flex h-full w-full border rounded-lg overflow-hidden bg-background", E), children: [
-    !d && /* @__PURE__ */ e.jsxs("div", { className: "w-60 border-r bg-muted/30 flex flex-col", children: [
+  return /* @__PURE__ */ e.jsxs("div", { className: ne("flex h-full w-full border rounded-lg overflow-hidden bg-background", c), children: [
+    !b && /* @__PURE__ */ e.jsxs("div", { className: "w-60 border-r bg-muted/30 flex flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "p-3 border-b font-medium text-sm", children: "Components" }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: p.map((r) => /* @__PURE__ */ e.jsxs("div", { className: "mb-3", children: [
-        /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium text-muted-foreground px-2 py-1 uppercase", children: r.label }),
-        r.items.map((c) => /* @__PURE__ */ e.jsxs(
+      /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: w.map((a) => /* @__PURE__ */ e.jsxs("div", { className: "mb-3", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium text-muted-foreground px-2 py-1 uppercase", children: a.label }),
+        a.items.map((x) => /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => S(c.type, c.label),
+            onClick: () => k(x.type, x.label),
             className: "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left",
             children: [
-              /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" }),
-              c.label
+              /* @__PURE__ */ e.jsx(Y, { className: "h-3 w-3" }),
+              x.label
             ]
           },
-          c.type
+          x.type
         ))
-      ] }, r.name)) })
+      ] }, a.name)) })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
-        i && !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-          /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Undo", children: /* @__PURE__ */ e.jsx(be, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Redo", children: /* @__PURE__ */ e.jsx(ge, { className: "h-4 w-4" }) }),
+        h && !b && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Undo", children: /* @__PURE__ */ e.jsx(we, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Redo", children: /* @__PURE__ */ e.jsx(Ne, { className: "h-4 w-4" }) }),
           /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" })
         ] }),
-        /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Preview", children: /* @__PURE__ */ e.jsx(ye, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Preview", children: /* @__PURE__ */ e.jsx(be, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
         /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          Math.round(g * 100),
+          Math.round(E * 100),
           "%"
         ] })
       ] }),
@@ -338,94 +338,94 @@ function Oe({
         {
           className: "relative bg-background border rounded shadow-sm mx-auto",
           style: {
-            width: l.width * g,
-            height: l.height * g,
-            backgroundImage: l.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
-            backgroundSize: l.showGrid && l.gridSize ? `${l.gridSize * g}px ${l.gridSize * g}px` : void 0
+            width: i.width * E,
+            height: i.height * E,
+            backgroundImage: i.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
+            backgroundSize: i.showGrid && i.gridSize ? `${i.gridSize * E}px ${i.gridSize * E}px` : void 0
           },
-          children: n.map((r) => /* @__PURE__ */ e.jsxs(
+          children: m.map((a) => /* @__PURE__ */ e.jsxs(
             "div",
             {
-              className: J(
+              className: ne(
                 "absolute border rounded cursor-move select-none transition-shadow",
-                b === r.id ? "border-primary ring-2 ring-primary/20 shadow-md" : "border-border hover:border-primary/50"
+                y === a.id ? "border-primary ring-2 ring-primary/20 shadow-md" : "border-border hover:border-primary/50"
               ),
               style: {
-                left: r.position.x * g,
-                top: r.position.y * g,
-                width: typeof r.position.width == "number" ? r.position.width * g : r.position.width,
-                height: typeof r.position.height == "number" ? r.position.height * g : r.position.height
+                left: a.position.x * E,
+                top: a.position.y * E,
+                width: typeof a.position.width == "number" ? a.position.width * E : a.position.width,
+                height: typeof a.position.height == "number" ? a.position.height * E : a.position.height
               },
-              onClick: () => k(r.id),
+              onClick: () => _(a.id),
               children: [
                 /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 px-2 py-1 bg-muted/50 text-xs border-b", children: [
-                  /* @__PURE__ */ e.jsx(ve, { className: "h-3 w-3 text-muted-foreground" }),
-                  /* @__PURE__ */ e.jsx("span", { className: "truncate", children: r.label ?? r.type }),
-                  !d && /* @__PURE__ */ e.jsx(
+                  /* @__PURE__ */ e.jsx(ge, { className: "h-3 w-3 text-muted-foreground" }),
+                  /* @__PURE__ */ e.jsx("span", { className: "truncate", children: a.label ?? a.type }),
+                  !b && /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: (c) => {
-                        c.stopPropagation(), o(r.id);
+                      onClick: (x) => {
+                        x.stopPropagation(), u(a.id);
                       },
                       className: "ml-auto p-0.5 rounded hover:bg-destructive/10",
-                      children: /* @__PURE__ */ e.jsx(L, { className: "h-3 w-3 text-destructive" })
+                      children: /* @__PURE__ */ e.jsx(G, { className: "h-3 w-3 text-destructive" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e.jsx("div", { className: "p-2 text-xs text-muted-foreground", children: r.type })
+                /* @__PURE__ */ e.jsx("div", { className: "p-2 text-xs text-muted-foreground", children: a.type })
               ]
             },
-            r.id
+            a.id
           ))
         }
       ) })
     ] }),
-    w && /* @__PURE__ */ e.jsxs("div", { className: "w-60 border-l bg-muted/30 flex flex-col", children: [
+    T && /* @__PURE__ */ e.jsxs("div", { className: "w-60 border-l bg-muted/30 flex flex-col", children: [
       /* @__PURE__ */ e.jsxs("div", { className: "p-3 border-b font-medium text-sm flex items-center gap-2", children: [
-        /* @__PURE__ */ e.jsx(we, { className: "h-4 w-4" }),
+        /* @__PURE__ */ e.jsx(ye, { className: "h-4 w-4" }),
         "Component Tree"
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: n.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: "No components added yet" }) : n.map((r) => /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: m.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: "No components added yet" }) : m.map((a) => /* @__PURE__ */ e.jsx(
         "button",
         {
-          onClick: () => k(r.id),
-          className: J(
+          onClick: () => _(a.id),
+          className: ne(
             "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded text-left",
-            b === r.id ? "bg-accent" : "hover:bg-accent/50"
+            y === a.id ? "bg-accent" : "hover:bg-accent/50"
           ),
-          children: /* @__PURE__ */ e.jsx("span", { className: "truncate", children: r.label ?? r.type })
+          children: /* @__PURE__ */ e.jsx("span", { className: "truncate", children: a.label ?? a.type })
         },
-        r.id
+        a.id
       )) }),
-      v && /* @__PURE__ */ e.jsxs("div", { className: "border-t p-3", children: [
+      C && /* @__PURE__ */ e.jsxs("div", { className: "border-t p-3", children: [
         /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium mb-2", children: "Properties" }),
         /* @__PURE__ */ e.jsxs("div", { className: "text-xs text-muted-foreground space-y-1", children: [
           /* @__PURE__ */ e.jsxs("div", { children: [
             "Type: ",
-            v.type
+            C.type
           ] }),
           /* @__PURE__ */ e.jsxs("div", { children: [
             "ID: ",
-            v.id
+            C.id
           ] }),
           /* @__PURE__ */ e.jsxs("div", { children: [
             "Position: ",
-            v.position.x,
+            C.position.x,
             ", ",
-            v.position.y
+            C.position.y
           ] }),
           /* @__PURE__ */ e.jsxs("div", { children: [
             "Size: ",
-            v.position.width,
+            C.position.width,
             " × ",
-            v.position.height
+            C.position.height
           ] })
         ] })
       ] })
     ] })
   ] });
 }
-const $e = [
+const Ke = [
   {
     name: "layout",
     label: "Layout",
@@ -459,56 +459,56 @@ const $e = [
     ]
   }
 ];
-function B(...l) {
-  return Y(M(l));
+function oe(...i) {
+  return Q(K(i));
 }
-function ze({
-  entities: l = [],
-  relationships: u = [],
-  canvas: p = { width: 1200, height: 800, showGrid: !0 },
-  showRelationshipLabels: w = !0,
-  readOnly: i = !1,
-  onEntitiesChange: d,
-  onRelationshipsChange: x,
-  className: E
+function Qe({
+  entities: i = [],
+  relationships: g = [],
+  canvas: w = { width: 1200, height: 800, showGrid: !0 },
+  showRelationshipLabels: T = !0,
+  readOnly: h = !1,
+  onEntitiesChange: b,
+  onRelationshipsChange: N,
+  className: c
 }) {
-  const [n, _] = A(l), [b, k] = A(u), [g, R] = A(null), v = P(() => {
-    if (i) return;
-    const o = {
+  const [m, l] = F(i), [y, _] = F(g), [E, R] = F(null), C = D(() => {
+    if (h) return;
+    const u = {
       id: `entity-${Date.now()}`,
-      name: `new_entity_${n.length + 1}`,
-      label: `New Entity ${n.length + 1}`,
+      name: `new_entity_${m.length + 1}`,
+      label: `New Entity ${m.length + 1}`,
       fields: [
         { name: "id", type: "uuid", primaryKey: !0, required: !0 },
         { name: "created_at", type: "datetime", required: !0 },
         { name: "updated_at", type: "datetime", required: !0 }
       ],
-      position: { x: 50 + n.length % 4 * 280, y: 50 + Math.floor(n.length / 4) * 250 }
-    }, r = [...n, o];
-    _(r), R(o.id), d?.(r);
-  }, [n, i, d]), S = P(
-    (o) => {
-      if (i) return;
-      const r = n.filter((s) => s.id !== o), c = b.filter(
-        (s) => s.sourceEntity !== o && s.targetEntity !== o
+      position: { x: 50 + m.length % 4 * 280, y: 50 + Math.floor(m.length / 4) * 250 }
+    }, a = [...m, u];
+    l(a), R(u.id), b?.(a);
+  }, [m, h, b]), k = D(
+    (u) => {
+      if (h) return;
+      const a = m.filter((o) => o.id !== u), x = y.filter(
+        (o) => o.sourceEntity !== u && o.targetEntity !== u
       );
-      _(r), k(c), g === o && R(null), d?.(r), x?.(c);
+      l(a), _(x), E === u && R(null), b?.(a), N?.(x);
     },
-    [n, b, g, i, d, x]
+    [m, y, E, h, b, N]
   );
-  return /* @__PURE__ */ e.jsx("div", { className: B("flex h-full w-full border rounded-lg overflow-hidden bg-background", E), children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full", children: [
+  return /* @__PURE__ */ e.jsx("div", { className: oe("flex h-full w-full border rounded-lg overflow-hidden bg-background", c), children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col w-full", children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
-      /* @__PURE__ */ e.jsx(le, { className: "h-4 w-4" }),
+      /* @__PURE__ */ e.jsx(de, { className: "h-4 w-4" }),
       /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: "Data Model Designer" }),
       /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
-      !i && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      !h && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: v,
+            onClick: C,
             className: "flex items-center gap-1 px-2 py-1 text-xs rounded bg-primary text-primary-foreground hover:bg-primary/90",
             children: [
-              /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" }),
+              /* @__PURE__ */ e.jsx(Y, { className: "h-3 w-3" }),
               " Add Entity"
             ]
           }
@@ -518,7 +518,7 @@ function ze({
           {
             className: "flex items-center gap-1 px-2 py-1 text-xs rounded bg-secondary text-secondary-foreground hover:bg-secondary/80",
             children: [
-              /* @__PURE__ */ e.jsx(je, { className: "h-3 w-3" }),
+              /* @__PURE__ */ e.jsx(ke, { className: "h-3 w-3" }),
               " Add Relationship"
             ]
           }
@@ -530,141 +530,141 @@ function ze({
       {
         className: "relative",
         style: {
-          width: p.width,
-          minHeight: p.height,
-          backgroundImage: p.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
-          backgroundSize: p.showGrid ? "20px 20px" : void 0
+          width: w.width,
+          minHeight: w.height,
+          backgroundImage: w.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
+          backgroundSize: w.showGrid ? "20px 20px" : void 0
         },
         children: [
           /* @__PURE__ */ e.jsx(
             "svg",
             {
               className: "absolute inset-0 pointer-events-none",
-              width: p.width,
-              height: p.height,
-              children: b.map((o) => {
-                const r = n.find((s) => s.id === o.sourceEntity), c = n.find((s) => s.id === o.targetEntity);
-                return !r || !c ? null : /* @__PURE__ */ e.jsxs("g", { children: [
+              width: w.width,
+              height: w.height,
+              children: y.map((u) => {
+                const a = m.find((o) => o.id === u.sourceEntity), x = m.find((o) => o.id === u.targetEntity);
+                return !a || !x ? null : /* @__PURE__ */ e.jsxs("g", { children: [
                   /* @__PURE__ */ e.jsx(
                     "line",
                     {
-                      x1: r.position.x + 120,
-                      y1: r.position.y + 50,
-                      x2: c.position.x + 120,
-                      y2: c.position.y + 50,
+                      x1: a.position.x + 120,
+                      y1: a.position.y + 50,
+                      x2: x.position.x + 120,
+                      y2: x.position.y + 50,
                       stroke: "hsl(var(--primary))",
                       strokeWidth: "2",
-                      strokeDasharray: o.type === "many-to-many" ? "5,5" : void 0
+                      strokeDasharray: u.type === "many-to-many" ? "5,5" : void 0
                     }
                   ),
-                  w && o.label && /* @__PURE__ */ e.jsx(
+                  T && u.label && /* @__PURE__ */ e.jsx(
                     "text",
                     {
-                      x: (r.position.x + c.position.x) / 2 + 120,
-                      y: (r.position.y + c.position.y) / 2 + 50 - 8,
+                      x: (a.position.x + x.position.x) / 2 + 120,
+                      y: (a.position.y + x.position.y) / 2 + 50 - 8,
                       textAnchor: "middle",
                       className: "text-xs fill-muted-foreground",
-                      children: o.label
+                      children: u.label
                     }
                   )
-                ] }, o.id);
+                ] }, u.id);
               })
             }
           ),
-          n.map((o) => /* @__PURE__ */ e.jsxs(
+          m.map((u) => /* @__PURE__ */ e.jsxs(
             "div",
             {
-              className: B(
+              className: oe(
                 "absolute rounded-lg border-2 bg-background shadow-sm w-60 select-none",
-                g === o.id ? "border-primary ring-2 ring-primary/20" : "border-border hover:border-primary/50"
+                E === u.id ? "border-primary ring-2 ring-primary/20" : "border-border hover:border-primary/50"
               ),
               style: {
-                left: o.position.x,
-                top: o.position.y
+                left: u.position.x,
+                top: u.position.y
               },
-              onClick: () => R(o.id),
+              onClick: () => R(u.id),
               children: [
                 /* @__PURE__ */ e.jsxs(
                   "div",
                   {
                     className: "flex items-center gap-2 px-3 py-2 rounded-t-lg font-medium text-sm",
-                    style: { backgroundColor: o.color ?? "hsl(var(--primary) / 0.1)" },
+                    style: { backgroundColor: u.color ?? "hsl(var(--primary) / 0.1)" },
                     children: [
-                      /* @__PURE__ */ e.jsx(le, { className: "h-3.5 w-3.5" }),
-                      /* @__PURE__ */ e.jsx("span", { className: "truncate", children: o.label }),
-                      !i && /* @__PURE__ */ e.jsx(
+                      /* @__PURE__ */ e.jsx(de, { className: "h-3.5 w-3.5" }),
+                      /* @__PURE__ */ e.jsx("span", { className: "truncate", children: u.label }),
+                      !h && /* @__PURE__ */ e.jsx(
                         "button",
                         {
-                          onClick: (r) => {
-                            r.stopPropagation(), S(o.id);
+                          onClick: (a) => {
+                            a.stopPropagation(), k(u.id);
                           },
                           className: "ml-auto p-0.5 rounded hover:bg-destructive/20",
-                          children: /* @__PURE__ */ e.jsx(L, { className: "h-3 w-3 text-destructive" })
+                          children: /* @__PURE__ */ e.jsx(G, { className: "h-3 w-3 text-destructive" })
                         }
                       )
                     ]
                   }
                 ),
-                /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 divide-y", children: o.fields.map((r) => /* @__PURE__ */ e.jsxs(
+                /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 divide-y", children: u.fields.map((a) => /* @__PURE__ */ e.jsxs(
                   "div",
                   {
                     className: "flex items-center gap-2 py-1 text-xs",
                     children: [
-                      /* @__PURE__ */ e.jsxs("span", { className: B("font-mono", r.primaryKey && "font-bold text-primary"), children: [
-                        r.primaryKey ? "🔑 " : "",
-                        r.name
+                      /* @__PURE__ */ e.jsxs("span", { className: oe("font-mono", a.primaryKey && "font-bold text-primary"), children: [
+                        a.primaryKey ? "🔑 " : "",
+                        a.name
                       ] }),
-                      /* @__PURE__ */ e.jsx("span", { className: "text-muted-foreground ml-auto", children: r.type }),
-                      r.required && /* @__PURE__ */ e.jsx("span", { className: "text-destructive", children: "*" })
+                      /* @__PURE__ */ e.jsx("span", { className: "text-muted-foreground ml-auto", children: a.type }),
+                      a.required && /* @__PURE__ */ e.jsx("span", { className: "text-destructive", children: "*" })
                     ]
                   },
-                  r.name
+                  a.name
                 )) })
               ]
             },
-            o.id
+            u.id
           ))
         ]
       }
     ) })
   ] }) });
 }
-function X(...l) {
-  return Y(M(l));
+function ie(...i) {
+  return Q(K(i));
 }
-function Ie({
-  processName: l = "New Process",
-  nodes: u = [],
-  edges: p = [],
-  lanes: w,
-  canvas: i = { width: 1400, height: 800, showGrid: !0 },
-  showToolbar: d = !0,
-  readOnly: x = !1,
-  onNodesChange: E,
-  onEdgesChange: n,
-  className: _
+function Oe({
+  processName: i = "New Process",
+  nodes: g = [],
+  edges: w = [],
+  lanes: T,
+  canvas: h = { width: 1400, height: 800, showGrid: !0 },
+  showToolbar: b = !0,
+  readOnly: N = !1,
+  onNodesChange: c,
+  onEdgesChange: m,
+  className: l
 }) {
-  const [b, k] = A(u), [g, R] = A(p), [v, S] = A(null), o = P(
-    (s, T) => {
-      if (x) return;
-      const m = {
+  const [y, _] = F(g), [E, R] = F(w), [C, k] = F(null), u = D(
+    (o, A) => {
+      if (N) return;
+      const j = {
         id: `node-${Date.now()}`,
-        type: s,
-        label: T,
-        position: { x: 200 + b.length * 160, y: 200 }
-      }, h = [...b, m];
-      k(h), S(m.id), E?.(h);
+        type: o,
+        label: A,
+        position: { x: 200 + y.length * 160, y: 200 }
+      }, f = [...y, j];
+      _(f), k(j.id), c?.(f);
     },
-    [b, x, E]
-  ), r = P(
-    (s) => {
-      if (x) return;
-      const T = b.filter((h) => h.id !== s), m = g.filter((h) => h.source !== s && h.target !== s);
-      k(T), R(m), v === s && S(null), E?.(T), n?.(m);
+    [y, N, c]
+  ), a = D(
+    (o) => {
+      if (N) return;
+      const A = y.filter((f) => f.id !== o), j = E.filter((f) => f.source !== o && f.target !== o);
+      _(A), R(j), C === o && k(null), c?.(A), m?.(j);
     },
-    [b, g, v, x, E, n]
-  ), c = (s) => {
-    switch (s) {
+    [y, E, C, N, c, m]
+  ), x = (o) => {
+    switch (o) {
       case "start-event":
         return "rounded-full bg-green-100 border-green-500 text-green-700";
       case "end-event":
@@ -683,20 +683,20 @@ function Ie({
         return "rounded bg-gray-100 border-gray-500 text-gray-700";
     }
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: X("flex flex-col h-full w-full border rounded-lg overflow-hidden bg-background", _), children: [
-    d && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
-      /* @__PURE__ */ e.jsx(Ne, { className: "h-4 w-4" }),
-      /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: l }),
+  return /* @__PURE__ */ e.jsxs("div", { className: ie("flex flex-col h-full w-full border rounded-lg overflow-hidden bg-background", l), children: [
+    b && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
+      /* @__PURE__ */ e.jsx(Ee, { className: "h-4 w-4" }),
+      /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: i }),
       /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
-      !x && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+      !N && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => o("start-event", "Start"),
+            onClick: () => u("start-event", "Start"),
             className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
             title: "Add Start Event",
             children: [
-              /* @__PURE__ */ e.jsx(Ee, { className: "h-3 w-3 text-green-600" }),
+              /* @__PURE__ */ e.jsx(Se, { className: "h-3 w-3 text-green-600" }),
               " Start"
             ]
           }
@@ -704,11 +704,11 @@ function Ie({
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => o("user-task", "User Task"),
+            onClick: () => u("user-task", "User Task"),
             className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
             title: "Add User Task",
             children: [
-              /* @__PURE__ */ e.jsx(oe, { className: "h-3 w-3 text-blue-600" }),
+              /* @__PURE__ */ e.jsx(ce, { className: "h-3 w-3 text-blue-600" }),
               " Task"
             ]
           }
@@ -716,11 +716,11 @@ function Ie({
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => o("exclusive-gateway", "Decision"),
+            onClick: () => u("exclusive-gateway", "Decision"),
             className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
             title: "Add Gateway",
             children: [
-              /* @__PURE__ */ e.jsx(ke, { className: "h-3 w-3 text-yellow-600" }),
+              /* @__PURE__ */ e.jsx(Ce, { className: "h-3 w-3 text-yellow-600" }),
               " Gateway"
             ]
           }
@@ -728,11 +728,11 @@ function Ie({
         /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => o("end-event", "End"),
+            onClick: () => u("end-event", "End"),
             className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
             title: "Add End Event",
             children: [
-              /* @__PURE__ */ e.jsx(oe, { className: "h-3 w-3 text-red-600" }),
+              /* @__PURE__ */ e.jsx(ce, { className: "h-3 w-3 text-red-600" }),
               " End"
             ]
           }
@@ -744,18 +744,18 @@ function Ie({
       {
         className: "relative",
         style: {
-          width: i.width,
-          minHeight: i.height,
-          backgroundImage: i.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
-          backgroundSize: i.showGrid ? "20px 20px" : void 0
+          width: h.width,
+          minHeight: h.height,
+          backgroundImage: h.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
+          backgroundSize: h.showGrid ? "20px 20px" : void 0
         },
         children: [
           /* @__PURE__ */ e.jsxs(
             "svg",
             {
               className: "absolute inset-0 pointer-events-none",
-              width: i.width,
-              height: i.height,
+              width: h.width,
+              height: h.height,
               children: [
                 /* @__PURE__ */ e.jsx("defs", { children: /* @__PURE__ */ e.jsx(
                   "marker",
@@ -769,126 +769,126 @@ function Ie({
                     children: /* @__PURE__ */ e.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "hsl(var(--foreground))" })
                   }
                 ) }),
-                g.map((s) => {
-                  const T = b.find((h) => h.id === s.source), m = b.find((h) => h.id === s.target);
-                  return !T || !m ? null : /* @__PURE__ */ e.jsx(
+                E.map((o) => {
+                  const A = y.find((f) => f.id === o.source), j = y.find((f) => f.id === o.target);
+                  return !A || !j ? null : /* @__PURE__ */ e.jsx(
                     "line",
                     {
-                      x1: T.position.x + 60,
-                      y1: T.position.y + 25,
-                      x2: m.position.x,
-                      y2: m.position.y + 25,
+                      x1: A.position.x + 60,
+                      y1: A.position.y + 25,
+                      x2: j.position.x,
+                      y2: j.position.y + 25,
                       stroke: "hsl(var(--foreground) / 0.5)",
                       strokeWidth: "2",
                       markerEnd: "url(#arrowhead)"
                     },
-                    s.id
+                    o.id
                   );
                 })
               ]
             }
           ),
-          b.map((s) => /* @__PURE__ */ e.jsxs(
+          y.map((o) => /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "absolute select-none",
               style: {
-                left: s.position.x,
-                top: s.position.y
+                left: o.position.x,
+                top: o.position.y
               },
-              onClick: () => S(s.id),
+              onClick: () => k(o.id),
               children: [
                 /* @__PURE__ */ e.jsx(
                   "div",
                   {
-                    className: X(
+                    className: ie(
                       "flex items-center justify-center border-2 min-w-[120px] min-h-[50px] px-3 py-2",
-                      c(s.type),
-                      v === s.id && "ring-2 ring-primary shadow-md"
+                      x(o.type),
+                      C === o.id && "ring-2 ring-primary shadow-md"
                     ),
-                    children: /* @__PURE__ */ e.jsx("span", { className: X(
+                    children: /* @__PURE__ */ e.jsx("span", { className: ie(
                       "text-xs font-medium",
-                      (s.type === "exclusive-gateway" || s.type === "parallel-gateway") && "-rotate-45"
-                    ), children: s.label })
+                      (o.type === "exclusive-gateway" || o.type === "parallel-gateway") && "-rotate-45"
+                    ), children: o.label })
                   }
                 ),
-                !x && v === s.id && /* @__PURE__ */ e.jsx(
+                !N && C === o.id && /* @__PURE__ */ e.jsx(
                   "button",
                   {
-                    onClick: (T) => {
-                      T.stopPropagation(), r(s.id);
+                    onClick: (A) => {
+                      A.stopPropagation(), a(o.id);
                     },
                     className: "absolute -top-2 -right-2 p-0.5 rounded-full bg-destructive text-destructive-foreground shadow",
-                    children: /* @__PURE__ */ e.jsx(L, { className: "h-3 w-3" })
+                    children: /* @__PURE__ */ e.jsx(G, { className: "h-3 w-3" })
                   }
                 )
               ]
             },
-            s.id
+            o.id
           ))
         ]
       }
     ) })
   ] });
 }
-function ce(...l) {
-  return Y(M(l));
+function pe(...i) {
+  return Q(K(i));
 }
-const Fe = {
+const et = {
   A4: { width: 595, height: 842 },
   A3: { width: 842, height: 1191 },
   Letter: { width: 612, height: 792 },
   Legal: { width: 612, height: 1008 },
   Tabloid: { width: 792, height: 1224 }
 };
-function Ge({
-  reportName: l = "Untitled Report",
-  objectName: u,
-  pageSize: p = "A4",
-  orientation: w = "portrait",
-  margins: i = { top: 40, right: 40, bottom: 40, left: 40 },
-  sections: d = [],
-  showToolbar: x = !0,
-  showPropertyPanel: E = !0,
-  readOnly: n = !1,
-  onSectionsChange: _,
-  className: b
+function tt({
+  reportName: i = "Untitled Report",
+  objectName: g,
+  pageSize: w = "A4",
+  orientation: T = "portrait",
+  margins: h = { top: 40, right: 40, bottom: 40, left: 40 },
+  sections: b = [],
+  showToolbar: N = !0,
+  showPropertyPanel: c = !0,
+  readOnly: m = !1,
+  onSectionsChange: l,
+  className: y
 }) {
-  const [k, g] = A(
-    d.length > 0 ? d : [
+  const [_, E] = F(
+    b.length > 0 ? b : [
       { type: "header", height: 80, elements: [] },
       { type: "detail", height: 400, elements: [], repeat: !0 },
       { type: "footer", height: 60, elements: [] }
     ]
-  ), [R, v] = A(null), S = Fe[p], o = w === "landscape" ? S.height : S.width, r = w === "landscape" ? S.width : S.height, c = P(
-    (m, h) => {
-      if (n) return;
-      const f = {
+  ), [R, C] = F(null), k = et[w], u = T === "landscape" ? k.height : k.width, a = T === "landscape" ? k.width : k.height, x = D(
+    (j, f) => {
+      if (m) return;
+      const p = {
         id: `elem-${Date.now()}`,
-        type: h,
-        position: { x: i.left, y: 10, width: 200, height: 30 },
+        type: f,
+        position: { x: h.left, y: 10, width: 200, height: 30 },
         properties: {
-          text: h === "text" ? "New Text" : void 0,
-          field: h === "field" ? "field_name" : void 0
+          text: f === "text" ? "New Text" : void 0,
+          field: f === "field" ? "field_name" : void 0
         }
-      }, C = k.map(
-        (D, V) => V === m ? { ...D, elements: [...D.elements, f] } : D
+      }, V = _.map(
+        ($, L) => L === j ? { ...$, elements: [...$.elements, p] } : $
       );
-      g(C), v(f.id), _?.(C);
+      E(V), C(p.id), l?.(V);
     },
-    [k, i.left, n, _]
-  ), s = P(
-    (m) => {
-      if (n) return;
-      const h = k.map((f) => ({
-        ...f,
-        elements: f.elements.filter((C) => C.id !== m)
+    [_, h.left, m, l]
+  ), o = D(
+    (j) => {
+      if (m) return;
+      const f = _.map((p) => ({
+        ...p,
+        elements: p.elements.filter((V) => V.id !== j)
       }));
-      g(h), R === m && v(null), _?.(h);
+      E(f), R === j && C(null), l?.(f);
     },
-    [k, R, n, _]
-  ), T = (m) => {
-    switch (m) {
+    [_, R, m, l]
+  ), A = (j) => {
+    switch (j) {
       case "header":
         return "Report Header";
       case "page-header":
@@ -904,24 +904,24 @@ function Ge({
       case "footer":
         return "Report Footer";
       default:
-        return m;
+        return j;
     }
   };
-  return /* @__PURE__ */ e.jsxs("div", { className: ce("flex h-full w-full border rounded-lg overflow-hidden bg-background", b), children: [
+  return /* @__PURE__ */ e.jsxs("div", { className: pe("flex h-full w-full border rounded-lg overflow-hidden bg-background", y), children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col", children: [
-      x && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
-        /* @__PURE__ */ e.jsx(Re, { className: "h-4 w-4" }),
-        /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: l }),
-        u && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+      N && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
+        /* @__PURE__ */ e.jsx(Te, { className: "h-4 w-4" }),
+        /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: i }),
+        g && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
           "(",
-          u,
+          g,
           ")"
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
         /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          p,
+          w,
           " ",
-          w
+          T
         ] })
       ] }),
       /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto bg-muted/10 p-4 flex justify-center", children: /* @__PURE__ */ e.jsx(
@@ -929,42 +929,42 @@ function Ge({
         {
           className: "bg-white shadow-lg border",
           style: {
-            width: o,
-            minHeight: r
+            width: u,
+            minHeight: a
           },
-          children: k.map((m, h) => /* @__PURE__ */ e.jsxs(
+          children: _.map((j, f) => /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "relative border-b border-dashed border-gray-300",
-              style: { minHeight: m.height },
+              style: { minHeight: j.height },
               children: [
                 /* @__PURE__ */ e.jsxs("div", { className: "absolute left-0 top-0 px-2 py-0.5 bg-muted text-xs text-muted-foreground border-r border-b rounded-br", children: [
-                  T(m.type),
-                  m.repeat && " ↻"
+                  A(j.type),
+                  j.repeat && " ↻"
                 ] }),
-                !n && /* @__PURE__ */ e.jsxs("div", { className: "absolute right-1 top-0 flex items-center gap-0.5", children: [
+                !m && /* @__PURE__ */ e.jsxs("div", { className: "absolute right-1 top-0 flex items-center gap-0.5", children: [
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "text"),
+                      onClick: () => x(f, "text"),
                       className: "p-0.5 rounded hover:bg-accent",
                       title: "Add Text",
-                      children: /* @__PURE__ */ e.jsx(Te, { className: "h-3 w-3" })
+                      children: /* @__PURE__ */ e.jsx(Re, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "field"),
+                      onClick: () => x(f, "field"),
                       className: "p-0.5 rounded hover:bg-accent",
                       title: "Add Field",
-                      children: /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" })
+                      children: /* @__PURE__ */ e.jsx(Y, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "image"),
+                      onClick: () => x(f, "image"),
                       className: "p-0.5 rounded hover:bg-accent",
                       title: "Add Image",
                       children: /* @__PURE__ */ e.jsx(_e, { className: "h-3 w-3" })
@@ -973,66 +973,66 @@ function Ge({
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "chart"),
+                      onClick: () => x(f, "chart"),
                       className: "p-0.5 rounded hover:bg-accent",
                       title: "Add Chart",
-                      children: /* @__PURE__ */ e.jsx(Se, { className: "h-3 w-3" })
+                      children: /* @__PURE__ */ e.jsx(Ae, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "table"),
+                      onClick: () => x(f, "table"),
                       className: "p-0.5 rounded hover:bg-accent",
                       title: "Add Table",
-                      children: /* @__PURE__ */ e.jsx(Ae, { className: "h-3 w-3" })
+                      children: /* @__PURE__ */ e.jsx(Pe, { className: "h-3 w-3" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e.jsx("div", { className: "relative", style: { minHeight: m.height, paddingTop: 24 }, children: m.elements.map((f) => /* @__PURE__ */ e.jsxs(
+                /* @__PURE__ */ e.jsx("div", { className: "relative", style: { minHeight: j.height, paddingTop: 24 }, children: j.elements.map((p) => /* @__PURE__ */ e.jsxs(
                   "div",
                   {
-                    className: ce(
+                    className: pe(
                       "absolute border rounded px-2 py-1 text-xs cursor-pointer",
-                      R === f.id ? "border-primary ring-1 ring-primary/30 bg-primary/5" : "border-dashed border-gray-400 hover:border-primary/50"
+                      R === p.id ? "border-primary ring-1 ring-primary/30 bg-primary/5" : "border-dashed border-gray-400 hover:border-primary/50"
                     ),
                     style: {
-                      left: f.position.x,
-                      top: (typeof f.position.y == "number" ? f.position.y : 0) + 24,
-                      width: f.position.width,
-                      height: f.position.height
+                      left: p.position.x,
+                      top: (typeof p.position.y == "number" ? p.position.y : 0) + 24,
+                      width: p.position.width,
+                      height: p.position.height
                     },
-                    onClick: () => v(f.id),
+                    onClick: () => C(p.id),
                     children: [
                       /* @__PURE__ */ e.jsxs("span", { className: "text-muted-foreground", children: [
-                        f.type === "text" && (f.properties.text ?? "Text"),
-                        f.type === "field" && `{${f.properties.field ?? "field"}}`,
-                        f.type === "image" && "🖼 Image",
-                        f.type === "chart" && "📊 Chart",
-                        f.type === "table" && "📋 Table"
+                        p.type === "text" && (p.properties.text ?? "Text"),
+                        p.type === "field" && `{${p.properties.field ?? "field"}}`,
+                        p.type === "image" && "🖼 Image",
+                        p.type === "chart" && "📊 Chart",
+                        p.type === "table" && "📋 Table"
                       ] }),
-                      !n && R === f.id && /* @__PURE__ */ e.jsx(
+                      !m && R === p.id && /* @__PURE__ */ e.jsx(
                         "button",
                         {
-                          onClick: (C) => {
-                            C.stopPropagation(), s(f.id);
+                          onClick: (V) => {
+                            V.stopPropagation(), o(p.id);
                           },
                           className: "absolute -top-2 -right-2 p-0.5 rounded-full bg-destructive text-destructive-foreground shadow",
-                          children: /* @__PURE__ */ e.jsx(L, { className: "h-2.5 w-2.5" })
+                          children: /* @__PURE__ */ e.jsx(G, { className: "h-2.5 w-2.5" })
                         }
                       )
                     ]
                   },
-                  f.id
+                  p.id
                 )) })
               ]
             },
-            `${m.type}-${h}`
+            `${j.type}-${f}`
           ))
         }
       ) })
     ] }),
-    E && /* @__PURE__ */ e.jsxs("div", { className: "w-56 border-l bg-muted/30 flex flex-col", children: [
+    c && /* @__PURE__ */ e.jsxs("div", { className: "w-56 border-l bg-muted/30 flex flex-col", children: [
       /* @__PURE__ */ e.jsx("div", { className: "p-3 border-b font-medium text-sm", children: "Properties" }),
       /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-3", children: R ? /* @__PURE__ */ e.jsx("div", { className: "space-y-2 text-xs", children: /* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground", children: [
         "Element ID: ",
@@ -1041,47 +1041,47 @@ function Ge({
     ] })
   ] });
 }
-const ue = fe(null);
-ue.displayName = "CollaborationContext";
-function qe({
-  config: l,
-  user: u,
-  onOperation: p,
-  children: w
+const fe = je(null);
+fe.displayName = "CollaborationContext";
+function ct({
+  config: i,
+  user: g,
+  onOperation: w,
+  children: T
 }) {
-  const i = Z(() => !l.enabled || !u ? [] : [{
-    userId: u.id,
-    userName: u.name,
-    avatar: u.avatar,
-    color: Le(u.id),
+  const h = ae(() => !i.enabled || !g ? [] : [{
+    userId: g.id,
+    userName: g.name,
+    avatar: g.avatar,
+    color: rt(g.id),
     status: "active",
     lastActivity: (/* @__PURE__ */ new Date()).toISOString()
-  }], [l.enabled, u]), d = l.enabled && !!u, x = P(
-    (n) => {
-      if (!d || !u) return;
-      const _ = {
-        ...n,
+  }], [i.enabled, g]), b = i.enabled && !!g, N = D(
+    (m) => {
+      if (!b || !g) return;
+      const l = {
+        ...m,
         id: `op-${Date.now()}`,
-        userId: u.id,
+        userId: g.id,
         timestamp: (/* @__PURE__ */ new Date()).toISOString(),
         version: Date.now()
       };
-      p?.(_);
+      w?.(l);
     },
-    [d, u, p]
-  ), E = Z(
+    [b, g, w]
+  ), c = ae(
     () => ({
-      users: i,
-      isConnected: d,
-      sendOperation: x,
-      currentUserId: u?.id
+      users: h,
+      isConnected: b,
+      sendOperation: N,
+      currentUserId: g?.id
     }),
-    [i, d, x, u?.id]
+    [h, b, N, g?.id]
   );
-  return /* @__PURE__ */ e.jsx(ue.Provider, { value: E, children: w });
+  return /* @__PURE__ */ e.jsx(fe.Provider, { value: c, children: T });
 }
-function Le(l) {
-  const u = [
+function rt(i) {
+  const g = [
     "#3b82f6",
     "#ef4444",
     "#22c55e",
@@ -1091,14 +1091,620 @@ function Le(l) {
     "#06b6d4",
     "#f97316"
   ];
-  let p = 0;
-  for (let w = 0; w < l.length; w++)
-    p = (p << 5) - p + l.charCodeAt(w) | 0;
-  return u[Math.abs(p) % u.length];
+  let w = 0;
+  for (let T = 0; T < i.length; T++)
+    w = (w << 5) - w + i.charCodeAt(T) | 0;
+  return g[Math.abs(w) % g.length];
+}
+function se(...i) {
+  return Q(K(i));
+}
+const he = [
+  { type: "grid", label: "Grid", icon: Ie },
+  { type: "kanban", label: "Kanban", icon: Ve },
+  { type: "gallery", label: "Gallery", icon: Le },
+  { type: "calendar", label: "Calendar", icon: ze },
+  { type: "timeline", label: "Timeline", icon: Ge },
+  { type: "gantt", label: "Gantt", icon: Me },
+  { type: "map", label: "Map", icon: Ye }
+], st = [
+  { value: "equals", label: "=" },
+  { value: "contains", label: "Contains" },
+  { value: "startsWith", label: "Starts with" },
+  { value: "gt", label: ">" },
+  { value: "lt", label: "<" },
+  { value: "gte", label: ">=" },
+  { value: "lte", label: "<=" },
+  { value: "ne", label: "!=" }
+];
+function at({
+  objectName: i,
+  viewId: g,
+  viewLabel: w = "",
+  viewType: T = "grid",
+  columns: h = [],
+  filters: b = [],
+  sort: N = [],
+  availableFields: c = [],
+  options: m = {},
+  readOnly: l = !1,
+  onSave: y,
+  onCancel: _,
+  className: E
+}) {
+  const [R, C] = F(w), [k, u] = F(T), [a, x] = F(h), [o, A] = F(b), [j, f] = F(N), [p, V] = F(m), [$, L] = F(null), [z, U] = F("columns"), W = ae(() => {
+    const t = new Set(a.map((n) => n.field));
+    return c.filter((n) => !t.has(n.name));
+  }, [c, a]), le = D(
+    (t) => {
+      if (l) return;
+      const n = c.find((v) => v.name === t), s = {
+        field: t,
+        label: n?.label ?? t,
+        visible: !0,
+        order: a.length
+      };
+      x((v) => [...v, s]);
+    },
+    [c, a.length, l]
+  ), q = D(
+    (t) => {
+      l || (x((n) => n.filter((s, v) => v !== t)), $ === t && L(null));
+    },
+    [l, $]
+  ), O = D(
+    (t) => {
+      l || x(
+        (n) => n.map((s, v) => v === t ? { ...s, visible: !s.visible } : s)
+      );
+    },
+    [l]
+  ), H = D(
+    (t, n) => {
+      if (l) return;
+      const s = n === "up" ? t - 1 : t + 1;
+      s < 0 || s >= a.length || (x((v) => {
+        const I = [...v], B = I[t];
+        return I[t] = I[s], I[s] = B, I;
+      }), L(s));
+    },
+    [l, a.length]
+  ), ee = D(() => {
+    l || c.length === 0 || A((t) => [
+      ...t,
+      { field: c[0].name, operator: "equals", value: "" }
+    ]);
+  }, [l, c]), te = D(
+    (t) => {
+      l || A((n) => n.filter((s, v) => v !== t));
+    },
+    [l]
+  ), M = D(
+    (t, n) => {
+      l || A(
+        (s) => s.map((v, I) => I === t ? { ...v, ...n } : v)
+      );
+    },
+    [l]
+  ), r = D(() => {
+    l || c.length === 0 || f((t) => [
+      ...t,
+      { field: c[0].name, direction: "asc" }
+    ]);
+  }, [l, c]), d = D(
+    (t) => {
+      l || f((n) => n.filter((s, v) => v !== t));
+    },
+    [l]
+  ), S = D(
+    (t, n) => {
+      l || f(
+        (s) => s.map((v, I) => I === t ? { ...v, ...n } : v)
+      );
+    },
+    [l]
+  ), P = D(() => {
+    y?.({
+      viewId: g,
+      viewLabel: R || `${i} View`,
+      viewType: k,
+      columns: a,
+      filters: o,
+      sort: j,
+      options: p
+    });
+  }, [y, g, R, i, k, a, o, j, p]);
+  return /* @__PURE__ */ e.jsxs("div", { className: se("flex flex-col h-full w-full border rounded-lg overflow-hidden bg-background", E), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20 shrink-0", children: [
+      /* @__PURE__ */ e.jsx(De, { className: "h-4 w-4 text-muted-foreground" }),
+      /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: "View Designer" }),
+      /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "— ",
+        i
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+      !l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        _ && /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            onClick: _,
+            className: "flex items-center gap-1 px-3 py-1.5 text-xs rounded border border-border hover:bg-accent",
+            "data-testid": "view-designer-cancel",
+            children: [
+              /* @__PURE__ */ e.jsx(Fe, { className: "h-3 w-3" }),
+              " Cancel"
+            ]
+          }
+        ),
+        /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            onClick: P,
+            className: "flex items-center gap-1 px-3 py-1.5 text-xs rounded bg-primary text-primary-foreground hover:bg-primary/90",
+            "data-testid": "view-designer-save",
+            children: [
+              /* @__PURE__ */ e.jsx($e, { className: "h-3 w-3" }),
+              " Save View"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+      !l && /* @__PURE__ */ e.jsxs("div", { className: "w-56 border-r bg-muted/30 flex flex-col shrink-0", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "p-3 border-b font-medium text-sm", children: "Available Fields" }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: W.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: "All fields added" }) : W.map((t) => /* @__PURE__ */ e.jsxs(
+          "button",
+          {
+            onClick: () => le(t.name),
+            className: "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left",
+            "data-testid": `field-${t.name}`,
+            children: [
+              /* @__PURE__ */ e.jsx(Y, { className: "h-3 w-3 text-muted-foreground" }),
+              /* @__PURE__ */ e.jsx("span", { className: "truncate", children: t.label || t.name }),
+              /* @__PURE__ */ e.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: t.type })
+            ]
+          },
+          t.name
+        )) })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "p-3 border-b space-y-3 shrink-0 bg-muted/10", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ e.jsx("label", { className: "text-xs font-semibold text-foreground", children: "View Type" }),
+            /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 flex-wrap", children: he.map(({ type: t, label: n, icon: s }) => /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => !l && u(t),
+                className: se(
+                  "flex items-center gap-2 px-3 py-2 text-sm rounded-md border-2 transition-all font-medium",
+                  k === t ? "border-primary bg-primary text-primary-foreground shadow-sm" : "border-border bg-background hover:border-primary/50 hover:bg-accent"
+                ),
+                "data-testid": `view-type-${t}`,
+                children: [
+                  /* @__PURE__ */ e.jsx(s, { className: "h-4 w-4" }),
+                  n
+                ]
+              },
+              t
+            )) })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+            /* @__PURE__ */ e.jsx("label", { className: "text-xs font-semibold text-foreground", children: "View Name" }),
+            /* @__PURE__ */ e.jsx(
+              "input",
+              {
+                type: "text",
+                value: R,
+                onChange: (t) => !l && C(t.target.value),
+                placeholder: "Enter view name...",
+                className: "px-3 py-2 text-sm border-2 rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary",
+                readOnly: l,
+                "data-testid": "view-label-input"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto p-3", children: a.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center h-full text-sm text-muted-foreground", children: /* @__PURE__ */ e.jsxs("div", { className: "text-center", children: [
+          /* @__PURE__ */ e.jsx(Ue, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+          /* @__PURE__ */ e.jsx("p", { children: "No columns added yet" }),
+          /* @__PURE__ */ e.jsx("p", { className: "text-xs mt-1", children: "Add fields from the left panel to design your view" })
+        ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: [
+            "Columns (",
+            a.length,
+            ")"
+          ] }),
+          a.map((t, n) => /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              className: se(
+                "flex items-center gap-2 px-3 py-2 rounded border transition-colors cursor-pointer",
+                $ === n ? "border-primary bg-primary/5 ring-1 ring-primary/20" : "border-border hover:border-primary/50",
+                !t.visible && "opacity-50"
+              ),
+              onClick: () => L(n),
+              "data-testid": `column-${t.field}`,
+              children: [
+                /* @__PURE__ */ e.jsx(ge, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }),
+                /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium truncate flex-1", children: t.label || t.field }),
+                /* @__PURE__ */ e.jsx("span", { className: "text-xs text-muted-foreground", children: t.field }),
+                !l && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: (s) => {
+                        s.stopPropagation(), H(n, "up");
+                      },
+                      disabled: n === 0,
+                      className: "p-0.5 rounded hover:bg-accent disabled:opacity-30",
+                      title: "Move up",
+                      children: /* @__PURE__ */ e.jsx(We, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: (s) => {
+                        s.stopPropagation(), H(n, "down");
+                      },
+                      disabled: n === a.length - 1,
+                      className: "p-0.5 rounded hover:bg-accent disabled:opacity-30",
+                      title: "Move down",
+                      children: /* @__PURE__ */ e.jsx(qe, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: (s) => {
+                        s.stopPropagation(), O(n);
+                      },
+                      className: "p-0.5 rounded hover:bg-accent",
+                      title: t.visible !== !1 ? "Hide column" : "Show column",
+                      children: t.visible !== !1 ? /* @__PURE__ */ e.jsx(be, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(He, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: (s) => {
+                        s.stopPropagation(), q(n);
+                      },
+                      className: "p-0.5 rounded hover:bg-destructive/10",
+                      title: "Remove column",
+                      children: /* @__PURE__ */ e.jsx(G, { className: "h-3 w-3 text-destructive" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            `${t.field}-${n}`
+          ))
+        ] }) })
+      ] }),
+      /* @__PURE__ */ e.jsxs("div", { className: "w-64 border-l bg-muted/30 flex flex-col shrink-0", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "flex border-b shrink-0", children: ["columns", "filters", "sort", "options"].map((t) => /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            onClick: () => U(t),
+            className: se(
+              "flex-1 px-2 py-2 text-xs font-medium capitalize transition-colors",
+              z === t ? "border-b-2 border-primary text-primary" : "text-muted-foreground hover:text-foreground"
+            ),
+            children: t
+          },
+          t
+        )) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex-1 overflow-y-auto p-3", children: [
+          z === "columns" && /* @__PURE__ */ e.jsx("div", { children: $ !== null && a[$] ? /* @__PURE__ */ e.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: "Column Properties" }),
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Label" }),
+              /* @__PURE__ */ e.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: a[$].label ?? "",
+                  onChange: (t) => {
+                    if (l) return;
+                    const n = $;
+                    x(
+                      (s) => s.map((v, I) => I === n ? { ...v, label: t.target.value } : v)
+                    );
+                  },
+                  className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                  readOnly: l,
+                  "data-testid": "column-label-input"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Width" }),
+              /* @__PURE__ */ e.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: a[$].width ?? "",
+                  onChange: (t) => {
+                    if (l) return;
+                    const n = $, s = t.target.value;
+                    x(
+                      (v) => v.map(
+                        (I, B) => B === n ? { ...I, width: /^\d+$/.test(s) ? Number(s) : s } : I
+                      )
+                    );
+                  },
+                  placeholder: "auto",
+                  className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                  readOnly: l,
+                  "data-testid": "column-width-input"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+              "Field: ",
+              /* @__PURE__ */ e.jsx("span", { className: "font-mono", children: a[$].field })
+            ] })
+          ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: "Select a column to edit its properties" }) }),
+          z === "filters" && /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+            o.map((t, n) => /* @__PURE__ */ e.jsxs("div", { className: "space-y-1 p-2 border rounded bg-background", "data-testid": `filter-${n}`, children: [
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ e.jsx(
+                  "select",
+                  {
+                    value: t.field,
+                    onChange: (s) => M(n, { field: s.target.value }),
+                    className: "flex-1 px-1 py-0.5 text-xs border rounded bg-background",
+                    disabled: l,
+                    children: c.map((s) => /* @__PURE__ */ e.jsx("option", { value: s.name, children: s.label || s.name }, s.name))
+                  }
+                ),
+                !l && /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    onClick: () => te(n),
+                    className: "p-0.5 rounded hover:bg-destructive/10",
+                    children: /* @__PURE__ */ e.jsx(G, { className: "h-3 w-3 text-destructive" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ e.jsx(
+                  "select",
+                  {
+                    value: t.operator,
+                    onChange: (s) => M(n, { operator: s.target.value }),
+                    className: "w-24 px-1 py-0.5 text-xs border rounded bg-background",
+                    disabled: l,
+                    children: st.map((s) => /* @__PURE__ */ e.jsx("option", { value: s.value, children: s.label }, s.value))
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: t.value ?? "",
+                    onChange: (s) => M(n, { value: s.target.value }),
+                    placeholder: "Value",
+                    className: "flex-1 px-1 py-0.5 text-xs border rounded bg-background",
+                    readOnly: l
+                  }
+                )
+              ] })
+            ] }, n)),
+            !l && /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: ee,
+                className: "w-full flex items-center justify-center gap-1 px-2 py-1.5 text-xs rounded border border-dashed border-border hover:bg-accent",
+                "data-testid": "add-filter",
+                children: [
+                  /* @__PURE__ */ e.jsx(Y, { className: "h-3 w-3" }),
+                  " Add Filter"
+                ]
+              }
+            )
+          ] }),
+          z === "sort" && /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+            j.map((t, n) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 p-2 border rounded bg-background", "data-testid": `sort-${n}`, children: [
+              /* @__PURE__ */ e.jsx(
+                "select",
+                {
+                  value: t.field,
+                  onChange: (s) => S(n, { field: s.target.value }),
+                  className: "flex-1 px-1 py-0.5 text-xs border rounded bg-background",
+                  disabled: l,
+                  children: c.map((s) => /* @__PURE__ */ e.jsx("option", { value: s.name, children: s.label || s.name }, s.name))
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(
+                "select",
+                {
+                  value: t.direction,
+                  onChange: (s) => S(n, { direction: s.target.value }),
+                  className: "w-16 px-1 py-0.5 text-xs border rounded bg-background",
+                  disabled: l,
+                  children: [
+                    /* @__PURE__ */ e.jsx("option", { value: "asc", children: "Asc" }),
+                    /* @__PURE__ */ e.jsx("option", { value: "desc", children: "Desc" })
+                  ]
+                }
+              ),
+              !l && /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: () => d(n),
+                  className: "p-0.5 rounded hover:bg-destructive/10",
+                  children: /* @__PURE__ */ e.jsx(G, { className: "h-3 w-3 text-destructive" })
+                }
+              )
+            ] }, n)),
+            !l && /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: r,
+                className: "w-full flex items-center justify-center gap-1 px-2 py-1.5 text-xs rounded border border-dashed border-border hover:bg-accent",
+                "data-testid": "add-sort",
+                children: [
+                  /* @__PURE__ */ e.jsx(Y, { className: "h-3 w-3" }),
+                  " Add Sort"
+                ]
+              }
+            )
+          ] }),
+          z === "options" && /* @__PURE__ */ e.jsxs("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "text-xs font-medium", children: [
+              he.find((t) => t.type === k)?.label ?? k,
+              " Options"
+            ] }),
+            k === "kanban" && /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Group By Field" }),
+              /* @__PURE__ */ e.jsxs(
+                "select",
+                {
+                  value: p.groupBy ?? "",
+                  onChange: (t) => !l && V((n) => ({ ...n, groupBy: t.target.value })),
+                  className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                  disabled: l,
+                  "data-testid": "kanban-group-by",
+                  children: [
+                    /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                    c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                  ]
+                }
+              )
+            ] }),
+            k === "calendar" && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Start Date Field" }),
+                /* @__PURE__ */ e.jsxs(
+                  "select",
+                  {
+                    value: p.startDateField ?? "",
+                    onChange: (t) => !l && V((n) => ({ ...n, startDateField: t.target.value })),
+                    className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                    disabled: l,
+                    "data-testid": "calendar-start-date",
+                    children: [
+                      /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                      c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Title Field" }),
+                /* @__PURE__ */ e.jsxs(
+                  "select",
+                  {
+                    value: p.titleField ?? "",
+                    onChange: (t) => !l && V((n) => ({ ...n, titleField: t.target.value })),
+                    className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                    disabled: l,
+                    "data-testid": "calendar-title-field",
+                    children: [
+                      /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                      c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            k === "map" && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Latitude Field" }),
+                /* @__PURE__ */ e.jsxs(
+                  "select",
+                  {
+                    value: p.latitudeField ?? "",
+                    onChange: (t) => !l && V((n) => ({ ...n, latitudeField: t.target.value })),
+                    className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                    disabled: l,
+                    children: [
+                      /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                      c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Longitude Field" }),
+                /* @__PURE__ */ e.jsxs(
+                  "select",
+                  {
+                    value: p.longitudeField ?? "",
+                    onChange: (t) => !l && V((n) => ({ ...n, longitudeField: t.target.value })),
+                    className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                    disabled: l,
+                    children: [
+                      /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                      c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            k === "gallery" && /* @__PURE__ */ e.jsxs("div", { children: [
+              /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Image Field" }),
+              /* @__PURE__ */ e.jsxs(
+                "select",
+                {
+                  value: p.imageField ?? "",
+                  onChange: (t) => !l && V((n) => ({ ...n, imageField: t.target.value })),
+                  className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                  disabled: l,
+                  children: [
+                    /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                    c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                  ]
+                }
+              )
+            ] }),
+            (k === "timeline" || k === "gantt") && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Date Field" }),
+                /* @__PURE__ */ e.jsxs(
+                  "select",
+                  {
+                    value: p.dateField ?? p.startDateField ?? "",
+                    onChange: (t) => !l && V((n) => ({ ...n, dateField: t.target.value, startDateField: t.target.value })),
+                    className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                    disabled: l,
+                    children: [
+                      /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                      c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: "Title Field" }),
+                /* @__PURE__ */ e.jsxs(
+                  "select",
+                  {
+                    value: p.titleField ?? "",
+                    onChange: (t) => !l && V((n) => ({ ...n, titleField: t.target.value })),
+                    className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                    disabled: l,
+                    children: [
+                      /* @__PURE__ */ e.jsx("option", { value: "", children: "Select field..." }),
+                      c.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            k === "grid" && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-2", children: "Grid view uses the columns configured above." })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
 }
-G.register(
+Z.register(
   "page-designer",
-  Oe,
+  Ze,
   {
     label: "Page Designer",
     category: "Designer",
@@ -1111,9 +1717,9 @@ G.register(
     ]
   }
 );
-G.register(
+Z.register(
   "data-model-designer",
-  ze,
+  Qe,
   {
     label: "Data Model Designer",
     category: "Designer",
@@ -1125,9 +1731,9 @@ G.register(
     ]
   }
 );
-G.register(
+Z.register(
   "process-designer",
-  Ie,
+  Oe,
   {
     label: "Process Designer (BPMN)",
     category: "Designer",
@@ -1141,9 +1747,9 @@ G.register(
     ]
   }
 );
-G.register(
+Z.register(
   "report-designer",
-  Ge,
+  tt,
   {
     label: "Report Designer",
     category: "Designer",
@@ -1157,10 +1763,26 @@ G.register(
     ]
   }
 );
+Z.register(
+  "view-designer",
+  at,
+  {
+    label: "View Designer",
+    category: "Designer",
+    inputs: [
+      { name: "objectName", type: "string", label: "Object Name" },
+      { name: "viewId", type: "string", label: "View ID" },
+      { name: "viewLabel", type: "string", label: "View Label" },
+      { name: "viewType", type: "string", label: "View Type", defaultValue: "grid" },
+      { name: "readOnly", type: "boolean", label: "Read Only", defaultValue: !1 }
+    ]
+  }
+);
 export {
-  qe as CollaborationProvider,
-  ze as DataModelDesigner,
-  Oe as PageDesigner,
-  Ie as ProcessDesigner,
-  Ge as ReportDesigner
+  ct as CollaborationProvider,
+  Qe as DataModelDesigner,
+  Ze as PageDesigner,
+  Oe as ProcessDesigner,
+  tt as ReportDesigner,
+  at as ViewDesigner
 };