prd-to-flutter 0.1.0

package/dist/core/semantic-model-builder.js

@@ -0,0 +1,922 @@
+import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { join, relative } from 'node:path';
+import { failFast } from './fail-fast.js';
+import { logger } from './logger.js';
+import { markComplete } from './run-context.js';
+// ---------------------------------------------------------------------------
+export function buildSemanticModel(ctx, page, capture) {
+    let dom;
+    let a11y = null;
+    try {
+        dom = JSON.parse(readFileSync(capture.dom, 'utf8'));
+    }
+    catch (err) {
+        failFast({
+            stage: 'analyze',
+            action: `read ${capture.dom}`,
+            reason: `无法读取 dom.json：${err.message}`,
+            completedSteps: [...ctx.completedSteps],
+            pendingSteps: [...ctx.pendingSteps],
+            suggestions: ['执行 `p2f clean` 清理页面目录后重新执行 `p2f generate`。'],
+        });
+    }
+    try {
+        a11y = JSON.parse(readFileSync(capture.accessibility, 'utf8'));
+    }
+    catch {
+        // accessibility tree is best-effort; semantic modelling works without it.
+    }
+    const blocks = summarizeOutline(dom);
+    const candidates = collectInteractionCandidates(dom);
+    const blockReasons = [];
+    if (blocks.length === 0) {
+        blockReasons.push('DOM 归纳未产出任何结构块，可能是页面仍处于 loading 状态。');
+    }
+    const blocked = blockReasons.length > 0;
+    const designTokens = extractDesignTokens(capture.computedStyles);
+    const pageType = classifyPageType(page, blocks, candidates);
+    const outline = {
+        pageKey: ctx.pageKey,
+        pageName: ctx.options.pageName,
+        pageType,
+        route: {
+            path: page.routeInfo.path,
+            ...(page.routeInfo.name !== undefined && { name: page.routeInfo.name }),
+            ...(page.routeInfo.label !== undefined && { label: page.routeInfo.label }),
+            kind: page.routeInfo.kind,
+        },
+        blocks,
+        states: capture.states.map((s) => ({
+            name: s.name,
+            ...(s.screenshot ? { screenshot: s.screenshot } : {}),
+            captured: s.captured,
+            ...(s.notes ? { notes: s.notes } : {}),
+        })),
+        designTokens,
+        candidateInteractions: candidates,
+    };
+    const analysisDir = join(ctx.pageDir, 'analysis');
+    mkdirSync(analysisDir, { recursive: true });
+    const summaryPath = join(analysisDir, 'page-summary.md');
+    writeFileSync(summaryPath, renderSummary(ctx, page, outline, blockReasons, capture), 'utf8');
+    const uiStructurePath = join(analysisDir, 'ui-structure.md');
+    writeFileSync(uiStructurePath, renderUiStructure(outline), 'utf8');
+    const interactionModelPath = join(analysisDir, 'interaction-model.md');
+    writeFileSync(interactionModelPath, renderInteractionModel(outline), 'utf8');
+    const textStyleMap = buildTextStyleMap(capture.computedStyles);
+    assertTextStyleMapAvailable(ctx, capture, textStyleMap);
+    const textStyleMapJsonPath = join(analysisDir, 'text-style-map.json');
+    writeFileSync(textStyleMapJsonPath, JSON.stringify({
+        pageKey: ctx.pageKey,
+        pageName: ctx.options.pageName,
+        source: {
+            computedStyles: relative(ctx.taskDir, capture.computedStyles),
+        },
+        entries: textStyleMap,
+    }, null, 2) + '\n', 'utf8');
+    const textStyleMapPath = join(analysisDir, 'text-style-map.md');
+    writeFileSync(textStyleMapPath, renderTextStyleMap(textStyleMap, textStyleMapJsonPath, ctx), 'utf8');
+    const candidateInteractionsPath = join(capture.runtimeDir, 'interactions.candidate.json');
+    writeFileSync(candidateInteractionsPath, JSON.stringify({ pageKey: ctx.pageKey, candidates }, null, 2) + '\n', 'utf8');
+    logger.success(`Semantic model → blocks=${blocks.length} candidates=${candidates.length} textStyles=${textStyleMap.length} blocked=${blocked}`);
+    markComplete(ctx, 'build-semantic-model');
+    // Use a11y only as a signal source — no need to surface it here beyond what
+    // we already baked into candidates.
+    void a11y;
+    return {
+        pageKey: ctx.pageKey,
+        pageName: ctx.options.pageName,
+        pageType,
+        blocked,
+        blockReasons,
+        summaryPath,
+        uiStructurePath,
+        interactionModelPath,
+        textStyleMapPath,
+        textStyleMapJsonPath,
+        candidateInteractionsPath,
+        outline,
+    };
+}
+// ---------------------------------------------------------------------------
+// Outline (DOM → structural blocks)
+// ---------------------------------------------------------------------------
+/**
+ * The phone-screen root has a predictable shape:
+ *   .phone-screen
+ *     > (nav wrapper)
+ *     > .phone-screen-inner-container or similar
+ *         > (actual content tree)
+ *
+ * We descend until we find a node with multiple meaningful children, then
+ * classify them.  Anything smaller than 24px on one side is ignored.
+ */
+const MIN_SIDE = 24;
+function summarizeOutline(root) {
+    // Walk down the DOM until we hit a level with several visible children.
+    let cursor = root;
+    while (cursor.children && cursor.children.length === 1) {
+        cursor = cursor.children[0];
+    }
+    const kids = (cursor.children ?? []).filter(isVisible);
+    const out = [];
+    let idSeq = 1;
+    for (const child of kids) {
+        const block = classifyBlock(child, () => `b${idSeq++}`);
+        if (block)
+            out.push(block);
+    }
+    return out;
+}
+function isVisible(n) {
+    if (!n.rect)
+        return false;
+    if (n.rect.w < MIN_SIDE || n.rect.h < MIN_SIDE)
+        return false;
+    return true;
+}
+function classifyBlock(node, nextId) {
+    if (!node.rect)
+        return null;
+    // Before classifying, fast-forward past wrapper chains of the form
+    // <div><div><div><real content>.  Wrappers inflate the outline depth and
+    // rarely carry semantic meaning on their own.  We stop as soon as there are
+    // multiple visible children, or we hit something that is not a plain
+    // container.
+    let effective = node;
+    while (true) {
+        const kids = (effective.children ?? []).filter(isVisible);
+        if (kids.length !== 1)
+            break;
+        const only = kids[0];
+        const onlyType = guessType(only);
+        const currentType = guessType(effective);
+        // Only skip when current is a generic container and child fills roughly
+        // the same rect (the wrapper contributes no layout semantics).
+        const fillsParent = effective.rect && only.rect &&
+            only.rect.w >= effective.rect.w * 0.8 &&
+            only.rect.h >= effective.rect.h * 0.6;
+        if (currentType !== 'container' || !fillsParent)
+            break;
+        // Don't skip past navigationally interesting wrappers.
+        if (onlyType !== 'container' && onlyType !== 'card')
+            break;
+        effective = only;
+    }
+    const block = {
+        id: nextId(),
+        type: guessType(effective),
+        rect: effective.rect,
+    };
+    const txt = cleanText(effective);
+    if (txt)
+        block.text = txt;
+    if (effective.attrs?.role)
+        block.role = effective.attrs.role;
+    // Recurse into direct children when the block is a container-like node and
+    // has several children worth naming.
+    const meaningfulKids = (effective.children ?? []).filter(isVisible);
+    if ((block.type === 'container' || block.type === 'card' || block.type === 'list') &&
+        meaningfulKids.length >= 2 &&
+        meaningfulKids.length <= 24) {
+        const childBlocks = [];
+        for (const k of meaningfulKids) {
+            const cb = classifyBlock(k, nextId);
+            if (cb)
+                childBlocks.push(cb);
+        }
+        if (childBlocks.length)
+            block.children = childBlocks;
+    }
+    return block;
+}
+function guessType(node) {
+    const cls = (node.class ?? '').toLowerCase();
+    const tag = node.tag.toLowerCase();
+    const role = node.attrs?.role;
+    if (role === 'tablist' || cls.includes('tabs') || cls.includes('tab-bar'))
+        return 'tab-bar';
+    if (cls.includes('segment') || cls.includes('switch-button-group'))
+        return 'segmented-control';
+    if (cls.includes('nav-bar') || cls.includes('app-bar') || cls.includes('detail-nav'))
+        return 'app-bar';
+    if (tag === 'button' || role === 'button' || cls.endsWith('-btn') || cls.includes('button'))
+        return 'button';
+    if (tag === 'input' || tag === 'textarea' || role === 'textbox' || cls.includes('input') || cls.includes('field'))
+        return 'form-field';
+    if (tag === 'img' || cls.includes('image'))
+        return 'image';
+    if (tag === 'svg' || cls.includes('icon'))
+        return 'icon';
+    if (tag === 'canvas' || cls.includes('chart') || cls.includes('kline') || cls.includes('klinecharts'))
+        return 'chart';
+    if (tag === 'ul' || tag === 'ol' || cls.includes('list') || role === 'list')
+        return 'list';
+    if (cls.includes('card'))
+        return 'card';
+    if (tag === 'li' || role === 'listitem')
+        return 'list-item';
+    if (cleanText(node))
+        return 'text';
+    return 'container';
+}
+function cleanText(node) {
+    return cleanInlineText(node.text);
+}
+function cleanInlineText(value) {
+    if (typeof value !== 'string')
+        return undefined;
+    const t = value.trim();
+    if (!t)
+        return undefined;
+    if (t.length > 120)
+        return t.slice(0, 117) + '…';
+    return t;
+}
+function hasScrollableChild(root) {
+    if (!root.rect)
+        return false;
+    const { h } = root.rect;
+    let maxChildBottom = 0;
+    (root.children ?? []).forEach((c) => {
+        if (c.rect)
+            maxChildBottom = Math.max(maxChildBottom, c.rect.y + c.rect.h);
+    });
+    return maxChildBottom > h + 40;
+}
+// ---------------------------------------------------------------------------
+// Candidate interactions
+// ---------------------------------------------------------------------------
+function collectInteractionCandidates(root) {
+    const out = [];
+    let idSeq = 1;
+    const nextId = () => `int${idSeq++}`;
+    // --- Regex toolbox ------------------------------------------------------
+    const EXPAND_RE = /(expand|collapse|toggle|fold|unfold|chevron|arrow-down|arrow-up|more|caret)/i;
+    const DROPDOWN_RE = /(dropdown|picker|select|selector|menu|popover)/i;
+    const SEGMENT_RE = /(\bpill\b|\bchip\b|segment|switch|mode|option|choice|filter|period-tab)/i;
+    const TAB_CONTAINER_RE = /(tabs$|tab-bar|tab-list|tabs-|tab-content|tablist)/i;
+    const DIALOG_TEXT_RE = /(确认|提交|取消|删除|详情|更多|filter|筛选|选择|edit|add|new|create|confirm|remove)/i;
+    const ACTIVE_RE = /--active\b|\bactive\b|\bselected\b|\bchecked\b/;
+    // First pass: find sibling groups that look like segmented control bars —
+    // 2+ direct children with at least one carrying an "active" marker.
+    const segmentedParents = new Set();
+    (function scan(node) {
+        const kids = (node.children ?? []).filter((c) => c.rect && c.rect.w > 0 && c.rect.h > 0);
+        if (kids.length >= 2) {
+            const anyActive = kids.some((k) => {
+                const kc = (k.class ?? '').toLowerCase();
+                return ACTIVE_RE.test(kc) || k.attrs?.['aria-selected'] === 'true' || k.attrs?.['aria-checked'] === 'true';
+            });
+            if (anyActive) {
+                // Require a reasonably uniform child shape (same tag) to avoid misfiring
+                // on heterogeneous trees like "icon + text + icon".
+                const firstTag = kids[0].tag;
+                const allSameTag = kids.every((k) => k.tag === firstTag);
+                if (allSameTag && (firstTag === 'button' || firstTag === 'div' || firstTag === 'span' || firstTag === 'a')) {
+                    segmentedParents.add(node);
+                }
+            }
+        }
+        for (const c of node.children ?? [])
+            scan(c);
+    })(root);
+    // Helper: pick the ancestor (or self) that represents the real action
+    // target. We prefer <button>, <a>, role=button, or nodes with an onclick
+    // attribute — `cursor: pointer` alone is unreliable because CSS pointer
+    // propagates to child spans (so every label inside a button becomes
+    // 'clickable' too). We only fall back to the nearest clickable node if no
+    // semantic action ancestor exists.
+    function nearestClickable(node, parents) {
+        const chain = [...parents, node];
+        function isActionNode(n) {
+            const t = n.tag.toLowerCase();
+            const r = n.attrs?.role;
+            return t === 'button' || t === 'a' || r === 'button' || r === 'link' ||
+                !!n.attrs?.onclick;
+        }
+        // Outer-most action node wins (i.e. the <button>, not a nested <span>).
+        for (let i = 0; i < chain.length; i += 1) {
+            if (isActionNode(chain[i]))
+                return chain[i];
+        }
+        // Fall back to inner-most clickable if we only have cursor:pointer hints.
+        for (let i = chain.length - 1; i >= 0; i -= 1) {
+            if (chain[i].clickable)
+                return chain[i];
+        }
+        return null;
+    }
+    function already(selector, kind, label) {
+        return out.some((c) => c.selector === selector && c.kind === kind && (c.label ?? '') === (label ?? ''));
+    }
+    function walk(node, parents) {
+        const cls = (node.class ?? '').toLowerCase();
+        const tag = node.tag.toLowerCase();
+        const role = node.attrs?.role;
+        const text = cleanText(node);
+        const parent = parents[parents.length - 1] ?? null;
+        const isActive = ACTIVE_RE.test(cls) ||
+            node.attrs?.['aria-selected'] === 'true' ||
+            node.attrs?.['aria-checked'] === 'true';
+        // If this node lives inside a segmented-parent group and has a visible
+        // label, register it as tab-change regardless of its class naming.
+        const segParent = parents.find((p) => segmentedParents.has(p));
+        if (segParent && text && text.length <= 40) {
+            // Pick a selector that resolves to THIS button — prefer the nearest
+            // clickable node (button itself), not its text span.
+            const target = nearestClickable(node, parents) ?? node;
+            const selector = selectorFor(target);
+            if (!already(selector, 'tab-change', text)) {
+                out.push({
+                    id: nextId(),
+                    kind: 'tab-change',
+                    selector,
+                    label: text,
+                    ...(target.rect !== undefined && { bounds: target.rect }),
+                    description: `分段按钮候选：${text}`,
+                    confidence: 0.75,
+                    group: selectorFor(segParent),
+                    isActive,
+                });
+            }
+            // Stay and allow other matchers to contribute too if they want (e.g.
+            // dropdown inside a tab). But in practice that rarely overlaps.
+        }
+        // ---------- Tab-style candidates (class-based) ----------
+        const isTabContainer = role === 'tablist' || TAB_CONTAINER_RE.test(cls);
+        const looksLikeTab = (role === 'tab' || (cls.includes('tab') && !isTabContainer && !cls.includes('tabbar'))) ||
+            SEGMENT_RE.test(cls);
+        if (looksLikeTab && text && text.length <= 40) {
+            const target = nearestClickable(node, parents) ?? node;
+            const selector = selectorFor(target);
+            if (!already(selector, 'tab-change', text)) {
+                out.push({
+                    id: nextId(),
+                    kind: 'tab-change',
+                    selector,
+                    label: text,
+                    ...(target.rect !== undefined && { bounds: target.rect }),
+                    description: `Tab / 分段候选：${text}`,
+                    confidence: 0.7,
+                    ...(parent ? { group: selectorFor(parent) } : {}),
+                    isActive,
+                });
+            }
+            return;
+        }
+        // ---------- Dropdown / picker triggers ----------
+        const hasCaretChild = (node.children ?? []).some((c) => /(caret|arrow|chevron)/i.test(c.class ?? ''));
+        const looksLikeDropdown = DROPDOWN_RE.test(cls) || hasCaretChild;
+        if (looksLikeDropdown && node.clickable) {
+            // Skip when a clickable descendant will be registered anyway — we prefer
+            // the outer trigger to fire once (not once for `.chart-dropdown` and
+            // again for its `.chart-dropdown-arrow`).
+            const hasClickableChild = (node.children ?? []).some((c) => c.clickable);
+            if (!hasClickableChild) {
+                const selector = selectorFor(node);
+                if (!already(selector, 'dropdown', text)) {
+                    out.push({
+                        id: nextId(),
+                        kind: 'dropdown',
+                        selector,
+                        ...(text !== undefined && { label: text }),
+                        ...(node.rect !== undefined && { bounds: node.rect }),
+                        description: `下拉 / 选择器触发：${text ?? node.tag}`,
+                        confidence: 0.65,
+                    });
+                }
+                return;
+            }
+        }
+        // ---------- Dialog-trigger (text-based) ----------
+        const looksLikeButton = tag === 'button' || role === 'button' || cls.endsWith('-btn') || cls.includes('btn-');
+        if (looksLikeButton && text && DIALOG_TEXT_RE.test(text)) {
+            out.push({
+                id: nextId(),
+                kind: 'dialog-trigger',
+                selector: selectorFor(node),
+                label: text,
+                ...(node.rect !== undefined && { bounds: node.rect }),
+                description: `按钮可能触发弹窗 / 抽屉：${text}`,
+                confidence: 0.55,
+            });
+            return;
+        }
+        // ---------- Text inputs ----------
+        if (tag === 'input' || tag === 'textarea' || role === 'textbox') {
+            out.push({
+                id: nextId(),
+                kind: 'input-focus',
+                selector: selectorFor(node),
+                ...(text !== undefined && { label: text }),
+                ...(node.rect !== undefined && { bounds: node.rect }),
+                description: `输入控件 focus：${text ?? node.tag}`,
+                confidence: 0.9,
+            });
+            return;
+        }
+        // ---------- Expand / collapse icon buttons ----------
+        const looksExpandable = looksLikeButton && EXPAND_RE.test(cls);
+        if (looksExpandable) {
+            out.push({
+                id: nextId(),
+                kind: 'expand-toggle',
+                selector: selectorFor(node),
+                ...(text !== undefined && { label: text }),
+                ...(node.rect !== undefined && { bounds: node.rect }),
+                description: `展开 / 折叠按钮：${text ?? node.tag}`,
+                confidence: 0.65,
+            });
+            return;
+        }
+        // ---------- Generic clickable fallback ----------
+        if (node.clickable &&
+            node.rect &&
+            node.rect.w >= 20 && node.rect.h >= 20 &&
+            !TAB_CONTAINER_RE.test(cls) &&
+            !cls.endsWith('-grid') &&
+            !cls.endsWith('-list') &&
+            !cls.endsWith('-row') &&
+            // Prefer inner-most clickable leaf.
+            !(node.children ?? []).some((c) => c.clickable)) {
+            out.push({
+                id: nextId(),
+                kind: hasCaretChild || DROPDOWN_RE.test(cls) ? 'dropdown' :
+                    EXPAND_RE.test(cls) ? 'expand-toggle' :
+                        'dialog-trigger',
+                selector: selectorFor(node),
+                ...(text !== undefined && { label: text }),
+                ...(node.rect !== undefined && { bounds: node.rect }),
+                description: `可点击元素（cursor:pointer）：${text ?? (cls || node.tag)}`,
+                confidence: 0.35,
+            });
+        }
+    }
+    (function dfs(node, parents) {
+        walk(node, parents);
+        const nextParents = [...parents, node];
+        for (const c of node.children ?? [])
+            dfs(c, nextParents);
+    })(root, []);
+    // Dedup:
+    //   tab-change → by (group, label), so different groups with the same label
+    //     (e.g. two "Monthly" tabs in different bars) both survive.
+    //   everything else → by (kind, selector, label).  Importantly, if the same
+    //     selector is registered with different labels they'll survive.
+    const seen = new Set();
+    const kept = [];
+    for (const c of out) {
+        const key = c.kind === 'tab-change'
+            ? `tab:${c.group ?? ''}:${c.label ?? ''}`
+            : `${c.kind}:${c.selector}:${c.label ?? ''}`;
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        kept.push(c);
+    }
+    // Final filter: drop candidates without a label when their selector would
+    // resolve to multiple elements on the page (we can't execute them safely).
+    // We approximate "resolves to many" by checking whether the base selector
+    // has already been registered with another label — if so we know there are
+    // multiple matches and the unlabeled one can't disambiguate.
+    const labeledSelectors = new Set(kept.filter((c) => c.label).map((c) => c.selector));
+    return kept.filter((c) => c.label || !labeledSelectors.has(c.selector));
+}
+function walkDomWithParent(node, parent, visit) {
+    visit(node, parent);
+    for (const c of node.children ?? [])
+        walkDomWithParent(c, node, visit);
+}
+function walkDom(node, visit) {
+    visit(node);
+    for (const c of node.children ?? [])
+        walkDom(c, visit);
+}
+function selectorFor(node) {
+    if (node.id)
+        return `#${CSS.escape(node.id)}`;
+    const cls = (node.class ?? '').trim().split(/\s+/).filter(Boolean);
+    if (cls.length)
+        return `${node.tag}.${cls.slice(0, 2).join('.')}`;
+    return node.tag;
+}
+// Node lacks `CSS.escape` in older targets; provide a minimal fallback here.
+const CSS = globalThis.CSS ?? {
+    escape(s) {
+        return s.replace(/[^a-zA-Z0-9_-]/g, (ch) => `\\${ch.charCodeAt(0).toString(16)} `);
+    },
+};
+function extractDesignTokens(computedStylesPath) {
+    let records;
+    try {
+        records = JSON.parse(readFileSync(computedStylesPath, 'utf8'));
+    }
+    catch {
+        return {};
+    }
+    // Pick the first record whose tag is `body`/`html`/`div.phone-screen` for
+    // a representative background + text color.
+    const tokens = {};
+    for (const r of records) {
+        if (tokens.pageBackground === undefined &&
+            (r.class ?? '').includes('phone-screen') &&
+            typeof r['background-color'] === 'string') {
+            tokens.pageBackground = r['background-color'];
+        }
+    }
+    // Heuristically pick a few more tokens: most common color / font-size.
+    const colorCounts = new Map();
+    const fontCounts = new Map();
+    for (const r of records) {
+        const c = r['color'];
+        if (typeof c === 'string')
+            colorCounts.set(c, (colorCounts.get(c) ?? 0) + 1);
+        const f = r['font-size'];
+        if (typeof f === 'string')
+            fontCounts.set(f, (fontCounts.get(f) ?? 0) + 1);
+    }
+    const topColor = topOf(colorCounts);
+    const topFont = topOf(fontCounts);
+    if (topColor)
+        tokens.textPrimary = topColor;
+    if (topFont)
+        tokens.baseFontSize = topFont;
+    return tokens;
+}
+function topOf(counts) {
+    let best = null;
+    for (const e of counts.entries()) {
+        if (!best || e[1] > best[1])
+            best = e;
+    }
+    return best?.[0];
+}
+// ---------------------------------------------------------------------------
+// Text style map (captured CSS → YouFi TextStyleExtension token)
+// ---------------------------------------------------------------------------
+const YOUFI_TEXT_STYLES = [
+    { token: 'number1B', fontSize: 34, fontWeight: 700, lineHeight: 46 },
+    { token: 'number2B', fontSize: 30, fontWeight: 700, lineHeight: 40 },
+    { token: 'number3B', fontSize: 24, fontWeight: 700, lineHeight: 32 },
+    { token: 'titleB', fontSize: 20, fontWeight: 700, lineHeight: 28 },
+    { token: 'titleM', fontSize: 20, fontWeight: 500, lineHeight: 28 },
+    { token: 'tabB', fontSize: 18, fontWeight: 700, lineHeight: 24 },
+    { token: 'tabM', fontSize: 18, fontWeight: 500, lineHeight: 24 },
+    { token: 'headlineB', fontSize: 17, fontWeight: 700, lineHeight: 22 },
+    { token: 'headlineM', fontSize: 17, fontWeight: 500, lineHeight: 22 },
+    { token: 'bodyM', fontSize: 15, fontWeight: 500, lineHeight: 20 },
+    { token: 'bodyR', fontSize: 15, fontWeight: 400, lineHeight: 20 },
+    { token: 'small1M', fontSize: 13, fontWeight: 500, lineHeight: 16 },
+    { token: 'small1R', fontSize: 13, fontWeight: 400, lineHeight: 16 },
+    { token: 'small2R', fontSize: 12, fontWeight: 400, lineHeight: 16 },
+    { token: 'small3R', fontSize: 11, fontWeight: 400, lineHeight: 14 },
+    { token: 'small4M', fontSize: 10, fontWeight: 500, lineHeight: 14 },
+    { token: 'small4R', fontSize: 10, fontWeight: 400, lineHeight: 14 },
+];
+function buildTextStyleMap(computedStylesPath) {
+    let records = [];
+    try {
+        records = JSON.parse(readFileSync(computedStylesPath, 'utf8'));
+    }
+    catch {
+        return [];
+    }
+    const out = [];
+    const seen = new Set();
+    for (const style of records) {
+        const text = cleanInlineText(style.text);
+        if (!text)
+            continue;
+        const mapped = mapCssToYouFiTextStyle(style);
+        const rect = normalizeRect(style.rect);
+        const key = [
+            text,
+            style.tag,
+            style.class ?? '',
+            rect ? `${rect.x},${rect.y},${rect.w},${rect.h}` : '',
+            mapped.token,
+        ].join('|');
+        if (seen.has(key))
+            continue;
+        seen.add(key);
+        out.push({
+            id: `txt${out.length + 1}`,
+            text,
+            tag: style.tag,
+            ...(style.class !== undefined && { className: style.class }),
+            selector: selectorFor(style),
+            ...(rect !== undefined && { rect }),
+            css: {
+                ...(typeof style['font-size'] === 'string' && { fontSize: style['font-size'] }),
+                ...(typeof style['font-weight'] === 'string' && { fontWeight: style['font-weight'] }),
+                ...(typeof style['line-height'] === 'string' && { lineHeight: style['line-height'] }),
+                ...(typeof style.color === 'string' && { color: style.color }),
+            },
+            youfiTextStyle: mapped.token,
+            confidence: mapped.confidence,
+            reason: mapped.reason,
+        });
+    }
+    return out;
+}
+function assertTextStyleMapAvailable(ctx, capture, entries) {
+    if (entries.length > 0)
+        return;
+    let visibleText = '';
+    try {
+        visibleText = readFileSync(capture.visibleText, 'utf8').trim();
+    }
+    catch {
+        // If visible text was not captured, don't block here; other capture checks
+        // are responsible for detecting an invalid page load.
+    }
+    if (!visibleText)
+        return;
+    failFast({
+        stage: 'analyze',
+        action: 'build text-style-map',
+        reason: '`cli/runtime/computed-styles.json` 未包含文本样式记录，但页面存在可见文本，无法可靠映射 Flutter textStyle。',
+        completedSteps: [...ctx.completedSteps],
+        pendingSteps: [...ctx.pendingSteps],
+        suggestions: [
+            '重新执行最新版 `p2f generate`，确保 capture 阶段生成带 `text` / `rect` 字段的 `computed-styles.json`。',
+            '如果仍失败，检查原型文本是否由 canvas / 图片渲染，或是否超出 computed style 采集上限。',
+        ],
+    });
+}
+function normalizeRect(value) {
+    if (!value || typeof value !== 'object')
+        return undefined;
+    const rect = value;
+    if (typeof rect.x !== 'number' ||
+        typeof rect.y !== 'number' ||
+        typeof rect.w !== 'number' ||
+        typeof rect.h !== 'number') {
+        return undefined;
+    }
+    return { x: rect.x, y: rect.y, w: rect.w, h: rect.h };
+}
+function mapCssToYouFiTextStyle(style) {
+    const fontSize = parseCssPx(style['font-size']);
+    const fontWeight = parseCssWeight(style['font-weight']);
+    const lineHeight = parseCssPx(style['line-height']);
+    let best = null;
+    for (const target of YOUFI_TEXT_STYLES) {
+        const sizeDiff = fontSize === null ? 0 : Math.abs(fontSize - target.fontSize);
+        const weightDiff = fontWeight === null ? 0 : Math.abs(fontWeight - target.fontWeight);
+        const lineDiff = lineHeight === null ? null : Math.abs(lineHeight - target.lineHeight);
+        const score = sizeDiff * 8 + weightDiff / 80 + (lineDiff ?? 0) * 2;
+        if (!best || score < best.score) {
+            best = { token: target.token, score, sizeDiff, weightDiff, lineDiff };
+        }
+    }
+    if (!best) {
+        return {
+            token: 'bodyR',
+            confidence: 'low',
+            reason: '未能读取 CSS 字体信息，兜底使用 bodyR；实现时需人工复核。',
+        };
+    }
+    const confidence = best.sizeDiff <= 0.4 && best.weightDiff <= 1 && (best.lineDiff === null || best.lineDiff <= 0.6)
+        ? 'high'
+        : best.score <= 8
+            ? 'medium'
+            : 'low';
+    const cssText = [
+        style['font-size'] ?? '?',
+        style['font-weight'] ?? '?',
+        style['line-height'] ?? '?',
+    ].join(' / ');
+    return {
+        token: best.token,
+        confidence,
+        reason: `CSS ${cssText} -> themeService.textStyles.${best.token}`,
+    };
+}
+function parseCssPx(value) {
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (trimmed === '' || trimmed === 'normal')
+        return null;
+    const match = /^(-?\d+(?:\.\d+)?)px$/.exec(trimmed);
+    if (!match)
+        return null;
+    const parsed = Number(match[1]);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function parseCssWeight(value) {
+    if (typeof value !== 'string')
+        return null;
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'normal')
+        return 400;
+    if (normalized === 'bold')
+        return 700;
+    const parsed = Number(normalized);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function renderTextStyleMap(entries, jsonPath, ctx) {
+    const lines = [];
+    lines.push(`# 文本样式映射 — ${ctx.options.pageName}`);
+    lines.push('');
+    lines.push('> 该文件由新版 `cli/runtime/computed-styles.json` 生成，用于把原型 CSS 字体样式映射到 YouFi `themeService.textStyles.*`。');
+    lines.push('> 实现 Flutter 文本时必须优先按本表选择 token，不要凭视觉猜 `bodyM/bodyR`。');
+    lines.push('');
+    lines.push(`- json: \`${relativeToPage(ctx, jsonPath)}\``);
+    lines.push(`- 条目数: ${entries.length}`);
+    if (entries.length === 0) {
+        lines.push('- 警告：`computed-styles.json` 未包含文本节点样式记录，请重新执行新版 p2f 采集。');
+    }
+    lines.push('');
+    const comboCounts = new Map();
+    for (const e of entries) {
+        const combo = `${e.css.fontSize ?? '?'} / ${e.css.fontWeight ?? '?'} / ${e.css.lineHeight ?? '?'}`;
+        const existing = comboCounts.get(combo);
+        if (existing) {
+            existing.count += 1;
+        }
+        else {
+            comboCounts.set(combo, {
+                count: 1,
+                token: e.youfiTextStyle,
+                confidence: e.confidence,
+                reason: e.reason,
+            });
+        }
+    }
+    lines.push('## CSS 组合映射');
+    lines.push('');
+    lines.push('| CSS font-size / weight / line-height | YouFi textStyle | 置信度 | 数量 |');
+    lines.push('| --- | --- | --- | ---: |');
+    for (const [combo, data] of [...comboCounts.entries()].sort((a, b) => b[1].count - a[1].count)) {
+        lines.push(`| ${escapeMd(combo)} | \`themeService.textStyles.${data.token}\` | ${data.confidence} | ${data.count} |`);
+    }
+    lines.push('');
+    lines.push('## 文本节点映射');
+    lines.push('');
+    lines.push('| id | 文本 | selector | rect | CSS | YouFi textStyle | 置信度 |');
+    lines.push('| --- | --- | --- | --- | --- | --- | --- |');
+    for (const e of entries) {
+        const rect = e.rect ? `${e.rect.x},${e.rect.y} ${e.rect.w}×${e.rect.h}` : '';
+        const css = `${e.css.fontSize ?? '?'} / ${e.css.fontWeight ?? '?'} / ${e.css.lineHeight ?? '?'}`;
+        lines.push(`| ${e.id} | ${escapeMd(e.text)} | \`${escapeMd(e.selector)}\` | ${escapeMd(rect)} | ${escapeMd(css)} | \`themeService.textStyles.${e.youfiTextStyle}\` | ${e.confidence} |`);
+    }
+    lines.push('');
+    lines.push('## 使用规则');
+    lines.push('');
+    lines.push('- 同一文本在本表中有高置信度映射时，Flutter 实现必须使用对应 `themeService.textStyles.*`。');
+    lines.push('- 如果最终实现改用其他 token，必须在实现说明中解释原因。');
+    lines.push('- 颜色仍按 `themeService.colors.*` 语义映射；涨跌色优先走项目已有行情颜色 helper。');
+    return lines.join('\n') + '\n';
+}
+function escapeMd(value) {
+    return value.replace(/\|/g, '\\|').replace(/\n/g, ' ');
+}
+// ---------------------------------------------------------------------------
+// Page archetype classifier
+// ---------------------------------------------------------------------------
+function classifyPageType(page, blocks, candidates) {
+    const hasForm = blocks.some((b) => b.type === 'form-field' || flatten(b).some((c) => c.type === 'form-field'));
+    const hasList = blocks.some((b) => b.type === 'list' || flatten(b).some((c) => c.type === 'list'));
+    const hasChart = blocks.some((b) => b.type === 'chart' || flatten(b).some((c) => c.type === 'chart'));
+    const hasTabs = candidates.some((c) => c.kind === 'tab-change');
+    const routeLabel = (page.routeInfo.label ?? '').toLowerCase();
+    if (hasForm && !hasChart)
+        return 'form-page';
+    if (hasChart || (hasTabs && /详情|detail/i.test(page.routeInfo.label ?? '')))
+        return 'detail-page';
+    if (hasList && !hasChart)
+        return 'list-page';
+    if (hasTabs || /首页|home|dashboard/i.test(routeLabel))
+        return 'dashboard-page';
+    return 'unknown';
+}
+function flatten(b) {
+    return [b, ...(b.children ?? []).flatMap(flatten)];
+}
+// ---------------------------------------------------------------------------
+// Renderers
+// ---------------------------------------------------------------------------
+function renderSummary(ctx, page, outline, blockReasons, capture) {
+    const lines = [];
+    lines.push(`# 页面摘要 — ${outline.pageName}`);
+    lines.push('');
+    if (blockReasons.length) {
+        lines.push('> **blocked: true**');
+        for (const r of blockReasons)
+            lines.push(`> - ${r}`);
+        lines.push('');
+    }
+    lines.push(`- 页面目录名：\`${outline.pageKey}\``);
+    lines.push(`- 页面类型：\`${outline.pageType}\``);
+    lines.push(`- 路由：\`${outline.route.path}\` (${outline.route.kind})`);
+    if (outline.route.name)
+        lines.push(`- 路由名称：\`${outline.route.name}\``);
+    if (outline.route.label)
+        lines.push(`- 路由标题：${outline.route.label}`);
+    lines.push(`- Vue 入口：\`${page.entryRelative}\``);
+    lines.push(`- 原型提交：${ctx.prototypeCommit?.slice(0, 10) ?? '（未知）'}`);
+    lines.push(`- 原型来源：${ctx.prototypeSource ?? '（未知）'}`);
+    lines.push('');
+    lines.push('## 截图');
+    lines.push('');
+    lines.push('- CLI 不再在 `p2f generate` 阶段截图。');
+    lines.push('- agent 必须先执行 `cli/analysis/screenshot-exploration-plan.md` 中的 live-page 探索并补齐 `agent/screenshots/`。');
+    if (outline.states.length) {
+        for (const s of outline.states) {
+            lines.push(`- ${s.screenshot ? `\`${relativeToPage(ctx, s.screenshot)}\`` : '（无截图）'} · ${s.name} · captured=${s.captured}`);
+        }
+    }
+    lines.push('');
+    lines.push('## 关键结构块');
+    lines.push('');
+    if (outline.blocks.length === 0) {
+        lines.push('（未识别到结构块，可能是采集不完整）');
+    }
+    else {
+        for (const b of outline.blocks) {
+            lines.push(renderBlockOneLine(b));
+        }
+    }
+    lines.push('');
+    lines.push('## 候选交互');
+    lines.push('');
+    if (outline.candidateInteractions.length === 0) {
+        lines.push('（本版采集未识别出交互候选；agent 仍需在 live page 中主动检查可交互区域。）');
+    }
+    else {
+        for (const c of outline.candidateInteractions.slice(0, 30)) {
+            lines.push(`- \`${c.selector}\` · ${c.kind}${c.label ? ` · ${c.label}` : ''}（置信度=${c.confidence.toFixed(1)}）`);
+        }
+        if (outline.candidateInteractions.length > 30) {
+            lines.push(`- …共 ${outline.candidateInteractions.length} 项（仅展示前 30）`);
+        }
+    }
+    lines.push('');
+    lines.push('## 设计 Token（启发式抽取）');
+    lines.push('');
+    if (Object.keys(outline.designTokens).length === 0) {
+        lines.push('（未抽到稳定 token）');
+    }
+    else {
+        for (const [k, v] of Object.entries(outline.designTokens)) {
+            lines.push(`- \`${k}\`: \`${v}\``);
+        }
+    }
+    lines.push('');
+    lines.push('## 未完成事项');
+    lines.push('');
+    lines.push('- 由 agent 基于本目录数据和 YouFi 项目规范实现 Flutter 页面');
+    // keep unused-lint happy
+    void capture;
+    return lines.join('\n') + '\n';
+}
+function renderUiStructure(outline) {
+    const lines = [`# UI 结构 — ${outline.pageName}`, ''];
+    if (outline.blocks.length === 0) {
+        lines.push('（未识别到结构块）');
+    }
+    else {
+        for (const b of outline.blocks)
+            renderBlockTree(b, 0, lines);
+    }
+    return lines.join('\n') + '\n';
+}
+function renderBlockTree(b, depth, lines) {
+    const indent = '  '.repeat(depth);
+    lines.push(`${indent}- \`${b.id}\` ${b.type}${b.role ? `(${b.role})` : ''}${b.text ? ` · ${b.text}` : ''} · ${rectStr(b.rect)}`);
+    for (const c of b.children ?? [])
+        renderBlockTree(c, depth + 1, lines);
+}
+function renderBlockOneLine(b) {
+    return `- \`${b.id}\` ${b.type}${b.text ? ` · ${b.text}` : ''} · ${rectStr(b.rect)}`;
+}
+function rectStr(r) {
+    return `(${r.x},${r.y} ${r.w}×${r.h})`;
+}
+function renderInteractionModel(outline) {
+    const lines = [`# 交互模型 — ${outline.pageName}`, ''];
+    lines.push('按候选交互类型分组列出。它们只是 agent live-page 探索的线索，不代表完整交互覆盖。');
+    lines.push('');
+    const byKind = new Map();
+    for (const c of outline.candidateInteractions) {
+        if (!byKind.has(c.kind))
+            byKind.set(c.kind, []);
+        byKind.get(c.kind).push(c);
+    }
+    for (const [kind, items] of [...byKind.entries()].sort(([a], [b]) => a.localeCompare(b))) {
+        lines.push(`## ${kind} (${items.length})`);
+        lines.push('');
+        for (const it of items) {
+            lines.push(`- \`${it.selector}\`${it.label ? ` · ${it.label}` : ''} — ${it.description}`);
+        }
+        lines.push('');
+    }
+    return lines.join('\n') + '\n';
+}
+function relativeToPage(ctx, abs) {
+    return relative(ctx.taskDir, abs);
+}
+//# sourceMappingURL=semantic-model-builder.js.map