stitch2 0.11.0 → 0.12.1

package/README.md

@@ -214,7 +214,9 @@ shows every locale and the screens use the same strings as the product:
 Messages are JSON or a JS/TS module (its default export, else its first exported object); nested objects become
 dotted keys, and plurals are objects keyed by CLDR category (`one`, `few`, `other`…). A value with braces is a
 template: each `{key|name=value;…}` becomes its message and the rest is kept, and `{@date|…}` and `{@number|…}`
-format with `Intl` in the screen's language. Two pseudo-languages need
+format with `Intl` in the screen's language. Styled parts inside a sentence (a name in bold) are slots:
+`<p data-t="library.showing">At <b data-t-slot="profile">Home gym</b></p>` keeps the `<b>` where the translation puts
+`{profile}`. Two pseudo-languages need
 no translations: **pseudo** makes every text about 40% longer, accented and bracketed, so cut text shows, and
 **pseudo-rtl** lays the page out right to left.
 

package/dist/audit.js

@@ -80,6 +80,15 @@ export async function audit(opts) {
     for (const el of all) {
         if (!isLabel(el) || text(el).length > 40 || el.querySelector('p, div, li, ul, br'))
             continue;
+        // A control whose text sits in two or more elements (a list row's title and its meta line) is a composite
+        // control, not a label: its lines are laid out on purpose.
+        const holders = new Set();
+        const textWalker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+        for (let n = textWalker.nextNode(); n; n = textWalker.nextNode())
+            if (n.textContent.trim() && n.parentElement)
+                holders.add(n.parentElement);
+        if (holders.size > 1)
+            continue;
         // A wrap is one text node breaking across lines; an icon above its label is layout, not a wrap.
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
         for (let n = walker.nextNode(); n; n = walker.nextNode()) {

package/dist/i18n-report.js

@@ -21,7 +21,10 @@ const locales = opt('--locale')?.split(',') ?? realLocales();
 const suggest = args.includes('--suggest');
 /** Attributes that hold text people read. On components (a dash in the tag) any attribute that reads as words. */
 const TEXT_ATTRS = new Set(['title', 'label', 'placeholder', 'aria-label', 'alt']);
-const NOT_TEXT = /^(class|id|style|href|src|srcset|type|name|value|for|role|slot|lang|dir|icon|variant|tone|size|width|height|viewbox|d|fill|stroke|xmlns|rel|target|tabindex|loading|translate)$/;
+const NOT_TEXT = /^(class|id|style|href|src|srcset|for|role|slot|lang|dir|icon|variant|tone|size|width|height|viewbox|d|fill|stroke|xmlns|rel|target|tabindex|loading|translate)$/;
+// On native elements these are identifiers and form values; on components (<x-row name="API keys">) they are
+// usually what the component shows, so there they count as text when they read as words.
+const NATIVE_ONLY = /^(type|name|value)$/;
 const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
 const words = (s) => /\p{L}{2,}/u.test(s);
 const readsAsText = (s) => words(s) && (/\s/.test(s.trim()) || /\p{Lu}/u.test(s) || /[^\x00-\x7f]/.test(s));
@@ -67,10 +70,14 @@ export function scan(html) {
                     uses.push({ key: m[1], line, plural: plural || /(^|;)\s*count\s*=/.test(m[2] ?? '') });
             else if (name === 'data-t')
                 uses.push({ key: value, line, plural });
-            else if (keyed)
+            else if (keyed && name !== 'data-t-slot')
                 for (const k of value.split(','))
                     uses.push({ key: k.trim(), line, plural });
-            else if (!skip && !name.startsWith('data-') && !NOT_TEXT.test(name) && !('data-t-' + name in a)) {
+            else if (!skip &&
+                !name.startsWith('data-') &&
+                !NOT_TEXT.test(name) &&
+                !(NATIVE_ONLY.test(name) && !tag.includes('-')) &&
+                !('data-t-' + name in a)) {
                 const textual = TEXT_ATTRS.has(name) ? words(value) : tag.includes('-') && readsAsText(value);
                 if (textual)
                     loose.push({ text: value, line, attr: name });

package/dist/i18n.js

@@ -17,6 +17,8 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
  *                                                                a template: messages in braces, the rest kept
  *   <x-row meta="Sun, 4 Oct" data-t-meta="{@date|value=2026-10-04;weekday=short;day=numeric;month=short}">
  *                                                                dates and numbers ({@number|value=7920}) by Intl
+ *   <p data-t="lib.showing">At <b data-t-slot="place">Home gym</b></p>
+ *                                                                rich text: the slot keeps its markup, at {place}
  *
  * Opened with ?lang=<locale> (the canvas's Language switch, and check), the page's text is replaced from that
  * locale's messages before its components render, and the page gets lang and dir. Two pseudo-languages need no
@@ -163,7 +165,7 @@ function runtime(p) {
             for (const a of Array.from(el.attributes)) {
                 if (a.name !== 'data-t' && !a.name.startsWith('data-t-'))
                     continue;
-                if (a.name === 'data-t-args' || a.name === 'data-t-skip')
+                if (a.name === 'data-t-args' || a.name === 'data-t-skip' || a.name === 'data-t-slot')
                     continue;
                 const args = parseArgs(el.getAttribute('data-t-args'));
                 let v;
@@ -194,8 +196,22 @@ function runtime(p) {
                 }
                 if (v === undefined)
                     continue;
-                if (a.name === 'data-t')
-                    el.textContent = v;
+                if (a.name === 'data-t') {
+                    // Rich text: children marked data-t-slot="name" keep their markup and take the place of {name}.
+                    const slots = new Map();
+                    for (const s of Array.from(el.querySelectorAll('[data-t-slot]'))) {
+                        const outer = s.parentElement?.closest('[data-t-slot]');
+                        if (!outer || !el.contains(outer))
+                            slots.set(s.getAttribute('data-t-slot') ?? '', s);
+                    }
+                    if (!slots.size)
+                        el.textContent = v;
+                    else {
+                        el.textContent = '';
+                        for (const part of v.split(/(\{\w+\})/))
+                            el.append(slots.get(part.slice(1, -1)) ?? document.createTextNode(part));
+                    }
+                }
                 else
                     el.setAttribute(a.name.slice(7), v);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",

package/skills/stitch2-i18n/SKILL.md

@@ -53,6 +53,16 @@ Dates and numbers are written by the locale too: `{@date|value=2026-10-04;weekda
 `Intl.NumberFormat`'s, and dates are read and shown in UTC. Pair a number with the unit's message:
 `{@number|value=82.5} {unit.kg}`.
 
+A sentence with styled parts inside (a name in bold, a highlighted number) keeps them as **slots**: mark each part
+`data-t-slot="<placeholder>"` and key the sentence. The translation decides where each part goes:
+
+```html
+<p data-t="library.showing" data-t-args="count=312">Showing what you can do at
+  <b data-t-slot="profile" translate="no">Home gym</b>: 312 exercises.</p>
+```
+
+Never split such a sentence into separately keyed pieces: word order differs between languages.
+
 - Keep the source text in the markup: the screen reads correctly without stitch2, and a missing key shows it.
 - Key every string the product owns: labels, buttons, headings, empty states, hints, units, tab names, the
   placeholder and aria-label too. Sample data (an exercise name, a user's note, a number) gets `translate="no"`.