/*
 * Shared building blocks for MCP Apps (gallery + details).
 * Each export is a raw string fragment to be interpolated into the
 * final HTML template literal of each app.
 */

import { toJSONSchema } from "zod";
import { Info$zodSchema } from "../../models/info.js";
import { UploadResponse$zodSchema } from "../../models/uploadresponse.js";

// ── Build-time tooltip map from Zod schema descriptions ─────────────
function extractSchemaDescriptions(
  schema: Record<string, unknown>,
): Record<string, string> {
  const props = (schema as { properties?: Record<string, unknown> })
    .properties || {};
  const result: Record<string, string> = {};
  for (const [key, prop] of Object.entries(props)) {
    const p = prop as { description?: string } | null;
    if (p?.description) result[key] = p.description;
  }
  return result;
}

const _infoSchema = toJSONSchema(Info$zodSchema, {
  unrepresentable: "any",
}) as Record<string, unknown>;
const _uploadSchema = toJSONSchema(UploadResponse$zodSchema, {
  unrepresentable: "any",
}) as Record<string, unknown>;
const TOOLTIP_MAP_JSON = JSON.stringify({
  ...extractSchemaDescriptions(_infoSchema),
  ...extractSchemaDescriptions(_uploadSchema),
});

// ── CSS: CLDS Design Tokens (light + dark) ──────────────────────────
export const SHARED_CSS_TOKENS = /* css */ `
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cld-primary: #3448c5;
  --cld-primary-light: #4c64d7;
  --cld-bg: #ffffff;
  --cld-bg2: #f9fafb;
  --cld-bg3: #f3f4f7;
  --cld-bg4: #edeef3;
  --cld-text: #0a0c0f;
  --cld-text2: #333b4c;
  --cld-text3: #90a0b3;
  --cld-border: #d1d6e0;
  --cld-border2: #c2c9d6;
  --cld-accent: #3448c5;
  --cld-accent-bg: #f1f2f9;
  --cld-error: #CE190D;
  --cld-warning: #ff620c;
  --cld-success: #22AA00;
  --cld-radius: 8px;
  --cld-radius-sm: 4px;
  --cld-radius-lg: 16px;
  --cld-shadow-sm: 0 2px 4px 0 rgba(0,0,0,0.25);
  --cld-shadow-md: 0 4px 5px 0 rgba(0,0,0,0.2), 0 3px 14px 3px rgba(0,0,0,0.12), 0 8px 10px 1px rgba(0,0,0,0.14);
  --cld-shadow-lg: 0 24px 24px 0 rgba(0,0,0,0.3), 0 0 24px 0 rgba(0,0,0,0.22);
  --cld-sp-xxs: 0.25rem;
  --cld-sp-xs: 0.5rem;
  --cld-sp-sm: 0.75rem;
  --cld-sp-md: 1rem;
  --cld-sp-lg: 1.25rem;
  --cld-sp-xl: 2rem;
  --cld-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cld-font-xxs: 0.75rem;
  --cld-font-xs: 0.875rem;
  --cld-font-sm: 1rem;
  --cld-chip-tag-bg: #f1f2f9;
  --cld-chip-tag-fg: #3448c5;
  --cld-chip-set-bg: #e6faf6;
  --cld-chip-set-fg: #13a5aa;
  --cld-chip-set-border: #b2e8e9;
  --cld-chip-date-bg: #fff8eb;
  --cld-chip-date-fg: #a16207;
  --cld-chip-date-border: #fde68a;
  --cld-chip-int-bg: #f5f0ff;
  --cld-chip-int-fg: #7c3aed;
  --cld-chip-int-border: #e9d5ff;
}

[data-theme="dark"], .dark {
  --cld-primary: #0D9AFF;
  --cld-primary-light: #51a3ff;
  --cld-bg: #1f242e;
  --cld-bg2: #14181e;
  --cld-bg3: #090c0f;
  --cld-bg4: #000000;
  --cld-text: #ffffff;
  --cld-text2: #d1d6e0;
  --cld-text3: #90a0b3;
  --cld-border: #3d475c;
  --cld-border2: #535f7a;
  --cld-accent: #0D9AFF;
  --cld-accent-bg: rgba(13,154,255,0.12);
  --cld-error: #ff5959;
  --cld-warning: #ffa359;
  --cld-success: #9affa6;
  --cld-chip-tag-bg: rgba(13,154,255,0.15);
  --cld-chip-tag-fg: #0D9AFF;
  --cld-chip-set-bg: rgba(72,208,216,0.15);
  --cld-chip-set-fg: #7dedff;
  --cld-chip-set-border: rgba(72,208,216,0.3);
  --cld-chip-date-bg: rgba(255,196,121,0.15);
  --cld-chip-date-fg: #ffc479;
  --cld-chip-date-border: rgba(255,196,121,0.3);
  --cld-chip-int-bg: rgba(167,111,255,0.15);
  --cld-chip-int-fg: #a76fff;
  --cld-chip-int-border: rgba(167,111,255,0.3);
}
[data-theme="dark"] .status-ok,   .dark .status-ok   { background: #166534; color: #bbf7d0; }
[data-theme="dark"] .status-warn, .dark .status-warn { background: #854d0e; color: #fef08a; }
[data-theme="dark"] .status-err,  .dark .status-err  { background: #991b1b; color: #fecaca; }

html { scrollbar-gutter: auto; }
body {
  font-family: var(--cld-font);
  background: var(--cld-bg);
  color: var(--cld-text);
  padding: var(--cld-sp-md);
  line-height: 1.5;
  font-size: var(--cld-font-xs);
  position: relative;
  overflow-x: hidden;
}
.theme-btn {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid transparent; background: transparent;
  color: var(--cld-text3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: background 0.15s, color 0.15s, border-color 0.15s;
  opacity: 0.5; flex-shrink: 0;
}
.theme-btn:hover { background: var(--cld-bg3); color: var(--cld-text); border-color: var(--cld-border); opacity: 1; }
.theme-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Shared icon-button — square pill, same family as theme-btn */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid var(--cld-border); border-radius: var(--cld-radius-sm);
  color: var(--cld-text2); cursor: pointer; padding: 4px 8px;
  font-size: 12px; font-weight: 500; font-family: inherit; line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.icon-btn:hover { background: var(--cld-bg3); color: var(--cld-text); border-color: var(--cld-border2); }
.icon-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* icon-only variant (no text label) */
.icon-btn.icon-only { padding: 4px; width: 28px; height: 28px; }
/* header state icon (decorative, not a button) */
.upload-header-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.upload-header-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.upload-header-icon.icon-success { color: var(--cld-success); }
.upload-header-icon.icon-error   { color: var(--cld-error); }
.upload-header-icon.icon-warning { color: var(--cld-warning); }
.upload-header-icon.icon-accent  { color: var(--cld-accent); }
`;

