stitch2 0.10.0 → 0.12.0

package/README.md

@@ -197,6 +197,9 @@ shows every locale and the screens use the same strings as the product:
 <ex-header title="Settings" data-t-title="settings.title"></ex-header>
 <p data-t="workout.sets" data-t-args="count=16">16 sets</p>   <!-- plural form picked by count -->
 <p translate="no">Dumbbell Bench Press</p>                   <!-- sample content stays as written -->
+<ex-row meta="5 exercises · Linear" data-t-meta="{plan.exercises|count=5} · {plan.linear}"></ex-row>  <!-- a template -->
+<ex-row meta="Sun, 4 Oct · 7,920 kg"
+  data-t-meta="{@date|value=2026-10-04;weekday=short;day=numeric;month=short} · {@number|value=7920} {unit.kg}"></ex-row>
 ```
 
 ```json
@@ -209,7 +212,11 @@ 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`…). Two pseudo-languages need
+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. 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/elements.js

@@ -42,7 +42,8 @@ export function defineElements(components, options) {
             connectedCallback() {
                 const props = {};
                 for (const a of Array.from(this.attributes)) {
-                    if (a.name.startsWith('data-s2-'))
+                    // stitch2's own markers and the message keys (i18n.ts translated them already) are not props.
+                    if (a.name.startsWith('data-s2-') || a.name === 'data-t' || a.name.startsWith('data-t-'))
                         continue;
                     props[camel(a.name)] = a.value === '' ? true : a.value;
                 }

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));
@@ -61,12 +64,20 @@ export function scan(html) {
         const plural = 'data-t-args' in a && /(^|,)\s*count\s*=/.test(a['data-t-args']);
         const skip = !!top?.skip || 'data-t-skip' in a || a.translate === 'no';
         for (const [name, value] of Object.entries(a)) {
-            if (name === 'data-t')
+            const keyed = name === 'data-t' || (name.startsWith('data-t-') && name !== 'data-t-args' && name !== 'data-t-skip');
+            if (keyed && value.includes('{'))
+                for (const m of value.matchAll(/\{([^{}|@][^{}|]*)(?:\|([^}]*))?\}/g))
+                    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 (name.startsWith('data-t-') && name !== 'data-t-args' && name !== 'data-t-skip')
+            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

@@ -13,6 +13,12 @@ var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExte
  *   <span data-t="nav.library">Exercises</span>                 the element's text
  *   <gg-header title="Settings" data-t-title="settings.title">  an attribute (also comma lists: data-t-options)
  *   <p data-t="count.sets" data-t-args="count=16">16 sets</p>   {count} filled in, plural form picked by count
+ *   <x-row meta="5 exercises · Linear" data-t-meta="{plan.count|count=5} · {plan.linear}">
+ *                                                                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
@@ -105,7 +111,25 @@ export async function pagePayload(locale) {
 function runtime(p) {
     const missing = new Set(p.missing);
     const plural = new Intl.PluralRules(p.lang);
+    // {@date|value=…;weekday=short…} and {@number|value=…;maximumFractionDigits=1…}: Intl's options, in the locale.
+    const intl = (key, args) => {
+        const opts = {};
+        for (const [k, v] of Object.entries(args))
+            if (k !== 'value')
+                opts[k] = v === 'true' ? true : v === 'false' ? false : /^\d+$/.test(v) ? Number(v) : v;
+        try {
+            return key === '@date'
+                ? // As written, whatever the viewer's time zone: the value is read and shown in UTC.
+                    new Intl.DateTimeFormat(p.lang, { timeZone: 'UTC', ...opts }).format(new Date(/T.*(Z|[+-]\d\d:?\d\d)$/.test(args.value ?? '') || !/T/.test(args.value ?? '') ? (args.value ?? '') : args.value + 'Z'))
+                : new Intl.NumberFormat(p.lang, opts).format(Number(args.value));
+        }
+        catch {
+            return undefined;
+        }
+    };
     const t = (key, args) => {
+        if (key === '@date' || key === '@number')
+            return intl(key, args ?? {});
         let msg;
         if (args && args.count !== undefined) {
             const n = Number(args.count);
@@ -116,11 +140,11 @@ function runtime(p) {
             return undefined;
         return msg.replace(/\{(\w+)\}/g, (m, k) => (args && args[k] !== undefined ? args[k] : m));
     };
-    const known = (key) => key in p.messages || key + '.other' in p.messages;
+    const known = (key) => key.startsWith('@') || key in p.messages || key + '.other' in p.messages;
     const lacks = (key) => missing.has(key) || missing.has(key + '.other') || !known(key);
-    const parseArgs = (s) => {
+    const parseArgs = (s, sep = ',') => {
         const out = {};
-        for (const part of (s ?? '').split(',')) {
+        for (const part of (s ?? '').split(sep)) {
             const i = part.indexOf('=');
             if (i > 0)
                 out[part.slice(0, i).trim()] = part.slice(i + 1).trim();
@@ -141,21 +165,55 @@ 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' || a.name === 'data-t-slot')
+                    continue;
                 const args = parseArgs(el.getAttribute('data-t-args'));
-                if (a.name === 'data-t') {
-                    const v = t(a.value, args);
-                    if (v !== undefined)
-                        el.textContent = v;
+                let v;
+                if (a.value.includes('{')) {
+                    // A template: each {key} or {key|name=value;name=value} becomes its message, the rest stays as written.
+                    let whole = true;
+                    v = a.value.replace(/\{([^{}|]+)(?:\|([^}]*))?\}/g, (_m, key, inline) => {
+                        keys.push(key);
+                        const r = t(key, { ...args, ...parseArgs(inline, ';') });
+                        if (r === undefined)
+                            whole = false;
+                        return r ?? '';
+                    });
+                    if (!whole)
+                        v = undefined;
+                }
+                else if (a.name === 'data-t') {
+                    v = t(a.value, args);
                     keys.push(a.value);
                 }
-                else if (a.name !== 'data-t-args' && a.name !== 'data-t-skip') {
-                    const attr = a.name.slice(7);
+                else {
+                    // A list attribute (options="A,B"): one key per item.
                     const parts = a.value.split(',').map((k) => k.trim());
                     const vals = parts.map((k) => t(k, args));
-                    if (vals.every((v) => v !== undefined))
-                        el.setAttribute(attr, vals.join(','));
+                    if (vals.every((x) => x !== undefined))
+                        v = vals.join(',');
                     keys.push(...parts);
                 }
+                if (v === undefined)
+                    continue;
+                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);
             }
             if (!keys.length)
                 continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "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

@@ -40,8 +40,29 @@ Use the app's own files. Never copy messages into the design folder: two copies
 <input placeholder="Search" data-t-placeholder="exercises.search" />
 <p data-t="workout.sets" data-t-args="count=16">16 sets</p>     <!-- {count} filled in, plural form by count -->
 <p translate="no">Dumbbell Bench Press</p>                      <!-- sample content: names, user input, numbers -->
+<s2-row meta="5 exercises · Linear" data-t-meta="{plan.exercises|count=5} · {plan.linear}">
 ```
 
+A value with braces is a **template**: each `{key}` or `{key|name=value;name=value}` becomes its message and
+the rest stays as written. Use it for lines the app builds from several messages and data (a meta line, a
+list of `label=url` links: `data-t-links="{site.features}=#features,{site.docs}=/docs"`); sample data inside
+it stays literal. Without braces, `data-t-<attr>` on a comma list takes one key per item.
+
+Dates and numbers are written by the locale too: `{@date|value=2026-10-04;weekday=short;day=numeric;month=short}`
+("Sun, 4 Oct", "вс, 4 окт.") and `{@number|value=7920}` ("7,920", "7 920"); the options are `Intl.DateTimeFormat`'s and
+`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"`.