@wix/agent-skills 1.33.1 → 1.34.0

package/skills/wix-harmony-editor/scripts/copy/render-plate.mjs

@@ -0,0 +1,67 @@
+#!/usr/bin/env node
+// Render the source page's decorative layer ("plate") with all text and chosen images
+// hidden, then cut it into one PNG per Harmony band (header / sections / footer).
+//
+//   node scripts/copy/render-plate.mjs <url> <outDir> --cuts header:0:65,main:65:1195,footer:1195:1254
+//        [--width 1920] [--keep <img-src-substring>,…] [--prefix plate] [--scale 2]
+//
+// --cuts   name:yStart:yEnd in source page pixels (from measure-source.mjs). One PNG per cut:
+//          <outDir>/<prefix>-<name>.png, exactly (width x (yEnd-yStart)).
+// --width  render width. Use the canvas width + 640 (1920 for a 1280 canvas) when the
+//          source is a centred fixed-width layout, so full-bleed strips still cover a
+//          wide viewport. Prefer ONE full-page cut set as a 'fill' background of a single
+//          auto-height section (it then scales with the page); see COPY-SITE.md.
+// --keep   comma-separated substrings of <img src> that stay visible because they are
+//          decorative and get no component of their own (paper clips, ornaments, an
+//          image that would overlap a text box). Every other <img> is hidden, because it
+//          is rebuilt as a real Image component with its link and alt text.
+// --scale  device pixel ratio of the PNG (2 = sharp when the band scales up on wide screens;
+//          the file is then 2x the CSS size, which a 'fill' background handles).
+// The page is scrolled once first, so scroll-revealed backgrounds paint.
+// Text is made transparent (layout unchanged) and position:fixed elements (floating
+// buttons, chat widgets, cookie bars), including those in shadow DOM, are removed.
+import { chromium } from 'playwright';
+import fs from 'fs';
+
+const args = process.argv.slice(2);
+const opt = (name, dflt) => { const i = args.indexOf(`--${name}`); return i >= 0 ? args[i + 1] : dflt; };
+const [url, outDir] = args.filter((a, i) => !a.startsWith('--') && !(i > 0 && args[i - 1].startsWith('--')));
+const cuts = (opt('cuts', '') || '').split(',').filter(Boolean).map((c) => { const [name, a, b] = c.split(':'); return { name, y0: Number(a), y1: Number(b) }; });
+if (!url || !outDir || !cuts.length) { console.error('usage: render-plate.mjs <url> <outDir> --cuts name:y0:y1,... [--width 1920] [--keep a,b] [--prefix plate] [--scale 2]'); process.exit(2); }
+const width = Number(opt('width', 1920));
+const keep = (opt('keep', '') || '').split(',').filter(Boolean);
+const prefix = opt('prefix', 'plate');
+const scale = Number(opt('scale', 1));
+const maxY = Math.max(...cuts.map((c) => c.y1));
+
+fs.mkdirSync(outDir, { recursive: true });
+const browser = await chromium.launch();
+// A normal viewport height, then a scroll pass: a viewport as tall as the page changes vh-sized
+// blocks, and backgrounds that are revealed on scroll (footers, bands) would never paint.
+const page = await browser.newPage({ viewport: { width, height: 900 }, deviceScaleFactor: scale });
+await page.goto(url, { waitUntil: 'networkidle', timeout: 90000 });
+const fullH = await page.evaluate(() => document.documentElement.scrollHeight);
+for (let y = 0; y <= fullH; y += 500) { await page.evaluate((y) => scrollTo(0, y), y); await page.waitForTimeout(120); }
+await page.evaluate(() => scrollTo(0, 0));
+await page.waitForTimeout(1500);
+const keepCss = keep.map((k) => `img[src*="${k}"]`).join(', ');
+await page.addStyleTag({ content: `
+  body * { color: transparent !important; -webkit-text-fill-color: transparent !important; text-shadow: none !important; caret-color: transparent !important; }
+  img { visibility: hidden !important; }
+  ${keepCss ? `${keepCss} { visibility: visible !important; }` : ''}
+` });
+const removed = await page.evaluate(() => {
+  let n = 0;
+  const walk = (root) => { for (const e of root.querySelectorAll('*')) { if (getComputedStyle(e).position === 'fixed') { e.style.setProperty('display', 'none', 'important'); n++; } if (e.shadowRoot) walk(e.shadowRoot); } };
+  walk(document);
+  return n;
+});
+await page.waitForTimeout(600);
+const written = [];
+for (const c of cuts) {
+  const file = `${outDir}/${prefix}-${c.name}.png`;
+  await page.screenshot({ path: file, fullPage: true, clip: { x: 0, y: c.y0, width, height: c.y1 - c.y0 } });
+  written.push({ file, width: width * scale, height: (c.y1 - c.y0) * scale });
+}
+await browser.close();
+console.log(JSON.stringify({ removedFixed: removed, kept: keep, written }));

package/skills/wix-harmony-editor/scripts/copy/serve-mirror.mjs

