@jxsuite/import 0.40.1 → 0.40.2

package/src/apply-popovers.ts

@@ -0,0 +1,298 @@
+/**
+ * Rewrite a captured dropdown, mega-menu or drawer into a real HTML popover.
+ *
+ * The importer had no concept of an overlay, and the failure was quiet rather than loud: the markup
+ * all survived — `aria-haspopup`, `aria-controls`, `data-toggle-panel` and the panel itself — but
+ * the panel was captured in its CLOSED state and that state was written down as an unconditional
+ * style. The reference corpus emitted its navigation submenu as `{ display: grid, opacity: 0,
+ * position: absolute, zIndex: 10 }`, with nothing anywhere left to change the opacity. The menu
+ * could never appear again.
+ *
+ * The target is the platform's own popover, which `@jxsuite/schema` already models. Two of its
+ * rules are the two defects that have actually shipped in this repo, so they are obeyed here by
+ * construction rather than checked afterwards:
+ *
+ * 1. **A popover's base rule may not set `display` or `visibility`.** The UA sheet closes a popover
+ *    with `[popover]:not(:popover-open) { display: none }`, and that rule is UA-origin, so any
+ *    author `display` beats it and the panel is laid out whether open or not. The captured
+ *    declarations move into `:popover-open`, which is where they were always describing.
+ * 2. **Only `<button>` and `<input>` can invoke one.** `popovertarget` comes from an IDL mixin
+ *    included into those two interfaces and nothing else; on an `<a>` it parses and does nothing.
+ *    An anchor that is really a button (`href="#"`) is converted into one. An anchor that actually
+ *    navigates is left alone, because turning a link into a button would break the link.
+ *
+ * `opacity` is handled here rather than by `popoverDisplayRepair`, which lifts only `display` and
+ * `visibility`. The corpus's mega-menu is concealed with `opacity: 0` alone, so a repair that
+ * ignored it would produce a popover that opens into nothing.
+ */
+
+import type { JxElement } from "@jxsuite/schema/types";
+import { POPOVER_DEFAULT_MODE, POPOVER_INVOKER_TAGS } from "@jxsuite/schema/overlays";
+
+/** Attributes naming the panel an invoker controls, in the order they are trusted. */
+const TARGET_ATTRIBUTES = ["aria-controls", "data-toggle-panel", "data-target", "href"];
+
+/** Attributes that mark a control as opening something, none of which is required on its own. */
+const INVOKER_MARKERS = ["aria-haspopup", "aria-expanded", "data-toggle-panel", "data-target"];
+
+/** Declarations that mean "this panel is currently closed" rather than "this is its design". */
+const CONCEALING = new Set(["display", "visibility", "opacity"]);
+
+/** A concealed panel is only a popover if it is also lifted out of the flow. */
+const POSITIONED = new Set(["absolute", "fixed"]);
+
+function styleOf(node: JxElement): Record<string, unknown> | undefined {
+  return node.style as Record<string, unknown> | undefined;
+}
+
+function attributesOf(node: JxElement): Record<string, unknown> | undefined {
+  return node.attributes as Record<string, unknown> | undefined;
+}
+
+function childrenOf(node: JxElement): JxElement[] {
+  return Array.isArray(node.children)
+    ? (node.children.filter((child) => typeof child !== "string") as JxElement[])
+    : [];
+}
+
+/** Whether a style hides the node outright, and by which declaration. */
+function concealedBy(style: Record<string, unknown> | undefined): string[] {
+  if (!style) {
+    return [];
+  }
+  const found: string[] = [];
+  if (style["display"] === "none") {
+    found.push("display");
+  }
+  if (style["visibility"] === "hidden" || style["visibility"] === "collapse") {
+    found.push("visibility");
+  }
+  const { opacity } = style;
+  if (opacity === 0 || opacity === "0") {
+    found.push("opacity");
+  }
+  return found;
+}
+
+/**
+ * Whether this node looks like an overlay panel rather than ordinary hidden content.
+ *
+ * Concealment alone is not enough and must not be: a responsive alternate, a decorative SVG
+ * definition and a closed accordion row are all hidden too, and staples any of them permanently
+ * over the page if mistaken for a popover. Being lifted out of the flow is what distinguishes a
+ * thing drawn ON TOP from a thing not drawn at all — with `role="dialog"` and `inert` accepted as
+ * explicit statements of the same intent.
+ */
+export function looksLikePanel(node: JxElement): boolean {
+  const style = styleOf(node);
+  if (concealedBy(style).length === 0) {
+    return false;
+  }
+  const attributes = attributesOf(node);
+  if (attributes?.["role"] === "dialog" || attributes?.["inert"] !== undefined) {
+    return true;
+  }
+  return POSITIONED.has(String(style?.["position"] ?? ""));
+}
+
+/** The id an invoker names, from whichever attribute carries it. */
+export function targetIdOf(node: JxElement): string | null {
+  const attributes = attributesOf(node);
+  if (!attributes) {
+    return null;
+  }
+  for (const name of TARGET_ATTRIBUTES) {
+    const raw = attributes[name];
+    if (typeof raw !== "string" || raw.length === 0) {
+      continue;
+    }
+    const id = raw.startsWith("#") ? raw.slice(1) : name === "href" ? "" : raw;
+    if (id.length > 0 && /^[A-Za-z][\w:.-]*$/.test(id)) {
+      return id;
+    }
+  }
+  return null;
+}
+
+/** Whether this element is a control that opens something. */
+function looksLikeInvoker(node: JxElement): boolean {
+  const tag = String(node.tagName ?? "").toLowerCase();
+  if (tag !== "button" && tag !== "input" && tag !== "a") {
+    return false;
+  }
+  const attributes = attributesOf(node);
+  if (!attributes) {
+    return false;
+  }
+  return (
+    INVOKER_MARKERS.some((name) => attributes[name] !== undefined) || targetIdOf(node) !== null
+  );
+}
+
+/** Every element in the tree that carries an `id`, so a control can be paired with its panel. */
+function indexById(root: JxElement): Map<string, JxElement> {
+  const index = new Map<string, JxElement>();
+  const visit = (node: JxElement): void => {
+    const id = attributesOf(node)?.["id"];
+    if (typeof id === "string" && !index.has(id)) {
+      index.set(id, node);
+    }
+    for (const child of childrenOf(node)) {
+      visit(child);
+    }
+  };
+  visit(root);
+  return index;
+}
+
+/**
+ * The panel an invoker opens, when no id names it.
+ *
+ * Takes the ancestry INCLUDING the invoker, so the invoker's own next sibling is considered first
+ * and each ancestor's after it.
+ *
+ * The corpus's mega-menu is the case this exists for: the trigger sits inside a `<span>` and the
+ * panel is that span's next sibling, so the panel is the trigger's UNCLE. Walking up from the
+ * invoker and checking each ancestor's next sibling finds it, where "the invoker's own next
+ * sibling" finds nothing on any of the site's four dropdowns.
+ */
+function panelBesideAncestor(ancestry: readonly JxElement[]): JxElement | null {
+  for (let depth = ancestry.length - 1; depth >= 0; depth -= 1) {
+    const node = ancestry[depth]!;
+    const parent = ancestry[depth - 1];
+    if (!parent) {
+      break;
+    }
+    const siblings = childrenOf(parent);
+    const next = siblings[siblings.indexOf(node) + 1];
+    if (next && looksLikePanel(next)) {
+      return next;
+    }
+  }
+  return null;
+}
+
+/**
+ * The value a concealed property takes when the panel is OPEN.
+ *
+ * `opacity: 0` and `visibility: hidden` each have an exact inverse, so the open rule can state it
+ * rather than rely on a default — which is what makes a transition possible and what stops the
+ * schema's `no-open-rule` warning firing on a panel that is genuinely fine.
+ *
+ * `display: none` has NO inverse. The captured value erased whatever the panel used when open, and
+ * writing `block` there would be inventing a fact: the element's own default is the honest answer,
+ * so nothing is written and the warning is accepted.
+ */
+function openValueFor(property: string, closed: unknown): string | null {
+  if (property === "opacity" && (closed === 0 || closed === "0")) {
+    return "1";
+  }
+  if (property === "visibility" && (closed === "hidden" || closed === "collapse")) {
+    return "visible";
+  }
+  return null;
+}
+
+/** Move a panel's closed-state declarations into `:popover-open`, where they describe the open one. */
+function liftConcealment(node: JxElement): void {
+  const style = styleOf(node);
+  if (!style) {
+    return;
+  }
+  const open = (style[":popover-open"] as Record<string, unknown> | undefined) ?? {};
+  for (const property of Object.keys(style)) {
+    if (!CONCEALING.has(property)) {
+      continue;
+    }
+    const value = style[property];
+    const isConcealment = concealedBy({ [property]: value }).length > 0;
+    /* A concealment is replaced by its inverse where it has one; anything else was the panel's
+       design and is carried across unchanged, because the base rule is no longer where it belongs. */
+    const openValue = isConcealment ? openValueFor(property, value) : value;
+    if (openValue !== null) {
+      (open as Record<string, unknown>)[property] = openValue;
+    }
+    delete style[property];
+  }
+  if (Object.keys(open).length > 0) {
+    (style as Record<string, unknown>)[":popover-open"] = open;
+  }
+}
+
+export interface PopoverResult {
+  /** How many invoker/panel pairs were converted. */
+  converted: number;
+  /** Anchors left alone because converting them would have broken a real link. */
+  skippedNavigatingLinks: number;
+}
+
+/**
+ * Convert every recognisable overlay in a page tree into a native popover.
+ *
+ * @param {JxElement} root - The page tree, mutated in place
+ * @returns {PopoverResult}
+ */
+export function applyPopovers(root: JxElement): PopoverResult {
+  const result: PopoverResult = { converted: 0, skippedNavigatingLinks: 0 };
+  const byId = indexById(root);
+  const claimed = new Set<JxElement>();
+  let generated = 0;
+
+  const visit = (node: JxElement, ancestry: JxElement[]): void => {
+    if (looksLikeInvoker(node)) {
+      const id = targetIdOf(node);
+      const panel = (id === null ? null : byId.get(id)) ?? panelBesideAncestor([...ancestry, node]);
+
+      if (panel && panel !== node && !claimed.has(panel) && looksLikePanel(panel)) {
+        const tag = String(node.tagName ?? "").toLowerCase();
+        const attributes = (node.attributes ??= {}) as Record<string, unknown>;
+
+        /* `popovertarget` exists only on button and input. An anchor that is really a button
+           becomes one; an anchor that navigates keeps its job, because a dead link is a worse
+           defect than an unconverted menu. */
+        if (!POPOVER_INVOKER_TAGS.has(tag)) {
+          const { href } = attributes;
+          const navigates = typeof href === "string" && href.length > 0 && href !== "#";
+          if (navigates) {
+            result.skippedNavigatingLinks += 1;
+            for (const child of childrenOf(node)) {
+              visit(child, [...ancestry, node]);
+            }
+            return;
+          }
+          node.tagName = "button";
+          attributes["type"] = "button";
+          delete attributes["href"];
+        }
+
+        const panelAttributes = (panel.attributes ??= {}) as Record<string, unknown>;
+        let { id: panelId } = panelAttributes;
+        if (typeof panelId !== "string" || panelId.length === 0) {
+          generated += 1;
+          panelId = `jx-popover-${generated}`;
+          panelAttributes["id"] = panelId;
+        }
+
+        panelAttributes["popover"] = POPOVER_DEFAULT_MODE;
+        delete panelAttributes["inert"];
+        delete panelAttributes["aria-hidden"];
+        liftConcealment(panel);
+
+        attributes["popovertarget"] = panelId;
+        /* The browser maintains `aria-expanded` on a popover invoker itself; a captured literal
+           would be a second, stale writer of the same fact. */
+        delete attributes["aria-expanded"];
+
+        claimed.add(panel);
+        result.converted += 1;
+      }
+    }
+
+    for (const child of childrenOf(node)) {
+      visit(child, [...ancestry, node]);
+    }
+  };
+
+  visit(root, []);
+  return result;
+}

