Button   = A1 (Surface)
         + A2 (Label)
         + A3 (Icon, optional)
         + A4 (InteractionState)
         + A5 (Spacing)

Card     = A1 (Surface, container)
         + A6 (Layout, internal)
         + children atoms
         + A5 (Spacing, padding)

Input    = A1 (Surface, input background)
         + A2 (Label, placeholder/value)
         + A8 (FormField, validation logic)
         + A4 (InteractionState, focus/error)
         + A5 (Spacing)

Navbar   = A6 (Layout, horizontal)
         + A1 (Surface, background bar)
         + Array<A2 + A4>  (links with hover states)

Modal    = A1 (Surface, dialog box)
         + A6 (Layout, header/body/footer)
         + children atoms
         + A4 (InteractionState, open/closed)

Avatar   = A1 (Surface, rounded container)
         + A7 (Media, image)
         + A2 (Label, fallback initials)

Toast    = A1 (Surface, notification box)
         + A2 (Label, message)
         + A3 (Icon, optional status)
         + A4 (InteractionState, visible/hidden)

Tabs     = A6 (Layout, tab row)
         + Array<A2 + A4>  (tab labels с active state)
         + A1 (Surface, content panel)

import { pipeline } from '@xenova/transformers';
const embedder = await pipeline('feature-extraction', 'Xenova/multilingual-e5-small');
 
async function embedAtom(atom: Atom): Promise<number[]> {
  const serialized = serializeAtomForEmbedding(atom);
  const output = await embedder(serialized, { pooling: 'mean', normalize: true });
  return Array.from(output.data);  // 384 floats
}
 
function serializeAtomForEmbedding(atom: Atom): string {
  return [
    `type:${atom.type}`,
    `tag:${atom.node.tagName}`,
    `styles:${summarizeStyles(atom.styles).join(',')}`,
    `children:${atom.children?.map(c => c.type).join(',') ?? 'none'}`
  ].join(' ');
}
 
// Batch inference для всех atoms компонента — ~300ms для ~50 atoms
async function batchEmbedAtoms(atoms: Atom[]): Promise<number[][]> {
  const serialized = atoms.map(serializeAtomForEmbedding);
  const output = await embedder(serialized, { pooling: 'mean', normalize: true });
  return output.map(o => Array.from(o.data));
}

// Direct tag mapping (only semantic tags)
const TAG_TO_ATOM_DIRECT: Record<string, AtomType> = {
  span: 'A2', p: 'A2', h1: 'A2', h2: 'A2', h3: 'A2', h4: 'A2', label: 'A2',
  svg: 'A3', i: 'A3',
  img: 'A7', video: 'A7', picture: 'A7',
  input: 'A8', textarea: 'A8', select: 'A8'
};
 
// Container tags (div, section, etc) — multi-atom by styles
function classifyContainer(node, styles): AtomType[] {
  const atoms: AtomType[] = [];
 
  if (['flex', 'grid', 'inline-flex'].includes(styles.display)) {
    atoms.push('A6');  // Layout
  }
  if (styles.backgroundColor !== 'transparent'
      || styles.border !== 'none'
      || styles.boxShadow !== 'none'
      || styles.borderRadius !== '0') {
    atoms.push('A1');  // Surface
  }
  // Если нет ни flex/grid, ни visual surface — просто structural wrapper, skip atom
  return atoms;
}
 
function decompose(tsx: string, spec: ComponentSpec): Atom[] {
  const ast = parseTsx(tsx);
  const atoms: Atom[] = [];
 
  walk(ast, node => {
    if (!isJSXElement(node)) return;
 
    const styles = extractStylesForNode(node, spec);
 
    // Compound component (Tabs.Item, Card.Body) — recurse if impl available
    if (node.tagName.includes('.')) {
      const [parent, sub] = node.tagName.split('.');
      const subImpl = findSubComponentImpl(parent, sub, spec.composition);
      if (subImpl) {
        const subAtoms = decompose(subImpl.tsx, subImpl.spec);
        atoms.push(...subAtoms);
        return;
      }
      // Fallback: treat as opaque element with parent semantic
      atoms.push({ type: 'A1', node, styles });
      return;
    }
 
    // Direct tag mapping
    const directAtom = TAG_TO_ATOM_DIRECT[node.tagName];
    if (directAtom) atoms.push({ type: directAtom, node, styles });
 
    // Container tags — multi-atom classification
    if (['div', 'section', 'article', 'main', 'aside', 'header', 'footer', 'nav']
        .includes(node.tagName)) {
      classifyContainer(node, styles).forEach(t =>
        atoms.push({ type: t, node, styles })
      );
    }
 
    // Style-driven atoms (всем nodes)
    if (hasInteractionStyles(styles)) atoms.push({ type: 'A4', node, styles });
    if (hasSpacingStyles(styles))     atoms.push({ type: 'A5', node, styles });
  });
 
  return mergeNested(atoms);  // <div A1><div A1> → single A1
}
 
