@things-factory/ai-assistant 10.1.6

package/dist-client/components/mention-popup.js

@@ -0,0 +1,223 @@
+import { __decorate, __metadata } from "tslib";
+/**
+ * <ox-mention-popup> — Mention 후보 리스트 popup overlay.
+ *
+ * board-ai-chat 의 textarea 위에 absolute 로 띄움. plain `<textarea>` + popup 분리 패턴
+ * (한국어 IME 함정 회피 — contenteditable 사용 안 함).
+ *
+ * 키보드 네비게이션은 호스트 (board-ai-chat) 가 textarea keydown 으로 처리하고
+ * activeIndex 만 동기화. 마우스 클릭은 popup 자체에서 처리.
+ *
+ * Pure helper (extractMentionContext / filterMentionCandidates 등) 는
+ * `mention-popup-helpers.ts` 에 분리 — 단위 테스트 가능.
+ */
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+export { buildMentionCandidates, buildCatalogCandidates, buildSlashCandidates, buildUserCandidates, extractMentionContext, filterMentionCandidates, applyMentionSelection, resolveMentionToken } from './mention-popup-helpers.js';
+/** match type 라벨 — things-scene SearchOverlay 의 MATCH_TYPE_LABELS 와 동일. */
+const MATCH_TYPE_LABEL = {
+    id: 'ID',
+    name: 'Name',
+    tag: 'Tag',
+    type: 'Type',
+    class: 'Class',
+    text: 'Text',
+    data: 'Data',
+    property: 'Prop',
+    description: 'Desc'
+};
+let OxMentionPopup = class OxMentionPopup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.results = [];
+        this.activeIndex = 0;
+        /** filter cap 후 표시 안 된 추가 매칭 수 ("...and N more" 표기용) */
+        this.overflow = 0;
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+      position: absolute;
+      z-index: 1000;
+      background: var(--md-sys-color-surface, #ffffff);
+      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      border-radius: 6px;
+      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
+      max-height: 220px;
+      overflow-y: auto;
+      /* 폭은 호스트가 left/right 로 결정. */
+    }
+    .empty {
+      padding: 8px 10px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      font-size: 11px;
+    }
+    /* dense 한 단일 행 — scene Finder 톤. label / hint / type-chip inline. */
+    .item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      cursor: pointer;
+      font-size: 11.5px;
+      line-height: 1.4;
+      color: var(--md-sys-color-on-surface, #0f172a);
+      border-bottom: 1px solid var(--md-sys-color-outline-variant, #f1f5f9);
+    }
+    .item:last-child {
+      border-bottom: 0;
+    }
+    .item:hover {
+      background: var(--md-sys-color-surface-container, #f8fafc);
+    }
+    .item.active {
+      background: var(--md-sys-color-primary-container, rgba(37, 99, 235, 0.10));
+    }
+    .match-badge {
+      flex-shrink: 0;
+      background: var(--md-sys-color-primary-container, rgba(37, 99, 235, 0.15));
+      color: var(--md-sys-color-on-primary-container, #1e40af);
+      padding: 0 5px;
+      border-radius: 3px;
+      font-size: 9px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      min-width: 32px;
+      text-align: center;
+    }
+    /* badge 가 비어있을 때 (matchType=label) — 자리는 reserve 해서 모든 행 정렬 일치 */
+    .match-badge.invisible {
+      visibility: hidden;
+    }
+    .label {
+      flex: 1;
+      min-width: 0;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      color: var(--md-sys-color-on-surface, #0f172a);
+    }
+    .hint {
+      font-size: 10px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      flex-shrink: 0;
+      white-space: nowrap;
+      max-width: 45%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .type {
+      flex-shrink: 0;
+      background: var(--md-sys-color-surface-container, #f1f5f9);
+      padding: 0 5px;
+      border-radius: 3px;
+      font-size: 9.5px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      letter-spacing: 0.02em;
+    }
+    /* 상태 footer — 'N matches' 카운터 + cap 초과 안내 */
+    .status {
+      padding: 3px 8px;
+      font-size: 9.5px;
+      color: var(--md-sys-color-outline, #94a3b8);
+      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);
+      background: var(--md-sys-color-surface-container-low, #fafbfc);
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+    }
+    .more {
+      color: var(--md-sys-color-outline, #94a3b8);
+    }
+  `; }
+    render() {
+        if (this.results.length === 0) {
+            return html `<div class="empty">매칭 없음</div>`;
+        }
+        const totalShown = this.results.length;
+        const totalAll = totalShown + this.overflow;
+        return html `
+      ${this.results.map((r, i) => {
+            // 행 layout:
+            //   [matchType-badge] [type-chip] [label] [secondary hint when 의미 있을 때]
+            // - label = 항상 사람-친화적 1차 식별 (component=id, user=name, catalog=name 등)
+            // - secondary hint = matchValue 가 label 과 다른 경우 (예: tag/text 매칭) 또는
+            //   user 의 email 같은 부가 정보. 없으면 생략.
+            const matchType = r.matchType;
+            const badgeText = matchType ? MATCH_TYPE_LABEL[matchType] ?? '' : '';
+            const label = r.candidate.label;
+            // matchValue 가 label 과 같으면 redundant 라 hint 안 함
+            const matchHint = r.matchValue && r.matchValue !== label ? r.matchValue : '';
+            // user 후보이고 hint 가 비어있으면 email 을 hint 로 (보조 식별)
+            const fallbackHint = !matchHint && r.candidate.type === 'user' && r.candidate.email !== label
+                ? r.candidate.email ?? ''
+                : '';
+            const hint = matchHint || fallbackHint;
+            return html `
+          <div
+            class="item ${i === this.activeIndex ? 'active' : ''}"
+            @mouseenter=${() => this._setActive(i)}
+            @mousedown=${(e) => this._select(e, r.candidate)}>
+            <span class="match-badge ${badgeText ? '' : 'invisible'}"
+              >${badgeText || '·'}</span
+            >
+            <span class="type">${r.candidate.type}</span>
+            <span class="label">${label}</span>
+            ${hint ? html `<span class="hint">${hint}</span>` : ''}
+          </div>
+        `;
+        })}
+      <div class="status">
+        <span>${totalShown} / ${totalAll} matches</span>
+        ${this.overflow > 0
+            ? html `<span class="more">+${this.overflow} more — narrow query</span>`
+            : ''}
+      </div>
+    `;
+    }
+    _select(e, candidate) {
+        e.preventDefault(); // textarea blur 방지
+        this.dispatchEvent(new CustomEvent('mention-select', {
+            detail: { candidate },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** 마우스 hover 로 active 이동 — host 가 받아 keyboard nav 와 동일하게 처리. */
+    _setActive(index) {
+        if (index === this.activeIndex)
+            return;
+        this.dispatchEvent(new CustomEvent('mention-active-change', {
+            detail: { index },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    /** activeIndex 가 바뀌면 해당 항목을 view 로 스크롤 — popup 의 overflow-y:auto
+     *  영역에서 키보드 네비 시 active 가 가려지지 않도록. */
+    updated(changed) {
+        if (changed.has('activeIndex') || changed.has('results')) {
+            const items = this.renderRoot.querySelectorAll('.item');
+            const active = items[this.activeIndex];
+            active?.scrollIntoView({ block: 'nearest' });
+        }
+    }
+};
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], OxMentionPopup.prototype, "results", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], OxMentionPopup.prototype, "activeIndex", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], OxMentionPopup.prototype, "overflow", void 0);
+OxMentionPopup = __decorate([
+    customElement('ox-mention-popup')
+], OxMentionPopup);
+export { OxMentionPopup };
+//# sourceMappingURL=mention-popup.js.map

package/dist-client/components/mention-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mention-popup.js","sourceRoot":"","sources":["../../client/components/mention-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * <ox-mention-popup> — Mention 후보 리스트 popup overlay.\n *\n * board-ai-chat 의 textarea 위에 absolute 로 띄움. plain `<textarea>` + popup 분리 패턴\n * (한국어 IME 함정 회피 — contenteditable 사용 안 함).\n *\n * 키보드 네비게이션은 호스트 (board-ai-chat) 가 textarea keydown 으로 처리하고\n * activeIndex 만 동기화. 마우스 클릭은 popup 자체에서 처리.\n *\n * Pure helper (extractMentionContext / filterMentionCandidates 등) 는\n * `mention-popup-helpers.ts` 에 분리 — 단위 테스트 가능.\n */\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport type { FilterResult, MentionCandidate } from './mention-popup-helpers.js'\n\nexport type {\n  MentionCandidate,\n  FilterResult\n} from './mention-popup-helpers.js'\nexport {\n  buildMentionCandidates,\n  buildCatalogCandidates,\n  buildSlashCandidates,\n  buildUserCandidates,\n  extractMentionContext,\n  filterMentionCandidates,\n  applyMentionSelection,\n  resolveMentionToken,\n  type CatalogEntry,\n  type SlashTemplate,\n  type ResolveMentionTokenOptions\n} from './mention-popup-helpers.js'\n\n/** match type 라벨 — things-scene SearchOverlay 의 MATCH_TYPE_LABELS 와 동일. */\nconst MATCH_TYPE_LABEL: Record<string, string> = {\n  id: 'ID',\n  name: 'Name',\n  tag: 'Tag',\n  type: 'Type',\n  class: 'Class',\n  text: 'Text',\n  data: 'Data',\n  property: 'Prop',\n  description: 'Desc'\n}\n\n@customElement('ox-mention-popup')\nexport class OxMentionPopup extends LitElement {\n  @property({ type: Array }) results: FilterResult[] = []\n  @property({ type: Number }) activeIndex = 0\n  /** filter cap 후 표시 안 된 추가 매칭 수 (\"...and N more\" 표기용) */\n  @property({ type: Number }) overflow = 0\n\n  static styles = css`\n    :host {\n      display: block;\n      position: absolute;\n      z-index: 1000;\n      background: var(--md-sys-color-surface, #ffffff);\n      border: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);\n      border-radius: 6px;\n      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);\n      max-height: 220px;\n      overflow-y: auto;\n      /* 폭은 호스트가 left/right 로 결정. */\n    }\n    .empty {\n      padding: 8px 10px;\n      color: var(--md-sys-color-outline, #94a3b8);\n      font-size: 11px;\n    }\n    /* dense 한 단일 행 — scene Finder 톤. label / hint / type-chip inline. */\n    .item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      padding: 4px 8px;\n      cursor: pointer;\n      font-size: 11.5px;\n      line-height: 1.4;\n      color: var(--md-sys-color-on-surface, #0f172a);\n      border-bottom: 1px solid var(--md-sys-color-outline-variant, #f1f5f9);\n    }\n    .item:last-child {\n      border-bottom: 0;\n    }\n    .item:hover {\n      background: var(--md-sys-color-surface-container, #f8fafc);\n    }\n    .item.active {\n      background: var(--md-sys-color-primary-container, rgba(37, 99, 235, 0.10));\n    }\n    .match-badge {\n      flex-shrink: 0;\n      background: var(--md-sys-color-primary-container, rgba(37, 99, 235, 0.15));\n      color: var(--md-sys-color-on-primary-container, #1e40af);\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 9px;\n      font-weight: 600;\n      letter-spacing: 0.04em;\n      min-width: 32px;\n      text-align: center;\n    }\n    /* badge 가 비어있을 때 (matchType=label) — 자리는 reserve 해서 모든 행 정렬 일치 */\n    .match-badge.invisible {\n      visibility: hidden;\n    }\n    .label {\n      flex: 1;\n      min-width: 0;\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: var(--md-sys-color-on-surface, #0f172a);\n    }\n    .hint {\n      font-size: 10px;\n      color: var(--md-sys-color-outline, #94a3b8);\n      flex-shrink: 0;\n      white-space: nowrap;\n      max-width: 45%;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n    .type {\n      flex-shrink: 0;\n      background: var(--md-sys-color-surface-container, #f1f5f9);\n      padding: 0 5px;\n      border-radius: 3px;\n      font-size: 9.5px;\n      color: var(--md-sys-color-outline, #94a3b8);\n      letter-spacing: 0.02em;\n    }\n    /* 상태 footer — 'N matches' 카운터 + cap 초과 안내 */\n    .status {\n      padding: 3px 8px;\n      font-size: 9.5px;\n      color: var(--md-sys-color-outline, #94a3b8);\n      border-top: 1px solid var(--md-sys-color-outline-variant, #e2e8f0);\n      background: var(--md-sys-color-surface-container-low, #fafbfc);\n      display: flex;\n      justify-content: space-between;\n      gap: 8px;\n    }\n    .more {\n      color: var(--md-sys-color-outline, #94a3b8);\n    }\n  `\n\n  render() {\n    if (this.results.length === 0) {\n      return html`<div class=\"empty\">매칭 없음</div>`\n    }\n    const totalShown = this.results.length\n    const totalAll = totalShown + this.overflow\n    return html`\n      ${this.results.map((r, i) => {\n        // 행 layout:\n        //   [matchType-badge] [type-chip] [label] [secondary hint when 의미 있을 때]\n        // - label = 항상 사람-친화적 1차 식별 (component=id, user=name, catalog=name 등)\n        // - secondary hint = matchValue 가 label 과 다른 경우 (예: tag/text 매칭) 또는\n        //   user 의 email 같은 부가 정보. 없으면 생략.\n        const matchType = r.matchType\n        const badgeText = matchType ? MATCH_TYPE_LABEL[matchType] ?? '' : ''\n        const label = r.candidate.label\n        // matchValue 가 label 과 같으면 redundant 라 hint 안 함\n        const matchHint = r.matchValue && r.matchValue !== label ? r.matchValue : ''\n        // user 후보이고 hint 가 비어있으면 email 을 hint 로 (보조 식별)\n        const fallbackHint =\n          !matchHint && r.candidate.type === 'user' && r.candidate.email !== label\n            ? r.candidate.email ?? ''\n            : ''\n        const hint = matchHint || fallbackHint\n        return html`\n          <div\n            class=\"item ${i === this.activeIndex ? 'active' : ''}\"\n            @mouseenter=${() => this._setActive(i)}\n            @mousedown=${(e: MouseEvent) => this._select(e, r.candidate)}>\n            <span class=\"match-badge ${badgeText ? '' : 'invisible'}\"\n              >${badgeText || '·'}</span\n            >\n            <span class=\"type\">${r.candidate.type}</span>\n            <span class=\"label\">${label}</span>\n            ${hint ? html`<span class=\"hint\">${hint}</span>` : ''}\n          </div>\n        `\n      })}\n      <div class=\"status\">\n        <span>${totalShown} / ${totalAll} matches</span>\n        ${this.overflow > 0\n          ? html`<span class=\"more\">+${this.overflow} more — narrow query</span>`\n          : ''}\n      </div>\n    `\n  }\n\n  private _select(e: MouseEvent, candidate: MentionCandidate) {\n    e.preventDefault() // textarea blur 방지\n    this.dispatchEvent(\n      new CustomEvent('mention-select', {\n        detail: { candidate },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  /** 마우스 hover 로 active 이동 — host 가 받아 keyboard nav 와 동일하게 처리. */\n  private _setActive(index: number) {\n    if (index === this.activeIndex) return\n    this.dispatchEvent(\n      new CustomEvent('mention-active-change', {\n        detail: { index },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  /** activeIndex 가 바뀌면 해당 항목을 view 로 스크롤 — popup 의 overflow-y:auto\n   *  영역에서 키보드 네비 시 active 가 가려지지 않도록. */\n  protected updated(changed: Map<string, unknown>) {\n    if (changed.has('activeIndex') || changed.has('results')) {\n      const items = this.renderRoot.querySelectorAll('.item')\n      const active = items[this.activeIndex] as HTMLElement | undefined\n      active?.scrollIntoView({ block: 'nearest' })\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ox-mention-popup': OxMentionPopup\n  }\n}\n"]}

package/dist-client/components/mention-popup.test.d.ts

@@ -0,0 +1 @@
+export {};