@cognivo/components 0.8.0

package/dist/components/ai-notification-center/ai-notification-center.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+interface Notification {
+    id: string;
+    title: string;
+    message: string;
+    type: string;
+    timestamp: string | number;
+    read?: boolean;
+}
+export declare class AiNotificationCenter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    notifications: Notification[];
+    maxVisible: number;
+    private _justArrivedIds;
+    private _seenIds;
+    updated(changed: Map<string, unknown>): void;
+    private get _unreadCount();
+    private _toMs;
+    private _bucketFor;
+    private get _grouped();
+    private _formatTime;
+    private _handleClick;
+    private _handleDismiss;
+    private _handleReadAll;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-notification-center': AiNotificationCenter;
+    }
+}
+export {};
+//# sourceMappingURL=ai-notification-center.d.ts.map

package/dist/components/ai-notification-center/ai-notification-center.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-notification-center.d.ts","sourceRoot":"","sources":["../../../src/components/ai-notification-center/ai-notification-center.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AAEnC,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAID,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,4BAiLnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,aAAa,EAAE,YAAY,EAAE,CAAM;IACR,UAAU,SAAM;IAE7D,OAAO,CAAC,eAAe,CAAqB;IACrD,OAAO,CAAC,QAAQ,CAAqB;IAE5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAoB9C,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,UAAU;IAUlB,OAAO,KAAK,QAAQ,GAYnB;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,cAAc;IAMb,MAAM;CA8DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,oBAAoB,CAAC;KAChD;CACF"}

package/dist/components/ai-notification-center/ai-notification-center.js

