webgl-forensics 3.1.0

package/scripts/17-r3f-fiber-serializer.js

@@ -0,0 +1,316 @@
+/**
+ * SCRIPT 17 — R3F Fiber Serializer
+ * webgl-forensics skill | Enhancement #6
+ *
+ * PURPOSE:
+ *   Convert the live React Fiber tree (extracted by script 13) into
+ *   copy-pastable JSX code that reconstructs the R3F scene.
+ *
+ *   Script 13 gives you DATA. This gives you CODE.
+ *
+ * OUTPUT:
+ *   - Valid JSX for the full R3F scene graph
+ *   - Component imports needed
+ *   - Material definitions
+ *   - Camera + renderer config
+ *   - Recommended file structure for clone
+ *
+ * RUN VIA:
+ *   evaluate_script — run AFTER script 13 has been run
+ *   (or run standalone — it re-walks the fiber tree internally)
+ *
+ * REQUIRES:
+ *   React + R3F must be on the page (same as script 13)
+ */
+(() => {
+  // ═══════════════════════════════════════════════
+  // FIBER UTILITIES (duplicated from 13 for standalone use)
+  // ═══════════════════════════════════════════════
+  function findFiber(el) {
+    const key = Object.keys(el || {}).find(k =>
+      k.startsWith('__reactFiber') || k.startsWith('__reactInternalInstance')
+    );
+    return key ? el[key] : null;
+  }
+
+  const R3F_TAGS = new Set([
+    'mesh', 'group', 'points', 'line', 'lineSegments', 'instancedMesh',
+    'skinnedMesh', 'sprite', 'bone', 'lod', 'object3d',
+    'meshStandardMaterial', 'meshPhysicalMaterial', 'meshBasicMaterial',
+    'meshLambertMaterial', 'meshNormalMaterial', 'meshMatcapMaterial',
+    'shaderMaterial', 'rawShaderMaterial', 'spriteMaterial',
+    'boxGeometry', 'sphereGeometry', 'planeGeometry', 'cylinderGeometry',
+    'torusGeometry', 'torusKnotGeometry', 'bufferGeometry', 'coneGeometry',
+    'tetrahedronGeometry', 'icosahedronGeometry', 'octahedronGeometry',
+    'ambientLight', 'directionalLight', 'pointLight', 'spotLight',
+    'rectAreaLight', 'hemisphereLight',
+    'perspectiveCamera', 'orthographicCamera',
+    'primitive', 'canvas',
+  ]);
+
+  const DREI_COMPONENTS = new Set([
+    'OrbitControls', 'TrackballControls', 'TransformControls',
+    'Environment', 'Sky', 'Stars', 'Sparkles', 'Cloud',
+    'MeshTransmissionMaterial', 'MeshReflectorMaterial', 'MeshWobbleMaterial',
+    'Html', 'Billboard', 'Text', 'Text3D',
+    'useGLTF', 'useLoader', 'useFBX', 'useAnimations',
+    'ScrollControls', 'Scroll',
+    'Preload', 'BakeShadows', 'AdaptiveDpr', 'AdaptiveEvents',
+    'Bounds', 'Center', 'Resize', 'Float', 'Sampler',
+    'Instances', 'Merged', 'Clone',
+    'Image', 'Video', 'Texture',
+    'Decal', 'Shadow', 'ContactShadows', 'AccumulativeShadows',
+    'Lightformer', 'Caustics',
+    'GizmoHelper', 'GizmoViewport',
+    'Loader', 'Hud',
+  ]);
+
+  // ═══════════════════════════════════════════════
+  // VALUE SERIALIZER — props → JSX string
+  // ═══════════════════════════════════════════════
+  function serializeValue(val, key) {
+    if (val === null || val === undefined) return null;
+    if (typeof val === 'boolean') return val ? key : `${key}={false}`;
+    if (typeof val === 'string') return `${key}="${val}"`;
+    if (typeof val === 'number') return `${key}={${val}}`;
+    if (typeof val === 'function') return `${key}={${val.name ? val.name : '() => {}'}}`;
+    if (Array.isArray(val)) {
+      if (val.length <= 4 && val.every(v => typeof v === 'number')) {
+        return `${key}={[${val.map(v => parseFloat(v.toFixed(4))).join(', ')}]}`;
+      }
+      return `${key}={/* array[${val.length}] */}`;
+    }
+    if (val && typeof val === 'object') {
+      if (val.isColor) return `${key}="${val.getHexString ? '#' + val.getHexString() : val}"`;
+      if (val.isVector3) return `${key}={[${val.x.toFixed(3)}, ${val.y.toFixed(3)}, ${val.z.toFixed(3)}]}`;
+      if (val.isEuler) return `${key}={[${val.x.toFixed(3)}, ${val.y.toFixed(3)}, ${val.z.toFixed(3)}]}`;
+      return `${key}={/* ${Object.keys(val).slice(0,3).join(', ')} */}`;
+    }
+    return null;
+  }
+
+  // ═══════════════════════════════════════════════
+  // JSX COMPONENT NAME — map fiber type to JSX tag
+  // ═══════════════════════════════════════════════
+  function getFiberJSXName(fiber) {
+    const { type } = fiber;
+    if (typeof type === 'string') {
+      // R3F intrinsic elements: capitalize for JSX readability... actually they're lowercase
+      if (R3F_TAGS.has(type)) return type; // <mesh>, <group>, etc. are lowercase in R3F
+      return type;
+    }
+    if (typeof type === 'function') {
+      return type.displayName || type.name || 'Unknown';
+    }
+    return null;
+  }
+
+  // ═══════════════════════════════════════════════
+  // GENERATE JSX for a single fiber node
+  // ═══════════════════════════════════════════════
+  function serializeNode(fiber, depth = 0, imports = { r3f: new Set(), drei: new Set() }) {
+    if (!fiber || depth > 40) return '';
+    const indent = '  '.repeat(depth);
+    const name = getFiberJSXName(fiber);
+    if (!name) return '';
+
+    const isR3F = R3F_TAGS.has(name);
+    const isDrei = DREI_COMPONENTS.has(name);
+    const isCanvas = name === 'Canvas';
+    const isDOM = !isR3F && !isDrei && !isCanvas && typeof fiber.type === 'string';
+
+    // Skip most DOM elements — only keep Canvas wrapper divs
+    if (isDOM && !['div', 'section', 'main', 'canvas'].includes(name)) return '';
+
+    // Track imports
+    if (isDrei) imports.drei.add(name);
+    if (isCanvas) imports.r3f.add('Canvas');
+
+    // Serialize props
+    const props = fiber.memoizedProps || {};
+    const propStrings = [];
+
+    const SKIP_PROPS = new Set(['children', 'ref', 'key', '__self', '__source']);
+
+    for (const [key, val] of Object.entries(props)) {
+      if (SKIP_PROPS.has(key)) continue;
+      if (key.startsWith('on')) {
+        propStrings.push(`${key}={handleEvent}`);
+        continue;
+      }
+      const serialized = serializeValue(val, key);
+      if (serialized) propStrings.push(serialized);
+    }
+
+    // Serialize children recursively
+    let childrenJSX = '';
+    if (fiber.child) {
+      const childLines = [];
+      let child = fiber.child;
+      while (child) {
+        const childStr = serializeNode(child, depth + 1, imports);
+        if (childStr.trim()) childLines.push(childStr);
+        child = child.sibling;
+      }
+      childrenJSX = childLines.join('\n');
+    }
+
+    // Build JSX
+    const propsStr = propStrings.length
+      ? '\n' + propStrings.map(p => `${indent}  ${p}`).join('\n') + '\n' + indent
+      : '';
+
+    if (!childrenJSX.trim()) {
+      return `${indent}<${name}${propsStr ? propsStr : ' '}/>`; // self-closing
+    }
+
+    return `${indent}<${name}${propsStr}>\n${childrenJSX}\n${indent}</${name}>`;
+  }
+
+  // ═══════════════════════════════════════════════
+  // FIND R3F ENTRY POINT — the <Canvas> component
+  // ═══════════════════════════════════════════════
+  function findCanvasFiber() {
+    for (const canvas of document.querySelectorAll('canvas')) {
+      const fiber = findFiber(canvas);
+      if (!fiber) continue;
+
+      // Walk up to find Canvas component
+      let node = fiber;
+      let depth = 0;
+      while (node && depth < 60) {
+        if (typeof node.type === 'function') {
+          const name = node.type.displayName || node.type.name || '';
+          if (name === 'Canvas' || name.includes('Canvas')) {
+            return node;
+          }
+        }
+        node = node.return;
+        depth++;
+      }
+    }
+    return null;
+  }
+
+  // ═══════════════════════════════════════════════
+  // CANVAS CONFIG — extract R3F Canvas props
+  // ═══════════════════════════════════════════════
+  function extractCanvasProps(canvasFiber) {
+    if (!canvasFiber) return {};
+    const props = canvasFiber.memoizedProps || {};
+    return {
+      camera: props.camera,
+      frameloop: props.frameloop || 'always',
+      dpr: props.dpr,
+      shadows: props.shadows,
+      gl: props.gl ? Object.keys(props.gl) : undefined,
+      linear: props.linear,
+      flat: props.flat,
+      orthographic: props.orthographic,
+      eventSource: props.eventSource ? 'eventSource={ref}' : undefined,
+      style: props.style,
+    };
+  }
+
+  // ═══════════════════════════════════════════════
+  // GENERATE COMPLETE FILE
+  // ═══════════════════════════════════════════════
+  const imports = { r3f: new Set(['Canvas']), drei: new Set() };
+  const canvasFiber = findCanvasFiber();
+
+  if (!canvasFiber) {
+    return {
+      error: 'No R3F Canvas found. Run script 13 first to confirm R3F is present.',
+      hint: 'Try scrolling to the 3D section of the page then re-running.',
+    };
+  }
+
+  const canvasProps = extractCanvasProps(canvasFiber);
+  const sceneJSX = canvasFiber.child ? serializeNode(canvasFiber.child, 3, imports) : '';
+
+  // Build import statements
+  const r3fImports = imports.r3f.size ? `import { ${[...imports.r3f].join(', ')} } from '@react-three/fiber'` : '';
+  const dreiImports = imports.drei.size ? `import { ${[...imports.drei].join(', ')} } from '@react-three/drei'` : '';
+
+  // Build Canvas prop string
+  const canvasPropStr = Object.entries(canvasProps)
+    .filter(([_, v]) => v !== undefined && v !== null)
+    .map(([k, v]) => {
+      if (typeof v === 'boolean') return v ? k : `${k}={false}`;
+      if (typeof v === 'string') return `${k}="${v}"`;
+      if (Array.isArray(v)) return `${k}={[${v.join(', ')}]}`;
+      if (typeof v === 'object') return `${k}={${JSON.stringify(v)}}`;
+      return `${k}={${v}}`;
+    })
+    .map(p => `      ${p}`)
+    .join('\n');
+
+  const output = `// ═══════════════════════════════════════════════════
+// R3F Scene — Serialized by webgl-forensics v2.0
+// Source: ${window.location.href}
+// Generated: ${new Date().toISOString()}
+// ═══════════════════════════════════════════════════
+
+${r3fImports}
+${dreiImports}
+import * as THREE from 'three'
+
+// TODO: Add your scene-specific imports (models, textures, etc.)
+
+export default function Scene() {
+  return (
+    <Canvas
+${canvasPropStr}
+      style={{ position: 'fixed', inset: 0 }}
+    >
+${sceneJSX || '      {/* Scene content — check script 13 output for R3F nodes */}'}
+    </Canvas>
+  )
+}
+
+/* ═══════════════════════════════════════════════════
+   USAGE NOTES:
+   
+   1. Install deps:
+      pnpm add @react-three/fiber @react-three/drei three
+      pnpm add -D @types/three
+   
+   2. Place this component in your layout or page
+   
+   3. Required CSS on parent element:
+      position: relative;
+      width: 100%;
+      height: 100vh;
+   
+   4. If using ScrollControls (Drei):
+      Wrap content in <Scroll> inside ScrollControls
+   
+   5. Three.js object refs: use useRef() and attach via ref prop
+═══════════════════════════════════════════════════ */
+`;
+
+  return {
+    meta: {
+      url: window.location.href,
+      timestamp: new Date().toISOString(),
+      r3fImports: [...imports.r3f],
+      dreiImports: [...imports.drei],
+      canvasProps,
+      sceneNodeCount: (sceneJSX.match(/<[a-z]/g) || []).length,
+    },
+    jsx: output,
+    fileStructure: {
+      recommended: [
+        'src/components/canvas/Scene.tsx     ← paste jsx above here',
+        'src/components/canvas/index.ts      ← re-export Scene',
+        'src/hooks/useScroll.ts              ← R3F scroll hook',
+        'src/shaders/                        ← GLSL from script 14',
+        'public/models/                      ← GLB files',
+      ],
+      install: [
+        'pnpm add @react-three/fiber @react-three/drei three',
+        'pnpm add -D @types/three',
+      ],
+    },
+  };
+})()

