@iyulab/u-widgets 0.4.1

package/dist/u-widgets.js

@@ -0,0 +1,4073 @@
+import { g as me } from "./formdown-BWJ6QGJs.js";
+import { p as Ot, r as Pt } from "./formdown-BWJ6QGJs.js";
+import { i as ve } from "./infer-CNOiD2dS.js";
+import { t as b, n as be } from "./tokens-x1kDxgG8.js";
+import { css as y, LitElement as w, nothing as c, html as o } from "lit";
+import { property as h, customElement as x, state as S } from "lit/decorators.js";
+const ye = /* @__PURE__ */ new Set([
+  "text",
+  "email",
+  "password",
+  "tel",
+  "url",
+  "textarea",
+  "number",
+  "select",
+  "multiselect",
+  "date",
+  "datetime",
+  "time",
+  "toggle",
+  "range",
+  "radio",
+  "checkbox"
+]), ae = 10, we = /* @__PURE__ */ new Set([
+  "stat-group",
+  "table",
+  "list",
+  "steps",
+  "gallery",
+  "chart.bar",
+  "chart.line",
+  "chart.area",
+  "chart.pie",
+  "chart.scatter",
+  "chart.radar",
+  "chart.heatmap",
+  "chart.box",
+  "chart.funnel",
+  "chart.waterfall",
+  "chart.treemap"
+]), xe = /* @__PURE__ */ new Set(["metric", "gauge", "progress", "header", "code", "rating", "video"]);
+function Q(e, t = 0) {
+  const a = [], i = [];
+  if (t > ae)
+    return { valid: !1, errors: ["compose children exceed maximum nesting depth (" + ae + ")"], warnings: i };
+  if (e == null || typeof e != "object")
+    return { valid: !1, errors: ["Spec must be a non-null object"], warnings: i };
+  const r = e;
+  if (typeof r.widget != "string" || r.widget.length === 0)
+    return a.push('Required field "widget" must be a non-empty string'), { valid: !1, errors: a, warnings: i };
+  const n = r.widget;
+  if (r.type !== void 0 && r.type !== "u-widget" && a.push('"type" must be "u-widget" if specified'), r.fields !== void 0 && r.formdown !== void 0 && a.push('"fields" and "formdown" are mutually exclusive'), r.data !== void 0 && (we.has(n) && !Array.isArray(r.data) && a.push(`"${n}" expects "data" to be an array, got ${typeof r.data}`), xe.has(n) && (Array.isArray(r.data) || typeof r.data != "object") && a.push(`"${n}" expects "data" to be an object, got ${Array.isArray(r.data) ? "array" : typeof r.data}`)), n === "compose") {
+    if (!Array.isArray(r.children))
+      a.push('"compose" widget requires a "children" array');
+    else
+      for (let s = 0; s < r.children.length; s++) {
+        const l = r.children[s];
+        if (l == null || typeof l != "object" || typeof l.widget != "string")
+          a.push(`children[${s}] must be an object with a "widget" field`);
+        else {
+          const p = Q(l, t + 1);
+          p.valid || a.push(...p.errors.map((d) => `children[${s}]: ${d}`)), i.push(...p.warnings.map((d) => `children[${s}]: ${d}`));
+        }
+      }
+    if (r.layout !== void 0) {
+      const s = ["stack", "row", "grid"];
+      s.includes(r.layout) || a.push(`"layout" must be one of: ${s.join(", ")}`);
+    }
+  }
+  if (Array.isArray(r.fields))
+    for (let s = 0; s < r.fields.length; s++) {
+      const l = r.fields[s];
+      l == null || typeof l != "object" || typeof l.field != "string" ? a.push(`fields[${s}] must have a "field" string property`) : l.type != null && !ye.has(l.type) && i.push(`fields[${s}].type "${l.type}" is not a recognized field type`);
+    }
+  if (typeof r.formdown == "string" && r.formdown.length > 0 && !r.fields)
+    try {
+      me()(r.formdown);
+    } catch {
+      i.push("formdown string could not be parsed — check syntax");
+    }
+  if (Array.isArray(r.actions))
+    for (let s = 0; s < r.actions.length; s++) {
+      const l = r.actions[s];
+      (l == null || typeof l != "object" || typeof l.label != "string" || typeof l.action != "string") && a.push(`actions[${s}] must have "label" and "action" string properties`);
+    }
+  if (r.mapping && typeof r.mapping == "object" && r.data) {
+    const s = r.mapping, l = $e(r.data);
+    if (l)
+      for (const p of ["x", "y", "label", "value", "color", "size", "axis", "primary", "secondary", "icon", "avatar", "trailing"]) {
+        const d = s[p];
+        if (typeof d == "string" && !l.has(d) && i.push(`mapping.${p} references "${d}" which is not found in data keys [${[...l].join(", ")}]`), Array.isArray(d))
+          for (const g of d)
+            typeof g == "string" && !l.has(g) && i.push(`mapping.${p} references "${g}" which is not found in data keys [${[...l].join(", ")}]`);
+      }
+  }
+  return { valid: a.length === 0, errors: a, warnings: i };
+}
+function $e(e) {
+  if (Array.isArray(e) && e.length > 0 && e[0] && typeof e[0] == "object")
+    return new Set(Object.keys(e[0]));
+  if (e && typeof e == "object" && !Array.isArray(e))
+    return new Set(Object.keys(e));
+}
+function St(e) {
+  return Q(e).valid;
+}
+const ie = ["B", "KB", "MB", "GB", "TB"];
+function _e(e, t, a) {
+  if (e == null) return "";
+  const [i, r] = t?.split(":") ?? [];
+  switch (i) {
+    case "number":
+      return ke(e, a);
+    case "currency":
+      return ze(e, r, a);
+    case "percent":
+      return Se(e, a);
+    case "date":
+      return Ae(e, a);
+    case "datetime":
+      return Ce(e, a);
+    case "bytes":
+      return je(e);
+    default:
+      return String(e);
+  }
+}
+function ke(e, t) {
+  const a = Number(e);
+  return isNaN(a) ? String(e) : new Intl.NumberFormat(t).format(a);
+}
+function ze(e, t, a) {
+  const i = Number(e);
+  if (isNaN(i)) return String(e);
+  try {
+    return new Intl.NumberFormat(a, {
+      style: "currency",
+      currency: t || "USD"
+    }).format(i);
+  } catch {
+    return new Intl.NumberFormat(a, {
+      style: "currency",
+      currency: "USD"
+    }).format(i);
+  }
+}
+function Se(e, t) {
+  const a = Number(e);
+  if (isNaN(a)) return String(e);
+  if (t)
+    try {
+      return new Intl.NumberFormat(t, {
+        style: "percent",
+        maximumFractionDigits: 2
+      }).format(a / 100);
+    } catch {
+    }
+  return a + "%";
+}
+function Ae(e, t) {
+  if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e)) {
+    if (t)
+      try {
+        const a = new Date(e);
+        if (!isNaN(a.getTime()))
+          return new Intl.DateTimeFormat(t, {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit"
+          }).format(a);
+      } catch {
+      }
+    return e.slice(0, 10);
+  }
+  return String(e);
+}
+function Ce(e, t) {
+  if (typeof e == "string" && /^\d{4}-\d{2}-\d{2}/.test(e)) {
+    if (t)
+      try {
+        const a = new Date(e);
+        if (!isNaN(a.getTime()))
+          return new Intl.DateTimeFormat(t, {
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit"
+          }).format(a);
+      } catch {
+      }
+    return e.slice(0, 16).replace("T", " ");
+  }
+  return String(e);
+}
+function je(e) {
+  const t = Number(e);
+  if (isNaN(t)) return String(e);
+  const a = t < 0 ? "-" : "";
+  let i = Math.abs(t), r = 0;
+  for (; i >= 1024 && r < ie.length - 1; )
+    i /= 1024, r++;
+  return a + (r === 0 ? i : i.toFixed(1)) + " " + ie[r];
+}
+const De = [
+  "chart.bar",
+  "chart.line",
+  "chart.area",
+  "chart.pie",
+  "chart.scatter",
+  "chart.radar",
+  "chart.heatmap",
+  "chart.box",
+  "chart.funnel",
+  "chart.waterfall",
+  "chart.treemap",
+  "metric",
+  "stat-group",
+  "gauge",
+  "progress",
+  "table",
+  "list",
+  "form",
+  "confirm",
+  "compose",
+  "markdown",
+  "image",
+  "callout",
+  "kv",
+  "code",
+  "citation",
+  "status",
+  "steps",
+  "rating",
+  "video",
+  "gallery",
+  "actions",
+  "divider",
+  "header"
+];
+function Oe(e) {
+  if (!e) return;
+  const t = e.toLowerCase();
+  let a, i = 1 / 0;
+  for (const n of De) {
+    const s = Pe(t, n);
+    s < i && (i = s, a = n);
+  }
+  const r = Math.min(3, Math.floor(t.length / 2));
+  if (i <= r && i > 0)
+    return a;
+}
+function Pe(e, t) {
+  const a = e.length, i = t.length;
+  if (a === 0) return i;
+  if (i === 0) return a;
+  const r = new Array(i + 1);
+  for (let n = 0; n <= i; n++) r[n] = n;
+  for (let n = 1; n <= a; n++) {
+    let s = n - 1;
+    r[0] = n;
+    for (let l = 1; l <= i; l++) {
+      const p = e[n - 1] === t[l - 1] ? 0 : 1, d = Math.min(
+        r[l] + 1,
+        // deletion
+        r[l - 1] + 1,
+        // insertion
+        s + p
+        // substitution
+      );
+      s = r[l], r[l] = d;
+    }
+  }
+  return r[i];
+}
+const R = {
+  // UI chrome
+  prev: "Prev",
+  next: "Next",
+  searchPlaceholder: "Search...",
+  // ARIA
+  searchTable: "Search table",
+  previousPage: "Previous page",
+  nextPage: "Next page",
+  tablePagination: "Table pagination",
+  dataTable: "Data table",
+  // Validation
+  required: "{label} is required",
+  minLength: "{label} must be at least {min} characters",
+  maxLength: "{label} must be at most {max} characters",
+  minValue: "{label} must be at least {min}",
+  maxValue: "{label} must be at most {max}",
+  invalidEmail: "{label} must be a valid email address",
+  invalidUrl: "{label} must be a valid URL",
+  invalidPattern: "{label} format is invalid"
+}, L = /* @__PURE__ */ new Map();
+function At(e, t) {
+  L.set(e.toLowerCase(), { ...R, ...t });
+}
+function de(e) {
+  if (!e) return R;
+  const t = e.toLowerCase();
+  if (L.has(t)) return L.get(t);
+  const a = t.split("-")[0];
+  return a !== t && L.has(a) ? L.get(a) : R;
+}
+function A(e, t) {
+  return e.replace(
+    /\{(\w+)\}/g,
+    (a, i) => t[i] != null ? String(t[i]) : `{${i}}`
+  );
+}
+function Ct() {
+  return { ...R };
+}
+var Ee = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, pe = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Le(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Ee(t, a, r), r;
+};
+function se(e) {
+  return {
+    value: e.value ?? 0,
+    label: e.label,
+    unit: e.unit,
+    prefix: e.prefix,
+    suffix: e.suffix,
+    change: e.change,
+    trend: e.trend,
+    icon: e.icon,
+    description: e.description
+  };
+}
+let q = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null;
+  }
+  render() {
+    return this.spec?.data ? this.spec.widget === "stat-group" ? this.renderStatGroup() : this.renderMetric(se(this.spec.data)) : c;
+  }
+  renderStatGroup() {
+    const e = this.spec.data;
+    return Array.isArray(e) ? o`
+      <div class="stat-group" part="stat-group">
+        ${e.map((t) => this.renderMetric(se(t)))}
+      </div>
+    ` : c;
+  }
+  renderMetric(e) {
+    const t = e.trend === "up" ? "↑" : e.trend === "down" ? "↓" : e.trend === "flat" ? "→" : "", a = e.label ? `${e.label}: ${e.prefix ?? ""}${e.value}${e.unit ?? ""}${e.suffix ?? ""}` : void 0;
+    return o`
+      <div class="metric" part="metric" aria-label=${a ?? c}>
+        ${e.icon ? o`<div class="metric-icon" part="icon">${e.icon}</div>` : c}
+        ${e.label ? o`<div class="metric-label" part="label">${e.label}</div>` : c}
+        <div class="metric-value" part="value">
+          ${e.prefix ?? ""}${e.value}${e.unit ? o`<span class="metric-unit">${e.unit}</span>` : ""}${e.suffix ?? ""}
+        </div>
+        ${e.change != null ? o`<span class="metric-change" data-trend=${e.trend ?? "flat"} part="change"
+              >${t} ${e.change > 0 ? "+" : ""}${e.change}%</span
+            >` : c}
+        ${e.description ? o`<div class="metric-description" part="description">${e.description}</div>` : c}
+      </div>
+    `;
+  }
+};
+q.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-metric / inline-size;
+    }
+
+    /* ── metric (single) ── */
+    .metric {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .metric-value {
+      font-size: 2rem;
+      font-weight: 700;
+      line-height: 1.1;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    @container u-metric (max-width: 30rem) {
+      .metric-value {
+        font-size: 1.5rem;
+      }
+    }
+
+    .metric-unit {
+      font-size: 0.875rem;
+      font-weight: 400;
+      color: var(--u-widget-text-secondary, #64748b);
+      margin-left: 4px;
+    }
+
+    .metric-change {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+    }
+
+    .metric-change[data-trend='up'] {
+      color: var(--u-widget-positive, #16a34a);
+    }
+
+    .metric-change[data-trend='down'] {
+      color: var(--u-widget-negative, #dc2626);
+    }
+
+    .metric-change[data-trend='flat'] {
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .metric-label {
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+      font-weight: 500;
+    }
+
+    .metric-icon { font-size: 1.25rem; line-height: 1; margin-bottom: 2px; }
+    .metric-description { font-size: 0.75rem; color: var(--u-widget-text-secondary, #64748b); margin-top: 2px; line-height: 1.3; }
+
+    /* ── stat-group ── */
+    .stat-group {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 1.5rem;
+    }
+
+    .stat-group .metric {
+      flex: 1;
+      min-width: 100px;
+    }
+
+    .stat-group .metric + .metric {
+      border-left: 1px solid var(--u-widget-border, #e2e8f0);
+      padding-left: 1.5rem;
+    }
+
+    @container u-metric (max-width: 30rem) {
+      .stat-group {
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .stat-group .metric {
+        flex: none;
+        min-width: 0;
+      }
+
+      .stat-group .metric + .metric {
+        border-left: none;
+        padding-left: 0;
+        border-top: 1px solid var(--u-widget-border, #e2e8f0);
+        padding-top: 1rem;
+      }
+    }
+  `];
+pe([
+  h({ type: Object })
+], q.prototype, "spec", 2);
+q = pe([
+  x("u-metric")
+], q);
+var Ie = Object.defineProperty, Ne = Object.getOwnPropertyDescriptor, ue = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ne(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Ie(t, a, r), r;
+};
+const Te = {
+  min: 0,
+  max: 100,
+  unit: "",
+  thresholds: []
+}, Fe = {
+  green: "#16a34a",
+  yellow: "#eab308",
+  orange: "#f97316",
+  red: "#dc2626",
+  blue: "#2563eb",
+  gray: "#6b7280"
+};
+function ne(e) {
+  return Fe[e] ?? e;
+}
+function oe(e, t, a, i, r) {
+  const n = (i - 90) * Math.PI / 180, s = (r - 90) * Math.PI / 180, l = e + a * Math.cos(n), p = t + a * Math.sin(n), d = e + a * Math.cos(s), g = t + a * Math.sin(s), f = r - i > 180 ? 1 : 0;
+  return `M ${l} ${p} A ${a} ${a} 0 ${f} 1 ${d} ${g}`;
+}
+let B = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null;
+  }
+  render() {
+    return this.spec?.data ? this.spec.widget === "progress" ? this.renderProgress() : this.renderGauge() : c;
+  }
+  getOptions() {
+    const e = this.spec.options ?? {};
+    return { ...Te, ...e };
+  }
+  getValue() {
+    const e = this.spec.data;
+    return Number(e.value ?? 0);
+  }
+  renderGauge() {
+    const e = this.getOptions(), t = this.getValue(), a = e.max - e.min, i = a > 0 ? Math.max(0, Math.min(1, (t - e.min) / a)) : 0, r = this.getThresholdColor(t, e), n = 100, s = 100, l = 80, p = 150, d = 240, g = p + d * i, f = oe(n, s, l, p, p + d), u = i > 0 ? oe(n, s, l, p, g) : null, m = typeof this.spec.title == "string" ? this.spec.title : "Gauge", v = `${t}${e.unit}`;
+    return o`
+      <div class="gauge-container" part="gauge"
+        role="meter"
+        aria-valuenow=${t}
+        aria-valuemin=${e.min}
+        aria-valuemax=${e.max}
+        aria-label=${m}
+        aria-valuetext=${v}
+      >
+        <div class="gauge-wrapper">
+          <div class="gauge-center">
+            <div class="gauge-value" part="value">${t}</div>
+            ${e.unit ? o`<div class="gauge-unit" part="unit">${e.unit}</div>` : c}
+          </div>
+          <svg class="gauge-svg" viewBox="0 0 200 195" role="presentation" aria-hidden="true">
+            <path class="gauge-track" d="${f}" fill="none" stroke-width="12" stroke-linecap="round"></path>
+            <path class="gauge-fill" d="${u ?? "M0 0"}" fill="none" stroke="${u ? r : "none"}" stroke-width="12" stroke-linecap="round"></path>
+          </svg>
+        </div>
+      </div>
+    `;
+  }
+  renderProgress() {
+    const e = this.spec.data, t = Number(e.value ?? 0), a = Number(e.max ?? this.spec.options?.max ?? 100), i = a > 0 ? Math.max(0, Math.min(100, t / a * 100)) : 0, r = this.getOptions(), n = this.getThresholdColor(t, r), s = this.formatLabel(t, i), l = typeof this.spec.title == "string" ? this.spec.title : "Progress";
+    return o`
+      <div class="progress-container" part="progress"
+        role="progressbar"
+        aria-valuenow=${t}
+        aria-valuemin=${0}
+        aria-valuemax=${a}
+        aria-label=${l}
+      >
+        <div class="progress-bar-track">
+          <div
+            class="progress-bar-fill"
+            style="width:${i}%; background:${n || "var(--u-widget-primary, #4f46e5)"}"
+            part="progress-fill"
+          ></div>
+        </div>
+        <div class="progress-info">
+          <span>${s}</span>
+          <span>${Math.round(i)}%</span>
+        </div>
+      </div>
+    `;
+  }
+  formatLabel(e, t) {
+    const a = this.spec.options;
+    return a?.label ? String(a.label).replace("{value}", String(e)).replace("{percent}", String(Math.round(t))) : String(e);
+  }
+  getThresholdColor(e, t) {
+    if (!t.thresholds?.length) return "var(--u-widget-primary, #4f46e5)";
+    const a = [...t.thresholds].sort((i, r) => i.to - r.to);
+    for (const i of a)
+      if (e <= i.to) return ne(i.color);
+    return ne(a[a.length - 1].color);
+  }
+};
+B.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-gauge / inline-size;
+    }
+
+    .gauge-container {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .gauge-wrapper {
+      position: relative;
+      width: 100%;
+      max-width: var(--u-widget-gauge-size, 160px);
+    }
+
+    .gauge-svg {
+      display: block;
+      width: 100%;
+    }
+
+    .gauge-track {
+      stroke: var(--u-widget-border, #e2e8f0);
+    }
+
+    .gauge-center {
+      position: absolute;
+      /* Arc center (100,100) in viewBox 200×195 → 50% x, 51.3% y */
+      top: 51.3%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      text-align: center;
+    }
+
+    .gauge-value {
+      font-size: 1.75rem;
+      font-weight: 700;
+      line-height: 1.2;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .gauge-unit {
+      font-size: 0.75rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    /* ── progress bar ── */
+    .progress-container {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .progress-bar-track {
+      width: 100%;
+      height: 8px;
+      background: var(--u-widget-border, #e2e8f0);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+
+    .progress-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    @container u-gauge (max-width: 10rem) {
+      .gauge-value {
+        font-size: 1.25rem;
+      }
+
+      .gauge-unit {
+        font-size: 0.625rem;
+      }
+
+      .progress-info {
+        font-size: 0.75rem;
+      }
+
+      .progress-bar-track {
+        height: 6px;
+      }
+    }
+  `];
+ue([
+  h({ type: Object })
+], B.prototype, "spec", 2);
+B = ue([
+  x("u-gauge")
+], B);
+var Me = Object.defineProperty, Ue = Object.getOwnPropertyDescriptor, C = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ue(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Me(t, a, r), r;
+};
+let z = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this._sortField = null, this._sortDir = null, this._page = 0, this._searchQuery = "", this._focusedIdx = 0, this._onTableKeydown = (e) => {
+      const a = e.target.closest("tr");
+      if (!a) return;
+      const i = a.parentElement;
+      if (!i) return;
+      const r = Array.from(i.querySelectorAll("tr")), n = r.indexOf(a);
+      let s = -1;
+      switch (e.key) {
+        case "ArrowDown":
+          s = Math.min(n + 1, r.length - 1);
+          break;
+        case "ArrowUp":
+          s = Math.max(n - 1, 0);
+          break;
+        case "Home":
+          s = 0;
+          break;
+        case "End":
+          s = r.length - 1;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault(), s !== n && s >= 0 && (this._focusedIdx = s, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll("tbody tr")?.[s]?.focus();
+      }));
+    }, this._onListKeydown = (e) => {
+      const a = e.target.closest(".list-item");
+      if (!a) return;
+      const i = a.parentElement;
+      if (!i) return;
+      const r = Array.from(i.querySelectorAll(".list-item")), n = r.indexOf(a);
+      let s = -1;
+      switch (e.key) {
+        case "ArrowDown":
+          s = Math.min(n + 1, r.length - 1);
+          break;
+        case "ArrowUp":
+          s = Math.max(n - 1, 0);
+          break;
+        case "Home":
+          s = 0;
+          break;
+        case "End":
+          s = r.length - 1;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault(), s !== n && s >= 0 && (this._focusedIdx = s, this.updateComplete.then(() => {
+        this.shadowRoot?.querySelectorAll(".list-item")?.[s]?.focus();
+      }));
+    }, this._onSearch = (e) => {
+      this._searchQuery = e.target.value, this._page = 0;
+    };
+  }
+  willUpdate(e) {
+    e.has("spec") && (this._sortField = null, this._sortDir = null, this._page = 0, this._searchQuery = "", this._focusedIdx = 0);
+  }
+  render() {
+    return !this.spec?.data || !Array.isArray(this.spec.data) ? c : this.spec.widget === "list" ? this.renderList() : this.renderTable();
+  }
+  get _locale() {
+    const e = this.spec?.options?.locale;
+    return de(typeof e == "string" ? e : void 0);
+  }
+  renderTable() {
+    const e = this.spec.data, t = this.getColumns(e), a = this._locale, i = this.spec.options?.sortable !== !1, r = !!this.spec.options?.searchable, n = !!this.spec.options?.compact, s = Number(this.spec.options?.pageSize) || 0, l = this._searchQuery ? this.filterData(e, t) : e, p = this._sortField && this._sortDir ? this.sortData(l) : l, d = s > 0 ? Math.max(1, Math.ceil(p.length / s)) : 1, g = Math.min(this._page, d - 1), f = s > 0 ? p.slice(g * s, (g + 1) * s) : p, u = r ? o`
+      <div class="search-box" part="search">
+        <input
+          class="search-input"
+          type="text"
+          placeholder=${a.searchPlaceholder}
+          aria-label=${a.searchTable}
+          .value=${this._searchQuery}
+          @input=${this._onSearch}
+        />
+      </div>
+    ` : c, m = s > 0 && d > 1 ? o`
+      <nav class="pagination" part="pagination" aria-label=${a.tablePagination}>
+        <button aria-label=${a.previousPage} ?disabled=${g === 0} @click=${() => this._onPageChange(g - 1)}>${a.prev}</button>
+        <span aria-live="polite">${g + 1} / ${d}</span>
+        <button aria-label=${a.nextPage} ?disabled=${g >= d - 1} @click=${() => this._onPageChange(g + 1)}>${a.next}</button>
+      </nav>
+    ` : c;
+    return o`<div class="table-container${n ? " compact" : ""}">
+      ${u}
+      <div class="table-wrapper" part="table">
+        <table aria-label=${this.spec.title ?? a.dataTable}>
+          <thead>
+            <tr>
+              ${t.map(
+      (v) => o`<th
+                  scope="col"
+                  data-align=${v.align ?? "left"}
+                  ?data-sortable=${i}
+                  tabindex=${i ? "0" : c}
+                  @click=${i ? () => this._onSort(v.field) : void 0}
+                  @keydown=${i ? ($) => {
+        ($.key === "Enter" || $.key === " ") && ($.preventDefault(), this._onSort(v.field));
+      } : void 0}
+                  aria-sort=${this._sortField === v.field && this._sortDir ? this._sortDir === "asc" ? "ascending" : "descending" : "none"}
+                  part="th"
+                >${v.label ?? v.field}${this._sortField === v.field && this._sortDir ? o`<span class="sort-arrow">${this._sortDir === "asc" ? "▲" : "▼"}</span>` : c}</th>`
+    )}
+            </tr>
+          </thead>
+          <tbody @keydown=${this._onTableKeydown}>
+            ${f.map(
+      (v, $) => o`
+                <tr part="tr"
+                  tabindex=${$ === this._focusedIdx ? "0" : "-1"}
+                  @click=${() => this._onRowClick(v, s > 0 ? g * s + $ : $)}
+                  @keydown=${(_) => {
+        (_.key === "Enter" || _.key === " ") && (_.preventDefault(), this._onRowClick(v, s > 0 ? g * s + $ : $));
+      }}
+                >
+                  ${t.map(
+        (_) => o`<td data-align=${_.align ?? "left"} part="td"
+                        >${_e(v[_.field], _.format, typeof this.spec.options?.locale == "string" ? this.spec.options.locale : void 0)}</td
+                      >`
+      )}
+                </tr>
+              `
+    )}
+          </tbody>
+        </table>
+      </div>
+      ${m}
+    </div>`;
+  }
+  _onPageChange(e) {
+    this._page = e, this._focusedIdx = 0, this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector('tbody tr[tabindex="0"]')?.focus();
+    });
+  }
+  filterData(e, t) {
+    const a = this._searchQuery.toLowerCase(), i = t.map((r) => r.field);
+    return e.filter(
+      (r) => i.some((n) => String(r[n] ?? "").toLowerCase().includes(a))
+    );
+  }
+  _onSort(e) {
+    this._sortField === e ? this._sortDir === "asc" ? this._sortDir = "desc" : (this._sortField = null, this._sortDir = null) : (this._sortField = e, this._sortDir = "asc");
+  }
+  sortData(e) {
+    const t = this._sortField, a = this._sortDir;
+    return [...e].sort((i, r) => {
+      const n = i[t], s = r[t];
+      if (n == null && s == null) return 0;
+      if (n == null) return 1;
+      if (s == null) return -1;
+      let l;
+      if (typeof n == "number" && typeof s == "number")
+        l = n - s;
+      else {
+        const p = Number(n), d = Number(s);
+        l = String(n) !== "" && String(s) !== "" && !isNaN(p) && !isNaN(d) ? p - d : String(n).localeCompare(String(s));
+      }
+      return a === "asc" ? l : -l;
+    });
+  }
+  renderList() {
+    const e = this.spec.data, t = this.spec.mapping, a = !!this.spec.options?.compact, i = t?.primary ?? this.inferPrimaryKey(e), r = t?.secondary, n = t?.icon, s = t?.avatar, l = t?.trailing, p = t?.badge;
+    return o`
+      <div class="list-container${a ? " compact" : ""}" part="list" @keydown=${this._onListKeydown}>
+        ${e.map(
+      (d, g) => o`
+            <div class="list-item" part="list-item"
+              tabindex=${g === this._focusedIdx ? "0" : "-1"}
+              @click=${() => this._onRowClick(d, g)}
+              @keydown=${(f) => {
+        (f.key === "Enter" || f.key === " ") && (f.preventDefault(), this._onRowClick(d, g));
+      }}
+            >
+              ${s && d[s] ? o`<img class="list-avatar" src=${String(d[s])} alt="" part="avatar" />` : n ? o`<div class="list-icon" part="icon">${this.getIconLetter(d[n])}</div>` : c}
+              <div class="list-content">
+                <div class="list-primary" part="primary">${d[i] ?? ""}</div>
+                ${r ? o`<div class="list-secondary" part="secondary">${d[r] ?? ""}</div>` : c}
+              </div>
+              ${p && d[p] != null ? o`<span class="list-badge" part="badge">${d[p]}</span>` : c}
+              ${l && d[l] != null ? o`<div class="list-trailing" part="trailing">${d[l]}</div>` : c}
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+  _onRowClick(e, t) {
+    if (!this.spec) return;
+    const a = {
+      type: "select",
+      widget: this.spec.widget,
+      id: this.spec.id,
+      data: { ...e, _index: t }
+    };
+    this.dispatchEvent(
+      new CustomEvent("u-widget-internal", {
+        detail: a,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  getColumns(e) {
+    return this.spec.mapping?.columns ? this.spec.mapping.columns : e.length === 0 ? [] : Object.keys(e[0]).map((t) => ({ field: t }));
+  }
+  inferPrimaryKey(e) {
+    if (e.length === 0) return "";
+    const t = Object.keys(e[0]), a = ["name", "title", "label", "id", "key"];
+    for (const n of a)
+      if (t.includes(n)) return n;
+    const i = e[0];
+    return t.find((n) => typeof i[n] == "string") ?? t[0] ?? "";
+  }
+  getIconLetter(e) {
+    return String(e ?? "").charAt(0).toUpperCase();
+  }
+};
+z.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-table / inline-size;
+    }
+
+    /* ── table ── */
+    .table-wrapper {
+      overflow-x: auto;
+      scrollbar-width: thin;
+      scrollbar-color: var(--u-widget-border, #e2e8f0) transparent;
+    }
+    .table-wrapper::-webkit-scrollbar { height: 4px; }
+    .table-wrapper::-webkit-scrollbar-thumb {
+      background: var(--u-widget-border, #e2e8f0);
+      border-radius: 2px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+    }
+
+    th {
+      text-align: left;
+      font-weight: 600;
+      color: var(--u-widget-text-secondary, #64748b);
+      padding: 8px 12px;
+      border-bottom: 2px solid var(--u-widget-border, #e2e8f0);
+      white-space: nowrap;
+      font-size: 0.8125rem;
+      text-transform: uppercase;
+      letter-spacing: 0.025em;
+    }
+
+    th[data-sortable] {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    th[data-sortable]:hover,
+    th[data-sortable]:focus-visible {
+      color: var(--u-widget-text, #1a1a2e);
+      outline: 2px solid var(--u-widget-primary, #4f46e5);
+      outline-offset: -2px;
+    }
+
+    .sort-arrow {
+      margin-left: 4px;
+      font-size: 0.6875rem;
+    }
+
+    td {
+      padding: 8px 12px;
+      border-bottom: 1px solid var(--u-widget-border, #e2e8f0);
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    tbody tr {
+      cursor: pointer;
+      outline: none;
+    }
+
+    tbody tr:hover td {
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    tbody tr:focus td {
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    tbody tr:focus {
+      box-shadow: inset 3px 0 0 var(--u-widget-primary, #4f46e5);
+    }
+
+    tr:last-child td {
+      border-bottom: none;
+    }
+
+    th[data-align='center'],
+    td[data-align='center'] {
+      text-align: center;
+    }
+
+    th[data-align='right'],
+    td[data-align='right'] {
+      text-align: right;
+    }
+
+    /* ── list ── */
+    .list-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .list-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0 10px 8px;
+      border-bottom: 1px solid var(--u-widget-border, #e2e8f0);
+      cursor: pointer;
+      outline: none;
+    }
+
+    .list-item:hover {
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    .list-item:focus {
+      background: var(--u-widget-surface, #f1f5f9);
+      box-shadow: inset 3px 0 0 var(--u-widget-primary, #4f46e5);
+    }
+
+    .list-item:last-child {
+      border-bottom: none;
+    }
+
+    .list-icon {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--u-widget-surface, #f1f5f9);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .list-avatar {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .list-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .list-primary {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .list-secondary {
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+      margin-top: 2px;
+    }
+
+    .list-trailing {
+      flex-shrink: 0;
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .list-badge {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 0.6875rem;
+      font-weight: 500;
+      background: var(--u-widget-surface, #f1f5f9);
+      color: var(--u-widget-text-secondary, #64748b);
+      white-space: nowrap;
+    }
+
+    /* ── search ── */
+    .search-box {
+      margin-bottom: 8px;
+    }
+
+    .search-input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 6px 10px;
+      font-size: 0.8125rem;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      border-radius: 4px;
+      outline: none;
+      font-family: inherit;
+      color: var(--u-widget-text, #1a1a2e);
+      background: var(--u-widget-bg, #fff);
+    }
+
+    .search-input:focus {
+      border-color: var(--u-widget-primary, #4f46e5);
+    }
+
+    /* ── pagination ── */
+    .pagination {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 8px;
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .pagination button {
+      padding: 4px 10px;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      border-radius: 4px;
+      background: var(--u-widget-bg, #fff);
+      color: var(--u-widget-text, #1a1a2e);
+      cursor: pointer;
+      font-size: 0.75rem;
+      font-family: inherit;
+    }
+
+    .pagination button:hover:not(:disabled) {
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    .pagination button:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    /* ── compact ── */
+    .compact table {
+      font-size: 0.75rem;
+    }
+
+    .compact th {
+      padding: 4px 8px;
+      font-size: 0.6875rem;
+    }
+
+    .compact td {
+      padding: 4px 8px;
+    }
+
+    .compact .list-item {
+      padding: 6px 0 6px 8px;
+      gap: 8px;
+    }
+
+    .compact .list-icon {
+      width: 24px;
+      height: 24px;
+      font-size: 0.625rem;
+    }
+
+    .compact .list-avatar {
+      width: 24px;
+      height: 24px;
+    }
+
+    .compact .list-primary {
+      font-size: 0.75rem;
+    }
+
+    .compact .list-secondary {
+      font-size: 0.6875rem;
+    }
+
+    .compact .list-trailing {
+      font-size: 0.6875rem;
+    }
+
+    /* ── container-query responsive ── */
+    @container u-table (max-width: 30rem) {
+      table {
+        font-size: 0.75rem;
+      }
+
+      th {
+        padding: 4px 8px;
+        font-size: 0.6875rem;
+      }
+
+      td {
+        padding: 4px 8px;
+      }
+
+      .list-item {
+        padding: 6px 0 6px 8px;
+        gap: 8px;
+      }
+
+      .list-icon,
+      .list-avatar {
+        width: 24px;
+        height: 24px;
+      }
+
+      .list-primary {
+        font-size: 0.75rem;
+      }
+
+      .list-secondary,
+      .list-trailing {
+        font-size: 0.6875rem;
+      }
+    }
+  `];
+C([
+  h({ type: Object })
+], z.prototype, "spec", 2);
+C([
+  S()
+], z.prototype, "_sortField", 2);
+C([
+  S()
+], z.prototype, "_sortDir", 2);
+C([
+  S()
+], z.prototype, "_page", 2);
+C([
+  S()
+], z.prototype, "_searchQuery", 2);
+C([
+  S()
+], z.prototype, "_focusedIdx", 2);
+z = C([
+  x("u-table")
+], z);
+var Re = Object.defineProperty, qe = Object.getOwnPropertyDescriptor, K = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? qe(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Re(t, a, r), r;
+};
+let D = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this._formData = {}, this._errors = {}, this._onFormSubmit = (e) => {
+      e.preventDefault();
+      const t = (this.spec?.actions ?? []).find((a) => a.action === "submit");
+      t ? this._onAction(t) : this._validate() && this._emitEvent({
+        type: "submit",
+        widget: this.spec.widget,
+        id: this.spec.id,
+        data: { ...this._formData }
+      });
+    }, this._onConfirmKeydown = (e) => {
+      if (e.key === "Escape") {
+        const t = (this.spec?.actions ?? []).find((a) => a.action === "cancel");
+        t && this._onAction(t);
+      }
+    };
+  }
+  willUpdate(e) {
+    e.has("spec") && this.spec && (this._formData = { ...this.spec.data ?? {} }, this._errors = {});
+  }
+  render() {
+    return this.spec ? this.spec.widget === "confirm" ? this.renderConfirm() : this.renderForm() : c;
+  }
+  renderForm() {
+    const e = this.spec.fields ?? [], t = this.spec.actions ?? [];
+    return o`
+      <form class="form-container" part="form" @submit=${this._onFormSubmit}>
+        ${e.map((a) => this.renderField(a))}
+        ${t.length > 0 ? this.renderActions(t) : c}
+      </form>
+    `;
+  }
+  renderConfirm() {
+    const e = this.spec.description, t = this.spec.actions ?? [];
+    return o`
+      <div class="confirm-container" part="confirm" @keydown=${this._onConfirmKeydown}>
+        ${e ? o`<div class="confirm-description" part="description">${e}</div>` : c}
+        ${t.length > 0 ? this.renderActions(t) : c}
+      </div>
+    `;
+  }
+  renderField(e) {
+    const t = this._formData[e.field], a = e.type ?? "text", i = this._errors[e.field], r = `err-${e.field}`;
+    return o`
+      <div class="field" part="field">
+        ${e.label ? o`<label class="field-label" for=${`input-${e.field}`} part="label"
+              >${e.label}${e.required ? o`<span class="required">*</span>` : c}</label
+            >` : c}
+        ${this.renderInput(e, a, t, i ? r : void 0)}
+        ${i ? o`<div class="field-error" id=${r} role="alert" part="field-error">${i}</div>` : c}
+      </div>
+    `;
+  }
+  renderInput(e, t, a, i) {
+    const r = !!this._errors[e.field];
+    switch (t) {
+      case "textarea":
+        return o`<textarea
+          id=${`input-${e.field}`}
+          class=${r ? "invalid" : ""}
+          .value=${String(a ?? "")}
+          placeholder=${e.placeholder ?? ""}
+          rows=${e.rows ?? 3}
+          ?required=${e.required}
+          minlength=${e.minLength ?? ""}
+          maxlength=${e.maxLength ?? ""}
+          aria-invalid=${r ? "true" : "false"}
+          aria-describedby=${i ?? c}
+          ?aria-required=${e.required}
+          @input=${(n) => this._onChange(e.field, n.target.value)}
+          part="input"
+        ></textarea>`;
+      case "select":
+        return o`<select
+          id=${`input-${e.field}`}
+          class=${r ? "invalid" : ""}
+          .value=${String(a ?? "")}
+          ?required=${e.required}
+          aria-invalid=${r ? "true" : "false"}
+          aria-describedby=${i ?? c}
+          @change=${(n) => this._onChange(e.field, n.target.value)}
+          part="input"
+        >
+          <option value="">--</option>
+          ${(e.options ?? []).map(
+          (n) => o`<option value=${n}>${n}</option>`
+        )}
+        </select>`;
+      case "multiselect":
+        return o`<div class="multiselect-group" part="multiselect-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${r ? "true" : "false"} aria-describedby=${i ?? c}>
+          ${(e.options ?? []).map(
+          (n) => o`
+              <label>
+                <input
+                  type="checkbox"
+                  value=${n}
+                  ?checked=${Array.isArray(a) && a.includes(n)}
+                  @change=${(s) => {
+            const l = s.target.checked, p = Array.isArray(a) ? [...a] : [];
+            this._onChange(
+              e.field,
+              l ? [...p, n] : p.filter((d) => d !== n)
+            );
+          }}
+                />
+                ${n}
+              </label>
+            `
+        )}
+        </div>`;
+      case "toggle":
+        return o`<div class="toggle-wrapper">
+          <div
+            class="toggle-track"
+            data-on=${!!a}
+            role="switch"
+            aria-checked=${!!a}
+            aria-label=${e.label ?? e.field}
+            tabindex="0"
+            @click=${() => this._onChange(e.field, !a)}
+            @keydown=${(n) => {
+          (n.key === " " || n.key === "Enter") && (n.preventDefault(), this._onChange(e.field, !a));
+        }}
+            part="toggle"
+          >
+            <div class="toggle-thumb"></div>
+          </div>
+        </div>`;
+      case "radio":
+        return o`<div class="radio-group" part="radio-group" role="radiogroup" aria-label=${e.label ?? e.field} aria-invalid=${r ? "true" : "false"} aria-describedby=${i ?? c}>
+          ${(e.options ?? []).map(
+          (n) => o`
+              <label>
+                <input
+                  type="radio"
+                  name=${e.field}
+                  value=${n}
+                  ?checked=${a === n}
+                  @change=${() => this._onChange(e.field, n)}
+                />
+                ${n}
+              </label>
+            `
+        )}
+        </div>`;
+      case "checkbox":
+        return o`<div class="checkbox-group" part="checkbox-group" role="group" aria-label=${e.label ?? e.field} aria-invalid=${r ? "true" : "false"} aria-describedby=${i ?? c}>
+          ${(e.options ?? []).map(
+          (n) => o`
+              <label>
+                <input
+                  type="checkbox"
+                  value=${n}
+                  ?checked=${Array.isArray(a) && a.includes(n)}
+                  @change=${(s) => {
+            const l = s.target.checked, p = Array.isArray(a) ? [...a] : [];
+            this._onChange(
+              e.field,
+              l ? [...p, n] : p.filter((d) => d !== n)
+            );
+          }}
+                />
+                ${n}
+              </label>
+            `
+        )}
+        </div>`;
+      default:
+        return o`<input
+          type=${t === "datetime" ? "datetime-local" : t}
+          id=${`input-${e.field}`}
+          class=${r ? "invalid" : ""}
+          .value=${String(a ?? "")}
+          placeholder=${e.placeholder ?? ""}
+          ?required=${e.required}
+          aria-invalid=${r ? "true" : "false"}
+          aria-describedby=${i ?? c}
+          ?aria-required=${e.required}
+          min=${e.min ?? ""}
+          max=${e.max ?? ""}
+          step=${e.step ?? ""}
+          minlength=${e.minLength ?? ""}
+          maxlength=${e.maxLength ?? ""}
+          pattern=${e.pattern ?? ""}
+          @input=${(s) => {
+          const l = s.target.value, p = (t === "number" || t === "range") && l !== "" ? Number(l) : l;
+          this._onChange(e.field, p);
+        }}
+          part="input"
+        />`;
+    }
+  }
+  renderActions(e) {
+    return o`
+      <div class="actions" part="actions">
+        ${e.map(
+      (t) => o`
+            <button
+              type=${t.action === "submit" ? "submit" : "button"}
+              data-style=${t.style ?? "default"}
+              ?disabled=${t.disabled}
+              @click=${(a) => {
+        t.action === "submit" && a.preventDefault(), this._onAction(t);
+      }}
+              part="action-btn"
+            >
+              ${t.label}
+            </button>
+          `
+    )}
+      </div>
+    `;
+  }
+  _onChange(e, t) {
+    if (this._formData = { ...this._formData, [e]: t }, this._errors[e]) {
+      const a = { ...this._errors };
+      delete a[e], this._errors = a;
+    }
+    this._emitEvent({
+      type: "change",
+      widget: this.spec.widget,
+      id: this.spec.id,
+      data: { field: e, value: t }
+    });
+  }
+  get _locale() {
+    const e = this.spec?.options?.locale;
+    return de(typeof e == "string" ? e : void 0);
+  }
+  _validate() {
+    const e = this.spec?.fields ?? [], t = {}, a = this._locale;
+    for (const i of e) {
+      const r = this._formData[i.field], n = i.label ?? i.field;
+      if (i.required && (r == null || r === "" || Array.isArray(r) && r.length === 0)) {
+        t[i.field] = i.message ?? A(a.required, { label: n });
+        continue;
+      }
+      if (!(r == null || r === "")) {
+        if (i.maxLength != null && typeof r == "string" && r.length > i.maxLength && (t[i.field] = i.message ?? A(a.maxLength, { label: n, max: i.maxLength })), i.min != null && typeof r == "number" && r < Number(i.min) && (t[i.field] = i.message ?? A(a.minValue, { label: n, min: i.min })), i.max != null && typeof r == "number" && r > Number(i.max) && (t[i.field] = i.message ?? A(a.maxValue, { label: n, max: i.max })), i.minLength != null && typeof r == "string" && r.length < i.minLength) {
+          t[i.field] = i.message ?? A(a.minLength, { label: n, min: i.minLength });
+          continue;
+        }
+        if (i.type === "email" && typeof r == "string" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r)) {
+          t[i.field] = i.message ?? A(a.invalidEmail, { label: n });
+          continue;
+        }
+        if (i.type === "url" && typeof r == "string" && !/^https?:\/\/.+/.test(r)) {
+          t[i.field] = i.message ?? A(a.invalidUrl, { label: n });
+          continue;
+        }
+        if (i.pattern && typeof r == "string")
+          try {
+            new RegExp(i.pattern).test(r) || (t[i.field] = i.message ?? A(a.invalidPattern, { label: n }));
+          } catch {
+          }
+      }
+    }
+    return this._errors = t, Object.keys(t).length === 0;
+  }
+  _onAction(e) {
+    if (e.action === "submit") {
+      if (!this._validate()) return;
+      this._emitEvent({
+        type: "submit",
+        widget: this.spec.widget,
+        id: this.spec.id,
+        data: { ...this._formData }
+      });
+    } else e.action === "cancel" ? this._emitEvent({
+      type: "action",
+      widget: this.spec.widget,
+      id: this.spec.id,
+      action: "cancel"
+    }) : this._emitEvent({
+      type: "action",
+      widget: this.spec.widget,
+      id: this.spec.id,
+      action: e.action,
+      data: { ...this._formData }
+    });
+  }
+  _emitEvent(e) {
+    this.dispatchEvent(
+      new CustomEvent("u-widget-internal", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+D.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-form / inline-size;
+    }
+
+    .form-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .field-label {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .field-label .required {
+      color: var(--u-widget-negative, #dc2626);
+      margin-left: 2px;
+    }
+
+    input,
+    textarea,
+    select {
+      padding: 8px 12px;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-family: inherit;
+      color: var(--u-widget-text, #1a1a2e);
+      background: var(--u-widget-bg, #fff);
+      outline: none;
+      transition: border-color 0.15s;
+    }
+
+    input:focus,
+    textarea:focus,
+    select:focus {
+      border-color: var(--u-widget-primary, #4f46e5);
+      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+    }
+
+    textarea {
+      resize: vertical;
+    }
+
+    .toggle-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .toggle-track {
+      width: 44px;
+      height: 24px;
+      border-radius: 12px;
+      background: var(--u-widget-border, #e2e8f0);
+      cursor: pointer;
+      position: relative;
+      transition: background 0.2s;
+    }
+
+    .toggle-track[data-on='true'] {
+      background: var(--u-widget-primary, #4f46e5);
+    }
+
+    .toggle-thumb {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: white;
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      transition: transform 0.2s;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    }
+
+    .toggle-track[data-on='true'] .toggle-thumb {
+      transform: translateX(20px);
+    }
+
+    .checkbox-group,
+    .radio-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .multiselect-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      border-radius: 6px;
+      padding: 8px;
+      max-height: 180px;
+      overflow-y: auto;
+    }
+
+    .checkbox-group label,
+    .radio-group label,
+    .multiselect-group label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 0.875rem;
+      cursor: pointer;
+    }
+
+    .actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+      padding-top: 8px;
+    }
+
+    button {
+      padding: 8px 20px;
+      border-radius: 6px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      background: var(--u-widget-bg, #fff);
+      color: var(--u-widget-text, #1a1a2e);
+      transition: all 0.15s;
+    }
+
+    button:hover {
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    button[data-style='primary'] {
+      background: var(--u-widget-primary, #4f46e5);
+      color: white;
+      border-color: transparent;
+    }
+
+    button[data-style='primary']:hover {
+      opacity: 0.9;
+    }
+
+    button[data-style='danger'] {
+      background: var(--u-widget-negative, #dc2626);
+      color: white;
+      border-color: transparent;
+    }
+
+    .field-error {
+      font-size: 0.75rem;
+      color: var(--u-widget-negative, #dc2626);
+      margin-top: 2px;
+    }
+
+    input.invalid,
+    textarea.invalid,
+    select.invalid {
+      border-color: var(--u-widget-negative, #dc2626);
+    }
+
+    input.invalid:focus,
+    textarea.invalid:focus,
+    select.invalid:focus {
+      box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+    }
+
+    /* ── confirm ── */
+    .confirm-container {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    .confirm-description {
+      font-size: 0.9375rem;
+      color: var(--u-widget-text, #1a1a2e);
+      line-height: 1.5;
+    }
+
+    @container u-form (max-width: 20rem) {
+      .form-container {
+        gap: 12px;
+      }
+
+      .field-label {
+        font-size: 0.75rem;
+      }
+
+      input, textarea, select {
+        font-size: 0.8125rem;
+        padding: 6px 8px;
+      }
+
+      .actions {
+        flex-direction: column;
+      }
+
+      .actions button {
+        width: 100%;
+        text-align: center;
+      }
+
+      button {
+        padding: 8px 14px;
+        font-size: 0.8125rem;
+      }
+    }
+  `];
+K([
+  h({ type: Object })
+], D.prototype, "spec", 2);
+K([
+  S()
+], D.prototype, "_formData", 2);
+K([
+  S()
+], D.prototype, "_errors", 2);
+D = K([
+  x("u-form")
+], D);
+var Be = Object.defineProperty, We = Object.getOwnPropertyDescriptor, Z = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? We(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Be(t, a, r), r;
+};
+let I = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this.spec.layout ?? "stack", t = this.spec.columns ?? 2, a = this.spec.children ?? [], i = this.spec.title, r = a.map((s) => this._child(s)), n = i ? "region" : void 0;
+    if (e === "row")
+      return o`<div class="compose-container" part="compose" role=${n ?? c} aria-label=${i ?? c}>${i ? o`<div class="compose-title" part="title">${i}</div>` : c}<div class="layout-row" part="layout">${r}</div></div>`;
+    if (e === "grid") {
+      const s = this._gridColumns(t);
+      return o`<div class="compose-container" part="compose" role=${n ?? c} aria-label=${i ?? c}>${i ? o`<div class="compose-title" part="title">${i}</div>` : c}<div class="layout-grid" part="layout" style="grid-template-columns: ${s}">${r}</div></div>`;
+    }
+    return o`<div class="compose-container" part="compose" role=${n ?? c} aria-label=${i ?? c}>${i ? o`<div class="compose-title" part="title">${i}</div>` : c}<div class="layout-stack" part="layout">${r}</div></div>`;
+  }
+  /** Compute grid-template-columns from options.widths or fallback to equal columns. */
+  _gridColumns(e) {
+    const a = (this.spec?.options ?? {}).widths;
+    return !Array.isArray(a) || a.length === 0 ? `repeat(${e}, 1fr)` : a.map((i) => {
+      if (i === "auto") return "auto";
+      if (i === "stretch") return "1fr";
+      const r = Number(i);
+      return Number.isFinite(r) && r > 0 ? `${r}fr` : "1fr";
+    }).join(" ");
+  }
+  _child(e) {
+    const t = this.theme, a = e.span ? Math.max(1, Math.floor(Number(e.span) || 1)) : 0, i = a > 1 ? `grid-column: span ${a}` : "", n = !!(this.spec?.options ?? {}).card, s = o`<u-widget .spec=${e} theme=${t ?? c}></u-widget>`;
+    if (e.collapsed) {
+      const p = e.title || "Details";
+      return o`
+        <details class="child-collapsed" part="child" style=${i || c}>
+          <summary part="collapsed-summary">${p}</summary>
+          <div class="collapsed-content">${s}</div>
+        </details>
+      `;
+    }
+    const l = n ? "child child-card" : "child";
+    return i ? o`<div class=${l} style=${i} part="child">${s}</div>` : o`<div class=${l} part="child">${s}</div>`;
+  }
+};
+I.styles = [b, y`
+    :host {
+      display: block;
+      container: u-compose / inline-size;
+    }
+
+    .compose-container {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .compose-title {
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: var(--u-widget-text, #1a1a2e);
+      margin-bottom: 12px;
+    }
+
+    .layout-stack {
+      display: flex;
+      flex-direction: column;
+      gap: var(--u-widget-gap, 16px);
+    }
+
+    .layout-row {
+      display: flex;
+      flex-direction: row;
+      gap: var(--u-widget-gap, 16px);
+    }
+
+    .layout-row > * {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .layout-grid {
+      display: grid;
+      gap: var(--u-widget-gap, 16px);
+    }
+
+    .child-card {
+      padding: 16px 20px;
+      border-radius: var(--u-widget-radius, 6px);
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      background: var(--u-widget-bg, #fff);
+      box-shadow: var(--u-widget-shadow);
+      transition: box-shadow 0.2s;
+    }
+
+    /* ── collapsed child (details/summary) ── */
+    details.child-collapsed {
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    details.child-collapsed > summary {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 12px;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--u-widget-text, #1a1a2e);
+      cursor: pointer;
+      user-select: none;
+      list-style: none;
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    details.child-collapsed > summary::-webkit-details-marker { display: none; }
+
+    details.child-collapsed > summary::before {
+      content: '\\25B6';
+      font-size: 0.625rem;
+      transition: transform 0.15s;
+    }
+
+    details.child-collapsed[open] > summary::before {
+      transform: rotate(90deg);
+    }
+
+    details.child-collapsed > .collapsed-content {
+      padding: 12px;
+    }
+
+    /* ── container-query responsive ── */
+    @container u-compose (max-width: 30rem) {
+      .layout-row {
+        flex-direction: column;
+      }
+
+      .layout-grid {
+        grid-template-columns: 1fr !important;
+      }
+    }
+  `];
+Z([
+  h({ type: Object })
+], I.prototype, "spec", 2);
+Z([
+  h({ type: String, reflect: !0 })
+], I.prototype, "theme", 2);
+I = Z([
+  x("u-compose")
+], I);
+var He = Object.defineProperty, Ke = Object.getOwnPropertyDescriptor, ge = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ke(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && He(t, a, r), r;
+};
+let W = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    switch (this.spec.widget) {
+      case "markdown":
+        return this.renderMarkdown();
+      case "image":
+        return this.renderImage();
+      case "callout":
+        return this.renderCallout();
+      default:
+        return c;
+    }
+  }
+  renderMarkdown() {
+    const e = this.spec.data, t = typeof e == "string" ? e : e?.content ?? "";
+    return t ? o`<div class="markdown" part="markdown"
+      .innerHTML=${this.parseMarkdown(t)}
+    ></div>` : c;
+  }
+  renderImage() {
+    const e = this.spec.data;
+    if (!e) return c;
+    const t = String(e.src ?? ""), a = String(e.alt ?? ""), i = e.caption, r = this.sanitizeUrl(t);
+    return r ? o`<div class="image-container" part="image">
+      <img src=${r} alt=${a} loading="lazy" />
+      ${i ? o`<div class="image-caption" part="caption">${i}</div>` : c}
+    </div>` : c;
+  }
+  renderCallout() {
+    const e = this.spec.data;
+    if (!e) return c;
+    const t = String(e.message ?? ""), a = String(e.level ?? "info"), i = e.title, n = ["info", "warning", "error", "success"].includes(a) ? a : "info", s = n === "warning" || n === "error";
+    return o`<div class="callout callout-${n}" part="callout" role=${s ? "alert" : "note"} aria-live=${s ? "assertive" : "polite"}>
+      ${i ? o`<div class="callout-title" part="callout-title">${i}</div>` : c}
+      <div part="callout-message">${t}</div>
+    </div>`;
+  }
+  /**
+   * Minimal markdown parser — handles the most common patterns.
+   * Intentionally lightweight; does NOT pull in a full markdown library.
+   */
+  parseMarkdown(e) {
+    let t = this.escapeHtml(e);
+    return t = t.replace(/^#### (.+)$/gm, "<h4>$1</h4>"), t = t.replace(/^### (.+)$/gm, "<h3>$1</h3>"), t = t.replace(/^## (.+)$/gm, "<h2>$1</h2>"), t = t.replace(/^# (.+)$/gm, "<h1>$1</h1>"), t = t.replace(/^---$/gm, "<hr>"), t = t.replace(/```[\s\S]*?```/g, (a) => `<pre><code>${a.slice(3, -3).replace(/^\w*\n/, "")}</code></pre>`), t = t.replace(
+      /^(\|.+\|)\n(\|[\s:|-]+\|)\n((?:\|.+\|\n?)+)/gm,
+      (a, i, r, n) => {
+        const s = (u) => u.split("|").slice(1, -1).map((m) => m.trim()), l = s(i), p = s(r).map((u) => u.startsWith(":") && u.endsWith(":") ? "center" : u.endsWith(":") ? "right" : "left"), d = n.trim().split(`
+`).map(s), g = l.map((u, m) => `<th scope="col" style="text-align:${p[m] ?? "left"}">${u}</th>`).join(""), f = d.map((u) => "<tr>" + u.map((m, v) => `<td style="text-align:${p[v] ?? "left"}">${m}</td>`).join("") + "</tr>").join("");
+        return `<table><thead><tr>${g}</tr></thead><tbody>${f}</tbody></table>`;
+      }
+    ), t = t.replace(/`([^`]+)`/g, "<code>$1</code>"), t = t.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>"), t = t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), t = t.replace(/\*(.+?)\*/g, "<em>$1</em>"), t = t.replace(
+      /\[([^\]]+)\]\(([^)]+)\)/g,
+      (a, i, r) => `<a href="${this.sanitizeUrl(r)}" target="_blank" rel="noopener">${i}</a>`
+    ), t = t.replace(/^&gt; (.+)$/gm, "<blockquote>$1</blockquote>"), t = t.replace(/^\d+\. (.+)$/gm, "<li data-ol>$1</li>"), t = t.replace(/(<li data-ol>.*<\/li>\n?)+/g, (a) => `<ol>${a.replace(/ data-ol/g, "")}</ol>`), t = t.replace(/^- (.+)$/gm, "<li>$1</li>"), t = t.replace(/(<li>.*<\/li>\n?)+/g, "<ul>$&</ul>"), t = t.replace(/\n\n+/g, "</p><p>"), !t.startsWith("<h") && !t.startsWith("<ul") && !t.startsWith("<ol") && !t.startsWith("<pre") && !t.startsWith("<blockquote") && !t.startsWith("<hr") && (t = `<p>${t}</p>`), t = t.replace(/<pre>[\s\S]*?<\/pre>/g, (a) => a.replace(/\n/g, "\0NL\0")), t = t.replace(/\n/g, "<br>"), t = t.replace(/\x00NL\x00/g, `
+`), t;
+  }
+  sanitizeUrl(e) {
+    const t = e.replace(/[\s\u200B\u200C\u200D\uFEFF\u00AD\u200E\u200F]/g, "");
+    return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
+  }
+  escapeHtml(e) {
+    return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  }
+};
+W.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-content / inline-size;
+    }
+
+    /* ── markdown ── */
+    .markdown {
+      font-size: 0.875rem;
+      line-height: 1.6;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .markdown p {
+      margin: 0.5em 0;
+    }
+
+    .markdown h1,
+    .markdown h2,
+    .markdown h3,
+    .markdown h4 {
+      margin: 0.75em 0 0.25em;
+      font-weight: 600;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .markdown h1 { font-size: 1.5rem; }
+    .markdown h2 { font-size: 1.25rem; }
+    .markdown h3 { font-size: 1.1rem; }
+    .markdown h4 { font-size: 1rem; }
+
+    .markdown strong { font-weight: 600; }
+    .markdown em { font-style: italic; }
+
+    .markdown code {
+      background: var(--u-widget-surface, #f1f5f9);
+      padding: 0.15em 0.4em;
+      border-radius: 3px;
+      font-size: 0.8125rem;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+    }
+
+    .markdown pre {
+      background: var(--u-widget-surface, #f1f5f9);
+      padding: 12px;
+      border-radius: 6px;
+      overflow-x: auto;
+      font-size: 0.8125rem;
+    }
+
+    .markdown pre code {
+      background: none;
+      padding: 0;
+    }
+
+    .markdown ul,
+    .markdown ol {
+      padding-left: 1.5em;
+      margin: 0.5em 0;
+    }
+
+    .markdown blockquote {
+      border-left: 3px solid var(--u-widget-border, #e2e8f0);
+      padding-left: 12px;
+      margin: 0.5em 0;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .markdown a {
+      color: var(--u-widget-primary, #4f46e5);
+      text-decoration: none;
+    }
+
+    .markdown a:hover {
+      text-decoration: underline;
+    }
+
+    .markdown table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 0.5em 0;
+      font-size: 0.8125rem;
+    }
+
+    .markdown th,
+    .markdown td {
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      padding: 6px 10px;
+    }
+
+    .markdown th {
+      background: var(--u-widget-surface, #f1f5f9);
+      font-weight: 600;
+      text-align: left;
+    }
+
+    .markdown hr {
+      border: none;
+      border-top: 1px solid var(--u-widget-border, #e2e8f0);
+      margin: 1em 0;
+    }
+
+    /* ── image ── */
+    .image-container {
+      text-align: center;
+    }
+
+    .image-container img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 6px;
+    }
+
+    .image-caption {
+      margin-top: 6px;
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    /* ── callout ── */
+    .callout {
+      padding: 12px 16px;
+      border-radius: 6px;
+      border-left: 4px solid;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+
+    .callout-info {
+      background: color-mix(in srgb, var(--u-widget-primary, #3b82f6) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-primary, #3b82f6);
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .callout-warning {
+      background: color-mix(in srgb, var(--u-widget-warning, #f59e0b) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-warning, #f59e0b);
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .callout-error {
+      background: color-mix(in srgb, var(--u-widget-negative, #ef4444) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-negative, #ef4444);
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .callout-success {
+      background: color-mix(in srgb, var(--u-widget-positive, #22c55e) 12%, var(--u-widget-bg, #fff));
+      border-left-color: var(--u-widget-positive, #22c55e);
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .callout-title {
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    @container u-content (max-width: 20rem) {
+      .markdown {
+        font-size: 0.8125rem;
+      }
+
+      .markdown h1 { font-size: 1.25rem; }
+      .markdown h2 { font-size: 1.1rem; }
+      .markdown h3 { font-size: 1rem; }
+
+      .callout {
+        padding: 8px 12px;
+        font-size: 0.8125rem;
+      }
+
+      .image-caption {
+        font-size: 0.75rem;
+      }
+    }
+  `];
+ge([
+  h({ type: Object })
+], W.prototype, "spec", 2);
+W = ge([
+  x("u-content")
+], W);
+var Ve = Object.defineProperty, Ge = Object.getOwnPropertyDescriptor, fe = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Ge(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Ve(t, a, r), r;
+};
+let H = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this._extractPairs();
+    if (e.length === 0) return c;
+    const t = this.spec.options ?? {}, a = String(t.layout ?? "vertical"), i = Number(t.columns ?? 2), r = a === "grid" ? `grid-template-columns: repeat(${i}, 1fr)` : "";
+    return o`
+      <div
+        class=${`kv-${a === "grid" ? "grid" : a === "horizontal" ? "horizontal" : "vertical"}`}
+        style=${r}
+        part="kv"
+        role="list"
+        aria-label=${this.spec.title ?? "Key-value pairs"}
+      >
+        ${e.map(([n, s]) => o`
+          <div class="kv-pair" part="kv-pair" role="listitem">
+            <span class="kv-key" part="kv-key">${n}</span>
+            <span class="kv-value" part="kv-value">${String(s)}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  _extractPairs() {
+    const e = this.spec?.data;
+    return e ? Array.isArray(e) ? e.filter((t) => t != null && typeof t == "object" && "key" in t && "value" in t).map((t) => [String(t.key), t.value]) : typeof e == "object" ? Object.entries(e) : [] : [];
+  }
+};
+H.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-kv / inline-size;
+    }
+
+    .kv-vertical {
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: 8px 12px;
+      justify-content: center;
+    }
+
+    .kv-horizontal {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 24px;
+    }
+
+    .kv-grid {
+      display: grid;
+      gap: 8px 24px;
+    }
+
+    .kv-pair {
+      display: flex;
+      gap: 8px;
+      align-items: baseline;
+      min-width: 0;
+    }
+
+    .kv-vertical .kv-pair {
+      display: contents;
+    }
+
+    .kv-vertical .kv-key {
+      text-align: right;
+    }
+
+    .kv-vertical .kv-value {
+      text-align: left;
+    }
+
+    .kv-key {
+      font-size: 0.8125rem;
+      font-weight: 500;
+      color: var(--u-widget-text-secondary, #64748b);
+      flex-shrink: 0;
+    }
+
+    .kv-value {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--u-widget-text, #1a1a2e);
+      text-align: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .kv-horizontal .kv-pair {
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .kv-horizontal .kv-value {
+      text-align: left;
+    }
+
+    .kv-grid .kv-pair {
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .kv-grid .kv-value {
+      text-align: left;
+    }
+
+    @container u-kv (max-width: 20rem) {
+      .kv-horizontal {
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .kv-key {
+        font-size: 0.75rem;
+      }
+
+      .kv-value {
+        font-size: 0.8125rem;
+      }
+    }
+  `];
+fe([
+  h({ type: Object })
+], H.prototype, "spec", 2);
+H = fe([
+  x("u-kv")
+], H);
+var Je = Object.defineProperty, Qe = Object.getOwnPropertyDescriptor, V = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? Qe(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && Je(t, a, r), r;
+};
+const Ze = {
+  javascript: ["//", ["/*", "*/"]],
+  typescript: ["//", ["/*", "*/"]],
+  python: ["#"],
+  java: ["//", ["/*", "*/"]],
+  csharp: ["//", ["/*", "*/"]],
+  go: ["//", ["/*", "*/"]],
+  rust: ["//", ["/*", "*/"]],
+  sql: ["--", ["/*", "*/"]],
+  bash: ["#"],
+  css: [void 0, ["/*", "*/"]],
+  html: [void 0, ["<!--", "-->"]]
+}, Xe = {
+  javascript: "async await break case catch class const continue default delete do else export extends false finally for from function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while with yield",
+  typescript: "abstract any as async await boolean break case catch class const continue declare default delete do else enum export extends false finally for from function if implements import in instanceof interface is keyof let namespace never new null number of override private protected public readonly return static string super switch this throw true try type typeof undefined var void while with yield",
+  python: "False None True and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield",
+  java: "abstract boolean break byte case catch char class continue default do double else enum extends false final finally float for if implements import instanceof int interface long new null package private protected public return short static super switch this throw throws true try void volatile while",
+  csharp: "abstract as async await base bool break byte case catch char class const continue decimal default do double else enum false finally float for foreach if in int interface internal is lock long namespace new null object out override params private protected public readonly ref return sealed short static string struct switch this throw true try typeof var virtual void while yield",
+  go: "break case chan const continue default defer else fallthrough false for func go goto if import interface map nil package range return select struct switch true type var",
+  rust: "as async await break const continue crate dyn else enum extern false fn for if impl in let loop match mod move mut pub ref return self static struct super trait true type unsafe use where while",
+  sql: "ALL ALTER AND AS ASC BETWEEN BY CASE CREATE DELETE DESC DISTINCT DROP ELSE END EXISTS FALSE FROM GROUP HAVING IF IN INDEX INSERT INTO IS JOIN LEFT LIKE LIMIT NOT NULL ON OR ORDER PRIMARY SELECT SET TABLE THEN TRUE UNION UPDATE VALUES WHERE",
+  bash: "break case do done elif else esac fi for function if in local read return select then until while"
+}, Ye = {
+  js: "javascript",
+  ts: "typescript",
+  py: "python",
+  cs: "csharp",
+  sh: "bash",
+  shell: "bash",
+  zsh: "bash",
+  jsx: "javascript",
+  tsx: "typescript",
+  cpp: "java",
+  c: "java",
+  xml: "html",
+  svg: "html",
+  scss: "css",
+  less: "css",
+  jsonc: "json",
+  psql: "sql",
+  mysql: "sql"
+}, le = /* @__PURE__ */ new Map();
+function et(e) {
+  let t = le.get(e);
+  if (!t) {
+    const a = Xe[e] || "";
+    t = a ? new Set(a.split(" ")) : /* @__PURE__ */ new Set(), le.set(e, t);
+  }
+  return t;
+}
+function k(e) {
+  return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function j(e, t) {
+  const a = k(e);
+  return a.includes(`
+`) ? a.split(`
+`).map((i) => `<span class="hl-${t}">${i}</span>`).join(`
+`) : `<span class="hl-${t}">${a}</span>`;
+}
+function he(e, t, a) {
+  let i = t + 1;
+  for (; i < e.length; ) {
+    if (e[i] === "\\") {
+      i += 2;
+      continue;
+    }
+    if (e[i] === a) return i + 1;
+    if (a !== "`" && e[i] === `
+`) return i;
+    i++;
+  }
+  return e.length;
+}
+function tt(e, t) {
+  if (!t) return k(e);
+  const a = Ye[t] || t;
+  if (a === "json") return rt(e);
+  const i = et(a), r = Ze[a], n = r?.[0], s = r?.[1], l = a === "javascript" || a === "typescript";
+  let p = "", d = 0;
+  const g = e.length;
+  for (; d < g; ) {
+    if (s && e.startsWith(s[0], d)) {
+      const u = e.indexOf(s[1], d + s[0].length), m = u === -1 ? e.slice(d) : e.slice(d, u + s[1].length);
+      p += j(m, "c"), d += m.length;
+      continue;
+    }
+    if (n && e.startsWith(n, d)) {
+      const u = e.indexOf(`
+`, d), m = u === -1 ? e.slice(d) : e.slice(d, u);
+      p += j(m, "c"), d += m.length;
+      continue;
+    }
+    const f = e[d];
+    if (f === '"' || f === "'" || f === "`" && l) {
+      const u = he(e, d, f);
+      p += j(e.slice(d, u), "s"), d = u;
+      continue;
+    }
+    if (/\d/.test(f) && (d === 0 || !/[a-zA-Z_$]/.test(e[d - 1]))) {
+      let u = d + 1;
+      for (; u < g && /[0-9a-fA-FxXoObBeE._]/.test(e[u]); ) u++;
+      p += j(e.slice(d, u), "n"), d = u;
+      continue;
+    }
+    if (/[a-zA-Z_$]/.test(f)) {
+      let u = d + 1;
+      for (; u < g && /[a-zA-Z0-9_$]/.test(e[u]); ) u++;
+      const m = e.slice(d, u);
+      p += i.has(m) ? `<span class="hl-k">${k(m)}</span>` : k(m), d = u;
+      continue;
+    }
+    if (a === "html" && f === "<" && d + 1 < g && /[a-zA-Z/!]/.test(e[d + 1])) {
+      const u = e.indexOf(">", d);
+      if (u !== -1) {
+        p += `<span class="hl-k">${k(e.slice(d, u + 1))}</span>`, d = u + 1;
+        continue;
+      }
+    }
+    if (a === "css" && /[a-z-]/.test(f)) {
+      let u = d + 1;
+      for (; u < g && /[a-z-]/.test(e[u]); ) u++;
+      const m = e.slice(d, u);
+      e.slice(u).trimStart()[0] === ":" ? p += `<span class="hl-k">${k(m)}</span>` : p += k(m), d = u;
+      continue;
+    }
+    p += k(f), d++;
+  }
+  return p;
+}
+function rt(e) {
+  let t = "", a = 0;
+  const i = e.length;
+  for (; a < i; ) {
+    const r = e[a];
+    if (r === '"') {
+      const s = he(e, a, '"'), l = e.slice(a, s), p = e.slice(s).trimStart();
+      t += j(l, p[0] === ":" ? "k" : "s"), a = s;
+      continue;
+    }
+    if (/[\d-]/.test(r) && (a === 0 || /[\s,:\[{]/.test(e[a - 1]))) {
+      let s = a + 1;
+      for (; s < i && /[0-9.eE+\-]/.test(e[s]); ) s++;
+      t += j(e.slice(a, s), "n"), a = s;
+      continue;
+    }
+    let n = !1;
+    for (const s of ["true", "false", "null"])
+      if (e.startsWith(s, a)) {
+        t += `<span class="hl-k">${s}</span>`, a += s.length, n = !0;
+        break;
+      }
+    n || (t += k(r), a++);
+  }
+  return t;
+}
+let O = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null, this._copied = !1;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this.spec.data;
+    if (!e) return c;
+    const t = String(e.content ?? "");
+    if (!t) return c;
+    const a = String(e.language ?? "").toLowerCase(), i = this.spec.options ?? {}, r = i.lineNumbers !== !1, n = !!(i.wrap ?? !1), s = i.maxHeight ? String(i.maxHeight) : void 0, l = new Set(
+      Array.isArray(i.highlight) ? i.highlight : []
+    ), g = tt(t, a).split(`
+`).map((u, m) => {
+      const v = m + 1, $ = l.has(v) ? " line-hl" : "", _ = r ? `<span class="line-no">${v}</span>` : "";
+      return `<span class="line${$}">${_}${u || " "}</span>`;
+    }).join(""), f = s ? `max-height: ${s}` : "";
+    return o`
+      <div class="code-block" part="code">
+        <div class="code-header" part="code-header">
+          <span class="code-lang">${a || "code"}</span>
+          <button
+            class="code-copy"
+            part="code-copy"
+            ?data-copied=${this._copied}
+            @click=${this._copyCode}
+          >${this._copied ? "Copied!" : "Copy"}</button>
+        </div>
+        <div class="code-body" part="code-body" style=${f}>
+          <pre data-wrap=${String(n)}><code .innerHTML=${g}></code></pre>
+        </div>
+      </div>
+    `;
+  }
+  async _copyCode() {
+    const e = this.spec?.data, t = String(e?.content ?? "");
+    if (t) {
+      try {
+        await navigator.clipboard.writeText(t);
+      } catch {
+      }
+      this._copied = !0, setTimeout(() => {
+        this._copied = !1;
+      }, 2e3);
+    }
+  }
+};
+O.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-code / inline-size;
+    }
+
+    .code-block {
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    .code-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 6px 12px;
+      background: var(--u-widget-surface, #f1f5f9);
+      border-bottom: 1px solid var(--u-widget-border, #e2e8f0);
+    }
+
+    .code-lang {
+      font-size: 0.6875rem;
+      font-weight: 600;
+      color: var(--u-widget-text-secondary, #64748b);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .code-copy {
+      padding: 2px 10px;
+      border-radius: 4px;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      background: var(--u-widget-bg, #fff);
+      color: var(--u-widget-text-secondary, #64748b);
+      cursor: pointer;
+      font-size: 0.6875rem;
+      font-family: inherit;
+      transition: all 0.15s;
+    }
+    .code-copy:hover {
+      background: var(--u-widget-bg, #fff);
+      color: var(--u-widget-text, #1a1a2e);
+    }
+    .code-copy[data-copied] {
+      color: var(--u-widget-positive, #16a34a);
+      border-color: var(--u-widget-positive, #16a34a);
+    }
+
+    .code-body {
+      overflow: auto;
+      background: var(--u-widget-bg, #fff);
+    }
+    :host([theme="dark"]) .code-body { background: #1e1e2e; }
+
+    pre {
+      margin: 0;
+      padding: 12px;
+      font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Source Code Pro', Consolas, Monaco, monospace;
+      font-size: 0.8125rem;
+      line-height: 1.5;
+      tab-size: 2;
+      white-space: pre;
+    }
+    pre[data-wrap="true"] { white-space: pre-wrap; word-break: break-all; }
+
+    .line { display: block; }
+
+    .line-no {
+      display: inline-block;
+      width: 3ch;
+      text-align: right;
+      margin-right: 1.5ch;
+      color: var(--u-widget-text-secondary, #94a3b8);
+      user-select: none;
+      opacity: 0.5;
+    }
+
+    .line-hl {
+      background: rgba(79, 70, 229, 0.08);
+      margin: 0 -12px;
+      padding: 0 12px;
+    }
+    :host([theme="dark"]) .line-hl { background: rgba(79, 70, 229, 0.15); }
+
+    /* Syntax token colors */
+    .hl-k { color: #8b5cf6; }  /* keyword — purple */
+    .hl-s { color: #059669; }  /* string — green */
+    .hl-c { color: #94a3b8; font-style: italic; } /* comment — gray */
+    .hl-n { color: #d97706; }  /* number — amber */
+
+    :host([theme="dark"]) .hl-k { color: #a78bfa; }
+    :host([theme="dark"]) .hl-s { color: #34d399; }
+    :host([theme="dark"]) .hl-c { color: #64748b; }
+    :host([theme="dark"]) .hl-n { color: #fbbf24; }
+
+    @container u-code (max-width: 20rem) {
+      pre { font-size: 0.75rem; padding: 8px; }
+      .code-header { padding: 4px 8px; }
+      .line-no { width: 2.5ch; margin-right: 1ch; }
+    }
+  `];
+V([
+  h({ type: Object })
+], O.prototype, "spec", 2);
+V([
+  h({ type: String, reflect: !0 })
+], O.prototype, "theme", 2);
+V([
+  S()
+], O.prototype, "_copied", 2);
+O = V([
+  x("u-code")
+], O);
+var at = Object.defineProperty, it = Object.getOwnPropertyDescriptor, X = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? it(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && at(t, a, r), r;
+};
+let N = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this._extractItems();
+    if (e.length === 0) return c;
+    const t = this.spec.options ?? {}, a = !!(t.compact ?? !1), i = t.numbered !== !1;
+    return o`
+      <div class="citations" part="citations" ?data-compact=${a} role="list" aria-label=${this.spec.title ?? "Citations"}>
+        ${e.map((r, n) => this._renderItem(r, n, i))}
+      </div>
+    `;
+  }
+  _renderItem(e, t, a) {
+    const i = !!e.url, r = e.url ? this._extractDomain(e.url) : void 0;
+    return o`
+      <div
+        class="cite-item"
+        part="cite-item"
+        role="listitem"
+        ?data-link=${i}
+        @click=${i ? () => this._handleClick(e) : void 0}
+      >
+        ${a ? o`<span class="cite-num" part="cite-num">${t + 1}</span>` : c}
+        <div class="cite-body">
+          <div class="cite-title" part="cite-title">${e.title}</div>
+          ${r ? o`<div class="cite-url" part="cite-url">${r}</div>` : c}
+          ${e.snippet ? o`<div class="cite-snippet" part="cite-snippet">${e.snippet}</div>` : c}
+          ${e.source ? o`<div class="cite-source" part="cite-source">${e.source}</div>` : c}
+        </div>
+      </div>
+    `;
+  }
+  _handleClick(e) {
+    if (!e.url) return;
+    const t = e.url.replace(/[\s\u200B-\u200F\uFEFF\u00AD]/g, "");
+    /^(javascript|data|vbscript):/i.test(t) || (this.dispatchEvent(
+      new CustomEvent("u-widget-internal", {
+        detail: {
+          type: "action",
+          widget: "citation",
+          id: this.spec?.id,
+          action: "navigate",
+          data: { url: t, title: e.title }
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ), window.open(t, "_blank", "noopener"));
+  }
+  _extractDomain(e) {
+    try {
+      return new URL(e).hostname;
+    } catch {
+      return e;
+    }
+  }
+  _extractItems() {
+    const e = this.spec?.data;
+    if (!e) return [];
+    if (Array.isArray(e))
+      return e.filter(
+        (t) => t != null && typeof t == "object" && "title" in t
+      ).map((t) => ({
+        title: String(t.title ?? ""),
+        url: t.url ? String(t.url) : void 0,
+        snippet: t.snippet ? String(t.snippet) : void 0,
+        source: t.source ? String(t.source) : void 0
+      }));
+    if (typeof e == "object" && "title" in e) {
+      const t = e;
+      return [{
+        title: String(t.title ?? ""),
+        url: t.url ? String(t.url) : void 0,
+        snippet: t.snippet ? String(t.snippet) : void 0,
+        source: t.source ? String(t.source) : void 0
+      }];
+    }
+    return [];
+  }
+};
+N.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-citation / inline-size;
+    }
+
+    .citations {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .cite-item {
+      display: flex;
+      gap: 10px;
+      padding: 10px 14px;
+      border-radius: 6px;
+      border: 1px solid var(--u-widget-border, #e2e8f0);
+      background: var(--u-widget-bg, #fff);
+      cursor: default;
+      transition: border-color 0.15s;
+    }
+    .cite-item[data-link] { cursor: pointer; }
+    .cite-item[data-link]:hover {
+      border-color: var(--u-widget-primary, #4f46e5);
+    }
+
+    .cite-num {
+      flex-shrink: 0;
+      width: 22px;
+      height: 22px;
+      border-radius: 4px;
+      background: var(--u-widget-surface, #f1f5f9);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .cite-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .cite-title {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--u-widget-text, #1a1a2e);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .cite-item[data-link] .cite-title {
+      color: var(--u-widget-primary, #4f46e5);
+    }
+
+    .cite-url {
+      font-size: 0.6875rem;
+      color: var(--u-widget-text-secondary, #94a3b8);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin-top: 1px;
+    }
+
+    .cite-snippet {
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+      margin-top: 4px;
+      line-height: 1.4;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    .cite-source {
+      font-size: 0.6875rem;
+      color: var(--u-widget-text-secondary, #94a3b8);
+      margin-top: 4px;
+    }
+
+    /* Compact mode */
+    .citations[data-compact] .cite-item {
+      padding: 6px 10px;
+    }
+    .citations[data-compact] .cite-snippet,
+    .citations[data-compact] .cite-source { display: none; }
+
+    @container u-citation (max-width: 20rem) {
+      .cite-title { font-size: 0.8125rem; }
+      .cite-snippet { font-size: 0.75rem; }
+    }
+  `];
+X([
+  h({ type: Object })
+], N.prototype, "spec", 2);
+X([
+  h({ type: String, reflect: !0 })
+], N.prototype, "theme", 2);
+N = X([
+  x("u-citation")
+], N);
+var st = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, Y = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? nt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && st(t, a, r), r;
+};
+const ot = /* @__PURE__ */ new Set(["info", "success", "warning", "error", "neutral"]), lt = {
+  info: "●",
+  // ●
+  success: "✓",
+  // ✓
+  warning: "▲",
+  // ▲
+  error: "✕",
+  // ✕
+  neutral: "○"
+  // ○
+};
+let T = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this._extractItems();
+    return e.length === 0 ? c : o`
+      <div class="status-list" part="status" role="list" aria-label=${this.spec.title ?? "Status"}>
+        ${e.map((t) => o`
+          <div class="status-item" part="status-item" role="listitem" data-level=${t.level}>
+            <span class="status-icon" part="status-icon" aria-hidden="true">${lt[t.level]}</span>
+            <span class="status-label" part="status-label">${t.label}</span>
+            <span class="status-value" part="status-value">${t.value}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  _extractItems() {
+    const e = this.spec?.data;
+    if (!e) return [];
+    if (Array.isArray(e))
+      return e.filter(
+        (t) => t != null && typeof t == "object" && "label" in t && "value" in t
+      ).map((t) => ({
+        label: String(t.label),
+        value: String(t.value),
+        level: this._resolveLevel(t.level)
+      }));
+    if (typeof e == "object" && "label" in e && "value" in e) {
+      const t = e;
+      return [{
+        label: String(t.label),
+        value: String(t.value),
+        level: this._resolveLevel(t.level)
+      }];
+    }
+    return [];
+  }
+  _resolveLevel(e) {
+    const t = String(e ?? "info");
+    return ot.has(t) ? t : "info";
+  }
+};
+T.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-status / inline-size;
+    }
+
+    .status-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px 24px;
+    }
+
+    .status-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 0.875rem;
+    }
+
+    .status-icon {
+      font-size: 0.75rem;
+      flex-shrink: 0;
+    }
+
+    .status-label {
+      color: var(--u-widget-text-secondary, #64748b);
+      font-weight: 500;
+    }
+
+    .status-label::after {
+      content: ':';
+    }
+
+    .status-value {
+      font-weight: 600;
+    }
+
+    /* Level colors */
+    [data-level="info"] .status-icon,
+    [data-level="info"] .status-value {
+      color: var(--u-widget-primary, #3b82f6);
+    }
+    [data-level="success"] .status-icon,
+    [data-level="success"] .status-value {
+      color: var(--u-widget-positive, #16a34a);
+    }
+    [data-level="warning"] .status-icon,
+    [data-level="warning"] .status-value {
+      color: var(--u-widget-warning, #f59e0b);
+    }
+    [data-level="error"] .status-icon,
+    [data-level="error"] .status-value {
+      color: var(--u-widget-negative, #dc2626);
+    }
+    [data-level="neutral"] .status-icon,
+    [data-level="neutral"] .status-value {
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    @container u-status (max-width: 20rem) {
+      .status-list { gap: 8px 16px; }
+      .status-item { font-size: 0.8125rem; }
+    }
+  `];
+Y([
+  h({ type: Object })
+], T.prototype, "spec", 2);
+Y([
+  h({ type: String, reflect: !0 })
+], T.prototype, "theme", 2);
+T = Y([
+  x("u-status")
+], T);
+var ct = Object.defineProperty, dt = Object.getOwnPropertyDescriptor, ee = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? dt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && ct(t, a, r), r;
+};
+const pt = /* @__PURE__ */ new Set(["done", "active", "pending", "error"]);
+function ce(e, t) {
+  if (t) return o`<span class="step-icon-text">${t}</span>`;
+  switch (e) {
+    case "done":
+      return o`<svg class="step-svg" viewBox="0 0 16 16" fill="currentColor"><path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 1 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/></svg>`;
+    case "active":
+      return o`<svg class="step-svg" viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="8" r="5"/></svg>`;
+    case "pending":
+      return o`<svg class="step-svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="5"/></svg>`;
+    case "error":
+      return o`<svg class="step-svg" viewBox="0 0 16 16" fill="currentColor"><path d="M4.47 4.47a.75.75 0 0 1 1.06 0L8 6.94l2.47-2.47a.75.75 0 1 1 1.06 1.06L9.06 8l2.47 2.47a.75.75 0 1 1-1.06 1.06L8 9.06l-2.47 2.47a.75.75 0 0 1-1.06-1.06L6.94 8 4.47 5.53a.75.75 0 0 1 0-1.06Z"/></svg>`;
+  }
+}
+let F = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this._extractItems();
+    if (e.length === 0) return c;
+    const t = this.spec.options ?? {}, a = String(t.layout ?? "vertical"), i = !!(t.compact ?? !1);
+    return a === "horizontal" ? this._renderHorizontal(e, i) : this._renderVertical(e, i);
+  }
+  _renderVertical(e, t) {
+    return o`
+      <div class="steps-vertical" part="steps" ?data-compact=${t}
+           role="list" aria-label=${this.spec?.title ?? "Steps"}>
+        ${e.map((a) => o`
+          <div class="step-v" part="step" role="listitem" data-status=${a.status}>
+            <div class="step-track">
+              <span class="step-icon" part="step-icon" aria-hidden="true">${ce(a.status, a.icon)}</span>
+              <div class="step-line"></div>
+            </div>
+            <div class="step-body">
+              <div class="step-label" part="step-label">${a.label}</div>
+              ${a.description ? o`<div class="step-desc" part="step-desc">${a.description}</div>` : c}
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  _renderHorizontal(e, t) {
+    return o`
+      <div class="steps-horizontal" part="steps" ?data-compact=${t}
+           role="list" aria-label=${this.spec?.title ?? "Steps"}>
+        ${e.map((a, i) => {
+      const r = i > 0 && e[i - 1].status === "done", n = a.status === "done";
+      return o`
+            <div class="step-h" part="step" role="listitem" data-status=${a.status}>
+              <div class="step-h-top">
+                <div class="step-h-line" ?data-done=${r}></div>
+                <span class="step-icon" part="step-icon" aria-hidden="true">${ce(a.status, a.icon)}</span>
+                <div class="step-h-line" ?data-done=${n}></div>
+              </div>
+              <div class="step-label" part="step-label">${a.label}</div>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  _extractItems() {
+    const e = this.spec?.data;
+    return !e || !Array.isArray(e) ? [] : e.filter(
+      (t) => t != null && typeof t == "object" && "label" in t
+    ).map((t) => ({
+      label: String(t.label),
+      status: this._resolveStatus(t.status),
+      description: t.description ? String(t.description) : void 0,
+      icon: t.icon ? String(t.icon) : void 0
+    }));
+  }
+  _resolveStatus(e) {
+    const t = String(e ?? "pending");
+    return pt.has(t) ? t : "pending";
+  }
+};
+F.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-steps / inline-size;
+    }
+
+    /* ── Vertical Layout ── */
+    .steps-vertical {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .step-v {
+      display: flex;
+      gap: 12px;
+      min-height: 48px;
+    }
+
+    .step-v:last-child { min-height: auto; }
+
+    .step-track {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 24px;
+      flex-shrink: 0;
+    }
+
+    .step-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.75rem;
+      font-weight: 700;
+      flex-shrink: 0;
+    }
+
+    .step-svg { width: 14px; height: 14px; }
+    .step-icon-text { font-size: 0.75rem; line-height: 1; }
+
+    .step-line {
+      width: 2px;
+      flex: 1;
+      min-height: 12px;
+      background: var(--u-widget-border, #e2e8f0);
+    }
+
+    [data-status="pending"] .step-line {
+      background: repeating-linear-gradient(
+        to bottom,
+        var(--u-widget-border, #e2e8f0) 0px,
+        var(--u-widget-border, #e2e8f0) 3px,
+        transparent 3px,
+        transparent 6px
+      );
+    }
+
+    .step-v:last-child .step-line { display: none; }
+
+    .step-body {
+      padding-bottom: 12px;
+      flex: 1;
+      min-width: 0;
+    }
+
+    .step-v:last-child .step-body { padding-bottom: 0; }
+
+    .step-label {
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 24px;
+    }
+
+    .step-desc {
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+      margin-top: 2px;
+      line-height: 1.4;
+    }
+
+    /* ── Horizontal Layout ── */
+    .steps-horizontal {
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .step-h {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
+      min-width: 0;
+      position: relative;
+    }
+
+    .step-h-top {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .step-h-line {
+      flex: 1;
+      height: 2px;
+      background: var(--u-widget-border, #e2e8f0);
+    }
+
+    .step-h:first-child .step-h-line:first-child,
+    .step-h:last-child .step-h-line:last-child {
+      visibility: hidden;
+    }
+
+    .step-h-line[data-done] {
+      background: var(--u-widget-positive, #16a34a);
+    }
+
+    .step-h-line:not([data-done]) {
+      background: repeating-linear-gradient(
+        to right,
+        var(--u-widget-border, #e2e8f0) 0px,
+        var(--u-widget-border, #e2e8f0) 3px,
+        transparent 3px,
+        transparent 6px
+      );
+    }
+
+    .step-h .step-label {
+      text-align: center;
+      font-size: 0.75rem;
+      line-height: 1.3;
+      margin-top: 6px;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* ── Status Colors ── */
+    [data-status="done"] .step-icon {
+      background: var(--u-widget-positive, #16a34a);
+      color: white;
+    }
+    [data-status="done"] .step-label {
+      color: var(--u-widget-text, #1a1a2e);
+    }
+    [data-status="done"] .step-line {
+      background: var(--u-widget-positive, #16a34a);
+    }
+
+    [data-status="active"] .step-icon {
+      background: var(--u-widget-primary, #4f46e5);
+      color: white;
+    }
+    [data-status="active"] .step-label {
+      color: var(--u-widget-primary, #4f46e5);
+      font-weight: 600;
+    }
+
+    [data-status="pending"] .step-icon {
+      background: var(--u-widget-surface, #f1f5f9);
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+    [data-status="pending"] .step-label {
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    [data-status="error"] .step-icon {
+      background: var(--u-widget-negative, #dc2626);
+      color: white;
+    }
+    [data-status="error"] .step-label {
+      color: var(--u-widget-negative, #dc2626);
+    }
+
+    /* ── Compact Mode ── */
+    .steps-vertical[data-compact] .step-v { min-height: 36px; }
+    .steps-vertical[data-compact] .step-desc { display: none; }
+    .steps-vertical[data-compact] .step-body { padding-bottom: 6px; }
+    .steps-vertical[data-compact] .step-line { min-height: 6px; }
+
+    .steps-horizontal[data-compact] .step-icon { width: 20px; height: 20px; font-size: 0.625rem; }
+    .steps-horizontal[data-compact] .step-label { font-size: 0.6875rem; margin-top: 4px; }
+
+    @container u-steps (max-width: 20rem) {
+      .step-label { font-size: 0.8125rem; }
+      .step-desc { font-size: 0.75rem; }
+
+      /* horizontal → vertical auto-conversion on narrow containers */
+      .steps-horizontal {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .step-h {
+        flex-direction: row;
+        align-items: flex-start;
+        gap: 12px;
+      }
+
+      .step-h-top {
+        flex-direction: column;
+        width: 24px;
+        flex-shrink: 0;
+        align-items: center;
+      }
+
+      .step-h-line {
+        width: 2px;
+        height: auto;
+        flex: 1;
+        min-height: 12px;
+      }
+
+      .step-h:first-child .step-h-line:first-child,
+      .step-h:last-child .step-h-line:last-child {
+        display: none;
+      }
+
+      .step-h .step-label {
+        text-align: left;
+        white-space: normal;
+        margin-top: 0;
+        line-height: 24px;
+        font-size: 0.8125rem;
+      }
+    }
+  `];
+ee([
+  h({ type: Object })
+], F.prototype, "spec", 2);
+ee([
+  h({ type: String, reflect: !0 })
+], F.prototype, "theme", 2);
+F = ee([
+  x("u-steps")
+], F);
+var ut = Object.defineProperty, gt = Object.getOwnPropertyDescriptor, G = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? gt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && ut(t, a, r), r;
+};
+const ft = {
+  star: ["☆", "★", "★"],
+  // ☆, ★, ★
+  heart: ["♡", "♥", "♥"],
+  // ♡, ♥, ♥
+  thumb: ["👍", "👍", "👍"]
+  // 👍
+};
+let P = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null, this._hoverIdx = -1;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this.spec.data ?? {}, t = this.spec.options ?? {}, a = typeof e.value == "number" ? e.value : 0, i = typeof t.max == "number" ? t.max : typeof e.max == "number" ? e.max : 5, r = !!(t.interactive ?? !1), n = this._resolveIcon(t.icon), s = typeof t.label == "string" ? t.label : void 0, l = typeof e.count == "number" ? e.count : void 0, p = ft[n], d = this._hoverIdx >= 0 ? this._hoverIdx + 1 : a;
+    return o`
+      <div class="rating" part="rating" role=${r ? "radiogroup" : "img"}
+           aria-label=${this.spec.title ?? s ?? `Rating: ${a} out of ${i}`}>
+        ${s ? o`<span class="rating-label" part="rating-label">${s}</span>` : c}
+        <div class="rating-icons" part="rating-icons"
+             @mouseleave=${r ? () => {
+      this._hoverIdx = -1;
+    } : void 0}>
+          ${Array.from({ length: i }, (g, f) => this._renderIcon(f, d, p, n, r))}
+        </div>
+        ${!r && a > 0 ? o`<span class="rating-value" part="rating-value">${a}</span>` : c}
+        ${l != null ? o`<span class="rating-count" part="rating-count">(${l})</span>` : c}
+      </div>
+    `;
+  }
+  _renderIcon(e, t, a, i, r) {
+    const n = e + 1, s = r && this._hoverIdx >= 0 && n <= this._hoverIdx + 1;
+    let l;
+    s || n <= Math.floor(t) ? l = "full" : n === Math.ceil(t) && t % 1 >= 0.25 && t % 1 < 0.75 ? l = i === "thumb" ? t % 1 >= 0.5 ? "full" : "empty" : "half" : l = "empty";
+    const p = l === "half" ? a[0] : l === "full" ? a[2] : a[0];
+    return l === "half" ? o`
+        <span class="rating-icon rating-icon-half"
+              data-state="half" data-icon=${i}
+              ?data-interactive=${r}
+              ?data-preview=${s}
+              role=${r ? "radio" : "presentation"}
+              aria-label=${r ? `${n}` : c}
+              @mouseenter=${r ? () => {
+      this._hoverIdx = e;
+    } : void 0}
+              @click=${r ? () => this._select(n) : void 0}>
+          <span aria-hidden="true">${a[0]}</span>
+          <span class="half-overlay" aria-hidden="true">
+            <span style="color: inherit">${a[2]}</span>
+          </span>
+        </span>
+      ` : o`
+      <span class="rating-icon"
+            data-state=${l} data-icon=${i}
+            ?data-interactive=${r}
+            ?data-preview=${s}
+            role=${r ? "radio" : "presentation"}
+            aria-label=${r ? `${n}` : c}
+            aria-checked=${r ? String(l === "full" && !s) : c}
+            @mouseenter=${r ? () => {
+      this._hoverIdx = e;
+    } : void 0}
+            @click=${r ? () => this._select(n) : void 0}>
+        <span aria-hidden="true">${p}</span>
+      </span>
+    `;
+  }
+  _select(e) {
+    this.dispatchEvent(
+      new CustomEvent("u-widget-internal", {
+        detail: {
+          type: "submit",
+          widget: "rating",
+          id: this.spec?.id,
+          data: { value: e }
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _resolveIcon(e) {
+    const t = String(e ?? "star");
+    return t === "heart" || t === "thumb" ? t : "star";
+  }
+};
+P.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-rating / inline-size;
+    }
+
+    .rating {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .rating-icons {
+      display: flex;
+      gap: 2px;
+    }
+
+    .rating-icon {
+      font-size: 1.25rem;
+      cursor: default;
+      user-select: none;
+      transition: transform 0.1s;
+      position: relative;
+      line-height: 1;
+    }
+
+    .rating-icon[data-interactive] {
+      cursor: pointer;
+    }
+
+    .rating-icon[data-interactive]:hover {
+      transform: scale(1.2);
+    }
+
+    /* Colors by state */
+    .rating-icon[data-state="empty"] {
+      color: var(--u-widget-text-secondary, #94a3b8);
+    }
+
+    .rating-icon[data-state="full"] {
+      color: #f59e0b;
+    }
+
+    .rating-icon[data-state="half"] {
+      color: #f59e0b;
+    }
+
+    .rating-icon[data-icon="heart"][data-state="full"],
+    .rating-icon[data-icon="heart"][data-state="half"] {
+      color: #ef4444;
+    }
+
+    .rating-icon[data-icon="thumb"][data-state="full"] {
+      color: var(--u-widget-primary, #4f46e5);
+    }
+
+    /* Half-star overlay */
+    .rating-icon-half {
+      position: relative;
+      display: inline-block;
+    }
+
+    .rating-icon-half .half-overlay {
+      position: absolute;
+      left: 0;
+      top: 0;
+      overflow: hidden;
+      width: 50%;
+    }
+
+    /* Value display */
+    .rating-value {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--u-widget-text, #1a1a2e);
+    }
+
+    .rating-count {
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    .rating-label {
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    /* Hover preview */
+    .rating-icon[data-preview="true"] {
+      color: #f59e0b;
+    }
+
+    .rating-icon[data-icon="heart"][data-preview="true"] {
+      color: #ef4444;
+    }
+
+    .rating-icon[data-icon="thumb"][data-preview="true"] {
+      color: var(--u-widget-primary, #4f46e5);
+    }
+
+    @container u-rating (max-width: 20rem) {
+      .rating-icon { font-size: 1rem; }
+      .rating-value { font-size: 0.8125rem; }
+    }
+  `];
+G([
+  h({ type: Object })
+], P.prototype, "spec", 2);
+G([
+  h({ type: String, reflect: !0 })
+], P.prototype, "theme", 2);
+G([
+  S()
+], P.prototype, "_hoverIdx", 2);
+P = G([
+  x("u-rating")
+], P);
+var ht = Object.defineProperty, mt = Object.getOwnPropertyDescriptor, te = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? mt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && ht(t, a, r), r;
+};
+let M = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this.spec.data;
+    if (!e) return c;
+    const t = String(e.src ?? ""), a = this._sanitizeUrl(t);
+    if (!a) return c;
+    const i = e.poster ? this._sanitizeUrl(String(e.poster)) : void 0, r = String(e.alt ?? ""), n = e.caption, s = this.spec.options ?? {}, l = s.controls !== !1, p = s.autoplay === !0, d = s.loop === !0, g = s.muted === !0 || p;
+    return o`
+      <div class="video-container" part="video">
+        <video
+          src=${a}
+          poster=${i ?? c}
+          aria-label=${r || c}
+          ?controls=${l}
+          ?autoplay=${p}
+          ?loop=${d}
+          ?muted=${g}
+          playsinline
+          preload="metadata"
+          part="video-element"
+        ></video>
+        ${n ? o`<div class="video-caption" part="caption">${n}</div>` : c}
+      </div>
+    `;
+  }
+  _sanitizeUrl(e) {
+    const t = e.replace(/[\s\u200B\u200C\u200D\uFEFF\u00AD\u200E\u200F]/g, "");
+    return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
+  }
+};
+M.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-video / inline-size;
+    }
+
+    .video-container {
+      text-align: center;
+    }
+
+    video {
+      max-width: 100%;
+      border-radius: 6px;
+      background: #000;
+    }
+
+    .video-caption {
+      margin-top: 6px;
+      font-size: 0.8125rem;
+      color: var(--u-widget-text-secondary, #64748b);
+    }
+
+    @container u-video (max-width: 20rem) {
+      video {
+        border-radius: 4px;
+      }
+
+      .video-caption {
+        font-size: 0.75rem;
+        margin-top: 4px;
+      }
+    }
+  `];
+te([
+  h({ type: Object })
+], M.prototype, "spec", 2);
+te([
+  h({ type: String, reflect: !0 })
+], M.prototype, "theme", 2);
+M = te([
+  x("u-video")
+], M);
+var vt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, re = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? bt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && vt(t, a, r), r;
+};
+let U = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null;
+  }
+  render() {
+    if (!this.spec) return c;
+    const e = this.spec.data;
+    if (!Array.isArray(e)) return c;
+    const t = e.filter((p) => p && typeof p.src == "string" && p.src).map((p) => ({
+      src: this._sanitizeUrl(String(p.src)),
+      alt: p.alt ? String(p.alt) : void 0,
+      caption: p.caption ? String(p.caption) : void 0
+    })).filter((p) => p.src);
+    if (t.length === 0) return c;
+    const a = this.spec.options ?? {}, i = Number(a.columns) || 0, r = String(a.aspectRatio ?? "auto"), n = i > 0 ? `repeat(${i}, 1fr)` : "repeat(auto-fill, minmax(150px, 1fr))", s = r !== "auto" ? `aspect-ratio: ${r.replace(":", "/")};` : "", l = this.spec.title;
+    return o`
+      <div class="gallery-grid" part="gallery" role="list"
+        aria-label=${l ?? "Gallery"}
+        style="grid-template-columns: ${n}">
+        ${t.map((p) => this._renderItem(p, s))}
+      </div>
+    `;
+  }
+  _renderItem(e, t) {
+    return o`
+      <figure class="gallery-item" part="gallery-item" role="listitem" style=${t || c}>
+        <img
+          src=${e.src}
+          alt=${e.alt ?? ""}
+          loading="lazy"
+          part="gallery-image"
+        />
+        ${e.caption ? o`<figcaption class="gallery-caption" part="gallery-caption">${e.caption}</figcaption>` : c}
+      </figure>
+    `;
+  }
+  _sanitizeUrl(e) {
+    const t = e.replace(/[\s\u200B\u200C\u200D\uFEFF\u00AD\u200E\u200F]/g, "");
+    return /^(javascript|data|vbscript):/i.test(t) ? "" : e;
+  }
+};
+U.styles = [b, y`
+    :host {
+      display: block;
+      font-family: system-ui, -apple-system, sans-serif;
+      container: u-gallery / inline-size;
+    }
+
+    .gallery-grid {
+      display: grid;
+      gap: 8px;
+    }
+
+    .gallery-item {
+      overflow: hidden;
+      border-radius: 6px;
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    .gallery-item img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .gallery-caption {
+      padding: 4px 8px;
+      font-size: 0.75rem;
+      color: var(--u-widget-text-secondary, #64748b);
+      background: var(--u-widget-surface, #f1f5f9);
+    }
+
+    @container u-gallery (max-width: 20rem) {
+      .gallery-grid {
+        grid-template-columns: 1fr !important;
+      }
+    }
+  `];
+re([
+  h({ type: Object })
+], U.prototype, "spec", 2);
+re([
+  h({ type: String, reflect: !0 })
+], U.prototype, "theme", 2);
+U = re([
+  x("u-gallery")
+], U);
+var yt = Object.defineProperty, wt = Object.getOwnPropertyDescriptor, J = (e, t, a, i) => {
+  for (var r = i > 1 ? void 0 : i ? wt(t, a) : t, n = e.length - 1, s; n >= 0; n--)
+    (s = e[n]) && (r = (i ? s(t, a, r) : s(r)) || r);
+  return i && r && yt(t, a, r), r;
+};
+let E = class extends w {
+  constructor() {
+    super(...arguments), this.spec = null, this.theme = null, this.locale = null, this._handleInternalEvent = (e) => {
+      e.stopPropagation(), this.dispatchEvent(
+        new CustomEvent("u-widget-event", {
+          detail: e.detail,
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("u-widget-internal", this._handleInternalEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("u-widget-internal", this._handleInternalEvent);
+  }
+  render() {
+    if (!this.spec)
+      return o`<slot></slot>`;
+    const e = Q(this.spec);
+    if (!e.valid)
+      return this.renderError(e.errors);
+    const t = be(this.spec);
+    return this.renderWidget(t);
+  }
+  renderWidget(e) {
+    const t = e.widget, a = e.mapping ?? ve(t, e.data);
+    let i = a ? { ...e, mapping: a } : e;
+    this.locale && !i.options?.locale && (i = {
+      ...i,
+      options: { ...i.options, locale: this.locale }
+    });
+    const r = this.theme, s = t === "form" || t === "confirm" || t === "actions" ? [] : i.actions ?? [];
+    let l;
+    switch (t) {
+      case "metric":
+      case "stat-group":
+        l = o`<u-metric .spec=${i} theme=${r ?? c}></u-metric>`;
+        break;
+      case "gauge":
+      case "progress":
+        l = o`<u-gauge .spec=${i} theme=${r ?? c}></u-gauge>`;
+        break;
+      case "table":
+      case "list":
+        l = o`<u-table .spec=${i} theme=${r ?? c}></u-table>`;
+        break;
+      case "form":
+      case "confirm":
+        l = o`<u-form .spec=${i} theme=${r ?? c}></u-form>`;
+        break;
+      case "compose":
+        l = o`<u-compose .spec=${i} theme=${r ?? c}></u-compose>`;
+        break;
+      case "markdown":
+      case "image":
+      case "callout":
+        l = o`<u-content .spec=${i} theme=${r ?? c}></u-content>`;
+        break;
+      case "kv":
+        l = o`<u-kv .spec=${i} theme=${r ?? c}></u-kv>`;
+        break;
+      case "code":
+        l = o`<u-code .spec=${i} theme=${r ?? c}></u-code>`;
+        break;
+      case "citation":
+        l = o`<u-citation .spec=${i} theme=${r ?? c}></u-citation>`;
+        break;
+      case "status":
+        l = o`<u-status .spec=${i} theme=${r ?? c}></u-status>`;
+        break;
+      case "steps":
+        l = o`<u-steps .spec=${i} theme=${r ?? c}></u-steps>`;
+        break;
+      case "rating":
+        l = o`<u-rating .spec=${i} theme=${r ?? c}></u-rating>`;
+        break;
+      case "video":
+        l = o`<u-video .spec=${i} theme=${r ?? c}></u-video>`;
+        break;
+      case "gallery":
+        l = o`<u-gallery .spec=${i} theme=${r ?? c}></u-gallery>`;
+        break;
+      case "actions":
+        l = this.renderActionsWidget(i);
+        break;
+      case "divider":
+        l = this.renderDivider(i);
+        break;
+      case "header":
+        l = this.renderHeader(i);
+        break;
+      default:
+        if (t.startsWith("chart.") && customElements.get("u-chart")) {
+          l = o`<u-chart .spec=${i} theme=${r ?? c}></u-chart>`;
+          break;
+        }
+        return this.renderFallback(i);
+    }
+    if (!!i.options?.card && (l = o`<div class="card-container" part="card">${l}</div>`), s.length > 0) {
+      const d = s.map((g) => o`
+        <button
+          data-style=${g.style ?? "default"}
+          ?disabled=${g.disabled}
+          @click=${() => this._dispatchAction(i, g)}
+          part="action-btn"
+        >${g.label}</button>
+      `);
+      return o`<div part="widget-container">${l}<div class="global-actions" part="actions">${d}</div></div>`;
+    }
+    return l;
+  }
+  /** Render standalone "actions" widget — a group of action buttons. */
+  renderActionsWidget(e) {
+    const t = e.actions ?? [];
+    if (t.length === 0) return c;
+    const a = e.options ?? {}, i = String(a.layout ?? "wrap");
+    return o`
+      <div class="actions-widget" data-layout=${i} part="actions" role="group" aria-label=${e.title ?? "Actions"}>
+        ${t.map((r) => o`
+          <button
+            data-style=${r.style ?? "default"}
+            ?disabled=${r.disabled}
+            @click=${() => this._dispatchAction(e, r)}
+            part="action-btn"
+          >${r.label}</button>
+        `)}
+      </div>
+    `;
+  }
+  /** Render inline divider widget. */
+  renderDivider(e) {
+    const t = e.options ?? {}, a = t.label, i = String(t.spacing ?? "default");
+    return o`
+      <div class="divider divider-spacing-${i}" part="divider" role="separator">
+        ${a ?? c}
+      </div>
+    `;
+  }
+  /** Render inline header widget. */
+  renderHeader(e) {
+    const t = e.data, a = String(t?.text ?? e.title ?? ""), i = String(t?.level ?? "2");
+    return a ? o`
+      <div class="header-widget" data-level=${i} part="header" role="heading" aria-level=${i}>
+        ${a}
+      </div>
+    ` : c;
+  }
+  /** Dispatch an action event from the global action bar or actions widget. */
+  _dispatchAction(e, t) {
+    if (t.action === "navigate" && t.url) {
+      window.open(t.url, "_blank", "noopener");
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("u-widget-event", {
+        detail: {
+          type: "action",
+          widget: e.widget,
+          id: e.id,
+          action: t.action,
+          data: t.url ? { url: t.url } : void 0
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  renderFallback(e) {
+    const t = Oe(e.widget);
+    return o`
+      <div class="fallback-card" part="fallback">
+        <div class="fallback-label">${e.title ?? `Unknown widget: ${e.widget}`}</div>
+        ${t ? o`<div class="fallback-hint">Did you mean <strong>${t}</strong>?</div>` : ""}
+        <pre part="json"><code>${JSON.stringify(e, null, 2)}</code></pre>
+      </div>
+    `;
+  }
+  renderError(e) {
+    return o`
+      <div class="error-card" part="error">
+        <div class="error-header">
+          <span aria-hidden="true">&#x26A0;</span>
+          <span>Invalid widget spec</span>
+        </div>
+        <ul class="error-list">
+          ${e.map((t) => o`<li>${t}</li>`)}
+        </ul>
+      </div>
+    `;
+  }
+};
+E.styles = [
+  b,
+  y`
+      :host {
+        display: block;
+        container: u-widget / inline-size;
+      }
+
+      .error-card {
+        padding: 10px 14px;
+        border-radius: 6px;
+        border: 1px solid var(--u-widget-negative, #ef4444);
+        background: color-mix(in srgb, var(--u-widget-negative, #ef4444) 8%, var(--u-widget-bg, #fff));
+        font-size: 0.8125rem;
+      }
+
+      .error-header { font-weight: 600; color: var(--u-widget-negative, #ef4444); margin-bottom: 4px; }
+      .error-list { margin: 0; padding-left: 20px; color: var(--u-widget-text-secondary, #64748b); }
+
+      .fallback-card {
+        padding: 10px 14px;
+        border-radius: 6px;
+        border: 1px dashed var(--u-widget-border, #e2e8f0);
+        font-size: 0.8125rem;
+      }
+      .fallback-label { font-size: 0.6875rem; font-weight: 600; color: var(--u-widget-text-secondary, #64748b); margin-bottom: 6px; }
+      .fallback-hint { font-size: 0.75rem; color: var(--u-widget-primary, #4f46e5); margin-bottom: 6px; }
+      .fallback-card pre { margin: 0; white-space: pre-wrap; font-size: 0.75rem; color: var(--u-widget-text-secondary, #64748b); max-height: 200px; overflow-y: auto; }
+
+      .card-container {
+        padding: 16px 20px;
+        border-radius: var(--u-widget-radius, 6px);
+        border: 1px solid var(--u-widget-border, #e2e8f0);
+        background: var(--u-widget-bg, #fff);
+        box-shadow: var(--u-widget-shadow);
+        transition: box-shadow 0.2s;
+      }
+
+      /* ── shared action button styles ── */
+      [part="widget-container"] {
+        display: contents;
+      }
+
+      [part="action-btn"] {
+        padding: 8px 20px;
+        border-radius: 6px;
+        font-size: 0.875rem;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid var(--u-widget-border, #e2e8f0);
+        background: var(--u-widget-bg, #fff);
+        color: var(--u-widget-text, #1a1a2e);
+        transition: all 0.15s;
+        font-family: inherit;
+      }
+
+      [part="action-btn"]:hover {
+        background: var(--u-widget-surface, #f1f5f9);
+      }
+
+      [part="action-btn"][data-style='primary'] {
+        background: var(--u-widget-primary, #4f46e5);
+        color: white;
+        border-color: transparent;
+      }
+
+      [part="action-btn"][data-style='primary']:hover {
+        opacity: 0.9;
+      }
+
+      [part="action-btn"][data-style='danger'] {
+        background: var(--u-widget-negative, #dc2626);
+        color: white;
+        border-color: transparent;
+      }
+
+      [part="action-btn"]:disabled {
+        opacity: 0.5;
+        cursor: default;
+      }
+
+      /* ── global action bar ── */
+      .global-actions {
+        display: flex;
+        gap: 8px;
+        justify-content: flex-end;
+        padding-top: 10px;
+        flex-wrap: wrap;
+      }
+
+      /* ── standalone actions widget ── */
+      .actions-widget {
+        display: flex;
+        gap: 8px;
+        flex-wrap: wrap;
+      }
+
+      .actions-widget[data-layout='column'] {
+        flex-direction: column;
+      }
+
+      /* ── divider widget ── */
+      .divider {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        color: var(--u-widget-text-secondary, #64748b);
+        font-size: 0.75rem;
+      }
+
+      .divider::before,
+      .divider::after {
+        content: '';
+        flex: 1;
+        border-top: 1px solid var(--u-widget-border, #e2e8f0);
+      }
+
+      .divider:empty::after { display: none; }
+      .divider:empty { border-top: 1px solid var(--u-widget-border, #e2e8f0); }
+      .divider:empty::before { display: none; }
+
+      .divider-spacing-small { margin: 4px 0; }
+      .divider-spacing-default { margin: 12px 0; }
+      .divider-spacing-large { margin: 24px 0; }
+
+      /* ── header widget ── */
+      .header-widget {
+        font-weight: 600;
+        color: var(--u-widget-text, #1a1a2e);
+        margin: 0;
+      }
+
+      .header-widget[data-level='1'] { font-size: 1.5rem; }
+      .header-widget[data-level='2'] { font-size: 1.25rem; }
+      .header-widget[data-level='3'] { font-size: 1.1rem; }
+
+      /* ── responsive: narrow container ── */
+      @container u-widget (max-width: 20rem) {
+        .global-actions {
+          flex-direction: column;
+        }
+
+        .global-actions [part="action-btn"] {
+          width: 100%;
+          text-align: center;
+        }
+
+        .actions-widget:not([data-layout='column']) {
+          flex-direction: column;
+        }
+
+        .actions-widget [part="action-btn"] {
+          width: 100%;
+          text-align: center;
+        }
+
+        .card-container {
+          padding: 12px 14px;
+        }
+
+        [part="action-btn"] {
+          padding: 8px 14px;
+          font-size: 0.8125rem;
+        }
+
+        .header-widget[data-level='1'] { font-size: 1.25rem; }
+        .header-widget[data-level='2'] { font-size: 1.1rem; }
+        .header-widget[data-level='3'] { font-size: 1rem; }
+      }
+    `
+];
+J([
+  h({
+    type: Object,
+    converter: {
+      fromAttribute(e) {
+        if (!e) return null;
+        try {
+          return JSON.parse(e);
+        } catch (t) {
+          return console.warn("[u-widget] Invalid JSON in spec attribute:", t.message), null;
+        }
+      }
+    }
+  })
+], E.prototype, "spec", 2);
+J([
+  h({ type: String, reflect: !0 })
+], E.prototype, "theme", 2);
+J([
+  h({ type: String, reflect: !0 })
+], E.prototype, "locale", 2);
+E = J([
+  x("u-widget")
+], E);
+export {
+  E as UWidget,
+  A as formatTemplate,
+  _e as formatValue,
+  Ct as getDefaultLocale,
+  me as getFormdownParser,
+  de as getLocaleStrings,
+  ve as infer,
+  St as isWidgetSpec,
+  be as normalize,
+  Ot as parseFormdown,
+  Pt as registerFormdownParser,
+  At as registerLocale,
+  Oe as suggestWidget,
+  Q as validate
+};
+//# sourceMappingURL=u-widgets.js.map