@cognivo/components 0.8.0

package/dist/components/ai-webhook-config/ai-webhook-config.js

@@ -0,0 +1,358 @@
+import { css as b, LitElement as m, nothing as v, html as i } from "lit";
+import { property as u, state as p, customElement as f } from "lit/decorators.js";
+import { h as w, r as y, f as _ } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-button/cg-button.js";
+import "../cg-input/cg-input.js";
+import "../cg-switch/cg-switch.js";
+import "../cg-chip/cg-chip.js";
+import "../cg-badge/cg-badge.js";
+var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, c = (e, t, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? $(t, r) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (o = (a ? l(t, r, o) : l(o)) || o);
+  return a && o && k(t, r, o), o;
+};
+let s = class extends m {
+  constructor() {
+    super(...arguments), this.webhooks = [], this.availableEvents = [], this._showForm = !1, this._newUrl = "", this._selectedEvents = /* @__PURE__ */ new Set(), this._urlError = "";
+  }
+  // ─── Form lifecycle ─────────────────────────────────────────────────────
+  _toggleForm() {
+    this._showForm = !this._showForm, this._newUrl = "", this._urlError = "", this._selectedEvents = /* @__PURE__ */ new Set();
+  }
+  _onUrlInput(e) {
+    const t = e.detail;
+    this._newUrl = t?.value ?? e.target.value ?? "", this._urlError = "";
+  }
+  _toggleEvent(e) {
+    const t = new Set(this._selectedEvents);
+    t.has(e) ? t.delete(e) : t.add(e), this._selectedEvents = t;
+  }
+  _onCreate() {
+    if (!this._newUrl) {
+      this._urlError = "URL is required";
+      return;
+    }
+    if (!/^https:\/\//i.test(this._newUrl)) {
+      this._urlError = "URL must use HTTPS";
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("ai-webhook-create", {
+      bubbles: !0,
+      composed: !0,
+      detail: { url: this._newUrl, events: [...this._selectedEvents] }
+    })), this._toggleForm();
+  }
+  // ─── Per-webhook handlers ───────────────────────────────────────────────
+  _onToggle(e, t) {
+    const r = t.detail;
+    this.dispatchEvent(new CustomEvent("ai-webhook-toggle", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, active: r?.checked ?? !e.active }
+    }));
+  }
+  _onDelete(e) {
+    this.dispatchEvent(new CustomEvent("ai-webhook-delete", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id }
+    }));
+  }
+  _onTest(e) {
+    this.dispatchEvent(new CustomEvent("ai-webhook-test", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, url: e.url }
+    }));
+  }
+  // ─── Helpers ────────────────────────────────────────────────────────────
+  _deliveryVariant(e) {
+    return e >= 200 && e < 300 ? "success" : e >= 400 && e < 500 ? "warning" : e >= 500 ? "danger" : "neutral";
+  }
+  _relativeTime(e) {
+    const t = new Date(e);
+    if (isNaN(t.getTime())) return String(e);
+    const r = t.getTime() - Date.now(), a = Math.abs(r), o = 6e4, n = 60 * o, l = 24 * n, h = 7 * l;
+    let d, g;
+    a < n ? (d = Math.round(r / o), g = "minute") : a < l ? (d = Math.round(r / n), g = "hour") : a < h ? (d = Math.round(r / l), g = "day") : (d = Math.round(r / h), g = "week");
+    try {
+      return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(d, g);
+    } catch {
+      return String(e);
+    }
+  }
+  // ─── Render ─────────────────────────────────────────────────────────────
+  render() {
+    return i`
+      <div class="header">
+        <h3>Webhooks</h3>
+        <cg-button
+          variant=${this._showForm ? "secondary" : "primary"}
+          size="sm"
+          @click=${this._toggleForm}
+          aria-label="${this._showForm ? "Cancel new webhook" : "Add webhook"}"
+        >${this._showForm ? "Cancel" : "Add webhook"}</cg-button>
+      </div>
+
+      ${this._showForm ? i`
+        <div class="form" role="form" aria-label="New webhook">
+          <cg-input
+            type="url"
+            label="Endpoint URL"
+            placeholder="https://example.com/webhook"
+            .value=${this._newUrl}
+            ?error=${!!this._urlError}
+            helper=${this._urlError || "Must use HTTPS in production."}
+            required
+            @cg-input=${this._onUrlInput}
+          ></cg-input>
+
+          ${this.availableEvents.length ? i`
+            <div role="group" aria-label="Subscribed events">
+              <span class="form-events-label">Subscribe to events</span>
+              <div class="form-events">
+                ${this.availableEvents.map((e) => i`
+                  <cg-chip
+                    label=${e}
+                    size="sm"
+                    ?selected=${this._selectedEvents.has(e)}
+                    @click=${() => this._toggleEvent(e)}
+                  ></cg-chip>
+                `)}
+              </div>
+            </div>
+          ` : v}
+
+          <div class="form-actions">
+            <cg-button variant="tertiary" size="sm" @click=${this._toggleForm}>
+              Cancel
+            </cg-button>
+            <cg-button variant="primary" size="sm" @click=${this._onCreate}>
+              Create webhook
+            </cg-button>
+          </div>
+        </div>
+      ` : v}
+
+      ${this.webhooks.length === 0 ? i`
+        <div class="empty" role="status">No webhooks configured yet.</div>
+      ` : i`
+        <div class="webhook-list" role="list" aria-label="Configured webhooks">
+          ${this.webhooks.map((e) => {
+      const t = e.lastDelivery;
+      return i`
+              <div class="webhook-item ${e.disabled ? "is-disabled" : ""}" role="listitem">
+                <div class="webhook-top">
+                  <span class="webhook-url" title=${e.url}>${e.url}</span>
+                  <cg-switch
+                    .checked=${e.active}
+                    ?disabled=${e.disabled}
+                    aria-label="Toggle webhook ${e.url}"
+                    @cg-change=${(r) => this._onToggle(e, r)}
+                  ></cg-switch>
+                </div>
+
+                ${e.events.length ? i`
+                  <div class="webhook-events">
+                    ${e.events.map((r) => i`
+                      <cg-chip label=${r} size="sm" variant="info"></cg-chip>
+                    `)}
+                  </div>
+                ` : v}
+
+                <div class="webhook-footer">
+                  <div class="last-delivery">
+                    ${t ? i`
+                      <cg-badge
+                        variant=${this._deliveryVariant(t.status)}
+                        label=${String(t.status)}
+                        size="sm"
+                      ></cg-badge>
+                      <span>${this._relativeTime(t.at)}</span>
+                      ${t.retries && t.retries > 0 ? i`
+                        <span class="delivery-retries">· ${t.retries} ${t.retries === 1 ? "retry" : "retries"}</span>
+                      ` : v}
+                    ` : e.lastTriggered ? i`
+                      <span>Last triggered ${e.lastTriggered}</span>
+                    ` : i`
+                      <span>Never triggered</span>
+                    `}
+                  </div>
+                  <div class="webhook-actions">
+                    <cg-button variant="secondary" size="sm" @click=${() => this._onTest(e)}>
+                      Test
+                    </cg-button>
+                    <cg-button variant="secondary" size="sm" type="danger" @click=${() => this._onDelete(e)}>
+                      Delete
+                    </cg-button>
+                  </div>
+                </div>
+              </div>
+            `;
+    })}
+        </div>
+      `}
+    `;
+  }
+};
+s.styles = [w, y, _, b`
+    :host {
+      display: block;
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-elevation-1);
+      padding: var(--cg-spacing-20);
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      margin-bottom: var(--cg-spacing-16);
+    }
+    h3 {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin: 0;
+    }
+
+    /* ── Add-webhook form ── */
+    .form {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-16);
+      background: var(--cg-overlay-dark-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .form-events {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-6);
+    }
+    .form-events-label {
+      width: 100%;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      letter-spacing: var(--cg-letter-spacing-wide);
+      text-transform: uppercase;
+      font-weight: var(--cg-font-weight-bold);
+    }
+    .form-actions {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      justify-content: flex-end;
+    }
+
+    /* ── Webhook list ── */
+    .webhook-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    .webhook-item {
+      padding: var(--cg-spacing-16);
+      background: var(--cg-color-surface-cards-emphasis);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+    .webhook-item.is-disabled { opacity: 0.65; }
+
+    .webhook-top {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+    }
+    .webhook-url {
+      flex: 1;
+      min-width: 0;
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .webhook-events {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-4);
+    }
+
+    /* ── Footer (last delivery + actions) ── */
+    .webhook-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      flex-wrap: wrap;
+    }
+
+    .last-delivery {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-variant-numeric: tabular-nums;
+    }
+    .last-delivery cg-badge {
+      font-variant-numeric: tabular-nums;
+    }
+    .delivery-retries {
+      color: var(--cg-color-status-warning-text-default);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    .webhook-actions {
+      display: flex;
+      gap: var(--cg-spacing-6);
+      flex-shrink: 0;
+    }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+c([
+  u({ type: Array })
+], s.prototype, "webhooks", 2);
+c([
+  u({ type: Array })
+], s.prototype, "availableEvents", 2);
+c([
+  p()
+], s.prototype, "_showForm", 2);
+c([
+  p()
+], s.prototype, "_newUrl", 2);
+c([
+  p()
+], s.prototype, "_selectedEvents", 2);
+c([
+  p()
+], s.prototype, "_urlError", 2);
+s = c([
+  f("ai-webhook-config")
+], s);
+export {
+  s as AiWebhookConfig
+};
+//# sourceMappingURL=ai-webhook-config.js.map

package/dist/components/ai-webhook-config/ai-webhook-config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-webhook-config.js","sources":["../../../src/components/ai-webhook-config/ai-webhook-config.ts"],"sourcesContent":["/**\n * @element ai-webhook-config\n * Webhook endpoint management — Stripe / Svix style. Composed entirely\n * from design-system primitives:\n *   • <cg-input>   for the URL field (HTTPS validation)\n *   • <cg-button>  for Add / Cancel / Create / Test / Delete actions\n *   • <cg-switch>  for the on/off toggle\n *   • <cg-chip>    for selectable events in the form + event tags on rows\n *   • <cg-badge>   for the last-delivery HTTP status code (success/warning/danger)\n * Lists configured webhooks with URL, event chips, last delivery status\n * (code + retries + relative time), test + delete actions, and an inline\n * Add form with HTTPS-validated input + selectable event picker.\n *\n * @example\n * ```html\n * <ai-webhook-config\n *   .webhooks=${[{ id: 'wh1', url: 'https://example.com/hook', events: ['model.complete'], active: true,\n *                   lastDelivery: { status: 200, at: Date.now() - 3600000 } }]}\n *   .availableEvents=${['model.complete', 'model.error', 'usage.limit']}\n * ></ai-webhook-config>\n * ```\n *\n * @prop {WebhookEntry[]} webhooks - Configured webhook entries\n * @prop {string[]} availableEvents - Event types available for subscription\n *\n * @fires {CustomEvent<{url, events}>} ai-webhook-create\n * @fires {CustomEvent<{id, active}>} ai-webhook-toggle\n * @fires {CustomEvent<{id}>} ai-webhook-delete\n * @fires {CustomEvent<{id, url}>} ai-webhook-test\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-input/cg-input.js';\nimport '../cg-switch/cg-switch.js';\nimport '../cg-chip/cg-chip.js';\nimport '../cg-badge/cg-badge.js';\n\nexport interface WebhookDelivery {\n  /** HTTP status code from the last delivery attempt. */\n  status: number;\n  /** ISO date or epoch ms of the last attempt. */\n  at: string | number;\n  /** Number of retries that preceded the final result. */\n  retries?: number;\n}\n\nexport interface WebhookEntry {\n  id: string;\n  url: string;\n  events: string[];\n  active: boolean;\n  /** Stripe / Svix-style: most recent delivery result. */\n  lastDelivery?: WebhookDelivery;\n  /** Auto-disabled after consecutive failures. */\n  disabled?: boolean;\n  /** @deprecated use lastDelivery instead */\n  lastTriggered?: string;\n}\n\n@customElement('ai-webhook-config')\nexport class AiWebhookConfig extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-elevation-1);\n      padding: var(--cg-spacing-20);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    h3 {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0;\n    }\n\n    /* ── Add-webhook form ── */\n    .form {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16);\n      background: var(--cg-overlay-dark-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .form-events {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n    }\n    .form-events-label {\n      width: 100%;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      letter-spacing: var(--cg-letter-spacing-wide);\n      text-transform: uppercase;\n      font-weight: var(--cg-font-weight-bold);\n    }\n    .form-actions {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      justify-content: flex-end;\n    }\n\n    /* ── Webhook list ── */\n    .webhook-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .webhook-item {\n      padding: var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-emphasis);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n    .webhook-item.is-disabled { opacity: 0.65; }\n\n    .webhook-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n    }\n    .webhook-url {\n      flex: 1;\n      min-width: 0;\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .webhook-events {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-4);\n    }\n\n    /* ── Footer (last delivery + actions) ── */\n    .webhook-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex-wrap: wrap;\n    }\n\n    .last-delivery {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-variant-numeric: tabular-nums;\n    }\n    .last-delivery cg-badge {\n      font-variant-numeric: tabular-nums;\n    }\n    .delivery-retries {\n      color: var(--cg-color-status-warning-text-default);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    .webhook-actions {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      flex-shrink: 0;\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) webhooks: WebhookEntry[] = [];\n  @property({ type: Array }) availableEvents: string[] = [];\n\n  @state() private _showForm = false;\n  @state() private _newUrl = '';\n  @state() private _selectedEvents = new Set<string>();\n  @state() private _urlError = '';\n\n  // ─── Form lifecycle ─────────────────────────────────────────────────────\n\n  private _toggleForm(): void {\n    this._showForm = !this._showForm;\n    this._newUrl = '';\n    this._urlError = '';\n    this._selectedEvents = new Set();\n  }\n\n  private _onUrlInput(e: Event): void {\n    const detail = (e as CustomEvent<{ value: string }>).detail;\n    this._newUrl = detail?.value ?? (e.target as HTMLInputElement).value ?? '';\n    this._urlError = '';\n  }\n\n  private _toggleEvent(evt: string): void {\n    const next = new Set(this._selectedEvents);\n    if (next.has(evt)) next.delete(evt); else next.add(evt);\n    this._selectedEvents = next;\n  }\n\n  private _onCreate(): void {\n    if (!this._newUrl) {\n      this._urlError = 'URL is required';\n      return;\n    }\n    if (!/^https:\\/\\//i.test(this._newUrl)) {\n      this._urlError = 'URL must use HTTPS';\n      return;\n    }\n    this.dispatchEvent(new CustomEvent('ai-webhook-create', {\n      bubbles: true, composed: true,\n      detail: { url: this._newUrl, events: [...this._selectedEvents] },\n    }));\n    this._toggleForm();\n  }\n\n  // ─── Per-webhook handlers ───────────────────────────────────────────────\n\n  private _onToggle(wh: WebhookEntry, e: Event): void {\n    const detail = (e as CustomEvent<{ checked: boolean }>).detail;\n    this.dispatchEvent(new CustomEvent('ai-webhook-toggle', {\n      bubbles: true, composed: true,\n      detail: { id: wh.id, active: detail?.checked ?? !wh.active },\n    }));\n  }\n\n  private _onDelete(wh: WebhookEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-webhook-delete', {\n      bubbles: true, composed: true,\n      detail: { id: wh.id },\n    }));\n  }\n\n  private _onTest(wh: WebhookEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-webhook-test', {\n      bubbles: true, composed: true,\n      detail: { id: wh.id, url: wh.url },\n    }));\n  }\n\n  // ─── Helpers ────────────────────────────────────────────────────────────\n\n  private _deliveryVariant(status: number): 'success' | 'warning' | 'danger' | 'neutral' {\n    if (status >= 200 && status < 300) return 'success';\n    if (status >= 400 && status < 500) return 'warning';\n    if (status >= 500) return 'danger';\n    return 'neutral';\n  }\n\n  private _relativeTime(input: string | number): string {\n    const date = new Date(input);\n    if (isNaN(date.getTime())) return String(input);\n    const diffMs = date.getTime() - Date.now();\n    const abs = Math.abs(diffMs);\n    const min = 60_000, hr = 60 * min, day = 24 * hr, week = 7 * day;\n    let value: number, unit: Intl.RelativeTimeFormatUnit;\n    if (abs < hr) { value = Math.round(diffMs / min); unit = 'minute'; }\n    else if (abs < day) { value = Math.round(diffMs / hr); unit = 'hour'; }\n    else if (abs < week) { value = Math.round(diffMs / day); unit = 'day'; }\n    else { value = Math.round(diffMs / week); unit = 'week'; }\n    try { return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(value, unit); }\n    catch { return String(input); }\n  }\n\n  // ─── Render ─────────────────────────────────────────────────────────────\n\n  override render() {\n    return html`\n      <div class=\"header\">\n        <h3>Webhooks</h3>\n        <cg-button\n          variant=${this._showForm ? 'secondary' : 'primary'}\n          size=\"sm\"\n          @click=${this._toggleForm}\n          aria-label=\"${this._showForm ? 'Cancel new webhook' : 'Add webhook'}\"\n        >${this._showForm ? 'Cancel' : 'Add webhook'}</cg-button>\n      </div>\n\n      ${this._showForm ? html`\n        <div class=\"form\" role=\"form\" aria-label=\"New webhook\">\n          <cg-input\n            type=\"url\"\n            label=\"Endpoint URL\"\n            placeholder=\"https://example.com/webhook\"\n            .value=${this._newUrl}\n            ?error=${!!this._urlError}\n            helper=${this._urlError || 'Must use HTTPS in production.'}\n            required\n            @cg-input=${this._onUrlInput}\n          ></cg-input>\n\n          ${this.availableEvents.length ? html`\n            <div role=\"group\" aria-label=\"Subscribed events\">\n              <span class=\"form-events-label\">Subscribe to events</span>\n              <div class=\"form-events\">\n                ${this.availableEvents.map(evt => html`\n                  <cg-chip\n                    label=${evt}\n                    size=\"sm\"\n                    ?selected=${this._selectedEvents.has(evt)}\n                    @click=${() => this._toggleEvent(evt)}\n                  ></cg-chip>\n                `)}\n              </div>\n            </div>\n          ` : nothing}\n\n          <div class=\"form-actions\">\n            <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._toggleForm}>\n              Cancel\n            </cg-button>\n            <cg-button variant=\"primary\" size=\"sm\" @click=${this._onCreate}>\n              Create webhook\n            </cg-button>\n          </div>\n        </div>\n      ` : nothing}\n\n      ${this.webhooks.length === 0 ? html`\n        <div class=\"empty\" role=\"status\">No webhooks configured yet.</div>\n      ` : html`\n        <div class=\"webhook-list\" role=\"list\" aria-label=\"Configured webhooks\">\n          ${this.webhooks.map(wh => {\n            const lastDelivery = wh.lastDelivery;\n            return html`\n              <div class=\"webhook-item ${wh.disabled ? 'is-disabled' : ''}\" role=\"listitem\">\n                <div class=\"webhook-top\">\n                  <span class=\"webhook-url\" title=${wh.url}>${wh.url}</span>\n                  <cg-switch\n                    .checked=${wh.active}\n                    ?disabled=${wh.disabled}\n                    aria-label=\"Toggle webhook ${wh.url}\"\n                    @cg-change=${(e: Event) => this._onToggle(wh, e)}\n                  ></cg-switch>\n                </div>\n\n                ${wh.events.length ? html`\n                  <div class=\"webhook-events\">\n                    ${wh.events.map(e => html`\n                      <cg-chip label=${e} size=\"sm\" variant=\"info\"></cg-chip>\n                    `)}\n                  </div>\n                ` : nothing}\n\n                <div class=\"webhook-footer\">\n                  <div class=\"last-delivery\">\n                    ${lastDelivery ? html`\n                      <cg-badge\n                        variant=${this._deliveryVariant(lastDelivery.status)}\n                        label=${String(lastDelivery.status)}\n                        size=\"sm\"\n                      ></cg-badge>\n                      <span>${this._relativeTime(lastDelivery.at)}</span>\n                      ${lastDelivery.retries && lastDelivery.retries > 0 ? html`\n                        <span class=\"delivery-retries\">· ${lastDelivery.retries} ${lastDelivery.retries === 1 ? 'retry' : 'retries'}</span>\n                      ` : nothing}\n                    ` : wh.lastTriggered ? html`\n                      <span>Last triggered ${wh.lastTriggered}</span>\n                    ` : html`\n                      <span>Never triggered</span>\n                    `}\n                  </div>\n                  <div class=\"webhook-actions\">\n                    <cg-button variant=\"secondary\" size=\"sm\" @click=${() => this._onTest(wh)}>\n                      Test\n                    </cg-button>\n                    <cg-button variant=\"secondary\" size=\"sm\" type=\"danger\" @click=${() => this._onDelete(wh)}>\n                      Delete\n                    </cg-button>\n                  </div>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-webhook-config': AiWebhookConfig;\n  }\n}\n"],"names":["AiWebhookConfig","LitElement","detail","evt","next","wh","e","status","input","date","diffMs","abs","min","hr","day","week","value","unit","html","nothing","lastDelivery","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-workflow-builder/ai-workflow-builder.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+interface WorkflowStep {
+    id: string;
+    label: string;
+    type: 'start' | 'agent' | 'tool' | 'condition' | 'end';
+    status?: 'pending' | 'active' | 'complete' | 'error' | 'skipped';
+    description?: string;
+    next?: string[];
+}
+export declare class AiWorkflowBuilder extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    steps: WorkflowStep[];
+    heading: string;
+    private _activeIndex;
+    private _shouldFocusActive;
+    private _stepEls;
+    private _getTypeIcon;
+    private _getStatusIcon;
+    private _handleStepClick;
+    private _handleStepKeyDown;
+    updated(changed: Map<string, unknown>): void;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-workflow-builder.d.ts.map

