@typecaast/capture 0.0.1

package/dist/index.cjs

@@ -0,0 +1,841 @@
+'use strict';
+
+var createDOMPurify = require('dompurify');
+var zod = require('zod');
+var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var createDOMPurify__default = /*#__PURE__*/_interopDefault(createDOMPurify);
+
+// src/sanitize.ts
+var ALLOWED_TAGS = [
+  "div",
+  "span",
+  "p",
+  "a",
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "s",
+  "small",
+  "sub",
+  "sup",
+  "br",
+  "hr",
+  "ul",
+  "ol",
+  "li",
+  "img",
+  "svg",
+  "path",
+  "g",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "ellipse",
+  "defs",
+  "use",
+  "title",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "pre",
+  "code",
+  "time",
+  "header",
+  "footer",
+  "section",
+  "article",
+  "aside",
+  "nav",
+  "figure",
+  "figcaption",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "td",
+  "th"
+];
+var ALLOWED_ATTR = [
+  "class",
+  "style",
+  "role",
+  "alt",
+  "src",
+  "srcset",
+  "width",
+  "height",
+  "dir",
+  "title",
+  "viewbox",
+  "fill",
+  "stroke",
+  "stroke-width",
+  "d",
+  "points",
+  "cx",
+  "cy",
+  "r",
+  "x",
+  "y",
+  "x1",
+  "x2",
+  "y1",
+  "y2",
+  "rx",
+  "ry",
+  "transform",
+  "xmlns",
+  "href"
+];
+function scrubCss(css) {
+  let out = css;
+  out = out.replace(/expression\s*\(/gi, "/*blocked*/(");
+  out = out.replace(/-moz-binding\s*:/gi, "/*blocked*/:");
+  out = out.replace(/behavior\s*:/gi, "/*blocked*/:");
+  out = out.replace(/@import[^;]*;?/gi, "/*blocked-import*/");
+  out = out.replace(/url\(\s*(['"]?)([^)'"]*)\1\s*\)/gi, (whole, _q, uri) => {
+    const u = String(uri).trim().toLowerCase();
+    const blocked = u.startsWith("javascript:") || u.startsWith("vbscript:") || u.startsWith("data:") && !u.startsWith("data:image/");
+    return blocked ? "none" : whole;
+  });
+  out = out.replace(/javascript:/gi, "blocked:");
+  out = out.replace(/vbscript:/gi, "blocked:");
+  return out;
+}
+function getWindow(win) {
+  if (win) return win;
+  if (typeof window !== "undefined") return window;
+  throw new Error(
+    "sanitizeHtml requires a DOM window \u2014 pass { window } in non-browser environments."
+  );
+}
+var hooked = null;
+function purifierFor(win) {
+  const purify = createDOMPurify__default.default(win);
+  if (hooked !== purify) {
+    purify.addHook("afterSanitizeAttributes", (node) => {
+      const el = node;
+      const style = el.getAttribute?.("style");
+      if (style) el.setAttribute("style", scrubCss(style));
+      const src = el.getAttribute?.("src");
+      if (src) {
+        const u = src.trim().toLowerCase();
+        if (u.startsWith("data:") && !u.startsWith("data:image/")) {
+          el.removeAttribute("src");
+        }
+      }
+      if (el.tagName === "A") {
+        el.removeAttribute("href");
+        el.setAttribute("role", "link");
+      }
+      if (el.getAttribute?.("target")) el.removeAttribute("target");
+    });
+    hooked = purify;
+  }
+  return purify;
+}
+function sanitizeHtml(html, opts = {}) {
+  const win = getWindow(opts.window);
+  const purify = purifierFor(win);
+  return purify.sanitize(html, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    // Keep our slot marker even though data-* is otherwise dropped.
+    ADD_ATTR: ["data-tc-slot"],
+    ALLOW_DATA_ATTR: false,
+    ALLOW_ARIA_ATTR: true,
+    FORBID_TAGS: [
+      "script",
+      "style",
+      "iframe",
+      "object",
+      "embed",
+      "form",
+      "input",
+      "button",
+      "textarea",
+      "select",
+      "link",
+      "meta",
+      "base",
+      "video",
+      "audio",
+      "source"
+    ],
+    FORBID_ATTR: ["srcdoc", "formaction", "xlink:href"]
+  });
+}
+var SLOT_TOKENS = {
+  messages: "{{messages}}",
+  author: "{{author}}",
+  avatar: "{{avatar}}",
+  body: "{{body}}",
+  time: "{{time}}",
+  composer: "{{composer}}"
+};
+var slotReportSchema = zod.z.object({
+  /** Whether this region was found at all. */
+  found: zod.z.boolean(),
+  /** Which inner slots were auto-detected (e.g. `["author","body"]`). */
+  detected: zod.z.array(zod.z.string()),
+  /** Heuristic confidence 0..1 for the auto-detection. */
+  confidence: zod.z.number().min(0).max(1)
+});
+var tokenSetSchema = zod.z.object({
+  colors: zod.z.record(zod.z.string(), zod.z.string()),
+  fonts: zod.z.record(zod.z.string(), zod.z.string()).optional(),
+  space: zod.z.record(zod.z.string(), zod.z.string()).optional(),
+  radius: zod.z.record(zod.z.string(), zod.z.string()).optional()
+});
+var skinDraftSchema = zod.z.object({
+  version: zod.z.literal(1),
+  meta: zod.z.object({
+    /** Human label, defaulted from the source title/host. */
+    name: zod.z.string(),
+    /** Source page URL, when known (informational only). */
+    sourceUrl: zod.z.string().optional(),
+    /** Theme the capture was taken under, when known. */
+    theme: zod.z.enum(["light", "dark"]).optional(),
+    /** Suggested canvas from the captured element's box. */
+    canvas: zod.z.object({ width: zod.z.number().int(), height: zod.z.number().int() }).optional()
+  }),
+  /**
+   * Slotted, sanitized HTML per region. Elements carry inline `style`
+   * attributes; `css` holds anything inline styles can't express.
+   */
+  slots: zod.z.object({
+    frame: zod.z.string().optional(),
+    message: zod.z.string().optional(),
+    composer: zod.z.string().optional(),
+    typing: zod.z.string().optional()
+  }),
+  /** Best-effort extra CSS (pseudo-elements, keyframes) — may be empty. */
+  css: zod.z.string(),
+  /** Extracted design tokens (best effort) — the primary/captured theme. */
+  tokens: tokenSetSchema,
+  /**
+   * Dark-theme tokens from a paired capture (M5.7 double-capture flow). When
+   * present, the skin supports both themes and switches CSS vars by theme.
+   */
+  darkTokens: tokenSetSchema.optional(),
+  /** Detection report per region. */
+  detection: zod.z.object({
+    frame: slotReportSchema,
+    message: slotReportSchema,
+    composer: slotReportSchema,
+    typing: slotReportSchema
+  }),
+  /** Human-readable warnings (hidden content dropped, slots missing, …). */
+  warnings: zod.z.array(zod.z.string())
+});
+function detectionScore(draft) {
+  const checks = [
+    draft.detection.message.detected.includes("body"),
+    draft.detection.message.detected.includes("author"),
+    draft.detection.message.detected.includes("avatar"),
+    draft.detection.message.detected.includes("time"),
+    draft.detection.composer.found
+  ];
+  return checks.filter(Boolean).length / checks.length;
+}
+
+// src/tokens.ts
+function parseStyle(style) {
+  const m = /* @__PURE__ */ new Map();
+  for (const decl of style.split(";")) {
+    const idx = decl.indexOf(":");
+    if (idx === -1) continue;
+    const prop = decl.slice(0, idx).trim().toLowerCase();
+    const val = decl.slice(idx + 1).trim();
+    if (prop && val) m.set(prop, val);
+  }
+  return m;
+}
+var COLOR_RE = /(#[0-9a-f]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\))/gi;
+function extractTokens(root) {
+  const colorFreq = /* @__PURE__ */ new Map();
+  const fonts = /* @__PURE__ */ new Set();
+  const radii = /* @__PURE__ */ new Set();
+  const spaces = /* @__PURE__ */ new Set();
+  const bump = (raw) => {
+    const v = raw.trim();
+    if (!v || v === "transparent" || v === "inherit" || v === "currentcolor")
+      return;
+    colorFreq.set(v, (colorFreq.get(v) ?? 0) + 1);
+  };
+  for (const el of [root, ...root.querySelectorAll("*")]) {
+    const style = el.getAttribute("style");
+    if (!style) continue;
+    const decls = parseStyle(style);
+    for (const [prop, val] of decls) {
+      if (prop === "color" || prop.startsWith("background")) {
+        const matches = val.match(COLOR_RE);
+        if (matches) for (const c of matches) bump(c);
+      }
+      if (prop === "font-family") fonts.add(val);
+      if (prop === "border-radius") radii.add(val);
+      if (prop === "padding" || prop === "gap") spaces.add(val);
+    }
+  }
+  const colors = {};
+  [...colorFreq.entries()].sort((a, b) => b[1] - a[1]).slice(0, 12).forEach(([c], i) => {
+    colors[`color-${i + 1}`] = c;
+  });
+  const out = { colors };
+  if (fonts.size) {
+    out.fonts = {};
+    [...fonts].slice(0, 4).forEach((f, i) => {
+      out.fonts[`font-${i + 1}`] = f;
+    });
+  }
+  if (radii.size) {
+    out.radius = {};
+    [...radii].slice(0, 6).forEach((r, i) => {
+      out.radius[`radius-${i + 1}`] = r;
+    });
+  }
+  if (spaces.size) {
+    out.space = {};
+    [...spaces].slice(0, 8).forEach((s, i) => {
+      out.space[`space-${i + 1}`] = s;
+    });
+  }
+  return out;
+}
+
+// src/distill.ts
+var SLOT_ATTR = "data-tc-slot";
+var INLINE_PROPS = [
+  "color",
+  "background-color",
+  "background",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "line-height",
+  "letter-spacing",
+  "text-align",
+  "text-transform",
+  "border",
+  "border-radius",
+  "padding",
+  "margin",
+  "gap",
+  "display",
+  "flex-direction",
+  "align-items",
+  "justify-content",
+  "box-shadow",
+  "opacity"
+];
+var HIDDEN_CLASS_RE = /\b(sr-only|visually-hidden|hidden)\b/;
+function getWindow2(win) {
+  if (win) return win;
+  if (typeof window !== "undefined") return window;
+  throw new Error("distill requires a DOM window \u2014 pass { window } in Node.");
+}
+function isHidden(el, win) {
+  if (el.getAttribute("aria-hidden") === "true") return true;
+  if (el.hasAttribute("hidden")) return true;
+  const cls = el.getAttribute("class") ?? "";
+  if (HIDDEN_CLASS_RE.test(cls)) return true;
+  const inline = (el.getAttribute("style") ?? "").toLowerCase();
+  if (/display\s*:\s*none/.test(inline)) return true;
+  if (/visibility\s*:\s*hidden/.test(inline)) return true;
+  const cs = win.getComputedStyle?.(el);
+  if (cs) {
+    if (cs.display === "none") return true;
+    if (cs.visibility === "hidden") return true;
+  }
+  return false;
+}
+function inlineStyles(orig, clone, win) {
+  const cs = win.getComputedStyle?.(orig);
+  if (!cs) return;
+  const decls = [];
+  for (const prop of INLINE_PROPS) {
+    const v = cs.getPropertyValue(prop);
+    if (v && v !== "none" && v !== "normal" && v.trim() !== "")
+      decls.push(`${prop}: ${v}`);
+  }
+  if (decls.length) clone.setAttribute("style", decls.join("; "));
+}
+function pruneAndInline(orig, clone, win, inline, dropped) {
+  if (inline) inlineStyles(orig, clone, win);
+  for (const attr of [...clone.attributes]) {
+    if (attr.name.startsWith("data-")) clone.removeAttribute(attr.name);
+  }
+  const origKids = [...orig.children];
+  const cloneKids = [...clone.children];
+  const remove = [];
+  for (let i = 0; i < origKids.length; i++) {
+    const o = origKids[i];
+    const c = cloneKids[i];
+    if (!o || !c) continue;
+    if (isHidden(o, win)) {
+      remove.push(c);
+      dropped.count++;
+      continue;
+    }
+    pruneAndInline(o, c, win, inline, dropped);
+  }
+  for (const c of remove) c.remove();
+}
+function signature(el) {
+  const tag = el.tagName.toLowerCase();
+  const classes = (el.getAttribute("class") ?? "").split(/\s+/).filter(Boolean).sort().join(".");
+  const kidTags = [...el.children].map((c) => c.tagName.toLowerCase()).join(",");
+  return `${tag}|${classes}|${kidTags}`;
+}
+function findRepeatingRows(root) {
+  let best = null;
+  let bestScore = 0;
+  const visit = (el) => {
+    const groups = /* @__PURE__ */ new Map();
+    for (const child of el.children) {
+      const sig = signature(child);
+      const arr = groups.get(sig) ?? [];
+      arr.push(child);
+      groups.set(sig, arr);
+    }
+    for (const rows of groups.values()) {
+      if (rows.length < 2) continue;
+      const textLen = rows.reduce(
+        (n, r) => n + (r.textContent ?? "").trim().length,
+        0
+      );
+      const score = rows.length * 10 + Math.min(textLen, 400);
+      if (score > bestScore) {
+        bestScore = score;
+        best = { container: el, rows };
+      }
+    }
+    for (const child of el.children) visit(child);
+  };
+  visit(root);
+  return best;
+}
+var AUTHOR_RE = /\b(name|author|sender|user|handle|username|display-?name)\b/i;
+var AVATAR_RE = /\b(avatar|photo|userpic|profile-?pic|pic|gravatar)\b/i;
+var TIME_RE = /\b(time|timestamp|date|ago|sent-?at)\b/i;
+var BODY_RE = /\b(body|text|content|message|bubble|markdown|prose)\b/i;
+var TIME_TEXT_RE = /^\s*(\d{1,2}:\d{2}(\s?[ap]\.?m\.?)?|\d+\s*(m|min|h|hr|d|days?|hours?|minutes?)( ago)?|yesterday|today)\s*$/i;
+function classOf(el) {
+  return el.getAttribute("class") ?? "";
+}
+function markSlot(el, slot, token) {
+  el.setAttribute(SLOT_ATTR, slot);
+  el.textContent = token;
+}
+function slotifyRow(row) {
+  const detected = [];
+  const all = [...row.querySelectorAll("*")];
+  let avatar = row.querySelector("img") ?? all.find((e) => AVATAR_RE.test(classOf(e))) ?? null;
+  if (avatar) {
+    if (avatar.tagName === "IMG") {
+      const div = row.ownerDocument.createElement("div");
+      const cls = classOf(avatar);
+      if (cls) div.setAttribute("class", cls);
+      const st = avatar.getAttribute("style");
+      if (st) div.setAttribute("style", st);
+      avatar.replaceWith(div);
+      avatar = div;
+    }
+    markSlot(avatar, "avatar", "{{avatar}}");
+    detected.push("avatar");
+  }
+  let author = all.find(
+    (e) => e !== avatar && AUTHOR_RE.test(classOf(e)) && (e.textContent ?? "").trim()
+  );
+  if (!author) {
+    author = all.find((e) => {
+      if (e === avatar || e.getAttribute(SLOT_ATTR)) return false;
+      const t = (e.textContent ?? "").trim();
+      const fw = (e.getAttribute("style") ?? "").match(
+        /font-weight:\s*(\d+|bold)/i
+      );
+      const bold = e.tagName === "B" || e.tagName === "STRONG" || (fw ? fw[1] === "bold" || Number(fw[1]) >= 600 : false);
+      return bold && t.length > 0 && t.length < 40;
+    });
+  }
+  if (author && !author.getAttribute(SLOT_ATTR)) {
+    markSlot(author, "author", "{{author}}");
+    detected.push("author");
+  }
+  const time = row.querySelector("time") ?? all.find((e) => !e.getAttribute(SLOT_ATTR) && TIME_RE.test(classOf(e))) ?? all.find(
+    (e) => !e.getAttribute(SLOT_ATTR) && e.children.length === 0 && TIME_TEXT_RE.test((e.textContent ?? "").trim())
+  );
+  if (time && !time.getAttribute(SLOT_ATTR)) {
+    markSlot(time, "time", "{{time}}");
+    detected.push("time");
+  }
+  const named = all.find(
+    (e) => !e.getAttribute(SLOT_ATTR) && !e.querySelector(`[${SLOT_ATTR}]`) && BODY_RE.test(classOf(e))
+  );
+  let body = named ?? null;
+  if (!body) {
+    let bestLen = -1;
+    for (const e of all) {
+      if (e.getAttribute(SLOT_ATTR)) continue;
+      if (e.querySelector(`[${SLOT_ATTR}]`)) continue;
+      const t = (e.textContent ?? "").trim();
+      if (t.length > bestLen) {
+        bestLen = t.length;
+        body = e;
+      }
+    }
+  }
+  if (body && !body.getAttribute(SLOT_ATTR)) {
+    markSlot(body, "body", "{{body}}");
+    detected.push("body");
+  } else if (!body) {
+    markSlot(row, "body", "{{body}}");
+    detected.push("body");
+  }
+  return { html: row.outerHTML, detected };
+}
+var COMPOSER_RE = /\b(composer|compose|reply|message-?box|message-?input|input-?box|textbox|editor|prompt)\b/i;
+function findComposer(root, exclude) {
+  const candidates = [...root.querySelectorAll("*")].filter(
+    (e) => !exclude.contains(e) && !e.contains(exclude)
+  );
+  return candidates.find((e) => e.getAttribute("role") === "textbox") ?? candidates.find((e) => e.hasAttribute("contenteditable")) ?? candidates.find((e) => COMPOSER_RE.test(classOf(e))) ?? null;
+}
+function emptyReport() {
+  return { found: false, detected: [], confidence: 0 };
+}
+function distill(root, opts = {}) {
+  const win = getWindow2(opts.window);
+  const doc = win.document;
+  const warnings = [];
+  const clone = root.cloneNode(true);
+  const dropped = { count: 0 };
+  pruneAndInline(root, clone, win, opts.inlineComputedStyles ?? false, dropped);
+  if (dropped.count > 0)
+    warnings.push(
+      `Dropped ${dropped.count} hidden element(s) from the capture.`
+    );
+  const safe = sanitizeHtml(clone.outerHTML, { window: win });
+  const host = doc.createElement("div");
+  host.innerHTML = safe;
+  const frameRoot = host.firstElementChild ?? host;
+  const pick = findRepeatingRows(frameRoot);
+  const detection = {
+    frame: emptyReport(),
+    message: emptyReport(),
+    composer: emptyReport(),
+    typing: emptyReport()
+  };
+  let messageHtml;
+  let frameHtml;
+  let composerHtml;
+  if (pick) {
+    const sample = pick.rows[0].cloneNode(true);
+    const slotted = slotifyRow(sample);
+    messageHtml = slotted.html;
+    detection.message = {
+      found: true,
+      detected: slotted.detected,
+      confidence: Math.min(1, slotted.detected.length / 4)
+    };
+    const slot = doc.createElement("div");
+    slot.setAttribute(SLOT_ATTR, "messages");
+    slot.textContent = "{{messages}}";
+    const listCls = classOf(pick.container);
+    if (listCls) slot.setAttribute("class", `${listCls} tc-messages`);
+    const containerClone = pick.container.cloneNode(false);
+    if (containerClone.getAttribute("style"))
+      slot.setAttribute(
+        "style",
+        containerClone.getAttribute("style")
+      );
+    const frameClone = frameRoot.cloneNode(true);
+    const path = pathTo(frameRoot, pick.container);
+    const targetInClone = path ? nodeAtPath(frameClone, path) : null;
+    if (targetInClone && targetInClone.parentElement) {
+      targetInClone.replaceWith(slot);
+      frameHtml = frameClone.outerHTML;
+      detection.frame = { found: true, detected: ["messages"], confidence: 1 };
+    } else {
+      frameHtml = slot.outerHTML;
+      detection.frame = {
+        found: true,
+        detected: ["messages"],
+        confidence: 0.5
+      };
+      warnings.push(
+        "Message list is the captured root; no surrounding chrome was found."
+      );
+    }
+    const composer = findComposer(frameRoot, pick.container);
+    if (composer) {
+      const c = composer.cloneNode(true);
+      c.setAttribute(SLOT_ATTR, "composer");
+      c.removeAttribute("contenteditable");
+      c.textContent = "{{composer}}";
+      composerHtml = c.outerHTML;
+      detection.composer = {
+        found: true,
+        detected: ["composer"],
+        confidence: 1
+      };
+    } else {
+      warnings.push(
+        "No composer detected \u2014 add one by hand if the skin needs it."
+      );
+    }
+  } else {
+    warnings.push(
+      "No repeating message row found \u2014 capture a tighter subtree around the thread."
+    );
+  }
+  const tokens = extractTokens(frameRoot);
+  let canvas;
+  const rect = root.getBoundingClientRect?.();
+  if (rect && rect.width > 0 && rect.height > 0) {
+    canvas = { width: Math.round(rect.width), height: Math.round(rect.height) };
+  }
+  return {
+    version: 1,
+    meta: {
+      name: opts.name ?? "Captured skin",
+      ...opts.sourceUrl ? { sourceUrl: opts.sourceUrl } : {},
+      ...opts.theme ? { theme: opts.theme } : {},
+      ...canvas ? { canvas } : {}
+    },
+    slots: {
+      ...frameHtml ? { frame: frameHtml } : {},
+      ...messageHtml ? { message: messageHtml } : {},
+      ...composerHtml ? { composer: composerHtml } : {}
+    },
+    css: "",
+    tokens,
+    detection,
+    warnings
+  };
+}
+function pathTo(root, target) {
+  if (root === target) return [];
+  for (let i = 0; i < root.children.length; i++) {
+    const child = root.children[i];
+    if (!child) continue;
+    const sub = pathTo(child, target);
+    if (sub) return [i, ...sub];
+  }
+  return null;
+}
+function nodeAtPath(root, path) {
+  let node = root;
+  for (const i of path) {
+    if (!node) return null;
+    node = node.children[i] ?? null;
+  }
+  return node;
+}
+function slug(s) {
+  return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "captured";
+}
+function contentToText(content) {
+  const out = [];
+  for (const node of content) {
+    if (node.type === "text" && Array.isArray(node.spans)) {
+      for (const span of node.spans) {
+        out.push(span.value ?? span.label ?? "");
+      }
+    } else if (node.type === "image") {
+      out.push(node.alt ?? "\u{1F5BC}");
+    }
+  }
+  return out.join("");
+}
+function initials(name) {
+  return name.split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
+}
+function fmtTime(atMs) {
+  const total = Math.floor(atMs / 1e3);
+  const m = Math.floor(total / 60);
+  const s = total % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+function styleText(tokens, css) {
+  const vars = Object.entries(tokens.colors ?? {}).map(([k, v]) => `--${k}: ${v};`).join(" ");
+  return `:host{all:initial; display:block; width:100%; height:100%; ${vars}}
+  *{box-sizing:border-box;}
+  ${css}`;
+}
+function fillInto(host, templateHtml, values) {
+  host.innerHTML = templateHtml;
+  for (const node of host.querySelectorAll(`[${SLOT_ATTR}]`)) {
+    const slot = node.getAttribute(SLOT_ATTR);
+    if (slot && slot in values) node.textContent = values[slot] ?? "";
+  }
+}
+function revealStyle(progress) {
+  const p = Math.max(0, Math.min(1, progress));
+  return {
+    opacity: p,
+    transform: `translateY(${(1 - p) * 6}px)`,
+    willChange: "opacity, transform"
+  };
+}
+var DEFAULT_CAPS = {
+  events: {},
+  content: {},
+  reactions: false,
+  threads: false,
+  readReceipts: false
+};
+function templateSkinFromDraft(draft, opts = {}) {
+  const safe = {
+    frame: draft.slots.frame ? sanitizeHtml(draft.slots.frame) : void 0,
+    message: draft.slots.message ? sanitizeHtml(draft.slots.message) : void 0,
+    composer: draft.slots.composer ? sanitizeHtml(draft.slots.composer) : void 0
+  };
+  const lightTokens = { colors: draft.tokens.colors ?? {} };
+  const darkTokens = draft.darkTokens ? { colors: draft.darkTokens.colors ?? {} } : lightTokens;
+  const cssByTheme = {
+    light: styleText(lightTokens, draft.css ?? ""),
+    dark: styleText(darkTokens, draft.css ?? "")
+  };
+  const supportsThemes = draft.darkTokens ? ["light", "dark"] : [draft.meta.theme ?? "light"];
+  const Frame = ({
+    theme,
+    children
+  }) => {
+    const hostRef = react.useRef(null);
+    const [mount, setMount] = react.useState(null);
+    react.useLayoutEffect(() => {
+      const host = hostRef.current;
+      if (!host) return;
+      const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+      shadow.innerHTML = "";
+      const style = host.ownerDocument.createElement("style");
+      style.textContent = theme === "dark" ? cssByTheme.dark : cssByTheme.light;
+      shadow.appendChild(style);
+      const wrapper = host.ownerDocument.createElement("div");
+      wrapper.style.width = "100%";
+      wrapper.style.height = "100%";
+      wrapper.innerHTML = safe.frame ?? `<div ${SLOT_ATTR}="messages"></div>`;
+      shadow.appendChild(wrapper);
+      const slot = wrapper.querySelector(`[${SLOT_ATTR}="messages"]`) ?? wrapper;
+      slot.textContent = "";
+      setMount(slot);
+    }, [theme]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: hostRef, style: { width: "100%", height: "100%" }, children: mount ? reactDom.createPortal(children, mount) : null });
+  };
+  const Message = ({ message, author }) => {
+    const ref = react.useRef(null);
+    react.useLayoutEffect(() => {
+      const el = ref.current;
+      if (!el || !safe.message) return;
+      fillInto(el, safe.message, {
+        author: author.name,
+        avatar: initials(author.name),
+        body: contentToText(message.content),
+        time: fmtTime(message.atMs)
+      });
+    }, [message, author]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: revealStyle(message.revealProgress) });
+  };
+  const SystemMessage = ({ message }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: { ...revealStyle(message.revealProgress), textAlign: "center" },
+      children: contentToText(message.content)
+    }
+  );
+  const TypingIndicator = ({ author }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { opacity: 0.7, fontStyle: "italic" }, children: [
+    author.name,
+    " is typing\u2026"
+  ] });
+  const Composer = ({ composer }) => {
+    const ref = react.useRef(null);
+    react.useLayoutEffect(() => {
+      const el = ref.current;
+      if (!el) return;
+      if (safe.composer) {
+        fillInto(el, safe.composer, { composer: composer.text });
+      } else {
+        el.textContent = composer.text;
+      }
+    }, [composer]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref });
+  };
+  const Avatar = ({
+    participant,
+    size = 36
+  }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        display: "grid",
+        placeItems: "center",
+        background: "var(--color-1, #ccc)",
+        fontSize: size * 0.4
+      },
+      children: initials(participant.name)
+    }
+  );
+  const components = {
+    Frame,
+    Message,
+    SystemMessage,
+    TypingIndicator,
+    Reaction: () => null,
+    Composer,
+    Avatar
+  };
+  return {
+    id: opts.id ?? slug(draft.meta.name),
+    meta: {
+      name: draft.meta.name,
+      defaultCanvas: draft.meta.canvas ?? { width: 420, height: 720 },
+      supportsThemes,
+      capabilities: opts.capabilities ?? DEFAULT_CAPS
+    },
+    components,
+    tokens: { light: lightTokens, dark: darkTokens }
+  };
+}
+
+// src/merge.ts
+function mergeThemeDrafts(light, dark) {
+  return {
+    ...light,
+    meta: { ...light.meta, theme: void 0 },
+    tokens: light.tokens,
+    darkTokens: dark.tokens,
+    warnings: [
+      ...light.warnings,
+      ...dark.detection.message.found ? [] : ["Dark capture found no message row; reusing light structure."]
+    ]
+  };
+}
+
+exports.SLOT_TOKENS = SLOT_TOKENS;
+exports.detectionScore = detectionScore;
+exports.distill = distill;
+exports.mergeThemeDrafts = mergeThemeDrafts;
+exports.sanitizeHtml = sanitizeHtml;
+exports.scrubCss = scrubCss;
+exports.skinDraftSchema = skinDraftSchema;
+exports.templateSkinFromDraft = templateSkinFromDraft;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map