@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-debug-console/ai-debug-console.js

@@ -1,38 +1,18 @@
-import { css as p, LitElement as h, nothing as c, html as i } from "lit";
-import { property as l, state as u, query as v, customElement as f } from "lit/decorators.js";
-import { h as b, r as m, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-button/cg-button.js";
-var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, e, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? w(e, t) : e, d = r.length - 1, g; d >= 0; d--)
-    (g = r[d]) && (s = (a ? g(e, t, s) : g(s)) || s);
-  return a && s && x(e, t, s), s;
+import { css as p, LitElement as u, nothing as i, html as t } from "lit";
+import { property as l, state as v, customElement as h } from "lit/decorators.js";
+import { h as b, r as f, f as x } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, s = (r, e, a, c) => {
+  for (var n = c > 1 ? void 0 : c ? m(e, a) : e, d = r.length - 1, g; d >= 0; d--)
+    (g = r[d]) && (n = (c ? g(e, a, n) : g(n)) || n);
+  return c && n && y(e, a, n), n;
 };
-const k = [
-  { id: "all", label: "All" },
-  { id: "request", label: "Requests" },
-  { id: "response", label: "Responses" },
-  { id: "tool", label: "Tools" },
-  { id: "error", label: "Errors" },
-  { id: "info", label: "Info" }
-];
-let o = class extends h {
+let o = class extends u {
   constructor() {
-    super(...arguments), this.rounded = "lg", this.entries = [], this.open = !1, this.maxEntries = 100, this.streaming = !1, this._expanded = /* @__PURE__ */ new Set(), this._filter = "all", this._query = "", this._wasAtBottom = !0;
+    super(...arguments), this.rounded = "lg", this.entries = [], this.open = !1, this.maxEntries = 100, this._expanded = /* @__PURE__ */ new Set();
   }
-  updated(r) {
-    r.has("entries") && this.open && this._wasAtBottom && this._panelEl && this.updateComplete.then(() => {
-      this._panelEl && (this._panelEl.scrollTop = this._panelEl.scrollHeight);
-    });
-  }
-  /** Window onto entries — capped to maxEntries, then filtered + searched. */
   get _visibleEntries() {
-    const r = this.entries.slice(-this.maxEntries), e = this._query.trim().toLowerCase();
-    return r.map((t, a) => ({ entry: t, index: a })).filter(({ entry: t }) => this._filter === "all" || t.type === this._filter).filter(({ entry: t }) => !e || t.content.toLowerCase().includes(e));
-  }
-  _countByType(r) {
-    return r === "all" ? Math.min(this.entries.length, this.maxEntries) : this.entries.slice(-this.maxEntries).filter((e) => e.type === r).length;
+    return this.entries.slice(-this.maxEntries);
   }
-  // ─── Handlers ───────────────────────────────────────────────────────────
   _onToggle() {
     this.open = !this.open, this.dispatchEvent(new CustomEvent("ai-debug-toggle", {
       bubbles: !0,
@@ -40,160 +20,90 @@ let o = class extends h {
       detail: { open: this.open }
     }));
   }
-  _onClear() {
-    this.dispatchEvent(new CustomEvent("ai-debug-clear", {
+  _onClear(r) {
+    r.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-debug-clear", {
       bubbles: !0,
       composed: !0
     }));
   }
-  _toggleEntry(r, e) {
-    const t = new Set(this._expanded);
-    t.has(r) ? t.delete(r) : t.add(r), this._expanded = t, this.dispatchEvent(new CustomEvent("ai-debug-entry-click", {
-      bubbles: !0,
-      composed: !0,
-      detail: { index: r, entry: e }
-    }));
-  }
-  _onPanelScroll(r) {
-    const e = r.target;
-    this._wasAtBottom = e.scrollHeight - e.scrollTop - e.clientHeight < 8;
-  }
-  _onSearch(r) {
-    this._query = r.target.value;
+  _toggleEntry(r) {
+    const e = new Set(this._expanded);
+    e.has(r) ? e.delete(r) : e.add(r), this._expanded = e;
   }
   _formatContent(r) {
     try {
-      return JSON.stringify(JSON.parse(r), null, 2);
+      const e = JSON.parse(r);
+      return JSON.stringify(e, null, 2);
     } catch {
       return r;
     }
   }
   render() {
     const r = this._visibleEntries;
-    return i`
-      <button
-        class="toggle-bar"
-        type="button"
-        @click=${this._onToggle}
-        aria-expanded=${this.open ? "true" : "false"}
-        aria-label="Debug console"
-      >
-        <svg class="chevron ${this.open ? "open" : ""}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="m9 18 6-6-6-6"/>
-        </svg>
+    return t`
+      <div class="toggle-bar" role="button" @click=${this._onToggle}
+              @keydown=${(e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._onToggle());
+    }}
+              aria-expanded=${this.open ? "true" : "false"}
+              aria-label="Debug console"
+              tabindex="0">
+        <span class="chevron ${this.open ? "open" : ""}">&#x25B6;</span>
         <span class="title-text">Debug Console</span>
-        ${this.streaming ? i`<span class="live-dot" aria-hidden="true" title="Streaming"></span>` : c}
-        ${this.entries.length ? i`<span class="badge">${this.entries.length}</span>` : c}
-      </button>
-
-      <div class="panel-wrap" aria-hidden=${this.open ? "false" : "true"}>
-        <div class="panel-inner">
-        <div class="toolbar">
-          ${k.map((e) => {
-      const t = this._countByType(e.id), a = this._filter === e.id;
-      return i`
-              <button
-                class="filter-chip ${a ? "active" : ""}"
-                type="button"
-                @click=${() => {
-        this._filter = e.id;
-      }}
-                aria-pressed=${a ? "true" : "false"}
-              >
-                <span>${e.label}</span>
-                <span class="filter-count">${t}</span>
-              </button>
-            `;
-    })}
-          <label class="search" aria-label="Search entries">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="11" cy="11" r="7"/>
-              <path d="m20 20-3.5-3.5"/>
-            </svg>
-            <input
-              type="search"
-              .value=${this._query}
-              placeholder="Search entries…"
-              @input=${this._onSearch}
-            />
-          </label>
-          ${this.entries.length ? i`
-            <cg-button
-              variant="tertiary"
-              size="sm"
-              @click=${this._onClear}
-              aria-label="Clear all entries"
-            >Clear</cg-button>
-          ` : c}
-        </div>
-
-        <div
-          class="panel"
-          role="log"
-          aria-live="polite"
-          aria-label="Debug entries"
-          @scroll=${this._onPanelScroll}
-        >
-          ${r.length === 0 ? i`
-            <div class="empty">${this._query || this._filter !== "all" ? "No entries match the current filter." : "No debug entries yet."}</div>
-          ` : i`
+        ${this.entries.length ? t`<span class="badge">${this.entries.length}</span>` : i}
+        ${this.open && this.entries.length ? t`
+          <button class="clear-btn" @click=${this._onClear}
+                  aria-label="Clear entries" tabindex="0">Clear</button>
+        ` : i}
+      </div>
+      ${this.open ? t`
+        <div class="panel" role="log" aria-label="Debug entries">
+          ${r.length === 0 ? t`
+            <div class="empty">No debug entries.</div>
+          ` : t`
             <div class="entry-list">
-              ${r.map(({ entry: e, index: t }) => {
-      const a = this._expanded.has(t);
-      return i`
-                  <div class="entry ${a ? "open" : ""}">
-                    <button
-                      class="entry-header"
-                      type="button"
-                      @click=${() => this._toggleEntry(t, e)}
-                      aria-expanded=${a ? "true" : "false"}
-                    >
-                      <svg class="entry-arrow ${a ? "open" : ""}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                        <path d="m9 18 6-6-6-6"/>
-                      </svg>
-                      <span class="type-dot type-${e.type}" aria-hidden="true"></span>
-                      <span class="type-label label-${e.type}">${e.type}</span>
-                      <span class="entry-ts">${e.timestamp}</span>
-                      <span class="entry-preview">${e.content.substring(0, 80)}</span>
-                      ${e.duration != null ? i`<span class="entry-duration">${e.duration} ms</span>` : c}
-                    </button>
-                    <div class="entry-content-wrap" aria-hidden=${a ? "false" : "true"}>
-                      <div class="entry-content-inner">
-                        <div class="entry-content">${this._formatContent(e.content)}</div>
-                      </div>
-                    </div>
-                  </div>
-                `;
-    })}
+              ${r.map((e, a) => t`
+                <div class="entry">
+                  <button class="entry-header"
+                          @click=${() => this._toggleEntry(a)}
+                          aria-expanded=${this._expanded.has(a) ? "true" : "false"}
+                          tabindex="0">
+                    <span class="type-dot type-${e.type}"></span>
+                    <span class="type-label label-${e.type}">${e.type}</span>
+                    <span class="entry-ts">${e.timestamp}</span>
+                    <span class="entry-preview">${e.content.substring(0, 60)}</span>
+                    ${e.duration != null ? t`
+                      <span class="entry-duration">${e.duration}ms</span>
+                    ` : i}
+                  </button>
+                  ${this._expanded.has(a) ? t`
+                    <div class="entry-content">${this._formatContent(e.content)}</div>
+                  ` : i}
+                </div>
+              `)}
             </div>
           `}
         </div>
-        </div>
-      </div>
+      ` : i}
     `;
   }
 };
-o.styles = [b, m, y, p`
+o.styles = [b, f, x, p`
     :host {
-      display: block;
-      /* surface-cards-background is one tone above the page; -code-background
-         resolves to the page color in dark mode so the console blended in. */
-      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);
+      background: var(--cg-color-code-background);
+      color: var(--cg-color-code-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
       border-radius: var(--cg-border-radius-150);
-      box-shadow: var(--cg-elevation-1);
       overflow: hidden;
       animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
     }
     :host([hidden]) { display: none; }
 
-    /* ── Toggle bar ── */
     .toggle-bar {
       display: flex;
       align-items: center;
       gap: var(--cg-spacing-8);
-      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
       cursor: pointer;
       background: transparent;
       border: none;
@@ -203,39 +113,32 @@ o.styles = [b, m, y, p`
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
       text-align: left;
-      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .toggle-bar:hover { background: var(--cg-color-action-tertiary-background-hover); }
+
+    .toggle-bar:hover {
+      background: var(--cg-color-surface-cards-hover-background);
+    }
+
     .toggle-bar:active { transform: scale(var(--cg-interaction-press-scale)); }
     .toggle-bar:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
     }
 
     .chevron {
-      width: var(--cg-icon-size-100);
-      height: var(--cg-icon-size-100);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
-      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
     }
-    .chevron.open { transform: rotate(90deg); }
 
-    .title-text { flex: 1; }
-
-    /* Live pulsing dot when streaming. */
-    .live-dot {
-      width: var(--cg-spacing-8);
-      height: var(--cg-spacing-8);
-      border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-status-success-text-default);
-      animation: cg-debug-live-pulse 1.4s var(--cg-transition-easing-ease-in-out) infinite;
+    .chevron.open {
+      transform: rotate(90deg);
     }
-    @keyframes cg-debug-live-pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50%      { opacity: 0.4; transform: scale(0.7); }
+
+    .title-text {
+      flex: 1;
     }
 
-    /* Neutral count badge — was brand-tinted before. */
     .badge {
       display: inline-flex;
       align-items: center;
@@ -244,111 +147,37 @@ o.styles = [b, m, y, p`
       height: var(--cg-spacing-20);
       padding: 0 var(--cg-spacing-6);
       border-radius: var(--cg-border-radius-full);
-      background: var(--cg-color-surface-cards-emphasis);
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-overlay-accent-subtle);
       color: var(--cg-color-surface-base-text);
-      font-size: 10px;
-      font-weight: var(--cg-font-weight-bold);
-      font-variant-numeric: tabular-nums;
-    }
-
-    /* ── Toolbar (filters + search) ── */
-    .toolbar {
-      display: flex;
-      gap: var(--cg-spacing-8);
-      align-items: center;
-      padding: var(--cg-spacing-8) var(--cg-spacing-12);
-      border-top: var(--cg-border-width-50) solid var(--cg-color-code-border);
-      background: var(--cg-overlay-dark-subtle);
-      flex-wrap: wrap;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
     }
 
-    .filter-chip {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--cg-spacing-4);
-      padding: var(--cg-spacing-4) var(--cg-spacing-8);
-      border-radius: var(--cg-border-radius-full);
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    .clear-btn {
       background: transparent;
-      color: var(--cg-color-input-text-placeholder);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
       font-size: var(--cg-font-size-xs);
-      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
       cursor: pointer;
       font-family: inherit;
-      transition:
-        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .filter-chip:hover {
-      border-color: var(--cg-color-surface-cards-border-strong);
-      color: var(--cg-color-surface-base-text);
-    }
-    .filter-chip:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
-    }
-    .filter-chip.active {
-      background: var(--cg-color-surface-cards-emphasis);
-      border-color: var(--cg-color-surface-cards-border-strong);
-      color: var(--cg-color-surface-base-text);
-    }
-    .filter-count {
-      font-variant-numeric: tabular-nums;
-      color: var(--cg-color-input-text-placeholder);
-    }
-    .filter-chip.active .filter-count { color: var(--cg-color-surface-base-text); }
 
-    .search {
-      flex: 1;
-      min-width: var(--cg-spacing-128);
-      display: flex;
-      align-items: center;
-      gap: var(--cg-spacing-6);
-      padding: var(--cg-spacing-4) var(--cg-spacing-8);
-      border-radius: var(--cg-border-radius-100);
-      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      background: var(--cg-color-input-background-default);
-    }
-    .search:focus-within {
-      border-color: var(--cg-color-input-border-focus);
-    }
-    .search svg {
-      width: var(--cg-icon-size-100);
-      height: var(--cg-icon-size-100);
-      color: var(--cg-color-input-text-placeholder);
-      flex-shrink: 0;
-    }
-    .search input {
-      flex: 1;
-      background: transparent;
-      border: none;
-      outline: none;
-      font: inherit;
-      font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-input-text-default);
-      min-width: 0;
+    .clear-btn:hover {
+      background: var(--cg-color-surface-cards-hover-background);
+      color: var(--cg-color-surface-base-text);
     }
-    .search input::placeholder { color: var(--cg-color-input-text-placeholder); }
 
-    /* ── Panel — accordion via grid-template-rows.
-       Animating 0fr → 1fr is the modern technique for height-auto
-       transitions, smoother than max-height tricks because it interpolates
-       through the actual content height. */
-    .panel-wrap {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);
+    .clear-btn:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
     }
-    :host([open]) .panel-wrap { grid-template-rows: 1fr; }
-    .panel-inner { overflow: hidden; }
 
     .panel {
-      max-height: 400px;
+      border-top: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      max-height: var(--_ai-debug-panel-max-height, 400px);
       overflow-y: auto;
-      scrollbar-width: thin;
-      scrollbar-color: var(--cg-color-surface-cards-border-strong) transparent;
     }
 
     .entry-list {
@@ -356,14 +185,19 @@ o.styles = [b, m, y, p`
       flex-direction: column;
     }
 
-    .entry { border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider); }
-    .entry:last-child { border-bottom: none; }
+    .entry {
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);
+    }
+
+    .entry:last-child {
+      border-bottom: none;
+    }
 
     .entry-header {
       display: flex;
       align-items: center;
       gap: var(--cg-spacing-8);
-      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
       cursor: pointer;
       background: transparent;
       border: none;
@@ -372,51 +206,43 @@ o.styles = [b, m, y, p`
       font-family: inherit;
       font-size: var(--cg-font-size-xs);
       text-align: left;
-      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .entry-header:hover { background: var(--cg-overlay-dark-subtle); }
-    .entry-header:active { transform: scale(var(--cg-interaction-press-scale)); }
+
+    .entry-header:hover {
+      background: var(--cg-overlay-dark-subtle);
+    }
+
     .entry-header:focus-visible {
-      outline: none;
-      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: -2px;
     }
 
     .type-dot {
       width: var(--cg-spacing-8);
       height: var(--cg-spacing-8);
-      border-radius: var(--cg-border-radius-full);
+      border-radius: 50%;
       flex-shrink: 0;
     }
-    /* CRITICAL: tokens use the -default suffix. The previous rules used
-       --cg-color-status-info-text (no -default) which doesn't exist —
-       so all dots and labels were rendering with NO color. */
-    .type-request,  .label-request  { background: var(--cg-color-status-info-text-default); }
-    .type-response, .label-response { background: var(--cg-color-status-success-text-default); }
-    .type-error,    .label-error    { background: var(--cg-color-status-error-text-default); }
-    .type-tool,     .label-tool     { background: var(--cg-color-status-warning-text-default); }
-    .type-info,     .label-info     { background: var(--cg-color-input-text-placeholder); }
 
-    /* Reset bg for the label spans (only the dots use bg). */
-    .label-request, .label-response, .label-error, .label-tool, .label-info {
-      background: transparent;
-    }
-    .label-request  { color: var(--cg-color-status-info-text-default); }
-    .label-response { color: var(--cg-color-status-success-text-default); }
-    .label-error    { color: var(--cg-color-status-error-text-default); }
-    .label-tool     { color: var(--cg-color-status-warning-text-default); }
-    .label-info     { color: var(--cg-color-input-text-placeholder); }
+    .type-request { background: var(--cg-color-status-info-text-default); }
+    .type-response { background: var(--cg-color-status-success-text-default); }
+    .type-error { background: var(--cg-color-status-error-text-default); }
+    .type-info { background: var(--cg-color-input-text-placeholder); }
 
     .type-label {
-      font-weight: var(--cg-font-weight-bold);
-      font-size: 10px;
+      font-weight: var(--cg-font-weight-semibold);
       text-transform: uppercase;
       letter-spacing: var(--cg-letter-spacing-wide);
       min-width: var(--cg-spacing-56);
     }
 
+    .label-request { color: var(--cg-color-status-info-text-default); }
+    .label-response { color: var(--cg-color-status-success-text-default); }
+    .label-error { color: var(--cg-color-status-error-text-default); }
+    .label-info { color: var(--cg-color-input-text-placeholder); }
+
     .entry-ts {
       color: var(--cg-color-input-text-placeholder);
-      font-variant-numeric: tabular-nums;
       flex-shrink: 0;
     }
 
@@ -431,85 +257,53 @@ o.styles = [b, m, y, p`
 
     .entry-duration {
       color: var(--cg-color-input-text-placeholder);
-      font-variant-numeric: tabular-nums;
       flex-shrink: 0;
     }
 
-    /* Per-entry accordion — same grid-rows trick. */
-    .entry-content-wrap {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .entry.open .entry-content-wrap { grid-template-rows: 1fr; }
-    .entry-content-inner { overflow: hidden; }
-
     .entry-content {
-      padding: var(--cg-spacing-12) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-32);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16) var(--cg-spacing-12) var(--cg-spacing-24);
       font-family: var(--cg-font-family-mono);
       font-size: var(--cg-font-size-xs);
-      line-height: var(--cg-line-height-relaxed);
+      line-height: var(--cg-line-height-normal);
       white-space: pre-wrap;
       word-break: break-word;
       color: var(--cg-color-code-text);
       background: var(--cg-color-code-background);
-      max-height: 240px;
+      max-height: var(--_ai-debug-entry-max-height, 200px);
       overflow-y: auto;
     }
 
-    /* Expand-arrow spins on entry expand. */
-    .entry-arrow {
-      width: var(--cg-spacing-12);
-      height: var(--cg-spacing-12);
-      color: var(--cg-color-input-text-placeholder);
-      flex-shrink: 0;
-      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
-    }
-    .entry-arrow.open { transform: rotate(90deg); }
-
     .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-xs);
     }
 
     /* ── Rounded variants ── */
     :host([rounded="none"]) { border-radius: 0; }
-    :host([rounded="sm"])   { border-radius: var(--cg-border-radius-50); }
-    :host([rounded="md"])   { border-radius: var(--cg-border-radius-100); }
-    :host([rounded="lg"])   { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="sm"]) { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) { border-radius: var(--cg-border-radius-150); }
     :host([rounded="full"]) { border-radius: var(--cg-border-radius-full); }
   `];
-n([
+s([
   l({ reflect: !0 })
 ], o.prototype, "rounded", 2);
-n([
+s([
   l({ type: Array })
 ], o.prototype, "entries", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
+s([
+  l({ type: Boolean })
 ], o.prototype, "open", 2);
-n([
-  l({ type: Number, attribute: "max-entries" })
+s([
+  l({ type: Number })
 ], o.prototype, "maxEntries", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "streaming", 2);
-n([
-  u()
+s([
+  v()
 ], o.prototype, "_expanded", 2);
-n([
-  u()
-], o.prototype, "_filter", 2);
-n([
-  u()
-], o.prototype, "_query", 2);
-n([
-  v(".panel")
-], o.prototype, "_panelEl", 2);
-o = n([
-  f("ai-debug-console")
+o = s([
+  h("ai-debug-console")
 ], o);
 export {
   o as AiDebugConsole