@@ -0,0 +1,334 @@
+import { css as p, LitElement as f, nothing as l, html as n } from "lit";
+import { property as g, state as h, customElement as m } from "lit/decorators.js";
+import { h as v, r as b, f as w } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-card/cg-card.js";
+import "../cg-text/cg-text.js";
+import "../cg-button/cg-button.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? y(t, a) : t, s = e.length - 1, d; s >= 0; s--)
+    (d = e[s]) && (i = (r ? d(t, a, i) : d(i)) || i);
+  return r && i && x(t, a, i), i;
+};
+const u = 1440 * 60 * 1e3;
+let o = class extends f {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.notifications = [], this.maxVisible = 50, this._justArrivedIds = /* @__PURE__ */ new Set(), this._seenIds = /* @__PURE__ */ new Set();
+  }
+  updated(e) {
+    if (e.has("notifications")) {
+      const t = new Set(this.notifications.map((a) => a.id));
+      if (this._seenIds.size > 0) {
+        for (const a of t)
+          this._seenIds.has(a) || this._justArrivedIds.add(a);
+        this._justArrivedIds.size > 0 && window.setTimeout(() => {
+          this._justArrivedIds.clear(), this.requestUpdate();
+        }, 1300);
+      }
+      this._seenIds = t;
+    }
+  }
+  get _unreadCount() {
+    return this.notifications.filter((e) => !e.read).length;
+  }
+  _toMs(e) {
+    if (typeof e == "number") return e;
+    const t = Date.parse(e);
+    return Number.isNaN(t) ? 0 : t;
+  }
+  _bucketFor(e) {
+    if (!e) return "Earlier";
+    const t = Date.now(), a = /* @__PURE__ */ new Date();
+    return a.setHours(0, 0, 0, 0), e >= a.getTime() ? "Today" : e >= a.getTime() - u ? "Yesterday" : e >= t - 7 * u ? "This week" : "Earlier";
+  }
+  get _grouped() {
+    const e = ["Today", "Yesterday", "This week", "Earlier"], t = /* @__PURE__ */ new Map(), a = [...this.notifications].sort((r, i) => this._toMs(i.timestamp) - this._toMs(r.timestamp)).slice(0, this.maxVisible);
+    for (const r of a) {
+      const i = this._bucketFor(this._toMs(r.timestamp));
+      t.has(i) || t.set(i, []), t.get(i).push(r);
+    }
+    return e.filter((r) => t.has(r)).map((r) => [r, t.get(r)]);
+  }
+  _formatTime(e) {
+    const t = this._toMs(e);
+    if (!t) return String(e);
+    const a = Date.now() - t;
+    return a < 6e4 ? "Just now" : a < 36e5 ? `${Math.floor(a / 6e4)}m ago` : a < 864e5 ? `${Math.floor(a / 36e5)}h ago` : new Date(t).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  }
+  _handleClick(e) {
+    this.dispatchEvent(new CustomEvent("ai-notification-click", {
+      detail: { id: e.id, notification: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleDismiss(e, t) {
+    e.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-notification-dismiss", {
+      detail: { id: t.id },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleReadAll() {
+    this.dispatchEvent(new CustomEvent("ai-notification-read-all", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const e = this._grouped, t = this._unreadCount;
+    return n`
+      <cg-card variant="outlined" padding="md" rounded=${this.rounded} role="region" aria-label="Notification center">
+        <div class="sr-only" aria-live="polite" aria-atomic="true">
+          ${t > 0 ? `${t} unread notifications` : "No unread notifications"}
+        </div>
+
+        <div slot="header" class="header-row">
+          <div class="header-left">
+            <cg-text size="sm" weight="semibold">Notifications</cg-text>
+            ${t > 0 ? n`<span class="unread-badge" aria-label="${t} unread">${t}</span>` : l}
+          </div>
+          ${t > 0 ? n`
+            <cg-button variant="tertiary" size="sm" @click=${this._handleReadAll}>Mark all read</cg-button>
+          ` : l}
+        </div>
+
+        ${this.notifications.length === 0 ? n`
+          <slot name="empty">
+            <div class="empty">
+              <svg class="empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <polyline points="20 6 9 17 4 12"/>
+              </svg>
+              <cg-text size="sm" weight="semibold">You're all caught up</cg-text>
+              <cg-text size="xs" color="muted">New notifications will appear here.</cg-text>
+            </div>
+          </slot>
+        ` : l}
+
+        ${e.map(([a, r]) => n`
+          <cg-text class="group-label" size="xs" weight="bold" color="muted" role="heading" aria-level="3">${a}</cg-text>
+          <div role="list" aria-label="${a} notifications">
+            ${r.map((i) => n`
+              <button
+                class="notification ${i.read ? "" : "unread"}"
+                role="listitem"
+                aria-label="${i.title}${i.read ? "" : " (unread)"}"
+                ?data-just-arrived=${this._justArrivedIds.has(i.id)}
+                @click=${() => this._handleClick(i)}
+              >
+                <div class="notif-body">
+                  <cg-text data-role="title" size="sm" weight="medium">${i.title}</cg-text>
+                  <cg-text class="notif-message" size="xs" color="muted">${i.message}</cg-text>
+                  <cg-text size="xs" color="muted">${this._formatTime(i.timestamp)}</cg-text>
+                </div>
+                <button
+                  class="dismiss-btn"
+                  aria-label="Dismiss: ${i.title}"
+                  @click=${(s) => this._handleDismiss(s, i)}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+                </button>
+              </button>
+            `)}
+          </div>
+        `)}
+      </cg-card>
+    `;
+  }
+};
+o.styles = [v, b, w, p`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: block;
+    }
+    :host([hidden]) { display: none; }
+
+    cg-card { display: block; max-height: 480px; overflow-y: auto; }
+
+    /* sr-only 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;
+    }
+
+    /* ── Header ── */
+    .header-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+    }
+    .header-left {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+
+    .unread-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-spacing-16);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Date group label ── */
+    .group-label {
+      padding: var(--cg-spacing-12) 0 var(--cg-spacing-4);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .group-label:first-child { padding-top: 0; }
+
+    /* ── Notification row ── */
+    .notification {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12);
+      min-height: var(--cg-spacing-48);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      width: 100%;
+      text-align: left;
+      font-family: inherit;
+      color: inherit;
+      position: relative;
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .notification + .notification {
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: 0;
+    }
+    .notification:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+    .notification:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .notification:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* Left-accent unread indicator (replaces dot + bg) */
+    .notification.unread::before {
+      content: '';
+      position: absolute;
+      left: 0; top: var(--cg-spacing-12); bottom: var(--cg-spacing-12);
+      width: 2px;
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    /* Just-arrived pulse */
+    @keyframes arrivalPulse {
+      0%   { background: var(--cg-color-action-primary-background-default); opacity: 0.12; }
+      100% { background: transparent; opacity: 0; }
+    }
+    .notification[data-just-arrived]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      border-radius: inherit;
+      animation: arrivalPulse 1.2s var(--cg-transition-easing-ease-out) both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .notification[data-just-arrived]::after { animation: none; }
+    }
+
+    .notif-body {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+    }
+    .notification.unread .notif-body cg-text[data-role="title"] {
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .notif-message {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      white-space: normal;
+    }
+
+    /* ── Dismiss icon button ── */
+    .dismiss-btn {
+      flex-shrink: 0;
+      background: transparent;
+      border: none;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      padding: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-50);
+      line-height: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .dismiss-btn:hover {
+      color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+    .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .dismiss-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Empty state ── */
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32) var(--cg-spacing-16);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .empty-icon {
+      color: var(--cg-color-status-success-text-default);
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+    }
+  `];
+c([
+  g({ reflect: !0 })
+], o.prototype, "rounded", 2);
+c([
+  g({ type: Array })
+], o.prototype, "notifications", 2);
+c([
+  g({ type: Number, attribute: "max-visible" })
+], o.prototype, "maxVisible", 2);
+c([
+  h()
+], o.prototype, "_justArrivedIds", 2);
+o = c([
+  m("ai-notification-center")
+], o);
+export {
+  o as AiNotificationCenter
+};
+//# sourceMappingURL=ai-notification-center.js.map

package/dist/components/ai-notification-center/ai-notification-center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-notification-center.js","sources":["../../../src/components/ai-notification-center/ai-notification-center.ts"],"sourcesContent":["/**\n * @element ai-notification-center\n * Notification inbox built from design-system primitives (cg-card, cg-text, cg-button).\n * Date-bucketed grouping (Today / Yesterday / This week / Earlier), left-accent unread style,\n * pulse on new arrivals, positive empty state, sr-live unread announcer.\n *\n * @example\n * ```html\n * <ai-notification-center .notifications=${[\n *   { id: '1', title: 'Model updated', message: 'GPT-4 Turbo is now available',\n *     type: 'system', timestamp: Date.now() - 2 * 60 * 1000 }\n * ]}></ai-notification-center>\n * ```\n *\n * @prop {Notification[]} notifications - Notification objects (timestamp = ms epoch or ISO/string)\n * @prop {number} maxVisible - Max notifications to render (default 50)\n *\n * @slot empty - Override the default \"You're all caught up\" empty state\n *\n * @fires {CustomEvent<{id: string, notification: object}>} ai-notification-click\n * @fires {CustomEvent<{id: string}>} ai-notification-dismiss\n * @fires ai-notification-read-all\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, 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';\n\ninterface Notification {\n  id: string;\n  title: string;\n  message: string;\n  type: string;\n  timestamp: string | number;\n  read?: boolean;\n}\n\nconst DAY_MS = 24 * 60 * 60 * 1000;\n\n@customElement('ai-notification-center')\nexport class AiNotificationCenter 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; max-height: 480px; overflow-y: auto; }\n\n    /* sr-only live region */\n    .sr-only {\n      position: absolute;\n      width: 1px; height: 1px;\n      padding: 0; margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* ── Header ── */\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    .header-left {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    .unread-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-16);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Date group label ── */\n    .group-label {\n      padding: var(--cg-spacing-12) 0 var(--cg-spacing-4);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .group-label:first-child { padding-top: 0; }\n\n    /* ── Notification row ── */\n    .notification {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12);\n      min-height: var(--cg-spacing-48);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      border: none;\n      background: transparent;\n      width: 100%;\n      text-align: left;\n      font-family: inherit;\n      color: inherit;\n      position: relative;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .notification + .notification {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: 0;\n    }\n    .notification:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .notification:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .notification:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Left-accent unread indicator (replaces dot + bg) */\n    .notification.unread::before {\n      content: '';\n      position: absolute;\n      left: 0; top: var(--cg-spacing-12); bottom: var(--cg-spacing-12);\n      width: 2px;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* Just-arrived pulse */\n    @keyframes arrivalPulse {\n      0%   { background: var(--cg-color-action-primary-background-default); opacity: 0.12; }\n      100% { background: transparent; opacity: 0; }\n    }\n    .notification[data-just-arrived]::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-radius: inherit;\n      animation: arrivalPulse 1.2s var(--cg-transition-easing-ease-out) both;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .notification[data-just-arrived]::after { animation: none; }\n    }\n\n    .notif-body {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n    .notification.unread .notif-body cg-text[data-role=\"title\"] {\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .notif-message {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    }\n\n    /* ── Dismiss icon button ── */\n    .dismiss-btn {\n      flex-shrink: 0;\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dismiss-btn:hover {\n      color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .dismiss-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Empty state ── */\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32) var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .empty-icon {\n      color: var(--cg-color-status-success-text-default);\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) notifications: Notification[] = [];\n  @property({ type: Number, attribute: 'max-visible' }) maxVisible = 50;\n\n  @state() private _justArrivedIds = new Set<string>();\n  private _seenIds = new Set<string>();\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('notifications')) {\n      const currentIds = new Set(this.notifications.map(n => n.id));\n      // Only mark as \"just arrived\" if we've already initialized (not first render)\n      if (this._seenIds.size > 0) {\n        for (const id of currentIds) {\n          if (!this._seenIds.has(id)) this._justArrivedIds.add(id);\n        }\n        if (this._justArrivedIds.size > 0) {\n          // Clear pulse after animation\n          window.setTimeout(() => {\n            this._justArrivedIds.clear();\n            this.requestUpdate();\n          }, 1300);\n        }\n      }\n      this._seenIds = currentIds;\n    }\n  }\n\n  private get _unreadCount(): number {\n    return this.notifications.filter(n => !n.read).length;\n  }\n\n  private _toMs(ts: string | number): number {\n    if (typeof ts === 'number') return ts;\n    const n = Date.parse(ts);\n    return Number.isNaN(n) ? 0 : n;\n  }\n\n  private _bucketFor(ts: number): string {\n    if (!ts) return 'Earlier';\n    const now = Date.now();\n    const startOfToday = new Date(); startOfToday.setHours(0, 0, 0, 0);\n    if (ts >= startOfToday.getTime()) return 'Today';\n    if (ts >= startOfToday.getTime() - DAY_MS) return 'Yesterday';\n    if (ts >= now - 7 * DAY_MS) return 'This week';\n    return 'Earlier';\n  }\n\n  private get _grouped(): Array<[string, Notification[]]> {\n    const order = ['Today', 'Yesterday', 'This week', 'Earlier'];\n    const map = new Map<string, Notification[]>();\n    const visible = [...this.notifications]\n      .sort((a, b) => this._toMs(b.timestamp) - this._toMs(a.timestamp))\n      .slice(0, this.maxVisible);\n    for (const n of visible) {\n      const bucket = this._bucketFor(this._toMs(n.timestamp));\n      if (!map.has(bucket)) map.set(bucket, []);\n      map.get(bucket)!.push(n);\n    }\n    return order.filter(k => map.has(k)).map(k => [k, map.get(k)!]);\n  }\n\n  private _formatTime(ts: string | number): string {\n    const ms = this._toMs(ts);\n    if (!ms) return String(ts);\n    const diff = Date.now() - ms;\n    if (diff < 60_000) return 'Just now';\n    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;\n    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;\n    return new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n  }\n\n  private _handleClick(notification: Notification) {\n    this.dispatchEvent(new CustomEvent('ai-notification-click', {\n      detail: { id: notification.id, notification },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleDismiss(e: Event, notification: Notification) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-notification-dismiss', {\n      detail: { id: notification.id },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleReadAll() {\n    this.dispatchEvent(new CustomEvent('ai-notification-read-all', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const groups = this._grouped;\n    const unread = this._unreadCount;\n\n    return html`\n      <cg-card variant=\"outlined\" padding=\"md\" rounded=${this.rounded} role=\"region\" aria-label=\"Notification center\">\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${unread > 0 ? `${unread} unread notifications` : 'No unread notifications'}\n        </div>\n\n        <div slot=\"header\" class=\"header-row\">\n          <div class=\"header-left\">\n            <cg-text size=\"sm\" weight=\"semibold\">Notifications</cg-text>\n            ${unread > 0 ? html`<span class=\"unread-badge\" aria-label=\"${unread} unread\">${unread}</span>` : nothing}\n          </div>\n          ${unread > 0 ? html`\n            <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._handleReadAll}>Mark all read</cg-button>\n          ` : nothing}\n        </div>\n\n        ${this.notifications.length === 0 ? html`\n          <slot name=\"empty\">\n            <div class=\"empty\">\n              <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              <cg-text size=\"sm\" weight=\"semibold\">You're all caught up</cg-text>\n              <cg-text size=\"xs\" color=\"muted\">New notifications will appear here.</cg-text>\n            </div>\n          </slot>\n        ` : nothing}\n\n        ${groups.map(([bucket, items]) => html`\n          <cg-text class=\"group-label\" size=\"xs\" weight=\"bold\" color=\"muted\" role=\"heading\" aria-level=\"3\">${bucket}</cg-text>\n          <div role=\"list\" aria-label=\"${bucket} notifications\">\n            ${items.map(n => html`\n              <button\n                class=\"notification ${n.read ? '' : 'unread'}\"\n                role=\"listitem\"\n                aria-label=\"${n.title}${n.read ? '' : ' (unread)'}\"\n                ?data-just-arrived=${this._justArrivedIds.has(n.id)}\n                @click=${() => this._handleClick(n)}\n              >\n                <div class=\"notif-body\">\n                  <cg-text data-role=\"title\" size=\"sm\" weight=\"medium\">${n.title}</cg-text>\n                  <cg-text class=\"notif-message\" size=\"xs\" color=\"muted\">${n.message}</cg-text>\n                  <cg-text size=\"xs\" color=\"muted\">${this._formatTime(n.timestamp)}</cg-text>\n                </div>\n                <button\n                  class=\"dismiss-btn\"\n                  aria-label=\"Dismiss: ${n.title}\"\n                  @click=${(e: Event) => this._handleDismiss(e, n)}\n                >\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\n                </button>\n              </button>\n            `)}\n          </div>\n        `)}\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-notification-center': AiNotificationCenter;\n  }\n}\n"],"names":["DAY_MS","AiNotificationCenter","LitElement","changed","currentIds","n","id","ts","now","startOfToday","order","map","visible","a","b","bucket","k","ms","diff","notification","groups","unread","html","nothing","items","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,35 @@
+import { LitElement, nothing } from 'lit';
+export interface OnboardingStep {
+    title: string;
+    description: string;
+    target?: string;
+}
+type ProgressVariant = 'numbered' | 'dots' | 'bar' | 'stepper';
+export declare class AiOnboarding extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    steps: OnboardingStep[];
+    active: number;
+    dismissible: boolean;
+    showSkip: boolean;
+    progress: ProgressVariant | 'auto';
+    private _direction;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onKeydown;
+    private _emit;
+    private _goTo;
+    private _next;
+    private _prev;
+    private _dismiss;
+    private _resolvedProgress;
+    private _renderProgress;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-onboarding': AiOnboarding;
+    }
+}
+export {};
+//# sourceMappingURL=ai-onboarding.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-onboarding.d.ts","sourceRoot":"","sources":["../../../src/components/ai-onboarding/ai-onboarding.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,eAAe,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,SAAS,CAAC;AAE/D,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA8MnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,KAAK,EAAE,cAAc,EAAE,CAAM;IAC5B,MAAM,SAAK;IACV,WAAW,UAAQ;IACK,QAAQ,UAAQ;IACxC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAAU;IAEhE,OAAO,CAAC,UAAU,CAAiC;IAEnD,iBAAiB;IAMjB,oBAAoB;IAK7B,OAAO,CAAC,UAAU,CAIhB;IAEF,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,eAAe;IAmEd,MAAM;CAkDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}