package/dist/components/ai-workflow-builder/ai-workflow-builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-workflow-builder.d.ts","sourceRoot":"","sources":["../../../src/components/ai-workflow-builder/ai-workflow-builder.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,KAAK,CAAC;IACvD,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IACjE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAkEnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,KAAK,EAAE,YAAY,EAAE,CAAM;IAC1B,OAAO,EAAE,MAAM,CAAc;IAEhD,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,kBAAkB,CAAS;IAEzB,OAAO,CAAC,QAAQ,CAA2B;IAE9D,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,kBAAkB;IAmCjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAcrC,MAAM;CAgChB"}

package/dist/components/ai-workflow-builder/ai-workflow-builder.js

@@ -0,0 +1,179 @@
+import { css as v, LitElement as h, html as t, nothing as d } from "lit";
+import { property as g, state as u, queryAll as p, customElement as f } from "lit/decorators.js";
+import { h as b, r as w, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+var k = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (e, r, o, a) => {
+  for (var i = a > 1 ? void 0 : a ? m(r, o) : r, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (i = (a ? l(r, o, i) : l(i)) || i);
+  return a && i && k(r, o, i), i;
+};
+let s = class extends h {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.steps = [], this.heading = "Workflow", this._activeIndex = 0, this._shouldFocusActive = !1;
+  }
+  _getTypeIcon(e) {
+    return e === "start" ? t`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>` : e === "agent" ? t`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="8" width="18" height="12" rx="3"/><circle cx="9" cy="14" r="1.5"/><circle cx="15" cy="14" r="1.5"/><path d="M12 2v4M8 8V6a4 4 0 018 0v2"/></svg>` : e === "tool" ? t`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg>` : e === "condition" ? t`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l10 10-10 10L2 12z"/></svg>` : e === "end" ? t`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>` : t`<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg>`;
+  }
+  _getStatusIcon(e) {
+    return e === "complete" ? t`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>` : e === "error" ? t`<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>` : e === "active" ? t`<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="currentColor"/></svg>` : e === "pending" ? t`<svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/></svg>` : t`<span>--</span>`;
+  }
+  _handleStepClick(e, r) {
+    this._activeIndex = r, this.dispatchEvent(new CustomEvent("ai-workflow-step-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, label: e.label, type: e.type, status: e.status }
+    }));
+  }
+  _handleStepKeyDown(e, r, o) {
+    const a = this.steps.length;
+    if (a !== 0)
+      switch (e.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          e.preventDefault(), this._activeIndex = (o + 1) % a, this._shouldFocusActive = !0;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          e.preventDefault(), this._activeIndex = (o - 1 + a) % a, this._shouldFocusActive = !0;
+          break;
+        case "Home":
+          e.preventDefault(), this._activeIndex = 0, this._shouldFocusActive = !0;
+          break;
+        case "End":
+          e.preventDefault(), this._activeIndex = a - 1, this._shouldFocusActive = !0;
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), this._handleStepClick(r, o);
+          break;
+      }
+  }
+  updated(e) {
+    if (super.updated(e), e.has("steps") && this._activeIndex >= this.steps.length && (this._activeIndex = Math.max(0, this.steps.length - 1)), this._shouldFocusActive) {
+      this._shouldFocusActive = !1;
+      const o = this._stepEls?.[this._activeIndex];
+      o && o.focus();
+    }
+  }
+  render() {
+    return this.steps.length === 0 ? t`<div class="container"><div class="empty">No workflow defined</div></div>` : t`
+      <div class="container" role="figure" aria-label="${this.heading}">
+        <div class="header">
+          <span class="title">${this.heading}</span>
+          <span class="step-count">${this.steps.length} steps</span>
+        </div>
+        <div class="flow" role="toolbar" aria-label="${this.heading} workflow steps (vertical orientation)" aria-orientation="vertical">
+          ${this.steps.map((e, r) => t`
+            ${r > 0 ? t`<div class="connector ${e.status === "active" || e.status === "complete" ? "active" : ""}"></div>` : d}
+            <div class="step ${e.status || "pending"}"
+              tabindex=${r === this._activeIndex ? "0" : "-1"}
+              role="button"
+              aria-label="${e.label}"
+              aria-current=${e.status === "active" ? "step" : d}
+              @click=${() => this._handleStepClick(e, r)}
+              @keydown=${(o) => this._handleStepKeyDown(o, e, r)}>
+              <div class="step-icon ${e.type}" aria-hidden="true">${this._getTypeIcon(e.type)}</div>
+              <div class="step-info">
+                <div class="step-type">${e.type}</div>
+                <div class="step-label">${e.label}</div>
+                ${e.description ? t`<div class="step-desc">${e.description}</div>` : d}
+              </div>
+              <span class="step-status" aria-hidden="true">${this._getStatusIcon(e.status || "pending")}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [b, w, x, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150); padding: var(--cg-spacing-16); overflow: auto;
+    }
+
+    .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--cg-spacing-16); }
+    .title { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text); }
+    .step-count { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); }
+
+    .flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
+
+    .step-wrapper { display: flex; flex-direction: column; align-items: center; }
+
+    .connector { width: var(--cg-spacing-2); height: var(--cg-spacing-20); background: var(--cg-color-surface-cards-border); }
+    .connector.active { background: var(--cg-color-action-primary-background-default); }
+
+    .step {
+      display: flex; align-items: center; gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-base-background);
+      min-width: var(--cg-spacing-96); cursor: pointer; transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .step:hover { border-color: var(--cg-color-input-border-hover); }
+    .step:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-spacing-2) var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+    .step:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .step.active { border-color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }
+    .step.complete { border-color: var(--cg-color-status-success-text-default); }
+    .step.error { border-color: var(--cg-color-status-error-text-default); }
+    .step.skipped { opacity: 0.5; }
+
+    .step-icon {
+      width: var(--cg-spacing-24); height: var(--cg-spacing-24); border-radius: var(--cg-border-radius-100);
+      display: flex; align-items: center; justify-content: center;
+      font-size: var(--cg-font-size-xs); flex-shrink: 0;
+    }
+    .step-icon.start { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }
+    .step-icon.agent { background: var(--cg-overlay-accent-light); color: var(--cg-color-surface-base-text); }
+    .step-icon.tool { background: var(--cg-color-status-info-background-default); color: var(--cg-color-status-info-text-default); }
+    .step-icon.condition { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }
+    .step-icon.end { background: var(--cg-color-surface-container-background); color: var(--cg-color-input-text-placeholder); }
+
+    .step-info { flex: 1; min-width: 0; }
+    .step-label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+    .step-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); margin-top: var(--cg-spacing-2); }
+    .step-type { font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wider); color: var(--cg-color-input-text-placeholder); }
+
+    .step-status { font-size: var(--cg-font-size-xs); flex-shrink: 0; }
+
+    .branch { display: flex; gap: var(--cg-spacing-16); align-items: flex-start; }
+    .branch-line { width: var(--cg-spacing-1); height: 100%; background: var(--cg-color-surface-cards-border); }
+
+    .empty { text-align: center; padding: var(--cg-spacing-32); color: var(--cg-color-input-text-placeholder); font-size: var(--cg-font-size-sm); }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .container { border-radius: var(--cg-border-radius-full); }
+  `];
+c([
+  g({ reflect: !0 })
+], s.prototype, "rounded", 2);
+c([
+  g({ type: Array })
+], s.prototype, "steps", 2);
+c([
+  g({ type: String })
+], s.prototype, "heading", 2);
+c([
+  u()
+], s.prototype, "_activeIndex", 2);
+c([
+  u()
+], s.prototype, "_shouldFocusActive", 2);
+c([
+  p(".step")
+], s.prototype, "_stepEls", 2);
+s = c([
+  f("ai-workflow-builder")
+], s);
+export {
+  s as AiWorkflowBuilder
+};
+//# sourceMappingURL=ai-workflow-builder.js.map