@object-ui/plugin-designer 0.1.0 → 3.0.0

package/dist/index.js

@@ -1,431 +1,1229 @@
-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,
+import { ComponentRegistry as Se } from "@object-ui/core";
+import mt, { useState as K, useRef as ee, useCallback as b, useEffect as fe, createContext as ht, useContext as rt, useMemo as ce } from "react";
+import { AlertTriangle as xt, ChevronRight as He, ChevronDown as Xe, Plus as xe, PanelLeftClose as ft, Undo2 as Ee, Redo2 as De, Copy as Pe, Clipboard as Te, Trash2 as he, Eye as st, Map as nt, Minus as bt, Maximize2 as gt, PanelRightClose as Ke, GripVertical as at, Layers as vt, Database as qe, ZoomOut as ot, ZoomIn as lt, RotateCcw as it, Grid3X3 as yt, Users as wt, Link2 as jt, GitBranch as Nt, Link as Ct, Layout as kt, Play as St, Square as Je, Diamond as Et, PanelRightOpen as Dt, FileText as Pt, Type as Tt, ImageIcon as Rt, BarChart3 as At, Table2 as It, Settings2 as Ft, X as $t, Save as Mt, LayoutGrid as _t, Kanban as zt, Image as Lt, Calendar as Ut, Clock as dt, GanttChart as Gt, Columns3 as Yt, ArrowUp as Vt, ArrowDown as Zt, EyeOff as Ht, History as Xt, User as Kt } from "lucide-react";
+import { clsx as ue } from "clsx";
+import { twMerge as pe } from "tailwind-merge";
+var Me = { exports: {} }, Ne = {};
+var Qe;
+function Wt() {
+  if (Qe) return Ne;
+  Qe = 1;
+  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), N = /* @__PURE__ */ Symbol.for("react.fragment");
+  function E(w, v, R) {
+    var y = null;
+    if (R !== void 0 && (y = "" + R), v.key !== void 0 && (y = "" + v.key), "key" in v) {
+      R = {};
+      for (var f in v)
+        f !== "key" && (R[f] = v[f]);
+    } else R = v;
+    return v = R.ref, {
+      $$typeof: s,
       type: w,
-      key: x,
-      ref: i !== void 0 ? i : null,
-      props: d
+      key: y,
+      ref: v !== void 0 ? v : null,
+      props: R
     };
   }
-  return $.Fragment = u, $.jsx = p, $.jsxs = p, $;
+  return Ne.Fragment = N, Ne.jsx = E, Ne.jsxs = E, Ne;
 }
-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 Ce = {};
+var Oe;
+function Bt() {
+  return Oe || (Oe = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(d) {
+      if (d == null) return null;
+      if (typeof d == "function")
+        return d.$$typeof === J ? null : d.displayName || d.name || null;
+      if (typeof d == "string") return d;
+      switch (d) {
+        case T:
           return "Fragment";
-        case c:
+        case F:
           return "Profiler";
-        case r:
+        case A:
           return "StrictMode";
-        case h:
+        case U:
           return "Suspense";
-        case f:
+        case H:
           return "SuspenseList";
-        case V:
+        case oe:
           return "Activity";
       }
-      if (typeof t == "object")
-        switch (typeof t.tag == "number" && console.error(
+      if (typeof d == "object")
+        switch (typeof d.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:
+        ), d.$$typeof) {
+          case x:
             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 $:
+            return d.displayName || "Context";
           case D:
-            a = t._payload, t = t._init;
+            return (d._context.displayName || "Context") + ".Consumer";
+          case S:
+            var z = d.render;
+            return d = d.displayName, d || (d = z.displayName || z.name || "", d = d !== "" ? "ForwardRef(" + d + ")" : "ForwardRef"), d;
+          case G:
+            return z = d.displayName || null, z !== null ? z : s(d.type) || "Memo";
+          case Z:
+            z = d._payload, d = d._init;
             try {
-              return l(t(a));
+              return s(d(z));
             } catch {
             }
         }
       return null;
     }
-    function u(t) {
-      return "" + t;
+    function N(d) {
+      return "" + d;
     }
-    function p(t) {
+    function E(d) {
       try {
-        u(t);
-        var a = !1;
+        N(d);
+        var z = !1;
       } catch {
-        a = !0;
+        z = !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 (z) {
+        z = console;
+        var p = z.error, P = typeof Symbol == "function" && Symbol.toStringTag && d[Symbol.toStringTag] || d.constructor.name || "Object";
+        return p.call(
+          z,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          j
-        ), u(t);
+          P
+        ), N(d);
       }
     }
-    function w(t) {
-      if (t === o) return "<>";
-      if (typeof t == "object" && t !== null && t.$$typeof === D)
+    function w(d) {
+      if (d === T) return "<>";
+      if (typeof d == "object" && d !== null && d.$$typeof === Z)
         return "<...>";
       try {
-        var a = l(t);
-        return a ? "<" + a + ">" : "<...>";
+        var z = s(d);
+        return z ? "<" + z + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function i() {
-      var t = U.A;
-      return t === null ? null : t.getOwner();
+    function v() {
+      var d = X.A;
+      return d === null ? null : d.getOwner();
     }
-    function d() {
+    function R() {
       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 y(d) {
+      if (te.call(d, "key")) {
+        var z = Object.getOwnPropertyDescriptor(d, "key").get;
+        if (z && z.isReactWarning) return !1;
       }
-      return t.key !== void 0;
+      return d.key !== void 0;
     }
-    function E(t, a) {
-      function y() {
-        ee || (ee = !0, console.error(
+    function f(d, z) {
+      function p() {
+        ae || (ae = !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
+          z
         ));
       }
-      y.isReactWarning = !0, Object.defineProperty(t, "key", {
-        get: y,
+      p.isReactWarning = !0, Object.defineProperty(d, "key", {
+        get: p,
         configurable: !0
       });
     }
-    function n() {
-      var t = l(this.type);
-      return te[t] || (te[t] = !0, console.error(
+    function j() {
+      var d = s(this.type);
+      return O[d] || (O[d] = !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;
+      )), d = this.props.ref, d !== void 0 ? d : 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 n(d, z, p, P, h, a) {
+      var t = p.ref;
+      return d = {
+        $$typeof: u,
+        type: d,
+        key: z,
+        props: p,
+        _owner: P
+      }, (t !== void 0 ? t : null) !== null ? Object.defineProperty(d, "ref", {
         enumerable: !1,
-        get: n
-      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        get: j
+      }) : Object.defineProperty(d, "ref", { enumerable: !1, value: null }), d._store = {}, Object.defineProperty(d._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(t, "_debugInfo", {
+      }), Object.defineProperty(d, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(t, "_debugStack", {
+      }), Object.defineProperty(d, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: I
-      }), Object.defineProperty(t, "_debugTask", {
+        value: h
+      }), Object.defineProperty(d, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: q
-      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+        value: a
+      }), Object.freeze && (Object.freeze(d.props), Object.freeze(d)), d;
     }
-    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 C(d, z, p, P, h, a) {
+      var t = z.children;
+      if (t !== void 0)
+        if (P)
+          if (se(t)) {
+            for (P = 0; P < t.length; P++)
+              c(t[P]);
+            Object.freeze && Object.freeze(t);
           } 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 c(t);
+      if (te.call(z, "key")) {
+        t = s(d);
+        var o = Object.keys(z).filter(function(l) {
+          return l !== "key";
         });
-        j = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", ae[N + j] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
+        P = 0 < o.length ? "{key: someKey, " + o.join(": ..., ") + ": ...}" : "{key: someKey}", re[t + P] || (o = 0 < o.length ? "{" + o.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,
+          t,
+          o,
+          t
+        ), re[t + 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 (t = null, p !== void 0 && (E(p), t = "" + p), y(z) && (E(z.key), t = "" + z.key), "key" in z) {
+        p = {};
+        for (var r in z)
+          r !== "key" && (p[r] = z[r]);
+      } else p = z;
+      return t && f(
+        p,
+        typeof d == "function" ? d.displayName || d.name || "Unknown" : d
+      ), n(
+        d,
         t,
-        N,
-        y,
-        i(),
-        I,
-        q
+        p,
+        v(),
+        h,
+        a
       );
     }
-    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 c(d) {
+      i(d) ? d._store && (d._store.validated = 1) : typeof d == "object" && d !== null && d.$$typeof === Z && (d._payload.status === "fulfilled" ? i(d._payload.value) && d._payload.value._store && (d._payload.value._store.validated = 1) : d._store && (d._store.validated = 1));
     }
-    function g(t) {
-      return typeof t == "object" && t !== null && t.$$typeof === v;
+    function i(d) {
+      return typeof d == "object" && d !== null && d.$$typeof === u;
     }
-    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 k = mt, u = /* @__PURE__ */ Symbol.for("react.transitional.element"), x = /* @__PURE__ */ Symbol.for("react.portal"), T = /* @__PURE__ */ Symbol.for("react.fragment"), A = /* @__PURE__ */ Symbol.for("react.strict_mode"), F = /* @__PURE__ */ Symbol.for("react.profiler"), D = /* @__PURE__ */ Symbol.for("react.consumer"), $ = /* @__PURE__ */ Symbol.for("react.context"), S = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), G = /* @__PURE__ */ Symbol.for("react.memo"), Z = /* @__PURE__ */ Symbol.for("react.lazy"), oe = /* @__PURE__ */ Symbol.for("react.activity"), J = /* @__PURE__ */ Symbol.for("react.client.reference"), X = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, te = Object.prototype.hasOwnProperty, se = Array.isArray, ne = console.createTask ? console.createTask : function() {
       return null;
     };
-    R = {
-      react_stack_bottom_frame: function(t) {
-        return t();
+    k = {
+      react_stack_bottom_frame: function(d) {
+        return d();
       }
     };
-    var ee, te = {}, re = 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,
+    var ae, O = {}, le = k.react_stack_bottom_frame.bind(
+      k,
+      R
+    )(), ie = ne(w(R)), re = {};
+    Ce.Fragment = T, Ce.jsx = function(d, z, p) {
+      var P = 1e4 > X.recentlyCreatedOwnerStacks++;
+      return C(
+        d,
+        z,
+        p,
         !1,
-        j ? Error("react-stack-top-frame") : re,
-        j ? W(w(t)) : se
+        P ? Error("react-stack-top-frame") : le,
+        P ? ne(w(d)) : ie
       );
-    }, z.jsxs = function(t, a, y) {
-      var j = 1e4 > U.recentlyCreatedOwnerStacks++;
-      return b(
-        t,
-        a,
-        y,
+    }, Ce.jsxs = function(d, z, p) {
+      var P = 1e4 > X.recentlyCreatedOwnerStacks++;
+      return C(
+        d,
+        z,
+        p,
         !0,
-        j ? Error("react-stack-top-frame") : re,
-        j ? W(w(t)) : se
+        P ? Error("react-stack-top-frame") : le,
+        P ? ne(w(d)) : ie
       );
     };
-  })()), z;
+  })()), Ce;
 }
-var de;
-function De() {
-  return de || (de = 1, process.env.NODE_ENV === "production" ? F.exports = Pe() : F.exports = Ce()), F.exports;
+var et;
+function qt() {
+  return et || (et = 1, process.env.NODE_ENV === "production" ? Me.exports = Wt() : Me.exports = Bt()), Me.exports;
 }
-var e = De();
-function J(...l) {
-  return Y(M(l));
+var e = qt();
+function Re(s, N = {}) {
+  const { maxHistory: E = 50 } = N, [w, v] = K(s), R = ee([]), y = ee([]), f = b((c) => {
+    v((i) => (R.current = [...R.current.slice(-(E - 1)), i], y.current = [], c));
+  }, [E]), j = b(() => {
+    R.current.length !== 0 && v((c) => {
+      const i = [...R.current], k = i.pop();
+      return R.current = i, y.current = [c, ...y.current], k;
+    });
+  }, []), n = b(() => {
+    y.current.length !== 0 && v((c) => {
+      const i = [...y.current], k = i.shift();
+      return y.current = i, R.current = [...R.current, c], k;
+    });
+  }, []), C = b((c) => {
+    R.current = [], y.current = [], v(c);
+  }, []);
+  return {
+    current: w,
+    canUndo: R.current.length > 0,
+    canRedo: y.current.length > 0,
+    undoCount: R.current.length,
+    redoCount: y.current.length,
+    push: f,
+    undo: j,
+    redo: n,
+    reset: C
+  };
 }
-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 Ae() {
+  const [s, N] = K(!1), [E, w] = K(""), [v, R] = K(""), y = ee(null), f = b((C, c) => (w(C), R(c), N(!0), new Promise((i) => {
+    y.current = i;
+  })), []), j = b(() => {
+    N(!1), y.current?.(!0), y.current = null;
+  }, []), n = b(() => {
+    N(!1), y.current?.(!1), y.current = null;
+  }, []);
+  return { isOpen: s, title: E, message: v, confirm: f, onConfirm: j, onCancel: n };
+}
+function Le() {
+  const [s, N] = K(/* @__PURE__ */ new Set()), E = b((f, j = !1) => {
+    N((n) => {
+      const C = new Set(j ? n : []);
+      return n.has(f) && j ? C.delete(f) : C.add(f), C;
+    });
+  }, []), w = b((f) => {
+    N(/* @__PURE__ */ new Set([f]));
+  }, []), v = b((f) => {
+    N(new Set(f));
+  }, []), R = b(() => {
+    N(/* @__PURE__ */ new Set());
+  }, []), y = b((f) => s.has(f), [s]);
+  return {
+    selectedIds: s,
+    toggle: E,
+    selectOne: w,
+    selectMany: v,
+    clearSelection: R,
+    isSelected: y,
+    count: s.size
+  };
+}
+function Ie() {
+  const [s, N] = K(null), E = b((v) => {
+    N(structuredClone(v));
+  }, []), w = b(() => s ? structuredClone(s) : null, [s]);
+  return {
+    clipboard: s,
+    copy: E,
+    paste: w,
+    hasContent: s !== null
+  };
+}
+function We(s = {}) {
+  const { minZoom: N = 0.25, maxZoom: E = 3, zoomStep: w = 0.1, initialZoom: v = 1 } = s, [R, y] = K(v), [f, j] = K({ x: 0, y: 0 }), n = ee(!1), C = ee({ x: 0, y: 0 }), c = b((D) => Math.min(E, Math.max(N, +D.toFixed(2))), [N, E]), i = b(() => y((D) => c(D + w)), [c, w]), k = b(() => y((D) => c(D - w)), [c, w]), u = b(() => {
+    y(1), j({ x: 0, y: 0 });
+  }, []), x = b((D) => y(c(D)), [c]), T = b((D) => {
+    if (D.ctrlKey || D.metaKey) {
+      D.preventDefault();
+      const $ = D.deltaY > 0 ? -w : w;
+      y((S) => c(S + $));
+    }
+  }, [c, w]), A = b((D) => {
+    if (D.button === 1 || D.button === 0 && D.altKey) {
+      D.preventDefault(), n.current = !0, C.current = { x: D.clientX, y: D.clientY };
+      const $ = (U) => {
+        if (!n.current) return;
+        const H = U.clientX - C.current.x, G = U.clientY - C.current.y;
+        C.current = { x: U.clientX, y: U.clientY }, j((Z) => ({ x: Z.x + H, y: Z.y + G }));
+      }, S = () => {
+        n.current = !1, document.removeEventListener("mousemove", $), document.removeEventListener("mouseup", S);
+      };
+      document.addEventListener("mousemove", $), document.addEventListener("mouseup", S);
+    }
+  }, []), F = {
+    transform: `translate(${f.x}px, ${f.y}px) scale(${R})`,
+    transformOrigin: "0 0"
+  };
+  return {
+    zoom: R,
+    panOffset: f,
+    zoomIn: i,
+    zoomOut: k,
+    resetZoom: u,
+    setZoom: x,
+    handleWheel: T,
+    startPan: A,
+    transformStyle: F
+  };
+}
+function Jt(...s) {
+  return pe(ue(s));
+}
+function Fe({
+  isOpen: s,
+  title: N,
+  message: E,
+  confirmLabel: w = "Delete",
+  cancelLabel: v = "Cancel",
+  destructive: R = !0,
+  onConfirm: y,
+  onCancel: f
 }) {
-  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 = {
-        id: `comp-${Date.now()}`,
-        type: r,
-        label: c,
-        position: { x: 100, y: 100, width: 200, height: 100 },
-        props: {}
-      }, T = [...n, s];
-      _(T), k(s.id), x?.(T);
-    },
-    [n, d, x]
-  ), o = P(
-    (r) => {
-      if (d) return;
-      const c = n.filter((s) => s.id !== r);
-      _(c), b === r && k(null), x?.(c);
-    },
-    [n, b, d, x]
-  );
-  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: [
-      /* @__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(
+  const j = ee(null);
+  return fe(() => {
+    const n = j.current;
+    n && (s && !n.open ? n.showModal() : !s && n.open && n.close());
+  }, [s]), s ? /* @__PURE__ */ e.jsx(
+    "dialog",
+    {
+      ref: j,
+      className: "fixed inset-0 z-50 m-auto rounded-lg border bg-background p-0 shadow-lg backdrop:bg-black/50",
+      onClose: f,
+      "aria-labelledby": "confirm-title",
+      "aria-describedby": "confirm-message",
+      children: /* @__PURE__ */ e.jsxs("div", { className: "w-80 p-6", children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+          R && /* @__PURE__ */ e.jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10", children: /* @__PURE__ */ e.jsx(xt, { className: "h-5 w-5 text-destructive" }) }),
+          /* @__PURE__ */ e.jsx("h2", { id: "confirm-title", className: "text-lg font-semibold", children: N })
+        ] }),
+        /* @__PURE__ */ e.jsx("p", { id: "confirm-message", className: "text-sm text-muted-foreground mb-6", children: E }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              onClick: f,
+              className: "px-4 py-2 text-sm rounded-md border hover:bg-accent",
+              children: v
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              onClick: y,
+              className: Jt(
+                "px-4 py-2 text-sm rounded-md font-medium",
+                R ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" : "bg-primary text-primary-foreground hover:bg-primary/90"
+              ),
+              autoFocus: !0,
+              children: w
+            }
+          )
+        ] })
+      ] })
+    }
+  ) : null;
+}
+function Qt(...s) {
+  return pe(ue(s));
+}
+function Ue({
+  title: s = "Properties",
+  fields: N,
+  onChange: E,
+  className: w
+}) {
+  const [v, R] = K(/* @__PURE__ */ new Set()), y = b((j) => {
+    R((n) => {
+      const C = new Set(n);
+      return C.has(j) ? C.delete(j) : C.add(j), C;
+    });
+  }, []), f = N.reduce((j, n) => {
+    const C = n.group ?? "General";
+    return j[C] || (j[C] = []), j[C].push(n), j;
+  }, {});
+  return /* @__PURE__ */ e.jsxs("div", { className: Qt("flex flex-col", w), role: "region", "aria-label": s, children: [
+    /* @__PURE__ */ e.jsx("div", { className: "p-3 border-b font-medium text-sm", children: s }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(f).map(([j, n]) => /* @__PURE__ */ e.jsxs("div", { className: "border-b last:border-b-0", children: [
+        /* @__PURE__ */ e.jsxs(
           "button",
           {
-            onClick: () => S(c.type, c.label),
-            className: "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded hover:bg-accent text-left",
+            onClick: () => y(j),
+            className: "w-full flex items-center gap-1 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-accent/50",
             children: [
-              /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" }),
-              c.label
+              v.has(j) ? /* @__PURE__ */ e.jsx(He, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(Xe, { className: "h-3 w-3" }),
+              j
             ]
-          },
-          c.type
-        ))
-      ] }, r.name)) })
+          }
+        ),
+        !v.has(j) && /* @__PURE__ */ e.jsx("div", { className: "px-3 pb-2 space-y-2", children: n.map((C) => /* @__PURE__ */ e.jsx(Ot, { field: C, onChange: E }, C.name)) })
+      ] }, j)),
+      N.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "p-3 text-xs text-muted-foreground text-center", children: "Select an element to edit its properties" })
+    ] })
+  ] });
+}
+function Ot({ field: s, onChange: N }) {
+  const E = (w) => {
+    N(s.name, w);
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: s.label }),
+    s.type === "text" && /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        type: "text",
+        value: String(s.value ?? ""),
+        onChange: (w) => E(w.target.value),
+        className: "w-full px-2 py-1 text-xs border rounded bg-background"
+      }
+    ),
+    s.type === "number" && /* @__PURE__ */ e.jsx(
+      "input",
+      {
+        type: "number",
+        value: Number(s.value ?? 0),
+        onChange: (w) => E(Number(w.target.value)),
+        className: "w-full px-2 py-1 text-xs border rounded bg-background"
+      }
+    ),
+    s.type === "boolean" && /* @__PURE__ */ e.jsxs("label", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: !!s.value,
+          onChange: (w) => E(w.target.checked),
+          className: "rounded"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { className: "text-xs", children: s.value ? "Yes" : "No" })
     ] }),