// ── CSS: Shared component styles ────────────────────────────────────
export const SHARED_CSS_COMPONENTS = /* css */ `
.link { cursor: pointer; }
.link:hover { color: var(--cld-accent); text-decoration: underline; }

/* Modal — positioned absolutely so it can be placed in the part of the
 * iframe that is currently visible in the host's viewport (since position:fixed
 * inside a tall iframe anchors to iframe-center, not the user's visible area). */
.modal-overlay {
  position: absolute; left: 0; right: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; backdrop-filter: blur(3px); padding: 24px;
}
.modal {
  background: var(--cld-bg); border: 1px solid var(--cld-border);
  border-radius: var(--cld-radius); width: 100%; max-width: 620px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: var(--cld-shadow-lg); animation: modalIn 0.15s ease-out;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--cld-border); flex-shrink: 0;
}
.modal-header-thumb {
  width: 40px; height: 40px; border-radius: 6px;
  object-fit: cover; background: var(--cld-bg3); flex-shrink: 0;
}
.modal-header-info { flex: 1; min-width: 0; }
.modal-header-info h2 {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-header-sub { font-size: 11px; color: var(--cld-text3); margin-top: 2px; }
.modal-close {
  background: var(--cld-bg3); border: 1px solid var(--cld-border);
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--cld-text2); flex-shrink: 0; font-family: inherit;
}
.modal-close:hover { background: var(--cld-border); }
.modal-body { overflow-y: auto; padding: 0; }
.modal-hero {
  width: 100%; max-height: 220px; object-fit: contain;
  background: var(--cld-bg3); display: block;
}
.modal-loading { text-align: center; padding: 48px 20px; color: var(--cld-text2); font-size: 13px; }
.modal-loading .spinner {
  display: inline-block; width: 24px; height: 24px;
  border: 2.5px solid var(--cld-border); border-top-color: var(--cld-accent);
  border-radius: 50%; animation: spin 0.6s linear infinite; margin-bottom: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Detail sections */
.detail-section { padding: 14px 20px; border-bottom: 1px solid var(--cld-bg3); }
.detail-section:last-child { border-bottom: none; }
.detail-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--cld-text3); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.detail-section-title .count {
  background: var(--cld-bg3); padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-weight: 600; color: var(--cld-text2);
}
details.detail-section > summary.detail-section-title {
  cursor: pointer; list-style: none; user-select: none;
}
details.detail-section > summary.detail-section-title::before {
  content: "\\25B6"; display: inline-block; width: 14px; font-size: 9px;
  transition: transform 0.15s ease; margin-right: 4px;
}
details.detail-section[open] > summary.detail-section-title::before {
  transform: rotate(90deg);
}
details.detail-section > summary.detail-section-title::-webkit-details-marker { display: none; }
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--cld-bg3); border-radius: var(--cld-radius-sm); overflow: hidden;
}
.detail-cell { background: var(--cld-bg); padding: 8px 12px; }
.detail-cell-key { font-size: 10px; color: var(--cld-text3); font-weight: 500; margin-bottom: 2px; }
.detail-cell-val { font-size: 12px; color: var(--cld-text); font-weight: 500; word-break: break-all; }
.detail-cell-val.link-val { color: var(--cld-accent); cursor: pointer; }
.detail-cell-val.link-val:hover { text-decoration: underline; }
.detail-cell.full-width { grid-column: 1 / -1; }

/* Chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 500; white-space: nowrap; }
.chip-tag { background: var(--cld-chip-tag-bg); color: var(--cld-chip-tag-fg); }
.chip-set { background: var(--cld-chip-set-bg); color: var(--cld-chip-set-fg); border: 1px solid var(--cld-chip-set-border); }
.chip-date { background: var(--cld-chip-date-bg); color: var(--cld-chip-date-fg); border: 1px solid var(--cld-chip-date-border); }
.chip-int { background: var(--cld-chip-int-bg); color: var(--cld-chip-int-fg); border: 1px solid var(--cld-chip-int-border); }

/* Meta rows */
.meta-row {
  display: flex; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--cld-bg3); gap: 8px; font-size: 12px;
}
.meta-row:last-child { border-bottom: none; }
.meta-key {
  color: var(--cld-text2); min-width: 0; flex-shrink: 0; max-width: 45%;
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px;
}
.meta-val { color: var(--cld-text); flex: 1; min-width: 0; text-align: right; }

/* Derived assets */
.derived-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--cld-bg3); font-size: 11px;
}
.derived-card:last-child { border-bottom: none; }
.derived-thumb {
  width: 48px; height: 36px; border-radius: 4px;
  object-fit: cover; background: var(--cld-bg3); flex-shrink: 0;
}
.derived-info { flex: 1; min-width: 0; }
.derived-tx { color: var(--cld-text); font-family: monospace; font-size: 10px; word-break: break-all; }
.derived-meta { color: var(--cld-text3); font-size: 10px; margin-top: 2px; }
.derived-open { color: var(--cld-accent); cursor: pointer; font-weight: 500; white-space: nowrap; font-size: 11px; }
.derived-open:hover { text-decoration: underline; }

/* Error */
.modal-error { text-align: center; padding: 32px 20px; color: var(--cld-text2); font-size: 13px; }

/* Status / loading */
.status { text-align: center; padding: 48px 16px; color: var(--cld-text2); font-size: 14px; }
.status .icon { font-size: 32px; margin-bottom: 8px; }

/* Fetch prompt */
.prompt { text-align: center; padding: 48px 24px; color: var(--cld-text2); }
.prompt-icon { font-size: 36px; margin-bottom: 12px; }
.prompt-title { font-size: 15px; font-weight: 600; color: var(--cld-text); margin-bottom: 6px; }
.prompt-desc { font-size: 13px; max-width: 420px; margin: 0 auto 20px; line-height: 1.5; }
.prompt-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.prompt-btn {
  padding: 8px 20px; border-radius: var(--cld-radius); font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--cld-border); background: var(--cld-bg2);
  color: var(--cld-text); font-family: inherit; transition: background 0.15s, border-color 0.15s;
}
.prompt-btn:hover { background: var(--cld-bg3); border-color: var(--cld-border2); }
.prompt-btn-primary { background: var(--cld-primary); color: #fff; border-color: var(--cld-primary); }
.prompt-btn-primary:hover { background: var(--cld-primary-light); border-color: var(--cld-primary-light); }

/* Error toast */
.error-toast {
  position: fixed; bottom: 16px; left: 16px; right: 16px;
  background: var(--cld-error); color: #fff; padding: 12px 16px;
  border-radius: var(--cld-radius); box-shadow: var(--cld-shadow-md);
  font-size: 13px; z-index: 2000; display: flex; align-items: flex-start;
  gap: 10px; animation: toastIn 0.2s ease-out; max-width: 600px; margin: 0 auto;
}
.error-toast-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.error-toast-body { flex: 1; min-width: 0; }
.error-toast-title { font-weight: 600; margin-bottom: 2px; }
.error-toast-msg { font-size: 12px; opacity: 0.9; word-break: break-word; }
.error-toast-close {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 16px; opacity: 0.8; padding: 0 2px; flex-shrink: 0; font-family: inherit;
}
.error-toast-close:hover { opacity: 1; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Thumb overlays */
.thumb-overlay {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
}
.play-icon {
  width: 40px; height: 40px; background: rgba(0,0,0,0.55);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.play-icon::after {
  content: ""; display: block; width: 0; height: 0;
  border-style: solid; border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #fff; margin-left: 3px;
}
.audio-icon {
  width: 40px; height: 40px; background: rgba(0,0,0,0.55);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px;
}
.duration-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.7); color: #fff; font-size: 10px;
  font-weight: 600; padding: 2px 6px; border-radius: 4px;
  font-variant-numeric: tabular-nums; backdrop-filter: blur(4px);
}
.status-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 10px; text-transform: capitalize;
}
.status-ok   { background: #dcfce7; color: #166534; }
.status-warn { background: #fef9c3; color: #854d0e; }
.status-err  { background: #fee2e2; color: #991b1b; }
.file-icon {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; color: var(--cld-text3);
}
.file-icon svg { width: 36px; height: 36px; }
.file-icon-label { font-size: 10px; font-weight: 600; text-transform: uppercase; }

/* Native media players */
.hero-video {
  width: 100%; max-height: 300px; display: block;
  background: #000; border-radius: 0;
}
.hero-audio-wrap {
  position: relative; padding: 20px;
  background: var(--cld-bg3); display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.hero-audio-waveform {
  width: 100%; max-height: 120px; object-fit: contain; display: block;
  opacity: 0.6; border-radius: var(--cld-radius-sm);
}
.hero-audio-wrap audio { width: 100%; max-width: 500px; }
.hero-audio-note {
  font-size: 28px; color: var(--cld-text3); margin-bottom: 4px;
}
.media-modal-video {
  width: 100%; display: block; background: #000;
  max-height: 60vh;
}
.media-modal-audio-wrap {
  padding: 24px 20px; background: var(--cld-bg3);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.media-modal-audio-wrap img {
  width: 100%; max-height: 100px; object-fit: contain; opacity: 0.6;
  border-radius: var(--cld-radius-sm);
}
.media-modal-audio-wrap audio { width: 100%; max-width: 480px; }
.thumb-overlay.playable { pointer-events: auto; cursor: pointer; }

/* Upload app */
.upload-zone {
  border: 2px dashed var(--cld-border2); border-radius: var(--cld-radius);
  padding: 40px 24px; text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--cld-bg2);
}
.upload-zone:hover { border-color: var(--cld-accent); background: var(--cld-accent-bg); }
.upload-zone.dragover { border-color: var(--cld-accent); background: var(--cld-accent-bg); }
.upload-zone-icon { margin-bottom: 8px; color: var(--cld-text3); display: flex; align-items: center; justify-content: center; }
.upload-zone-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.upload-zone-text { font-size: 14px; color: var(--cld-text2); margin-bottom: 4px; }
.upload-zone-hint { font-size: 12px; color: var(--cld-text3); }
.upload-zone-btn {
  display: inline-block; margin-top: 14px; padding: 8px 22px;
  border-radius: var(--cld-radius); font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--cld-accent); background: var(--cld-accent);
  color: #fff; font-family: inherit; transition: background 0.15s;
}
.upload-zone-btn:hover { background: var(--cld-primary-light); border-color: var(--cld-primary-light); }
.upload-or { margin: 16px 0; font-size: 12px; color: var(--cld-text3); display: flex; align-items: center; gap: 10px; }
.upload-or::before, .upload-or::after { content: ""; flex: 1; height: 1px; background: var(--cld-border); }
.upload-url-row { display: flex; gap: 8px; }
.upload-url-input {
  flex: 1; padding: 8px 12px; border-radius: var(--cld-radius-sm);
  border: 1px solid var(--cld-border); background: var(--cld-bg);
  color: var(--cld-text); font-size: 13px; font-family: inherit; outline: none;
}
.upload-url-input:focus { border-color: var(--cld-accent); }
.upload-url-input::placeholder { color: var(--cld-text3); }
.upload-url-btn {
  padding: 8px 16px; border-radius: var(--cld-radius-sm);
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--cld-accent); background: transparent;
  color: var(--cld-accent); font-family: inherit; transition: background 0.15s;
  white-space: nowrap;
}
.upload-url-btn:hover { background: var(--cld-accent-bg); }
.upload-params {
  margin-top: 16px; padding: 12px 16px; background: var(--cld-bg3);
  border-radius: var(--cld-radius-sm); font-size: 12px; color: var(--cld-text2);
}
.upload-params-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--cld-text3); margin-bottom: 6px; }
.upload-params .chip { margin-right: 4px; margin-bottom: 4px; }
.upload-preview {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  background: var(--cld-bg2); border: 1px solid var(--cld-border);
  border-radius: var(--cld-radius); margin-bottom: 16px;
}
.upload-preview-thumb {
  width: 56px; height: 56px; border-radius: var(--cld-radius-sm);
  object-fit: cover; background: var(--cld-bg3); flex-shrink: 0;
}
.upload-preview-icon {
  width: 56px; height: 56px; border-radius: var(--cld-radius-sm);
  background: var(--cld-bg3); flex-shrink: 0; display: flex;
  align-items: center; justify-content: center; color: var(--cld-text3);
}
.upload-preview-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.upload-preview-info { flex: 1; min-width: 0; }
.upload-preview-name { font-size: 13px; font-weight: 600; color: var(--cld-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-preview-meta { font-size: 11px; color: var(--cld-text3); margin-top: 2px; }
.upload-progress-wrap { margin-top: 8px; }
.upload-progress-bar {
  height: 6px; border-radius: 3px; background: var(--cld-bg3); overflow: hidden;
}
.upload-progress-fill {
  height: 100%; background: var(--cld-accent); border-radius: 3px;
  transition: width 0.3s ease; width: 0%;
}
.upload-progress-text { font-size: 11px; color: var(--cld-text3); margin-top: 4px; text-align: center; }
.upload-error-msg {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--cld-radius);
  color: #991b1b; padding: 10px 14px; font-size: 12px; margin-top: 8px;
  word-break: break-word; line-height: 1.5;
}
.upload-result {
  border: 1px solid var(--cld-border); border-radius: var(--cld-radius);
  overflow: hidden;
}
.upload-result-hero {
  position: relative; background: var(--cld-bg3);
  display: flex; align-items: center; justify-content: center; min-height: 120px;
}
.upload-result-hero img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.upload-result-hero .file-icon { padding: 30px 20px; }
.upload-result-body { padding: 16px; }
.upload-result-title {
  font-size: 15px; font-weight: 600; color: var(--cld-text); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.upload-result-title .success-icon { color: var(--cld-success); font-size: 18px; }
.upload-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.upload-actions .prompt-btn { font-size: 12px; padding: 6px 16px; }

/* Upload form fields */
.upload-form {
  margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.upload-field { display: flex; flex-direction: column; gap: 3px; }
.upload-field.full-width { grid-column: 1 / -1; }
.upload-field label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--cld-text3);
}
.upload-field input[type="text"],
.upload-field input[type="number"],
.upload-field select,
.upload-field textarea {
  padding: 7px 10px; border-radius: var(--cld-radius-sm);
  border: 1px solid var(--cld-border); background: var(--cld-bg);
  color: var(--cld-text); font-size: 13px; font-family: inherit; outline: none;
  width: 100%;
}
.upload-field input[type="text"]:focus,
.upload-field input[type="number"]:focus,
.upload-field select:focus,
.upload-field textarea:focus { border-color: var(--cld-accent); }
.upload-field input::placeholder,
.upload-field textarea::placeholder { color: var(--cld-text3); }
.upload-field textarea { resize: vertical; min-height: 36px; }
.upload-field select { cursor: pointer; appearance: auto; }

/* Help icon ("?") with inline bubble */
.help-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cld-border); color: var(--cld-text2);
  font-size: 9px; font-weight: 700; cursor: pointer;
  position: relative; vertical-align: middle; margin-left: 4px;
  user-select: none; line-height: 1; flex-shrink: 0;
}
.help-toggle:hover, .help-toggle:focus { background: var(--cld-accent); color: #fff; }
.help-bubble {
  display: none; position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); width: 220px; padding: 8px 10px;
  background: var(--cld-text); color: var(--cld-bg); font-size: 11px;
  font-weight: 400; line-height: 1.4; border-radius: var(--cld-radius-sm);
  box-shadow: var(--cld-shadow-sm); z-index: 200; text-transform: none;
  letter-spacing: 0; white-space: normal; pointer-events: none;
}
.help-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%); border: 5px solid transparent;
  border-top-color: var(--cld-text);
}
.help-toggle:hover .help-bubble,
.help-toggle:focus .help-bubble { display: block; }
.detail-grid .help-toggle .help-bubble,
.detail-section-title .help-toggle .help-bubble {
  left: -4px; transform: none;
}
.detail-grid .help-toggle .help-bubble::after,
.detail-section-title .help-toggle .help-bubble::after {
  left: 10px; transform: none;
}
.color-swatch {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.color-swatch-box {
  width: 28px; height: 28px; border-radius: 4px; border: 1px solid var(--cld-border);
}
.color-swatch-label { font-size: 9px; color: var(--cld-text3); }
.color-swatch-pct { font-size: 9px; color: var(--cld-text2); }
.color-group-title {
  font-size: 10px; font-weight: 600; color: var(--cld-text3);
  text-transform: uppercase; margin: 6px 0 4px;
}
.color-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }

/* Checkbox field variant */
.upload-field-check {
  flex-direction: row; align-items: center; gap: 6px;
}
.upload-field-check label {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  text-transform: none; font-weight: 500; font-size: 12px; color: var(--cld-text2);
}
.upload-field-check input[type="checkbox"] {
  width: 15px; height: 15px; cursor: pointer; accent-color: var(--cld-accent);
}

/* Collapsible sections */
details.upload-section {
  margin-top: 14px; border: 1px solid var(--cld-border);
  border-radius: var(--cld-radius-sm); overflow: hidden;
}
details.upload-section summary {
  padding: 8px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--cld-text3);
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  background: var(--cld-bg2); user-select: none;
}
details.upload-section summary::before {
  content: "\\25B6"; font-size: 8px; transition: transform 0.15s;
}
details.upload-section[open] summary::before { transform: rotate(90deg); }
details.upload-section summary::-webkit-details-marker { display: none; }
details.upload-section > .upload-form { margin: 0; padding: 10px 12px; }

/* Staged file preview */
.upload-staged {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--cld-accent-bg); border: 1px solid var(--cld-accent);
  border-radius: var(--cld-radius); margin-bottom: 4px; position: relative;
}
.upload-staged-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--cld-accent); }
.upload-staged-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.upload-staged-info { flex: 1; min-width: 0; }
.upload-staged-name {
  font-size: 13px; font-weight: 600; color: var(--cld-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.upload-staged-meta { font-size: 11px; color: var(--cld-text3); margin-top: 2px; }
.upload-staged-clear:hover { color: var(--cld-error); border-color: var(--cld-error); background: rgba(206,25,13,0.08); }

/* Upload submit button */
.upload-submit {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--cld-bg); border-top: 1px solid var(--cld-border);
  padding: 12px 0; margin-top: 16px; text-align: center;
}
.upload-submit-btn {
  padding: 10px 32px !important; font-size: 14px !important; font-weight: 600 !important;
}

/* Combobox (folder picker) */
.combo-wrap { position: relative; }
.combo-dropdown {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  max-height: 180px; overflow-y: auto; z-index: 100;
  background: var(--cld-bg); border: 1px solid var(--cld-border);
  border-radius: var(--cld-radius-sm); box-shadow: var(--cld-shadow-sm);
  margin-top: 2px;
}
.combo-item {
  padding: 7px 10px; font-size: 13px; color: var(--cld-text);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-item:hover, .combo-item-active { background: var(--cld-accent-bg); color: var(--cld-accent); }

.raw-response-pre {
  margin: 0; padding: 10px 12px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-all;
  background: var(--cld-bg2); border-radius: 6px; color: var(--cld-text2);
  max-height: 500px; overflow-y: auto;
}
.json-key { color: #881391; }
.json-str { color: #0b7285; }
.json-num { color: #c92a2a; }
.json-bool { color: #5c940d; }
.json-null { color: #868e96; }
@media (prefers-color-scheme: dark) {
  .json-key { color: #da77f2; }
  .json-str { color: #66d9e8; }
  .json-num { color: #ff8787; }
  .json-bool { color: #a9e34b; }
  .json-null { color: #868e96; }
}
`;

