npm - @cognivo/components - Versions diffs - 0.8.0 → 0.8.2 - Mend

@cognivo/components 0.8.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (543) hide show

package/dist/components/ai-debug-console/ai-debug-console.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-debug-console.js","sources":["../../../src/components/ai-debug-console/ai-debug-console.ts"],"sourcesContent":["/*\n @element ai-debug-console\n * Streaming-friendly LLM debug panel — collapsible toggle bar, filter chips\n * by entry type, search input, auto-scroll on new entries, live indicator\n * pulse, expandable JSON content per row, and dogfooded Clear via\n * <cg-button>. Modeled on Langfuse / Helicone / LangSmith trace viewers.\n \n @example\n * ```html\n * <ai-debug-console\n * .entries=${[\n * { type: 'request', timestamp: '12:34:05', content: '{\"model\":\"gpt-4o\"}', duration: 240 },\n * { type: 'response', timestamp: '12:34:08', content: '{\"choices\":[…]}', duration: 520 },\n * { type: 'tool', timestamp: '12:34:09', content: 'search(\"invoice 2026\")', duration: 80 },\n * ]}\n * open\n * streaming\n * max-entries=\"200\"\n * ></ai-debug-console>\n * ```\n \n @fires {CustomEvent<{open: boolean}>} ai-debug-toggle - Panel toggled\n * @fires {CustomEvent} ai-debug-clear - Clear clicked\n * @fires {CustomEvent<{index: number, entry: DebugEntry}>} ai-debug-entry-click - Entry expanded\n \n @cssprop [--cg-color-code-background] - Console background\n * @cssprop [--cg-color-code-text] - Body text color\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-button/cg-button.js';\n\nexport type DebugEntryType = 'request' \| 'response' \| 'error' \| 'info' \| 'tool';\n\nexport interface DebugEntry {\n type: DebugEntryType;\n timestamp: string;\n content: string;\n duration?: number;\n}\n\nconst FILTERS: Array<{ id: 'all' \| DebugEntryType; label: string }> = [\n { id: 'all', label: 'All' },\n { id: 'request', label: 'Requests' },\n { id: 'response', label: 'Responses' },\n { id: 'tool', label: 'Tools' },\n { id: 'error', label: 'Errors' },\n { id: 'info', label: 'Info' },\n];\n\n@customElement('ai-debug-console')\nexport class AiDebugConsole extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n display: block;\n / surface-cards-background is one tone above the page; -code-background\n resolves to the page color in dark mode so the console blended in. /\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 overflow: hidden;\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n / ── Toggle bar ── /\n .toggle-bar {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-12) var(--cg-spacing-16);\n cursor: pointer;\n background: transparent;\n border: none;\n color: inherit;\n width: 100%;\n font-family: inherit;\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n text-align: left;\n transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .toggle-bar:hover { background: var(--cg-color-action-tertiary-background-hover); }\n .toggle-bar:active { transform: scale(var(--cg-interaction-press-scale)); }\n .toggle-bar:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n\n .chevron {\n width: var(--cg-icon-size-100);\n height: var(--cg-icon-size-100);\n color: var(--cg-color-input-text-placeholder);\n transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n }\n .chevron.open { transform: rotate(90deg); }\n\n .title-text { flex: 1; }\n\n / Live pulsing dot when streaming. /\n .live-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-status-success-text-default);\n animation: cg-debug-live-pulse 1.4s var(--cg-transition-easing-ease-in-out) infinite;\n }\n @keyframes cg-debug-live-pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(0.7); }\n }\n\n / Neutral count badge — was brand-tinted before. /\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--cg-spacing-20);\n height: var(--cg-spacing-20);\n padding: 0 var(--cg-spacing-6);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-emphasis);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n color: var(--cg-color-surface-base-text);\n font-size: 10px;\n font-weight: var(--cg-font-weight-bold);\n font-variant-numeric: tabular-nums;\n }\n\n / ── Toolbar (filters + search) ── /\n .toolbar {\n display: flex;\n gap: var(--cg-spacing-8);\n align-items: center;\n padding: var(--cg-spacing-8) var(--cg-spacing-12);\n border-top: var(--cg-border-width-50) solid var(--cg-color-code-border);\n background: var(--cg-overlay-dark-subtle);\n flex-wrap: wrap;\n }\n\n .filter-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n padding: var(--cg-spacing-4) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n background: transparent;\n color: var(--cg-color-input-text-placeholder);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-medium);\n cursor: pointer;\n font-family: inherit;\n transition:\n background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .filter-chip:hover {\n border-color: var(--cg-color-surface-cards-border-strong);\n color: var(--cg-color-surface-base-text);\n }\n .filter-chip:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n .filter-chip.active {\n background: var(--cg-color-surface-cards-emphasis);\n border-color: var(--cg-color-surface-cards-border-strong);\n color: var(--cg-color-surface-base-text);\n }\n .filter-count {\n font-variant-numeric: tabular-nums;\n color: var(--cg-color-input-text-placeholder);\n }\n .filter-chip.active .filter-count { color: var(--cg-color-surface-base-text); }\n\n .search {\n flex: 1;\n min-width: var(--cg-spacing-128);\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-6);\n padding: var(--cg-spacing-4) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n background: var(--cg-color-input-background-default);\n }\n .search:focus-within {\n border-color: var(--cg-color-input-border-focus);\n }\n .search svg {\n width: var(--cg-icon-size-100);\n height: var(--cg-icon-size-100);\n color: var(--cg-color-input-text-placeholder);\n flex-shrink: 0;\n }\n .search input {\n flex: 1;\n background: transparent;\n border: none;\n outline: none;\n font: inherit;\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-default);\n min-width: 0;\n }\n .search input::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n / ── Panel — accordion via grid-template-rows.\n Animating 0fr → 1fr is the modern technique for height-auto\n transitions, smoother than max-height tricks because it interpolates\n through the actual content height. /\n .panel-wrap {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);\n }\n :host([open]) .panel-wrap { grid-template-rows: 1fr; }\n .panel-inner { overflow: hidden; }\n\n .panel {\n max-height: 400px;\n overflow-y: auto;\n scrollbar-width: thin;\n scrollbar-color: var(--cg-color-surface-cards-border-strong) transparent;\n }\n\n .entry-list {\n display: flex;\n flex-direction: column;\n }\n\n .entry { border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider); }\n .entry:last-child { border-bottom: none; }\n\n .entry-header {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-12) var(--cg-spacing-16);\n cursor: pointer;\n background: transparent;\n border: none;\n color: inherit;\n width: 100%;\n font-family: inherit;\n font-size: var(--cg-font-size-xs);\n text-align: left;\n transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .entry-header:hover { background: var(--cg-overlay-dark-subtle); }\n .entry-header:active { transform: scale(var(--cg-interaction-press-scale)); }\n .entry-header:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n\n .type-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n flex-shrink: 0;\n }\n / CRITICAL: tokens use the -default suffix. The previous rules used\n --cg-color-status-info-text (no -default) which doesn't exist —\n so all dots and labels were rendering with NO color. /\n .type-request, .label-request { background: var(--cg-color-status-info-text-default); }\n .type-response, .label-response { background: var(--cg-color-status-success-text-default); }\n .type-error, .label-error { background: var(--cg-color-status-error-text-default); }\n .type-tool, .label-tool { background: var(--cg-color-status-warning-text-default); }\n .type-info, .label-info { background: var(--cg-color-input-text-placeholder); }\n\n / Reset bg for the label spans (only the dots use bg). /\n .label-request, .label-response, .label-error, .label-tool, .label-info {\n background: transparent;\n }\n .label-request { color: var(--cg-color-status-info-text-default); }\n .label-response { color: var(--cg-color-status-success-text-default); }\n .label-error { color: var(--cg-color-status-error-text-default); }\n .label-tool { color: var(--cg-color-status-warning-text-default); }\n .label-info { color: var(--cg-color-input-text-placeholder); }\n\n .type-label {\n font-weight: var(--cg-font-weight-bold);\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: var(--cg-letter-spacing-wide);\n min-width: var(--cg-spacing-56);\n }\n\n .entry-ts {\n color: var(--cg-color-input-text-placeholder);\n font-variant-numeric: tabular-nums;\n flex-shrink: 0;\n }\n\n .entry-preview {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--cg-color-input-text-placeholder);\n font-family: var(--cg-font-family-mono);\n }\n\n .entry-duration {\n color: var(--cg-color-input-text-placeholder);\n font-variant-numeric: tabular-nums;\n flex-shrink: 0;\n }\n\n / Per-entry accordion — same grid-rows trick. /\n .entry-content-wrap {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows var(--cg-transition-duration-default) cubic-bezier(0.4, 0, 0.2, 1);\n }\n .entry.open .entry-content-wrap { grid-template-rows: 1fr; }\n .entry-content-inner { overflow: hidden; }\n\n .entry-content {\n padding: var(--cg-spacing-12) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-32);\n font-family: var(--cg-font-family-mono);\n font-size: var(--cg-font-size-xs);\n line-height: var(--cg-line-height-relaxed);\n white-space: pre-wrap;\n word-break: break-word;\n color: var(--cg-color-code-text);\n background: var(--cg-color-code-background);\n max-height: 240px;\n overflow-y: auto;\n }\n\n / Expand-arrow spins on entry expand. /\n .entry-arrow {\n width: var(--cg-spacing-12);\n height: var(--cg-spacing-12);\n color: var(--cg-color-input-text-placeholder);\n flex-shrink: 0;\n transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n }\n .entry-arrow.open { transform: rotate(90deg); }\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-xs);\n }\n\n / ── Rounded variants ── /\n :host([rounded=\"none\"]) { border-radius: 0; }\n :host([rounded=\"sm\"]) { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) { border-radius: var(--cg-border-radius-150); }\n :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Array }) entries: DebugEntry[] = [];\n @property({ type: Boolean, reflect: true }) open = false;\n @property({ type: Number, attribute: 'max-entries' }) maxEntries = 100;\n /* Pulsing live dot in the header — set to true while a stream is active. /\n @property({ type: Boolean, reflect: true }) streaming = false;\n\n @state() private _expanded = new Set<number>();\n @state() private _filter: 'all' \| DebugEntryType = 'all';\n @state() private _query = '';\n\n @query('.panel') private _panelEl?: HTMLElement;\n\n private _wasAtBottom = true;\n\n override updated(changed: Map<string, unknown>): void {\n if (changed.has('entries') && this.open && this._wasAtBottom && this._panelEl) {\n this.updateComplete.then(() => {\n if (this._panelEl) this._panelEl.scrollTop = this._panelEl.scrollHeight;\n });\n }\n }\n\n /* Window onto entries — capped to maxEntries, then filtered + searched. */\n private get _visibleEntries(): Array<{ entry: DebugEntry; index: number }> {\n const tail = this.entries.slice(-this.maxEntries);\n const q = this._query.trim().toLowerCase();\n return tail\n .map((entry, index) => ({ entry, index }))\n .filter(({ entry }) => this._filter === 'all' \|\| entry.type === this._filter)\n .filter(({ entry }) => !q \|\| entry.content.toLowerCase().includes(q));\n }\n\n private _countByType(type: 'all' \| DebugEntryType): number {\n if (type === 'all') return Math.min(this.entries.length, this.maxEntries);\n return this.entries.slice(-this.maxEntries).filter(e => e.type === type).length;\n }\n\n // ─── Handlers ───────────────────────────────────────────────────────────\n\n private _onToggle(): void {\n this.open = !this.open;\n this.dispatchEvent(new CustomEvent('ai-debug-toggle', {\n bubbles: true, composed: true,\n detail: { open: this.open },\n }));\n }\n\n private _onClear(): void {\n this.dispatchEvent(new CustomEvent('ai-debug-clear', {\n bubbles: true, composed: true,\n }));\n }\n\n private _toggleEntry(index: number, entry: DebugEntry): void {\n const next = new Set(this._expanded);\n if (next.has(index)) next.delete(index); else next.add(index);\n this._expanded = next;\n this.dispatchEvent(new CustomEvent('ai-debug-entry-click', {\n bubbles: true, composed: true,\n detail: { index, entry },\n }));\n }\n\n private _onPanelScroll(e: Event): void {\n const el = e.target as HTMLElement;\n // Treat \"near bottom\" (within 8px) as bottom for sticky-tail behavior.\n this._wasAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 8;\n }\n\n private _onSearch(e: Event): void {\n this._query = (e.target as HTMLInputElement).value;\n }\n\n private _formatContent(content: string): string {\n try {\n return JSON.stringify(JSON.parse(content), null, 2);\n } catch {\n return content;\n }\n }\n\n override render() {\n const visible = this._visibleEntries;\n\n return html`\n <button\n class=\"toggle-bar\"\n type=\"button\"\n @click=${this._onToggle}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=\"Debug console\"\n >\n <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\">\n <path d=\"m9 18 6-6-6-6\"/>\n </svg>\n <span class=\"title-text\">Debug Console</span>\n ${this.streaming ? html`<span class=\"live-dot\" aria-hidden=\"true\" title=\"Streaming\"></span>` : nothing}\n ${this.entries.length ? html`<span class=\"badge\">${this.entries.length}</span>` : nothing}\n </button>\n\n <div class=\"panel-wrap\" aria-hidden=${this.open ? 'false' : 'true'}>\n <div class=\"panel-inner\">\n <div class=\"toolbar\">\n ${FILTERS.map(f => {\n const count = this._countByType(f.id);\n const active = this._filter === f.id;\n return html`\n <button\n class=\"filter-chip ${active ? 'active' : ''}\"\n type=\"button\"\n @click=${() => { this._filter = f.id; }}\n aria-pressed=${active ? 'true' : 'false'}\n >\n <span>${f.label}</span>\n <span class=\"filter-count\">${count}</span>\n </button>\n `;\n })}\n <label class=\"search\" aria-label=\"Search entries\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <circle cx=\"11\" cy=\"11\" r=\"7\"/>\n <path d=\"m20 20-3.5-3.5\"/>\n </svg>\n <input\n type=\"search\"\n .value=${this._query}\n placeholder=\"Search entries…\"\n @input=${this._onSearch}\n />\n </label>\n ${this.entries.length ? html`\n <cg-button\n variant=\"tertiary\"\n size=\"sm\"\n @click=${this._onClear}\n aria-label=\"Clear all entries\"\n >Clear</cg-button>\n ` : nothing}\n </div>\n\n <div\n class=\"panel\"\n role=\"log\"\n aria-live=\"polite\"\n aria-label=\"Debug entries\"\n @scroll=${this._onPanelScroll}\n >\n ${visible.length === 0 ? html`\n <div class=\"empty\">${this._query \|\| this._filter !== 'all' ? 'No entries match the current filter.' : 'No debug entries yet.'}</div>\n ` : html`\n <div class=\"entry-list\">\n ${visible.map(({ entry, index }) => {\n const expanded = this._expanded.has(index);\n return html`\n <div class=\"entry ${expanded ? 'open' : ''}\">\n <button\n class=\"entry-header\"\n type=\"button\"\n @click=${() => this._toggleEntry(index, entry)}\n aria-expanded=${expanded ? 'true' : 'false'}\n >\n <svg class=\"entry-arrow ${expanded ? 'open' : ''}\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"m9 18 6-6-6-6\"/>\n </svg>\n <span class=\"type-dot type-${entry.type}\" aria-hidden=\"true\"></span>\n <span class=\"type-label label-${entry.type}\">${entry.type}</span>\n <span class=\"entry-ts\">${entry.timestamp}</span>\n <span class=\"entry-preview\">${entry.content.substring(0, 80)}</span>\n ${entry.duration != null\n ? html`<span class=\"entry-duration\">${entry.duration} ms</span>`\n : nothing}\n </button>\n <div class=\"entry-content-wrap\" aria-hidden=${expanded ? 'false' : 'true'}>\n <div class=\"entry-content-inner\">\n <div class=\"entry-content\">${this._formatContent(entry.content)}</div>\n </div>\n </div>\n </div>\n `;\n })}\n </div>\n `}\n </div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-debug-console': AiDebugConsole;\n }\n}\n"],"names":["FILTERS","AiDebugConsole","LitElement","changed","tail","q","entry","index","type","next","e","el","content","visible","html","nothing","f","count","active","expanded","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-debug-console.js","sources":["../../../src/components/ai-debug-console/ai-debug-console.ts"],"sourcesContent":["/*\n @element ai-debug-console\n * Collapsible debug panel for inspecting AI requests, responses, and errors with expandable JSON.\n \n @example\n * ```html\n * <ai-debug-console\n * .entries=${[{type:'request', timestamp:'12:34:05', content:'{\"model\":\"gpt-4o\"}'}]}\n * open\n * maxEntries=\"200\"\n * ></ai-debug-console>\n * ```\n \n @fires {CustomEvent<{open: boolean}>} ai-debug-toggle - Panel toggled open/closed\n * @fires {CustomEvent} ai-debug-clear - Clear button clicked\n \n @cssprop [--cg-color-accent=#dfff61] - Focus ring and toggle highlight\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface DebugEntry {\n type: 'request' \| 'response' \| 'error' \| 'info';\n timestamp: string;\n content: string;\n duration?: number;\n}\n\n@customElement('ai-debug-console')\nexport class AiDebugConsole extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n background: var(--cg-color-code-background);\n color: var(--cg-color-code-text);\n border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n border-radius: var(--cg-border-radius-150);\n overflow: hidden;\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .toggle-bar {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n cursor: pointer;\n background: transparent;\n border: none;\n color: inherit;\n width: 100%;\n font-family: inherit;\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n text-align: left;\n }\n\n .toggle-bar:hover {\n background: var(--cg-color-surface-cards-hover-background);\n }\n\n .toggle-bar:active { transform: scale(var(--cg-interaction-press-scale)); }\n .toggle-bar:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n }\n\n .chevron {\n transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n }\n\n .chevron.open {\n transform: rotate(90deg);\n }\n\n .title-text {\n flex: 1;\n }\n\n .badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: var(--cg-spacing-20);\n height: var(--cg-spacing-20);\n padding: 0 var(--cg-spacing-6);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-overlay-accent-subtle);\n color: var(--cg-color-surface-base-text);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n }\n\n .clear-btn {\n background: transparent;\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-50);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n cursor: pointer;\n font-family: inherit;\n }\n\n .clear-btn:hover {\n background: var(--cg-color-surface-cards-hover-background);\n color: var(--cg-color-surface-base-text);\n }\n\n .clear-btn:focus-visible {\n outline: 2px solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .panel {\n border-top: var(--cg-border-width-50) solid var(--cg-color-code-border);\n max-height: var(--_ai-debug-panel-max-height, 400px);\n overflow-y: auto;\n }\n\n .entry-list {\n display: flex;\n flex-direction: column;\n }\n\n .entry {\n border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);\n }\n\n .entry:last-child {\n border-bottom: none;\n }\n\n .entry-header {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n cursor: pointer;\n background: transparent;\n border: none;\n color: inherit;\n width: 100%;\n font-family: inherit;\n font-size: var(--cg-font-size-xs);\n text-align: left;\n }\n\n .entry-header:hover {\n background: var(--cg-overlay-dark-subtle);\n }\n\n .entry-header:focus-visible {\n outline: 2px solid var(--cg-overlay-accent-strong);\n outline-offset: -2px;\n }\n\n .type-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .type-request { background: var(--cg-color-status-info-text-default); }\n .type-response { background: var(--cg-color-status-success-text-default); }\n .type-error { background: var(--cg-color-status-error-text-default); }\n .type-info { background: var(--cg-color-input-text-placeholder); }\n\n .type-label {\n font-weight: var(--cg-font-weight-semibold);\n text-transform: uppercase;\n letter-spacing: var(--cg-letter-spacing-wide);\n min-width: var(--cg-spacing-56);\n }\n\n .label-request { color: var(--cg-color-status-info-text-default); }\n .label-response { color: var(--cg-color-status-success-text-default); }\n .label-error { color: var(--cg-color-status-error-text-default); }\n .label-info { color: var(--cg-color-input-text-placeholder); }\n\n .entry-ts {\n color: var(--cg-color-input-text-placeholder);\n flex-shrink: 0;\n }\n\n .entry-preview {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--cg-color-input-text-placeholder);\n font-family: var(--cg-font-family-mono);\n }\n\n .entry-duration {\n color: var(--cg-color-input-text-placeholder);\n flex-shrink: 0;\n }\n\n .entry-content {\n padding: var(--cg-spacing-8) var(--cg-spacing-16) var(--cg-spacing-12) var(--cg-spacing-24);\n font-family: var(--cg-font-family-mono);\n font-size: var(--cg-font-size-xs);\n line-height: var(--cg-line-height-normal);\n white-space: pre-wrap;\n word-break: break-word;\n color: var(--cg-color-code-text);\n background: var(--cg-color-code-background);\n max-height: var(--_ai-debug-entry-max-height, 200px);\n overflow-y: auto;\n }\n\n .empty {\n text-align: center;\n padding: var(--cg-spacing-24);\n color: var(--cg-color-input-text-placeholder);\n font-size: var(--cg-font-size-xs);\n }\n\n / ── Rounded variants ── */\n :host([rounded=\"none\"]) { border-radius: 0; }\n :host([rounded=\"sm\"]) { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) { border-radius: var(--cg-border-radius-150); }\n :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n `];\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' \| 'full' = 'lg';\n @property({ type: Array }) entries: DebugEntry[] = [];\n @property({ type: Boolean }) open = false;\n @property({ type: Number }) maxEntries = 100;\n\n @state() private _expanded = new Set<number>();\n\n private get _visibleEntries(): DebugEntry[] {\n return this.entries.slice(-this.maxEntries);\n }\n\n private _onToggle(): void {\n this.open = !this.open;\n this.dispatchEvent(new CustomEvent('ai-debug-toggle', {\n bubbles: true, composed: true,\n detail: { open: this.open },\n }));\n }\n\n private _onClear(e: Event): void {\n e.stopPropagation();\n this.dispatchEvent(new CustomEvent('ai-debug-clear', {\n bubbles: true, composed: true,\n }));\n }\n\n private _toggleEntry(idx: number): void {\n const next = new Set(this._expanded);\n if (next.has(idx)) next.delete(idx); else next.add(idx);\n this._expanded = next;\n }\n\n private _formatContent(content: string): string {\n try {\n const parsed = JSON.parse(content);\n return JSON.stringify(parsed, null, 2);\n } catch {\n return content;\n }\n }\n\n override render() {\n const visible = this._visibleEntries;\n\n return html`\n <div class=\"toggle-bar\" role=\"button\" @click=${this._onToggle}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._onToggle(); } }}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-label=\"Debug console\"\n tabindex=\"0\">\n <span class=\"chevron ${this.open ? 'open' : ''}\">▶</span>\n <span class=\"title-text\">Debug Console</span>\n ${this.entries.length ? html`<span class=\"badge\">${this.entries.length}</span>` : nothing}\n ${this.open && this.entries.length ? html`\n <button class=\"clear-btn\" @click=${this._onClear}\n aria-label=\"Clear entries\" tabindex=\"0\">Clear</button>\n ` : nothing}\n </div>\n ${this.open ? html`\n <div class=\"panel\" role=\"log\" aria-label=\"Debug entries\">\n ${visible.length === 0 ? html`\n <div class=\"empty\">No debug entries.</div>\n ` : html`\n <div class=\"entry-list\">\n ${visible.map((entry, i) => html`\n <div class=\"entry\">\n <button class=\"entry-header\"\n @click=${() => this._toggleEntry(i)}\n aria-expanded=${this._expanded.has(i) ? 'true' : 'false'}\n tabindex=\"0\">\n <span class=\"type-dot type-${entry.type}\"></span>\n <span class=\"type-label label-${entry.type}\">${entry.type}</span>\n <span class=\"entry-ts\">${entry.timestamp}</span>\n <span class=\"entry-preview\">${entry.content.substring(0, 60)}</span>\n ${entry.duration != null ? html`\n <span class=\"entry-duration\">${entry.duration}ms</span>\n ` : nothing}\n </button>\n ${this._expanded.has(i) ? html`\n <div class=\"entry-content\">${this._formatContent(entry.content)}</div>\n ` : nothing}\n </div>\n `)}\n </div>\n `}\n </div>\n ` : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-debug-console': AiDebugConsole;\n }\n}\n"],"names":["AiDebugConsole","LitElement","e","idx","next","content","parsed","visible","html","nothing","entry","i","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-detection-canvas/ai-detection-canvas.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as x, LitElement as w, html as i, nothing as g } from "lit";
 import { property as s, state as u, customElement as _ } from "lit/decorators.js";
