stitch2 0.22.9 → 0.22.11

package/dist/canvas.html

@@ -385,6 +385,15 @@ const rows = () => {
 
 // Screens flow left to right and wrap, like a design canvas; each screen's versions stay together.
 function layout() {
+  // Late page/thumbnail heights move later rows. Keep the frame being reviewed
+  // at its current screen position, not at a fresh zoomTo position. A frame the
+  // user has panned away from, or an active drag, must not pull the camera back.
+  const anchor = (() => {
+    if (!selected || selected.el.style.display === 'none' || viewport.classList.contains('panning')) return null
+    const a = selected.el.getBoundingClientRect(), b = viewport.getBoundingClientRect()
+    if (a.right <= b.left || a.left >= b.right || a.bottom <= b.top || a.top >= b.bottom) return null
+    return { frame: selected, x: parseFloat(selected.el.style.left), y: parseFloat(selected.el.style.top) }
+  })()
   for (const n of world.querySelectorAll('.row-label')) n.remove()
   let x = 0, y = 0, lineH = 0, page = ''
   const all = rows()
@@ -435,6 +444,11 @@ function layout() {
   }
   tree()
   sendFilter()
+  if (anchor && selected === anchor.frame && selected.el.style.display !== 'none') {
+    const dx = (anchor.x - parseFloat(selected.el.style.left)) * view.z
+    const dy = (anchor.y - parseFloat(selected.el.style.top)) * view.z
+    if (dx || dy) { view.x += dx; view.y += dy; apply(); return }
+  }
   scheduleSync()
 }
 

package/dist/elements.js

@@ -37,14 +37,22 @@ export const screenLocale = () => globalThis.__stitch2?.lang;
  */
 let idCount = 0;
 const ID_REFS = ['for', 'aria-labelledby', 'aria-describedby', 'aria-controls', 'aria-owns', 'aria-activedescendant', 'list'];
-function uniqueIds(content) {
+function uniqueIds(content, replacing) {
+    // The element's children are about to be replaced, not duplicated. Their IDs may also be
+    // referenced from outside the component (labels, descriptions and navigation anchors).
+    const occupied = new Set(Array.from(document.querySelectorAll('[id]'))
+        .filter((el) => !replacing.contains(el)).map((el) => el.id));
     const renamed = new Map();
     for (const el of Array.from(content.querySelectorAll('[id]'))) {
-        if (!document.getElementById(el.id))
+        if (!occupied.has(el.id))
             continue;
-        const next = el.id + '-s2-' + ++idCount;
+        let next;
+        do
+            next = el.id + '-s2-' + ++idCount;
+        while (occupied.has(next) || content.getElementById(next));
         renamed.set(el.id, next);
         el.id = next;
+        occupied.add(next);
     }
     if (!renamed.size)
         return;
@@ -95,7 +103,7 @@ export function defineElements(components, options) {
                         if (typeof props[key] === 'string' && !root.hasAttribute(`data-${key}`))
                             root.setAttribute(`data-${key}`, props[key]);
                 }
-                uniqueIds(t.content);
+                uniqueIds(t.content, this);
                 this.replaceWith(t.content);
                 if (options.after && !pending++)
                     queueMicrotask(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.22.9",
+  "version": "0.22.11",
   "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/SKILL.md

@@ -90,6 +90,9 @@ References, read before the first screen:
    States sheet (components.md, States).
 6. **Look and critique.** View the render in `<design>/renders/` (crop the first screenful). Score it with the
    rubric in principles.md, fix what fails, repeat 5–6 at most three times.
+   On the canvas, select a later row and zoom out and back while earlier pages/thumbnails load. The selected
+   visible frame keeps its screen position when row heights settle; this does not recenter a frame you pan
+   away from or interrupt a drag. Check the live canvas as well as the saved render before hand-over.
 7. **Hand over.** Set the version's status to `review`, point the user to it on the canvas, and report what
    changed, how you answered their notes, and any rubric item you could not satisfy. The page's empty and loading
    screens go to review with it; for a page without them (a form, a static page), say why. The user approves; only then

package/skills/stitch2/references/components.md

@@ -61,6 +61,10 @@ never patch the bundle or restyle the element on a screen. Props are the element
 an empty attribute is true) and its content is children. A component the screens need but the app lacks is
 added to the app first, with the same name.
 
+Keep native field IDs and their external label, ARIA and fragment references stable when nesting components.
+`stitch2/elements` preserves IDs from the element being replaced; only real collisions outside that element
+are renamed, together with references inside the component. Test both cases when changing a shared form.
+
 ## Colours come from DESIGN.md
 
 Every colour on a screen and in a component is one of DESIGN.md's: a token class (`bg-surface`,