multiclone 0.2.0 → 0.3.0

package/dist/project/draft.js

@@ -1,860 +0,0 @@
-import { existsSync } from 'node:fs';
-import { readFile, rm, writeFile } from 'node:fs/promises';
-import { format } from 'prettier';
-import { join, resolve } from 'node:path';
-import { ensureDir, readJson, writeJson } from '../core/files.js';
-import { log } from '../core/log.js';
-import { mcError, TaggedError } from '../domain/result.js';
-import { nodeStyles } from '../domain/snapshot.js';
-import { RunFolder } from '../store/run.js';
-const MAX_ELEMENTS = 1200;
-const MOBILE_QUERY = '(max-width: 767px)';
-/** Values a property has when nothing sets it (after the draft reset), so they can be omitted. */
-const DEFAULTS = {
-    position: 'static',
-    'z-index': 'auto',
-    float: 'none',
-    'box-sizing': 'border-box',
-    'min-width': 'auto',
-    'max-width': 'none',
-    'min-height': 'auto',
-    'max-height': 'none',
-    'margin-top': '0px',
-    'margin-right': '0px',
-    'margin-bottom': '0px',
-    'margin-left': '0px',
-    'padding-top': '0px',
-    'padding-right': '0px',
-    'padding-bottom': '0px',
-    'padding-left': '0px',
-    'border-top-left-radius': '0px',
-    'border-top-right-radius': '0px',
-    'border-bottom-right-radius': '0px',
-    'border-bottom-left-radius': '0px',
-    'flex-direction': 'row',
-    'flex-wrap': 'nowrap',
-    'flex-grow': '0',
-    'flex-shrink': '1',
-    'flex-basis': 'auto',
-    'justify-content': 'normal',
-    'align-items': 'normal',
-    'align-self': 'auto',
-    'align-content': 'normal',
-    order: '0',
-    'row-gap': 'normal',
-    'column-gap': 'normal',
-    'grid-template-columns': 'none',
-    'grid-template-rows': 'none',
-    'grid-template-areas': 'none',
-    'grid-column': 'auto',
-    'grid-row': 'auto',
-    'grid-auto-flow': 'row',
-    'aspect-ratio': 'auto',
-    'object-fit': 'fill',
-    'object-position': '50% 50%',
-    'text-decoration-line': 'none',
-    'text-overflow': 'clip',
-    opacity: '1',
-    'background-color': 'rgba(0, 0, 0, 0)',
-    'background-image': 'none',
-    'background-size': 'auto',
-    'background-position': '0% 0%',
-    'background-repeat': 'repeat',
-    'background-clip': 'border-box',
-    'box-shadow': 'none',
-    transform: 'none',
-    'transform-style': 'flat',
-    perspective: 'none',
-    translate: 'none',
-    rotate: 'none',
-    scale: 'none',
-    filter: 'none',
-    'backdrop-filter': 'none',
-    'clip-path': 'none',
-    'mask-image': 'none',
-    'mix-blend-mode': 'normal',
-    isolation: 'auto',
-    'overflow-x': 'visible',
-    'overflow-y': 'visible',
-    transition: 'all 0s ease 0s',
-    'will-change': 'auto',
-};
-/** Inherited properties: emitted only where they differ from the parent. */
-const INHERITED = [
-    'color',
-    'font-family',
-    'font-size',
-    'font-weight',
-    'font-style',
-    'font-stretch',
-    'font-variation-settings',
-    'font-feature-settings',
-    'line-height',
-    'letter-spacing',
-    'word-spacing',
-    'text-align',
-    'text-transform',
-    'text-indent',
-    'text-shadow',
-    'white-space',
-    'word-break',
-    'visibility',
-    'cursor',
-    'pointer-events',
-    'list-style-type',
-];
-const INHERITED_SET = new Set(INHERITED);
-const BLOCK_TAGS = new Set('div section header footer main nav article aside h1 h2 h3 h4 h5 h6 p ul ol dl dd dt figure figcaption blockquote form fieldset address details summary dialog pre hr img video canvas svg'.split(' '));
-const DEFAULT_DISPLAY = {
-    li: 'list-item',
-    button: 'inline-block',
-    input: 'inline-block',
-    select: 'inline-block',
-    textarea: 'inline-block',
-    table: 'table',
-    thead: 'table-header-group',
-    tbody: 'table-row-group',
-    tr: 'table-row',
-    td: 'table-cell',
-    th: 'table-cell',
-    iframe: 'inline',
-    summary: 'list-item',
-};
-const HTML_TAGS = new Set('div span section header footer main nav article aside h1 h2 h3 h4 h5 h6 p a img video picture figure figcaption ul ol li dl dt dd button form input label textarea select option blockquote strong em b i u small sup sub br hr code pre table thead tbody tfoot tr td th iframe canvas svg time details summary dialog mark abbr cite q s del ins address fieldset legend'.split(' '));
-const SVG_TAGS = new Set('svg g path circle ellipse line polyline polygon rect defs linearGradient radialGradient stop clipPath mask use symbol text tspan pattern title desc'.split(' '));
-const VOID_TAGS = new Set(['img', 'br', 'hr', 'input']);
-const MEDIA_TAGS = new Set(['img', 'video', 'canvas', 'svg', 'iframe', 'picture']);
-const SKIP_TAGS = new Set([
-    'script',
-    'style',
-    'noscript',
-    'template',
-    'link',
-    'meta',
-    'source',
-    'track',
-    'head',
-    'title',
-]);
-const GLOBAL_ATTRS = {
-    id: 'id',
-    title: 'title',
-    role: 'role',
-    lang: 'lang',
-    'aria-label': 'aria-label',
-    'aria-labelledby': 'aria-labelledby',
-    'aria-describedby': 'aria-describedby',
-    'aria-controls': 'aria-controls',
-};
-const TAG_ATTRS = {
-    a: { href: 'href', rel: 'rel', target: 'target' },
-    img: { alt: 'alt', width: 'width', height: 'height' },
-    video: { width: 'width', height: 'height' },
-    iframe: { title: 'title', width: 'width', height: 'height' },
-    input: { name: 'name', placeholder: 'placeholder', value: 'defaultValue' },
-    textarea: { name: 'name', placeholder: 'placeholder' },
-    select: { name: 'name' },
-    button: { name: 'name' },
-    label: { for: 'htmlFor' },
-    time: { datetime: 'dateTime' },
-    td: { colspan: 'colSpan', rowspan: 'rowSpan' },
-    th: { colspan: 'colSpan', rowspan: 'rowSpan' },
-};
-const SVG_ATTRS = {
-    viewBox: 'viewBox',
-    viewbox: 'viewBox',
-    d: 'd',
-    fill: 'fill',
-    stroke: 'stroke',
-    width: 'width',
-    height: 'height',
-    cx: 'cx',
-    cy: 'cy',
-    r: 'r',
-    rx: 'rx',
-    ry: 'ry',
-    x: 'x',
-    y: 'y',
-    x1: 'x1',
-    x2: 'x2',
-    y1: 'y1',
-    y2: 'y2',
-    points: 'points',
-    transform: 'transform',
-    offset: 'offset',
-    opacity: 'opacity',
-    mask: 'mask',
-    href: 'href',
-    'xlink:href': 'href',
-    preserveAspectRatio: 'preserveAspectRatio',
-    gradientUnits: 'gradientUnits',
-    gradientTransform: 'gradientTransform',
-    'stroke-width': 'strokeWidth',
-    'stroke-linecap': 'strokeLinecap',
-    'stroke-linejoin': 'strokeLinejoin',
-    'stroke-dasharray': 'strokeDasharray',
-    'stroke-dashoffset': 'strokeDashoffset',
-    'stroke-opacity': 'strokeOpacity',
-    'fill-rule': 'fillRule',
-    'fill-opacity': 'fillOpacity',
-    'clip-rule': 'clipRule',
-    'clip-path': 'clipPath',
-    'stop-color': 'stopColor',
-    'stop-opacity': 'stopOpacity',
-};
-/** Attributes React types as unions: only these values are emitted. */
-const UNION_VALUES = {
-    'button.type': new Set(['button', 'submit', 'reset']),
-    'img.loading': new Set(['lazy', 'eager']),
-    'iframe.loading': new Set(['lazy', 'eager']),
-    'aria-hidden': new Set(['true', 'false']),
-    'aria-expanded': new Set(['true', 'false']),
-};
-/** Element reset that makes "computed value equals the default" mean the same in the clone. */
-const DRAFT_RESET = `/* Draft reset by multiclone: the generated sections assume these defaults. */
-h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; padding: 0; }
-h1, h2, h3, h4, h5, h6, b, strong, small { font-size: inherit; font-weight: inherit; }
-em, i { font-style: inherit; }
-a { color: inherit; text-decoration: none; }
-button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; }
-input, textarea, select { font: inherit; color: inherit; }
-`;
-/**
- * Writes a first draft of one captured page into a scaffolded project: one React component and
- * CSS module per captured section, built from the styled DOM snapshot (desktop, with mobile
- * overrides), real media paths and captured hover states. The agent polishes from there.
- */
-export async function generateDraft(options) {
-    const opened = await RunFolder.open(options.capture);
-    if (!opened.ok)
-        throw new TaggedError(opened.error);
-    const run = opened.value;
-    const project = resolve(options.project);
-    const route = normalizeRoute(options.route ?? '/');
-    const warnings = [];
-    const primary = run.viewports[0] ?? 'desktop';
-    const mobileName = run.viewports.find((name) => name !== primary && /mobile/i.test(name));
-    const snapshot = await run.snapshot(primary);
-    if (!snapshot?.documents[0])
-        throw new Error(`No ${primary} snapshot in ${run.dir}.`);
-    const mobile = mobileName ? await run.snapshot(mobileName) : null;
-    const assetMap = await readJson(join(project, 'src', 'content', 'asset-map.json')).catch(() => ({}));
-    const hovers = hoverMap(await run.json(join('interactions', `${primary}.json`), []));
-    const page = new SnapshotIndex(snapshot);
-    const mobileIndex = mobile?.documents[0] ? new SnapshotIndex(mobile) : null;
-    const origin = run.manifest.finalUrl || run.manifest.url;
-    let index = await run.json('sections/index.json', []);
-    if (!index.length) {
-        const body = page.byTag('body');
-        if (!body?.path)
-            throw new Error('The snapshot has no body element.');
-        index = [
-            {
-                id: 'page',
-                label: 'page',
-                viewports: { [primary]: { top: 0, bottom: 0, path: body.path } },
-            },
-        ];
-        warnings.push('No section split in the capture (run analyze); drafted the whole body as one section.');
-    }
-    const pageName = componentName(route === '/' ? 'home' : route, 'Page');
-    const slug = route === '/'
-        ? 'home'
-        : route
-            .slice(1)
-            .replace(/[^a-z0-9]+/gi, '-')
-            .toLowerCase();
-    const sectionsDir = join(project, 'src', 'sections', slug);
-    if (existsSync(sectionsDir)) {
-        if (options.overwrite !== true)
-            throw new TaggedError(mcError('invalid-input', `${route} is already drafted in src/sections/${slug}.`, 'Pass overwrite to replace it (this discards edits to those files).'));
-        await rm(sectionsDir, { recursive: true, force: true });
-    }
-    const body = page.byTag('body');
-    const base = body ? nodeStyles(snapshot, body) : {};
-    const used = new Set();
-    const sections = [];
-    for (const entry of index) {
-        const placement = entry.viewports[primary];
-        const root = placement ? page.byPath(placement.path) : undefined;
-        if (!placement || !root) {
-            warnings.push(`Section "${entry.label}" has no ${primary} element; skipped.`);
-            continue;
-        }
-        let name = componentName(entry.label, 'Section');
-        for (let n = 2; used.has(name); n++)
-            name = `${componentName(entry.label, 'Section')}${String(n)}`;
-        used.add(name);
-        const mobilePlacement = mobileName ? entry.viewports[mobileName] : undefined;
-        const builder = new SectionBuilder({
-            page,
-            mobile: mobileIndex,
-            base,
-            assetMap,
-            hovers,
-            origin,
-            mobileRootHeight: mobilePlacement ? mobilePlacement.bottom - mobilePlacement.top : null,
-        });
-        const jsx = builder.render(root);
-        const dir = join(sectionsDir, name);
-        await ensureDir(dir);
-        await writeFile(join(dir, `${name}.tsx`), await pretty(sectionSource(name, entry.label, origin, jsx), 'typescript'));
-        await writeFile(join(dir, `${name}.module.css`), await pretty(builder.css(), 'css'));
-        sections.push({
-            name,
-            label: entry.label,
-            file: `src/sections/${slug}/${name}/${name}.tsx`,
-            elements: builder.elements,
-            truncated: builder.truncated,
-        });
-        if (builder.truncated)
-            warnings.push(`${name}: stopped at ${String(MAX_ELEMENTS)} elements; finish it from sections/${entry.id}/dom-${primary}.txt.`);
-    }
-    const pageFile = join(project, 'src', 'pages', `${pageName}.tsx`);
-    await ensureDir(join(project, 'src', 'pages'));
-    await writeFile(pageFile, await pretty(pageSource(pageName, slug, sections, origin), 'typescript'));
-    await writeFile(join(project, 'src', 'styles', 'draft.css'), await pretty(draftCss(base, assetMap), 'css'));
-    const routes = [...new Set([route, ...(options.aliases ?? []).map(normalizeRoute)])];
-    await registerPage(project, routes.map((path) => ({ route: path, component: pageName, file: `@/pages/${pageName}` })));
-    log(`drafted ${String(sections.length)} sections → src/sections/${slug} (route ${route})`);
-    return { route, page: `src/pages/${pageName}.tsx`, sections, warnings };
-}
-/** Lookup helpers over the first document of a snapshot. */
-class SnapshotIndex {
-    snapshot;
-    nodes;
-    children = new Map();
-    paths = new Map();
-    constructor(snapshot) {
-        this.snapshot = snapshot;
-        this.nodes = snapshot.documents[0]?.nodes ?? [];
-        for (const node of this.nodes) {
-            const list = this.children.get(node.p) ?? [];
-            list.push(node);
-            this.children.set(node.p, list);
-            if (node.path && !this.paths.has(node.path))
-                this.paths.set(node.path, node);
-        }
-    }
-    byPath(path) {
-        return this.paths.get(path);
-    }
-    byTag(tag) {
-        return this.nodes.find((node) => node.t === 1 && node.name.toLowerCase() === tag);
-    }
-    styles(node) {
-        return nodeStyles(this.snapshot, node);
-    }
-}
-/** Turns one section subtree into JSX plus a deduplicated CSS module. */
-class SectionBuilder {
-    input;
-    elements = 0;
-    truncated = false;
-    rules = new Map();
-    counters = new Map();
-    constructor(input) {
-        this.input = input;
-    }
-    render(root) {
-        return this.element(root, 2, this.input.base, null, true, false) ?? '    <div />';
-    }
-    css() {
-        const blocks = [];
-        const mobile = [];
-        for (const { name, rule } of this.rules.values()) {
-            blocks.push(block(`.${name}`, rule.own));
-            if (rule.before)
-                blocks.push(block(`.${name}::before`, rule.before));
-            if (rule.after)
-                blocks.push(block(`.${name}::after`, rule.after));
-            if (rule.hover)
-                blocks.push(block(`.${name}:hover`, rule.hover));
-            if (rule.mobile?.size)
-                mobile.push(block(`  .${name}`, rule.mobile, '    '));
-        }
-        const media = mobile.length ? `\n@media ${MOBILE_QUERY} {\n${mobile.join('\n')}}\n` : '';
-        return `${blocks.filter(Boolean).join('\n')}${media}`;
-    }
-    element(node, depth, parentStyles, parentNode, isRoot, inSvg) {
-        const raw = node.name;
-        const lower = raw.toLowerCase();
-        if (SKIP_TAGS.has(lower) || node.pseudo)
-            return null;
-        const svg = inSvg || lower === 'svg';
-        if (!node.box && !svg)
-            return null;
-        if (this.elements >= MAX_ELEMENTS) {
-            this.truncated = true;
-            return null;
-        }
-        this.elements++;
-        const pad = '  '.repeat(depth);
-        const styles = this.input.page.styles(node);
-        const tag = svg ? (SVG_TAGS.has(raw) ? raw : null) : jsxTag(lower, styles, isRoot);
-        if (tag === null)
-            return null;
-        const attrs = this.attributes(node, tag, svg);
-        if (!svg || lower === 'svg') {
-            const className = this.classFor(node, styles, parentStyles, parentNode, isRoot, tag);
-            if (className)
-                attrs.unshift(`className={styles.${className}}`);
-        }
-        if (VOID_TAGS.has(tag) || (tag === 'video' && !svg) || tag === 'canvas' || tag === 'iframe') {
-            return `${pad}<${tag}${attrs.length ? ` ${attrs.join(' ')}` : ''} />`;
-        }
-        const kids = [];
-        const children = this.input.page.children.get(node.i) ?? [];
-        let previousText = false;
-        for (const child of children) {
-            if (child.t === 3) {
-                if (tag === 'textarea' || tag === 'select')
-                    continue;
-                if (kids.length && !previousText)
-                    kids.push(`${pad}  {' '}`);
-                kids.push(`${pad}  {${JSON.stringify(child.text ?? '')}}`);
-                previousText = true;
-                continue;
-            }
-            if (child.t !== 1)
-                continue;
-            const rendered = this.element(child, depth + 1, styles, node, false, svg);
-            if (rendered === null)
-                continue;
-            if (previousText && isInline(child, this.input.page))
-                kids.push(`${pad}  {' '}`);
-            kids.push(rendered);
-            previousText = false;
-        }
-        const open = `${pad}<${tag}${attrs.length ? ` ${attrs.join(' ')}` : ''}`;
-        return kids.length ? `${open}>\n${kids.join('\n')}\n${pad}</${tag}>` : `${open} />`;
-    }
-    attributes(node, tag, svg) {
-        const out = [];
-        const attrs = node.attrs ?? {};
-        const allowed = svg
-            ? SVG_ATTRS
-            : { ...GLOBAL_ATTRS, ...(TAG_ATTRS[tag] ?? {}) };
-        for (const [key, value] of Object.entries(attrs).sort(([a], [b]) => a.localeCompare(b))) {
-            if (key.startsWith('data-')) {
-                out.push(`${key}={${JSON.stringify(value)}}`);
-                continue;
-            }
-            const union = UNION_VALUES[key] ?? UNION_VALUES[`${tag}.${key}`];
-            if (union) {
-                if (union.has(value))
-                    out.push(`${key}={${JSON.stringify(value)}}`);
-                continue;
-            }
-            const name = allowed[key];
-            if (!name)
-                continue;
-            if (key === 'href' && tag === 'a') {
-                out.push(`href={${JSON.stringify(this.link(value))}}`);
-                continue;
-            }
-            if ((key === 'width' || key === 'height') && !svg && !/^\d+$/.test(value))
-                continue;
-            out.push(`${name}={${JSON.stringify(value)}}`);
-        }
-        if (!svg && (tag === 'img' || tag === 'video' || tag === 'iframe')) {
-            const source = node.src ?? (attrs.src ? this.absolute(attrs.src) : '');
-            if (source)
-                out.push(`src={${JSON.stringify(this.asset(source))}}`);
-        }
-        if (!svg && tag === 'img' && !('alt' in attrs))
-            out.push('alt=""');
-        if (!svg && tag === 'video') {
-            if (attrs.poster)
-                out.push(`poster={${JSON.stringify(this.asset(this.absolute(attrs.poster)))}}`);
-            out.push('autoPlay', 'muted', 'loop', 'playsInline');
-        }
-        if (!svg && tag === 'input' && attrs.type)
-            out.push(`type={${JSON.stringify(attrs.type)}}`);
-        if (!svg && tag === 'input' && 'checked' in attrs)
-            out.push('defaultChecked');
-        if (!svg && (tag === 'details' || tag === 'dialog') && 'open' in attrs)
-            out.push('open');
-        if (!svg && tag === 'canvas')
-            out.push(`data-mc-canvas="rebuild: WebGL/2D canvas, see the capture's REPORT.md"`);
-        return out;
-    }
-    classFor(node, styles, parentStyles, parentNode, isRoot, tag) {
-        const { page, mobile } = this.input;
-        const own = declarations(node, styles, parentStyles, parentNode, page, isRoot, tag);
-        this.rewriteUrls(own);
-        const pseudo = (kind) => {
-            const child = (page.children.get(node.i) ?? []).find((c) => c.pseudo === kind);
-            if (!child?.s)
-                return null;
-            const cs = page.styles(child);
-            const decls = declarations(child, cs, styles, node, page, false, 'span');
-            const content = cs.content;
-            if (!content || content === 'none' || content === 'normal')
-                return null;
-            decls.set('content', content);
-            if (child.box) {
-                decls.set('width', `${String(child.box[2])}px`);
-                decls.set('height', `${String(child.box[3])}px`);
-            }
-            this.rewriteUrls(decls);
-            return decls;
-        };
-        let mobileDecls = null;
-        if (mobile && node.path) {
-            const twin = mobile.byPath(node.path);
-            if (!twin?.box)
-                mobileDecls = new Map([['display', 'none']]);
-            else {
-                const twinParent = mobile.nodes.find((n) => n.i === twin.p) ?? null;
-                const twinParentStyles = isRoot || !twinParent ? this.input.base : mobile.styles(twinParent);
-                const decls = declarations(twin, mobile.styles(twin), twinParentStyles, twinParent, mobile, isRoot, tag);
-                if (isRoot && this.input.mobileRootHeight !== null)
-                    decls.set('min-height', `${String(Math.round(this.input.mobileRootHeight))}px`);
-                this.rewriteUrls(decls);
-                mobileDecls = overrides(own, decls);
-            }
-        }
-        const rule = {
-            own,
-            before: pseudo('before'),
-            after: pseudo('after'),
-            hover: node.path ? (this.input.hovers.get(node.path) ?? null) : null,
-            mobile: mobileDecls,
-        };
-        if (!isRoot &&
-            !rule.own.size &&
-            !rule.before &&
-            !rule.after &&
-            !rule.hover &&
-            !rule.mobile?.size)
-            return null;
-        const key = isRoot ? '#root' : ruleKey(rule);
-        const existing = this.rules.get(key);
-        if (existing)
-            return existing.name;
-        const base = isRoot ? 'root' : tag.replace(/[^a-z0-9]/gi, '');
-        const count = (this.counters.get(base) ?? 0) + 1;
-        this.counters.set(base, count);
-        const name = isRoot ? 'root' : `${base}${String(count)}`;
-        this.rules.set(key, { name, rule });
-        return name;
-    }
-    rewriteUrls(decls) {
-        for (const [prop, value] of decls) {
-            if (!value.includes('url('))
-                continue;
-            decls.set(prop, value.replace(/url\((['"]?)(.*?)\1\)/g, (_m, _q, url) => `url("${this.asset(url)}")`));
-        }
-    }
-    asset(url) {
-        return this.input.assetMap[url] ?? url;
-    }
-    absolute(value) {
-        try {
-            return new URL(value, this.input.origin).toString();
-        }
-        catch {
-            return value;
-        }
-    }
-    /** Same-site links become paths in the clone; others stay absolute. */
-    link(value) {
-        try {
-            const url = new URL(value, this.input.origin);
-            if (!['http:', 'https:', 'mailto:', 'tel:'].includes(url.protocol))
-                return '#';
-            if (url.origin === new URL(this.input.origin).origin)
-                return `${url.pathname}${url.search}${url.hash}`;
-            return url.toString();
-        }
-        catch {
-            return value;
-        }
-    }
-}
-/** The CSS a node needs on top of its parent and the draft reset. */
-function declarations(node, styles, parentStyles, parentNode, index, isRoot, tag) {
-    const out = new Map();
-    const get = (prop) => styles[prop] ?? '';
-    const position = get('position') || 'static';
-    const display = get('display');
-    const defaultDisplay = DEFAULT_DISPLAY[tag] ?? (BLOCK_TAGS.has(tag) ? 'block' : 'inline');
-    if (display && display !== defaultDisplay)
-        out.set('display', display);
-    if (position !== 'static') {
-        out.set('position', position);
-        for (const side of ['top', 'right', 'bottom', 'left']) {
-            const value = get(side);
-            if (value && value !== 'auto')
-                out.set(side, value);
-        }
-        const z = get('z-index');
-        if (z && z !== 'auto')
-            out.set('z-index', z);
-    }
-    for (const [prop, fallback] of Object.entries(DEFAULTS)) {
-        if (prop === 'position' || prop === 'z-index')
-            continue;
-        const value = get(prop);
-        if (!value || value === fallback)
-            continue;
-        if (prop === 'row-gap' || prop === 'column-gap') {
-            if (!/flex|grid/.test(display))
-                continue;
-        }
-        out.set(prop, value);
-    }
-    for (const prop of INHERITED) {
-        const value = get(prop);
-        if (value && value !== (parentStyles[prop] ?? ''))
-            out.set(prop, value);
-    }
-    const widths = ['top', 'right', 'bottom', 'left'].map((side) => get(`border-${side}-width`));
-    if (widths.some((w) => w && w !== '0px')) {
-        const style = get('border-top-style') || 'solid';
-        for (const [k, side] of ['top', 'right', 'bottom', 'left'].entries()) {
-            const width = widths[k] ?? '0px';
-            if (width === '0px')
-                continue;
-            out.set(`border-${side}`, `${width} ${style} ${get(`border-${side}-color`)}`);
-        }
-    }
-    const transformed = out.has('transform') || out.has('rotate') || out.has('scale');
-    const origin = get('transform-origin');
-    if (transformed && origin)
-        out.set('transform-origin', origin);
-    const animation = get('animation-name');
-    if (animation && animation !== 'none') {
-        out.set('animation-name', animation);
-        out.set('animation-duration', get('animation-duration'));
-        out.set('animation-timing-function', get('animation-timing-function'));
-    }
-    for (const prop of ['grid-template-areas', 'grid-column', 'grid-row']) {
-        const value = out.get(prop);
-        if (value?.startsWith('auto'))
-            out.delete(prop);
-    }
-    // Reveal-on-scroll content still hidden at capture time: show it; the agent re-adds motion.
-    const opacity = Number(get('opacity') || '1');
-    if (opacity < 0.05 && position !== 'fixed' && (index.children.get(node.i)?.length ?? 0) > 0) {
-        out.delete('opacity');
-        out.delete('transform');
-        out.delete('translate');
-        out.delete('filter');
-    }
-    const hasChildren = (index.children.get(node.i) ?? []).some((child) => child.t === 1 || child.t === 3);
-    sizing(out, node, styles, parentStyles, parentNode, { isRoot, tag, position, hasChildren });
-    if (isRoot) {
-        if (get('background-color') === DEFAULTS['background-color'] &&
-            node.bg &&
-            node.bg !== DEFAULTS['background-color'])
-            out.set('background-color', node.bg);
-        for (const prop of ['margin-top', 'margin-bottom'])
-            out.delete(prop);
-    }
-    return out;
-}
-/** Fixed sizes only where they are part of the design; flowing content keeps fluid widths. */
-function sizing(out, node, styles, parentStyles, parentNode, shape) {
-    const { isRoot, tag, position, hasChildren } = shape;
-    const box = node.box;
-    if (!box)
-        return;
-    const [x, , width, height] = box;
-    if (isRoot) {
-        out.set('min-height', `${String(height)}px`);
-        const viewportWidth = parentNode?.box?.[2] ?? 0;
-        if (position === 'static' && x > 4 && viewportWidth === 0) {
-            out.set('max-width', `${String(width)}px`);
-            out.set('margin-left', 'auto');
-            out.set('margin-right', 'auto');
-        }
-        return;
-    }
-    const media = MEDIA_TAGS.has(tag);
-    const detached = position === 'absolute' || position === 'fixed';
-    const parentDisplay = parentStyles.display ?? '';
-    const flexRow = parentDisplay.includes('flex') && !(parentStyles['flex-direction'] ?? 'row').includes('column');
-    const inline = (styles.display ?? '').includes('inline') && !media;
-    if (inline && styles.display === 'inline')
-        return;
-    if (media || detached || !hasChildren) {
-        out.set('width', `${String(width)}px`);
-        out.set('height', `${String(height)}px`);
-        if (media && !detached)
-            out.set('max-width', '100%');
-        return;
-    }
-    if (flexRow && (styles['flex-grow'] ?? '0') === '0') {
-        out.set('width', `${String(width)}px`);
-        out.set('max-width', '100%');
-    }
-}
-function overrides(desktop, mobile) {
-    const out = new Map();
-    for (const key of [...new Set([...desktop.keys(), ...mobile.keys()])].sort()) {
-        const d = desktop.get(key);
-        const m = mobile.get(key) ?? resetValue(key);
-        if (m !== d && !(d === undefined && mobile.get(key) === undefined))
-            out.set(key, m);
-    }
-    return out;
-}
-function resetValue(prop) {
-    if (INHERITED_SET.has(prop))
-        return 'inherit';
-    if (prop === 'width' || prop === 'height' || /^(top|right|bottom|left)$/.test(prop))
-        return 'auto';
-    if (prop === 'display')
-        return 'revert';
-    if (prop.startsWith('border-'))
-        return 'none';
-    return DEFAULTS[prop] ?? 'initial';
-}
-function ruleKey(rule) {
-    const flat = (decls) => decls ? [...decls].map(([k, v]) => `${k}:${v}`).join(';') : '';
-    return [rule.own, rule.before, rule.after, rule.hover, rule.mobile].map(flat).join('|');
-}
-function block(selector, decls, indent = '  ') {
-    if (!decls.size)
-        return '';
-    const close = indent.length > 2 ? '  }' : '}';
-    return `${selector} {\n${[...decls].map(([k, v]) => `${indent}${k}: ${v};`).join('\n')}\n${close}\n`;
-}
-function hoverMap(records) {
-    const out = new Map();
-    for (const record of records) {
-        const diff = record.hover?.diff['.'] ?? record.forced.hover?.['.'];
-        if (!diff)
-            continue;
-        const decls = new Map();
-        for (const [prop, [, to]] of Object.entries(diff).sort(([a], [b]) => a.localeCompare(b)))
-            decls.set(prop, to);
-        if (decls.size)
-            out.set(record.path, decls);
-    }
-    return out;
-}
-function jsxTag(lower, styles, isRoot) {
-    if (lower === 'main' || lower === 'body' || lower === 'html')
-        return 'div';
-    if (isRoot && lower === 'span')
-        return 'div';
-    if (HTML_TAGS.has(lower))
-        return lower;
-    return (styles.display ?? '').startsWith('inline') ? 'span' : 'div';
-}
-function isInline(node, index) {
-    return (index.styles(node).display ?? '').startsWith('inline');
-}
-function normalizeRoute(route) {
-    const path = route.startsWith('/') ? route : `/${route}`;
-    return path.length > 1 ? path.replace(/\/+$/, '') : '/';
-}
-/** PascalCase name with a suffix (`HeroSection`, `PricingPage`); never starts with a digit. */
-function componentName(label, suffix) {
-    const name = label
-        .replace(/[^a-zA-Z0-9]+/g, ' ')
-        .trim()
-        .split(/\s+/)
-        .filter(Boolean)
-        .slice(0, 4)
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-        .join('');
-    if (!name)
-        return suffix;
-    return /^[A-Z]/.test(name) ? `${name}${suffix}` : `${suffix}${name}`;
-}
-function sectionSource(name, label, origin, jsx) {
-    return `// Draft generated by multiclone from ${origin} (section "${label.replace(/\n/g, ' ')}"). Polish freely.
-import styles from './${name}.module.css';
-
-export function ${name}() {
-  return (
-${jsx}
-  );
-}
-`;
-}
-function pageSource(pageName, slug, sections, origin) {
-    const imports = sections
-        .map((s) => `import { ${s.name} } from '@/sections/${slug}/${s.name}/${s.name}';`)
-        .join('\n');
-    const body = sections.map((s) => `      <${s.name} />`).join('\n');
-    return `// Draft page generated by multiclone from ${origin}. Sections are in src/sections/${slug}.
-${imports}
-
-export function ${pageName}() {
-  return (
-    <main id="main">
-${body}
-    </main>
-  );
-}
-`;
-}
-function draftCss(base, assetMap) {
-    const props = [
-        'font-family',
-        'font-size',
-        'font-weight',
-        'line-height',
-        'letter-spacing',
-        'color',
-        'background-color',
-    ];
-    const lines = props.flatMap((prop) => {
-        const value = base[prop];
-        return value && value !== DEFAULTS[prop] ? [`  ${prop}: ${value};`] : [];
-    });
-    const image = base['background-image'];
-    if (image && image !== 'none')
-        lines.push(`  background-image: ${image.replace(/url\((['"]?)(.*?)\1\)/g, (_m, _q, url) => `url("${assetMap[url] ?? url}")`)};`);
-    return `${DRAFT_RESET}\nbody {\n${lines.join('\n')}\n}\n`;
-}
-/** Same settings as the template's .prettierrc.json, so `npm run check` passes on drafts. */
-async function pretty(source, parser) {
-    try {
-        return await format(source, {
-            parser,
-            singleQuote: true,
-            semi: true,
-            trailingComma: 'all',
-            printWidth: 100,
-        });
-    }
-    catch {
-        return source;
-    }
-}
-/** Keeps the list of drafted pages and regenerates src/app/routes.ts from it. */
-async function registerPage(project, entries) {
-    const file = join(project, '.multiclone', 'pages.json');
-    const taken = new Set(entries.map((entry) => entry.route));
-    const pages = (await readJson(file).catch(() => [])).filter((page) => !taken.has(page.route));
-    pages.push(...entries);
-    pages.sort((a, b) => a.route.localeCompare(b.route));
-    await writeJson(file, pages);
-    const components = new Map(pages.map((page) => [page.component, page.file]));
-    const imports = [...components]
-        .sort(([a], [b]) => a.localeCompare(b))
-        .map(([component, path]) => `import { ${component} } from '${path}';`)
-        .join('\n');
-    const routes = pages
-        .map((page) => `  ${JSON.stringify(page.route)}: ${page.component},`)
-        .join('\n');
-    await writeFile(join(project, 'src', 'app', 'routes.ts'), await pretty(`// Generated by multiclone draft: one entry per drafted page.
-import type { ComponentType } from 'react';
-${imports}
-
-export const routes: Partial<Record<string, ComponentType>> = {
-${routes}
-};
-`, 'typescript'));
-    const index = join(project, 'src', 'styles', 'index.css');
-    const css = await readFile(index, 'utf8').catch(() => '');
-    if (css && !css.includes('draft.css'))
-        await writeFile(index, `${css.trimEnd()}\n@import './draft.css';\n`);
-}
-//# sourceMappingURL=draft.js.map