@monoes/monodesign 1.2.18 → 1.2.22

package/skill/scripts/live/svelte-component-accept.mjs

@@ -0,0 +1,248 @@
+/**
+ * Accepting a chosen Svelte component variant back into route source for
+ * live/svelte-component.mjs: restoring prop expressions, merging the
+ * original element's top-level attributes, and splicing the markup (and any
+ * baked CSS) into the source file.
+ *
+ * Split out of live/svelte-component.mjs. See that file for context.
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import {
+  parseSvelteComponentFile,
+  substitutePropsWithExprs,
+} from './svelte-component-markup.mjs';
+import {
+  appendCssToSvelteStyle,
+  bakeParamValuesInCss,
+  sanitizeAcceptedSvelteCss,
+} from './svelte-component-css.mjs';
+import {
+  removeSvelteComponentSession,
+  resolveSourceFile,
+} from './svelte-component-session.mjs';
+
+export function inlineSvelteComponentAccept(manifest, variantNum, paramValues = null, cwd = process.cwd()) {
+  const sourceFile = resolveSourceFile(manifest.sourceFile, cwd);
+  const variantPath = path.join(cwd, manifest.componentDir, `v${variantNum}.svelte`);
+  const resultBase = {
+    file: manifest.sourceFile,
+    sourceFile: manifest.sourceFile,
+    previewMode: 'svelte-component',
+    componentDir: manifest.componentDir,
+    carbonize: false,
+  };
+  if (!fs.existsSync(variantPath)) {
+    return { handled: false, error: `Variant ${variantNum} not found`, ...resultBase };
+  }
+
+  const { markup, cssLines } = parseSvelteComponentFile(fs.readFileSync(variantPath, 'utf-8'));
+  if (manifest.mode === 'insert') {
+    return inlineSvelteComponentInsertAccept({
+      manifest,
+      markup,
+      cssLines,
+      variantNum,
+      paramValues,
+      sourceFile,
+      resultBase,
+      cwd,
+    });
+  }
+
+  const rootTag = matchOpeningTag(markup)?.tag || 'div';
+  const contract = manifest.propContract || [];
+  const mergedMarkup = mergeOriginalTopLevelAttrs(markup, manifest.originalMarkup || '');
+  const restoredMarkup = substitutePropsWithExprs(mergedMarkup, contract)
+    .split('\n')
+    .map((line) => line.trimEnd());
+
+  const sourceContent = fs.readFileSync(sourceFile, 'utf-8');
+  const sourceLines = sourceContent.split('\n');
+  const start = Number(manifest.sourceStartLine) - 1;
+  const end = Number(manifest.sourceEndLine) - 1;
+  if (!Number.isInteger(start) || !Number.isInteger(end) || start < 0 || end < start || end >= sourceLines.length) {
+    return { handled: false, error: `Invalid source line range for ${manifest.sourceFile}`, ...resultBase };
+  }
+
+  const indent = sourceLines[start].match(/^(\s*)/)?.[1] || '';
+  const indentedMarkup = restoredMarkup.map((line) => {
+    if (line.trim() === '') return '';
+    return indent + line.trimStart();
+  });
+
+  let newLines = [
+    ...sourceLines.slice(0, start),
+    ...indentedMarkup,
+    ...sourceLines.slice(end + 1),
+  ];
+
+  const sanitizedCss = sanitizeAcceptedSvelteCss(cssLines, variantNum, paramValues, rootTag);
+  const bakedCss = bakeParamValuesInCss(sanitizedCss, paramValues);
+  if (bakedCss.length > 0) {
+    newLines = appendCssToSvelteStyle(newLines, bakedCss);
+  }
+
+  try {
+    fs.writeFileSync(sourceFile, newLines.join('\n'), 'utf-8');
+  } catch (err) {
+    return { handled: false, error: `Failed to write Svelte source: ${err.message}`, ...resultBase };
+  }
+  removeSvelteComponentSession(manifest.id, cwd);
+
+  return {
+    handled: true,
+    ...resultBase,
+  };
+}
+
+function inlineSvelteComponentInsertAccept({
+  manifest,
+  markup,
+  cssLines,
+  variantNum,
+  paramValues,
+  sourceFile,
+  resultBase,
+  cwd,
+}) {
+  if (!svelteMarkupHasVisibleContent(markup)) {
+    return { handled: false, error: 'Accepted Svelte insert variant is empty', ...resultBase };
+  }
+  if (/\bdata-monodesign-[\w-]*\s*=/.test(markup)) {
+    return { handled: false, error: 'Accepted Svelte insert variant contains preview-only data-monodesign attributes', ...resultBase };
+  }
+
+  const rootTag = matchOpeningTag(markup)?.tag || 'div';
+  const restoredMarkup = String(markup || '')
+    .split('\n')
+    .map((line) => line.trimEnd());
+  const sourceContent = fs.readFileSync(sourceFile, 'utf-8');
+  const sourceLines = sourceContent.split('\n');
+  const insertIndex = Number(manifest.insertLine) - 1;
+  if (!Number.isInteger(insertIndex) || insertIndex < 0 || insertIndex > sourceLines.length) {
+    return { handled: false, error: `Invalid insert line for ${manifest.sourceFile}`, ...resultBase };
+  }
+
+  const nearbyLine = sourceLines[insertIndex] ?? sourceLines[insertIndex - 1] ?? '';
+  const indent = nearbyLine.match(/^(\s*)/)?.[1] || '';
+  const indentedMarkup = restoredMarkup.map((line) => {
+    if (line.trim() === '') return '';
+    return indent + line.trimStart();
+  });
+
+  let newLines = [
+    ...sourceLines.slice(0, insertIndex),
+    ...indentedMarkup,
+    ...sourceLines.slice(insertIndex),
+  ];
+
+  const sanitizedCss = sanitizeAcceptedSvelteCss(cssLines, variantNum, paramValues, rootTag);
+  const bakedCss = bakeParamValuesInCss(sanitizedCss, paramValues);
+  if (bakedCss.length > 0) {
+    newLines = appendCssToSvelteStyle(newLines, bakedCss);
+  }
+
+  try {
+    fs.writeFileSync(sourceFile, newLines.join('\n'), 'utf-8');
+  } catch (err) {
+    return { handled: false, error: `Failed to write Svelte source: ${err.message}`, ...resultBase };
+  }
+  removeSvelteComponentSession(manifest.id, cwd);
+
+  return {
+    handled: true,
+    ...resultBase,
+  };
+}
+
+function svelteMarkupHasVisibleContent(markup) {
+  const text = String(markup || '')
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<style[\s\S]*?<\/style>/gi, '')
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+  if (text.length > 0) return true;
+  return /<(img|svg|canvas|video|audio|picture|input|button|select|textarea)\b/i.test(markup || '');
+}
+
+function mergeOriginalTopLevelAttrs(markup, originalMarkup) {
+  const variantOpen = matchOpeningTag(markup);
+  const originalOpen = matchOpeningTag(originalMarkup);
+  if (!variantOpen || !originalOpen) return markup;
+  if (variantOpen.tag.toLowerCase() !== originalOpen.tag.toLowerCase()) return markup;
+
+  const variantAttrs = parseAttrSegments(variantOpen.attrs);
+  const originalAttrs = parseAttrSegments(originalOpen.attrs);
+  const additions = [];
+  let attrs = variantOpen.attrs;
+
+  const originalClass = originalAttrs.get('class');
+  const variantClass = variantAttrs.get('class');
+  if (originalClass && variantClass) {
+    const merged = mergeStaticClassAttr(originalClass, variantClass);
+    if (merged) {
+      attrs = attrs.slice(0, variantClass.start) + merged + attrs.slice(variantClass.end);
+      variantAttrs.set('class', { ...variantClass, raw: merged });
+    }
+  } else if (originalClass && !variantClass) {
+    additions.push(originalClass.raw);
+  }
+
+  for (const [name, attr] of originalAttrs) {
+    if (name === 'class') continue;
+    if (!variantAttrs.has(name)) additions.push(attr.raw);
+  }
+
+  if (additions.length === 0 && attrs === variantOpen.attrs) return markup;
+  const nextOpen = variantOpen.prefix
+    + variantOpen.tag
+    + attrs
+    + additions.map((attr) => ` ${attr.trim()}`).join('')
+    + variantOpen.close;
+  return markup.slice(0, variantOpen.index) + nextOpen + markup.slice(variantOpen.index + variantOpen.raw.length);
+}
+
+function matchOpeningTag(markup) {
+  const match = String(markup || '').match(/^(\s*<)([A-Za-z][\w:-]*)([^>]*?)(\/?>)/);
+  if (!match) return null;
+  return {
+    raw: match[0],
+    prefix: match[1],
+    tag: match[2],
+    attrs: match[3] || '',
+    close: match[4],
+    index: match.index || 0,
+  };
+}
+
+function parseAttrSegments(attrs) {
+  const out = new Map();
+  const re = /([A-Za-z_:][\w:.-]*)(?:\s*=\s*(?:"[^"]*"|'[^']*'|\{[^}]*\}|[^\s"'>=]+))?/g;
+  let match;
+  while ((match = re.exec(attrs))) {
+    const raw = match[0];
+    const name = match[1];
+    out.set(name, {
+      name,
+      raw,
+      start: match.index,
+      end: match.index + raw.length,
+    });
+  }
+  return out;
+}
+
+function mergeStaticClassAttr(originalClass, variantClass) {
+  const originalValue = originalClass.raw.match(/class\s*=\s*(["'])(.*?)\1/);
+  const variantValue = variantClass.raw.match(/class\s*=\s*(["'])(.*?)\1/);
+  if (!originalValue || !variantValue) return null;
+  const quote = variantValue[1];
+  const classes = [
+    ...variantValue[2].split(/\s+/),
+    ...originalValue[2].split(/\s+/),
+  ].filter(Boolean);
+  return `class=${quote}${[...new Set(classes)].join(' ')}${quote}`;
+}

package/skill/scripts/live/svelte-component-css.mjs

@@ -0,0 +1,230 @@
+/**
+ * CSS sanitization for accepted Svelte component variants in
+ * live/svelte-component.mjs: stripping preview-only selectors, rewriting
+ * `:scope`/`@scope` and param-conditional selectors down to the plain CSS
+ * that lands in the route source's <style> block.
+ *
+ * Split out of live/svelte-component.mjs. See that file for context.
+ */
+
+export function appendCssToSvelteStyle(lines, cssLines) {
+  const closeIdx = findLastStyleCloseLine(lines);
+  const prepared = ['', ...cssLines.map((line) => (line.trim() === '' ? '' : `  ${line.trimStart()}`))];
+  if (closeIdx === -1) {
+    return [...lines, '', '<style>', ...prepared.slice(1), '</style>'];
+  }
+  return [
+    ...lines.slice(0, closeIdx),
+    ...prepared,
+    ...lines.slice(closeIdx),
+  ];
+}
+
+function findLastStyleCloseLine(lines) {
+  for (let i = lines.length - 1; i >= 0; i--) {
+    if (/<\/style\s*>/.test(lines[i])) return i;
+  }
+  return -1;
+}
+
+export function bakeParamValuesInCss(cssLines, paramValues) {
+  if (!paramValues || Object.keys(paramValues).length === 0) return cssLines;
+  return cssLines.map((line) => {
+    let out = line;
+    for (const [key, value] of Object.entries(paramValues)) {
+      const varName = `--p-${key}`;
+      out = out.replace(new RegExp(`var\\(${escapeRegExp(varName)}(?:,\\s*[^)]+)?\\)`, 'g'), String(value));
+    }
+    return out;
+  });
+}
+
+export function sanitizeAcceptedSvelteCss(cssLines, variantNum, paramValues = null, rootTag = 'div') {
+  const css = String((cssLines || []).join('\n'));
+  if (!/data-monodesign-variant|monodesign-variant-ready/.test(css)) return cssLines;
+
+  const rules = parseCssRules(css);
+  const output = [];
+  for (const rule of rules) {
+    appendSanitizedCssRule(output, rule, variantNum, paramValues, rootTag);
+  }
+  return output.join('\n')
+    .split('\n')
+    .map((line) => line.trimEnd())
+    .filter((line) => line.trim() !== '');
+}
+
+function appendSanitizedCssRule(output, rule, variantNum, paramValues, rootTag) {
+  const prelude = rule.prelude.trim();
+  const body = rule.body.trim();
+  if (!prelude || !body || /--monodesign-variant-ready\s*:/.test(body)) return;
+
+  if (/^@scope\b/i.test(prelude)) {
+    if (/data-monodesign-variant/.test(prelude) && !selectorHasVariant(prelude, variantNum)) return;
+    const inner = parseCssRules(body);
+    for (const innerRule of inner) {
+      const rewrittenPrelude = rewriteAcceptedSvelteSelector(innerRule.prelude, variantNum, paramValues, rootTag, true);
+      if (!rewrittenPrelude || /--monodesign-variant-ready\s*:/.test(innerRule.body)) continue;
+      output.push(formatCssRule(rewrittenPrelude, innerRule.body.trim()));
+    }
+    return;
+  }
+
+  const rewrittenPrelude = rewriteAcceptedSvelteSelector(prelude, variantNum, paramValues, rootTag, false);
+  if (!rewrittenPrelude) return;
+  output.push(formatCssRule(rewrittenPrelude, body));
+}
+
+function parseCssRules(css) {
+  const rules = [];
+  const text = String(css || '');
+  let i = 0;
+  while (i < text.length) {
+    while (i < text.length && /\s/.test(text[i])) i++;
+    const preludeStart = i;
+    while (i < text.length && text[i] !== '{') i++;
+    if (i >= text.length) break;
+    const prelude = text.slice(preludeStart, i).trim();
+    i++;
+    const bodyStart = i;
+    let depth = 1;
+    let quote = null;
+    let comment = false;
+    while (i < text.length && depth > 0) {
+      const ch = text[i];
+      const next = text[i + 1];
+      if (comment) {
+        if (ch === '*' && next === '/') {
+          comment = false;
+          i += 2;
+          continue;
+        }
+        i++;
+        continue;
+      }
+      if (quote) {
+        if (ch === '\\') {
+          i += 2;
+          continue;
+        }
+        if (ch === quote) quote = null;
+        i++;
+        continue;
+      }
+      if (ch === '/' && next === '*') {
+        comment = true;
+        i += 2;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+        i++;
+        continue;
+      }
+      if (ch === '{') depth++;
+      else if (ch === '}') depth--;
+      i++;
+    }
+    const body = text.slice(bodyStart, Math.max(bodyStart, i - 1));
+    if (prelude) rules.push({ prelude, body });
+  }
+  return rules;
+}
+
+function rewriteAcceptedSvelteSelector(prelude, variantNum, paramValues, rootTag, fromScope) {
+  const selectors = splitSelectorList(prelude);
+  const rewritten = [];
+  for (const selector of selectors) {
+    const next = rewriteAcceptedSvelteSelectorPart(selector, variantNum, paramValues, rootTag, fromScope);
+    if (next) rewritten.push(next);
+  }
+  return rewritten.join(', ');
+}
+
+function rewriteAcceptedSvelteSelectorPart(selector, variantNum, paramValues, rootTag, fromScope) {
+  let out = selector.trim();
+  const hasVariant = /data-monodesign-variant/.test(out);
+  if (hasVariant && !selectorHasVariant(out, variantNum)) return '';
+  if (hasVariant) {
+    out = out.replace(variantSelectorRegex(variantNum), '');
+    out = out.replace(/\[data-monodesign-variant=(["']).*?\1\]/g, '');
+  }
+
+  const paramResult = rewriteParamSelectors(out, paramValues);
+  if (!paramResult.keep) return '';
+  out = paramResult.selector;
+
+  out = out
+    .replace(/:scope(?:\[[^\]]+\])?\s*>\s*/g, '')
+    .replace(/:scope(?:\[[^\]]+\])?/g, rootTag || '')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  out = out.replace(/^[>+~]\s*/, '').trim();
+  if (!out && (hasVariant || fromScope)) return rootTag || ':global(*)';
+  return out;
+}
+
+function rewriteParamSelectors(selector, paramValues) {
+  let keep = true;
+  const next = selector.replace(/\[data-p-([A-Za-z0-9_-]+)(?:=(["'])(.*?)\2)?\]/g, (_match, key, _quote, expected) => {
+    if (!paramValues || !Object.hasOwn(paramValues, key)) return '';
+    const actual = paramValues[key];
+    if (expected != null && String(actual) !== String(expected)) {
+      keep = false;
+      return '';
+    }
+    if (expected == null && (actual === false || actual == null || actual === 'false' || actual === 'off' || actual === '0')) {
+      keep = false;
+      return '';
+    }
+    return '';
+  });
+  return { keep, selector: next };
+}
+
+function splitSelectorList(prelude) {
+  const selectors = [];
+  let start = 0;
+  let bracket = 0;
+  let paren = 0;
+  let quote = null;
+  for (let i = 0; i < prelude.length; i++) {
+    const ch = prelude[i];
+    if (quote) {
+      if (ch === '\\') i++;
+      else if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      continue;
+    }
+    if (ch === '[') bracket++;
+    else if (ch === ']') bracket = Math.max(0, bracket - 1);
+    else if (ch === '(') paren++;
+    else if (ch === ')') paren = Math.max(0, paren - 1);
+    else if (ch === ',' && bracket === 0 && paren === 0) {
+      selectors.push(prelude.slice(start, i));
+      start = i + 1;
+    }
+  }
+  selectors.push(prelude.slice(start));
+  return selectors;
+}
+
+function selectorHasVariant(selector, variantNum) {
+  return variantSelectorRegex(variantNum).test(selector);
+}
+
+function variantSelectorRegex(variantNum) {
+  return new RegExp(`\\[data-monodesign-variant=(["'])${escapeRegExp(String(variantNum))}\\1\\]`, 'g');
+}
+
+function formatCssRule(selector, body) {
+  return `${selector} { ${body.trim()} }`;
+}
+
+function escapeRegExp(value) {
+  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/skill/scripts/live/svelte-component-markup.mjs

@@ -0,0 +1,104 @@
+/**
+ * Markup <-> prop-contract translation for live/svelte-component.mjs: mapping
+ * mustache expressions in wrapped markup to named Svelte props (and back),
+ * and parsing a variant .svelte file into its markup/CSS parts.
+ *
+ * Split out of live/svelte-component.mjs. See that file for context.
+ */
+
+const MUSTACHE_RE = /\{([^{}]+)\}/g;
+
+export function extractMustacheExpressions(text) {
+  const expressions = [];
+  const seen = new Set();
+  const lines = String(text || '').split('\n');
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('<!--')) continue;
+    let match;
+    MUSTACHE_RE.lastIndex = 0;
+    while ((match = MUSTACHE_RE.exec(line)) !== null) {
+      const expr = match[1].trim();
+      if (!expr || seen.has(expr)) continue;
+      seen.add(expr);
+      expressions.push(expr);
+    }
+  }
+  return expressions;
+}
+
+export function buildPropContract(expressions) {
+  return expressions.map((expr, index) => {
+    const derived = derivePropName(expr, index);
+    return {
+      prop: derived,
+      expr,
+      placeholder: `{${expr}}`,
+    };
+  });
+}
+
+function derivePropName(expr, index) {
+  const tail = expr.match(/(?:\.|\[)(\w+)\s*\]?$/);
+  if (tail?.[1] && /^[A-Za-z_$][\w$]*$/.test(tail[1])) {
+    return tail[1];
+  }
+  return `prop${index}`;
+}
+
+export function substituteExprsWithProps(markup, contract) {
+  let out = String(markup || '');
+  for (const entry of contract) {
+    out = out.split(entry.placeholder).join(`{${entry.prop}}`);
+  }
+  return out;
+}
+
+export function substitutePropsWithExprs(markup, contract) {
+  let out = String(markup || '');
+  for (const entry of contract) {
+    out = out.split(`{${entry.prop}}`).join(`{${entry.expr}}`);
+  }
+  return out;
+}
+
+export function parseSvelteComponentFile(content) {
+  const text = String(content || '');
+  const scriptMatch = text.match(/^([\s\S]*?)<script\b[^>]*>[\s\S]*?<\/script>/i);
+  const withoutScript = scriptMatch ? text.slice(scriptMatch[0].length) : text;
+  const styleMatch = withoutScript.match(/<style\b[^>]*>[\s\S]*?<\/style\s*>/i);
+  const styleBlock = styleMatch ? styleMatch[0] : '';
+  const markup = styleMatch
+    ? withoutScript.slice(0, styleMatch.index).trim()
+    : withoutScript.trim();
+  const cssLines = styleBlock
+    ? styleBlock
+      .replace(/^<style\b[^>]*>/i, '')
+      .replace(/<\/style\s*>$/i, '')
+      .split('\n')
+      .map((line) => line.trimEnd())
+    : [];
+  while (cssLines.length > 0 && cssLines[0].trim() === '') cssLines.shift();
+  while (cssLines.length > 0 && cssLines[cssLines.length - 1].trim() === '') cssLines.pop();
+  return { markup, cssLines, styleBlock };
+}
+
+function buildPropsScript(contract) {
+  if (contract.length === 0) {
+    return '<script>\n  /** @type {Record<string, never>} */\n  let {} = $props();\n</script>\n';
+  }
+  const names = contract.map((c) => c.prop).join(', ');
+  const typeFields = contract.map((c) => `    ${c.prop}: string;`).join('\n');
+  return `<script>\n  /** @type {{\n${typeFields}\n  }} */\n  let { ${names} } = $props();\n</script>\n`;
+}
+
+export function buildVariantStub(variantNum, originalWithProps, contract) {
+  const propsComment = contract.length > 0
+    ? `\n<!-- Props: ${contract.map((c) => `${c.prop} <- {${c.expr}}`).join(', ')} -->\n`
+    : '';
+  return `${buildPropsScript(contract)}${propsComment}${originalWithProps.trim()}\n\n<style>\n  /* Variant ${variantNum}: add scoped CSS here */\n</style>\n`;
+}
+
+export function buildInsertVariantStub(variantNum) {
+  return `${buildPropsScript([])}<div class="monodesign-insert-preview">Insert variant ${variantNum}</div>\n\n<style>\n  .monodesign-insert-preview { display: block; }\n</style>\n`;
+}

package/skill/scripts/live/svelte-component-scaffold.mjs

@@ -0,0 +1,118 @@
+/**
+ * Scaffolding a new Svelte component-injection session for
+ * live/svelte-component.mjs: writing the manifest and initial variant stub
+ * files under the session's component directory.
+ *
+ * Split out of live/svelte-component.mjs. See that file for context.
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import {
+  componentSessionDir,
+  ensureRuntimeHelper,
+  SVELTE_RUNTIME_FILE,
+} from './svelte-component-session.mjs';
+import {
+  buildInsertVariantStub,
+  buildPropContract,
+  buildVariantStub,
+  extractMustacheExpressions,
+  substituteExprsWithProps,
+} from './svelte-component-markup.mjs';
+
+export function scaffoldSvelteComponentSession({
+  id,
+  count,
+  sourceFile,
+  sourceStartLine,
+  sourceEndLine,
+  originalLines,
+  cwd = process.cwd(),
+}) {
+  ensureRuntimeHelper(cwd);
+  const dir = componentSessionDir(id, cwd);
+  fs.mkdirSync(dir, { recursive: true });
+
+  const originalMarkup = originalLines.join('\n');
+  const contract = buildPropContract(extractMustacheExpressions(originalMarkup));
+  const originalWithProps = substituteExprsWithProps(originalMarkup, contract);
+
+  const manifest = {
+    id,
+    previewMode: 'svelte-component',
+    sourceFile: sourceFile.split(path.sep).join('/'),
+    sourceStartLine,
+    sourceEndLine,
+    count,
+    propContract: contract,
+    originalMarkup,
+    componentDir: path.relative(cwd, dir).split(path.sep).join('/'),
+    runtimeModule: `/${SVELTE_RUNTIME_FILE}`,
+  };
+
+  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, buildVariantStub(n, originalWithProps, contract), 'utf-8');
+    }
+  }
+
+  return {
+    manifest,
+    manifestFile: path.relative(cwd, path.join(dir, 'manifest.json')).split(path.sep).join('/'),
+    componentDir: manifest.componentDir,
+    propContract: contract,
+  };
+}
+
+export function scaffoldSvelteComponentInsertSession({
+  id,
+  count,
+  sourceFile,
+  insertLine,
+  position,
+  anchorStartLine,
+  anchorEndLine,
+  anchorLines,
+  cwd = process.cwd(),
+}) {
+  ensureRuntimeHelper(cwd);
+  const dir = componentSessionDir(id, cwd);
+  fs.mkdirSync(dir, { recursive: true });
+
+  const anchorMarkup = (anchorLines || []).join('\n');
+  const manifest = {
+    id,
+    mode: 'insert',
+    previewMode: 'svelte-component',
+    sourceFile: sourceFile.split(path.sep).join('/'),
+    insertLine,
+    position,
+    anchorStartLine,
+    anchorEndLine,
+    originalMarkup: anchorMarkup,
+    anchorMarkup,
+    count,
+    propContract: [],
+    componentDir: path.relative(cwd, dir).split(path.sep).join('/'),
+    runtimeModule: `/${SVELTE_RUNTIME_FILE}`,
+  };
+
+  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, buildInsertVariantStub(n), 'utf-8');
+    }
+  }
+
+  return {
+    manifest,
+    manifestFile: path.relative(cwd, path.join(dir, 'manifest.json')).split(path.sep).join('/'),
+    componentDir: manifest.componentDir,
+    propContract: [],
+  };
+}