+
+
+
+
+ ${payload.question ? `${esc(payload.title || 'Choose a direction')}
+${esc(payload.question)}
` : ''} +
+
+ ${cards}
+
+
+
+
+ Insert variant ${variantNum}
\n\n\n`;
+}
+
+/**
+ * Scaffold a component-preview session. The scaffold is AST-based: the app's
+ * own svelte compiler parses the selected markup, control-flow blocks are
+ * preserved (an each collection crosses the prop contract as ONE structured
+ * prop, its loop body verbatim), and constructs a detached preview cannot
+ * support return `{ fallback: 'source-preview', reason }` so the caller keeps
+ * the markup inside the route file instead of shipping a wrong preview.
+ */
+export function scaffoldSvelteComponentSession({
+ id,
+ count,
+ sourceFile,
+ sourceStartLine,
+ sourceEndLine,
+ originalLines,
+ cwd = process.cwd(),
+}) {
+ const originalMarkup = originalLines.join('\n');
+
+ const compiler = loadSvelteCompiler(cwd);
+ if (!compiler) {
+ return { fallback: 'source-preview', reason: 'svelte 5 compiler not resolvable from the app root' };
+ }
+ const analysis = analyzeSvelteMarkup(originalMarkup, compiler.parse);
+ if (!analysis.ok) {
+ return { fallback: 'source-preview', reason: analysis.reason };
+ }
+
+ ensureRuntimeHelper(cwd);
+ const dir = componentSessionDir(id, cwd);
+ fs.mkdirSync(dir, { recursive: true });
+
+ const contract = analysis.contract;
+ const seeded = extractMatchingSourceCss(
+ safeReadSource(path.resolve(cwd, sourceFile)),
+ originalMarkup,
+ );
+ const seededCss = seeded.css;
+ // The preview compiles in isolation, so NONE of these source rules applied
+ // to what the user approved. Accept enforces that preview truth: any of
+ // them the variant does not re-declare is superseded and removed, instead
+ // of re-attaching to the accepted markup through kept class names (the
+ // ".decisions grid grabs the new board" failure). Only the CLASS-matched
+ // selectors are candidates; tag rules style shared route elements.
+ const seededSelectors = [...seeded.supersedable];
+
+ const manifest = {
+ id,
+ previewMode: 'svelte-component',
+ contractVersion: 2,
+ sourceFile: sourceFile.split(path.sep).join('/'),
+ sourceStartLine,
+ sourceEndLine,
+ count,
+ propContract: contract,
+ originalMarkup,
+ seededSelectors,
+ componentDir: path.relative(cwd, dir).split(path.sep).join('/'),
+ // Absolute paths let the browser fall back to /@fs/ imports when the dev
+ // server's base or root makes root-relative URLs miss, and probe whether
+ // the preview tree is reachable at all before blaming a variant.
+ componentDirAbs: dir.split(path.sep).join('/'),
+ runtimeModule: `/${SVELTE_RUNTIME_FILE}`,
+ runtimeModuleAbs: path.join(cwd, SVELTE_RUNTIME_FILE).split(path.sep).join('/'),
+ probeModule: `/${SVELTE_PROBE_FILE}`,
+ probeModuleAbs: path.join(cwd, SVELTE_PROBE_FILE).split(path.sep).join('/'),
+ };
+
+ fs.writeFileSync(path.join(dir, 'manifest.json'), JSON.stringify(manifest, null, 2) + '\n', 'utf-8');
+
+ for (let n = 1; n <= count; n++) {
+ const variantFile = path.join(dir, `v${n}.svelte`);
+ if (!fs.existsSync(variantFile)) {
+ fs.writeFileSync(variantFile, buildVariantStubV2(n, analysis.markupWithProps, contract, seededCss), 'utf-8');
+ }
+ }
+
+ return {
+ manifest,
+ manifestFile: path.relative(cwd, path.join(dir, 'manifest.json')).split(path.sep).join('/'),
+ componentDir: manifest.componentDir,
+ propContract: contract,
+ // Inlined so the generate event's scaffold payload carries the stub
+ // shape; the agent edits vN.svelte in place instead of spending reads on
+ // the manifest and stub files (or deleting and recreating them).
+ stubMarkup: analysis.markupWithProps,
+ seededCss,
+ };
+}
+
+function safeReadSource(filePath) {
+ try { return fs.readFileSync(filePath, 'utf-8'); } catch { return ''; }
+}
+
+function escapeSelectorToken(token) {
+ return String(token).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Seed variant stubs with the source component's rules that already style the
+ * selected markup, so variants start from the real cascade (a detached
+ * preview inherits none of the route's compile-scoped CSS) instead of
+ * reimplementing it blind.
+ *
+ * Returns { css, supersedable }. `css` is every matching rule (class OR tag
+ * matched). `supersedable` holds only the CLASS-matched selectors: those are
+ * the accept-time removal candidates. Tag selectors (h1, a, p) style shared
+ * elements across the whole route, so they seed the preview but are never
+ * candidates for removal.
+ */
+export function extractMatchingSourceCss(routeSource, originalMarkup) {
+ const empty = { css: '', supersedable: new Set() };
+ const styleMatch = String(routeSource || '').match(/
+
+ Impeccable
+
+