@cognivo/components 0.8.0

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

@@ -0,0 +1,397 @@
+import { css as u, LitElement as v, nothing as c, html as s } from "lit";
+import { property as l, state as h, customElement as p } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (e, n, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? m(n, t) : n, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (i = (r ? g(n, t, i) : g(i)) || i);
+  return r && i && _(n, t, i), i;
+};
+let a = class extends v {
+  constructor() {
+    super(...arguments), this.size = "md", this.rounded = "default", this.placeholder = "Search...", this.value = "", this.suggestions = [], this.filters = [], this.recentSearches = [], this.results = [], this._query = "", this._open = !1, this._highlightIndex = -1, this._activeFilters = /* @__PURE__ */ new Set();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._blurTimer !== void 0 && (clearTimeout(this._blurTimer), this._blurTimer = void 0);
+  }
+  willUpdate(e) {
+    e.has("value") && this.value !== this._query && (this._query = this.value ?? "");
+  }
+  _setQuery(e) {
+    this._query = e, this.value !== e && (this.value = e);
+  }
+  _handleInput(e) {
+    const n = e.target.value;
+    this._setQuery(n), this._open = !0, this._highlightIndex = -1, this.dispatchEvent(new CustomEvent("ai-search-query", {
+      bubbles: !0,
+      composed: !0,
+      detail: { query: this._query, filters: [...this._activeFilters] }
+    }));
+  }
+  _handleFocus() {
+    this._open = !0;
+  }
+  _handleBlur() {
+    this._blurTimer !== void 0 && clearTimeout(this._blurTimer), this._blurTimer = window.setTimeout(() => {
+      this._open = !1, this._blurTimer = void 0;
+    }, 200);
+  }
+  _handleKeyDown(e) {
+    const n = this.results.length + this.suggestions.length;
+    e.key === "ArrowDown" ? (e.preventDefault(), this._highlightIndex = Math.min(this._highlightIndex + 1, n - 1)) : e.key === "ArrowUp" ? (e.preventDefault(), this._highlightIndex = Math.max(this._highlightIndex - 1, -1)) : e.key === "Enter" && this._highlightIndex >= 0 ? (e.preventDefault(), this._selectHighlighted()) : e.key === "Escape" && (this._open = !1);
+  }
+  _selectHighlighted() {
+    if (this._highlightIndex < this.results.length)
+      this._selectResult(this.results[this._highlightIndex]);
+    else {
+      const e = this._highlightIndex - this.results.length;
+      e < this.suggestions.length && (this._setQuery(this.suggestions[e]), this.dispatchEvent(new CustomEvent("ai-search-query", { bubbles: !0, composed: !0, detail: { query: this._query, filters: [...this._activeFilters] } })));
+    }
+  }
+  _selectResult(e) {
+    this._open = !1, this.dispatchEvent(new CustomEvent("ai-search-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { result: e }
+    }));
+  }
+  _toggleFilter(e) {
+    this._activeFilters.has(e) ? this._activeFilters.delete(e) : this._activeFilters.add(e), this._activeFilters = new Set(this._activeFilters), this.dispatchEvent(new CustomEvent("ai-search-filter", {
+      bubbles: !0,
+      composed: !0,
+      detail: { filters: [...this._activeFilters] }
+    }));
+  }
+  _handleClear() {
+    this._setQuery(""), this._open = !1;
+  }
+  _handleRecent(e) {
+    this._setQuery(e), this.dispatchEvent(new CustomEvent("ai-search-query", { bubbles: !0, composed: !0, detail: { query: e, filters: [...this._activeFilters] } }));
+  }
+  render() {
+    const e = this._open && (this.results.length > 0 || this.suggestions.length > 0 || this.recentSearches.length > 0 || this.filters.length > 0), n = this._highlightIndex >= 0 ? `ai-search-opt-${this._highlightIndex}` : "";
+    return s`
+      <div class="search-wrapper">
+        <div class="input-row">
+          <span class="search-icon" aria-hidden="true"><cg-icon name="search" size="sm"></cg-icon></span>
+          <input type="text"
+            role="combobox"
+            aria-expanded="${e}"
+            aria-haspopup="listbox"
+            aria-controls="ai-search-listbox"
+            aria-autocomplete="list"
+            aria-activedescendant=${n || c}
+            .value=${this._query}
+            .placeholder=${this.placeholder}
+            aria-label="${this.placeholder}"
+            @input=${this._handleInput}
+            @focus=${this._handleFocus}
+            @blur=${this._handleBlur}
+            @keydown=${this._handleKeyDown} />
+          ${this._query ? s`
+            <button class="clear-btn" @click=${this._handleClear} aria-label="Clear search"><cg-icon name="x" size="xs"></cg-icon></button>
+          ` : s`<span class="shortcut" aria-hidden="true"><kbd>Cmd</kbd>+<kbd>K</kbd></span>`}
+        </div>
+
+        ${e ? s`
+          <div id="ai-search-listbox" class="dropdown" role="listbox" aria-label="Search results">
+            ${this.filters.length > 0 ? s`
+              <div class="section-label" id="ai-search-filters-label">Filters</div>
+              <div class="filters" role="group" aria-labelledby="ai-search-filters-label">
+                ${this.filters.map((t) => {
+      const r = this._activeFilters.has(t);
+      return s`
+                    <button class="filter-tag ${r ? "active" : ""}"
+                      role="switch"
+                      aria-checked=${r ? "true" : "false"}
+                      @mousedown=${(i) => {
+        i.preventDefault(), this._toggleFilter(t);
+      }}>${t}</button>
+                  `;
+    })}
+              </div>
+              <div class="divider" role="separator"></div>
+            ` : c}
+
+            ${this.results.length > 0 ? s`
+              <div class="section-label">Results</div>
+              ${this.results.map((t, r) => s`
+                <div id="ai-search-opt-${r}" class="result-item ${r === this._highlightIndex ? "highlighted" : ""}"
+                  role="option"
+                  aria-selected=${r === this._highlightIndex ? "true" : "false"}
+                  @mousedown=${(i) => {
+      i.preventDefault(), this._selectResult(t);
+    }}>
+                  ${t.icon ? s`<span class="result-icon" aria-hidden="true">${t.icon}</span>` : c}
+                  <div class="result-info">
+                    <div class="result-title">${t.title}</div>
+                    ${t.description ? s`<div class="result-desc">${t.description}</div>` : c}
+                  </div>
+                </div>
+              `)}
+            ` : c}
+
+            ${this.suggestions.length > 0 ? s`
+              ${this.results.length > 0 ? s`<div class="divider" role="separator"></div>` : c}
+              <div class="section-label">Suggestions</div>
+              ${this.suggestions.map((t, r) => {
+      const i = r + this.results.length;
+      return s`
+                  <div id="ai-search-opt-${i}" class="result-item ${i === this._highlightIndex ? "highlighted" : ""}"
+                    role="option"
+                    aria-selected=${i === this._highlightIndex ? "true" : "false"}
+                    @mousedown=${(d) => {
+        d.preventDefault(), this._setQuery(t);
+      }}>
+                    <span class="result-icon" aria-hidden="true"><cg-icon name="sparkle" size="xs"></cg-icon></span>
+                    <div class="result-info"><div class="result-title">${t}</div></div>
+                  </div>
+                `;
+    })}
+            ` : c}
+
+            ${this.recentSearches.length > 0 && !this._query ? s`
+              <div class="divider" role="separator"></div>
+              <div class="section-label">Recent</div>
+              ${this.recentSearches.slice(0, 10).map((t) => s`
+                <div class="recent-item" role="option" aria-selected="false" @mousedown=${(r) => {
+      r.preventDefault(), this._handleRecent(t);
+    }}>
+                  <span class="recent-icon" aria-hidden="true">↺</span>
+                  <span class="recent-text">${t}</span>
+                </div>
+              `)}
+            ` : c}
+          </div>
+        ` : c}
+      </div>
+    `;
+  }
+};
+a.styles = [f, b, u`
+    :host {
+      position: relative;
+    }
+
+    .search-wrapper { position: relative; }
+
+    .input-row {
+      display: flex;
+      align-items: center;
+      background: var(--cg-color-input-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-component-input-radius);
+      padding: 0 var(--cg-spacing-12);
+      height: var(--cg-component-input-height-md);
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .input-row:hover { border-color: var(--cg-color-input-border-hover); }
+    .input-row:focus-within { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong); }
+
+    /* Rounded */
+    :host([rounded="full"]) .input-row { border-radius: var(--cg-border-radius-full); }
+
+    /* Size */
+    :host([size="lg"]) .input-row { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-16); }
+    :host([size="lg"]) input { font-size: var(--cg-font-size-base); }
+
+    .search-icon {
+      color: var(--cg-color-input-icon-default);
+      flex-shrink: 0;
+      margin-right: var(--cg-spacing-8);
+      display: flex;
+    }
+    .search-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+
+    input {
+      flex: 1;
+      padding: var(--cg-spacing-8) 0;
+      border: none;
+      background: none;
+      color: var(--cg-color-input-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-sm);
+      outline: none;
+    }
+    input::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    .shortcut {
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-2) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-semibold);
+      flex-shrink: 0;
+    }
+
+    .clear-btn {
+      background: none;
+      border: none;
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      padding: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-sm);
+      font-family: inherit;
+      display: flex;
+      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .clear-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong);
+    }
+    .clear-btn:hover { color: var(--cg-color-surface-base-text); }
+
+    /* Dropdown */
+    .dropdown {
+      position: absolute;
+      top: calc(100% + var(--cg-spacing-6));
+      left: 0;
+      right: 0;
+      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-100);
+      z-index: var(--cg-z-index-200);
+      max-height: var(--cg-spacing-256);
+      overflow-y: auto;
+    }
+
+    .section-label {
+      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    /* Filters */
+    .filters {
+      display: flex;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      flex-wrap: wrap;
+    }
+    .filter-tag {
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .filter-tag:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }
+    .filter-tag:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong); }
+    .filter-tag.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }
+
+    /* Result items */
+    .result-item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .result-item:hover, .result-item.highlighted { background: var(--cg-overlay-dark-subtle); }
+    .result-item:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .result-icon { font-size: var(--cg-font-size-base); flex-shrink: 0; }
+    .result-info { flex: 1; min-width: 0; }
+    .result-title {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-medium);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .result-desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Recent */
+    .recent-item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .recent-item:hover { background: var(--cg-overlay-dark-subtle); }
+    .recent-icon { color: var(--cg-color-input-border-hover); font-size: var(--cg-font-size-xs); }
+    .recent-text { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); flex: 1; }
+    .recent-delete {
+      background: none;
+      border: none;
+      color: var(--cg-color-input-border-hover);
+      cursor: pointer;
+      font-size: var(--cg-font-size-xs);
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .recent-item:hover .recent-delete { opacity: 1; }
+    .recent-delete:focus-visible {
+      opacity: 1;
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong);
+    }
+
+    .divider { height: var(--cg-border-width-50); background: var(--cg-color-surface-cards-border); margin: var(--cg-spacing-4) 0; }
+
+  `];
+o([
+  l({ reflect: !0 })
+], a.prototype, "size", 2);
+o([
+  l({ reflect: !0 })
+], a.prototype, "rounded", 2);
+o([
+  l({ type: String })
+], a.prototype, "placeholder", 2);
+o([
+  l({ type: String })
+], a.prototype, "value", 2);
+o([
+  l({ type: Array })
+], a.prototype, "suggestions", 2);
+o([
+  l({ type: Array })
+], a.prototype, "filters", 2);
+o([
+  l({ type: Array })
+], a.prototype, "recentSearches", 2);
+o([
+  l({ type: Array })
+], a.prototype, "results", 2);
+o([
+  h()
+], a.prototype, "_query", 2);
+o([
+  h()
+], a.prototype, "_open", 2);
+o([
+  h()
+], a.prototype, "_highlightIndex", 2);
+o([
+  h()
+], a.prototype, "_activeFilters", 2);
+a = o([
+  p("ai-search")
+], a);
+export {
+  a as AiSearch
+};
+//# sourceMappingURL=ai-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-search.js","sources":["../../../src/components/ai-search/ai-search.ts"],"sourcesContent":["/**\n * @element ai-search\n * AI-powered search input with dropdown results, faceted filter chips,\n * AI-generated suggestions, recent search history, and full keyboard\n * navigation (arrow keys, Enter, Escape).\n *\n * @example\n * ```html\n * <ai-search\n *   placeholder=\"Search docs...\"\n *   .results=${[{ title: 'Getting Started', description: 'Quick start guide', icon: '[doc icon]' }]}\n *   .suggestions=${['How to deploy', 'API authentication']}\n *   .filters=${['Docs', 'API', 'Blog']}\n *   .recentSearches=${['setup guide', 'rate limits']}\n * ></ai-search>\n * ```\n *\n * @prop {string} placeholder - Input placeholder text\n * @prop {SearchResult[]} results - Search result items\n * @prop {string[]} suggestions - AI-generated query suggestions\n * @prop {string[]} filters - Available filter categories\n * @prop {string[]} recentSearches - Recently searched terms\n *\n * @fires {CustomEvent<{query: string, filters: string[]}>} ai-search-query - When query changes\n * @fires {CustomEvent<{result: SearchResult}>} ai-search-select - When a result is selected\n * @fires {CustomEvent<{filters: string[]}>} ai-search-filter - When filters change\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface SearchResult {\n  title: string;\n  description?: string;\n  icon?: string;\n  url?: string;\n}\n\n@customElement('ai-search')\nexport class AiSearch extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      position: relative;\n    }\n\n    .search-wrapper { position: relative; }\n\n    .input-row {\n      display: flex;\n      align-items: center;\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-component-input-radius);\n      padding: 0 var(--cg-spacing-12);\n      height: var(--cg-component-input-height-md);\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .input-row:hover { border-color: var(--cg-color-input-border-hover); }\n    .input-row:focus-within { border-color: var(--cg-color-input-border-focus); box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong); }\n\n    /* Rounded */\n    :host([rounded=\"full\"]) .input-row { border-radius: var(--cg-border-radius-full); }\n\n    /* Size */\n    :host([size=\"lg\"]) .input-row { height: var(--cg-component-input-height-lg); padding: 0 var(--cg-spacing-16); }\n    :host([size=\"lg\"]) input { font-size: var(--cg-font-size-base); }\n\n    .search-icon {\n      color: var(--cg-color-input-icon-default);\n      flex-shrink: 0;\n      margin-right: var(--cg-spacing-8);\n      display: flex;\n    }\n    .search-icon svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n\n    input {\n      flex: 1;\n      padding: var(--cg-spacing-8) 0;\n      border: none;\n      background: none;\n      color: var(--cg-color-input-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      outline: none;\n    }\n    input::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    .shortcut {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-semibold);\n      flex-shrink: 0;\n    }\n\n    .clear-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      display: flex;\n      transition: color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .clear-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong);\n    }\n    .clear-btn:hover { color: var(--cg-color-surface-base-text); }\n\n    /* Dropdown */\n    .dropdown {\n      position: absolute;\n      top: calc(100% + var(--cg-spacing-6));\n      left: 0;\n      right: 0;\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-100);\n      z-index: var(--cg-z-index-200);\n      max-height: var(--cg-spacing-256);\n      overflow-y: auto;\n    }\n\n    .section-label {\n      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n\n    /* Filters */\n    .filters {\n      display: flex;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      flex-wrap: wrap;\n    }\n    .filter-tag {\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .filter-tag:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }\n    .filter-tag:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong); }\n    .filter-tag.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }\n\n    /* Result items */\n    .result-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .result-item:hover, .result-item.highlighted { background: var(--cg-overlay-dark-subtle); }\n    .result-item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .result-icon { font-size: var(--cg-font-size-base); flex-shrink: 0; }\n    .result-info { flex: 1; min-width: 0; }\n    .result-title {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-medium);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .result-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Recent */\n    .recent-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .recent-item:hover { background: var(--cg-overlay-dark-subtle); }\n    .recent-icon { color: var(--cg-color-input-border-hover); font-size: var(--cg-font-size-xs); }\n    .recent-text { font-size: var(--cg-font-size-xs); color: var(--cg-color-input-text-placeholder); flex: 1; }\n    .recent-delete {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-border-hover);\n      cursor: pointer;\n      font-size: var(--cg-font-size-xs);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .recent-item:hover .recent-delete { opacity: 1; }\n    .recent-delete:focus-visible {\n      opacity: 1;\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong);\n    }\n\n    .divider { height: var(--cg-border-width-50); background: var(--cg-color-surface-cards-border); margin: var(--cg-spacing-4) 0; }\n\n  `];\n  @property({ reflect: true }) size: 'md' | 'lg' = 'md';\n  @property({ reflect: true }) rounded: 'default' | 'full' = 'default';\n  @property({ type: String }) placeholder: string = 'Search...';\n  @property({ type: String }) value: string = '';\n  @property({ type: Array }) suggestions: string[] = [];\n  @property({ type: Array }) filters: string[] = [];\n  @property({ type: Array }) recentSearches: string[] = [];\n  @property({ type: Array }) results: SearchResult[] = [];\n\n  @state() private _query: string = '';\n  @state() private _open: boolean = false;\n  @state() private _highlightIndex: number = -1;\n  @state() private _activeFilters: Set<string> = new Set();\n\n  private _blurTimer: number | undefined;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._blurTimer !== undefined) {\n      clearTimeout(this._blurTimer);\n      this._blurTimer = undefined;\n    }\n  }\n\n  override willUpdate(changed: Map<string, unknown>): void {\n    // Propagate external `value` prop writes into internal query state.\n    // Guarded by inequality to prevent infinite loop with write-back below.\n    if (changed.has('value') && this.value !== this._query) {\n      this._query = this.value ?? '';\n    }\n  }\n\n  private _setQuery(next: string) {\n    this._query = next;\n    // Write back to public `value` so external consumers stay in sync.\n    // Guarded by inequality — `willUpdate` also short-circuits on equality.\n    if (this.value !== next) {\n      this.value = next;\n    }\n  }\n\n  private _handleInput(e: Event) {\n    const next = (e.target as HTMLInputElement).value;\n    this._setQuery(next);\n    this._open = true;\n    this._highlightIndex = -1;\n    this.dispatchEvent(new CustomEvent('ai-search-query', {\n      bubbles: true, composed: true,\n      detail: { query: this._query, filters: [...this._activeFilters] },\n    }));\n  }\n\n  private _handleFocus() { this._open = true; }\n\n  private _handleBlur() {\n    // Delay to allow click events on dropdown\n    if (this._blurTimer !== undefined) clearTimeout(this._blurTimer);\n    this._blurTimer = window.setTimeout(() => { this._open = false; this._blurTimer = undefined; }, 200);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    const totalItems = this.results.length + this.suggestions.length;\n    if (e.key === 'ArrowDown') { e.preventDefault(); this._highlightIndex = Math.min(this._highlightIndex + 1, totalItems - 1); }\n    else if (e.key === 'ArrowUp') { e.preventDefault(); this._highlightIndex = Math.max(this._highlightIndex - 1, -1); }\n    else if (e.key === 'Enter' && this._highlightIndex >= 0) { e.preventDefault(); this._selectHighlighted(); }\n    else if (e.key === 'Escape') { this._open = false; }\n  }\n\n  private _selectHighlighted() {\n    if (this._highlightIndex < this.results.length) {\n      this._selectResult(this.results[this._highlightIndex]!);\n    } else {\n      const sIdx = this._highlightIndex - this.results.length;\n      if (sIdx < this.suggestions.length) {\n        this._setQuery(this.suggestions[sIdx]!);\n        this.dispatchEvent(new CustomEvent('ai-search-query', { bubbles: true, composed: true, detail: { query: this._query, filters: [...this._activeFilters] } }));\n      }\n    }\n  }\n\n  private _selectResult(result: SearchResult) {\n    this._open = false;\n    this.dispatchEvent(new CustomEvent('ai-search-select', {\n      bubbles: true, composed: true,\n      detail: { result },\n    }));\n  }\n\n  private _toggleFilter(filter: string) {\n    if (this._activeFilters.has(filter)) this._activeFilters.delete(filter);\n    else this._activeFilters.add(filter);\n    this._activeFilters = new Set(this._activeFilters);\n    this.dispatchEvent(new CustomEvent('ai-search-filter', {\n      bubbles: true, composed: true,\n      detail: { filters: [...this._activeFilters] },\n    }));\n  }\n\n  private _handleClear() { this._setQuery(''); this._open = false; }\n\n  private _handleRecent(text: string) {\n    this._setQuery(text);\n    this.dispatchEvent(new CustomEvent('ai-search-query', { bubbles: true, composed: true, detail: { query: text, filters: [...this._activeFilters] } }));\n  }\n\n  override render() {\n    const showDropdown = this._open && (this.results.length > 0 || this.suggestions.length > 0 || this.recentSearches.length > 0 || this.filters.length > 0);\n    const activeId = this._highlightIndex >= 0 ? `ai-search-opt-${this._highlightIndex}` : '';\n\n    return html`\n      <div class=\"search-wrapper\">\n        <div class=\"input-row\">\n          <span class=\"search-icon\" aria-hidden=\"true\"><cg-icon name=\"search\" size=\"sm\"></cg-icon></span>\n          <input type=\"text\"\n            role=\"combobox\"\n            aria-expanded=\"${showDropdown}\"\n            aria-haspopup=\"listbox\"\n            aria-controls=\"ai-search-listbox\"\n            aria-autocomplete=\"list\"\n            aria-activedescendant=${activeId || nothing}\n            .value=${this._query}\n            .placeholder=${this.placeholder}\n            aria-label=\"${this.placeholder}\"\n            @input=${this._handleInput}\n            @focus=${this._handleFocus}\n            @blur=${this._handleBlur}\n            @keydown=${this._handleKeyDown} />\n          ${this._query ? html`\n            <button class=\"clear-btn\" @click=${this._handleClear} aria-label=\"Clear search\"><cg-icon name=\"x\" size=\"xs\"></cg-icon></button>\n          ` : html`<span class=\"shortcut\" aria-hidden=\"true\"><kbd>Cmd</kbd>+<kbd>K</kbd></span>`}\n        </div>\n\n        ${showDropdown ? html`\n          <div id=\"ai-search-listbox\" class=\"dropdown\" role=\"listbox\" aria-label=\"Search results\">\n            ${this.filters.length > 0 ? html`\n              <div class=\"section-label\" id=\"ai-search-filters-label\">Filters</div>\n              <div class=\"filters\" role=\"group\" aria-labelledby=\"ai-search-filters-label\">\n                ${this.filters.map(f => {\n                  const isActive = this._activeFilters.has(f);\n                  return html`\n                    <button class=\"filter-tag ${isActive ? 'active' : ''}\"\n                      role=\"switch\"\n                      aria-checked=${isActive ? 'true' : 'false'}\n                      @mousedown=${(e: Event) => { e.preventDefault(); this._toggleFilter(f); }}>${f}</button>\n                  `;\n                })}\n              </div>\n              <div class=\"divider\" role=\"separator\"></div>\n            ` : nothing}\n\n            ${this.results.length > 0 ? html`\n              <div class=\"section-label\">Results</div>\n              ${this.results.map((r, i) => html`\n                <div id=\"ai-search-opt-${i}\" class=\"result-item ${i === this._highlightIndex ? 'highlighted' : ''}\"\n                  role=\"option\"\n                  aria-selected=${i === this._highlightIndex ? 'true' : 'false'}\n                  @mousedown=${(e: Event) => { e.preventDefault(); this._selectResult(r); }}>\n                  ${r.icon ? html`<span class=\"result-icon\" aria-hidden=\"true\">${r.icon}</span>` : nothing}\n                  <div class=\"result-info\">\n                    <div class=\"result-title\">${r.title}</div>\n                    ${r.description ? html`<div class=\"result-desc\">${r.description}</div>` : nothing}\n                  </div>\n                </div>\n              `)}\n            ` : nothing}\n\n            ${this.suggestions.length > 0 ? html`\n              ${this.results.length > 0 ? html`<div class=\"divider\" role=\"separator\"></div>` : nothing}\n              <div class=\"section-label\">Suggestions</div>\n              ${this.suggestions.map((s, i) => {\n                const idx = i + this.results.length;\n                return html`\n                  <div id=\"ai-search-opt-${idx}\" class=\"result-item ${idx === this._highlightIndex ? 'highlighted' : ''}\"\n                    role=\"option\"\n                    aria-selected=${idx === this._highlightIndex ? 'true' : 'false'}\n                    @mousedown=${(e: Event) => { e.preventDefault(); this._setQuery(s); }}>\n                    <span class=\"result-icon\" aria-hidden=\"true\"><cg-icon name=\"sparkle\" size=\"xs\"></cg-icon></span>\n                    <div class=\"result-info\"><div class=\"result-title\">${s}</div></div>\n                  </div>\n                `;\n              })}\n            ` : nothing}\n\n            ${this.recentSearches.length > 0 && !this._query ? html`\n              <div class=\"divider\" role=\"separator\"></div>\n              <div class=\"section-label\">Recent</div>\n              ${this.recentSearches.slice(0, 10).map(r => html`\n                <div class=\"recent-item\" role=\"option\" aria-selected=\"false\" @mousedown=${(e: Event) => { e.preventDefault(); this._handleRecent(r); }}>\n                  <span class=\"recent-icon\" aria-hidden=\"true\">↺</span>\n                  <span class=\"recent-text\">${r}</span>\n                </div>\n              `)}\n            ` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiSearch","LitElement","changed","next","totalItems","sIdx","result","filter","text","showDropdown","activeId","html","nothing","f","isActive","e","r","i","s","idx","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-segmentation-viewer/ai-segmentation-viewer.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export interface SegmentMask {
+    id: string;
+    label: string;
+    color: string;
+    visible?: boolean;
+}
+export declare class AiSegmentationViewer extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    src: string;
+    masks: SegmentMask[];
+    selectedMask: string;
+    opacity: number;
+    showLabels: boolean;
+    showLegend: boolean;
+    private _selectMask;
+    private _toggleMask;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-segmentation-viewer.d.ts.map

