@agent-ui-kit/web-components 0.0.1

package/dist/register.js

@@ -0,0 +1,1441 @@
+import { A as T, s as S, a as I, b as $, d as F, e as o, p as W, v as X, f as K, g as B, h as _, i as j, j as J, k as V, l as Z, m as Q, n as tt } from "./chunks/agent-ciCayeod.js";
+import { registerBuiltinTraits as et } from "./traits.js";
+import { AuiEditor as it, AuiEditorLayer as st } from "./components/editor.js";
+import { AuiGraphUi as at, AuiGraphLayer as nt, AuiGraphNode as ot, AuiGraphNoodle as rt, AuiGraphPort as lt } from "./components/graph.js";
+import { AuiButton as ut, AuiInput as dt, AuiCheckbox as ht, AuiSwitch as ct, AuiRadio as mt, AuiRadioGroup as ft, AuiTextarea as pt, AuiContainer as bt, AuiDialog as gt, AuiDrawer as vt, AuiIcon as yt, AuiTooltip as At, AuiRange as wt, AuiInputOtp as xt, AuiGripper as Et, AuiOption as Ct, AuiOptgroup as kt, AuiSelect as St, AuiToast as Pt, AuiTabs as $t, AuiTab as Lt, AuiTabPanel as Mt, AuiAccordion as Dt, AuiAccordionItem as Tt, AuiBreadcrumb as It, AuiBreadcrumbItem as Nt, AuiSegmentedControl as Yt, AuiSegment as qt, AuiPagination as Rt, AuiCommand as zt, AuiCommandInput as Ft, AuiCommandList as Gt, AuiCommandItem as Ut, AuiCommandGroup as Ht, AuiCommandEmpty as Ot, AuiPanes as Wt, AuiPane as Xt, AuiTable as Kt, AuiTableHead as Bt, AuiTableBody as _t, AuiTableRow as jt, AuiTableHeader as Jt, AuiTableCell as Vt, AuiTree as Zt, AuiTreeItem as Qt, AuiFeed as te, AuiRoot as ee, AuiAppShell as ie, AuiPage as se, AuiPageMain as ae, AuiPageContext as ne, AuiSidebar as oe, AuiSidebarHeader as re, AuiSidebarContent as le, AuiSidebarFooter as ue } from "./components.js";
+class de extends T {
+  static attributes = {
+    key: { type: "string", default: "" },
+    label: { type: "string", default: "" },
+    sortable: { type: "boolean", default: !1 },
+    filterable: { type: "boolean", default: !1 },
+    width: { type: "string", default: "1fr" },
+    type: { type: "enum", values: ["string", "number", "date"], default: "string" },
+    align: { type: "enum", values: ["start", "center", "end"], default: "start" }
+  };
+}
+class he extends T {
+  static attributes = {
+    background: { type: "string", default: "none" },
+    orientation: { type: "string", default: "horizontal" },
+    "pan-enabled": { type: "boolean", default: !1 },
+    "zoom-enabled": { type: "boolean", default: !1 },
+    infinite: { type: "boolean", default: !1 },
+    bordered: { type: "boolean", default: !1 }
+  };
+  #n = null;
+  #t = null;
+  #e = null;
+  // Pan state
+  #a = 0;
+  #s = 0;
+  #l = !1;
+  #u = 0;
+  #i = 0;
+  #m = 0;
+  #f = 0;
+  // Zoom state
+  #r = 1;
+  // ── Public API ──
+  get panX() {
+    return this.#a;
+  }
+  get panY() {
+    return this.#s;
+  }
+  get zoom() {
+    return this.#r;
+  }
+  /** Reset pan and zoom to defaults */
+  reset() {
+    this.#a = 0, this.#s = 0, this.#r = 1, this.#o(), this.#d(), this.#b();
+  }
+  /** Set pan position programmatically */
+  panTo(t, e) {
+    this.#a = t, this.#s = e, this.#o(), this.#d();
+  }
+  /** Set zoom level programmatically */
+  zoomTo(t) {
+    this.#r = Math.max(0.1, Math.min(10, t)), this.#o(), this.#b();
+  }
+  // ── Lifecycle ──
+  activate() {
+    if (this.#e = this.querySelector(':scope > [slot="content"]'), !this.#e) {
+      this.#e = document.createElement("div"), this.#e.setAttribute("slot", "content");
+      const e = Array.from(this.childNodes);
+      for (const i of e) {
+        if (i instanceof HTMLElement) {
+          const s = i.getAttribute("slot");
+          if (s === "leading" || s === "trailing") continue;
+        }
+        this.#e.appendChild(i);
+      }
+      this.appendChild(this.#e);
+    }
+    const t = this.hasAttribute("pan-enabled") || this.hasAttribute("zoom-enabled") || this.hasAttribute("infinite") || this.#e.querySelector(':scope > [slot^="float-"]');
+    t && this.#c(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "region"), t && this.addEventListener("keydown", this.#h);
+  }
+  dispose() {
+    const t = this.#n;
+    t && (t.removeEventListener("pointerdown", this.#A), t.removeEventListener("pointermove", this.#w), t.removeEventListener("pointerup", this.#v), t.removeEventListener("pointercancel", this.#v), t.removeEventListener("wheel", this.#y)), this.removeEventListener("keydown", this.#h);
+  }
+  // ── DOM stamping ──
+  #c() {
+    const t = this.#e, e = document.createElement("div");
+    e.setAttribute("data-viewport", "");
+    const i = document.createElement("div");
+    i.setAttribute("data-transform", "");
+    const s = Array.from(t.childNodes);
+    for (const r of s) {
+      if (r instanceof HTMLElement && r.getAttribute("slot")?.startsWith("float-")) {
+        e.appendChild(r);
+        continue;
+      }
+      i.appendChild(r);
+    }
+    e.appendChild(i), t.appendChild(e), this.#n = e, this.#t = i;
+    const a = this.hasAttribute("pan-enabled") || this.hasAttribute("infinite"), n = this.hasAttribute("zoom-enabled") || this.hasAttribute("infinite");
+    a && (t.addEventListener("pointerdown", this.#A), t.addEventListener("pointermove", this.#w), t.addEventListener("pointerup", this.#v), t.addEventListener("pointercancel", this.#v)), n && t.addEventListener("wheel", this.#y, { passive: !1 }), this.#o();
+  }
+  // ── Transform ──
+  #o() {
+    this.style.setProperty("--_canvas-x", `${this.#a}px`), this.style.setProperty("--_canvas-y", `${this.#s}px`), this.style.setProperty("--_canvas-zoom", String(this.#r));
+  }
+  #d() {
+    this.dispatchEvent(new CustomEvent("aui:canvas-pan", {
+      bubbles: !0,
+      composed: !0,
+      detail: { x: this.#a, y: this.#s }
+    }));
+  }
+  #b() {
+    this.dispatchEvent(new CustomEvent("aui:canvas-zoom", {
+      bubbles: !0,
+      composed: !0,
+      detail: { zoom: this.#r }
+    }));
+  }
+  // ── Pan handlers ──
+  #A = (t) => {
+    if (t.button !== 0) return;
+    const e = t.target, i = this.#t;
+    i && i.contains(e) || (this.#l = !0, this.#u = t.clientX, this.#i = t.clientY, this.#m = this.#a, this.#f = this.#s, this.#e.setPointerCapture(t.pointerId), this.setAttribute("data-canvas-panning", ""));
+  };
+  #w = (t) => {
+    this.#l && (this.#a = this.#m + (t.clientX - this.#u), this.#s = this.#f + (t.clientY - this.#i), this.#o());
+  };
+  #v = (t) => {
+    this.#l && (this.#l = !1, this.removeAttribute("data-canvas-panning"), this.#d());
+  };
+  // ── Zoom handler ──
+  #y = (t) => {
+    t.preventDefault();
+    const e = t.deltaY > 0 ? -0.05 : 0.05, i = Math.max(0.1, Math.min(10, this.#r + e * this.#r));
+    if (this.#e) {
+      const s = this.#e.getBoundingClientRect(), a = (t.clientX - s.left) / s.width, n = (t.clientY - s.top) / s.height, r = i / this.#r;
+      this.#a = a * s.width * (1 - r) + this.#a * r, this.#s = n * s.height * (1 - r) + this.#s * r;
+    }
+    this.#r = i, this.#o(), this.#b();
+  };
+  // ── Keyboard ──
+  #h = (t) => {
+    switch (t.key) {
+      case "0":
+        t.preventDefault(), this.#r = 1, this.#o(), this.#b();
+        break;
+      case "+":
+      case "=":
+        t.preventDefault(), this.zoomTo(this.#r * 1.15);
+        break;
+      case "-":
+        t.preventDefault(), this.zoomTo(this.#r / 1.15);
+        break;
+      case "Escape":
+        t.preventDefault(), this.reset();
+        break;
+    }
+  };
+}
+function L(m) {
+  if (!m) return null;
+  const t = /* @__PURE__ */ new Date(m + "T00:00:00");
+  return isNaN(t.getTime()) ? null : t;
+}
+function ce(m) {
+  const t = m.getFullYear(), e = String(m.getMonth() + 1).padStart(2, "0"), i = String(m.getDate()).padStart(2, "0");
+  return `${t}-${e}-${i}`;
+}
+function N(m, t) {
+  return m.getFullYear() === t.getFullYear() && m.getMonth() === t.getMonth() && m.getDate() === t.getDate();
+}
+class me {
+  view;
+  focusedYear;
+  focusedMonth;
+  value;
+  rangeStart;
+  rangeEnd;
+  min;
+  max;
+  // WHY: Computed grid of day cells for the focused month view
+  days;
+  months;
+  years;
+  title;
+  constructor(t = {}) {
+    const e = /* @__PURE__ */ new Date(), i = L(t.value ?? null) ?? e;
+    this.view = S("day"), this.focusedYear = S(i.getFullYear()), this.focusedMonth = S(i.getMonth()), this.value = S(t.value ?? null), this.rangeStart = S(t.rangeStart ?? null), this.rangeEnd = S(t.rangeEnd ?? null), this.min = S(t.min ?? null), this.max = S(t.max ?? null), this.days = I(() => this.#n()), this.months = I(() => this.#t()), this.years = I(() => this.#e()), this.title = I(() => this.#a());
+  }
+  // ── Navigation ──
+  prevMonth() {
+    $(() => {
+      this.focusedMonth.value === 0 ? (this.focusedMonth.value = 11, this.focusedYear.value--) : this.focusedMonth.value--;
+    });
+  }
+  nextMonth() {
+    $(() => {
+      this.focusedMonth.value === 11 ? (this.focusedMonth.value = 0, this.focusedYear.value++) : this.focusedMonth.value++;
+    });
+  }
+  prevYear() {
+    this.focusedYear.value--;
+  }
+  nextYear() {
+    this.focusedYear.value++;
+  }
+  prevDecade() {
+    this.focusedYear.value -= 10;
+  }
+  nextDecade() {
+    this.focusedYear.value += 10;
+  }
+  // ── Selection ──
+  selectDate(t) {
+    this.value.value = t;
+  }
+  selectMonth(t) {
+    $(() => {
+      this.focusedMonth.value = t, this.view.value = "day";
+    });
+  }
+  selectYear(t) {
+    $(() => {
+      this.focusedYear.value = t, this.view.value = "month";
+    });
+  }
+  // ── Range ──
+  setRange(t, e) {
+    $(() => {
+      this.rangeStart.value = t, this.rangeEnd.value = e;
+    });
+  }
+  // ── Validation ──
+  isDateDisabled(t) {
+    const e = L(this.min.value), i = L(this.max.value), s = L(t);
+    return !!(!s || e && s < e || i && s > i);
+  }
+  // ── Private Computations ──
+  #n() {
+    const t = this.focusedYear.value, e = this.focusedMonth.value, i = L(this.value.value), s = /* @__PURE__ */ new Date(), a = L(this.rangeStart.value), n = L(this.rangeEnd.value), c = new Date(t, e, 1).getDay(), h = new Date(t, e, 1 - c), f = [];
+    for (let u = 0; u < 42; u++) {
+      const l = new Date(h.getFullYear(), h.getMonth(), h.getDate() + u), v = ce(l), d = l.getMonth() === e, p = N(l, s), g = i ? N(l, i) : !1, E = this.isDateDisabled(v);
+      let b = !1, A = !1, P = !1;
+      if (a && n) {
+        const C = a <= n ? a : n, D = a <= n ? n : a;
+        b = l >= C && l <= D, A = N(l, C), P = N(l, D);
+      }
+      f.push({
+        date: v,
+        day: l.getDate(),
+        inMonth: d,
+        isToday: p,
+        isSelected: g,
+        isDisabled: E,
+        inRange: b,
+        isRangeStart: A,
+        isRangeEnd: P
+      });
+    }
+    return f;
+  }
+  #t() {
+    const t = this.focusedYear.value, e = this.focusedMonth.value;
+    return ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"].map((s, a) => ({
+      month: a,
+      name: s,
+      isCurrent: a === e && t === (/* @__PURE__ */ new Date()).getFullYear(),
+      isSelected: a === e
+    }));
+  }
+  #e() {
+    const t = this.focusedYear.value, e = Math.floor(t / 10) * 10, i = (/* @__PURE__ */ new Date()).getFullYear(), s = [];
+    for (let a = e - 1; a <= e + 10; a++)
+      s.push({
+        year: a,
+        inDecade: a >= e && a < e + 10,
+        isCurrent: a === i,
+        isSelected: a === t
+      });
+    return s;
+  }
+  #a() {
+    const t = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ];
+    switch (this.view.value) {
+      case "day":
+        return `${t[this.focusedMonth.value]} ${this.focusedYear.value}`;
+      case "month":
+        return `${this.focusedYear.value}`;
+      case "year": {
+        const e = Math.floor(this.focusedYear.value / 10) * 10;
+        return `${e}–${e + 9}`;
+      }
+    }
+  }
+}
+class fe extends T {
+  static attributes = {
+    value: { type: "string", default: "" },
+    min: { type: "string", default: "" },
+    max: { type: "string", default: "" },
+    disabled: { type: "boolean", default: !1 },
+    range: { type: "boolean", default: !1 }
+  };
+  #n;
+  #t = new me();
+  #e = S(!1);
+  // WHY: Track focused cell index for keyboard navigation within the grid
+  #a = S(0);
+  // WHY: 3-phase range cycle: idle → selecting (hover previews) → committed → idle
+  #s = "idle";
+  // WHY: Drag-based range selection — pointerdown starts, pointermove previews, pointerup commits
+  #l = !1;
+  constructor() {
+    super(), this.#n = this.attachInternals(), this.#n.role = "group";
+  }
+  get store() {
+    return this.#t;
+  }
+  get value() {
+    return this.#t.value.value;
+  }
+  set value(t) {
+    this.#t.value.value = t, t ? this.setAttribute("value", t) : this.removeAttribute("value");
+  }
+  get disabled() {
+    return this.#e.value;
+  }
+  set disabled(t) {
+    this.#e.value = t, this.toggleAttribute("disabled", t);
+  }
+  get range() {
+    return this.hasAttribute("range");
+  }
+  attributeChangedCallback(t, e, i) {
+    if (e !== i) {
+      switch (t) {
+        case "value":
+          this.#t.value.value = i;
+          break;
+        case "min":
+          this.#t.min.value = i;
+          break;
+        case "max":
+          this.#t.max.value = i;
+          break;
+        case "disabled":
+          this.#e.value = i !== null;
+          break;
+        case "range":
+          this.#s = "idle", this.#t.setRange(null, null);
+          break;
+      }
+      super.attributeChangedCallback?.(t, e, i);
+    }
+  }
+  activate() {
+    super.activate(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0");
+    const t = this.getAttribute("value"), e = this.getAttribute("min"), i = this.getAttribute("max");
+    $(() => {
+      t && (this.#t.value.value = t), e && (this.#t.min.value = e), i && (this.#t.max.value = i);
+    }), this.#u(), this.addEventListener("keydown", this.#C), this.addEffect(() => this.#i()), this.addEffect(() => {
+      this.setAttribute("aria-label", this.#t.title.value);
+    });
+  }
+  dispose() {
+    this.querySelector('aui-button[data-role="prev"]')?.removeEventListener("click", this.#m), this.querySelector('aui-button[data-role="next"]')?.removeEventListener("click", this.#f), this.querySelector('aui-button[data-role="title"]')?.removeEventListener("click", this.#r);
+    const t = this.querySelector("[data-cal-grid]");
+    t?.removeEventListener("click", this.#c), t?.removeEventListener("pointermove", this.#o), t?.removeEventListener("pointerdown", this.#d), t?.removeEventListener("pointerup", this.#b), this.removeEventListener("keydown", this.#C), super.dispose();
+  }
+  #u() {
+    this.innerHTML = `
+      <div data-cal-header>
+        <aui-button data-role="prev" aria-label="Previous" tabindex="-1"><aui-icon name="caret-left"></aui-icon></aui-button>
+        <aui-button data-role="title" tabindex="-1"></aui-button>
+        <aui-button data-role="next" aria-label="Next" tabindex="-1"><aui-icon name="caret-right"></aui-icon></aui-button>
+      </div>
+      <div data-cal-weekdays></div>
+      <div data-cal-grid role="grid"></div>
+    `;
+    for (const a of this.querySelectorAll("[data-cal-header] aui-button"))
+      a.setAttribute("tabindex", "-1");
+    const t = this.querySelector('aui-button[data-role="prev"]'), e = this.querySelector('aui-button[data-role="next"]'), i = this.querySelector('aui-button[data-role="title"]');
+    t?.addEventListener("click", this.#m), e?.addEventListener("click", this.#f), i?.addEventListener("click", this.#r);
+    const s = this.querySelector("[data-cal-grid]");
+    s?.addEventListener("click", this.#c), s?.addEventListener("pointermove", this.#o), s?.addEventListener("pointerdown", this.#d), s?.addEventListener("pointerup", this.#b);
+  }
+  #i() {
+    const t = this.#t.view.value, e = this.querySelector('aui-button[data-role="title"]'), i = this.querySelector("[data-cal-weekdays]"), s = this.querySelector("[data-cal-grid]");
+    if (!(!e || !i || !s)) {
+      if (e.textContent = this.#t.title.value, t === "day") {
+        this.setAttribute("view", "day"), i.innerHTML = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((n) => `<span data-cal-weekday>${n}</span>`).join("");
+        const a = this.#t.days.value;
+        s.innerHTML = a.map((n, r) => {
+          let c = `data-date="${n.date}" data-index="${r}" tabindex="-1"`;
+          return n.inMonth || (c += " data-outside"), n.isToday && (c += ' data-today aria-current="date"'), n.isSelected && (c += ' data-selected aria-selected="true"'), n.isDisabled && (c += " disabled"), n.inRange && (c += " data-in-range"), n.isRangeStart && (c += " data-range-start"), n.isRangeEnd && (c += " data-range-end"), `<div data-cal-day ${c}>${n.day}</div>`;
+        }).join("");
+      } else if (t === "month") {
+        this.setAttribute("view", "month"), i.innerHTML = "";
+        const a = this.#t.months.value;
+        s.innerHTML = a.map((n) => {
+          let r = `data-month="${n.month}" tabindex="-1"`;
+          return n.isCurrent && (r += ' data-today aria-current="date"'), n.isSelected && (r += ' data-selected aria-selected="true"'), `<div data-cal-cell ${r}>${n.name}</div>`;
+        }).join("");
+      } else {
+        this.setAttribute("view", "year"), i.innerHTML = "";
+        const a = this.#t.years.value;
+        s.innerHTML = a.map((n) => {
+          let r = `data-year="${n.year}" tabindex="-1"`;
+          return n.inDecade || (r += " data-outside"), n.isCurrent && (r += ' data-today aria-current="date"'), n.isSelected && (r += ' data-selected aria-selected="true"'), `<div data-cal-cell ${r}>${n.year}</div>`;
+        }).join("");
+      }
+      for (const a of s.querySelectorAll("[data-cal-day]:not([disabled]), [data-cal-cell]"))
+        a.setAttribute("tabindex", "-1");
+    }
+  }
+  #m = () => {
+    this.#A();
+  };
+  #f = () => {
+    this.#w();
+  };
+  #r = () => {
+    this.#v();
+  };
+  #c = (t) => {
+    this.#y(t);
+  };
+  #o = (t) => {
+    this.#E(t);
+  };
+  #d = (t) => {
+    this.#k(t);
+  };
+  #b = (t) => {
+    this.#p(t);
+  };
+  #A() {
+    const t = this.#t.view.value;
+    t === "day" ? this.#t.prevMonth() : t === "month" ? this.#t.prevYear() : this.#t.prevDecade();
+  }
+  #w() {
+    const t = this.#t.view.value;
+    t === "day" ? this.#t.nextMonth() : t === "month" ? this.#t.nextYear() : this.#t.nextDecade();
+  }
+  #v() {
+    const t = this.#t.view.value;
+    t === "day" ? this.#t.view.value = "month" : t === "month" && (this.#t.view.value = "year");
+  }
+  #y(t) {
+    if (this.#e.value) return;
+    const e = t.target.closest("[data-cal-day], [data-cal-cell]");
+    if (!e || e.hasAttribute("disabled")) return;
+    const i = e.dataset.date, s = e.dataset.month, a = e.dataset.year;
+    i ? this.#h(i) : s !== void 0 ? this.#t.selectMonth(Number(s)) : a !== void 0 && this.#t.selectYear(Number(a));
+  }
+  #h(t) {
+    this.range ? this.#s === "idle" ? ($(() => {
+      this.#t.selectDate(t), this.#t.setRange(t, null);
+    }), this.setAttribute("value", t), this.#s = "selecting") : this.#s === "selecting" ? this.#g(t) : ($(() => {
+      this.#t.value.value = null, this.#t.setRange(null, null);
+    }), this.removeAttribute("value"), this.#s = "idle") : (this.#t.selectDate(t), this.setAttribute("value", t), this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: t }
+    })));
+  }
+  #g(t) {
+    const e = this.#t.rangeStart.value;
+    e && (this.#t.setRange(e, t), this.#s = "committed", this.#l = !1, this.dispatchEvent(new CustomEvent("aui:range-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { start: this.#t.rangeStart.value, end: this.#t.rangeEnd.value }
+    })));
+  }
+  #k(t) {
+    if (this.#e.value || !this.range || t.button !== 0) return;
+    const e = t.target.closest("[data-cal-day]");
+    if (!e || e.hasAttribute("disabled")) return;
+    const i = e.dataset.date;
+    i && (this.#l = !0, (this.#s === "idle" || this.#s === "committed") && ($(() => {
+      this.#t.selectDate(i), this.#t.setRange(i, null);
+    }), this.setAttribute("value", i), this.#s = "selecting"));
+  }
+  #p(t) {
+    if (!this.#l || (this.#l = !1, this.#s !== "selecting")) return;
+    const e = t.target.closest("[data-cal-day]");
+    if (!e || e.hasAttribute("disabled")) return;
+    const i = e.dataset.date;
+    if (!i) return;
+    const s = this.#t.rangeStart.value;
+    s && s !== i && this.#g(i);
+  }
+  #E(t) {
+    if (this.#e.value || !this.range || this.#s !== "selecting") return;
+    const e = t.target.closest("[data-cal-day]");
+    if (!e || e.hasAttribute("disabled")) return;
+    const i = e.dataset.date;
+    if (!i) return;
+    const s = this.#t.rangeStart.value;
+    s && this.#t.setRange(s, i);
+  }
+  #C = (t) => {
+    if (this.#e.value || this.#t.view.value !== "day") return;
+    const i = this.#t.days.value;
+    let s = this.#a.value, a = !0;
+    switch (t.key) {
+      case "ArrowRight":
+        s += 1;
+        break;
+      case "ArrowLeft":
+        s -= 1;
+        break;
+      case "ArrowDown":
+        s += 7;
+        break;
+      case "ArrowUp":
+        s -= 7;
+        break;
+      case "Home":
+        s = s - s % 7;
+        break;
+      case "End":
+        s = s - s % 7 + 6;
+        break;
+      case "PageDown":
+        t.shiftKey ? this.#t.nextYear() : this.#t.nextMonth();
+        break;
+      case "PageUp":
+        t.shiftKey ? this.#t.prevYear() : this.#t.prevMonth();
+        break;
+      case "Enter":
+      case " ": {
+        const n = i[s];
+        n && !n.isDisabled && this.#h(n.date);
+        break;
+      }
+      default:
+        a = !1;
+    }
+    a && (t.preventDefault(), s = Math.max(0, Math.min(41, s)), this.#a.value = s, s < 0 && this.#t.prevMonth(), s > 41 && this.#t.nextMonth());
+  };
+}
+let pe = 0;
+function H(m) {
+  return `${m}-${Date.now().toString(36)}-${(++pe).toString(36)}`;
+}
+const be = 50, M = "http://www.w3.org/2000/svg";
+class ge {
+  host;
+  // ── Public mutable options ──
+  selector;
+  editable;
+  color;
+  strokeWidth;
+  tension;
+  showPorts;
+  portSize;
+  style;
+  animated;
+  disabled;
+  // ── Private state ──
+  #n = !1;
+  #t = null;
+  #e = /* @__PURE__ */ new Map();
+  #a = null;
+  #s = null;
+  #l = [];
+  #u = null;
+  #i = null;
+  #m = null;
+  #f = null;
+  #r = 0;
+  #c = !1;
+  #o = !1;
+  #d = null;
+  constructor(t, e = {}) {
+    if (this.host = t, this.selector = e.selector ?? "[data-noodle-port]", this.editable = e.editable ?? !1, this.color = e.color ?? "var(--aui-accent-500)", this.strokeWidth = e.strokeWidth ?? 2, this.tension = e.tension ?? 0.5, this.showPorts = e.showPorts ?? this.editable, this.portSize = e.portSize ?? 10, this.style = e.style ?? "bezier", this.animated = e.animated ?? !1, this.disabled = e.disabled ?? !1, e.connections)
+      for (const i of e.connections)
+        this.#e.set(i.id, {
+          ...i,
+          fromPort: i.fromPort ?? "right",
+          toPort: i.toPort ?? "left"
+        });
+    this.attach();
+  }
+  // ── Lifecycle ──
+  attach() {
+    if (this.#n) return;
+    this.#n = !0, getComputedStyle(this.host).position === "static" && (this.host.style.position = "relative"), this.host.style.isolation = "isolate", this.#b(), this.#w(), this.#R(), this.showPorts && this.#S(), this.host.addEventListener("aui:magnet-snap", this.#x), this.host.addEventListener("aui:magnet-drop", this.#x), this.host.addEventListener("aui:drag-move", this.#x), this.#p();
+  }
+  detach() {
+    this.#n && (this.#n = !1, this.#z(), this.#T(), this.#A(), this.#v(), this.host.style.isolation = "", this.host.removeEventListener("aui:magnet-snap", this.#x), this.host.removeEventListener("aui:magnet-drop", this.#x), this.host.removeEventListener("aui:drag-move", this.#x), this.#r && (cancelAnimationFrame(this.#r), this.#r = 0), this.#c = !1);
+  }
+  destroy() {
+    this.#M(), this.detach(), this.#e.clear();
+  }
+  // ── Public API ──
+  /** Add a connection. Returns the connection ID. */
+  connect(t, e, i = "right", s = "left") {
+    const a = H("noodle"), n = { id: a, from: t, to: e, fromPort: i, toPort: s };
+    return this.#e.set(a, n), this.#p(), this.host.dispatchEvent(new CustomEvent("aui:noodle-connect", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: a, from: t, to: e, fromPort: i, toPort: s }
+    })), a;
+  }
+  /** Remove a connection by ID. */
+  disconnect(t) {
+    const e = this.#e.get(t);
+    return e ? (this.#e.delete(t), this.#p(), this.host.dispatchEvent(new CustomEvent("aui:noodle-disconnect", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: t, from: e.from, to: e.to, fromPort: e.fromPort, toPort: e.toPort }
+    })), !0) : !1;
+  }
+  /** Remove all connections. */
+  clear() {
+    const t = [...this.#e.values()];
+    this.#e.clear(), this.#p();
+    for (const e of t)
+      this.host.dispatchEvent(new CustomEvent("aui:noodle-disconnect", {
+        bubbles: !0,
+        composed: !0,
+        detail: { id: e.id, from: e.from, to: e.to, fromPort: e.fromPort, toPort: e.toPort }
+      }));
+  }
+  /** Get all current connections. */
+  getConnections() {
+    return [...this.#e.values()];
+  }
+  /** Replace all connections. */
+  setConnections(t) {
+    this.#e.clear();
+    for (const e of t)
+      this.#e.set(e.id ?? H("noodle"), {
+        ...e,
+        fromPort: e.fromPort ?? "right",
+        toPort: e.toPort ?? "left"
+      });
+    this.#p();
+  }
+  /** Force re-render all paths and rebuild port indicators.
+   *  Call after programmatic element moves or when the set of port elements changes. */
+  update() {
+    this.#p(), this.showPorts && !this.#u && this.#S();
+  }
+  // ── SVG overlay ──
+  #b() {
+    const t = document.createElementNS(M, "svg");
+    t.setAttribute("data-noodle-svg", ""), t.style.cssText = "position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0;", this.#s = document.createElementNS(M, "g"), this.#s.setAttribute("data-noodle-hits", ""), t.appendChild(this.#s), this.#a = document.createElementNS(M, "g"), this.#a.setAttribute("data-noodle-paths", ""), t.appendChild(this.#a), this.host.appendChild(t), this.#t = t;
+  }
+  #A() {
+    this.#t?.remove(), this.#t = null, this.#a = null, this.#s = null;
+  }
+  #w() {
+    if (this.#d) return;
+    const t = document.createElement("style");
+    t.textContent = "@keyframes noodle-flow{to{stroke-dashoffset:-12}}", this.host.appendChild(t), this.#d = t;
+  }
+  #v() {
+    this.#d?.remove(), this.#d = null;
+  }
+  // ── Coordinate helpers ──
+  /** Convert client (screen) coordinates to the host's layout coordinate space,
+   *  accounting for CSS transforms (zoom/pan) on the host or its ancestors. */
+  #y(t, e) {
+    const i = this.host.getBoundingClientRect(), s = i.width / (this.host.clientWidth || 1), a = i.height / (this.host.clientHeight || 1);
+    return {
+      x: (t - i.left) / s,
+      y: (e - i.top) / a
+    };
+  }
+  // ── Path computation ──
+  #h(t, e) {
+    const i = this.host.querySelector(`#${CSS.escape(t)}`);
+    if (!i) return null;
+    let s = 0, a = 0, n = i;
+    for (; n && n !== this.host; ) {
+      s += n.offsetLeft, a += n.offsetTop;
+      const h = n.style.translate;
+      if (h) {
+        const f = h.match(/-?[\d.]+/g);
+        f && (s += parseFloat(f[0]) || 0, a += parseFloat(f[1]) || 0);
+      }
+      n = n.offsetParent;
+    }
+    const r = i.offsetWidth, c = i.offsetHeight;
+    switch (e) {
+      case "top":
+        return { x: s + r / 2, y: a };
+      case "right":
+        return { x: s + r, y: a + c / 2 };
+      case "bottom":
+        return { x: s + r / 2, y: a + c };
+      case "left":
+        return { x: s, y: a + c / 2 };
+    }
+  }
+  #g(t, e, i, s) {
+    switch (i) {
+      case "right":
+        return [t + s, e];
+      case "left":
+        return [t - s, e];
+      case "bottom":
+        return [t, e + s];
+      case "top":
+        return [t, e - s];
+    }
+  }
+  #k(t) {
+    const e = this.#h(t.from, t.fromPort), i = this.#h(t.to, t.toPort);
+    if (!e || !i) return null;
+    switch (this.style) {
+      case "straight":
+        return `M ${e.x} ${e.y} L ${i.x} ${i.y}`;
+      case "step": {
+        const s = (e.x + i.x) / 2;
+        return `M ${e.x} ${e.y} L ${s} ${e.y} L ${s} ${i.y} L ${i.x} ${i.y}`;
+      }
+      case "bezier":
+      default: {
+        const s = Math.max(Math.abs(i.x - e.x), Math.abs(i.y - e.y)), a = Math.max(50, s * this.tension), [n, r] = this.#g(e.x, e.y, t.fromPort, a), [c, h] = this.#g(i.x, i.y, t.toPort, a);
+        return `M ${e.x} ${e.y} C ${n} ${r}, ${c} ${h}, ${i.x} ${i.y}`;
+      }
+    }
+  }
+  // ── Rendering ──
+  #p() {
+    if (!(!this.#a || !this.#s)) {
+      this.#o = !0, this.#a.textContent = "", this.#s.textContent = "", this.#i && this.#a.appendChild(this.#i);
+      for (const t of this.#e.values()) {
+        const e = this.#k(t);
+        if (!e) continue;
+        if (this.editable) {
+          const s = document.createElementNS(M, "path");
+          s.setAttribute("d", e), s.setAttribute("stroke", "transparent"), s.setAttribute("stroke-width", "14"), s.setAttribute("fill", "none"), s.style.pointerEvents = "stroke", s.style.cursor = "pointer", s.dataset.noodleId = t.id, s.addEventListener("pointerdown", this.#q), this.#s.appendChild(s);
+        }
+        const i = document.createElementNS(M, "path");
+        i.setAttribute("d", e), i.setAttribute("fill", "none"), i.setAttribute("stroke-linecap", "round"), this.disabled ? (i.setAttribute("stroke", "var(--aui-ink-muted)"), i.setAttribute("stroke-width", String(this.strokeWidth)), i.setAttribute("stroke-dasharray", "6 4"), i.style.opacity = "0.6") : (i.setAttribute("stroke", t.color ?? this.color), i.setAttribute("stroke-width", String(this.strokeWidth)), this.animated && (i.setAttribute("stroke-dasharray", "8 4"), i.style.animation = "noodle-flow 0.6s linear infinite")), this.#a.appendChild(i);
+      }
+      this.#u || queueMicrotask(() => {
+        this.#o = !1;
+      });
+    }
+  }
+  #E() {
+    this.#c || (this.#c = !0, this.#r = requestAnimationFrame(() => {
+      this.#c = !1, this.#p(), this.showPorts && this.#D();
+    }));
+  }
+  /** Full update: recreate port indicators (for child list changes). */
+  #C() {
+    this.#c || (this.#c = !0, this.#r = requestAnimationFrame(() => {
+      this.#c = !1, this.#p(), this.showPorts && !this.#u && this.#S();
+    }));
+  }
+  // ── Port indicators (edit mode) ──
+  #S() {
+    this.#o = !0, this.#T();
+    const t = this.host.querySelectorAll(this.selector);
+    for (const e of t) {
+      const i = (e.getAttribute("data-noodle-port") ?? "").split(/\s+/).filter(Boolean), s = e.id;
+      if (s)
+        for (const a of i) {
+          const n = document.createElement("div");
+          n.setAttribute("data-noodle-port-indicator", ""), n.setAttribute("data-noodle-side", a), n.setAttribute("data-noodle-target", s), n.style.cssText = `position:absolute;width:${this.portSize}px;height:${this.portSize}px;border-radius:50%;background:${this.color};border:2px solid white;pointer-events:auto;cursor:crosshair;z-index:5;touch-action:none;transform:translate(-50%,-50%);transition:transform 150ms ease,box-shadow 150ms ease;box-shadow:0 1px 3px rgba(0,0,0,0.2);`, n.addEventListener("pointerdown", this.#I), this.host.appendChild(n), this.#l.push(n);
+        }
+    }
+    this.#D(), this.#u || queueMicrotask(() => {
+      this.#o = !1;
+    });
+  }
+  #D() {
+    for (const t of this.#l) {
+      const e = t.getAttribute("data-noodle-target"), i = t.getAttribute("data-noodle-side"), s = this.#h(e, i);
+      s && (t.style.left = `${s.x}px`, t.style.top = `${s.y}px`);
+    }
+  }
+  #T() {
+    for (const t of this.#l)
+      t.removeEventListener("pointerdown", this.#I), t.remove();
+    this.#l = [];
+  }
+  // ── Edit mode: drag-to-connect ──
+  #I = (t) => {
+    if (this.disabled || !this.editable || t.button !== 0) return;
+    const e = t.target.closest("[data-noodle-port-indicator]");
+    if (!e) return;
+    t.preventDefault(), t.stopPropagation();
+    const i = e.getAttribute("data-noodle-target"), s = e.getAttribute("data-noodle-side"), a = this.host.querySelector(`#${CSS.escape(i)}`);
+    if (a) {
+      this.#u = {
+        fromElement: a,
+        fromPort: s,
+        fromId: i,
+        pointerId: t.pointerId,
+        sourceDot: e
+      }, e.setAttribute("data-noodle-dragging", "");
+      for (const n of this.#l) {
+        if (n === e) continue;
+        const r = n.getAttribute("data-noodle-target"), c = n.getAttribute("data-noodle-side");
+        r === i && c === s || n.setAttribute("data-noodle-droppable", "");
+      }
+      this.#o = !0, this.#i = document.createElementNS(M, "path"), this.#i.setAttribute("stroke", "var(--aui-ink-muted)"), this.#i.setAttribute("stroke-width", String(this.strokeWidth)), this.#i.setAttribute("fill", "none"), this.#i.setAttribute("stroke-dasharray", "6 4"), this.#i.setAttribute("stroke-linecap", "round"), this.#i.style.opacity = "0.7", this.#a?.appendChild(this.#i), this.host.dispatchEvent(new CustomEvent("aui:noodle-drag", {
+        bubbles: !0,
+        composed: !0,
+        detail: { from: i, fromPort: s, x: t.clientX, y: t.clientY }
+      })), document.addEventListener("pointermove", this.#P), document.addEventListener("pointerup", this.#$), document.addEventListener("pointercancel", this.#L);
+    }
+  };
+  #P = (t) => {
+    const e = this.#u;
+    if (!e || !this.#i) return;
+    const i = this.#h(e.fromId, e.fromPort);
+    if (!i) return;
+    const { x: s, y: a } = this.#y(t.clientX, t.clientY), n = Math.max(Math.abs(s - i.x), Math.abs(a - i.y)), r = Math.max(50, n * this.tension), [c, h] = this.#g(i.x, i.y, e.fromPort, r), f = `M ${i.x} ${i.y} C ${c} ${h}, ${s} ${a}, ${s} ${a}`;
+    this.#i.setAttribute("d", f), this.#Y(t.clientX, t.clientY);
+  };
+  #$ = (t) => {
+    const e = this.#u;
+    if (!e) return;
+    const i = this.#N(t.clientX, t.clientY);
+    if (i) {
+      const s = i.getAttribute("data-noodle-target"), a = i.getAttribute("data-noodle-side");
+      (s !== e.fromId || a !== e.fromPort) && this.connect(e.fromId, s, e.fromPort, a);
+    }
+    this.#M();
+  };
+  #L = () => {
+    this.#M();
+  };
+  #M() {
+    for (const t of this.#l)
+      t.removeAttribute("data-noodle-dragging"), t.removeAttribute("data-noodle-droppable"), t.removeAttribute("data-noodle-drop-ready");
+    this.#i?.remove(), this.#i = null, this.#u = null, document.removeEventListener("pointermove", this.#P), document.removeEventListener("pointerup", this.#$), document.removeEventListener("pointercancel", this.#L), this.#o = !1;
+  }
+  // ── Proximity helpers ──
+  /** Find the nearest droppable port within DROP_SNAP_RADIUS of a screen point. */
+  #N(t, e) {
+    let i = null, s = be;
+    for (const a of this.#l) {
+      if (!a.hasAttribute("data-noodle-droppable")) continue;
+      const n = a.getBoundingClientRect(), r = n.left + n.width / 2, c = n.top + n.height / 2, h = Math.hypot(t - r, e - c);
+      h < s && (s = h, i = a);
+    }
+    return i;
+  }
+  /** Toggle data-noodle-drop-ready on the nearest droppable port and update drag path color. */
+  #Y(t, e) {
+    const i = this.#N(t, e);
+    for (const s of this.#l)
+      s === i ? s.setAttribute("data-noodle-drop-ready", "") : s.removeAttribute("data-noodle-drop-ready");
+    if (i && this.#i && this.#u) {
+      this.#i.setAttribute("stroke", this.color), this.#i.style.opacity = "1", this.#i.removeAttribute("stroke-dasharray");
+      const s = i.getAttribute("data-noodle-target"), a = i.getAttribute("data-noodle-side"), n = this.#h(s, a), r = this.#h(this.#u.fromId, this.#u.fromPort);
+      if (r && n) {
+        const c = Math.max(Math.abs(n.x - r.x), Math.abs(n.y - r.y)), h = Math.max(50, c * this.tension), [f, u] = this.#g(r.x, r.y, this.#u.fromPort, h), [l, v] = this.#g(n.x, n.y, a, h);
+        this.#i.setAttribute("d", `M ${r.x} ${r.y} C ${f} ${u}, ${l} ${v}, ${n.x} ${n.y}`);
+      }
+    } else this.#i && (this.#i.setAttribute("stroke", "var(--aui-ink-muted)"), this.#i.style.opacity = "0.7", this.#i.setAttribute("stroke-dasharray", "6 4"));
+  }
+  // ── Reconnect drag (grab existing noodle near endpoint) ──
+  #q = (t) => {
+    if (this.disabled || !this.editable || t.button !== 0) return;
+    const i = t.target.dataset.noodleId;
+    if (!i) return;
+    const s = this.#e.get(i);
+    if (!s) return;
+    t.preventDefault(), t.stopPropagation(), this.#o = !0;
+    const a = this.#h(s.from, s.fromPort), n = this.#h(s.to, s.toPort);
+    if (!a || !n) {
+      this.#o = !1;
+      return;
+    }
+    const { x: r, y: c } = this.#y(t.clientX, t.clientY), h = Math.hypot(r - a.x, c - a.y), f = Math.hypot(r - n.x, c - n.y), u = h < f ? s.to : s.from, l = h < f ? s.toPort : s.fromPort;
+    this.disconnect(i);
+    const v = this.#l.find(
+      (b) => b.getAttribute("data-noodle-target") === u && b.getAttribute("data-noodle-side") === l
+    );
+    if (!v) {
+      this.#o = !1;
+      return;
+    }
+    const d = this.host.querySelector(`#${CSS.escape(u)}`);
+    if (!d) {
+      this.#o = !1;
+      return;
+    }
+    this.#u = {
+      fromElement: d,
+      fromPort: l,
+      fromId: u,
+      pointerId: t.pointerId,
+      sourceDot: v,
+      reconnectId: i
+    }, v.setAttribute("data-noodle-dragging", "");
+    for (const b of this.#l) {
+      if (b === v) continue;
+      const A = b.getAttribute("data-noodle-target"), P = b.getAttribute("data-noodle-side");
+      A === u && P === l || b.setAttribute("data-noodle-droppable", "");
+    }
+    this.#i = document.createElementNS(M, "path"), this.#i.setAttribute("stroke", "var(--aui-ink-muted)"), this.#i.setAttribute("stroke-width", String(this.strokeWidth)), this.#i.setAttribute("fill", "none"), this.#i.setAttribute("stroke-dasharray", "6 4"), this.#i.setAttribute("stroke-linecap", "round"), this.#i.style.opacity = "0.7";
+    const p = this.#h(u, l), { x: g, y: E } = this.#y(t.clientX, t.clientY);
+    if (p) {
+      const b = Math.max(Math.abs(g - p.x), Math.abs(E - p.y)), A = Math.max(50, b * this.tension), [P, C] = this.#g(p.x, p.y, l, A);
+      this.#i.setAttribute("d", `M ${p.x} ${p.y} C ${P} ${C}, ${g} ${E}, ${g} ${E}`);
+    }
+    this.#a?.appendChild(this.#i), this.host.dispatchEvent(new CustomEvent("aui:noodle-drag", {
+      bubbles: !0,
+      composed: !0,
+      detail: { from: u, fromPort: l, x: t.clientX, y: t.clientY, reconnect: !0 }
+    })), document.addEventListener("pointermove", this.#P), document.addEventListener("pointerup", this.#$), document.addEventListener("pointercancel", this.#L);
+  };
+  // ── Movement tracking ──
+  #x = () => {
+    this.#E();
+  };
+  #R() {
+    this.#m = new ResizeObserver(() => this.#E()), this.#m.observe(this.host), this.#f = new MutationObserver((t) => {
+      if (this.#o) return;
+      t.some((i) => i.type === "childList") ? this.#C() : this.#E();
+    }), this.#f.observe(this.host, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["style", "class", "translate", "data-noodle-port"]
+    });
+  }
+  #z() {
+    this.#m?.disconnect(), this.#m = null, this.#f?.disconnect(), this.#f = null;
+  }
+}
+class ve extends T {
+  static attributes = {
+    editable: { type: "boolean", default: !1 },
+    color: { type: "string", default: "" },
+    "stroke-width": { type: "string", default: "2" },
+    tension: { type: "string", default: "0.5" },
+    "show-ports": { type: "boolean", default: !1 },
+    "port-size": { type: "string", default: "10" },
+    curve: { type: "string", default: "bezier" },
+    animated: { type: "boolean", default: !1 },
+    disabled: { type: "boolean", default: !1 }
+  };
+  #n = null;
+  // ── Public API (pass-through) ──
+  /** Current connections. */
+  get connections() {
+    return this.#n?.getConnections() ?? [];
+  }
+  /** Create a connection between two elements. Returns the connection ID. */
+  connect(t, e, i, s) {
+    return this.#n.connect(t, e, i, s);
+  }
+  /** Remove a connection by ID. */
+  disconnect(t) {
+    return this.#n?.disconnect(t) ?? !1;
+  }
+  /** Replace all connections. */
+  setConnections(t) {
+    this.#n?.setConnections(t);
+  }
+  /** Remove all connections. */
+  clear() {
+    this.#n?.clear();
+  }
+  /** Force re-render paths and port indicators. */
+  update() {
+    this.#n?.update();
+  }
+  // ── Lifecycle ──
+  activate() {
+    this.#n = new ge(this, this.#t());
+  }
+  dispose() {
+    this.#n?.destroy(), this.#n = null;
+  }
+  attributeChangedCallback(t, e, i) {
+    e !== i && (super.attributeChangedCallback(t, e, i), this.#n && this.#e(t, i));
+  }
+  // ── Private ──
+  #t() {
+    const t = {};
+    this.hasAttribute("editable") && (t.editable = !0), this.hasAttribute("animated") && (t.animated = !0), this.hasAttribute("disabled") && (t.disabled = !0);
+    const e = this.getAttribute("color");
+    e && (t.color = e);
+    const i = this.getAttribute("stroke-width");
+    if (i) {
+      const r = Number(i);
+      isNaN(r) || (t.strokeWidth = r);
+    }
+    const s = this.getAttribute("tension");
+    if (s) {
+      const r = Number(s);
+      isNaN(r) || (t.tension = r);
+    }
+    this.hasAttribute("show-ports") && (t.showPorts = this.getAttribute("show-ports") !== "false");
+    const a = this.getAttribute("port-size");
+    if (a) {
+      const r = Number(a);
+      isNaN(r) || (t.portSize = r);
+    }
+    const n = this.getAttribute("curve");
+    return (n === "bezier" || n === "step" || n === "straight") && (t.style = n), t;
+  }
+  #e(t, e) {
+    const i = this.#n;
+    switch (t) {
+      case "editable":
+        i.editable = e !== null, i.update();
+        break;
+      case "color":
+        i.color = e ?? "var(--aui-accent-500)", i.update();
+        break;
+      case "stroke-width": {
+        const s = Number(e);
+        isNaN(s) || (i.strokeWidth = s, i.update());
+        break;
+      }
+      case "tension": {
+        const s = Number(e);
+        isNaN(s) || (i.tension = s, i.update());
+        break;
+      }
+      case "show-ports":
+        i.showPorts = e !== "false" && e !== null, i.update();
+        break;
+      case "port-size": {
+        const s = Number(e);
+        isNaN(s) || (i.portSize = s, i.update());
+        break;
+      }
+      case "curve":
+        (e === "bezier" || e === "step" || e === "straight") && (i.style = e, i.update());
+        break;
+      case "animated":
+        i.animated = e !== null, i.update();
+        break;
+      case "disabled":
+        i.disabled = e !== null, i.update();
+        break;
+    }
+  }
+}
+const ye = '<svg width="20" height="20" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M92.2671 346.112C88.1711 262.144 202.347 250.88 288.875 237.568C288.363 202.752 290.923 133.12 221.291 133.12C206.955 133.12 197.227 134.144 186.987 137.216L189.547 147.968C228.459 148.992 238.187 173.056 237.163 193.024C235.115 229.888 196.715 242.688 169.579 242.688C141.419 242.688 104.555 227.328 106.091 186.88C107.627 143.872 163.435 112.64 250.987 112.64C348.779 112.64 403.563 139.776 403.563 244.736V351.744C403.563 369.152 407.659 375.296 417.387 375.296C422.507 375.296 427.627 369.664 431.723 361.984L444.523 369.152C423.019 401.408 391.275 415.744 362.603 415.744C302.699 415.744 279.147 377.856 308.331 313.856L296.043 309.76C277.611 386.048 232.555 415.744 180.331 415.744C135.787 415.744 94.3151 391.68 92.2671 346.112ZM202.859 327.168C208.491 348.672 227.435 357.888 245.355 351.232C267.883 343.04 285.291 311.808 288.363 265.216L288.875 257.536C232.555 267.776 191.083 283.136 202.859 327.168Z" fill="currentColor"/></svg>';
+function k(m) {
+  return m.split("-").map((t) => t[0].toUpperCase() + t.slice(1)).join(" ");
+}
+class Ae extends T {
+  static attributes = {
+    src: { type: "string", default: "./preview.json" }
+  };
+  #n;
+  #t;
+  // Navigation state
+  #e = null;
+  #a = null;
+  #s = null;
+  activate() {
+    this.#l();
+  }
+  dispose() {
+    document.removeEventListener("keydown", this.#f);
+  }
+  async #l() {
+    let t;
+    try {
+      t = await (await fetch(this.src)).json();
+    } catch {
+      this.textContent = "Failed to load preview.json";
+      return;
+    }
+    const { section: e, param: i, items: s, links: a } = t, r = new URL(this.src, window.location.href).href.replace(/preview\.json$/, ""), h = new URLSearchParams(location.search).get(i), f = document.createElement("div");
+    f.setAttribute("data-role", "navbar");
+    const u = document.createElement("aui-select");
+    u.setAttribute("mode", "bar"), u.setAttribute("width", "full");
+    const l = document.createElement("aui-option");
+    l.setAttribute("value", ""), l.setAttribute("overflow-pin", ""), l.setAttribute("data-preview-logo", ""), l.dataset.href = window.location.pathname, l.innerHTML = `${ye} AgentUI`, u.appendChild(l);
+    const v = "aui-preview-scheme", d = localStorage.getItem(v);
+    d && (document.documentElement.dataset.theme = d, document.documentElement.style.colorScheme = d);
+    const p = document.createElement("aui-button");
+    p.setAttribute("ghost", ""), p.setAttribute("size", "sm"), p.setAttribute("hide-label", ""), p.setAttribute("label", "Toggle color scheme");
+    const g = document.createElement("aui-icon"), E = document.documentElement.dataset.theme === "dark";
+    g.setAttribute("name", E ? "sun" : "moon"), p.appendChild(g), u.appendChild(p), p.addEventListener("click", () => {
+      const y = document.documentElement, x = y.dataset.theme === "dark", w = x ? "light" : "dark";
+      y.dataset.theme = w, y.style.colorScheme = w, localStorage.setItem(v, w), g.setAttribute("name", x ? "moon" : "sun");
+    });
+    const b = document.createElement("aui-select");
+    if (b.setAttribute("placeholder", k(e)), b.setAttribute("outline", ""), b.setAttribute("data-role", "page-select"), a.length) {
+      const y = document.createElement("aui-optgroup");
+      y.setAttribute("label", "Sections");
+      for (const x of a) {
+        const w = document.createElement("aui-option");
+        w.setAttribute("value", `go-${x.label.toLowerCase()}`), w.dataset.href = x.href, w.textContent = x.label, y.appendChild(w);
+      }
+      b.appendChild(y);
+    }
+    let A = null, P = "";
+    for (const y of s) {
+      const x = y.group || k(e);
+      x !== P && (A = document.createElement("aui-optgroup"), A.setAttribute("label", x), b.appendChild(A), P = x);
+      const w = document.createElement("aui-option");
+      w.setAttribute("value", y.slug), y.file && (w.dataset.file = y.file), y.slug === h && w.setAttribute("selected", ""), w.textContent = y.name || k(y.slug), A.appendChild(w);
+    }
+    h && b.setAttribute("value", h), u.appendChild(b), f.appendChild(u), this.appendChild(f);
+    const C = document.createElement("aui-editor");
+    C.setAttribute("data-role", "canvas"), C.setAttribute("background", "dots");
+    const D = document.createElement("aui-editor-layer");
+    D.setAttribute("name", "content");
+    const R = document.createElement("div");
+    if (R.setAttribute("data-role", "content"), D.appendChild(R), C.appendChild(D), this.appendChild(C), this.#n = C, this.#t = R, u.addEventListener("click", (y) => {
+      const w = y.target.closest("aui-option")?.dataset?.href;
+      w && (window.location.href = w);
+    }), b.addEventListener("change", (y) => {
+      const x = y.target.value, G = b.querySelector(`aui-option[value="${x}"]`)?.dataset?.href;
+      if (G) {
+        window.location.href = G;
+        return;
+      }
+      const U = new URL(window.location.href);
+      U.searchParams.set(i, x), window.location.href = U.toString();
+    }), h) {
+      const x = s.find((w) => w.slug === h)?.file || `${h}/${h}.html`;
+      document.title = `${k(h)} — AgentUI ${k(e)}`, await this.#c(x, r);
+    } else
+      document.title = `AgentUI — ${k(e)}`, await this.#o(s, r);
+    this.#e = t, this.#a = h, this.#u(t, i), document.addEventListener("keydown", this.#f), requestAnimationFrame(() => this.#d());
+  }
+  // ── Command palette ──
+  #u(t, e) {
+    const i = document.createElement("aui-dialog");
+    i.setAttribute("size", "sm");
+    const s = document.createElement("aui-command");
+    s.setAttribute("max-width", "full");
+    const a = document.createElement("aui-command-input");
+    a.setAttribute("placeholder", `Go to ${k(t.section)}…`), s.appendChild(a);
+    const n = document.createElement("aui-command-list");
+    if (t.links.length) {
+      const f = document.createElement("aui-command-group");
+      f.setAttribute("label", "Sections");
+      for (const u of t.links) {
+        const l = document.createElement("aui-command-item");
+        l.setAttribute("value", `section:${u.label}`), l.dataset.href = u.href, l.textContent = u.label, f.appendChild(l);
+      }
+      n.appendChild(f);
+    }
+    let r = null, c = "";
+    for (const f of t.items) {
+      const u = f.group || k(t.section);
+      u !== c && (r = document.createElement("aui-command-group"), r.setAttribute("label", u), n.appendChild(r), c = u);
+      const l = document.createElement("aui-command-item");
+      l.setAttribute("value", f.slug), f.summary && l.setAttribute("keywords", f.summary), l.textContent = f.name || k(f.slug), r.appendChild(l);
+    }
+    s.appendChild(n);
+    const h = document.createElement("aui-command-empty");
+    h.textContent = "No results.", s.appendChild(h), s.addEventListener("select", (f) => {
+      const { value: u } = f.detail, v = s.querySelector(`aui-command-item[value="${CSS.escape(u)}"]`)?.dataset?.href;
+      if (v) {
+        window.location.href = v;
+        return;
+      }
+      if (u.startsWith("section:")) return;
+      const d = new URL(window.location.href);
+      d.searchParams.set(e, u), window.location.href = d.toString();
+    }), s.addEventListener("dismiss", () => this.#m()), i.addEventListener("close", () => {
+      this.#s?.removeAttribute("open");
+    }), i.appendChild(s), this.appendChild(i), this.#s = i;
+  }
+  #i() {
+    if (!this.#s) return;
+    const t = this.#s.querySelector("aui-command-input");
+    t?.clear?.(), this.#s.setAttribute("open", ""), requestAnimationFrame(() => {
+      t?.focus?.();
+    });
+  }
+  #m() {
+    this.#s?.removeAttribute("open");
+  }
+  // ── Keyboard navigation ──
+  #f = (t) => {
+    if ((t.metaKey || t.ctrlKey) && t.key === "k") {
+      t.preventDefault(), this.#s?.hasAttribute("open") ? this.#m() : this.#i();
+      return;
+    }
+    if (!t.metaKey && !t.ctrlKey && !t.altKey && !t.shiftKey && (t.key === "[" || t.key === "]")) {
+      const e = t.target?.tagName, i = t.target?.isContentEditable;
+      if (e === "INPUT" || e === "TEXTAREA" || i) return;
+      t.preventDefault(), this.#r(t.key === "]" ? 1 : -1);
+      return;
+    }
+  };
+  #r(t) {
+    if (!this.#e) return;
+    const { items: e, param: i } = this.#e;
+    if (!e.length) return;
+    let a = (this.#a ? e.findIndex((c) => c.slug === this.#a) : -1) + t;
+    a >= e.length && (a = 0), a < 0 && (a = e.length - 1);
+    const n = e[a];
+    if (!n) return;
+    const r = new URL(window.location.href);
+    r.searchParams.set(i, n.slug), window.location.href = r.toString();
+  }
+  async #c(t, e) {
+    const i = t.split("/")[0], s = `${e}${t}`, a = `${e}${i}/${i}.css`, n = `${e}${i}/${i}.ts`;
+    try {
+      const d = await fetch(s);
+      d.ok && (this.#t.innerHTML = await d.text());
+    } catch {
+    }
+    await new Promise((d) => requestAnimationFrame(() => requestAnimationFrame(d))), await new Promise((d) => requestAnimationFrame(() => requestAnimationFrame(d)));
+    const r = Array.from(this.#t.children).filter(
+      (d) => d.nodeType === 1 && d.tagName !== "SCRIPT"
+    ), c = 96, h = 200, f = r.map((d) => ({
+      el: d,
+      height: d.offsetHeight,
+      width: d.offsetWidth
+    }));
+    let u = h, l = 0;
+    for (const { el: d, height: p, width: g } of f)
+      d.style.position = "absolute", d.style.left = "0px", d.style.top = `${u}px`, d.tagName === "AUI-GRAPH-UI" || d.tagName === "AUI-EDITOR" || (F(d, "drag", { config: { mode: "free", modifier: "alt" } }), F(d, "resize", { config: { modifier: "alt" } })), g > l && (l = g), u += p + c;
+    this.#t.style.width = `${l}px`, this.#t.style.height = `${u}px`;
+    const v = document.createElement("link");
+    v.rel = "stylesheet", v.href = a, document.head.appendChild(v);
+    try {
+      await import(
+        /* @vite-ignore */
+        n
+      );
+    } catch {
+    }
+    for (const d of Array.from(this.#t.querySelectorAll("script"))) {
+      const p = document.createElement("script");
+      for (const g of d.attributes) p.setAttribute(g.name, g.value);
+      p.textContent = d.textContent, d.replaceWith(p);
+    }
+    requestAnimationFrame(() => this.#d());
+  }
+  async #o(t, e) {
+    const a = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set();
+    let r = 200, c = 0;
+    for (const h of t) {
+      const f = h.file || `${h.slug}/${h.slug}.html`, u = f.split("/")[0], l = `${e}${f}`, v = `${e}${u}/${u}.css`, d = `${e}${u}/${u}.ts`;
+      if (!a.has(v)) {
+        a.add(v);
+        const A = document.createElement("link");
+        A.rel = "stylesheet", A.href = v, document.head.appendChild(A);
+      }
+      if (!n.has(d)) {
+        n.add(d);
+        try {
+          await import(
+            /* @vite-ignore */
+            d
+          );
+        } catch {
+        }
+      }
+      let p = "";
+      try {
+        const A = await fetch(l);
+        A.ok && (p = await A.text());
+      } catch {
+        continue;
+      }
+      if (!p.trim()) continue;
+      const g = document.createElement("div");
+      g.setAttribute("data-role", "gallery-item"), g.innerHTML = `<h3 style="margin:0 0 1rem;font-family:var(--aui-font-family);font-size:var(--aui-font-lg);font-weight:var(--aui-font-weight-semibold);color:var(--aui-ink-muted);">${h.name || k(h.slug)}</h3>${p}`, this.#t.appendChild(g), await new Promise((A) => requestAnimationFrame(A));
+      const E = g.offsetHeight, b = g.offsetWidth;
+      g.style.position = "absolute", g.style.left = "0px", g.style.top = `${r}px`, b > c && (c = b), r += E + 96;
+    }
+    this.#t.style.width = `${c}px`, this.#t.style.height = `${r}px`, requestAnimationFrame(() => this.#d());
+  }
+  #d() {
+    const t = this.#n, e = this.#n.clientWidth, i = this.#t.offsetWidth, s = (e - i) / 2;
+    t.panTo?.(s, 0);
+  }
+}
+et();
+o("aui-button", ut);
+o("aui-input", dt);
+o("aui-checkbox", ht);
+o("aui-switch", ct);
+o("aui-radio", mt);
+o("aui-radio-group", ft);
+o("aui-textarea", pt);
+o("aui-container", bt);
+o("aui-dialog", gt);
+o("aui-drawer", vt);
+o("aui-icon", yt);
+o("aui-tooltip", At);
+o("aui-range", wt);
+o("aui-input-otp", xt);
+o("aui-gripper", Et);
+o("aui-option", Ct);
+o("aui-optgroup", kt);
+o("aui-select", St);
+o("aui-toast", Pt);
+o("aui-tabs", $t);
+o("aui-tab", Lt);
+o("aui-tab-panel", Mt);
+o("aui-accordion", Dt);
+o("aui-accordion-item", Tt);
+o("aui-breadcrumb", It);
+o("aui-breadcrumb-item", Nt);
+o("aui-segmented-control", Yt);
+o("aui-segment", qt);
+o("aui-pagination", Rt);
+o("aui-command", zt);
+o("aui-command-input", Ft);
+o("aui-command-list", Gt);
+o("aui-command-item", Ut);
+o("aui-command-group", Ht);
+o("aui-command-empty", Ot);
+o("aui-panes", Wt);
+o("aui-pane", Xt);
+o("aui-table", Kt);
+o("aui-table-head", Bt);
+o("aui-table-body", _t);
+o("aui-table-row", jt);
+o("aui-table-header", Jt);
+o("aui-table-cell", Vt);
+o("aui-table-column", de);
+o("aui-tree", Zt);
+o("aui-tree-item", Qt);
+o("aui-feed", te);
+o("aui-root", ee);
+o("aui-canvas", he);
+o("aui-calendar", fe);
+o("aui-noodles", ve);
+o("aui-agent-feed", K);
+o("aui-agent-thread", B);
+o("aui-agent-message", _);
+o("aui-agent-text", j);
+o("aui-agent-activity", J);
+o("aui-agent-seeds", V);
+o("aui-agent-panel", Z);
+o("aui-agent-input", Q);
+o("aui-agent-prompt", tt);
+o("aui-app-shell", ie);
+o("aui-page", se);
+o("aui-page-main", ae);
+o("aui-page-context", ne);
+o("aui-sidebar", oe);
+o("aui-sidebar-header", re);
+o("aui-sidebar-content", le);
+o("aui-sidebar-footer", ue);
+o("aui-preview-app", Ae);
+o("aui-editor", it);
+o("aui-editor-layer", st);
+o("aui-graph-ui", at);
+o("aui-graph-layer", nt);
+o("aui-graph-node", ot);
+o("aui-graph-noodle", rt);
+o("aui-graph-port", lt);
+const q = /* @__PURE__ */ new WeakMap();
+function Y(m) {
+  if (m instanceof T || q.has(m)) return;
+  const t = m.getAttribute("traits");
+  if (!t) return;
+  const e = W(t), i = X(e, m.localName), s = [];
+  for (const { entry: a } of i) {
+    const n = F(m, a.name, {
+      config: a.config
+    });
+    s.push(n);
+  }
+  q.set(m, s);
+}
+function z(m) {
+  const t = q.get(m);
+  if (t) {
+    for (const e of t) e();
+    q.delete(m);
+  }
+}
+function O() {
+  for (const t of document.querySelectorAll("[traits]"))
+    Y(t);
+  new MutationObserver((t) => {
+    for (const e of t) {
+      if (e.type === "childList") {
+        for (const i of e.addedNodes) {
+          if (i.nodeType !== 1) continue;
+          const s = i;
+          s.hasAttribute("traits") && Y(s);
+          for (const a of s.querySelectorAll("[traits]"))
+            Y(a);
+        }
+        for (const i of e.removedNodes) {
+          if (i.nodeType !== 1) continue;
+          const s = i;
+          z(s);
+          for (const a of s.querySelectorAll("[traits]"))
+            z(a);
+        }
+      }
+      if (e.type === "attributes" && e.attributeName === "traits") {
+        const i = e.target;
+        z(i), i.hasAttribute("traits") && Y(i);
+      }
+    }
+  }).observe(document.body, {
+    childList: !0,
+    subtree: !0,
+    attributes: !0,
+    attributeFilter: ["traits"]
+  });
+}
+document.body ? O() : document.addEventListener("DOMContentLoaded", O, { once: !0 });
+document.addEventListener("click", (m) => {
+  const t = m.target?.closest?.("[popover-trigger]");
+  if (!t) return;
+  const e = t.getAttribute("popover-trigger");
+  if (!e) return;
+  const i = document.getElementById(e);
+  if (!i || !("togglePopover" in i)) return;
+  const s = `--aui-popover-${e}`;
+  t.style.anchorName = s, i.style.positionAnchor = s;
+  try {
+    i.togglePopover();
+  } catch {
+  }
+});
+for (const m of ["pointermove", "pointerdown", "pointerup", "mouseover", "mouseenter", "mouseleave"])
+  document.addEventListener(m, (t) => {
+    t.target?.closest?.("[popover], dialog") && t.stopPropagation();
+  }, !0);
+//# sourceMappingURL=register.js.map