package/scripts/18-font-extractor.js

@@ -0,0 +1,290 @@
+/**
+ * SCRIPT 18 — Font Extractor
+ * webgl-forensics skill | Enhancement #8
+ *
+ * PURPOSE:
+ *   Extract every font used on the site:
+ *   - Family names, weights, styles, formats
+ *   - Source URLs (download-ready)
+ *   - Unicode ranges and subsets
+ *   - Variable font axes (weight, width, optical size, etc.)
+ *   - Which elements use which fonts
+ *   - Self-hosted vs. Google Fonts vs. Adobe Fonts vs. other CDN
+ *   - CSS @font-face reconstruction for cloning
+ *
+ * RUN VIA:
+ *   evaluate_script — run after page is fully loaded
+ *
+ * OUTPUT:
+ *   - Complete @font-face CSS to paste into clone
+ *   - Download URLs for self-hosted fonts
+ *   - Google Fonts API URL if Google Fonts detected
+ *   - Variable font axis ranges for dynamic typography
+ */
+(() => {
+  const result = {
+    meta: {
+      url: window.location.href,
+      timestamp: new Date().toISOString(),
+      totalFontsFound: 0,
+    },
+    fonts: [],
+    variableFonts: [],
+    usedComputedFonts: [],
+    sourceBreakdown: {
+      selfHosted: [],
+      googleFonts: [],
+      adobeFonts: [],
+      cdnFonts: [],
+      systemFonts: [],
+    },
+    reconstructionCSS: '',
+    downloadInstructions: [],
+  };
+
+  // ═══════════════════════════════════════════════
+  // STEP 1 — Parse @font-face rules from all stylesheets
+  // ═══════════════════════════════════════════════
+  const fontFaceRules = [];
+
+  for (const sheet of document.styleSheets) {
+    try {
+      const rules = [...sheet.cssRules || []];
+      rules.forEach(rule => {
+        if (rule instanceof CSSFontFaceRule) {
+          fontFaceRules.push(rule);
+        }
+      });
+    } catch(e) {
+      // Cross-origin stylesheet — can't read rules
+      if (sheet.href) {
+        result.fonts.push({
+          source: sheet.href,
+          accessible: false,
+          note: 'Cross-origin stylesheet — check Network tab for font requests',
+        });
+      }
+    }
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 2 — Extract font metadata from @font-face rules
+  // ═══════════════════════════════════════════════
+  const processedFamilies = new Map();
+
+  fontFaceRules.forEach((rule, idx) => {
+    const style = rule.style;
+    const family = style.getPropertyValue('font-family')?.replace(/['"]/g, '').trim();
+    const src = style.getPropertyValue('src') || '';
+    const weight = style.getPropertyValue('font-weight') || '400';
+    const fontStyle = style.getPropertyValue('font-style') || 'normal';
+    const display = style.getPropertyValue('font-display') || 'auto';
+    const unicodeRange = style.getPropertyValue('unicode-range') || '';
+    const variationSettings = style.getPropertyValue('font-variation-settings') || '';
+
+    // Extract URLs from src
+    const urlMatches = [...src.matchAll(/url\(['"]?([^'")\s]+)['"]?\)/g)];
+    const formatMatches = [...src.matchAll(/format\(['"]?([^'")\s]+)['"]?\)/g)];
+
+    const sources = urlMatches.map((match, i) => ({
+      url: match[1],
+      format: formatMatches[i]?.[1] || 'unknown',
+      isAbsolute: match[1].startsWith('http'),
+      fullUrl: match[1].startsWith('http')
+        ? match[1]
+        : new URL(match[1], window.location.href).href,
+    }));
+
+    // Classify source
+    let sourceType = 'self-hosted';
+    const allUrls = sources.map(s => s.url).join(' ');
+    if (/fonts\.googleapis\.com|fonts\.gstatic\.com/i.test(allUrls + src)) sourceType = 'google-fonts';
+    else if (/use\.typekit\.net|typekit\.com|adobe/i.test(allUrls + src)) sourceType = 'adobe-fonts';
+    else if (/fonts\.bunny\.net|bunnyfonts/i.test(allUrls + src)) sourceType = 'bunny-fonts';
+    else if (/cdnfonts\.com|fontawesome|fontcdn/i.test(allUrls + src)) sourceType = 'cdn';
+
+    // Check for variable font (weight range like "100 900")
+    const isVariable = /\d+\s+\d+/.test(weight) || variationSettings.includes('wght');
+    const weightRange = isVariable
+      ? weight.split(/\s+/).map(Number).filter(Boolean)
+      : [parseInt(weight, 10)];
+
+    const fontEntry = {
+      id: idx,
+      family,
+      weight,
+      weightRange,
+      style: fontStyle,
+      display,
+      unicodeRange: unicodeRange || 'all',
+      isVariable,
+      variationSettings,
+      sourceType,
+      sources,
+      raw: rule.cssText.slice(0, 500),
+    };
+
+    result.fonts.push(fontEntry);
+
+    // Group by family
+    if (!processedFamilies.has(family)) {
+      processedFamilies.set(family, { family, weights: [], styles: [], sourceType, sources: [], isVariable });
+    }
+    const fam = processedFamilies.get(family);
+    fam.weights.push(weight);
+    fam.styles.push(fontStyle);
+    fam.sources.push(...sources);
+    if (isVariable) fam.isVariable = true;
+
+    // Source breakdown
+    if (sourceType === 'google-fonts') result.sourceBreakdown.googleFonts.push(family);
+    else if (sourceType === 'adobe-fonts') result.sourceBreakdown.adobeFonts.push(family);
+    else if (sourceType === 'cdn' || sourceType === 'bunny-fonts') result.sourceBreakdown.cdnFonts.push(family);
+    else result.sourceBreakdown.selfHosted.push(family);
+
+    if (isVariable) result.variableFonts.push({ family, weightRange, variationSettings });
+  });
+
+  // ═══════════════════════════════════════════════
+  // STEP 3 — Detect fonts via computed styles
+  //          (catches system fonts and fonts not declared in @font-face)
+  // ═══════════════════════════════════════════════
+  const computedFontMap = new Map();
+  const sampleElements = [
+    document.body,
+    document.querySelector('h1'),
+    document.querySelector('h2'),
+    document.querySelector('p'),
+    document.querySelector('a'),
+    document.querySelector('button'),
+    document.querySelector('nav'),
+    document.querySelector('.hero, [class*="hero"]'),
+    document.querySelector('[class*="title"]'),
+    document.querySelector('[class*="heading"]'),
+  ].filter(Boolean);
+
+  sampleElements.forEach(el => {
+    const computed = window.getComputedStyle(el);
+    const fontFamily = computed.fontFamily;
+    const fontSize = computed.fontSize;
+    const fontWeight = computed.fontWeight;
+    const letterSpacing = computed.letterSpacing;
+    const lineHeight = computed.lineHeight;
+
+    const tag = el.tagName.toLowerCase();
+    const cls = el.className && typeof el.className === 'string'
+      ? '.' + el.className.trim().split(/\s+/)[0]
+      : '';
+
+    if (!computedFontMap.has(fontFamily)) {
+      computedFontMap.set(fontFamily, {
+        fontFamily,
+        elements: [],
+        sizes: new Set(),
+        weights: new Set(),
+      });
+    }
+
+    const entry = computedFontMap.get(fontFamily);
+    entry.elements.push(`${tag}${cls}`);
+    entry.sizes.add(fontSize);
+    entry.weights.add(fontWeight);
+  });
+
+  result.usedComputedFonts = [...computedFontMap.values()].map(f => ({
+    ...f,
+    sizes: [...f.sizes],
+    weights: [...f.weights],
+    isSystemFont: !result.fonts.some(rf => rf.family === f.fontFamily.replace(/['"]/g, '').trim()),
+  }));
+
+  // System fonts
+  result.usedComputedFonts
+    .filter(f => f.isSystemFont)
+    .forEach(f => result.sourceBreakdown.systemFonts.push(f.fontFamily));
+
+  // ═══════════════════════════════════════════════
+  // STEP 4 — Font loading API status
+  // ═══════════════════════════════════════════════
+  const loadedFonts = [];
+  if (document.fonts) {
+    for (const font of document.fonts) {
+      loadedFonts.push({
+        family: font.family,
+        weight: font.weight,
+        style: font.style,
+        status: font.status, // 'loaded' | 'loading' | 'error'
+        unicodeRange: font.unicodeRange,
+      });
+    }
+  }
+  result.fontFaceAPI = {
+    total: loadedFonts.length,
+    loaded: loadedFonts.filter(f => f.status === 'loaded').length,
+    loading: loadedFonts.filter(f => f.status === 'loading').length,
+    error: loadedFonts.filter(f => f.status === 'error').length,
+    fonts: loadedFonts,
+  };
+
+  // ═══════════════════════════════════════════════
+  // STEP 5 — Reconstruct @font-face CSS
+  // ═══════════════════════════════════════════════
+  const cssLines = [
+    '/* ══════════════════════════════════════════════',
+    `   Fonts — webgl-forensics extraction`,
+    `   Source: ${window.location.href}`,
+    '══════════════════════════════════════════════ */',
+    '',
+  ];
+
+  result.fonts.forEach(font => {
+    if (font.sources.length === 0) return;
+
+    const srcParts = font.sources
+      .map(s => `url('${s.fullUrl}') format('${s.format}')`)
+      .join(',\n       ');
+
+    cssLines.push('@font-face {');
+    cssLines.push(`  font-family: '${font.family}';`);
+    cssLines.push(`  font-weight: ${font.weight};`);
+    if (font.style !== 'normal') cssLines.push(`  font-style: ${font.style};`);
+    cssLines.push(`  font-display: ${font.display || 'swap'};`);
+    if (font.unicodeRange && font.unicodeRange !== 'all') cssLines.push(`  unicode-range: ${font.unicodeRange};`);
+    cssLines.push(`  src: ${srcParts};`);
+    cssLines.push('}');
+    cssLines.push('');
+  });
+
+  result.reconstructionCSS = cssLines.join('\n');
+
+  // ═══════════════════════════════════════════════
+  // STEP 6 — Download instructions
+  // ═══════════════════════════════════════════════
+  const selfHostedFonts = result.fonts.filter(f => f.sourceType === 'self-hosted');
+  if (selfHostedFonts.length > 0) {
+    result.downloadInstructions.push('# Self-Hosted Fonts — Copy these files to /public/fonts/');
+    selfHostedFonts.forEach(font => {
+      font.sources.forEach(src => {
+        result.downloadInstructions.push(`curl -o "public/fonts/${src.url.split('/').pop()}" "${src.fullUrl}"`);
+      });
+    });
+  }
+
+  const googleFamilies = [...new Set(result.sourceBreakdown.googleFonts)];
+  if (googleFamilies.length > 0) {
+    result.downloadInstructions.push('');
+    result.downloadInstructions.push('# Google Fonts — Add to Next.js layout.tsx:');
+    result.downloadInstructions.push(`import { ${googleFamilies.map(f => f.replace(/\s+/g, '_')).join(', ')} } from 'next/font/google'`);
+    googleFamilies.forEach(family => {
+      const varName = family.replace(/\s+/g, '_').toLowerCase();
+      const weights = [...new Set(result.fonts.filter(f => f.family === family).map(f => f.weight))];
+      result.downloadInstructions.push(`const ${varName} = ${family.replace(/\s+/g, '_')}({ weight: [${weights.map(w => `'${w}'`).join(', ')}], subsets: ['latin'] })`);
+    });
+  }
+
+  result.meta.totalFontsFound = result.fonts.length;
+  result.meta.familiesFound = processedFamilies.size;
+  result.meta.variableFontCount = result.variableFonts.length;
+
+  return result;
+})()

package/scripts/19-design-token-export.js

@@ -0,0 +1,85 @@
+const extractDesignTokens = () => {
+  const tokens = {
+    cssVariables: {},
+    sampledColors: [],
+    tailwindScaffold: { extend: { colors: {}, fontFamily: {}, spacing: {} } }
+  };
+
+  const rootStyles = getComputedStyle(document.documentElement);
+
+  const extractFromRule = (rule) => {
+    for (let i = 0; i < rule.style.length; i++) {
+      const prop = rule.style[i];
+      if (prop.startsWith('--')) {
+        tokens.cssVariables[prop] = rootStyles.getPropertyValue(prop).trim();
+      }
+    }
+  };
+
+  const scanStyleSheets = () => {
+    try {
+      for (let i = 0; i < document.styleSheets.length; i++) {
+        const sheet = document.styleSheets[i];
+        if (!sheet.href || sheet.href.startsWith(window.location.origin)) {
+          for (let j = 0; j < sheet.cssRules.length; j++) {
+            const rule = sheet.cssRules[j];
+            if (rule.type === 1 && (rule.selectorText === ':root' || rule.selectorText === 'body' || rule.selectorText === 'html')) {
+              extractFromRule(rule);
+            }
+          }
+        }
+      }
+    } catch (e) {
+      // Ignore CORS errors
+    }
+  };
+
+  scanStyleSheets();
+
+  // If no variables found, fallback to inline styles on document body
+  if (Object.keys(tokens.cssVariables).length === 0 && document.body) {
+    if (document.body.style) {
+        extractFromRule({ style: document.body.style });
+    }
+    // Search inline style tags for :root
+    const inlineStyles = document.querySelectorAll('style');
+    inlineStyles.forEach(style => {
+        const text = style.textContent;
+        const matches = text.match(/--[\w-]+:[^;]+;/g);
+        if (matches) {
+            matches.forEach(m => {
+                const [key, val] = m.split(':');
+                if (key && val) tokens.cssVariables[key.trim()] = val.replace(';', '').trim();
+            });
+        }
+    });
+  }
+
+  // Sample colors from DOM
+  const colorSet = new Set();
+  const els = document.querySelectorAll('h1, h2, p, a, button, div, section, header, footer');
+  els.forEach(el => {
+    const style = getComputedStyle(el);
+    if (style.color !== 'rgba(0, 0, 0, 0)') colorSet.add(style.color);
+    if (style.backgroundColor !== 'rgba(0, 0, 0, 0)' && !style.backgroundColor.includes('transparent')) colorSet.add(style.backgroundColor);
+  });
+  tokens.sampledColors = Array.from(colorSet);
+
+  // Generate Tailwind Scaffold
+  for (const [key, value] of Object.entries(tokens.cssVariables)) {
+    const cleanKey = key.replace('--', '');
+    if (cleanKey.includes('color') || cleanKey.includes('text') || cleanKey.includes('bg')) {
+      const name = cleanKey.replace('color-', '').replace('bg-', '').replace('text-', '');
+      tokens.tailwindScaffold.extend.colors[name] = `var(${key})`;
+    } else if (cleanKey.includes('font')) {
+      const name = cleanKey.replace('font-', '').replace('family-', '');
+      tokens.tailwindScaffold.extend.fontFamily[name] = `var(${key})`;
+    } else if (cleanKey.includes('space') || cleanKey.includes('gap') || cleanKey.includes('pad')) {
+      tokens.tailwindScaffold.extend.spacing[cleanKey] = `var(${key})`;
+    }
+  }
+
+  return tokens;
+};
+
+return extractDesignTokens();