function hasInteractionStyles(styles): boolean {
  return styles.pseudoClasses?.some(p =>
    /:hover|:focus|:active|:disabled|:checked/.test(p.selector)
  );
}
 
function hasSpacingStyles(styles): boolean {
  return Object.entries(styles).some(([prop, value]) =>
    /^(margin|padding|gap)/.test(prop) && value !== '0'
  );
}

async function matchAtomsFromCatalog(component: ComponentSpec): Promise<AtomMatch[]> {
  const atoms = decompose(component.tsx, component);
  const embeddings = await batchEmbedAtoms(atoms);
 
  return Promise.all(atoms.map(async (atom, i) => {
    const matches = await pgvector.query({
      table: 'atom_embeddings_text',
      vector: embeddings[i],
      limit: 3,
      distance: 'cosine'
    });
 
    return {
      atom_type: atom.type,
      best_match: matches[0],
      confidence: 1 - matches[0].distance,
      reuse: matches[0].distance < 0.15  // cosine threshold for reuse
    };
  }));
}

async function seedAtomCatalog() {
  // shadcn/ui компоненты как seed source
  const shadcnComponents = await loadShadcnComponents();
 
  for (const component of shadcnComponents) {
    const atoms = decompose(component.tsx, component.spec);
    const embeddings = await batchEmbedAtoms(atoms);
 
    for (const [i, atom] of atoms.entries()) {
      await db.atomCatalog.upsert({
        id: uuidv7(),
        type: atom.type,
        source: 'shadcn-seed',
        embedding: embeddings[i],
        canonical: true,
        created_at: now()
      });
    }
  }
}

Quarterly cleanup cron:
  - Atoms last_referenced > 6 months ago AND never reused
    → mark `deprecated`
  - Atoms `deprecated` > 12 months ago
    → physical delete
  - Anonymized atoms (from deleted users)
    → preserved (общественное благо, but contributed_by = null)

async function mergeNearDuplicateAtoms() {
  const atoms = await db.atomCatalog.where({ merged_into: null });
 
  for (const atom of atoms) {
    const neighbors = await pgvector.query({
      table: 'atom_embeddings_text',
      vector: atom.embedding,
      threshold: 0.97,
      excludeId: atom.id
    });
 
    for (const neighbor of neighbors) {
      if (neighbor.id === atom.id) continue;
      await mergeAtom(atom, neighbor);
    }
  }
}
 
async function mergeAtom(canonical: Atom, duplicate: Atom) {
  await db.transaction(async tx => {
    const dup = await tx.atoms.findOne(
      { id: duplicate.id },
      { lockMode: 'pessimistic_write' }
    );
    if (!dup || dup.merged_into) return;  // already merged
 
    await tx.atoms.update({ id: duplicate.id }, {
      merged_into: canonical.id,
      merged_at: now()
    });
    await tx.componentAtomRefs.update(
      { atom_id: duplicate.id },
      { atom_id: canonical.id }
    );
  });
}
 
// Component reads через redirect
async function resolveAtom(atomId: string): Promise<Atom> {
  let atom = await db.atoms.findOne({ id: atomId });
  while (atom.merged_into) atom = await db.atoms.findOne({ id: atom.merged_into });
  return atom;
}

# Run decomposition on test corpus
pnpm test:atom-poc --corpus=test-components/
 
# Outputs:
#   - decomposition_accuracy.csv (component × expected_atoms × actual_atoms)
#   - embedding_clustering_score.json
#   - cache_hit_simulation.json