@cognivo/components 0.8.0 → 0.8.2

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

@@ -10,40 +10,14 @@ export declare class AiCollaborativeEditor extends LitElement {
     cursors: EditorCursor[];
     editable: boolean;
     placeholder: string;
-    title: string;
-    /** Sync state shown in the footer. Consumers flip this during save. */
-    sync: 'idle' | 'saving' | 'saved' | 'error';
-    /** ms of cursor inactivity before the user's label fades out. 0 disables. */
-    idleFadeDelay: number;
     private _charCount;
     private _wordCount;
-    private _idleUsers;
-    /** Per-cursor screen positions in textarea-relative pixels. */
-    private _cursorPositions;
     private _textarea;
-    private _mirror;
-    private _idleTimers;
-    private _previousPositions;
     updated(changed: Map<string, unknown>): void;
-    disconnectedCallback(): void;
     private _updateCounts;
-    /**
-     * 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.
-     */
-    private _measureCursors;
-    /**
-     * 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.
-     */
-    private _handleCursorActivity;
     private _onInput;
     private _onSelect;
+    private _getCursorPosition;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"ai-collaborative-editor.d.ts","sourceRoot":"","sources":["../../../src/components/ai-collaborative-editor/ai-collaborative-editor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AAErC,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,4BA+KnB;IAEyB,OAAO,SAAM;IACd,OAAO,EAAE,YAAY,EAAE,CAAM;IAC3B,QAAQ,UAAQ;IACjB,WAAW,SAAmB;IACrB,KAAK,SAAM;IAChD,uEAAuE;IAC1C,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAU;IAClF,6EAA6E;IACnB,aAAa,SAAQ;IAEtE,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAqB;IAChD,+DAA+D;IACtD,OAAO,CAAC,gBAAgB,CAAoD;IAElE,OAAO,CAAC,SAAS,CAAuB;IACzC,OAAO,CAAC,OAAO,CAAkB;IAEnD,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,kBAAkB,CAA6B;IAE9C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAS5C,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,aAAa;IAMrB;;;;;;;OAOG;IACH,OAAO,CAAC,eAAe;IAyBvB;;;;OAIG;IACH,OAAO,CAAC,qBAAqB;IA6B7B,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS;IAYR,MAAM;CA2EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}
+{"version":3,"file":"ai-collaborative-editor.d.ts","sourceRoot":"","sources":["../../../src/components/ai-collaborative-editor/ai-collaborative-editor.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,4BAqHnB;IACyB,OAAO,SAAM;IACd,OAAO,EAAE,YAAY,EAAE,CAAM;IAC3B,QAAQ,UAAQ;IACjB,WAAW,SAAqB;IAEnD,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IAEb,OAAO,CAAC,SAAS,CAAuB;IAElD,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMrD,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,kBAAkB;IAwBjB,MAAM;CAyChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}

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

@@ -1,118 +1,58 @@
-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;
+import { css as v, LitElement as b, nothing as f, html as d } from "lit";
+import { property as p, state as g, query as m, customElement as x } from "lit/decorators.js";
+import { h as y, r as _, f as w } from "../../chunks/premium.css-DHekUEUt.js";
+var $ = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (t, e, n, i) => {
+  for (var r = i > 1 ? void 0 : i ? C(e, n) : e, c = t.length - 1, s; c >= 0; c--)
+    (s = t[c]) && (r = (i ? s(e, n, r) : s(r)) || r);
+  return i && r && $(e, n, r), r;
 };
-let r = class extends m {
+let o = class extends b {
   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();
+    super(...arguments), this.content = "", this.cursors = [], this.editable = !0, this.placeholder = "Start typing...", this._charCount = 0, this._wordCount = 0;
   }
-  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();
+  updated(t) {
+    t.has("content") && this._updateCounts();
   }
   _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;
+    const t = this.content.trim();
+    this._wordCount = t ? t.split(/\s+/).length : 0;
   }
-  /**
-   * 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", {
+  _onInput(t) {
+    const e = t.target;
+    this.content = e.value, this._updateCounts(), this.dispatchEvent(new CustomEvent("ai-editor-change", {
       bubbles: !0,
       composed: !0,
       detail: { content: this.content }
     }));
   }
-  _onSelect(e) {
-    const t = e.target;
+  _onSelect(t) {
+    const e = t.target;
     this.dispatchEvent(new CustomEvent("ai-editor-cursor-move", {
       bubbles: !0,
       composed: !0,
       detail: {
-        position: t.selectionStart,
-        selectionStart: t.selectionStart,
-        selectionEnd: t.selectionEnd
+        position: e.selectionStart,
+        selectionStart: e.selectionStart,
+        selectionEnd: e.selectionEnd
       }
     }));
   }
+  _getCursorPosition(t) {
+    const r = this._textarea ? Math.floor((this._textarea.clientWidth - 24) / 8.4) : 60, s = this.content.substring(0, t).split(`
+`);
+    let l = 0;
+    for (const u of s)
+      l += Math.max(1, Math.ceil((u.length || 1) / r));
+    l = Math.max(1, l);
+    const h = (s[s.length - 1] || "").length % r;
+    return {
+      top: 12 + (l - 1) * 22.4,
+      left: 12 + h * 8.4
+    };
+  }
   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}
-
+    return d`
       <div class="editor-wrap" role="group" aria-label="Collaborative text editor">
         <textarea
           .value=${this.content}
@@ -122,144 +62,84 @@ let r = class extends m {
           @keyup=${this._onSelect}
           @click=${this._onSelect}
           aria-label="Editor content"
+          tabindex="0"
         ></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>
+      const e = this._getCursorPosition(t.position);
+      return d`
+              <div class="cursor-marker" style="top:${e.top}px;left:${e.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>
+        ${this.cursors.length ? d`
+          <div class="presence" aria-label="${this.cursors.length} users present">
+            ${this.cursors.map((t) => d`
+              <span class="presence-dot" style="background:${t.color}" title="${t.user}"></span>
+            `)}
+            <span>${this.cursors.length} online</span>
           </div>
-        ` : p}
+        ` : f}
       </div>
-
-      <span class="sr-only" role="status" aria-live="polite" aria-atomic="true">${e}</span>
     `;
   }
 };
-r.styles = [y, w, x, f`
+o.styles = [y, _, w, v`
     :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;
+      min-height: var(--cg-spacing-192);
     }
 
     textarea {
       display: block;
       width: 100%;
-      min-height: 200px;
+      min-height: var(--cg-spacing-192);
       background: transparent;
       color: var(--cg-color-surface-base-text);
       border: none;
       outline: none;
       resize: vertical;
-      padding: var(--cg-spacing-16);
+      padding: var(--cg-spacing-12);
       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);
+      caret-color: var(--cg-color-surface-base-text);
     }
-    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    textarea::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+    }
+
     textarea:focus-visible {
-      box-shadow: inset 0 0 0 3px var(--cg-overlay-accent-strong);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) 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;
@@ -270,118 +150,92 @@ r.styles = [y, w, x, f`
       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;
+      align-items: center;
       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);
+      width: var(--cg-spacing-2);
+      height: var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-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);
+      padding: var(--cg-spacing-1) var(--cg-spacing-4);
       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;
+      margin-top: var(--cg-spacing-2);
+      color: var(--cg-color-surface-container-background);
     }
 
-    /* ── 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);
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       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;
+
+    .presence {
+      display: flex;
+      gap: var(--cg-spacing-4);
       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);
+
+    .presence-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: 50%;
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .presence-dot:hover {
+      transform: scale(1.3);
     }
 
-    /* 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;
+    /* Basic hover transitions on interactive elements */
+    textarea:hover {
+      border-color: var(--cg-color-surface-cards-border);
     }
   `];
-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);
+a([
+  p({ type: String })
+], o.prototype, "content", 2);
+a([
+  p({ type: Array })
+], o.prototype, "cursors", 2);
+a([
+  p({ type: Boolean })
+], o.prototype, "editable", 2);
+a([
+  p({ type: String })
+], o.prototype, "placeholder", 2);
+a([
+  g()
+], o.prototype, "_charCount", 2);
+a([
+  g()
+], o.prototype, "_wordCount", 2);
+a([
+  m("textarea")
+], o.prototype, "_textarea", 2);
+o = a([
+  x("ai-collaborative-editor")
+], o);
 export {
-  r as AiCollaborativeEditor
+  o as AiCollaborativeEditor
 };
 //# sourceMappingURL=ai-collaborative-editor.js.map

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

@@ -1 +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":"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"}
+{"version":3,"file":"ai-collaborative-editor.js","sources":["../../../src/components/ai-collaborative-editor/ai-collaborative-editor.ts"],"sourcesContent":["/**\n * @element ai-collaborative-editor\n * Monospace text editor with multi-user cursor presence overlay, word/char counts, and live editing.\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-accent=#dfff61] - Caret color and focus ring\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';\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      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    .editor-wrap {\n      position: relative;\n      min-height: var(--cg-spacing-192);\n    }\n\n    textarea {\n      display: block;\n      width: 100%;\n      min-height: var(--cg-spacing-192);\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-12);\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-surface-base-text);\n    }\n\n    textarea::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    textarea:focus-visible {\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-overlay-accent-strong);\n    }\n\n    textarea:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\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 {\n      position: absolute;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      pointer-events: none;\n      z-index: 2;\n    }\n\n    .cursor-line {\n      width: var(--cg-spacing-2);\n      height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-50);\n    }\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-4);\n      border-radius: var(--cg-border-radius-50);\n      white-space: nowrap;\n      margin-top: var(--cg-spacing-2);\n      color: var(--cg-color-surface-container-background);\n    }\n\n    .footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .stats {\n      display: flex;\n      gap: var(--cg-spacing-12);\n    }\n\n    .presence {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      align-items: center;\n    }\n\n    .presence-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: 50%;\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .presence-dot:hover {\n      transform: scale(1.3);\n    }\n\n    /* Basic hover transitions on interactive elements */\n    textarea:hover {\n      border-color: var(--cg-color-surface-cards-border);\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\n  @state() private _charCount = 0;\n  @state() private _wordCount = 0;\n\n  @query('textarea') private _textarea!: HTMLTextAreaElement;\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('content')) {\n      this._updateCounts();\n    }\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  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  private _getCursorPosition(position: number): { top: number; left: number } {\n    const charWidth = 8.4;\n    const lineHeight = 22.4;\n    const padding = 12;\n    const charsPerLine = this._textarea\n      ? Math.floor((this._textarea.clientWidth - padding * 2) / charWidth)\n      : 60;\n\n    const textBefore = this.content.substring(0, position);\n    const lines = textBefore.split('\\n');\n    let totalLines = 0;\n    for (const line of lines) {\n      totalLines += Math.max(1, Math.ceil((line.length || 1) / charsPerLine));\n    }\n    totalLines = Math.max(1, totalLines);\n    const lastLine = lines[lines.length - 1] || '';\n    const colInLine = lastLine.length % charsPerLine;\n\n    return {\n      top: padding + (totalLines - 1) * lineHeight,\n      left: padding + colInLine * charWidth,\n    };\n  }\n\n  override render() {\n    return html`\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          tabindex=\"0\"\n        ></textarea>\n        <div class=\"cursors-overlay\" aria-hidden=\"true\">\n          ${this.cursors.map(c => {\n            const pos = this._getCursorPosition(c.position);\n            return html`\n              <div class=\"cursor-marker\" style=\"top:${pos.top}px;left:${pos.left}px\">\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      <div class=\"footer\">\n        <div class=\"stats\">\n          <span>${this._charCount} chars</span>\n          <span>${this._wordCount} words</span>\n        </div>\n        ${this.cursors.length ? html`\n          <div class=\"presence\" aria-label=\"${this.cursors.length} users present\">\n            ${this.cursors.map(c => html`\n              <span class=\"presence-dot\" style=\"background:${c.color}\" title=\"${c.user}\"></span>\n            `)}\n            <span>${this.cursors.length} online</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-collaborative-editor': AiCollaborativeEditor;\n  }\n}\n"],"names":["AiCollaborativeEditor","LitElement","changed","trimmed","e","target","position","charsPerLine","lines","totalLines","line","colInLine","html","c","pos","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 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 { h as E } from "../../chunks/premium.css-DHekUEUt.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--)