-    /* @__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" }) }),
-          /* @__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("div", { className: "flex-1" }),
-        /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          Math.round(g * 100),
-          "%"
-        ] })
-      ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto bg-muted/10 p-4", children: /* @__PURE__ */ e.jsx(
-        "div",
+    s.type === "select" && /* @__PURE__ */ e.jsx(
+      "select",
+      {
+        value: String(s.value ?? ""),
+        onChange: (w) => E(w.target.value),
+        className: "w-full px-2 py-1 text-xs border rounded bg-background",
+        children: s.options?.map((w) => /* @__PURE__ */ e.jsx("option", { value: w.value, children: w.label }, w.value))
+      }
+    ),
+    s.type === "color" && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e.jsx(
+        "input",
         {
-          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
+          type: "color",
+          value: String(s.value ?? "#000000"),
+          onChange: (w) => E(w.target.value),
+          className: "h-6 w-6 rounded border cursor-pointer"
+        }
+      ),
+      /* @__PURE__ */ e.jsx("span", { className: "text-xs font-mono", children: String(s.value ?? "#000000") })
+    ] }),
+    s.type === "textarea" && /* @__PURE__ */ e.jsx(
+      "textarea",
+      {
+        value: String(s.value ?? ""),
+        onChange: (w) => E(w.target.value),
+        className: "w-full px-2 py-1 text-xs border rounded bg-background resize-y",
+        rows: 3
+      }
+    ),
+    s.description && /* @__PURE__ */ e.jsx("p", { className: "text-[0.65rem] text-muted-foreground/70", children: s.description })
+  ] });
+}
+function er(...s) {
+  return pe(ue(s));
+}
+function Be({
+  items: s,
+  canvasWidth: N,
+  canvasHeight: E,
+  position: w = "bottom-right",
+  size: v = 150,
+  className: R
+}) {
+  const y = Math.min(v / N, v / E), f = N * y, j = E * y, n = {
+    "top-left": "top-2 left-2",
+    "top-right": "top-2 right-2",
+    "bottom-left": "bottom-2 left-2",
+    "bottom-right": "bottom-2 right-2"
+  };
+  return /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: er(
+        "absolute border rounded bg-background/90 shadow-sm overflow-hidden",
+        n[w],
+        R
+      ),
+      role: "img",
+      "aria-label": "Canvas minimap",
+      children: /* @__PURE__ */ e.jsxs("svg", { width: f, height: j, viewBox: `0 0 ${N} ${E}`, children: [
+        /* @__PURE__ */ e.jsx("rect", { width: N, height: E, fill: "hsl(var(--muted))", opacity: "0.3" }),
+        s.map((C) => /* @__PURE__ */ e.jsx(
+          "rect",
+          {
+            x: C.x,
+            y: C.y,
+            width: C.width,
+            height: C.height,
+            fill: C.selected ? "hsl(var(--primary))" : C.color ?? "hsl(var(--foreground) / 0.3)",
+            rx: "2"
           },
-          children: n.map((r) => /* @__PURE__ */ e.jsxs(
+          C.id
+        ))
+      ] })
+    }
+  );
+}
+function tr(...s) {
+  return pe(ue(s));
+}
+const Ge = ht(null);
+Ge.displayName = "CollaborationContext";
+function vr({
+  config: s,
+  user: N,
+  onOperation: E,
+  onPresenceChange: w,
+  children: v
+}) {
+  const R = ee(null), [y, f] = K([]), [j, n] = K("disconnected"), C = ee(0), c = ee(null);
+  fe(() => {
+    if (!s.enabled || !N || !s.serverUrl || !(typeof WebSocket < "u")) return;
+    function A() {
+      let F;
+      try {
+        if (F = new URL(s.serverUrl), F.protocol !== "ws:" && F.protocol !== "wss:") return;
+      } catch {
+        return;
+      }
+      s.roomId && F.searchParams.set("room", s.roomId), F.searchParams.set("userId", N.id), n("connecting");
+      const D = new WebSocket(F.toString());
+      D.onopen = () => {
+        n("connected"), D.send(JSON.stringify({
+          type: "join",
+          userId: N.id,
+          userName: N.name,
+          avatar: N.avatar
+        }));
+      }, D.onmessage = ($) => {
+        try {
+          const S = JSON.parse($.data);
+          if (S.type === "presence") {
+            const U = S.users || [];
+            f(U.filter((H) => H.userId !== N.id)), w?.(U);
+          } else S.type === "operation" && E?.(S.operation);
+        } catch {
+        }
+      }, D.onclose = () => {
+        n("disconnected"), R.current = null, s.enabled && (c.current = setTimeout(A, s.autoSaveInterval ?? 3e3));
+      }, D.onerror = () => {
+        n("error");
+      }, R.current = D;
+    }
+    return A(), () => {
+      c.current && clearTimeout(c.current), R.current && (R.current.onclose = null, R.current.close(), R.current = null), n("disconnected");
+    };
+  }, [s.enabled, s.serverUrl, s.roomId, s.autoSaveInterval, N, E, w]);
+  const i = ce(() => !s.enabled || !N ? [] : [{
+    userId: N.id,
+    userName: N.name,
+    avatar: N.avatar,
+    color: rr(N.id),
+    status: "active",
+    lastActivity: (/* @__PURE__ */ new Date()).toISOString()
+  }, ...y], [s.enabled, N, y]), k = s.enabled && !!N && (s.serverUrl ? j === "connected" : !0), u = b(
+    (T) => {
+      if (!s.enabled || !N) return;
+      C.current += 1;
+      const A = {
+        ...T,
+        id: `op-${Date.now()}-${C.current}`,
+        userId: N.id,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        version: C.current
+      };
+      R.current?.readyState === WebSocket.OPEN && R.current.send(JSON.stringify({ type: "operation", operation: A })), E?.(A);
+    },
+    [s.enabled, N, E]
+  ), x = ce(
+    () => ({
+      users: i,
+      isConnected: k,
+      sendOperation: u,
+      currentUserId: N?.id,
+      connectionState: j,
+      versionCount: C.current
+    }),
+    [i, k, u, N?.id, j]
+  );
+  return /* @__PURE__ */ e.jsx(Ge.Provider, { value: x, children: v });
+}
+function $e() {
+  return rt(Ge);
+}
+function yr({ className: s }) {
+  const N = rt(Ge);
+  if (!N) return null;
+  const { connectionState: E, users: w } = N, v = {
+    connected: { color: "bg-green-500", label: "Connected" },
+    connecting: { color: "bg-yellow-500 animate-pulse", label: "Connecting…" },
+    disconnected: { color: "bg-gray-400", label: "Disconnected" },
+    error: { color: "bg-red-500", label: "Connection error" }
+  }, { color: R, label: y } = v[E] ?? v.disconnected;
+  return /* @__PURE__ */ e.jsxs("div", { className: tr("flex items-center gap-2 text-xs", s), role: "status", "aria-live": "polite", "aria-label": `Collaboration: ${y}`, children: [
+    /* @__PURE__ */ e.jsx("span", { className: `inline-block h-2 w-2 rounded-full ${R}` }),
+    /* @__PURE__ */ e.jsx("span", { children: y }),
+    E === "connected" && w.length > 1 && /* @__PURE__ */ e.jsxs("span", { className: "text-muted-foreground", children: [
+      "(",
+      w.length,
+      " users)"
+    ] })
+  ] });
+}
+function rr(s) {
+  const N = [
+    "#3b82f6",
+    "#ef4444",
+    "#22c55e",
+    "#f59e0b",
+    "#8b5cf6",
+    "#ec4899",
+    "#06b6d4",
+    "#f97316",
+    "#14b8a6",
+    "#f43f5e",
+    "#a855f7",
+    "#84cc16",
+    "#0ea5e9",
+    "#e879f9",
+    "#fb923c",
+    "#facc15"
+  ];
+  let E = 0;
+  for (let w = 0; w < s.length; w++)
+    E = (E << 5) - E + s.charCodeAt(w) | 0;
+  return N[Math.abs(E) % N.length];
+}
+function de(...s) {
+  return pe(ue(s));
+}
+function sr({
+  canvas: s = { width: 1200, height: 800, gridSize: 8, showGrid: !0, snapToGrid: !0 },
+  components: N = [],
+  palette: E = nr,
+  showComponentTree: w = !0,
+  undoRedo: v = !0,
+  propertyEditor: R = !0,
+  readOnly: y = !1,
+  showMinimap: f = !1,
+  onChange: j,
+  className: n
+}) {
+  const C = Re(N), c = C.current, i = b(
+    (a) => {
+      C.push(a), j?.(a);
+    },
+    [C, j]
+  ), k = We({
+    initialZoom: s.zoom ?? 1
+  }), { zoom: u } = k, x = Le(), T = ce(() => {
+    const a = Array.from(x.selectedIds);
+    return a.length > 0 ? a[0] : null;
+  }, [x.selectedIds]), A = ce(
+    () => c.find((a) => a.id === T),
+    [c, T]
+  ), F = Ie(), D = Ae(), $ = $e(), S = b(
+    (a) => {
+      $ && $.sendOperation({ ...a, userId: $.currentUserId ?? "" });
+    },
+    [$]
+  ), [U, H] = K(!0), [G, Z] = K(!0), [oe, J] = K(f), X = ee(null), te = ee(null), se = b(
+    (a) => !s.snapToGrid || !s.gridSize ? a : Math.round(a / s.gridSize) * s.gridSize,
+    [s.snapToGrid, s.gridSize]
+  ), ne = b(
+    (a, t) => {
+      if (y) return;
+      const o = E.flatMap((I) => I.items).find((I) => I.type === a), r = o?.defaultSize, l = {
+        id: `comp-${Date.now()}`,
+        type: a,
+        label: t,
+        position: {
+          x: 100,
+          y: 100,
+          width: r?.width ?? 200,
+          height: r?.height ?? 100
+        },
+        props: o?.defaultProps ?? {}
+      }, g = [...c, l];
+      i(g), x.selectOne(l.id), S({ type: "insert", elementId: l.id, data: { component: l } });
+    },
+    [c, y, E, i, x, S]
+  ), ae = b(
+    (a) => {
+      if (y) return;
+      const t = c.filter((o) => o.id !== a);
+      i(t), x.isSelected(a) && x.clearSelection(), S({ type: "delete", elementId: a, data: {} });
+    },
+    [c, y, i, x, S]
+  ), O = b(async () => {
+    if (y || x.count === 0 || !await D.confirm(
+      "Delete components",
+      `Are you sure you want to delete ${x.count} component${x.count > 1 ? "s" : ""}?`
+    )) return;
+    const t = x.selectedIds, o = c.filter((r) => !t.has(r.id));
+    i(o), x.clearSelection(), t.forEach((r) => {
+      S({ type: "delete", elementId: r, data: {} });
+    });
+  }, [y, x, D, c, i, S]), le = b(
+    (a, t) => {
+      if (y || !T) return;
+      const o = c.map((r) => r.id !== T ? r : a === "label" ? { ...r, label: String(t) } : a === "x" ? { ...r, position: { ...r.position, x: Number(t) } } : a === "y" ? { ...r, position: { ...r.position, y: Number(t) } } : a === "width" ? { ...r, position: { ...r.position, width: Number(t) } } : a === "height" ? { ...r, position: { ...r.position, height: Number(t) } } : { ...r, props: { ...r.props, [a]: t } });
+      i(o), S({ type: "update", elementId: T, data: { [a]: t } });
+    },
+    [y, T, c, i, S]
+  ), ie = b(() => {
+    const a = x.selectedIds;
+    if (a.size === 0) return;
+    const t = c.filter((o) => a.has(o.id));
+    F.copy(t);
+  }, [x, c, F]), re = b(() => {
+    if (y) return;
+    const a = F.paste();
+    if (!a || a.length === 0) return;
+    let t = 0;
+    const o = a.map((l) => ({
+      ...l,
+      id: `comp-${Date.now()}-${++t}-${Math.random().toString(36).slice(2, 7)}`,
+      position: { ...l.position, x: l.position.x + 20, y: l.position.y + 20 }
+    })), r = [...c, ...o];
+    i(r), x.selectMany(o.map((l) => l.id)), o.forEach((l) => {
+      S({ type: "insert", elementId: l.id, data: { component: l } });
+    });
+  }, [y, F, c, i, x, S]), d = b(
+    (a, t) => {
+      y || (X.current = { id: t.id, startX: a.clientX, startY: a.clientY }, a.dataTransfer.effectAllowed = "move", a.dataTransfer.setData("text/plain", t.id));
+    },
+    [y]
+  ), z = b((a) => {
+    a.preventDefault(), a.dataTransfer.dropEffect = "move";
+  }, []), p = b(
+    (a) => {
+      a.preventDefault();
+      const t = X.current;
+      if (!t || y) return;
+      const o = (a.clientX - t.startX) / u, r = (a.clientY - t.startY) / u, l = c.map((g) => g.id !== t.id ? g : {
+        ...g,
+        position: {
+          ...g.position,
+          x: se(g.position.x + o),
+          y: se(g.position.y + r)
+        }
+      });
+      i(l), S({ type: "move", elementId: t.id, data: {} }), X.current = null;
+    },
+    [y, u, c, i, se, S]
+  ), P = ce(() => A ? [
+    { name: "label", label: "Label", type: "text", value: A.label ?? "", group: "General" },
+    { name: "x", label: "X", type: "number", value: A.position.x, group: "Position" },
+    { name: "y", label: "Y", type: "number", value: A.position.y, group: "Position" },
+    { name: "width", label: "Width", type: "number", value: A.position.width, group: "Size" },
+    { name: "height", label: "Height", type: "number", value: A.position.height, group: "Size" }
+  ] : [], [A]), h = ce(
+    () => c.map((a) => ({
+      id: a.id,
+      x: a.position.x,
+      y: a.position.y,
+      width: typeof a.position.width == "number" ? a.position.width : 100,
+      height: typeof a.position.height == "number" ? a.position.height : 50,
+      selected: x.isSelected(a.id)
+    })),
+    [c, x]
+  );
+  return fe(() => {
+    const a = te.current;
+    if (!a) return;
+    const t = (o) => {
+      const r = ["INPUT", "TEXTAREA", "SELECT"].includes(o.target.tagName), l = o.ctrlKey || o.metaKey;
+      if ((o.key === "Delete" || o.key === "Backspace") && x.count > 0 && !r) {
+        o.preventDefault(), O();
+        return;
+      }
+      if (o.key === "Escape") {
+        x.clearSelection();
+        return;
+      }
+      if (!r) {
+        if (l && o.key === "z" && !o.shiftKey && v && !y) {
+          o.preventDefault(), C.undo();
+          return;
+        }
+        if (l && (o.key === "z" && o.shiftKey || o.key === "y") && v && !y) {
+          o.preventDefault(), C.redo();
+          return;
+        }
+        if (l && o.key === "c") {
+          o.preventDefault(), ie();
+          return;
+        }
+        if (l && o.key === "v" && !y) {
+          o.preventDefault(), re();
+          return;
+        }
+        if (l && o.key === "a") {
+          o.preventDefault(), x.selectMany(c.map((g) => g.id));
+          return;
+        }
+      }
+    };
+    return a.addEventListener("keydown", t), () => a.removeEventListener("keydown", t);
+  }, [
+    x,
+    O,
+    v,
+    y,
+    C,
+    ie,
+    re,
+    c
+  ]), /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: te,
+      tabIndex: 0,
+      className: de(
+        "flex h-full w-full border rounded-lg overflow-hidden bg-background",
+        n
+      ),
+      children: [
+        !y && /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: de(
+              "border-r bg-muted/30 flex flex-col transition-[width] duration-200",
+              U ? "w-60" : "w-0 overflow-hidden"
+            ),
+            role: "region",
+            "aria-label": "Component palette",
+            children: U && /* @__PURE__ */ e.jsxs(e.Fragment, { 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: E.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((t) => /* @__PURE__ */ e.jsxs(
+                  "button",
+                  {
+                    onClick: () => ne(t.type, t.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(xe, { className: "h-3 w-3" }),
+                      t.label
+                    ]
+                  },
+                  t.type
+                ))
+              ] }, a.name)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+          /* @__PURE__ */ e.jsxs(
             "div",
             {
-              className: J(
-                "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"
-              ),
-              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
-              },
-              onClick: () => k(r.id),
+              className: "flex items-center gap-2 p-2 border-b bg-muted/20",
+              role: "toolbar",
+              "aria-label": "Designer toolbar",
               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(
+                !y && /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    className: "p-1.5 rounded hover:bg-accent",
+                    title: U ? "Collapse palette" : "Expand palette",
+                    "aria-label": U ? "Collapse palette" : "Expand palette",
+                    onClick: () => H((a) => !a),
+                    children: /* @__PURE__ */ e.jsx(ft, { className: de("h-4 w-4", !U && "rotate-180") })
+                  }
+                ),
+                v && !y && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" }),
+                  /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: (c) => {
-                        c.stopPropagation(), o(r.id);
-                      },
-                      className: "ml-auto p-0.5 rounded hover:bg-destructive/10",
-                      children: /* @__PURE__ */ e.jsx(L, { className: "h-3 w-3 text-destructive" })
+                      className: de("p-1.5 rounded hover:bg-accent", !C.canUndo && "opacity-40 pointer-events-none"),
+                      title: "Undo (Ctrl+Z)",
+                      "aria-label": "Undo",
+                      disabled: !C.canUndo,
+                      onClick: () => C.undo(),
+                      children: /* @__PURE__ */ e.jsx(Ee, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      className: de("p-1.5 rounded hover:bg-accent", !C.canRedo && "opacity-40 pointer-events-none"),
+                      title: "Redo (Ctrl+Shift+Z)",
+                      "aria-label": "Redo",
+                      disabled: !C.canRedo,
+                      onClick: () => C.redo(),
+                      children: /* @__PURE__ */ e.jsx(De, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" })
+                ] }),
+                !y && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      className: de("p-1.5 rounded hover:bg-accent", x.count === 0 && "opacity-40 pointer-events-none"),
+                      title: "Copy (Ctrl+C)",
+                      "aria-label": "Copy",
+                      disabled: x.count === 0,
+                      onClick: ie,
+                      children: /* @__PURE__ */ e.jsx(Pe, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      className: de("p-1.5 rounded hover:bg-accent", !F.hasContent && "opacity-40 pointer-events-none"),
+                      title: "Paste (Ctrl+V)",
+                      "aria-label": "Paste",
+                      disabled: !F.hasContent,
+                      onClick: re,
+                      children: /* @__PURE__ */ e.jsx(Te, { className: "h-4 w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" })
+                ] }),
+                !y && /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    className: de("p-1.5 rounded hover:bg-accent", x.count === 0 && "opacity-40 pointer-events-none"),
+                    title: "Delete selected",
+                    "aria-label": "Delete selected",
+                    disabled: x.count === 0,
+                    onClick: O,
+                    children: /* @__PURE__ */ e.jsx(he, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Preview", "aria-label": "Preview", children: /* @__PURE__ */ e.jsx(st, { className: "h-4 w-4" }) }),
+                /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    className: de("p-1.5 rounded hover:bg-accent", oe && "bg-accent"),
+                    title: "Toggle minimap",
+                    "aria-label": "Toggle minimap",
+                    onClick: () => J((a) => !a),
+                    children: /* @__PURE__ */ e.jsx(nt, { className: "h-4 w-4" })
+                  }
+                ),
+                /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+                /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      className: "p-1 rounded hover:bg-accent text-xs",
+                      "aria-label": "Zoom out",
+                      onClick: k.zoomOut,
+                      children: /* @__PURE__ */ e.jsx(bt, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground w-10 text-center", children: [
+                    Math.round(u * 100),
+                    "%"
+                  ] }),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      className: "p-1 rounded hover:bg-accent text-xs",
+                      "aria-label": "Zoom in",
+                      onClick: k.zoomIn,
+                      children: /* @__PURE__ */ e.jsx(xe, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      className: "p-1 rounded hover:bg-accent text-xs",
+                      "aria-label": "Reset zoom",
+                      onClick: k.resetZoom,
+                      children: /* @__PURE__ */ e.jsx(gt, { className: "h-3 w-3" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e.jsx("div", { className: "p-2 text-xs text-muted-foreground", children: r.type })
+                w && /* @__PURE__ */ e.jsx(
+                  "button",
+                  {
+                    className: "p-1.5 rounded hover:bg-accent",
+                    title: G ? "Collapse panel" : "Expand panel",
+                    "aria-label": G ? "Collapse panel" : "Expand panel",
+                    onClick: () => Z((a) => !a),
+                    children: /* @__PURE__ */ e.jsx(Ke, { className: de("h-4 w-4", !G && "rotate-180") })
+                  }
+                )
               ]
-            },
-            r.id
-          ))
-        }
-      ) })
-    ] }),
-    w && /* @__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" }),
-        "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(
-        "button",
-        {
-          onClick: () => k(r.id),
-          className: J(
-            "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"
+            }
           ),
-          children: /* @__PURE__ */ e.jsx("span", { className: "truncate", children: r.label ?? r.type })
-        },
-        r.id
-      )) }),
-      v && /* @__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
-          ] }),
-          /* @__PURE__ */ e.jsxs("div", { children: [
-            "ID: ",
-            v.id
-          ] }),
-          /* @__PURE__ */ e.jsxs("div", { children: [
-            "Position: ",
-            v.position.x,
-            ", ",
-            v.position.y
-          ] }),
-          /* @__PURE__ */ e.jsxs("div", { children: [
-            "Size: ",
-            v.position.width,
-            " × ",
-            v.position.height
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
+          /* @__PURE__ */ e.jsx(
+            "div",
+            {
+              className: "flex-1 overflow-auto bg-muted/10 p-4 relative",
+              role: "region",
+              "aria-label": "Design canvas",
+              onWheel: k.handleWheel,
+              onMouseDown: k.startPan,
+              onDragOver: z,
+              onDrop: p,
+              children: /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: "relative bg-background border rounded shadow-sm mx-auto",
+                  style: {
+                    width: s.width * u,
+                    height: s.height * u,
+                    transform: `translate(${k.panOffset.x}px, ${k.panOffset.y}px)`,
+                    backgroundImage: s.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
+                    backgroundSize: s.showGrid && s.gridSize ? `${s.gridSize * u}px ${s.gridSize * u}px` : void 0
+                  },
+                  children: [
+                    c.map((a) => {
+                      const t = x.isSelected(a.id);
+                      return /* @__PURE__ */ e.jsxs(
+                        "div",
+                        {
+                          draggable: !y,
+                          onDragStart: (o) => d(o, a),
+                          className: de(
+                            "absolute border rounded cursor-move select-none transition-shadow",
+                            t ? "border-primary ring-2 ring-primary/20 shadow-md" : "border-border hover:border-primary/50"
+                          ),
+                          style: {
+                            left: a.position.x * u,
+                            top: a.position.y * u,
+                            width: typeof a.position.width == "number" ? a.position.width * u : a.position.width,
+                            height: typeof a.position.height == "number" ? a.position.height * u : a.position.height
+                          },
+                          onClick: (o) => x.toggle(a.id, o.shiftKey),
+                          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(at, { className: "h-3 w-3 text-muted-foreground" }),
+                              /* @__PURE__ */ e.jsx("span", { className: "truncate", children: a.label ?? a.type }),
+                              !y && /* @__PURE__ */ e.jsx(
+                                "button",
+                                {
+                                  onClick: (o) => {
+                                    o.stopPropagation(), ae(a.id);
+                                  },
+                                  className: "ml-auto p-0.5 rounded hover:bg-destructive/10",
+                                  "aria-label": `Delete ${a.label ?? a.type}`,
+                                  children: /* @__PURE__ */ e.jsx(he, { className: "h-3 w-3 text-destructive" })
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ e.jsx("div", { className: "p-2 text-xs text-muted-foreground", children: a.type })
+                          ]
+                        },
+                        a.id
+                      );
+                    }),
+                    oe && /* @__PURE__ */ e.jsx(
+                      Be,
+                      {
+                        items: h,
+                        canvasWidth: s.width,
+                        canvasHeight: s.height
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        w && /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: de(
+              "border-l bg-muted/30 flex flex-col transition-[width] duration-200",
+              G ? "w-60" : "w-0 overflow-hidden"
+            ),
+            role: "region",
+            "aria-label": "Component tree",
+            children: G && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs("div", { className: "p-3 border-b font-medium text-sm flex items-center gap-2", children: [
+                /* @__PURE__ */ e.jsx(vt, { className: "h-4 w-4" }),
+                "Component Tree"
+              ] }),
+              /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: c.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: "No components added yet. Click a component in the palette to add it to the canvas." }) : c.map((a) => /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: (t) => x.toggle(a.id, t.shiftKey),
+                  className: de(
+                    "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded text-left",
+                    x.isSelected(a.id) ? "bg-accent" : "hover:bg-accent/50"
+                  ),
+                  children: /* @__PURE__ */ e.jsx("span", { className: "truncate", children: a.label ?? a.type })
+                },
+                a.id
+              )) }),
+              R && A ? /* @__PURE__ */ e.jsx("div", { className: "border-t", children: /* @__PURE__ */ e.jsx(
+                Ue,
+                {
+                  title: `Properties – ${A.label ?? A.type}`,
+                  fields: P,
+                  onChange: le
+                }
+              ) }) : A && /* @__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: ",
+                    A.type
+                  ] }),
+                  /* @__PURE__ */ e.jsxs("div", { children: [
+                    "ID: ",
+                    A.id
+                  ] }),
+                  /* @__PURE__ */ e.jsxs("div", { children: [
+                    "Position: ",
+                    A.position.x,
+                    ",",
+                    " ",
+                    A.position.y
+                  ] }),
+                  /* @__PURE__ */ e.jsxs("div", { children: [
+                    "Size: ",
+                    A.position.width,
+                    " ×",
+                    " ",
+                    A.position.height
+                  ] })
+                ] })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          Fe,
+          {
+            isOpen: D.isOpen,
+            title: D.title,
+            message: D.message,
+            onConfirm: D.onConfirm,
+            onCancel: D.onCancel
+          }
+        )
+      ]
+    }
+  );
 }
