`;
+ const rewritten = await cloner.rewriteDom(rawHtml, 'https://example.com');
+
+ expect(rewritten).toContain('assets/css/');
+ });
+});
diff --git a/src/cloner/cloner.ts b/src/cloner/cloner.ts
new file mode 100644
index 000000000..7d138df2d
--- /dev/null
+++ b/src/cloner/cloner.ts
@@ -0,0 +1,609 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { URL } from 'node:url';
+import { JSDOM } from 'jsdom';
+
+export interface CloneOptions {
+ url: string;
+ outputDir: string;
+ timeout?: number;
+ autoScroll?: boolean;
+ includeScripts?: boolean;
+ formatHtml?: boolean;
+ userAgent?: string;
+ viewport?: { width: number; height: number };
+ onLog?: (level: 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS', message: string) => void;
+ onStep?: (step: number, total: number, message: string, status?: 'START' | 'DONE' | 'FAIL') => void;
+}
+
+export interface AssetRecord {
+ originalUrl: string;
+ normalizedUrl: string;
+ localPath: string;
+ relativePath: string;
+ mimeType: string;
+ category: 'css' | 'js' | 'images' | 'fonts' | 'media' | 'other';
+ buffer?: Buffer;
+}
+
+export interface CloneResult {
+ sourceUrl: string;
+ outputDir: string;
+ htmlPath: string;
+ totalAssets: number;
+ assetsByCategory: Record
+
+
+ ${siteName} Production Design System
+Extracted from ${sourceUrl}
+
+
+
+
+
+
+ โฟ WCAG 2.1 AA/AAA Accessibility Audit
+Automated contrast ratio evaluations & ADA Section 508 compliance matrix
+
+
+
+
+
+ ${complianceScore}%
+ Global AA Compliance Score
+
+
+ ${passedCount} / ${contrastPairs.length}
+ Color Pairs Passed
+
+
+ Level AA
+ Target W3C Standard
+ | Token Role | +Color HEX | +Target Surface | +Contrast Ratio | +WCAG AA (4.5:1) | +WCAG AAA (7.0:1) | +Engineering Guidance | +
|---|---|---|---|---|---|---|
| ${p.role} | +
+
+
+ ${p.hex}
+
+ |
+
+
+
+ ${p.target}
+
+ |
+ ${p.ratio.toFixed(2)}:1 | ++ ${p.ratio >= p.minRequired ? 'โ PASS' : 'โ Large Text Only'} + | ++ ${p.ratio >= 7.0 ? 'โ PASS' : 'โ Normal AA'} + | ++ ${p.ratio >= p.minRequired ? 'Suitable for body text & interactive buttons' : 'Restrict to headlines (>18pt) or non-text UI borders'} + | +
+
+
+ 1. Color & Palette System
+ Click any swatch to copy HEX +Primary Brand Scale (50-950)
+
+ ${brandScale.map(s => `
+
+
+
+
+
+ `).join('')}
+ ${s.step}
+ Neutral Slate Scale (50-950)
+
+ ${neutralScale.map(s => `
+
+
+
+
+
+ `).join('')}
+ ${s.step}
+ Semantic & Functional Roles
+
+ ${semanticColors.map(c => `
+
+
+
+
+ `).join('')}
+
+
+ ${c.name}
+ ${c.hex}
+
+
+ 2. Typography Scale
+ Stack: ${primaryFont} +| Level | +Size | +Weight | +Line Height | +Preview | +
|---|---|---|---|---|
| ${t.level} | +${t.size} | +${t.weight} | +${t.lineHeight} | ++ The quick brown fox jumps over the lazy dog + | +
+
+ 3. Spacing System & Grid
+ 8pt Grid Scale +
+ ${spacingScale.map(s => `
+
+
+
+ `).join('')}
+ ${s.token} (${s.value})
+
+ ${s.usage}
+
+
+ 4. Elevation & Shadows
+ Light-mode depth hierarchy +
+ ${shadows.map(s => `
+
+
+ ${s.token}
+
+ `).join('')}
+ ${s.description}
+
+
+
+
+
+ โ๏ธ React + Tailwind Component Code
+Ready-to-use TypeScript + Tailwind CSS UI Primitives
+
+
+
+ ${reactComponentsTsx.replace(//g, '>')}
+
+
+
+
+ โก Master AI Prompt Blueprint
+Copy-paste into Cursor, Claude, ChatGPT, or Copilot to replicate this design system
+
+
+
+ ${promptBlueprint.replace(//g, '>')}
+
+
+
+
+ ๐ Figma Tokens Studio (DTCG)
+W3C Design Token Community Group Standard
+
+
+
+ ${JSON.stringify(figmaTokens, null, 2).replace(//g, '>')}