@typecaast/capture 0.0.8 → 0.1.0

package/dist/index.cjs

@@ -2,9 +2,7 @@
 
 var createDOMPurify = require('dompurify');
 var zod = require('zod');
-var react = require('react');
-var reactDom = require('react-dom');
-var jsxRuntime = require('react/jsx-runtime');
+var skinKit = require('@typecaast/skin-kit');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -72,6 +70,7 @@ var ALLOWED_ATTR = [
   "class",
   "style",
   "role",
+  "contenteditable",
   "alt",
   "src",
   "srcset",
@@ -153,8 +152,11 @@ function sanitizeHtml(html, opts = {}) {
   return purify.sanitize(html, {
     ALLOWED_TAGS,
     ALLOWED_ATTR,
-    // Keep our slot marker even though data-* is otherwise dropped.
-    ADD_ATTR: ["data-tc-slot"],
+    // Keep our slot marker even though data-* is otherwise dropped, and
+    // keep `contenteditable` so the composer-detection heuristic can find
+    // div-based composers (Slack/PostHog/etc. fake the textarea with a
+    // contenteditable div). The distiller strips it later, after marking.
+    ADD_ATTR: ["data-tc-slot", "contenteditable"],
     ALLOW_DATA_ATTR: false,
     ALLOW_ARIA_ATTR: true,
     FORBID_TAGS: [
@@ -210,7 +212,18 @@ var skinDraftSchema = zod.z.object({
     /** 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()
+    canvas: zod.z.object({ width: zod.z.number().int(), height: zod.z.number().int() }).optional(),
+    /**
+     * Snapshot of the page context the draft was taken from. Used by the
+     * slot-template renderer to expose a `--captured-viewport-width` CSS
+     * variable so authored CSS can ratio-scale against the original
+     * viewport instead of the (much smaller) playback canvas.
+     */
+    capturedAt: zod.z.object({
+      viewportWidth: zod.z.number().int().optional(),
+      viewportHeight: zod.z.number().int().optional(),
+      pixelRatio: zod.z.number().optional()
+    }).optional()
   }),
   /**
    * Slotted, sanitized HTML per region. Elements carry inline `style`
@@ -239,7 +252,13 @@ var skinDraftSchema = zod.z.object({
     typing: slotReportSchema
   }),
   /** Human-readable warnings (hidden content dropped, slots missing, …). */
-  warnings: zod.z.array(zod.z.string())
+  warnings: zod.z.array(zod.z.string()),
+  /**
+   * Stylesheets the matched-CSS capture couldn't read (typically blocked by
+   * CORS). Informational — the slot template still renders, just without
+   * the rules those sheets defined.
+   */
+  cssSkipped: zod.z.array(zod.z.string()).optional()
 });
 function detectionScore(draft) {
   const checks = [
@@ -337,10 +356,36 @@ var INLINE_PROPS = [
   "gap",
   "display",
   "flex-direction",
+  "flex-wrap",
   "align-items",
+  "align-self",
   "justify-content",
+  "justify-self",
   "box-shadow",
-  "opacity"
+  "opacity",
+  // Layout-bearing properties (added 2026-Q2 to fix Tailwind-style captures):
+  "width",
+  "max-width",
+  "min-width",
+  "height",
+  "max-height",
+  "min-height",
+  "flex",
+  "flex-grow",
+  "flex-shrink",
+  "flex-basis",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "z-index",
+  "overflow",
+  "overflow-x",
+  "overflow-y",
+  "white-space",
+  "overflow-wrap",
+  "word-break"
 ];
 var HIDDEN_CLASS_RE = /\b(sr-only|visually-hidden|hidden)\b/;
 function getWindow2(win) {
@@ -363,6 +408,25 @@ function isHidden(el, win) {
   }
   return false;
 }
+function pxValue(v) {
+  if (!v) return null;
+  const m = /^(-?\d+(?:\.\d+)?)px$/.exec(v.trim());
+  return m ? Number(m[1]) : null;
+}
+function normaliseDesktopMargins(decls, cs) {
+  const left = pxValue(cs.getPropertyValue("margin-left"));
+  const right = pxValue(cs.getPropertyValue("margin-right"));
+  if (left == null || right == null) return;
+  if (left < 24 || right < 24) return;
+  const ratio = Math.max(left, right) / Math.min(left, right);
+  if (ratio > 1.1) return;
+  const top = pxValue(cs.getPropertyValue("margin-top")) ?? 0;
+  const bot = pxValue(cs.getPropertyValue("margin-bottom")) ?? 0;
+  for (let i = decls.length - 1; i >= 0; i--) {
+    if (decls[i]?.startsWith("margin:")) decls.splice(i, 1);
+  }
+  decls.push(`margin: ${top}px auto ${bot}px`);
+}
 function inlineStyles(orig, clone, win) {
   const cs = win.getComputedStyle?.(orig);
   if (!cs) return;
@@ -372,6 +436,7 @@ function inlineStyles(orig, clone, win) {
     if (v && v !== "none" && v !== "normal" && v.trim() !== "")
       decls.push(`${prop}: ${v}`);
   }
+  normaliseDesktopMargins(decls, cs);
   if (decls.length) clone.setAttribute("style", decls.join("; "));
 }
 function pruneAndInline(orig, clone, win, inline, dropped) {
@@ -437,6 +502,10 @@ var TIME_TEXT_RE = /^\s*(\d{1,2}:\d{2}(\s?[ap]\.?m\.?)?|\d+\s*(m|min|h|hr|d|days
 function classOf(el) {
   return el.getAttribute("class") ?? "";
 }
+function stripContenteditable(el) {
+  if (el.hasAttribute("contenteditable")) el.removeAttribute("contenteditable");
+  for (const child of el.children) stripContenteditable(child);
+}
 function markSlot(el, slot, token) {
   el.setAttribute(SLOT_ATTR, slot);
   el.textContent = token;
@@ -508,12 +577,51 @@ function slotifyRow(row) {
   }
   return { html: row.outerHTML, detected };
 }
-var COMPOSER_RE = /\b(composer|compose|reply|message-?box|message-?input|input-?box|textbox|editor|prompt)\b/i;
+var COMPOSER_RE = /\b(composer|compose|reply|message-?box|message-?input|input-?box|textbox|editor|prompt|chat-?input)\b/i;
+var COMPOSER_ARIA_RE = /\b(compose|reply|message|prompt|input|chat)\b/i;
+function blockAncestor(node, root) {
+  let cur = node;
+  while (cur.parentElement && cur.parentElement !== root) {
+    const parent = cur.parentElement;
+    const style = (parent.getAttribute("style") ?? "").toLowerCase();
+    if (/display\s*:\s*(flex|grid)/.test(style)) return parent;
+    cur = parent;
+  }
+  return cur;
+}
 function findComposer(root, exclude) {
-  const candidates = [...root.querySelectorAll("*")].filter(
+  const all = [...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;
+  const byAria = all.find((e) => {
+    const label = e.getAttribute("aria-label");
+    return label && COMPOSER_ARIA_RE.test(label);
+  });
+  if (byAria) return blockAncestor(byAria, root);
+  const byRole = all.find((e) => e.getAttribute("role") === "textbox");
+  if (byRole) return blockAncestor(byRole, root);
+  const byCe = all.find((e) => e.hasAttribute("contenteditable"));
+  if (byCe) return blockAncestor(byCe, root);
+  const byClass = all.find((e) => COMPOSER_RE.test(classOf(e)));
+  if (byClass) return byClass;
+  let cursor = exclude;
+  while (cursor && cursor !== root) {
+    let sib = cursor.nextElementSibling;
+    while (sib) {
+      const style = (sib.getAttribute("style") ?? "").toLowerCase();
+      const isBlock = !/display\s*:\s*inline/.test(style);
+      const hasButtonish = sib.querySelector(
+        "[role='button'], [contenteditable]"
+      );
+      const txt = (sib.textContent ?? "").trim();
+      if (isBlock && (hasButtonish || txt.length === 0 || txt.length < 200)) {
+        return sib;
+      }
+      sib = sib.nextElementSibling;
+    }
+    cursor = cursor.parentElement;
+  }
+  return null;
 }
 function emptyReport() {
   return { found: false, detected: [], confidence: 0 };
@@ -585,7 +693,7 @@ function distill(root, opts = {}) {
     if (composer) {
       const c = composer.cloneNode(true);
       c.setAttribute(SLOT_ATTR, "composer");
-      c.removeAttribute("contenteditable");
+      stripContenteditable(c);
       c.textContent = "{{composer}}";
       composerHtml = c.outerHTML;
       detection.composer = {
@@ -598,6 +706,10 @@ function distill(root, opts = {}) {
         "No composer detected \u2014 add one by hand if the skin needs it."
       );
     }
+    if (frameHtml)
+      frameHtml = frameHtml.replace(/\s+contenteditable="[^"]*"/g, "");
+    if (messageHtml)
+      messageHtml = messageHtml.replace(/\s+contenteditable="[^"]*"/g, "");
   } else {
     warnings.push(
       "No repeating message row found \u2014 capture a tighter subtree around the thread."
@@ -615,17 +727,19 @@ function distill(root, opts = {}) {
       name: opts.name ?? "Captured skin",
       ...opts.sourceUrl ? { sourceUrl: opts.sourceUrl } : {},
       ...opts.theme ? { theme: opts.theme } : {},
-      ...canvas ? { canvas } : {}
+      ...canvas ? { canvas } : {},
+      ...opts.capturedAt ? { capturedAt: opts.capturedAt } : {}
     },
     slots: {
       ...frameHtml ? { frame: frameHtml } : {},
       ...messageHtml ? { message: messageHtml } : {},
       ...composerHtml ? { composer: composerHtml } : {}
     },
-    css: "",
+    css: opts.css ?? "",
     tokens,
     detection,
-    warnings
+    warnings,
+    ...opts.cssSkipped?.length ? { cssSkipped: opts.cssSkipped } : {}
   };
 }
 function pathTo(root, target) {
@@ -646,52 +760,94 @@ function nodeAtPath(root, path) {
   }
   return node;
 }
-function slug(s) {
-  return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "captured";
+
+// src/css-capture.ts
+function subtreeMatches(root, selector) {
+  if (selector === ":root" || selector === "html" || selector === "body")
+    return false;
+  try {
+    return root.querySelector(selector) != null;
+  } catch {
+    return false;
+  }
 }
-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 ?? "");
+function walkRules(rules, root, out, size) {
+  for (let i = 0; i < rules.length; i++) {
+    if (size.bytes >= size.cap) return;
+    const rule = rules[i];
+    if (rule.type === 1) {
+      const r = rule;
+      const sel = r.selectorText;
+      if (sel && sel.split(",").some((s) => subtreeMatches(root, s.trim()))) {
+        const text = r.cssText;
+        out.push(text);
+        size.bytes += text.length + 1;
+      }
+      continue;
+    }
+    const grouping = rule;
+    if (grouping.cssRules) {
+      const inner = [];
+      const innerSize = { bytes: 0, cap: size.cap - size.bytes };
+      walkRules(grouping.cssRules, root, inner, innerSize);
+      if (inner.length > 0) {
+        const prelude = preludeFor(rule);
+        const wrapped = `${prelude} { ${inner.join(" ")} }`;
+        out.push(wrapped);
+        size.bytes += wrapped.length + 1;
       }
-    } else if (node.type === "image") {
-      out.push(node.alt ?? "\u{1F5BC}");
+      continue;
+    }
+    if (rule.type === 5 || rule.type === 7) {
+      const text = rule.cssText;
+      out.push(text);
+      size.bytes += text.length + 1;
     }
   }
-  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 preludeFor(rule) {
+  const r = rule;
+  switch (r.type) {
+    case 4:
+      return `@media ${r.media?.mediaText ?? "all"}`;
+    case 12:
+      return `@supports ${r.conditionText ?? "all"}`;
+    case 13:
+      return `@container ${r.conditionText ?? ""}`;
+    case 15:
+      return `@layer ${r.name ?? ""}`;
+    default:
+      return rule.cssText.replace(/\{[\s\S]*$/, "").trim();
   }
 }
-function revealStyle(progress) {
-  const p = Math.max(0, Math.min(1, progress));
+function captureMatchedCss(root, doc, opts = {}) {
+  const cap = opts.maxBytes ?? 256 * 1024;
+  const out = [];
+  const size = { bytes: 0, cap };
+  const skipped = [];
+  const sheets = doc.styleSheets;
+  for (let i = 0; i < sheets.length; i++) {
+    if (size.bytes >= cap) break;
+    const sheet = sheets[i];
+    let rules;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      skipped.push(sheet.href ?? "(inline)");
+      continue;
+    }
+    if (!rules) continue;
+    walkRules(rules, root, out, size);
+  }
   return {
-    opacity: p,
-    transform: `translateY(${(1 - p) * 6}px)`,
-    willChange: "opacity, transform"
+    css: out.join("\n"),
+    skipped,
+    truncated: size.bytes >= cap
   };
 }
+function slug(s) {
+  return s.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "captured";
+}
 var DEFAULT_CAPS = {
   events: {},
   content: {},
@@ -700,119 +856,27 @@ var DEFAULT_CAPS = {
   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),
+  const safeDraft = {
     meta: {
       name: draft.meta.name,
-      defaultCanvas: draft.meta.canvas ?? { width: 420, height: 720 },
-      supportsThemes,
-      capabilities: opts.capabilities ?? DEFAULT_CAPS
+      theme: draft.meta.theme,
+      canvas: draft.meta.canvas,
+      capturedAt: draft.meta.capturedAt
+    },
+    slots: {
+      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,
+      typing: draft.slots.typing ? sanitizeHtml(draft.slots.typing) : void 0
     },
-    components,
-    tokens: { light: lightTokens, dark: darkTokens }
+    css: draft.css ?? "",
+    tokens: { colors: draft.tokens.colors ?? {} },
+    darkTokens: draft.darkTokens ? { colors: draft.darkTokens.colors ?? {} } : void 0
   };
+  return skinKit.slotSkinFromDraft(safeDraft, {
+    id: opts.id ?? slug(draft.meta.name),
+    capabilities: opts.capabilities ?? DEFAULT_CAPS
+  });
 }
 
 // src/merge.ts
@@ -830,6 +894,7 @@ function mergeThemeDrafts(light, dark) {
 }
 
 exports.SLOT_TOKENS = SLOT_TOKENS;
+exports.captureMatchedCss = captureMatchedCss;
 exports.detectionScore = detectionScore;
 exports.distill = distill;
 exports.mergeThemeDrafts = mergeThemeDrafts;