-const $e = [
+const nr = [
   {
     name: "layout",
     label: "Layout",
@@ -459,212 +1257,775 @@ const $e = [
     ]
   }
 ];
-function B(...l) {
-  return Y(M(l));
+function Ve(...s) {
+  return pe(ue(s));
 }
-function ze({
-  entities: l = [],
-  relationships: u = [],
-  canvas: p = { width: 1200, height: 800, showGrid: !0 },
+function ar(s, N = 4, E = 280, w = 250, v = 50, R = 50) {
+  return s.map((y, f) => ({
+    ...y,
+    position: {
+      x: v + f % N * E,
+      y: R + Math.floor(f / N) * w
+    }
+  }));
+}
+function or({
+  entities: s = [],
+  relationships: N = [],
+  canvas: E = { width: 1200, height: 800, showGrid: !0 },
   showRelationshipLabels: w = !0,
-  readOnly: i = !1,
-  onEntitiesChange: d,
-  onRelationshipsChange: x,
-  className: E
+  readOnly: v = !1,
+  onEntitiesChange: R,
+  onRelationshipsChange: y,
+  className: f
 }) {
-  const [n, _] = A(l), [b, k] = A(u), [g, R] = A(null), v = P(() => {
-    if (i) return;
-    const o = {
+  const j = ee(null), n = Re(
+    { entities: s, relationships: N },
+    { maxHistory: 50 }
+  ), { entities: C, relationships: c } = n.current, i = b(
+    (r) => {
+      n.push(r), R?.(r.entities), y?.(r.relationships);
+    },
+    [n, R, y]
+  ), k = Ae(), u = Le(), x = u.count > 0 ? Array.from(u.selectedIds)[0] : null, T = Ie(), A = We({ minZoom: 0.25, maxZoom: 3, zoomStep: 0.1 }), F = $e(), [D, $] = K(!0), [S, U] = K(!0), [H, G] = K(null), [Z, oe] = K(""), J = ee(null), X = b(() => {
+    if (v) return;
+    const r = n.current, l = {
       id: `entity-${Date.now()}`,
-      name: `new_entity_${n.length + 1}`,
-      label: `New Entity ${n.length + 1}`,
+      name: `new_entity_${r.entities.length + 1}`,
+      label: `New Entity ${r.entities.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
-      );
-      _(r), k(c), g === o && R(null), d?.(r), x?.(c);
-    },
-    [n, b, g, i, d, x]
-  );
-  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: [
-    /* @__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("span", { className: "font-medium text-sm", children: "Data Model Designer" }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
-      !i && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-        /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            onClick: v,
-            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" }),
-              " Add Entity"
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            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" }),
-              " Add Relationship"
-            ]
-          }
+      position: {
+        x: 50 + r.entities.length % 4 * 280,
+        y: 50 + Math.floor(r.entities.length / 4) * 250
+      }
+    }, g = {
+      entities: [...r.entities, l],
+      relationships: r.relationships
+    };
+    i(g), u.selectOne(l.id), F?.sendOperation({ type: "insert", userId: F?.currentUserId ?? "", elementId: l.id, data: { name: l.name, label: l.label } });
+  }, [v, n, i, u, F]), te = b(
+    async (r) => {
+      if (v) return;
+      const l = C.find((Q) => Q.id === r);
+      if (!await k.confirm(
+        "Delete Entity",
+        `Are you sure you want to delete "${l?.label ?? r}"? This action cannot be undone.`
+      )) return;
+      const I = n.current, V = {
+        entities: I.entities.filter((Q) => Q.id !== r),
+        relationships: I.relationships.filter(
+          (Q) => Q.sourceEntity !== r && Q.targetEntity !== r
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto bg-muted/10 p-4", children: /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        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
-        },
-        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: [
-                  /* @__PURE__ */ e.jsx(
-                    "line",
-                    {
-                      x1: r.position.x + 120,
-                      y1: r.position.y + 50,
-                      x2: c.position.x + 120,
-                      y2: c.position.y + 50,
-                      stroke: "hsl(var(--primary))",
-                      strokeWidth: "2",
-                      strokeDasharray: o.type === "many-to-many" ? "5,5" : void 0
-                    }
-                  ),
-                  w && o.label && /* @__PURE__ */ e.jsx(
-                    "text",
-                    {
-                      x: (r.position.x + c.position.x) / 2 + 120,
-                      y: (r.position.y + c.position.y) / 2 + 50 - 8,
-                      textAnchor: "middle",
-                      className: "text-xs fill-muted-foreground",
-                      children: o.label
-                    }
-                  )
-                ] }, o.id);
-              })
-            }
-          ),
-          n.map((o) => /* @__PURE__ */ e.jsxs(
+      };
+      i(V), u.isSelected(r) && u.clearSelection(), F?.sendOperation({ type: "delete", userId: F?.currentUserId ?? "", elementId: r, data: {} });
+    },
+    [v, C, k, n, i, u, F]
+  ), se = b(async () => {
+    if (v || u.count === 0) return;
+    const r = Array.from(u.selectedIds);
+    if (!await k.confirm(
+      "Delete Entities",
+      `Are you sure you want to delete ${r.length} selected entity(s)? This action cannot be undone.`
+    )) return;
+    const g = n.current, I = new Set(r), V = {
+      entities: g.entities.filter((Q) => !I.has(Q.id)),
+      relationships: g.relationships.filter(
+        (Q) => !I.has(Q.sourceEntity) && !I.has(Q.targetEntity)
+      )
+    };
+    i(V), u.clearSelection();
+  }, [v, u, k, n, i]), ne = b(() => {
+    if (v) return;
+    const r = n.current, l = {
+      entities: ar(r.entities),
+      relationships: r.relationships
+    };
+    i(l);
+  }, [v, n, i]), ae = b(() => {
+    const r = C.filter((l) => u.isSelected(l.id));
+    r.length > 0 && T.copy(r);
+  }, [C, u, T]), O = b(() => {
+    if (v) return;
+    const r = T.paste();
+    if (!r || r.length === 0) return;
+    const l = n.current, g = r.map((V, Q) => ({
+      ...V,
+      id: `entity-${Date.now()}-${Q}`,
+      name: `${V.name}_copy`,
+      label: `${V.label} (Copy)`,
+      position: { x: V.position.x + 30, y: V.position.y + 30 }
+    })), I = {
+      entities: [...l.entities, ...g],
+      relationships: l.relationships
+    };
+    i(I), u.selectMany(g.map((V) => V.id));
+  }, [v, T, n, i, u]), le = b(
+    (r) => {
+      if (v) return;
+      const l = n.current, g = {
+        entities: l.entities.map((I) => {
+          if (I.id !== r) return I;
+          const V = {
+            name: `field_${I.fields.length + 1}`,
+            type: "text",
+            required: !1
+          };
+          return { ...I, fields: [...I.fields, V] };
+        }),
+        relationships: l.relationships
+      };
+      i(g);
+    },
+    [v, n, i]
+  ), ie = b(
+    (r, l, g) => {
+      v || (G({ entityId: r, fieldIndex: l }), oe(g));
+    },
+    [v]
+  ), re = b(() => {
+    if (!H) return;
+    const r = Z.trim();
+    if (r === "") {
+      G(null);
+      return;
+    }
+    const l = n.current, g = {
+      entities: l.entities.map((I) => {
+        if (I.id !== H.entityId) return I;
+        const V = I.fields.map(
+          (Q, we) => we === H.fieldIndex ? { ...Q, name: r } : Q
+        );
+        return { ...I, fields: V };
+      }),
+      relationships: l.relationships
+    };
+    i(g), G(null);
+  }, [H, Z, n, i]), d = b(() => {
+    G(null);
+  }, []), z = b(
+    (r, l) => {
+      if (v || !C.find((V) => V.id === l)) return;
+      const I = r.target.getBoundingClientRect();
+      J.current = {
+        entityId: l,
+        offsetX: r.clientX - I.left,
+        offsetY: r.clientY - I.top
+      }, r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", l);
+    },
+    [v, C]
+  ), p = b((r) => {
+    r.preventDefault(), r.dataTransfer.dropEffect = "move";
+  }, []), P = b(
+    (r) => {
+      if (r.preventDefault(), !J.current) return;
+      const l = r.currentTarget.getBoundingClientRect(), g = A.zoom, I = (r.clientX - l.left - A.panOffset.x) / g - J.current.offsetX, V = (r.clientY - l.top - A.panOffset.y) / g - J.current.offsetY, Q = n.current, we = {
+        entities: Q.entities.map(
+          (je) => je.id === J.current.entityId ? { ...je, position: { x: Math.max(0, Math.round(I)), y: Math.max(0, Math.round(V)) } } : je
+        ),
+        relationships: Q.relationships
+      };
+      i(we), J.current = null;
+    },
+    [A.zoom, A.panOffset, n, i]
+  ), h = x ? C.find((r) => r.id === x) : null, a = h ? [
+    { name: "name", label: "Name", type: "text", value: h.name, group: "General" },
+    { name: "label", label: "Label", type: "text", value: h.label, group: "General" },
+    { name: "description", label: "Description", type: "textarea", value: h.description ?? "", group: "General" },
+    { name: "color", label: "Color", type: "color", value: h.color ?? "#3b82f6", group: "Appearance" },
+    { name: "position.x", label: "X Position", type: "number", value: h.position.x, group: "Position" },
+    { name: "position.y", label: "Y Position", type: "number", value: h.position.y, group: "Position" }
+  ] : [], t = b(
+    (r, l) => {
+      if (!x) return;
+      const g = n.current, I = {
+        entities: g.entities.map((V) => V.id !== x ? V : r === "position.x" ? { ...V, position: { ...V.position, x: Number(l) } } : r === "position.y" ? { ...V, position: { ...V.position, y: Number(l) } } : { ...V, [r]: l }),
+        relationships: g.relationships
+      };
+      i(I);
+    },
+    [x, n, i]
+  );
+  fe(() => {
+    const r = j.current;
+    if (!r) return;
+    const l = (g) => {
+      const I = g.target.tagName;
+      if (I === "INPUT" || I === "TEXTAREA" || I === "SELECT") return;
+      const V = g.ctrlKey || g.metaKey;
+      V && g.key === "z" ? (g.preventDefault(), n.undo()) : V && (g.key === "y" || g.shiftKey && g.key === "Z") ? (g.preventDefault(), n.redo()) : V && g.key === "c" ? (g.preventDefault(), ae()) : V && g.key === "v" ? (g.preventDefault(), O()) : (g.key === "Delete" || g.key === "Backspace") && u.count > 0 ? (g.preventDefault(), se()) : g.key === "Escape" && (u.clearSelection(), G(null));
+    };
+    return r.addEventListener("keydown", l), () => r.removeEventListener("keydown", l);
+  }, [n, ae, O, se, u]);
+  const o = C.map((r) => ({
+    id: r.id,
+    x: r.position.x,
+    y: r.position.y,
+    width: 240,
+    height: 40 + r.fields.length * 24,
+    color: r.color,
+    selected: u.isSelected(r.id)
+  }));
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: j,
+      tabIndex: 0,
+      className: Ve("flex h-full w-full border rounded-lg overflow-hidden bg-background", f),
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+          /* @__PURE__ */ e.jsxs("div", { role: "toolbar", "aria-label": "Designer toolbar", className: "flex items-center gap-2 p-2 border-b bg-muted/20 flex-wrap", children: [
+            /* @__PURE__ */ e.jsx(qe, { className: "h-4 w-4" }),
+            /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: "Data Model Designer" }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 ml-2 border-l pl-2", children: [
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: () => n.undo(),
+                  disabled: !n.canUndo,
+                  "aria-label": "Undo",
+                  title: "Undo (Ctrl+Z)",
+                  className: "p-1 rounded hover:bg-accent disabled:opacity-40",
+                  children: /* @__PURE__ */ e.jsx(Ee, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: () => n.redo(),
+                  disabled: !n.canRedo,
+                  "aria-label": "Redo",
+                  title: "Redo (Ctrl+Y)",
+                  className: "p-1 rounded hover:bg-accent disabled:opacity-40",
+                  children: /* @__PURE__ */ e.jsx(De, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 border-l pl-2", children: [
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: A.zoomOut,
+                  "aria-label": "Zoom Out",
+                  title: "Zoom Out",
+                  className: "p-1 rounded hover:bg-accent",
+                  children: /* @__PURE__ */ e.jsx(ot, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ e.jsxs("span", { className: "text-xs tabular-nums w-10 text-center", children: [
+                Math.round(A.zoom * 100),
+                "%"
+              ] }),
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: A.zoomIn,
+                  "aria-label": "Zoom In",
+                  title: "Zoom In",
+                  className: "p-1 rounded hover:bg-accent",
+                  children: /* @__PURE__ */ e.jsx(lt, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: A.resetZoom,
+                  "aria-label": "Reset Zoom",
+                  title: "Reset Zoom",
+                  className: "p-1 rounded hover:bg-accent",
+                  children: /* @__PURE__ */ e.jsx(it, { className: "h-3 w-3" })
+                }
+              )
+            ] }),
+            !v && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 border-l pl-2", children: [
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: ae,
+                  disabled: u.count === 0,
+                  "aria-label": "Copy",
+                  title: "Copy (Ctrl+C)",
+                  className: "p-1 rounded hover:bg-accent disabled:opacity-40",
+                  children: /* @__PURE__ */ e.jsx(Pe, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: O,
+                  disabled: !T.hasContent,
+                  "aria-label": "Paste",
+                  title: "Paste (Ctrl+V)",
+                  className: "p-1 rounded hover:bg-accent disabled:opacity-40",
+                  children: /* @__PURE__ */ e.jsx(Te, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] }),
+            !v && /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: ne,
+                "aria-label": "Auto Layout",
+                title: "Auto Layout",
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded border hover:bg-accent",
+                children: [
+                  /* @__PURE__ */ e.jsx(yt, { className: "h-3 w-3" }),
+                  " Auto Layout"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+            F?.isConnected && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", role: "status", "aria-label": "Collaboration active", children: [
+              /* @__PURE__ */ e.jsx(wt, { className: "h-3 w-3" }),
+              /* @__PURE__ */ e.jsxs("span", { children: [
+                F.users.length,
+                " user",
+                F.users.length !== 1 ? "s" : ""
+              ] })
+            ] }),
+            u.count > 1 && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              u.count,
+              " selected"
+            ] }),
+            !v && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+              /* @__PURE__ */ e.jsxs(
+                "button",
+                {
+                  onClick: X,
+                  "aria-label": "Add Entity",
+                  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(xe, { className: "h-3 w-3" }),
+                    " Add Entity"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e.jsxs(
+                "button",
+                {
+                  "aria-label": "Add Relationship",
+                  title: "Add Relationship (coming soon)",
+                  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(jt, { className: "h-3 w-3" }),
+                    " Add Relationship"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsxs(
             "div",
             {
-              className: B(
-                "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"
-              ),
-              style: {
-                left: o.position.x,
-                top: o.position.y
-              },
-              onClick: () => R(o.id),
+              role: "region",
+              "aria-label": "Canvas",
+              className: "flex-1 overflow-auto bg-muted/10 p-4 relative",
+              onWheel: A.handleWheel,
+              onMouseDown: A.startPan,
+              onDragOver: p,
+              onDrop: P,
               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)" },
+                    className: "relative",
+                    style: {
+                      width: E.width,
+                      minHeight: E.height,
+                      ...A.transformStyle,
+                      backgroundImage: E.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
+                      backgroundSize: E.showGrid ? "20px 20px" : void 0
+                    },
                     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(
-                        "button",
+                      /* @__PURE__ */ e.jsx(
+                        "svg",
                         {
-                          onClick: (r) => {
-                            r.stopPropagation(), S(o.id);
-                          },
-                          className: "ml-auto p-0.5 rounded hover:bg-destructive/20",
-                          children: /* @__PURE__ */ e.jsx(L, { className: "h-3 w-3 text-destructive" })
+                          className: "absolute inset-0 pointer-events-none",
+                          width: E.width,
+                          height: E.height,
+                          children: c.map((r) => {
+                            const l = C.find((I) => I.id === r.sourceEntity), g = C.find((I) => I.id === r.targetEntity);
+                            return !l || !g ? null : /* @__PURE__ */ e.jsxs("g", { children: [
+                              /* @__PURE__ */ e.jsx(
+                                "line",
+                                {
+                                  x1: l.position.x + 120,
+                                  y1: l.position.y + 50,
+                                  x2: g.position.x + 120,
+                                  y2: g.position.y + 50,
+                                  stroke: "hsl(var(--primary))",
+                                  strokeWidth: "2",
+                                  strokeDasharray: r.type === "many-to-many" ? "5,5" : void 0
+                                }
+                              ),
+                              w && r.label && /* @__PURE__ */ e.jsx(
+                                "text",
+                                {
+                                  x: (l.position.x + g.position.x) / 2 + 120,
+                                  y: (l.position.y + g.position.y) / 2 + 50 - 8,
+                                  textAnchor: "middle",
+                                  className: "text-xs fill-muted-foreground",
+                                  children: r.label
+                                }
+                              )
+                            ] }, r.id);
+                          })
                         }
-                      )
+                      ),
+                      C.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-muted-foreground text-sm", children: "No entities in the model. Click 'Add Entity' to create your first entity." }),
+                      C.map((r) => /* @__PURE__ */ e.jsxs(
+                        "div",
+                        {
+                          role: "group",
+                          "aria-label": r.label,
+                          draggable: !v,
+                          onDragStart: (l) => z(l, r.id),
+                          className: Ve(
+                            "absolute rounded-lg border-2 bg-background shadow-sm w-60 select-none cursor-grab active:cursor-grabbing",
+                            u.isSelected(r.id) ? "border-primary ring-2 ring-primary/20" : "border-border hover:border-primary/50"
+                          ),
+                          style: {
+                            left: r.position.x,
+                            top: r.position.y
+                          },
+                          onClick: (l) => u.toggle(r.id, l.shiftKey),
+                          children: [
+                            /* @__PURE__ */ e.jsxs(
+                              "div",
+                              {
+                                className: "flex items-center gap-2 px-3 py-2 rounded-t-lg font-medium text-sm",
+                                style: { backgroundColor: r.color ?? "hsl(var(--primary) / 0.1)" },
+                                children: [
+                                  /* @__PURE__ */ e.jsx(qe, { className: "h-3.5 w-3.5" }),
+                                  /* @__PURE__ */ e.jsx("span", { className: "truncate", children: r.label }),
+                                  !v && /* @__PURE__ */ e.jsx(
+                                    "button",
+                                    {
+                                      onClick: (l) => {
+                                        l.stopPropagation(), te(r.id);
+                                      },
+                                      "aria-label": `Delete ${r.label}`,
+                                      className: "ml-auto p-0.5 rounded hover:bg-destructive/20",
+                                      children: /* @__PURE__ */ e.jsx(he, { className: "h-3 w-3 text-destructive" })
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 divide-y", children: r.fields.map((l, g) => /* @__PURE__ */ e.jsxs(
+                              "div",
+                              {
+                                className: "flex items-center gap-2 py-1 text-xs",
+                                children: [
+                                  H && H.entityId === r.id && H.fieldIndex === g ? /* @__PURE__ */ e.jsx(
+                                    "input",
+                                    {
+                                      type: "text",
+                                      value: Z,
+                                      onChange: (I) => oe(I.target.value),
+                                      onBlur: re,
+                                      onKeyDown: (I) => {
+                                        I.key === "Enter" && re(), I.key === "Escape" && d();
+                                      },
+                                      className: "font-mono text-xs px-1 py-0 border rounded bg-background w-24 focus:outline-none focus:ring-1 focus:ring-primary",
+                                      autoFocus: !0,
+                                      onClick: (I) => I.stopPropagation()
+                                    }
+                                  ) : /* @__PURE__ */ e.jsxs(
+                                    "span",
+                                    {
+                                      className: Ve(
+                                        "font-mono cursor-text",
+                                        l.primaryKey && "font-bold text-primary"
+                                      ),
+                                      onClick: (I) => {
+                                        I.stopPropagation(), ie(r.id, g, l.name);
+                                      },
+                                      title: "Click to edit field name",
+                                      children: [
+                                        l.primaryKey && /* @__PURE__ */ e.jsx("span", { className: "text-[0.65rem] font-semibold text-primary mr-0.5", children: "PK" }),
+                                        l.name
+                                      ]
+                                    }
+                                  ),
+                                  /* @__PURE__ */ e.jsx("span", { className: "text-muted-foreground ml-auto", children: l.type }),
+                                  l.required && /* @__PURE__ */ e.jsx("span", { className: "text-destructive", children: "*" })
+                                ]
+                              },
+                              `${l.name}-${g}`
+                            )) }),
+                            !v && /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 border-t", children: /* @__PURE__ */ e.jsxs(
+                              "button",
+                              {
+                                onClick: (l) => {
+                                  l.stopPropagation(), le(r.id);
+                                },
+                                "aria-label": `Add field to ${r.label}`,
+                                className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground w-full py-0.5",
+                                children: [
+                                  /* @__PURE__ */ e.jsx(xe, { className: "h-3 w-3" }),
+                                  " Add Field"
+                                ]
+                              }
+                            ) })
+                          ]
+                        },
+                        r.id
+                      ))
                     ]
                   }
                 ),
-                /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 divide-y", children: o.fields.map((r) => /* @__PURE__ */ e.jsxs(
-                  "div",
+                S && C.length > 0 && /* @__PURE__ */ e.jsx(
+                  Be,
                   {
-                    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.jsx("span", { className: "text-muted-foreground ml-auto", children: r.type }),
-                      r.required && /* @__PURE__ */ e.jsx("span", { className: "text-destructive", children: "*" })
-                    ]
-                  },
-                  r.name
-                )) })
+                    items: o,
+                    canvasWidth: E.width,
+                    canvasHeight: E.height,
+                    position: "bottom-right",
+                    size: 150
+                  }
+                )
               ]
-            },
-            o.id
-          ))
-        ]
-      }
-    ) })
-  ] }) });
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "w-64 border-l flex flex-col bg-background shrink-0", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => $((r) => !r),
+                className: "flex items-center gap-1 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-accent/50 border-b",
+                "aria-expanded": D,
+                "aria-controls": "property-editor-panel",
+                children: [
+                  D ? /* @__PURE__ */ e.jsx(Xe, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(He, { className: "h-3 w-3" }),
+                  "Properties"
+                ]
+              }
+            ),
+            D && /* @__PURE__ */ e.jsx("div", { id: "property-editor-panel", className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ e.jsx(
+              Ue,
+              {
+                title: h ? h.label : "Properties",
+                fields: a,
+                onChange: t
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { className: "border-t", children: /* @__PURE__ */ e.jsxs(
+            "button",
+            {
+              onClick: () => U((r) => !r),
+              className: "flex items-center gap-1 px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-accent/50 w-full",
+              "aria-expanded": S,
+              children: [
+                S ? /* @__PURE__ */ e.jsx(Xe, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(He, { className: "h-3 w-3" }),
+                "Minimap"
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          Fe,
+          {
+            isOpen: k.isOpen,
+            title: k.title,
+            message: k.message,
+            onConfirm: k.onConfirm,
+            onCancel: k.onCancel,
+            destructive: !0
+          }
+        )
+      ]
+    }
+  );
+}
+function _e(...s) {
+  return pe(ue(s));
 }
-function X(...l) {
-  return Y(M(l));
+const ye = 120, ke = 50;
+function lr(s, N) {
+  if (s.length === 0) return s;
+  const E = 200, w = 100, v = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
+  for (const c of s)
+    v.set(c.id, 0), R.set(c.id, []);
+  for (const c of N)
+    v.set(c.target, (v.get(c.target) ?? 0) + 1), R.get(c.source)?.push(c.target);
+  const y = [], f = /* @__PURE__ */ new Set();
+  let j = s.filter((c) => (v.get(c.id) ?? 0) === 0).map((c) => c.id);
+  for (j.length === 0 && (j = [s[0].id]); j.length > 0; ) {
+    y.push(j);
+    for (const i of j) f.add(i);
+    const c = /* @__PURE__ */ new Set();
+    for (const i of j)
+      for (const k of R.get(i) ?? [])
+        f.has(k) || c.add(k);
+    j = Array.from(c);
+  }
+  const n = s.filter((c) => !f.has(c.id)).map((c) => c.id);
+  n.length > 0 && y.push(n);
+  const C = /* @__PURE__ */ new Map();
+  for (let c = 0; c < y.length; c++) {
+    const i = y[c];
+    for (let k = 0; k < i.length; k++)
+      C.set(i[k], {
+        x: 80 + c * E,
+        y: 80 + k * w
+      });
+  }
+  return s.map((c) => ({
+    ...c,
+    position: C.get(c.id) ?? c.position
+  }));
 }
-function Ie({
-  processName: l = "New Process",
-  nodes: u = [],
-  edges: p = [],
+function ir({
+  processName: s = "New Process",
+  nodes: N = [],
+  edges: E = [],
   lanes: w,
-  canvas: i = { width: 1400, height: 800, showGrid: !0 },
-  showToolbar: d = !0,
-  readOnly: x = !1,
-  onNodesChange: E,
+  canvas: v = { width: 1400, height: 800, showGrid: !0 },
+  showMinimap: R = !0,
+  showToolbar: y = !0,
+  readOnly: f = !1,
+  onNodesChange: j,
   onEdgesChange: n,
-  className: _
+  className: C
 }) {
-  const [b, k] = A(u), [g, R] = A(p), [v, S] = A(null), o = P(
-    (s, T) => {
-      if (x) return;
-      const m = {
+  const c = Re(
+    { nodes: N, edges: E },
+    { maxHistory: 50 }
+  ), i = c.current.nodes, k = c.current.edges, u = b(
+    (m, Y) => {
+      c.push({ nodes: m, edges: Y }), j?.(m), n?.(Y);
+    },
+    [c, j, n]
+  ), x = Ae(), T = Le(), A = Ie(), F = We({ initialZoom: 1 }), D = $e(), [$, S] = K(null), [U, H] = K(!1), [G, Z] = K(null), [oe, J] = K(null), [X, te] = K(!0), [se, ne] = K(null), [ae, O] = K({ x: 0, y: 0 }), le = ee(null), ie = ee(j), re = ee(n);
+  ie.current = j, re.current = n, fe(() => {
+    ie.current?.(i), re.current?.(k);
+  }, [c.current]);
+  const d = b(
+    (m, Y) => {
+      if (f) return;
+      const L = {
         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: m,
+        label: Y,
+        position: { x: 200 + i.length * 160, y: 200 }
+      }, q = [...i, L];
+      u(q, k), S(L.id), T.selectOne(L.id), D?.sendOperation({ type: "insert", elementId: L.id, data: { label: Y }, userId: D.currentUserId ?? "" });
     },
-    [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);
+    [i, k, f, u, T, D]
+  ), z = b(
+    async (m) => {
+      if (f) return;
+      const Y = i.find((W) => W.id === m);
+      if (!await x.confirm(
+        "Delete Node",
+        `Are you sure you want to delete "${Y?.label ?? m}"? This will also remove all connected edges.`
+      )) return;
+      const q = i.filter((W) => W.id !== m), B = k.filter((W) => W.source !== m && W.target !== m);
+      u(q, B), $ === m && S(null), T.clearSelection(), D?.sendOperation({ type: "delete", elementId: m, data: {}, userId: D.currentUserId ?? "" });
     },
-    [b, g, v, x, E, n]
-  ), c = (s) => {
-    switch (s) {
+    [i, k, $, f, u, x, T, D]
+  ), p = b(async () => {
+    if (f || T.count === 0 || !await x.confirm(
+      "Delete Selected Nodes",
+      `Are you sure you want to delete ${T.count} selected node(s) and their connected edges?`
+    )) return;
+    const Y = T.selectedIds, L = i.filter((B) => !Y.has(B.id)), q = k.filter((B) => !Y.has(B.source) && !Y.has(B.target));
+    u(L, q), S(null), T.clearSelection();
+  }, [i, k, f, u, x, T]), P = b(() => {
+    const m = T.count > 0 ? T.selectedIds : $ ? /* @__PURE__ */ new Set([$]) : /* @__PURE__ */ new Set();
+    if (m.size === 0) return;
+    const Y = i.filter((L) => m.has(L.id));
+    A.copy(Y);
+  }, [i, $, T, A]), h = b(() => {
+    if (f) return;
+    const m = A.paste();
+    if (!m || m.length === 0) return;
+    const Y = 40, L = m.map((B) => ({
+      ...B,
+      id: `node-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+      position: { x: B.position.x + Y, y: B.position.y + Y }
+    })), q = [...i, ...L];
+    u(q, k), T.selectMany(L.map((B) => B.id)), S(L[0].id);
+  }, [f, i, k, A, u, T]), a = b(() => {
+    H((m) => m ? (Z(null), !1) : !0);
+  }, []), t = b(
+    (m) => {
+      if (!U) return !1;
+      if (!G)
+        return Z(m), !0;
+      if (G === m) return !0;
+      const Y = {
+        id: `edge-${Date.now()}`,
+        source: G,
+        target: m
+      }, L = [...k, Y];
+      return u(i, L), Z(null), H(!1), D?.sendOperation({ type: "insert", elementId: Y.id, data: { source: G, target: m }, userId: D.currentUserId ?? "" }), !0;
+    },
+    [U, G, i, k, u, D]
+  ), o = b(() => {
+    if (f || i.length === 0) return;
+    const m = lr(i, k);
+    u(m, k);
+  }, [i, k, f, u]), r = b(
+    (m, Y) => {
+      if (f || !i.find((B) => B.id === Y)) return;
+      ne(Y);
+      const q = m.target.getBoundingClientRect();
+      O({
+        x: m.clientX - q.left,
+        y: m.clientY - q.top
+      }), m.dataTransfer.effectAllowed = "move", m.dataTransfer.setData("text/plain", Y);
+    },
+    [f, i]
+  ), l = b(
+    (m) => {
+      if (m.preventDefault(), f || !se) return;
+      const Y = m.currentTarget.getBoundingClientRect(), L = F.zoom, q = (m.clientX - Y.left - F.panOffset.x) / L - ae.x, B = (m.clientY - Y.top - F.panOffset.y) / L - ae.y, W = Math.max(0, Math.round(q / 20) * 20), ge = Math.max(0, Math.round(B / 20) * 20), ve = i.map(
+        (be) => be.id === se ? { ...be, position: { x: W, y: ge } } : be
+      );
+      u(ve, k), ne(null);
+    },
+    [f, se, ae, i, k, F.zoom, F.panOffset, u]
+  ), g = b((m) => {
+    m.preventDefault(), m.dataTransfer.dropEffect = "move";
+  }, []), I = ce(() => i.find((m) => m.id === $) ?? null, [i, $]), V = ce(() => I ? [
+    { name: "label", label: "Name", type: "text", value: I.label, group: "General" },
+    {
+      name: "type",
+      label: "Type",
+      type: "select",
+      value: I.type,
+      options: [
+        { label: "Start Event", value: "start-event" },
+        { label: "End Event", value: "end-event" },
+        { label: "User Task", value: "user-task" },
+        { label: "Service Task", value: "service-task" },
+        { label: "Script Task", value: "script-task" },
+        { label: "Exclusive Gateway", value: "exclusive-gateway" },
+        { label: "Parallel Gateway", value: "parallel-gateway" },
+        { label: "Inclusive Gateway", value: "inclusive-gateway" }
+      ],
+      group: "General"
+    },
+    { name: "description", label: "Description", type: "textarea", value: I.description ?? "", group: "General" }
+  ] : [], [I]), Q = b(
+    (m, Y) => {
+      if (f || !$) return;
+      const L = i.map(
+        (q) => q.id === $ ? { ...q, [m]: Y } : q
+      );
+      u(L, k);
+    },
+    [f, $, i, k, u]
+  ), we = (m) => {
+    switch (m) {
       case "start-event":
         return "rounded-full bg-green-100 border-green-500 text-green-700";
       case "end-event":
@@ -682,423 +2043,1882 @@ function Ie({
       default:
         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 }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
-      !x && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            onClick: () => o("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" }),
-              " Start"
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            onClick: () => o("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" }),
-              " Task"
-            ]
-          }
-        ),
-        /* @__PURE__ */ e.jsxs(
-          "button",
+  }, je = ce(
+    () => i.map((m) => ({
+      id: m.id,
+      x: m.position.x,
+      y: m.position.y,
+      width: ye,
+      height: ke,
+      selected: T.isSelected(m.id) || m.id === $
+    })),
+    [i, T, $]
+  );
+  fe(() => {
+    const m = le.current;
+    if (!m) return;
+    const Y = (L) => {
+      const q = L.target?.tagName;
+      if (q === "INPUT" || q === "TEXTAREA" || q === "SELECT") return;
+      const B = L.ctrlKey || L.metaKey;
+      if (B && L.key === "z" && !L.shiftKey) {
+        L.preventDefault(), c.undo();
+        return;
+      }
+      if (B && L.key === "y" || B && L.key === "z" && L.shiftKey) {
+        L.preventDefault(), c.redo();
+        return;
+      }
+      if (B && L.key === "c") {
+        L.preventDefault(), P();
+        return;
+      }
+      if (B && L.key === "v") {
+        L.preventDefault(), h();
+        return;
+      }
+      if (L.key === "Delete" || L.key === "Backspace") {
+        T.count > 0 ? (L.preventDefault(), p()) : $ && (L.preventDefault(), z($));
+        return;
+      }
+      if (L.key === "Escape") {
+        U ? (H(!1), Z(null)) : (S(null), T.clearSelection());
+        return;
+      }
+    };
+    return m.addEventListener("keydown", Y), () => m.removeEventListener("keydown", Y);
+  }, [
+    $,
+    U,
+    T,
+    c,
+    P,
+    h,
+    z,
+    p
+  ]);
+  const ct = b(
+    (m) => {
+      m.target === m.currentTarget && (S(null), T.clearSelection(), U && (H(!1), Z(null)));
+    },
+    [U, T]
+  );
+  return /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: le,
+      tabIndex: 0,
+      className: _e("flex flex-col h-full w-full border rounded-lg overflow-hidden bg-background", C),
+      children: [
+        /* @__PURE__ */ e.jsx(
+          Fe,
           {
-            onClick: () => o("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" }),
-              " Gateway"
-            ]
+            isOpen: x.isOpen,
+            title: x.title,
+            message: x.message,
+            onConfirm: x.onConfirm,
+            onCancel: x.onCancel,
+            destructive: !0
           }
         ),
-        /* @__PURE__ */ e.jsxs(
-          "button",
-          {
-            onClick: () => o("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" }),
-              " End"
-            ]
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto bg-muted/10 p-4", children: /* @__PURE__ */ e.jsxs(
-      "div",
-      {
-        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
-        },
-        children: [
-          /* @__PURE__ */ e.jsxs(
-            "svg",
+        y && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", role: "toolbar", "aria-label": "Process toolbar", children: [
+          /* @__PURE__ */ e.jsx(Nt, { className: "h-4 w-4" }),
+          /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", "aria-label": "Process name", children: s }),
+          D?.isConnected && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", role: "status", "aria-label": "Collaboration active", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-green-500" }),
+            D.users.length,
+            " user",
+            D.users.length !== 1 ? "s" : ""
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+          !f && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: () => c.undo(),
+                disabled: !c.canUndo,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent disabled:opacity-40",
+                title: "Undo (Ctrl+Z)",
+                "aria-label": "Undo",
+                children: /* @__PURE__ */ e.jsx(Ee, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: () => c.redo(),
+                disabled: !c.canRedo,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent disabled:opacity-40",
+                title: "Redo (Ctrl+Y)",
+                "aria-label": "Redo",
+                children: /* @__PURE__ */ e.jsx(De, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: P,
+                disabled: T.count === 0 && !$,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent disabled:opacity-40",
+                title: "Copy (Ctrl+C)",
+                "aria-label": "Copy",
+                children: /* @__PURE__ */ e.jsx(Pe, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: h,
+                disabled: !A.hasContent,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent disabled:opacity-40",
+                title: "Paste (Ctrl+V)",
+                "aria-label": "Paste",
+                children: /* @__PURE__ */ e.jsx(Te, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: a,
+                className: _e(
+                  "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                  U && "bg-primary text-primary-foreground"
+                ),
+                title: "Connect nodes",
+                "aria-label": "Connect nodes",
+                "aria-pressed": U,
+                children: [
+                  /* @__PURE__ */ e.jsx(Ct, { className: "h-3 w-3" }),
+                  " Connect"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: o,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Auto layout",
+                "aria-label": "Auto layout",
+                children: [
+                  /* @__PURE__ */ e.jsx(kt, { className: "h-3 w-3" }),
+                  " Layout"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: F.zoomIn,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Zoom in",
+                "aria-label": "Zoom in",
+                children: /* @__PURE__ */ e.jsx(lt, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsxs("span", { className: "text-xs tabular-nums min-w-[3ch] text-center", "aria-label": "Zoom level", children: [
+              Math.round(F.zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: F.zoomOut,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Zoom out",
+                "aria-label": "Zoom out",
+                children: /* @__PURE__ */ e.jsx(ot, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: F.resetZoom,
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Reset zoom",
+                "aria-label": "Reset zoom",
+                children: /* @__PURE__ */ e.jsx(it, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => d("start-event", "Start"),
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Add Start Event",
+                "aria-label": "Add Start Event",
+                children: [
+                  /* @__PURE__ */ e.jsx(St, { className: "h-3 w-3 text-green-600" }),
+                  " Start"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => d("user-task", "User Task"),
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Add User Task",
+                "aria-label": "Add User Task",
+                children: [
+                  /* @__PURE__ */ e.jsx(Je, { className: "h-3 w-3 text-blue-600" }),
+                  " Task"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => d("exclusive-gateway", "Decision"),
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Add Gateway",
+                "aria-label": "Add Gateway",
+                children: [
+                  /* @__PURE__ */ e.jsx(Et, { className: "h-3 w-3 text-yellow-600" }),
+                  " Gateway"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => d("end-event", "End"),
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: "Add End Event",
+                "aria-label": "Add End Event",
+                children: [
+                  /* @__PURE__ */ e.jsx(Je, { className: "h-3 w-3 text-red-600" }),
+                  " End"
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" }),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: () => te((m) => !m),
+                className: "flex items-center gap-1 px-2 py-1 text-xs rounded hover:bg-accent",
+                title: X ? "Hide properties" : "Show properties",
+                "aria-label": X ? "Hide property panel" : "Show property panel",
+                "aria-expanded": X,
+                children: X ? /* @__PURE__ */ e.jsx(Ke, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(Dt, { className: "h-3 w-3" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ e.jsx(
+            "div",
             {
-              className: "absolute inset-0 pointer-events-none",
-              width: i.width,
-              height: i.height,
-              children: [
-                /* @__PURE__ */ e.jsx("defs", { children: /* @__PURE__ */ e.jsx(
-                  "marker",
-                  {
-                    id: "arrowhead",
-                    markerWidth: "10",
-                    markerHeight: "7",
-                    refX: "10",
-                    refY: "3.5",
-                    orient: "auto",
-                    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(
-                    "line",
-                    {
-                      x1: T.position.x + 60,
-                      y1: T.position.y + 25,
-                      x2: m.position.x,
-                      y2: m.position.y + 25,
-                      stroke: "hsl(var(--foreground) / 0.5)",
-                      strokeWidth: "2",
-                      markerEnd: "url(#arrowhead)"
-                    },
-                    s.id
-                  );
-                })
-              ]
+              className: "flex-1 overflow-auto bg-muted/10 p-4",
+              role: "region",
+              "aria-label": "Process canvas",
+              onWheel: F.handleWheel,
+              onMouseDown: F.startPan,
+              children: /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: "relative",
+                  style: {
+                    ...F.transformStyle,
+                    width: v.width,
+                    minHeight: v.height,
+                    backgroundImage: v.showGrid ? "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)" : void 0,
+                    backgroundSize: v.showGrid ? "20px 20px" : void 0
+                  },
+                  onClick: ct,
+                  onDrop: l,
+                  onDragOver: g,
+                  children: [
+                    /* @__PURE__ */ e.jsxs(
+                      "svg",
+                      {
+                        className: "absolute inset-0 pointer-events-none",
+                        width: v.width,
+                        height: v.height,
+                        children: [
+                          /* @__PURE__ */ e.jsx("defs", { children: /* @__PURE__ */ e.jsx(
+                            "marker",
+                            {
+                              id: "arrowhead",
+                              markerWidth: "10",
+                              markerHeight: "7",
+                              refX: "10",
+                              refY: "3.5",
+                              orient: "auto",
+                              children: /* @__PURE__ */ e.jsx("polygon", { points: "0 0, 10 3.5, 0 7", fill: "hsl(var(--foreground))" })
+                            }
+                          ) }),
+                          k.map((m) => {
+                            const Y = i.find((Ye) => Ye.id === m.source), L = i.find((Ye) => Ye.id === m.target);
+                            if (!Y || !L) return null;
+                            Y.position.x + ye / 2;
+                            const q = Y.position.y + ke / 2;
+                            L.position.x + ye / 2;
+                            const B = L.position.y + ke / 2, W = Y.position.x + ye, ge = q, ve = L.position.x, be = B, ut = (W + ve) / 2, pt = `M ${W} ${ge} Q ${ut} ${ge}, ${(W + ve) / 2} ${(ge + be) / 2} T ${ve} ${be}`;
+                            return /* @__PURE__ */ e.jsxs("g", { children: [
+                              /* @__PURE__ */ e.jsx(
+                                "path",
+                                {
+                                  d: pt,
+                                  fill: "none",
+                                  stroke: "hsl(var(--foreground) / 0.5)",
+                                  strokeWidth: "2",
+                                  markerEnd: "url(#arrowhead)"
+                                }
+                              ),
+                              m.label && /* @__PURE__ */ e.jsx(
+                                "text",
+                                {
+                                  x: (W + ve) / 2,
+                                  y: (ge + be) / 2 - 8,
+                                  textAnchor: "middle",
+                                  className: "text-[10px] fill-muted-foreground",
+                                  children: m.label
+                                }
+                              )
+                            ] }, m.id);
+                          })
+                        ]
+                      }
+                    ),
+                    i.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-center h-full min-h-[200px] text-muted-foreground text-sm", children: "No nodes in the process. Use the toolbar buttons to add start events, tasks, gateways, and end events." }),
+                    i.map((m) => {
+                      const Y = T.isSelected(m.id) || $ === m.id, L = G === m.id, q = oe === m.id, B = U || q;
+                      return /* @__PURE__ */ e.jsxs(
+                        "div",
+                        {
+                          className: "absolute select-none",
+                          style: {
+                            left: m.position.x,
+                            top: m.position.y
+                          },
+                          role: "group",
+                          "aria-label": m.label,
+                          draggable: !f && !U,
+                          onDragStart: (W) => r(W, m.id),
+                          onMouseEnter: () => J(m.id),
+                          onMouseLeave: () => J(null),
+                          onClick: (W) => {
+                            t(m.id) || (W.shiftKey ? T.toggle(m.id, !0) : (S(m.id), T.selectOne(m.id)));
+                          },
+                          children: [
+                            /* @__PURE__ */ e.jsx(
+                              "div",
+                              {
+                                className: _e(
+                                  "flex items-center justify-center border-2 min-w-[120px] min-h-[50px] px-3 py-2 transition-shadow",
+                                  we(m.type),
+                                  Y && "ring-2 ring-primary shadow-md",
+                                  L && "ring-2 ring-blue-400 shadow-lg",
+                                  U && !L && "cursor-crosshair"
+                                ),
+                                children: /* @__PURE__ */ e.jsx("span", { className: _e(
+                                  "text-xs font-medium",
+                                  (m.type === "exclusive-gateway" || m.type === "parallel-gateway" || m.type === "inclusive-gateway" || m.type === "event-based-gateway") && "-rotate-45"
+                                ), children: m.label })
+                              }
+                            ),
+                            B && !f && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                              /* @__PURE__ */ e.jsx(
+                                "div",
+                                {
+                                  className: "absolute w-3 h-3 rounded-full bg-blue-500 border-2 border-white shadow cursor-crosshair",
+                                  style: { left: -6, top: ke / 2 - 6 },
+                                  title: "Input port",
+                                  onClick: (W) => {
+                                    W.stopPropagation(), t(m.id);
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ e.jsx(
+                                "div",
+                                {
+                                  className: "absolute w-3 h-3 rounded-full bg-blue-500 border-2 border-white shadow cursor-crosshair",
+                                  style: { right: -6, top: ke / 2 - 6 },
+                                  title: "Output port",
+                                  onClick: (W) => {
+                                    W.stopPropagation(), U ? t(m.id) : (H(!0), Z(m.id));
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ e.jsx(
+                                "div",
+                                {
+                                  className: "absolute w-3 h-3 rounded-full bg-blue-400 border-2 border-white shadow cursor-crosshair",
+                                  style: { left: ye / 2 - 6, top: -6 },
+                                  title: "Port",
+                                  onClick: (W) => {
+                                    W.stopPropagation(), t(m.id);
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ e.jsx(
+                                "div",
+                                {
+                                  className: "absolute w-3 h-3 rounded-full bg-blue-400 border-2 border-white shadow cursor-crosshair",
+                                  style: { left: ye / 2 - 6, bottom: -6 },
+                                  title: "Port",
+                                  onClick: (W) => {
+                                    W.stopPropagation(), t(m.id);
+                                  }
+                                }
+                              )
+                            ] }),
+                            !f && Y && !U && /* @__PURE__ */ e.jsx(
+                              "button",
+                              {
+                                onClick: (W) => {
+                                  W.stopPropagation(), z(m.id);
+                                },
+                                className: "absolute -top-2 -right-2 p-0.5 rounded-full bg-destructive text-destructive-foreground shadow",
+                                "aria-label": "Delete node",
+                                children: /* @__PURE__ */ e.jsx(he, { className: "h-3 w-3" })
+                              }
+                            )
+                          ]
+                        },
+                        m.id
+                      );
+                    }),
+                    R && i.length > 0 && /* @__PURE__ */ e.jsx(
+                      Be,
+                      {
+                        items: je,
+                        canvasWidth: v.width ?? 1400,
+                        canvasHeight: v.height ?? 800,
+                        position: "bottom-right"
+                      }
+                    )
+                  ]
+                }
+              )
             }
           ),
-          b.map((s) => /* @__PURE__ */ e.jsxs(
-            "div",
+          X && !f && /* @__PURE__ */ e.jsx("div", { className: "w-64 border-l bg-background overflow-y-auto flex-shrink-0", role: "complementary", "aria-label": "Property panel", children: /* @__PURE__ */ e.jsx(
+            Ue,
             {
-              className: "absolute select-none",
-              style: {
-                left: s.position.x,
-                top: s.position.y
-              },
-              onClick: () => S(s.id),
-              children: [
-                /* @__PURE__ */ e.jsx(
-                  "div",
-                  {
-                    className: X(
-                      "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"
-                    ),
-                    children: /* @__PURE__ */ e.jsx("span", { className: X(
-                      "text-xs font-medium",
-                      (s.type === "exclusive-gateway" || s.type === "parallel-gateway") && "-rotate-45"
-                    ), children: s.label })
-                  }
-                ),
-                !x && v === s.id && /* @__PURE__ */ e.jsx(
-                  "button",
-                  {
-                    onClick: (T) => {
-                      T.stopPropagation(), r(s.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" })
-                  }
-                )
-              ]
-            },
-            s.id
-          ))
-        ]
-      }
-    ) })
-  ] });
+              title: I ? `Properties: ${I.label}` : "Properties",
+              fields: V,
+              onChange: Q
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
 }
-function ce(...l) {
-  return Y(M(l));
+function me(...s) {
+  return pe(ue(s));
 }
-const Fe = {
+const M = {
+  untitledReport: "Untitled Report",
+  reportCanvas: "Report canvas",
+  properties: "Properties",
+  propertiesPanel: "Properties panel",
+  designerToolbar: "Report designer toolbar",
+  selectElementPrompt: "Select an element to edit its properties",
+  addElementsPrompt: "Add elements using the buttons above",
+  addText: "Add Text",
+  addField: "Add Field",
+  addImage: "Add Image",
+  addChart: "Add Chart",
+  addTable: "Add Table",
+  undo: "Undo",
+  undoShortcut: "Undo (Ctrl+Z)",
+  redo: "Redo",
+  redoShortcut: "Redo (Ctrl+Shift+Z)",
+  copy: "Copy",
+  copyShortcut: "Copy (Ctrl+C)",
+  paste: "Paste",
+  pasteShortcut: "Paste (Ctrl+V)",
+  deleteSelected: "Delete selected",
+  deleteElement: "Delete element",
+  deleteElementsTitle: "Delete elements",
+  deleteElementMessage: (s) => `Are you sure you want to delete ${s} element${s > 1 ? "s" : ""}?`,
+  collapsePanel: "Collapse panel",
+  expandPanel: "Expand panel",
+  collaborationConnected: "Connected",
+  sectionHeader: "Report Header",
+  sectionPageHeader: "Page Header",
+  sectionGroupHeader: "Group Header",
+  sectionDetail: "Detail",
+  sectionGroupFooter: "Group Footer",
+  sectionPageFooter: "Page Footer",
+  sectionFooter: "Report Footer",
+  elementText: "Text",
+  elementImage: "🖼 Image",
+  elementChart: "📊 Chart",
+  elementTable: "📋 Table",
+  propLabel: "Label",
+  propX: "X",
+  propY: "Y",
+  propWidth: "Width",
+  propHeight: "Height",
+  propText: "Text",
+  propField: "Field",
+  groupPosition: "Position",
+  groupSize: "Size",
+  groupContent: "Content",
+  groupGeneral: "General"
+}, dr = {
   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",
+}, cr = [
+  { type: "header", height: 80, elements: [] },
+  { type: "detail", height: 400, elements: [], repeat: !0 },
+  { type: "footer", height: 60, elements: [] }
+];
+function ur({
+  reportName: s = M.untitledReport,
+  objectName: N,
+  pageSize: E = "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
+  margins: v = { top: 40, right: 40, bottom: 40, left: 40 },
+  sections: R = [],
+  showToolbar: y = !0,
+  showPropertyPanel: f = !0,
+  readOnly: j = !1,
+  onSectionsChange: n,
+  className: C
 }) {
-  const [k, g] = A(
-    d.length > 0 ? d : [
-      { 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 = {
-        id: `elem-${Date.now()}`,
-        type: h,
-        position: { x: i.left, y: 10, width: 200, height: 30 },
-        properties: {
-          text: h === "text" ? "New Text" : void 0,
-          field: h === "field" ? "field_name" : void 0
-        }
-      }, C = k.map(
-        (D, V) => V === m ? { ...D, elements: [...D.elements, f] } : D
-      );
-      g(C), v(f.id), _?.(C);
+  const c = Re(
+    R.length > 0 ? R : cr
+  ), i = c.current, k = b(
+    (p) => {
+      c.push(p), n?.(p);
     },
-    [k, i.left, n, _]
-  ), s = P(
-    (m) => {
-      if (n) return;
-      const h = k.map((f) => ({
-        ...f,
-        elements: f.elements.filter((C) => C.id !== m)
-      }));
-      g(h), R === m && v(null), _?.(h);
+    [c, n]
+  ), u = Le(), x = ce(() => {
+    const p = Array.from(u.selectedIds);
+    return p.length > 0 ? p[0] : null;
+  }, [u.selectedIds]), T = Ie(), A = Ae(), F = $e(), D = b(
+    (p) => {
+      F && F.sendOperation({ ...p, userId: F.currentUserId ?? "" });
     },
-    [k, R, n, _]
-  ), T = (m) => {
-    switch (m) {
+    [F]
+  ), [$, S] = K(!0), U = ee(null), H = ee(null), G = dr[E], Z = w === "landscape" ? G.height : G.width, oe = w === "landscape" ? G.width : G.height, J = (p) => {
+    switch (p) {
       case "header":
-        return "Report Header";
+        return M.sectionHeader;
       case "page-header":
-        return "Page Header";
+        return M.sectionPageHeader;
       case "group-header":
-        return "Group Header";
+        return M.sectionGroupHeader;
       case "detail":
-        return "Detail";
+        return M.sectionDetail;
       case "group-footer":
-        return "Group Footer";
+        return M.sectionGroupFooter;
       case "page-footer":
-        return "Page Footer";
+        return M.sectionPageFooter;
       case "footer":
-        return "Report Footer";
+        return M.sectionFooter;
       default:
-        return m;
+        return p;
     }
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: ce("flex h-full w-full border rounded-lg overflow-hidden bg-background", b), 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: [
+  }, X = ce(
+    () => x ? i.flatMap((p) => p.elements).find((p) => p.id === x) : null,
+    [x, i]
+  ), te = b(
+    (p, P) => {
+      if (j) return;
+      const h = {
+        id: `elem-${Date.now()}`,
+        type: P,
+        position: { x: v.left, y: 10, width: 200, height: 30 },
+        properties: {
+          text: P === "text" ? "New Text" : void 0,
+          field: P === "field" ? "field_name" : void 0
+        }
+      }, a = i.map(
+        (t, o) => o === p ? { ...t, elements: [...t.elements, h] } : t
+      );
+      k(a), u.selectOne(h.id), D({ type: "insert", elementId: h.id, data: { element: h } });
+    },
+    [i, v.left, j, k, u, D]
+  ), se = b(
+    (p) => {
+      if (j) return;
+      const P = i.map((h) => ({
+        ...h,
+        elements: h.elements.filter((a) => a.id !== p)
+      }));
+      k(P), u.isSelected(p) && u.clearSelection(), D({ type: "delete", elementId: p, data: {} });
+    },
+    [i, j, k, u, D]
+  ), ne = b(async () => {
+    if (j || u.count === 0 || !await A.confirm(
+      M.deleteElementsTitle,
+      M.deleteElementMessage(u.count)
+    )) return;
+    const P = u.selectedIds, h = i.map((a) => ({
+      ...a,
+      elements: a.elements.filter((t) => !P.has(t.id))
+    }));
+    k(h), u.clearSelection(), P.forEach((a) => {
+      D({ type: "delete", elementId: a, data: {} });
+    });
+  }, [j, u, A, i, k, D]), ae = b(
+    (p, P) => {
+      if (j || !x) return;
+      const h = i.map((a) => ({
+        ...a,
+        elements: a.elements.map((t) => t.id !== x ? t : p === "x" ? { ...t, position: { ...t.position, x: Number(P) } } : p === "y" ? { ...t, position: { ...t.position, y: Number(P) } } : p === "width" ? { ...t, position: { ...t.position, width: Number(P) } } : p === "height" ? { ...t, position: { ...t.position, height: Number(P) } } : { ...t, properties: { ...t.properties, [p]: P } })
+      }));
+      k(h), D({ type: "update", elementId: x, data: { [p]: P } });
+    },
+    [j, x, i, k, D]
+  ), O = b(() => {
+    const p = u.selectedIds;
+    if (p.size === 0) return;
+    const h = i.flatMap((a) => a.elements).filter((a) => p.has(a.id));
+    T.copy(h);
+  }, [u, i, T]), le = b(() => {
+    if (j) return;
+    const p = T.paste();
+    if (!p || p.length === 0) return;
+    let P = 0;
+    const h = p.map((r) => ({
+      ...r,
+      id: `elem-${Date.now()}-${++P}-${Math.random().toString(36).slice(2, 7)}`,
+      position: { ...r.position, x: r.position.x + 20, y: r.position.y + 20 }
+    })), a = i.findIndex((r) => r.type === "detail"), t = a >= 0 ? a : 0, o = i.map(
+      (r, l) => l === t ? { ...r, elements: [...r.elements, ...h] } : r
+    );
+    k(o), u.selectMany(h.map((r) => r.id)), h.forEach((r) => {
+      D({ type: "insert", elementId: r.id, data: { element: r } });
+    });
+  }, [j, T, i, k, u, D]), ie = b(
+    (p, P, h) => {
+      j || (U.current = { id: P.id, sectionIndex: h, startX: p.clientX, startY: p.clientY }, p.dataTransfer.effectAllowed = "move", p.dataTransfer.setData("text/plain", P.id));
+    },
+    [j]
+  ), re = b((p) => {
+    p.preventDefault(), p.dataTransfer.dropEffect = "move";
+  }, []), d = b(
+    (p, P) => {
+      p.preventDefault();
+      const h = U.current;
+      if (!h || j) return;
+      const a = p.clientX - h.startX, t = p.clientY - h.startY;
+      if (h.sectionIndex === P) {
+        const o = i.map((r, l) => l !== P ? r : {
+          ...r,
+          elements: r.elements.map((g) => g.id !== h.id ? g : {
+            ...g,
+            position: {
+              ...g.position,
+              x: Math.max(0, g.position.x + a),
+              y: Math.max(0, (typeof g.position.y == "number" ? g.position.y : 0) + t)
+            }
+          })
+        });
+        k(o);
+      } else {
+        let o = null;
+        const r = i.map((l, g) => {
+          if (g !== h.sectionIndex) return l;
+          const I = l.elements.find((V) => V.id === h.id);
+          return I && (o = {
+            ...I,
+            position: {
+              ...I.position,
+              x: Math.max(0, I.position.x + a),
+              y: Math.max(0, 10)
+            }
+          }), {
+            ...l,
+            elements: l.elements.filter((V) => V.id !== h.id)
+          };
+        });
+        if (o) {
+          const l = r.map((g, I) => I !== P ? g : { ...g, elements: [...g.elements, o] });
+          k(l);
+        }
+      }
+      D({ type: "move", elementId: h.id, data: {} }), U.current = null;
+    },
+    [j, i, k, D]
+  ), z = ce(() => {
+    if (!X) return [];
+    const p = [
+      { name: "x", label: M.propX, type: "number", value: X.position.x, group: M.groupPosition },
+      { name: "y", label: M.propY, type: "number", value: X.position.y, group: M.groupPosition },
+      { name: "width", label: M.propWidth, type: "number", value: X.position.width, group: M.groupSize },
+      { name: "height", label: M.propHeight, type: "number", value: X.position.height, group: M.groupSize }
+    ];
+    return X.type === "text" && p.push({
+      name: "text",
+      label: M.propText,
+      type: "text",
+      value: X.properties.text ?? "",
+      group: M.groupContent
+    }), X.type === "field" && p.push({
+      name: "field",
+      label: M.propField,
+      type: "text",
+      value: X.properties.field ?? "",
+      group: M.groupContent
+    }), p;
+  }, [X]);
+  return fe(() => {
+    const p = H.current;
+    if (!p) return;
+    const P = (h) => {
+      const a = ["INPUT", "TEXTAREA", "SELECT"].includes(h.target.tagName), t = h.ctrlKey || h.metaKey;
+      if ((h.key === "Delete" || h.key === "Backspace") && u.count > 0 && !a) {
+        h.preventDefault(), ne();
+        return;
+      }
+      if (h.key === "Escape") {
+        u.clearSelection();
+        return;
+      }
+      if (!a) {
+        if (t && h.key === "z" && !h.shiftKey && !j) {
+          h.preventDefault(), c.undo();
+          return;
+        }
+        if (t && (h.key === "z" && h.shiftKey || h.key === "y") && !j) {
+          h.preventDefault(), c.redo();
+          return;
+        }
+        if (t && h.key === "c") {
+          h.preventDefault(), O();
+          return;
+        }
+        if (t && h.key === "v" && !j) {
+          h.preventDefault(), le();
+          return;
+        }
+        if (t && h.key === "a") {
+          h.preventDefault();
+          const o = i.flatMap((r) => r.elements).map((r) => r.id);
+          u.selectMany(o);
+          return;
+        }
+      }
+    };
+    return p.addEventListener("keydown", P), () => p.removeEventListener("keydown", P);
+  }, [u, ne, j, c, O, le, i]), /* @__PURE__ */ e.jsxs("div", { ref: H, tabIndex: 0, className: me("flex h-full w-full border rounded-lg overflow-hidden bg-background", C), children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
+      y && /* @__PURE__ */ e.jsxs("div", { role: "toolbar", "aria-label": M.designerToolbar, className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
+        /* @__PURE__ */ e.jsx(Pt, { className: "h-4 w-4" }),
+        /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: s }),
+        N && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
           "(",
-          u,
+          N,
           ")"
         ] }),
+        !j && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" }),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: me("p-1.5 rounded hover:bg-accent", !c.canUndo && "opacity-40 pointer-events-none"),
+              title: M.undoShortcut,
+              "aria-label": M.undo,
+              disabled: !c.canUndo,
+              onClick: () => c.undo(),
+              children: /* @__PURE__ */ e.jsx(Ee, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: me("p-1.5 rounded hover:bg-accent", !c.canRedo && "opacity-40 pointer-events-none"),
+              title: M.redoShortcut,
+              "aria-label": M.redo,
+              disabled: !c.canRedo,
+              onClick: () => c.redo(),
+              children: /* @__PURE__ */ e.jsx(De, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" })
+        ] }),
+        !j && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: me("p-1.5 rounded hover:bg-accent", u.count === 0 && "opacity-40 pointer-events-none"),
+              title: M.copyShortcut,
+              "aria-label": M.copy,
+              disabled: u.count === 0,
+              onClick: O,
+              children: /* @__PURE__ */ e.jsx(Pe, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              className: me("p-1.5 rounded hover:bg-accent", !T.hasContent && "opacity-40 pointer-events-none"),
+              title: M.pasteShortcut,
+              "aria-label": M.paste,
+              disabled: !T.hasContent,
+              onClick: le,
+              children: /* @__PURE__ */ e.jsx(Te, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ e.jsx("div", { className: "w-px h-5 bg-border mx-1" })
+        ] }),
+        !j && /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: me("p-1.5 rounded hover:bg-accent", u.count === 0 && "opacity-40 pointer-events-none"),
+            title: M.deleteSelected,
+            "aria-label": M.deleteSelected,
+            disabled: u.count === 0,
+            onClick: ne,
+            children: /* @__PURE__ */ e.jsx(he, { className: "h-4 w-4" })
+          }
+        ),
         /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+        F?.isConnected && /* @__PURE__ */ e.jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ e.jsx("span", { className: "inline-block h-2 w-2 rounded-full bg-green-500" }),
+          M.collaborationConnected,
+          F.users.length > 1 && ` (${F.users.length})`
+        ] }),
         /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          p,
+          E,
           " ",
           w
-        ] })
+        ] }),
+        f && /* @__PURE__ */ e.jsx(
+          "button",
+          {
+            className: "p-1.5 rounded hover:bg-accent",
+            title: $ ? M.collapsePanel : M.expandPanel,
+            "aria-label": $ ? M.collapsePanel : M.expandPanel,
+            onClick: () => S((p) => !p),
+            children: /* @__PURE__ */ e.jsx(Ke, { className: me("h-4 w-4", !$ && "rotate-180") })
+          }
+        )
       ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto bg-muted/10 p-4 flex justify-center", children: /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ e.jsx("div", { role: "region", "aria-label": M.reportCanvas, className: "flex-1 overflow-auto bg-muted/10 p-4 flex justify-center", children: /* @__PURE__ */ e.jsx(
         "div",
         {
           className: "bg-white shadow-lg border",
           style: {
-            width: o,
-            minHeight: r
+            width: Z,
+            minHeight: oe
           },
-          children: k.map((m, h) => /* @__PURE__ */ e.jsxs(
+          children: i.map((p, P) => /* @__PURE__ */ e.jsxs(
             "div",
             {
               className: "relative border-b border-dashed border-gray-300",
-              style: { minHeight: m.height },
+              style: { minHeight: p.height },
+              onDragOver: re,
+              onDrop: (h) => d(h, P),
               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 && " ↻"
+                  J(p.type),
+                  p.repeat && " ↻"
                 ] }),
-                !n && /* @__PURE__ */ e.jsxs("div", { className: "absolute right-1 top-0 flex items-center gap-0.5", children: [
+                !j && /* @__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: () => te(P, "text"),
                       className: "p-0.5 rounded hover:bg-accent",
-                      title: "Add Text",
-                      children: /* @__PURE__ */ e.jsx(Te, { className: "h-3 w-3" })
+                      title: M.addText,
+                      "aria-label": M.addText,
+                      children: /* @__PURE__ */ e.jsx(Tt, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "field"),
+                      onClick: () => te(P, "field"),
                       className: "p-0.5 rounded hover:bg-accent",
-                      title: "Add Field",
-                      children: /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" })
+                      title: M.addField,
+                      "aria-label": M.addField,
+                      children: /* @__PURE__ */ e.jsx(xe, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "image"),
+                      onClick: () => te(P, "image"),
                       className: "p-0.5 rounded hover:bg-accent",
-                      title: "Add Image",
-                      children: /* @__PURE__ */ e.jsx(_e, { className: "h-3 w-3" })
+                      title: M.addImage,
+                      "aria-label": M.addImage,
+                      children: /* @__PURE__ */ e.jsx(Rt, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "chart"),
+                      onClick: () => te(P, "chart"),
                       className: "p-0.5 rounded hover:bg-accent",
-                      title: "Add Chart",
-                      children: /* @__PURE__ */ e.jsx(Se, { className: "h-3 w-3" })
+                      title: M.addChart,
+                      "aria-label": M.addChart,
+                      children: /* @__PURE__ */ e.jsx(At, { className: "h-3 w-3" })
                     }
                   ),
                   /* @__PURE__ */ e.jsx(
                     "button",
                     {
-                      onClick: () => c(h, "table"),
+                      onClick: () => te(P, "table"),
                       className: "p-0.5 rounded hover:bg-accent",
-                      title: "Add Table",
-                      children: /* @__PURE__ */ e.jsx(Ae, { className: "h-3 w-3" })
+                      title: M.addTable,
+                      "aria-label": M.addTable,
+                      children: /* @__PURE__ */ e.jsx(It, { 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(
-                  "div",
-                  {
-                    className: ce(
-                      "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"
-                    ),
-                    style: {
-                      left: f.position.x,
-                      top: (typeof f.position.y == "number" ? f.position.y : 0) + 24,
-                      width: f.position.width,
-                      height: f.position.height
-                    },
-                    onClick: () => v(f.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"
-                      ] }),
-                      !n && R === f.id && /* @__PURE__ */ e.jsx(
-                        "button",
-                        {
-                          onClick: (C) => {
-                            C.stopPropagation(), s(f.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" })
-                        }
-                      )
-                    ]
-                  },
-                  f.id
-                )) })
+                /* @__PURE__ */ e.jsxs("div", { className: "relative", style: { minHeight: p.height, paddingTop: 24 }, children: [
+                  p.elements.length === 0 && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center pt-4", children: M.addElementsPrompt }),
+                  p.elements.map((h) => {
+                    const a = u.isSelected(h.id);
+                    return /* @__PURE__ */ e.jsxs(
+                      "div",
+                      {
+                        draggable: !j,
+                        onDragStart: (t) => ie(t, h, P),
+                        className: me(
+                          "absolute border rounded px-2 py-1 text-xs cursor-pointer",
+                          a ? "border-primary ring-1 ring-primary/30 bg-primary/5" : "border-dashed border-gray-400 hover:border-primary/50"
+                        ),
+                        style: {
+                          left: h.position.x,
+                          top: (typeof h.position.y == "number" ? h.position.y : 0) + 24,
+                          width: h.position.width,
+                          height: h.position.height
+                        },
+                        onClick: (t) => u.toggle(h.id, t.shiftKey),
+                        children: [
+                          /* @__PURE__ */ e.jsxs("span", { className: "text-muted-foreground", children: [
+                            h.type === "text" && (h.properties.text ?? M.elementText),
+                            h.type === "field" && `{${h.properties.field ?? "field"}}`,
+                            h.type === "image" && M.elementImage,
+                            h.type === "chart" && M.elementChart,
+                            h.type === "table" && M.elementTable
+                          ] }),
+                          !j && a && /* @__PURE__ */ e.jsx(
+                            "button",
+                            {
+                              onClick: (t) => {
+                                t.stopPropagation(), se(h.id);
+                              },
+                              className: "absolute -top-2 -right-2 p-0.5 rounded-full bg-destructive text-destructive-foreground shadow",
+                              "aria-label": M.deleteElement,
+                              children: /* @__PURE__ */ e.jsx(he, { className: "h-2.5 w-2.5" })
+                            }
+                          )
+                        ]
+                      },
+                      h.id
+                    );
+                  })
+                ] })
               ]
             },
-            `${m.type}-${h}`
+            `${p.type}-${P}`
           ))
         }
       ) })
     ] }),
-    E && /* @__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: ",
-        R
-      ] }) }) : /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: "Select an element to view properties" }) })
-    ] })
+    f && /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        role: "region",
+        "aria-label": M.propertiesPanel,
+        className: me(
+          "border-l bg-muted/30 flex flex-col transition-[width] duration-200",
+          $ ? "w-56" : "w-0 overflow-hidden"
+        ),
+        children: $ && (x && X ? /* @__PURE__ */ e.jsx(
+          Ue,
+          {
+            title: `${M.properties} – ${X.type}`,
+            fields: z,
+            onChange: ae
+          }
+        ) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("div", { className: "p-3 border-b font-medium text-sm", children: M.properties }),
+          /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: M.selectElementPrompt }) })
+        ] }))
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      Fe,
+      {
+        isOpen: A.isOpen,
+        title: A.title,
+        message: A.message,
+        onConfirm: A.onConfirm,
+        onCancel: A.onCancel
+      }
+    )
   ] });
 }