// ── JS: SVG icon strings (Lucide-style, 24px viewBox, stroke-based) ──
export const SHARED_JS_ICONS = /* js */ `
var IC = {
  refresh:    '<svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>',
  chevronLeft:'<svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>',
  arrowDown:  '<svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></svg>',
  x:          '<svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
  zap:        '<svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>',
  uploadCloud:'<svg viewBox="0 0 24 24"><polyline points="16 16 12 12 8 16"/><line x1="12" y1="12" x2="12" y2="21"/><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"/></svg>',
  alertTriangle:'<svg viewBox="0 0 24 24"><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"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>',
  folderOpen: '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><polyline points="22 13 17 13 15 16 9 16 7 13 2 13"/></svg>',
  checkCircle:'<svg viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
  clock:      '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
  file:       '<svg viewBox="0 0 24 24"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>',
  image:      '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>',
};
`;

// ── JS: MCPApp client class ─────────────────────────────────────────
export const SHARED_JS_MCP_CLIENT = /* js */ `
var RPC_TIMEOUT_MS = 15000;
var TOOL_CALL_TIMEOUT_MS = 30000;
var INIT_TIMEOUT_MS = 10000;

class MCPApp {
  constructor(info) {
    this.info = info;
    this.ontoolresult = null;
    this.ontoolinput = null;
    this.ontoolcancelled = null;
    this.onhostcontextchanged = null;
    this._id = 1;
    this._pending = new Map();
    this._timers = new Map();
  }
  connect() {
    console.log(LOG_PREFIX, "connecting…");
    window.addEventListener("message", (ev) => {
      const m = ev.data;
      if (!m || m.jsonrpc !== "2.0") return;
      if (m.method) console.log(LOG_PREFIX, "recv notification:", m.method);
      else if (m.id != null) console.log(LOG_PREFIX, "recv response id=" + m.id);

      if (m.method === "ui/notifications/tool-result" && this.ontoolresult)
        this.ontoolresult(m.params);
      else if (m.method === "ui/notifications/tool-input" && this.ontoolinput)
        this.ontoolinput(m.params);
      else if (m.method === "ui/notifications/tool-cancelled" && this.ontoolcancelled)
        this.ontoolcancelled(m.params);
      else if (m.method === "ui/notifications/host-context-changed" && this.onhostcontextchanged)
        this.onhostcontextchanged(m.params);
      else if (m.id != null && this._pending.has(m.id)) {
        clearTimeout(this._timers.get(m.id));
        this._timers.delete(m.id);
        var cb = this._pending.get(m.id);
        this._pending.delete(m.id);
        if (m.error) {
          console.warn(LOG_PREFIX, "rpc error id=" + m.id, m.error);
          cb.reject(m.error);
        } else {
          cb.resolve(m.result);
        }
      }
    });
    return this._rpc("ui/initialize", {
      protocolVersion: "2026-01-26",
      appInfo: { name: this.info.name, version: this.info.version },
      appCapabilities: {},
    }, INIT_TIMEOUT_MS).then(function() {
      console.log(LOG_PREFIX, "initialized, sending initialized notification");
      window.parent.postMessage({ jsonrpc: "2.0", method: "ui/notifications/initialized" }, "*");
    });
  }
  callServerTool(params) {
    console.log(LOG_PREFIX, "calling tool:", params.name);
    return this._rpc("tools/call", params, TOOL_CALL_TIMEOUT_MS);
  }
  _rpc(method, params, timeoutMs) {
    var self = this;
    var id = this._id++;
    var ms = timeoutMs || RPC_TIMEOUT_MS;
    console.log(LOG_PREFIX, "rpc →", method, "id=" + id, "timeout=" + ms + "ms");
    return new Promise(function(resolve, reject) {
      self._pending.set(id, { resolve: resolve, reject: reject });
      var timer = setTimeout(function() {
        if (self._pending.has(id)) {
          self._pending.delete(id);
          self._timers.delete(id);
          var err = new Error("RPC timeout after " + ms + "ms: " + method + " (id=" + id + ")");
          console.error(LOG_PREFIX, err.message);
          reject(err);
        }
      }, ms);
      self._timers.set(id, timer);
      window.parent.postMessage({ jsonrpc: "2.0", id: id, method: method, params: params }, "*");
    });
  }
  reportSize(height) {
    window.parent.postMessage({
      jsonrpc: "2.0", method: "ui/notifications/size-changed", params: { height: height },
    }, "*");
  }
}
`;

