@godxjp/ui 27.12.1 → 28.1.0

package/scripts/ui-audit.mjs

@@ -158,6 +158,63 @@ const ATTRS = String.raw`(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|=>|[^>"'])*`;
  */
 const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
 
+/**
+ * Primitives whose `asChild` hands over THE VISUAL BOX, so the borrowed element cannot be a
+ * `<Button>` — wrapping it would paint a button where a card belongs.
+ *
+ * This set is deliberately tiny and deliberately NOT "anything with asChild". The first cut of
+ * this exemption was the broad version, and measuring it against a real consumer showed what that
+ * costs: of 39 `no-raw-button` findings across its three SPAs, it silenced 11 — and
+ * every single one was a BEHAVIOUR trigger, not a box:
+ *
+ *     DropdownMenuTrigger · SheetTrigger · CollapsibleTrigger · PopoverTrigger · TooltipTrigger
+ *
+ * A Radix trigger supplies behaviour and no styling, so `<DropdownMenuTrigger asChild><Button>`
+ * is not only legal, it is the better answer — the package's button, correctly styled, keyboard
+ * and screen-reader shaped. Exempting those threw away 11 legitimate nudges to fix 0 real
+ * findings. Adding a name here means asserting that primitive paints the box itself.
+ */
+const ASCHILD_BOX_PRIMITIVES = new Set(["Card"]);
+
+/**
+ * Is the raw tag at `index` the slot child of a primitive that hands over its BOX?
+ *
+ * `<Card asChild hoverable><button onClick={…}>` is not a violation — it is the shape this
+ * package PRESCRIBES. `Card.asChild`'s own docblock says so in as many words:
+ *
+ *     "a card rendered as an `<a>` or a `<button>` measures byte for byte like the `div` it
+ *      replaces and stays a SINGLE tab stop"
+ *
+ * and `hoverable`'s docblock sends the reader there: "the whole card rendered as one via
+ * {@link CardProps.asChild}".
+ *
+ * Reported as gh#740 and closed by shipping `Card asChild` — but the audit was never taught about
+ * it, so a consumer following the fix still got `no-raw-button: error` on the documented answer
+ * (godx-jp/shoots-gemba#8). A package that forbids its own prescription leaves the consumer no
+ * legal move at all, which is exactly what #740 was opened about.
+ *
+ * Walks BACKWARDS to the nearest preceding `>` and asks whether the tag it closes is one of
+ * ASCHILD_BOX_PRIMITIVES carrying `asChild`. That covers both spellings prettier produces —
+ * `<Card asChild><button` on one line, and the attribute wrapped onto its own line — while
+ * `</Card>` or `<div>` before the tag exempts nothing, because neither starts a component, and
+ * `<DropdownMenuTrigger asChild>` exempts nothing either, because a trigger paints no box.
+ */
+const isAsChildSlot = (content, index) => {
+  const before = content.slice(0, index).replace(/\s+$/, "");
+  if (!before.endsWith(">")) return false;
+  const openStart = before.lastIndexOf("<", before.length - 1);
+  if (openStart === -1) return false;
+  const openTag = before.slice(openStart);
+  // A component, not `</Card>` and not a lowercase host element…
+  const name = /^<([A-Z][\w.]*)\b/.exec(openTag)?.[1];
+  // …and one that hands over its BOX, not merely its behaviour. See ASCHILD_BOX_PRIMITIVES.
+  return name !== undefined && ASCHILD_BOX_PRIMITIVES.has(name) && /\basChild\b/.test(openTag);
+};
+
+/** `rawTag`, minus the matches that are an `asChild` primitive's borrowed element. */
+const rawTagOutsideAsChildSlot = (tag) => (content) =>
+  [...content.matchAll(rawTag(tag))].filter((match) => !isAsChildSlot(content, match.index));
+
 /**
  * @type {{id:string, severity:'error'|'warn', test:RegExp, message:string, standard?:string,
  *         exempt?:RegExp, classOnly?:boolean}[]}
@@ -409,6 +466,12 @@ const RULES = [
     severity: "error",
     spansElement: true,
     test: new RegExp(`<input\\b(?!${ATTRS}\\btype=["']hidden["'])${ATTRS}>`, "g"),
+    matches: (content) =>
+      [
+        ...content.matchAll(
+          new RegExp(`<input\\b(?!${ATTRS}\\btype=["']hidden["'])${ATTRS}>`, "g"),
+        ),
+      ].filter((match) => !isAsChildSlot(content, match.index)),
     message: "Use <Input> from @godxjp/ui, not a raw <input> (rules §3).",
   },
   {
@@ -418,6 +481,7 @@ const RULES = [
     severity: "error",
     spansElement: true,
     test: rawTag("button"),
+    matches: rawTagOutsideAsChildSlot("button"),
     message: "Use <Button> from @godxjp/ui, not a raw <button> (rules §3).",
   },
   {
@@ -601,10 +665,19 @@ const RULES = [
     /*
      * A lucide element rendered where NOTHING will size it.
      *
-     * A lucide component ships `width="24" height="24"`, and exactly four rules in this library
-     * override that: `.ui-button svg`, `.ui-dropdown-menu-item > svg`, `.ui-topbar-item svg` and
-     * `[data-slot="list-row-leading"] > svg`. Outside them — in a `Text`, a table cell, an `<a>`,
-     * a `Flex` — the glyph draws at 24px beside 14px type. It is the one defect class that is
+     * A lucide component ships `width="24" height="24"`, and this library overrides that in
+     * **31** selectors (counted 2026-09-19 across `src/styles/*.css`; this comment used to say
+     * "exactly four" and name them, which had drifted far enough to cause gh#755). Most are
+     * component-internal — a consumer cannot put a glyph inside `.ui-rating-star` — so the number
+     * is not the exemption list and never was.
+     *
+     * What a consumer CAN reach is a SLOT, and that is what `iconSizingRanges` keys on: the slot's
+     * NAME at the call site, not the selector that ends up sizing it. That is why the list there
+     * is prop names rather than CSS, and why it must cover both spellings a slot takes —
+     * `icon={<Users />}` and `icon: <Users />` inside an items array (gh#755).
+     *
+     * Outside a slot — in a `Text`, a table cell, an `<a>`, a `Flex` — the glyph draws at 24px
+     * beside 14px type. It is the one defect class that is
      * INVISIBLE in review: the JSX is correct, the import is correct, and only the screen is
      * wrong. A consumer swept one app and found 38 (gh#712).
      *
@@ -1051,9 +1124,52 @@ function iconSizingRanges(source) {
     const close = matchBracket(source, open);
     ranges.push([open, close < 0 ? source.length : close + 1]);
   }
+  /*
+   * The SAME slots, written as an object property instead of a JSX prop (gh#755).
+   *
+   *     <Tabs items={saved.map((s) => ({ icon: s.shared ? <Users /> : undefined }))} />
+   *
+   * `Tabs` wraps `items[].icon` in `<span class="ui-tabs-trigger-icon">`, and
+   * `navigation-layout.css` sizes `.ui-tabs-trigger-icon svg` — so the glyph IS measured, by the
+   * same component that owns the slot. But the prop form above requires `=`, so `icon:` matched
+   * nothing and the call site was told to size a box the design system owns — the opposite of
+   * what CONSUMER-RULES asks for.
+   *
+   * A property value is not bracketed like `={...}`, so the range runs to the `,` or `}` that
+   * closes it at depth zero. Strings and nested brackets are skipped so a comma inside
+   * `style={{a: 1, b: 2}}` or inside a string does not end it early.
+   */
+  for (const m of source.matchAll(
+    /\b(?:icon|leading|trailing|mark|indicator|avatar|prefix|suffix|addonBefore|addonAfter)\s*:/g,
+  )) {
+    const from = m.index + m[0].length;
+    ranges.push([from, objectPropertyValueEnd(source, from)]);
+  }
   return ranges;
 }
 
+/** Where an object property's value ends: the `,` or `}` closing it at depth zero. */
+function objectPropertyValueEnd(source, from) {
+  let depth = 0;
+  for (let i = from; i < source.length; i += 1) {
+    const c = source[i];
+    if (c === '"' || c === "'" || c === "`") {
+      // Skip to the closing quote of the same kind, honouring backslash escapes.
+      const quote = c;
+      i += 1;
+      while (i < source.length && source[i] !== quote) i += source[i] === "\\" ? 2 : 1;
+      continue;
+    }
+    if (c === "(" || c === "[" || c === "{") depth += 1;
+    else if (c === ")" || c === "]") depth -= 1;
+    else if (c === "}") {
+      if (depth === 0) return i;
+      depth -= 1;
+    } else if (c === "," && depth === 0) return i;
+  }
+  return source.length;
+}
+
 /** A lucide element that no rule, no slot and no author-supplied size will ever measure. */
 function* lucideGlyphMatches(source) {
   const names = lucideLocalNames(source);