@xmesh/system-design 0.0.1

package/dist/lit/components/composer/index.js

@@ -0,0 +1,713 @@
+/*
+  composer/index.ts — Lit port of components/composer/index.jsx.
+
+  <xm-composer> — canonical chat composer.
+
+  Public properties (mirror the React props):
+    initialValue        prefill text
+    initialFocus        focus textarea on first render          (default true)
+    processing          render thinking pill + stop button
+    thinkingLabel       text for the thinking pill
+                        (default "Routing query through Planning Path…")
+    maxChars            char counter cap                        (default 5000)
+    counterAt           threshold to show counter (0..1)        (default 0.8)
+    placeholder         textarea placeholder
+                        (default "Describe what you want to create…")
+    showAttachments     enable attach button + drop/paste + chips/cards/tray
+    value               controlled-mode mirror property
+                        (set via JS to seed text from a host)
+    attachments         controlled-mode array — same idea for files
+
+  Events (all bubble, composed):
+    send                detail: { text, attachments: [...] }
+    cancel
+    value-change        detail: { value }
+    attachments-change  detail: { attachments }
+
+  Light DOM. Uses components/composer/index.css + components/button/index.css.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, svg, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+// Side-effect import: registers <xm-button> for use in the toolbar.
+import "../button/index.js";
+/* ---------- attachment helpers (verbatim from JSX) ---------- */
+const STRIP_LIMIT = 10;
+const HARD_CAP = 50;
+const PER_FILE_MAX = 25 * 1024 * 1024;
+const TEXTY_EXTS = new Set([
+    "TXT", "MD", "JSON", "YAML", "YML", "CSV", "LOG", "XML", "HTML", "CSS", "JS",
+    "TS", "JSX", "TSX", "PY", "GO", "RS", "SH", "SQL", "TOML", "INI", "ENV"
+]);
+const fmtSize = (b) => {
+    if (b < 1024)
+        return b + " B";
+    if (b < 1024 * 1024)
+        return (b / 1024).toFixed(b < 10240 ? 1 : 0) + " KB";
+    return (b / (1024 * 1024)).toFixed(1) + " MB";
+};
+let _nextAttId = 1;
+const nextAttId = () => _nextAttId++;
+/* ---------- inline icon SVG fragments ---------- */
+const I_PAPERCLIP = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M21.4 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 17.93 8.83l-8.06 8.06a2 2 0 0 1-2.83-2.83l7.07-7.07" />
+  </svg>
+`;
+const I_SEND = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M7 17L17 7" />
+    <path d="M9 7h8v8" />
+  </svg>
+`;
+const I_PLAY = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M5 4l14 8-14 8V4z" />
+  </svg>
+`;
+const I_FILE = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
+    <path d="M14 3v5h5" />
+  </svg>
+`;
+const I_X = (size = 10) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2.6" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M6 6l12 12M18 6L6 18" />
+  </svg>
+`;
+const I_WARN = (size = 14) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <path d="M12 9v4" />
+    <path d="M12 17h.01" />
+    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+  </svg>
+`;
+const I_CARET = (size = 12) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round"
+       stroke-linejoin="round" class="ds-icon">
+    <polyline points="6 9 12 15 18 9" />
+  </svg>
+`;
+let XmComposer = class XmComposer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.initialValue = "";
+        this.initialFocus = true;
+        this.processing = false;
+        this.thinkingLabel = "";
+        this.maxChars = 5000;
+        this.counterAt = 0.8;
+        this.placeholder = "Describe what you want to create…";
+        this.showAttachments = false;
+        this.value = null;
+        this.attachments = null;
+        this._value = "";
+        this._atts = [];
+        this._warning = null;
+        this._trayOpen = false;
+        this._dragging = false;
+        this._dragDepth = 0;
+        this._warnTimer = null;
+        this._didInitialFocus = false;
+        this._lastValueProp = null;
+        this._lastAttsProp = null;
+        this._clearAtts = () => {
+            this._atts = [];
+            this._trayOpen = false;
+            this._warning = null;
+        };
+        this._send = () => {
+            const t = this._value.trim();
+            const hasAtts = this._atts.length > 0;
+            const overLimit = this._value.length > this.maxChars;
+            if (!t && !hasAtts)
+                return;
+            if (overLimit)
+                return;
+            this.dispatchEvent(new CustomEvent("send", {
+                detail: { text: t || "(attachment only)", attachments: this._atts.slice() },
+                bubbles: true, composed: true,
+            }));
+            this._value = "";
+            this._atts = [];
+            this._trayOpen = false;
+        };
+        this._cancel = () => {
+            this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+        };
+        this._onInput = (e) => {
+            this._value = e.target.value;
+        };
+        this._onKeyDown = (e) => {
+            if (e.key === "Enter" && !e.shiftKey && !this.processing) {
+                e.preventDefault();
+                this._send();
+            }
+        };
+        this._onPaste = (e) => {
+            if (!this.showAttachments)
+                return;
+            const items = e.clipboardData?.items;
+            if (!items)
+                return;
+            const files = [];
+            for (const it of items) {
+                if (it.kind === "file") {
+                    const f = it.getAsFile();
+                    if (f)
+                        files.push(f);
+                }
+            }
+            if (files.length) {
+                e.preventDefault();
+                this._addFiles(files);
+            }
+        };
+        this._onDragEnter = (e) => {
+            if (!this.showAttachments)
+                return;
+            if (!e.dataTransfer?.types?.includes("Files"))
+                return;
+            e.preventDefault();
+            this._dragDepth++;
+            this._dragging = true;
+        };
+        this._onDragOver = (e) => {
+            if (!this.showAttachments)
+                return;
+            if (e.dataTransfer?.types?.includes("Files"))
+                e.preventDefault();
+        };
+        this._onDragLeave = () => {
+            if (!this.showAttachments)
+                return;
+            this._dragDepth = Math.max(0, this._dragDepth - 1);
+            if (this._dragDepth === 0)
+                this._dragging = false;
+        };
+        this._onDrop = (e) => {
+            if (!this.showAttachments)
+                return;
+            if (!e.dataTransfer?.files?.length)
+                return;
+            e.preventDefault();
+            this._dragDepth = 0;
+            this._dragging = false;
+            this._addFiles(e.dataTransfer.files);
+        };
+        this._onBoxClick = (e) => {
+            const target = e.target;
+            if (target instanceof Element && target.closest("textarea, button, xm-button, a, input, label, [role='button']"))
+                return;
+            const ta = this.querySelector(".composer__field");
+            if (!ta)
+                return;
+            ta.focus();
+            const len = ta.value.length;
+            try {
+                ta.setSelectionRange(len, len);
+            }
+            catch (_) { }
+        };
+        this._onPickFile = () => {
+            this.querySelector(".composer__file-input")?.click();
+        };
+        this._onFileInput = (e) => {
+            const input = e.target;
+            if (input.files?.length)
+                this._addFiles(input.files);
+            input.value = "";
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Make the host transparent to flex/grid layout so the inner
+        // .composer-shell behaves as the direct child of whatever container
+        // the host sits in. Matters for selectors like
+        // `.chat-shell__composer > .composer-shell` in components/chat/index.css.
+        if (!this.style.display)
+            this.style.display = "contents";
+        if (this.value != null) {
+            this._value = this.value;
+            this._lastValueProp = this.value;
+        }
+        else if (this.initialValue) {
+            this._value = this.initialValue;
+        }
+        if (Array.isArray(this.attachments)) {
+            this._atts = this.attachments.slice();
+            this._lastAttsProp = this.attachments;
+        }
+    }
+    willUpdate(changed) {
+        // Sync from controlled props when they change identity (mirrors the
+        // React useEffect on controlledValue / controlledAttachments).
+        if (changed.has("value")) {
+            if (this.value != null && this.value !== this._lastValueProp) {
+                this._value = this.value;
+                this._lastValueProp = this.value;
+            }
+        }
+        if (changed.has("attachments")) {
+            if (Array.isArray(this.attachments) && this.attachments !== this._lastAttsProp) {
+                this._atts = this.attachments.slice();
+                this._lastAttsProp = this.attachments;
+            }
+        }
+    }
+    updated(changed) {
+        // Autoresize textarea — match JSX useLayoutEffect (max 240px).
+        const ta = this.querySelector(".composer__field");
+        if (ta) {
+            ta.style.height = "auto";
+            if (ta.scrollHeight > 0) {
+                ta.style.height = Math.min(ta.scrollHeight, 240) + "px";
+            }
+            else {
+                ta.style.removeProperty("height");
+            }
+        }
+        // Initial focus once on first render.
+        if (!this._didInitialFocus && this.initialFocus && ta) {
+            ta.focus();
+            const len = ta.value.length;
+            try {
+                ta.setSelectionRange(len, len);
+            }
+            catch (_) { }
+            this._didInitialFocus = true;
+        }
+        // Notify listeners on value changes from internal updates.
+        if (changed.has("_value")) {
+            this.dispatchEvent(new CustomEvent("value-change", {
+                detail: { value: this._value },
+                bubbles: true, composed: true,
+            }));
+        }
+        if (changed.has("_atts")) {
+            this.dispatchEvent(new CustomEvent("attachments-change", {
+                detail: { attachments: this._atts },
+                bubbles: true, composed: true,
+            }));
+        }
+    }
+    /* ---------- attachment handlers ---------- */
+    _flashWarning(msg) {
+        if (this._warnTimer)
+            clearTimeout(this._warnTimer);
+        if (!msg) {
+            this._warning = null;
+            return;
+        }
+        this._warning = { msg };
+        this._warnTimer = setTimeout(() => { this._warning = null; }, 5000);
+    }
+    _addFiles(fileList) {
+        const incoming = Array.from(fileList);
+        const current = this._atts;
+        const slots = Math.max(0, HARD_CAP - current.length);
+        const accepted = [];
+        let dupes = 0, oversized = 0, overCap = 0;
+        for (const f of incoming) {
+            if (current.some((a) => a.name === f.name && a.size === f.size)) {
+                dupes++;
+                continue;
+            }
+            if (f.size > PER_FILE_MAX) {
+                oversized++;
+                continue;
+            }
+            if (accepted.length >= slots) {
+                overCap++;
+                continue;
+            }
+            accepted.push(f);
+        }
+        const next = [...current];
+        const newlyAdded = [];
+        for (const f of accepted) {
+            const id = nextAttId();
+            const ext = (f.name.split(".").pop() || "").toUpperCase();
+            const isImage = f.type.startsWith("image/");
+            const att = {
+                id, name: f.name, kind: isImage ? "image" : "file",
+                size: f.size, ext,
+            };
+            next.push(att);
+            newlyAdded.push({ att, file: f, isImage, ext });
+        }
+        this._atts = next;
+        // Async readers for previews / line counts — same logic as JSX.
+        for (const { att, file, isImage, ext } of newlyAdded) {
+            if (isImage) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const result = e.target?.result;
+                    if (typeof result !== "string")
+                        return;
+                    this._atts = this._atts.map((a) => a.id === att.id ? { ...a, dataUrl: result } : a);
+                };
+                reader.readAsDataURL(file);
+            }
+            else if (TEXTY_EXTS.has(ext) && file.size <= 2 * 1024 * 1024) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const t = (e.target?.result ?? "");
+                    let count = 0;
+                    for (let i = 0; i < t.length; i++)
+                        if (t.charCodeAt(i) === 10)
+                            count++;
+                    if (t.length && t.charCodeAt(t.length - 1) !== 10)
+                        count++;
+                    this._atts = this._atts.map((a) => a.id === att.id ? { ...a, lines: count } : a);
+                };
+                reader.readAsText(file);
+            }
+            else if (ext === "PDF") {
+                // Synchronous estimate for the placeholder; React mutated the att
+                // object directly. We patch through a state update for parity.
+                this._atts = this._atts.map((a) => a.id === att.id
+                    ? { ...a, pages: Math.max(1, Math.round(file.size / (60 * 1024))) }
+                    : a);
+            }
+        }
+        const parts = [];
+        if (overCap)
+            parts.push(`${overCap} skipped (${HARD_CAP}-file cap reached)`);
+        if (oversized)
+            parts.push(`${oversized} too large (>${fmtSize(PER_FILE_MAX)} each)`);
+        if (dupes)
+            parts.push(`${dupes} duplicate${dupes > 1 ? "s" : ""} ignored`);
+        this._flashWarning(parts.length ? parts.join(" · ") : null);
+    }
+    _removeAtt(id) {
+        const next = this._atts.filter((a) => a.id !== id);
+        if (next.length <= STRIP_LIMIT)
+            this._trayOpen = false;
+        this._atts = next;
+    }
+    /* ---------- render fragments ---------- */
+    _renderAttCard(att) {
+        if (att.kind === "image" && att.dataUrl) {
+            const meta = att.dims ? `${att.dims} · ${fmtSize(att.size)}` : fmtSize(att.size);
+            return html `
+        <div class="att-card att-card--media" title="${att.name}">
+          <span
+            class="att-card__media"
+            style="background-image:url(${att.dataUrl})"
+            role="img"
+            aria-label="${att.name}"
+          ></span>
+          <span class="att-card__ext">${att.ext || "IMG"}</span>
+          <span class="att-card__meta">${meta}</span>
+          <button class="att-card__x" aria-label="remove attachment"
+                  @click=${() => this._removeAtt(att.id)}>${I_X()}</button>
+        </div>
+      `;
+        }
+        const primary = att.lines != null ? `${att.lines.toLocaleString()} lines` :
+            att.pages != null ? `${att.pages} page${att.pages === 1 ? "" : "s"}` : null;
+        const secondary = fmtSize(att.size);
+        return html `
+      <div class="att-card att-card--text" title="${att.name}">
+        <span class="att-card__name">${att.name}</span>
+        ${primary
+            ? html `
+              <span class="att-card__sub">
+                <span class="att-card__sub-primary">${primary}</span>
+                <span class="att-card__sub-secondary">${secondary}</span>
+              </span>
+            `
+            : html `<span class="att-card__sub">${secondary}</span>`}
+        <span class="att-card__ext">${att.ext || "FILE"}</span>
+        <button class="att-card__x" aria-label="remove attachment"
+                @click=${() => this._removeAtt(att.id)}>${I_X()}</button>
+      </div>
+    `;
+    }
+    _renderAttRow(att) {
+        const ext = att.kind === "image" ? (att.ext || "PNG") : (att.ext || "FILE");
+        const meta = att.lines != null ? `${att.lines.toLocaleString()} lines` :
+            att.pages != null ? `${att.pages} page${att.pages === 1 ? "" : "s"}` :
+                att.dims ? att.dims : null;
+        return html `
+      <div class="att__row">
+        ${att.kind === "image" && att.dataUrl
+            ? html `<span class="att__row-thumb"
+                       style="background-image:url(${att.dataUrl})"></span>`
+            : html `<span class="att__row-icon">${I_FILE()}</span>`}
+        <span class="att__row-name" title="${att.name}">${att.name}</span>
+        ${meta
+            ? html `
+              <span class="att__row-meta">
+                <span class="att__row-meta-primary">${meta}</span>
+                <span class="att__row-meta-secondary">${ext} · ${fmtSize(att.size)}</span>
+              </span>
+            `
+            : html `<span class="att__row-size">${ext} · ${fmtSize(att.size)}</span>`}
+        <button class="att__row-x" aria-label="remove attachment"
+                @click=${() => this._removeAtt(att.id)}>${I_X(9)}</button>
+      </div>
+    `;
+    }
+    _renderAttachments() {
+        const atts = this._atts;
+        const warning = this._warning;
+        if (atts.length === 0 && !warning)
+            return nothing;
+        const n = atts.length;
+        const sumSize = atts.reduce((s, a) => s + (a.size || 0), 0);
+        return html `
+      <div class="att">
+        ${warning
+            ? html `<div class="att__warn" role="status">${I_WARN()}<span>${warning.msg}</span></div>`
+            : nothing}
+        ${n > 0
+            ? html `
+              <div class="att__header">
+                <span class="att__header-left">
+                  <span class="att__pip">${n}</span>
+                  ${n === 1 ? " attachment" : " attachments"} · ${fmtSize(sumSize)}
+                </span>
+                <span class="att__header-right">
+                  <button class="att__link" @click=${this._clearAtts}>Clear all</button>
+                </span>
+              </div>
+              ${n <= STRIP_LIMIT
+                ? html `<div class="att__grid">${atts.map((a) => this._renderAttCard(a))}</div>`
+                : html `
+                    <button
+                      type="button"
+                      class="att__bundle"
+                      aria-expanded="${this._trayOpen}"
+                      @click=${() => { this._trayOpen = !this._trayOpen; }}
+                    >
+                      <span class="att__bundle-stack" aria-hidden="true">
+                        <span></span><span></span>
+                        <span>${I_FILE()}</span>
+                      </span>
+                      <span class="att__bundle-meta">
+                        <span class="att__bundle-name">${n} files bundled</span>
+                        <span class="att__bundle-sub">${fmtSize(sumSize)} · ${this._trayOpen ? "Hide list" : "View list"}</span>
+                      </span>
+                      <span class="att__bundle-caret">${I_CARET()}</span>
+                    </button>
+                    ${this._trayOpen
+                    ? html `<div class="att__tray" role="list">
+                          ${atts.map((a) => this._renderAttRow(a))}
+                        </div>`
+                    : nothing}
+                  `}
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    _renderHint() {
+        if (this.processing) {
+            return html `
+        <span class="composer__hint">
+          Click <span class="composer__stop-icon"
+                      style="vertical-align:-1px;margin:0 2px"
+                      aria-hidden="true"></span> to cancel current request
+        </span>
+      `;
+        }
+        const n = this._atts.length;
+        if (n >= HARD_CAP) {
+            return html `<span class="composer__hint">${HARD_CAP}/${HARD_CAP} attached · cap reached</span>`;
+        }
+        if (n > STRIP_LIMIT) {
+            return html `<span class="composer__hint">${n} attached · expand list to manage</span>`;
+        }
+        if (n > 0) {
+            return html `<span class="composer__hint">${n} attached · paste with <kbd>⌘V</kbd></span>`;
+        }
+        return html `<span class="composer__hint">Enter to send · <kbd>Shift</kbd>+<kbd>Enter</kbd> for new line</span>`;
+    }
+    render() {
+        const text = this._value;
+        const hasText = text.trim().length > 0;
+        const hasAtts = this._atts.length > 0;
+        const charCount = text.length;
+        const overLimit = charCount > this.maxChars;
+        const showCounter = charCount >= this.maxChars * this.counterAt;
+        const canSend = (hasText || hasAtts) && !overLimit && !this.processing;
+        return html `
+      <div class="composer-shell">
+        <div
+          class="composer ${this._dragging ? "composer--dragging" : ""}"
+          @click=${this._onBoxClick}
+          @dragenter=${this._onDragEnter}
+          @dragover=${this._onDragOver}
+          @dragleave=${this._onDragLeave}
+          @drop=${this._onDrop}
+        >
+          ${this.showAttachments ? this._renderAttachments() : nothing}
+
+          ${this.processing
+            ? html `
+                <div class="composer__thinking" role="status" aria-live="polite">
+                  <span class="composer__thinking-dots" aria-hidden="true">
+                    <span class="composer__thinking-dot"></span>
+                    <span class="composer__thinking-dot"></span>
+                    <span class="composer__thinking-dot"></span>
+                  </span>
+                  <span class="composer__thinking-label">${this.thinkingLabel || "Routing query through Planning Path…"}</span>
+                </div>
+              `
+            : nothing}
+
+          <textarea
+            class="composer__field scroll-canvas"
+            name="message"
+            rows="1"
+            .value=${text}
+            placeholder="${this.placeholder}"
+            aria-label="Message"
+            @input=${this._onInput}
+            @keydown=${this._onKeyDown}
+            @paste=${this._onPaste}
+          ></textarea>
+
+          <div class="composer__toolbar">
+            <div class="composer__toolbar-left">
+              ${this.showAttachments
+            ? html `
+                    <xm-button
+                      variant="ghost"
+                      size="sm"
+                      icon-only
+                      aria-label="attach"
+                      title="Attach file"
+                      @click=${this._onPickFile}
+                    >${I_PAPERCLIP()}</xm-button>
+                    <input
+                      type="file"
+                      multiple
+                      hidden
+                      class="composer__file-input"
+                      @change=${this._onFileInput}
+                    />
+                  `
+            : nothing}
+            </div>
+            <div class="composer__toolbar-right">
+              ${showCounter && !this.processing
+            ? html `
+                    <span class="composer__counter ${overLimit ? "composer__counter--over" : "composer__counter--warn"}">
+                      ${charCount.toLocaleString()} / ${this.maxChars.toLocaleString()}
+                    </span>
+                  `
+            : nothing}
+
+              ${!this.processing
+            ? html `
+                    <xm-button
+                      variant="primary"
+                      size="sm"
+                      aria-label="send"
+                      ?disabled=${!canSend}
+                      title="${overLimit ? "Message too long" : canSend ? "Send (Enter)" : "Type a message to send"}"
+                      @click=${this._send}
+                    >
+                      <span slot="icon-left">${I_SEND()}</span>
+                      Send
+                    </xm-button>
+                  `
+            : html `
+                    <xm-button
+                      variant="ghost-canvas"
+                      size="sm"
+                      icon-only
+                      disabled
+                      aria-label="sending"
+                      title="Generating response…"
+                    >${I_PLAY()}</xm-button>
+                    <xm-button
+                      variant="ghost-canvas"
+                      size="sm"
+                      icon-only
+                      aria-label="stop"
+                      title="Cancel current request"
+                      @click=${this._cancel}
+                    ><span class="composer__stop-icon"></span></xm-button>
+                  `}
+            </div>
+          </div>
+        </div>
+        <div class="composer-shell__bottom">${this._renderHint()}</div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String, attribute: "initial-value" })
+], XmComposer.prototype, "initialValue", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "initial-focus" })
+], XmComposer.prototype, "initialFocus", void 0);
+__decorate([
+    property({ type: Boolean })
+], XmComposer.prototype, "processing", void 0);
+__decorate([
+    property({ type: String, attribute: "thinking-label" })
+], XmComposer.prototype, "thinkingLabel", void 0);
+__decorate([
+    property({ type: Number, attribute: "max-chars" })
+], XmComposer.prototype, "maxChars", void 0);
+__decorate([
+    property({ type: Number, attribute: "counter-at" })
+], XmComposer.prototype, "counterAt", void 0);
+__decorate([
+    property({ type: String })
+], XmComposer.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-attachments" })
+], XmComposer.prototype, "showAttachments", void 0);
+__decorate([
+    property({ attribute: false })
+], XmComposer.prototype, "value", void 0);
+__decorate([
+    property({ attribute: false })
+], XmComposer.prototype, "attachments", void 0);
+__decorate([
+    state()
+], XmComposer.prototype, "_value", void 0);
+__decorate([
+    state()
+], XmComposer.prototype, "_atts", void 0);
+__decorate([
+    state()
+], XmComposer.prototype, "_warning", void 0);
+__decorate([
+    state()
+], XmComposer.prototype, "_trayOpen", void 0);
+__decorate([
+    state()
+], XmComposer.prototype, "_dragging", void 0);
+XmComposer = __decorate([
+    customElement("xm-composer")
+], XmComposer);