@jxsuite/import 0.40.1 → 0.40.3

package/src/style-capture.ts

@@ -7,6 +7,7 @@
  */
 
 import type { ImportPage } from "./capture.ts";
+import { STRIP_TAGS } from "./to-jx.ts";
 
 export interface CapturedStyle {
   /** Depth-first element-index path from <body>, e.g. [0, 2, 1]. */
@@ -164,173 +165,194 @@ const STYLE_ALLOWLIST: string[] = [
  * round-trips per element.
  */
 export async function captureStyles(page: ImportPage): Promise<StyleCaptureResult> {
-  return page.evaluate((allowlist: string[]) => {
-    const elements: { path: number[]; tagName: string; styles: Record<string, string> }[] = [];
-    const tagsSeen = new Set<string>();
+  return page.evaluate(
+    (allowlist: string[], stripTags: string[]) => {
+      const stripped = new Set(stripTags);
+      const elements: { path: number[]; tagName: string; styles: Record<string, string> }[] = [];
+      const tagsSeen = new Set<string>();
 
-    // Depth-first walk matching htmlToJx traversal order (element children only,
-    // Skipping text/comment nodes — same as hast element indexing).
-    function walk(el: Element, path: number[]) {
-      const tag = el.tagName.toLowerCase();
-      tagsSeen.add(tag);
+      // Depth-first walk matching htmlToJx traversal order (element children only,
+      // Skipping text/comment nodes — same as hast element indexing).
+      function walk(el: Element, path: number[]) {
+        const tag = el.tagName.toLowerCase();
+        tagsSeen.add(tag);
 
-      const cs = window.getComputedStyle(el);
-      const styles: Record<string, string> = {};
-      for (const prop of allowlist) {
-        const val = cs.getPropertyValue(prop);
-        if (val) {
-          styles[prop] = val;
+        const cs = window.getComputedStyle(el);
+        const styles: Record<string, string> = {};
+        for (const prop of allowlist) {
+          const val = cs.getPropertyValue(prop);
+          if (val) {
+            styles[prop] = val;
+          }
         }
-      }
-      elements.push({ path: [...path], tagName: tag, styles });
+        elements.push({ path: [...path], tagName: tag, styles });
 
-      let childIdx = 0;
-      for (const child of el.children) {
-        walk(child, [...path, childIdx]);
-        childIdx += 1;
+        /* A stripped tag is not walked AND does not consume an index. `to-jx.ts` removes it from
+         the tree these paths are later resolved against, so counting it here would shift every
+         following sibling — and the whole subtree under it — onto a path that does not exist. */
+        let childIdx = 0;
+        for (const child of el.children) {
+          if (stripped.has(child.tagName.toLowerCase())) {
+            continue;
+          }
+          walk(child, [...path, childIdx]);
+          childIdx += 1;
+        }
       }
-    }
 
-    // Walk from <body>'s children (htmlToJx receives body.innerHTML, not body itself)
-    let bodyChildIdx = 0;
-    for (const child of document.body.children) {
-      walk(child, [bodyChildIdx]);
-      bodyChildIdx += 1;
-    }
+      // Walk from <body>'s children (htmlToJx receives body.innerHTML, not body itself)
+      let bodyChildIdx = 0;
+      for (const child of document.body.children) {
+        if (stripped.has(child.tagName.toLowerCase())) {
+          continue;
+        }
+        walk(child, [bodyChildIdx]);
+        bodyChildIdx += 1;
+      }
 
-    // Build UA-default baselines per unique tagName
-    const uaDefaults: Record<string, Record<string, string>> = {};
-    const sandbox = document.createElement("div");
-    sandbox.style.cssText =
-      "position:fixed;top:-9999px;left:-9999px;visibility:hidden;pointer-events:none;";
-    document.body.append(sandbox);
+      // Build UA-default baselines per unique tagName
+      const uaDefaults: Record<string, Record<string, string>> = {};
+      const sandbox = document.createElement("div");
+      /* The sandbox must not set an INHERITED property that is also on the allowlist: the probe
+       inherits it and the value becomes that tag's "UA default", so a real declaration equal to it
+       is dropped as a no-op by `diffStyles` and the mirror value is emitted on every other node.
+       `visibility:hidden` and `pointer-events:none` did exactly that — every genuine
+       `visibility:hidden` and `pointer-events:none` on the site was deleted, and `visibility:visible`
+       plus `pointerEvents:auto` were stamped onto ~5,300 nodes each, making them the two most
+       common declarations in the project. Offscreen positioning alone hides the probes. */
+      sandbox.style.cssText = "position:fixed;top:-9999px;left:-9999px;";
+      document.body.append(sandbox);
 
-    for (const tag of tagsSeen) {
-      try {
-        const probe = document.createElement(tag);
-        sandbox.append(probe);
-        const cs = window.getComputedStyle(probe);
-        const defaults: Record<string, string> = {};
-        for (const prop of allowlist) {
-          const val = cs.getPropertyValue(prop);
-          if (val) {
-            defaults[prop] = val;
+      for (const tag of tagsSeen) {
+        try {
+          const probe = document.createElement(tag);
+          sandbox.append(probe);
+          const cs = window.getComputedStyle(probe);
+          const defaults: Record<string, string> = {};
+          for (const prop of allowlist) {
+            const val = cs.getPropertyValue(prop);
+            if (val) {
+              defaults[prop] = val;
+            }
           }
+          uaDefaults[tag] = defaults;
+          probe.remove();
+        } catch {
+          // Skip exotic elements
         }
-        uaDefaults[tag] = defaults;
-        probe.remove();
-      } catch {
-        // Skip exotic elements
       }
-    }
-    sandbox.remove();
+      sandbox.remove();
 
-    // Discover @media queries from stylesheets (recurse into @layer, @supports, etc.)
-    const mediaQueries: string[] = [];
-    const mediaSeen = new Set<string>();
-    function collectMediaRules(rules: CSSRuleList) {
-      for (const rule of rules) {
-        if (rule instanceof CSSMediaRule) {
-          const q = rule.conditionText;
-          if (!mediaSeen.has(q)) {
-            mediaSeen.add(q);
-            mediaQueries.push(q);
+      // Discover @media queries from stylesheets (recurse into @layer, @supports, etc.)
+      const mediaQueries: string[] = [];
+      const mediaSeen = new Set<string>();
+      function collectMediaRules(rules: CSSRuleList) {
+        for (const rule of rules) {
+          if (rule instanceof CSSMediaRule) {
+            const q = rule.conditionText;
+            if (!mediaSeen.has(q)) {
+              mediaSeen.add(q);
+              mediaQueries.push(q);
+            }
+            collectMediaRules(rule.cssRules);
+          } else if ("cssRules" in rule) {
+            collectMediaRules((rule as CSSGroupingRule).cssRules);
           }
-          collectMediaRules(rule.cssRules);
-        } else if ("cssRules" in rule) {
-          collectMediaRules((rule as CSSGroupingRule).cssRules);
         }
       }
-    }
-    for (const sheet of document.styleSheets) {
-      try {
-        collectMediaRules(sheet.cssRules);
-      } catch {
-        // Cross-origin stylesheet — cssRules inaccessible
+      for (const sheet of document.styleSheets) {
+        try {
+          collectMediaRules(sheet.cssRules);
+        } catch {
+          // Cross-origin stylesheet — cssRules inaccessible
+        }
       }
-    }
 
-    // Extract CSS custom property declarations (R5 — design tokens)
-    const customProperties: Record<string, string> = {};
-    function collectCustomProps(rules: CSSRuleList) {
-      for (const rule of rules) {
-        if (rule instanceof CSSStyleRule) {
-          const { style } = rule;
-          for (const name of style) {
-            if (name.startsWith("--")) {
-              const val = style.getPropertyValue(name).trim();
-              if (val && !val.includes("var(")) {
-                customProperties[name] = val;
+      // Extract CSS custom property declarations (R5 — design tokens)
+      const customProperties: Record<string, string> = {};
+      function collectCustomProps(rules: CSSRuleList) {
+        for (const rule of rules) {
+          if (rule instanceof CSSStyleRule) {
+            const { style } = rule;
+            for (const name of style) {
+              if (name.startsWith("--")) {
+                const val = style.getPropertyValue(name).trim();
+                if (val && !val.includes("var(")) {
+                  customProperties[name] = val;
+                }
               }
             }
           }
-        }
-        if ("cssRules" in rule) {
-          try {
-            collectCustomProps((rule as CSSGroupingRule).cssRules);
-          } catch {
-            /* Skip */
+          if ("cssRules" in rule) {
+            try {
+              collectCustomProps((rule as CSSGroupingRule).cssRules);
+            } catch {
+              /* Skip */
+            }
           }
         }
       }
-    }
-    for (const sheet of document.styleSheets) {
-      try {
-        collectCustomProps(sheet.cssRules);
-      } catch {
-        /* Cross-origin */
+      for (const sheet of document.styleSheets) {
+        try {
+          collectCustomProps(sheet.cssRules);
+        } catch {
+          /* Cross-origin */
+        }
       }
-    }
 
-    // Capture <html> and <body> styles that won't be in the element tree
-    // (the Jx tree starts from body.children, not body itself)
-    const documentStyles: Record<string, string> = {};
+      // Capture <html> and <body> styles that won't be in the element tree
+      // (the Jx tree starts from body.children, not body itself)
+      const documentStyles: Record<string, string> = {};
 
-    const TRANSPARENT = new Set(["rgba(0, 0, 0, 0)", "transparent", ""]);
-    function isDefault(val: string, probeVal: string): boolean {
-      return !val || val === probeVal || TRANSPARENT.has(val);
-    }
+      const TRANSPARENT = new Set(["rgba(0, 0, 0, 0)", "transparent", ""]);
+      function isDefault(val: string, probeVal: string): boolean {
+        return !val || val === probeVal || TRANSPARENT.has(val);
+      }
 
-    const htmlCs = window.getComputedStyle(document.documentElement);
-    const bodyCs = window.getComputedStyle(document.body);
+      const htmlCs = window.getComputedStyle(document.documentElement);
+      const bodyCs = window.getComputedStyle(document.body);
 
-    // Create a clean probe in an iframe to get true UA defaults
-    // (a probe appended to body would inherit body's own styles)
-    const iframe = document.createElement("iframe");
-    iframe.style.cssText = "position:fixed;top:-9999px;left:-9999px;width:0;height:0;border:none;";
-    document.body.append(iframe);
-    const iframeDoc = iframe.contentDocument!;
-    const probeDiv = iframeDoc.createElement("div");
-    iframeDoc.body.append(probeDiv);
-    const probeCs = iframe.contentWindow!.getComputedStyle(probeDiv);
-    const probeBodyCs = iframe.contentWindow!.getComputedStyle(iframeDoc.body);
+      // Create a clean probe in an iframe to get true UA defaults
+      // (a probe appended to body would inherit body's own styles)
+      const iframe = document.createElement("iframe");
+      iframe.style.cssText =
+        "position:fixed;top:-9999px;left:-9999px;width:0;height:0;border:none;";
+      document.body.append(iframe);
+      const iframeDoc = iframe.contentDocument!;
+      const probeDiv = iframeDoc.createElement("div");
+      iframeDoc.body.append(probeDiv);
+      const probeCs = iframe.contentWindow!.getComputedStyle(probeDiv);
+      const probeBodyCs = iframe.contentWindow!.getComputedStyle(iframeDoc.body);
 
-    const DOC_PROPS = [
-      "background-color",
-      "background-image",
-      "color",
-      "font-family",
-      "font-size",
-      "line-height",
-      "letter-spacing",
-    ];
-    for (const prop of DOC_PROPS) {
-      const bodyVal = bodyCs.getPropertyValue(prop);
-      const htmlVal = htmlCs.getPropertyValue(prop);
-      const probeDefault = probeCs.getPropertyValue(prop);
-      const probeBodyDefault = probeBodyCs.getPropertyValue(prop);
+      const DOC_PROPS = [
+        "background-color",
+        "background-image",
+        "color",
+        "font-family",
+        "font-size",
+        "line-height",
+        "letter-spacing",
+      ];
+      for (const prop of DOC_PROPS) {
+        const bodyVal = bodyCs.getPropertyValue(prop);
+        const htmlVal = htmlCs.getPropertyValue(prop);
+        const probeDefault = probeCs.getPropertyValue(prop);
+        const probeBodyDefault = probeBodyCs.getPropertyValue(prop);
 
-      // Body takes priority, but skip transparent/default values
-      if (!isDefault(bodyVal, probeBodyDefault)) {
-        documentStyles[prop] = bodyVal;
-      } else if (!isDefault(htmlVal, probeDefault)) {
-        documentStyles[prop] = htmlVal;
+        // Body takes priority, but skip transparent/default values
+        if (!isDefault(bodyVal, probeBodyDefault)) {
+          documentStyles[prop] = bodyVal;
+        } else if (!isDefault(htmlVal, probeDefault)) {
+          documentStyles[prop] = htmlVal;
+        }
       }
-    }
-    iframe.remove();
+      iframe.remove();
 
-    return { elements, uaDefaults, mediaQueries, customProperties, documentStyles };
-  }, STYLE_ALLOWLIST);
+      return { elements, uaDefaults, mediaQueries, customProperties, documentStyles };
+    },
+    STYLE_ALLOWLIST,
+    [...STRIP_TAGS],
+  );
 }
 
 /**
@@ -354,36 +376,50 @@ export async function captureStylesAtWidth(
       }),
   );
 
-  return page.evaluate((allowlist: string[]) => {
-    const elements: { path: number[]; tagName: string; styles: Record<string, string> }[] = [];
+  return page.evaluate(
+    (allowlist: string[], stripTags: string[]) => {
+      const stripped = new Set(stripTags);
+      const elements: { path: number[]; tagName: string; styles: Record<string, string> }[] = [];
 
-    function walk(el: Element, path: number[]) {
-      const tag = el.tagName.toLowerCase();
-      const cs = window.getComputedStyle(el);
-      const styles: Record<string, string> = {};
-      for (const prop of allowlist) {
-        const val = cs.getPropertyValue(prop);
-        if (val) {
-          styles[prop] = val;
+      function walk(el: Element, path: number[]) {
+        const tag = el.tagName.toLowerCase();
+        const cs = window.getComputedStyle(el);
+        const styles: Record<string, string> = {};
+        for (const prop of allowlist) {
+          const val = cs.getPropertyValue(prop);
+          if (val) {
+            styles[prop] = val;
+          }
         }
-      }
-      elements.push({ path: [...path], tagName: tag, styles });
+        elements.push({ path: [...path], tagName: tag, styles });
 
-      let childIdx = 0;
-      for (const child of el.children) {
-        walk(child, [...path, childIdx]);
-        childIdx += 1;
+        /* A stripped tag is not walked AND does not consume an index. `to-jx.ts` removes it from
+         the tree these paths are later resolved against, so counting it here would shift every
+         following sibling — and the whole subtree under it — onto a path that does not exist. */
+        let childIdx = 0;
+        for (const child of el.children) {
+          if (stripped.has(child.tagName.toLowerCase())) {
+            continue;
+          }
+          walk(child, [...path, childIdx]);
+          childIdx += 1;
+        }
       }
-    }
 
-    let bodyChildIdx = 0;
-    for (const child of document.body.children) {
-      walk(child, [bodyChildIdx]);
-      bodyChildIdx += 1;
-    }
+      let bodyChildIdx = 0;
+      for (const child of document.body.children) {
+        if (stripped.has(child.tagName.toLowerCase())) {
+          continue;
+        }
+        walk(child, [bodyChildIdx]);
+        bodyChildIdx += 1;
+      }
 
-    return elements;
-  }, STYLE_ALLOWLIST);
+      return elements;
+    },
+    STYLE_ALLOWLIST,
+    [...STRIP_TAGS],
+  );
 }
 
 export { STYLE_ALLOWLIST };

package/src/style-diff.ts

@@ -166,11 +166,24 @@ export function computeMediaDelta(
     const baseStyle = diffStyles(baseEl.styles, defaults);
     const bpStyle = diffStyles(bpEl.styles, defaults);
 
-    // Only keep properties that changed from base
+    /* The breakpoint's values BEFORE the UA-default and noise filters.
+       `diffStyles` drops a declaration that matches the tag's UA default, which is exactly what a
+       property REVERTING at a breakpoint looks like: `display: flex` going back to `block` leaves
+       nothing in `bpStyle`, because `block` is the UA default for a div. Iterating only `bpStyle`
+       therefore made every revert invisible - across the whole corpus there was not one
+       `display: block` delta, and a site's entire "stack on mobile" behaviour was discarded. The
+       raw value is what a revert has to be expressed WITH, since the filtered one is gone. */
+    const bpRaw: Record<string, string | number> = {};
+    for (const [prop, value] of Object.entries(bpEl.styles)) {
+      bpRaw[kebabToCamel(prop)] = maybeNumeric(value);
+    }
+
+    // Every property either side declares, so a revert counts as a change rather than an absence.
     const delta: Record<string, string | number> = {};
-    for (const [prop, val] of Object.entries(bpStyle)) {
-      if (baseStyle[prop] !== val) {
-        delta[prop] = val;
+    for (const prop of new Set([...Object.keys(baseStyle), ...Object.keys(bpStyle)])) {
+      const value = prop in bpStyle ? bpStyle[prop] : bpRaw[prop];
+      if (value !== undefined && baseStyle[prop] !== value) {
+        delta[prop] = value;
       }
     }
 

package/src/to-jx.ts

@@ -10,7 +10,33 @@ export interface ToJxResult {
   collectedStyles: string[];
 }
 
-const STRIP_TAGS = new Set(["script", "noscript", "iframe", "object", "embed", "link", "meta"]);
+/**
+ * Tags removed from the converted tree — and therefore tags the style capture must skip too.
+ *
+ * Exported because two passes have to agree about it. `style-capture.ts` walks the LIVE DOM to
+ * build each element's child-index path; `apply-styles.ts` looks those paths up in the STRIPPED
+ * tree. Anything dropped here but present during the walk shifts every following sibling by one,
+ * and the shift cascades through the subtree, so the lookup misses and the node gets no style at
+ * all. On a WordPress page carrying sixteen in-body `<style>` blocks and an `<iframe>`, that was
+ * 62.8% of elements unstyled.
+ *
+ * `style` is a member: it is stripped in `stripTags` by its own branch (its text is harvested into
+ * `collectedStyles` first), which is exactly the kind of second exit that made the sets diverge.
+ *
+ * The live DOM must NOT have these removed before capture — `getComputedStyle` is about to read the
+ * cascade that `<style>` and `<link>` define. Skipping them in the walk is the correct fix;
+ * removing them from the page is not.
+ */
+export const STRIP_TAGS = new Set([
+  "script",
+  "noscript",
+  "iframe",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "style",
+]);
 
 function countNodes(node: JxElement | string): number {
   if (typeof node === "string") {

package/src/toggle-algebra.ts

@@ -0,0 +1,167 @@
+/**
+ * Read a widget's open/closed logic out of its attribute VALUES, without knowing the framework.
+ *
+ * An imported accordion arrives as inert text. The site drove it with a client framework, the
+ * capture strips scripts, and what survives is markup carrying directives nothing will ever
+ * execute: on the reference corpus, 174 `x-show` / `@click` / `x-collapse` attributes against 17
+ * surviving roots and no runtime, with 178 elements left permanently `hidden` over real content.
+ *
+ * The obvious detector is a signal list — `aria-expanded`, `aria-controls`, `role="tabpanel"`. It
+ * does not work. The corpus's accordions carry NO ARIA at all: their only markers are class names
+ * and framework directives, so a ranked ARIA list scores them zero. And enumerating the directives
+ * instead just moves the problem, because the next site brings a different vocabulary.
+ *
+ * So this reads the ALGEBRA rather than the vocabulary. Three shapes appear in the value of any
+ * attribute, whatever it is called:
+ *
+ * - **DECLARE** — an object literal of `ident: literal` pairs. The widget's state, named.
+ * - **ASSIGN** — `ident = (ident === K ? <closed> : K)`, or `ident = !ident`. A toggle.
+ * - **COMPARE** — `ident === K`, or a bare `ident`. A visibility predicate.
+ *
+ * A widget is recognised when those three agree with each other and with the repeated structure:
+ * one ident, declared once, whose assignment keys are in bijection with the rows that compare
+ * against them. That is true of Alpine, Vue, Petite-Vue and Livewire alike, and it never names any
+ * of them.
+ *
+ * **It fails closed, and its limits are real.** Bootstrap, jQuery, Webflow and Squarespace bind in
+ * JavaScript against selectors or opaque ids, and contribute nothing here — those need the ARIA
+ * rules, which they ship correctly. When the algebra does not close, nothing is rewritten.
+ */
+
+/** A JavaScript identifier, which is what every one of these shapes is built around. */
+const IDENT = String.raw`[A-Za-z_$][A-Za-z0-9_$]*`;
+
+/** The literals a row key may be. A key is compared and assigned, so it has to be primitive. */
+const KEY = String.raw`-?\d+|'[^']*'|"[^"]*"`;
+
+/** The values that mean "nothing is open" on the closing side of a toggle. */
+const CLOSED = String.raw`null|undefined|-1|''|""|false`;
+
+const DECLARE_RE = /^\s*\{\s*(.+?)\s*\}\s*$/s;
+const DECLARE_PAIR_RE = new RegExp(String.raw`^\s*(${IDENT})\s*:\s*(.+?)\s*$`);
+
+/** `ident = (ident === K ? null : K)` — exclusive toggle, parentheses optional. */
+const ASSIGN_KEYED_RE = new RegExp(
+  String.raw`^\s*(${IDENT})\s*=\s*\(?\s*\1\s*===\s*(${KEY})\s*\?\s*(?:${CLOSED})\s*:\s*(${KEY})\s*\)?\s*;?\s*$`,
+);
+
+/** `ident = !ident` — a plain boolean disclosure. */
+const ASSIGN_BOOL_RE = new RegExp(String.raw`^\s*(${IDENT})\s*=\s*!\s*\1\s*;?\s*$`);
+
+/** `ident === K` — the predicate a row's body is shown under. */
+const COMPARE_KEYED_RE = new RegExp(String.raw`^\s*(${IDENT})\s*===\s*(${KEY})\s*$`);
+
+/** A bare `ident`, the boolean form of the same predicate. */
+const COMPARE_BOOL_RE = new RegExp(String.raw`^\s*(${IDENT})\s*$`);
+
+/**
+ * The one key a boolean widget has, so keyed and boolean forms share a shape.
+ *
+ * `#` cannot begin a bare numeric key, so this cannot collide with a real one.
+ */
+export const BOOLEAN_KEY = "#boolean";
+
+export type ToggleRole =
+  | { kind: "declare"; idents: Map<string, string> }
+  | { kind: "assign"; ident: string; key: string }
+  | { kind: "compare"; ident: string; key: string };
+
+/** Normalize a key literal so `0`, `'0'` and `"0"` are the same row. */
+function normalizeKey(raw: string): string {
+  const quoted = raw.match(/^['"](.*)['"]$/);
+  return quoted ? quoted[1]! : raw.trim();
+}
+
+/**
+ * Classify one attribute value, or null when it is not part of a toggle.
+ *
+ * Order matters: DECLARE first, because `{ open: null }` matches nothing else; then the keyed
+ * forms, because a bare identifier is the loosest shape here.
+ *
+ * `knownIdents` is what makes the bare form safe, and it is not optional in spirit. A lone
+ * identifier is a valid predicate for a boolean widget (`x-show="show_more"`) and is ALSO what
+ * `id="x"`, `class="hero"` and `target="_blank"` look like. Read context-free it matches half the
+ * attributes on a page. So a bare identifier is only a predicate when it names state something
+ * already declared — which is the closure requirement the whole algebra rests on, applied at the
+ * one place it would otherwise leak.
+ *
+ * @param {string} value - The raw attribute value
+ * @param {ReadonlySet<string>} [knownIdents] - Idents a DECLARE in scope has introduced
+ * @returns {ToggleRole | null}
+ */
+export function classifyToggleValue(
+  value: string,
+  knownIdents?: ReadonlySet<string>,
+): ToggleRole | null {
+  if (typeof value !== "string" || value.length === 0) {
+    return null;
+  }
+
+  const declare = value.match(DECLARE_RE);
+  if (declare) {
+    const idents = new Map<string, string>();
+    for (const part of declare[1]!.split(",")) {
+      const pair = part.match(DECLARE_PAIR_RE);
+      if (!pair) {
+        return null;
+      }
+      idents.set(pair[1]!, pair[2]!);
+    }
+    return idents.size > 0 ? { idents, kind: "declare" } : null;
+  }
+
+  const keyedAssign = value.match(ASSIGN_KEYED_RE);
+  if (keyedAssign && normalizeKey(keyedAssign[2]!) === normalizeKey(keyedAssign[3]!)) {
+    return { ident: keyedAssign[1]!, key: normalizeKey(keyedAssign[2]!), kind: "assign" };
+  }
+
+  const boolAssign = value.match(ASSIGN_BOOL_RE);
+  if (boolAssign) {
+    return { ident: boolAssign[1]!, key: BOOLEAN_KEY, kind: "assign" };
+  }
+
+  const keyedCompare = value.match(COMPARE_KEYED_RE);
+  if (keyedCompare) {
+    return { ident: keyedCompare[1]!, key: normalizeKey(keyedCompare[2]!), kind: "compare" };
+  }
+
+  const boolCompare = value.match(COMPARE_BOOL_RE);
+  if (boolCompare && knownIdents?.has(boolCompare[1]!)) {
+    return { ident: boolCompare[1]!, key: BOOLEAN_KEY, kind: "compare" };
+  }
+
+  return null;
+}
+
+/**
+ * The strongest role among an element's attribute values.
+ *
+ * An element carries several directives at once — the corpus's accordion body has `x-show`,
+ * `x-collapse.duration.250ms` and `hidden` together — and only one of them is the predicate. A
+ * declaration outranks a toggle, which outranks a predicate, because that is the order in which
+ * they identify the node: a root, then a control, then a panel.
+ *
+ * @param {Record<string, unknown> | undefined} attributes
+ * @param {ReadonlySet<string>} [knownIdents] - Idents a DECLARE in scope has introduced
+ * @returns {ToggleRole | null}
+ */
+export function roleOfElement(
+  attributes: Record<string, unknown> | undefined,
+  knownIdents?: ReadonlySet<string>,
+): ToggleRole | null {
+  if (!attributes) {
+    return null;
+  }
+  const rank = { assign: 1, compare: 2, declare: 0 };
+  let best: ToggleRole | null = null;
+  for (const value of Object.values(attributes)) {
+    if (typeof value !== "string") {
+      continue;
+    }
+    const role = classifyToggleValue(value, knownIdents);
+    if (role && (best === null || rank[role.kind] < rank[best.kind])) {
+      best = role;
+    }
+  }
+  return best;
+}