launchframe 0.1.13 → 0.2.1

package/packages/extract/mirror-emit.ts

@@ -1,620 +0,0 @@
-/**
- * Mirror emitter.
- *
- * Consumes a typed `SiteLayout` (produced by `dom-crawler.ts`) and writes:
- *   - `<dir>/page.tsx`      — a Next.js page that reconstructs the source's
- *                              section tree, grid composition, and density
- *                              from typed primitives, with `<TextSlot>` /
- *                              `<MediaSlot>` placeholders for content.
- *   - `<dir>/layout.json`   — the captured `SiteLayout` model for review.
- *   - `<dir>/MIRROR_NOTES.md` — what was extracted, how slots are filled.
- *
- * The emitter renders **slot placeholders** in `page.tsx` for final copy;
- * pair this with `reference/<host>/visible-text.txt` or `page.html` for
- * verbatim source strings when prompting an AI.
- */
-
-import { mkdirSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
-
-import type {
-  Composition,
-  SectionLayout,
-  SectionRole,
-  SiteLayout,
-  SlotCount,
-  SlotKind,
-  SiteTokens,
-} from "./types.js";
-
-export function emitMirror(layout: SiteLayout, outDir: string): string[] {
-  mkdirSync(outDir, { recursive: true });
-  const written: string[] = [];
-
-  const pagePath = join(outDir, "page.tsx");
-  writeFileSync(pagePath, emitPage(layout));
-  written.push(pagePath);
-
-  const layoutPath = join(outDir, "layout.json");
-  writeFileSync(layoutPath, JSON.stringify(layout, null, 2) + "\n");
-  written.push(layoutPath);
-
-  const notesPath = join(outDir, "MIRROR_NOTES.md");
-  writeFileSync(notesPath, emitNotes(layout));
-  written.push(notesPath);
-
-  return written;
-}
-
-/* -------------------------------------------------------------------------- */
-/*  page.tsx                                                                  */
-/* -------------------------------------------------------------------------- */
-
-function emitPage(layout: SiteLayout): string {
-  const componentName = toPascalCase(layout.host.replace(/[^a-z0-9]/gi, "-")) + "Mirror";
-
-  const sectionExprs = layout.sections.map((s, i) =>
-    emitSection(s, layout.tokens, i),
-  );
-
-  return [
-    '"use client";',
-    "",
-    "/**",
-    ` * Mirror page for ${layout.url}`,
-    ` * Captured ${layout.capturedAt}`,
-    ` * Viewport ${layout.viewport.width}×${layout.viewport.height}`,
-    " *",
-    " * Generated by launchframe — packages/extract/mirror-emit.ts",
-    " *",
-    " * Reference for exact copy + DOM: ../../reference/<host>/",
-    " * (visible-text.txt, page.html, media.json).",
-    " *",
-    " * Framer Motion: MirrorEnter / MirrorEnterFromEnd / MirrorStaggerRow.",
-    " * Icons: @phosphor-icons/react via @framework/blocks.",
-    " * Swap <MediaSlot> for next/image or <video controls playsInline>.",
-    " */",
-    "",
-    'import {',
-    "  CaretRight,",
-    "  Clock,",
-    "  FileText,",
-    "  ListBullets,",
-    "  MirrorEnter,",
-    "  MirrorEnterFromEnd,",
-    "  MirrorStaggerRow,",
-    "  MediaSlot,",
-    "  PlayCircle,",
-    "  Queue,",
-    "  Sparkle,",
-    "  Stagger,",
-    "  StaggerItem,",
-    "  TextSlot,",
-    "  VideoCamera,",
-    "} from \"@framework/blocks\";",
-    "",
-    `export const meta = ${JSON.stringify(
-      {
-        kind: "mirror",
-        source: layout.url,
-        capturedAt: layout.capturedAt,
-        referencePath: `../../reference/${layout.host}`,
-        sections: layout.sections.map((s) => ({
-          id: s.id,
-          role: s.role,
-          composition: s.composition,
-          density: s.density,
-        })),
-      },
-      null,
-      2,
-    )} as const;`,
-    "",
-    `export default function ${componentName}() {`,
-    "  return (",
-    `    <div className="mirror-root">`,
-    `      <style>{${JSON.stringify(emitScopedTokens(layout.tokens))}}</style>`,
-    ...sectionExprs.map((expr) => "      " + expr.split("\n").join("\n      ")),
-    "    </div>",
-    "  );",
-    "}",
-    "",
-  ].join("\n");
-}
-
-function emitScopedTokens(tokens: SiteTokens): string {
-  const radius = `${(tokens.radiusPx / 16).toFixed(3)}rem`;
-  const containerPx = tokens.containerPx ?? 1120;
-  return [
-    `.mirror-root {`,
-    `  --mirror-background: ${tokens.backgroundHex};`,
-    `  --mirror-foreground: ${tokens.foregroundHex};`,
-    `  --mirror-primary: ${tokens.primaryHex};`,
-    `  --mirror-muted: ${tokens.mutedHex};`,
-    `  --mirror-border: ${tokens.borderHex};`,
-    `  --mirror-radius: ${radius};`,
-    `  --mirror-container: ${containerPx}px;`,
-    `  --mirror-font-body: ${escapeFontFamily(tokens.bodyFontFamily)};`,
-    `  --mirror-font-heading: ${escapeFontFamily(tokens.headingFontFamily)};`,
-    `  background: var(--mirror-background);`,
-    `  color: var(--mirror-foreground);`,
-    `  font-family: var(--mirror-font-body);`,
-    `}`,
-    `.mirror-root h1, .mirror-root h2, .mirror-root h3 {`,
-    `  font-family: var(--mirror-font-heading);`,
-    `}`,
-    `.mirror-section { padding-block: 5rem; }`,
-    `@media (min-width: 768px) { .mirror-section { padding-block: 7rem; } }`,
-    `.mirror-container { max-width: var(--mirror-container); margin-inline: auto; padding-inline: 1.5rem; }`,
-  ].join("\n");
-}
-
-function escapeFontFamily(family: string): string {
-  const trimmed = family.replace(/^["']|["']$/g, "");
-  if (/^[a-zA-Z0-9_-]+$/.test(trimmed)) return `${trimmed}, system-ui, sans-serif`;
-  return `"${trimmed}", system-ui, sans-serif`;
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Per-section rendering                                                     */
-/* -------------------------------------------------------------------------- */
-
-function emitSection(s: SectionLayout, tokens: SiteTokens, index: number): string {
-  const wrapperBg = s.styles.backgroundHex ?? tokens.backgroundHex;
-  const padTop = s.styles.paddingTopPx ?? null;
-  const padBottom = s.styles.paddingBottomPx ?? null;
-  const styleAttr = emitStyleAttr({
-    backgroundColor: wrapperBg,
-    paddingTop: padTop !== null ? `${padTop}px` : undefined,
-    paddingBottom: padBottom !== null ? `${padBottom}px` : undefined,
-  });
-
-  const labelId = `${s.id}-heading`;
-  const inner = emitSectionInner(s, labelId);
-
-  return [
-    `<section`,
-    `  aria-labelledby=${JSON.stringify(labelId)}`,
-    `  data-mirror-section=${JSON.stringify(`${s.id}:${s.role}:${s.composition}:${s.density}`)}`,
-    `  className=${JSON.stringify(sectionWrapperClass(s.role, index))}`,
-    styleAttr ? `  style={${styleAttr}}` : "",
-    `>`,
-    `  <div className="mirror-container">`,
-    inner.split("\n").map((l) => "    " + l).join("\n"),
-    `  </div>`,
-    `</section>`,
-  ]
-    .filter((s) => s.length > 0)
-    .join("\n");
-}
-
-function emitStyleAttr(style: {
-  backgroundColor?: string | null;
-  paddingTop?: string | undefined;
-  paddingBottom?: string | undefined;
-}): string {
-  const entries: string[] = [];
-  if (style.backgroundColor)
-    entries.push(`backgroundColor: ${JSON.stringify(style.backgroundColor)}`);
-  if (style.paddingTop) entries.push(`paddingTop: ${JSON.stringify(style.paddingTop)}`);
-  if (style.paddingBottom)
-    entries.push(`paddingBottom: ${JSON.stringify(style.paddingBottom)}`);
-  if (entries.length === 0) return "";
-  return `{ ${entries.join(", ")} }`;
-}
-
-function sectionWrapperClass(role: SectionRole, index: number): string {
-  const base = "mirror-section";
-  if (role === "nav") return `${base} border-b border-border py-4 md:py-4`;
-  if (role === "footer") return `${base} border-t border-border bg-muted/30`;
-  if (role === "hero" && index === 0) return `${base} border-b border-border`;
-  return `${base} border-b border-border`;
-}
-
-function emitSectionInner(s: SectionLayout, labelId: string): string {
-  switch (s.composition) {
-    case "split-2":
-      return emitSplitTwo(s, labelId);
-    case "grid-2":
-    case "grid-3":
-    case "grid-4":
-      return emitGrid(s, labelId);
-    case "logo-row":
-      return emitLogoRow(s);
-    case "list":
-      return emitList(s, labelId);
-    case "single-column":
-    case "unknown":
-    default:
-      return emitSingleColumn(s, labelId);
-  }
-}
-
-function gridCols(composition: Composition): number {
-  if (composition === "grid-2") return 2;
-  if (composition === "grid-3") return 3;
-  if (composition === "grid-4") return 4;
-  return 1;
-}
-
-/* ---------- composition templates ---------- */
-
-function emitSingleColumn(s: SectionLayout, labelId: string): string {
-  const slots = slotMap(s.slots);
-  const head: string[] = [];
-
-  const eyebrow = slots.eyebrow ?? 0;
-  for (let i = 0; i < eyebrow; i++) head.push(textSlot("eyebrow"));
-
-  if ((slots["heading-1"] ?? 0) > 0) {
-    head.push(textSlot("heading-1", { id: labelId, count: slots["heading-1"]! }));
-  } else if ((slots["heading-2"] ?? 0) > 0) {
-    head.push(textSlot("heading-2", { id: labelId, count: 1 }));
-  }
-  const body = slots.body ?? 0;
-  for (let i = 0; i < Math.min(body, 3); i++) head.push(textSlot("body"));
-
-  const buttons: string[] = [];
-  if ((slots["button-primary"] ?? 0) > 0) buttons.push(textSlot("button-primary"));
-  if ((slots["button-secondary"] ?? 0) > 0) buttons.push(textSlot("button-secondary"));
-
-  const headBlock = head.length > 0 ? wrapMirrorEnter(head.join("\n")) : "";
-  const buttonsBlock =
-    buttons.length > 0
-      ? `<div className="mt-8 flex flex-wrap items-center gap-3">\n${indent(buttons.join("\n"), 2)}\n</div>`
-      : "";
-  const mediaBlock = emitMediaSlots(slots);
-
-  return [headBlock, buttonsBlock, mediaBlock].filter(Boolean).join("\n");
-}
-
-function emitSplitTwo(s: SectionLayout, labelId: string): string {
-  const slots = slotMap(s.slots);
-  const textChildren: string[] = [];
-  if ((slots.eyebrow ?? 0) > 0) textChildren.push(textSlot("eyebrow"));
-  if ((slots["heading-1"] ?? 0) > 0) {
-    textChildren.push(textSlot("heading-1", { id: labelId }));
-  } else if ((slots["heading-2"] ?? 0) > 0) {
-    textChildren.push(textSlot("heading-2", { id: labelId }));
-  }
-  const body = slots.body ?? 0;
-  for (let i = 0; i < Math.min(body, 2); i++) textChildren.push(textSlot("body"));
-
-  const bullets = slots.bullet ?? 0;
-  if (bullets > 0) {
-    const items: string[] = [];
-    for (let i = 0; i < Math.min(bullets, 5); i++) items.push(textSlot("bullet"));
-    textChildren.push(
-      [
-        '<ul className="mt-6 space-y-2 text-sm">',
-        ...items.map((it) => indent(it, 1)),
-        "</ul>",
-      ].join("\n"),
-    );
-  }
-
-  const buttons: string[] = [];
-  if ((slots["button-primary"] ?? 0) > 0) {
-    buttons.push(
-      '<span className="inline-flex items-center gap-2 has-[button]:gap-0"><TextSlot kind="button-primary" /><CaretRight className="size-4 opacity-90" weight="bold" aria-hidden /></span>',
-    );
-  }
-  if ((slots["button-secondary"] ?? 0) > 0) buttons.push(textSlot("button-secondary"));
-  if (buttons.length > 0) {
-    textChildren.push(
-      [
-        '<div className="mt-8 flex flex-wrap items-center gap-3">',
-        ...buttons.map((b) => indent(b, 1)),
-        "</div>",
-      ].join("\n"),
-    );
-  }
-
-  const textCol = wrapMirrorEnter(textChildren.join("\n"));
-  const mediaInner = emitHeroMediaColumn(slots);
-  const mediaCol = [`<MirrorEnterFromEnd>`, indent(mediaInner, 1), `</MirrorEnterFromEnd>`].join(
-    "\n",
-  );
-
-  return [
-    '<div className="grid items-center gap-12 md:grid-cols-2">',
-    `  <div>${"\n" + indent(textCol, 2) + "\n  "}</div>`,
-    `  <div>${"\n" + indent(mediaCol, 2) + "\n  "}</div>`,
-    "</div>",
-  ].join("\n");
-}
-
-/** Rich right column: product-style card + Phosphor + image/video slots. */
-function emitHeroMediaColumn(slots: Partial<Record<SlotKind, number>>): string {
-  const hasVideo = (slots.video ?? 0) > 0;
-  const queueCard = [
-    '<div className="overflow-hidden rounded-xl border border-border bg-card shadow-lg ring-1 ring-foreground/[0.06]">',
-    '  <header className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">',
-    '    <span className="flex items-center gap-2 min-w-0">',
-    '      <Queue className="size-5 shrink-0 text-[var(--mirror-primary)]" weight="duotone" aria-hidden />',
-    '      <TextSlot kind="eyebrow" />',
-    "    </span>",
-    '    <TextSlot kind="badge" />',
-    "  </header>",
-    '  <ul className="divide-y divide-border">',
-    "    <MirrorStaggerRow index={0} className=\"flex gap-3 px-4 py-3\">",
-    '      <FileText className="size-5 shrink-0 text-[var(--mirror-primary)] mt-0.5" weight="duotone" aria-hidden />',
-    '      <div className="min-w-0 space-y-1">',
-    '        <TextSlot kind="heading-3" />',
-    '        <TextSlot kind="body" />',
-    "      </div>",
-    "    </MirrorStaggerRow>",
-    "    <MirrorStaggerRow index={1} className=\"flex gap-3 px-4 py-3\">",
-    '      <Clock className="size-5 shrink-0 text-[var(--mirror-primary)] mt-0.5" weight="duotone" aria-hidden />',
-    '      <div className="min-w-0 space-y-1">',
-    '        <TextSlot kind="heading-3" />',
-    '        <TextSlot kind="body" />',
-    "      </div>",
-    "    </MirrorStaggerRow>",
-    "    <MirrorStaggerRow index={2} className=\"flex gap-3 px-4 py-3\">",
-    '      <ListBullets className="size-5 shrink-0 text-[var(--mirror-primary)] mt-0.5" weight="duotone" aria-hidden />',
-    '      <div className="min-w-0 space-y-1">',
-    '        <TextSlot kind="heading-3" />',
-    '        <TextSlot kind="body" />',
-    "      </div>",
-    "    </MirrorStaggerRow>",
-    "  </ul>",
-    "</div>",
-  ].join("\n");
-
-  const imageBlock = [
-    '<div className="mt-6 space-y-3">',
-    '  <MediaSlot kind="image" aspect="video" />',
-    "  {/* Drop in when you have assets: import Image from 'next/image' */}",
-    '  {/* <Image src="/hero.jpg" alt="" fill className="object-cover rounded-xl" sizes="(max-width:768px) 100vw, 50vw" /> */}',
-    "</div>",
-  ].join("\n");
-
-  const videoBlock = hasVideo
-    ? [
-        '<div className="mt-6">',
-        '  <div className="relative overflow-hidden rounded-xl border border-border bg-muted/30 aspect-video">',
-        '    <VideoCamera className="absolute left-3 top-3 size-6 text-muted-foreground" weight="duotone" aria-hidden />',
-        '    <video className="h-full w-full object-cover" controls playsInline preload="metadata" poster="/poster-frame.jpg">',
-        '      <source src="/product-demo.mp4" type="video/mp4" />',
-        "    </video>",
-        "  </div>",
-        '  <p className="mt-2 text-xs text-muted-foreground">No autoplay — swap poster + src from reference/media.json.</p>',
-        "</div>",
-      ].join("\n")
-    : [
-        '<div className="mt-6 flex items-center gap-2 text-xs text-muted-foreground">',
-        '  <PlayCircle className="size-4 shrink-0" weight="regular" aria-hidden />',
-        '  <span>Optional: add a <code className="font-mono">video</code> block; see media.json from the crawl.</span>',
-        "</div>",
-      ].join("\n");
-
-  return [queueCard, imageBlock, videoBlock].join("\n");
-}
-
-function emitGrid(s: SectionLayout, labelId: string): string {
-  const slots = slotMap(s.slots);
-  const cols = gridCols(s.composition);
-
-  const heading =
-    (slots["heading-1"] ?? 0) > 0
-      ? textSlot("heading-1", { id: labelId })
-      : (slots["heading-2"] ?? 0) > 0
-        ? textSlot("heading-2", { id: labelId })
-        : "";
-  const introBody =
-    (slots.body ?? 0) > 0 ? `<div className="mt-4">${textSlot("body")}</div>` : "";
-
-  const cardHeading: SlotKind =
-    (slots["heading-2"] ?? 0) >= cols ? "heading-2" : "heading-3";
-
-  const cardCount = Math.max(cols, Math.min(Math.max(slots["heading-3"] ?? 0, cols * 2), 12));
-  const cards = Array.from({ length: cardCount }, (_, i) => i);
-
-  const grid = [
-    `<Stagger as="ul" className=${JSON.stringify(`mt-12 grid gap-6 md:grid-cols-${cols}`)}>`,
-    ...cards.map(() =>
-      [
-        '  <StaggerItem as="li" className="flex flex-col gap-3 rounded-lg border border-border bg-card p-6">',
-        '    <Sparkle className="size-10 text-[var(--mirror-primary)]" weight="duotone" aria-hidden />',
-        `    ${textSlot(cardHeading)}`,
-        `    ${textSlot("body")}`,
-        "  </StaggerItem>",
-      ].join("\n"),
-    ),
-    "</Stagger>",
-  ];
-
-  const head = [
-    heading ? wrapMirrorEnter(heading) : "",
-    introBody,
-  ]
-    .filter(Boolean)
-    .join("\n");
-
-  return [head, grid.join("\n")].filter(Boolean).join("\n");
-}
-
-function emitLogoRow(s: SectionLayout): string {
-  const slots = slotMap(s.slots);
-  const count = Math.max(4, Math.min(slots["logo-mono"] ?? 6, 8));
-  const items: string[] = [];
-  for (let i = 0; i < count; i++) {
-    items.push(mediaSlot("logo-mono", { aspect: "auto", className: "h-7 w-24" }));
-  }
-  return [
-    '<div className="text-center text-xs font-semibold uppercase tracking-wider text-muted-foreground">',
-    "  <TextSlot kind=\"eyebrow\" />",
-    "</div>",
-    '<div className="mt-8 grid grid-cols-2 items-center justify-items-center gap-x-10 gap-y-6 sm:grid-cols-3 md:grid-cols-6">',
-    ...items.map((it) => `  ${it}`),
-    "</div>",
-  ].join("\n");
-}
-
-function emitList(s: SectionLayout, labelId: string): string {
-  const slots = slotMap(s.slots);
-  const heading =
-    (slots["heading-1"] ?? 0) > 0
-      ? textSlot("heading-1", { id: labelId })
-      : (slots["heading-2"] ?? 0) > 0
-        ? textSlot("heading-2", { id: labelId })
-        : "";
-
-  const items: string[] = [];
-  const count = Math.max(3, Math.min(slots.bullet ?? 5, 8));
-  for (let i = 0; i < count; i++) items.push(textSlot("bullet"));
-
-  return [
-    heading ? wrapMirrorEnter(heading) : "",
-    `<ul className="mt-8 space-y-3 text-sm">`,
-    ...items.map((it) => `  ${it}`),
-    "</ul>",
-  ]
-    .filter(Boolean)
-    .join("\n");
-}
-
-/* ---------- slot helpers ---------- */
-
-function slotMap(slots: SlotCount[]): Partial<Record<SlotKind, number>> {
-  const out: Partial<Record<SlotKind, number>> = {};
-  for (const s of slots) out[s.kind] = s.count;
-  return out;
-}
-
-function textSlot(
-  kind: "eyebrow" | "heading-1" | "heading-2" | "heading-3" | "body" | "bullet" | "button-primary" | "button-secondary" | "badge",
-  opts: { id?: string; count?: number } = {},
-): string {
-  const idAttr = opts.id ? ` id=${JSON.stringify(opts.id)}` : "";
-  return `<TextSlot kind=${JSON.stringify(kind)}${idAttr} />`;
-}
-
-function mediaSlot(
-  kind: "image" | "logo-mono" | "icon" | "video" | "code",
-  opts: { aspect?: "video" | "square" | "4/3" | "21/9" | "auto"; className?: string } = {},
-): string {
-  const attrs: string[] = [`kind=${JSON.stringify(kind)}`];
-  if (opts.aspect) attrs.push(`aspect=${JSON.stringify(opts.aspect)}`);
-  if (opts.className) attrs.push(`className=${JSON.stringify(opts.className)}`);
-  return `<MediaSlot ${attrs.join(" ")} />`;
-}
-
-function emitMediaSlots(
-  slots: Partial<Record<SlotKind, number>>,
-  opts: { aspect?: "video" | "square" | "4/3" | "21/9" | "auto" } = {},
-): string {
-  const parts: string[] = [];
-  if ((slots.image ?? 0) > 0) parts.push(mediaSlot("image", { aspect: opts.aspect ?? "video" }));
-  if ((slots.code ?? 0) > 0) parts.push(mediaSlot("code", { aspect: "auto" }));
-  if ((slots.video ?? 0) > 0) {
-    parts.push(
-      [
-        '<div className="overflow-hidden rounded-xl border border-border aspect-video bg-muted/20">',
-        '  <video className="h-full w-full object-cover" controls playsInline preload="metadata" poster="/poster.jpg">',
-        '    <source src="/clip.mp4" type="video/mp4" />',
-        "  </video>",
-        "</div>",
-      ].join("\n"),
-    );
-  }
-  if (parts.length === 0) return "";
-  if (parts.length === 1) return `<div className="mt-12">${parts[0]}</div>`;
-  return [
-    '<div className="mt-12 grid gap-6 md:grid-cols-2">',
-    ...parts.map((p) => `  ${p}`),
-    "</div>",
-  ].join("\n");
-}
-
-function wrapMirrorEnter(children: string): string {
-  return [
-    "<MirrorEnter>",
-    indent(children, 1),
-    "</MirrorEnter>",
-  ].join("\n");
-}
-
-function indent(s: string, levels: number): string {
-  const pad = "  ".repeat(levels);
-  return s
-    .split("\n")
-    .map((l) => (l.length > 0 ? pad + l : l))
-    .join("\n");
-}
-
-function toPascalCase(input: string): string {
-  return input
-    .split(/[^a-zA-Z0-9]+/)
-    .filter(Boolean)
-    .map((w) => w[0]!.toUpperCase() + w.slice(1))
-    .join("") || "Mirror";
-}
-
-/* -------------------------------------------------------------------------- */
-/*  MIRROR_NOTES.md                                                           */
-/* -------------------------------------------------------------------------- */
-
-function emitNotes(layout: SiteLayout): string {
-  const lines: string[] = [];
-  lines.push(`# Mirror notes — ${layout.host}`);
-  lines.push("");
-  lines.push(`Source URL: ${layout.url}`);
-  lines.push(`Captured: ${layout.capturedAt}`);
-  lines.push(`Viewport: ${layout.viewport.width}×${layout.viewport.height}`);
-  lines.push(`Rendered page height: ${layout.pageHeightPx}px`);
-  lines.push("");
-  lines.push("## What was extracted");
-  lines.push("");
-  lines.push(
-    "- Top-level section tree (geometry, role, composition, density)",
-  );
-  lines.push("- Slot inventory per section (counts of headings / body / buttons / images / icons / logos)");
-  lines.push("- Per-section background and padding");
-  lines.push("- Page-level tokens (fonts, primary/muted/border/foreground, radius, container width)");
-  lines.push("- **Polished UI shell** in `page.tsx`: Framer Motion (`MirrorEnter`, `MirrorEnterFromEnd`, `MirrorStaggerRow`), Phosphor icons, image + video placeholders");
-  lines.push("");
-  lines.push("## Verbatim reference (same crawl)");
-  lines.push("");
-  lines.push(`Open **../reference/${layout.host}/** alongside this folder:`);
-  lines.push("");
-  lines.push("- `page.html` — full serialized DOM after JS (exact structure for an AI)");
-  lines.push("- `visible-text.txt` / `visible-text.json` — visible headings, paragraphs, buttons");
-  lines.push("- `media.json` — image and video URLs from the page");
-  lines.push("- `FOR_AI_REFERENCE.md` — how to use the bundle");
-  lines.push("");
-  lines.push("Paste `visible-text.txt` or excerpts into your AI when filling `<TextSlot>` nodes.");
-  lines.push("");
-  lines.push("## What stays as slots in page.tsx");
-  lines.push("");
-  lines.push("`<TextSlot>` / `<MediaSlot>` keep the React tree clean until you substitute real strings and assets. Copy text from `visible-text.txt`; swap `poster` / `src` on `<video>` and `next/image` from `media.json`.");
-  lines.push("");
-  lines.push("## Section breakdown");
-  lines.push("");
-  lines.push("| # | role | composition | density | slots |");
-  lines.push("| - | ---- | ----------- | ------- | ----- |");
-  for (const s of layout.sections) {
-    const slotSummary = s.slots
-      .map((sl) => `${sl.kind}×${sl.count}`)
-      .join(", ");
-    lines.push(
-      `| ${s.id} | ${s.role} | ${s.composition} | ${s.density} | ${slotSummary || "—"} |`,
-    );
-  }
-  lines.push("");
-  lines.push("## How to fill in slots");
-  lines.push("");
-  lines.push("```tsx");
-  lines.push('// Empty (renders dashed placeholder):');
-  lines.push('<TextSlot kind="heading-1" />');
-  lines.push("");
-  lines.push("// Filled:");
-  lines.push('<TextSlot kind="heading-1">The thing your product does, in plain language.</TextSlot>');
-  lines.push('<MediaSlot kind="image" aspect="video">');
-  lines.push("  <Image src=\"/hero.jpg\" alt=\"Hero photograph\" width={1200} height={675} />");
-  lines.push("</MediaSlot>");
-  lines.push("```");
-  lines.push("");
-  return lines.join("\n");
-}

package/packages/extract/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "@framework/extract",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "main": "./extract.ts",
-  "scripts": {
-    "extract": "tsx extract.ts"
-  },
-  "dependencies": {
-    "playwright": "^1.48.0"
-  }
-}