@cognivo/components 0.8.0

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

@@ -0,0 +1,387 @@
+import { css as f, LitElement as m, nothing as p, html as o } from "lit";
+import { property as l, state as h, query as v, customElement as b } from "lit/decorators.js";
+import { h as y, r as w, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-avatar/cg-avatar.js";
+import "../cg-spinner/cg-spinner.js";
+var _ = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (e, t, s, a) => {
+  for (var n = a > 1 ? void 0 : a ? $(t, s) : t, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (n = (a ? c(t, s, n) : c(n)) || n);
+  return a && n && _(t, s, n), n;
+};
+let r = class extends m {
+  constructor() {
+    super(...arguments), this.content = "", this.cursors = [], this.editable = !0, this.placeholder = "Start typing…", this.title = "", this.sync = "idle", this.idleFadeDelay = 2e3, this._charCount = 0, this._wordCount = 0, this._idleUsers = /* @__PURE__ */ new Set(), this._cursorPositions = /* @__PURE__ */ new Map(), this._idleTimers = /* @__PURE__ */ new Map(), this._previousPositions = /* @__PURE__ */ new Map();
+  }
+  updated(e) {
+    e.has("content") && this._updateCounts(), (e.has("content") || e.has("cursors")) && this.updateComplete.then(() => this._measureCursors()), e.has("cursors") && this._handleCursorActivity();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const e of this._idleTimers.values()) clearTimeout(e);
+    this._idleTimers.clear();
+  }
+  _updateCounts() {
+    this._charCount = this.content.length;
+    const e = this.content.trim();
+    this._wordCount = e ? e.split(/\s+/).length : 0;
+  }
+  /**
+   * For each remote cursor, measure where its caret would render by inserting
+   * a zero-width marker at that offset in a hidden mirror element with the
+   * same metrics as the textarea, then reading the rect.
+   *
+   * Replaces the previous `charWidth = 8.4 / lineHeight = 22.4` heuristic
+   * which silently drifted under any zoom or font fallback.
+   */
+  _measureCursors() {
+    if (!this._mirror || !this._textarea) return;
+    const e = this._textarea.clientWidth;
+    this._mirror.style.width = `${e}px`;
+    const t = /* @__PURE__ */ new Map();
+    for (const s of this.cursors) {
+      const a = Math.max(0, Math.min(this.content.length, s.position)), n = this.content.slice(0, a);
+      this._mirror.textContent = "";
+      const d = document.createTextNode(n), c = document.createElement("span");
+      c.textContent = "​", this._mirror.appendChild(d), this._mirror.appendChild(c);
+      const u = this._mirror.getBoundingClientRect(), g = c.getBoundingClientRect();
+      t.set(s.user, {
+        top: g.top - u.top - this._textarea.scrollTop,
+        left: g.left - u.left
+      });
+    }
+    this._cursorPositions = t;
+  }
+  /**
+   * When a remote cursor's `position` changes, the user is "active" — clear
+   * the idle flag and (re)start a timer that marks them idle after
+   * idleFadeDelay ms.
+   */
+  _handleCursorActivity() {
+    if (this.idleFadeDelay <= 0) return;
+    const e = /* @__PURE__ */ new Set();
+    for (const t of this.cursors)
+      if (e.add(t.user), this._previousPositions.get(t.user) !== t.position) {
+        this._idleUsers.delete(t.user), this._previousPositions.set(t.user, t.position);
+        const a = this._idleTimers.get(t.user);
+        a && clearTimeout(a), this._idleTimers.set(t.user, window.setTimeout(() => {
+          this._idleUsers.add(t.user), this._idleUsers = new Set(this._idleUsers);
+        }, this.idleFadeDelay));
+      }
+    for (const t of [...this._previousPositions.keys()])
+      if (!e.has(t)) {
+        this._previousPositions.delete(t);
+        const s = this._idleTimers.get(t);
+        s && clearTimeout(s), this._idleTimers.delete(t), this._idleUsers.delete(t);
+      }
+    this.requestUpdate();
+  }
+  _onInput(e) {
+    const t = e.target;
+    this.content = t.value, this._updateCounts(), this.dispatchEvent(new CustomEvent("ai-editor-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { content: this.content }
+    }));
+  }
+  _onSelect(e) {
+    const t = e.target;
+    this.dispatchEvent(new CustomEvent("ai-editor-cursor-move", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        position: t.selectionStart,
+        selectionStart: t.selectionStart,
+        selectionEnd: t.selectionEnd
+      }
+    }));
+  }
+  render() {
+    const e = this.sync === "saving" ? "Saving…" : this.sync === "saved" ? "Saved" : this.sync === "error" ? "Save failed" : "";
+    return o`
+      ${this.title || this.cursors.length ? o`
+        <div class="header">
+          ${this.title ? o`<h3 class="header-title">${this.title}</h3>` : o`<span class="header-title muted">${this.cursors.length} editor${this.cursors.length === 1 ? "" : "s"} present</span>`}
+          ${this.cursors.length ? o`
+            <div class="avatar-stack" role="list" aria-label="Active editors">
+              ${this.cursors.map((t) => o`
+                <span class="avatar-ring" role="listitem" style="border-color: ${t.color}; background: ${t.color}" title="${t.user}">
+                  <cg-avatar size="xs" shape="circle" name=${t.user} status="online"></cg-avatar>
+                </span>
+              `)}
+            </div>
+          ` : p}
+        </div>
+      ` : p}
+
+      <div class="editor-wrap" role="group" aria-label="Collaborative text editor">
+        <textarea
+          .value=${this.content}
+          ?disabled=${!this.editable}
+          placeholder=${this.placeholder}
+          @input=${this._onInput}
+          @keyup=${this._onSelect}
+          @click=${this._onSelect}
+          aria-label="Editor content"
+        ></textarea>
+        <div class="mirror" aria-hidden="true"></div>
+        <div class="cursors-overlay" aria-hidden="true">
+          ${this.cursors.map((t) => {
+      const s = this._cursorPositions.get(t.user);
+      if (!s) return p;
+      const a = this._idleUsers.has(t.user);
+      return o`
+              <div
+                class="cursor-marker ${a ? "idle" : ""}"
+                style="top: ${s.top}px; left: ${s.left}px"
+              >
+                <div class="cursor-line" style="background: ${t.color}"></div>
+                <span class="cursor-label" style="background: ${t.color}">${t.user}</span>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+
+      <div class="footer">
+        <div class="stats">
+          <span>${this._charCount} chars</span>
+          <span>${this._wordCount} words</span>
+        </div>
+        ${this.sync !== "idle" ? o`
+          <div class="sync-state ${this.sync}" role="status" aria-live="polite">
+            ${this.sync === "saving" ? o`<cg-spinner size="xs"></cg-spinner>` : o`
+              <svg class="sync-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                ${this.sync === "error" ? o`<path d="M4 4l8 8M12 4l-8 8"/>` : o`<path d="M3 8.5l3 3 7-7"/>`}
+              </svg>
+            `}
+            <span>${e}</span>
+          </div>
+        ` : p}
+      </div>
+
+      <span class="sr-only" role="status" aria-live="polite" aria-atomic="true">${e}</span>
+    `;
+  }
+};
+r.styles = [y, w, x, f`
+    :host {
+      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);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-elevation-1);
+      overflow: hidden;
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    /* ── Header: title + avatar stack ── */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      margin: 0;
+    }
+    .header-title.muted {
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    /* Stacked avatars — overlap so the row stays compact. */
+    .avatar-stack {
+      display: inline-flex;
+      align-items: center;
+    }
+    .avatar-ring {
+      display: inline-flex;
+      border-radius: var(--cg-border-radius-full);
+      padding: var(--cg-border-width-100);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);
+      margin-left: calc(-1 * var(--cg-spacing-6));
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);
+    }
+    .avatar-ring:first-child { margin-left: 0; }
+    .avatar-ring:hover { transform: translateY(calc(-1 * var(--cg-spacing-2))); }
+
+    /* ── Editor surface ── */
+    .editor-wrap {
+      position: relative;
+      min-height: 200px;
+    }
+
+    textarea {
+      display: block;
+      width: 100%;
+      min-height: 200px;
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      border: none;
+      outline: none;
+      resize: vertical;
+      padding: var(--cg-spacing-16);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      box-sizing: border-box;
+      caret-color: var(--cg-color-action-primary-background-default);
+    }
+    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }
+    textarea:focus-visible {
+      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    textarea:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* ── Hidden mirror — exact textarea geometry, used to measure
+       per-character coordinates for cursor markers. */
+    .mirror {
+      position: absolute;
+      top: 0;
+      left: 0;
+      visibility: hidden;
+      pointer-events: none;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      padding: var(--cg-spacing-16);
+      box-sizing: border-box;
+    }
+
+    .cursors-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      pointer-events: none;
+      overflow: hidden;
+    }
+
+    /* ── Cursor marker — flag style with smooth transition between
+       positions and label fade after inactivity. */
+    .cursor-marker {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      pointer-events: none;
+      z-index: 2;
+      transition:
+        top var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out),
+        left var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    .cursor-line {
+      width: var(--cg-border-width-100);
+      height: 1.4em;
+      border-radius: var(--cg-border-width-50);
+    }
+    .cursor-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      padding: var(--cg-spacing-1) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      white-space: nowrap;
+      margin-top: calc(-1 * var(--cg-spacing-1));
+      color: var(--cg-color-action-primary-text-default);
+      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      transform: translateY(0);
+    }
+    .cursor-marker.idle .cursor-label {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    /* ── Footer ── */
+    .footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .stats {
+      display: flex;
+      gap: var(--cg-spacing-12);
+      font-variant-numeric: tabular-nums;
+    }
+    .sync-state {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+    }
+    .sync-state.saved { color: var(--cg-color-status-success-text-default); }
+    .sync-state.error { color: var(--cg-color-status-error-text-default); }
+    .sync-icon {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+
+    /* Visually-hidden live region. */
+    .sr-only {
+      position: absolute; width: 1px; height: 1px;
+      padding: 0; margin: -1px; overflow: hidden;
+      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `];
+i([
+  l({ type: String })
+], r.prototype, "content", 2);
+i([
+  l({ type: Array })
+], r.prototype, "cursors", 2);
+i([
+  l({ type: Boolean })
+], r.prototype, "editable", 2);
+i([
+  l({ type: String })
+], r.prototype, "placeholder", 2);
+i([
+  l({ type: String })
+], r.prototype, "title", 2);
+i([
+  l({ reflect: !0 })
+], r.prototype, "sync", 2);
+i([
+  l({ type: Number, attribute: "idle-fade-delay" })
+], r.prototype, "idleFadeDelay", 2);
+i([
+  h()
+], r.prototype, "_charCount", 2);
+i([
+  h()
+], r.prototype, "_wordCount", 2);
+i([
+  h()
+], r.prototype, "_idleUsers", 2);
+i([
+  h()
+], r.prototype, "_cursorPositions", 2);
+i([
+  v("textarea")
+], r.prototype, "_textarea", 2);
+i([
+  v(".mirror")
+], r.prototype, "_mirror", 2);
+r = i([
+  b("ai-collaborative-editor")
+], r);
+export {
+  r as AiCollaborativeEditor
+};
+//# sourceMappingURL=ai-collaborative-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-collaborative-editor.js","sources":["../../../src/components/ai-collaborative-editor/ai-collaborative-editor.ts"],"sourcesContent":["/**\n * @element ai-collaborative-editor\n * Multiplayer monospace editor with live cursor + selection overlays, an\n * avatar-stack presence header (Linear/Figma pattern), word/char counts,\n * smooth cursor transitions, label fade on inactivity, and a Saving…/Saved\n * sync indicator.\n *\n * Cursor positions are measured with a hidden mirror element + per-character\n * Range geometry — accurate across font metrics, zoom level, and word-wrap\n * (the previous hand-rolled char-width math drifted with any font change).\n *\n * @example\n * ```html\n * <ai-collaborative-editor\n *   content=\"Hello world\"\n *   .cursors=${[{ user: 'Alice', position: 5, color: '#60a5fa' }]}\n *   editable\n * ></ai-collaborative-editor>\n * ```\n *\n * @fires {CustomEvent<{content: string}>} ai-editor-change - Content changed\n * @fires {CustomEvent<{position, selectionStart, selectionEnd}>} ai-editor-cursor-move - Cursor moved\n *\n * @cssprop [--cg-color-surface-container-background] - Editor background\n * @cssprop [--cg-font-family-mono] - Editor font family\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-avatar/cg-avatar.js';\nimport '../cg-spinner/cg-spinner.js';\n\nexport interface EditorCursor {\n  user: string;\n  position: number;\n  color: string;\n}\n\n@customElement('ai-collaborative-editor')\nexport class AiCollaborativeEditor extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\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      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-elevation-1);\n      overflow: hidden;\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    /* ── Header: title + avatar stack ── */\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .header-title {\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      margin: 0;\n    }\n    .header-title.muted {\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    /* Stacked avatars — overlap so the row stays compact. */\n    .avatar-stack {\n      display: inline-flex;\n      align-items: center;\n    }\n    .avatar-ring {\n      display: inline-flex;\n      border-radius: var(--cg-border-radius-full);\n      padding: var(--cg-border-width-100);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);\n      margin-left: calc(-1 * var(--cg-spacing-6));\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-spring);\n    }\n    .avatar-ring:first-child { margin-left: 0; }\n    .avatar-ring:hover { transform: translateY(calc(-1 * var(--cg-spacing-2))); }\n\n    /* ── Editor surface ── */\n    .editor-wrap {\n      position: relative;\n      min-height: 200px;\n    }\n\n    textarea {\n      display: block;\n      width: 100%;\n      min-height: 200px;\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      border: none;\n      outline: none;\n      resize: vertical;\n      padding: var(--cg-spacing-16);\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      box-sizing: border-box;\n      caret-color: var(--cg-color-action-primary-background-default);\n    }\n    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }\n    textarea:focus-visible {\n      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    textarea:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    /* ── Hidden mirror — exact textarea geometry, used to measure\n       per-character coordinates for cursor markers. */\n    .mirror {\n      position: absolute;\n      top: 0;\n      left: 0;\n      visibility: hidden;\n      pointer-events: none;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      overflow-wrap: break-word;\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      padding: var(--cg-spacing-16);\n      box-sizing: border-box;\n    }\n\n    .cursors-overlay {\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n\n    /* ── Cursor marker — flag style with smooth transition between\n       positions and label fade after inactivity. */\n    .cursor-marker {\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      pointer-events: none;\n      z-index: 2;\n      transition:\n        top var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out),\n        left var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    .cursor-line {\n      width: var(--cg-border-width-100);\n      height: 1.4em;\n      border-radius: var(--cg-border-width-50);\n    }\n    .cursor-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      white-space: nowrap;\n      margin-top: calc(-1 * var(--cg-spacing-1));\n      color: var(--cg-color-action-primary-text-default);\n      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      transform: translateY(0);\n    }\n    .cursor-marker.idle .cursor-label {\n      opacity: 0;\n      pointer-events: none;\n    }\n\n    /* ── Footer ── */\n    .footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .stats {\n      display: flex;\n      gap: var(--cg-spacing-12);\n      font-variant-numeric: tabular-nums;\n    }\n    .sync-state {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n    .sync-state.saved { color: var(--cg-color-status-success-text-default); }\n    .sync-state.error { color: var(--cg-color-status-error-text-default); }\n    .sync-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    /* Visually-hidden live region. */\n    .sr-only {\n      position: absolute; width: 1px; height: 1px;\n      padding: 0; margin: -1px; overflow: hidden;\n      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;\n    }\n  `];\n\n  @property({ type: String }) content = '';\n  @property({ type: Array }) cursors: EditorCursor[] = [];\n  @property({ type: Boolean }) editable = true;\n  @property({ type: String }) placeholder = 'Start typing…';\n  @property({ type: String }) override title = '';\n  /** Sync state shown in the footer. Consumers flip this during save. */\n  @property({ reflect: true }) sync: 'idle' | 'saving' | 'saved' | 'error' = 'idle';\n  /** ms of cursor inactivity before the user's label fades out. 0 disables. */\n  @property({ type: Number, attribute: 'idle-fade-delay' }) idleFadeDelay = 2000;\n\n  @state() private _charCount = 0;\n  @state() private _wordCount = 0;\n  @state() private _idleUsers = new Set<string>();\n  /** Per-cursor screen positions in textarea-relative pixels. */\n  @state() private _cursorPositions = new Map<string, { top: number; left: number }>();\n\n  @query('textarea') private _textarea!: HTMLTextAreaElement;\n  @query('.mirror') private _mirror!: HTMLDivElement;\n\n  private _idleTimers = new Map<string, number>();\n  private _previousPositions = new Map<string, number>();\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('content')) this._updateCounts();\n    if (changed.has('content') || changed.has('cursors')) {\n      // Recompute cursor screen positions whenever text or remote cursors move.\n      this.updateComplete.then(() => this._measureCursors());\n    }\n    if (changed.has('cursors')) this._handleCursorActivity();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    for (const t of this._idleTimers.values()) clearTimeout(t);\n    this._idleTimers.clear();\n  }\n\n  private _updateCounts(): void {\n    this._charCount = this.content.length;\n    const trimmed = this.content.trim();\n    this._wordCount = trimmed ? trimmed.split(/\\s+/).length : 0;\n  }\n\n  /**\n   * For each remote cursor, measure where its caret would render by inserting\n   * a zero-width marker at that offset in a hidden mirror element with the\n   * same metrics as the textarea, then reading the rect.\n   *\n   * Replaces the previous `charWidth = 8.4 / lineHeight = 22.4` heuristic\n   * which silently drifted under any zoom or font fallback.\n   */\n  private _measureCursors(): void {\n    if (!this._mirror || !this._textarea) return;\n    const mirrorWidth = this._textarea.clientWidth;\n    this._mirror.style.width = `${mirrorWidth}px`;\n    const next = new Map<string, { top: number; left: number }>();\n    for (const c of this.cursors) {\n      const pos = Math.max(0, Math.min(this.content.length, c.position));\n      const before = this.content.slice(0, pos);\n      // Render the text-up-to-cursor + a marker span the mirror can measure.\n      this._mirror.textContent = '';\n      const beforeNode = document.createTextNode(before);\n      const marker = document.createElement('span');\n      marker.textContent = '​'; // zero-width space\n      this._mirror.appendChild(beforeNode);\n      this._mirror.appendChild(marker);\n      const wrapRect = this._mirror.getBoundingClientRect();\n      const markerRect = marker.getBoundingClientRect();\n      next.set(c.user, {\n        top: markerRect.top - wrapRect.top - this._textarea.scrollTop,\n        left: markerRect.left - wrapRect.left,\n      });\n    }\n    this._cursorPositions = next;\n  }\n\n  /**\n   * When a remote cursor's `position` changes, the user is \"active\" — clear\n   * the idle flag and (re)start a timer that marks them idle after\n   * idleFadeDelay ms.\n   */\n  private _handleCursorActivity(): void {\n    if (this.idleFadeDelay <= 0) return;\n    const seen = new Set<string>();\n    for (const c of this.cursors) {\n      seen.add(c.user);\n      const prev = this._previousPositions.get(c.user);\n      if (prev !== c.position) {\n        this._idleUsers.delete(c.user);\n        this._previousPositions.set(c.user, c.position);\n        const existing = this._idleTimers.get(c.user);\n        if (existing) clearTimeout(existing);\n        this._idleTimers.set(c.user, window.setTimeout(() => {\n          this._idleUsers.add(c.user);\n          this._idleUsers = new Set(this._idleUsers);\n        }, this.idleFadeDelay));\n      }\n    }\n    // Remove disconnected users from tracking.\n    for (const user of [...this._previousPositions.keys()]) {\n      if (!seen.has(user)) {\n        this._previousPositions.delete(user);\n        const t = this._idleTimers.get(user); if (t) clearTimeout(t);\n        this._idleTimers.delete(user);\n        this._idleUsers.delete(user);\n      }\n    }\n    this.requestUpdate();\n  }\n\n  private _onInput(e: Event): void {\n    const target = e.target as HTMLTextAreaElement;\n    this.content = target.value;\n    this._updateCounts();\n    this.dispatchEvent(new CustomEvent('ai-editor-change', {\n      bubbles: true, composed: true,\n      detail: { content: this.content },\n    }));\n  }\n\n  private _onSelect(e: Event): void {\n    const target = e.target as HTMLTextAreaElement;\n    this.dispatchEvent(new CustomEvent('ai-editor-cursor-move', {\n      bubbles: true, composed: true,\n      detail: {\n        position: target.selectionStart,\n        selectionStart: target.selectionStart,\n        selectionEnd: target.selectionEnd,\n      },\n    }));\n  }\n\n  override render() {\n    const syncLabel =\n      this.sync === 'saving' ? 'Saving…' :\n      this.sync === 'saved'  ? 'Saved' :\n      this.sync === 'error'  ? 'Save failed' : '';\n\n    return html`\n      ${this.title || this.cursors.length ? html`\n        <div class=\"header\">\n          ${this.title\n            ? html`<h3 class=\"header-title\">${this.title}</h3>`\n            : html`<span class=\"header-title muted\">${this.cursors.length} editor${this.cursors.length === 1 ? '' : 's'} present</span>`}\n          ${this.cursors.length ? html`\n            <div class=\"avatar-stack\" role=\"list\" aria-label=\"Active editors\">\n              ${this.cursors.map(c => html`\n                <span class=\"avatar-ring\" role=\"listitem\" style=\"border-color: ${c.color}; background: ${c.color}\" title=\"${c.user}\">\n                  <cg-avatar size=\"xs\" shape=\"circle\" name=${c.user} status=\"online\"></cg-avatar>\n                </span>\n              `)}\n            </div>\n          ` : nothing}\n        </div>\n      ` : nothing}\n\n      <div class=\"editor-wrap\" role=\"group\" aria-label=\"Collaborative text editor\">\n        <textarea\n          .value=${this.content}\n          ?disabled=${!this.editable}\n          placeholder=${this.placeholder}\n          @input=${this._onInput}\n          @keyup=${this._onSelect}\n          @click=${this._onSelect}\n          aria-label=\"Editor content\"\n        ></textarea>\n        <div class=\"mirror\" aria-hidden=\"true\"></div>\n        <div class=\"cursors-overlay\" aria-hidden=\"true\">\n          ${this.cursors.map(c => {\n            const pos = this._cursorPositions.get(c.user);\n            if (!pos) return nothing;\n            const idle = this._idleUsers.has(c.user);\n            return html`\n              <div\n                class=\"cursor-marker ${idle ? 'idle' : ''}\"\n                style=\"top: ${pos.top}px; left: ${pos.left}px\"\n              >\n                <div class=\"cursor-line\" style=\"background: ${c.color}\"></div>\n                <span class=\"cursor-label\" style=\"background: ${c.color}\">${c.user}</span>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n\n      <div class=\"footer\">\n        <div class=\"stats\">\n          <span>${this._charCount} chars</span>\n          <span>${this._wordCount} words</span>\n        </div>\n        ${this.sync !== 'idle' ? html`\n          <div class=\"sync-state ${this.sync}\" role=\"status\" aria-live=\"polite\">\n            ${this.sync === 'saving' ? html`<cg-spinner size=\"xs\"></cg-spinner>` : html`\n              <svg class=\"sync-icon\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                ${this.sync === 'error'\n                  ? html`<path d=\"M4 4l8 8M12 4l-8 8\"/>`\n                  : html`<path d=\"M3 8.5l3 3 7-7\"/>`}\n              </svg>\n            `}\n            <span>${syncLabel}</span>\n          </div>\n        ` : nothing}\n      </div>\n\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">${syncLabel}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-collaborative-editor': AiCollaborativeEditor;\n  }\n}\n"],"names":["AiCollaborativeEditor","LitElement","changed","t","trimmed","mirrorWidth","next","c","pos","before","beforeNode","marker","wrapRect","markerRect","seen","existing","user","target","syncLabel","html","nothing","idle","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;;;AAuCO,IAAMA,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GAkLuB,KAAA,UAAU,IACX,KAAA,UAA0B,CAAA,GACxB,KAAA,WAAW,IACZ,KAAA,cAAc,iBACd,KAAS,QAAQ,IAEhB,KAAA,OAA8C,QAEjB,KAAA,gBAAgB,KAEjE,KAAQ,aAAa,GACrB,KAAQ,aAAa,GACrB,KAAQ,iCAAiB,IAAA,GAEzB,KAAQ,uCAAuB,IAAA,GAKxC,KAAQ,kCAAkB,IAAA,GAC1B,KAAQ,yCAAyB,IAAA;AAAA,EAAoB;AAAA,EAE5C,QAAQC,GAAqC;AACpD,IAAIA,EAAQ,IAAI,SAAS,UAAQ,cAAA,IAC7BA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,SAAS,MAEjD,KAAK,eAAe,KAAK,MAAM,KAAK,iBAAiB,GAEnDA,EAAQ,IAAI,SAAS,UAAQ,sBAAA;AAAA,EACnC;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,eAAWC,KAAK,KAAK,YAAY,OAAA,gBAAuBA,CAAC;AACzD,SAAK,YAAY,MAAA;AAAA,EACnB;AAAA,EAEQ,gBAAsB;AAC5B,SAAK,aAAa,KAAK,QAAQ;AAC/B,UAAMC,IAAU,KAAK,QAAQ,KAAA;AAC7B,SAAK,aAAaA,IAAUA,EAAQ,MAAM,KAAK,EAAE,SAAS;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUQ,kBAAwB;AAC9B,QAAI,CAAC,KAAK,WAAW,CAAC,KAAK,UAAW;AACtC,UAAMC,IAAc,KAAK,UAAU;AACnC,SAAK,QAAQ,MAAM,QAAQ,GAAGA,CAAW;AACzC,UAAMC,wBAAW,IAAA;AACjB,eAAWC,KAAK,KAAK,SAAS;AAC5B,YAAMC,IAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,QAAQ,QAAQD,EAAE,QAAQ,CAAC,GAC3DE,IAAS,KAAK,QAAQ,MAAM,GAAGD,CAAG;AAExC,WAAK,QAAQ,cAAc;AAC3B,YAAME,IAAa,SAAS,eAAeD,CAAM,GAC3CE,IAAS,SAAS,cAAc,MAAM;AAC5C,MAAAA,EAAO,cAAc,KACrB,KAAK,QAAQ,YAAYD,CAAU,GACnC,KAAK,QAAQ,YAAYC,CAAM;AAC/B,YAAMC,IAAW,KAAK,QAAQ,sBAAA,GACxBC,IAAaF,EAAO,sBAAA;AAC1B,MAAAL,EAAK,IAAIC,EAAE,MAAM;AAAA,QACf,KAAKM,EAAW,MAAMD,EAAS,MAAM,KAAK,UAAU;AAAA,QACpD,MAAMC,EAAW,OAAOD,EAAS;AAAA,MAAA,CAClC;AAAA,IACH;AACA,SAAK,mBAAmBN;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,wBAA8B;AACpC,QAAI,KAAK,iBAAiB,EAAG;AAC7B,UAAMQ,wBAAW,IAAA;AACjB,eAAWP,KAAK,KAAK;AAGnB,UAFAO,EAAK,IAAIP,EAAE,IAAI,GACF,KAAK,mBAAmB,IAAIA,EAAE,IAAI,MAClCA,EAAE,UAAU;AACvB,aAAK,WAAW,OAAOA,EAAE,IAAI,GAC7B,KAAK,mBAAmB,IAAIA,EAAE,MAAMA,EAAE,QAAQ;AAC9C,cAAMQ,IAAW,KAAK,YAAY,IAAIR,EAAE,IAAI;AAC5C,QAAIQ,kBAAuBA,CAAQ,GACnC,KAAK,YAAY,IAAIR,EAAE,MAAM,OAAO,WAAW,MAAM;AACnD,eAAK,WAAW,IAAIA,EAAE,IAAI,GAC1B,KAAK,aAAa,IAAI,IAAI,KAAK,UAAU;AAAA,QAC3C,GAAG,KAAK,aAAa,CAAC;AAAA,MACxB;AAGF,eAAWS,KAAQ,CAAC,GAAG,KAAK,mBAAmB,KAAA,CAAM;AACnD,UAAI,CAACF,EAAK,IAAIE,CAAI,GAAG;AACnB,aAAK,mBAAmB,OAAOA,CAAI;AACnC,cAAMb,IAAI,KAAK,YAAY,IAAIa,CAAI;AAAG,QAAIb,kBAAgBA,CAAC,GAC3D,KAAK,YAAY,OAAOa,CAAI,GAC5B,KAAK,WAAW,OAAOA,CAAI;AAAA,MAC7B;AAEF,SAAK,cAAA;AAAA,EACP;AAAA,EAEQ,SAAS,GAAgB;AAC/B,UAAMC,IAAS,EAAE;AACjB,SAAK,UAAUA,EAAO,OACtB,KAAK,cAAA,GACL,KAAK,cAAc,IAAI,YAAY,oBAAoB;AAAA,MACrD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,SAAS,KAAK,QAAA;AAAA,IAAQ,CACjC,CAAC;AAAA,EACJ;AAAA,EAEQ,UAAU,GAAgB;AAChC,UAAMA,IAAS,EAAE;AACjB,SAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ;AAAA,QACN,UAAUA,EAAO;AAAA,QACjB,gBAAgBA,EAAO;AAAA,QACvB,cAAcA,EAAO;AAAA,MAAA;AAAA,IACvB,CACD,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAMC,IACJ,KAAK,SAAS,WAAW,YACzB,KAAK,SAAS,UAAW,UACzB,KAAK,SAAS,UAAW,gBAAgB;AAE3C,WAAOC;AAAA,QACH,KAAK,SAAS,KAAK,QAAQ,SAASA;AAAA;AAAA,YAEhC,KAAK,QACHA,6BAAgC,KAAK,KAAK,UAC1CA,qCAAwC,KAAK,QAAQ,MAAM,UAAU,KAAK,QAAQ,WAAW,IAAI,KAAK,GAAG,iBAAiB;AAAA,YAC5H,KAAK,QAAQ,SAASA;AAAA;AAAA,gBAElB,KAAK,QAAQ,IAAI,CAAAZ,MAAKY;AAAA,iFAC2CZ,EAAE,KAAK,iBAAiBA,EAAE,KAAK,YAAYA,EAAE,IAAI;AAAA,6DACrEA,EAAE,IAAI;AAAA;AAAA,eAEpD,CAAC;AAAA;AAAA,cAEFa,CAAO;AAAA;AAAA,UAEXA,CAAO;AAAA;AAAA;AAAA;AAAA,mBAIE,KAAK,OAAO;AAAA,sBACT,CAAC,KAAK,QAAQ;AAAA,wBACZ,KAAK,WAAW;AAAA,mBACrB,KAAK,QAAQ;AAAA,mBACb,KAAK,SAAS;AAAA,mBACd,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,YAKrB,KAAK,QAAQ,IAAI,CAAAb,MAAK;AACtB,YAAMC,IAAM,KAAK,iBAAiB,IAAID,EAAE,IAAI;AAC5C,UAAI,CAACC,EAAK,QAAOY;AACjB,YAAMC,IAAO,KAAK,WAAW,IAAId,EAAE,IAAI;AACvC,aAAOY;AAAA;AAAA,uCAEoBE,IAAO,SAAS,EAAE;AAAA,8BAC3Bb,EAAI,GAAG,aAAaA,EAAI,IAAI;AAAA;AAAA,8DAEID,EAAE,KAAK;AAAA,gEACLA,EAAE,KAAK,KAAKA,EAAE,IAAI;AAAA;AAAA;AAAA,IAGxE,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMM,KAAK,UAAU;AAAA,kBACf,KAAK,UAAU;AAAA;AAAA,UAEvB,KAAK,SAAS,SAASY;AAAA,mCACE,KAAK,IAAI;AAAA,cAC9B,KAAK,SAAS,WAAWA,yCAA4CA;AAAA;AAAA,kBAEjE,KAAK,SAAS,UACZA,oCACAA,6BAAgC;AAAA;AAAA,aAEvC;AAAA,oBACOD,CAAS;AAAA;AAAA,YAEjBE,CAAO;AAAA;AAAA;AAAA,kFAG+DF,CAAS;AAAA;AAAA,EAEzF;AACF;AAjYalB,EACK,SAAS,CAACsB,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+KzE;AAE2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlLf3B,EAkLiB,WAAA,WAAA,CAAA;AACD0B,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAnLd3B,EAmLgB,WAAA,WAAA,CAAA;AACE0B,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GApLhB3B,EAoLkB,WAAA,YAAA,CAAA;AACD0B,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArLf3B,EAqLiB,WAAA,eAAA,CAAA;AACS0B,EAAA;AAAA,EAApCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtLf3B,EAsL0B,WAAA,SAAA,CAAA;AAER0B,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAxLhB3B,EAwLkB,WAAA,QAAA,CAAA;AAE6B0B,EAAA;AAAA,EAAzDC,EAAS,EAAE,MAAM,QAAQ,WAAW,mBAAmB;AAAA,GA1L7C3B,EA0L+C,WAAA,iBAAA,CAAA;AAEzC0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5LI5B,EA4LM,WAAA,cAAA,CAAA;AACA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA7LI5B,EA6LM,WAAA,cAAA,CAAA;AACA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9LI5B,EA8LM,WAAA,cAAA,CAAA;AAEA0B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhMI5B,EAgMM,WAAA,oBAAA,CAAA;AAEU0B,EAAA;AAAA,EAA1BG,EAAM,UAAU;AAAA,GAlMN7B,EAkMgB,WAAA,aAAA,CAAA;AACD0B,EAAA;AAAA,EAAzBG,EAAM,SAAS;AAAA,GAnML7B,EAmMe,WAAA,WAAA,CAAA;AAnMfA,IAAN0B,EAAA;AAAA,EADNI,EAAc,yBAAyB;AAAA,GAC3B9B,CAAA;"}

package/dist/components/ai-command-palette/ai-command-palette.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, nothing } from 'lit';
+export interface PaletteCommand {
+    id: string;
+    label: string;
+    shortcut?: string;
+    icon?: string;
+    category?: string;
+}
+export declare class AiCommandPalette extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    commands: PaletteCommand[];
+    open: boolean;
+    placeholder: string;
+    private _query;
+    private _readRecent;
+    private _writeRecent;
+    /** Fuzzy score: substring match (strong), then in-order character match (weak). Returns -1 if no match. */
+    private _score;
+    /** Map PaletteCommand → CommandItem (category → group). */
+    private _toItem;
+    /** Build the filtered + ordered + recent-prepended item list to hand to cg-command. */
+    private get _items();
+    private _onSelect;
+    private _onClose;
+    private _onInput;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-command-palette': AiCommandPalette;
+    }
+}
+//# sourceMappingURL=ai-command-palette.d.ts.map

