@typecaast/capture 0.0.1

package/dist/import-page.cjs

@@ -0,0 +1,624 @@
+'use strict';
+
+var jsdom = require('jsdom');
+var createDOMPurify = require('dompurify');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var createDOMPurify__default = /*#__PURE__*/_interopDefault(createDOMPurify);
+
+// src/import-page.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"]
+  });
+}
+
+// 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;
+}
+
+// src/import-page.ts
+function mhtmlToHtml(raw) {
+  const idx = raw.search(/Content-Type:\s*text\/html/i);
+  if (idx === -1) return raw;
+  let body = raw.slice(idx);
+  const start = body.search(/\r?\n\r?\n/);
+  if (start !== -1) body = body.slice(start + 2);
+  const boundary = body.search(/\r?\n--/);
+  if (boundary !== -1) body = body.slice(0, boundary);
+  body = body.replace(/=\r?\n/g, "");
+  body = body.replace(
+    /=([0-9A-Fa-f]{2})/g,
+    (_m, hex) => String.fromCharCode(parseInt(hex, 16))
+  );
+  return body;
+}
+var THREAD_GUESS = [
+  '[role="log"]',
+  '[role="list"]',
+  '[aria-label*="message" i]',
+  '[class*="message-list" i]',
+  '[class*="messages" i]',
+  '[class*="thread" i]',
+  '[class*="conversation" i]',
+  "main"
+];
+function guessThread(doc) {
+  for (const sel of THREAD_GUESS) {
+    const el = doc.querySelector(sel);
+    if (el) return el;
+  }
+  return doc.body;
+}
+function importHtml(content, opts = {}) {
+  const html = opts.mhtml ? mhtmlToHtml(content) : content;
+  const dom = new jsdom.JSDOM(html);
+  const doc = dom.window.document;
+  const root = opts.selector ? doc.querySelector(opts.selector) ?? guessThread(doc) : guessThread(doc);
+  const { selector: _selector, mhtml: _mhtml, ...rest } = opts;
+  return distill(root, {
+    ...rest,
+    window: dom.window,
+    name: rest.name ?? doc.title ?? "Imported skin",
+    // Saved pages carry their styles inline/in <style>; don't compute.
+    inlineComputedStyles: false
+  });
+}
+
+exports.importHtml = importHtml;
+//# sourceMappingURL=import-page.cjs.map
+//# sourceMappingURL=import-page.cjs.map