@monoes/monodesign 1.2.18 → 1.2.22

package/skill/scripts/live-wrap.mjs

@@ -21,7 +21,27 @@ import {
   shouldUseSvelteComponentInjection,
 } from './live/svelte-component.mjs';
 
-const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro'];
+import {
+  argVal,
+  pendingEntriesThatMayAffectWrap,
+  manualEditMayAffectWrap,
+  applyBufferedManualEditToLines,
+} from './live-wrap-manual-edit.mjs';
+import {
+  buildSearchQueries,
+  detectCommentSyntax,
+  detectStyleMode,
+  buildCssSelectorPrefixExamples,
+  buildCssAuthoring,
+} from './live-wrap-css.mjs';
+import {
+  findFileWithQuery,
+  minLeadingSpaces,
+  findElement,
+  findAllElements,
+  filterByText,
+  findClosingLine,
+} from './live-wrap-search.mjs';
 
 export async function wrapCli() {
   const args = process.argv.slice(2);
@@ -380,489 +400,6 @@ The agent should insert variant HTML at insertLine.`);
   }));
 }
 
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-function argVal(args, flag) {
-  const prefix = `${flag}=`;
-  for (const arg of args) {
-    if (arg.startsWith(prefix)) return arg.slice(prefix.length);
-  }
-  const idx = args.indexOf(flag);
-  return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null;
-}
-
-function pendingEntriesThatMayAffectWrap(entries, targetFile, originalLines, selectionStartLine, cwd) {
-  const targetAbs = path.resolve(cwd, targetFile);
-  return (entries || []).filter((entry) => {
-    return (entry.ops || []).some((op) => {
-      return manualEditMayAffectWrap(op, targetAbs, originalLines, selectionStartLine, cwd);
-    });
-  });
-}
-
-function manualEditMayAffectWrap(op, targetFile, originalLines, selectionStartLine, cwd) {
-  const targetAbs = path.resolve(cwd, targetFile);
-  if (manualEditHintFallsInsideSelection(op, targetAbs, originalLines, selectionStartLine, cwd)) return true;
-  if (manualEditLocatorMatchesSelection(op, originalLines)) return true;
-  if (typeof op?.originalText === 'string' && op.originalText.length > 0) {
-    return originalLines.join('\n').includes(op.originalText);
-  }
-  return false;
-}
-
-function manualEditHintFallsInsideSelection(op, targetAbs, originalLines, selectionStartLine, cwd) {
-  const hintFile = op?.sourceHint?.file;
-  const hintedLine = Number(op?.sourceHint?.line);
-  if (!hintFile || !Number.isFinite(hintedLine)) return false;
-  const hintAbs = path.isAbsolute(hintFile) ? hintFile : path.resolve(cwd, hintFile);
-  if (path.resolve(hintAbs) !== targetAbs) return false;
-  const hintedIndex = hintedLine - 1 - selectionStartLine;
-  return hintedIndex >= 0
-    && hintedIndex < originalLines.length
-    && typeof op?.originalText === 'string'
-    && originalLines[hintedIndex].includes(op.originalText);
-}
-
-function manualEditLocatorMatchesSelection(op, originalLines) {
-  if (!op || typeof op.originalText !== 'string' || op.originalText.length === 0) return false;
-  return originalLines.some((line) => (
-    line.includes(op.originalText) && lineMatchesManualEditLocator(line, op)
-  ));
-}
-
-function applyBufferedManualEditToLines(originalLines, selectionStartLine, op) {
-  if (
-    !op
-    || typeof op.originalText !== 'string'
-    || op.originalText.length === 0
-    || typeof op.newText !== 'string'
-  ) {
-    return { lines: originalLines, changed: false };
-  }
-
-  const replaceLine = (lineIndex) => ({
-    lines: originalLines.map((line, index) => (
-      index === lineIndex ? replaceOnce(line, op.originalText, op.newText) : line
-    )),
-    changed: true,
-  });
-
-  const hintedLine = Number(op.sourceHint?.line);
-  if (Number.isFinite(hintedLine)) {
-    const hintedIndex = hintedLine - 1 - selectionStartLine;
-    if (hintedIndex >= 0 && hintedIndex < originalLines.length && originalLines[hintedIndex].includes(op.originalText)) {
-      return replaceLine(hintedIndex);
-    }
-  }
-
-  const locatorMatches = [];
-  for (let index = 0; index < originalLines.length; index += 1) {
-    const line = originalLines[index];
-    if (!line.includes(op.originalText)) continue;
-    if (!lineMatchesManualEditLocator(line, op)) continue;
-    locatorMatches.push(index);
-  }
-  if (locatorMatches.length === 1) return replaceLine(locatorMatches[0]);
-
-  const originalBlock = originalLines.join('\n');
-  if (countOccurrences(originalBlock, op.originalText) === 1) {
-    return {
-      lines: replaceOnce(originalBlock, op.originalText, op.newText).split('\n'),
-      changed: true,
-    };
-  }
-
-  return { lines: originalLines, changed: false };
-}
-
-function lineMatchesManualEditLocator(line, op) {
-  if (op.tag) {
-    const tagRe = new RegExp(`<\\s*${escapeRegExp(op.tag)}(?=[\\s>/]|$)`, 'i');
-    if (!tagRe.test(line)) return false;
-  }
-
-  if (op.elementId) {
-    const id = escapeRegExp(op.elementId);
-    const idRe = new RegExp(`\\bid\\s*=\\s*["']${id}["']`);
-    if (!idRe.test(line)) return false;
-  }
-
-  const classes = Array.isArray(op.classes) ? op.classes.filter(Boolean) : [];
-  for (const className of classes) {
-    if (!line.includes(className)) return false;
-  }
-
-  return true;
-}
-
-function replaceOnce(value, needle, replacement) {
-  const index = value.indexOf(needle);
-  if (index === -1) return value;
-  return value.slice(0, index) + replacement + value.slice(index + needle.length);
-}
-
-function countOccurrences(value, needle) {
-  if (!needle) return 0;
-  let count = 0;
-  let index = 0;
-  while (true) {
-    index = value.indexOf(needle, index);
-    if (index === -1) return count;
-    count += 1;
-    index += needle.length;
-  }
-}
-
-function escapeRegExp(value) {
-  return String(value).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-/**
- * Build search query strings in priority order (most specific first).
- * ID is most reliable, then specific class combos, then single classes, then raw query.
- */
-function buildSearchQueries(elementId, classes, tag, query) {
-  const queries = [];
-
-  // 1. ID is the most specific
-  if (elementId) {
-    queries.push(`id="${elementId}"`);
-  }
-
-  // 2. Full class attribute match (for elements with distinctive multi-class combos).
-  // Emit both class="..." (HTML) and className="..." (React/JSX) so whichever
-  // convention the file uses will match.
-  if (classes) {
-    const classList = splitClassList(classes);
-    if (classList.length > 1) {
-      const joined = classList.join(' ');
-      const sorted = [...classList].sort((a, b) => b.length - a.length);
-      queries.push(`class="${joined}"`);
-      queries.push(`className="${joined}"`);
-      for (const className of sorted) {
-        queries.push(className);
-      }
-    } else if (classList.length === 1) {
-      queries.push(classList[0]);
-    }
-  }
-
-  // 3. Tag + class combo (e.g., <section class="hero">).
-  // Same dual-emit for JSX compatibility.
-  if (tag && classes) {
-    const firstClass = splitClassList(classes)[0];
-    queries.push(`<${tag} class="${firstClass}`);
-    queries.push(`<${tag} className="${firstClass}`);
-  }
-
-  // 4. Raw fallback query
-  if (query) {
-    queries.push(query);
-  }
-
-  return queries;
-}
-
-function splitClassList(classes) {
-  return String(classes).split(/[,\s]+/).map(c => c.trim()).filter(Boolean);
-}
-
-function detectCommentSyntax(filePath) {
-  const ext = path.extname(filePath).toLowerCase();
-  if (ext === '.jsx' || ext === '.tsx') {
-    return { open: '{/*', close: '*/}' };
-  }
-  // HTML, Vue, Svelte, Astro all use HTML comments
-  return { open: '<!--', close: '-->' };
-}
-
-function detectStyleMode(filePath) {
-  const ext = path.extname(filePath).toLowerCase();
-  if (ext === '.astro') {
-    return {
-      mode: 'astro-global-prefixed',
-      styleTag: '<style is:inline data-monodesign-css="SESSION_ID">',
-    };
-  }
-  return {
-    mode: 'scoped',
-    styleTag: '<style data-monodesign-css="SESSION_ID">',
-  };
-}
-
-function buildCssSelectorPrefixExamples(styleMode, count) {
-  if (styleMode !== 'astro-global-prefixed') return [];
-  return Array.from({ length: count }, (_, i) => `[data-monodesign-variant="${i + 1}"]`);
-}
-
-function buildCssAuthoring(styleMode, count) {
-  const variantNumbers = Array.from({ length: count }, (_, i) => i + 1);
-  if (styleMode.mode === 'astro-global-prefixed') {
-    return {
-      mode: styleMode.mode,
-      styleTag: styleMode.styleTag,
-      strategy: 'global-prefixed',
-      rulePattern: '[data-monodesign-variant="N"] > .variant-class { ... }',
-      selectorExamples: variantNumbers.map((n) => `[data-monodesign-variant="${n}"] > .variant-class`),
-      requirements: [
-        'Use the styleTag exactly; the is:inline attribute is required for this file.',
-        'Put raw CSS directly between the styleTag opening and a plain </style> close.',
-        'Prefix every preview selector with the matching [data-monodesign-variant="N"] selector.',
-        'Keep selectors anchored to the generated variant wrapper; do not rely on component CSS scoping for preview rules.',
-      ],
-      forbidden: [
-        'Do not use @scope for this styleMode.',
-        'Do not wrap style content in a JSX/TSX template literal ({` ... `}); that syntax is for .tsx/.jsx only.',
-        'Do not put { immediately after the style opening tag; Astro parses { as expression syntax.',
-      ],
-    };
-  }
-  return {
-    mode: styleMode.mode,
-    styleTag: styleMode.styleTag,
-    strategy: 'scope-rule',
-    rulePattern: '@scope ([data-monodesign-variant="N"]) { :scope > .variant-class { ... } }',
-    selectorExamples: variantNumbers.map((n) => `@scope ([data-monodesign-variant="${n}"]) { :scope > .variant-class { ... } }`),
-    requirements: [
-      'Use @scope blocks keyed to each [data-monodesign-variant="N"] wrapper.',
-      'Inside each @scope block, make :scope rules step into the replacement element with a descendant combinator.',
-      'Use the styleTag exactly; do not add framework-specific style attributes unless this object says to.',
-    ],
-    forbidden: [
-      'Do not use global [data-monodesign-variant="N"] selector prefixes for this styleMode.',
-      'Do not add is:inline to the style tag for this styleMode.',
-    ],
-  };
-}
-
-/**
- * Search project files for the query string (class name, ID, etc.)
- * Returns the first matching file path, or null.
- */
-function findFileWithQuery(query, cwd, genOpts = {}) {
-  const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.'];
-  const seen = new Set();
-
-  for (const dir of searchDirs) {
-    const absDir = path.join(cwd, dir);
-    if (!fs.existsSync(absDir)) continue;
-    const result = searchDir(absDir, query, seen, 0, genOpts);
-    if (result) return result;
-  }
-  return null;
-}
-
-function searchDir(dir, query, seen, depth, genOpts) {
-  if (depth > 5) return null; // don't go too deep
-  const realDir = fs.realpathSync(dir);
-  if (seen.has(realDir)) return null;
-  seen.add(realDir);
-
-  let entries;
-  try { entries = fs.readdirSync(dir, { withFileTypes: true }); }
-  catch { return null; }
-
-  // Check files first
-  for (const entry of entries) {
-    if (!entry.isFile()) continue;
-    const ext = path.extname(entry.name).toLowerCase();
-    if (!EXTENSIONS.includes(ext)) continue;
-
-    const filePath = path.join(dir, entry.name);
-    if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue;
-    try {
-      const content = fs.readFileSync(filePath, 'utf-8');
-      if (content.includes(query)) return filePath;
-    } catch { /* skip unreadable files */ }
-  }
-
-  // Then recurse into directories. Always skip node_modules and .git (never
-  // project content). dist/build/out are left to the isGeneratedFile guard so
-  // the includeGenerated second-pass can still find the element there and
-  // report `generatedMatch`.
-  for (const entry of entries) {
-    if (!entry.isDirectory()) continue;
-    if (entry.name === 'node_modules' || entry.name === '.git') continue;
-    const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts);
-    if (result) return result;
-  }
-
-  return null;
-}
-
-/**
- * Regex that matches a tag opener on a line. Allows the tag name to be
- * followed by whitespace, `>`, `/`, or end-of-line so that multi-line JSX
- * openers (e.g. `<section\n  className="..."\n>`) are recognised.
- */
-const OPENER_RE = /<([A-Za-z][A-Za-z0-9]*)(?=[\s/>]|$)/;
-
-/**
- * Find the element's start and end line in the file.
- *
- * `query` is a class name, attribute fragment (`class="..."`, `className="..."`,
- * `id="..."`), or a raw text snippet. Because a query can appear on a
- * continuation line of a multi-line tag (e.g. the `className="..."` row of a
- * `<section\n  className="..."\n>` JSX tag), we walk backward from the match
- * line to find the actual tag opener. When `tag` is provided, opener candidates
- * must match that tag name.
- */
-/**
- * Return the smallest leading-whitespace count across a set of lines,
- * ignoring blank lines (whose indent isn't load-bearing). Used to compute
- * the common base indent of a multi-line picked element so reindenting
- * under the wrapper preserves the relative depth between lines.
- */
-function minLeadingSpaces(lines) {
-  let min = Infinity;
-  for (const l of lines) {
-    if (l.trim() === '') continue;
-    const m = l.match(/^(\s*)/);
-    if (m && m[1].length < min) min = m[1].length;
-  }
-  return min === Infinity ? 0 : min;
-}
-
-function findElement(lines, query, tag = null) {
-  // Iterate all matches — the first substring hit isn't always the right one.
-  for (let i = 0; i < lines.length; i++) {
-    if (!lines[i].includes(query)) continue;
-
-    const stripped = lines[i].trim();
-    if (stripped.startsWith('<!--') || stripped.startsWith('{/*') || stripped.startsWith('//')) continue;
-    // Skip lines already inside a variant wrapper
-    if (lines[i].includes('data-monodesign-variant')) continue;
-
-    const openerLine = findOpenerLine(lines, i, tag);
-    if (openerLine === -1) continue;
-
-    const endLine = findClosingLine(lines, openerLine);
-    return { startLine: openerLine, endLine };
-  }
-
-  return null;
-}
-
-/**
- * Like findElement, but returns every match. Used for ambiguity detection
- * when the agent passes --text: when the same className appears on multiple
- * sibling elements (a list of cards, repeated section variants, etc.),
- * first-match silently lands on the wrong branch. Returning all matches lets
- * the caller narrow by textContent or fail with a structured ambiguity error.
- */
-function findAllElements(lines, query, tag = null) {
-  const out = [];
-  const seen = new Set();
-  for (let i = 0; i < lines.length; i++) {
-    if (!lines[i].includes(query)) continue;
-    const stripped = lines[i].trim();
-    if (stripped.startsWith('<!--') || stripped.startsWith('{/*') || stripped.startsWith('//')) continue;
-    if (lines[i].includes('data-monodesign-variant')) continue;
-    const openerLine = findOpenerLine(lines, i, tag);
-    if (openerLine === -1) continue;
-    if (seen.has(openerLine)) continue; // multiple matches inside the same element
-    seen.add(openerLine);
-    const endLine = findClosingLine(lines, openerLine);
-    out.push({ startLine: openerLine, endLine });
-  }
-  return out;
-}
-
-/**
- * Narrow a candidate set to those whose source body matches a meaningful
- * prefix of the picked element's textContent. The compare strips tags and
- * JSX expressions, then checks two whitespace normalizations side-by-side:
- *
- *   - single-space ("hero two second card body")
- *   - no-whitespace ("herotwosecondcardbody")
- *
- * Both are needed because `el.textContent` concatenates sibling text without
- * inserting whitespace (e.g. `<h1>Hero Two</h1><p>Second…</p>` reads as
- * `"Hero TwoSecond…"`), while the source has whitespace between tags. If
- * EITHER normalization matches, the candidate keeps. A snippet shorter than
- * 8 chars after stripping is too weak to disambiguate — the caller falls
- * back to first-match.
- */
-function filterByText(candidates, lines, text) {
-  const trimmed = text.replace(/\s+/g, ' ').trim().toLowerCase().slice(0, 80);
-  // Too short to disambiguate. Return [] so the caller's `filtered.length
-  // === 0` branch fires (fall back to first-match) — the previous
-  // `candidates.slice()` return forced `filtered.length > 1` and surfaced
-  // a spurious `element_ambiguous` error on every short-text picker event
-  // with multiple candidates.
-  if (trimmed.length < 8) return [];
-  const targetSpaced = trimmed;
-  const targetCompact = trimmed.replace(/\s+/g, '');
-
-  return candidates.filter((c) => {
-    const body = lines.slice(c.startLine, c.endLine + 1).join(' ');
-    const inner = body
-      .replace(/<[^>]*>/g, ' ')   // strip HTML/JSX tags
-      .replace(/\{[^}]*\}/g, ' ')  // strip JSX expressions
-      .toLowerCase();
-    const sourceSpaced = inner.replace(/\s+/g, ' ').trim();
-    const sourceCompact = inner.replace(/\s+/g, '');
-    return sourceSpaced.includes(targetSpaced) || sourceCompact.includes(targetCompact);
-  });
-}
-
-/**
- * Resolve a match line to the real tag opener. If the match line itself opens
- * a tag, return it. Otherwise walk up to 10 lines backward looking for the
- * first tag opener. If `tag` is specified, the opener must match that tag
- * name; an opener with a different tag name aborts the backward walk for this
- * match (we don't jump across element boundaries).
- *
- * Returns the line index of the opener, or -1 if none can be resolved.
- */
-function findOpenerLine(lines, matchLine, tag) {
-  const self = lines[matchLine].match(OPENER_RE);
-  if (self) {
-    if (!tag || self[1] === tag) return matchLine;
-    return -1;
-  }
-  const MAX_BACKWALK = 10;
-  for (let i = matchLine - 1; i >= Math.max(0, matchLine - MAX_BACKWALK); i--) {
-    const opener = lines[i].match(OPENER_RE);
-    if (!opener) continue;
-    if (!tag || opener[1] === tag) return i;
-    // Different tag name than requested — abort; we're inside a non-target opener.
-    return -1;
-  }
-  return -1;
-}
-
-/**
- * Starting from a line with an opening tag, find the line with the matching
- * closing tag by counting tag nesting depth.
- */
-function findClosingLine(lines, start) {
-  const openMatch = lines[start].match(OPENER_RE);
-  if (!openMatch) return start; // caller passed a non-opener; nothing to span
-
-  const tagName = openMatch[1];
-  let depth = 0;
-  const openRe = new RegExp(`<${tagName}(?=[\\s/>]|$)`, 'g');
-  const selfCloseRe = new RegExp(`<${tagName}[^>]*/>`, 'g');
-  const closeRe = new RegExp(`</${tagName}\\s*>`, 'g');
-
-  for (let i = start; i < lines.length; i++) {
-    const line = lines[i];
-    const opens = (line.match(openRe) || []).length;
-    const selfCloses = (line.match(selfCloseRe) || []).length;
-    const closes = (line.match(closeRe) || []).length;
-
-    depth += opens - selfCloses - closes;
-
-    if (depth <= 0) return i;
-  }
-
-  // If we can't find the close, return a reasonable guess
-  return Math.min(start + 50, lines.length - 1);
-}
-
 // Auto-execute when run directly (node live-wrap.mjs ...)
 const _running = process.argv[1];
 if (_running?.endsWith('live-wrap.mjs') || _running?.endsWith('live-wrap.mjs/')) {