@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-capture-flow/ai-capture-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-capture-flow.js","sources":["../../../src/components/ai-capture-flow/ai-capture-flow.ts"],"sourcesContent":["/**\n * @element ai-capture-flow\n * Multi-step capture wizard: upload, preview, processing, and result with step indicator.\n *\n * @example\n * ```html\n * <ai-capture-flow\n *   step=\"upload\"\n *   accept=\".pdf,.jpg,.png\"\n *   heading=\"Document Scan\"\n * ></ai-capture-flow>\n * ```\n *\n * @fires {CustomEvent<{file: File}>} ai-capture-file - File selected or dropped\n * @fires {CustomEvent} ai-capture-confirm - User confirmed the preview\n * @fires {CustomEvent} ai-capture-retry - User chose to retake/retry\n * @fires {CustomEvent} ai-capture-complete - User clicked Done on the result\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Step dots, progress fill, and primary button color\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\ntype Step = 'upload' | 'preview' | 'processing' | 'complete' | 'error';\nconst STEPS: Step[] = ['upload', 'preview', 'processing', 'complete'];\n\n@customElement('ai-capture-flow')\nexport class AiCaptureFlow extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;\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-200);\n      padding: var(--cg-spacing-16);\n    }\n\n    /* ── Title ── */\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    /* ── Step indicator ── */\n    .steps {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .step-dot {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      flex-shrink: 0;\n      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .step-dot.done {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .step-dot.active {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .step-dot.pending {\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .step-line {\n      flex: 1;\n      height: 2px;\n      background: var(--cg-color-surface-container-background);\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .step-line.done { background: var(--cg-color-action-primary-background-default); }\n\n    /* ── Upload zone ── */\n    .upload-zone {\n      border: 2px dashed var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-24) var(--cg-spacing-16);\n      text-align: center;\n      cursor: pointer;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .upload-zone:hover, .upload-zone.drag-over {\n      border-color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n    }\n    .upload-zone:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n    .upload-icon { font-size: var(--cg-font-size-3xl); margin-bottom: var(--cg-spacing-8); }\n    .upload-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: 1.5;\n    }\n    .upload-hint {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n    }\n    input[type=\"file\"] { display: none; }\n\n    /* ── Preview ── */\n    .preview { text-align: center; }\n    .preview-img {\n      max-width: 100%;\n      max-height: var(240px);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-16);\n      object-fit: contain;\n    }\n\n    /* ── Progress ── */\n    .processing { text-align: center; }\n    .progress-label {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .progress-bar {\n      width: 100%;\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border-radius: var(--cg-border-radius-25);\n      overflow: hidden;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .progress-fill {\n      height: 100%;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-25);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .progress-pct {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Result ── */\n    .result { text-align: center; }\n    .result-icon {\n      font-size: var(--cg-font-size-2xl);\n      margin-bottom: var(--cg-spacing-8);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .result-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: 1.5;\n      margin-bottom: var(--cg-spacing-16);\n      white-space: pre-wrap;\n    }\n\n    /* ── Error ── */\n    .error-icon { color: var(--cg-color-status-error-text-default); }\n    .error-text { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Buttons ── */\n    .btn-row {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      justify-content: center;\n      margin-top: var(--cg-spacing-16);\n    }\n    .btn-row button {\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), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .btn-row button:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n    .btn-primary {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .btn-primary:hover { filter: brightness(0.9); }\n    .btn-secondary {\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    .btn-secondary:hover { background: var(--cg-color-surface-cards-border); }\n  `];\n  @property({ type: String }) step: Step = 'upload';\n  @property({ type: String }) accept = '.pdf,.jpg,.png';\n  @property({ type: String }) previewUrl = '';\n  @property({ type: String }) result = '';\n  @property({ type: Number }) progress = 0;\n  @property({ type: String }) heading = 'Capture';\n\n  @state() private _dragOver = false;\n\n  private _dispatch(name: string, detail?: unknown) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));\n  }\n\n  private _onDragOver(e: DragEvent) {\n    e.preventDefault();\n    this._dragOver = true;\n  }\n\n  private _onDragLeave() { this._dragOver = false; }\n\n  private _onDrop(e: DragEvent) {\n    e.preventDefault();\n    this._dragOver = false;\n    const file = e.dataTransfer?.files[0];\n    if (file) this._dispatch('ai-capture-file', { file });\n  }\n\n  private _onFileInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) this._dispatch('ai-capture-file', { file });\n    input.value = '';\n  }\n\n  private _triggerFileInput() {\n    this.shadowRoot?.querySelector<HTMLInputElement>('#file-input')?.click();\n  }\n\n  private _stepIndex(): number {\n    if (this.step === 'error') return -1;\n    return STEPS.indexOf(this.step);\n  }\n\n  private _renderSteps() {\n    const current = this._stepIndex();\n    const labels = ['Upload', 'Preview', 'Process', 'Done'];\n    return html`\n      <div class=\"steps\" role=\"navigation\" aria-label=\"Capture progress\">\n        ${labels.map((label, i) => {\n          const cls = i < current ? 'done' : i === current ? 'active' : 'pending';\n          return html`\n            ${i > 0 ? html`<div class=\"step-line ${i <= current ? 'done' : ''}\"></div>` : nothing}\n            <div class=\"step-dot ${cls}\" aria-label=\"${label}: ${cls}\" title=\"${label}\">\n              ${i < current ? '\\u2713' : i + 1}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  private _renderUpload() {\n    return html`\n      <div\n        class=\"upload-zone ${this._dragOver ? 'drag-over' : ''}\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Upload file\"\n        @click=${this._triggerFileInput}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._triggerFileInput(); } }}\n        @dragover=${this._onDragOver}\n        @dragleave=${this._onDragLeave}\n        @drop=${this._onDrop}\n      >\n        <div class=\"upload-icon\" aria-hidden=\"true\">&#128206;</div>\n        <div class=\"upload-text\">Drop file here or click to browse</div>\n        <div class=\"upload-hint\">Accepted: ${this.accept}</div>\n      </div>\n      <input type=\"file\" id=\"file-input\" accept=${this.accept} @change=${this._onFileInput}>\n    `;\n  }\n\n  private _renderPreview() {\n    return html`\n      <div class=\"preview\">\n        ${this.previewUrl\n          ? html`<img class=\"preview-img\" src=${this.previewUrl} alt=\"File preview\">`\n          : html`<div class=\"upload-text\">No preview available</div>`}\n        <div class=\"btn-row\">\n          <button class=\"btn-secondary\" @click=${() => this._dispatch('ai-capture-retry')}>Retake</button>\n          <button class=\"btn-primary\" @click=${() => this._dispatch('ai-capture-confirm')}>Confirm</button>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderProcessing() {\n    return html`\n      <div class=\"processing\">\n        <div class=\"progress-label\">Processing...</div>\n        <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=${this.progress} aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"progress-fill\" style=\"width:${Math.min(this.progress, 100)}%\"></div>\n        </div>\n        <div class=\"progress-pct\">${Math.round(this.progress)}%</div>\n      </div>\n    `;\n  }\n\n  private _renderComplete() {\n    return html`\n      <div class=\"result\">\n        <div class=\"result-icon\" aria-hidden=\"true\">&#10003;</div>\n        <div class=\"result-text\">${this.result || 'Processing complete'}</div>\n        <div class=\"btn-row\">\n          <button class=\"btn-primary\" @click=${() => this._dispatch('ai-capture-complete')}>Done</button>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderError() {\n    return html`\n      <div class=\"result\">\n        <div class=\"result-icon error-icon\" aria-hidden=\"true\">&#10007;</div>\n        <div class=\"result-text error-text\">${this.result || 'An error occurred'}</div>\n        <div class=\"btn-row\">\n          <button class=\"btn-secondary\" @click=${() => this._dispatch('ai-capture-retry')}>Retry</button>\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\" role=\"region\" aria-label=\"${this.heading}\">\n        ${this.heading ? html`<div class=\"title\">${this.heading}</div>` : nothing}\n        ${this._renderSteps()}\n        ${this.step === 'upload' ? this._renderUpload()\n          : this.step === 'preview' ? this._renderPreview()\n          : this.step === 'processing' ? this._renderProcessing()\n          : this.step === 'complete' ? this._renderComplete()\n          : this._renderError()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-capture-flow': AiCaptureFlow;\n  }\n}\n"],"names":["STEPS","AiCaptureFlow","LitElement","name","detail","e","file","input","current","html","label","i","cls","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-capture-flow.js","sources":["../../../src/components/ai-capture-flow/ai-capture-flow.ts"],"sourcesContent":["/**\n * @element ai-capture-flow\n * Multi-step capture wizard: upload, preview, processing, and result with step indicator.\n *\n * @example\n * ```html\n * <ai-capture-flow\n *   step=\"upload\"\n *   accept=\".pdf,.jpg,.png\"\n *   heading=\"Document Scan\"\n * ></ai-capture-flow>\n * ```\n *\n * @fires {CustomEvent<{file: File}>} ai-capture-file - File selected or dropped\n * @fires {CustomEvent} ai-capture-confirm - User confirmed the preview\n * @fires {CustomEvent} ai-capture-retry - User chose to retake/retry\n * @fires {CustomEvent} ai-capture-complete - User clicked Done on the result\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Step dots, progress fill, and primary button color\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\ntype Step = 'upload' | 'preview' | 'processing' | 'complete' | 'error';\nconst STEPS: Step[] = ['upload', 'preview', 'processing', 'complete'];\n\n@customElement('ai-capture-flow')\nexport class AiCaptureFlow 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\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-200);\n      padding: var(--cg-spacing-16);\n    }\n\n    /* ── Title ── */\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    /* ── Step indicator ── */\n    .steps {\n      display: flex;\n      align-items: center;\n      gap: 0;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .step-dot {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      flex-shrink: 0;\n      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .step-dot.done {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .step-dot.active {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .step-dot.pending {\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .step-line {\n      flex: 1;\n      height: var(--cg-spacing-2);\n      background: var(--cg-color-surface-container-background);\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .step-line.done { background: var(--cg-color-action-primary-background-default); }\n\n    /* ── Upload zone ── */\n    .upload-zone {\n      border: var(--cg-border-width-100) dashed var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-24) var(--cg-spacing-16);\n      text-align: center;\n      cursor: pointer;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .upload-zone:hover, .upload-zone.drag-over {\n      border-color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n    }\n    .upload-zone:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n    .upload-icon { font-size: var(--cg-font-size-3xl); margin-bottom: var(--cg-spacing-8); }\n    .upload-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-normal);\n    }\n    .upload-hint {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n    }\n    input[type=\"file\"] { display: none; }\n\n    /* ── Preview ── */\n    .preview { text-align: center; }\n    .preview-img {\n      max-width: 100%;\n      max-height: var(--cg-spacing-256);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-16);\n      object-fit: contain;\n    }\n\n    /* ── Progress ── */\n    .processing { text-align: center; }\n    .progress-label {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .progress-bar {\n      width: 100%;\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .progress-fill {\n      height: 100%;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-50);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .progress-pct {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Result ── */\n    .result { text-align: center; }\n    .result-icon {\n      font-size: var(--cg-font-size-2xl);\n      margin-bottom: var(--cg-spacing-8);\n      color: var(--cg-color-ai-complete-text);\n    }\n    .result-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-normal);\n      margin-bottom: var(--cg-spacing-16);\n      white-space: pre-wrap;\n    }\n\n    /* ── Error ── */\n    .error-icon { color: var(--cg-color-ai-error-text); }\n    .error-text { color: var(--cg-color-ai-error-text); }\n\n    /* ── Buttons ── */\n    .btn-row {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      justify-content: center;\n      margin-top: var(--cg-spacing-16);\n    }\n    .btn-row button {\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), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .btn-row button:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n    .btn-primary {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .btn-primary:hover { filter: brightness(0.9); }\n    .btn-secondary {\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    .btn-secondary:hover { background: var(--cg-color-surface-cards-border); }\n  `];\n  @property({ type: String }) step: Step = 'upload';\n  @property({ type: String }) accept = '.pdf,.jpg,.png';\n  @property({ type: String }) previewUrl = '';\n  @property({ type: String }) result = '';\n  @property({ type: Number }) progress = 0;\n  @property({ type: String }) heading = 'Capture';\n\n  @state() private _dragOver = false;\n\n  private _dispatch(name: string, detail?: unknown) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));\n  }\n\n  private _onDragOver(e: DragEvent) {\n    e.preventDefault();\n    this._dragOver = true;\n  }\n\n  private _onDragLeave() { this._dragOver = false; }\n\n  private _onDrop(e: DragEvent) {\n    e.preventDefault();\n    this._dragOver = false;\n    const file = e.dataTransfer?.files[0];\n    if (file) this._dispatch('ai-capture-file', { file });\n  }\n\n  private _onFileInput(e: Event) {\n    const input = e.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (file) this._dispatch('ai-capture-file', { file });\n    input.value = '';\n  }\n\n  private _triggerFileInput() {\n    this.shadowRoot?.querySelector<HTMLInputElement>('#file-input')?.click();\n  }\n\n  private _stepIndex(): number {\n    if (this.step === 'error') return -1;\n    return STEPS.indexOf(this.step);\n  }\n\n  private _renderSteps() {\n    const current = this._stepIndex();\n    const labels = ['Upload', 'Preview', 'Process', 'Done'];\n    return html`\n      <div class=\"steps\" role=\"navigation\" aria-label=\"Capture progress\">\n        ${labels.map((label, i) => {\n          const cls = i < current ? 'done' : i === current ? 'active' : 'pending';\n          return html`\n            ${i > 0 ? html`<div class=\"step-line ${i <= current ? 'done' : ''}\"></div>` : nothing}\n            <div class=\"step-dot ${cls}\" aria-label=\"${label}: ${cls}\" title=\"${label}\">\n              ${i < current ? '\\u2713' : i + 1}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  private _renderUpload() {\n    return html`\n      <div\n        class=\"upload-zone ${this._dragOver ? 'drag-over' : ''}\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"Upload file\"\n        @click=${this._triggerFileInput}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._triggerFileInput(); } }}\n        @dragover=${this._onDragOver}\n        @dragleave=${this._onDragLeave}\n        @drop=${this._onDrop}\n      >\n        <div class=\"upload-icon\" aria-hidden=\"true\">&#128206;</div>\n        <div class=\"upload-text\">Drop file here or click to browse</div>\n        <div class=\"upload-hint\">Accepted: ${this.accept}</div>\n      </div>\n      <input type=\"file\" id=\"file-input\" accept=${this.accept} @change=${this._onFileInput}>\n    `;\n  }\n\n  private _renderPreview() {\n    return html`\n      <div class=\"preview\">\n        ${this.previewUrl\n          ? html`<img class=\"preview-img\" src=${this.previewUrl} alt=\"File preview\">`\n          : html`<div class=\"upload-text\">No preview available</div>`}\n        <div class=\"btn-row\">\n          <button class=\"btn-secondary\" @click=${() => this._dispatch('ai-capture-retry')}>Retake</button>\n          <button class=\"btn-primary\" @click=${() => this._dispatch('ai-capture-confirm')}>Confirm</button>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderProcessing() {\n    return html`\n      <div class=\"processing\">\n        <div class=\"progress-label\">Processing...</div>\n        <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=${this.progress} aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"progress-fill\" style=\"width:${Math.min(this.progress, 100)}%\"></div>\n        </div>\n        <div class=\"progress-pct\">${Math.round(this.progress)}%</div>\n      </div>\n    `;\n  }\n\n  private _renderComplete() {\n    return html`\n      <div class=\"result\">\n        <div class=\"result-icon\" aria-hidden=\"true\">&#10003;</div>\n        <div class=\"result-text\">${this.result || 'Processing complete'}</div>\n        <div class=\"btn-row\">\n          <button class=\"btn-primary\" @click=${() => this._dispatch('ai-capture-complete')}>Done</button>\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderError() {\n    return html`\n      <div class=\"result\">\n        <div class=\"result-icon error-icon\" aria-hidden=\"true\">&#10007;</div>\n        <div class=\"result-text error-text\">${this.result || 'An error occurred'}</div>\n        <div class=\"btn-row\">\n          <button class=\"btn-secondary\" @click=${() => this._dispatch('ai-capture-retry')}>Retry</button>\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\" role=\"region\" aria-label=\"${this.heading}\">\n        ${this.heading ? html`<div class=\"title\">${this.heading}</div>` : nothing}\n        ${this._renderSteps()}\n        ${this.step === 'upload' ? this._renderUpload()\n          : this.step === 'preview' ? this._renderPreview()\n          : this.step === 'processing' ? this._renderProcessing()\n          : this.step === 'complete' ? this._renderComplete()\n          : this._renderError()}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-capture-flow': AiCaptureFlow;\n  }\n}\n"],"names":["STEPS","AiCaptureFlow","LitElement","name","detail","e","file","input","current","html","label","i","cls","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-changelog/ai-changelog.js

@@ -1,18 +1,18 @@
-import { css as l, LitElement as p, html as i, nothing as v } from "lit";
+import { css as g, LitElement as p, html as n, nothing as v } from "lit";
 import { property as u, state as b, customElement as f } from "lit/decorators.js";
-import { h, r as m, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h, r as m, f as x } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (a, t, c, o) => {
   for (var r = o > 1 ? void 0 : o ? k(t, c) : t, e = a.length - 1, s; e >= 0; e--)
     (s = a[e]) && (r = (o ? s(t, c, r) : s(r)) || r);
   return o && r && y(t, c, r), r;
 };
-const g = {
+const l = {
   model: "type-model",
   prompt: "type-prompt",
   config: "type-config",
   data: "type-data"
 };
-let n = class extends p {
+let i = class extends p {
   constructor() {
     super(...arguments), this.entries = [], this._expandedSet = /* @__PURE__ */ new Set();
   }
@@ -34,14 +34,14 @@ let n = class extends p {
     }));
   }
   render() {
-    return this.entries.length ? i`
+    return this.entries.length ? n`
       <div class="container" role="region" aria-label="Changelog">
         <div class="header">Changelog</div>
 
         <div class="timeline" role="list" aria-label="Version history">
           ${this.entries.map((a, t) => {
-      const c = `${a.version}-${t}`, o = this._expandedSet.has(c), r = g[a.type] || g.config;
-      return i`
+      const c = `${a.version}-${t}`, o = this._expandedSet.has(c), r = l[a.type] || l.config;
+      return n`
               <div class="entry" role="listitem">
                 <div class="entry-dot ${r}" aria-hidden="true"></div>
                 <div
@@ -62,7 +62,7 @@ let n = class extends p {
 
                   <div class="entry-meta">
                     <span>${a.date}</span>
-                    ${a.author ? i`<span>${a.author}</span>` : v}
+                    ${a.author ? n`<span>${a.author}</span>` : v}
                   </div>
 
                   <div class="changes-preview ${o ? "expanded" : ""}">
@@ -93,10 +93,10 @@ let n = class extends p {
     })}
         </div>
       </div>
-    ` : i`<div class="container"><div class="empty-state" role="status">No changelog entries</div></div>`;
+    ` : n`<div class="container"><div class="empty-state" role="status">No changelog entries</div></div>`;
   }
 };
-n.styles = [h, m, x, l`
+i.styles = [h, m, x, g`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
     }
@@ -138,7 +138,7 @@ n.styles = [h, m, x, l`
 
     .entry-dot {
       position: absolute;
-      left: calc(-1 * var(--cg-spacing-20);
+      left: calc(-1 * var(--cg-spacing-20));
       top: var(--cg-spacing-6);
       width: var(--cg-spacing-8);
       height: var(--cg-spacing-8);
@@ -194,7 +194,7 @@ n.styles = [h, m, x, l`
     }
     .type-badge.type-config {
       background: var(--cg-overlay-accent-light);
-      color: var(--cg-color-chart-7);
+      color: var(--cg-color-chart-7-stroke);
     }
     .type-badge.type-data {
       background: var(--cg-color-status-success-background-default);
@@ -203,22 +203,22 @@ n.styles = [h, m, x, l`
 
     .entry-dot.type-model { background: var(--cg-color-status-info-text-default); }
     .entry-dot.type-prompt { background: var(--cg-color-action-primary-background-default); }
-    .entry-dot.type-config { background: var(--cg-color-chart-7); }
+    .entry-dot.type-config { background: var(--cg-color-chart-7-stroke); }
     .entry-dot.type-data { background: var(--cg-color-status-success-text-default); }
 
     .entry-meta {
       display: flex;
       gap: var(--cg-spacing-8);
       font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-input-border-hover);
+      color: var(--cg-color-input-text-placeholder);
       margin-top: var(--cg-spacing-4);
     }
 
     .changes-preview {
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       color: var(--cg-color-input-text-placeholder);
       margin-top: var(--cg-spacing-6);
-      line-height: 1.5;
+      line-height: var(--cg-line-height-normal);
       overflow: hidden;
       max-height: var(--cg-spacing-40);
       transition: max-height var(--cg-transition-duration-default) var(--cg-transition-easing-default);
@@ -239,7 +239,7 @@ n.styles = [h, m, x, l`
     }
     .expand-toggle:hover { color: var(--cg-color-surface-base-text); }
     .expand-toggle:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
 
@@ -262,31 +262,31 @@ n.styles = [h, m, x, l`
     }
     .rollback-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
     .rollback-btn:hover {
-      border-color: var(--cg-color-status-warning-text);
-      color: var(--cg-color-status-warning-text);
+      border-color: var(--cg-color-status-warning-text-default);
+      color: var(--cg-color-status-warning-text-default);
     }
     .rollback-btn:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
 
     .empty-state {
       text-align: center;
-      color: var(--cg-color-input-border-hover);
+      color: var(--cg-color-empty-state-text-secondary);
       font-size: var(--cg-font-size-sm);
       padding: var(--cg-spacing-24) 0;
     }
   `];
 d([
   u({ type: Array })
-], n.prototype, "entries", 2);
+], i.prototype, "entries", 2);
 d([
   b()
-], n.prototype, "_expandedSet", 2);
-n = d([
+], i.prototype, "_expandedSet", 2);
+i = d([
   f("ai-changelog")
-], n);
+], i);
 export {
-  n as AiChangelog
+  i as AiChangelog
 };
 //# sourceMappingURL=ai-changelog.js.map

package/dist/components/ai-changelog/ai-changelog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-changelog.js","sources":["../../../src/components/ai-changelog/ai-changelog.ts"],"sourcesContent":["/**\n * @element ai-changelog\n * Timeline-style version history feed with type badges, expandable details, and rollback buttons.\n *\n * @example\n * ```html\n * <ai-changelog .entries=${[\n *   {version:'v2.1', date:'2024-03-15', type:'model', changes:'Upgraded to GPT-4o', author:'ops'},\n *   {version:'v2.0', date:'2024-03-01', type:'prompt', changes:'Revised system prompt'}\n * ]}></ai-changelog>\n * ```\n *\n * @fires {CustomEvent<{version, type, date}>} ai-changelog-entry-click - Entry card clicked\n * @fires {CustomEvent<{version, type}>} ai-changelog-rollback - Rollback 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\ninterface ChangelogEntry {\n  version: string;\n  date: string;\n  author?: string;\n  changes: string;\n  type: 'model' | 'prompt' | 'config' | 'data';\n}\n\nconst TYPE_CSS_CLASS: Record<string, string> = {\n  model: 'type-model',\n  prompt: 'type-prompt',\n  config: 'type-config',\n  data: 'type-data',\n};\n\n@customElement('ai-changelog')\nexport class AiChangelog 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    .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      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .timeline {\n      position: relative;\n      padding-left: var(--cg-spacing-20);\n    }\n\n    .timeline::before {\n      content: '';\n      position: absolute;\n      left: var(--cg-spacing-6);\n      top: var(--cg-spacing-4);\n      bottom: var(--cg-spacing-4);\n      width: var(--cg-spacing-2);\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    .entry {\n      position: relative;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .entry-dot {\n      position: absolute;\n      left: calc(-1 * var(--cg-spacing-20);\n      top: var(--cg-spacing-6);\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-surface-cards-border);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);\n      z-index: 1;\n    }\n\n    .entry-card {\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      padding: var(--cg-spacing-12);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .entry-card:hover { border-color: var(--cg-color-surface-cards-border); }\n    .entry-card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .entry-card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .entry-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n\n    .version {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .type-badge {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .type-badge.type-model {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .type-badge.type-prompt {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n    }\n    .type-badge.type-config {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-chart-7);\n    }\n    .type-badge.type-data {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    .entry-dot.type-model { background: var(--cg-color-status-info-text-default); }\n    .entry-dot.type-prompt { background: var(--cg-color-action-primary-background-default); }\n    .entry-dot.type-config { background: var(--cg-color-chart-7); }\n    .entry-dot.type-data { background: var(--cg-color-status-success-text-default); }\n\n    .entry-meta {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-border-hover);\n      margin-top: var(--cg-spacing-4);\n    }\n\n    .changes-preview {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n      line-height: 1.5;\n      overflow: hidden;\n      max-height: var(--cg-spacing-40);\n      transition: max-height var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .changes-preview.expanded {\n      max-height: var(--_ai-changelog-expanded-max-height, 500px);\n    }\n\n    .expand-toggle {\n      background: transparent;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      padding: var(--cg-spacing-4) 0;\n      margin-top: var(--cg-spacing-4);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .expand-toggle:hover { color: var(--cg-color-surface-base-text); }\n    .expand-toggle:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .entry-actions {\n      display: flex;\n      justify-content: flex-end;\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .rollback-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .rollback-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .rollback-btn:hover {\n      border-color: var(--cg-color-status-warning-text);\n      color: var(--cg-color-status-warning-text);\n    }\n    .rollback-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\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  @property({ type: Array }) entries: ChangelogEntry[] = [];\n\n  @state() private _expandedSet = new Set<string>();\n\n  private _toggle(id: string) {\n    if (this._expandedSet.has(id)) {\n      this._expandedSet.delete(id);\n    } else {\n      this._expandedSet.add(id);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleClick(entry: ChangelogEntry) {\n    this.dispatchEvent(new CustomEvent('ai-changelog-entry-click', {\n      detail: { version: entry.version, type: entry.type, date: entry.date },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleRollback(e: Event, entry: ChangelogEntry) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-changelog-rollback', {\n      detail: { version: entry.version, type: entry.type },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    if (!this.entries.length) {\n      return html`<div class=\"container\"><div class=\"empty-state\" role=\"status\">No changelog entries</div></div>`;\n    }\n\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"Changelog\">\n        <div class=\"header\">Changelog</div>\n\n        <div class=\"timeline\" role=\"list\" aria-label=\"Version history\">\n          ${this.entries.map((entry, i) => {\n            const id = `${entry.version}-${i}`;\n            const expanded = this._expandedSet.has(id);\n            const typeCls = TYPE_CSS_CLASS[entry.type] || TYPE_CSS_CLASS.config;\n\n            return html`\n              <div class=\"entry\" role=\"listitem\">\n                <div class=\"entry-dot ${typeCls}\" aria-hidden=\"true\"></div>\n                <div\n                  class=\"entry-card\"\n                  tabindex=\"0\"\n                  aria-label=\"Version ${entry.version}, ${entry.type} change on ${entry.date}\"\n                  @click=${() => this._handleClick(entry)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(entry); } }}\n                >\n                  <div class=\"entry-top\">\n                    <span class=\"version\">${entry.version}</span>\n                    <span\n                      class=\"type-badge ${typeCls}\"\n                    >${entry.type}</span>\n                  </div>\n\n                  <div class=\"entry-meta\">\n                    <span>${entry.date}</span>\n                    ${entry.author ? html`<span>${entry.author}</span>` : nothing}\n                  </div>\n\n                  <div class=\"changes-preview ${expanded ? 'expanded' : ''}\">\n                    ${entry.changes}\n                  </div>\n\n                  <button\n                    class=\"expand-toggle\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._toggle(id); }}\n                    aria-expanded=${expanded ? 'true' : 'false'}\n                    aria-label=${expanded ? 'Collapse details' : 'Expand details'}\n                    tabindex=\"0\"\n                  >${expanded ? 'Show less' : 'Show more'}</button>\n\n                  <div class=\"entry-actions\">\n                    <button\n                      class=\"rollback-btn\"\n                      @click=${(e: Event) => this._handleRollback(e, entry)}\n                      aria-label=\"Rollback to version ${entry.version}\"\n                      tabindex=\"0\"\n                    >Rollback</button>\n                  </div>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-changelog': AiChangelog;\n  }\n}\n"],"names":["TYPE_CSS_CLASS","AiChangelog","LitElement","id","entry","e","html","i","expanded","typeCls","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-changelog.js","sources":["../../../src/components/ai-changelog/ai-changelog.ts"],"sourcesContent":["/**\n * @element ai-changelog\n * Timeline-style version history feed with type badges, expandable details, and rollback buttons.\n *\n * @example\n * ```html\n * <ai-changelog .entries=${[\n *   {version:'v2.1', date:'2024-03-15', type:'model', changes:'Upgraded to GPT-4o', author:'ops'},\n *   {version:'v2.0', date:'2024-03-01', type:'prompt', changes:'Revised system prompt'}\n * ]}></ai-changelog>\n * ```\n *\n * @fires {CustomEvent<{version, type, date}>} ai-changelog-entry-click - Entry card clicked\n * @fires {CustomEvent<{version, type}>} ai-changelog-rollback - Rollback 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\ninterface ChangelogEntry {\n  version: string;\n  date: string;\n  author?: string;\n  changes: string;\n  type: 'model' | 'prompt' | 'config' | 'data';\n}\n\nconst TYPE_CSS_CLASS: Record<string, string> = {\n  model: 'type-model',\n  prompt: 'type-prompt',\n  config: 'type-config',\n  data: 'type-data',\n};\n\n@customElement('ai-changelog')\nexport class AiChangelog 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    .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      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .timeline {\n      position: relative;\n      padding-left: var(--cg-spacing-20);\n    }\n\n    .timeline::before {\n      content: '';\n      position: absolute;\n      left: var(--cg-spacing-6);\n      top: var(--cg-spacing-4);\n      bottom: var(--cg-spacing-4);\n      width: var(--cg-spacing-2);\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    .entry {\n      position: relative;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .entry-dot {\n      position: absolute;\n      left: calc(-1 * var(--cg-spacing-20));\n      top: var(--cg-spacing-6);\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-surface-cards-border);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);\n      z-index: 1;\n    }\n\n    .entry-card {\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      padding: var(--cg-spacing-12);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .entry-card:hover { border-color: var(--cg-color-surface-cards-border); }\n    .entry-card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .entry-card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .entry-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n\n    .version {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .type-badge {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .type-badge.type-model {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .type-badge.type-prompt {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n    }\n    .type-badge.type-config {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-chart-7-stroke);\n    }\n    .type-badge.type-data {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    .entry-dot.type-model { background: var(--cg-color-status-info-text-default); }\n    .entry-dot.type-prompt { background: var(--cg-color-action-primary-background-default); }\n    .entry-dot.type-config { background: var(--cg-color-chart-7-stroke); }\n    .entry-dot.type-data { background: var(--cg-color-status-success-text-default); }\n\n    .entry-meta {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-4);\n    }\n\n    .changes-preview {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n      line-height: var(--cg-line-height-normal);\n      overflow: hidden;\n      max-height: var(--cg-spacing-40);\n      transition: max-height var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .changes-preview.expanded {\n      max-height: var(--_ai-changelog-expanded-max-height, 500px);\n    }\n\n    .expand-toggle {\n      background: transparent;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      padding: var(--cg-spacing-4) 0;\n      margin-top: var(--cg-spacing-4);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .expand-toggle:hover { color: var(--cg-color-surface-base-text); }\n    .expand-toggle:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .entry-actions {\n      display: flex;\n      justify-content: flex-end;\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .rollback-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .rollback-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .rollback-btn:hover {\n      border-color: var(--cg-color-status-warning-text-default);\n      color: var(--cg-color-status-warning-text-default);\n    }\n    .rollback-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .empty-state {\n      text-align: center;\n      color: var(--cg-color-empty-state-text-secondary);\n      font-size: var(--cg-font-size-sm);\n      padding: var(--cg-spacing-24) 0;\n    }\n  `];\n  @property({ type: Array }) entries: ChangelogEntry[] = [];\n\n  @state() private _expandedSet = new Set<string>();\n\n  private _toggle(id: string) {\n    if (this._expandedSet.has(id)) {\n      this._expandedSet.delete(id);\n    } else {\n      this._expandedSet.add(id);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleClick(entry: ChangelogEntry) {\n    this.dispatchEvent(new CustomEvent('ai-changelog-entry-click', {\n      detail: { version: entry.version, type: entry.type, date: entry.date },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleRollback(e: Event, entry: ChangelogEntry) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-changelog-rollback', {\n      detail: { version: entry.version, type: entry.type },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    if (!this.entries.length) {\n      return html`<div class=\"container\"><div class=\"empty-state\" role=\"status\">No changelog entries</div></div>`;\n    }\n\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"Changelog\">\n        <div class=\"header\">Changelog</div>\n\n        <div class=\"timeline\" role=\"list\" aria-label=\"Version history\">\n          ${this.entries.map((entry, i) => {\n            const id = `${entry.version}-${i}`;\n            const expanded = this._expandedSet.has(id);\n            const typeCls = TYPE_CSS_CLASS[entry.type] || TYPE_CSS_CLASS.config;\n\n            return html`\n              <div class=\"entry\" role=\"listitem\">\n                <div class=\"entry-dot ${typeCls}\" aria-hidden=\"true\"></div>\n                <div\n                  class=\"entry-card\"\n                  tabindex=\"0\"\n                  aria-label=\"Version ${entry.version}, ${entry.type} change on ${entry.date}\"\n                  @click=${() => this._handleClick(entry)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(entry); } }}\n                >\n                  <div class=\"entry-top\">\n                    <span class=\"version\">${entry.version}</span>\n                    <span\n                      class=\"type-badge ${typeCls}\"\n                    >${entry.type}</span>\n                  </div>\n\n                  <div class=\"entry-meta\">\n                    <span>${entry.date}</span>\n                    ${entry.author ? html`<span>${entry.author}</span>` : nothing}\n                  </div>\n\n                  <div class=\"changes-preview ${expanded ? 'expanded' : ''}\">\n                    ${entry.changes}\n                  </div>\n\n                  <button\n                    class=\"expand-toggle\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._toggle(id); }}\n                    aria-expanded=${expanded ? 'true' : 'false'}\n                    aria-label=${expanded ? 'Collapse details' : 'Expand details'}\n                    tabindex=\"0\"\n                  >${expanded ? 'Show less' : 'Show more'}</button>\n\n                  <div class=\"entry-actions\">\n                    <button\n                      class=\"rollback-btn\"\n                      @click=${(e: Event) => this._handleRollback(e, entry)}\n                      aria-label=\"Rollback to version ${entry.version}\"\n                      tabindex=\"0\"\n                    >Rollback</button>\n                  </div>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-changelog': AiChangelog;\n  }\n}\n"],"names":["TYPE_CSS_CLASS","AiChangelog","LitElement","id","entry","e","html","i","expanded","typeCls","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-chart-summary/ai-chart-summary.d.ts

@@ -18,13 +18,7 @@ export declare class AiChartSummary extends LitElement {
     private _toggle;
     private _handleTrendClick;
     private _handleRefresh;
-    private _trendIcon;
     render(): import('lit').TemplateResult<1> | typeof nothing;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'ai-chart-summary': AiChartSummary;
-    }
-}
 export {};
 //# sourceMappingURL=ai-chart-summary.d.ts.map

package/dist/components/ai-chart-summary/ai-chart-summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-chart-summary.d.ts","sourceRoot":"","sources":["../../../src/components/ai-chart-summary/ai-chart-summary.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,+CAA+C,CAAC;AAEvD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAmInB;IAES,OAAO,SAAM;IACE,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,WAAW,UAAS;IACrB,UAAU,SAAK;IAC/B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAa;IACpC,OAAO,UAAS;IAC/B,OAAO,UAAS;IACjC,SAAS,SAAM;IAElB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,UAAU;IAMT,MAAM;CA+EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"ai-chart-summary.d.ts","sourceRoot":"","sources":["../../../src/components/ai-chart-summary/ai-chart-summary.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAkJnB;IAES,OAAO,SAAM;IACE,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,WAAW,UAAS;IACrB,UAAU,SAAK;IAC/B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAa;IACpC,OAAO,UAAS;IAC/B,OAAO,UAAS;IACjC,SAAS,SAAM;IAElB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IAIb,MAAM;CAuEhB"}