// ── JS: Helper functions ────────────────────────────────────────────
export const SHARED_JS_HELPERS = /* js */ `
function copyText(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    return navigator.clipboard.writeText(text).catch(function() { return _copyFallback(text); });
  }
  return _copyFallback(text);
}
function _copyFallback(text) {
  return new Promise(function(resolve, reject) {
    try {
      var ta = document.createElement("textarea");
      ta.value = text;
      ta.setAttribute("readonly", "");
      ta.style.position = "fixed"; ta.style.top = "0"; ta.style.left = "0";
      ta.style.opacity = "0"; ta.style.pointerEvents = "none";
      document.body.appendChild(ta);
      ta.select(); ta.setSelectionRange(0, text.length);
      var ok = document.execCommand("copy");
      document.body.removeChild(ta);
      if (ok) resolve(); else reject(new Error("Clipboard unavailable"));
    } catch (e) { reject(e); }
  });
}

function fmtBytes(b) {
  if (!b) return "";
  var u = ["B","KB","MB","GB"], i = Math.min(Math.floor(Math.log(b)/Math.log(1024)), 3);
  var v = b / Math.pow(1024, i);
  return (v < 10 ? v.toFixed(1) : Math.round(v)) + " " + u[i];
}

function fmtDate(iso) {
  if (!iso) return "";
  return new Date(iso).toLocaleDateString("en-US", { month:"short", day:"numeric", year:"numeric" });
}

function fmtDuration(sec) {
  if (sec == null || sec <= 0) return "";
  var s = Math.round(sec);
  var m = Math.floor(s / 60);
  s = s % 60;
  return m + ":" + (s < 10 ? "0" : "") + s;
}

function isAudioResource(r) {
  if (!r) return false;
  return r.is_audio === true || (r.resource_type === "video" && !r.width && !r.height);
}

function insertTransformation(url, tx, resource) {
  var rt = (resource && resource.resource_type) || "";
  var pattern = new RegExp("/(" + (rt || "image|video|raw") + ")/([^/]+)/");
  var match = url.match(pattern);
  if (!match) return "";
  var insertAt = match.index + match[0].length;
  return url.slice(0, insertAt) + tx + "/" + url.slice(insertAt);
}

function thumbUrl(url, w, h, resource) {
  if (!url) return "";
  w = w || 300; h = h || 225;
  var rt = (resource && resource.resource_type) || "";
  var fmt = (resource && resource.format || "").toLowerCase();

  if (rt === "raw") return "";

  if (isAudioResource(resource)) {
    var base = url.replace(/\\.[^/.]+$/, ".png");
    return insertTransformation(base, "c_scale,w_" + w + ",h_" + h + "/fl_waveform,b_transparent,co_rgb:3448c5", resource);
  }

  if (rt === "video") {
    return insertTransformation(url, "c_fill,g_auto,w_" + w + ",h_" + h + ",so_auto,f_jpg,q_auto", resource);
  }

  if (fmt === "pdf") {
    return insertTransformation(url, "c_fill,w_" + w + ",h_" + h + ",pg_1,f_auto,q_auto", resource);
  }

  return insertTransformation(url, "c_fill,g_auto,w_" + w + ",h_" + h + ",f_auto,q_auto", resource);
}

function mediaUrl(url, resource) {
  if (!url) return "";
  var rt = (resource && resource.resource_type) || "";
  if (rt !== "video") return url;
  return insertTransformation(url, "q_auto", resource) || url;
}

function esc(s) {
  var d = document.createElement("div");
  d.textContent = s;
  return d.innerHTML;
}

function prettyKey(k) {
  return k.replace(/[_-]/g, " ").replace(/\\b\\w/g, function(c) { return c.toUpperCase(); });
}

var FILE_TYPE_ICONS = {
  pdf:  '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#E8384F" opacity="0.15" stroke="#E8384F" stroke-width="1.5"/><text x="18" y="22" text-anchor="middle" fill="#E8384F" font-size="9" font-weight="700">PDF</text></svg>',
  zip:  '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#F5A623" opacity="0.15" stroke="#F5A623" stroke-width="1.5"/><text x="18" y="22" text-anchor="middle" fill="#F5A623" font-size="9" font-weight="700">ZIP</text></svg>',
  doc:  '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#2B7CFF" opacity="0.15" stroke="#2B7CFF" stroke-width="1.5"/><text x="18" y="22" text-anchor="middle" fill="#2B7CFF" font-size="9" font-weight="700">DOC</text></svg>',
  xls:  '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#22AA00" opacity="0.15" stroke="#22AA00" stroke-width="1.5"/><text x="18" y="22" text-anchor="middle" fill="#22AA00" font-size="9" font-weight="700">XLS</text></svg>',
  csv:  '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#22AA00" opacity="0.15" stroke="#22AA00" stroke-width="1.5"/><text x="18" y="22" text-anchor="middle" fill="#22AA00" font-size="9" font-weight="700">CSV</text></svg>',
  json: '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#7c3aed" opacity="0.15" stroke="#7c3aed" stroke-width="1.5"/><text x="18" y="22" text-anchor="middle" fill="#7c3aed" font-size="8" font-weight="700">JSON</text></svg>',
  _default: '<svg viewBox="0 0 36 36" fill="none"><rect x="6" y="2" width="24" height="32" rx="3" fill="#90a0b3" opacity="0.15" stroke="#90a0b3" stroke-width="1.5"/><path d="M14 14h8M14 18h8M14 22h5" stroke="#90a0b3" stroke-width="1.2" stroke-linecap="round"/></svg>',
};
FILE_TYPE_ICONS.docx = FILE_TYPE_ICONS.doc;
FILE_TYPE_ICONS.xlsx = FILE_TYPE_ICONS.xls;
FILE_TYPE_ICONS.rar = FILE_TYPE_ICONS.zip;
FILE_TYPE_ICONS["7z"] = FILE_TYPE_ICONS.zip;
FILE_TYPE_ICONS.xml = FILE_TYPE_ICONS.json;

function fileTypeIcon(format) {
  var f = (format || "").toLowerCase();
  return FILE_TYPE_ICONS[f] || FILE_TYPE_ICONS._default;
}

var errorToastTimer = null;
function showError(title, msg) {
  console.error(LOG_PREFIX, title, msg);
  dismissError();
  var h = '<div class="error-toast" id="error-toast">';
  h += '<span class="error-toast-icon">\\u26A0</span>';
  h += '<div class="error-toast-body">';
  h += '<div class="error-toast-title">' + esc(title) + "</div>";
  if (msg) h += '<div class="error-toast-msg">' + esc(msg) + "</div>";
  h += "</div>";
  h += '<button class="error-toast-close" onclick="dismissError()">\\u2715</button>';
  h += "</div>";
  document.body.insertAdjacentHTML("beforeend", h);
  errorToastTimer = setTimeout(dismissError, 8000);
}

function dismissError() {
  clearTimeout(errorToastTimer);
  var el = document.getElementById("error-toast");
  if (el) el.remove();
}

function showPersistentError(title, msg) {
  var root = document.getElementById("app");
  var h = '<div class="prompt">';
  h += '<div class="prompt-icon">\\u26A0\\uFE0F</div>';
  h += '<div class="prompt-title">' + esc(title) + '</div>';
  if (msg) h += '<div class="prompt-desc">' + esc(msg) + '</div>';
  h += '</div>';
  root.innerHTML = h;
  requestAnimationFrame(function() { app.reportSize(document.documentElement.scrollHeight); });
}

function renderParamsList(args) {
  if (!args) return '';
  var keys = Object.keys(args);
  if (keys.length === 0) return '';
  var h = '<div style="display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin-top:6px">';
  for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var v = args[k];
    var display;
    if (v === null || v === undefined) display = '<span style="color:var(--cld-text3)">null</span>';
    else if (typeof v === "boolean") display = '<span style="color:' + (v ? '#16a34a' : 'var(--cld-text3)') + '">' + v + '</span>';
    else if (typeof v === "object") display = '<span style="font-family:monospace">' + esc(JSON.stringify(v)) + '</span>';
    else display = '<span style="color:var(--cld-text)">' + esc(String(v)) + '</span>';
    h += '<span style="font-size:11px"><span style="color:var(--cld-text3)">' + esc(prettyKey(k)) + '</span> ' + display + '</span>';
  }
  h += '</div>';
  return h;
}

function showReadyPrompt(pendingCall, fetchFn) {
  var root = document.getElementById("app");
  var h = '<div style="text-align:center;padding:24px 16px;color:var(--cld-text2)">';
  h += '<div style="font-size:13px;color:var(--cld-text2);margin-bottom:4px">Waiting for result\\u2026</div>';
  h += renderParamsList(pendingCall.args);
  h += '<div style="margin-top:12px"><button class="prompt-btn" id="ready-fetch-btn" style="font-size:11px;padding:4px 14px">Fetch Directly</button></div>';
  h += '</div>';
  root.innerHTML = h;
  document.getElementById("ready-fetch-btn").addEventListener("click", function() { fetchFn(); });
  requestAnimationFrame(function() { app.reportSize(document.documentElement.scrollHeight); });
}

function showCancelledPrompt(pendingCall, fetchFn) {
  var root = document.getElementById("app");
  var name = pendingCall.name;
  var h = '<div class="prompt" style="padding:32px 24px">';
  h += '<div style="font-size:14px;font-weight:600;color:var(--cld-text);margin-bottom:4px">Cancelled</div>';
  if (name) h += '<div style="font-size:12px;color:var(--cld-text3);margin-bottom:8px">' + esc(prettyKey(name)) + '</div>';
  h += renderParamsList(pendingCall.args);
  h += '<div class="prompt-actions" style="margin-top:14px">';
  h += '<button class="prompt-btn prompt-btn-primary" id="cancelled-fetch-btn">Fetch Directly</button>';
  h += '</div>';
  h += '</div>';
  root.innerHTML = h;
  document.getElementById("cancelled-fetch-btn").addEventListener("click", function() { fetchFn(); });
  requestAnimationFrame(function() { app.reportSize(document.documentElement.scrollHeight); });
}

function ingestResult(params) {
  try {
    var payload = params.result || params;
    var isErr = payload.isError === true;
    var content = payload.content || [];
    var text = content.find(function(c) { return c.type === "text"; });
    if (!text) return null;
    var raw = text.text;
    if (isErr) {
      console.warn(LOG_PREFIX, "ingestResult: server error:", raw);
      return { _error: true, _message: raw };
    }
    if (typeof raw === "string" && raw.charAt(0) !== "{" && raw.charAt(0) !== "[") {
      console.warn(LOG_PREFIX, "ingestResult: text is not JSON, likely truncated:", raw.substring(0, 120));
      return { _truncated: true, _message: raw };
    }
    var parsed = JSON.parse(raw);
    if (parsed && parsed.error) {
      var msg = parsed.error.message || JSON.stringify(parsed.error);
      console.warn(LOG_PREFIX, "ingestResult: API error:", msg);
      return { _error: true, _message: msg };
    }
    return parsed;
  } catch (e) {
    console.warn(LOG_PREFIX, "ingestResult parse error:", e, "raw length:", (raw || "").length);
    return { _parseError: true, _message: "JSON parse failed (length " + (raw || "").length + ")" };
  }
}

function renderModalError(title, detail) {
  return '<div class="modal-error" style="padding:40px 20px;text-align:center;">'
    + '<div style="font-size:28px;margin-bottom:8px;">\\u26A0\\uFE0F</div>'
    + '<div style="font-weight:600;font-size:14px;color:var(--cld-text);margin-bottom:6px;">' + esc(title) + "</div>"
    + '<div style="font-size:12px;color:var(--cld-text3);max-width:400px;margin:0 auto;">' + esc(detail) + "</div>"
    + "</div>";
}
`;

// ── JS: Modal system ────────────────────────────────────────────────
export const SHARED_JS_MODAL = /* js */ `
function closeModal() {
  var ov = document.querySelector(".modal-overlay");
  if (ov) ov.remove();
}

/* Position the modal overlay so it's centered on the part of the iframe
 * the user is currently looking at. Inside an iframe that the host has
 * sized to scrollHeight, position: fixed anchors to iframe-center, not
 * the user's visible band — so we compute the visible band ourselves
 * via IntersectionObserver and place the overlay absolutely there. */
function positionModalInVisibleArea(overlay) {
  if (!overlay) return;
  var docH = Math.max(document.documentElement.scrollHeight, window.innerHeight);

  // Try IntersectionObserver first (works cross-origin too)
  if (typeof IntersectionObserver !== "undefined") {
    var probe = document.createElement("div");
    probe.style.cssText = "position:absolute;left:0;top:0;width:1px;height:" + docH + "px;pointer-events:none;visibility:hidden;";
    document.body.appendChild(probe);
    var io = new IntersectionObserver(function(entries) {
      try {
        var entry = entries[0];
        var rect = entry.intersectionRect;
        var rootRect = entry.rootBounds || entry.boundingClientRect;
        // intersectionRect.top is in viewport coords; visible band of the
        // document is from (probe.top + rect.top) to (probe.top + rect.bottom).
        var probeTop = entry.boundingClientRect.top; // viewport-relative
        var visibleTop = rect.top - probeTop;        // document-relative
        var visibleHeight = rect.height;
        if (visibleHeight > 0) {
          overlay.style.top = visibleTop + "px";
          overlay.style.height = visibleHeight + "px";
        } else {
          // Fallback: probe not intersecting (shouldn't happen with full-height probe)
          overlay.style.top = (window.scrollY || 0) + "px";
          overlay.style.height = window.innerHeight + "px";
        }
      } finally {
        io.disconnect();
        if (probe.parentNode) probe.parentNode.removeChild(probe);
      }
    });
    io.observe(probe);
    return;
  }

  // Fallback: same-origin only — read iframe's bounding rect
  var rect = document.documentElement.getBoundingClientRect();
  var visibleTop = rect.top < 0 ? -rect.top : 0;
  var visibleHeight = Math.min(window.innerHeight, rect.bottom) - Math.max(0, rect.top);
  overlay.style.top = visibleTop + "px";
  overlay.style.height = Math.max(visibleHeight, 200) + "px";
}

function openModal(headerHtml, bodyHtml) {
  closeModal();
  var h = '<div class="modal-overlay"><div class="modal">';
  h += headerHtml;
  h += '<div class="modal-body">' + bodyHtml + "</div>";
  h += "</div></div>";
  document.body.insertAdjacentHTML("beforeend", h);

  var overlay = document.querySelector(".modal-overlay");
  positionModalInVisibleArea(overlay);
  overlay.addEventListener("click", function(e) {
    if (e.target === overlay || e.target.classList.contains("modal-close")) {
      closeModal();
      return;
    }
    var el = e.target;
    while (el && el !== overlay) {
      if (el.id === "load-more-derived-btn") {
        loadMoreDerived(el);
        return;
      }
      if (el.classList && el.classList.contains("link-val") && el.dataset.url) {
        app._rpc("ui/open-link", { url: el.dataset.url });
        return;
      }
      if (el.classList && el.classList.contains("derived-open") && el.dataset.url) {
        app._rpc("ui/open-link", { url: el.dataset.url });
        return;
      }
      el = el.parentElement;
    }
  });
  document.addEventListener("keydown", function onEsc(e) {
    if (e.key === "Escape") { closeModal(); document.removeEventListener("keydown", onEsc); }
  });
}

function modalHeader(name, url, sub, resource) {
  var h = '<div class="modal-header">';
  var thumb = thumbUrl(url, 60, 60, resource);
  if (thumb) h += '<img class="modal-header-thumb" src="' + esc(thumb) + '">';
  h += '<div class="modal-header-info">';
  h += '<h2>' + esc(name) + "</h2>";
  if (sub) h += '<div class="modal-header-sub">' + esc(sub) + "</div>";
  h += "</div>";
  h += '<button class="modal-close" title="Close">\\u2715</button>';
  h += "</div>";
  return h;
}
`;

