multiclone 0.0.0-stage → 0.2.0

package/templates/react-vite/src/components/README.md

@@ -0,0 +1,7 @@
+One folder per page area (layout, hero, sections, ui). Keep heavy parts (canvas, WebGL, Rive) lazy.
+
+Compare markers (helpers in `@/lib/mc`):
+
+- Wrap each rebuilt section in `<section {...mcSection('03-pricing')}>` using the id from the capture's `sections/<id>/section.md`.
+- Tag scroll-animated elements with `{...mcTrack('t0abc123')}` using the track id from `motion.json`.
+- Tag elements with captured hover states with `{...mcHover('t0abc123')}` (same id scheme, listed in `interactions.json`).

package/templates/react-vite/src/content/README.md

@@ -0,0 +1,2 @@
+Typed content data extracted from the capture lives here (one `.ts` file per section group).
+`asset-map.json` is written by `multiclone assets` and maps original URLs to `/media/...` paths.

package/templates/react-vite/src/hooks/useActiveSection.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Tracks the last section whose top has crossed a line `lineRatio` down the viewport.
+ * Null above the first section.
+ */
+export function useActiveSection(ids: readonly string[], lineRatio = 0.4): string | null {
+  const [active, setActive] = useState<string | null>(null);
+
+  useEffect(() => {
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const line = window.innerHeight * lineRatio;
+      let current: string | null = null;
+      for (const id of ids) {
+        const node = document.getElementById(id);
+        if (!node) continue;
+        if (node.getBoundingClientRect().top <= line) current = id;
+      }
+      setActive(current);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener('scroll', schedule, { passive: true });
+    window.addEventListener('resize', schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      window.removeEventListener('scroll', schedule);
+      window.removeEventListener('resize', schedule);
+    };
+  }, [ids, lineRatio]);
+
+  return active;
+}

package/templates/react-vite/src/hooks/useInView.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState, type RefObject } from 'react';
+
+/** Flips to true once the element comes within `rootMargin` of the viewport, then stays true. */
+export function useInViewOnce(ref: RefObject<Element | null>, rootMargin = '200px'): boolean {
+  const [seen, setSeen] = useState(false);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node || seen) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          setSeen(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin },
+    );
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, rootMargin, seen]);
+  return seen;
+}
+
+/** Live visibility for media that should pause off-screen. */
+export function useInView(ref: RefObject<Element | null>, rootMargin = '0px'): boolean {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const last = entries.at(-1);
+        if (last) setVisible(last.isIntersecting);
+      },
+      { rootMargin },
+    );
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, rootMargin]);
+  return visible;
+}

package/templates/react-vite/src/hooks/useMediaQuery.ts

@@ -0,0 +1,15 @@
+import { useSyncExternalStore } from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  return useSyncExternalStore(
+    (notify) => {
+      const list = window.matchMedia(query);
+      list.addEventListener('change', notify);
+      return () => {
+        list.removeEventListener('change', notify);
+      };
+    },
+    () => window.matchMedia(query).matches,
+    () => false,
+  );
+}

package/templates/react-vite/src/lib/cn.ts

@@ -0,0 +1,4 @@
+/** Joins truthy class names. */
+export function cn(...parts: readonly (string | false | null | undefined)[]): string {
+  return parts.filter(Boolean).join(' ');
+}

package/templates/react-vite/src/lib/math.ts

