@object-ui/plugin-designer 0.1.0

package/dist/index.js

@@ -0,0 +1,1166 @@
+import { ComponentRegistry as G } from "@object-ui/core";
+import xe, { useState as A, useMemo as Z, useCallback as P, createContext as fe } from "react";
+import { Plus as K, Undo2 as be, Redo2 as ge, Eye as ye, GripVertical as ve, Trash2 as L, Layers as we, Database as le, Link2 as je, GitBranch as Ne, Play as Ee, Square as oe, Diamond as ke, FileText as Re, Type as Te, ImageIcon as _e, BarChart3 as Se, Table2 as Ae } from "lucide-react";
+import { clsx as M } from "clsx";
+import { twMerge as Y } from "tailwind-merge";
+var F = { exports: {} }, $ = {};
+var ne;
+function Pe() {
+  if (ne) return $;
+  ne = 1;
+  var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.fragment");
+  function p(w, i, d) {
+    var x = null;
+    if (d !== void 0 && (x = "" + d), i.key !== void 0 && (x = "" + i.key), "key" in i) {
+      d = {};
+      for (var E in i)
+        E !== "key" && (d[E] = i[E]);
+    } else d = i;
+    return i = d.ref, {
+      $$typeof: l,
+      type: w,
+      key: x,
+      ref: i !== void 0 ? i : null,
+      props: d
+    };
+  }
+  return $.Fragment = u, $.jsx = p, $.jsxs = p, $;
+}
+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:
+          return "Fragment";
+        case c:
+          return "Profiler";
+        case r:
+          return "StrictMode";
+        case h:
+          return "Suspense";
+        case f:
+          return "SuspenseList";
+        case V:
+          return "Activity";
+      }
+      if (typeof t == "object")
+        switch (typeof t.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:
+            return "Portal";
+          case T:
+            return t.displayName || "Context";
+          case s:
+            return (t._context.displayName || "Context") + ".Consumer";
+          case m:
+            var a = t.render;
+            return t = t.displayName, t || (t = a.displayName || a.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case C:
+            return a = t.displayName || null, a !== null ? a : l(t.type) || "Memo";
+          case D:
+            a = t._payload, t = t._init;
+            try {
+              return l(t(a));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function u(t) {
+      return "" + t;
+    }
+    function p(t) {
+      try {
+        u(t);
+        var a = !1;
+      } catch {
+        a = !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,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          j
+        ), u(t);
+      }
+    }
+    function w(t) {
+      if (t === o) return "<>";
+      if (typeof t == "object" && t !== null && t.$$typeof === D)
+        return "<...>";
+      try {
+        var a = l(t);
+        return a ? "<" + a + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function i() {
+      var t = U.A;
+      return t === null ? null : t.getOwner();
+    }
+    function d() {
+      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;
+      }
+      return t.key !== void 0;
+    }
+    function E(t, a) {
+      function y() {
+        ee || (ee = !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
+        ));
+      }
+      y.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: y,
+        configurable: !0
+      });
+    }
+    function n() {
+      var t = l(this.type);
+      return te[t] || (te[t] = !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;
+    }
+    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", {
+        enumerable: !1,
+        get: n
+      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(t, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(t, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: I
+      }), Object.defineProperty(t, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: q
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
+    }
+    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);
+          } 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";
+        });
+        j = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", ae[N + j] || (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);
+      }
+      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
+      ), _(
+        t,
+        N,
+        y,
+        i(),
+        I,
+        q
+      );
+    }
+    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 g(t) {
+      return typeof t == "object" && t !== null && t.$$typeof === v;
+    }
+    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() {
+      return null;
+    };
+    R = {
+      react_stack_bottom_frame: function(t) {
+        return t();
+      }
+    };
+    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,
+        !1,
+        j ? Error("react-stack-top-frame") : re,
+        j ? W(w(t)) : se
+      );
+    }, z.jsxs = function(t, a, y) {
+      var j = 1e4 > U.recentlyCreatedOwnerStacks++;
+      return b(
+        t,
+        a,
+        y,
+        !0,
+        j ? Error("react-stack-top-frame") : re,
+        j ? W(w(t)) : se
+      );
+    };
+  })()), z;
+}
+var de;
+function De() {
+  return de || (de = 1, process.env.NODE_ENV === "production" ? F.exports = Pe() : F.exports = Ce()), F.exports;
+}
+var e = De();
+function J(...l) {
+  return Y(M(l));
+}
+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
+}) {
+  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(
+          "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",
+            children: [
+              /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" }),
+              c.label
+            ]
+          },
+          c.type
+        ))
+      ] }, r.name)) })
+    ] }),
+    /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col", children: [
+      /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-muted/20", children: [
+        i && !d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Undo", children: /* @__PURE__ */ e.jsx(be, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ e.jsx("button", { className: "p-1.5 rounded hover:bg-accent", title: "Redo", children: /* @__PURE__ */ e.jsx(ge, { className: "h-4 w-4" }) }),
+          /* @__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",
+        {
+          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
+          },
+          children: n.map((r) => /* @__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),
+              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(
+                    "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" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e.jsx("div", { className: "p-2 text-xs text-muted-foreground", children: r.type })
+              ]
+            },
+            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
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+const $e = [
+  {
+    name: "layout",
+    label: "Layout",
+    items: [
+      { type: "container", label: "Container", defaultSize: { width: 400, height: 300 } },
+      { type: "flex", label: "Flex", defaultSize: { width: 400, height: 200 } },
+      { type: "grid", label: "Grid", defaultSize: { width: 400, height: 300 } },
+      { type: "card", label: "Card", defaultSize: { width: 300, height: 200 } },
+      { type: "tabs", label: "Tabs", defaultSize: { width: 400, height: 300 } }
+    ]
+  },
+  {
+    name: "form",
+    label: "Form",
+    items: [
+      { type: "input", label: "Input", defaultSize: { width: 300, height: 60 } },
+      { type: "textarea", label: "Textarea", defaultSize: { width: 300, height: 120 } },
+      { type: "select", label: "Select", defaultSize: { width: 300, height: 60 } },
+      { type: "checkbox", label: "Checkbox", defaultSize: { width: 200, height: 40 } },
+      { type: "button", label: "Button", defaultSize: { width: 120, height: 40 } }
+    ]
+  },
+  {
+    name: "data",
+    label: "Data",
+    items: [
+      { type: "table", label: "Table", defaultSize: { width: 600, height: 400 } },
+      { type: "chart", label: "Chart", defaultSize: { width: 400, height: 300 } },
+      { type: "list", label: "List", defaultSize: { width: 300, height: 400 } },
+      { type: "statistic", label: "Statistic", defaultSize: { width: 200, height: 100 } }
+    ]
+  }
+];
+function B(...l) {
+  return Y(M(l));
+}
+function ze({
+  entities: l = [],
+  relationships: u = [],
+  canvas: p = { width: 1200, height: 800, showGrid: !0 },
+  showRelationshipLabels: w = !0,
+  readOnly: i = !1,
+  onEntitiesChange: d,
+  onRelationshipsChange: x,
+  className: E
+}) {
+  const [n, _] = A(l), [b, k] = A(u), [g, R] = A(null), v = P(() => {
+    if (i) return;
+    const o = {
+      id: `entity-${Date.now()}`,
+      name: `new_entity_${n.length + 1}`,
+      label: `New Entity ${n.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"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__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(
+            "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),
+              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)" },
+                    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",
+                        {
+                          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" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e.jsx("div", { className: "px-3 py-1 divide-y", children: o.fields.map((r) => /* @__PURE__ */ e.jsxs(
+                  "div",
+                  {
+                    className: "flex items-center gap-2 py-1 text-xs",
+                    children: [
+                      /* @__PURE__ */ e.jsxs("span", { className: B("font-mono", r.primaryKey && "font-bold text-primary"), children: [
+                        r.primaryKey ? "🔑 " : "",
+                        r.name
+                      ] }),
+                      /* @__PURE__ */ e.jsx("span", { className: "text-muted-foreground ml-auto", children: r.type }),
+                      r.required && /* @__PURE__ */ e.jsx("span", { className: "text-destructive", children: "*" })
+                    ]
+                  },
+                  r.name
+                )) })
+              ]
+            },
+            o.id
+          ))
+        ]
+      }
+    ) })
+  ] }) });
+}
+function X(...l) {
+  return Y(M(l));
+}
+function Ie({
+  processName: l = "New Process",
+  nodes: u = [],
+  edges: p = [],
+  lanes: w,
+  canvas: i = { width: 1400, height: 800, showGrid: !0 },
+  showToolbar: d = !0,
+  readOnly: x = !1,
+  onNodesChange: E,
+  onEdgesChange: n,
+  className: _
+}) {
+  const [b, k] = A(u), [g, R] = A(p), [v, S] = A(null), o = P(
+    (s, T) => {
+      if (x) return;
+      const m = {
+        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);
+    },
+    [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);
+    },
+    [b, g, v, x, E, n]
+  ), c = (s) => {
+    switch (s) {
+      case "start-event":
+        return "rounded-full bg-green-100 border-green-500 text-green-700";
+      case "end-event":
+        return "rounded-full bg-red-100 border-red-500 text-red-700";
+      case "exclusive-gateway":
+      case "parallel-gateway":
+      case "inclusive-gateway":
+      case "event-based-gateway":
+        return "rotate-45 bg-yellow-100 border-yellow-500 text-yellow-700";
+      case "user-task":
+        return "rounded bg-blue-100 border-blue-500 text-blue-700";
+      case "service-task":
+      case "script-task":
+        return "rounded bg-purple-100 border-purple-500 text-purple-700";
+      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",
+          {
+            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"
+            ]
+          }
+        ),
+        /* @__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",
+            {
+              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
+                  );
+                })
+              ]
+            }
+          ),
+          b.map((s) => /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              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
+          ))
+        ]
+      }
+    ) })
+  ] });
+}
+function ce(...l) {
+  return Y(M(l));
+}
+const Fe = {
+  A4: { width: 595, height: 842 },
+  A3: { width: 842, height: 1191 },
+  Letter: { width: 612, height: 792 },
+  Legal: { width: 612, height: 1008 },
+  Tabloid: { width: 792, height: 1224 }
+};
+function Ge({
+  reportName: l = "Untitled Report",
+  objectName: u,
+  pageSize: p = "A4",
+  orientation: w = "portrait",
+  margins: i = { top: 40, right: 40, bottom: 40, left: 40 },
+  sections: d = [],
+  showToolbar: x = !0,
+  showPropertyPanel: E = !0,
+  readOnly: n = !1,
+  onSectionsChange: _,
+  className: b
+}) {
+  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);
+    },
+    [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);
+    },
+    [k, R, n, _]
+  ), T = (m) => {
+    switch (m) {
+      case "header":
+        return "Report Header";
+      case "page-header":
+        return "Page Header";
+      case "group-header":
+        return "Group Header";
+      case "detail":
+        return "Detail";
+      case "group-footer":
+        return "Group Footer";
+      case "page-footer":
+        return "Page Footer";
+      case "footer":
+        return "Report Footer";
+      default:
+        return m;
+    }
+  };
+  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: [
+          "(",
+          u,
+          ")"
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex-1" }),
+        /* @__PURE__ */ e.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          p,
+          " ",
+          w
+        ] })
+      ] }),
+      /* @__PURE__ */ e.jsx("div", { 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
+          },
+          children: k.map((m, h) => /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              className: "relative border-b border-dashed border-gray-300",
+              style: { minHeight: m.height },
+              children: [
+                /* @__PURE__ */ e.jsxs("div", { className: "absolute left-0 top-0 px-2 py-0.5 bg-muted text-xs text-muted-foreground border-r border-b rounded-br", children: [
+                  T(m.type),
+                  m.repeat && " ↻"
+                ] }),
+                !n && /* @__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"),
+                      className: "p-0.5 rounded hover:bg-accent",
+                      title: "Add Text",
+                      children: /* @__PURE__ */ e.jsx(Te, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: () => c(h, "field"),
+                      className: "p-0.5 rounded hover:bg-accent",
+                      title: "Add Field",
+                      children: /* @__PURE__ */ e.jsx(K, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: () => c(h, "image"),
+                      className: "p-0.5 rounded hover:bg-accent",
+                      title: "Add Image",
+                      children: /* @__PURE__ */ e.jsx(_e, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: () => c(h, "chart"),
+                      className: "p-0.5 rounded hover:bg-accent",
+                      title: "Add Chart",
+                      children: /* @__PURE__ */ e.jsx(Se, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ e.jsx(
+                    "button",
+                    {
+                      onClick: () => c(h, "table"),
+                      className: "p-0.5 rounded hover:bg-accent",
+                      title: "Add Table",
+                      children: /* @__PURE__ */ e.jsx(Ae, { 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
+                )) })
+              ]
+            },
+            `${m.type}-${h}`
+          ))
+        }
+      ) })
+    ] }),
+    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" }) })
+    ] })
+  ] });
+}
+const ue = fe(null);
+ue.displayName = "CollaborationContext";
+function qe({
+  config: l,
+  user: u,
+  onOperation: p,
+  children: w
+}) {
+  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()
+      };
+      p?.(_);
+    },
+    [d, u, p]
+  ), E = Z(
+    () => ({
+      users: i,
+      isConnected: d,
+      sendOperation: x,
+      currentUserId: u?.id
+    }),
+    [i, d, x, u?.id]
+  );
+  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];
+}
+G.register(
+  "page-designer",
+  Oe,
+  {
+    label: "Page Designer",
+    category: "Designer",
+    inputs: [
+      { name: "canvas", type: "code", label: "Canvas Configuration" },
+      { name: "components", type: "code", label: "Components" },
+      { name: "showComponentTree", type: "boolean", label: "Show Component Tree", defaultValue: !0 },
+      { name: "undoRedo", type: "boolean", label: "Undo/Redo", defaultValue: !0 },
+      { name: "readOnly", type: "boolean", label: "Read Only", defaultValue: !1 }
+    ]
+  }
+);
+G.register(
+  "data-model-designer",
+  ze,
+  {
+    label: "Data Model Designer",
+    category: "Designer",
+    inputs: [
+      { name: "entities", type: "code", label: "Entities" },
+      { name: "relationships", type: "code", label: "Relationships" },
+      { name: "autoLayout", type: "boolean", label: "Auto Layout", defaultValue: !1 },
+      { name: "readOnly", type: "boolean", label: "Read Only", defaultValue: !1 }
+    ]
+  }
+);
+G.register(
+  "process-designer",
+  Ie,
+  {
+    label: "Process Designer (BPMN)",
+    category: "Designer",
+    inputs: [
+      { name: "processName", type: "string", label: "Process Name" },
+      { name: "nodes", type: "code", label: "Nodes" },
+      { name: "edges", type: "code", label: "Edges" },
+      { name: "showMinimap", type: "boolean", label: "Show Minimap", defaultValue: !1 },
+      { name: "showToolbar", type: "boolean", label: "Show Toolbar", defaultValue: !0 },
+      { name: "readOnly", type: "boolean", label: "Read Only", defaultValue: !1 }
+    ]
+  }
+);
+G.register(
+  "report-designer",
+  Ge,
+  {
+    label: "Report Designer",
+    category: "Designer",
+    inputs: [
+      { name: "reportName", type: "string", label: "Report Name" },
+      { name: "objectName", type: "string", label: "Data Source Object" },
+      { name: "sections", type: "code", label: "Sections" },
+      { name: "showToolbar", type: "boolean", label: "Show Toolbar", defaultValue: !0 },
+      { name: "showPropertyPanel", type: "boolean", label: "Show Property Panel", defaultValue: !0 },
+      { 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
+};