@wix/agent-skills 1.35.1 → 1.36.1

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

@@ -1,67 +0,0 @@
-#!/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

@@ -1,102 +0,0 @@
-#!/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

@@ -1,40 +0,0 @@
-#!/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

@@ -1,191 +0,0 @@
-#!/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

@@ -1,61 +0,0 @@
-#!/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); }