@2lab.ai/ui 0.0.0-stage → 0.1.1

package/dist/ai-answer.js

@@ -0,0 +1,687 @@
+import { d as define, U as UiElement, e as esc, f as escAttr, s as safeHref, p as prefersReducedMotion } from "./html-DZWnrdcg.js";
+const styles = `
+.ui-root { container: ans / inline-size; }
+.ans-card { position: relative; padding: 12px 14px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--ib-shadow); overflow: hidden; }
+.ans-card.is-in > * { animation: ans-in var(--dur-fade) var(--ease-out) both; }
+.ans-title { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); overflow-wrap: anywhere; }
+
+/* Link cards (D6): a sideways row, scrollbar hidden, both ends fade. */
+.ans-srcs { display: flex; gap: 8px; margin: -4px -14px 8px; padding: 4px 14px; list-style: none; overflow-x: auto; scrollbar-width: none;
+  -webkit-mask: linear-gradient(90deg, transparent, black 12px, black calc(100% - 12px), transparent);
+  mask: linear-gradient(90deg, transparent, black 12px, black calc(100% - 12px), transparent); }
+.ans-srcs::-webkit-scrollbar { display: none; }
+.ans-srcs > li { flex: none; display: flex; }
+.ans-src { display: flex; flex-direction: column; gap: 4px; width: 148px; min-height: 64px; padding: 8px 10px; border-radius: 10px; background: var(--surface-raised); color: inherit; text-decoration: none; transition: background-color var(--dur-press) ease, box-shadow var(--dur-press) ease; }
+.ans-card.is-in .ans-src { animation: ans-pop var(--dur-move) var(--ease-out) both; animation-delay: calc(var(--ans-i, 0) * 60ms); }
+.ans-src:hover { background: var(--ib-pill); }
+.ans-src.is-lit { box-shadow: inset 0 0 0 1.5px var(--text-tertiary); }
+.ans-src-site { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; color: var(--text-secondary); }
+.ans-src-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.ans-src-num { flex: none; font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
+.ans-src-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.4; color: var(--text); word-break: break-word; }
+
+/* Label (D9) and body (D2). */
+.ans-label { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
+.ans-body { font-size: 13.5px; line-height: 1.6; }
+.ans-body > :last-child { margin-bottom: 0; }
+
+/* The document (dashboard .md-doc). */
+.md-doc { color: var(--text); word-break: break-word; }
+.md-doc h1, .md-doc h2, .md-doc h3, .md-doc h4, .md-doc h5, .md-doc h6 { margin: 1.3em 0 0.5em; line-height: 1.3; letter-spacing: -0.01em; }
+.md-doc h1, .md-doc h2 { font-size: 1.15em; }
+.md-doc h3, .md-doc h4, .md-doc h5, .md-doc h6 { font-size: 1em; }
+.md-doc > :first-child { margin-top: 0; }
+.md-doc p, .md-doc ul, .md-doc ol, .md-doc blockquote, .md-doc pre, .md-doc .md-table { margin: 0 0 0.9em; }
+.md-doc ul, .md-doc ol { padding-left: 1.4em; }
+.md-doc li + li { margin-top: 0.2em; }
+.md-doc li > ul, .md-doc li > ol { margin: 0.2em 0 0; }
+.md-doc code { padding: 0.1em 0.35em; border-radius: 4px; background: var(--ib-pill); font: 0.88em var(--mono); }
+.md-doc pre { padding: 12px 14px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--ib-col); }
+.md-doc pre code { padding: 0; background: none; font-size: 12.5px; line-height: 1.55; }
+.md-doc blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--border-focus); color: var(--text-secondary); }
+.md-doc blockquote > :last-child { margin-bottom: 0; }
+.md-doc hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--border); }
+.md-doc a { color: var(--accent); }
+.md-doc .md-table { overflow-x: auto; }
+.md-doc table { border-collapse: collapse; font-size: 0.93em; }
+.md-doc th, .md-doc td { padding: 6px 10px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
+.md-doc th { background: var(--ib-col); font-weight: 600; }
+
+/* Link chips (D7) — lit = inverted (D8). */
+.ans-body .ans-cite { display: inline-block; max-width: 16ch; height: 18px; margin: 0 1px 0 3px; padding: 0 6px; overflow: hidden; border-radius: 6px; background: var(--surface-raised); font-size: 11px; font-weight: 500; line-height: 18px; color: var(--text-secondary); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; transition: background-color var(--dur-press) ease, color var(--dur-press) ease; }
+.ans-body .ans-cite:hover { background: var(--ib-pill); color: var(--text); }
+.ans-body .ans-cite.is-lit { background: var(--text); color: var(--surface); }
+.ans-nb { white-space: nowrap; }
+.ans-cite:focus-visible, .ans-src:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
+
+/* Footer (D10): Copy · status · response time. */
+.ans-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
+.ans-btn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--ib-card-border); border-radius: 8px; background: var(--ib-card); font-size: 13px; font-weight: 500; color: var(--ib-text); white-space: nowrap; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
+.ans-btn svg { width: 13px; height: 13px; }
+.ans-copy[data-copied] { color: var(--green); }
+.ans-status { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--text-tertiary); }
+.ans-end { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; margin-left: auto; min-width: 0; }
+.ans-took { font-size: 11.5px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }
+@media (hover: hover) and (pointer: fine) { .ans-btn:hover { border-color: var(--ib-muted); } }
+
+/* Writing (D12): a sweep over the words + a pulsing run-colour dot. */
+.ans-foot.is-writing { min-height: 41px; }
+.ans-writing { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.ans-shimmer { color: transparent; background: linear-gradient(90deg, var(--text-tertiary) 38%, var(--text) 50%, var(--text-tertiary) 62%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: ans-sweep 1.6s linear infinite; }
+.ans-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--st-run); animation: ans-pulse 1s ease-in-out infinite; }
+
+/* Loading · empty · failed (D13). */
+.ans-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; font-size: 12px; color: var(--text-tertiary); }
+.ans-error { font-size: 12px; color: var(--st-fail-text); overflow-wrap: anywhere; }
+
+@keyframes ans-in { from { opacity: 0; filter: blur(2px); transform: translateY(3px); } to { opacity: 1; filter: none; transform: none; } }
+@keyframes ans-pop { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
+@keyframes ans-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
+@keyframes ans-pulse { 50% { transform: scale(0.6); opacity: 0.45; } }
+
+@container ans (min-width: 520px) {
+  .ans-card { padding: 16px 18px 12px; }
+  .ans-title { font-size: 16.5px; }
+  .ans-srcs { margin: -4px -18px 10px; padding: 4px 18px; }
+  .ans-src { width: 172px; }
+  .ans-body { font-size: 14px; }
+}
+
+/* Touch (D16): the chip's hit area grows, chips are never cut, buttons are 44px. */
+@media (pointer: coarse) {
+  .ans-body .ans-cite { position: relative; overflow: visible; max-width: none; }
+  .ans-cite::after { content: ''; position: absolute; inset: -10px -4px; }
+  .ans-btn { min-height: 44px; }
+}
+/* The global rule only shortens durations, so infinite loops would flicker: stop them. */
+@media (prefers-reduced-motion: reduce) {
+  .ans-shimmer, .ans-dot, .ans-src, .ans-card.is-in > * { animation: none !important; }
+  .ans-shimmer { background: none; color: var(--text-tertiary); }
+  .ans-src, .ans-body .ans-cite { transition: none; }
+}
+`;
+const COPIED_MS = 1500;
+const GLIDE_MS = 600;
+const plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+const STRINGS = {
+  en: {
+    label: (n) => n ? `Answer · ${plural(n, "link", "links")}` : "Answer",
+    list: (n) => `${plural(n, "link", "links")} in this answer`,
+    cite: (n, title, name) => `Link ${n}: ${title} (${name})`,
+    issue: "Issue",
+    commit: "Commit",
+    linksHead: "Links:",
+    copy: "Copy",
+    copied: "Copied",
+    copiedSay: (n) => n ? `Copied the answer and ${plural(n, "link", "links")}` : "Copied the answer",
+    selected: "Selected — press ⌘C / Ctrl+C to copy",
+    writing: "Writing the answer",
+    loading: "Loading…",
+    empty: "No answer text was recorded",
+    failed: "Couldn’t get the answer",
+    retry: "Try again",
+    under: "Responded in under 1s",
+    secs: (s) => `Responded in ${s}s`,
+    mins: (m, s) => `Responded in ${m}m ${s}s`,
+    hours: (h, m) => `Responded in ${h}h ${m}m`
+  },
+  ko: {
+    label: (n) => n ? `답변 · 링크 ${n}` : "답변",
+    list: (n) => `답변에 포함된 링크 ${n}개`,
+    cite: (n, title, name) => `링크 ${n}: ${title} (${name})`,
+    issue: "이슈",
+    commit: "커밋",
+    linksHead: "링크:",
+    copy: "복사",
+    copied: "복사됨",
+    copiedSay: (n) => n ? `답변과 링크 ${n}개를 복사했습니다` : "답변을 복사했습니다",
+    selected: "선택했습니다 — ⌘C / Ctrl+C로 복사",
+    writing: "응답 작성 중",
+    loading: "불러오는 중…",
+    empty: "기록된 답변 내용이 없습니다",
+    failed: "답변을 불러오지 못했습니다",
+    retry: "다시 시도",
+    under: "응답 1초 미만",
+    secs: (s) => `응답 ${s}초`,
+    mins: (m, s) => `응답 ${m}분 ${s}초`,
+    hours: (h, m) => `응답 ${h}시간 ${m}분`
+  }
+};
+const strings = (lang) => lang === "ko" ? STRINGS.ko : STRINGS.en;
+const HTTP = /^https?:\/\//i;
+const CODE = "";
+const LINK = "";
+function unesc(s) {
+  return s.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+}
+const textOf = (html) => unesc(html.replace(/<[^>]*>/g, ""));
+function answerLinkKey(href) {
+  return String(href ?? "").replace(/\/+$/, "");
+}
+function decode(s) {
+  try {
+    return decodeURIComponent(s);
+  } catch {
+    return s;
+  }
+}
+const encodeParens = (u) => u.replace(/\(/g, "%28").replace(/\)/g, "%29");
+const decodeParens = (u) => u.replace(/%28/gi, "(").replace(/%29/gi, ")");
+function linkifyText(s) {
+  return s.replace(
+    /<(https?:\/\/[^\s<>|]+)(?:\|([^<>]*))?>|https?:\/\/[^\s<>[\]"'`]+/gi,
+    (m, url, label) => {
+      if (url) {
+        const l = String(label ?? "").replace(/[[\]]/g, "").trim();
+        return `[${l || url}](${encodeParens(url)})`;
+      }
+      let u = m;
+      let tail = "";
+      for (let guard = 0; guard < 8; guard++) {
+        const p = u.match(/[.,;:!?*]+$/);
+        if (p) {
+          tail = p[0] + tail;
+          u = u.slice(0, u.length - p[0].length);
+          continue;
+        }
+        if (u.endsWith(")") && u.split("(").length < u.split(")").length) {
+          tail = `)${tail}`;
+          u = u.slice(0, -1);
+          continue;
+        }
+        break;
+      }
+      return `[${u}](${encodeParens(u)})${tail}`;
+    }
+  );
+}
+function answerLinkify(raw) {
+  let fence = "";
+  let fenceQuoted = false;
+  return String(raw ?? "").replace(/\r\n?/g, "\n").split("\n").map((line) => {
+    const quoted = /^\s{0,3}>/.test(line);
+    const body = line.replace(/^(\s{0,3}>\s?)+/, "");
+    if (fence && fenceQuoted && !quoted) fence = "";
+    if (fence) {
+      if (body.trim().startsWith(fence)) fence = "";
+      return line;
+    }
+    const f = body.match(/^\s{0,3}(`{3,}|~{3,})/);
+    if (f) {
+      fence = f[1];
+      fenceQuoted = quoted;
+      return line;
+    }
+    return line.split(/(!?\[[^\]]+\]\((?:[^()\s]|\([^()\s]*\))+\)|`[^`]+`)/).map((part, i) => {
+      if (!(i % 2)) return linkifyText(part);
+      if (part.startsWith("`")) return part;
+      const at = part.indexOf("](");
+      return `${part.slice(0, at + 2)}${encodeParens(part.slice(at + 2, -1))})`;
+    }).join("");
+  }).join("\n");
+}
+const plainLink = (href, label) => `<a href="${safeHref(href)}" target="_blank" rel="noopener noreferrer">${label}</a>`;
+function marks(t) {
+  return t.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/(^|[^*\w])\*([^*\s][^*]*?)\*(?!\w)/g, "$1<em>$2</em>").replace(/~~([^~]+)~~/g, "<del>$1</del>");
+}
+function mdInline(s, link) {
+  const codes = [];
+  const rawCodes = [];
+  const links = [];
+  const restoreCodes = (x) => x.replace(/\uE000(\d+)\uE000/g, (_m, i) => codes[Number(i)] ?? "");
+  const restoreRaw = (x) => x.replace(/\uE000(\d+)\uE000/g, (_m, i) => `\`${rawCodes[Number(i)] ?? ""}\``);
+  let t = String(s ?? "").replace(/[\uE000\uE001]/g, "").replace(/`([^`]+)`/g, (_m, c) => {
+    codes.push(`<code>${escAttr(c)}</code>`);
+    rawCodes.push(c);
+    return `${CODE}${codes.length - 1}${CODE}`;
+  });
+  t = esc(t);
+  t = t.replace(/!?\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, label, href) => {
+    const url = restoreRaw(unesc(href));
+    if (!HTTP.test(url)) return label;
+    links.push(link(url, restoreCodes(marks(label))));
+    return `${LINK}${links.length - 1}${LINK}`;
+  });
+  t = marks(t);
+  t = t.replace(/\uE001(\d+)\uE001/g, (_m, i) => links[Number(i)] ?? "");
+  return restoreCodes(t);
+}
+function answerMarkdown(src, link = plainLink) {
+  const lines = String(src ?? "").replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  let para = [];
+  let i = 0;
+  const inline = (s) => mdInline(s, link);
+  const flush = () => {
+    if (para.length) out.push(`<p>${para.map(inline).join("<br>")}</p>`);
+    para = [];
+  };
+  const cells = (l) => l.trim().replace(/^\|/, "").replace(/\|$/, "").split("|").map((c) => c.trim());
+  const listRe = /^(\s*)([-*+]|\d{1,3}[.)])\s+(.*)$/;
+  while (i < lines.length) {
+    const line = lines[i];
+    const fence = line.match(/^\s{0,3}(`{3,}|~{3,})\s*([\w+#.-]*)/);
+    if (fence) {
+      flush();
+      const code = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith(fence[1])) {
+        code.push(lines[i]);
+        i++;
+      }
+      i++;
+      out.push(
+        `<pre class="md-code"><code${fence[2] ? ` data-lang="${escAttr(fence[2])}"` : ""}>${esc(code.join("\n"))}</code></pre>`
+      );
+      continue;
+    }
+    if (!line.trim()) {
+      flush();
+      i++;
+      continue;
+    }
+    const h = line.match(/^\s{0,3}(#{1,6})\s+(.*?)\s*#*\s*$/);
+    if (h) {
+      flush();
+      out.push(`<h${h[1].length}>${inline(h[2])}</h${h[1].length}>`);
+      i++;
+      continue;
+    }
+    if (/^\s{0,3}([-*_])(\s*\1){2,}\s*$/.test(line)) {
+      flush();
+      out.push("<hr>");
+      i++;
+      continue;
+    }
+    if (/^\s{0,3}>/.test(line)) {
+      flush();
+      const quote = [];
+      while (i < lines.length && /^\s{0,3}>/.test(lines[i])) {
+        quote.push(lines[i].replace(/^\s{0,3}>\s?/, ""));
+        i++;
+      }
+      out.push(`<blockquote>${answerMarkdown(quote.join("\n"), link)}</blockquote>`);
+      continue;
+    }
+    if (line.includes("|") && i + 1 < lines.length && /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?\s*$/.test(lines[i + 1])) {
+      flush();
+      const head = cells(line);
+      const rows = [];
+      i += 2;
+      while (i < lines.length && lines[i].includes("|") && lines[i].trim()) {
+        rows.push(cells(lines[i]));
+        i++;
+      }
+      out.push(
+        `<div class="md-table"><table><thead><tr>${head.map((c) => `<th>${inline(c)}</th>`).join("")}</tr></thead><tbody>${rows.map((r) => `<tr>${head.map((_c, k) => `<td>${inline(r[k] ?? "")}</td>`).join("")}</tr>`).join("")}</tbody></table></div>`
+      );
+      continue;
+    }
+    if (listRe.test(line)) {
+      flush();
+      const items = [];
+      while (i < lines.length) {
+        const m = lines[i].match(listRe);
+        if (m) {
+          items.push({ indent: m[1].replace(/\t/g, "    ").length, ordered: /\d/.test(m[2]), text: m[3] });
+          i++;
+          continue;
+        }
+        if (items.length && /^\s{2,}\S/.test(lines[i])) {
+          items[items.length - 1].text += ` ${lines[i].trim()}`;
+          i++;
+          continue;
+        }
+        break;
+      }
+      let html = "";
+      const stack = [];
+      for (const it of items) {
+        while (stack.length > 1 && it.indent < stack[stack.length - 1].indent) html += `</li></${stack.pop().tag}>`;
+        const top = stack[stack.length - 1];
+        if (!top || it.indent > top.indent) {
+          const tag = it.ordered ? "ol" : "ul";
+          stack.push({ indent: it.indent, tag });
+          html += `<${tag}><li>`;
+        } else {
+          html += "</li><li>";
+        }
+        html += inline(it.text);
+      }
+      while (stack.length) html += `</li></${stack.pop().tag}>`;
+      out.push(html);
+      continue;
+    }
+    para.push(line.trim());
+    i++;
+  }
+  flush();
+  return out.join("\n");
+}
+function answerLinkInfo(href, label = "", lang = "en", titles) {
+  const t = strings(lang);
+  const url = String(href ?? "");
+  const m = url.match(/^https?:\/\/([^/?#]+)([^?#]*)(\?[^#]*)?/i);
+  const host = m ? m[1].toLowerCase().replace(/^www\./, "") : url;
+  const path = m ? m[2] : "";
+  let name = host;
+  let chip = host;
+  let title = "";
+  if (host === "github.com") {
+    name = "GitHub";
+    chip = "GitHub";
+    const seg = path.split("/").filter(Boolean);
+    const repo = seg.slice(0, 2).join("/");
+    const num = seg.length >= 4 && /^\d+$/.test(seg[3]) ? seg[3] : "";
+    if (num && seg[2] === "pull") {
+      title = `PR #${num} · ${repo}`;
+      chip = `#${num}`;
+    } else if (num && seg[2] === "issues") {
+      title = `${t.issue} #${num} · ${repo}`;
+      chip = `#${num}`;
+    } else if (seg.length >= 4 && seg[2] === "commit" && /^[0-9a-f]{7,40}$/i.test(seg[3])) {
+      chip = seg[3].slice(0, 7);
+      title = `${t.commit} ${chip} · ${repo}`;
+    } else title = repo ? repo + (seg.length > 2 ? ` · ${decode(seg.slice(2).join("/"))}` : "") : "github.com";
+  } else {
+    title = decode((path + (m?.[3] ?? "")).replace(/\/+$/, "")) || host;
+  }
+  if (label) title = label;
+  if (titles) {
+    const key = answerLinkKey(url);
+    for (const [u, known] of Object.entries(titles)) if (known && answerLinkKey(u) === key) title = String(known);
+  }
+  return { href: url, name, title, chip };
+}
+function citeHtml(link, k, t) {
+  return `<a class="ans-cite" data-n="${link.n}" data-key="cite-${k}" href="${safeHref(link.href)}" target="_blank" rel="noopener noreferrer" aria-label="${escAttr(
+    t.cite(link.n, link.title, link.name)
+  )}">${esc(link.chip)}</a>`;
+}
+function renderAnswer(markdown, opts = {}) {
+  const t = strings(opts.lang);
+  const md = answerLinkify(markdown);
+  const byKey = /* @__PURE__ */ new Map();
+  const found = [];
+  answerMarkdown(md, (url, labelHtml) => {
+    const href = decodeParens(url);
+    const text = textOf(labelHtml);
+    const key = answerLinkKey(href);
+    const label = text && text !== href ? text : "";
+    const seen = byKey.get(key);
+    if (!seen) {
+      const f = { href, label, n: found.length + 1 };
+      byKey.set(key, f);
+      found.push(f);
+    } else if (!seen.label && label) seen.label = label;
+    return "";
+  });
+  const links = found.map((f) => ({ ...answerLinkInfo(f.href, f.label, opts.lang, opts.titles), n: f.n }));
+  let k = 0;
+  const html = answerMarkdown(md, (url, labelHtml) => {
+    const href = decodeParens(url);
+    const link = links[(byKey.get(answerLinkKey(href))?.n ?? 1) - 1];
+    return (textOf(labelHtml) === href ? "" : labelHtml) + citeHtml(link, k++, t);
+  });
+  return {
+    html: html.replace(
+      /(<a class="ans-cite"[^>]*>[^<]*<\/a>)([^\s<]{1,12})(?![^\s<])/g,
+      '<span class="ans-nb">$1$2</span>'
+    ),
+    links
+  };
+}
+function answerCopyText(markdown, links, lang = "en") {
+  const text = String(markdown ?? "").trim();
+  if (!links.length) return text;
+  return `${text}
+
+${strings(lang).linksHead}
+${links.map((l) => `[${l.n}] ${l.title} – ${l.href}`).join("\n")}`;
+}
+function answerTookLabel(ms, lang = "en") {
+  const t = strings(lang);
+  const v = Number(ms);
+  if (!Number.isFinite(v) || v <= 0) return "";
+  if (v < 1e3) return t.under;
+  const sec = Math.floor(v / 1e3);
+  if (sec < 60) return t.secs(sec);
+  const min = Math.floor(sec / 60);
+  if (min < 60) return t.mins(min, sec % 60);
+  return t.hours(Math.floor(min / 60), min % 60);
+}
+const CHECK_SVG = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 8.5l3 3 6-7"/></svg>';
+class UiAiAnswer extends UiElement {
+  static styles = [styles];
+  static get observedAttributes() {
+    return ["lang"];
+  }
+  #links = [];
+  #lit = 0;
+  #copied = false;
+  #status = "";
+  #timer = 0;
+  #shownMd = "";
+  #glide = null;
+  constructor() {
+    super();
+    this.root.addEventListener("mouseover", (e) => this.#hover(e, true));
+    this.root.addEventListener("mouseout", (e) => this.#hover(e, false));
+    this.root.addEventListener("focusin", (e) => this.#hover(e, true));
+    this.root.addEventListener("focusout", (e) => this.#hover(e, false));
+    this.root.addEventListener("click", (e) => {
+      const t = e.target;
+      const a = t?.closest?.("a[data-n]");
+      if (a) {
+        this.#follow(e, a);
+        return;
+      }
+      if (t?.closest?.(".ans-copy")) this.#copy();
+      else if (t?.closest?.(".ans-retry")) this.emit("ui-retry", {});
+    });
+  }
+  attributeChangedCallback() {
+    this.requestRender();
+  }
+  disconnectedCallback() {
+    clearTimeout(this.#timer);
+    this.#copied = false;
+    this.#status = "";
+  }
+  /** The links of the last render, in card order. */
+  get links() {
+    return this.#links.slice();
+  }
+  get #lang() {
+    return this.getAttribute("lang") === "ko" ? "ko" : "en";
+  }
+  update() {
+    const left = this.$(".ans-srcs")?.scrollLeft ?? 0;
+    super.update();
+    const row = this.$(".ans-srcs");
+    if (row && left) row.scrollLeft = left;
+  }
+  render() {
+    const d = this.data;
+    if (!d) {
+      this.#links = [];
+      return "";
+    }
+    const lang = this.#lang;
+    const t = strings(lang);
+    const md = String(d.markdown ?? "");
+    const has = md.trim() !== "";
+    const streaming = !!d.streaming;
+    const error = d.error ? String(d.error) : "";
+    const title = d.title ? `<h3 class="ans-title">${esc(d.title)}</h3>` : "";
+    const retry = error && d.canRetry ? `<button type="button" class="ans-btn ans-retry" data-key="retry">${esc(t.retry)}</button>` : "";
+    const failed = `<span class="ans-error">${esc(t.failed)}${error ? ` (${esc(error)})` : ""}</span>`;
+    const prev = this.#shownMd;
+    this.#shownMd = md;
+    const enter = has && !streaming && !(prev && md.startsWith(prev));
+    if (!has && !streaming) {
+      this.#links = [];
+      const state = error ? `<div class="ans-state">${failed}${retry}</div>` : d.loading ? `<p class="ans-state ans-loading">${esc(t.loading)}</p>` : `<p class="ans-state ans-empty">${esc(t.empty)}</p>`;
+      return `<section class="ans-card" aria-label="${escAttr(t.label(0))}"${d.loading && !error ? ' aria-busy="true"' : ""}>${title}${state}</section>`;
+    }
+    const a = has ? renderAnswer(md, { lang, titles: d.linkTitles }) : { html: "", links: [] };
+    this.#links = a.links;
+    const n = a.links.length;
+    const srcs = n ? `<ol class="ans-srcs" aria-label="${escAttr(t.list(n))}">${a.links.map(
+      (l, i) => `<li style="--ans-i:${Math.min(i, 6)}"><a class="ans-src" data-n="${l.n}" data-key="src-${l.n}" href="${safeHref(
+        l.href
+      )}" target="_blank" rel="noopener noreferrer" title="${escAttr(l.href)}"><span class="ans-src-site"><span class="ans-src-name">${esc(
+        l.name
+      )}</span><span class="ans-src-num">${l.n}</span></span><span class="ans-src-title">${esc(l.title)}</span></a></li>`
+    ).join("")}</ol>` : "";
+    const body = has ? `<div class="ans-body md-doc">${a.html}</div>` : "";
+    let foot;
+    if (streaming) {
+      foot = `<div class="ans-foot is-writing"><span class="ans-writing"><span class="ans-shimmer">${esc(
+        t.writing
+      )}</span><i class="ans-dot" aria-hidden="true"></i></span></div>`;
+    } else {
+      const took = answerTookLabel(Number(d.responseMs), lang);
+      const right = error ? `${failed}${retry}` : took ? `<span class="ans-took">${esc(took)}</span>` : "";
+      foot = `<div class="ans-foot"><button type="button" class="ans-btn ans-copy" data-key="copy"${this.#copied ? " data-copied" : ""}>${this.#copyLabel(t)}</button><span class="ans-status" role="status" aria-live="polite">${esc(
+        this.#status
+      )}</span>${right ? `<span class="ans-end">${right}</span>` : ""}</div>`;
+    }
+    return `<section class="ans-card${enter ? " is-in" : ""}" aria-labelledby="ans-label"${streaming ? ' aria-busy="true"' : ""}>${title}${srcs}<div class="ans-label" id="ans-label">${esc(
+      t.label(n)
+    )}</div>${body}${foot}</section>`;
+  }
+  #copyLabel(t) {
+    return this.#copied ? `${CHECK_SVG}<span>${esc(t.copied)}</span>` : `<span>${esc(t.copy)}</span>`;
+  }
+  updated() {
+    if (this.#lit && !this.#links.some((l) => l.n === this.#lit)) this.#lit = 0;
+    this.#paintLit();
+  }
+  /** Hover / focus on a chip or card lights its number (D8); leaving clears. */
+  #hover(e, on) {
+    const el = e.target?.closest?.("[data-n]");
+    if (!el) return;
+    const to = e.relatedTarget;
+    if (!on && to?.closest?.("[data-n]") === el) return;
+    const n = on ? Number(el.getAttribute("data-n")) : 0;
+    if (n === this.#lit) return;
+    this.#lit = n;
+    this.#paintLit();
+    if (n) this.#reveal(n);
+  }
+  #paintLit() {
+    const key = String(this.#lit);
+    for (const el of this.$$("[data-n]"))
+      el.classList.toggle("is-lit", !!this.#lit && el.getAttribute("data-n") === key);
+  }
+  /** A lit card outside the row slides the row sideways — never the page (no scrollIntoView). */
+  #reveal(n) {
+    const row = this.$(".ans-srcs");
+    const src = row?.querySelector(`.ans-src[data-n="${n}"]`);
+    if (!row || !src || typeof row.scrollTo !== "function") return;
+    const now = Date.now();
+    const at = this.#glide && now < this.#glide.until ? this.#glide.left : row.scrollLeft;
+    const shift = row.scrollLeft - at;
+    const rr = row.getBoundingClientRect();
+    const sr = src.getBoundingClientRect();
+    const l = sr.left + shift;
+    const r = sr.right + shift;
+    const target = r > rr.right ? at + (r - rr.right) + 16 : l < rr.left ? at - (rr.left - l) - 16 : null;
+    if (target === null) return;
+    const left = Math.max(0, Math.min(target, row.scrollWidth - row.clientWidth));
+    const smooth = !prefersReducedMotion();
+    this.#glide = smooth ? { left, until: now + GLIDE_MS } : null;
+    row.scrollTo({ left, behavior: smooth ? "smooth" : "auto" });
+  }
+  #follow(e, a) {
+    const n = Number(a.getAttribute("data-n"));
+    const link = this.#links[n - 1];
+    if (!link) return;
+    const from = a.classList.contains("ans-cite") ? "chip" : "card";
+    if (!this.emit("ui-link", { url: link.href, index: n - 1, from })) e.preventDefault();
+  }
+  #copy() {
+    const d = this.data;
+    const md = String(d?.markdown ?? "");
+    if (!d || d.streaming || !md.trim()) return;
+    const text = answerCopyText(md, this.#links, this.#lang);
+    if (!this.emit("ui-copy", { text })) return;
+    const done = () => this.#flash(true, strings(this.#lang).copiedSay(this.#links.length));
+    const fallback = () => this.#viaTextarea(text) ? done() : this.#selectBody();
+    try {
+      const clip = typeof navigator !== "undefined" ? navigator.clipboard : void 0;
+      if (clip && typeof clip.writeText === "function") clip.writeText(text).then(done, fallback);
+      else fallback();
+    } catch {
+      fallback();
+    }
+  }
+  /** Without the Clipboard API (plain http): copy the raw text from a hidden textarea. */
+  #viaTextarea(text) {
+    if (typeof document.execCommand !== "function") return false;
+    try {
+      const ta = document.createElement("textarea");
+      ta.value = text;
+      ta.setAttribute("readonly", "");
+      ta.setAttribute("aria-hidden", "true");
+      ta.style.cssText = "position:fixed;top:0;left:0;opacity:0;pointer-events:none";
+      this.root.append(ta);
+      ta.select();
+      const ok = document.execCommand("copy");
+      ta.remove();
+      this.$(".ans-copy")?.focus({ preventScroll: true });
+      return !!ok;
+    } catch {
+      return false;
+    }
+  }
+  /** Last resort: select the rendered answer so ⌘C / Ctrl+C copies it. */
+  #selectBody() {
+    const body = this.$(".ans-body");
+    try {
+      const sel = typeof getSelection === "function" ? getSelection() : null;
+      if (body && sel) {
+        const range = document.createRange();
+        range.selectNodeContents(body);
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    } catch {
+    }
+    this.#flash(false, strings(this.#lang).selected);
+  }
+  /** Copy feedback lives in place (no re-render) and clears after 1.5 s. */
+  #flash(copied, message) {
+    this.#copied = copied;
+    this.#status = message;
+    this.#paintCopy();
+    clearTimeout(this.#timer);
+    this.#timer = window.setTimeout(() => {
+      this.#copied = false;
+      this.#status = "";
+      this.#paintCopy();
+    }, COPIED_MS);
+  }
+  #paintCopy() {
+    const b = this.$(".ans-copy");
+    if (b) {
+      b.innerHTML = this.#copyLabel(strings(this.#lang));
+      b.toggleAttribute("data-copied", this.#copied);
+    }
+    const s = this.$(".ans-status");
+    if (s) s.textContent = this.#status;
+  }
+}
+define("ui-ai-answer", UiAiAnswer);
+export {
+  UiAiAnswer,
+  answerCopyText,
+  answerLinkInfo,
+  answerLinkKey,
+  answerLinkify,
+  answerMarkdown,
+  answerTookLabel,
+  renderAnswer
+};
+//# sourceMappingURL=ai-answer.js.map