-import { h as $, r as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as $, r as k } from "../../chunks/premium.css-DHekUEUt.js";
 var N = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, d, n) => {
   for (var a = n > 1 ? void 0 : n ? z(o, d) : o, l = e.length - 1, c; l >= 0; l--)
     (c = e[l]) && (a = (n ? c(o, d, a) : c(a)) || a);
@@ -165,7 +165,7 @@ t.styles = [$, k, x`
       align-items: center;
       justify-content: center;
       height: var(--cg-spacing-96);
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-empty-state-text-secondary);
       font-size: var(--cg-font-size-sm);
     }

package/dist/components/ai-detection-canvas/ai-detection-canvas.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-detection-canvas.js","sources":["../../../src/components/ai-detection-canvas/ai-detection-canvas.ts"],"sourcesContent":["/*\n @element ai-detection-canvas\n * Object detection overlay on an image with positioned bounding boxes, labels, and confidence scores.\n \n @fires {CustomEvent<{id: string, label: string}>} ai-detection-select\n * @fires {CustomEvent<{id: string, label: string}>} ai-detection-hover\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface Detection {\n id: string;\n label: string;\n confidence: number;\n bbox: [number, number, number, number];\n color?: string;\n}\n\n@customElement('ai-detection-canvas')\nexport class AiDetectionCanvas extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n .canvas {\n position: relative;\n display: inline-block;\n border-radius: var(--cg-border-radius-150);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n overflow: hidden;\n background: var(--cg-color-surface-base-background);\n line-height: 0;\n }\n .canvas img {\n display: block;\n width: 100%;\n height: auto;\n pointer-events: none;\n }\n\n / ── Bounding box ── /\n .bbox {\n position: absolute;\n border: var(--cg-border-width-100) solid var(--det-color, var(--cg-color-surface-base-text));\n border-radius: var(--cg-border-radius-50);\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n box-sizing: border-box;\n }\n .bbox:hover {\n background: var(--det-bg-hover, var(--cg-overlay-dark-subtle));\n }\n .bbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n .bbox.selected {\n border-width: var(--cg-border-width-100);\n border-color: var(--cg-color-action-primary-background-default);\n background: var(--cg-overlay-accent-subtle);\n }\n\n / ── Label ── /\n .bbox-label {\n position: absolute;\n top: calc(-1 var(--cg-spacing-1));\n left: calc(-1 * var(--cg-spacing-1));\n transform: translateY(-100%);\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-50) var(--cg-border-radius-50) var(--cg-border-radius-50) 0;\n color: var(--cg-color-action-primary-text-default);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n white-space: nowrap;\n pointer-events: none;\n line-height: var(--cg-line-height-snug);\n }\n .bbox-confidence {\n opacity: 0.7;\n font-family: var(--cg-font-family-mono);\n }\n\n /* ── Tooltip ── /\n .tooltip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(calc(-1 var(--cg-spacing-8)));\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-100);\n background: var(--cg-color-tooltip-background);\n color: var(--cg-color-tooltip-text);\n font-size: var(--cg-font-size-xs);\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n line-height: var(--cg-line-height-snug);\n }\n .tooltip::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: var(--cg-spacing-4) solid transparent;\n border-top-color: var(--cg-color-tooltip-background);\n }\n\n /* ── Placeholder ── /\n .placeholder {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--cg-spacing-96);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-sm);\n }\n\n / ── Count badge ── /\n .count-badge {\n position: absolute;\n top: var(--cg-spacing-12);\n right: var(--cg-spacing-12);\n padding: var(--cg-spacing-4) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-overlay-dark-strong);\n color: var(--cg-overlay-dark-text);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n pointer-events: none;\n z-index: 5;\n }\n\n / ── Rounded ── /\n :host([rounded=\"none\"]) .canvas { border-radius: 0; }\n :host([rounded=\"sm\"]) .canvas { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .canvas { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .canvas { border-radius: var(--cg-border-radius-150); }\n\n @media (prefers-reduced-motion: reduce) {\n .bbox { transition: none; }\n }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' = 'lg';\n @property() src = '';\n @property({ type: Array }) detections: Detection[] = [];\n @property({ type: Boolean }) showLabels = true;\n @property({ type: Boolean }) showConfidence = true;\n @property() selectedId = '';\n @property({ type: Boolean }) interactive = true;\n\n @state() private _hoveredId = '';\n @state() private _imgNatW = 0;\n @state() private _imgNatH = 0;\n\n private _onImgLoad(e: Event) {\n const img = e.target as HTMLImageElement;\n this._imgNatW = img.naturalWidth;\n this._imgNatH = img.naturalHeight;\n }\n\n private _selectDetection(det: Detection) {\n if (!this.interactive) return;\n this.selectedId = det.id;\n this.dispatchEvent(new CustomEvent('ai-detection-select', { bubbles: true, composed: true, detail: { id: det.id, label: det.label } }));\n }\n\n private _getDefaultColor(index: number): string {\n const palette = [\n 'var(--cg-color-action-primary-background-default)',\n 'var(--cg-color-status-info-text-default)',\n 'var(--cg-color-status-success-text-default)',\n 'var(--cg-color-status-warning-text-default)',\n 'var(--cg-color-status-error-text-default)',\n ];\n return palette[index % palette.length]!;\n }\n\n override render() {\n if (!this.src) return html`<div class=\"canvas\"><div class=\"placeholder\">No image source</div></div>`;\n\n return html`\n <div class=\"canvas\">\n <img src=\"${this.src}\" alt=\"Detection source\" @load=${this._onImgLoad} draggable=\"false\" />\n\n ${this.detections.length > 0 ? html`\n <span class=\"count-badge\">${this.detections.length} detection${this.detections.length > 1 ? 's' : ''}</span>\n ` : nothing}\n\n ${this._imgNatW > 0 ? this.detections.map((det, i) => {\n const [x, y, w, h] = det.bbox;\n const color = det.color \|\| this._getDefaultColor(i);\n const pctL = (x / this._imgNatW) 100;\n const pctT = (y / this._imgNatH) * 100;\n const pctW = (w / this._imgNatW) * 100;\n const pctH = (h / this._imgNatH) * 100;\n const isSelected = det.id === this.selectedId;\n const isHovered = det.id === this._hoveredId;\n\n return html`\n <div class=\"bbox ${isSelected ? 'selected' : ''}\"\n style=\"left:${pctL}%;top:${pctT}%;width:${pctW}%;height:${pctH}%;--det-color:${color}\"\n tabindex=\"${this.interactive ? '0' : '-1'}\"\n role=\"button\" aria-label=\"${det.label} ${Math.round(det.confidence * 100)}%\"\n @click=${() => this._selectDetection(det)}\n @mouseenter=${() => { this._hoveredId = det.id; this.dispatchEvent(new CustomEvent('ai-detection-hover', { bubbles: true, composed: true, detail: { id: det.id, label: det.label } })); }}\n @mouseleave=${() => { this._hoveredId = ''; }}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._selectDetection(det); } }}>\n\n ${this.showLabels ? html`\n <span class=\"bbox-label\" style=\"background:${color}\">\n ${det.label}\n ${this.showConfidence ? html`<span class=\"bbox-confidence\">${Math.round(det.confidence * 100)}%</span>` : nothing}\n </span>\n ` : nothing}\n\n ${isHovered && this.interactive ? html`\n <div class=\"tooltip\">${det.label} — ${Math.round(det.confidence * 100)}%</div>\n ` : nothing}\n </div>\n `;\n }) : nothing}\n </div>\n `;\n }\n}\n"],"names":["AiDetectionCanvas","LitElement","img","det","index","palette","html","nothing","i","x","y","w","h","color","pctL","pctT","pctW","pctH","isSelected","isHovered","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-detection-canvas.js","sources":["../../../src/components/ai-detection-canvas/ai-detection-canvas.ts"],"sourcesContent":["/*\n @element ai-detection-canvas\n * Object detection overlay on an image with positioned bounding boxes, labels, and confidence scores.\n \n @fires {CustomEvent<{id: string, label: string}>} ai-detection-select\n * @fires {CustomEvent<{id: string, label: string}>} ai-detection-hover\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface Detection {\n id: string;\n label: string;\n confidence: number;\n bbox: [number, number, number, number];\n color?: string;\n}\n\n@customElement('ai-detection-canvas')\nexport class AiDetectionCanvas extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n .canvas {\n position: relative;\n display: inline-block;\n border-radius: var(--cg-border-radius-150);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n overflow: hidden;\n background: var(--cg-color-surface-base-background);\n line-height: 0;\n }\n .canvas img {\n display: block;\n width: 100%;\n height: auto;\n pointer-events: none;\n }\n\n / ── Bounding box ── /\n .bbox {\n position: absolute;\n border: var(--cg-border-width-100) solid var(--det-color, var(--cg-color-surface-base-text));\n border-radius: var(--cg-border-radius-50);\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n box-sizing: border-box;\n }\n .bbox:hover {\n background: var(--det-bg-hover, var(--cg-overlay-dark-subtle));\n }\n .bbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n .bbox.selected {\n border-width: var(--cg-border-width-100);\n border-color: var(--cg-color-action-primary-background-default);\n background: var(--cg-overlay-accent-subtle);\n }\n\n / ── Label ── /\n .bbox-label {\n position: absolute;\n top: calc(-1 var(--cg-spacing-1));\n left: calc(-1 * var(--cg-spacing-1));\n transform: translateY(-100%);\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-50) var(--cg-border-radius-50) var(--cg-border-radius-50) 0;\n color: var(--cg-color-action-primary-text-default);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n white-space: nowrap;\n pointer-events: none;\n line-height: var(--cg-line-height-snug);\n }\n .bbox-confidence {\n opacity: 0.7;\n font-family: var(--cg-font-family-mono);\n }\n\n /* ── Tooltip ── /\n .tooltip {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%) translateY(calc(-1 var(--cg-spacing-8)));\n padding: var(--cg-spacing-6) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-100);\n background: var(--cg-color-tooltip-background);\n color: var(--cg-color-tooltip-text);\n font-size: var(--cg-font-size-xs);\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n line-height: var(--cg-line-height-snug);\n }\n .tooltip::after {\n content: '';\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: var(--cg-spacing-4) solid transparent;\n border-top-color: var(--cg-color-tooltip-background);\n }\n\n /* ── Placeholder ── /\n .placeholder {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--cg-spacing-96);\n color: var(--cg-color-empty-state-text-secondary);\n font-size: var(--cg-font-size-sm);\n }\n\n / ── Count badge ── /\n .count-badge {\n position: absolute;\n top: var(--cg-spacing-12);\n right: var(--cg-spacing-12);\n padding: var(--cg-spacing-4) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-full);\n background: var(--cg-overlay-dark-strong);\n color: var(--cg-overlay-dark-text);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-semibold);\n pointer-events: none;\n z-index: 5;\n }\n\n / ── Rounded ── /\n :host([rounded=\"none\"]) .canvas { border-radius: 0; }\n :host([rounded=\"sm\"]) .canvas { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .canvas { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .canvas { border-radius: var(--cg-border-radius-150); }\n\n @media (prefers-reduced-motion: reduce) {\n .bbox { transition: none; }\n }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' = 'lg';\n @property() src = '';\n @property({ type: Array }) detections: Detection[] = [];\n @property({ type: Boolean }) showLabels = true;\n @property({ type: Boolean }) showConfidence = true;\n @property() selectedId = '';\n @property({ type: Boolean }) interactive = true;\n\n @state() private _hoveredId = '';\n @state() private _imgNatW = 0;\n @state() private _imgNatH = 0;\n\n private _onImgLoad(e: Event) {\n const img = e.target as HTMLImageElement;\n this._imgNatW = img.naturalWidth;\n this._imgNatH = img.naturalHeight;\n }\n\n private _selectDetection(det: Detection) {\n if (!this.interactive) return;\n this.selectedId = det.id;\n this.dispatchEvent(new CustomEvent('ai-detection-select', { bubbles: true, composed: true, detail: { id: det.id, label: det.label } }));\n }\n\n private _getDefaultColor(index: number): string {\n const palette = [\n 'var(--cg-color-action-primary-background-default)',\n 'var(--cg-color-status-info-text-default)',\n 'var(--cg-color-status-success-text-default)',\n 'var(--cg-color-status-warning-text-default)',\n 'var(--cg-color-status-error-text-default)',\n ];\n return palette[index % palette.length]!;\n }\n\n override render() {\n if (!this.src) return html`<div class=\"canvas\"><div class=\"placeholder\">No image source</div></div>`;\n\n return html`\n <div class=\"canvas\">\n <img src=\"${this.src}\" alt=\"Detection source\" @load=${this._onImgLoad} draggable=\"false\" />\n\n ${this.detections.length > 0 ? html`\n <span class=\"count-badge\">${this.detections.length} detection${this.detections.length > 1 ? 's' : ''}</span>\n ` : nothing}\n\n ${this._imgNatW > 0 ? this.detections.map((det, i) => {\n const [x, y, w, h] = det.bbox;\n const color = det.color \|\| this._getDefaultColor(i);\n const pctL = (x / this._imgNatW) 100;\n const pctT = (y / this._imgNatH) * 100;\n const pctW = (w / this._imgNatW) * 100;\n const pctH = (h / this._imgNatH) * 100;\n const isSelected = det.id === this.selectedId;\n const isHovered = det.id === this._hoveredId;\n\n return html`\n <div class=\"bbox ${isSelected ? 'selected' : ''}\"\n style=\"left:${pctL}%;top:${pctT}%;width:${pctW}%;height:${pctH}%;--det-color:${color}\"\n tabindex=\"${this.interactive ? '0' : '-1'}\"\n role=\"button\" aria-label=\"${det.label} ${Math.round(det.confidence * 100)}%\"\n @click=${() => this._selectDetection(det)}\n @mouseenter=${() => { this._hoveredId = det.id; this.dispatchEvent(new CustomEvent('ai-detection-hover', { bubbles: true, composed: true, detail: { id: det.id, label: det.label } })); }}\n @mouseleave=${() => { this._hoveredId = ''; }}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._selectDetection(det); } }}>\n\n ${this.showLabels ? html`\n <span class=\"bbox-label\" style=\"background:${color}\">\n ${det.label}\n ${this.showConfidence ? html`<span class=\"bbox-confidence\">${Math.round(det.confidence * 100)}%</span>` : nothing}\n </span>\n ` : nothing}\n\n ${isHovered && this.interactive ? html`\n <div class=\"tooltip\">${det.label} — ${Math.round(det.confidence * 100)}%</div>\n ` : nothing}\n </div>\n `;\n }) : nothing}\n </div>\n `;\n }\n}\n"],"names":["AiDetectionCanvas","LitElement","img","det","index","palette","html","nothing","i","x","y","w","h","color","pctL","pctT","pctW","pctH","isSelected","isHovered","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAoBO,IAAMA,IAAN,cAAgCC,EAAW;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GA6HwB,KAAA,UAAuC,MACxD,KAAA,MAAM,IACS,KAAA,aAA0B,CAAA,GACxB,KAAA,aAAa,IACb,KAAA,iBAAiB,IAClC,KAAA,aAAa,IACI,KAAA,cAAc,IAElC,KAAQ,aAAa,IACrB,KAAQ,WAAW,GACnB,KAAQ,WAAW;AAAA,EAAA;AAAA,EAEpB,WAAW,GAAU;AAC3B,UAAMC,IAAM,EAAE;AACd,SAAK,WAAWA,EAAI,cACpB,KAAK,WAAWA,EAAI;AAAA,EACtB;AAAA,EAEQ,iBAAiBC,GAAgB;AACvC,IAAK,KAAK,gBACV,KAAK,aAAaA,EAAI,IACtB,KAAK,cAAc,IAAI,YAAY,uBAAuB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIA,EAAI,IAAI,OAAOA,EAAI,MAAA,EAAM,CAAG,CAAC;AAAA,EACxI;AAAA,EAEQ,iBAAiBC,GAAuB;AAC9C,UAAMC,IAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,WAAOA,EAAQD,IAAQC,EAAQ,MAAM;AAAA,EACvC;AAAA,EAES,SAAS;AAChB,WAAK,KAAK,MAEHC;AAAA;AAAA,oBAES,KAAK,GAAG,kCAAkC,KAAK,UAAU;AAAA;AAAA,UAEnE,KAAK,WAAW,SAAS,IAAIA;AAAA,sCACD,KAAK,WAAW,MAAM,aAAa,KAAK,WAAW,SAAS,IAAI,MAAM,EAAE;AAAA,YAClGC,CAAO;AAAA;AAAA,UAET,KAAK,WAAW,IAAI,KAAK,WAAW,IAAI,CAACJ,GAAKK,MAAM;AACpD,YAAM,CAACC,GAAGC,GAAGC,GAAGC,CAAC,IAAIT,EAAI,MACnBU,IAAQV,EAAI,SAAS,KAAK,iBAAiBK,CAAC,GAC5CM,IAAQL,IAAI,KAAK,WAAY,KAC7BM,IAAQL,IAAI,KAAK,WAAY,KAC7BM,IAAQL,IAAI,KAAK,WAAY,KAC7BM,IAAQL,IAAI,KAAK,WAAY,KAC7BM,IAAaf,EAAI,OAAO,KAAK,YAC7BgB,IAAYhB,EAAI,OAAO,KAAK;AAElC,aAAOG;AAAA,+BACcY,IAAa,aAAa,EAAE;AAAA,4BAC/BJ,CAAI,SAASC,CAAI,WAAWC,CAAI,YAAYC,CAAI,iBAAiBJ,CAAK;AAAA,0BACxE,KAAK,cAAc,MAAM,IAAI;AAAA,0CACbV,EAAI,KAAK,IAAI,KAAK,MAAMA,EAAI,aAAa,GAAG,CAAC;AAAA,uBAChE,MAAM,KAAK,iBAAiBA,CAAG,CAAC;AAAA,4BAC3B,MAAM;AAAE,aAAK,aAAaA,EAAI,IAAI,KAAK,cAAc,IAAI,YAAY,sBAAsB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIA,EAAI,IAAI,OAAOA,EAAI,MAAA,EAAM,CAAG,CAAC;AAAA,MAAG,CAAC;AAAA,4BAC3K,MAAM;AAAE,aAAK,aAAa;AAAA,MAAI,CAAC;AAAA,yBAClC,CAACiB,MAAqB;AAAE,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAAOA,EAAE,eAAA,GAAkB,KAAK,iBAAiBjB,CAAG;AAAA,MAAK,CAAC;AAAA;AAAA,gBAE9H,KAAK,aAAaG;AAAA,6DAC2BO,CAAK;AAAA,oBAC9CV,EAAI,KAAK;AAAA,oBACT,KAAK,iBAAiBG,kCAAqC,KAAK,MAAMH,EAAI,aAAa,GAAG,CAAC,aAAaI,CAAO;AAAA;AAAA,kBAEjHA,CAAO;AAAA;AAAA,gBAETY,KAAa,KAAK,cAAcb;AAAA,uCACTH,EAAI,KAAK,MAAM,KAAK,MAAMA,EAAI,aAAa,GAAG,CAAC;AAAA,kBACpEI,CAAO;AAAA;AAAA;AAAA,IAGjB,CAAC,IAAIA,CAAO;AAAA;AAAA,QA1CMD;AAAA,EA6CxB;AACF;AA/MaN,EACK,SAAS,CAACqB,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0HnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7HhBzB,EA6HkB,WAAA,WAAA,CAAA;AACjBwB,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9HCzB,EA8HC,WAAA,OAAA,CAAA;AACewB,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA/HdzB,EA+HgB,WAAA,cAAA,CAAA;AACEwB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAhIhBzB,EAgIkB,WAAA,cAAA,CAAA;AACAwB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAjIhBzB,EAiIkB,WAAA,kBAAA,CAAA;AACjBwB,EAAA;AAAA,EAAXC,EAAA;AAAS,GAlICzB,EAkIC,WAAA,cAAA,CAAA;AACiBwB,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnIhBzB,EAmIkB,WAAA,eAAA,CAAA;AAEZwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GArII1B,EAqIM,WAAA,cAAA,CAAA;AACAwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAtII1B,EAsIM,WAAA,YAAA,CAAA;AACAwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAvII1B,EAuIM,WAAA,YAAA,CAAA;AAvINA,IAANwB,EAAA;AAAA,EADNG,EAAc,qBAAqB;AAAA,GACvB3B,CAAA;"}

package/dist/components/ai-diff-panel/ai-diff-panel.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as v, LitElement as u, html as l } from "lit";
 import { property as p, customElement as b } from "lit/decorators.js";
-import { h as m, r as y, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as m, r as y, f as x } from "../../chunks/premium.css-DHekUEUt.js";
 var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, g = (t, i, r, e) => {
   for (var a = e > 1 ? void 0 : e ? w(i, r) : i, d = t.length - 1, s; d >= 0; d--)
     (s = t[d]) && (a = (e ? s(i, r, a) : s(a)) || a);

package/dist/components/ai-embedding-viz/ai-embedding-viz.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as x, LitElement as y, html as d, nothing as g, svg as u } from "lit";
 import { property as p, state as h, customElement as $ } from "lit/decorators.js";
-import { h as w, r as z, f as C } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as w, r as z, f as C } from "../../chunks/premium.css-DHekUEUt.js";
 var k = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (t, e, o, r) => {
   for (var i = r > 1 ? void 0 : r ? M(e, o) : e, s = t.length - 1, c; s >= 0; s--)
     (c = t[s]) && (i = (r ? c(e, o, i) : c(i)) || i);
@@ -162,7 +162,7 @@ a.styles = [w, z, C, x`
     svg {
       display: block;
       width: 100%;
-      height: var(200px);
+      height: var(--cg-spacing-192);
     }
     .point {
@@ -171,7 +171,7 @@ a.styles = [w, z, C, x`
     }
     .point:hover { r: 7; }
     .point:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-overlay-accent-strong);
       outline-offset: var(--cg-outline-offset-default);
     }
