@agent-ui-kit/web-components 0.0.7 → 0.0.14

package/dist/traits.js

@@ -1,5 +1,5 @@
-import { s as ne, r as T } from "./chunks/agent-ciCayeod.js";
-import { d as qt, o as Ft, q as Bt, t as Kt, p as Wt, v as Ut } from "./chunks/agent-ciCayeod.js";
+import { s as ne, t as T } from "./chunks/agent-C72JZNe6.js";
+import { d as Ft, w as qt, x as Bt, y as Kt, p as Wt, v as Ut } from "./chunks/agent-C72JZNe6.js";
 import { parseStoreAttr as fe, parseOptionsAttr as pe, createListStore as ce, isGrouped as Ae } from "./store.js";
 const Te = {
   name: "drag",
@@ -21,12 +21,12 @@ const Te = {
       const K = (D) => {
         if (D.button !== 0 || h && D.target.closest(h) || f === "alt" && !D.altKey || f === "meta" && !D.metaKey || f === "ctrl" && !D.ctrlKey || f === "shift" && !D.shiftKey) return;
         w = !0, m = D.clientX, y = D.clientY;
-        const F = e.host.style.transform.match(/translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)/);
-        S = F ? parseFloat(F[1]) : 0, $ = F ? parseFloat(F[2]) : 0, e.host.setPointerCapture(D.pointerId), e.host.style.cursor = "grabbing", e.host.style.zIndex = "10", e.expose("dragging", !0), e.emit("drag-start", { item: e.host });
+        const q = e.host.style.transform.match(/translate\((-?[\d.]+)px,\s*(-?[\d.]+)px\)/);
+        S = q ? parseFloat(q[1]) : 0, $ = q ? parseFloat(q[2]) : 0, e.host.setPointerCapture(D.pointerId), e.host.style.cursor = "grabbing", e.host.style.zIndex = "10", e.expose("dragging", !0), e.emit("drag-start", { item: e.host });
       }, V = (D) => {
         if (!w) return;
-        const J = r === "vertical" ? 0 : D.clientX - m, F = r === "horizontal" ? 0 : D.clientY - y;
-        e.host.style.transform = `translate(${S + J}px, ${$ + F}px)`, e.emit("drag-move", { item: e.host, x: D.clientX, y: D.clientY });
+        const J = r === "vertical" ? 0 : D.clientX - m, q = r === "horizontal" ? 0 : D.clientY - y;
+        e.host.style.transform = `translate(${S + J}px, ${$ + q}px)`, e.emit("drag-move", { item: e.host, x: D.clientX, y: D.clientY });
       }, G = () => {
         w && (w = !1, e.host.style.cursor = "", e.host.style.zIndex = "", e.unexpose("dragging"), e.emit("drag-end", { item: e.host }));
       };
@@ -46,13 +46,13 @@ const Te = {
       if (w.length === 0) return 0;
       let S = 0, $ = 1 / 0;
       for (let D = 0; D < w.length; D++) {
-        const J = w[D].getBoundingClientRect(), F = J.left + J.width / 2, te = J.top + J.height / 2, re = Math.hypot(m - F, y - te);
+        const J = w[D].getBoundingClientRect(), q = J.left + J.width / 2, te = J.top + J.height / 2, re = Math.hypot(m - q, y - te);
         re < $ && ($ = re, S = D);
       }
       let z = r === "horizontal" ? "h" : "v";
       if (w.length >= 2) {
-        const D = w[0].getBoundingClientRect(), J = w[1].getBoundingClientRect(), F = Math.abs(J.left + J.width / 2 - D.left - D.width / 2), te = Math.abs(J.top + J.height / 2 - D.top - D.height / 2);
-        z = F > te ? "h" : "v";
+        const D = w[0].getBoundingClientRect(), J = w[1].getBoundingClientRect(), q = Math.abs(J.left + J.width / 2 - D.left - D.width / 2), te = Math.abs(J.top + J.height / 2 - D.top - D.height / 2);
+        z = q > te ? "h" : "v";
       }
       const K = w[S].getBoundingClientRect(), V = z === "h" ? K.left + K.width / 2 : K.top + K.height / 2;
       return (z === "h" ? m : y) > V ? S + 1 : S;
@@ -75,12 +75,12 @@ const Te = {
         S(), Y();
       }).finished.catch(() => {
       }) : S();
-    }, q = (w) => {
+    }, F = (w) => {
       for (const m of w)
         m.removeAttribute("drag-slot-before"), m.removeAttribute("drag-slot-after");
     }, C = (w, m, y) => {
       if (m === -1 || m === P) return;
-      P = m, q(w);
+      P = m, F(w);
       const S = w.filter((K) => K !== i && K !== c), $ = Math.min(m, S.length);
       r !== "both" && (!c && i && (c = i.cloneNode(!0), c.setAttribute("data-drag-placeholder", ""), c.setAttribute("aria-hidden", "true"), c.removeAttribute("dragging"), c.style.display = "", c.style.opacity = "0.5", c.style.pointerEvents = "none", c.style.outline = "2px dashed var(--aui-accent, highlight)", c.style.outlineOffset = "-2px"), c && ($ < S.length ? S[$].before(c) : S.length > 0 ? S[S.length - 1].after(c) : (y ?? e.host).appendChild(c))), $ < S.length && S[$].setAttribute("drag-slot-before", ""), $ > 0 && $ - 1 < S.length && S[$ - 1].setAttribute("drag-slot-after", "");
       const z = $ < S.length ? S[$] : null;
@@ -123,7 +123,7 @@ const Te = {
       i && (i.removeAttribute("dragging"), i.style.removeProperty("display")), o === "preview" && a && N();
       const w = j();
       if (o === "slot")
-        q(w);
+        F(w);
       else
         for (const m of w)
           m.removeAttribute("drag-over"), m.style.removeProperty("outline"), m.style.removeProperty("outline-offset");
@@ -178,12 +178,12 @@ const Te = {
         const z = m.clientX + p, K = m.clientY + g;
         let V, G;
         if (n) {
-          const F = L(z, K);
-          if (!F) return;
-          F !== k && (k && (q(H(k)), k.removeAttribute("drag-zone-active")), F.setAttribute("drag-zone-active", ""), k = F, P = -1), V = H(F).filter((te) => te !== l), G = F;
+          const q = L(z, K);
+          if (!q) return;
+          q !== k && (k && (F(H(k)), k.removeAttribute("drag-zone-active")), q.setAttribute("drag-zone-active", ""), k = q, P = -1), V = H(q).filter((te) => te !== l), G = q;
         } else
           V = $;
-        const D = V.filter((F) => F !== i && F !== c), J = A(D, z, K);
+        const D = V.filter((q) => q !== i && q !== c), J = A(D, z, K);
         C(V, J, G);
       } else if (o === "preview") {
         const z = m.clientX + p, K = m.clientY + g;
@@ -200,9 +200,9 @@ const Te = {
         let G = null, D = -1;
         if (z.length > 0) {
           let J = 1 / 0;
-          for (let F = 0; F < z.length; F++) {
-            const te = z[F].getBoundingClientRect(), re = Math.hypot(K - te.left - te.width / 2, V - te.top - te.height / 2);
-            re < J && (J = re, G = z[F], D = F);
+          for (let q = 0; q < z.length; q++) {
+            const te = z[q].getBoundingClientRect(), re = Math.hypot(K - te.left - te.width / 2, V - te.top - te.height / 2);
+            re < J && (J = re, G = z[q], D = q);
           }
         }
         R($, G, D);
@@ -371,7 +371,7 @@ const Te = {
       const Y = I > 1 ? L[1].getBoundingClientRect().left - A.left : A.width, N = I < L.length ? L[I].getBoundingClientRect().top - A.top : A.height;
       return { cols: I, stepX: Y, stepY: N, firstRect: A };
     }, v = (L, A, I, Y) => {
-      const { cols: N, stepX: Z, stepY: q, firstRect: C } = g(I), X = Math.round((L - (C.left + C.width / 2)) / Z), R = Math.round((A - (C.top + C.height / 2)) / q), B = Math.ceil(Y / N) - 1, W = Math.max(0, Math.min(X, N - 1)), x = Math.max(0, Math.min(R, Math.max(0, B)));
+      const { cols: N, stepX: Z, stepY: F, firstRect: C } = g(I), X = Math.round((L - (C.left + C.width / 2)) / Z), R = Math.round((A - (C.top + C.height / 2)) / F), B = Math.ceil(Y / N) - 1, W = Math.max(0, Math.min(X, N - 1)), x = Math.max(0, Math.min(R, Math.max(0, B)));
       return Math.max(0, Math.min(x * N + W, Y));
     }, P = (L) => {
       if (!o) return;
@@ -401,13 +401,13 @@ const Te = {
       if (A.button !== 0) return;
       const I = A.target, Y = p();
       let N = null;
-      for (const q of Y)
-        if (q.contains(I)) {
+      for (const F of Y)
+        if (F.contains(I)) {
           if (s) {
-            const C = q.querySelector(s);
+            const C = F.querySelector(s);
             if (!C || !C.contains(I)) continue;
           }
-          N = q;
+          N = F;
           break;
         }
       if (!N) return;
@@ -434,10 +434,10 @@ const Te = {
       }
       const I = A.clientX - f, Y = A.clientY - i;
       a.style.transform = `translate(${I}px, ${Y}px) scale(0.9)`;
-      const N = A.clientX + l, Z = A.clientY + c, q = p().filter((W) => W !== a), C = q.filter((W) => W !== o);
+      const N = A.clientX + l, Z = A.clientY + c, F = p().filter((W) => W !== a), C = F.filter((W) => W !== o);
       let X = 0;
-      if (n === "both" && q.length >= 2)
-        X = v(N, Z, q, C.length);
+      if (n === "both" && F.length >= 2)
+        X = v(N, Z, F, C.length);
       else
         for (let W = 0; W < C.length; W++) {
           const x = C[W].getBoundingClientRect(), se = x.left + x.width / 2, ee = x.top + x.height / 2;
@@ -445,15 +445,15 @@ const Te = {
           else break;
         }
       if (X === u) return;
-      u = X, M(q);
-      const R = q.filter((W) => W !== o), B = Math.min(X, R.length);
+      u = X, M(F);
+      const R = F.filter((W) => W !== o), B = Math.min(X, R.length);
       n !== "both" && (h || (h = document.createElement("div"), h.setAttribute("data-drag-placeholder", ""), h.setAttribute("aria-hidden", "true")), B < R.length ? R[B].before(h) : R.length > 0 ? R[R.length - 1].after(h) : e.host.appendChild(h)), B < R.length && R[B].setAttribute("drag-slot-before", ""), B > 0 && B - 1 < R.length && R[B - 1].setAttribute("drag-slot-after", "");
     }, E = () => {
       if (o) {
         if (a) {
-          const A = p().filter((q) => q !== a).filter((q) => q !== o), I = Math.min(Math.max(u, 0), A.length), Y = I < A.length ? A[I] : null;
+          const A = p().filter((F) => F !== a).filter((F) => F !== o), I = Math.min(Math.max(u, 0), A.length), Y = I < A.length ? A[I] : null;
           Y ? Y.before(o) : A.length > 0 && A[A.length - 1].after(o);
-          const Z = p().filter((q) => !q.hasAttribute("popover")).map((q, C) => q.dataset.sortKey ?? String(C));
+          const Z = p().filter((F) => !F.hasAttribute("popover")).map((F, C) => F.dataset.sortKey ?? String(C));
           e.emit("sort", { order: Z });
         }
         e.unexpose("dragging"), k();
@@ -576,7 +576,7 @@ const Te = {
       a || (b.removeAttribute("data-resize-visible"), O.removeAttribute("data-resize-label-visible"), L());
     }, Y = 12;
     let N = !1;
-    const Z = (C) => r ? r === "alt" ? C.altKey : r === "meta" ? C.metaKey : r === "ctrl" ? C.ctrlKey : r === "shift" ? C.shiftKey : !0 : !0, q = (C) => {
+    const Z = (C) => r ? r === "alt" ? C.altKey : r === "meta" ? C.metaKey : r === "ctrl" ? C.ctrlKey : r === "shift" ? C.shiftKey : !0 : !0, F = (C) => {
       if (a) return;
       if (!Z(C)) {
         N && (N = !1, I());
@@ -585,8 +585,8 @@ const Te = {
       const X = e.host.getBoundingClientRect(), R = C.clientX >= X.left - Y && C.clientX <= X.right + Y && C.clientY >= X.top - Y && C.clientY <= X.bottom + Y;
       R && !N ? (N = !0, A()) : !R && N && (N = !1, I());
     };
-    return document.addEventListener("pointermove", q, { passive: !0 }), () => {
-      a && (document.documentElement.style.cursor = "", e.unexpose("resizing")), document.removeEventListener("pointermove", q), document.removeEventListener("pointermove", M), document.removeEventListener("pointerup", k), _.disconnect(), L(), b.remove();
+    return document.addEventListener("pointermove", F, { passive: !0 }), () => {
+      a && (document.documentElement.style.cursor = "", e.unexpose("resizing")), document.removeEventListener("pointermove", F), document.removeEventListener("pointermove", M), document.removeEventListener("pointerup", k), _.disconnect(), L(), b.remove();
     };
   }
 }, Ie = {
@@ -728,7 +728,7 @@ const Te = {
       e.host.removeEventListener("press", a), h.removeEventListener("change", f);
     };
   }
-}, qe = {
+}, Fe = {
   name: "copy",
   category: "state",
   targets: "self",
@@ -754,7 +754,7 @@ const Te = {
       o(), e.host.removeEventListener("press", a);
     };
   }
-}, Fe = {
+}, qe = {
   name: "clipboard",
   category: "state",
   targets: "self",
@@ -2302,13 +2302,13 @@ class Rt {
     this.#O(this.#h), this.#s = null;
   }
   #W(t) {
-    this.#q(), this.#m = t;
+    this.#F(), this.#m = t;
     const s = this.#t ?? this.host;
     let n = t;
     for (; n && n !== s; )
       n.toggleAttribute("inspect-selected", !0), n = n.parentElement;
   }
-  #q() {
+  #F() {
     if (!this.#m) return;
     const t = this.#t ?? this.host;
     let s = this.#m;
@@ -2320,7 +2320,7 @@ class Rt {
     const s = t.tagName.toLowerCase(), n = t.id ? `#${t.id}` : "", r = typeof t.className == "string" && t.className ? `.${t.className.split(/\s+/)[0]}` : "";
     return `${s}${n}${r}`;
   }
-  #F(t) {
+  #q(t) {
     t.setAttribute("data-inspect-label", this.#k(t));
   }
   #B(t, s) {
@@ -2354,13 +2354,13 @@ class Rt {
     const g = this.#U(a);
     this.#v = g, g.forEach((v, P) => {
       const M = this.recursive ? this.#B(v, a) * this.depth : (P + 1) * this.depth;
-      v.toggleAttribute("inspect-layer", !0), v.style.transformStyle = "preserve-3d", v.style.overflow = "visible", v.style.transform = `translateZ(${M}px)`, v.style.transition = "transform 500ms cubic-bezier(0.2, 0, 0, 1)", this.labels && this.#F(v);
-    }), this.labels && this.#F(a), setTimeout(() => {
+      v.toggleAttribute("inspect-layer", !0), v.style.transformStyle = "preserve-3d", v.style.overflow = "visible", v.style.transform = `translateZ(${M}px)`, v.style.transition = "transform 500ms cubic-bezier(0.2, 0, 0, 1)", this.labels && this.#q(v);
+    }), this.labels && this.#q(a), setTimeout(() => {
       this.#L === r && this.#e && (a.style.transition = "transform 60ms ease-out");
     }, 520), a.addEventListener("pointermove", this.#g), a.addEventListener("click", this.#y), h.addEventListener("wheel", this.#b, { passive: !1 }), this.dismissOnClickOutside && document.addEventListener("click", this.#z, !0), document.addEventListener("keydown", this.#R), (this.tiltElement ?? document).addEventListener("pointermove", this.#I), document.addEventListener("wheel", this.#b, { passive: !1 }), document.addEventListener("selectstart", this.#D), document.addEventListener("pointerdown", this.#H), this.host.dispatchEvent(new CustomEvent("aui:inspect", { bubbles: !0, composed: !0, detail: { active: !0, layers: g.length } }));
   }
   #E() {
-    this.#e = !1, ++this.#L, this.#q(), this.#o();
+    this.#e = !1, ++this.#L, this.#F(), this.#o();
     const t = this.#v.length;
     if (this.#v = [], this.#t && (this.#t.removeEventListener("pointermove", this.#g), this.#t.removeEventListener("click", this.#y)), this.#n) {
       this.#n.removeEventListener("wheel", this.#b);
@@ -2438,11 +2438,11 @@ const Dt = {
   }
 };
 function Xt() {
-  T(Te), T(ke), T(Ce), T(Pe), T(Me), T(Ie), T($e), T(ze), T(_e), T(qe), T(Fe), T(We), T(Ue), T(Ze), T(Ge), T(Je), T(Qe), T(xe), T(et), T(tt), T(st), T(nt), T(ot), T(rt), T(it), T(at), T(lt), T(dt), T(ht), T(ut), T(pt), T(mt), T(gt), T(yt), T(bt), T(Et), T(wt), T(Lt), T(Tt), T(kt), T(Ct), T(Pt), T(St), T(Mt), T(It), T($t), T(zt), T(Dt), T(Ht);
+  T(Te), T(ke), T(Ce), T(Pe), T(Me), T(Ie), T($e), T(ze), T(_e), T(Fe), T(qe), T(We), T(Ue), T(Ze), T(Ge), T(Je), T(Qe), T(xe), T(et), T(tt), T(st), T(nt), T(ot), T(rt), T(it), T(at), T(lt), T(dt), T(ht), T(ut), T(pt), T(mt), T(gt), T(yt), T(bt), T(Et), T(wt), T(Lt), T(Tt), T(kt), T(Ct), T(Pt), T(St), T(Mt), T(It), T($t), T(zt), T(Dt), T(Ht);
 }
 export {
-  qt as attachTrait,
-  Ft as getTrait,
+  Ft as attachTrait,
+  qt as getTrait,
   Bt as getTraitNames,
   Kt as getTraitsByCategory,
   Wt as parseTraitsAttribute,

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@agent-ui-kit/web-components",
-  "version": "0.0.7",
+  "version": "0.0.14",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kimgranlund/agent-ui-kit"
+  },
   "main": "./dist/register.js",
   "module": "./dist/register.js",
   "style": "./dist/agent-ui.css",
@@ -12,19 +16,53 @@
     "#traits": "./src/traits/index.ts"
   },
   "exports": {
-    ".": "./dist/register.js",
-    "./register": "./dist/register.js",
-    "./components": "./dist/components.js",
-    "./components/graph": "./dist/components/graph.js",
-    "./components/editor": "./dist/components/editor.js",
-    "./components/agent": "./dist/components/agent.js",
-    "./element": "./dist/element.js",
-    "./traits": "./dist/traits.js",
-    "./reactivity": "./dist/reactivity.js",
-    "./store": "./dist/store.js",
-    "./icons": "./dist/icons.js",
+    ".": {
+      "import": "./dist/register.js",
+      "types": "./dist/register.d.ts"
+    },
+    "./register": {
+      "import": "./dist/register.js",
+      "types": "./dist/register.d.ts"
+    },
+    "./components": {
+      "import": "./dist/components.js",
+      "types": "./dist/components.d.ts"
+    },
+    "./components/*": "./src/components/*/index.ts",
+    "./components/graph": {
+      "import": "./dist/components/graph.js",
+      "types": "./dist/components/graph.d.ts"
+    },
+    "./components/editor": {
+      "import": "./dist/components/editor.js",
+      "types": "./dist/components/editor.d.ts"
+    },
+    "./components/agent": {
+      "import": "./dist/components/agent.js",
+      "types": "./dist/components/agent.d.ts"
+    },
+    "./element": {
+      "import": "./dist/element.js",
+      "types": "./dist/element.d.ts"
+    },
+    "./traits": {
+      "import": "./dist/traits.js",
+      "types": "./dist/traits.d.ts"
+    },
+    "./reactivity": {
+      "import": "./dist/reactivity.js",
+      "types": "./dist/reactivity.d.ts"
+    },
+    "./store": {
+      "import": "./dist/store.js",
+      "types": "./dist/store.d.ts"
+    },
+    "./icons": {
+      "import": "./dist/icons.js",
+      "types": "./dist/icons.d.ts"
+    },
     "./agent-ui.css": "./dist/agent-ui.css",
-    "./api.json": "./dist/api.json",
+    "./api.components.json": "./dist/api.components.json",
     "./api.colors.json": "./dist/api.colors.json",
     "./api.colors.yaml": "./dist/api.colors.yaml",
     "./api.tokens.json": "./dist/api.tokens.json",
@@ -57,6 +95,7 @@
   },
   "devDependencies": {
     "@phosphor-icons/core": "^2.1.1",
-    "vite": "^6.0.0"
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.5.0"
   }
 }