@@ -0,0 +1,102 @@
+#!/usr/bin/env node
+// Serve a mirror made by mirror-site.mjs, offline.
+//
+//   node scripts/copy/serve-mirror.mjs <outDir> [--port 8732] [--volatile name,name]
+//
+// Use a port of your own per site: 8732 may already be served by another agent's mirror, and
+// a failed listen (EADDRINUSE) leaves that other server answering. GET /__mirror-site returns
+// the host this server mirrors.
+//
+// Dynamic pages: a head shim maps hosts that page scripts build at runtime, a request that
+// misses by exact URL falls back to path + stable query params (timestamps, visitor ids and the
+// JSONP callback are ignored, the callback is renamed in the answer), and a rewritten local URL
+// echoed back inside a query value is mapped back to the recorded one.
+//
+// The source site's own URLs map to the server root (https://site/?page_id=5 -> /?page_id=5);
+// every other host maps to /_/<host>/... . URLs inside HTML, CSS, JS, JSON and SVG are
+// rewritten to those local paths as they are served, so the browser never leaves the
+// server. Third-party iframes saved as snapshots (index.embeds) are replaced by an <img> of the
+// same size and style, marked data-embed-src (snapshots are the iframe's content box; iframes sit
+// on the baseline, where themes often set img { vertical-align: bottom }). Requests the mirror does not hold get a 404 and are logged to <outDir>/misses.log.
+import http from 'http';
+import fs from 'fs';
+
+const args = process.argv.slice(2);
+const opt = (n, d) => { const i = args.indexOf(`--${n}`); return i >= 0 ? args[i + 1] : d; };
+const outDir = args[0];
+const port = Number(opt('port', 8732));
+const index = JSON.parse(fs.readFileSync(`${outDir}/index.json`, 'utf8'));
+const site = index.site;
+const hosts = [...new Set(Object.keys(index.resources).map((u) => new URL(u).host))].sort((a, b) => b.length - a.length);
+const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+// https://host, http://host, //host, and the JSON-escaped https:\/\/host forms
+const hostRe = new RegExp(`(?:https?:)?(\\\\?/)\\1(${hosts.map(esc).join('|')})(?![\\w.-])`, 'g');
+const embeds = index.embeds || {};
+const unescape = (s) => s.replace(/&amp;/g, '&').replace(/&#038;/g, '&');
+const swapEmbeds = (html) => html.replace(/<iframe\b([^>]*)\bsrc="([^"]+)"([^>]*)>\s*<\/iframe>/gi, (all, a, src, b) => {
+  const e = embeds[unescape(src)];
+  if (!e) return all;
+  let attrs = `${a} ${b}`.replace(/\b(frameborder|scrolling|marginheight|marginwidth|allowfullscreen|allow|loading)(="[^"]*")?/gi, '');
+  const style = (attrs.match(/\bstyle="([^"]*)"/i) || [, ''])[1];
+  attrs = attrs.replace(/\bstyle="[^"]*"/i, '');
+  return `<img${attrs} src="/__embed/${e.body}" data-embed-src="${src}" alt="embedded content (snapshot)" style="${style};vertical-align:baseline">`;
+});
+const textual = (t) => /text\/|javascript|json|xml|svg/.test(t);
+
+// Volatile query params (timestamps, visitor ids, JSONP callback names) never repeat between
+// loads, so an exact URL match cannot hit on replay. Fall back to path + stable params.
+// Only names that are per-load by convention; generic ones (t, url, title, vid) can be real keys,
+// so a site that varies by one of them adds it with --volatile name,name.
+const VOLATILE = new RegExp('^(_|json|currentLocation|currentUrl|referrer|cb|cookieId|userId|emailId|callback|dwac|visitorId|rnd' + opt('volatile', '').split(',').filter(Boolean).map((n) => '|' + n.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('') + ')$', 'i');
+const normKey = (u) => { try { const x = new URL(u); const q = [...x.searchParams].filter(([k]) => !VOLATILE.test(k)).map(([k, v]) => k + '=' + v).sort().join('&'); return x.origin + x.pathname + '?' + q; } catch { return u; } };
+const fuzzy = new Map();
+for (const [u, r] of Object.entries(index.resources)) if (r.body && u.includes('?') && !fuzzy.has(normKey(u))) fuzzy.set(normKey(u), [u, r]);
+function lookup(original) {
+  for (let hop = 0; hop < 5; hop++) {
+    const r = index.resources[original] || index.resources[original.replace(/^https:/, 'http:')] || index.resources[original.replace(/^http:/, 'https:')];
+    if (!r) { const f = fuzzy.get(normKey(original)); return f ? { ...f[1], recordedUrl: f[0] } : null; }
+    if (r.location !== undefined && r.status >= 300) { original = new URL(r.location, original).href; continue; }
+    return r;
+  }
+  return null;
+}
+
+// Page scripts assemble URLs at runtime (script.src = host + path), which the static rewrite
+// below never sees. This shim, injected first in <head>, maps any mirrored host to /_/<host>/.
+const injectShim = (html, origin) => {
+  const shim = '<script>(function(){var O=location.origin,S=' + JSON.stringify(site) + ',H=' + JSON.stringify(hosts) + ';function m(u){try{var x=new URL(u,location.href);if(x.origin===O)return u;if(x.host===S)return O+x.pathname+x.search+x.hash;if(H.indexOf(x.host)>-1)return O+"/_/"+x.host+x.pathname+x.search+x.hash}catch(e){}return u}' +
+    'var d=Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"src");Object.defineProperty(HTMLScriptElement.prototype,"src",{get:d.get,set:function(v){d.set.call(this,m(v))},configurable:true});' +
+    'var sa=Element.prototype.setAttribute;Element.prototype.setAttribute=function(n,v){if(n==="src"&&/^(SCRIPT|IMG|IFRAME|LINK)$/.test(this.tagName))v=m(v);return sa.call(this,n,v)};' +
+    'var f=window.fetch;window.fetch=function(u,o){return f.call(this,typeof u==="string"?m(u):u,o)};var xo=XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open=function(a,u){arguments[1]=m(u);return xo.apply(this,arguments)}})()</script>';
+  return /<head[^>]*>/i.test(html) ? html.replace(/<head[^>]*>/i, (h) => h + shim) : shim + html;
+};
+http.createServer((req, res) => {
+  // identity probe: check-mirror asks which site a port serves, so a stale server for another site is caught
+  if (req.url === '/__mirror-site') { res.writeHead(200, { 'content-type': 'text/plain' }); return res.end(site); }
+  const em = req.url.match(/^\/__embed\/([0-9a-f]{40})$/);
+  if (em) { res.writeHead(200, { 'content-type': 'image/png' }); return res.end(fs.readFileSync(`${outDir}/bodies/${em[1]}`)); }
+  const m = req.url.match(/^\/_\/([^/]+)(\/.*)?$/);
+  const original = m ? `https://${m[1]}${m[2] || '/'}` : `https://${site}${req.url}`;
+  // a page that echoes a rewritten URL back (inside a query value) must still match what was recorded
+  const unlocal = (u) => { const o = `http://${req.headers.host}`; const e = encodeURIComponent(o); const swap = (from, to) => u = u.split(from).join(to);
+    for (const h of hosts) { swap(`${o}/_/${h}`, `https://${h}`); swap(`${e}%2F_%2F${encodeURIComponent(h)}`, encodeURIComponent(`https://${h}`)); }
+    swap(o, `https://${site}`); swap(e, encodeURIComponent(`https://${site}`)); return u; };
+  const r = lookup(original) || lookup(unlocal(original));
+  if (!r || !r.body) { fs.appendFileSync(`${outDir}/misses.log`, `${original}\n`); res.writeHead(404); return res.end(); }
+  let body = fs.readFileSync(`${outDir}/bodies/${r.body}`);
+  if (textual(r.type)) {
+    const origin = `http://${req.headers.host}`;
+    body = body.toString('utf8');
+    if (r.recordedUrl) { // JSONP: answer with the callback name this load asked for
+      const was = new URL(r.recordedUrl).searchParams.get('callback'), want = new URL(original).searchParams.get('callback');
+      if (was && want && was !== want) body = body.split(was).join(want);
+    }
+    if (/html/.test(r.type)) body = injectShim(swapEmbeds(body), origin); // swapEmbeds runs before the URL rewrite, so the src still matches; the shim is added last of the HTML edits
+    body = body.replace(hostRe, (all, slash, host) => {
+      const base = host === site ? origin : `${origin}/_/${host}`;
+      return slash === '\\/' ? base.replace(/\//g, '\\/') : base;
+    });
+  }
+  res.writeHead(r.status || 200, { 'content-type': r.type || 'application/octet-stream', 'access-control-allow-origin': '*', 'cache-control': 'no-store' });
+  res.end(body);
+}).listen(port, '127.0.0.1', () => console.log(`mirror of ${site} at http://127.0.0.1:${port}/ (${Object.keys(index.resources).length} resources)`));

package/skills/wix-harmony-editor/scripts/copy/snapshot-capabilities.mjs

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+// Snapshot what the live editor accepts, for check-description.mjs (compliance guard 1): the addable component types and, for each type a copy uses, every writable
+// style key per element, the whole API surface (`api`: namespace -> methods, for lint-api.mjs), the content fields (with enum options) and the accepted link types.
+//
+//   node scripts/copy/snapshot-capabilities.mjs <scratchSectionId> <out.json> [--types a,b,c]
+//
+// It adds one temporary component of each type to <scratchSectionId> (a section on an
+// unpublished draft page), reads the schemas, and removes them again. If the snapshot differs
+// from a previous one (types, addable components or API methods), the editor changed: re-check descriptions before deploying.
+import { chromium } from 'playwright';
+import { hideScrollbars } from './hide-scrollbars.mjs';
+import fs from 'fs';
+
+const args = process.argv.slice(2);
+const opt = (n, d) => { const i = args.indexOf(`--${n}`); return i >= 0 ? args[i + 1] : d; };
+const [sectionId, out] = args.filter((a, i) => !a.startsWith('--') && !(i > 0 && args[i - 1].startsWith('--')));
+if (!sectionId || !out) { console.error('usage: snapshot-capabilities.mjs <scratchSectionId> <out.json> [--types …]'); process.exit(2); }
+const types = opt('types', 'wixEditorElements.WRichText,wixEditorElements.Image,wixEditorElements.Button').split(',');
+const b = await chromium.connectOverCDP(`http://127.0.0.1:${process.env.PW_PORT || 9333}`);
+const p = b.contexts().flatMap((c) => c.pages()).find((x) => x.url().includes('editor.wix.com/edit/'));
+if (!p) { console.error('No Harmony editor page is open.'); process.exit(3); }
+await hideScrollbars(p); // canvas widths must not depend on the OS scrollbar setting
+const raw = await p.evaluate(async (code) => { const a = await repluggableAppDebug.host.getAPI({ name: 'RunEditorLLMCodeToolAPI', public: true, layer: 'DATA_SERVICE' }); return a.execute({ code }, { biParams: {} }); }, `
+const A = editorLLMApis; const out = {}; const temp = [];
+await A.pages.navigate({ pageId: (await A.sections.get({ sectionId: ${JSON.stringify(sectionId)} })).pageId }); await A.breakpoints.toggle({ device: 'desktop' });
+for (const type of ${JSON.stringify(types)}) {
+  const c = { id: (await A.components.add({ containerId: ${JSON.stringify(sectionId)}, components: [{ componentType: type }], select: false })).added[0].componentId }; temp.push(c.id);
+  const ss = await A.appearance.getStyleSchema({ componentId: c.id }); const cs = await A.content.getSchema({ componentId: c.id });
+  let links = null; try { links = (await A.links.getAllowedTypes({ componentId: c.id })).allowedTypes; } catch (e) {}
+  out[type] = { styles: Object.fromEntries(ss.elements.filter((e) => e.writableProperties).map((e) => [e.elementPath.join('/') || 'root', Object.keys(e.writableProperties)])), content: cs.fields.map((f) => ({ key: f.key, dataType: f.dataType, options: f.options ? f.options.map((o) => o.value) : undefined })), links };
+}
+await A.components.remove({ componentIds: temp });
+return { readAt: new Date().toISOString(), api: Object.fromEntries(Object.keys(A).map((ns) => [ns, Object.keys(A[ns])])), addable: (await A.components.listAddable()).components.map((c) => c.componentType), types: out, breakpoints: await A.breakpoints.list() };`);
+const c = JSON.parse(raw.items[0].content);
+if (!c.success) { console.error(c.summary); process.exit(1); }
+let changed = null;
+if (fs.existsSync(out)) { const prev = JSON.parse(fs.readFileSync(out, 'utf8')); changed = JSON.stringify(prev.types) !== JSON.stringify(c.result.types) || JSON.stringify(prev.addable) !== JSON.stringify(c.result.addable) || JSON.stringify(prev.api) !== JSON.stringify(c.result.api); }
+fs.writeFileSync(out, JSON.stringify({ ...c.result, addableCount: c.result.addable.length }, null, 1));
+console.log(JSON.stringify({ out, types: Object.keys(c.result.types), addable: c.result.addable.length, changedSinceLastSnapshot: changed }));
+await b.close();

package/skills/wix-harmony-editor/scripts/copy/split-sections.mjs

@@ -0,0 +1,191 @@
+#!/usr/bin/env node
+// Split a deployed one-section page into one Harmony section per source section, keeping every
+// component (ids, styles, links) and giving each section its own background (colour, plate or
+// video) and its own desktop and mobile layout. Videos become Video Player components or a
+// section background video.
+//
+//   node scripts/copy/split-sections.mjs <spec.json> --page <pageId> --section <oldSectionId> [--keep-old]
+//
+// spec.json:
+//   { "sections": [ { "name": "Hero", "y0": 165, "y1": 832, "delta": 1,
+//        "background": { "color": "#ffffff", "plate": { "uri", "name", "width", "height" }, "video": <video> },
+//        "videos": [ { "video": <video>, "box": { "x", "y", "width", "height" } } ],      // Video Player at that box (section coordinates)
+//        "cards": true,                                                                   // mobile: stack tile by tile (an image with the captions under it), not all images then all captions
+//        "include": ["<label>"],                                                      // components that belong here whatever their position (a gallery taller than its source band)
+//        "place": { "<label>": { "x", "y" } },                                         // move a component (section coordinates)
+//        "height": 600 } ],                                                              // override y1 - y0
+//     "drop": [ "<label prefix>" ] }                                                     // components removed (static copies of a gallery, spacers)
+//   y0/y1: source page pixels. delta: how far this band's components sit below the source
+//   (Harmony y = source y + delta); components belong to the section holding their centre.
+//   <video>: { "fileId": "5f062c_…" (Media Manager uri of the uploaded mp4), "name", "width", "height" }.
+//
+// Calls (one editor run each): inventory (desktop and mobile boxes), then per section: add the
+// section, background, videos, reparent, desktop composition, mobile composition; then remove
+// the old section and save. Mobile: components keep their old order and spacing within the
+// section, restarted at the section top (a video goes first, full width, 16:9).
+// A video value must carry adaptiveSources (even []): without it the saved document cannot be loaded again
+// (document services fail on `.map` of undefined and the editor never opens).
+// Hide-on-mobile and mobile background opacity have no API: run mobile-stage.mjs after.
+import { chromium } from 'playwright';
+import { hideScrollbars } from './hide-scrollbars.mjs';
+import fs from 'fs';
+
+const args = process.argv.slice(2);
+const opt = (n, d) => { const i = args.indexOf(`--${n}`); return i >= 0 ? args[i + 1] : d; };
+const specFile = args.find((a, i) => !a.startsWith('--') && !(i > 0 && args[i - 1].startsWith('--')));
+const pageId = opt('page'), oldId = opt('section');
+if (!specFile || !pageId || !oldId) { console.error('usage: split-sections.mjs <spec.json> --page <pageId> --section <oldSectionId> [--keep-old]'); process.exit(2); }
+const spec = JSON.parse(fs.readFileSync(specFile, 'utf8'));
+const stateFile = specFile.replace(/\.json$/, '') + '.split-state.json';
+const state = fs.existsSync(stateFile) ? JSON.parse(fs.readFileSync(stateFile, 'utf8')) : { sections: {} };
+const save = () => fs.writeFileSync(stateFile, JSON.stringify(state, null, 1));
+const J = JSON.stringify;
+
+// HZ_EDITOR_RUNNER=<module>: a module whose default export is async (code) => result, used instead of the live
+// editor. The tests drive the real script against a fake editor this way; nothing else uses it.
+let browser = null;
+let run;
+if (process.env.HZ_EDITOR_RUNNER) {
+  const runner = (await import(process.env.HZ_EDITOR_RUNNER)).default;
+  run = (name, code) => runner(code, name);
+} else {
+  browser = await chromium.connectOverCDP(`http://127.0.0.1:${process.env.PW_PORT || 9333}`);
+  const page = browser.contexts().flatMap((c) => c.pages()).find((p) => p.url().includes('editor.wix.com/edit/'));
+  if (!page) { console.error('No Harmony editor page is open.'); process.exit(3); }
+  await hideScrollbars(page);
+  run = async (name, code) => {
+    const raw = await page.evaluate(async (code) => { const api = await repluggableAppDebug.host.getAPI({ name: 'RunEditorLLMCodeToolAPI', public: true, layer: 'DATA_SERVICE' }); try { return await api.execute({ code }, { biParams: {} }); } catch (e) { return { thrown: String(e?.message || e) }; } }, code);
+    if (raw.thrown) throw new Error(`${name}: ${raw.thrown}`);
+    const c = JSON.parse(raw.items[0].content);
+    if (!c.success) { const e = new Error(`${name}: ${c.summary}`); e.detail = c; throw e; }
+    return c.result;
+  };
+}
+const videoValue = (v) => ({ uri: `video/${v.fileId}/720p/mp4/file.mp4`, name: v.name, hasAudio: false, duration: v.duration || 10, adaptiveSources: [], sources: [{ quality: '720p', width: 1280, height: 720, types: [{ format: 'mp4', uri: `video/${v.fileId}/720p/mp4/file.mp4` }] }, { quality: '480p', width: 854, height: 480, types: [{ format: 'mp4', uri: `video/${v.fileId}/480p/mp4/file.mp4` }] }], poster: { uri: `${v.fileId}f002.jpg`, name: `${v.name}.jpg`, width: 1280, height: 720 } });
+
+// 1 inventory ---------------------------------------------------------------------------
+if (!state.inventory) {
+  state.inventory = await run('inventory', `const A = editorLLMApis;
+await A.pages.navigate({ pageId: ${J(pageId)} }); await A.breakpoints.toggle({ device: 'desktop' });
+const d = await A.layout.getComposition({ componentId: ${J(oldId)} });
+await A.breakpoints.toggle({ device: 'mobile' }); const m = await A.layout.getComposition({ componentId: ${J(oldId)} }); await A.breakpoints.toggle({ device: 'desktop' });
+const mb = Object.fromEntries(m.children.map((k) => [k.componentId, k.box]));
+return { desktopBox: d.box, mobileBox: m.box, children: d.children.map((k) => ({ id: k.componentId, label: k.label, type: k.type, box: k.box, mobile: mb[k.componentId] || null })) };`);
+  save();
+}
+const isDropped = (label) => (spec.drop || []).some((p) => label.startsWith(p));
+const all = state.inventory.children;
+const dropIds = all.filter((c) => isDropped(c.label)).map((c) => c.id);
+const live = all.filter((c) => !isDropped(c.label));
+const band = (s) => [s.y0 + s.delta, s.y1 + s.delta];
+const sectionOf = (c) => { const forced = spec.sections.findIndex((s) => (s.include || []).includes(c.label)); if (forced >= 0) return forced; const mid = c.box.y + c.box.height / 2; return spec.sections.findIndex((s) => { const [a, b] = band(s); return mid >= a && mid < b; }); };
+const assigned = spec.sections.map(() => []);
+const lost = [];
+for (const c of live) { const i = sectionOf(c); if (i < 0) lost.push(c.label); else assigned[i].push(c); }
+if (lost.length) { console.error('components outside every section:', lost.join(', ')); process.exit(4); }
+
+// 2 per section ---------------------------------------------------------------------------
+const kindOf = (t) => (/RichText/.test(t) ? 'text' : /Image$|\.Image/.test(t) ? 'image' : /Slider|Gallery|Cart/.test(t) ? 'native' : /Video/.test(t) ? 'video' : 'other');
+const sized = (c, b, dev) => { const k = kindOf(c.type); return k === 'text' || k === 'native' || (dev === 'mobile' && k === 'image') ? { x: b.x, y: b.y, width: b.width } : { x: b.x, y: b.y, width: b.width, height: b.height }; };
+let prev = oldId;
+let mutated = false, saved = false;
+for (let i = 0; i < spec.sections.length; i++) {
+  const s = spec.sections[i];
+  const done = state.sections[s.name];
+  if (done && done.finished && opt('redo-mobile', null) !== s.name) { prev = done.id; continue; } // --redo-mobile "<section name>" re-sends one section's layout
+  const [a] = band(s);
+  const height = s.height || (s.y1 - s.y0);
+  const place = s.place || {};
+  const items = assigned[i].map((c) => ({ c, box: { ...c.box, y: place[c.label]?.y ?? Math.round(c.box.y - a), x: place[c.label]?.x ?? c.box.x } }));
+  // mobile layout: old order and spacing, restarted at the section top; a video goes first
+  const vids = s.videos || [];
+  const vidH = Math.round(390 * 9 / 16), top = vids.length ? vids.length * (vidH + 12) : 0;
+  const mob = items.filter((it) => it.c.mobile).sort((x, y) => x.c.mobile.y - y.c.mobile.y);
+  let mobBoxes, mobHeight;
+  if (s.cards) {
+    // cards: an image with the texts under it in its column stay together (a grid of tiles stacks tile by tile,
+    // right to left for RTL), instead of all images first and all captions after
+    const imgs = mob.filter((it) => kindOf(it.c.type) === 'image' && it.box.width >= 100);
+    const cardOf = new Map(); const rest = [];
+    for (const it of mob) { if (imgs.includes(it)) { cardOf.set(it, { img: it, below: [] }); continue; }
+      const host = imgs.filter((im) => it.box.y >= im.box.y + im.box.height - 5 && Math.min(it.box.x + it.box.width, im.box.x + im.box.width) - Math.max(it.box.x, im.box.x) >= 0.5 * Math.min(it.box.width, im.box.width)).sort((m, n) => n.box.y - m.box.y)[0];
+      if (host) cardOf.get(host).below.push(it); else rest.push(it); }
+    const units = [...cardOf.values()].map((cd) => ({ key: [Math.round(cd.img.box.y / 20), -cd.img.box.x], list: [cd.img, ...cd.below.sort((m, n) => m.box.y - n.box.y)] }))
+      .concat(rest.map((it) => ({ key: [Math.round(it.box.y / 20), -it.box.x], list: [it] })));
+    units.sort((m, n) => m.key[0] - n.key[0] || m.key[1] - n.key[1]);
+    let y = 16 + top; mobBoxes = [];
+    for (const u of units) { for (const it of u.list) { mobBoxes.push({ id: it.c.id, label: it.c.label, type: it.c.type, box: { x: it.c.mobile.x, y: Math.round(y), width: it.c.mobile.width, height: it.c.mobile.height } }); y += it.c.mobile.height + 6; } y += 14; }
+    mobHeight = Math.round(y + 10);
+  } else {
+    const minY = mob.length ? Math.min(...mob.map((it) => it.c.mobile.y)) : 0;
+    mobBoxes = mob.map((it) => ({ id: it.c.id, label: it.c.label, type: it.c.type, box: { x: it.c.mobile.x, y: Math.round(it.c.mobile.y - minY + 16 + top), width: it.c.mobile.width, height: it.c.mobile.height } }));
+    mobHeight = Math.max(top, ...mobBoxes.map((m) => m.box.y + m.box.height + 16), 120);
+  }
+  const code = `const A = editorLLMApis;
+await A.pages.navigate({ pageId: ${J(pageId)} }); await A.breakpoints.toggle({ device: 'desktop' });
+const existing = ${J(done ? done.id : null)};
+let sec; if (existing) sec = { sectionId: existing }; else sec = await A.sections.add({ name: ${J(s.name)}, afterSectionId: ${J(prev)} });
+const SID = sec.sectionId;
+try { await A.view.scrollTo({ componentId: SID }); } catch (e) {} // an off-screen section is not rendered, so it has no size to compose
+await new Promise((r) => setTimeout(r, 800));
+const bg = { backgroundColor: ${J(s.background.color || '#FFFFFF')}${s.background.plate ? `, image: ${J({ uri: s.background.plate.uri, name: s.background.plate.name, alt: '', width: s.background.plate.width, height: s.background.plate.height })}, fittingType: 'fill'` : ''}${s.background.video ? `, videoMedia: ${J(videoValue(s.background.video))}, loop: true, autoplay: true, showControls: false, muted: true` : ''} };
+await A.appearance.setContainerBackground({ componentId: SID, properties: bg });
+const newVids = [];
+${vids.map((v, k) => `{ const have = existing ? ((await A.components.getTree({ rootId: SID, depth: 1 })).children || []).find((q) => q.label === ${J(`video-${s.name}-${k}`)}) : null; // a re-run reuses the video it already made
+  if (have) newVids.push(have.id); else { const r = await A.components.add({ containerId: SID, components: [{ componentType: 'wixEditorElements.VideoUpload' }], select: false }); const id = r.added[0].componentId; await A.components.rename({ componentId: id, label: ${J(`video-${s.name}-${k}`)} });
+  await A.content.set({ componentId: id, values: { video: ${J(videoValue(v.video))}, autoplay: true, loop: true, mute: true, enableControls: false } }); newVids.push(id); } }`).join('\n')}
+const ids = ${J(items.map((it) => it.c.id))};
+if (ids.length) await A.components.reparent({ componentIds: ids, targetContainerId: SID });
+const kids = [${items.map((it) => `{ componentId: ${J(it.c.id)}, box: ${J(sized(it.c, it.box, 'desktop'))} }`).join(', ')}${vids.length && items.length ? ', ' : ''}${vids.map((v, k) => `{ componentId: newVids[${k}], box: ${J(v.box)} }`).join(', ')}];
+const comp = async (dev, h, list) => { await A.breakpoints.toggle({ device: dev }); let r, off = [];
+  for (let pass = 0; pass < 4; pass++) { let noop = false; try { r = await A.layout.setComposition({ componentId: SID, box: { height: h }, children: list }); } catch (e) { if (!/back onto the boxes it already had/.test(String((e && e.message) || e))) throw e; noop = true; }
+    const got = Object.fromEntries((await A.layout.getComposition({ componentId: SID })).children.map((q) => [q.componentId, q.box]));
+    off = list.filter((w) => !got[w.componentId] || ['x', 'y', 'width', 'height'].some((k) => w.box[k] !== undefined && Math.abs(got[w.componentId][k] - w.box[k]) > 1)).map((w) => [w.componentId, w.box, got[w.componentId] || null]); if (!off.length) break; }
+  return { off, box: r && r.box }; };
+const out = { id: SID };
+out.desktop = kids.length ? await comp('desktop', ${height}, kids) : (await A.layout.setComposition({ componentId: SID, box: { height: ${height} }, children: [] }).catch((e) => String(e.message).slice(0, 200)));
+const mkids = [${mobBoxes.map((m) => `{ componentId: ${J(m.id)}, box: ${J(sized({ type: m.type }, m.box, 'mobile'))} }`).join(', ')}${vids.length && mobBoxes.length ? ', ' : ''}${vids.map((v, k) => `{ componentId: newVids[${k}], box: { x: 0, y: ${16 + k * (vidH + 12)}, width: 390, height: ${vidH} } }`).join(', ')}];
+out.mobile = mkids.length ? await comp('mobile', ${mobHeight}, mkids) : null;
+// a mobile write can move desktop boxes: read the desktop view back and count what is off now
+await A.breakpoints.toggle({ device: 'desktop' });
+if (kids.length) { const gd = Object.fromEntries((await A.layout.getComposition({ componentId: SID })).children.map((q) => [q.componentId, q.box])); const offD = kids.filter((w) => !gd[w.componentId] || ['x', 'y', 'width', 'height'].some((k) => w.box[k] !== undefined && Math.abs(gd[w.componentId][k] - w.box[k]) > 1)); out.desktop.off = offD.map((w) => [w.componentId, w.box, gd[w.componentId] || null]); }
+out.newVids = newVids;
+return out;`;
+  const res = await run(`section ${s.name}`, code);
+  mutated = true; // layout was written: it must be saved even when the one-time cleanup is already done or skipped (--keep-old)
+  const dOff = res.desktop && res.desktop.off ? res.desktop.off.length : 0, mOff = res.mobile && res.mobile.off ? res.mobile.off.length : 0;
+  // a section with boxes that never landed is NOT finished: keep it resumable and keep the original section
+  state.sections[s.name] = { id: res.id, newVids: res.newVids, finished: dOff === 0 && mOff === 0, desktopOff: dOff, mobileOff: mOff };
+  save(); prev = res.id;
+  console.log(s.name, JSON.stringify({ id: res.id, items: items.length, desktopOff: dOff, mobileOff: mOff }));
+  if (dOff || mOff) { console.error(`section "${s.name}" has boxes that did not land (desktop ${dOff}, mobile ${mOff}): the original section is kept; fix the spec and re-run (finished sections are skipped)`); if (browser) await browser.close(); process.exit(1); }
+}
+
+// 3 drop, remove the old section, save -------------------------------------------------------
+// Idempotent: the old section is looked up first, and what was done is persisted, so a repeat (--redo-mobile after a
+// finished split, a re-run after a failed save) never queries or removes a section that is already gone.
+if (!args.includes('--keep-old') && spec.sections.every((s) => state.sections[s.name] && state.sections[s.name].finished)) {
+  if (state.cleanup && state.cleanup.done) console.log(JSON.stringify({ cleanup: 'already done' }));
+  else {
+    const fin = await run('finish', `const A = editorLLMApis;
+const OLD = ${J(oldId)};
+const exists = (await A.sections.list({})).some((s) => s.sectionId === OLD);
+let dropped = 0, left = [], removed = !exists;
+if (exists) {
+  const DROP = ${J(dropIds)};
+  const kids = (await A.components.getTree({ rootId: OLD, depth: 1 })).children || [];
+  const present = kids.filter((k) => DROP.includes(k.id)).map((k) => k.id); // only the ones still there: a repeat removes nothing twice
+  if (present.length) { await A.components.remove({ componentIds: present }); dropped = present.length; }
+  left = kids.filter((k) => !present.includes(k.id));
+  if (!left.length) { await A.sections.remove({ sectionId: OLD }); removed = true; }
+}
+await A.site.save();
+return { dropped, left: left.map((k) => k.label), removed };`);
+    saved = true; // the cleanup call ends with site.save()
+    state.cleanup = { done: fin.removed, ...fin }; save();
+    console.log(JSON.stringify(fin));
+  }
+}
+// separate from the one-time cleanup: a mobile redo, a repeat after a failed save, or --keep-old still has unsaved layout writes
+if (mutated && !saved) { await run('save', 'return await editorLLMApis.site.save();'); console.log(JSON.stringify({ saved: true })); }
+if (browser) await browser.close();

package/skills/wix-harmony-editor/scripts/copy/upload-media-manager.mjs

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+// Upload LOCAL files (rendered plates, cropped assets) into the site's Media Manager through
+// the editor's own Media Manager dialog, then close it without changing the page.
+//
+//   node scripts/copy/upload-media-manager.mjs <sectionId> <file> [<file> ...]
+//
+// Why: media.uploadFiles only accepts temporary wixmp chat URLs, and the REST
+// generate-upload-url call can be refused for the CLI site token. Files that are already
+// public on the web are simpler: POST /site-media/v1/files/import with the site token.
+// How: adds a temporary Image to <sectionId>, runs its changeMedia edit action to open
+// Media Manager, clicks "Upload Media", feeds input[data-hook="files-input"], waits for
+// "Upload(s) Completed", closes the dialog and removes the temporary Image.
+// Afterwards find the files with editorLLMApis.media.searchSiteFiles({ query: <name> }).
+import { chromium } from 'playwright';
+
+const [sectionId, ...files] = process.argv.slice(2);
+if (!sectionId || !files.length) { console.error('usage: upload-media-manager.mjs <sectionId> <file> [...]'); process.exit(2); }
+
+const browser = await chromium.connectOverCDP(`http://127.0.0.1:${process.env.PW_PORT || 9333}`);
+const page = browser.contexts().flatMap((c) => c.pages()).find((p) => p.url().includes('editor.wix.com/edit/'));
+if (!page) { console.error('No Harmony editor page is open.'); process.exit(3); }
+const api = async (code) => {
+  const raw = await page.evaluate(async (code) => { const a = await repluggableAppDebug.host.getAPI({ name: 'RunEditorLLMCodeToolAPI', public: true, layer: 'DATA_SERVICE' }); return a.execute({ code }, { biParams: {} }); }, code);
+  const c = JSON.parse(raw.items[0].content);
+  if (!c.success) throw new Error(c.summary);
+  return c.result;
+};
+const mmFrame = () => page.frames().find((f) => f.url().includes('/media-manager/'));
+// The Media Manager iframe stays in the DOM after closing: test VISIBILITY, not presence.
+const isOpen = async () => { const f = mmFrame(); return f ? f.locator('text=Upload Media').first().isVisible().catch(() => false) : false; };
+
+let tmp = null;
+if (!(await isOpen())) {
+  tmp = await api(`const i = (await editorLLMApis.components.add({ containerId: ${JSON.stringify(sectionId)}, components: [{ componentType: 'wixEditorElements.Image' }], select: false })).added[0]; return i.componentId;`);
+  // changeMedia resolves only when the dialog closes, so do not await it here
+  api(`return await editorLLMApis.editActions.run({ componentId: ${JSON.stringify(tmp)}, action: 'changeMedia' });`).catch(() => {});
+  for (let i = 0; i < 40 && !(await isOpen()); i++) await page.waitForTimeout(1000);
+}
+if (!(await isOpen())) throw new Error('Media Manager did not open');
+const f = mmFrame();
+await page.waitForTimeout(800);
+await f.locator('text=Upload Media').first().click();
+let input = null;
+for (let i = 0; i < 20 && !input; i++) { await page.waitForTimeout(500); input = await f.$('input[type=file][data-hook="files-input"]'); }
+if (!input) throw new Error('Media Manager file input not found');
+await input.setInputFiles(files);
+const names = files.map((x) => x.split('/').pop());
+let done = false;
+for (let i = 0; i < 90 && !done; i++) {
+  const t = await f.evaluate(() => document.body.innerText).catch(() => '');
+  done = /Uploads? Completed/i.test(t) && names.every((n) => t.includes(n));
+  if (!done) await page.waitForTimeout(1000);
+}
+await page.waitForTimeout(1200);
+await page.keyboard.press('Escape');
+await page.waitForTimeout(1500);
+if (await isOpen()) { const c = await f.$('[data-hook*="close"], button[aria-label*="lose"]'); if (c) await c.click().catch(() => {}); await page.waitForTimeout(1500); }
+if (tmp) await api(`await editorLLMApis.components.remove({ componentIds: [${JSON.stringify(tmp)}] }); return true;`);
+console.log(JSON.stringify({ uploaded: names, completed: done, dialogOpen: await isOpen() }));
+await browser.close();
+if (!done) { console.error('Upload completion was not observed within 90 s: check the Media Manager before using these files.'); process.exit(1); }