package/src/apply-styles.ts

@@ -5,6 +5,8 @@
 
 import type { JxElement, JxStyle } from "@jxsuite/schema/types";
 import type { DiffedStyle } from "./style-diff.ts";
+import { parseWidthQuery } from "./breakpoint-plan.ts";
+import { dropDerivedGeometry } from "./derived-geometry.ts";
 
 /** Build a lookup from path key → style object for fast application. */
 function buildStyleMap(diffed: DiffedStyle[]): Map<string, Record<string, string | number>> {
@@ -15,6 +17,43 @@ function buildStyleMap(diffed: DiffedStyle[]): Map<string, Record<string, string
   return map;
 }
 
+/**
+ * The order breakpoint keys must be WRITTEN in, so the cascade resolves the way the source site
+ * did.
+ *
+ * A node's `@--name` keys become `@media` blocks at equal specificity, and equal specificity means
+ * the LAST matching rule wins. So the order is not cosmetic: with `--767` written before `--1024`,
+ * a 500px viewport matches both and takes the 1024 rule, which is the wrong one. Breakpoints are
+ * planned and iterated ascending, so every multi-breakpoint node came out inverted.
+ *
+ * Correct order is per direction. `max-width` narrows downward, so the NARROWER query must come
+ * last to win at narrow viewports: descending. `min-width` widens upward, so the WIDER query must
+ * come last: ascending. A query neither shape (or one the planner could not read) keeps its
+ * relative order at the end, where it cannot displace a rule that was understood.
+ *
+ * This is deliberately NOT the order `$media` itself is written in — `emit.ts` sorts that map
+ * ascending for Studio's Contexts list, and a lookup table has no cascade to get wrong.
+ */
+export function orderBreakpointKeys(
+  names: readonly string[],
+  queries: Record<string, string> | undefined,
+): string[] {
+  const rank = (name: string): { band: number; width: number } => {
+    const parsed = queries?.[name] === undefined ? null : parseWidthQuery(queries[name]!);
+    if (!parsed) {
+      return { band: 2, width: 0 };
+    }
+    return parsed.type === "max"
+      ? { band: 0, width: -parsed.width }
+      : { band: 1, width: parsed.width };
+  };
+  return names.toSorted((a, b) => {
+    const ra = rank(a);
+    const rb = rank(b);
+    return ra.band === rb.band ? ra.width - rb.width : ra.band - rb.band;
+  });
+}
+
 /**
  * Apply base styles and $media deltas to all nodes in the Jx tree.
  *
@@ -26,12 +65,13 @@ export function applyStylesToTree(
   root: JxElement,
   baseStyles: DiffedStyle[],
   mediaDeltas?: Record<string, DiffedStyle[]>,
+  breakpointQueries?: Record<string, string>,
 ): void {
   const baseMap = buildStyleMap(baseStyles);
-  const mediaMaps: Record<string, Map<string, Record<string, string | number>>> = {};
+  const mediaMaps: [string, Map<string, Record<string, string | number>>][] = [];
   if (mediaDeltas) {
-    for (const [bpName, deltas] of Object.entries(mediaDeltas)) {
-      mediaMaps[bpName] = buildStyleMap(deltas);
+    for (const bpName of orderBreakpointKeys(Object.keys(mediaDeltas), breakpointQueries)) {
+      mediaMaps.push([bpName, buildStyleMap(mediaDeltas[bpName]!)]);
     }
   }
 
@@ -55,24 +95,33 @@ function walkAndApply(
   node: JxElement,
   path: number[],
   baseMap: Map<string, Record<string, string | number>>,
-  mediaMaps: Record<string, Map<string, Record<string, string | number>>>,
+  mediaMaps: readonly [string, Map<string, Record<string, string | number>>][],
 ): void {
   const key = path.join(",");
 
-  // Apply base styles
+  /* Measured geometry is filtered against the NODE, because the question is structural: a
+     block-level box in normal flow fills its container, so its measured width states a fact the
+     layout already implies and pinning it is what stops the clone reflowing. The copy is per node
+     because the same captured style object is shared between every instance of a component. */
   const baseStyle = baseMap.get(key);
   if (baseStyle) {
-    node.style = mergeStyle(node.style, baseStyle);
+    const filtered = { ...baseStyle };
+    dropDerivedGeometry(node, filtered);
+    node.style = mergeStyle(node.style, filtered);
   }
 
   // Apply media-responsive deltas as @breakpointName nested objects