@@ -0,0 +1,21 @@
+export const clamp = (value: number, min = 0, max = 1): number =>
+  Math.min(max, Math.max(min, value));
+
+export const lerp = (from: number, to: number, t: number): number => from + (to - from) * t;
+
+/** Hermite smoothstep, matching the CSS `t*t*(3-2t)` curve the stylesheet uses. */
+export const smoothstep = (t: number): number => {
+  const x = clamp(t);
+  return x * x * (3 - 2 * x);
+};
+
+/** Deterministic PRNG so the graph lays out identically on every load. */
+export function mulberry32(seed: number): () => number {
+  let a = seed;
+  return () => {
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}

package/templates/react-vite/src/lib/mc.ts

@@ -0,0 +1,13 @@
+/**
+ * Markers `multiclone compare` reads to line the rebuild up with the original. They have no
+ * styling effect; keep them in production builds or strip them, either works.
+ */
+export const mcSection = (id: string): { 'data-mc-section': string } => ({
+  'data-mc-section': id,
+});
+
+/** Element whose scroll motion must match the original track `id` from motion.json. */
+export const mcTrack = (id: string): { 'data-mc-track': string } => ({ 'data-mc-track': id });
+
+/** Element whose hover state must match the captured interaction with this track id. */
+export const mcHover = (id: string): { 'data-mc-hover': string } => ({ 'data-mc-hover': id });

package/templates/react-vite/src/lib/media.ts

@@ -0,0 +1,4 @@
+export const DESKTOP_QUERY = '(min-width: 58.75rem)';
+export const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';
+
+export const prefersReducedMotion = (): boolean => window.matchMedia(REDUCED_MOTION_QUERY).matches;

package/templates/react-vite/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from '@/app/App';
+import '@/styles/index.css';
+
+const container = document.getElementById('root');
+if (!container) throw new Error('Missing #root container');
+
+createRoot(container).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/templates/react-vite/src/providers/SmoothScroll.tsx

@@ -0,0 +1,24 @@
+import { useEffect, type ReactNode } from 'react';
+import Lenis from 'lenis';
+import { prefersReducedMotion } from '@/lib/media';
+
+/**
+ * Inertial scrolling for originals that use Lenis/Locomotive/ScrollSmoother. Native scroll stays
+ * authoritative so CSS scroll timelines keep working. Remove it if the original scrolls natively.
+ */
+export function SmoothScroll({ children }: { readonly children: ReactNode }) {
+  useEffect(() => {
+    if (prefersReducedMotion()) return;
+    const lenis = new Lenis({ lerp: 0.12, anchors: { offset: 0 } });
+    let frame = requestAnimationFrame(function loop(time) {
+      lenis.raf(time);
+      frame = requestAnimationFrame(loop);
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      lenis.destroy();
+    };
+  }, []);
+
+  return children;
+}

package/templates/react-vite/src/styles/base.css

@@ -0,0 +1,42 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+html.lenis,
+html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/templates/react-vite/src/styles/draft.css

@@ -0,0 +1 @@
+/* Filled by `multiclone draft`: element reset and page-level styles of the original. */

package/templates/react-vite/src/styles/fonts.css

@@ -0,0 +1 @@
+/* `multiclone scaffold --capture <dir>` writes the captured @font-face rules here. */

package/templates/react-vite/src/styles/index.css

@@ -0,0 +1,4 @@
+@import './fonts.css';
+@import './tokens.css';
+@import './base.css';
+@import './draft.css';

package/templates/react-vite/src/styles/tokens.css

@@ -0,0 +1,3 @@
+/* `multiclone scaffold --capture <dir>` copies the capture's tokens.css here. */
+:root {
+}

package/templates/react-vite/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/react-vite/tsconfig.app.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "types": ["vite/client"],
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "isolatedModules": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "paths": { "@/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}

package/templates/react-vite/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}

package/templates/react-vite/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["vite.config.ts", "eslint.config.js"]
+}

package/templates/react-vite/vite.config.ts

@@ -0,0 +1,37 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { fileURLToPath, URL } from 'node:url';
+import { defineConfig, type ProxyOptions } from 'vite';
+import react from '@vitejs/plugin-react';
+
+interface MockConfig {
+  readonly mirror: string;
+  readonly paths: readonly string[];
+}
+
+/** `mc.config.json` (written by `multiclone scaffold --capture`) proxies captured API calls to the mirror. */
+function mockProxy(): Record<string, ProxyOptions> {
+  const file = fileURLToPath(new URL('./mc.config.json', import.meta.url));
+  if (!existsSync(file)) return {};
+  const parsed: unknown = JSON.parse(readFileSync(file, 'utf8'));
+  if (!isMockConfig(parsed)) return {};
+  const mirror = process.env.MC_MIRROR ?? parsed.mirror;
+  return Object.fromEntries(parsed.paths.map((path) => [path, { target: mirror, changeOrigin: true }]));
+}
+
+function isMockConfig(value: unknown): value is MockConfig {
+  if (typeof value !== 'object' || value === null) return false;
+  const { mirror, paths } = value as { mirror?: unknown; paths?: unknown };
+  return (
+    typeof mirror === 'string' &&
+    Array.isArray(paths) &&
+    paths.every((path) => typeof path === 'string')
+  );
+}
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
+  },
+  server: { host: '127.0.0.1', port: {{port}}, strictPort: true, proxy: mockProxy() },
+});