@tendrilapp/cli 0.1.7 → 0.1.9

package/dist/tendril.js

@@ -1839,6 +1839,7 @@ var init_browser = __esm({
 
 // packages/verify/src/runtime.ts
 import { existsSync as existsSync4, mkdtempSync, symlinkSync } from "node:fs";
+import { createRequire } from "node:module";
 import os from "node:os";
 import path4 from "node:path";
 import { fileURLToPath } from "node:url";
@@ -1870,6 +1871,21 @@ function newScratchDir(prefix) {
   }
   return dir;
 }
+function reactPinPlugin() {
+  const req = createRequire(path4.join(runtimePackageRoot(), "package.json"));
+  return {
+    name: "tendril-react-pin",
+    setup(b) {
+      b.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
+        try {
+          return { path: req.resolve(args.path) };
+        } catch {
+          return null;
+        }
+      });
+    }
+  };
+}
 var init_runtime = __esm({
   "packages/verify/src/runtime.ts"() {
     "use strict";
@@ -3578,6 +3594,7 @@ if (root && C) createRoot(root).render(createElement(C, cfg.props));
     const bundle = await build3({
       stdin: { contents: mountSrc, resolveDir: runtimePackageRoot(), loader: "tsx" },
       nodePaths: [runtimeNodeModules()],
+      plugins: [reactPinPlugin()],
       bundle: true,
       write: false,
       format: "iife",
@@ -4170,6 +4187,7 @@ if (root && C) createRoot(root).render(createElement(C, cfg.props));
     const bundle = await build4({
       stdin: { contents: mountSrc, resolveDir: runtimePackageRoot(), loader: "tsx" },
       nodePaths: [runtimeNodeModules()],
+      plugins: [reactPinPlugin()],
       bundle: true,
       write: false,
       format: "iife",
@@ -4351,7 +4369,7 @@ var init_prelude = __esm({
 - Component root: -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale (recorded rasterization); font-synthesis: none (a missing font weight must fall back visibly, never fake-bold); color-scheme MATCHING YOUR RECORDING (light for a light capture, dark for a dark one) and direction: ltr \u2014 pin them, so the render cannot follow the viewer OS preference and drift from the capture it is graded against; isolation: isolate (own stacking context; overlay z-indexes never fight the host).
 - Interactive controls (buttons, options): touch-action: manipulation and user-select: none. Text inputs stay selectable (never user-select: none on them).
 - Scrollable popovers/menus: overscroll-behavior: contain.
-- Focus indicators bind to :focus-visible, never bare :focus. If the recording contains a focus pose, style the indicator from that recorded truth. If NO focus pose is recorded, do NOT invent ring colors/widths/offsets \u2014 an invented ring is unrecorded pixels; keep the browser's default focus indicator (leave outline in place on :focus-visible) and state the gap in your report. Text inputs match :focus-visible even on mouse click BY SPEC \u2014 that is platform-correct accessibility, never a bug to suppress with JS modality tracking.
+- Focus indicators bind to :focus-visible, never bare :focus. If the recording contains a focus pose, style the indicator from that recorded truth. If NO focus pose is recorded, do NOT invent ring colors/widths/offsets \u2014 an invented ring is unrecorded pixels; keep the browser's default indicator for keyboard focus and state the gap in your report. Text inputs match :focus-visible even on mouse click BY SPEC; the ONE permitted refinement is suppressing the indicator on a POSITIVELY OBSERVED pointer press, fail-safe toward showing it (programmatic focus, restored focus, and assistive tech all count as keyboard and keep the ring \u2014 WCAG 2.4.7 binds keyboard operation). Never suppress more broadly than an observed press, and never restyle what you kept.
 - Every animation wrapped in @media (prefers-reduced-motion: no-preference) or disabled under reduce.`;
   }
 });
@@ -4466,7 +4484,7 @@ var init_parity = __esm({
 });
 
 // packages/verify/src/composition.ts
-import { createRequire } from "node:module";
+import { createRequire as createRequire2 } from "node:module";
 import { existsSync as existsSync12, readFileSync as readFileSync10 } from "node:fs";
 import path17 from "node:path";
 import { build as build6 } from "esbuild";
@@ -4478,7 +4496,7 @@ function getFontFaces4() {
 async function compileInstrumentedMount(task, bundleDir) {
   const entryTsx = path17.join(bundleDir, task.entry);
   if (!existsSync12(entryTsx)) return { error: `${task.entry} missing` };
-  const requireFromVerify = createRequire(path17.join(VERIFY_PKG_DIR, "package.json"));
+  const requireFromVerify = createRequire2(path17.join(VERIFY_PKG_DIR, "package.json"));
   let realJsxPath;
   try {
     realJsxPath = requireFromVerify.resolve("react/jsx-runtime");
@@ -4519,7 +4537,10 @@ if (root && Main) createRoot(root).render(createElement(Main, cfg.props));
             b.onResolve({ filter: new RegExp(`^${REAL_JSX_SPEC}$`) }, () => ({ path: realJsxPath }));
             b.onLoad({ filter: /.*/, namespace: "tendril-shim" }, () => ({ contents: JSX_SHIM, resolveDir: runtimePackageRoot(), loader: "js" }));
           }
-        }
+        },
+        // AFTER the stamp shim: the shim must own react/jsx-runtime
+        // interception; the pin covers every remaining react import.
+        reactPinPlugin()
       ]
     });
     return bundle.outputFiles[0]?.text ?? "";
@@ -4775,6 +4796,7 @@ for (const id of ["first", "second"]) {
     const bundle = await build7({
       stdin: { contents: src, resolveDir: runtimePackageRoot(), loader: "tsx" },
       nodePaths: [runtimeNodeModules()],
+      plugins: [reactPinPlugin()],
       bundle: true,
       write: false,
       format: "iife",
@@ -7229,6 +7251,14 @@ function authorComponentApi(opts) {
       props.push({ name: propNameFor(key), kind: "union", values: ordered.map(kebab3), default: kebab3(def) });
     }
   }
+  const slots = (opts.textSlots ?? []).map((slot) => {
+    let name = slot.prop;
+    if (name !== "children" && (props.some((pr) => pr.name === name) || RESERVED_PROPS.has(name.toLowerCase()))) name = `${name}Text`;
+    let n = 2;
+    while (props.some((pr) => pr.name === name)) name = `${slot.prop}Text${n++}`;
+    return { ...slot, prop: name };
+  });
+  for (const slot of slots) props.push({ name: slot.prop, kind: "string", default: slot.default });
   const configs = [];
   const seenAssignments = /* @__PURE__ */ new Map();
   const componentIdent = pascal(opts.component);
@@ -7250,6 +7280,10 @@ function authorComponentApi(opts) {
       }
     }
     if (tokens.length > 0) assignment["data-tendril-state"] = tokens.join(" ");
+    for (const slot of slots) {
+      const v = slot.overrides[p.slug];
+      if (v !== void 0) assignment[slot.prop] = v;
+    }
     const canonical = JSON.stringify(Object.fromEntries(Object.entries(assignment).sort(([a], [b]) => a.localeCompare(b))));
     const clash = seenAssignments.get(canonical);
     if (clash !== void 0) {
@@ -7268,7 +7302,7 @@ function authorComponentApi(opts) {
     name: componentIdent,
     props: props.map((pr) => ({
       name: pr.name,
-      type: pr.kind === "boolean" ? "boolean" : pr.values.map((v) => `"${v}"`).join(" | "),
+      type: pr.kind === "boolean" ? "boolean" : pr.kind === "string" ? "string" : pr.values.map((v) => `"${v}"`).join(" | "),
       required: false,
       ...pr.default !== void 0 ? { default: pr.default } : {}
     })),
@@ -7276,7 +7310,7 @@ function authorComponentApi(opts) {
     poseCompleteness: { recordedPoses: opts.poses.length, expressible: configs.length }
   };
   const propLines = props.map(
-    (pr) => pr.kind === "boolean" ? `  ${pr.name}?: boolean;` : `  ${pr.name}?: ${pr.values.map((v) => `"${v}"`).join(" | ")}; // default "${pr.default}"`
+    (pr) => pr.kind === "boolean" ? `  ${pr.name}?: boolean;` : pr.kind === "string" ? `  ${pr.name}?: string; // CONTENT \u2014 recorded default ${JSON.stringify(pr.default)}` : `  ${pr.name}?: ${pr.values.map((v) => `"${v}"`).join(" | ")}; // default "${pr.default}"`
   );
   const provided = opts.fonts ?? [];
   const recorded = opts.recordedFonts ?? [];
@@ -7289,7 +7323,8 @@ ${propLines.join("\n")}
   [key: string]: unknown; // MUST spread unknown props (incl. data-*) onto the root element
 })
 
-Rules: plain CSS in styles.css (tokens.css optional, loaded first) \u2014 no Tailwind, no imports beyond react/react-dom, and NEVER import the stylesheet from the entry module: the harness injects tokens.css and styles.css itself, and an entry that imports CSS does not compile here (measured cost: one full round, every config 0). The component renders the RECORDED content as its defaults \u2014 reproduce it from the emissions. ${forcingCanon}${fontsLine}The host sizes nothing: the component is its natural recorded size.`;
+${slots.length > 0 ? `CONTENT PROPS: every string prop defaults to its RECORDED text \u2014 render the PROP, never a hardcoded literal. Configs pass per-pose recorded strings wherever the recording varies, and pixels enforce them: a hardcoded string fails those configs. Content presence (a heading that only exists in some poses) follows the AXIS props; the string prop only supplies the text.
+` : ""}Rules: plain CSS in styles.css (tokens.css optional, loaded first) \u2014 no Tailwind, no imports beyond react/react-dom, and NEVER import the stylesheet from the entry module: the harness injects tokens.css and styles.css itself, and an entry that imports CSS does not compile here (measured cost: one full round, every config 0). The component renders the RECORDED content as its defaults \u2014 reproduce it from the emissions. ${forcingCanon}${fontsLine}The host sizes nothing: the component is its natural recorded size.`;
   const mappedTokens = /* @__PURE__ */ new Set([...forcedStates, ...props.filter((p) => p.kind === "boolean").map((p) => p.name)]);
   const unmappedInteractionEvidence = interactionEvidence.filter((e) => {
     const sel = e.endsWith(" (selection axis)");
@@ -7399,6 +7434,67 @@ function recordedFontNeeds(setDir) {
 function recordedFontFamilies(setDir) {
   return recordedFontNeeds(setDir).map((n) => n.family);
 }
+function recordedTextSlots(setDir, repSlugs) {
+  const perRep = [];
+  for (const slug of repSlugs) {
+    const f = path26.join(setDir, slug, "get_design_context.json");
+    if (!existsSync20(f)) continue;
+    const code = envelopeText(f);
+    const texts = [];
+    for (const m of code.matchAll(/>([^<>{}]+)</g)) {
+      const t = decodeXmlEntities(m[1]).trim();
+      if (t === "" || !/[A-Za-z0-9]/.test(t)) continue;
+      texts.push(t);
+    }
+    perRep.push({ slug, texts });
+  }
+  if (perRep.length === 0) return [];
+  const slots = [];
+  for (const rep of perRep) {
+    const used = /* @__PURE__ */ new Set();
+    const unmatched = [];
+    for (const t of rep.texts) {
+      const i = slots.findIndex((sl, idx) => !used.has(idx) && [...sl.values.values()].includes(t));
+      if (i >= 0) {
+        used.add(i);
+        slots[i].values.set(rep.slug, t);
+      } else {
+        unmatched.push(t);
+      }
+    }
+    for (const t of unmatched) {
+      const i = slots.findIndex((_, idx) => !used.has(idx) && !slots[idx].values.has(rep.slug));
+      if (i >= 0) {
+        used.add(i);
+        slots[i].values.set(rep.slug, t);
+      } else {
+        const sl = { values: /* @__PURE__ */ new Map() };
+        sl.values.set(rep.slug, t);
+        slots.push(sl);
+        used.add(slots.length - 1);
+      }
+    }
+  }
+  const usedNames = /* @__PURE__ */ new Set();
+  return slots.map((sl, idx) => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const v of sl.values.values()) counts.set(v, (counts.get(v) ?? 0) + 1);
+    const def = [...counts.entries()].sort((a, b) => b[1] - a[1])[0][0];
+    let prop;
+    if (slots.length === 1) {
+      prop = "children";
+    } else {
+      const word = /[A-Za-z][A-Za-z0-9]*/.exec(def)?.[0]?.toLowerCase();
+      prop = word !== void 0 && word.length >= 2 ? word : `text${idx + 1}`;
+      let n = 2;
+      while (usedNames.has(prop)) prop = `${prop}${n++}`;
+    }
+    usedNames.add(prop);
+    const overrides = {};
+    for (const [slug, v] of sl.values) if (v !== def) overrides[slug] = v;
+    return { prop, default: def, overrides, varies: Object.keys(overrides).length > 0 };
+  });
+}
 function authorTaskFromSet(setDir, opts = {}) {
   if (opts.fonts === void 0) {
     const resolved = resolvedFontFamilies().map((f) => f.family);
@@ -7427,15 +7523,24 @@ function authorTaskFromSet(setDir, opts = {}) {
   const latticeNames = manifest.latticeNames ?? (existsSync20(setMeta) ? [...envelopeText(setMeta).matchAll(/name="([^"]*)"/g)].map((m) => decodeXmlEntities(m[1])) : void 0);
   const defaults = { ...manifest.defaults ?? {}, ...opts.defaults ?? {} };
   const recordedFonts = recordedFontFamilies(setDir);
+  const textSlots = recordedTextSlots(setDir, manifest.reps.map((r) => r.slug));
   const api = authorComponentApi({
     component: manifest.component,
     poses,
     ...latticeNames !== void 0 ? { latticeNames } : {},
     ...opts.fonts !== void 0 ? { fonts: opts.fonts } : {},
     ...recordedFonts.length > 0 ? { recordedFonts } : {},
-    ...Object.keys(defaults).length > 0 ? { defaults } : {}
+    ...Object.keys(defaults).length > 0 ? { defaults } : {},
+    ...textSlots.length > 0 ? { textSlots } : {}
   });
   const { behaviors, prelude, disclosures } = authorBehaviors(api);
+  for (const slot of textSlots) {
+    if (!slot.varies) {
+      disclosures.push(
+        `content prop from recorded text is UNEXERCISED: the recording shows one constant string (${JSON.stringify(slot.default)}) for it, so no config pixel-verifies that the prop reaches the render \u2014 wire it anyway; a sentinel check is future work`
+      );
+    }
+  }
   if (manifest.notRecorded !== void 0) disclosures.push(`not recorded (from the completeness manifest): ${manifest.notRecorded}`);
   const task = {
     set: setDir,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tendrilapp/cli",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Figma design systems → verified React components. CLI ruler + MCP server.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",