@@ -193,7 +193,7 @@ a.styles = [w, z, C, x`
       pointer-events: none;
       z-index: 10;
       transform: translate(-50%, -100%);
-      margin-top: calc(-1 * var(--cg-spacing-8);
+      margin-top: calc(-1 * var(--cg-spacing-8));
     }
     .legend {

package/dist/components/ai-embedding-viz/ai-embedding-viz.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-embedding-viz.js","sources":["../../../src/components/ai-embedding-viz/ai-embedding-viz.ts"],"sourcesContent":["/*\n @element ai-embedding-viz\n * 2D SVG scatter plot for visualizing vector embeddings with color-coded clusters and hover tooltips.\n \n @example\n * ```html\n * <ai-embedding-viz\n * .points=${[\n * {x:0.2, y:0.8, label:'cat', cluster:'animals'},\n * {x:0.7, y:0.3, label:'car', cluster:'vehicles'}\n * ]}\n * title=\"Semantic Clusters\"\n * showLabels\n * ></ai-embedding-viz>\n * ```\n \n @fires {CustomEvent<{point: EmbeddingPoint}>} ai-embedding-point-click - Point clicked\n /\nimport { LitElement, html, css, nothing, svg } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface EmbeddingPoint {\n x: number;\n y: number;\n label: string;\n cluster?: string;\n color?: string;\n}\n\nconst CLUSTER_COLORS = [\n '#dfff61', '#3b82f6', '#f472b6', '#22c55e', '#eab308',\n '#a78bfa', '#f97316', '#06b6d4', '#ef4444', '#84cc16',\n];\n\n@customElement('ai-embedding-viz')\nexport class AiEmbeddingViz extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .container {\n background: var(--cg-color-surface-container-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-150);\n padding: var(--cg-spacing-16);\n color: var(--cg-color-surface-base-text);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--cg-spacing-12);\n }\n\n .title {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n }\n\n .point-count {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n }\n\n .chart-area {\n position: relative;\n background: var(--cg-color-surface-base-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-100);\n overflow: hidden;\n }\n\n svg {\n display: block;\n width: 100%;\n height: var(200px);\n }\n\n .point {\n cursor: pointer;\n transition: r var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .point:hover { r: 7; }\n .point:focus-visible {\n outline: 2px solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .point-label {\n font-size: var(--cg-font-size-xs);\n fill: var(--cg-color-input-text-placeholder);\n pointer-events: none;\n }\n\n .tooltip {\n position: absolute;\n background: var(--cg-color-surface-base-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n color: var(--cg-color-surface-base-text);\n font-size: var(--cg-font-size-xs);\n padding: var(--cg-spacing-6) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-100);\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n transform: translate(-50%, -100%);\n margin-top: calc(-1 var(--cg-spacing-8);\n }\n\n .legend {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-8);\n margin-top: var(--cg-spacing-8);\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n }\n\n .legend-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: 50%;\n }\n\n .empty-state {\n text-align: center;\n color: var(--cg-color-input-border-hover);\n font-size: var(--cg-font-size-sm);\n padding: var(--cg-spacing-24) 0;\n }\n\n .axis-label {\n font-size: var(--cg-font-size-xs);\n fill: var(--cg-color-input-border-hover);\n }\n `];\n @property({ type: Array }) points: EmbeddingPoint[] = [];\n @property({ type: String }) override title = 'Embedding Visualization';\n @property({ type: Boolean }) showLabels = false;\n\n @state() private _hovered: EmbeddingPoint \| null = null;\n @state() private _tooltipX = 0;\n @state() private _tooltipY = 0;\n\n private _clusterColorMap = new Map<string, string>();\n\n private _getColor(point: EmbeddingPoint): string {\n if (point.color) return point.color;\n if (!point.cluster) return '#dfff61';\n\n if (!this._clusterColorMap.has(point.cluster)) {\n const idx = this._clusterColorMap.size % CLUSTER_COLORS.length;\n this._clusterColorMap.set(point.cluster, CLUSTER_COLORS[idx]!);\n }\n return this._clusterColorMap.get(point.cluster)!;\n }\n\n private _normalize(): { nx: number; ny: number; point: EmbeddingPoint }[] {\n if (!this.points.length) return [];\n const margin = 30;\n const w = 500 - margin * 2;\n const h = 300 - margin * 2;\n\n const xs = this.points.map(p => p.x);\n const ys = this.points.map(p => p.y);\n const minX = Math.min(...xs);\n const maxX = Math.max(...xs);\n const minY = Math.min(...ys);\n const maxY = Math.max(...ys);\n const rangeX = maxX - minX \|\| 1;\n const rangeY = maxY - minY \|\| 1;\n\n return this.points.map(p => ({\n nx: margin + ((p.x - minX) / rangeX) * w,\n ny: margin + ((p.y - minY) / rangeY) * h,\n point: p,\n }));\n }\n\n private get _clusters(): string[] {\n const s = new Set<string>();\n for (const p of this.points) {\n if (p.cluster) s.add(p.cluster);\n }\n return [...s];\n }\n\n private _handlePointClick(point: EmbeddingPoint) {\n this.dispatchEvent(new CustomEvent('ai-embedding-point-click', {\n detail: { label: point.label, x: point.x, y: point.y, cluster: point.cluster },\n bubbles: true,\n composed: true,\n }));\n }\n\n private _handleHover(e: MouseEvent, point: EmbeddingPoint) {\n const rect = (e.currentTarget as SVGElement).closest('.chart-area')?.getBoundingClientRect();\n if (rect) {\n this._tooltipX = e.clientX - rect.left;\n this._tooltipY = e.clientY - rect.top;\n }\n this._hovered = point;\n }\n\n override render() {\n if (!this.points.length) {\n return html`<div class=\"container\"><div class=\"empty-state\">No embedding data</div></div>`;\n }\n\n const normalized = this._normalize();\n this._clusterColorMap.clear();\n\n return html`\n <div class=\"container\" role=\"region\" aria-label=\"${this.title}\">\n <div class=\"header\">\n <span class=\"title\">${this.title}</span>\n <span class=\"point-count\">${this.points.length} points</span>\n </div>\n\n <div class=\"chart-area\">\n <svg viewBox=\"0 0 500 300\" role=\"img\" aria-label=\"Scatter plot of ${this.points.length} embedding points\">\n ${normalized.map(({ nx, ny, point }, i) => svg`\n <circle\n class=\"point\"\n cx=${nx}\n cy=${ny}\n r=\"5\"\n fill=${this._getColor(point)}\n opacity=\"0.8\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"${point.label}${point.cluster ? `, cluster: ${point.cluster}` : ''}\"\n @click=${() => this._handlePointClick(point)}\n @mouseenter=${(e: MouseEvent) => this._handleHover(e, point)}\n @mouseleave=${() => { this._hovered = null; }}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._handlePointClick(point); } }}\n />\n ${this.showLabels ? svg`\n <text class=\"point-label\" x=${nx + 8} y=${ny + 3}>${point.label}</text>\n ` : nothing}\n `)}\n </svg>\n\n ${this._hovered ? html`\n <div class=\"tooltip\" style=\"left:${this._tooltipX}px;top:${this._tooltipY}px\">\n ${this._hovered.label}${this._hovered.cluster ? ` (${this._hovered.cluster})` : ''}\n </div>\n ` : nothing}\n </div>\n\n ${this._clusters.length > 0 ? html`\n <div class=\"legend\" role=\"list\" aria-label=\"Cluster legend\">\n ${this._clusters.map(c => {\n const color = this._getColor({ x: 0, y: 0, label: '', cluster: c });\n return html`\n <div class=\"legend-item\" role=\"listitem\">\n <div class=\"legend-dot\" style=\"background:${color}\"></div>\n ${c}\n </div>\n `;\n })}\n </div>\n ` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-embedding-viz': AiEmbeddingViz;\n }\n}\n"],"names":["CLUSTER_COLORS","AiEmbeddingViz","LitElement","point","idx","margin","w","h","xs","p","ys","minX","maxX","minY","maxY","rangeX","rangeY","s","e","rect","html","normalized","nx","ny","svg","nothing","c","color","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-embedding-viz.js","sources":["../../../src/components/ai-embedding-viz/ai-embedding-viz.ts"],"sourcesContent":["/*\n @element ai-embedding-viz\n * 2D SVG scatter plot for visualizing vector embeddings with color-coded clusters and hover tooltips.\n \n @example\n * ```html\n * <ai-embedding-viz\n * .points=${[\n * {x:0.2, y:0.8, label:'cat', cluster:'animals'},\n * {x:0.7, y:0.3, label:'car', cluster:'vehicles'}\n * ]}\n * title=\"Semantic Clusters\"\n * showLabels\n * ></ai-embedding-viz>\n * ```\n \n @fires {CustomEvent<{point: EmbeddingPoint}>} ai-embedding-point-click - Point clicked\n /\nimport { LitElement, html, css, nothing, svg } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface EmbeddingPoint {\n x: number;\n y: number;\n label: string;\n cluster?: string;\n color?: string;\n}\n\nconst CLUSTER_COLORS = [\n '#dfff61', '#3b82f6', '#f472b6', '#22c55e', '#eab308',\n '#a78bfa', '#f97316', '#06b6d4', '#ef4444', '#84cc16',\n];\n\n@customElement('ai-embedding-viz')\nexport class AiEmbeddingViz extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .container {\n background: var(--cg-color-surface-container-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-150);\n padding: var(--cg-spacing-16);\n color: var(--cg-color-surface-base-text);\n }\n\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--cg-spacing-12);\n }\n\n .title {\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n }\n\n .point-count {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n }\n\n .chart-area {\n position: relative;\n background: var(--cg-color-surface-base-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-100);\n overflow: hidden;\n }\n\n svg {\n display: block;\n width: 100%;\n height: var(--cg-spacing-192);\n }\n\n .point {\n cursor: pointer;\n transition: r var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .point:hover { r: 7; }\n .point:focus-visible {\n outline: var(--cg-border-width-100) solid var(--cg-overlay-accent-strong);\n outline-offset: var(--cg-outline-offset-default);\n }\n\n .point-label {\n font-size: var(--cg-font-size-xs);\n fill: var(--cg-color-input-text-placeholder);\n pointer-events: none;\n }\n\n .tooltip {\n position: absolute;\n background: var(--cg-color-surface-base-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n color: var(--cg-color-surface-base-text);\n font-size: var(--cg-font-size-xs);\n padding: var(--cg-spacing-6) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-100);\n white-space: nowrap;\n pointer-events: none;\n z-index: 10;\n transform: translate(-50%, -100%);\n margin-top: calc(-1 var(--cg-spacing-8));\n }\n\n .legend {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cg-spacing-8);\n margin-top: var(--cg-spacing-8);\n }\n\n .legend-item {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-4);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-input-text-placeholder);\n }\n\n .legend-dot {\n width: var(--cg-spacing-8);\n height: var(--cg-spacing-8);\n border-radius: 50%;\n }\n\n .empty-state {\n text-align: center;\n color: var(--cg-color-input-border-hover);\n font-size: var(--cg-font-size-sm);\n padding: var(--cg-spacing-24) 0;\n }\n\n .axis-label {\n font-size: var(--cg-font-size-xs);\n fill: var(--cg-color-input-border-hover);\n }\n `];\n @property({ type: Array }) points: EmbeddingPoint[] = [];\n @property({ type: String }) override title = 'Embedding Visualization';\n @property({ type: Boolean }) showLabels = false;\n\n @state() private _hovered: EmbeddingPoint \| null = null;\n @state() private _tooltipX = 0;\n @state() private _tooltipY = 0;\n\n private _clusterColorMap = new Map<string, string>();\n\n private _getColor(point: EmbeddingPoint): string {\n if (point.color) return point.color;\n if (!point.cluster) return '#dfff61';\n\n if (!this._clusterColorMap.has(point.cluster)) {\n const idx = this._clusterColorMap.size % CLUSTER_COLORS.length;\n this._clusterColorMap.set(point.cluster, CLUSTER_COLORS[idx]!);\n }\n return this._clusterColorMap.get(point.cluster)!;\n }\n\n private _normalize(): { nx: number; ny: number; point: EmbeddingPoint }[] {\n if (!this.points.length) return [];\n const margin = 30;\n const w = 500 - margin * 2;\n const h = 300 - margin * 2;\n\n const xs = this.points.map(p => p.x);\n const ys = this.points.map(p => p.y);\n const minX = Math.min(...xs);\n const maxX = Math.max(...xs);\n const minY = Math.min(...ys);\n const maxY = Math.max(...ys);\n const rangeX = maxX - minX \|\| 1;\n const rangeY = maxY - minY \|\| 1;\n\n return this.points.map(p => ({\n nx: margin + ((p.x - minX) / rangeX) * w,\n ny: margin + ((p.y - minY) / rangeY) * h,\n point: p,\n }));\n }\n\n private get _clusters(): string[] {\n const s = new Set<string>();\n for (const p of this.points) {\n if (p.cluster) s.add(p.cluster);\n }\n return [...s];\n }\n\n private _handlePointClick(point: EmbeddingPoint) {\n this.dispatchEvent(new CustomEvent('ai-embedding-point-click', {\n detail: { label: point.label, x: point.x, y: point.y, cluster: point.cluster },\n bubbles: true,\n composed: true,\n }));\n }\n\n private _handleHover(e: MouseEvent, point: EmbeddingPoint) {\n const rect = (e.currentTarget as SVGElement).closest('.chart-area')?.getBoundingClientRect();\n if (rect) {\n this._tooltipX = e.clientX - rect.left;\n this._tooltipY = e.clientY - rect.top;\n }\n this._hovered = point;\n }\n\n override render() {\n if (!this.points.length) {\n return html`<div class=\"container\"><div class=\"empty-state\">No embedding data</div></div>`;\n }\n\n const normalized = this._normalize();\n this._clusterColorMap.clear();\n\n return html`\n <div class=\"container\" role=\"region\" aria-label=\"${this.title}\">\n <div class=\"header\">\n <span class=\"title\">${this.title}</span>\n <span class=\"point-count\">${this.points.length} points</span>\n </div>\n\n <div class=\"chart-area\">\n <svg viewBox=\"0 0 500 300\" role=\"img\" aria-label=\"Scatter plot of ${this.points.length} embedding points\">\n ${normalized.map(({ nx, ny, point }, i) => svg`\n <circle\n class=\"point\"\n cx=${nx}\n cy=${ny}\n r=\"5\"\n fill=${this._getColor(point)}\n opacity=\"0.8\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"${point.label}${point.cluster ? `, cluster: ${point.cluster}` : ''}\"\n @click=${() => this._handlePointClick(point)}\n @mouseenter=${(e: MouseEvent) => this._handleHover(e, point)}\n @mouseleave=${() => { this._hovered = null; }}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._handlePointClick(point); } }}\n />\n ${this.showLabels ? svg`\n <text class=\"point-label\" x=${nx + 8} y=${ny + 3}>${point.label}</text>\n ` : nothing}\n `)}\n </svg>\n\n ${this._hovered ? html`\n <div class=\"tooltip\" style=\"left:${this._tooltipX}px;top:${this._tooltipY}px\">\n ${this._hovered.label}${this._hovered.cluster ? ` (${this._hovered.cluster})` : ''}\n </div>\n ` : nothing}\n </div>\n\n ${this._clusters.length > 0 ? html`\n <div class=\"legend\" role=\"list\" aria-label=\"Cluster legend\">\n ${this._clusters.map(c => {\n const color = this._getColor({ x: 0, y: 0, label: '', cluster: c });\n return html`\n <div class=\"legend-item\" role=\"listitem\">\n <div class=\"legend-dot\" style=\"background:${color}\"></div>\n ${c}\n </div>\n `;\n })}\n </div>\n ` : nothing}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-embedding-viz': AiEmbeddingViz;\n }\n}\n"],"names":["CLUSTER_COLORS","AiEmbeddingViz","LitElement","point","idx","margin","w","h","xs","p","ys","minX","maxX","minY","maxY","rangeX","rangeY","s","e","rect","html","normalized","nx","ny","svg","nothing","c","color","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-empty-state/ai-empty-state.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as y, LitElement as d, nothing as h, html as c } from "lit";
 import { property as o, customElement as u } from "lit/decorators.js";
 import { unsafeHTML as v } from "lit/directives/unsafe-html.js";
-import { h as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-empty-state/cg-empty-state.js";
 import "../cg-button/cg-button.js";
 var f = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (l, r, s, n) => {

package/dist/components/ai-error-boundary/ai-error-boundary.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/ai-error-boundary/ai-error-boundary.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,~~4BAuInB~~;IACyB,KAAK,SAAM;IACX,IAAI,SAAM;IACT,SAAS,UAAQ;IAClB,OAAO,SAAM;IAEhC,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,KAAK;IAIJ,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}
1	+ {"version":3,"file":"ai-error-boundary.d.ts","sourceRoot":"","sources":["../../../src/components/ai-error-boundary/ai-error-boundary.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA4InB;IACyB,KAAK,SAAM;IACX,IAAI,SAAM;IACT,SAAS,UAAQ;IAClB,OAAO,SAAM;IAEhC,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,KAAK;IAIJ,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/ai-error-boundary/ai-error-boundary.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import { css as v, LitElement as p, nothing as a, html as o } from "lit";
-import { property as c, state as u, customElement as h } from "lit/decorators.js";
-import { h as b, r as f, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, t = (i, s, d, n) => {
+import { css as v, LitElement as p, nothing as t, html as o } from "lit";
+import { property as c, state as b, customElement as h } from "lit/decorators.js";
+import { h as f, r as u, f as m } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (i, s, d, n) => {
   for (var e = n > 1 ? void 0 : n ? w(s, d) : s, l = i.length - 1, g; l >= 0; l--)
     (g = i[l]) && (e = (n ? g(s, d, e) : g(e)) || e);
   return n && e && y(s, d, e), e;
@@ -21,7 +21,7 @@ let r = class extends p {
           <div class="header-content">
             <div class="title-row">
               <span class="title">Something went wrong</span>
-              ${this.code ? o`<span class="code-badge">${this.code}</span>` : a}
+              ${this.code ? o`<span class="code-badge">${this.code}</span>` : t}
             </div>
             <div class="message">${this.error}</div>
@@ -33,8 +33,8 @@ let r = class extends p {
       this._showDetails = !this._showDetails;
     }}
               >${this._showDetails ? "Hide details" : "Show details"}</button>
-              ${this._showDetails ? o`<div class="details">${this.details}</div>` : a}
-            ` : a}
+              ${this._showDetails ? o`<div class="details">${this.details}</div>` : t}
+            ` : t}
           </div>
         </div>
@@ -43,16 +43,16 @@ let r = class extends p {
             <button class="btn retry-btn" @click=${() => this._emit("ai-error-retry")}>
               Retry
             </button>
-          ` : a}
+          ` : t}
           <button class="btn dismiss-btn" @click=${() => this._emit("ai-error-dismiss")}>
             Dismiss
           </button>
         </div>
       </div>
-    ` : a;
+    ` : t;
   }
 };
-r.styles = [b, f, m, v`
+r.styles = [f, u, m, v`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
     }
@@ -60,7 +60,7 @@ r.styles = [b, f, m, v`
     .error-card {
       background: var(--cg-color-surface-container-background);
-      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-ai-error-border);
       border-radius: var(--cg-border-radius-150);
       padding: var(--cg-spacing-16);
     }
@@ -91,7 +91,7 @@ r.styles = [b, f, m, v`
     }
     .title {
-      color: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-ai-error-text);
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-bold);
     }
@@ -100,8 +100,8 @@ r.styles = [b, f, m, v`
       display: inline-block;
       padding: var(--cg-spacing-2) var(--cg-spacing-8);
       border-radius: var(--cg-border-radius-50);
-      background: var(--cg-color-status-error-background-default);
-      color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-ai-error-background);
+      color: var(--cg-color-ai-error-text);
       font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-bold);
       font-family: var(--cg-font-family-mono);
@@ -180,6 +180,11 @@ r.styles = [b, f, m, v`
       color: var(--cg-color-action-primary-text-default);
     }
     .retry-btn:hover:not(:disabled) { filter: brightness(1.1); }
+    .retry-btn:disabled {
+      opacity: 1;
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
+    }
     .dismiss-btn {
       background: var(--cg-color-surface-container-background);
@@ -188,22 +193,22 @@ r.styles = [b, f, m, v`
     }
     .dismiss-btn:hover:not(:disabled) { filter: brightness(1.2); }
   `];
-t([
+a([
   c({ type: String })
 ], r.prototype, "error", 2);
-t([
+a([
   c({ type: String })
 ], r.prototype, "code", 2);
-t([
+a([
   c({ type: Boolean })
 ], r.prototype, "retryable", 2);
-t([
+a([
   c({ type: String })
 ], r.prototype, "details", 2);
-t([
-  u()
+a([
+  b()
 ], r.prototype, "_showDetails", 2);
-r = t([
+r = a([
   h("ai-error-boundary")
 ], r);
 export {

package/dist/components/ai-error-boundary/ai-error-boundary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-error-boundary.js","sources":["../../../src/components/ai-error-boundary/ai-error-boundary.ts"],"sourcesContent":["/*\n @element ai-error-boundary\n * Error display card for AI failures with error code badge, expandable details, retry, and dismiss.\n \n @example\n * ```html\n * <ai-error-boundary\n * error=\"Model returned an empty response\"\n * code=\"ERR_EMPTY_RESPONSE\"\n * details=\"Request ID: abc-123, latency: 4200ms\"\n * retryable\n * ></ai-error-boundary>\n * ```\n \n @fires {CustomEvent} ai-error-retry - Retry button clicked\n * @fires {CustomEvent} ai-error-dismiss - Dismiss button clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-error-boundary')\nexport class AiErrorBoundary extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .error-card {\n background: var(--cg-color-surface-container-background);\n border: var(--cg-border-width-50) solid var(--cg-color-~~status~~-error-border~~-default~~);\n border-radius: var(--cg-border-radius-150);\n padding: var(--cg-spacing-16);\n }\n\n .header {\n display: flex;\n align-items: flex-start;\n gap: var(--cg-spacing-12);\n margin-bottom: var(--cg-spacing-12);\n }\n\n .icon {\n font-size: var(--cg-font-size-2xl);\n flex-shrink: 0;\n line-height: 1;\n }\n\n .header-content {\n flex: 1;\n min-width: 0;\n }\n\n .title-row {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n flex-wrap: wrap;\n }\n\n .title {\n color: var(--cg-color-~~status~~-error-text~~-default~~);\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-bold);\n }\n\n .code-badge {\n display: inline-block;\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-50);\n background: var(--cg-color-~~status~~-error-background~~-default~~);\n color: var(--cg-color-~~status~~-error-text~~-default~~);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n font-family: var(--cg-font-family-mono);\n letter-spacing: var(--cg-letter-spacing-wide);\n }\n\n .message {\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-sm);\n line-height: var(--cg-line-height-relaxed);\n margin-top: var(--cg-spacing-6);\n }\n\n .details-toggle {\n background: none;\n border: none;\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n cursor: pointer;\n padding: var(--cg-spacing-4) 0;\n margin-top: var(--cg-spacing-8);\n font-family: inherit;\n text-decoration: underline;\n text-underline-offset: var(--cg-spacing-2);\n }\n .details-toggle:hover { color: var(--cg-color-surface-base-text); }\n .details-toggle:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n border-radius: var(--cg-border-radius-50);\n }\n\n .details {\n margin-top: var(--cg-spacing-8);\n padding: var(--cg-spacing-12);\n background: var(--cg-color-code-background);\n border-radius: var(--cg-border-radius-100);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n font-family: var(--cg-font-family-mono);\n line-height: var(--cg-line-height-relaxed);\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .actions {\n padding-top: var(--cg-spacing-12);\n border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n display: flex;\n gap: var(--cg-spacing-8);\n margin-top: var(--cg-spacing-16);\n }\n\n .btn {\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n border-radius: var(--cg-border-radius-100);\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n border: none;\n font-family: inherit;\n transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n .btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n .btn:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .retry-btn {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-action-primary-text-default);\n }\n .retry-btn:hover:not(:disabled) { filter: brightness(1.1); }\n\n .dismiss-btn {\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-surface-base-text);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n }\n .dismiss-btn:hover:not(:disabled) { filter: brightness(1.2); }\n `];\n @property({ type: String }) error = '';\n @property({ type: String }) code = '';\n @property({ type: Boolean }) retryable = true;\n @property({ type: String }) details = '';\n\n @state() private _showDetails = false;\n\n private _emit(name: string) {\n this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));\n }\n\n override render() {\n if (!this.error) return nothing;\n\n return html`\n <div class=\"error-card\" role=\"alert\" aria-live=\"assertive\">\n <div class=\"header\">\n <span class=\"icon\" aria-hidden=\"true\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg></span>\n <div class=\"header-content\">\n <div class=\"title-row\">\n <span class=\"title\">Something went wrong</span>\n ${this.code ? html`<span class=\"code-badge\">${this.code}</span>` : nothing}\n </div>\n <div class=\"message\">${this.error}</div>\n\n ${this.details ? html`\n <button\n class=\"details-toggle\"\n aria-expanded=${this._showDetails}\n @click=${() => { this._showDetails = !this._showDetails; }}\n >${this._showDetails ? 'Hide details' : 'Show details'}</button>\n ${this._showDetails ? html`<div class=\"details\">${this.details}</div>` : nothing}\n ` : nothing}\n </div>\n </div>\n\n <div class=\"actions\">\n ${this.retryable ? html`\n <button class=\"btn retry-btn\" @click=${() => this._emit('ai-error-retry')}>\n Retry\n </button>\n ` : nothing}\n <button class=\"btn dismiss-btn\" @click=${() => this._emit('ai-error-dismiss')}>\n Dismiss\n </button>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-error-boundary': AiErrorBoundary;\n }\n}\n"],"names":["AiErrorBoundary","LitElement","name","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAsBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,~~GAyIuB~~,KAAA,QAAQ,IACR,KAAA,OAAO,IACN,KAAA,YAAY,IACb,KAAA,UAAU,IAE7B,KAAQ,eAAe;AAAA,EAAA;AAAA,EAExB,MAAMC,GAAc;AAC1B,SAAK,cAAc,IAAI,YAAYA,GAAM,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC7E;AAAA,EAES,SAAS;AAChB,WAAK,KAAK,QAEHC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOK,KAAK,OAAOA,6BAAgC,KAAK,IAAI,YAAYC,CAAO;AAAA;AAAA,mCAErD,KAAK,KAAK;AAAA;AAAA,cAE/B,KAAK,UAAUD;AAAA;AAAA;AAAA,gCAGG,KAAK,YAAY;AAAA,yBACxB,MAAM;AAAE,WAAK,eAAe,CAAC,KAAK;AAAA,IAAc,CAAC;AAAA,iBACzD,KAAK,eAAe,iBAAiB,cAAc;AAAA,gBACpD,KAAK,eAAeA,yBAA4B,KAAK,OAAO,WAAWC,CAAO;AAAA,gBAC9EA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,KAAK,YAAYD;AAAA,mDACsB,MAAM,KAAK,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA,cAGvEC,CAAO;AAAA,mDAC8B,MAAM,KAAK,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,QA9B3DA;AAAA,EAoC1B;AACF;~~AA1LaJ~~,EACK,SAAS,CAACK,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~GAuIzE~~;AAC2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GAzIfV~~,~~EAyIiB~~,WAAA,SAAA,CAAA;AACAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GA1IfV~~,~~EA0IiB~~,WAAA,QAAA,CAAA;AACCS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,~~GA3IhBV~~,~~EA2IkB~~,WAAA,aAAA,CAAA;AACDS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,~~GA5IfV~~,~~EA4IiB~~,WAAA,WAAA,CAAA;AAEXS,EAAA;AAAA,EAAhBE,EAAA;AAAM,~~GA9IIX~~,~~EA8IM~~,WAAA,gBAAA,CAAA;~~AA9INA~~,IAANS,EAAA;AAAA,EADNG,EAAc,mBAAmB;AAAA,GACrBZ,CAAA;"}
1	+ {"version":3,"file":"ai-error-boundary.js","sources":["../../../src/components/ai-error-boundary/ai-error-boundary.ts"],"sourcesContent":["/*\n @element ai-error-boundary\n * Error display card for AI failures with error code badge, expandable details, retry, and dismiss.\n \n @example\n * ```html\n * <ai-error-boundary\n * error=\"Model returned an empty response\"\n * code=\"ERR_EMPTY_RESPONSE\"\n * details=\"Request ID: abc-123, latency: 4200ms\"\n * retryable\n * ></ai-error-boundary>\n * ```\n \n @fires {CustomEvent} ai-error-retry - Retry button clicked\n * @fires {CustomEvent} ai-error-dismiss - Dismiss button clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-error-boundary')\nexport class AiErrorBoundary extends LitElement {\n static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n :host {\n animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n }\n :host([hidden]) { display: none; }\n\n .error-card {\n background: var(--cg-color-surface-container-background);\n border: var(--cg-border-width-50) solid var(--cg-color-ai-error-border);\n border-radius: var(--cg-border-radius-150);\n padding: var(--cg-spacing-16);\n }\n\n .header {\n display: flex;\n align-items: flex-start;\n gap: var(--cg-spacing-12);\n margin-bottom: var(--cg-spacing-12);\n }\n\n .icon {\n font-size: var(--cg-font-size-2xl);\n flex-shrink: 0;\n line-height: 1;\n }\n\n .header-content {\n flex: 1;\n min-width: 0;\n }\n\n .title-row {\n display: flex;\n align-items: center;\n gap: var(--cg-spacing-8);\n flex-wrap: wrap;\n }\n\n .title {\n color: var(--cg-color-ai-error-text);\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-bold);\n }\n\n .code-badge {\n display: inline-block;\n padding: var(--cg-spacing-2) var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-50);\n background: var(--cg-color-ai-error-background);\n color: var(--cg-color-ai-error-text);\n font-size: var(--cg-font-size-xs);\n font-weight: var(--cg-font-weight-bold);\n font-family: var(--cg-font-family-mono);\n letter-spacing: var(--cg-letter-spacing-wide);\n }\n\n .message {\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-sm);\n line-height: var(--cg-line-height-relaxed);\n margin-top: var(--cg-spacing-6);\n }\n\n .details-toggle {\n background: none;\n border: none;\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n cursor: pointer;\n padding: var(--cg-spacing-4) 0;\n margin-top: var(--cg-spacing-8);\n font-family: inherit;\n text-decoration: underline;\n text-underline-offset: var(--cg-spacing-2);\n }\n .details-toggle:hover { color: var(--cg-color-surface-base-text); }\n .details-toggle:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n border-radius: var(--cg-border-radius-50);\n }\n\n .details {\n margin-top: var(--cg-spacing-8);\n padding: var(--cg-spacing-12);\n background: var(--cg-color-code-background);\n border-radius: var(--cg-border-radius-100);\n color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-xs);\n font-family: var(--cg-font-family-mono);\n line-height: var(--cg-line-height-relaxed);\n white-space: pre-wrap;\n word-break: break-word;\n }\n\n .actions {\n padding-top: var(--cg-spacing-12);\n border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n display: flex;\n gap: var(--cg-spacing-8);\n margin-top: var(--cg-spacing-16);\n }\n\n .btn {\n padding: var(--cg-spacing-8) var(--cg-spacing-16);\n border-radius: var(--cg-border-radius-100);\n font-size: var(--cg-font-size-sm);\n font-weight: var(--cg-font-weight-semibold);\n cursor: pointer;\n border: none;\n font-family: inherit;\n transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n .btn:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n }\n .btn:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .retry-btn {\n background: var(--cg-color-action-primary-background-default);\n color: var(--cg-color-action-primary-text-default);\n }\n .retry-btn:hover:not(:disabled) { filter: brightness(1.1); }\n .retry-btn:disabled {\n opacity: 1;\n background: var(--cg-color-action-primary-background-disable);\n color: var(--cg-color-action-primary-text-disable);\n }\n\n .dismiss-btn {\n background: var(--cg-color-surface-container-background);\n color: var(--cg-color-surface-base-text);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n }\n .dismiss-btn:hover:not(:disabled) { filter: brightness(1.2); }\n `];\n @property({ type: String }) error = '';\n @property({ type: String }) code = '';\n @property({ type: Boolean }) retryable = true;\n @property({ type: String }) details = '';\n\n @state() private _showDetails = false;\n\n private _emit(name: string) {\n this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));\n }\n\n override render() {\n if (!this.error) return nothing;\n\n return html`\n <div class=\"error-card\" role=\"alert\" aria-live=\"assertive\">\n <div class=\"header\">\n <span class=\"icon\" aria-hidden=\"true\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg></span>\n <div class=\"header-content\">\n <div class=\"title-row\">\n <span class=\"title\">Something went wrong</span>\n ${this.code ? html`<span class=\"code-badge\">${this.code}</span>` : nothing}\n </div>\n <div class=\"message\">${this.error}</div>\n\n ${this.details ? html`\n <button\n class=\"details-toggle\"\n aria-expanded=${this._showDetails}\n @click=${() => { this._showDetails = !this._showDetails; }}\n >${this._showDetails ? 'Hide details' : 'Show details'}</button>\n ${this._showDetails ? html`<div class=\"details\">${this.details}</div>` : nothing}\n ` : nothing}\n </div>\n </div>\n\n <div class=\"actions\">\n ${this.retryable ? html`\n <button class=\"btn retry-btn\" @click=${() => this._emit('ai-error-retry')}>\n Retry\n </button>\n ` : nothing}\n <button class=\"btn dismiss-btn\" @click=${() => this._emit('ai-error-dismiss')}>\n Dismiss\n </button>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ai-error-boundary': AiErrorBoundary;\n }\n}\n"],"names":["AiErrorBoundary","LitElement","name","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-eval-scorecard/ai-eval-scorecard.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as v, LitElement as u, html as c, nothing as g } from "lit";
 import { property as d, state as p, customElement as f } from "lit/decorators.js";
-import { h, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h, r as m } from "../../chunks/premium.css-DHekUEUt.js";
 var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (r, a, s, t) => {
   for (var e = t > 1 ? void 0 : t ? x(a, s) : a, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (e = (t ? l(a, s, e) : l(e)) || e);
@@ -82,7 +82,7 @@ o.styles = [h, m, v`
     }
     .header-subtitle {
       font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-surface-container-text);
     }
     /* Grade — small filled dot + letter */
@@ -116,7 +116,7 @@ o.styles = [h, m, v`
       transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .metric:hover { background: var(--cg-overlay-dark-subtle); border-color: var(--cg-color-surface-cards-border); }
-    .metric:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .metric:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring); }
     /* Top row: label + value + delta */
     .metric-top {
@@ -156,13 +156,13 @@ o.styles = [h, m, v`
     .metric-explanation {
       margin-top: var(--cg-spacing-8);
       font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-surface-container-text);
       line-height: var(--cg-line-height-snug);
     }
     .empty {
       padding: var(--cg-spacing-48) var(--cg-spacing-24);
-      text-align: center; color: var(--cg-color-surface-container-outlined);
+      text-align: center; color: var(--cg-color-surface-container-text);
       font-size: var(--cg-font-size-sm);
     }

package/dist/components/ai-eval-scorecard/ai-eval-scorecard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ai-eval-scorecard.js","sources":["../../../src/components/ai-eval-scorecard/ai-eval-scorecard.ts"],"sourcesContent":["/*\n @element ai-eval-scorecard\n * LLM evaluation scorecard with metric rows, grade badge, deltas, and expandable explanations.\n \n @fires {CustomEvent<{metric: string}>} ai-eval-metric-click\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface EvalScore {\n metric: string;\n value: number;\n max?: number;\n explanation?: string;\n}\n\n@customElement('ai-eval-scorecard')\nexport class AiEvalScorecard extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n :host {\n min-width: 320px;\n }\n\n .card {\n background: var(--cg-color-surface-cards-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-150);\n overflow: hidden;\n }\n\n / ── Header ── /\n .header {\n display: flex; align-items: center; justify-content: space-between;\n padding: var(--cg-spacing-20) var(--cg-spacing-24);\n }\n .header-left {\n display: flex; flex-direction: column; gap: var(--cg-spacing-2);\n }\n .header-title {\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-surface-base-text);\n }\n .header-subtitle {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n }\n\n / Grade — small filled dot + letter /\n .grade-badge {\n display: inline-flex; align-items: center; gap: var(--cg-spacing-6);\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold);\n font-family: var(--cg-font-family-mono);\n flex-shrink: 0;\n }\n .grade-dot {\n width: var(--cg-spacing-8); height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n }\n .grade-badge.A .grade-dot, .grade-badge.B .grade-dot { background: var(--cg-color-status-success-text-default); }\n .grade-badge.C .grade-dot, .grade-badge.D .grade-dot { background: var(--cg-color-status-warning-text-default); }\n .grade-badge.F .grade-dot { background: var(--cg-color-status-error-text-default); }\n .grade-badge.A, .grade-badge.B { color: var(--cg-color-status-success-text-default); }\n .grade-badge.C, .grade-badge.D { color: var(--cg-color-status-warning-text-default); }\n .grade-badge.F { color: var(--cg-color-status-error-text-default); }\n\n / ── Metric list ── /\n .scores {\n padding: var(--cg-spacing-4) var(--cg-spacing-16) var(--cg-spacing-16);\n }\n\n .metric {\n padding: var(--cg-spacing-16) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid transparent;\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .metric:hover { background: var(--cg-overlay-dark-subtle); border-color: var(--cg-color-surface-cards-border); }\n .metric:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n / Top row: label + value + delta /\n .metric-top {\n display: flex; align-items: center; gap: var(--cg-spacing-12);\n margin-bottom: var(--cg-spacing-8);\n }\n .metric-label {\n flex: 1;\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n }\n .metric-value {\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n font-family: var(--cg-font-family-mono);\n color: var(--cg-color-surface-base-text);\n }\n .metric-delta {\n font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n font-family: var(--cg-font-family-mono);\n }\n .delta-up { color: var(--cg-color-status-success-text-default); }\n .delta-down { color: var(--cg-color-status-error-text-default); }\n\n / Bar underneath /\n .metric-bar {\n height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-border); overflow: hidden;\n }\n .metric-fill {\n height: 100%; border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-action-primary-background-default);\n opacity: 0.6;\n transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n\n / Explanation /\n .metric-explanation {\n margin-top: var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-outlined);\n line-height: var(--cg-line-height-snug);\n }\n\n .empty {\n padding: var(--cg-spacing-48) var(--cg-spacing-24);\n text-align: center; color: var(--cg-color-surface-container-outlined);\n font-size: var(--cg-font-size-sm);\n }\n\n / ── Rounded ── /\n :host([rounded=\"none\"]) .card { border-radius: 0; }\n :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .card { border-radius: var(--cg-border-radius-150); }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' = 'lg';\n @property({ type: Array }) scores: EvalScore[] = [];\n @property() grade = '';\n @property() override title = 'Evaluation';\n @property({ type: Object }) comparison: Record<string, number> \| null = null;\n\n @state() private _expandedMetric = '';\n\n private _avgScore(): number {\n if (!this.scores.length) return 0;\n return Math.round(this.scores.reduce((s, sc) => s + (sc.value / (sc.max \|\| 100)) 100, 0) / this.scores.length);\n }\n\n override render() {\n if (!this.scores.length) return html`<div class=\"card\"><div class=\"empty\">No evaluation data</div></div>`;\n\n return html`\n <div class=\"card\" role=\"figure\" aria-label=\"${this.title}${this.grade ? ': ' + this.grade : ''}\">\n <div class=\"header\">\n <div class=\"header-left\">\n <span class=\"header-title\">${this.title}</span>\n <span class=\"header-subtitle\">${this.scores.length} metrics · ${this._avgScore()}% avg</span>\n </div>\n ${this.grade ? html`<span class=\"grade-badge ${this.grade.charAt(0)}\"><span class=\"grade-dot\"></span>${this.grade}</span>` : nothing}\n </div>\n\n <div class=\"scores\">\n ${this.scores.map(s => {\n const max = s.max \|\| 100;\n const pct = Math.min((s.value / max) * 100, 100);\n const delta = this.comparison?.[s.metric];\n\n return html`\n <div class=\"metric\" tabindex=\"0\" role=\"button\"\n @click=${() => { this._expandedMetric = this._expandedMetric === s.metric ? '' : s.metric; this.dispatchEvent(new CustomEvent('ai-eval-metric-click', { bubbles: true, composed: true, detail: { metric: s.metric } })); }}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._expandedMetric = this._expandedMetric === s.metric ? '' : s.metric; } }}>\n <div class=\"metric-top\">\n <span class=\"metric-label\">${s.metric}</span>\n <span class=\"metric-value\">${s.value}</span>\n ${delta !== undefined ? html`\n <span class=\"metric-delta ${delta >= 0 ? 'delta-up' : 'delta-down'}\">${delta >= 0 ? '+' : ''}${delta}</span>\n ` : nothing}\n </div>\n <div class=\"metric-bar\">\n <div class=\"metric-fill\" style=\"width: ${pct}%\"></div>\n </div>\n ${this._expandedMetric === s.metric && s.explanation ? html`\n <div class=\"metric-explanation\">${s.explanation}</div>\n ` : nothing}\n </div>\n `;\n })}\n </div>\n </div>\n `;\n }\n}\n"],"names":["AiEvalScorecard","LitElement","s","sc","html","nothing","max","pct","delta","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"ai-eval-scorecard.js","sources":["../../../src/components/ai-eval-scorecard/ai-eval-scorecard.ts"],"sourcesContent":["/*\n @element ai-eval-scorecard\n * LLM evaluation scorecard with metric rows, grade badge, deltas, and expandable explanations.\n \n @fires {CustomEvent<{metric: string}>} ai-eval-metric-click\n /\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface EvalScore {\n metric: string;\n value: number;\n max?: number;\n explanation?: string;\n}\n\n@customElement('ai-eval-scorecard')\nexport class AiEvalScorecard extends LitElement {\n static override styles = [hostBlock, reducedMotion, css`\n :host {\n min-width: 320px;\n }\n\n .card {\n background: var(--cg-color-surface-cards-background);\n border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n border-radius: var(--cg-border-radius-150);\n overflow: hidden;\n }\n\n / ── Header ── /\n .header {\n display: flex; align-items: center; justify-content: space-between;\n padding: var(--cg-spacing-20) var(--cg-spacing-24);\n }\n .header-left {\n display: flex; flex-direction: column; gap: var(--cg-spacing-2);\n }\n .header-title {\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n color: var(--cg-color-surface-base-text);\n }\n .header-subtitle {\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-text);\n }\n\n / Grade — small filled dot + letter /\n .grade-badge {\n display: inline-flex; align-items: center; gap: var(--cg-spacing-6);\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold);\n font-family: var(--cg-font-family-mono);\n flex-shrink: 0;\n }\n .grade-dot {\n width: var(--cg-spacing-8); height: var(--cg-spacing-8);\n border-radius: var(--cg-border-radius-full);\n }\n .grade-badge.A .grade-dot, .grade-badge.B .grade-dot { background: var(--cg-color-status-success-text-default); }\n .grade-badge.C .grade-dot, .grade-badge.D .grade-dot { background: var(--cg-color-status-warning-text-default); }\n .grade-badge.F .grade-dot { background: var(--cg-color-status-error-text-default); }\n .grade-badge.A, .grade-badge.B { color: var(--cg-color-status-success-text-default); }\n .grade-badge.C, .grade-badge.D { color: var(--cg-color-status-warning-text-default); }\n .grade-badge.F { color: var(--cg-color-status-error-text-default); }\n\n / ── Metric list ── /\n .scores {\n padding: var(--cg-spacing-4) var(--cg-spacing-16) var(--cg-spacing-16);\n }\n\n .metric {\n padding: var(--cg-spacing-16) var(--cg-spacing-12);\n border-radius: var(--cg-border-radius-100);\n border: var(--cg-border-width-50) solid transparent;\n cursor: pointer;\n transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n }\n .metric:hover { background: var(--cg-overlay-dark-subtle); border-color: var(--cg-color-surface-cards-border); }\n .metric:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring); }\n\n / Top row: label + value + delta /\n .metric-top {\n display: flex; align-items: center; gap: var(--cg-spacing-12);\n margin-bottom: var(--cg-spacing-8);\n }\n .metric-label {\n flex: 1;\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n color: var(--cg-color-surface-base-text);\n }\n .metric-value {\n font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n font-family: var(--cg-font-family-mono);\n color: var(--cg-color-surface-base-text);\n }\n .metric-delta {\n font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n font-family: var(--cg-font-family-mono);\n }\n .delta-up { color: var(--cg-color-status-success-text-default); }\n .delta-down { color: var(--cg-color-status-error-text-default); }\n\n / Bar underneath /\n .metric-bar {\n height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-surface-cards-border); overflow: hidden;\n }\n .metric-fill {\n height: 100%; border-radius: var(--cg-border-radius-full);\n background: var(--cg-color-action-primary-background-default);\n opacity: 0.6;\n transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n }\n\n / Explanation /\n .metric-explanation {\n margin-top: var(--cg-spacing-8);\n font-size: var(--cg-font-size-xs);\n color: var(--cg-color-surface-container-text);\n line-height: var(--cg-line-height-snug);\n }\n\n .empty {\n padding: var(--cg-spacing-48) var(--cg-spacing-24);\n text-align: center; color: var(--cg-color-surface-container-text);\n font-size: var(--cg-font-size-sm);\n }\n\n / ── Rounded ── /\n :host([rounded=\"none\"]) .card { border-radius: 0; }\n :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n :host([rounded=\"lg\"]) .card { border-radius: var(--cg-border-radius-150); }\n `];\n\n @property({ reflect: true }) rounded: 'none' \| 'sm' \| 'md' \| 'lg' = 'lg';\n @property({ type: Array }) scores: EvalScore[] = [];\n @property() grade = '';\n @property() override title = 'Evaluation';\n @property({ type: Object }) comparison: Record<string, number> \| null = null;\n\n @state() private _expandedMetric = '';\n\n private _avgScore(): number {\n if (!this.scores.length) return 0;\n return Math.round(this.scores.reduce((s, sc) => s + (sc.value / (sc.max \|\| 100)) 100, 0) / this.scores.length);\n }\n\n override render() {\n if (!this.scores.length) return html`<div class=\"card\"><div class=\"empty\">No evaluation data</div></div>`;\n\n return html`\n <div class=\"card\" role=\"figure\" aria-label=\"${this.title}${this.grade ? ': ' + this.grade : ''}\">\n <div class=\"header\">\n <div class=\"header-left\">\n <span class=\"header-title\">${this.title}</span>\n <span class=\"header-subtitle\">${this.scores.length} metrics · ${this._avgScore()}% avg</span>\n </div>\n ${this.grade ? html`<span class=\"grade-badge ${this.grade.charAt(0)}\"><span class=\"grade-dot\"></span>${this.grade}</span>` : nothing}\n </div>\n\n <div class=\"scores\">\n ${this.scores.map(s => {\n const max = s.max \|\| 100;\n const pct = Math.min((s.value / max) * 100, 100);\n const delta = this.comparison?.[s.metric];\n\n return html`\n <div class=\"metric\" tabindex=\"0\" role=\"button\"\n @click=${() => { this._expandedMetric = this._expandedMetric === s.metric ? '' : s.metric; this.dispatchEvent(new CustomEvent('ai-eval-metric-click', { bubbles: true, composed: true, detail: { metric: s.metric } })); }}\n @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' \|\| e.key === ' ') { e.preventDefault(); this._expandedMetric = this._expandedMetric === s.metric ? '' : s.metric; } }}>\n <div class=\"metric-top\">\n <span class=\"metric-label\">${s.metric}</span>\n <span class=\"metric-value\">${s.value}</span>\n ${delta !== undefined ? html`\n <span class=\"metric-delta ${delta >= 0 ? 'delta-up' : 'delta-down'}\">${delta >= 0 ? '+' : ''}${delta}</span>\n ` : nothing}\n </div>\n <div class=\"metric-bar\">\n <div class=\"metric-fill\" style=\"width: ${pct}%\"></div>\n </div>\n ${this._expandedMetric === s.metric && s.explanation ? html`\n <div class=\"metric-explanation\">${s.explanation}</div>\n ` : nothing}\n </div>\n `;\n })}\n </div>\n </div>\n `;\n }\n}\n"],"names":["AiEvalScorecard","LitElement","s","sc","html","nothing","max","pct","delta","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}