@cognivo/components 0.8.0

package/dist/components/ai-permission-gate/ai-permission-gate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-permission-gate.js","sources":["../../../src/components/ai-permission-gate/ai-permission-gate.ts"],"sourcesContent":["/**\n * @element ai-permission-gate\n * RBAC permission panel built from design-system primitives (cg-card, cg-text, cg-button, cg-badge).\n * Shows allowed/denied features for a role, with a \"Request Access\" CTA on denied items\n * and an allowed/denied summary footer.\n *\n * @example\n * ```html\n * <ai-permission-gate\n *   currentRole=\"editor\"\n *   .permissions=${[\n *     { feature: 'Code Generation', role: 'editor', allowed: true },\n *     { feature: 'Fine-tuning', role: 'editor', allowed: false, reason: 'Admin only' }\n *   ]}\n * ></ai-permission-gate>\n * ```\n *\n * @prop {Permission[]} permissions - Permission entries\n * @prop {string} currentRole - Active role to filter by\n *\n * @fires {CustomEvent<{feature: string, role: string}>} ai-permission-request - Request Access clicked\n */\nimport { LitElement, html, css, nothing, svg } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-badge/cg-badge.js';\n\ninterface Permission {\n  feature: string;\n  role: string;\n  allowed: boolean;\n  reason?: string;\n}\n\n@customElement('ai-permission-gate')\nexport class AiPermissionGate extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: block;\n    }\n    :host([hidden]) { display: none; }\n\n    cg-card { display: block; }\n\n    .header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n\n    .feature-list {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    }\n\n    .feature-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-8);\n      min-height: var(--cg-spacing-48);\n    }\n    .feature-row + .feature-row {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .status-icon {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-full);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .status-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .status-icon.allowed {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .status-icon.denied {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .feature-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .summary {\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      display: flex;\n      gap: var(--cg-spacing-16);\n    }\n    .summary-item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n    .dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    .dot-green { background: var(--cg-color-status-success-text-default); }\n    .dot-red { background: var(--cg-color-status-error-text-default); }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-24) 0;\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) permissions: Permission[] = [];\n  @property({ type: String, attribute: 'current-role' }) currentRole = '';\n\n  private get _relevantPermissions(): Permission[] {\n    if (!this.currentRole) return this.permissions;\n    return this.permissions.filter(p => p.role === this.currentRole);\n  }\n\n  private get _allowedCount(): number {\n    return this._relevantPermissions.filter(p => p.allowed).length;\n  }\n\n  private get _deniedCount(): number {\n    return this._relevantPermissions.filter(p => !p.allowed).length;\n  }\n\n  private _requestAccess(permission: Permission) {\n    this.dispatchEvent(new CustomEvent('ai-permission-request', {\n      detail: { feature: permission.feature, role: permission.role },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _checkIcon() {\n    return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>`;\n  }\n  private _xIcon() {\n    return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  override render() {\n    const perms = this._relevantPermissions;\n\n    return html`\n      <cg-card variant=\"outlined\" padding=\"md\" rounded=${this.rounded} role=\"region\" aria-label=\"Permission gate\">\n        <div slot=\"header\" class=\"header-row\">\n          <cg-text size=\"sm\" weight=\"semibold\">Feature Permissions</cg-text>\n          ${this.currentRole\n            ? html`<cg-badge variant=\"neutral\" size=\"sm\" rounded=\"full\">${this.currentRole}</cg-badge>`\n            : nothing}\n        </div>\n\n        ${perms.length === 0 ? html`\n          <div class=\"empty\">\n            <cg-text size=\"sm\" color=\"muted\">No permissions configured</cg-text>\n          </div>\n        ` : html`\n          <div class=\"feature-list\" role=\"list\" aria-label=\"Feature permissions list\">\n            ${perms.map(p => html`\n              <div class=\"feature-row\" role=\"listitem\">\n                <span class=\"status-icon ${p.allowed ? 'allowed' : 'denied'}\" aria-hidden=\"true\">\n                  ${p.allowed ? this._checkIcon() : this._xIcon()}\n                </span>\n                <div class=\"feature-info\">\n                  <cg-text size=\"sm\" weight=\"semibold\">${p.feature}</cg-text>\n                  <cg-text size=\"xs\" color=\"muted\">Role: ${p.role}</cg-text>\n                  ${p.reason ? html`<cg-text size=\"xs\" color=\"muted\" style=\"font-style:italic;\">${p.reason}</cg-text>` : nothing}\n                </div>\n                ${!p.allowed ? html`\n                  <cg-button\n                    variant=\"secondary\"\n                    size=\"sm\"\n                    aria-label=\"Request access to ${p.feature}\"\n                    @click=${() => this._requestAccess(p)}\n                  >Request Access</cg-button>\n                ` : nothing}\n              </div>\n            `)}\n          </div>\n\n          <div class=\"summary\">\n            <span class=\"summary-item\">\n              <span class=\"dot dot-green\" aria-hidden=\"true\"></span>\n              <cg-text size=\"xs\" color=\"muted\">${this._allowedCount} allowed</cg-text>\n            </span>\n            <span class=\"summary-item\">\n              <span class=\"dot dot-red\" aria-hidden=\"true\"></span>\n              <cg-text size=\"xs\" color=\"muted\">${this._deniedCount} denied</cg-text>\n            </span>\n          </div>\n        `}\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-permission-gate': AiPermissionGate;\n  }\n}\n"],"names":["AiPermissionGate","LitElement","p","permission","svg","perms","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-personalization-dash/ai-personalization-dash.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export interface Preference {
+    id: string;
+    label: string;
+    value: number;
+    min?: number;
+    max?: number;
+    description?: string;
+}
+export interface Segment {
+    id: string;
+    label: string;
+    active?: boolean;
+}
+export declare class AiPersonalizationDash extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    preferences: Preference[];
+    segments: Segment[];
+    userName: string;
+    lastUpdated: string;
+    showReset: boolean;
+    private _handleSliderChange;
+    private _handleReset;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-personalization-dash.d.ts.map