package/dist/components/ai-segmentation-viewer/ai-segmentation-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-segmentation-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/ai-segmentation-viewer/ai-segmentation-viewer.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,4BA0EnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7D,GAAG,SAAM;IACM,KAAK,EAAE,WAAW,EAAE,CAAM;IACzC,YAAY,SAAM;IACF,OAAO,SAAO;IACb,UAAU,UAAS;IACnB,UAAU,UAAS;IAEhD,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,WAAW;IAOV,MAAM;CA0DhB"}

package/dist/components/ai-segmentation-viewer/ai-segmentation-viewer.js

@@ -0,0 +1,185 @@
+import { css as p, LitElement as v, nothing as g, html as c } from "lit";
+import { property as n, customElement as u } from "lit/decorators.js";
+import { h, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (r, e, a, t) => {
+  for (var o = t > 1 ? void 0 : t ? w(e, a) : e, l = r.length - 1, d; l >= 0; l--)
+    (d = r[l]) && (o = (t ? d(e, a, o) : d(o)) || o);
+  return t && o && f(e, a, o), o;
+};
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.src = "", this.masks = [], this.selectedMask = "", this.opacity = 0.4, this.showLabels = !1, this.showLegend = !1;
+  }
+  _selectMask(r) {
+    this.selectedMask = r.id, this.dispatchEvent(new CustomEvent("ai-segment-select", { bubbles: !0, composed: !0, detail: { id: r.id, label: r.label } }));
+  }
+  _toggleMask(r, e) {
+    e.stopPropagation();
+    const a = r.visible === !1;
+    this.masks = this.masks.map((t) => t.id === r.id ? { ...t, visible: a } : t), this.dispatchEvent(new CustomEvent("ai-segment-toggle", { bubbles: !0, composed: !0, detail: { id: r.id, visible: a } }));
+  }
+  render() {
+    const r = this.masks.filter((e) => e.visible !== !1);
+    return c`
+      <div class="panel">
+        <div class="header">
+          <span class="header-title">Segmentation</span>
+        </div>
+
+        <div class="canvas-wrap">
+          ${this.src ? c`<img src=${this.src} alt="Segmentation source" />` : g}
+          ${r.map((e) => c`
+            <div class="mask-overlay ${e.id === this.selectedMask ? "selected" : ""}"
+              style="background: ${e.color}; opacity: ${this.opacity};"></div>
+          `)}
+        </div>
+
+        <div class="opacity-row">
+          <cg-slider
+            label="Opacity"
+            value="${Math.round(this.opacity * 100)}"
+            min="0" max="100"
+            unit="%"
+            size="sm"
+            showValue
+            .showTooltip=${!1}
+            .showRange=${!1}
+            @cg-change=${(e) => {
+      this.opacity = e.detail.value / 100;
+    }}
+          ></cg-slider>
+        </div>
+
+        ${this.showLegend ? c`
+          <div class="legend">
+            <span class="legend-title">Masks</span>
+            <div class="legend-items">
+              ${this.masks.map((e) => c`
+                <div class="legend-item ${e.id === this.selectedMask ? "selected" : ""} ${e.visible === !1 ? "hidden" : ""}"
+                  tabindex="0" role="button"
+                  @click=${() => this._selectMask(e)}
+                  @keydown=${(a) => {
+      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this._selectMask(e));
+    }}>
+                  <span class="legend-swatch" style="background: ${e.color}"></span>
+                  ${e.label}
+                  <button class="legend-toggle" @click=${(a) => this._toggleMask(e, a)}
+                    aria-label="${e.visible !== !1 ? "Hide" : "Show"} ${e.label}">
+                    ${e.visible !== !1 ? c`
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                    ` : c`
+                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+                    `}
+                  </button>
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : g}
+      </div>
+    `;
+  }
+};
+s.styles = [h, b, 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;
+    }
+
+    .header {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Canvas ── */
+    .canvas-wrap {
+      position: relative; overflow: hidden;
+      background: var(--cg-color-surface-base-background);
+    }
+    .canvas-wrap img { display: block; width: 100%; height: auto; }
+    .mask-overlay {
+      position: absolute; inset: 0; pointer-events: none;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .mask-overlay.selected {
+      outline: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);
+      outline-offset: calc(-1 * var(--cg-spacing-2));
+    }
+
+    /* ── Opacity slider ── */
+    .opacity-row {
+      padding: var(--cg-spacing-4) var(--cg-spacing-16);
+    }
+
+    /* ── Legend ── */
+    .legend {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+      display: flex; flex-direction: column; gap: var(--cg-spacing-12);
+    }
+    .legend-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);
+    }
+    .legend-items { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-8); }
+    .legend-item {
+      display: inline-flex; align-items: center; gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: transparent;
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .legend-item:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }
+    .legend-item.selected { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-surface-base-text); }
+    .legend-item.hidden { opacity: 0.4; }
+    .legend-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .legend-swatch { width: var(--cg-spacing-8); height: var(--cg-spacing-8); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }
+    .legend-toggle {
+      background: none; border: none; padding: 0; color: inherit; cursor: pointer;
+      display: flex; align-items: center;
+    }
+    .legend-toggle svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+
+    /* ── 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([
+  n({ reflect: !0 })
+], s.prototype, "rounded", 2);
+i([
+  n()
+], s.prototype, "src", 2);
+i([
+  n({ type: Array })
+], s.prototype, "masks", 2);
+i([
+  n()
+], s.prototype, "selectedMask", 2);
+i([
+  n({ type: Number })
+], s.prototype, "opacity", 2);
+i([
+  n({ type: Boolean })
+], s.prototype, "showLabels", 2);
+i([
+  n({ type: Boolean })
+], s.prototype, "showLegend", 2);
+s = i([
+  u("ai-segmentation-viewer")
+], s);
+export {
+  s as AiSegmentationViewer
+};
+//# sourceMappingURL=ai-segmentation-viewer.js.map