copy-dom.js

// Select element in Elements panel first ($0), then run:

const el = $0;

function safePrune(obj, depth = 0, seen = new WeakSet()) {
  if (depth > 3) return '[deep]';
  if (obj === null || obj === undefined) return obj;
  if (typeof obj === 'function') return `[fn: ${obj.name || 'anon'}]`;
  if (typeof obj !== 'object') return obj;
  if (obj instanceof HTMLElement) return `[${obj.tagName.toLowerCase()}]`;
  if (seen.has(obj)) return '[circular]';
  seen.add(obj);
  if (Array.isArray(obj)) return obj.slice(0, 5).map(v => safePrune(v, depth + 1, seen));
  const out = {};
  for (const [k, v] of Object.entries(obj)) {
    if (k === 'children' || k === '_owner' || k === '_store' || k.startsWith('__react')) continue;
    out[k] = safePrune(v, depth + 1, seen);
  }
  return out;
}

function getReactFiber(dom) {
  const key = Object.keys(dom).find(k =>
    k.startsWith('__reactFiber$') || k.startsWith('__reactInternalInstance$')
  );
  return key ? dom[key] : null;
}

function getReactComponents(dom) {
  const components = [];
  let fiber = getReactFiber(dom);
  while (fiber) {
    if (typeof fiber.type === 'function' || typeof fiber.type === 'object') {
      const name = fiber.type?.displayName || fiber.type?.name || 'Anonymous';
      const props = fiber.memoizedProps ? safePrune(fiber.memoizedProps) : {};
      components.push({ name, props });
    }
    fiber = fiber.return;
  }
  return components;
}

const reactChain = getReactComponents(el);

const path = [];
let node = el;
while (node.parentElement) {
  const tag = node.tagName.toLowerCase();
  const id = node.id ? `#${node.id}` : '';
  const cls = node.className && typeof node.className === 'string'
    ? '.' + [...node.classList].join('.') : '';
  path.unshift(tag + id + cls);
  node = node.parentElement;
}

const html = el.outerHTML;

function getRelevantStyles(element) {
  const computed = getComputedStyle(element);
  const temp = document.createElement(element.tagName);
  document.body.appendChild(temp);
  const defaults = getComputedStyle(temp);
  const diff = {};
  for (const prop of computed) {
    if (computed.getPropertyValue(prop) !== defaults.getPropertyValue(prop)) {
      diff[prop] = computed.getPropertyValue(prop);
    }
  }
  document.body.removeChild(temp);
  return diff;
}

const styles = getRelevantStyles(el);

const childStyles = {};
el.querySelectorAll('*').forEach((child, i) => {
  if (i > 50) return;
  const tag = child.tagName.toLowerCase();
  const cls = child.className && typeof child.className === 'string'
    ? '.' + [...child.classList].join('.') : '';
  const key = `${tag}${cls}[${i}]`;
  const s = getRelevantStyles(child);
  if (Object.keys(s).length) childStyles[key] = s;
});

const prompt = `Recreate this UI element as a React component.

## REACT COMPONENT CHAIN (innermost → outermost)
${reactChain.length
  ? reactChain.map((c, i) =>
      `${i === 0 ? '→' : ' '} <${c.name}> props: ${JSON.stringify(c.props)}`
    ).join('\n')
  : 'No React components found (production build?)'}

## DOM PATH
${path.join(' > ')}

## HTML
${html}

## ELEMENT STYLES (non-default only)
${JSON.stringify(styles, null, 2)}

## CHILD STYLES
${JSON.stringify(childStyles, null, 2)}
`;

copy(prompt);
console.log('✅ Copied to clipboard!');
console.log(`📊 ${reactChain.length} React components, ${Object.keys(childStyles).length} styled children`);