-const ue = fe(null);
-ue.displayName = "CollaborationContext";
-function qe({
-  config: l,
-  user: u,
-  onOperation: p,
-  children: w
+function ze(...s) {
+  return pe(ue(s));
+}
+const _ = {
+  title: "View Designer",
+  saveView: "Save View",
+  cancel: "Cancel",
+  availableFields: "Available Fields",
+  allFieldsAdded: "All fields added",
+  noColumnsTitle: "No columns added yet. Select fields from the palette to add columns.",
+  columnsCount: (s) => `Columns (${s})`,
+  viewType: "View Type",
+  viewName: "View Name",
+  viewNamePlaceholder: "Enter view name...",
+  columnProperties: "Column Properties",
+  selectColumnPrompt: "Select a column to edit its properties",
+  labelField: "Label",
+  widthField: "Width",
+  widthPlaceholder: "auto",
+  fieldLabel: "Field:",
+  addFilter: "Add Filter",
+  addSort: "Add Sort",
+  valuePlaceholder: "Value",
+  asc: "Asc",
+  desc: "Desc",
+  selectField: "Select field...",
+  moveUp: "Move up",
+  moveDown: "Move down",
+  moveColumnUp: "Move column up",
+  moveColumnDown: "Move column down",
+  hideColumn: "Hide column",
+  showColumn: "Show column",
+  toggleVisibility: "Toggle column visibility",
+  removeColumn: "Remove column",
+  copyColumn: "Copy column",
+  pasteColumn: "Paste column",
+  deleteColumnTitle: "Delete Column",
+  deleteColumnMessage: (s) => `Are you sure you want to delete the column "${s}"? This action cannot be undone.`,
+  undo: "Undo (Ctrl+Z)",
+  redo: "Redo (Ctrl+Y)",
+  gridOptionsHint: "Grid view uses the columns configured above.",
+  groupByField: "Group By Field",
+  startDateField: "Start Date Field",
+  titleField: "Title Field",
+  latitudeField: "Latitude Field",
+  longitudeField: "Longitude Field",
+  imageField: "Image Field",
+  dateField: "Date Field"
+}, tt = [
+  { type: "grid", label: "Grid", icon: _t },
+  { type: "kanban", label: "Kanban", icon: zt },
+  { type: "gallery", label: "Gallery", icon: Lt },
+  { type: "calendar", label: "Calendar", icon: Ut },
+  { type: "timeline", label: "Timeline", icon: dt },
+  { type: "gantt", label: "Gantt", icon: Gt },
+  { type: "map", label: "Map", icon: nt }
+], pr = [
+  { 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 mr({
+  objectName: s,
+  viewId: N,
+  viewLabel: E = "",
+  viewType: w = "grid",
+  columns: v = [],
+  filters: R = [],
+  sort: y = [],
+  availableFields: f = [],
+  options: j = {},
+  readOnly: n = !1,
+  onSave: C,
+  onCancel: c,
+  className: i
 }) {
-  const i = Z(() => !l.enabled || !u ? [] : [{
-    userId: u.id,
-    userName: u.name,
-    avatar: u.avatar,
-    color: Le(u.id),
-    status: "active",
-    lastActivity: (/* @__PURE__ */ new Date()).toISOString()
-  }], [l.enabled, u]), d = l.enabled && !!u, x = P(
-    (n) => {
-      if (!d || !u) return;
-      const _ = {
-        ...n,
-        id: `op-${Date.now()}`,
-        userId: u.id,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-        version: Date.now()
+  const k = ee(null), u = Re({
+    columns: v,
+    filters: R,
+    sort: y,
+    viewType: w,
+    viewLabel: E,
+    options: j
+  }), { columns: x, filters: T, sort: A, viewType: F, viewLabel: D, options: $ } = u.current, S = b(
+    (t) => {
+      u.push({ ...u.current, ...t });
+    },
+    [u]
+  ), U = Ie(), H = Ae(), G = $e(), [Z, oe] = K(null), [J, X] = K("columns"), te = ce(() => {
+    const t = new Set(x.map((o) => o.field));
+    return f.filter((o) => !t.has(o.name));
+  }, [f, x]), se = b(
+    (t) => {
+      if (n) return;
+      const o = f.find((l) => l.name === t), r = {
+        field: t,
+        label: o?.label ?? t,
+        visible: !0,
+        order: x.length
       };
-      p?.(_);
+      S({ columns: [...x, r] }), G?.sendOperation({ type: "insert", userId: G.currentUserId ?? "", elementId: t, data: { column: r } });
     },
-    [d, u, p]
-  ), E = Z(
-    () => ({
-      users: i,
-      isConnected: d,
-      sendOperation: x,
-      currentUserId: u?.id
-    }),
-    [i, d, x, u?.id]
+    [f, x, n, S, G]
+  ), ne = b(
+    async (t) => {
+      if (n) return;
+      const o = x[t];
+      !o || !await H.confirm(
+        _.deleteColumnTitle,
+        _.deleteColumnMessage(o.label || o.field)
+      ) || (S({ columns: x.filter((l, g) => g !== t) }), Z === t && oe(null), G?.sendOperation({ type: "delete", userId: G.currentUserId ?? "", elementId: o.field, data: {} }));
+    },
+    [n, x, H, S, Z, G]
+  ), ae = b(
+    (t) => {
+      n || S({
+        columns: x.map((o, r) => r === t ? { ...o, visible: !o.visible } : o)
+      });
+    },
+    [n, x, S]
+  ), O = b(
+    (t, o) => {
+      if (n) return;
+      const r = o === "up" ? t - 1 : t + 1;
+      if (r < 0 || r >= x.length) return;
+      const l = [...x], g = l[t];
+      l[t] = l[r], l[r] = g, S({ columns: l }), oe(r);
+    },
+    [n, x, S]
+  ), le = b(() => {
+    n || f.length === 0 || S({
+      filters: [...T, { field: f[0].name, operator: "equals", value: "" }]
+    });
+  }, [n, f, T, S]), ie = b(
+    (t) => {
+      n || S({ filters: T.filter((o, r) => r !== t) });
+    },
+    [n, T, S]
+  ), re = b(
+    (t, o) => {
+      n || S({
+        filters: T.map((r, l) => l === t ? { ...r, ...o } : r)
+      });
+    },
+    [n, T, S]
+  ), d = b(() => {
+    n || f.length === 0 || S({
+      sort: [...A, { field: f[0].name, direction: "asc" }]
+    });
+  }, [n, f, A, S]), z = b(
+    (t) => {
+      n || S({ sort: A.filter((o, r) => r !== t) });
+    },
+    [n, A, S]
+  ), p = b(
+    (t, o) => {
+      n || S({
+        sort: A.map((r, l) => l === t ? { ...r, ...o } : r)
+      });
+    },
+    [n, A, S]
+  ), P = b(() => {
+    Z === null || !x[Z] || U.copy(x[Z]);
+  }, [Z, x, U]), h = b(() => {
+    if (n) return;
+    const t = U.paste();
+    if (!t) return;
+    const o = {
+      ...t,
+      field: `${t.field}_copy`,
+      label: `${t.label || t.field} (Copy)`,
+      order: x.length
+    };
+    S({ columns: [...x, o] });
+  }, [n, U, x, S]), a = b(() => {
+    C?.({
+      viewId: N,
+      viewLabel: D || `${s} View`,
+      viewType: F,
+      columns: x,
+      filters: T,
+      sort: A,
+      options: $
+    });
+  }, [C, N, D, s, F, x, T, A, $]);
+  return fe(() => {
+    const t = k.current;
+    if (!t) return;
+    const o = (r) => {
+      const l = ["INPUT", "TEXTAREA", "SELECT"].includes(r.target.tagName), g = r.ctrlKey || r.metaKey;
+      if (!l) {
+        if (g && r.key === "z" && !r.shiftKey && !n) {
+          r.preventDefault(), u.undo();
+          return;
+        }
+        if (g && (r.key === "z" && r.shiftKey || r.key === "y") && !n) {
+          r.preventDefault(), u.redo();
+          return;
+        }
+        if (g && r.key === "c") {
+          r.preventDefault(), P();
+          return;
+        }
+        if (g && r.key === "v" && !n) {
+          r.preventDefault(), h();
+          return;
+        }
+      }
+    };
+    return t.addEventListener("keydown", o), () => t.removeEventListener("keydown", o);
+  }, [n, u, P, h]), /* @__PURE__ */ e.jsxs(
+    "div",
+    {
+      ref: k,
+      tabIndex: -1,
+      className: ze("flex flex-col h-full w-full border rounded-lg overflow-hidden bg-background", i),
+      children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20 shrink-0", role: "toolbar", children: [
+          /* @__PURE__ */ e.jsx(Ft, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ e.jsx("span", { className: "font-medium text-sm", children: _.title }),
+          /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "— ",
+            s
+          ] }),
+          G?.isConnected && G.users.length > 1 && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 ml-2", role: "status", "aria-label": "Active collaborators", children: [
+            G.users.slice(0, 3).map((t) => /* @__PURE__ */ e.jsx(
+              "div",
+              {
+                className: "h-5 w-5 rounded-full text-[10px] font-bold flex items-center justify-center text-white",
+                style: { backgroundColor: t.color },
+                title: t.userName,
+                children: t.userName.charAt(0).toUpperCase()
+              },
+              t.userId
+            )),
+            G.users.length > 3 && /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+              "+",
+              G.users.length - 3
+            ] })
+          ] }),
+          /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+          !n && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: u.undo,
+                disabled: !u.canUndo,
+                className: "p-1.5 rounded hover:bg-accent disabled:opacity-30",
+                title: _.undo,
+                "aria-label": _.undo,
+                "data-testid": "view-designer-undo",
+                children: /* @__PURE__ */ e.jsx(Ee, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: u.redo,
+                disabled: !u.canRedo,
+                className: "p-1.5 rounded hover:bg-accent disabled:opacity-30",
+                title: _.redo,
+                "aria-label": _.redo,
+                "data-testid": "view-designer-redo",
+                children: /* @__PURE__ */ e.jsx(De, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" })
+          ] }),
+          !n && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: P,
+                disabled: Z === null,
+                className: "p-1.5 rounded hover:bg-accent disabled:opacity-30",
+                title: _.copyColumn,
+                "aria-label": _.copyColumn,
+                "data-testid": "view-designer-copy",
+                children: /* @__PURE__ */ e.jsx(Pe, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: h,
+                disabled: !U.hasContent,
+                className: "p-1.5 rounded hover:bg-accent disabled:opacity-30",
+                title: _.pasteColumn,
+                "aria-label": _.pasteColumn,
+                "data-testid": "view-designer-paste",
+                children: /* @__PURE__ */ e.jsx(Te, { className: "h-3.5 w-3.5" })
+              }
+            ),
+            /* @__PURE__ */ e.jsx("div", { className: "w-px h-4 bg-border mx-1" })
+          ] }),
+          !n && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+            c && /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: c,
+                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($t, { className: "h-3 w-3" }),
+                  " ",
+                  _.cancel
+                ]
+              }
+            ),
+            /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: a,
+                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(Mt, { className: "h-3 w-3" }),
+                  " ",
+                  _.saveView
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
+          !n && /* @__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: _.availableFields }),
+            /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto p-2", children: te.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: _.allFieldsAdded }) : te.map((t) => /* @__PURE__ */ e.jsxs(
+              "button",
+              {
+                onClick: () => se(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(xe, { 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: _.viewType }),
+                /* @__PURE__ */ e.jsx("div", { className: "flex gap-2 flex-wrap", children: tt.map(({ type: t, label: o, icon: r }) => /* @__PURE__ */ e.jsxs(
+                  "button",
+                  {
+                    onClick: () => !n && S({ viewType: t }),
+                    className: ze(
+                      "flex items-center gap-2 px-3 py-2 text-sm rounded-md border-2 transition-all font-medium",
+                      F === 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(r, { className: "h-4 w-4" }),
+                      o
+                    ]
+                  },
+                  t
+                )) })
+              ] }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
+                /* @__PURE__ */ e.jsx("label", { className: "text-xs font-semibold text-foreground", children: _.viewName }),
+                /* @__PURE__ */ e.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: D,
+                    onChange: (t) => !n && S({ viewLabel: t.target.value }),
+                    placeholder: _.viewNamePlaceholder,
+                    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: n,
+                    "data-testid": "view-label-input"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-auto p-3", children: x.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(Yt, { className: "h-8 w-8 mx-auto mb-2 opacity-50" }),
+              /* @__PURE__ */ e.jsx("p", { children: _.noColumnsTitle })
+            ] }) }) : /* @__PURE__ */ e.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium text-muted-foreground mb-2", children: _.columnsCount(x.length) }),
+              x.map((t, o) => /* @__PURE__ */ e.jsxs(
+                "div",
+                {
+                  className: ze(
+                    "flex items-center gap-2 px-3 py-2 rounded border transition-colors cursor-pointer",
+                    Z === o ? "border-primary bg-primary/5 ring-1 ring-primary/20" : "border-border hover:border-primary/50",
+                    !t.visible && "opacity-50"
+                  ),
+                  onClick: () => oe(o),
+                  "data-testid": `column-${t.field}`,
+                  children: [
+                    /* @__PURE__ */ e.jsx(at, { 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 }),
+                    !n && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+                      /* @__PURE__ */ e.jsx(
+                        "button",
+                        {
+                          onClick: (r) => {
+                            r.stopPropagation(), O(o, "up");
+                          },
+                          disabled: o === 0,
+                          className: "p-0.5 rounded hover:bg-accent disabled:opacity-30",
+                          title: _.moveUp,
+                          "aria-label": _.moveColumnUp,
+                          children: /* @__PURE__ */ e.jsx(Vt, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsx(
+                        "button",
+                        {
+                          onClick: (r) => {
+                            r.stopPropagation(), O(o, "down");
+                          },
+                          disabled: o === x.length - 1,
+                          className: "p-0.5 rounded hover:bg-accent disabled:opacity-30",
+                          title: _.moveDown,
+                          "aria-label": _.moveColumnDown,
+                          children: /* @__PURE__ */ e.jsx(Zt, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsx(
+                        "button",
+                        {
+                          onClick: (r) => {
+                            r.stopPropagation(), ae(o);
+                          },
+                          className: "p-0.5 rounded hover:bg-accent",
+                          title: t.visible !== !1 ? _.hideColumn : _.showColumn,
+                          "aria-label": _.toggleVisibility,
+                          children: t.visible !== !1 ? /* @__PURE__ */ e.jsx(st, { className: "h-3 w-3" }) : /* @__PURE__ */ e.jsx(Ht, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ e.jsx(
+                        "button",
+                        {
+                          onClick: (r) => {
+                            r.stopPropagation(), ne(o);
+                          },
+                          className: "p-0.5 rounded hover:bg-destructive/10",
+                          title: _.removeColumn,
+                          "aria-label": _.removeColumn,
+                          children: /* @__PURE__ */ e.jsx(he, { className: "h-3 w-3 text-destructive" })
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                `${t.field}-${o}`
+              ))
+            ] }) })
+          ] }),
+          /* @__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", role: "tablist", children: ["columns", "filters", "sort", "options"].map((t) => /* @__PURE__ */ e.jsx(
+              "button",
+              {
+                onClick: () => X(t),
+                role: "tab",
+                "aria-selected": J === t,
+                className: ze(
+                  "flex-1 px-2 py-2 text-xs font-medium capitalize transition-colors",
+                  J === 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: [
+              J === "columns" && /* @__PURE__ */ e.jsx("div", { children: Z !== null && x[Z] ? /* @__PURE__ */ e.jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: _.columnProperties }),
+                /* @__PURE__ */ e.jsxs("div", { children: [
+                  /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.labelField }),
+                  /* @__PURE__ */ e.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: x[Z].label ?? "",
+                      onChange: (t) => {
+                        if (n) return;
+                        const o = Z;
+                        S({
+                          columns: x.map((r, l) => l === o ? { ...r, label: t.target.value } : r)
+                        });
+                      },
+                      className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                      readOnly: n,
+                      "data-testid": "column-label-input"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsxs("div", { children: [
+                  /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.widthField }),
+                  /* @__PURE__ */ e.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: x[Z].width ?? "",
+                      onChange: (t) => {
+                        if (n) return;
+                        const o = Z, r = t.target.value;
+                        S({
+                          columns: x.map(
+                            (l, g) => g === o ? { ...l, width: /^\d+$/.test(r) ? Number(r) : r } : l
+                          )
+                        });
+                      },
+                      placeholder: _.widthPlaceholder,
+                      className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                      readOnly: n,
+                      "data-testid": "column-width-input"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsxs("div", { className: "text-xs text-muted-foreground", children: [
+                  _.fieldLabel,
+                  " ",
+                  /* @__PURE__ */ e.jsx("span", { className: "font-mono", children: x[Z].field })
+                ] })
+              ] }) : /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-4", children: _.selectColumnPrompt }) }),
+              J === "filters" && /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+                T.map((t, o) => /* @__PURE__ */ e.jsxs("div", { className: "space-y-1 p-2 border rounded bg-background", "data-testid": `filter-${o}`, children: [
+                  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ e.jsx(
+                      "select",
+                      {
+                        value: t.field,
+                        onChange: (r) => re(o, { field: r.target.value }),
+                        className: "flex-1 px-1 py-0.5 text-xs border rounded bg-background",
+                        disabled: n,
+                        children: f.map((r) => /* @__PURE__ */ e.jsx("option", { value: r.name, children: r.label || r.name }, r.name))
+                      }
+                    ),
+                    !n && /* @__PURE__ */ e.jsx(
+                      "button",
+                      {
+                        onClick: () => ie(o),
+                        className: "p-0.5 rounded hover:bg-destructive/10",
+                        children: /* @__PURE__ */ e.jsx(he, { 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: (r) => re(o, { operator: r.target.value }),
+                        className: "w-24 px-1 py-0.5 text-xs border rounded bg-background",
+                        disabled: n,
+                        children: pr.map((r) => /* @__PURE__ */ e.jsx("option", { value: r.value, children: r.label }, r.value))
+                      }
+                    ),
+                    /* @__PURE__ */ e.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: t.value ?? "",
+                        onChange: (r) => re(o, { value: r.target.value }),
+                        placeholder: _.valuePlaceholder,
+                        className: "flex-1 px-1 py-0.5 text-xs border rounded bg-background",
+                        readOnly: n
+                      }
+                    )
+                  ] })
+                ] }, o)),
+                !n && /* @__PURE__ */ e.jsxs(
+                  "button",
+                  {
+                    onClick: le,
+                    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",
+                    "aria-label": _.addFilter,
+                    children: [
+                      /* @__PURE__ */ e.jsx(xe, { className: "h-3 w-3" }),
+                      " ",
+                      _.addFilter
+                    ]
+                  }
+                )
+              ] }),
+              J === "sort" && /* @__PURE__ */ e.jsxs("div", { className: "space-y-2", children: [
+                A.map((t, o) => /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1 p-2 border rounded bg-background", "data-testid": `sort-${o}`, children: [
+                  /* @__PURE__ */ e.jsx(
+                    "select",
+                    {
+                      value: t.field,
+                      onChange: (r) => p(o, { field: r.target.value }),
+                      className: "flex-1 px-1 py-0.5 text-xs border rounded bg-background",
+                      disabled: n,
+                      children: f.map((r) => /* @__PURE__ */ e.jsx("option", { value: r.name, children: r.label || r.name }, r.name))
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsxs(
+                    "select",
+                    {
+                      value: t.direction,
+                      onChange: (r) => p(o, { direction: r.target.value }),
+                      className: "w-16 px-1 py-0.5 text-xs border rounded bg-background",
+                      disabled: n,
+                      children: [
+                        /* @__PURE__ */ e.jsx("option", { value: "asc", children: _.asc }),
+                        /* @__PURE__ */ e.jsx("option", { value: "desc", children: _.desc })
+                      ]
+                    }
+                  ),
+                  !n && /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: () => z(o),
+                      className: "p-0.5 rounded hover:bg-destructive/10",
+                      children: /* @__PURE__ */ e.jsx(he, { className: "h-3 w-3 text-destructive" })
+                    }
+                  )
+                ] }, o)),
+                !n && /* @__PURE__ */ e.jsxs(
+                  "button",
+                  {
+                    onClick: d,
+                    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",
+                    "aria-label": _.addSort,
+                    children: [
+                      /* @__PURE__ */ e.jsx(xe, { className: "h-3 w-3" }),
+                      " ",
+                      _.addSort
+                    ]
+                  }
+                )
+              ] }),
+              J === "options" && /* @__PURE__ */ e.jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ e.jsxs("div", { className: "text-xs font-medium", children: [
+                  tt.find((t) => t.type === F)?.label ?? F,
+                  " Options"
+                ] }),
+                F === "kanban" && /* @__PURE__ */ e.jsxs("div", { children: [
+                  /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.groupByField }),
+                  /* @__PURE__ */ e.jsxs(
+                    "select",
+                    {
+                      value: $.groupBy ?? "",
+                      onChange: (t) => !n && S({ options: { ...$, groupBy: t.target.value } }),
+                      className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                      disabled: n,
+                      "data-testid": "kanban-group-by",
+                      children: [
+                        /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                        f.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                      ]
+                    }
+                  )
+                ] }),
+                F === "calendar" && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsxs("div", { children: [
+                    /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.startDateField }),
+                    /* @__PURE__ */ e.jsxs(
+                      "select",
+                      {
+                        value: $.startDateField ?? "",
+                        onChange: (t) => !n && S({ options: { ...$, startDateField: t.target.value } }),
+                        className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                        disabled: n,
+                        "data-testid": "calendar-start-date",
+                        children: [
+                          /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                          f.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: _.titleField }),
+                    /* @__PURE__ */ e.jsxs(
+                      "select",
+                      {
+                        value: $.titleField ?? "",
+                        onChange: (t) => !n && S({ options: { ...$, titleField: t.target.value } }),
+                        className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                        disabled: n,
+                        "data-testid": "calendar-title-field",
+                        children: [
+                          /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                          f.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                F === "map" && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsxs("div", { children: [
+                    /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.latitudeField }),
+                    /* @__PURE__ */ e.jsxs(
+                      "select",
+                      {
+                        value: $.latitudeField ?? "",
+                        onChange: (t) => !n && S({ options: { ...$, latitudeField: t.target.value } }),
+                        className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                        disabled: n,
+                        children: [
+                          /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                          f.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: _.longitudeField }),
+                    /* @__PURE__ */ e.jsxs(
+                      "select",
+                      {
+                        value: $.longitudeField ?? "",
+                        onChange: (t) => !n && S({ options: { ...$, longitudeField: t.target.value } }),
+                        className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                        disabled: n,
+                        children: [
+                          /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                          f.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                F === "gallery" && /* @__PURE__ */ e.jsxs("div", { children: [
+                  /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.imageField }),
+                  /* @__PURE__ */ e.jsxs(
+                    "select",
+                    {
+                      value: $.imageField ?? "",
+                      onChange: (t) => !n && S({ options: { ...$, imageField: t.target.value } }),
+                      className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                      disabled: n,
+                      children: [
+                        /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                        f.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                      ]
+                    }
+                  )
+                ] }),
+                (F === "timeline" || F === "gantt") && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                  /* @__PURE__ */ e.jsxs("div", { children: [
+                    /* @__PURE__ */ e.jsx("label", { className: "text-xs text-muted-foreground", children: _.dateField }),
+                    /* @__PURE__ */ e.jsxs(
+                      "select",
+                      {
+                        value: $.dateField ?? $.startDateField ?? "",
+                        onChange: (t) => !n && S({ options: { ...$, dateField: t.target.value, startDateField: t.target.value } }),
+                        className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                        disabled: n,
+                        children: [
+                          /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                          f.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: _.titleField }),
+                    /* @__PURE__ */ e.jsxs(
+                      "select",
+                      {
+                        value: $.titleField ?? "",
+                        onChange: (t) => !n && S({ options: { ...$, titleField: t.target.value } }),
+                        className: "w-full px-2 py-1 text-sm border rounded bg-background mt-1",
+                        disabled: n,
+                        children: [
+                          /* @__PURE__ */ e.jsx("option", { value: "", children: _.selectField }),
+                          f.map((t) => /* @__PURE__ */ e.jsx("option", { value: t.name, children: t.label || t.name }, t.name))
+                        ]
+                      }
+                    )
+                  ] })
+                ] }),
+                F === "grid" && /* @__PURE__ */ e.jsx("div", { className: "text-xs text-muted-foreground text-center py-2", children: _.gridOptionsHint })
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx(
+          Fe,
+          {
+            isOpen: H.isOpen,
+            title: H.title,
+            message: H.message,
+            onConfirm: H.onConfirm,
+            onCancel: H.onCancel
+          }
+        )
+      ]
+    }
   );
-  return /* @__PURE__ */ e.jsx(ue.Provider, { value: E, children: w });
 }
-function Le(l) {
-  const u = [
-    "#3b82f6",
-    "#ef4444",
-    "#22c55e",
-    "#f59e0b",
-    "#8b5cf6",
-    "#ec4899",
-    "#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];
+function Ze(...s) {
+  return pe(ue(s));
+}
+function wr({
+  versions: s,
+  onRestore: N,
+  className: E
+}) {
+  return /* @__PURE__ */ e.jsxs("div", { className: Ze("flex flex-col", E), role: "region", "aria-label": "Version history", children: [
+    /* @__PURE__ */ e.jsxs("div", { className: "p-3 border-b font-medium text-sm flex items-center gap-2", children: [
+      /* @__PURE__ */ e.jsx(Xt, { className: "h-4 w-4" }),
+      "Version History"
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto", children: s.length === 0 ? /* @__PURE__ */ e.jsx("div", { className: "p-3 text-xs text-muted-foreground text-center", children: "No version history available" }) : /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "absolute left-5 top-0 bottom-0 w-px bg-border" }),
+      s.map((w) => /* @__PURE__ */ e.jsxs(
+        "div",
+        {
+          className: Ze(
+            "relative flex items-start gap-3 px-3 py-2 hover:bg-accent/50",
+            w.isCurrent && "bg-accent/30"
+          ),
+          children: [
+            /* @__PURE__ */ e.jsx("div", { className: Ze(
+              "relative z-10 mt-1 h-2.5 w-2.5 rounded-full border-2 bg-background",
+              w.isCurrent ? "border-primary" : "border-muted-foreground"
+            ) }),
+            /* @__PURE__ */ e.jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
+                /* @__PURE__ */ e.jsxs("span", { className: "font-medium", children: [
+                  "v",
+                  w.version
+                ] }),
+                w.isCurrent && /* @__PURE__ */ e.jsx("span", { className: "px-1 py-0.5 rounded bg-primary/10 text-primary text-[0.6rem]", children: "Current" })
+              ] }),
+              /* @__PURE__ */ e.jsx("p", { className: "text-xs text-muted-foreground mt-0.5 truncate", children: w.description }),
+              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 mt-1 text-[0.65rem] text-muted-foreground/70", children: [
+                /* @__PURE__ */ e.jsx(Kt, { className: "h-2.5 w-2.5" }),
+                /* @__PURE__ */ e.jsx("span", { children: w.userName }),
+                /* @__PURE__ */ e.jsx(dt, { className: "h-2.5 w-2.5 ml-1" }),
+                /* @__PURE__ */ e.jsx("span", { children: new Date(w.timestamp).toLocaleString() })
+              ] }),
+              !w.isCurrent && N && /* @__PURE__ */ e.jsx(
+                "button",
+                {
+                  onClick: () => N(w.version),
+                  className: "mt-1 text-[0.65rem] text-primary hover:underline",
+                  children: "Restore this version"
+                }
+              )
+            ] })
+          ]
+        },
+        w.version
+      ))
+    ] }) })
+  ] });
 }
