@signalwire/web-components 1.0.0-dev-20260428141127 → 1.0.0-dev-20260428183200

package/dist/components/UI/sw-ui-transcript-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-transcript-view.js","sources":["../../../src/components/UI/sw-ui-transcript-view.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { highlight } from '../../utils/prism.js';\nimport { transcriptToMarkdown } from '../../utils/transcriptToMarkdown.js';\n\n/**\n * A single transcript entry rendered as a chat bubble.\n *\n * The optional `meta` field carries rich content from the AI.\n */\nexport interface TranscriptEntry {\n  id: string;\n  type: 'user' | 'agent' | 'system';\n  state: 'partial' | 'complete';\n  text: string;\n  meta?: TranscriptEntryMeta;\n}\n\n/** Rich content attached to a transcript entry. */\nexport interface TranscriptEntryMeta {\n  /** Clickable links. */\n  links?: { label: string; url: string }[];\n  /** Code snippet. */\n  code?: { language?: string; content: string };\n  /**\n   * Content that the agent pushed via a `display_content` user_event.\n   * Stored here so the download serializer can include the full payload.\n   */\n  displayContent?: {\n    title?: string;\n    content: string;\n    format: 'text' | 'markdown' | 'code' | 'html';\n    language?: string;\n  };\n}\n\n@customElement('sw-ui-transcript-view')\nexport class SwUiTranscriptView extends LitElement {\n  static styles = css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        background: var(--bg-page);\n        color: var(--fg-default);\n        font-family: var(--type-family-body);\n        font-size: var(--type-size-small);\n        overflow: hidden;\n      }\n\n      .header {\n        flex: 0 0 auto;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 8px 10px 8px 14px;\n        font-size: 11px;\n        font-weight: 600;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: color-mix(in srgb, var(--fg-default) 40%, transparent);\n        border-bottom: 1px solid var(--border-default);\n        user-select: none;\n      }\n\n      .download-btn {\n        all: unset;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 26px;\n        height: 26px;\n        border-radius: 5px;\n        cursor: pointer;\n        color: color-mix(in srgb, var(--fg-default) 50%, transparent);\n        transition:\n          background var(--transition-fast),\n          color var(--transition-fast);\n      }\n\n      .download-btn:hover {\n        background: var(--bg-surface-raised);\n        color: var(--fg-default);\n      }\n\n\n      .messages {\n        flex: 1;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding: 10px 12px 14px;\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        scroll-behavior: smooth;\n      }\n\n      .messages::-webkit-scrollbar {\n        width: 4px;\n      }\n      .messages::-webkit-scrollbar-track {\n        background: transparent;\n      }\n      .messages::-webkit-scrollbar-thumb {\n        background: var(--bg-surface-raised);\n        border-radius: 2px;\n      }\n\n      .empty {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 13px;\n        color: rgba(255, 255, 255, 0.25);\n        padding: 20px;\n        text-align: center;\n      }\n\n      .bubble {\n        max-width: 85%;\n        padding: 8px 12px;\n        border-radius: 14px;\n        font-size: 0.8125rem;\n        line-height: 1.45;\n        word-break: break-word;\n        animation: pop-in 0.15s ease-out;\n      }\n\n      @keyframes pop-in {\n        from {\n          opacity: 0;\n          transform: scale(0.94) translateY(4px);\n        }\n        to {\n          opacity: 1;\n          transform: scale(1) translateY(0);\n        }\n      }\n\n      .user {\n        align-self: flex-end;\n        background: var(--interactive-button-primary-bg);\n        color: #fff;\n        border-bottom-right-radius: 4px;\n      }\n      .agent {\n        align-self: flex-start;\n        background: var(--bg-surface);\n        color: var(--fg-default);\n        border-bottom-left-radius: 4px;\n      }\n      .system {\n        align-self: center;\n        background: transparent;\n        border: 1px solid var(--border-default);\n        color: var(--fg-default);\n        font-size: 0.75rem;\n        max-width: 95%;\n      }\n\n      .partial {\n        opacity: 0.55;\n      }\n\n      /* ── Links ── */\n      .meta-links {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 6px;\n        margin-top: 6px;\n      }\n\n      .meta-links a {\n        color: var(--interactive-button-primary-bg);\n        text-decoration: none;\n        font-size: 0.75rem;\n        padding: 2px 8px;\n        border: 1px solid var(--interactive-button-primary-bg);\n        border-radius: 4px;\n        transition: background var(--transition-fast);\n      }\n\n      .meta-links a:hover {\n        background: var(--interactive-button-primary-bg);\n        color: #fff;\n      }\n\n      /* ── Code block ── */\n      .meta-code {\n        margin-top: 8px;\n        border-radius: 6px;\n        overflow: hidden;\n      }\n\n      .meta-code pre {\n        margin: 0;\n        padding: 10px 12px;\n        background: #1a1b26;\n        overflow-x: auto;\n        font-size: 0.72rem;\n        line-height: 1.5;\n      }\n\n      .meta-code code {\n        font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;\n        color: #f8f8f2;\n      }\n\n      /* ── Prism Okaidia theme ── */\n      .token.comment,\n      .token.prolog,\n      .token.doctype,\n      .token.cdata {\n        color: #8292a2;\n      }\n      .token.punctuation {\n        color: #f8f8f2;\n      }\n      .token.namespace {\n        opacity: 0.7;\n      }\n      .token.property,\n      .token.tag,\n      .token.constant,\n      .token.symbol,\n      .token.deleted {\n        color: #f92672;\n      }\n      .token.boolean,\n      .token.number {\n        color: #ae81ff;\n      }\n      .token.selector,\n      .token.attr-name,\n      .token.string,\n      .token.char,\n      .token.builtin,\n      .token.inserted {\n        color: #a6e22e;\n      }\n      .token.operator,\n      .token.entity,\n      .token.url,\n      .token.variable {\n        color: #f8f8f2;\n      }\n      .token.atrule,\n      .token.attr-value,\n      .token.function,\n      .token.class-name {\n        color: #e6db74;\n      }\n      .token.keyword {\n        color: #66d9ef;\n      }\n      .token.regex,\n      .token.important {\n        color: #fd971f;\n      }\n      .token.important,\n      .token.bold {\n        font-weight: bold;\n      }\n      .token.italic {\n        font-style: italic;\n      }\n    `;\n\n  @property({ attribute: false }) entries: TranscriptEntry[] = [];\n  @property({ type: String }) header = 'Transcript';\n  @property({ type: String, attribute: 'empty-text' }) emptyText = '';\n\n  // entry.id → highlighted HTML (populated asynchronously)\n  @state() private _codeCache = new Map<string, string>();\n\n  private _lastEntryCount = 0;\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (this.entries.length !== this._lastEntryCount) {\n      this._lastEntryCount = this.entries.length;\n      this._autoScroll();\n    }\n    if (changed.has('entries')) {\n      void this._highlightNewEntries();\n    }\n  }\n\n  private async _highlightNewEntries(): Promise<void> {\n    const toHighlight = this.entries.filter((e) => e.meta?.code && !this._codeCache.has(e.id));\n    if (toHighlight.length === 0) return;\n\n    await Promise.all(\n      toHighlight.map(async (e) => {\n        const { content, language = '' } = e.meta!.code!;\n        const html = await highlight(content, language);\n        this._codeCache = new Map(this._codeCache).set(e.id, html);\n      })\n    );\n\n    // The highlighted re-render extends the scroll height — scroll again\n    // now that the final DOM height is known.\n    await this.updateComplete;\n    this._autoScroll();\n  }\n\n  private _downloadTranscript(): void {\n    const md = transcriptToMarkdown(this.entries);\n    const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = `transcript-${new Date().toISOString().slice(0, 10)}.md`;\n    a.click();\n    URL.revokeObjectURL(url);\n  }\n\n  private _autoScroll(): void {\n    const el = this.shadowRoot?.querySelector('.messages');\n    if (!el) return;\n    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 120;\n    if (nearBottom) el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });\n  }\n\n  private _renderCode(entry: TranscriptEntry) {\n    const code = entry.meta?.code;\n    if (!code) return nothing;\n    const cached = this._codeCache.get(entry.id);\n    return html`\n      <div class=\"meta-code\" part=\"code\">\n        <pre><code>${cached ? unsafeHTML(cached) : code.content}</code></pre>\n      </div>\n    `;\n  }\n\n  render() {\n    const hasEntries = this.entries.some((e) => e.state === 'complete');\n\n    return html`\n      <div class=\"header\" part=\"header\">\n        <span>${this.header}</span>\n        <button\n          class=\"download-btn\"\n          part=\"download-btn\"\n          title=\"Download transcript as Markdown\"\n          ?disabled=${!hasEntries}\n          @click=${this._downloadTranscript}\n        >\n          <sw-ui-icon name=\"download\" size=\"15\"></sw-ui-icon>\n        </button>\n      </div>\n\n      ${this.entries.length === 0\n        ? html`<div class=\"empty\" part=\"empty\">${this.emptyText}</div>`\n        : html`\n            <div class=\"messages\" part=\"messages\">\n              ${this.entries.map(\n                (e) => html`\n                  <div\n                    class=\"bubble ${e.type} ${e.state === 'partial' ? 'partial' : ''}\"\n                    part=\"bubble bubble-${e.type}\"\n                  >\n                    ${e.text}\n                    ${e.meta?.links?.length\n                      ? html`<div class=\"meta-links\">\n                          ${e.meta.links.map(\n                            (l) =>\n                              html`<a href=${l.url} target=\"_blank\" rel=\"noopener\">${l.label}</a>`\n                          )}\n                        </div>`\n                      : nothing}\n                    ${this._renderCode(e)}\n                  </div>\n                `\n              )}\n            </div>\n          `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-transcript-view': SwUiTranscriptView;\n  }\n}\n"],"names":["SwUiTranscriptView","LitElement","changed","toHighlight","e","_a","content","language","html","highlight","md","transcriptToMarkdown","blob","url","a","el","entry","code","nothing","cached","unsafeHTML","hasEntries","_b","l","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/directory.d.ts

@@ -12,27 +12,19 @@
  * @fires sw-address-select - Fired when an address is selected. Detail: `{ address: Address }`
  * @fires sw-dial - Fired when the call button on an address is clicked. Detail: `{ address: Address, channel: string }`
  *
- * @cssprop [--sw-color-primary=#044cf6] - Primary brand color
- * @cssprop [--sw-color-primary-hover=#0339c4] - Primary color on hover
- * @cssprop [--sw-color-success=#10b981] - Success/positive color
- * @cssprop [--sw-color-text=#1f2937] - Primary text color
- * @cssprop [--sw-color-text-muted=#6b7280] - Secondary/muted text color
- * @cssprop [--sw-color-background=#ffffff] - Component background color
- * @cssprop [--sw-color-background-hover=#f3f4f6] - Background color on hover
- * @cssprop [--sw-color-background-active=#e5e7eb] - Background color on active/press
- * @cssprop [--sw-color-border=#e5e7eb] - Border color
- * @cssprop [--sw-font-family=-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif] - Font family
- * @cssprop [--sw-font-size-sm=12px] - Small font size
- * @cssprop [--sw-font-size-base=14px] - Base font size
- * @cssprop [--sw-font-size-lg=16px] - Large font size
- * @cssprop [--sw-space-1=4px] - Smallest spacing unit
- * @cssprop [--sw-space-2=8px] - Small spacing unit
- * @cssprop [--sw-space-3=12px] - Medium spacing unit
- * @cssprop [--sw-space-4=16px] - Large spacing unit
- * @cssprop [--sw-border-radius=8px] - Border radius for containers and inputs
+ * @cssprop [--interactive-button-primary-bg=#044ef4] - Primary brand color
+ * @cssprop [--interactive-button-primary-hover=#0342cf] - Primary color on hover
+ * @cssprop [--interactive-status-success=#22c55e] - Success/positive color
+ * @cssprop [--fg-default=#f0f0f4] - Primary text color
+ * @cssprop [--fg-muted=#a0a0aa] - Secondary/muted text color
+ * @cssprop [--bg-surface=#181a28] - Component background color
+ * @cssprop [--bg-surface-raised=#222436] - Background color on hover
+ * @cssprop [--interactive-dropdown-hover=#333338] - Background color on active/press
+ * @cssprop [--border-default=rgba(255,255,255,0.12)] - Border color
  */
 import { LitElement } from 'lit';
 import type { Observable } from 'rxjs';
+import './UI/icons/sw-ui-icon.js';
 /**
  * Address type from SDK
  */

package/dist/components/directory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"directory.d.ts","sourceRoot":"","sources":["../../src/components/directory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,0BAuPX;IAEF;;OAEG;IAEH,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAE1C;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAwB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAc;IAEjC;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAiB;IAElC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAuB;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAqC;IAEjE;;OAEG;IAEH,OAAO,CAAC,sBAAsB,CAAkB;IAEhD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,oBAAoB;IAiC5B,OAAO,CAAC,OAAO;IAYf,SAAS,CAAC,YAAY;IAItB,OAAO,CAAC,mBAAmB;IAqB3B,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAyB3C,sBAAsB;IAiBpC,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,UAAU;YAUJ,cAAc;IAM5B,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,kBAAkB;IA8B1B,OAAO,CAAC,sBAAsB;IAS9B,MAAM;CA+EP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
+{"version":3,"file":"directory.d.ts","sourceRoot":"","sources":["../../src/components/directory.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,0BAA0B,CAAC;AAElC;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,QAAQ,CAAC,EAAE;QACT,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,SAAS,CAAC,EAAE,OAAO,CAAC;KACrB,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,0BA+MX;IAEF;;OAEG;IAEH,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAE1C;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAwB;IAE/C;;OAEG;IAEH,OAAO,CAAC,WAAW,CAAc;IAEjC;;OAEG;IAEH,OAAO,CAAC,SAAS,CAAiB;IAElC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAkB;IAEjC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAsB;IAE3C;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAuB;IAElD;;OAEG;IACH,OAAO,CAAC,oBAAoB,CAAqC;IAEjE;;OAEG;IAEH,OAAO,CAAC,sBAAsB,CAAkB;IAEhD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,oBAAoB;IAiC5B,OAAO,CAAC,OAAO;IAYf,SAAS,CAAC,YAAY;IAItB,OAAO,CAAC,mBAAmB;IAqB3B,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;YAyB3C,sBAAsB;IAiBpC,OAAO,KAAK,iBAAiB,GAU5B;IAED,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,qBAAqB;IAI7B,OAAO,CAAC,UAAU;YAUJ,cAAc;IAM5B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,kBAAkB;IAoB1B,OAAO,CAAC,sBAAsB;IAS9B,MAAM;CAuEP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}

package/dist/components/directory.js

@@ -1,11 +1,11 @@
-import { LitElement as p, html as i, css as u } from "lit";
-import { property as v, state as d, customElement as w } from "lit/decorators.js";
-var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (e, s, a, r) => {
-  for (var t = r > 1 ? void 0 : r ? m(s, a) : s, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (t = (r ? l(s, a, t) : l(t)) || t);
-  return r && t && b(s, a, t), t;
+import { LitElement as u, html as a, css as p } from "lit";
+import { property as m, state as l, customElement as b } from "lit/decorators.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (e, i, o, t) => {
+  for (var s = t > 1 ? void 0 : t ? f(i, o) : i, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (s = (t ? d(i, o, s) : d(s)) || s);
+  return t && s && v(i, o, s), s;
 };
-let o = class extends p {
+let r = class extends u {
   constructor() {
     super(...arguments), this.directory = null, this.selectedAddress = null, this.searchQuery = "", this.addresses = [], this.loading = !1, this.hasMore = !1, this.subscriptions = [], this.searchDebounceTimer = null, this.intersectionObserver = null, this.isAutoLoadingForSearch = !1;
   }
@@ -18,20 +18,20 @@ let o = class extends p {
   subscribeToDirectory() {
     if (this.directory) {
       if (this.directory.addresses$) {
-        const e = this.directory.addresses$.subscribe((s) => {
-          this.addresses = s;
+        const e = this.directory.addresses$.subscribe((i) => {
+          this.addresses = i;
         });
         this.subscriptions.push(e);
       }
       if (this.directory.loading$) {
-        const e = this.directory.loading$.subscribe((s) => {
-          this.loading = s;
+        const e = this.directory.loading$.subscribe((i) => {
+          this.loading = i;
         });
         this.subscriptions.push(e);
       }
       if (this.directory.hasMore$) {
-        const e = this.directory.hasMore$.subscribe((s) => {
-          this.hasMore = s;
+        const e = this.directory.hasMore$.subscribe((i) => {
+          this.hasMore = i;
         });
         this.subscriptions.push(e);
       }
@@ -45,15 +45,15 @@ let o = class extends p {
     this.setupInfiniteScroll();
   }
   setupInfiniteScroll() {
-    var s, a;
-    const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector(".scroll-sentinel");
+    var i, o;
+    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".scroll-sentinel");
     e && (this.intersectionObserver = new IntersectionObserver(
-      (r) => {
-        const t = r[0];
-        t != null && t.isIntersecting && this.hasMore && !this.loading && this.handleLoadMore();
+      (t) => {
+        const s = t[0];
+        s != null && s.isIntersecting && this.hasMore && !this.loading && this.handleLoadMore();
       },
       {
-        root: (a = this.shadowRoot) == null ? void 0 : a.querySelector(".list"),
+        root: (o = this.shadowRoot) == null ? void 0 : o.querySelector(".list"),
         rootMargin: "100px",
         threshold: 0
       }
@@ -70,13 +70,13 @@ let o = class extends p {
       return this.addresses;
     const e = this.searchQuery.toLowerCase();
     return this.addresses.filter(
-      (s) => s.name.toLowerCase().includes(e) || s.displayName && s.displayName.toLowerCase().includes(e)
+      (i) => i.name.toLowerCase().includes(e) || i.displayName && i.displayName.toLowerCase().includes(e)
     );
   }
   handleSearchInput(e) {
-    const s = e.target;
+    const i = e.target;
     this.searchDebounceTimer && clearTimeout(this.searchDebounceTimer), this.searchDebounceTimer = window.setTimeout(() => {
-      this.searchQuery = s.value;
+      this.searchQuery = i.value;
     }, 200);
   }
   handleItemClick(e) {
@@ -105,51 +105,30 @@ let o = class extends p {
     (e = this.directory) != null && e.loadMore && await this.directory.loadMore();
   }
   renderAddressIcon(e) {
-    return e.type === "room" ? i`
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-          <path
-            d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 3c1.93 0 3.5 1.57 3.5 3.5S13.93 13 12 13s-3.5-1.57-3.5-3.5S10.07 6 12 6zm7 13H5v-.23c0-.62.28-1.2.76-1.58C7.47 15.82 9.64 15 12 15s4.53.82 6.24 2.19c.48.38.76.97.76 1.58V19z"
-          />
-        </svg>
-      ` : i`
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-        <path
-          d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
-        />
-      </svg>
-    `;
+    const i = e.type === "room" ? "room" : "person";
+    return a`<sw-ui-icon name=${i} size="20"></sw-ui-icon>`;
   }
   renderChannelIcons(e) {
-    const s = e.channels || {};
-    return i`
+    const i = e.channels || {};
+    return a`
       <div class="item-channels">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="${s.audio ? "active" : ""}"
+        <sw-ui-icon
+          name="mic-on"
+          size="16"
+          class="${i.audio ? "active" : ""}"
           title="Audio"
-        >
-          <path
-            d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z"
-          />
-        </svg>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="${s.video ? "active" : ""}"
+        ></sw-ui-icon>
+        <sw-ui-icon
+          name="camera-on"
+          size="16"
+          class="${i.video ? "active" : ""}"
           title="Video"
-        >
-          <path
-            d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"
-          />
-        </svg>
+        ></sw-ui-icon>
       </div>
     `;
   }
   renderLoadingIndicator() {
-    return i`
+    return a`
       <div class="scroll-loading">
         <div class="spinner"></div>
         <span>${this.isAutoLoadingForSearch ? "Searching..." : "Loading more..."}</span>
@@ -157,8 +136,8 @@ let o = class extends p {
     `;
   }
   render() {
-    const e = this.loading && this.addresses.length === 0, s = !this.loading && this.filteredAddresses.length === 0 && !this.hasMore, a = this.isAutoLoadingForSearch && this.filteredAddresses.length === 0;
-    return i`
+    const e = this.loading && this.addresses.length === 0, i = !this.loading && this.filteredAddresses.length === 0 && !this.hasMore, o = this.isAutoLoadingForSearch && this.filteredAddresses.length === 0;
+    return a`
       <div class="container" part="container">
         <div class="search" part="search">
           <input
@@ -171,45 +150,37 @@ let o = class extends p {
         </div>
 
         <div class="list" part="list" role="listbox">
-          ${e ? i`<div class="loading">Loading...</div>` : a ? this.renderLoadingIndicator() : s ? i`<div class="empty">No addresses found</div>` : i`
+          ${e ? a`<div class="loading">Loading...</div>` : o ? this.renderLoadingIndicator() : i ? a`<div class="empty">No addresses found</div>` : a`
                     ${this.filteredAddresses.map(
-      (r) => {
-        var t, n, l;
-        return i`
+      (t) => {
+        var s, c, d;
+        return a`
                         <div
-                          class="item ${((t = this.selectedAddress) == null ? void 0 : t.id) === r.id ? "selected" : ""}"
-                          part="item ${((n = this.selectedAddress) == null ? void 0 : n.id) === r.id ? "item-selected" : ""}"
+                          class="item ${((s = this.selectedAddress) == null ? void 0 : s.id) === t.id ? "selected" : ""}"
+                          part="item ${((c = this.selectedAddress) == null ? void 0 : c.id) === t.id ? "item-selected" : ""}"
                           role="option"
-                          aria-selected="${((l = this.selectedAddress) == null ? void 0 : l.id) === r.id}"
-                          @click=${() => this.handleItemClick(r)}
-                          @dblclick=${() => this.handleItemDoubleClick(r)}
+                          aria-selected="${((d = this.selectedAddress) == null ? void 0 : d.id) === t.id}"
+                          @click=${() => this.handleItemClick(t)}
+                          @dblclick=${() => this.handleItemDoubleClick(t)}
                         >
-                          <div class="item-icon">${this.renderAddressIcon(r)}</div>
+                          <div class="item-icon">${this.renderAddressIcon(t)}</div>
                           <div class="item-content">
                             <div class="item-name" part="item-name">
-                              ${r.displayName || r.name}
+                              ${t.displayName || t.name}
                             </div>
                             <div class="item-type" part="item-type">
-                              ${r.type || "address"}
+                              ${t.type || "address"}
                             </div>
                           </div>
-                          ${this.renderChannelIcons(r)}
+                          ${this.renderChannelIcons(t)}
                           <button
                             class="dial-button"
                             @click=${(h) => {
-          h.stopPropagation(), this.handleDial(r);
+          h.stopPropagation(), this.handleDial(t);
         }}
-                            aria-label="Call ${r.displayName || r.name}"
+                            aria-label="Call ${t.displayName || t.name}"
                           >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24"
-                              fill="currentColor"
-                            >
-                              <path
-                                d="M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"
-                              />
-                            </svg>
+                            <sw-ui-icon name="phone-call" size="18"></sw-ui-icon>
                           </button>
                         </div>
                       `;
@@ -225,89 +196,49 @@ let o = class extends p {
     `;
   }
 };
-o.styles = u`
+r.styles = p`
     :host {
-      /* CSS Custom Properties for theming */
-      --sw-color-primary: #044cf6;
-      --sw-color-primary-hover: #0339c4;
-      --sw-color-success: #10b981;
-      --sw-color-text: #1f2937;
-      --sw-color-text-muted: #6b7280;
-      --sw-color-background: #ffffff;
-      --sw-color-background-hover: #f3f4f6;
-      --sw-color-background-active: #e5e7eb;
-      --sw-color-border: #e5e7eb;
-      --sw-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      --sw-font-size-sm: 12px;
-      --sw-font-size-base: 14px;
-      --sw-font-size-lg: 16px;
-      --sw-space-1: 4px;
-      --sw-space-2: 8px;
-      --sw-space-3: 12px;
-      --sw-space-4: 16px;
-      --sw-border-radius: 8px;
-
       display: block;
-      font-family: var(--sw-font-family);
-    }
-
-    /* Dark mode support */
-    :host([data-theme='dark']) {
-      --sw-color-text: #f9fafb;
-      --sw-color-text-muted: #9ca3af;
-      --sw-color-background: #1f2937;
-      --sw-color-background-hover: #374151;
-      --sw-color-background-active: #4b5563;
-      --sw-color-border: #374151;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      :host(:not([data-theme='light'])) {
-        --sw-color-text: #f9fafb;
-        --sw-color-text-muted: #9ca3af;
-        --sw-color-background: #1f2937;
-        --sw-color-background-hover: #374151;
-        --sw-color-background-active: #4b5563;
-        --sw-color-border: #374151;
-      }
+      font-family: var(--type-family-body);
+      color: var(--fg-default);
     }
 
     .container {
       display: flex;
       flex-direction: column;
-      background: var(--sw-color-background);
-      border: 1px solid var(--sw-color-border);
-      border-radius: var(--sw-border-radius);
+      background: var(--bg-surface);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
       overflow: hidden;
     }
 
     .search {
       display: flex;
       align-items: center;
-      gap: var(--sw-space-2);
-      padding: var(--sw-space-3);
-      border-bottom: 1px solid var(--sw-color-border);
+      gap: var(--sp-2);
+      padding: var(--sp-3);
+      border-bottom: 1px solid var(--border-default);
     }
 
     .search-input {
       flex: 1;
-      padding: var(--sw-space-2) var(--sw-space-3);
-      border: 1px solid var(--sw-color-border);
-      border-radius: var(--sw-border-radius);
-      background: var(--sw-color-background);
-      color: var(--sw-color-text);
-      font-family: var(--sw-font-family);
-      font-size: var(--sw-font-size-base);
+      padding: var(--sp-2) var(--sp-3);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-md);
+      background: var(--bg-surface);
+      color: var(--fg-default);
+      font-family: var(--type-family-body);
+      font-size: var(--type-size-small);
       outline: none;
       transition: border-color 0.15s ease;
     }
 
     .search-input:focus {
-      border-color: var(--sw-color-primary);
+      border-color: var(--interactive-button-primary-bg);
     }
 
     .search-input::placeholder {
-      color: var(--sw-color-text-muted);
+      color: var(--fg-muted);
     }
 
     .list {
@@ -320,9 +251,9 @@ o.styles = u`
     .item {
       display: flex;
       align-items: center;
-      gap: var(--sw-space-3);
-      padding: var(--sw-space-3) var(--sw-space-4);
-      border-bottom: 1px solid var(--sw-color-border);
+      gap: var(--sp-3);
+      padding: var(--sp-3) var(--sp-4);
+      border-bottom: 1px solid var(--border-default);
       cursor: pointer;
       transition: background-color 0.15s ease;
     }
@@ -332,15 +263,15 @@ o.styles = u`
     }
 
     .item:hover {
-      background: var(--sw-color-background-hover);
+      background: var(--bg-surface-raised);
     }
 
     .item:active {
-      background: var(--sw-color-background-active);
+      background: var(--interactive-dropdown-hover);
     }
 
     .item.selected {
-      background: var(--sw-color-primary);
+      background: var(--interactive-button-primary-bg);
       color: white;
     }
 
@@ -356,8 +287,8 @@ o.styles = u`
       width: 40px;
       height: 40px;
       border-radius: 50%;
-      background: var(--sw-color-background-hover);
-      color: var(--sw-color-text-muted);
+      background: var(--bg-surface-raised);
+      color: var(--fg-muted);
       flex-shrink: 0;
     }
 
@@ -366,7 +297,8 @@ o.styles = u`
       color: white;
     }
 
-    .item-icon svg {
+    .item-icon svg,
+    .item-icon sw-ui-icon {
       width: 20px;
       height: 20px;
     }
@@ -377,7 +309,7 @@ o.styles = u`
     }
 
     .item-name {
-      font-size: var(--sw-font-size-base);
+      font-size: var(--type-size-small);
       font-weight: 500;
       color: inherit;
       white-space: nowrap;
@@ -386,24 +318,24 @@ o.styles = u`
     }
 
     .item-type {
-      font-size: var(--sw-font-size-sm);
-      color: var(--sw-color-text-muted);
+      font-size: var(--type-size-caption);
+      color: var(--fg-muted);
       text-transform: capitalize;
     }
 
     .item-channels {
       display: flex;
-      gap: var(--sw-space-1);
-      color: var(--sw-color-text-muted);
+      gap: var(--sp-1);
+      color: var(--fg-muted);
     }
 
-    .item-channels svg {
+    .item-channels sw-ui-icon {
       width: 16px;
       height: 16px;
     }
 
-    .item-channels .active {
-      color: var(--sw-color-success);
+    .item-channels sw-ui-icon.active {
+      color: var(--interactive-status-success);
     }
 
     .loading,
@@ -411,16 +343,16 @@ o.styles = u`
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: var(--sw-space-4);
-      color: var(--sw-color-text-muted);
-      font-size: var(--sw-font-size-base);
+      padding: var(--sp-4);
+      color: var(--fg-muted);
+      font-size: var(--type-size-small);
     }
 
     .scroll-sentinel {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: var(--sw-space-3);
+      padding: var(--sp-3);
       min-height: 1px;
     }
 
@@ -428,17 +360,17 @@ o.styles = u`
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: var(--sw-space-2);
-      padding: var(--sw-space-3);
-      color: var(--sw-color-text-muted);
-      font-size: var(--sw-font-size-sm);
+      gap: var(--sp-2);
+      padding: var(--sp-3);
+      color: var(--fg-muted);
+      font-size: var(--type-size-caption);
     }
 
     .spinner {
       width: 16px;
       height: 16px;
-      border: 2px solid var(--sw-color-border);
-      border-top-color: var(--sw-color-primary);
+      border: 2px solid var(--border-default);
+      border-top-color: var(--interactive-button-primary-bg);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
@@ -455,7 +387,7 @@ o.styles = u`
       justify-content: center;
       width: 36px;
       height: 36px;
-      background: var(--sw-color-success);
+      background: var(--interactive-status-success);
       border: none;
       border-radius: 50%;
       color: white;
@@ -468,36 +400,35 @@ o.styles = u`
       background: #0ea472;
     }
 
-    .dial-button svg {
-      width: 18px;
-      height: 18px;
+    .dial-button sw-ui-icon {
+      pointer-events: none;
     }
   `;
-c([
-  v({ type: Object })
-], o.prototype, "directory", 2);
-c([
-  d()
-], o.prototype, "selectedAddress", 2);
-c([
-  d()
-], o.prototype, "searchQuery", 2);
-c([
-  d()
-], o.prototype, "addresses", 2);
-c([
-  d()
-], o.prototype, "loading", 2);
-c([
-  d()
-], o.prototype, "hasMore", 2);
-c([
-  d()
-], o.prototype, "isAutoLoadingForSearch", 2);
-o = c([
-  w("sw-directory")
-], o);
+n([
+  m({ type: Object })
+], r.prototype, "directory", 2);
+n([
+  l()
+], r.prototype, "selectedAddress", 2);
+n([
+  l()
+], r.prototype, "searchQuery", 2);
+n([
+  l()
+], r.prototype, "addresses", 2);
+n([
+  l()
+], r.prototype, "loading", 2);
+n([
+  l()
+], r.prototype, "hasMore", 2);
+n([
+  l()
+], r.prototype, "isAutoLoadingForSearch", 2);
+r = n([
+  b("sw-directory")
+], r);
 export {
-  o as DirectoryComponent
+  r as DirectoryComponent
 };
 //# sourceMappingURL=directory.js.map