@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,54 +1,34 @@
-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;
+import { css as v, LitElement as u, nothing as b, html as o } from "lit";
+import { property as d, state as g, customElement as f } from "lit/decorators.js";
+import { h as p, r as h, f as m } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (e, r, c, i) => {
+  for (var t = i > 1 ? void 0 : i ? k(r, c) : r, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (t = (i ? l(r, c, t) : l(t)) || t);
+  return i && t && w(r, c, t), t;
 };
-let s = class extends m {
+let a = class extends u {
   constructor() {
-    super(...arguments), this.webhooks = [], this.availableEvents = [], this._showForm = !1, this._newUrl = "", this._selectedEvents = /* @__PURE__ */ new Set(), this._urlError = "";
+    super(...arguments), this.webhooks = [], this.availableEvents = [], this._showForm = !1, this._newUrl = "", this._selectedEvents = /* @__PURE__ */ new Set();
   }
-  // ─── 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 = "";
+    this._showForm = !this._showForm, this._newUrl = "", this._selectedEvents = /* @__PURE__ */ new Set();
   }
   _toggleEvent(e) {
-    const t = new Set(this._selectedEvents);
-    t.has(e) ? t.delete(e) : t.add(e), this._selectedEvents = t;
+    const r = new Set(this._selectedEvents);
+    r.has(e) ? r.delete(e) : r.add(e), this._selectedEvents = r;
   }
   _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", {
+    this._newUrl && (this.dispatchEvent(new CustomEvent("ai-webhook-create", {
       bubbles: !0,
       composed: !0,
       detail: { url: this._newUrl, events: [...this._selectedEvents] }
-    })), this._toggleForm();
+    })), this._toggleForm());
   }
-  // ─── Per-webhook handlers ───────────────────────────────────────────────
-  _onToggle(e, t) {
-    const r = t.detail;
+  _onToggle(e) {
     this.dispatchEvent(new CustomEvent("ai-webhook-toggle", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, active: r?.checked ?? !e.active }
+      detail: { id: e.id, active: !e.active }
     }));
   }
   _onDelete(e) {
@@ -65,146 +45,86 @@ let s = class extends m {
       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`
+    return o`
       <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>
+        <button class="add-btn" @click=${this._toggleForm}
+                aria-label="${this._showForm ? "Cancel" : "Add webhook"}"
+                tabindex="0">
+          ${this._showForm ? "Cancel" : "+ Add Webhook"}
+        </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}
-
+      ${this._showForm ? o`
+        <div class="form" role="form" aria-label="New webhook form">
+          <div class="form-row">
+            <input type="url" placeholder="https://example.com/webhook"
+                   .value=${this._newUrl}
+                   @input=${(e) => {
+      this._newUrl = e.target.value;
+    }}
+                   aria-label="Webhook URL" tabindex="0" />
+          </div>
+          <div class="events-select" role="group" aria-label="Select events">
+            ${this.availableEvents.map((e) => o`
+              <button class="event-chip"
+                      aria-pressed=${this._selectedEvents.has(e) ? "true" : "false"}
+                      @click=${() => this._toggleEvent(e)}
+                      tabindex="0">
+                ${e}
+              </button>
+            `)}
+          </div>
           <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>
+            <button class="btn-sm" @click=${this._toggleForm} tabindex="0">Cancel</button>
+            <button class="btn-sm primary" @click=${this._onCreate} tabindex="0">Create</button>
           </div>
         </div>
-      ` : v}
-
-      ${this.webhooks.length === 0 ? i`
-        <div class="empty" role="status">No webhooks configured yet.</div>
-      ` : i`
+      ` : b}
+      ${this.webhooks.length === 0 ? o`
+        <div class="empty" role="status">No webhooks configured.</div>
+      ` : o`
         <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>
+          ${this.webhooks.map((e) => o`
+            <div class="webhook-item" role="listitem">
+              <div class="webhook-top">
+                <span class="webhook-url">${e.url}</span>
+                <label class="toggle-switch">
+                  <input type="checkbox" .checked=${e.active}
+                         @change=${() => this._onToggle(e)}
+                         aria-label="Toggle webhook ${e.url}" />
+                  <span class="toggle-track"></span>
+                </label>
+              </div>
+              <div class="webhook-events">
+                ${e.events.map((r) => o`<span class="event-tag">${r}</span>`)}
+              </div>
+              <div class="webhook-footer">
+                <span class="last-triggered">
+                  ${e.lastTriggered ? `Last triggered: ${e.lastTriggered}` : "Never triggered"}
+                </span>
+                <div class="webhook-actions">
+                  <button class="btn-sm" @click=${() => this._onTest(e)}
+                          aria-label="Test webhook" tabindex="0">Test</button>
+                  <button class="btn-sm danger" @click=${() => this._onDelete(e)}
+                          aria-label="Delete webhook" tabindex="0">Delete</button>
                 </div>
               </div>
-            `;
-    })}
+            </div>
+          `)}
         </div>
       `}
     `;
   }
 };
