@aparte/plugin-artifacts 0.16.0

package/dist/index.js

@@ -0,0 +1,675 @@
+import { escapeHtml, contextConfig, aparteGlobalConfig, escapeAttr, copyText, registerSegmentRenderer, unregisterSegmentRenderer } from "@aparte/core";
+import { d as ARTIFACT_SEGMENT_TYPE, i as deriveArtifactKind, P as PREVIEW_CSP, h as buildSafePreviewDocument, c as createArtifactTool, a as artifactHandler, A as ARTIFACT_TAG, b as artifactBlock, f as artifactFromToolCall } from "./preview-document-xP-Ne-F0.js";
+import { e, g } from "./preview-document-xP-Ne-F0.js";
+function stripCodeFences(content) {
+  let s = content;
+  if (s.startsWith("```") || s.startsWith("~~~")) {
+    const fenceChar = s[0];
+    let i = 0;
+    while (i < s.length && s[i] === fenceChar) i++;
+    while (i < s.length && s[i] !== "\n") i++;
+    if (i < s.length && s[i] === "\n") i++;
+    s = s.slice(i);
+  }
+  const closeAt = findClosingFence(s);
+  if (closeAt !== -1) s = s.slice(0, closeAt);
+  return s.trim();
+}
+function findClosingFence(s) {
+  let i = 0;
+  while (i < s.length) {
+    const lineStart = i;
+    let k = lineStart;
+    while (k < s.length && (s[k] === " " || s[k] === "	")) k++;
+    if (k < s.length && (s[k] === "`" || s[k] === "~")) {
+      const fenceChar = s[k];
+      let runs = 0;
+      while (k < s.length && s[k] === fenceChar) {
+        runs++;
+        k++;
+      }
+      if (runs >= 3) {
+        let onlyWs = true;
+        while (k < s.length && s[k] !== "\n") {
+          if (s[k] !== " " && s[k] !== "	" && s[k] !== "\r") {
+            onlyWs = false;
+            break;
+          }
+          k++;
+        }
+        if (onlyWs) {
+          let cut = lineStart;
+          if (cut > 0 && s[cut - 1] === "\n") cut--;
+          return cut;
+        }
+      }
+    }
+    while (i < s.length && s[i] !== "\n") i++;
+    if (i < s.length) i++;
+  }
+  return -1;
+}
+function labelForKind(kind2) {
+  switch (kind2) {
+    case "react":
+      return "React component";
+    case "html":
+      return "HTML document";
+    case "svg":
+      return "SVG image";
+    case "js":
+      return "JavaScript snippet";
+    case "css":
+      return "CSS stylesheet";
+    case "json":
+      return "JSON document";
+    case "markdown":
+      return "Markdown document";
+    case "csv":
+      return "CSV table";
+    case "text":
+      return "Text file";
+    case "python":
+      return "Python script";
+    case "typescript":
+      return "TypeScript file";
+    case "bash":
+      return "Bash script";
+    case "sql":
+      return "SQL query";
+    case "pdf":
+      return "PDF generator";
+    case "xlsx":
+      return "Excel generator";
+    case "docx":
+      return "Word generator";
+    default:
+      return "Artifact";
+  }
+}
+const HIGHLIGHT_DEBOUNCE_MS = 400;
+const MAX_THROTTLE_ENTRIES = 256;
+const _lastHighlightAt = /* @__PURE__ */ new Map();
+function markThrottle(map, id, at) {
+  map.delete(id);
+  if (map.size >= MAX_THROTTLE_ENTRIES) {
+    const oldest = map.keys().next().value;
+    if (oldest !== void 0) map.delete(oldest);
+  }
+  map.set(id, at);
+}
+function highlightedLen(pane) {
+  const n = Number(pane.dataset.aparteHlLen);
+  return Number.isFinite(n) && n > 0 ? n : 0;
+}
+function streamHighlight(element, paneSelector, content, lang, segId) {
+  const pane = element.querySelector(paneSelector);
+  if (!pane) return;
+  const tail = pane.querySelector("[data-aparte-tail]");
+  const hlLen = highlightedLen(pane);
+  if (tail && hlLen <= content.length) {
+    tail.textContent = content.slice(hlLen);
+  } else {
+    delete pane.dataset.aparteHlLen;
+    const codeEl = pane.querySelector("code");
+    if (codeEl) codeEl.textContent = content;
+    else pane.innerHTML = `<pre><code class="language-${escapeHtml(lang || "text")}">${escapeHtml(content)}</code></pre>`;
+  }
+  const cut = content.lastIndexOf("\n") + 1;
+  if (cut <= hlLen) return;
+  const now = Date.now();
+  if (now - (_lastHighlightAt.get(segId) ?? 0) < HIGHLIGHT_DEBOUNCE_MS) return;
+  markThrottle(_lastHighlightAt, segId, now);
+  void contextConfig(element).highlightCode(content.slice(0, cut), lang).then((html) => {
+    const live = element.querySelector(paneSelector);
+    if (!live) return;
+    if (cut <= highlightedLen(live)) return;
+    live.innerHTML = html;
+    const codeEl = live.querySelector("code") ?? live;
+    const span = document.createElement("span");
+    span.dataset.aparteTail = "";
+    span.textContent = content.slice(cut);
+    codeEl.appendChild(span);
+    live.dataset.aparteHlLen = String(cut);
+  }).catch(() => {
+  });
+}
+const settings = /* @__PURE__ */ new WeakMap();
+function setRenderOptions(config, options) {
+  settings.set(config, options);
+}
+function renderOptions(config) {
+  return settings.get(config) ?? settings.get(aparteGlobalConfig) ?? {};
+}
+function clearRenderOptions(config) {
+  settings.delete(config);
+}
+const FILE_ICON_LABEL = {
+  xlsx: "XLS",
+  pdf: "PDF",
+  docx: "DOC"
+};
+const produced = /* @__PURE__ */ new Map();
+const MAX_PRODUCED = 24;
+const inFlight = /* @__PURE__ */ new Map();
+function remember(id, bin) {
+  produced.delete(id);
+  if (produced.size >= MAX_PRODUCED) {
+    const oldest = produced.keys().next().value;
+    if (oldest !== void 0) produced.delete(oldest);
+  }
+  produced.set(id, bin);
+}
+function renderBinaryFileArtifact(segment, kind2) {
+  const cfg = contextConfig();
+  const title = segment.title?.trim() || labelForKind(kind2);
+  const iconLabel = FILE_ICON_LABEL[kind2] ?? kind2.toUpperCase();
+  const isStreaming = !!segment.isStreaming;
+  const canProduce = typeof renderOptions(cfg).onBinary === "function";
+  const downloadLabel = escapeHtml(cfg.t("download"));
+  const done = produced.get(segment.id);
+  if (done && !isStreaming) {
+    const preview = previewMarkup(done, kind2);
+    return `
+            <div class="aparte-segment aparte-card aparte-segment-artifact-file"
+                 data-segment-id="${escapeHtml(segment.id)}"
+                 data-artifact-type="${escapeHtml(kind2)}"
+                 data-state="ready">
+                <div class="aparte-art-file__card">
+                    <div class="aparte-art-file__icon" data-kind="${escapeHtml(kind2)}">${escapeHtml(iconLabel)}</div>
+                    <div class="aparte-art-file__meta">
+                        <div class="aparte-art-file__meta-name" data-role="file-name">${escapeHtml(done.filename)}</div>
+                        <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(formatBytes(byteLength(done.buffer)))} · ${escapeHtml(kind2.toUpperCase())}</div>
+                    </div>
+                    <div class="aparte-art-file__actions">
+                        <button type="button" class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-art-file__btn aparte-art-file__btn--primary" data-action="download">${downloadLabel}</button>
+                    </div>
+                </div>
+                <div class="aparte-art-file__body">
+                    <div class="aparte-art-file__code-pane" data-role="code-pane" hidden>
+                        <pre><code class="language-js"></code></pre>
+                    </div>
+                    <div class="aparte-art-file__preview-pane" data-role="preview-pane">${preview}</div>
+                </div>
+            </div>
+        `;
+  }
+  const cleanContent = stripCodeFences(segment.content || "");
+  const subText = isStreaming ? cfg.t("generating") : canProduce ? cfg.t("rebuildingPreview") : kind2.toUpperCase();
+  return `
+        <div class="aparte-segment aparte-card aparte-segment-artifact-file"
+             data-segment-id="${escapeHtml(segment.id)}"
+             data-artifact-type="${escapeHtml(kind2)}"
+             data-state="${escapeAttr(isStreaming ? "streaming" : canProduce ? "compiling" : "source")}">
+            <div class="aparte-art-file__card">
+                <div class="aparte-art-file__icon" data-kind="${escapeHtml(kind2)}">${escapeHtml(iconLabel)}</div>
+                <div class="aparte-art-file__meta">
+                    <div class="aparte-art-file__meta-name" data-role="file-name">${escapeHtml(title)}</div>
+                    <div class="aparte-art-file__meta-sub" data-role="file-sub">${escapeHtml(subText)}</div>
+                </div>
+                <div class="aparte-art-file__actions">
+                    ${canProduce ? `<button type="button" class="aparte-btn aparte-btn--primary aparte-btn--solid aparte-art-file__btn aparte-art-file__btn--primary" data-action="download" disabled>${downloadLabel}</button>` : ""}
+                </div>
+            </div>
+            <div class="aparte-art-file__body">
+                <div class="aparte-art-file__code-pane" data-role="code-pane">
+                    <pre><code class="language-js">${escapeHtml(cleanContent)}</code></pre>
+                </div>
+                <div class="aparte-art-file__preview-pane" data-role="preview-pane" hidden></div>
+            </div>
+        </div>
+    `;
+}
+function setupBinaryFileArtifact(element, segment, kind2) {
+  if (element.dataset["aparteInit"] !== "true") {
+    element.dataset["aparteInit"] = "true";
+    element.addEventListener("click", (ev) => {
+      const target = ev.target;
+      const action = target.closest("[data-action]")?.getAttribute("data-action");
+      if (action !== "download") return;
+      const bin = produced.get(segment.id);
+      if (bin) downloadBinary(bin);
+    });
+  }
+  if (segment.isStreaming) return;
+  settle(element, segment, kind2);
+}
+function updateBinaryFileArtifact(element, segment, isStreaming) {
+  const state = element.getAttribute("data-state");
+  if (state === "ready" || state === "error") return;
+  const cleanContent = stripCodeFences(segment.content || "");
+  if (isStreaming) {
+    streamHighlight(element, '[data-role="code-pane"]', cleanContent, "js", segment.id);
+    return;
+  }
+  const codeEl = element.querySelector('[data-role="code-pane"] code');
+  if (codeEl) codeEl.textContent = cleanContent;
+  if (state === "streaming") settle(element, segment, kind(element));
+}
+function settle(element, segment, kind2) {
+  const cfg = contextConfig(element);
+  const cleanContent = stripCodeFences(segment.content || "");
+  const wrapper = element.querySelector('[data-role="code-pane"]');
+  if (wrapper) {
+    void cfg.highlightCode(cleanContent, "js").then((html) => {
+      wrapper.innerHTML = html;
+    }).catch(() => {
+    });
+  }
+  const already = produced.get(segment.id);
+  if (already) {
+    swapToPreview(element, already, kind2);
+    return;
+  }
+  const resolve = renderOptions(cfg).onBinary;
+  if (!resolve) {
+    element.setAttribute("data-state", "source");
+    return;
+  }
+  element.setAttribute("data-state", "compiling");
+  let job = inFlight.get(segment.id);
+  if (!job) {
+    job = resolve({ ...segment, content: cleanContent });
+    inFlight.set(segment.id, job);
+    const done = () => {
+      inFlight.delete(segment.id);
+    };
+    job.then(done, done);
+  }
+  void job.then((bin) => {
+    remember(segment.id, bin);
+    if (element.isConnected) swapToPreview(element, bin, kind2);
+  }).catch((err) => {
+    if (element.isConnected) showError(element, err instanceof Error ? err.message : String(err));
+  });
+}
+function kind(element) {
+  return (element.getAttribute("data-artifact-type") || "").toLowerCase();
+}
+function previewMarkup(bin, kind2) {
+  return bin.previewHtml ? contextConfig().sanitizeHtml(bin.previewHtml) : `<div class="aparte-art-file__preview-empty">${escapeHtml(contextConfig().t("previewPending"))} ${escapeHtml(kind2)}</div>`;
+}
+function swapToPreview(element, bin, kind2) {
+  element.setAttribute("data-state", "ready");
+  const codePane = element.querySelector('[data-role="code-pane"]');
+  if (codePane) codePane.hidden = true;
+  const preview = element.querySelector('[data-role="preview-pane"]');
+  if (preview) {
+    preview.innerHTML = previewMarkup(bin, kind2);
+    preview.hidden = false;
+  }
+  const nameEl = element.querySelector('[data-role="file-name"]');
+  if (nameEl) nameEl.textContent = bin.filename;
+  const sub = element.querySelector('[data-role="file-sub"]');
+  if (sub) sub.textContent = `${formatBytes(byteLength(bin.buffer))} · ${kind2.toUpperCase()}`;
+  const dlBtn = element.querySelector('[data-action="download"]');
+  if (dlBtn) dlBtn.disabled = false;
+}
+function downloadBinary(bin) {
+  const blob = new Blob([bin.buffer], { type: bin.mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = bin.filename;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function byteLength(part) {
+  if (typeof part === "string") return new TextEncoder().encode(part).length;
+  if (part instanceof Blob) return part.size;
+  return part.byteLength;
+}
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+}
+function showError(element, errorMsg) {
+  if (element.getAttribute("data-state") === "ready") return;
+  element.setAttribute("data-state", "error");
+  const cfg = contextConfig(element);
+  const sub = element.querySelector('[data-role="file-sub"]');
+  if (sub) sub.textContent = cfg.t("sandboxError");
+  const body = element.querySelector(".aparte-art-file__body");
+  if (body) {
+    const short = (errorMsg.split("\n")[0] ?? "").slice(0, 240);
+    body.innerHTML = `
+            <div class="aparte-art-file__error">
+                <div class="aparte-art-file__error-title">${escapeHtml(cfg.t("sandboxError"))}</div>
+                <div class="aparte-output aparte-art-file__error-msg">${escapeHtml(short)}</div>
+                <div class="aparte-art-file__error-hint">${escapeHtml(cfg.t("sandboxErrorHint"))}</div>
+            </div>
+        `;
+  }
+}
+const artifactStyles = '/*\n * @aparte/plugin-artifacts — the artifact card and the artifact file preview.\n *\n * Injected once per document through the renderer\'s `getStyles()`, the seam core\n * keeps for a renderer that is not core\'s. It reads core\'s tokens (`--aparte-space-*`,\n * `--aparte-surface-*`, `--aparte-code-bg`…) and declares its own below, on the two\n * roots it draws, so a consumer overrides them the way they override any other:\n * `.aparte-segment-artifact-card { --aparte-art-paper-bg: … }`.\n */\n.aparte-segment-artifact-card,\n.aparte-segment-artifact-file {\n    /* Paper. An artifact preview is a DOCUMENT shown inside the chat — a spreadsheet,\n       a rendered page — so it stays light whatever the app theme is, the way a PDF\n       viewer shows a white page in a dark editor. */\n    --aparte-art-paper-bg: #fff;\n    --aparte-art-paper-text: #1f2937;\n    --aparte-art-paper-row-alt: #f9fafb;\n    --aparte-art-paper-head-bg: #f3f4f6;\n    --aparte-art-paper-head-text: #111827;\n    --aparte-art-paper-border: rgba(0, 0, 0, 0.1);\n    /* File-type tiles. Brand colours, so they are literals on purpose — but named,\n       because an app with its own file-type palette has nowhere else to put it. The\n       lettering is fixed like the tiles: a themed ink would go near-black in dark\n       mode, on a dark green tile. */\n    --aparte-art-file-icon-bg: linear-gradient(135deg, #1d6f42, #0f5132);\n    --aparte-art-file-icon-color: #fff;\n    --aparte-art-file-icon-bg-pdf: linear-gradient(135deg, #c0392b, #7d1f17);\n    --aparte-art-file-icon-bg-docx: linear-gradient(135deg, #1e5288, #0f3060);\n    --aparte-art-file-error-msg-bg: rgba(0, 0, 0, 0.04);\n    /* Sizes. */\n    --aparte-art-card-header-min-height: 36px;\n    --aparte-art-card-pulse-size: 8px;\n    --aparte-art-card-btn-size: 28px;\n    --aparte-art-file-icon-size: 40px;\n    --aparte-art-file-preview-padding: 20px;\n    --aparte-art-file-error-padding-inline: 18px;\n}\n/* Not the paper — that stays light on purpose. This is a code block inside the\n   error panel, which does follow the theme. */\n[data-aparte-theme="dark"] .aparte-segment-artifact-file {\n    --aparte-art-file-error-msg-bg: rgba(255, 255, 255, 0.06);\n}\n/* Artifact card */\n/* The shell is `.aparte-card`; what stays here is what a card in a TRANSCRIPT needs\n   and a card in general does not — the vertical rhythm between messages, and `font:\n   inherit` so a segment never picks up a host\'s form-control font. */\n.aparte-segment-artifact-card,\n.aparte-segment-artifact-file {\n    margin: var(--aparte-space-4) 0;\n    font: inherit;\n}\n.aparte-art-card__header {\n    display: flex; align-items: center; justify-content: space-between;\n    padding: var(--aparte-space-4) var(--aparte-space-5);\n    border-bottom: var(--aparte-border-width) solid var(--aparte-border);\n    background: var(--aparte-surface-2);\n    min-height: var(--aparte-art-card-header-min-height);\n}\n.aparte-art-card__title-block { display: flex; align-items: center; gap: var(--aparte-space-4); min-width: 0; }\n/* An outline `.aparte-badge`. What stays is the lettering: a language tag reads as a\n   code marker, so it is upper-cased and tracked out — which a badge in general is not. */\n.aparte-art-card__kind {\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    --aparte-badge-font-size: var(--aparte-font-size-xs);\n    --aparte-badge-radius: var(--aparte-radius-sm);\n}\n.aparte-art-card__title {\n    font-size: var(--aparte-font-size-lg); font-weight: var(--aparte-font-weight-medium);\n    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n/* The geometry is `.aparte-dot`; a streaming card breathes on the accent rather than\n   the status colour, and larger, because it marks a whole card and not a line. */\n.aparte-art-card__pulse {\n    --aparte-status-dot-size: var(--aparte-art-card-pulse-size);\n    --aparte-status-color: var(--aparte-accent);\n}\n.aparte-art-card__actions { display: flex; gap: var(--aparte-space-2); }\n.aparte-art-card__btn {\n  /* Same as .aparte-action-btn: declare the size, let the recipe draw. */\n  --aparte-btn-size: var(--aparte-art-card-btn-size);\n}\n.aparte-art-card__btn:hover:not(:disabled) {\n    background: var(--aparte-surface-hover);\n    border-color: var(--aparte-border);\n    color: var(--aparte-text);\n}\n.aparte-art-card__btn:disabled { opacity: var(--aparte-disabled-opacity); cursor: not-allowed; }\n.aparte-art-card__tabs {\n    /* justify-content and the padding are DECLARED, not left to a default.\n       Core is light DOM on purpose - no shadow root, no ::part(), any selector\n       reaches in - and the corollary is that a component must state what its\n       layout depends on, because an undeclared property has nothing to override\n       a host rule with. A consuming page with a bare nav selector setting\n       justify-content: space-between and padding-top (this library\'s own docs\n       site had exactly that) otherwise pushes these two tabs to opposite ends of\n       the card and pads the row out.\n\n       flex-end, and Code first in the DOM. The card OPENS on Code - mounting the\n       preview would execute model-authored code with no gesture (ratified\n       decision #8) - and a selected tab sitting second reads backwards. Right,\n       because the header above puts the artifact\'s identity on the left and its\n       copy/download buttons on the right, so this keeps every control in one\n       column. DOM order is also keyboard order, so the tab a reader lands on\n       first is the one already showing. */\n    display: flex; justify-content: flex-end; align-items: stretch; gap: var(--aparte-space-1);\n    padding: var(--aparte-space-2) var(--aparte-space-4) 0;\n    border-bottom: var(--aparte-border-width) solid var(--aparte-border);\n    background: var(--aparte-surface-2);\n}\n/* The tabs are `.aparte-tabs--underline`, like the elicitation panel\'s steps — one\n   tab in this library, not one per component. Only the row\'s own business stays. */\n.aparte-art-card__tabs button { font-size: var(--aparte-font-size-sm); }\n/* The card\'s heights, as variables with ONE owner each.\n   They were four hardcoded numbers in the only part of this card that did not\n   use a variable - everything else here already reads var(--aparte-code-bg) and\n   friends - and two of them had to agree while a third contradicted a fourth:\n   the code pane repeated the body\'s 600px, and the "press Preview" placeholder\n   was 120px tall inside a body whose min-height said 80, so that minimum applied\n   to nothing.\n   The frame stays a FIXED height rather than an aspect ratio, which is what\n   embeds of arbitrary HTML actually do - CodeSandbox documents 500px, StackBlitz\n   takes a height parameter - because a frame with an opaque origin cannot be\n   measured and a 16/10 ratio on a wide card is enormous. The vh cap is the part\n   that was missing: a fixed 480px should not own a phone screen.\n   Each default lives in its read, as var(--x, literal), the way every other\n   value in this file already does - not in a declaration block on top of the\n   fallbacks, which would be two owners of one number again. It also means the\n   docs\' CSS-variable generator finds them: its sweep looks for reads that\n   carry a fallback, so a read without one is a public knob nobody documents. */\n.aparte-art-card__body {\n    position: relative;\n    /* The placeholder is the tallest thing this box can hold while empty, so it\n       IS the minimum - one number instead of two that disagreed. */\n    min-height: var(--aparte-artifact-pending-height, 120px);\n    max-height: var(--aparte-artifact-body-max, 600px);\n    overflow: hidden;\n}\n.aparte-art-card__pane { display: none; height: 100%; }\n.aparte-segment-artifact-card[data-tab="code"]    .aparte-art-card__pane[data-pane="code"]    { display: block; }\n.aparte-segment-artifact-card[data-tab="preview"] .aparte-art-card__pane[data-pane="preview"] { display: block; }\n.aparte-art-card__pane[data-pane="code"] {\n    /* The body already caps this; repeating the number was the second owner. */\n    max-height: var(--aparte-artifact-body-max, 600px); overflow: auto;\n}\n.aparte-art-card__frame {\n    display: block;\n    width: 100%;\n    height: min(var(--aparte-artifact-frame-height, 480px), var(--aparte-artifact-frame-max, 70vh));\n    border: 0;\n    background: var(--aparte-art-paper-bg);\n}\n.aparte-art-card__pending {\n    display: flex; align-items: center; justify-content: center;\n    height: var(--aparte-artifact-pending-height, 120px);\n    color: var(--aparte-text-muted);\n    font-size: var(--aparte-font-size-lg);\n    font-style: italic;\n}\n/* ── Binary file artifact (xlsx/pdf/docx) ──────────────────── */\n.aparte-art-file__card {\n    display: flex; align-items: center; gap: var(--aparte-space-6);\n    padding: var(--aparte-space-6) var(--aparte-space-7);\n    background: var(--aparte-surface-2);\n    border-bottom: var(--aparte-border-width) solid var(--aparte-border);\n}\n.aparte-art-file__body {\n    position: relative;\n}\n.aparte-art-file__code-pane {\n    max-height: var(--aparte-artifact-file-code-max, 360px); overflow: auto;\n    background: var(--aparte-code-bg);\n}\n.aparte-art-file__preview-pane {\n    max-height: var(--aparte-artifact-file-preview-max, 460px);\n    overflow: auto;\n    background: var(--aparte-art-paper-bg);\n    /* Preview is a document view — force light scheme regardless of\n       the app theme, with a dark text colour so cells stay readable. */\n    color: var(--aparte-art-paper-text);\n}\n.aparte-art-file__icon {\n    width: var(--aparte-art-file-icon-size); height: var(--aparte-art-file-icon-size);\n    border-radius: var(--aparte-radius-lg);\n    display: flex; align-items: center; justify-content: center;\n    background: var(--aparte-art-file-icon-bg);\n    color: var(--aparte-art-file-icon-color);\n    font-weight: var(--aparte-font-weight-bold);\n    font-size: var(--aparte-font-size-sm);\n    letter-spacing: 0.04em;\n    flex-shrink: 0;\n}\n.aparte-art-file__icon[data-kind="pdf"]  { background: var(--aparte-art-file-icon-bg-pdf); }\n.aparte-art-file__icon[data-kind="docx"] { background: var(--aparte-art-file-icon-bg-docx); }\n.aparte-art-file__meta { flex: 1 1 auto; min-width: 0; }\n.aparte-art-file__meta-name {\n    font-weight: var(--aparte-font-weight-semibold); font-size: var(--aparte-font-size-base);\n    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n}\n.aparte-art-file__meta-sub {\n    font-size: var(--aparte-font-size-sm);\n    color: var(--aparte-text-muted);\n}\n.aparte-art-file__actions { display: flex; gap: var(--aparte-space-3); flex-shrink: 0; }\n/* The chrome is `.aparte-btn`; every one of these is a `--primary --solid`, so the\n   fill comes from the recipe. Its own measurements stay: a labelled button in a card\n   is roomier than an icon in a row. */\n.aparte-art-file__btn {\n    padding: var(--aparte-space-3) var(--aparte-space-5);\n    font-size: var(--aparte-font-size-md);\n}\n/* NOTHING here repaints the button, and the comment above is why. These seven lines\n   re-declared `background`, `color`, `border-color` and a hover the recipe already\n   paints — a migration leftover that contradicted the sentence directly above it.\n\n   Five of them were inert duplicates. The sixth was not: `color: var(--aparte-text-inverse)`\n   overrode `--aparte-btn-on-intent`, which the recipe derives from the fill. Measured in a\n   browser on the built stylesheet: 3.54:1 in the light theme against the recipe\'s 5.27 —\n   an AA failure on a visible button label, in the default theme. It was also the last\n   place in `styles/` forcing `--aparte-text-inverse` as ink on a coloured fill; badge and\n   field had already stopped.\n\n   The consumer cost was the sharper one: the one-attribute rebrand this library documents\n   re-derives the ink on every other solid-primary button and, here alone, kept a token\n   bound to core\'s own palette. `.aparte-art-file__btn:hover` went with them — at 0,2,0 it\n   was always beaten by `.aparte-btn--solid:hover:not(:disabled)` at 0,3,0, so it never\n   applied either. */\n/* Hide the download button until the sandbox has produced the buffer.\n   Avoids confusing the user with a disabled-but-styled-primary button\n   during streaming / compiling. */\n.aparte-segment-artifact-file:not([data-state="ready"]) .aparte-art-file__btn[data-action="download"] {\n    display: none;\n}\n.aparte-art-file__preview-pane th,\n.aparte-art-file__preview-pane td {\n    border: var(--aparte-border-width) solid var(--aparte-art-paper-border);\n    padding: var(--aparte-space-3) var(--aparte-space-5);\n    text-align: left;\n    white-space: nowrap;\n    color: var(--aparte-art-paper-text);\n    background: var(--aparte-art-paper-bg);\n}\n.aparte-art-file__preview-pane tr:nth-child(odd) td { background: var(--aparte-art-paper-row-alt); }\n.aparte-art-file__preview-pane tr:first-child td {\n    background: var(--aparte-art-paper-head-bg);\n    font-weight: var(--aparte-font-weight-semibold);\n    position: sticky; top: 0;\n    color: var(--aparte-art-paper-head-text);\n}\n.aparte-art-file__preview-empty {\n    padding: var(--aparte-art-file-preview-padding); text-align: center;\n    color: var(--aparte-text-muted);\n    font-size: var(--aparte-font-size-lg); font-style: italic;\n}\n.aparte-segment-artifact-file[data-state="error"] .aparte-art-file__icon {\n    background: var(--aparte-art-file-icon-bg-pdf);\n}\n.aparte-art-file__error {\n    padding: var(--aparte-space-8) var(--aparte-art-file-error-padding-inline);\n    background: var(--aparte-error-bg);\n    border-top: var(--aparte-border-width) solid var(--aparte-error-border);\n    color: var(--aparte-text);\n}\n.aparte-art-file__error-title {\n    font-weight: var(--aparte-font-weight-semibold);\n    font-size: var(--aparte-font-size-lg);\n    margin-bottom: var(--aparte-space-3);\n    color: var(--aparte-error-title);\n}\n/* A computed value shown back, which is `.aparte-output`. What stays is that this\n   one is an ERROR — tinted text on its own quiet ground — and that a raw message has\n   no spaces to wrap on, so it must be allowed to break mid-word. */\n.aparte-art-file__error-msg {\n    display: block;\n    padding: var(--aparte-space-3) var(--aparte-space-5);\n    margin-bottom: var(--aparte-space-4);\n    background: var(--aparte-art-file-error-msg-bg);\n    color: var(--aparte-error-text);\n    word-break: break-word;\n}\n.aparte-art-file__error-hint {\n    font-size: var(--aparte-font-size-sm);\n    color: var(--aparte-text-muted);\n    font-style: italic;\n}\n/* ── The card\'s code and table panes ─────────────────────────\n   These three lived in core\'s prose sheet, styling this card\'s DOM from a sheet\n   that knew nothing else about it. */\n.aparte-art-card__pane[data-pane="code"] pre {\n    margin: 0; padding: var(--aparte-space-6);\n    font-size: var(--aparte-font-size-md);\n    background: var(--aparte-code-bg);\n}\n.aparte-art-file__code-pane pre {\n    margin: 0; padding: var(--aparte-space-6);\n    font-size: var(--aparte-font-size-md);\n    font-family: var(--aparte-code-font-family);\n}\n.aparte-art-file__preview-pane table {\n    border-collapse: collapse;\n    width: 100%;\n    font-size: var(--aparte-font-size-md);\n    font-family: inherit;\n}\n';
+const PREVIEWABLE_KINDS = /* @__PURE__ */ new Set(["react", "html", "svg", "js", "css"]);
+const BINARY_FILE_KINDS = /* @__PURE__ */ new Set(["pdf", "xlsx", "docx"]);
+function previewEnabled() {
+  return renderOptions(contextConfig()).preview !== false;
+}
+const artifactRenderer = {
+  type: ARTIFACT_SEGMENT_TYPE,
+  render: (segment) => {
+    const kind2 = (segment.artifactType || "unknown").toLowerCase();
+    if (BINARY_FILE_KINDS.has(kind2)) {
+      return renderBinaryFileArtifact(segment, kind2);
+    }
+    const title = segment.title?.trim() || labelForKind(kind2);
+    const displayLang = languageForKind(kind2);
+    const isStreaming = !!segment.isStreaming;
+    const previewable = PREVIEWABLE_KINDS.has(kind2) && previewEnabled();
+    const cfg = contextConfig();
+    const downloadLabel = cfg.t("download");
+    const previewLabel = cfg.t("preview");
+    const codeLabel = cfg.t("code");
+    const isBinary = BINARY_FILE_KINDS.has(kind2);
+    const cleanContent = stripCodeFences(segment.content || "");
+    const cardId = escapeAttr(segment.id);
+    return `
+            <div class="aparte-segment aparte-card aparte-segment-artifact-card"
+                 data-segment-id="${escapeHtml(segment.id)}"
+                 data-artifact-type="${escapeHtml(kind2)}"
+                 data-streaming="${isStreaming ? "true" : "false"}"
+                 data-tab="code"
+                 data-previewable="${previewable ? "true" : "false"}"
+                 data-binary="${isBinary ? "true" : "false"}">
+                <header class="aparte-art-card__header">
+                    <div class="aparte-art-card__title-block">
+                        <span class="aparte-badge aparte-badge--outline aparte-art-card__kind" data-kind="${escapeHtml(kind2)}">${escapeHtml(displayLang)}</span>
+                        <span class="aparte-art-card__title">${escapeHtml(title)}</span>
+                        ${isStreaming ? `<span class="aparte-dot aparte-art-card__pulse" role="img" aria-label="${escapeAttr(cfg.t("generating"))}"></span>` : ""}
+                    </div>
+                    <div class="aparte-art-card__actions">
+                        <button type="button" class="aparte-btn aparte-btn--icon aparte-art-card__btn" data-action="copy" title="${escapeAttr(contextConfig().t("copy"))}" aria-label="${escapeAttr(contextConfig().t("copy"))}">
+                            ${contextConfig().getIcon("copy")}
+                        </button>
+                        <button type="button" class="aparte-btn aparte-btn--icon aparte-art-card__btn" data-action="download" title="${escapeAttr(downloadLabel)}" aria-label="${escapeAttr(downloadLabel)}" ${isStreaming ? "disabled" : ""}>
+                            ${contextConfig().getIcon("download")}
+                        </button>
+                    </div>
+                </header>
+                <nav class="aparte-tabs aparte-tabs--underline aparte-art-card__tabs" role="tablist">
+                    <button type="button" class="aparte-tabs__tab" role="tab" id="aparte-art-${cardId}-tab-code" aria-controls="aparte-art-${cardId}-pane-code" aria-selected="true" tabindex="0" data-tab-target="code">${escapeHtml(codeLabel)}</button>
+                    ${previewable ? `<button type="button" class="aparte-tabs__tab" role="tab" id="aparte-art-${cardId}-tab-preview" aria-controls="aparte-art-${cardId}-pane-preview" aria-selected="false" tabindex="-1" data-tab-target="preview" ${isStreaming ? "disabled" : ""}>${escapeHtml(previewLabel)}</button>` : ""}
+                </nav>
+                <div class="aparte-art-card__body">
+                    <div class="aparte-art-card__pane" role="tabpanel" id="aparte-art-${cardId}-pane-code" aria-labelledby="aparte-art-${cardId}-tab-code" tabindex="0" data-pane="code">
+                        <div class="aparte-code-content-wrapper">
+                            <pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>
+                        </div>
+                    </div>
+                    ${previewable ? `
+                        <div class="aparte-art-card__pane" role="tabpanel" id="aparte-art-${cardId}-pane-preview" aria-labelledby="aparte-art-${cardId}-tab-preview" tabindex="0" data-pane="preview">
+                            <div class="aparte-art-card__pending">${escapeHtml(cfg.t("previewPending"))}</div>
+                        </div>
+                    ` : ""}
+                </div>
+            </div>
+        `;
+  },
+  /**
+   * Every string this card shows: the copy button's tooltip, glyph and accessible
+   * name, the download button's title and label, and the two tab names. They were
+   * all hardcoded literals until they got locale keys — including the copy button's
+   * `aria-label`, which said "Copy" while its own `title` one attribute away already
+   * went through `t('copy')`, so a French reader got a French tooltip and an English
+   * announcement.
+   *
+   * Nothing here touches the tab state or the preview pane: a mounted iframe is
+   * running model-authored code, and re-rendering this card is exactly what the
+   * hook exists to avoid.
+   */
+  relabel: (element) => {
+    const cfg = contextConfig();
+    const copyBtn = element.querySelector('.aparte-art-card__btn[data-action="copy"]');
+    if (copyBtn) {
+      copyBtn.setAttribute("title", cfg.t("copy"));
+      copyBtn.setAttribute("aria-label", cfg.t("copy"));
+      copyBtn.innerHTML = cfg.getIcon("copy");
+    }
+    const dl = element.querySelector('.aparte-art-card__btn[data-action="download"]');
+    if (dl) {
+      const label = cfg.t("download");
+      dl.setAttribute("title", label);
+      dl.setAttribute("aria-label", label);
+    }
+    const previewTab = element.querySelector('[data-tab-target="preview"]');
+    if (previewTab) previewTab.textContent = cfg.t("preview");
+    const codeTab = element.querySelector('[data-tab-target="code"]');
+    if (codeTab) codeTab.textContent = cfg.t("code");
+  },
+  setup: (element, segment) => {
+    latestSegment.set(element, segment);
+    const kind2 = (segment.artifactType || "").toLowerCase();
+    if (BINARY_FILE_KINDS.has(kind2)) {
+      setupBinaryFileArtifact(element, segment, kind2);
+      return;
+    }
+    const wrapper = element.querySelector(".aparte-code-content-wrapper");
+    if (wrapper) {
+      const displayLang = languageForKind(kind2);
+      const cleanContent = stripCodeFences(segment.content || "");
+      void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
+        wrapper.innerHTML = html;
+      }).catch(() => {
+      });
+    }
+    const tabs = [...element.querySelectorAll("[data-tab-target]")];
+    const select = (btn, focus) => {
+      const target = btn.getAttribute("data-tab-target");
+      if (!target || btn.disabled) return;
+      if (target === "preview") mountPreviewFrame(element, segment);
+      element.setAttribute("data-tab", target);
+      for (const b of tabs) {
+        const on = b === btn;
+        b.setAttribute("aria-selected", on ? "true" : "false");
+        b.tabIndex = on ? 0 : -1;
+      }
+      if (focus) btn.focus();
+    };
+    for (const [i, btn] of tabs.entries()) {
+      btn.addEventListener("click", () => select(btn, false));
+      btn.addEventListener("keydown", (e2) => {
+        const step = e2.key === "ArrowRight" ? 1 : e2.key === "ArrowLeft" ? -1 : 0;
+        let next = -1;
+        if (step) next = (i + step + tabs.length) % tabs.length;
+        else if (e2.key === "Home") next = 0;
+        else if (e2.key === "End") next = tabs.length - 1;
+        if (next < 0) return;
+        e2.preventDefault();
+        for (let n = 0; n < tabs.length; n++) {
+          const candidate = tabs[(next + n * (step || 1) + tabs.length) % tabs.length];
+          if (candidate && !candidate.disabled) {
+            select(candidate, true);
+            return;
+          }
+        }
+      });
+    }
+    const copyBtn = element.querySelector('[data-action="copy"]');
+    if (copyBtn) {
+      copyBtn.addEventListener("click", () => {
+        const code = stripCodeFences(segment.content || "");
+        void copyText(code).catch(() => {
+        });
+        const original = copyBtn.innerHTML;
+        copyBtn.innerHTML = contextConfig(copyBtn).getIcon("check");
+        copyBtn.setAttribute("title", contextConfig(copyBtn).t("copied"));
+        setTimeout(() => {
+          copyBtn.innerHTML = original;
+          copyBtn.setAttribute("title", contextConfig(copyBtn).t("copy"));
+        }, 1500);
+      });
+    }
+    const dlBtn = element.querySelector('[data-action="download"]');
+    if (dlBtn) {
+      dlBtn.addEventListener("click", () => {
+        if (dlBtn.disabled) return;
+        downloadTextArtifact(latestSegment.get(element) ?? segment);
+      });
+    }
+  },
+  update: (element, segment) => {
+    const previous = latestSegment.get(element);
+    latestSegment.set(element, segment);
+    if (previous && previous.content !== segment.content) {
+      element.querySelector('.aparte-art-card__pane[data-pane="preview"] iframe')?.remove();
+    }
+    const isStreaming = !!segment.isStreaming;
+    const kind2 = (segment.artifactType || "").toLowerCase();
+    if (BINARY_FILE_KINDS.has(kind2)) {
+      updateBinaryFileArtifact(element, segment, isStreaming);
+      return;
+    }
+    const wasStreaming = element.getAttribute("data-streaming") === "true";
+    const cleanContent = stripCodeFences(segment.content || "");
+    if (isStreaming) {
+      const segId = element.getAttribute("data-segment-id") ?? segment.id;
+      streamHighlight(element, ".aparte-code-content-wrapper", cleanContent, languageForKind(kind2), segId);
+    } else {
+      const codeEl = element.querySelector(".aparte-code-content-wrapper code");
+      if (codeEl) {
+        codeEl.textContent = cleanContent;
+      } else {
+        const wrapper = element.querySelector(".aparte-code-content-wrapper");
+        if (wrapper) {
+          const displayLang = languageForKind(kind2);
+          wrapper.innerHTML = `<pre><code class="language-${escapeHtml(displayLang)}">${escapeHtml(cleanContent)}</code></pre>`;
+        }
+      }
+    }
+    if (wasStreaming && !isStreaming) {
+      element.setAttribute("data-streaming", "false");
+      element.querySelector(".aparte-art-card__pulse")?.remove();
+      const wrapper = element.querySelector(".aparte-code-content-wrapper");
+      if (wrapper) {
+        const displayLang = languageForKind(kind2);
+        void contextConfig().highlightCode(cleanContent, displayLang).then((html) => {
+          wrapper.innerHTML = html;
+        }).catch(() => {
+        });
+      }
+      element.querySelectorAll("button[disabled]").forEach((b) => {
+        b.disabled = false;
+      });
+    }
+  },
+  // The card's sheet, injected once per document by core — the seam a renderer that
+  // is not core's has onto the page. It is a real `.css` file, inlined at build.
+  getStyles: () => artifactStyles
+};
+function languageForKind(kind2) {
+  if (kind2 === "react") return "jsx";
+  if (kind2 === "markdown") return "md";
+  if (kind2 === "pdf" || kind2 === "xlsx" || kind2 === "docx") return "js";
+  return kind2 || "text";
+}
+function downloadTextArtifact(segment) {
+  const content = stripCodeFences(segment.content || "");
+  const kind2 = (segment.artifactType || "").toLowerCase();
+  const ext = {
+    react: "jsx",
+    html: "html",
+    svg: "svg",
+    js: "js",
+    css: "css",
+    json: "json",
+    markdown: "md",
+    csv: "csv",
+    text: "txt",
+    python: "py",
+    typescript: "ts",
+    bash: "sh",
+    sql: "sql"
+  }[kind2] ?? "txt";
+  const baseTitle = (segment.title ?? labelForKind(kind2)).trim();
+  const safeBase = slugifyForFilename(baseTitle) || "artifact";
+  const filename = `${safeBase}.${ext}`;
+  const mime = segment.mimeType || "text/plain";
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+function slugifyForFilename(text) {
+  const lower = text.trim().toLowerCase();
+  let out = "";
+  let prevDash = false;
+  for (let i = 0; i < lower.length && out.length < 40; i++) {
+    const ch = lower[i];
+    const isAlnum = ch >= "a" && ch <= "z" || ch >= "0" && ch <= "9";
+    if (isAlnum) {
+      out += ch;
+      prevDash = false;
+      continue;
+    }
+    if (!prevDash && out.length > 0) {
+      out += "-";
+      prevDash = true;
+    }
+  }
+  if (out.endsWith("-")) out = out.slice(0, -1);
+  return out;
+}
+const latestSegment = /* @__PURE__ */ new WeakMap();
+function mountPreviewFrame(element, fallback) {
+  const pane = element.querySelector('.aparte-art-card__pane[data-pane="preview"]');
+  if (!pane || pane.querySelector("iframe")) return;
+  const segment = latestSegment.get(element) ?? fallback;
+  const kind2 = (segment.artifactType || deriveArtifactKind(segment.mimeType ?? "", "text")).toLowerCase();
+  if (!PREVIEWABLE_KINDS.has(kind2) || !previewEnabled()) return;
+  const title = segment.title?.trim() || labelForKind(kind2);
+  const option = renderOptions(contextConfig(element)).preview;
+  const build = typeof option === "function" ? option : buildSafePreviewDocument;
+  const srcdoc = build(kind2, stripCodeFences(segment.content || ""), title);
+  pane.innerHTML = `<iframe class="aparte-art-card__frame" sandbox="allow-scripts" csp="${escapeAttr(PREVIEW_CSP)}" referrerpolicy="no-referrer" loading="lazy" title="${escapeAttr(title)}" srcdoc="${escapeAttr(srcdoc)}"></iframe>`;
+}
+function setupArtifacts(options = {}, config = aparteGlobalConfig) {
+  const tool = createArtifactTool(options);
+  setRenderOptions(config, { preview: options.preview, onBinary: options.onBinary });
+  config.registerTool(tool, artifactHandler);
+  const toolRenderer = {
+    render: (segment) => artifactRenderer.render(artifactFromToolCall(segment)),
+    setup: (element, segment) => artifactRenderer.setup?.(element, artifactFromToolCall(segment)),
+    update: (element, segment) => artifactRenderer.update?.(element, artifactFromToolCall(segment)),
+    relabel: (element, segment) => artifactRenderer.relabel?.(element, artifactFromToolCall(segment)),
+    getStyles: () => artifactRenderer.getStyles?.() ?? ""
+  };
+  config.registerToolRenderer(tool.name, toolRenderer);
+  registerSegmentRenderer(artifactRenderer, config);
+  const tag = options.tag === void 0 ? ARTIFACT_TAG : options.tag;
+  if (tag) config.registerStreamBlock(artifactBlock(tag));
+  return () => {
+    config.unregisterTool(tool.name);
+    config.unregisterToolRenderer(tool.name);
+    unregisterSegmentRenderer(ARTIFACT_SEGMENT_TYPE, config);
+    if (tag) config.unregisterStreamBlock(tag);
+    clearRenderOptions(config);
+  };
+}
+export {
+  ARTIFACT_SEGMENT_TYPE,
+  e as ARTIFACT_SYSTEM_PROMPT,
+  ARTIFACT_TAG,
+  PREVIEW_CSP,
+  artifactBlock,
+  artifactFromToolCall,
+  artifactHandler,
+  artifactRenderer,
+  g as artifactSegment,
+  buildSafePreviewDocument,
+  createArtifactTool,
+  deriveArtifactKind,
+  setupArtifacts
+};
+//# sourceMappingURL=index.js.map