package/dist/components/ai-command-palette/ai-command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-command-palette.d.ts","sourceRoot":"","sources":["../../../src/components/ai-command-palette/ai-command-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,6BAA6B,CAAC;AAGrC,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAGnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,QAAQ,EAAE,cAAc,EAAE,CAAM;IACf,IAAI,UAAS;IAC7B,WAAW,SAA0B;IAExD,OAAO,CAAC,MAAM,CAAM;IAE7B,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAUpB,2GAA2G;IAC3G,OAAO,CAAC,MAAM;IAmBd,2DAA2D;IAC3D,OAAO,CAAC,OAAO;IAcf,uFAAuF;IACvF,OAAO,KAAK,MAAM,GAyBjB;IAED,OAAO,CAAC,SAAS,CAaf;IAEF,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,QAAQ,CAId;IAEO,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

package/dist/components/ai-command-palette/ai-command-palette.js

@@ -0,0 +1,119 @@
+import { css as _, LitElement as g, nothing as y, html as v } from "lit";
+import { property as d, state as b, customElement as w } from "lit/decorators.js";
+import { h as E } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-command/cg-command.js";
+var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, l = (t, e, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? C(e, n) : e, c = t.length - 1, s; c >= 0; c--)
+    (s = t[c]) && (r = (o ? s(e, n, r) : s(r)) || r);
+  return o && r && I(e, n, r), r;
+};
+const u = "cognivo:ai-command-palette:recent", S = 5;
+let a = class extends g {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.commands = [], this.open = !1, this.placeholder = "Type a command…", this._query = "", this._onSelect = (t) => {
+      const e = t;
+      t.stopPropagation();
+      const n = e.detail?.id, o = this.commands.find((r) => r.id === n);
+      o && (this._writeRecent(n), this.open = !1, this.dispatchEvent(new CustomEvent("ai-command-select", {
+        detail: { id: o.id, label: o.label },
+        bubbles: !0,
+        composed: !0
+      })));
+    }, this._onClose = (t) => {
+      t.stopPropagation(), this.open && (this.open = !1), this._query = "", this.dispatchEvent(new CustomEvent("ai-command-close", {
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onInput = (t) => {
+      const e = t;
+      t.stopPropagation(), this._query = e.detail?.value ?? "";
+    };
+  }
+  _readRecent() {
+    try {
+      const t = globalThis.localStorage?.getItem(u), e = t ? JSON.parse(t) : [];
+      return Array.isArray(e) ? e.filter((n) => typeof n == "string") : [];
+    } catch {
+      return [];
+    }
+  }
+  _writeRecent(t) {
+    try {
+      const e = this._readRecent().filter((n) => n !== t);
+      e.unshift(t), globalThis.localStorage?.setItem(u, JSON.stringify(e.slice(0, S)));
+    } catch {
+    }
+  }
+  /** Fuzzy score: substring match (strong), then in-order character match (weak). Returns -1 if no match. */
+  _score(t, e) {
+    if (!e) return 0;
+    const n = t.toLowerCase(), o = e.toLowerCase(), r = n.indexOf(o);
+    if (r !== -1) return 1e3 - r;
+    let c = 0, s = 0, i = -1, p = 0;
+    for (let h = 0; h < o.length; h++) {
+      const f = o[h], m = n.indexOf(f, c);
+      if (m === -1) return -1;
+      i !== -1 && (p += m - i - 1), i = m, c = m + 1, s++;
+    }
+    return s === o.length ? 100 - p : -1;
+  }
+  /** Map PaletteCommand → CommandItem (category → group). */
+  _toItem(t, e, n = "") {
+    const o = {
+      id: t.id,
+      label: t.label,
+      group: e ?? t.category ?? "General"
+    };
+    return t.shortcut !== void 0 && (o.shortcut = t.shortcut), t.icon !== void 0 && (o.icon = t.icon), n && (o.keywords = [n]), o;
+  }
+  /** Build the filtered + ordered + recent-prepended item list to hand to cg-command. */
+  get _items() {
+    const t = this._query.trim(), e = this.commands, n = t ? [] : this._readRecent(), o = new Map(e.map((s) => [s.id, s])), r = n.map((s) => o.get(s)).filter((s) => !!s).map((s) => this._toItem(s, "Recent", t));
+    let c;
+    if (t)
+      c = e.map((i) => ({ c: i, s: this._score(i.label, t) })).filter((i) => i.s >= 0).sort((i, p) => p.s - i.s).map((i) => i.c);
+    else {
+      const s = new Set(n);
+      c = e.filter((i) => !s.has(i.id));
+    }
+    return [...r, ...c.map((s) => this._toItem(s, void 0, t))];
+  }
+  render() {
+    return this.open ? v`
+      <cg-command
+        ?open=${this.open}
+        .placeholder=${this.placeholder}
+        .commands=${this._items}
+        @cg-command-select=${this._onSelect}
+        @cg-command-close=${this._onClose}
+        @cg-command-input=${this._onInput}
+      ></cg-command>
+    ` : y;
+  }
+};
+a.styles = [E, _`
+    :host { display: contents; }
+    :host([hidden]) { display: none; }
+  `];
+l([
+  d({ reflect: !0 })
+], a.prototype, "rounded", 2);
+l([
+  d({ type: Array })
+], a.prototype, "commands", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "open", 2);
+l([
+  d({ type: String })
+], a.prototype, "placeholder", 2);
+l([
+  b()
+], a.prototype, "_query", 2);
+a = l([
+  w("ai-command-palette")
+], a);
+export {
+  a as AiCommandPalette
+};
+//# sourceMappingURL=ai-command-palette.js.map

package/dist/components/ai-command-palette/ai-command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-command-palette.js","sources":["../../../src/components/ai-command-palette/ai-command-palette.ts"],"sourcesContent":["/**\n * @element ai-command-palette\n * AI-flavored command palette — thin wrapper around <cg-command> adding fuzzy\n * search, recent commands history, and category badges.\n *\n * @example\n * ```html\n * <ai-command-palette\n *   .commands=${[\n *     {id:'new-chat', label:'New Chat', shortcut:'Ctrl+N', category:'AI'},\n *     {id:'export', label:'Export Data', icon:'[box icon]', category:'Data'}\n *   ]}\n *   open\n * ></ai-command-palette>\n * ```\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-command-select - Command selected\n * @fires {CustomEvent} ai-command-close - Palette closed (Escape or overlay click)\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock } from '../../styles/index.js';\nimport '../cg-command/cg-command.js';\nimport type { CommandItem } from '../cg-command/cg-command.js';\n\nexport interface PaletteCommand {\n  id: string;\n  label: string;\n  shortcut?: string;\n  icon?: string;\n  category?: string;\n}\n\nconst RECENT_STORAGE_KEY = 'cognivo:ai-command-palette:recent';\nconst RECENT_LIMIT = 5;\n\n@customElement('ai-command-palette')\nexport class AiCommandPalette extends LitElement {\n  static override styles = [hostBlock, css`\n    :host { display: contents; }\n    :host([hidden]) { display: none; }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) commands: PaletteCommand[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String }) placeholder = 'Type a command\\u2026';\n\n  @state() private _query = '';\n\n  private _readRecent(): string[] {\n    try {\n      const raw = globalThis.localStorage?.getItem(RECENT_STORAGE_KEY);\n      const parsed = raw ? JSON.parse(raw) : [];\n      return Array.isArray(parsed) ? parsed.filter((x): x is string => typeof x === 'string') : [];\n    } catch {\n      return [];\n    }\n  }\n\n  private _writeRecent(id: string): void {\n    try {\n      const prev = this._readRecent().filter(x => x !== id);\n      prev.unshift(id);\n      globalThis.localStorage?.setItem(RECENT_STORAGE_KEY, JSON.stringify(prev.slice(0, RECENT_LIMIT)));\n    } catch {\n      /* ignore quota / privacy mode */\n    }\n  }\n\n  /** Fuzzy score: substring match (strong), then in-order character match (weak). Returns -1 if no match. */\n  private _score(label: string, q: string): number {\n    if (!q) return 0;\n    const l = label.toLowerCase();\n    const needle = q.toLowerCase();\n    const idx = l.indexOf(needle);\n    if (idx !== -1) return 1000 - idx;\n    let li = 0, matched = 0, lastHit = -1, gaps = 0;\n    for (let i = 0; i < needle.length; i++) {\n      const ch = needle[i]!;\n      const found = l.indexOf(ch, li);\n      if (found === -1) return -1;\n      if (lastHit !== -1) gaps += found - lastHit - 1;\n      lastHit = found;\n      li = found + 1;\n      matched++;\n    }\n    return matched === needle.length ? 100 - gaps : -1;\n  }\n\n  /** Map PaletteCommand → CommandItem (category → group). */\n  private _toItem(c: PaletteCommand, groupOverride?: string, query = ''): CommandItem {\n    // Inject the active query as a keyword so cg-command's internal substring\n    // filter passes through items we've already matched via fuzzy scoring.\n    const item: CommandItem = {\n      id: c.id,\n      label: c.label,\n      group: groupOverride ?? c.category ?? 'General',\n    };\n    if (c.shortcut !== undefined) item.shortcut = c.shortcut;\n    if (c.icon !== undefined) item.icon = c.icon;\n    if (query) item.keywords = [query];\n    return item;\n  }\n\n  /** Build the filtered + ordered + recent-prepended item list to hand to cg-command. */\n  private get _items(): CommandItem[] {\n    const q = this._query.trim();\n    const base = this.commands;\n\n    // Recent group (only when no active query)\n    const recentIds = q ? [] : this._readRecent();\n    const byId = new Map(base.map(c => [c.id, c]));\n    const recentItems: CommandItem[] = recentIds\n      .map(id => byId.get(id))\n      .filter((c): c is PaletteCommand => !!c)\n      .map(c => this._toItem(c, 'Recent', q));\n\n    let rest: PaletteCommand[];\n    if (q) {\n      const scored = base\n        .map(c => ({ c, s: this._score(c.label, q) }))\n        .filter(x => x.s >= 0)\n        .sort((a, b) => b.s - a.s);\n      rest = scored.map(x => x.c);\n    } else {\n      const recentSet = new Set(recentIds);\n      rest = base.filter(c => !recentSet.has(c.id));\n    }\n\n    return [...recentItems, ...rest.map(c => this._toItem(c, undefined, q))];\n  }\n\n  private _onSelect = (e: Event): void => {\n    const ev = e as CustomEvent<{ id: string; command: CommandItem }>;\n    e.stopPropagation();\n    const id = ev.detail?.id;\n    const cmd = this.commands.find(c => c.id === id);\n    if (!cmd) return;\n    this._writeRecent(id);\n    this.open = false;\n    this.dispatchEvent(new CustomEvent('ai-command-select', {\n      detail: { id: cmd.id, label: cmd.label },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onClose = (e: Event): void => {\n    e.stopPropagation();\n    if (this.open) this.open = false;\n    this._query = '';\n    this.dispatchEvent(new CustomEvent('ai-command-close', {\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onInput = (e: Event): void => {\n    const ev = e as CustomEvent<{ value: string }>;\n    e.stopPropagation();\n    this._query = ev.detail?.value ?? '';\n  };\n\n  override render() {\n    if (!this.open) return nothing;\n    return html`\n      <cg-command\n        ?open=${this.open}\n        .placeholder=${this.placeholder}\n        .commands=${this._items}\n        @cg-command-select=${this._onSelect}\n        @cg-command-close=${this._onClose}\n        @cg-command-input=${this._onInput}\n      ></cg-command>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-command-palette': AiCommandPalette;\n  }\n}\n"],"names":["RECENT_STORAGE_KEY","RECENT_LIMIT","AiCommandPalette","LitElement","e","ev","id","cmd","c","raw","parsed","x","prev","label","q","l","needle","idx","li","matched","lastHit","gaps","i","ch","found","groupOverride","query","item","base","recentIds","byId","recentItems","rest","a","b","recentSet","html","nothing","hostBlock","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-confidence-badge/ai-confidence-badge.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class AiConfidenceBadge extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Confidence score 0-1. */
+    score: number;
+    /** Show percentage or level name in the inline label. */
+    showPercentage: boolean;
+    /** Size variant. */
+    size: 'sm' | 'md' | 'lg';
+    /** Tooltip explanation text. */
+    explanation: string;
+    /** History array of scores (0-1) for sparkline. */
+    history: number[];
+    /** High-confidence threshold (default 0.8). */
+    highThreshold: number;
+    /** Low-confidence threshold (default 0.5). Below this = "low". */
+    lowThreshold: number;
+    private _getLevel;
+    private _getIconName;
+    private _getProgressVariant;
+    private _getSparkColor;
+    private _renderSparkline;
+    private _renderInner;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-confidence-badge': AiConfidenceBadge;
+    }
+}
+//# sourceMappingURL=ai-confidence-badge.d.ts.map

package/dist/components/ai-confidence-badge/ai-confidence-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-confidence-badge.d.ts","sourceRoot":"","sources":["../../../src/components/ai-confidence-badge/ai-confidence-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,uCAAuC,CAAC;AAE/C,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA+FnB;IAEH,4BAA4B;IACA,KAAK,EAAE,MAAM,CAAQ;IAEjD,yDAAyD;IACE,cAAc,EAAE,OAAO,CAAQ;IAE1F,oBAAoB;IACuB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE3E,gCAAgC;IACJ,WAAW,EAAE,MAAM,CAAM;IAErD,mDAAmD;IACxB,OAAO,EAAE,MAAM,EAAE,CAAM;IAElD,+CAA+C;IACU,aAAa,EAAE,MAAM,CAAO;IAErF,kEAAkE;IACV,YAAY,EAAE,MAAM,CAAO;IAInF,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,mBAAmB;IAK3B,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,gBAAgB;IAYxB,OAAO,CAAC,YAAY;IA+BX,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}