@cognivo/components 0.8.0

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

@@ -0,0 +1,336 @@
+import { css as p, LitElement as u, nothing as g, html as t } from "lit";
+import { property as n, state as v, customElement as f } from "lit/decorators.js";
+import { h as b, r as h, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, e, s, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(e, s) : e, d = r.length - 1, l; d >= 0; d--)
+    (l = r[d]) && (o = (a ? l(e, s, o) : l(o)) || o);
+  return a && o && w(e, s, o), o;
+};
+const x = ["upload", "preview", "processing", "complete"];
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.step = "upload", this.accept = ".pdf,.jpg,.png", this.previewUrl = "", this.result = "", this.progress = 0, this.heading = "Capture", this._dragOver = !1;
+  }
+  _dispatch(r, e) {
+    this.dispatchEvent(new CustomEvent(r, { bubbles: !0, composed: !0, detail: e }));
+  }
+  _onDragOver(r) {
+    r.preventDefault(), this._dragOver = !0;
+  }
+  _onDragLeave() {
+    this._dragOver = !1;
+  }
+  _onDrop(r) {
+    r.preventDefault(), this._dragOver = !1;
+    const e = r.dataTransfer?.files[0];
+    e && this._dispatch("ai-capture-file", { file: e });
+  }
+  _onFileInput(r) {
+    const e = r.target, s = e.files?.[0];
+    s && this._dispatch("ai-capture-file", { file: s }), e.value = "";
+  }
+  _triggerFileInput() {
+    this.shadowRoot?.querySelector("#file-input")?.click();
+  }
+  _stepIndex() {
+    return this.step === "error" ? -1 : x.indexOf(this.step);
+  }
+  _renderSteps() {
+    const r = this._stepIndex();
+    return t`
+      <div class="steps" role="navigation" aria-label="Capture progress">
+        ${["Upload", "Preview", "Process", "Done"].map((s, a) => {
+      const o = a < r ? "done" : a === r ? "active" : "pending";
+      return t`
+            ${a > 0 ? t`<div class="step-line ${a <= r ? "done" : ""}"></div>` : g}
+            <div class="step-dot ${o}" aria-label="${s}: ${o}" title="${s}">
+              ${a < r ? "✓" : a + 1}
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  _renderUpload() {
+    return t`
+      <div
+        class="upload-zone ${this._dragOver ? "drag-over" : ""}"
+        role="button"
+        tabindex="0"
+        aria-label="Upload file"
+        @click=${this._triggerFileInput}
+        @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._triggerFileInput());
+    }}
+        @dragover=${this._onDragOver}
+        @dragleave=${this._onDragLeave}
+        @drop=${this._onDrop}
+      >
+        <div class="upload-icon" aria-hidden="true">&#128206;</div>
+        <div class="upload-text">Drop file here or click to browse</div>
+        <div class="upload-hint">Accepted: ${this.accept}</div>
+      </div>
+      <input type="file" id="file-input" accept=${this.accept} @change=${this._onFileInput}>
+    `;
+  }
+  _renderPreview() {
+    return t`
+      <div class="preview">
+        ${this.previewUrl ? t`<img class="preview-img" src=${this.previewUrl} alt="File preview">` : t`<div class="upload-text">No preview available</div>`}
+        <div class="btn-row">
+          <button class="btn-secondary" @click=${() => this._dispatch("ai-capture-retry")}>Retake</button>
+          <button class="btn-primary" @click=${() => this._dispatch("ai-capture-confirm")}>Confirm</button>
+        </div>
+      </div>
+    `;
+  }
+  _renderProcessing() {
+    return t`
+      <div class="processing">
+        <div class="progress-label">Processing...</div>
+        <div class="progress-bar" role="progressbar" aria-valuenow=${this.progress} aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-fill" style="width:${Math.min(this.progress, 100)}%"></div>
+        </div>
+        <div class="progress-pct">${Math.round(this.progress)}%</div>
+      </div>
+    `;
+  }
+  _renderComplete() {
+    return t`
+      <div class="result">
+        <div class="result-icon" aria-hidden="true">&#10003;</div>
+        <div class="result-text">${this.result || "Processing complete"}</div>
+        <div class="btn-row">
+          <button class="btn-primary" @click=${() => this._dispatch("ai-capture-complete")}>Done</button>
+        </div>
+      </div>
+    `;
+  }
+  _renderError() {
+    return t`
+      <div class="result">
+        <div class="result-icon error-icon" aria-hidden="true">&#10007;</div>
+        <div class="result-text error-text">${this.result || "An error occurred"}</div>
+        <div class="btn-row">
+          <button class="btn-secondary" @click=${() => this._dispatch("ai-capture-retry")}>Retry</button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return t`
+      <div class="card" role="region" aria-label="${this.heading}">
+        ${this.heading ? t`<div class="title">${this.heading}</div>` : g}
+        ${this._renderSteps()}
+        ${this.step === "upload" ? this._renderUpload() : this.step === "preview" ? this._renderPreview() : this.step === "processing" ? this._renderProcessing() : this.step === "complete" ? this._renderComplete() : this._renderError()}
+      </div>
+    `;
+  }
+};
+i.styles = [b, h, m, p`
+    :host {
+      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;
+    }
+
+    .card {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      padding: var(--cg-spacing-16);
+    }
+
+    /* ── Title ── */
+    .title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    /* ── Step indicator ── */
+    .steps {
+      display: flex;
+      align-items: center;
+      gap: 0;
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .step-dot {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      flex-shrink: 0;
+      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .step-dot.done {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-base-background);
+    }
+    .step-dot.active {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-base-background);
+    }
+    .step-dot.pending {
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .step-line {
+      flex: 1;
+      height: 2px;
+      background: var(--cg-color-surface-container-background);
+      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .step-line.done { background: var(--cg-color-action-primary-background-default); }
+
+    /* ── Upload zone ── */
+    .upload-zone {
+      border: 2px dashed var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-24) var(--cg-spacing-16);
+      text-align: center;
+      cursor: pointer;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .upload-zone:hover, .upload-zone.drag-over {
+      border-color: var(--cg-color-surface-base-text);
+      background: var(--cg-overlay-accent-subtle);
+    }
+    .upload-zone:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+    .upload-icon { font-size: var(--cg-font-size-3xl); margin-bottom: var(--cg-spacing-8); }
+    .upload-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: 1.5;
+    }
+    .upload-hint {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-6);
+    }
+    input[type="file"] { display: none; }
+
+    /* ── Preview ── */
+    .preview { text-align: center; }
+    .preview-img {
+      max-width: 100%;
+      max-height: var(240px);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      margin-bottom: var(--cg-spacing-16);
+      object-fit: contain;
+    }
+
+    /* ── Progress ── */
+    .processing { text-align: center; }
+    .progress-label {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .progress-bar {
+      width: 100%;
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-container-background);
+      border-radius: var(--cg-border-radius-25);
+      overflow: hidden;
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-25);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .progress-pct {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Result ── */
+    .result { text-align: center; }
+    .result-icon {
+      font-size: var(--cg-font-size-2xl);
+      margin-bottom: var(--cg-spacing-8);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .result-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: 1.5;
+      margin-bottom: var(--cg-spacing-16);
+      white-space: pre-wrap;
+    }
+
+    /* ── Error ── */
+    .error-icon { color: var(--cg-color-status-error-text-default); }
+    .error-text { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Buttons ── */
+    .btn-row {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      justify-content: center;
+      margin-top: var(--cg-spacing-16);
+    }
+    .btn-row button {
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      border: none;
+      font-family: inherit;
+      transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .btn-row button:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+    .btn-primary {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-base-background);
+    }
+    .btn-primary:hover { filter: brightness(0.9); }
+    .btn-secondary {
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .btn-secondary:hover { background: var(--cg-color-surface-cards-border); }
+  `];
+c([
+  n({ type: String })
+], i.prototype, "step", 2);
+c([
+  n({ type: String })
+], i.prototype, "accept", 2);
+c([
+  n({ type: String })
+], i.prototype, "previewUrl", 2);
+c([
+  n({ type: String })
+], i.prototype, "result", 2);
+c([
+  n({ type: Number })
+], i.prototype, "progress", 2);
+c([
+  n({ type: String })
+], i.prototype, "heading", 2);
+c([
+  v()
+], i.prototype, "_dragOver", 2);
+i = c([
+  f("ai-capture-flow")
+], i);
+export {
+  i as AiCaptureFlow
+};
+//# sourceMappingURL=ai-capture-flow.js.map

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

@@ -0,0 +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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"}

package/dist/components/ai-changelog/ai-changelog.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+interface ChangelogEntry {
+    version: string;
+    date: string;
+    author?: string;
+    changes: string;
+    type: 'model' | 'prompt' | 'config' | 'data';
+}
+export declare class AiChangelog extends LitElement {
+    static styles: import('lit').CSSResult[];
+    entries: ChangelogEntry[];
+    private _expandedSet;
+    private _toggle;
+    private _handleClick;
+    private _handleRollback;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-changelog': AiChangelog;
+    }
+}
+export {};
+//# sourceMappingURL=ai-changelog.d.ts.map

package/dist/components/ai-changelog/ai-changelog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-changelog.d.ts","sourceRoot":"","sources":["../../../src/components/ai-changelog/ai-changelog.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC9C;AASD,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAoLnB;IACwB,OAAO,EAAE,cAAc,EAAE,CAAM;IAEjD,OAAO,CAAC,YAAY,CAAqB;IAElD,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,eAAe;IASd,MAAM;CAiEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}