@cognivo/components 0.8.0

package/dist/components/cg-listbox/cg-listbox.js

@@ -0,0 +1,258 @@
+import { css as g, LitElement as p, html as d, nothing as h } from "lit";
+import { property as c, state as u, customElement as v } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var r = o > 1 ? void 0 : o ? y(i, t) : i, a = e.length - 1, l; a >= 0; a--)
+    (l = e[a]) && (r = (o ? l(i, t, r) : l(r)) || r);
+  return o && r && m(i, t, r), r;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.options = [], this.value = "", this.multiple = !1, this.checkPosition = "right", this.label = "", this.emptyText = "No options", this._highlightedIndex = -1, this._typeBuffer = "", this._typeTimer = 0;
+  }
+  _getSelected() {
+    return Array.isArray(this.value) ? new Set(this.value) : this.value ? /* @__PURE__ */ new Set([this.value]) : /* @__PURE__ */ new Set();
+  }
+  _enabledOptions() {
+    return this.options.filter((e) => !e.disabled);
+  }
+  _select(e) {
+    if (e.disabled) return;
+    const i = this._getSelected();
+    this.multiple ? (i.has(e.value) ? i.delete(e.value) : i.add(e.value), this.value = [...i]) : this.value = e.value, this.dispatchEvent(new CustomEvent("cg-change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleKeydown(e) {
+    const i = this._enabledOptions();
+    if (i.length === 0) return;
+    const t = this.options;
+    let o = -1;
+    if (this._highlightedIndex >= 0) {
+      const a = t[this._highlightedIndex];
+      a && (o = i.indexOf(a));
+    }
+    let r = o;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), r = Math.min(o + 1, i.length - 1), o === -1 && (r = 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), r = Math.max(o - 1, 0);
+        break;
+      case "Home":
+        e.preventDefault(), r = 0;
+        break;
+      case "End":
+        e.preventDefault(), r = i.length - 1;
+        break;
+      case " ":
+      case "Enter":
+        e.preventDefault(), this._highlightedIndex >= 0 && t[this._highlightedIndex] && this._select(t[this._highlightedIndex]);
+        return;
+      default:
+        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+          this._typeBuffer += e.key.toLowerCase(), clearTimeout(this._typeTimer), this._typeTimer = window.setTimeout(() => {
+            this._typeBuffer = "";
+          }, 500);
+          const a = i.findIndex((l) => l.label.toLowerCase().startsWith(this._typeBuffer));
+          a >= 0 && (r = a);
+        }
+        return;
+    }
+    if (r >= 0 && r < i.length) {
+      const a = i[r];
+      this._highlightedIndex = t.indexOf(a), this._scrollToHighlighted();
+    }
+  }
+  _scrollToHighlighted() {
+    requestAnimationFrame(() => {
+      this.shadowRoot?.querySelector(".option.highlighted")?.scrollIntoView({ block: "nearest" });
+    });
+  }
+  render() {
+    if (this.options.length === 0)
+      return d`<div class="empty">${this.emptyText}</div>`;
+    const e = this._getSelected();
+    let i = "";
+    return d`
+      <div
+        class="listbox"
+        role="listbox"
+        aria-label=${this.label || h}
+        aria-multiselectable=${this.multiple ? "true" : h}
+        tabindex="0"
+        @keydown=${this._handleKeydown}
+      >
+        ${this.options.map((t, o) => {
+      const r = e.has(t.value), a = o === this._highlightedIndex, l = t.group && t.group !== i ? d`<div class="group-header" role="presentation">${i = t.group, t.group}</div>` : (t.group && (i = t.group), h);
+      return d`
+            ${l}
+            <div
+              class="option ${r ? "selected" : ""} ${a ? "highlighted" : ""} ${t.disabled ? "disabled" : ""}"
+              role="option"
+              id="opt-${t.value}"
+              aria-selected=${r}
+              aria-disabled=${t.disabled ? "true" : h}
+              @click=${() => this._select(t)}
+              @mouseenter=${() => {
+        this._highlightedIndex = o;
+      }}
+            >
+              <span class="option-body">
+                <span class="option-label">${t.label}</span>
+                ${t.description ? d`<span class="option-desc">${t.description}</span>` : h}
+              </span>
+              <span class="check" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>
+              </span>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+s.styles = [f, b, g`
+    :host {
+      display: block;
+      width: 100%;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      background: var(--cg-color-surface-cards-background);
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    .listbox {
+      padding: var(--cg-spacing-6);
+      overflow-y: auto;
+      max-height: 320px;
+    }
+
+    .option {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-150);
+      cursor: pointer;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      border: var(--cg-border-width-50) solid transparent;
+      min-height: 44px;
+    }
+
+    .option.highlighted {
+      background: var(--cg-overlay-dark-subtle);
+      border-color: var(--cg-color-surface-cards-border);
+    }
+
+    .option.selected {
+      color: var(--cg-color-action-primary-background-default);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .option.disabled {
+      opacity: 0.45;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    .option:active:not(.disabled) {
+      background: var(--cg-overlay-accent-subtle);
+    }
+
+    /* Checkmark tick */
+    .check {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      flex-shrink: 0;
+      color: var(--cg-color-action-primary-background-default);
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .option.selected .check {
+      opacity: 1;
+    }
+
+    /* Right-aligned by default */
+    :host(:not([checkPosition="left"])) .check {
+      margin-left: auto;
+    }
+
+    /* Left position */
+    :host([checkPosition="left"]) .check {
+      order: -1;
+      margin-left: 0;
+    }
+
+    .option-body {
+      flex: 1;
+      min-width: 0;
+    }
+    .option-label {
+      line-height: var(--cg-line-height-snug);
+    }
+    .option-desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* Group header */
+    .group-header {
+      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-4);
+      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);
+      pointer-events: none;
+    }
+    .group-header:not(:first-child) {
+      margin-top: var(--cg-spacing-4);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      padding-top: var(--cg-spacing-12);
+    }
+
+    /* Empty */
+    .empty {
+      padding: var(--cg-spacing-24);
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+n([
+  c({ type: Array })
+], s.prototype, "options", 2);
+n([
+  c()
+], s.prototype, "value", 2);
+n([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "multiple", 2);
+n([
+  c({ reflect: !0 })
+], s.prototype, "checkPosition", 2);
+n([
+  c()
+], s.prototype, "label", 2);
+n([
+  c()
+], s.prototype, "emptyText", 2);
+n([
+  u()
+], s.prototype, "_highlightedIndex", 2);
+s = n([
+  v("cg-listbox")
+], s);
+export {
+  s as CgListbox
+};
+//# sourceMappingURL=cg-listbox.js.map

package/dist/components/cg-listbox/cg-listbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-listbox.js","sources":["../../../src/components/cg-listbox/cg-listbox.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Option for cg-listbox. */\nexport interface ListboxOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  group?: string;\n}\n\n/**\n * <cg-listbox> — Selectable option list with single or multi-select, keyboard nav, and type-ahead.\n *\n * @fires {CustomEvent<{value: string | string[]}>} cg-change - When selection changes\n */\n@customElement('cg-listbox')\nexport class CgListbox extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n      width: 100%;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      overflow: hidden;\n      box-sizing: border-box;\n    }\n\n    .listbox {\n      padding: var(--cg-spacing-6);\n      overflow-y: auto;\n      max-height: 320px;\n    }\n\n    .option {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-150);\n      cursor: pointer;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      border: var(--cg-border-width-50) solid transparent;\n      min-height: 44px;\n    }\n\n    .option.highlighted {\n      background: var(--cg-overlay-dark-subtle);\n      border-color: var(--cg-color-surface-cards-border);\n    }\n\n    .option.selected {\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .option.disabled {\n      opacity: 0.45;\n      pointer-events: none;\n      cursor: not-allowed;\n    }\n\n    .option:active:not(.disabled) {\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* Checkmark tick */\n    .check {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      flex-shrink: 0;\n      color: var(--cg-color-action-primary-background-default);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .option.selected .check {\n      opacity: 1;\n    }\n\n    /* Right-aligned by default */\n    :host(:not([checkPosition=\"left\"])) .check {\n      margin-left: auto;\n    }\n\n    /* Left position */\n    :host([checkPosition=\"left\"]) .check {\n      order: -1;\n      margin-left: 0;\n    }\n\n    .option-body {\n      flex: 1;\n      min-width: 0;\n    }\n    .option-label {\n      line-height: var(--cg-line-height-snug);\n    }\n    .option-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* Group header */\n    .group-header {\n      padding: var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      pointer-events: none;\n    }\n    .group-header:not(:first-child) {\n      margin-top: var(--cg-spacing-4);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding-top: var(--cg-spacing-12);\n    }\n\n    /* Empty */\n    .empty {\n      padding: var(--cg-spacing-24);\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) options: ListboxOption[] = [];\n  @property() value: string | string[] = '';\n  @property({ type: Boolean, reflect: true }) multiple = false;\n  @property({ reflect: true }) checkPosition: 'left' | 'right' = 'right';\n  @property() label = '';\n  @property() emptyText = 'No options';\n\n  @state() private _highlightedIndex = -1;\n  private _typeBuffer = '';\n  private _typeTimer = 0;\n\n  private _getSelected(): Set<string> {\n    if (Array.isArray(this.value)) return new Set(this.value);\n    return this.value ? new Set([this.value]) : new Set();\n  }\n\n  private _enabledOptions(): ListboxOption[] {\n    return this.options.filter(o => !o.disabled);\n  }\n\n  private _select(opt: ListboxOption) {\n    if (opt.disabled) return;\n    const selected = this._getSelected();\n\n    if (this.multiple) {\n      if (selected.has(opt.value)) {\n        selected.delete(opt.value);\n      } else {\n        selected.add(opt.value);\n      }\n      this.value = [...selected];\n    } else {\n      this.value = opt.value;\n    }\n\n    this.dispatchEvent(new CustomEvent('cg-change', {\n      detail: { value: this.value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleKeydown(e: KeyboardEvent) {\n    const enabled = this._enabledOptions();\n    if (enabled.length === 0) return;\n\n    const allOptions = this.options;\n    let currentEnabledIdx = -1;\n    if (this._highlightedIndex >= 0) {\n      const highlightedOpt = allOptions[this._highlightedIndex];\n      if (highlightedOpt) currentEnabledIdx = enabled.indexOf(highlightedOpt);\n    }\n\n    let nextEnabledIdx = currentEnabledIdx;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextEnabledIdx = Math.min(currentEnabledIdx + 1, enabled.length - 1);\n        if (currentEnabledIdx === -1) nextEnabledIdx = 0;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextEnabledIdx = Math.max(currentEnabledIdx - 1, 0);\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextEnabledIdx = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextEnabledIdx = enabled.length - 1;\n        break;\n      case ' ':\n      case 'Enter':\n        e.preventDefault();\n        if (this._highlightedIndex >= 0 && allOptions[this._highlightedIndex]) {\n          this._select(allOptions[this._highlightedIndex]!);\n        }\n        return;\n      default:\n        // Type-ahead\n        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {\n          this._typeBuffer += e.key.toLowerCase();\n          clearTimeout(this._typeTimer);\n          this._typeTimer = window.setTimeout(() => { this._typeBuffer = ''; }, 500);\n          const match = enabled.findIndex(o => o.label.toLowerCase().startsWith(this._typeBuffer));\n          if (match >= 0) nextEnabledIdx = match;\n        }\n        return;\n    }\n\n    if (nextEnabledIdx >= 0 && nextEnabledIdx < enabled.length) {\n      const nextOpt = enabled[nextEnabledIdx]!;\n      this._highlightedIndex = allOptions.indexOf(nextOpt);\n      this._scrollToHighlighted();\n    }\n  }\n\n  private _scrollToHighlighted() {\n    requestAnimationFrame(() => {\n      const el = this.shadowRoot?.querySelector('.option.highlighted') as HTMLElement | null;\n      el?.scrollIntoView({ block: 'nearest' });\n    });\n  }\n\n  override render() {\n    if (this.options.length === 0) {\n      return html`<div class=\"empty\">${this.emptyText}</div>`;\n    }\n\n    const selected = this._getSelected();\n    let lastGroup = '';\n\n    return html`\n      <div\n        class=\"listbox\"\n        role=\"listbox\"\n        aria-label=${this.label || nothing}\n        aria-multiselectable=${this.multiple ? 'true' : nothing}\n        tabindex=\"0\"\n        @keydown=${this._handleKeydown}\n      >\n        ${this.options.map((opt, i) => {\n          const isSelected = selected.has(opt.value);\n          const isHighlighted = i === this._highlightedIndex;\n          const groupHeader = opt.group && opt.group !== lastGroup\n            ? html`<div class=\"group-header\" role=\"presentation\">${(lastGroup = opt.group, opt.group)}</div>`\n            : (opt.group && (lastGroup = opt.group), nothing);\n\n          return html`\n            ${groupHeader}\n            <div\n              class=\"option ${isSelected ? 'selected' : ''} ${isHighlighted ? 'highlighted' : ''} ${opt.disabled ? 'disabled' : ''}\"\n              role=\"option\"\n              id=\"opt-${opt.value}\"\n              aria-selected=${isSelected}\n              aria-disabled=${opt.disabled ? 'true' : nothing}\n              @click=${() => this._select(opt)}\n              @mouseenter=${() => { this._highlightedIndex = i; }}\n            >\n              <span class=\"option-body\">\n                <span class=\"option-label\">${opt.label}</span>\n                ${opt.description ? html`<span class=\"option-desc\">${opt.description}</span>` : nothing}\n              </span>\n              <span class=\"check\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"></path></svg>\n              </span>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'cg-listbox': CgListbox; }\n}\n"],"names":["CgListbox","LitElement","o","opt","selected","enabled","allOptions","currentEnabledIdx","highlightedOpt","nextEnabledIdx","match","nextOpt","html","lastGroup","nothing","i","isSelected","isHighlighted","groupHeader","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/cg-markdown/cg-markdown.d.ts