// ── JS: Detail rendering functions ──────────────────────────────────
export const SHARED_JS_DETAIL_RENDERERS = /* js */ `
function statusBadge(text) {
  if (!text) return "";
  var t = text.toLowerCase().trim();
  var cls = "status-badge";
  if (t === "complete" || t === "approved") cls += " status-ok";
  else if (t === "pending" || t === "queued") cls += " status-warn";
  else if (t === "rejected" || t === "aborted" || t === "failed" || t === "error") cls += " status-err";
  return '<span class="' + cls + '">' + esc(text) + '</span>';
}

var OPEN_SECTIONS = { tags:1, context:1, timestamps:1, moderation:1, asset_info:1 };
function sectionStart(id) {
  return '<details class="detail-section"' + (OPEN_SECTIONS[id] ? ' open' : '') + '>';
}

function renderAssetGrid(r) {
  var fields = [
    ["public_id", "Public ID", r.public_id],
    ["asset_id", "Asset ID", r.asset_id],
    ["display_name", "Display Name", r.display_name],
    ["format", "Format", (r.format || "").toUpperCase()],
    ["resource_type", "Resource Type", r.resource_type],
    ["type", "Type", r.type],
    ["", "Dimensions", (r.width && r.height) ? r.width + " \\u00d7 " + r.height : ""],
    ["duration", "Duration", r.duration ? fmtDuration(r.duration) + " (" + r.duration.toFixed(2) + "s)" : ""],
    ["bytes", "File Size", r.bytes ? fmtBytes(r.bytes) + " (" + r.bytes.toLocaleString() + " bytes)" : ""],
    ["created_at", "Created", fmtDate(r.created_at)],
    ["uploaded_at", "Uploaded", fmtDate(r.uploaded_at)],
    ["access_mode", "Access Mode", r.access_mode],
    ["asset_folder", "Asset Folder", r.asset_folder || "\\u2014"],
    ["filename", "Filename", r.filename],
    ["original_filename", "Original Filename", r.original_filename],
    ["version", "Version", r.version],
    ["version_id", "Version ID", r.version_id],
    ["status", "Status", r.status],
    ["substatus", "Substatus", r.substatus],
    ["resource_subtype", "Subtype", r.resource_subtype],
    ["backup", "Backup", r.backup != null ? String(r.backup) : ""],
    ["backup_bytes", "Backup Size", r.backup_bytes ? fmtBytes(r.backup_bytes) : ""],
    ["pages", "Pages", r.pages],
    ["pixels", "Pixels", r.pixels ? r.pixels.toLocaleString() : ""],
    ["animated", "Animated", r.animated != null ? String(r.animated) : ""],
    ["placeholder", "Placeholder", r.placeholder != null ? String(r.placeholder) : ""],
    ["etag", "ETag", r.etag],
    ["illustration_score", "Illustration Score", r.illustration_score != null ? String(r.illustration_score) : ""],
    ["semi_transparent", "Semi-Transparent", r.semi_transparent != null ? String(r.semi_transparent) : ""],
    ["grayscale", "Grayscale", r.grayscale != null ? String(r.grayscale) : ""],
  ];
  if (r.is_audio) fields.push(["", "Audio", "Yes"]);
  if (r.audio_codec) fields.push(["", "Audio Codec", r.audio_codec]);
  if (r.audio_frequency) fields.push(["", "Audio Frequency", r.audio_frequency + " Hz"]);
  if (r.channels) fields.push(["", "Channels", r.channel_layout ? r.channels + " (" + r.channel_layout + ")" : String(r.channels)]);
  if (r.bit_rate) fields.push(["", "Bit Rate", Math.round(r.bit_rate / 1000) + " kbps"]);

  var h = '<div class="detail-grid">';
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i][2] && fields[i][2] !== 0) continue;
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(fields[i][1]) + tip(fields[i][0]) + "</div>";
    h += '<div class="detail-cell-val">' + esc(String(fields[i][2])) + "</div>";
    h += "</div>";
  }
  h += "</div>";

  if (r.url || r.secure_url) {
    h += '<div style="margin-top:10px">';
    if (r.url) {
      h += '<div class="meta-row"><span class="meta-key">URL</span>';
      h += '<span class="meta-val link-val detail-cell-val" data-url="' + esc(r.url) + '">' + esc(r.url) + "</span></div>";
    }
    if (r.secure_url) {
      h += '<div class="meta-row"><span class="meta-key">Secure URL</span>';
      h += '<span class="meta-val link-val detail-cell-val" data-url="' + esc(r.secure_url) + '">' + esc(r.secure_url) + "</span></div>";
    }
    if (r.playback_url) {
      h += '<div class="meta-row"><span class="meta-key">Playback URL</span>';
      h += '<span class="meta-val link-val detail-cell-val" data-url="' + esc(r.playback_url) + '">' + esc(r.playback_url) + "</span></div>";
    }
    h += "</div>";
  }
  return h;
}

function renderAudioInfo(r) {
  var a = r.audio || (r.video_metadata && r.video_metadata.audio);
  var codec = (a && a.codec) || r.audio_codec || "";
  var bitRate = (a && a.bit_rate) || r.audio_bit_rate || "";
  var freq = (a && a.frequency) || r.audio_frequency || "";
  var ch = (a && a.channels) || r.channels || "";
  var layout = (a && a.channel_layout) || r.channel_layout || "";
  if (!codec && !bitRate && !freq && !ch) return "";
  var fields = [
    ["Codec", codec],
    ["Bit Rate", bitRate ? Math.round(Number(bitRate) / 1000) + " kbps" : ""],
    ["Frequency", freq ? Number(freq).toLocaleString() + " Hz" : ""],
    ["Channels", layout ? ch + " (" + layout + ")" : ch],
  ];
  var h = sectionStart("audio_info");
  h += '<summary class="detail-section-title">Audio Info</summary>';
  h += '<div class="detail-grid">';
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i][1] && fields[i][1] !== 0) continue;
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(fields[i][0]) + "</div>";
    h += '<div class="detail-cell-val">' + esc(String(fields[i][1])) + "</div>";
    h += "</div>";
  }
  h += "</div></details>";
  return h;
}

function renderVideoInfo(r) {
  var v = r.video || (r.video_metadata && r.video_metadata.video);
  var codec = (v && v.codec) || r.codec || "";
  var profile = (v && v.profile) || r.profile || "";
  var level = (v && v.level) || r.level || "";
  var pixFmt = (v && v.pix_format) || r.pix_format || "";
  var vbr = (v && v.bit_rate) || r.video_bit_rate || "";
  var dar = (v && v.dar) || r.dar || "";
  var tb = (v && v.time_base) || r.time_base || "";
  if (!codec && !profile && !pixFmt && !vbr) return "";
  var fields = [
    ["Codec", codec],
    ["Profile", profile],
    ["Level", level],
    ["Pixel Format", pixFmt],
    ["Bit Rate", vbr ? Math.round(Number(vbr) / 1000) + " kbps" : ""],
    ["Aspect Ratio", dar],
    ["Time Base", tb],
    ["Frame Rate", r.frame_rate ? r.frame_rate + " fps" : ""],
    ["Frames", r.nb_frames],
    ["Rotation", (r.rotation != null && r.rotation !== 0) ? r.rotation + "\\u00b0" : ""],
  ];
  var h = sectionStart("video_info");
  h += '<summary class="detail-section-title">Video Info</summary>';
  h += '<div class="detail-grid">';
  for (var i = 0; i < fields.length; i++) {
    if (!fields[i][1] && fields[i][1] !== 0) continue;
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(fields[i][0]) + "</div>";
    h += '<div class="detail-cell-val">' + esc(String(fields[i][1])) + "</div>";
    h += "</div>";
  }
  h += "</div></details>";
  return h;
}

function renderTags(tags) {
  if (!tags || !tags.length) return "";
  var h = sectionStart("tags");
  h += '<summary class="detail-section-title">Tags' + tip("tags") + ' <span class="count">' + tags.length + "</span></summary>";
  h += '<div class="chip-list">';
  for (var i = 0; i < tags.length; i++) {
    h += '<span class="chip chip-tag">' + esc(tags[i]) + "</span>";
  }
  h += "</div></details>";
  return h;
}

function classifyMetaVal(v) {
  if (Array.isArray(v)) return "set";
  if (typeof v === "number") return "int";
  if (typeof v === "string" && /^\\d{4}-\\d{2}-\\d{2}/.test(v)) return "date";
  return "string";
}

function renderMetadata(meta) {
  if (!meta) return "";
  var keys = Object.keys(meta);
  if (!keys.length) return "";

  var groups = { string: [], int: [], date: [], set: [] };
  for (var i = 0; i < keys.length; i++) {
    var t = classifyMetaVal(meta[keys[i]]);
    groups[t].push({ key: keys[i], val: meta[keys[i]] });
  }

  var h = sectionStart("metadata");
  h += '<summary class="detail-section-title">Structured Metadata' + tip("metadata") + ' <span class="count">' + keys.length + "</span></summary>";

  if (groups.set.length) {
    for (var s = 0; s < groups.set.length; s++) {
      var item = groups.set[s];
      h += '<div class="meta-row" style="flex-direction:column;gap:4px">';
      h += '<span class="meta-key" style="max-width:100%">' + esc(prettyKey(item.key)) + "</span>";
      h += '<div class="chip-list">';
      for (var si = 0; si < item.val.length; si++) {
        h += '<span class="chip chip-set">' + esc(String(item.val[si])) + "</span>";
      }
      h += "</div></div>";
    }
  }
  if (groups.date.length) {
    for (var d = 0; d < groups.date.length; d++) {
      h += '<div class="meta-row">';
      h += '<span class="meta-key" title="' + esc(groups.date[d].key) + '">' + esc(prettyKey(groups.date[d].key)) + "</span>";
      h += '<span class="meta-val"><span class="chip chip-date">' + esc(groups.date[d].val) + "</span></span></div>";
    }
  }
  if (groups.int.length) {
    for (var n = 0; n < groups.int.length; n++) {
      h += '<div class="meta-row">';
      h += '<span class="meta-key" title="' + esc(groups.int[n].key) + '">' + esc(prettyKey(groups.int[n].key)) + "</span>";
      h += '<span class="meta-val"><span class="chip chip-int">' + esc(String(groups.int[n].val)) + "</span></span></div>";
    }
  }
  if (groups.string.length) {
    for (var st = 0; st < groups.string.length; st++) {
      h += '<div class="meta-row">';
      h += '<span class="meta-key" title="' + esc(groups.string[st].key) + '">' + esc(prettyKey(groups.string[st].key)) + "</span>";
      h += '<span class="meta-val">' + esc(String(groups.string[st].val)) + "</span></div>";
    }
  }

  h += "</details>";
  return h;
}

function renderDerived(derived, nextCursor, assetId) {
  if (!derived || !derived.length) return "";
  var h = sectionStart("derived");
  h += '<summary class="detail-section-title">Derived Assets' + tip("derived") + ' <span class="count" id="derived-count">' + derived.length + (nextCursor ? "+" : "") + "</span></summary>";
  h += '<div id="derived-list">';
  for (var i = 0; i < derived.length; i++) {
    var d = derived[i];
    var dUrl = d.secure_url || d.url || "";
    h += '<div class="derived-card">';
    if (dUrl) h += '<img class="derived-thumb" src="' + esc(dUrl) + '">';
    h += '<div class="derived-info">';
    h += '<div class="derived-tx">' + esc(d.transformation || "") + "</div>";
    h += '<div class="derived-meta">' + (d.format || "").toUpperCase() + " &middot; " + fmtBytes(d.bytes) + "</div>";
    h += "</div>";
    if (dUrl) h += '<span class="derived-open" data-url="' + esc(dUrl) + '">Open</span>';
    h += "</div>";
  }
  h += "</div>";
  if (nextCursor && assetId) {
    h += '<div style="text-align:center;padding:8px 0;">';
    h += '<button class="prompt-btn" id="load-more-derived-btn" data-cursor="' + esc(nextCursor) + '" data-asset-id="' + esc(assetId) + '">Load More Derived</button>';
    h += "</div>";
  }
  h += "</details>";
  return h;
}

function renderContext(ctx) {
  if (!ctx || typeof ctx !== "object") return "";
  var pairs = ctx.custom || ctx;
  if (typeof pairs !== "object") return "";
  var keys = Object.keys(pairs);
  if (!keys.length) return "";
  var h = sectionStart("context");
  h += '<summary class="detail-section-title">Context' + tip("context") + '</summary>';
  h += '<div class="detail-grid">';
  for (var i = 0; i < keys.length; i++) {
    var v = pairs[keys[i]];
    if (v === null || v === undefined) continue;
    var vs = typeof v === "object" ? JSON.stringify(v) : String(v);
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(prettyKey(keys[i])) + "</div>";
    h += '<div class="detail-cell-val">' + esc(vs) + "</div>";
    h += "</div>";
  }
  h += "</div></details>";
  return h;
}

function summarizeInfoVal(v) {
  if (typeof v !== "object" || v === null) return esc(String(v));
  if (v.status) return statusBadge(v.status);
  var parts = [];
  var keys = Object.keys(v);
  for (var i = 0; i < keys.length; i++) {
    var sv = v[keys[i]];
    if (sv && typeof sv === "object" && sv.status) {
      parts.push(esc(prettyKey(keys[i])) + ": " + statusBadge(sv.status));
    } else if (typeof sv === "string" || typeof sv === "number" || typeof sv === "boolean") {
      parts.push(esc(prettyKey(keys[i])) + ": " + esc(String(sv)));
    } else if (sv && typeof sv === "object") {
      parts.push(esc(prettyKey(keys[i])) + ": " + summarizeInfoVal(sv));
    }
  }
  return parts.length ? parts.join(", ") : esc(JSON.stringify(v));
}

function renderImageMetadata(meta) {
  if (!meta || typeof meta !== "object") return "";
  var keys = Object.keys(meta);
  if (!keys.length) return "";
  var h = sectionStart("image_metadata");
  h += '<summary class="detail-section-title">Media Metadata' + tip("image_metadata") + '</summary>';
  h += '<div class="detail-grid">';
  for (var i = 0; i < keys.length; i++) {
    var v = meta[keys[i]];
    if (v === null || v === undefined) continue;
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(prettyKey(keys[i])) + "</div>";
    h += '<div class="detail-cell-val">' + esc(String(v)) + "</div>";
    h += "</div>";
  }
  h += "</div></details>";
  return h;
}

function renderInfo(info) {
  if (!info || typeof info !== "object") return "";
  var keys = Object.keys(info);
  if (!keys.length) return "";
  var rows = "";
  for (var i = 0; i < keys.length; i++) {
    var v = info[keys[i]];
    if (v === null || v === undefined) continue;
    var statusStr = summarizeInfoVal(v);
    if (statusStr.length > 300) statusStr = statusStr.substring(0, 297) + "...";
    rows += '<div class="detail-cell">';
    rows += '<div class="detail-cell-key">' + esc(prettyKey(keys[i])) + "</div>";
    rows += '<div class="detail-cell-val">' + statusStr + "</div>";
    rows += "</div>";
  }
  if (!rows) return "";
  var h = sectionStart("info");
  h += '<summary class="detail-section-title">Info' + tip("info") + '</summary>';
  h += '<div class="detail-grid">' + rows + "</div></details>";
  return h;
}

function renderLastUpdated(lu) {
  if (!lu) return "";
  var keys = Object.keys(lu);
  if (!keys.length) return "";
  var h = sectionStart("timestamps");
  h += '<summary class="detail-section-title">Timestamps' + tip("last_updated") + '</summary>';
  h += '<div class="detail-grid">';
  for (var i = 0; i < keys.length; i++) {
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(prettyKey(keys[i])) + "</div>";
    h += '<div class="detail-cell-val">' + esc(fmtDate(lu[keys[i]])) + "</div>";
    h += "</div>";
  }
  h += "</div></details>";
  return h;
}

function renderHeroPreview(r) {
  var url = r.secure_url || r.url || "";
  var rt = r.resource_type || "";
  var h = "";

  if (rt === "raw") {
    h += '<div style="text-align:center;padding:30px 20px;background:var(--cld-bg3)">';
    h += '<div class="file-icon">' + fileTypeIcon(r.format);
    h += '<div class="file-icon-label">' + esc((r.format || "FILE").toUpperCase()) + "</div></div></div>";
    return h;
  }

  if (isAudioResource(r)) {
    var waveform = thumbUrl(url, 600, 120, r);
    h += '<div class="hero-audio-wrap">';
    if (waveform) {
      h += '<img class="hero-audio-waveform" src="' + esc(waveform) + '">';
    } else {
      h += '<div class="hero-audio-note">\\u266B</div>';
    }
    h += '<audio controls preload="metadata" src="' + esc(mediaUrl(url, r)) + '"></audio>';
    h += "</div>";
    return h;
  }

  if (rt === "video") {
    var poster = thumbUrl(url, 600, 300, r);
    var src = mediaUrl(url, r);
    h += '<div style="position:relative">';
    h += '<video class="hero-video" controls preload="metadata"';
    if (poster) h += ' poster="' + esc(poster) + '"';
    h += '><source src="' + esc(src) + '"></video>';
    if (r.duration) {
      h += '<div class="duration-badge">' + fmtDuration(r.duration) + "</div>";
    }
    h += "</div>";
    return h;
  }

  var thumb = thumbUrl(url, 600, 220, r);
  if (thumb) {
    h += '<img class="modal-hero" src="' + esc(thumb) + '">';
  }
  return h;
}

function renderMediaModalBody(r) {
  var url = r.secure_url || r.url || "";
  var h = "";

  if (isAudioResource(r)) {
    var waveform = thumbUrl(url, 560, 100, r);
    h += '<div class="media-modal-audio-wrap">';
    if (waveform) h += '<img src="' + esc(waveform) + '">';
    h += '<audio controls autoplay preload="metadata" src="' + esc(mediaUrl(url, r)) + '"></audio>';
    h += "</div>";
    return h;
  }

  var poster = thumbUrl(url, 600, 340, r);
  h += '<video class="media-modal-video" controls autoplay preload="metadata"';
  if (poster) h += ' poster="' + esc(poster) + '"';
  h += '><source src="' + esc(mediaUrl(url, r)) + '"></video>';
  return h;
}

function renderColors(colors, predominant) {
  var hasColors = colors && colors.length;
  var hasPred = predominant && typeof predominant === "object" && Object.keys(predominant).length;
  if (!hasColors && !hasPred) return "";

  var h = sectionStart("colors");
  h += '<summary class="detail-section-title">Colors' + tip("colors") + '</summary>';

  if (hasColors) {
    h += '<div class="color-row">';
    for (var i = 0; i < colors.length; i++) {
      var c = colors[i];
      var hex = c[0] || "";
      var pct = c[1] != null ? parseFloat(c[1]).toFixed(1) + "%" : "";
      h += '<div class="color-swatch">';
      h += '<div class="color-swatch-box" style="background:' + esc(hex) + '"></div>';
      h += '<div class="color-swatch-label">' + esc(hex) + '</div>';
      if (pct) h += '<div class="color-swatch-pct">' + esc(pct) + '</div>';
      h += '</div>';
    }
    h += '</div>';
  }

  if (hasPred) {
    var pkeys = Object.keys(predominant);
    for (var p = 0; p < pkeys.length; p++) {
      var group = predominant[pkeys[p]];
      if (!group || !group.length) continue;
      h += '<div class="color-group-title">' + esc(prettyKey(pkeys[p])) + '</div>';
      h += '<div class="color-row">';
      for (var gi = 0; gi < group.length; gi++) {
        var gc = group[gi];
        var ghex = gc[0] || "";
        var gpct = gc[1] != null ? parseFloat(gc[1]).toFixed(1) + "%" : "";
        var isHex = ghex.charAt(0) === "#";
        h += '<div class="color-swatch">';
        if (isHex) h += '<div class="color-swatch-box" style="background:' + esc(ghex) + '"></div>';
        h += '<div class="color-swatch-label">' + esc(ghex) + '</div>';
        if (gpct) h += '<div class="color-swatch-pct">' + esc(gpct) + '</div>';
        h += '</div>';
      }
      h += '</div>';
    }
  }

  h += '</details>';
  return h;
}

function renderModerationSection(moderation, kind, status) {
  var hasArr = moderation && moderation.length;
  if (!hasArr && !kind && !status) return "";

  var h = sectionStart("moderation");
  h += '<summary class="detail-section-title">Moderation' + tip("moderation") + '</summary>';

  if (hasArr) {
    for (var i = 0; i < moderation.length; i++) {
      var m = moderation[i];
      h += '<div class="meta-row">';
      h += '<span class="meta-key">' + esc(m.kind || "unknown") + '</span>';
      h += '<span class="meta-val">' + (m.status ? statusBadge(m.status) : "");
      if (m.updated_at) h += ' \\u00b7 ' + fmtDate(m.updated_at);
      h += '</span></div>';
    }
  } else {
    h += '<div class="meta-row">';
    h += '<span class="meta-key">' + esc(kind || "unknown") + '</span>';
    h += '<span class="meta-val">' + (status ? statusBadge(status) : "") + '</span></div>';
  }

  h += '</details>';
  return h;
}

function renderAccessControl(acl) {
  if (!acl || !acl.length) return "";

  var h = sectionStart("access_control");
  h += '<summary class="detail-section-title">Access Control' + tip("access_control") + ' <span class="count">' + acl.length + '</span></summary>';

  for (var i = 0; i < acl.length; i++) {
    var rule = acl[i];
    h += '<div class="meta-row" style="flex-direction:column;gap:2px">';
    h += '<span class="meta-key" style="max-width:100%">' + esc(prettyKey(rule.access_type || "unknown")) + '</span>';
    var parts = [];
    if (rule.start) parts.push("Start: " + (typeof rule.start === "number" ? new Date(rule.start * 1000).toISOString() : String(rule.start)));
    if (rule.end) parts.push("End: " + (typeof rule.end === "number" ? new Date(rule.end * 1000).toISOString() : String(rule.end)));
    if (rule.key) parts.push("Key: " + rule.key);
    if (parts.length) h += '<span class="meta-val" style="text-align:left;font-size:11px;color:var(--cld-text3)">' + esc(parts.join(" \\u00b7 ")) + '</span>';
    h += '</div>';
  }

  h += '</details>';
  return h;
}

function renderVersions(versions) {
  if (!versions || !versions.length) return "";

  var h = sectionStart("versions");
  h += '<summary class="detail-section-title">Versions <span class="count">' + versions.length + '</span></summary>';

  for (var i = 0; i < versions.length; i++) {
    var v = versions[i];
    h += '<div class="meta-row">';
    h += '<span class="meta-key">' + esc(v.version_id || String(v.version || "#" + (i + 1))) + '</span>';
    var parts = [];
    if (v.format) parts.push(v.format.toUpperCase());
    if (v.size) parts.push(fmtBytes(v.size));
    if (v.time) parts.push(fmtDate(v.time));
    if (v.restorable != null) parts.push(v.restorable ? "Restorable" : "Not restorable");
    h += '<span class="meta-val">' + esc(parts.join(" \\u00b7 ")) + '</span>';
    h += '</div>';
  }

  h += '</details>';
  return h;
}

function renderEager(eager) {
  if (!eager || !eager.length) return "";

  var h = sectionStart("eager");
  h += '<summary class="detail-section-title">Eager Transformations <span class="count">' + eager.length + '</span></summary>';

  for (var i = 0; i < eager.length; i++) {
    var e = eager[i];
    var eUrl = e.secure_url || e.url || "";
    h += '<div class="derived-card">';
    if (eUrl) h += '<img class="derived-thumb" src="' + esc(eUrl) + '">';
    h += '<div class="derived-info">';
    h += '<div class="derived-tx">' + esc(e.transformation || "") + '</div>';
    var meta = [];
    if (e.format) meta.push(e.format.toUpperCase());
    if (e.width && e.height) meta.push(e.width + "\\u00d7" + e.height);
    if (e.bytes) meta.push(fmtBytes(e.bytes));
    h += '<div class="derived-meta">' + esc(meta.join(" \\u00b7 ")) + '</div>';
    h += '</div>';
    if (eUrl) h += '<span class="derived-open" data-url="' + esc(eUrl) + '">Open</span>';
    h += '</div>';
  }

  h += '</details>';
  return h;
}

function renderCoordinates(faces, coordinates) {
  var faceArr = (coordinates && coordinates.faces) || faces || [];
  var customArr = (coordinates && coordinates.custom) || [];
  if (!faceArr.length && !customArr.length) return "";

  var h = sectionStart("coordinates");
  h += '<summary class="detail-section-title">Coordinates' + tip("coordinates") + '</summary>';
  h += '<div class="detail-grid">';

  if (faceArr.length) {
    h += '<div class="detail-cell full-width">';
    h += '<div class="detail-cell-key">Faces' + tip("faces") + '</div>';
    h += '<div class="detail-cell-val">' + faceArr.length + ' region' + (faceArr.length !== 1 ? 's' : '');
    for (var i = 0; i < Math.min(faceArr.length, 5); i++) {
      var f = faceArr[i];
      if (f && f.length >= 4) h += ' [' + f[0] + ',' + f[1] + ',' + f[2] + ',' + f[3] + ']';
    }
    if (faceArr.length > 5) h += ' \\u2026';
    h += '</div></div>';
  }

  if (customArr.length) {
    h += '<div class="detail-cell full-width">';
    h += '<div class="detail-cell-key">Custom Regions</div>';
    h += '<div class="detail-cell-val">' + customArr.length + ' region' + (customArr.length !== 1 ? 's' : '');
    for (var j = 0; j < Math.min(customArr.length, 5); j++) {
      var c = customArr[j];
      if (c && c.length >= 4) h += ' [' + c[0] + ',' + c[1] + ',' + c[2] + ',' + c[3] + ']';
    }
    if (customArr.length > 5) h += ' \\u2026';
    h += '</div></div>';
  }

  h += '</div></details>';
  return h;
}

function renderDerivatives(derivatives) {
  if (!derivatives || !derivatives.length) return "";

  var h = sectionStart("derivatives");
  h += '<summary class="detail-section-title">Derivatives' + tip("derivatives") + ' <span class="count">' + derivatives.length + '</span></summary>';

  for (var i = 0; i < derivatives.length; i++) {
    var d = derivatives[i];
    var dUrl = d.secure_url || "";
    h += '<div class="derived-card">';
    if (dUrl) h += '<img class="derived-thumb" src="' + esc(dUrl) + '">';
    h += '<div class="derived-info">';
    h += '<div class="derived-tx">' + esc(d.transformation || "") + '</div>';
    if (d.id) h += '<div class="derived-meta">ID: ' + esc(d.id) + '</div>';
    h += '</div>';
    if (dUrl) h += '<span class="derived-open" data-url="' + esc(dUrl) + '">Open</span>';
    h += '</div>';
  }

  h += '</details>';
  return h;
}

function renderQualityAnalysis(qa, score) {
  if (!qa && score == null) return "";

  var h = sectionStart("quality_analysis");
  h += '<summary class="detail-section-title">Quality Analysis' + tip("quality_analysis") + '</summary>';
  h += '<div class="detail-grid">';

  if (score != null) {
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">Overall Score</div>';
    h += '<div class="detail-cell-val">' + esc(String(score)) + '</div>';
    h += '</div>';
  }

  if (qa && typeof qa === "object") {
    var keys = Object.keys(qa);
    for (var i = 0; i < keys.length; i++) {
      var v = qa[keys[i]];
      if (v == null) continue;
      h += '<div class="detail-cell">';
      h += '<div class="detail-cell-key">' + esc(prettyKey(keys[i])) + '</div>';
      h += '<div class="detail-cell-val">' + esc(typeof v === "number" ? v.toFixed(2) : String(v)) + '</div>';
      h += '</div>';
    }
  }

  h += '</div></details>';
  return h;
}

function renderAccessibilityAnalysis(aa) {
  if (!aa || typeof aa !== "object") return "";

  var h = sectionStart("accessibility_analysis");
  h += '<summary class="detail-section-title">Accessibility Analysis' + tip("accessibility_analysis") + '</summary>';
  h += '<div class="detail-grid">';

  if (aa.colorblind_accessibility_score != null) {
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">Colorblind Score</div>';
    h += '<div class="detail-cell-val">' + esc(String(aa.colorblind_accessibility_score)) + '</div>';
    h += '</div>';
  }

  var cba = aa.colorblind_accessibility_analysis;
  if (cba && typeof cba === "object") {
    if (cba.distinct_edges != null) {
      h += '<div class="detail-cell">';
      h += '<div class="detail-cell-key">Distinct Edges</div>';
      h += '<div class="detail-cell-val">' + esc(String(cba.distinct_edges)) + '</div>';
      h += '</div>';
    }
    if (cba.distinct_colors != null) {
      h += '<div class="detail-cell">';
      h += '<div class="detail-cell-key">Distinct Colors</div>';
      h += '<div class="detail-cell-val">' + esc(String(cba.distinct_colors)) + '</div>';
      h += '</div>';
    }
    if (cba.most_indistinct_pair && cba.most_indistinct_pair.length) {
      h += '<div class="detail-cell full-width">';
      h += '<div class="detail-cell-key">Most Indistinct Pair</div>';
      h += '<div class="detail-cell-val" style="display:flex;gap:6px;align-items:center">';
      for (var i = 0; i < cba.most_indistinct_pair.length; i++) {
        var hex = cba.most_indistinct_pair[i];
        h += '<span style="display:inline-flex;align-items:center;gap:4px">';
        h += '<span style="width:16px;height:16px;border-radius:3px;border:1px solid var(--cld-border);background:' + esc(hex) + ';display:inline-block;vertical-align:middle"></span>';
        h += esc(hex);
        h += '</span>';
      }
      h += '</div></div>';
    }
  }

  h += '</div></details>';
  return h;
}

function renderRelatedAssets(related) {
  if (!related || !related.length) return "";

  var h = sectionStart("related_assets");
  h += '<summary class="detail-section-title">Related Assets' + tip("related_assets") + ' <span class="count">' + related.length + '</span></summary>';

  for (var i = 0; i < related.length; i++) {
    var ra = related[i];
    h += '<div class="meta-row">';
    h += '<span class="meta-key">' + esc(ra.asset_id || ra.public_id || "#" + (i + 1)) + '</span>';
    var parts = [];
    if (ra.format) parts.push(ra.format.toUpperCase());
    if (ra.resource_type) parts.push(ra.resource_type);
    if (ra.bytes) parts.push(fmtBytes(ra.bytes));
    h += '<span class="meta-val">' + esc(parts.join(" \\u00b7 ")) + '</span>';
    h += '</div>';
  }

  h += '</details>';
  return h;
}

var RENDERED_KEYS = {
  asset_id:1, public_id:1, version:1, version_id:1, signature:1,
  width:1, height:1, format:1, resource_type:1, created_at:1,
  tags:1, bytes:1, type:1, etag:1, placeholder:1, url:1,
  secure_url:1, asset_folder:1, display_name:1, access_mode:1,
  pages:1, duration:1, is_audio:1, audio_codec:1, audio_frequency:1,
  channels:1, channel_layout:1, bit_rate:1, backup:1, original_filename:1,
  metadata:1, info:1, derived:1, context:1, image_metadata:1, media_metadata:1,
  colors:1, predominant:1, moderation:1, moderation_kind:1, moderation_status:1,
  faces:1, coordinates:1, eager:1, animated:1, illustration_score:1,
  semi_transparent:1, grayscale:1, status:1, substatus:1, resource_subtype:1,
  backup_bytes:1, pixels:1, uploaded_at:1, filename:1, folder:1,
  api_key:1, derivatives:1, versions:1, access_control:1, related_assets:1,
  quality_analysis:1, quality_score:1, accessibility_analysis:1, phash:1,
  cinemagraph_analysis:1, responsive_breakpoints:1, last_updated:1,
  next_cursor:1, derived_next_cursor:1, usage:1,
  playback_url:1, video_metadata:1,
  frame_rate:1, rotation:1, nb_frames:1,
  audio_codec:1, audio_bit_rate:1, audio_frequency:1, channels:1, channel_layout:1,
  codec:1, profile:1, level:1, pix_format:1, video_bit_rate:1, dar:1, time_base:1
};

function isEmptyObj(v) {
  if (v === null || v === undefined || v === "") return true;
  if (typeof v === "object" && !Array.isArray(v) && Object.keys(v).length === 0) return true;
  if (Array.isArray(v) && v.length === 0) return true;
  return false;
}

var RENDERED_LEAF_KEYS = {
  codec:1, bit_rate:1, frequency:1, channels:1, channel_layout:1,
  pix_format:1, profile:1, level:1, dar:1, time_base:1
};

function flattenObj(obj, prefix, out) {
  var keys = Object.keys(obj);
  for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    var v = obj[k];
    var label = prefix ? prefix + " \\u203a " + prettyKey(k) : prettyKey(k);
    if (isEmptyObj(v)) continue;
    if (prefix && RENDERED_LEAF_KEYS[k] && typeof v !== "object") continue;
    if (Array.isArray(v)) {
      var vs = JSON.stringify(v);
      if (vs.length > 500) vs = vs.substring(0, 497) + "...";
      out.push([label, vs, k]);
    } else if (typeof v === "object") {
      flattenObj(v, label, out);
    } else {
      var s = String(v);
      if (s.length > 500) s = s.substring(0, 497) + "...";
      out.push([label, s, k]);
    }
  }
}

function renderExtraFields(r) {
  var cells = [];
  var keys = Object.keys(r);
  for (var i = 0; i < keys.length; i++) {
    var k = keys[i];
    if (RENDERED_KEYS[k]) continue;
    var v = r[k];
    if (isEmptyObj(v)) continue;
    if (typeof v === "object" && !Array.isArray(v)) {
      flattenObj(v, prettyKey(k), cells);
    } else {
      var vs = typeof v === "object" ? JSON.stringify(v) : String(v);
      if (vs.length > 500) vs = vs.substring(0, 497) + "...";
      cells.push([prettyKey(k), vs, k]);
    }
  }
  if (!cells.length) return "";
  var h = "";
  for (var c = 0; c < cells.length; c++) {
    h += '<div class="detail-cell">';
    h += '<div class="detail-cell-key">' + esc(cells[c][0]) + (cells[c][2] && !cells[c][0].indexOf("\\u203a") ? tip(cells[c][2]) : "") + "</div>";
    h += '<div class="detail-cell-val" style="word-break:break-all">' + esc(cells[c][1]) + "</div>";
    h += "</div>";
  }
  var out = '<details class="upload-section" style="margin-top:12px">';
  out += "<summary>More Details</summary>";
  out += '<div class="detail-grid" style="padding:10px 12px">' + h + "</div>";
  out += "</details>";
  return out;
}

function syntaxHighlight(json) {
  var s = json.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
  return s.replace(
    /("(\\\\u[a-fA-F0-9]{4}|\\\\[^u]|[^\\\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
    function(m) {
      var cls = "json-num";
      if (/^"/.test(m)) {
        cls = /:$/.test(m) ? "json-key" : "json-str";
      } else if (/true|false/.test(m)) {
        cls = "json-bool";
      } else if (/null/.test(m)) {
        cls = "json-null";
      }
      return '<span class="' + cls + '">' + m + "</span>";
    }
  );
}

function renderRawResponse(r) {
  if (!r || typeof r !== "object") return "";
  var json = JSON.stringify(r, null, 2);
  var out = '<details class="upload-section" style="margin-top:12px">';
  out += "<summary>Raw Response</summary>";
  out += '<pre class="raw-response-pre">' + syntaxHighlight(json) + "</pre>";
  out += "</details>";
  return out;
}

function renderFullDetails(r) {
  var body = renderHeroPreview(r);

  body += sectionStart("asset_info");
  body += '<summary class="detail-section-title">Asset Info</summary>';
  body += renderAssetGrid(r);
  body += "</details>";

  body += renderAudioInfo(r);
  body += renderVideoInfo(r);
  body += renderTags(r.tags);
  body += renderContext(r.context);
  body += renderImageMetadata(r.image_metadata || r.media_metadata);
  body += renderColors(r.colors, r.predominant);
  body += renderModerationSection(r.moderation, r.moderation_kind, r.moderation_status);
  body += renderAccessControl(r.access_control);
  body += renderCoordinates(r.faces, r.coordinates);
  body += renderLastUpdated(r.last_updated);
  body += renderMetadata(r.metadata);
  body += renderInfo(r.info);
  body += renderDerived(r.derived, r.derived_next_cursor, r.asset_id);
  body += renderDerivatives(r.derivatives);
  body += renderRelatedAssets(r.related_assets);
  body += renderVersions(r.versions);
  body += renderEager(r.eager);
  body += renderQualityAnalysis(r.quality_analysis, r.quality_score);
  body += renderAccessibilityAnalysis(r.accessibility_analysis);
  body += renderExtraFields(r);
  body += renderRawResponse(r);

  return body;
}

async function loadMoreDerived(btn) {
  var cursor = btn.dataset.cursor;
  var aid = btn.dataset.assetId;
  if (!cursor || !aid) return;
  btn.textContent = "Loading\\u2026";
  btn.disabled = true;
  try {
    var res = await app.callServerTool({
      name: "get-asset-details",
      arguments: { asset_id: aid, derived_next_cursor: cursor },
    });
    var data = ingestResult(res);
    if (data && data.derived && data.derived.length) {
      var container = document.getElementById("derived-list");
      if (container) {
        var frag = "";
        for (var i = 0; i < data.derived.length; i++) {
          var d = data.derived[i];
          var dUrl = d.secure_url || d.url || "";
          frag += '<div class="derived-card">';
          if (dUrl) frag += '<img class="derived-thumb" src="' + esc(dUrl) + '">';
          frag += '<div class="derived-info">';
          frag += '<div class="derived-tx">' + esc(d.transformation || "") + '</div>';
          frag += '<div class="derived-meta">' + (d.format || "").toUpperCase() + " \\u00b7 " + fmtBytes(d.bytes) + '</div>';
          frag += '</div>';
          if (dUrl) frag += '<span class="derived-open" data-url="' + esc(dUrl) + '">Open</span>';
          frag += '</div>';
        }
        container.insertAdjacentHTML("beforeend", frag);
        requestAnimationFrame(function() {
          app.reportSize(document.documentElement.scrollHeight);
        });
      }
      var countEl = document.getElementById("derived-count");
      if (countEl) {
        var total = container.querySelectorAll(".derived-card").length;
        countEl.textContent = total + (data.derived_next_cursor ? "+" : "");
      }
      if (data.derived_next_cursor) {
        btn.dataset.cursor = data.derived_next_cursor;
        btn.textContent = "Load More Derived";
        btn.disabled = false;
      } else {
        btn.parentElement.remove();
      }
    } else {
      btn.parentElement.remove();
    }
  } catch (e) {
    showError("Load Failed", e && e.message ? e.message : String(e));
    btn.textContent = "Load More Derived";
    btn.disabled = false;
  }
}
`;