-s.styles = [w, y, _, b`
+a.styles = [p, h, m, v`
     :host {
-      display: block;
-      background: var(--cg-color-surface-cards-background);
+      background: var(--cg-color-surface-base-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;
+      padding: var(--cg-spacing-16);
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     :host([hidden]) { display: none; }
 
@@ -212,48 +132,139 @@ s.styles = [w, y, _, b`
       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);
+      padding-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      margin-bottom: var(--cg-spacing-12);
     }
+
     h3 {
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
       margin: 0;
     }
 
-    /* ── Add-webhook form ── */
+    .add-btn {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-container-background);
+      border: none;
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      font-family: inherit;
+      transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .add-btn:hover {
+      filter: brightness(1.1);
+      transform: translateY(calc(-1 * var(--cg-spacing-1)));
+    }
+
+    .add-btn:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
     .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);
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-surface-inset-background);
       border-radius: var(--cg-border-radius-100);
       margin-bottom: var(--cg-spacing-12);
     }
-    .form-events {
+
+    .form-row {
+      display: flex;
+      gap: var(--cg-spacing-8);
+    }
+
+    input[type="url"] {
+      flex: 1;
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-family: var(--cg-font-family-mono);
+    }
+
+    input[type="url"]:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: -2px;
+    }
+
+    .events-select {
       display: flex;
       flex-wrap: wrap;
-      gap: var(--cg-spacing-6);
+      gap: var(--cg-spacing-4);
     }
-    .form-events-label {
-      width: 100%;
+
+    .event-chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
       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);
+      cursor: pointer;
+      font-family: inherit;
     }
+
+    .event-chip:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .event-chip[aria-pressed="true"] {
+      background: var(--cg-overlay-accent-strong);
+      border-color: var(--cg-color-surface-base-text);
+      color: var(--cg-color-surface-base-text);
+    }
+
     .form-actions {
       display: flex;
       gap: var(--cg-spacing-8);
       justify-content: flex-end;
     }
 
-    /* ── Webhook list ── */
+    .btn-sm {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      font-family: inherit;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .btn-sm:hover {
+      border-color: var(--cg-color-surface-base-text);
+      color: var(--cg-color-surface-base-text);
+      transform: translateY(calc(-1 * var(--cg-spacing-1)));
+    }
+
+    .btn-sm:focus-visible {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .btn-sm.primary {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-container-background);
+      border-color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .btn-sm.primary:hover {
+      filter: brightness(1.1);
+    }
+
     .webhook-list {
       display: flex;
       flex-direction: column;
@@ -261,24 +272,21 @@ s.styles = [w, y, _, b`
     }
 
     .webhook-item {
-      padding: var(--cg-spacing-16);
-      background: var(--cg-color-surface-cards-emphasis);
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-surface-inset-background);
       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);
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-6);
     }
+
     .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);
@@ -287,72 +295,124 @@ s.styles = [w, y, _, b`
       white-space: nowrap;
     }
 
+    .toggle-switch {
+      position: relative;
+      display: inline-block;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-16);
+      flex-shrink: 0;
+    }
+
+    .toggle-switch input {
+      opacity: 0;
+      width: 0;
+      height: 0;
+      position: absolute;
+    }
+
+    .toggle-track {
+      position: absolute;
+      inset: 0;
+      background: var(--cg-color-surface-base-background);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .toggle-track::after {
+      content: '';
+      position: absolute;
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border-radius: 50%;
+      background: var(--cg-color-input-text-placeholder);
+      top: var(--cg-spacing-2);
+      left: var(--cg-spacing-2);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .toggle-switch input:checked + .toggle-track {
+      background: var(--cg-overlay-accent-strong);
+      border-color: var(--cg-color-surface-base-text);
+    }
+
+    .toggle-switch input:checked + .toggle-track::after {
+      transform: translateX(var(--cg-spacing-12));
+      background: var(--cg-color-action-primary-background-default);
+    }
+
+    .toggle-switch input:focus-visible + .toggle-track {
+      outline: var(--cg-outline-width-default) solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
     .webhook-events {
       display: flex;
       flex-wrap: wrap;
       gap: var(--cg-spacing-4);
+      margin-bottom: var(--cg-spacing-6);
+    }
+
+    .event-tag {
+      padding: var(--cg-spacing-2) var(--cg-spacing-6);
+      background: var(--cg-overlay-accent-medium);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
     }
 
-    /* ── 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);
+    .last-triggered {
       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;
+      gap: var(--cg-spacing-4);
+    }
+
+    .btn-sm.danger {
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-text-default);
+    }
+    .btn-sm.danger:hover {
+      background: var(--cg-color-status-error-background-default);
     }
 
     .empty {
       text-align: center;
-      padding: var(--cg-spacing-32);
+      padding: var(--cg-spacing-24);
       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([
+s([
+  d({ type: Array })
+], a.prototype, "webhooks", 2);
+s([
+  d({ type: Array })
+], a.prototype, "availableEvents", 2);
+s([
+  g()
+], a.prototype, "_showForm", 2);
+s([
+  g()
+], a.prototype, "_newUrl", 2);
+s([
+  g()
+], a.prototype, "_selectedEvents", 2);
+a = s([
   f("ai-webhook-config")
-], s);
+], a);
 export {
-  s as AiWebhookConfig
+  a as AiWebhookConfig
 };
 //# sourceMappingURL=ai-webhook-config.js.map