package/dist/components/ai-personalization-dash/ai-personalization-dash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-personalization-dash.d.ts","sourceRoot":"","sources":["../../../src/components/ai-personalization-dash/ai-personalization-dash.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,4BA2EnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,WAAW,EAAE,UAAU,EAAE,CAAM;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAM;IACxC,QAAQ,SAAM;IACd,WAAW,SAAM;IACA,SAAS,UAAS;IAE/C,OAAO,CAAC,mBAAmB;IAS3B,OAAO,CAAC,YAAY;IAIX,MAAM;CAwDhB"}

package/dist/components/ai-personalization-dash/ai-personalization-dash.js

@@ -0,0 +1,181 @@
+import { css as p, LitElement as v, nothing as n, html as s } from "lit";
+import { property as c, customElement as f } from "lit/decorators.js";
+import { h as u, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, a, o, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(a, o) : a, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (t = (l ? g(a, o, t) : g(t)) || t);
+  return l && t && m(a, o, t), t;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.preferences = [], this.segments = [], this.userName = "", this.lastUpdated = "", this.showReset = !1;
+  }
+  _handleSliderChange(e, a) {
+    const o = a.detail?.value;
+    o !== void 0 && this.dispatchEvent(new CustomEvent("ai-personalization-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e, value: o }
+    }));
+  }
+  _handleReset() {
+    this.dispatchEvent(new CustomEvent("ai-personalization-reset", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return s`
+      <div class="panel">
+        <div class="profile">
+          <div class="profile-avatar">${this.userName.charAt(0).toUpperCase() || "?"}</div>
+          <div class="profile-info">
+            <span class="profile-name">${this.userName || "User"}</span>
+            ${this.lastUpdated ? s`<span class="profile-updated">Updated ${this.lastUpdated}</span>` : n}
+          </div>
+        </div>
+
+        ${this.preferences.length > 0 ? s`
+          <div class="section">
+            <div class="section-title">Preferences</div>
+            <div class="pref-list">
+              ${this.preferences.map((e) => s`
+                <div class="pref-item">
+                  <cg-slider
+                    label="${e.label}"
+                    value="${e.value}"
+                    min="${e.min ?? 0}"
+                    max="${e.max ?? 100}"
+                    showValue
+                    .showTooltip=${!1}
+                    .showRange=${!1}
+                    @cg-change=${(a) => this._handleSliderChange(e.id, a)}
+                  ></cg-slider>
+                  ${e.description ? s`<span class="pref-desc">${e.description}</span>` : n}
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : n}
+
+        ${this.segments.length > 0 ? s`
+          <div class="section">
+            <div class="section-title">Segments</div>
+            <div class="segments">
+              ${this.segments.map((e) => s`
+                <span class="seg ${e.active ? "active" : ""}">
+                  <span class="seg-dot"></span>
+                  ${e.label}
+                </span>
+              `)}
+            </div>
+          </div>
+        ` : n}
+
+        ${this.showReset ? s`
+          <div class="footer">
+            <cg-button variant="secondary" size="sm" @click=${this._handleReset}>Reset to Defaults</cg-button>
+          </div>
+        ` : n}
+      </div>
+    `;
+  }
+};
+r.styles = [u, h, p`
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      overflow: hidden;
+    }
+
+    /* ── Profile ── */
+    .profile {
+      display: flex; align-items: center; gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+    }
+    .profile-avatar {
+      width: var(--cg-spacing-32); height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-action-primary-background-default);
+      display: flex; align-items: center; justify-content: center;
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      flex-shrink: 0;
+    }
+    .profile-info { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }
+    .profile-name { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+    .profile-updated { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }
+
+    /* ── Sections ── */
+    .section { padding: var(--cg-spacing-16) var(--cg-spacing-20); }
+    .section-title {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    /* ── Preference items ── */
+    .pref-list { display: flex; flex-direction: column; gap: var(--cg-spacing-16); }
+    .pref-item { display: flex; flex-direction: column; gap: var(--cg-spacing-4); }
+    .pref-header { display: flex; align-items: center; justify-content: space-between; }
+    .pref-label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text); }
+    .pref-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }
+
+    /* ── Segments ── */
+    .segments { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-6); }
+    .seg {
+      display: inline-flex; align-items: center; gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-container-outlined);
+      background: transparent;
+    }
+    .seg.active {
+      border-color: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-background-default);
+      background: var(--cg-overlay-accent-subtle);
+    }
+    .seg-dot {
+      width: var(--cg-spacing-6); height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: currentColor;
+    }
+
+    /* ── Footer ── */
+    .footer {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      display: flex; justify-content: flex-end;
+    }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-border-radius-150); }
+  `];
+i([
+  c({ reflect: !0 })
+], r.prototype, "rounded", 2);
+i([
+  c({ type: Array })
+], r.prototype, "preferences", 2);
+i([
+  c({ type: Array })
+], r.prototype, "segments", 2);
+i([
+  c()
+], r.prototype, "userName", 2);
+i([
+  c()
+], r.prototype, "lastUpdated", 2);
+i([
+  c({ type: Boolean })
+], r.prototype, "showReset", 2);
+r = i([
+  f("ai-personalization-dash")
+], r);
+export {
+  r as AiPersonalizationDash
+};
+//# sourceMappingURL=ai-personalization-dash.js.map

package/dist/components/ai-personalization-dash/ai-personalization-dash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-personalization-dash.js","sources":["../../../src/components/ai-personalization-dash/ai-personalization-dash.ts"],"sourcesContent":["/**\n * @element ai-personalization-dash\n * User personalization dashboard with preference sliders, segments, and reset.\n *\n * @fires {CustomEvent<{id: string, value: number}>} ai-personalization-change\n * @fires {CustomEvent} ai-personalization-reset\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface Preference {\n  id: string;\n  label: string;\n  value: number;\n  min?: number;\n  max?: number;\n  description?: string;\n}\n\nexport interface Segment {\n  id: string;\n  label: string;\n  active?: boolean;\n}\n\n@customElement('ai-personalization-dash')\nexport class AiPersonalizationDash extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      overflow: hidden;\n    }\n\n    /* ── Profile ── */\n    .profile {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n    }\n    .profile-avatar {\n      width: var(--cg-spacing-32); height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-action-primary-background-default);\n      display: flex; align-items: center; justify-content: center;\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      flex-shrink: 0;\n    }\n    .profile-info { display: flex; flex-direction: column; gap: var(--cg-spacing-2); }\n    .profile-name { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n    .profile-updated { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }\n\n    /* ── Sections ── */\n    .section { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .section-title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    /* ── Preference items ── */\n    .pref-list { display: flex; flex-direction: column; gap: var(--cg-spacing-16); }\n    .pref-item { display: flex; flex-direction: column; gap: var(--cg-spacing-4); }\n    .pref-header { display: flex; align-items: center; justify-content: space-between; }\n    .pref-label { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text); }\n    .pref-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }\n\n    /* ── Segments ── */\n    .segments { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-6); }\n    .seg {\n      display: inline-flex; align-items: center; gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n      background: transparent;\n    }\n    .seg.active {\n      border-color: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n    .seg-dot {\n      width: var(--cg-spacing-6); height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: currentColor;\n    }\n\n    /* ── Footer ── */\n    .footer {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      display: flex; justify-content: flex-end;\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) preferences: Preference[] = [];\n  @property({ type: Array }) segments: Segment[] = [];\n  @property() userName = '';\n  @property() lastUpdated = '';\n  @property({ type: Boolean }) showReset = false;\n\n  private _handleSliderChange(id: string, e: Event) {\n    const value = (e as CustomEvent).detail?.value;\n    if (value !== undefined) {\n      this.dispatchEvent(new CustomEvent('ai-personalization-change', {\n        bubbles: true, composed: true, detail: { id, value },\n      }));\n    }\n  }\n\n  private _handleReset() {\n    this.dispatchEvent(new CustomEvent('ai-personalization-reset', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"panel\">\n        <div class=\"profile\">\n          <div class=\"profile-avatar\">${this.userName.charAt(0).toUpperCase() || '?'}</div>\n          <div class=\"profile-info\">\n            <span class=\"profile-name\">${this.userName || 'User'}</span>\n            ${this.lastUpdated ? html`<span class=\"profile-updated\">Updated ${this.lastUpdated}</span>` : nothing}\n          </div>\n        </div>\n\n        ${this.preferences.length > 0 ? html`\n          <div class=\"section\">\n            <div class=\"section-title\">Preferences</div>\n            <div class=\"pref-list\">\n              ${this.preferences.map(p => html`\n                <div class=\"pref-item\">\n                  <cg-slider\n                    label=\"${p.label}\"\n                    value=\"${p.value}\"\n                    min=\"${p.min ?? 0}\"\n                    max=\"${p.max ?? 100}\"\n                    showValue\n                    .showTooltip=${false}\n                    .showRange=${false}\n                    @cg-change=${(e: Event) => this._handleSliderChange(p.id, e)}\n                  ></cg-slider>\n                  ${p.description ? html`<span class=\"pref-desc\">${p.description}</span>` : nothing}\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n\n        ${this.segments.length > 0 ? html`\n          <div class=\"section\">\n            <div class=\"section-title\">Segments</div>\n            <div class=\"segments\">\n              ${this.segments.map(s => html`\n                <span class=\"seg ${s.active ? 'active' : ''}\">\n                  <span class=\"seg-dot\"></span>\n                  ${s.label}\n                </span>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n\n        ${this.showReset ? html`\n          <div class=\"footer\">\n            <cg-button variant=\"secondary\" size=\"sm\" @click=${this._handleReset}>Reset to Defaults</cg-button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiPersonalizationDash","LitElement","id","e","value","html","nothing","p","s","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AA2BO,IAAMA,IAAN,cAAoCC,EAAW;AAAA,EAA/C,cAAA;AAAA,UAAA,GAAA,SAAA,GA8EwB,KAAA,UAAuC,MACzC,KAAA,cAA4B,CAAA,GAC5B,KAAA,WAAsB,CAAA,GACrC,KAAA,WAAW,IACX,KAAA,cAAc,IACG,KAAA,YAAY;AAAA,EAAA;AAAA,EAEjC,oBAAoBC,GAAYC,GAAU;AAChD,UAAMC,IAASD,EAAkB,QAAQ;AACzC,IAAIC,MAAU,UACZ,KAAK,cAAc,IAAI,YAAY,6BAA6B;AAAA,MAC9D,SAAS;AAAA,MAAM,UAAU;AAAA,MAAM,QAAQ,EAAE,IAAAF,GAAI,OAAAE,EAAA;AAAA,IAAM,CACpD,CAAC;AAAA,EAEN;AAAA,EAEQ,eAAe;AACrB,SAAK,cAAc,IAAI,YAAY,4BAA4B,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EACnG;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA;AAAA,wCAG6B,KAAK,SAAS,OAAO,CAAC,EAAE,YAAA,KAAiB,GAAG;AAAA;AAAA,yCAE3C,KAAK,YAAY,MAAM;AAAA,cAClD,KAAK,cAAcA,0CAA6C,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA,UAIvG,KAAK,YAAY,SAAS,IAAID;AAAA;AAAA;AAAA;AAAA,gBAIxB,KAAK,YAAY,IAAI,CAAAE,MAAKF;AAAA;AAAA;AAAA,6BAGbE,EAAE,KAAK;AAAA,6BACPA,EAAE,KAAK;AAAA,2BACTA,EAAE,OAAO,CAAC;AAAA,2BACVA,EAAE,OAAO,GAAG;AAAA;AAAA,mCAEJ,EAAK;AAAA,iCACP,EAAK;AAAA,iCACL,CAACJ,MAAa,KAAK,oBAAoBI,EAAE,IAAIJ,CAAC,CAAC;AAAA;AAAA,oBAE5DI,EAAE,cAAcF,4BAA+BE,EAAE,WAAW,YAAYD,CAAO;AAAA;AAAA,eAEpF,CAAC;AAAA;AAAA;AAAA,YAGJA,CAAO;AAAA;AAAA,UAET,KAAK,SAAS,SAAS,IAAID;AAAA;AAAA;AAAA;AAAA,gBAIrB,KAAK,SAAS,IAAI,CAAAG,MAAKH;AAAA,mCACJG,EAAE,SAAS,WAAW,EAAE;AAAA;AAAA,oBAEvCA,EAAE,KAAK;AAAA;AAAA,eAEZ,CAAC;AAAA;AAAA;AAAA,YAGJF,CAAO;AAAA;AAAA,UAET,KAAK,YAAYD;AAAA;AAAA,8DAEmC,KAAK,YAAY;AAAA;AAAA,YAEnEC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA1JaN,EACK,SAAS,CAACS,GAAWC,GAAeC;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,GA2EnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA9EhBb,EA8EkB,WAAA,WAAA,CAAA;AACFY,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA/Edb,EA+EgB,WAAA,eAAA,CAAA;AACAY,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAhFdb,EAgFgB,WAAA,YAAA,CAAA;AACfY,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjFCb,EAiFC,WAAA,YAAA,CAAA;AACAY,EAAA;AAAA,EAAXC,EAAA;AAAS,GAlFCb,EAkFC,WAAA,eAAA,CAAA;AACiBY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnFhBb,EAmFkB,WAAA,aAAA,CAAA;AAnFlBA,IAANY,EAAA;AAAA,EADNE,EAAc,yBAAyB;AAAA,GAC3Bd,CAAA;"}

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

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export type PresenceStatus = 'online' | 'away' | 'busy' | 'offline';
+export type PresenceSize = 'sm' | 'md' | 'lg';
+export interface PresenceUser {
+    name: string;
+    avatar?: string;
+    status: PresenceStatus;
+    /** Optional last-seen text shown in the tooltip (e.g. "5m ago") */
+    lastSeen?: string;
+}
+export declare class AiPresence extends LitElement {
+    static styles: import('lit').CSSResult[];
+    users: PresenceUser[];
+    maxVisible: number;
+    loading: boolean;
+    size: PresenceSize;
+    private _handleUserClick;
+    private _avatarSize;
+    private _renderTooltip;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-presence': AiPresence;
+    }
+}
+//# sourceMappingURL=ai-presence.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-presence.d.ts","sourceRoot":"","sources":["../../../src/components/ai-presence/ai-presence.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,2BAA2B,CAAC;AAEnC,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AACpE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,cAAc,CAAC;IACvB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AASD,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAoKnB;IAEwB,KAAK,EAAE,YAAY,EAAE,CAAM;IACA,UAAU,SAAK;IACzB,OAAO,UAAS;IACjB,IAAI,EAAE,YAAY,CAAQ;IAErE,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAWb,MAAM;CA4ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -0,0 +1,261 @@
+import { css as g, LitElement as p, html as n, nothing as b } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+import { a as f, r as h, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-avatar/cg-avatar.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (r, t, e, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(t, e) : t, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (o = (a ? d(t, e, o) : d(o)) || o);
+  return a && o && w(t, e, o), o;
+};
+const v = {
+  online: "Active",
+  away: "Away",
+  busy: "Do not disturb",
+  offline: "Offline"
+};
+let i = class extends p {
+  constructor() {
+    super(...arguments), this.users = [], this.maxVisible = 5, this.loading = !1, this.size = "md";
+  }
+  _handleUserClick(r) {
+    this.dispatchEvent(new CustomEvent("ai-presence-user-click", {
+      detail: { user: r },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _avatarSize() {
+    return this.size;
+  }
+  _renderTooltip(r) {
+    const t = v[r.status], e = r.lastSeen ? `${t} • ${r.lastSeen}` : t;
+    return n`
+      <span class="tooltip" role="tooltip">
+        <span class="tooltip-name">${r.name}</span>
+        <span class="tooltip-meta">${e}</span>
+      </span>
+    `;
+  }
+  render() {
+    if (this.loading) {
+      const a = Math.min(this.maxVisible, 4);
+      return n`
+        <div class="container" aria-busy="true" aria-label="Loading presence">
+          <div class="avatar-stack">
+            ${Array.from({ length: a }).map(() => n`<span class="skeleton"></span>`)}
+          </div>
+        </div>
+      `;
+    }
+    const r = this.users.slice(0, this.maxVisible), t = this.users.length - this.maxVisible, e = this._avatarSize();
+    return n`
+      <div class="container" role="group" aria-label="Active users" aria-live="polite">
+        <div class="avatar-stack">
+          ${r.map((a) => n`
+            <div class="avatar-wrapper">
+              <button
+                class="avatar-btn"
+                aria-label="${a.name}, ${v[a.status]}${a.lastSeen ? `, last seen ${a.lastSeen}` : ""}"
+                @click=${() => this._handleUserClick(a)}
+              >
+                <cg-avatar
+                  size=${e}
+                  shape="circle"
+                  name=${a.name}
+                  src=${a.avatar ?? ""}
+                  status=${a.status}
+                ></cg-avatar>
+              </button>
+              ${this._renderTooltip(a)}
+            </div>
+          `)}
+          ${t > 0 ? n`<span class="overflow-badge" aria-label="${t} more users">+${t}</span>` : b}
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [f, h, m, g`
+    :host {
+      align-items: center;
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+
+      /* Per-size variables (defaults to md) */
+      --_avatar-size: var(--cg-spacing-32);
+      --_overlap: var(--cg-spacing-8);
+    }
+    :host([hidden]) { display: none; }
+    :host([size="sm"]) {
+      --_avatar-size: var(--cg-spacing-24);
+      --_overlap: var(--cg-spacing-6);
+    }
+    :host([size="lg"]) {
+      --_avatar-size: var(--cg-spacing-40);
+      --_overlap: var(--cg-spacing-12);
+    }
+
+    .container {
+      display: flex;
+      align-items: center;
+    }
+    .avatar-stack {
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar-wrapper {
+      position: relative;
+      margin-left: calc(-1 * var(--_overlap));
+      z-index: 1;
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);
+    }
+    .avatar-wrapper:first-child { margin-left: 0; }
+    .avatar-wrapper:hover,
+    .avatar-wrapper:focus-within {
+      z-index: 10;
+      transform: translateY(calc(-1 * var(--cg-spacing-4)));
+    }
+
+    /* Outline ring around each avatar so they read as separate even when overlapping */
+    .avatar-btn {
+      display: inline-block;
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);
+      background: transparent;
+      padding: 0;
+      cursor: pointer;
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .avatar-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .avatar-btn:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 calc(2px + var(--cg-border-width-100)) var(--cg-color-focus-ring);
+    }
+
+    /* ── Overflow ── */
+    .overflow-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--_avatar-size);
+      height: var(--_avatar-size);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      margin-left: calc(-1 * var(--_overlap));
+      cursor: default;
+    }
+
+    /* ── Tooltip (bespoke — multi-line beats cg-tooltip's single-string content) ── */
+    .tooltip {
+      position: absolute;
+      bottom: calc(100% + var(--cg-spacing-8));
+      left: 50%;
+      transform: translateX(-50%) translateY(var(--cg-spacing-2));
+      background: var(--cg-color-modal-container-background);
+      color: var(--cg-color-surface-base-text);
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-xs);
+      line-height: var(--cg-line-height-snug);
+      max-width: var(--cg-spacing-256);
+      pointer-events: none;
+      opacity: 0;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
+      z-index: 20;
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      box-shadow: var(--cg-elevation-2);
+      white-space: nowrap;
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      transform: translateX(-50%) translateY(-50%) rotate(45deg);
+      background: var(--cg-color-modal-container-background);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+    }
+    .tooltip-name {
+      font-weight: var(--cg-font-weight-semibold);
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .tooltip-meta {
+      display: block;
+      margin-top: var(--cg-spacing-2);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .avatar-wrapper:hover .tooltip,
+    .avatar-wrapper:focus-within .tooltip {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    /* ── Skeleton ── */
+    @keyframes presence-shimmer {
+      0%   { background-position: -100% 0, 0 0; }
+      100% { background-position:  200% 0, 0 0; }
+    }
+    .skeleton {
+      display: inline-block;
+      width: var(--_avatar-size);
+      height: var(--_avatar-size);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);
+      margin-left: calc(-1 * var(--_overlap));
+      flex-shrink: 0;
+      background:
+        linear-gradient(
+          90deg,
+          transparent 0%,
+          var(--cg-overlay-white-strong) 50%,
+          transparent 100%
+        ),
+        var(--cg-color-action-tertiary-background-hover);
+      background-size: 50% 100%, 100% 100%;
+      background-repeat: no-repeat, no-repeat;
+      animation: presence-shimmer 1.5s var(--cg-transition-easing-linear) infinite;
+    }
+    .skeleton:first-child { margin-left: 0; }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host { animation: none; }
+      .avatar-wrapper { transition: none; }
+      .avatar-btn { transition: none; }
+      .tooltip { transition: none; transform: translateX(-50%); }
+      .avatar-wrapper:hover .tooltip,
+      .avatar-wrapper:focus-within .tooltip { transform: translateX(-50%); }
+      .skeleton { animation: none; }
+    }
+  `];
+s([
+  c({ type: Array })
+], i.prototype, "users", 2);
+s([
+  c({ type: Number, attribute: "max-visible" })
+], i.prototype, "maxVisible", 2);
+s([
+  c({ type: Boolean, reflect: !0 })
+], i.prototype, "loading", 2);
+s([
+  c({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+i = s([
+  u("ai-presence")
+], i);
+export {
+  i as AiPresence
+};
+//# sourceMappingURL=ai-presence.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-presence.js","sources":["../../../src/components/ai-presence/ai-presence.ts"],"sourcesContent":["/**\n * @element ai-presence\n * Overlapping avatar stack showing live user presence. Built on top of <cg-avatar>\n * (handles initials/image/status-dot/sizes) with bespoke overlap stack, hover-lift,\n * tooltip with status + last-seen, \"+N more\" overflow badge, and skeleton state.\n *\n * @example\n * ```html\n * <ai-presence\n *   size=\"md\"\n *   .users=${[\n *     { name: 'Alice', status: 'online', avatar: '/avatars/alice.jpg' },\n *     { name: 'Bob', status: 'away', lastSeen: '5m ago' },\n *     { name: 'Carol', status: 'busy' }\n *   ]}\n *   max-visible=\"4\"\n * ></ai-presence>\n * ```\n *\n * @prop {PresenceUser[]} users - User objects (name, status, optional avatar + lastSeen)\n * @prop {number} maxVisible - Max avatars before overflow badge (default 5)\n * @prop {boolean} loading - Render skeleton placeholders\n * @prop {\"sm\" | \"md\" | \"lg\"} size - Avatar size (default md)\n *\n * @fires {CustomEvent<{user: PresenceUser}>} ai-presence-user-click - Avatar clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-avatar/cg-avatar.js';\n\nexport type PresenceStatus = 'online' | 'away' | 'busy' | 'offline';\nexport type PresenceSize = 'sm' | 'md' | 'lg';\n\nexport interface PresenceUser {\n  name: string;\n  avatar?: string;\n  status: PresenceStatus;\n  /** Optional last-seen text shown in the tooltip (e.g. \"5m ago\") */\n  lastSeen?: string;\n}\n\nconst STATUS_LABEL: Record<PresenceStatus, string> = {\n  online: 'Active',\n  away: 'Away',\n  busy: 'Do not disturb',\n  offline: 'Offline',\n};\n\n@customElement('ai-presence')\nexport class AiPresence extends LitElement {\n  static override styles = [hostBase, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      align-items: center;\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n\n      /* Per-size variables (defaults to md) */\n      --_avatar-size: var(--cg-spacing-32);\n      --_overlap: var(--cg-spacing-8);\n    }\n    :host([hidden]) { display: none; }\n    :host([size=\"sm\"]) {\n      --_avatar-size: var(--cg-spacing-24);\n      --_overlap: var(--cg-spacing-6);\n    }\n    :host([size=\"lg\"]) {\n      --_avatar-size: var(--cg-spacing-40);\n      --_overlap: var(--cg-spacing-12);\n    }\n\n    .container {\n      display: flex;\n      align-items: center;\n    }\n    .avatar-stack {\n      display: flex;\n      align-items: center;\n    }\n\n    .avatar-wrapper {\n      position: relative;\n      margin-left: calc(-1 * var(--_overlap));\n      z-index: 1;\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    .avatar-wrapper:first-child { margin-left: 0; }\n    .avatar-wrapper:hover,\n    .avatar-wrapper:focus-within {\n      z-index: 10;\n      transform: translateY(calc(-1 * var(--cg-spacing-4)));\n    }\n\n    /* Outline ring around each avatar so they read as separate even when overlapping */\n    .avatar-btn {\n      display: inline-block;\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n      background: transparent;\n      padding: 0;\n      cursor: pointer;\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .avatar-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .avatar-btn:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 calc(2px + var(--cg-border-width-100)) var(--cg-color-focus-ring);\n    }\n\n    /* ── Overflow ── */\n    .overflow-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--_avatar-size);\n      height: var(--_avatar-size);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      margin-left: calc(-1 * var(--_overlap));\n      cursor: default;\n    }\n\n    /* ── Tooltip (bespoke — multi-line beats cg-tooltip's single-string content) ── */\n    .tooltip {\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-8));\n      left: 50%;\n      transform: translateX(-50%) translateY(var(--cg-spacing-2));\n      background: var(--cg-color-modal-container-background);\n      color: var(--cg-color-surface-base-text);\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      line-height: var(--cg-line-height-snug);\n      max-width: var(--cg-spacing-256);\n      pointer-events: none;\n      opacity: 0;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n      z-index: 20;\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      box-shadow: var(--cg-elevation-2);\n      white-space: nowrap;\n    }\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      transform: translateX(-50%) translateY(-50%) rotate(45deg);\n      background: var(--cg-color-modal-container-background);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n    }\n    .tooltip-name {\n      font-weight: var(--cg-font-weight-semibold);\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .tooltip-meta {\n      display: block;\n      margin-top: var(--cg-spacing-2);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .avatar-wrapper:hover .tooltip,\n    .avatar-wrapper:focus-within .tooltip {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0);\n    }\n\n    /* ── Skeleton ── */\n    @keyframes presence-shimmer {\n      0%   { background-position: -100% 0, 0 0; }\n      100% { background-position:  200% 0, 0 0; }\n    }\n    .skeleton {\n      display: inline-block;\n      width: var(--_avatar-size);\n      height: var(--_avatar-size);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-base-background);\n      margin-left: calc(-1 * var(--_overlap));\n      flex-shrink: 0;\n      background:\n        linear-gradient(\n          90deg,\n          transparent 0%,\n          var(--cg-overlay-white-strong) 50%,\n          transparent 100%\n        ),\n        var(--cg-color-action-tertiary-background-hover);\n      background-size: 50% 100%, 100% 100%;\n      background-repeat: no-repeat, no-repeat;\n      animation: presence-shimmer 1.5s var(--cg-transition-easing-linear) infinite;\n    }\n    .skeleton:first-child { margin-left: 0; }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .avatar-wrapper { transition: none; }\n      .avatar-btn { transition: none; }\n      .tooltip { transition: none; transform: translateX(-50%); }\n      .avatar-wrapper:hover .tooltip,\n      .avatar-wrapper:focus-within .tooltip { transform: translateX(-50%); }\n      .skeleton { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) users: PresenceUser[] = [];\n  @property({ type: Number, attribute: 'max-visible' }) maxVisible = 5;\n  @property({ type: Boolean, reflect: true }) loading = false;\n  @property({ type: String, reflect: true }) size: PresenceSize = 'md';\n\n  private _handleUserClick(user: PresenceUser) {\n    this.dispatchEvent(new CustomEvent('ai-presence-user-click', {\n      detail: { user },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _avatarSize(): 'sm' | 'md' | 'lg' {\n    return this.size; // matches cg-avatar's size scale\n  }\n\n  private _renderTooltip(user: PresenceUser) {\n    const statusText = STATUS_LABEL[user.status];\n    const meta = user.lastSeen ? `${statusText} • ${user.lastSeen}` : statusText;\n    return html`\n      <span class=\"tooltip\" role=\"tooltip\">\n        <span class=\"tooltip-name\">${user.name}</span>\n        <span class=\"tooltip-meta\">${meta}</span>\n      </span>\n    `;\n  }\n\n  override render() {\n    if (this.loading) {\n      const placeholders = Math.min(this.maxVisible, 4);\n      return html`\n        <div class=\"container\" aria-busy=\"true\" aria-label=\"Loading presence\">\n          <div class=\"avatar-stack\">\n            ${Array.from({ length: placeholders }).map(() => html`<span class=\"skeleton\"></span>`)}\n          </div>\n        </div>\n      `;\n    }\n\n    const visible = this.users.slice(0, this.maxVisible);\n    const overflow = this.users.length - this.maxVisible;\n    const avSize = this._avatarSize();\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Active users\" aria-live=\"polite\">\n        <div class=\"avatar-stack\">\n          ${visible.map(user => html`\n            <div class=\"avatar-wrapper\">\n              <button\n                class=\"avatar-btn\"\n                aria-label=\"${user.name}, ${STATUS_LABEL[user.status]}${user.lastSeen ? `, last seen ${user.lastSeen}` : ''}\"\n                @click=${() => this._handleUserClick(user)}\n              >\n                <cg-avatar\n                  size=${avSize}\n                  shape=\"circle\"\n                  name=${user.name}\n                  src=${user.avatar ?? ''}\n                  status=${user.status}\n                ></cg-avatar>\n              </button>\n              ${this._renderTooltip(user)}\n            </div>\n          `)}\n          ${overflow > 0\n            ? html`<span class=\"overflow-badge\" aria-label=\"${overflow} more users\">+${overflow}</span>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-presence': AiPresence;\n  }\n}\n"],"names":["STATUS_LABEL","AiPresence","LitElement","user","statusText","meta","html","placeholders","visible","overflow","avSize","nothing","hostBase","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-progress-steps/ai-progress-steps.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export interface ProgressPhase {
+    label: string;
+    status: 'pending' | 'active' | 'complete' | 'error';
+    duration?: string;
+}
+export declare class AiProgressSteps extends LitElement {
+    static styles: import('lit').CSSResult[];
+    phases: ProgressPhase[];
+    compact: boolean;
+    private _statusIcon;
+    private _handlePhaseClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-progress-steps': AiProgressSteps;
+    }
+}
+//# sourceMappingURL=ai-progress-steps.d.ts.map

package/dist/components/ai-progress-steps/ai-progress-steps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-progress-steps.d.ts","sourceRoot":"","sources":["../../../src/components/ai-progress-steps/ai-progress-steps.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA2HnB;IAEwB,MAAM,EAAE,aAAa,EAAE,CAAM;IACZ,OAAO,UAAS;IAE5D,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAQhB,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}