@@ -0,0 +1,41 @@
+import { LitElement } from 'lit';
+/**
+ * <cg-markdown> — Lightweight markdown renderer for LLM output.
+ *
+ * @example
+ * ```html
+ * <cg-markdown text="## Hello\n\nThis is **bold**."></cg-markdown>
+ * ```
+ *
+ * @cssprop --cg-color-surface-base-text - Body text color
+ * @cssprop --cg-font-size-sm - Body font size (14px)
+ */
+export declare class CgMarkdown extends LitElement {
+    static styles: import('lit').CSSResult[];
+    text: string;
+    /**
+     * Line-based markdown parser. Classifies each line into a block type,
+     * groups consecutive same-type lines, and renders each block with
+     * inline formatting applied to text content.
+     *
+     * Handles: headings (#), code fences (```), blockquotes (>), horizontal
+     * rules (---), unordered lists (-), ordered lists (1.), and paragraphs.
+     * Inline: bold (**), italic (*), inline code (`), links ([text](url)).
+     */
+    private _render;
+    /**
+     * Applies inline formatting. Escapes HTML first, then processes
+     * inline code (via placeholder to avoid interference), bold, italic,
+     * and links with URL safety checks.
+     */
+    private _inline;
+    updated(changed: Map<string, unknown>): void;
+    private _bindCopyButton;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cg-markdown': CgMarkdown;
+    }
+}
+//# sourceMappingURL=cg-markdown.d.ts.map

package/dist/components/cg-markdown/cg-markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-markdown.d.ts","sourceRoot":"","sources":["../../../src/components/cg-markdown/cg-markdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAsH5C;;;;;;;;;;GAUG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAuSnB;IAES,IAAI,SAAM;IAEtB;;;;;;;;OAQG;IACH,OAAO,CAAC,OAAO;IAyIf;;;;OAIG;IACH,OAAO,CAAC,OAAO;IAkCN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWrD,OAAO,CAAC,eAAe;IAqBd,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,aAAa,EAAE,UAAU,CAAC;KAAE;CAAE"}