-  for (const [bpName, deltaMap] of Object.entries(mediaMaps)) {
+  for (const [bpName, deltaMap] of mediaMaps) {
     const delta = deltaMap.get(key);
-    if (delta && Object.keys(delta).length > 0) {
-      if (!node.style) {
-        node.style = {};
+    if (delta) {
+      const filtered = { ...delta };
+      dropDerivedGeometry(node, filtered, (node.style ?? {}) as Record<string, unknown>);
+      if (Object.keys(filtered).length > 0) {
+        if (!node.style) {
+          node.style = {};
+        }
+        (node.style as Record<string, unknown>)[`@${bpName}`] = filtered;
       }
-      (node.style as Record<string, unknown>)[`@${bpName}`] = delta;
     }
   }
 

package/src/asset-rewrite.ts

@@ -52,20 +52,34 @@ export function rewriteAssetUrls(
    * the importer would fetch one set of URLs and rewrite another — the attribute would be
    * reassembled around fragments nothing had downloaded.
    */
-  function rewriteSrcset(srcset: string): string {
-    return srcset
+  function rewriteSrcset(srcset: string): { srcset: string; collapsedTo: string | null } {
+    const locals = new Set<string>();
+    let unresolved = false;
+
+    const rewritten = srcset
       .split(SRCSET_SEPARATOR)
       .map((entry) => {
         const parts = entry.trim().split(/\s+/);
         const [url = ""] = parts;
-        const rewritten = rewriteUrl(url);
-        if (rewritten) {
+        const local = rewriteUrl(url);
+        if (local) {
           count += 1;
-          parts[0] = rewritten;
+          parts[0] = local;
+          locals.add(local);
+        } else {
+          unresolved = true;
         }
         return parts.join(" ");
       })
       .join(", ");
+
+    /* Every candidate now points at the ONE file the family kept, so the attribute has become a
+       list of the same path repeated with different width descriptors — which lies to the browser
+       about what it can choose. Collapse it, and let the compiler build a real `srcset` from the
+       original it owns. A candidate that failed to resolve means the family is only partly local,
+       so the attribute stays as it is rather than silently narrowing the set. */
+    const collapsedTo = !unresolved && locals.size === 1 ? [...locals][0]! : null;
+    return { collapsedTo, srcset: rewritten };
   }
 
   function rewriteCssUrls(value: string): string {
@@ -125,7 +139,17 @@ export function rewriteAssetUrls(
 
       // Srcset attribute
       if (typeof attrs.srcset === "string") {
-        attrs.srcset = rewriteSrcset(attrs.srcset);
+        const result = rewriteSrcset(attrs.srcset);
+        if (result.collapsedTo === null) {
+          attrs.srcset = result.srcset;
+        } else {
+          delete attrs.srcset;
+          /* `sizes` describes a layout that no longer exists once the candidate list is gone, and
+             the compiler honours an author `sizes` over its own container measurement — so a stale
+             one would misdescribe the imported layout rather than merely be redundant. */
+          delete attrs.sizes;
+          attrs.src = result.collapsedTo;
+        }
       }
     }
 

package/src/componentize.ts

@@ -185,6 +185,39 @@ function setNodeAt(root: JxElement, path: number[], replacement: JxElement): JxE
   return result;
 }
 
+/**
+ * Tags that must never become a component ROOT, because the element itself carries the behaviour.
+ *
+ * A component's template root takes the component's own tag name, so promoting one of these
+ * replaces it with a custom element and the browser semantics go with it: `<details>` stops being a
+ * disclosure, `<summary>` stops being its label, `<dialog>` stops being a dialog, and a table or
+ * list part is torn out of the parent structure that gives it meaning. The children of one of these
+ * are still fair game — only the root is refused.
+ *
+ * This matters most for the widgets `apply-accordions.ts` converts: rewriting an accordion into
+ * `<details name>` makes its rows structurally identical, which is exactly the shape componentize
+ * looks for, so without this guard the pass would hand back a working disclosure and componentize
+ * would immediately turn it into an inert custom element.
+ */
+const NEVER_A_COMPONENT_ROOT = new Set([
+  "details",
+  "summary",
+  "dialog",
+  "table",
+  "thead",
+  "tbody",
+  "tfoot",
+  "tr",
+  "td",
+  "th",
+  "li",
+  "dt",
+  "dd",
+  "option",
+  "optgroup",
+  "figcaption",
+]);
+
 function collectSubtrees(
   node: JxElement,
   pageRoute: string,
@@ -193,7 +226,8 @@ function collectSubtrees(
   out: SubtreeLocation[],
 ) {
   // Skip root node (path.length === 0) — don't componentize entire pages
-  if (path.length > 0 && nodeDepth(node) >= minDepth) {
+  const tag = String(node.tagName ?? "").toLowerCase();
+  if (path.length > 0 && nodeDepth(node) >= minDepth && !NEVER_A_COMPONENT_ROOT.has(tag)) {
     out.push({ pageRoute, path: [...path], node });
   }
   if (Array.isArray(node.children)) {

package/src/crawl.ts

@@ -15,6 +15,7 @@ import type { Breakpoint, BreakpointPolicy } from "./breakpoint-plan.ts";
 import { applyStylesToTree } from "./apply-styles.ts";
 import { collectAssets } from "./asset-collect.ts";
 import { downloadAssets } from "./asset-download.ts";
+import { applyFamilyAliases, planImageFamilies } from "./image-family.ts";
 import { rewriteAssetUrls } from "./asset-rewrite.ts";
 import { applyTokens } from "./css-tokens.ts";
 
@@ -327,7 +328,7 @@ export async function crawlSite(options: CrawlOptions): Promise<CrawlResult> {
               mergedBreakpoints = {};
             }
             Object.assign(mergedBreakpoints, media.breakpoints);
-            applyStylesToTree(jx.document, diffed, media.deltas);
+            applyStylesToTree(jx.document, diffed, media.deltas, media.breakpoints);
           } else {
             applyStylesToTree(jx.document, diffed);
           }
@@ -365,7 +366,12 @@ export async function crawlSite(options: CrawlOptions): Promise<CrawlResult> {
         }
 
         if (collected.assets.length > 0) {
-          const downloaded = await downloadAssets(collected.assets, io, entry.url);
+          /* One member per responsive family reaches the network; every dropped derivative is
+             aliased onto the file that WAS written, so a reference to any rung of the ladder still
+             resolves. The compiler regenerates the sizes from the original it now owns. */
+          const families = planImageFamilies(collected.assets);
+          const downloaded = await downloadAssets(families.keep, io, entry.url);
+          applyFamilyAliases(downloaded.rewriteMap, families.alias);
           if (downloaded.rewriteMap.size > 0) {
             rewriteAssetUrls(jx.document, downloaded.rewriteMap, entry.url);
             // Collect font rewrites (R2)

package/src/derived-geometry.ts

@@ -0,0 +1,115 @@
+/**
+ * Drop the `width` and `height` a browser MEASURED, keeping the ones a site actually authored.
+ *
+ * `getComputedStyle` returns used values, so `width` comes back as the pixels an element happens to
+ * occupy rather than the `100%` or `auto` that produced them. Written into a document as an
+ * unconditional style, that pins the layout: a full-width section captured at a 1440px viewport
+ * becomes `width: 1440px` and never fills anything else again, which is visible the moment a canvas
+ * is dragged wider than the width the import was taken at. On the reference corpus this was 814
+ * elements pinned at 1000px or more, and `width` and `height` were the two most common declarations
+ * in the entire project.
+ *
+ * `media-extract.ts` already removes these from BREAKPOINT deltas by sampling each band twice and
+ * keeping only what both samples agree on. That technique cannot rescue the base, for a reason
+ * worth writing down: a second sample must stay inside its own media band or it measures different
+ * rules, and the base band is bounded below by the site's widest `min-width` breakpoint. A
+ * container with `max-width: 1390px` measures 1390 at every width in that band, so it agrees with
+ * itself and survives — while being exactly the fluid element the reader will notice.
+ *
+ * So the base needs a different question, and the useful one is structural rather than numerical:
+ * **would this element have got that width on its own?** A block-level box in normal flow fills its
+ * containing block by definition, and a `max-width` or `flex-basis` that narrows it is captured
+ * separately and survives — so its measured `width` states a fact the layout already implies, and
+ * removing it restores the fluidity without losing the constraint. A replaced element, an
+ * out-of-flow box and a shrink-to-fit inline box are all sized by something the layout does NOT
+ * imply, so their measurements are kept.
+ */
+
+import type { JxElement } from "@jxsuite/schema/types";
+
+/** Elements sized by their own content or attributes rather than by their container. */
+const REPLACED = new Set([
+  "img",
+  "svg",
+  "video",
+  "canvas",
+  "iframe",
+  "object",
+  "embed",
+  "input",
+  "select",
+  "textarea",
+  "progress",
+  "meter",
+]);
+
+/** A box taken out of the flow is positioned deliberately, so its measurements may be intentional. */
+const OUT_OF_FLOW = new Set(["absolute", "fixed", "sticky"]);
+
+/** A bare pixel length, which is the only shape a measurement takes. */
+const PIXEL_LENGTH = /^-?[\d.]+px$/;
+
+function isMeasured(value: unknown): boolean {
+  return typeof value === "string" && PIXEL_LENGTH.test(value);
+}
+
+/**
+ * Whether this node holds anything that gives it a height of its own.
+ *
+ * The distinction matters only for `height`. A box with content is as tall as that content, and
+ * pinning it breaks the moment text reflows at a narrower width — the single most damaging way a
+ * clone can fail. An EMPTY box is different: a spacer's entire purpose is its height, and there is
+ * nothing else in the document that would reproduce it.
+ */
+function hasContent(node: JxElement): boolean {
+  if (typeof node.textContent === "string" && node.textContent.trim().length > 0) {
+    return true;
+  }
+  const children = Array.isArray(node.children) ? node.children : [];
+  return children.some((child) =>
+    typeof child === "string" ? child.trim().length > 0 : child !== undefined,
+  );
+}
+
+/**
+ * Remove measured geometry from a style object, in place.
+ *
+ * @param {JxElement} node - The element the style belongs to; its tag and content decide the answer
+ * @param {Record<string, unknown>} style - The style object to filter, mutated
+ * @param {Record<string, unknown>} [context] - Where `position` and `display` are read from, when
+ *   they are not in `style` itself. A breakpoint delta carries only what CHANGED, so it usually
+ *   states neither, and judging it on its own would strip an absolutely-positioned box's width on
+ *   the grounds that it looked like an in-flow one.
+ * @returns {number} How many declarations were removed
+ */
+export function dropDerivedGeometry(
+  node: JxElement,
+  style: Record<string, unknown>,
+  context: Record<string, unknown> = style,
+): number {
+  const tag = String(node.tagName ?? "").toLowerCase();
+  if (REPLACED.has(tag)) {
+    return 0;
+  }
+  const position = style["position"] ?? context["position"];
+  if (OUT_OF_FLOW.has(String(position ?? ""))) {
+    return 0;
+  }
+  /* A shrink-to-fit box is sized by its content in the inline direction, so its width is not
+     implied by its container the way a block-level box's is. */
+  const display = style["display"] ?? context["display"];
+  if (String(display ?? "").startsWith("inline")) {
+    return 0;
+  }
+
+  let dropped = 0;
+  if (isMeasured(style["width"])) {
+    delete style["width"];
+    dropped += 1;
+  }
+  if (isMeasured(style["height"]) && hasContent(node)) {
+    delete style["height"];
+    dropped += 1;
+  }
+  return dropped;
+}