@jxsuite/import 0.40.0 → 0.40.2

package/src/apply-disclosures.ts

@@ -0,0 +1,275 @@
+/**
+ * Turn a control that says it expands something into a real `<details>`.
+ *
+ * This is the reading that needs no framework knowledge at all: a site that ships correct
+ * accessibility markup has already told us which control opens which panel, in `aria-expanded` plus
+ * `aria-controls`, and that contract is identical across Bootstrap, jQuery, Webflow and
+ * hand-written markup. Where `toggle-algebra.ts` recognises the Alpine and Vue family by the shape
+ * of their expressions, this recognises everything that ships WAI-ARIA, which is most of the rest.
+ *
+ * The panel is concealed and the script that would reveal it is gone, so the content is on disk and
+ * unreachable — the single largest body of trapped text on the reference corpus.
+ *
+ * **A disclosure is not an overlay, and the difference is the flow.** `apply-popovers.ts` claims a
+ * concealed panel that is positioned, because being lifted out of the flow is what makes a thing
+ * draw ON TOP. A concealed panel still IN the flow is content that belongs where it sits and simply
+ * is not shown yet, which is exactly what `<details>` means. The two passes are disjoint by that
+ * test rather than by ordering luck.
+ *
+ * The rewrite MOVES both subtrees and conserves the leaf census, on the same terms as
+ * `apply-accordions.ts`: a stale widget is a far smaller defect than deleted content, so a rewrite
+ * that would lose a text run or an image is abandoned whole.
+ */
+
+import type { JxElement } from "@jxsuite/schema/types";
+import { countLeaves } from "./apply-accordions.ts";
+
+/** Attributes that made the old control a control, and mean nothing once `<summary>` is one. */
+const CONTROL_ATTRIBUTES = ["aria-expanded", "aria-controls", "role", "tabindex"];
+
+/** A panel lifted out of the flow is an overlay, and belongs to the popover pass instead. */
+const POSITIONED = new Set(["absolute", "fixed"]);
+
+function attributesOf(node: JxElement): Record<string, unknown> | undefined {
+  return node.attributes as Record<string, unknown> | undefined;
+}
+
+function childrenOf(node: JxElement): (JxElement | string)[] {
+  return Array.isArray(node.children) ? (node.children as (JxElement | string)[]) : [];
+}
+
+function elementChildren(node: JxElement): JxElement[] {
+  return childrenOf(node).filter((child) => typeof child !== "string") as JxElement[];
+}
+
+/** Whether this control declares that it expands a named panel. */
+export function isDisclosureInvoker(node: JxElement): boolean {
+  const attributes = attributesOf(node);
+  if (!attributes) {
+    return false;
+  }
+  const controls = attributes["aria-controls"];
+  return (
+    attributes["aria-expanded"] !== undefined && typeof controls === "string" && controls.length > 0
+  );
+}
+
+/**
+ * Whether this panel is closed content in the flow, rather than an overlay or ordinary content.
+ *
+ * The corpus's panels carry no style at all: they are hidden by the `hidden` ATTRIBUTE, which is
+ * why a detector looking only at computed style would miss every one of them.
+ */
+export function isDisclosurePanel(node: JxElement): boolean {
+  const style = node.style as Record<string, unknown> | undefined;
+  if (POSITIONED.has(String(style?.["position"] ?? ""))) {
+    return false;
+  }
+  const attributes = attributesOf(node);
+  return attributes?.["hidden"] !== undefined || style?.["display"] === "none";
+}
+
+/** Every element carrying an `id`, so `aria-controls` can be resolved. */
+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 elementChildren(node)) {
+      visit(child);
+    }
+  };
+  visit(root);
+  return index;
+}
+
+/**
+ * What an element actually holds, whether that is children or a collapsed `textContent`.
+ *
+ * `htmlToJx` folds a lone text child into `textContent` and emits no `children` array at all, so a
+ * control whose label is bare text — which is most of them — looks empty to a children-only reader.
+ * Unwrapping one through `childrenOf` alone silently drops the label, and the leaf census then
+ * abandons the whole rewrite. Correct, but the wrong outcome.
+ */
+function contentOf(node: JxElement): (JxElement | string)[] {
+  const children = childrenOf(node);
+  if (children.length > 0) {
+    return children;
+  }
+  return typeof node.textContent === "string" && node.textContent.length > 0
+    ? [node.textContent]
+    : [];
+}
+
+/**
+ * Replace the invoker element with its own children, wherever it sits inside `node`.
+ *
+ * `<summary>` IS the control once the rewrite lands, so leaving the old one inside it would nest an
+ * interactive element in another. Unwrapping rather than deleting keeps the label text, which is
+ * the only part of the control a reader ever saw. Safe here because these controls carry no `href`:
+ * a real link would lose its destination and is refused before this point.
+ */
+function unwrapInvoker(node: JxElement, invoker: JxElement): JxElement {
+  const children = childrenOf(node);
+  if (children.length === 0) {
+    return node;
+  }
+  const rebuilt: (JxElement | string)[] = [];
+  for (const child of children) {
+    if (child === invoker) {
+      rebuilt.push(...contentOf(child as JxElement));
+    } else if (typeof child === "string") {
+      rebuilt.push(child);
+    } else {
+      rebuilt.push(unwrapInvoker(child as JxElement, invoker));
+    }
+  }
+  return { ...node, children: rebuilt as JxElement[] };
+}
+
+export interface DisclosureResult {
+  /** How many control/panel pairs became a `<details>`. */
+  converted: number;
+  /** Controls left pointing at a panel another control had already claimed. */
+  duplicateInvokers: number;
+}
+
+/**
+ * Convert every ARIA-declared disclosure in a page tree into `<details>`.
+ *
+ * @param {JxElement} root - The page tree, mutated in place
+ * @returns {DisclosureResult}
+ */
+export function applyDisclosures(root: JxElement): DisclosureResult {
+  const result: DisclosureResult = { converted: 0, duplicateInvokers: 0 };
+  const byId = indexById(root);
+  const claimedPanels = new Set<JxElement>();
+
+  /*
+   * Walk parents rather than invokers. The rewrite replaces TWO of a parent's children with one
+   * `<details>`, so the parent is the unit of work — and the corpus puts the panel BEFORE the
+   * control it belongs to ("… hidden extra copy … Read more"), so neither is reliably first.
+   */
+  const visit = (parent: JxElement): void => {
+    for (;;) {
+      const children = childrenOf(parent);
+      let applied = false;
+
+      for (let index = 0; index < children.length && !applied; index += 1) {
+        const branch = children[index];
+        if (typeof branch === "string") {
+          continue;
+        }
+
+        const invoker = findInvokerIn(branch as JxElement);
+        if (!invoker) {
+          continue;
+        }
+        const panelId = String(attributesOf(invoker)!["aria-controls"]);
+        const panel = byId.get(panelId);
+        if (!panel || !isDisclosurePanel(panel)) {
+          continue;
+        }
+        if (claimedPanels.has(panel)) {
+          /* A second control for a panel already inside a `<details>` is now a lie to a screen
+             reader: it reports a collapsed state it no longer governs. Strip what made it a
+             control and leave the text. */
+          const attributes = attributesOf(invoker)!;
+          for (const name of CONTROL_ATTRIBUTES) {
+            delete attributes[name];
+          }
+          result.duplicateInvokers += 1;
+          continue;
+        }
+
+        const panelIndex = children.indexOf(panel);
+        if (panelIndex === -1 || panelIndex === index) {
+          continue;
+        }
+
+        const before = countLeaves(parent);
+        const panelAttributes = { ...attributesOf(panel) };
+        delete panelAttributes["hidden"];
+        delete panelAttributes["aria-hidden"];
+
+        /* When the control IS the branch, there is no enclosing element to unwrap it out of, so
+           its own attributes would ride onto the `<summary>`. Stripping them here covers both
+           shapes: `<summary>` is the control now, and a leftover `aria-expanded` on it would report
+           a state the element no longer owns. */
+        const summaryBranch = unwrapInvoker(branch as JxElement, invoker);
+        const summaryAttributes = { ...attributesOf(summaryBranch) };
+        for (const name of CONTROL_ATTRIBUTES) {
+          delete summaryAttributes[name];
+        }
+        const summary: JxElement = {
+          ...summaryBranch,
+          ...(Object.keys(summaryAttributes).length > 0
+            ? { attributes: summaryAttributes as Record<string, string> }
+            : {}),
+          tagName: "summary",
+        };
+        if (Object.keys(summaryAttributes).length === 0) {
+          delete summary.attributes;
+        }
+        const details: JxElement = {
+          children: [summary, { ...panel, attributes: panelAttributes }] as JxElement[],
+          tagName: "details",
+        };
+
+        /* Placed where the FIRST of the pair sat, so the disclosure keeps the position the reader
+           already associated with it. `<details>` always renders its summary above its content, so
+           a panel that came first moves below the label it was always labelled by. */
+        const rebuilt = children.filter((child) => child !== branch && child !== panel) as (
+          | JxElement
+          | string
+        )[];
+        rebuilt.splice(Math.min(index, panelIndex), 0, details);
+
+        const candidate: JxElement = { ...parent, children: rebuilt as JxElement[] };
+        if (countLeaves(candidate).join(" ") !== before.join(" ")) {
+          continue;
+        }
+
+        parent.children = rebuilt as JxElement[];
+        claimedPanels.add(panel);
+        result.converted += 1;
+        applied = true;
+      }
+
+      if (!applied) {
+        break;
+      }
+    }
+
+    for (const child of elementChildren(parent)) {
+      visit(child);
+    }
+  };
+
+  visit(root);
+  return result;
+}
+
+/**
+ * The first disclosure control at or under `node`, but never one already inside a `<details>`.
+ *
+ * Without that second condition a converted disclosure's own summary would be offered back as a
+ * candidate on the next pass over the same parent, and the loop would not terminate.
+ */
+function findInvokerIn(node: JxElement): JxElement | null {
+  if (String(node.tagName ?? "").toLowerCase() === "details") {
+    return null;
+  }
+  if (isDisclosureInvoker(node)) {
+    return node;
+  }
+  for (const child of elementChildren(node)) {
+    const found = findInvokerIn(child);
+    if (found) {
+      return found;
+    }
+  }
+  return null;
+}

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;
     }
   }