@cognivo/components 0.8.0

package/dist/components/ai-app-sidebar/ai-app-sidebar.js

@@ -0,0 +1,206 @@
+import { css as p, LitElement as v, nothing as d, html as i } from "lit";
+import { property as g, customElement as b } from "lit/decorators.js";
+import { h as f, r as u, f as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (a, r, e, s) => {
+  for (var t = s > 1 ? void 0 : s ? w(r, e) : r, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (t = (s ? l(r, e, t) : l(t)) || t);
+  return s && t && m(r, e, t), t;
+};
+let o = class extends v {
+  constructor() {
+    super(...arguments), this.sections = [], this.collapsed = !1, this.activeId = "";
+  }
+  _handleCollapse() {
+    this.collapsed = !this.collapsed, this.dispatchEvent(new CustomEvent("ai-app-sidebar-collapse", {
+      detail: { collapsed: this.collapsed },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleItemClick(a) {
+    this.dispatchEvent(new CustomEvent("ai-app-sidebar-item-click", {
+      detail: { id: a.id, label: a.label },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const a = this.collapsed ? "▶" : "◀";
+    return i`
+      <nav class="sidebar" role="navigation" aria-label="Sidebar navigation">
+        <button
+          class="collapse-btn"
+          @click=${this._handleCollapse}
+          aria-label=${this.collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >${a}</button>
+
+        <div class="sections">
+          ${this.sections.map((r) => i`
+            ${this.collapsed ? d : i`<div class="section-title">${r.title}</div>`}
+            ${r.items.map((e) => i`
+              <button
+                class="item"
+                role="menuitem"
+                tabindex="0"
+                aria-current=${e.id === this.activeId ? "true" : "false"}
+                aria-label=${e.label}
+                @click=${() => this._handleItemClick(e)}
+              >
+                ${e.icon ? i`<span class="item-icon">${e.icon}</span>` : d}
+                <span class="item-label">${e.label}</span>
+                ${e.badge ? i`<span class="item-badge">${e.badge}</span>` : d}
+              </button>
+            `)}
+          `)}
+        </div>
+      </nav>
+    `;
+  }
+};
+o.styles = [f, u, h, p`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([hidden]) { display: none; }
+
+    .sidebar {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background: var(--cg-color-surface-sidebar-background);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);
+      width: var(--ai-sidebar-width, 240px);
+      overflow: hidden;
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    :host([collapsed]) .sidebar {
+      width: var(--ai-sidebar-collapsed-width, 56px);
+    }
+
+    .collapse-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);
+      color: var(--cg-color-surface-sidebar-text);
+      padding: var(--cg-spacing-12);
+      cursor: pointer;
+      font-size: var(--cg-font-size-sm);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .collapse-btn:hover {
+      color: var(--cg-color-surface-base-text);
+    }
+    .collapse-btn:focus-visible {
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: calc(-1 * var(--cg-border-width-100));
+    }
+
+    .sections {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--cg-spacing-8) 0;
+    }
+
+    .section-title {
+      padding: var(--cg-spacing-8) var(--cg-spacing-16) var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      color: var(--cg-color-surface-sidebar-text);
+      white-space: nowrap;
+      overflow: hidden;
+    }
+    :host([collapsed]) .section-title {
+      opacity: 0;
+      height: 0;
+      padding: 0;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      width: 100%;
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      background: none;
+      border: none;
+      color: var(--cg-color-surface-sidebar-text);
+      font-size: var(--cg-font-size-sm);
+      font-family: inherit;
+      cursor: pointer;
+      white-space: nowrap;
+      overflow: hidden;
+      text-align: left;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([collapsed]) .item {
+      justify-content: center;
+      padding: var(--cg-spacing-8) 0;
+    }
+    .item:hover {
+      background: var(--cg-color-surface-sidebar-hover-background);
+      color: var(--cg-color-surface-base-text);
+    }
+    .item:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .item:focus-visible {
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: calc(-1 * var(--cg-border-width-100));
+    }
+    .item[aria-current="true"] {
+      background: var(--cg-color-surface-sidebar-active-background);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .item-icon {
+      flex-shrink: 0;
+      width: var(--cg-spacing-16);
+      text-align: center;
+      font-size: var(--cg-font-size-sm);
+      color: inherit;
+    }
+
+    .item-label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    :host([collapsed]) .item-label {
+      display: none;
+    }
+
+    .item-badge {
+      flex-shrink: 0;
+      padding: var(--cg-spacing-1) var(--cg-spacing-6);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-overlay-accent-strong);
+      color: var(--cg-color-surface-base-text);
+    }
+    :host([collapsed]) .item-badge {
+      display: none;
+    }
+  `];
+c([
+  g({ type: Array })
+], o.prototype, "sections", 2);
+c([
+  g({ type: Boolean, reflect: !0 })
+], o.prototype, "collapsed", 2);
+c([
+  g({ type: String, attribute: "active-id" })
+], o.prototype, "activeId", 2);
+o = c([
+  b("ai-app-sidebar")
+], o);
+export {
+  o as AiAppSidebar
+};
+//# sourceMappingURL=ai-app-sidebar.js.map

package/dist/components/ai-app-sidebar/ai-app-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-app-sidebar.js","sources":["../../../src/components/ai-app-sidebar/ai-app-sidebar.ts"],"sourcesContent":["/**\n * @element ai-app-sidebar\n * Data-driven application sidebar with grouped sections, item icons, badges,\n * and a collapse-to-icon-only mode. Renamed from `<ai-sidebar>` to clarify that\n * it is the *AI app shell* sidebar (data-driven via `sections` prop), distinct\n * from the slot-based foundation `<cg-sidebar>`.\n *\n * @example\n * ```html\n * <ai-app-sidebar\n *   active-id=\"chat\"\n *   .sections=${[{\n *     title: 'Tools',\n *     items: [\n *       { id: 'chat', label: 'Chat', icon: '[chat icon]', badge: '3' },\n *       { id: 'search', label: 'Search', icon: '[search icon]' }\n *     ]\n *   }]}\n * ></ai-app-sidebar>\n * ```\n *\n * @prop {SidebarSection[]} sections - Array of section groups with title and items\n * @prop {boolean} collapsed - Whether sidebar is in icon-only mode\n * @prop {string} activeId - ID of the currently active item\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-app-sidebar-item-click - When an item is clicked\n * @fires {CustomEvent<{collapsed: boolean}>} ai-app-sidebar-collapse - When collapse state toggles\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface SidebarItem {\n  id: string;\n  label: string;\n  icon?: string;\n  badge?: string;\n}\n\nexport interface SidebarSection {\n  title: string;\n  items: SidebarItem[];\n}\n\n@customElement('ai-app-sidebar')\nexport class AiAppSidebar extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    .sidebar {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--cg-color-surface-sidebar-background);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);\n      width: var(--ai-sidebar-width, 240px);\n      overflow: hidden;\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    :host([collapsed]) .sidebar {\n      width: var(--ai-sidebar-collapsed-width, 56px);\n    }\n\n    .collapse-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: none;\n      border: none;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-sidebar-border);\n      color: var(--cg-color-surface-sidebar-text);\n      padding: var(--cg-spacing-12);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .collapse-btn:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n    .collapse-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n\n    .sections {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-8) 0;\n    }\n\n    .section-title {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      color: var(--cg-color-surface-sidebar-text);\n      white-space: nowrap;\n      overflow: hidden;\n    }\n    :host([collapsed]) .section-title {\n      opacity: 0;\n      height: 0;\n      padding: 0;\n    }\n\n    .item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      width: 100%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-sidebar-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      cursor: pointer;\n      white-space: nowrap;\n      overflow: hidden;\n      text-align: left;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([collapsed]) .item {\n      justify-content: center;\n      padding: var(--cg-spacing-8) 0;\n    }\n    .item:hover {\n      background: var(--cg-color-surface-sidebar-hover-background);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .item:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-border-width-100));\n    }\n    .item[aria-current=\"true\"] {\n      background: var(--cg-color-surface-sidebar-active-background);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .item-icon {\n      flex-shrink: 0;\n      width: var(--cg-spacing-16);\n      text-align: center;\n      font-size: var(--cg-font-size-sm);\n      color: inherit;\n    }\n\n    .item-label {\n      flex: 1;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    :host([collapsed]) .item-label {\n      display: none;\n    }\n\n    .item-badge {\n      flex-shrink: 0;\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-overlay-accent-strong);\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([collapsed]) .item-badge {\n      display: none;\n    }\n  `];\n\n  @property({ type: Array }) sections: SidebarSection[] = [];\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: 'active-id' }) activeId = '';\n\n  private _handleCollapse(): void {\n    this.collapsed = !this.collapsed;\n    this.dispatchEvent(new CustomEvent('ai-app-sidebar-collapse', {\n      detail: { collapsed: this.collapsed },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleItemClick(item: SidebarItem): void {\n    this.dispatchEvent(new CustomEvent('ai-app-sidebar-item-click', {\n      detail: { id: item.id, label: item.label },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    const chevron = this.collapsed ? '\\u25B6' : '\\u25C0';\n    return html`\n      <nav class=\"sidebar\" role=\"navigation\" aria-label=\"Sidebar navigation\">\n        <button\n          class=\"collapse-btn\"\n          @click=${this._handleCollapse}\n          aria-label=${this.collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n        >${chevron}</button>\n\n        <div class=\"sections\">\n          ${this.sections.map(section => html`\n            ${!this.collapsed ? html`<div class=\"section-title\">${section.title}</div>` : nothing}\n            ${section.items.map(item => html`\n              <button\n                class=\"item\"\n                role=\"menuitem\"\n                tabindex=\"0\"\n                aria-current=${item.id === this.activeId ? 'true' : 'false'}\n                aria-label=${item.label}\n                @click=${() => this._handleItemClick(item)}\n              >\n                ${item.icon ? html`<span class=\"item-icon\">${item.icon}</span>` : nothing}\n                <span class=\"item-label\">${item.label}</span>\n                ${item.badge ? html`<span class=\"item-badge\">${item.badge}</span>` : nothing}\n              </button>\n            `)}\n          `)}\n        </div>\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-app-sidebar': AiAppSidebar;\n  }\n}\n"],"names":["AiAppSidebar","LitElement","item","chevron","html","section","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-assistant-widget/ai-assistant-widget.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export interface AssistantMessage {
+    role: 'user' | 'ai';
+    content: string;
+}
+export declare class AiAssistantWidget extends LitElement {
+    static styles: import('lit').CSSResult[];
+    expanded: boolean;
+    position: 'bottom-right' | 'bottom-left';
+    welcomeMessage: string;
+    title: string;
+    messages: AssistantMessage[];
+    private _inputValue;
+    private _messagesEl;
+    private _inputEl;
+    private _toggle;
+    private _close;
+    private _send;
+    private _onKeydown;
+    private _scrollToBottom;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-assistant-widget': AiAssistantWidget;
+    }
+}
+//# sourceMappingURL=ai-assistant-widget.d.ts.map

package/dist/components/ai-assistant-widget/ai-assistant-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-assistant-widget.d.ts","sourceRoot":"","sources":["../../../src/components/ai-assistant-widget/ai-assistant-widget.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAkNnB;IAEyC,QAAQ,UAAS;IAClB,QAAQ,EAAE,cAAc,GAAG,aAAa,CAAkB;IACzE,cAAc,SAAyB;IAC9B,KAAK,SAAe;IACzB,QAAQ,EAAE,gBAAgB,EAAE,CAAM;IAEzD,OAAO,CAAC,WAAW,CAAM;IACd,OAAO,CAAC,WAAW,CAAe;IAC/B,OAAO,CAAC,QAAQ,CAAoB;IAE3D,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,eAAe;IAMd,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/ai-assistant-widget/ai-assistant-widget.js

@@ -0,0 +1,335 @@
+import { css as u, LitElement as v, nothing as g, html as n } from "lit";
+import { property as o, state as b, query as p, customElement as f } from "lit/decorators.js";
+import { h, r as m, f as x, s as y } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, i, c, s) => {
+  for (var r = s > 1 ? void 0 : s ? _(i, c) : i, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (r = (s ? d(i, c, r) : d(r)) || r);
+  return s && r && w(i, c, r), r;
+};
+let t = class extends v {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.position = "bottom-right", this.welcomeMessage = "How can I help you?", this.title = "Assistant", this.messages = [], this._inputValue = "";
+  }
+  _toggle() {
+    this.expanded = !this.expanded;
+    const e = this.expanded ? "ai-assistant-open" : "ai-assistant-close";
+    this.dispatchEvent(new CustomEvent(e, { bubbles: !0, composed: !0 })), this.expanded && this.updateComplete.then(() => {
+      this._inputEl?.focus(), this._scrollToBottom();
+    });
+  }
+  _close() {
+    this.expanded = !1, this.dispatchEvent(new CustomEvent("ai-assistant-close", { bubbles: !0, composed: !0 }));
+  }
+  _send() {
+    const e = this._inputValue.trim();
+    e && (this.dispatchEvent(new CustomEvent("ai-assistant-send", {
+      detail: { message: e },
+      bubbles: !0,
+      composed: !0
+    })), this._inputValue = "", this.updateComplete.then(() => this._scrollToBottom()));
+  }
+  _onKeydown(e) {
+    e.key === "Enter" && !e.shiftKey && (e.preventDefault(), this._send()), e.key === "Escape" && this._close();
+  }
+  _scrollToBottom() {
+    this._messagesEl && (this._messagesEl.scrollTop = this._messagesEl.scrollHeight);
+  }
+  render() {
+    return n`
+      ${this.expanded ? n`
+        <div class="panel" role="dialog" aria-modal="true" aria-label="${this.title}" @keydown=${(e) => {
+      e.key === "Escape" && this._close();
+    }}>
+          <div class="panel-header">
+            <span class="panel-title">${this.title}</span>
+            <button class="close-btn" @click=${this._close} aria-label="Close assistant">
+              <cg-icon name="x" size="sm"></cg-icon>
+            </button>
+          </div>
+
+          <div class="messages" role="log" aria-live="polite">
+            ${this.messages.length === 0 && this.welcomeMessage ? n`
+              <div class="welcome">${this.welcomeMessage}</div>
+            ` : g}
+            ${this.messages.map((e) => n`
+              <div class="msg ${e.role}" aria-label="${e.role === "user" ? "You" : "Assistant"}">${e.content}</div>
+            `)}
+          </div>
+
+          <div class="input-area">
+            <input
+              class="input-field"
+              type="text"
+              placeholder="Type a message..."
+              .value=${this._inputValue}
+              @input=${(e) => {
+      this._inputValue = e.target.value;
+    }}
+              @keydown=${this._onKeydown}
+              aria-label="Message input"
+            />
+            <button
+              class="send-btn"
+              @click=${this._send}
+              ?disabled=${!this._inputValue.trim()}
+              aria-label="Send message"
+            >
+              <cg-icon name="arrow-up" size="sm"></cg-icon>
+            </button>
+          </div>
+        </div>
+      ` : g}
+
+      <button
+        class="fab ${this.expanded ? "open" : ""}"
+        @click=${this._toggle}
+        aria-label="${this.expanded ? "Close assistant" : "Open assistant"}"
+        aria-expanded=${this.expanded}
+      >
+        <cg-icon name="${this.expanded ? "x" : "message-circle"}" size="md"></cg-icon>
+      </button>
+    `;
+  }
+};
+t.styles = [h, m, x, y, u`
+    :host {
+      display: block;
+      position: fixed;
+      z-index: var(--cg-z-index-top);
+    }
+    :host([hidden]) { display: none; }
+    :host([position="bottom-right"]), :host(:not([position])) {
+      bottom: var(--cg-spacing-24);
+      right: var(--cg-spacing-24);
+    }
+    :host([position="bottom-left"]) {
+      bottom: var(--cg-spacing-24);
+      left: var(--cg-spacing-24);
+    }
+
+    /* ── FAB ── */
+    .fab {
+      width: var(--cg-spacing-56);
+      height: var(--cg-spacing-56);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border: none;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      box-shadow: var(--cg-elevation-3);
+    }
+    .fab:hover {
+      filter: brightness(0.9);
+      transform: scale(1.05);
+    }
+    .fab:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+    .fab:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+
+    /* ── Panel ── */
+    .panel {
+      position: absolute;
+      bottom: var(--cg-spacing-64);
+      width: 360px;
+      height: var(--cg-spacing-480);
+      max-width: calc(100vw - var(--cg-spacing-32));
+      max-height: calc(100vh - var(--cg-spacing-128));
+      background: var(--cg-color-modal-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      border-radius: var(--cg-border-radius-200);
+      box-shadow: var(--cg-elevation-4);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      animation: scaleIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+
+    :host([position="bottom-right"]) .panel,
+    :host(:not([position])) .panel {
+      right: 0;
+    }
+    :host([position="bottom-left"]) .panel {
+      left: 0;
+    }
+
+    /* ── Header ── */
+    .panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      flex-shrink: 0;
+    }
+
+    .panel-title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .close-btn {
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      background: transparent;
+      border: none;
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      border-radius: var(--cg-border-radius-50);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .close-btn:hover {
+      color: var(--cg-color-surface-base-text);
+      background: var(--cg-color-action-tertiary-background-hover);
+    }
+    .close-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+
+    /* ── Messages ── */
+    .messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: var(--cg-spacing-16);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+    }
+
+    .welcome {
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      padding: var(--cg-spacing-20) 0;
+    }
+
+    .msg {
+      max-width: 85%;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-150);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-normal);
+      word-break: break-word;
+    }
+
+    .msg.user {
+      align-self: flex-end;
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-bottom-right-radius: var(--cg-border-radius-50);
+    }
+
+    .msg.ai {
+      align-self: flex-start;
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+      border-bottom-left-radius: var(--cg-border-radius-50);
+    }
+
+    /* ── Input ── */
+    .input-area {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);
+      flex-shrink: 0;
+    }
+
+    .input-field {
+      flex: 1;
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-family: inherit;
+      outline: none;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .input-field::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .input-field:focus {
+      border-color: var(--cg-color-focus-ring);
+    }
+
+    .send-btn {
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      border-radius: var(--cg-border-radius-150);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border: none;
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition:
+        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .send-btn:hover { filter: brightness(0.9); }
+    .send-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .send-btn:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    .send-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .panel { animation: none !important; }
+      .fab { transition: none !important; }
+    }
+  `];
+a([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "expanded", 2);
+a([
+  o({ type: String, reflect: !0 })
+], t.prototype, "position", 2);
+a([
+  o({ type: String })
+], t.prototype, "welcomeMessage", 2);
+a([
+  o({ type: String })
+], t.prototype, "title", 2);
+a([
+  o({ attribute: !1 })
+], t.prototype, "messages", 2);
+a([
+  b()
+], t.prototype, "_inputValue", 2);
+a([
+  p(".messages")
+], t.prototype, "_messagesEl", 2);
+a([
+  p(".input-field")
+], t.prototype, "_inputEl", 2);
+t = a([
+  f("ai-assistant-widget")
+], t);
+export {
+  t as AiAssistantWidget
+};
+//# sourceMappingURL=ai-assistant-widget.js.map

package/dist/components/ai-assistant-widget/ai-assistant-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-assistant-widget.js","sources":["../../../src/components/ai-assistant-widget/ai-assistant-widget.ts"],"sourcesContent":["/**\n * @element ai-assistant-widget\n * Floating embedded chat widget with FAB trigger, expandable chat panel, and message list.\n *\n * @example\n * ```html\n * <ai-assistant-widget\n *   title=\"AI Help\"\n *   welcomeMessage=\"How can I help you today?\"\n *   .messages=${[{role:'ai',content:'Hello!'}]}\n * ></ai-assistant-widget>\n * ```\n *\n * @fires {CustomEvent} ai-assistant-open - Widget expanded\n * @fires {CustomEvent} ai-assistant-close - Widget collapsed\n * @fires {CustomEvent<{message: string}>} ai-assistant-send - Message sent\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - FAB and send button accent\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, scaleInKeyframes } from '../../styles/index.js';\n\nexport interface AssistantMessage {\n  role: 'user' | 'ai';\n  content: string;\n}\n\n@customElement('ai-assistant-widget')\nexport class AiAssistantWidget extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, scaleInKeyframes, css`\n    :host {\n      display: block;\n      position: fixed;\n      z-index: var(--cg-z-index-top);\n    }\n    :host([hidden]) { display: none; }\n    :host([position=\"bottom-right\"]), :host(:not([position])) {\n      bottom: var(--cg-spacing-24);\n      right: var(--cg-spacing-24);\n    }\n    :host([position=\"bottom-left\"]) {\n      bottom: var(--cg-spacing-24);\n      left: var(--cg-spacing-24);\n    }\n\n    /* ── FAB ── */\n    .fab {\n      width: var(--cg-spacing-56);\n      height: var(--cg-spacing-56);\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      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      box-shadow: var(--cg-elevation-3);\n    }\n    .fab:hover {\n      filter: brightness(0.9);\n      transform: scale(1.05);\n    }\n    .fab:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n    .fab:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    /* ── Panel ── */\n    .panel {\n      position: absolute;\n      bottom: var(--cg-spacing-64);\n      width: 360px;\n      height: var(--cg-spacing-480);\n      max-width: calc(100vw - var(--cg-spacing-32));\n      max-height: calc(100vh - var(--cg-spacing-128));\n      background: var(--cg-color-modal-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      border-radius: var(--cg-border-radius-200);\n      box-shadow: var(--cg-elevation-4);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      animation: scaleIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    :host([position=\"bottom-right\"]) .panel,\n    :host(:not([position])) .panel {\n      right: 0;\n    }\n    :host([position=\"bottom-left\"]) .panel {\n      left: 0;\n    }\n\n    /* ── Header ── */\n    .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n\n    .panel-title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .close-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .close-btn:hover {\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-color-action-tertiary-background-hover);\n    }\n    .close-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    /* ── Messages ── */\n    .messages {\n      flex: 1;\n      overflow-y: auto;\n      padding: var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n\n    .welcome {\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      padding: var(--cg-spacing-20) 0;\n    }\n\n    .msg {\n      max-width: 85%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-150);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-normal);\n      word-break: break-word;\n    }\n\n    .msg.user {\n      align-self: flex-end;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-bottom-right-radius: var(--cg-border-radius-50);\n    }\n\n    .msg.ai {\n      align-self: flex-start;\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n      border-bottom-left-radius: var(--cg-border-radius-50);\n    }\n\n    /* ── Input ── */\n    .input-area {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-modal-container-border);\n      flex-shrink: 0;\n    }\n\n    .input-field {\n      flex: 1;\n      background: var(--cg-color-input-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      outline: none;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-field::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .input-field:focus {\n      border-color: var(--cg-color-focus-ring);\n    }\n\n    .send-btn {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-150);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border: none;\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      transition:\n        filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .send-btn:hover { filter: brightness(0.9); }\n    .send-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .send-btn:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n    .send-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .panel { animation: none !important; }\n      .fab { transition: none !important; }\n    }\n  `];\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n  @property({ type: String, reflect: true }) position: 'bottom-right' | 'bottom-left' = 'bottom-right';\n  @property({ type: String }) welcomeMessage = 'How can I help you?';\n  @property({ type: String }) override title = 'Assistant';\n  @property({ attribute: false }) messages: AssistantMessage[] = [];\n\n  @state() private _inputValue = '';\n  @query('.messages') private _messagesEl!: HTMLElement;\n  @query('.input-field') private _inputEl!: HTMLInputElement;\n\n  private _toggle() {\n    this.expanded = !this.expanded;\n    const eventName = this.expanded ? 'ai-assistant-open' : 'ai-assistant-close';\n    this.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));\n    if (this.expanded) {\n      this.updateComplete.then(() => {\n        this._inputEl?.focus();\n        this._scrollToBottom();\n      });\n    }\n  }\n\n  private _close() {\n    this.expanded = false;\n    this.dispatchEvent(new CustomEvent('ai-assistant-close', { bubbles: true, composed: true }));\n  }\n\n  private _send() {\n    const msg = this._inputValue.trim();\n    if (!msg) return;\n    this.dispatchEvent(new CustomEvent('ai-assistant-send', {\n      detail: { message: msg },\n      bubbles: true, composed: true,\n    }));\n    this._inputValue = '';\n    this.updateComplete.then(() => this._scrollToBottom());\n  }\n\n  private _onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.shiftKey) {\n      e.preventDefault();\n      this._send();\n    }\n    if (e.key === 'Escape') {\n      this._close();\n    }\n  }\n\n  private _scrollToBottom() {\n    if (this._messagesEl) {\n      this._messagesEl.scrollTop = this._messagesEl.scrollHeight;\n    }\n  }\n\n  override render() {\n    return html`\n      ${this.expanded ? html`\n        <div class=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${this.title}\" @keydown=${(e: KeyboardEvent) => { if (e.key === 'Escape') this._close(); }}>\n          <div class=\"panel-header\">\n            <span class=\"panel-title\">${this.title}</span>\n            <button class=\"close-btn\" @click=${this._close} aria-label=\"Close assistant\">\n              <cg-icon name=\"x\" size=\"sm\"></cg-icon>\n            </button>\n          </div>\n\n          <div class=\"messages\" role=\"log\" aria-live=\"polite\">\n            ${this.messages.length === 0 && this.welcomeMessage ? html`\n              <div class=\"welcome\">${this.welcomeMessage}</div>\n            ` : nothing}\n            ${this.messages.map(m => html`\n              <div class=\"msg ${m.role}\" aria-label=\"${m.role === 'user' ? 'You' : 'Assistant'}\">${m.content}</div>\n            `)}\n          </div>\n\n          <div class=\"input-area\">\n            <input\n              class=\"input-field\"\n              type=\"text\"\n              placeholder=\"Type a message...\"\n              .value=${this._inputValue}\n              @input=${(e: Event) => { this._inputValue = (e.target as HTMLInputElement).value; }}\n              @keydown=${this._onKeydown}\n              aria-label=\"Message input\"\n            />\n            <button\n              class=\"send-btn\"\n              @click=${this._send}\n              ?disabled=${!this._inputValue.trim()}\n              aria-label=\"Send message\"\n            >\n              <cg-icon name=\"arrow-up\" size=\"sm\"></cg-icon>\n            </button>\n          </div>\n        </div>\n      ` : nothing}\n\n      <button\n        class=\"fab ${this.expanded ? 'open' : ''}\"\n        @click=${this._toggle}\n        aria-label=\"${this.expanded ? 'Close assistant' : 'Open assistant'}\"\n        aria-expanded=${this.expanded}\n      >\n        <cg-icon name=\"${this.expanded ? 'x' : 'message-circle'}\" size=\"md\"></cg-icon>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-assistant-widget': AiAssistantWidget;\n  }\n}\n"],"names":["AiAssistantWidget","LitElement","eventName","msg","html","nothing","m","hostBlock","reducedMotion","fadeSlideInKeyframes","scaleInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

package/dist/components/ai-audio-player/ai-audio-player.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class AiAudioPlayer extends LitElement {
+    static styles: import('lit').CSSResult[];
+    src: string;
+    title: string;
+    duration: number;
+    private _playing;
+    private _currentTime;
+    private _loaded;
+    private _speed;
+    private _waveBars;
+    private _audio;
+    private _raf;
+    private _speeds;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _tick;
+    private _togglePlay;
+    private _seek;
+    private _seekKeydown;
+    private _cycleSpeed;
+    private _fmt;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-audio-player': AiAudioPlayer;
+    }
+}
+//# sourceMappingURL=ai-audio-player.d.ts.map

package/dist/components/ai-audio-player/ai-audio-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-audio-player.d.ts","sourceRoot":"","sources":["../../../src/components/ai-audio-player/ai-audio-player.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAmInB;IACyB,GAAG,SAAM;IACA,KAAK,SAAW;IACzB,QAAQ,SAAK;IAEhC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,SAAS,CAAgB;IAE1C,OAAO,CAAC,MAAM,CAAiC;IAC/C,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,OAAO,CAAe;IAErB,iBAAiB;IAiBjB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAO,CAAC,KAAK,CAKX;IAEF,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,KAAK;IAWb,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,IAAI;IAMH,MAAM;CA+ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}