// ── JS: Host context handler ────────────────────────────────────────
export const SHARED_JS_HOST_CONTEXT = /* js */ `
var _themeOverride = null;
var _hostTheme = null;

function applyTheme() {
  var effective;
  if (_themeOverride === "light" || _themeOverride === "dark") {
    effective = _themeOverride;
  } else {
    effective = _hostTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  }
  document.documentElement.setAttribute("data-theme", effective);
}

var _themeIcons = {
  light: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>',
  system: '<svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>',
  dark: '<svg viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>'
};
var _themeCycle = ["light", "system", "dark"];
var _themeLabels = { light: "Light", system: "System", dark: "Dark" };

function renderThemeToggle() {
  var existing = document.getElementById("theme-btn");
  if (existing) existing.remove();
  var current = _themeOverride || "system";
  var btn = document.createElement("button");
  btn.id = "theme-btn";
  btn.className = "theme-btn";
  btn.title = _themeLabels[current];
  btn.innerHTML = _themeIcons[current];
  btn.addEventListener("click", function() {
    var cur = _themeOverride || "system";
    var idx = (_themeCycle.indexOf(cur) + 1) % _themeCycle.length;
    var next = _themeCycle[idx];
    _themeOverride = next === "system" ? null : next;
    try { localStorage.setItem("cld-theme", next); } catch(e) {}
    applyTheme();
    renderThemeToggle();
  });
  var slot = document.getElementById("header-actions");
  if (slot) {
    slot.appendChild(btn);
  } else {
    btn.style.position = "absolute";
    btn.style.top = "4px";
    btn.style.right = "4px";
    btn.style.zIndex = "900";
    document.body.appendChild(btn);
  }
}

function setupHostContext(app) {
  try { var saved = localStorage.getItem("cld-theme");
    if (saved === "light" || saved === "dark") _themeOverride = saved;
  } catch(e) {}

  app.onhostcontextchanged = function(ctx) {
    if (ctx.theme) {
      _hostTheme = ctx.theme;
      applyTheme();
    }
    if (ctx.styles && ctx.styles.variables) {
      var vars = ctx.styles.variables;
      for (var k in vars) document.documentElement.style.setProperty(k, vars[k]);
    }
    if (ctx.styles && ctx.styles.css && ctx.styles.css.fonts) {
      var el = document.getElementById("host-fonts");
      if (!el) { el = document.createElement("style"); el.id = "host-fonts"; document.head.appendChild(el); }
      el.textContent = ctx.styles.css.fonts;
    }
    if (ctx.safeAreaInsets) {
      var s = ctx.safeAreaInsets;
      document.body.style.padding =
        (s.top||0)+"px "+(s.right||0)+"px "+(s.bottom||0)+"px "+(s.left||0)+"px";
    }
  };

  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function() {
    if (!_themeOverride) applyTheme();
  });

  applyTheme();
  renderThemeToggle();
}

function setupResize(app, minHeight) {
  var _raf = 0;
  function report() {
    cancelAnimationFrame(_raf);
    _raf = requestAnimationFrame(function() {
      app.reportSize(Math.max(document.documentElement.scrollHeight, minHeight));
    });
  }
  var ro = new ResizeObserver(report);
  ro.observe(document.body);
  ro.observe(document.documentElement);
  report();
}
`;

// ── JS: Tooltip map (generated at build time from Zod schema descriptions) ──
export const SHARED_JS_TOOLTIPS = /* js */ `var FIELD_TIPS = ${TOOLTIP_MAP_JSON};

function tip(key) {
  if (!key) return "";
  var d = FIELD_TIPS[key];
  if (!d) return "";
  return ' <span class="help-toggle" tabindex="0">?<span class="help-bubble">' + esc(d) + '</span></span>';
}
`;