-G.register(
+Se.register(
   "page-designer",
-  Oe,
+  sr,
   {
     label: "Page Designer",
     category: "Designer",
@@ -1111,9 +3931,9 @@ G.register(
     ]
   }
 );
-G.register(
+Se.register(
   "data-model-designer",
-  ze,
+  or,
   {
     label: "Data Model Designer",
     category: "Designer",
@@ -1125,9 +3945,9 @@ G.register(
     ]
   }
 );
-G.register(
+Se.register(
   "process-designer",
-  Ie,
+  ir,
   {
     label: "Process Designer (BPMN)",
     category: "Designer",
@@ -1141,9 +3961,9 @@ G.register(
     ]
   }
 );
-G.register(
+Se.register(
   "report-designer",
-  Ge,
+  ur,
   {
     label: "Report Designer",
     category: "Designer",
@@ -1157,10 +3977,36 @@ G.register(
     ]
   }
 );
+Se.register(
+  "view-designer",
+  mr,
+  {
+    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
+  vr as CollaborationProvider,
+  Fe as ConfirmDialog,
+  yr as ConnectionStatusIndicator,
+  or as DataModelDesigner,
+  Be as Minimap,
+  sr as PageDesigner,
+  ir as ProcessDesigner,
+  Ue as PropertyEditor,
+  ur as ReportDesigner,
+  wr as VersionHistory,
+  mr as ViewDesigner,
+  We as useCanvasPanZoom,
+  Ie as useClipboard,
+  Ae as useConfirmDialog,
+  Le as useMultiSelect,
+  Re as useUndoRedo
 };