@cognivo/components 0.8.0

package/dist/components/ai-progress-steps/ai-progress-steps.js

@@ -0,0 +1,201 @@
+import { css as u, LitElement as g, nothing as p, html as c } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
+import { h as f, r as b, f as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (r, t, e, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(t, e) : t, i = r.length - 1, n; i >= 0; i--)
+    (n = r[i]) && (a = (o ? n(t, e, a) : n(a)) || a);
+  return o && a && m(t, e, a), a;
+};
+let s = class extends g {
+  constructor() {
+    super(...arguments), this.phases = [], this.compact = !1;
+  }
+  _statusIcon(r) {
+    switch (r) {
+      case "complete":
+        return "✓";
+      case "error":
+        return "✗";
+      case "active":
+        return "●";
+      default:
+        return "";
+    }
+  }
+  _handlePhaseClick(r, t) {
+    this.dispatchEvent(new CustomEvent("ai-progress-phase-click", {
+      detail: { label: r.label, status: r.status, index: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const r = this.phases.length;
+    return c`
+      <div class="steps" role="list" aria-label="Progress steps">
+        ${this.phases.map((t, e) => {
+      const o = e > 0 && this.phases[e - 1].status === "complete";
+      return c`
+            <button
+              class="step"
+              role="listitem"
+              tabindex="0"
+              data-status=${t.status}
+              aria-label=${`${t.label}: ${t.status}`}
+              @click=${() => this._handlePhaseClick(t, e)}
+            >
+              <div class="step-row">
+                <div class="line ${e === 0 ? "hide" : ""} ${o ? "done" : ""}"></div>
+                <div class="dot" data-status=${t.status}>
+                  ${this._statusIcon(t.status) || c`${e + 1}`}
+                </div>
+                <div class="line ${e === r - 1 ? "hide" : ""} ${t.status === "complete" ? "done" : ""}"></div>
+              </div>
+              <div class="info">
+                <div class="label">${t.label}</div>
+                ${t.duration ? c`<div class="duration">${t.duration}</div>` : p}
+              </div>
+            </button>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+s.styles = [f, b, h, u`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([hidden]) { display: none; }
+
+    .steps {
+      display: flex;
+      align-items: flex-start;
+      gap: 0;
+      width: 100%;
+    }
+
+    .step {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
+      position: relative;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      font-family: inherit;
+      color: inherit;
+    }
+    .step:hover .dot {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .step:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .step:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+      border-radius: var(--cg-border-radius-50);
+    }
+
+    .step-row {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .line {
+      flex: 1;
+      height: 2px;
+      background: var(--cg-color-surface-cards-border);
+      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .line.done {
+      background: var(--cg-color-action-primary-background-default);
+    }
+    .line.hide { visibility: hidden; }
+
+    .dot {
+      flex-shrink: 0;
+      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-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-input-text-placeholder);
+      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    .dot[data-status="complete"] {
+      border-color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-container-background);
+    }
+    .dot[data-status="active"] {
+      border-color: var(--cg-color-surface-base-text);
+      color: var(--cg-color-surface-base-text);
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    .dot[data-status="error"] {
+      border-color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
+
+    .info {
+      margin-top: var(--cg-spacing-6);
+      text-align: center;
+    }
+
+    .label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      white-space: nowrap;
+    }
+    .step[data-status="active"] .label {
+      color: var(--cg-color-surface-base-text);
+    }
+    .step[data-status="complete"] .label {
+      color: var(--cg-color-surface-base-text);
+    }
+    .step[data-status="error"] .label {
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    .duration {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* Compact mode */
+    :host([compact]) .dot { width: var(--cg-spacing-20); height: var(--cg-spacing-20); font-size: var(--cg-font-size-xs); }
+    :host([compact]) .info { display: none; }
+
+  `];
+l([
+  d({ type: Array })
+], s.prototype, "phases", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], s.prototype, "compact", 2);
+s = l([
+  v("ai-progress-steps")
+], s);
+export {
+  s as AiProgressSteps
+};
+//# sourceMappingURL=ai-progress-steps.js.map

package/dist/components/ai-progress-steps/ai-progress-steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-progress-steps.js","sources":["../../../src/components/ai-progress-steps/ai-progress-steps.ts"],"sourcesContent":["/**\n * @element ai-progress-steps\n * Horizontal step indicator for multi-phase AI pipelines. Shows connected\n * dots with status icons (pending/active/complete/error), pulse animation\n * on the active phase, and optional duration labels. Supports compact mode.\n *\n * @example\n * ```html\n * <ai-progress-steps .phases=${[\n *   { label: 'Retrieve', status: 'complete', duration: '0.3s' },\n *   { label: 'Analyze', status: 'active' },\n *   { label: 'Generate', status: 'pending' }\n * ]}></ai-progress-steps>\n * ```\n *\n * @prop {ProgressPhase[]} phases - Array of phase objects with label, status, duration\n * @prop {boolean} compact - Hide labels and shrink dots\n *\n * @fires {CustomEvent<{label: string, status: string, index: number}>} ai-progress-phase-click - When a phase is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface ProgressPhase {\n  label: string;\n  status: 'pending' | 'active' | 'complete' | 'error';\n  duration?: string;\n}\n\n@customElement('ai-progress-steps')\nexport class AiProgressSteps extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    .steps {\n      display: flex;\n      align-items: flex-start;\n      gap: 0;\n      width: 100%;\n    }\n\n    .step {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex: 1;\n      position: relative;\n      background: none;\n      border: none;\n      padding: 0;\n      cursor: pointer;\n      font-family: inherit;\n      color: inherit;\n    }\n    .step:hover .dot {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .step:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .step:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n      border-radius: var(--cg-border-radius-50);\n    }\n\n    .step-row {\n      display: flex;\n      align-items: center;\n      width: 100%;\n    }\n\n    .line {\n      flex: 1;\n      height: 2px;\n      background: var(--cg-color-surface-cards-border);\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .line.done {\n      background: var(--cg-color-action-primary-background-default);\n    }\n    .line.hide { visibility: hidden; }\n\n    .dot {\n      flex-shrink: 0;\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-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-input-text-placeholder);\n      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .dot[data-status=\"complete\"] {\n      border-color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-container-background);\n    }\n    .dot[data-status=\"active\"] {\n      border-color: var(--cg-color-surface-base-text);\n      color: var(--cg-color-surface-base-text);\n      animation: pulse 1.5s ease-in-out infinite;\n    }\n    .dot[data-status=\"error\"] {\n      border-color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.6; }\n    }\n\n    .info {\n      margin-top: var(--cg-spacing-6);\n      text-align: center;\n    }\n\n    .label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      white-space: nowrap;\n    }\n    .step[data-status=\"active\"] .label {\n      color: var(--cg-color-surface-base-text);\n    }\n    .step[data-status=\"complete\"] .label {\n      color: var(--cg-color-surface-base-text);\n    }\n    .step[data-status=\"error\"] .label {\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .duration {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* Compact mode */\n    :host([compact]) .dot { width: var(--cg-spacing-20); height: var(--cg-spacing-20); font-size: var(--cg-font-size-xs); }\n    :host([compact]) .info { display: none; }\n\n  `];\n\n  @property({ type: Array }) phases: ProgressPhase[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _statusIcon(status: string): string {\n    switch (status) {\n      case 'complete': return '\\u2713';\n      case 'error': return '\\u2717';\n      case 'active': return '\\u25CF';\n      default: return '';\n    }\n  }\n\n  private _handlePhaseClick(phase: ProgressPhase, index: number): void {\n    this.dispatchEvent(new CustomEvent('ai-progress-phase-click', {\n      detail: { label: phase.label, status: phase.status, index },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const len = this.phases.length;\n    return html`\n      <div class=\"steps\" role=\"list\" aria-label=\"Progress steps\">\n        ${this.phases.map((phase, i) => {\n          const prevDone = i > 0 && (this.phases[i - 1]!.status === 'complete');\n          return html`\n            <button\n              class=\"step\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              data-status=${phase.status}\n              aria-label=${`${phase.label}: ${phase.status}`}\n              @click=${() => this._handlePhaseClick(phase, i)}\n            >\n              <div class=\"step-row\">\n                <div class=\"line ${i === 0 ? 'hide' : ''} ${prevDone ? 'done' : ''}\"></div>\n                <div class=\"dot\" data-status=${phase.status}>\n                  ${this._statusIcon(phase.status) || html`${i + 1}`}\n                </div>\n                <div class=\"line ${i === len - 1 ? 'hide' : ''} ${phase.status === 'complete' ? 'done' : ''}\"></div>\n              </div>\n              <div class=\"info\">\n                <div class=\"label\">${phase.label}</div>\n                ${phase.duration ? html`<div class=\"duration\">${phase.duration}</div>` : nothing}\n              </div>\n            </button>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-progress-steps': AiProgressSteps;\n  }\n}\n"],"names":["AiProgressSteps","LitElement","status","phase","index","len","html","i","prevDone","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-prompt-editor/ai-prompt-editor.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+export interface PromptVersion {
+    id: string;
+    content: string;
+    timestamp: number;
+    author?: string;
+    active?: boolean;
+}
+export declare class AiPromptEditor extends LitElement {
+    static styles: import('lit').CSSResult[];
+    versions: PromptVersion[];
+    mode: 'view' | 'edit' | 'split';
+    private _selectedId;
+    private _editContent;
+    updated(changed: Map<string, unknown>): void;
+    private get _selectedVersion();
+    private _selectVersion;
+    private _handleSave;
+    private _handleActivate;
+    private _formatDate;
+    private _renderSidebar;
+    private _renderActions;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-prompt-editor.d.ts.map

package/dist/components/ai-prompt-editor/ai-prompt-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-prompt-editor.d.ts","sourceRoot":"","sources":["../../../src/components/ai-prompt-editor/ai-prompt-editor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAsJnB;IAEwB,QAAQ,EAAE,aAAa,EAAE,CAAM;IAC7B,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAU;IAE7D,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,cAAc;IAiBb,MAAM;CAwChB"}

package/dist/components/ai-prompt-editor/ai-prompt-editor.js

@@ -0,0 +1,294 @@
+import { css as p, LitElement as u, nothing as c, html as r } from "lit";
+import { property as v, state as g, customElement as f } from "lit/decorators.js";
+import { h, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, t, i, n) => {
+  for (var o = n > 1 ? void 0 : n ? w(t, i) : t, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (o = (n ? l(t, i, o) : l(o)) || o);
+  return n && o && m(t, i, o), o;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.versions = [], this.mode = "view", this._selectedId = "", this._editContent = "";
+  }
+  updated(e) {
+    if (e.has("versions") && this.versions.length > 0 && !this._selectedId) {
+      const t = this.versions.find((i) => i.active);
+      this._selectedId = t?.id || this.versions[0].id;
+    }
+    if (e.has("_selectedId") || e.has("versions")) {
+      const t = this.versions.find((i) => i.id === this._selectedId);
+      t && (this._editContent = t.content);
+    }
+  }
+  get _selectedVersion() {
+    return this.versions.find((e) => e.id === this._selectedId);
+  }
+  _selectVersion(e) {
+    this._selectedId = e;
+  }
+  _handleSave() {
+    this.dispatchEvent(new CustomEvent("ai-prompt-save", {
+      bubbles: !0,
+      composed: !0,
+      detail: { versionId: this._selectedId, content: this._editContent }
+    }));
+  }
+  _handleActivate() {
+    this.dispatchEvent(new CustomEvent("ai-prompt-activate", {
+      bubbles: !0,
+      composed: !0,
+      detail: { versionId: this._selectedId }
+    }));
+  }
+  _formatDate(e) {
+    return new Date(e).toLocaleDateString("en-US", { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
+  }
+  _renderSidebar() {
+    return r`
+      <div class="sidebar">
+        <div class="sidebar-header">Versions (${this.versions.length})</div>
+        <div class="version-list" role="listbox" aria-label="Prompt versions">
+          ${this.versions.map((e) => r`
+            <div class="version-item ${e.id === this._selectedId ? "selected" : ""}"
+              role="option" tabindex="0" aria-selected="${e.id === this._selectedId}"
+              @click=${() => this._selectVersion(e.id)}
+              @keydown=${(t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._selectVersion(e.id));
+    }}>
+              <div class="version-top">
+                <span class="version-id">${e.id}</span>
+                ${e.active ? r`<span class="active-badge">Active</span>` : c}
+              </div>
+              <div class="version-meta">${this._formatDate(e.timestamp)}${e.author ? ` · ${e.author}` : ""}</div>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+  _renderActions() {
+    const e = this._selectedVersion, t = this._editContent !== (e?.content || "");
+    return r`
+      <div class="action-btns">
+        ${this.mode !== "view" && t ? r`
+          <button class="action-btn" @click=${() => {
+      e && (this._editContent = e.content);
+    }}>Revert</button>
+          <button class="action-btn primary" @click=${this._handleSave}>Save</button>
+        ` : c}
+        ${e && !e.active ? r`
+          <button class="action-btn primary" @click=${this._handleActivate}>Activate</button>
+        ` : c}
+      </div>
+    `;
+  }
+  render() {
+    if (this.versions.length === 0)
+      return r`<div class="editor"><div class="empty">No prompt versions yet</div></div>`;
+    const e = this._selectedVersion;
+    return r`
+      <div class="editor" role="region" aria-label="Prompt editor">
+        ${this._renderSidebar()}
+
+        <div class="main">
+          <div class="main-header">
+            <span class="main-title">${e?.id || "Select a version"}${this.mode === "edit" ? " — Editing" : ""}</span>
+            ${this._renderActions()}
+          </div>
+          <div class="content-area">
+            ${this.mode === "view" ? r`
+              <div class="prompt-display">${e?.content || "Select a version"}</div>
+            ` : r`
+              <textarea
+                .value=${this._editContent}
+                @input=${(t) => {
+      this._editContent = t.target.value;
+    }}
+                aria-label="Edit prompt"
+              ></textarea>
+            `}
+          </div>
+        </div>
+
+        ${this.mode === "split" ? r`
+          <div class="split-pane">
+            <div class="split-header">Preview</div>
+            <div class="content-area">
+              <div class="prompt-display">${this._editContent}</div>
+            </div>
+          </div>
+        ` : c}
+      </div>
+    `;
+  }
+};
+a.styles = [h, b, p`
+    .editor {
+      display: grid;
+      grid-template-columns: 220px 1fr;
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+      min-height: 300px;
+    }
+
+    /* Split mode — two content columns */
+    :host([mode="split"]) .editor {
+      grid-template-columns: 220px 1fr 1fr;
+    }
+
+    /* ── Sidebar ── */
+    .sidebar {
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      display: flex;
+      flex-direction: column;
+      background: var(--cg-color-surface-base-background);
+    }
+    .sidebar-header {
+      padding: var(--cg-spacing-16);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .version-list { flex: 1; overflow-y: auto; }
+    .version-item {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      cursor: pointer;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .version-item:hover { background: var(--cg-overlay-dark-subtle); }
+    .version-item.selected {
+      background: var(--cg-overlay-accent-subtle);
+      border-left: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);
+    }
+    .version-item:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+
+    .version-top { display: flex; justify-content: space-between; align-items: center; }
+    .version-id { font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+    .active-badge {
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-1) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .version-meta {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* ── Main panel ── */
+    .main { display: flex; flex-direction: column; }
+    .main-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .main-title { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+
+    .action-btns { display: flex; gap: var(--cg-spacing-8); }
+    .action-btn {
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: transparent;
+      color: var(--cg-color-surface-container-outlined);
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .action-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .action-btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }
+    .action-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .action-btn.primary {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: transparent;
+    }
+    .action-btn.primary:hover { background: var(--cg-color-action-primary-background-hover); }
+
+    /* ── Content ── */
+    .content-area { flex: 1; overflow: auto; }
+
+    .prompt-display {
+      padding: var(--cg-spacing-20);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      color: var(--cg-color-surface-base-text);
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    textarea {
+      width: 100%;
+      height: 100%;
+      min-height: 200px;
+      padding: var(--cg-spacing-20);
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      border: none;
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      resize: none;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    /* ── Split mode ── */
+    .split-pane {
+      display: flex;
+      flex-direction: column;
+      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .split-header {
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-48) var(--cg-spacing-24);
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+s([
+  v({ type: Array })
+], a.prototype, "versions", 2);
+s([
+  v({ reflect: !0 })
+], a.prototype, "mode", 2);
+s([
+  g()
+], a.prototype, "_selectedId", 2);
+s([
+  g()
+], a.prototype, "_editContent", 2);
+a = s([
+  f("ai-prompt-editor")
+], a);
+export {
+  a as AiPromptEditor
+};
+//# sourceMappingURL=ai-prompt-editor.js.map

package/dist/components/ai-prompt-editor/ai-prompt-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-prompt-editor.js","sources":["../../../src/components/ai-prompt-editor/ai-prompt-editor.ts"],"sourcesContent":["/**\n * @element ai-prompt-editor\n * Prompt version editor with sidebar and 3 modes: view, edit (always-on), split (side-by-side).\n *\n * @fires {CustomEvent<{versionId: string, content: string}>} ai-prompt-save - When saved\n * @fires {CustomEvent<{versionId: string}>} ai-prompt-activate - When activated\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 PromptVersion {\n  id: string;\n  content: string;\n  timestamp: number;\n  author?: string;\n  active?: boolean;\n}\n\n@customElement('ai-prompt-editor')\nexport class AiPromptEditor extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .editor {\n      display: grid;\n      grid-template-columns: 220px 1fr;\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-component-card-radius);\n      overflow: hidden;\n      min-height: 300px;\n    }\n\n    /* Split mode — two content columns */\n    :host([mode=\"split\"]) .editor {\n      grid-template-columns: 220px 1fr 1fr;\n    }\n\n    /* ── Sidebar ── */\n    .sidebar {\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      display: flex;\n      flex-direction: column;\n      background: var(--cg-color-surface-base-background);\n    }\n    .sidebar-header {\n      padding: var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .version-list { flex: 1; overflow-y: auto; }\n    .version-item {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      cursor: pointer;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .version-item:hover { background: var(--cg-overlay-dark-subtle); }\n    .version-item.selected {\n      background: var(--cg-overlay-accent-subtle);\n      border-left: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n    }\n    .version-item:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    .version-top { display: flex; justify-content: space-between; align-items: center; }\n    .version-id { font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n    .active-badge {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .version-meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Main panel ── */\n    .main { display: flex; flex-direction: column; }\n    .main-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .main-title { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n\n    .action-btns { display: flex; gap: var(--cg-spacing-8); }\n    .action-btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent;\n      color: var(--cg-color-surface-container-outlined);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .action-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .action-btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .action-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .action-btn.primary {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: transparent;\n    }\n    .action-btn.primary:hover { background: var(--cg-color-action-primary-background-hover); }\n\n    /* ── Content ── */\n    .content-area { flex: 1; overflow: auto; }\n\n    .prompt-display {\n      padding: var(--cg-spacing-20);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-surface-base-text);\n      white-space: pre-wrap;\n      word-wrap: break-word;\n    }\n\n    textarea {\n      width: 100%;\n      height: 100%;\n      min-height: 200px;\n      padding: var(--cg-spacing-20);\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      border: none;\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      resize: none;\n      outline: none;\n      box-sizing: border-box;\n    }\n\n    /* ── Split mode ── */\n    .split-pane {\n      display: flex;\n      flex-direction: column;\n      border-left: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .split-header {\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-48) var(--cg-spacing-24);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) versions: PromptVersion[] = [];\n  @property({ reflect: true }) mode: 'view' | 'edit' | 'split' = 'view';\n\n  @state() private _selectedId = '';\n  @state() private _editContent = '';\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('versions') && this.versions.length > 0 && !this._selectedId) {\n      const active = this.versions.find(v => v.active);\n      this._selectedId = active?.id || this.versions[0]!.id;\n    }\n    if (changed.has('_selectedId') || changed.has('versions')) {\n      const v = this.versions.find(ver => ver.id === this._selectedId);\n      if (v) this._editContent = v.content;\n    }\n  }\n\n  private get _selectedVersion(): PromptVersion | undefined {\n    return this.versions.find(v => v.id === this._selectedId);\n  }\n\n  private _selectVersion(id: string) {\n    this._selectedId = id;\n  }\n\n  private _handleSave() {\n    this.dispatchEvent(new CustomEvent('ai-prompt-save', {\n      bubbles: true, composed: true,\n      detail: { versionId: this._selectedId, content: this._editContent },\n    }));\n  }\n\n  private _handleActivate() {\n    this.dispatchEvent(new CustomEvent('ai-prompt-activate', {\n      bubbles: true, composed: true,\n      detail: { versionId: this._selectedId },\n    }));\n  }\n\n  private _formatDate(ts: number): string {\n    return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });\n  }\n\n  private _renderSidebar() {\n    return html`\n      <div class=\"sidebar\">\n        <div class=\"sidebar-header\">Versions (${this.versions.length})</div>\n        <div class=\"version-list\" role=\"listbox\" aria-label=\"Prompt versions\">\n          ${this.versions.map(v => html`\n            <div class=\"version-item ${v.id === this._selectedId ? 'selected' : ''}\"\n              role=\"option\" tabindex=\"0\" aria-selected=\"${v.id === this._selectedId}\"\n              @click=${() => this._selectVersion(v.id)}\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectVersion(v.id); } }}>\n              <div class=\"version-top\">\n                <span class=\"version-id\">${v.id}</span>\n                ${v.active ? html`<span class=\"active-badge\">Active</span>` : nothing}\n              </div>\n              <div class=\"version-meta\">${this._formatDate(v.timestamp)}${v.author ? ` · ${v.author}` : ''}</div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n\n  private _renderActions() {\n    const selected = this._selectedVersion;\n    const hasChanges = this._editContent !== (selected?.content || '');\n\n    return html`\n      <div class=\"action-btns\">\n        ${this.mode !== 'view' && hasChanges ? html`\n          <button class=\"action-btn\" @click=${() => { if (selected) this._editContent = selected.content; }}>Revert</button>\n          <button class=\"action-btn primary\" @click=${this._handleSave}>Save</button>\n        ` : nothing}\n        ${selected && !selected.active ? html`\n          <button class=\"action-btn primary\" @click=${this._handleActivate}>Activate</button>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this.versions.length === 0) {\n      return html`<div class=\"editor\"><div class=\"empty\">No prompt versions yet</div></div>`;\n    }\n\n    const selected = this._selectedVersion;\n\n    return html`\n      <div class=\"editor\" role=\"region\" aria-label=\"Prompt editor\">\n        ${this._renderSidebar()}\n\n        <div class=\"main\">\n          <div class=\"main-header\">\n            <span class=\"main-title\">${selected?.id || 'Select a version'}${this.mode === 'edit' ? ' — Editing' : ''}</span>\n            ${this._renderActions()}\n          </div>\n          <div class=\"content-area\">\n            ${this.mode === 'view' ? html`\n              <div class=\"prompt-display\">${selected?.content || 'Select a version'}</div>\n            ` : html`\n              <textarea\n                .value=${this._editContent}\n                @input=${(e: Event) => { this._editContent = (e.target as HTMLTextAreaElement).value; }}\n                aria-label=\"Edit prompt\"\n              ></textarea>\n            `}\n          </div>\n        </div>\n\n        ${this.mode === 'split' ? html`\n          <div class=\"split-pane\">\n            <div class=\"split-header\">Preview</div>\n            <div class=\"content-area\">\n              <div class=\"prompt-display\">${this._editContent}</div>\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiPromptEditor","LitElement","changed","active","v","ver","id","ts","html","e","nothing","selected","hasChanges","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-prompt-template/ai-prompt-template.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export declare class AiPromptTemplate extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    template: string;
+    variables: Record<string, string>;
+    editable: boolean;
+    private _mode;
+    private get _templateVars();
+    private _renderHighlightedTemplate;
+    private _handleTemplateChange;
+    private _handleVariableChange;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-prompt-template': AiPromptTemplate;
+    }
+}
+//# sourceMappingURL=ai-prompt-template.d.ts.map

package/dist/components/ai-prompt-template/ai-prompt-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-prompt-template.d.ts","sourceRoot":"","sources":["../../../src/components/ai-prompt-template/ai-prompt-template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAiKnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtD,QAAQ,SAAM;IACd,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACtC,QAAQ,UAAQ;IAEpC,OAAO,CAAC,KAAK,CAA8B;IAEpD,OAAO,KAAK,aAAa,GAGxB;IAED,OAAO,CAAC,0BAA0B;IA4BlC,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,qBAAqB;IAQpB,MAAM;CA2DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}