@dano796/react-reart 0.1.0

package/LICENSE.md

@@ -0,0 +1,25 @@
+MIT + Commons Clause License Condition v1.0
+
+Copyright (c) 2026 Daniel Ortiz and Emanuel Londoño
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, and distribute the Software **as part of an application, website, or product**, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+## Commons Clause Restriction
+
+You may use this Software, including for any commercial purpose, **so long as you do not sell, sublicense, or redistribute the components themselves — whether alone, in a bundle, as a ported version, or as a packaged component library.**
+
+## No Warranty
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,222 @@
+# ReArt
+
+Algorithmic background components for React — installed like shadcn/ui, owned by you.
+
+```bash
+npx @dano796/react-reart add wave-ether
+```
+
+The component source is copied directly into your project. No runtime dependency. Full ownership of the code.
+
+---
+
+## How it works
+
+Inspired by [shadcn/ui](https://ui.shadcn.com/): instead of importing from a package, you install the component source files into your own project. You can read, edit, and extend them freely.
+
+---
+
+## Requirements
+
+- React 18 or 19
+- A bundler that handles `.tsx` files (Next.js, Vite, Remix, CRA, Astro, etc.)
+
+No other runtime dependencies. Components use only React and browser APIs (`canvas`, `requestAnimationFrame`, `ResizeObserver`).
+
+---
+
+## Installation
+
+Run from your project root:
+
+```bash
+npx @dano796/react-reart add <component-id>
+```
+
+This copies the component files into `components/backgrounds/` in your project. Adjust the import path to match your file structure.
+
+---
+
+## Commands
+
+```bash
+npx @dano796/react-reart list                   # Browse all available backgrounds
+npx @dano796/react-reart info <id>              # See files and description for a component
+npx @dano796/react-reart add <id>               # Install a component
+npx @dano796/react-reart add <id> --force       # Overwrite existing files
+npx @dano796/react-reart add <id> --dry-run         # Preview which files would be written
+npx @dano796/react-reart update <id>               # Re-fetch a component (with confirmation)
+npx @dano796/react-reart add background-studio     # Install all components + the studio playground
+```
+
+---
+
+## Components
+
+### `background-studio`
+
+Interactive playground to explore and configure all backgrounds with live preview and code export. Installs all four background components in one command.
+
+```bash
+npx @dano796/react-reart add background-studio
+```
+
+```tsx
+import { BackgroundStudio } from "./components/backgrounds/BackgroundStudio";
+
+<BackgroundStudio />
+```
+
+> **Note:** BackgroundStudio is a dev tool — use it locally to discover parameters, then drop the individual background component into production.
+
+---
+
+### `wave-ether`
+
+Sine waves from multiple drifting sources interfere to create standing waves and moiré patterns.
+
+```tsx
+import { WaveEther } from "./components/backgrounds/WaveEther";
+
+<WaveEther
+  sources={4}
+  frequency={0.02}
+  colorCrest="#00d4ff"
+  colorTrough="#0a0a2e"
+  colorMid="#7b2fff"
+  style={{ position: "absolute", inset: 0 }}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sources` | `number` | `3` | Number of wave sources (1–6) |
+| `frequency` | `number` | `0.018` | Wave spatial frequency |
+| `amplitude` | `number` | `1.0` | Wave height scale |
+| `waveSpeed` | `number` | `0.025` | Animation speed |
+| `resolution` | `number` | `8` | Pixel grid size (higher = faster) |
+| `colorCrest` | `string` | `"#00d4ff"` | Color at wave peaks |
+| `colorTrough` | `string` | `"#0a0a2e"` | Color at wave troughs |
+| `colorMid` | `string` | `"#7b2fff"` | Color at zero crossings |
+| `seed` | `number` | `42731` | RNG seed for source positions |
+
+---
+
+### `flow-currents`
+
+Thousands of particles trace Perlin noise vector fields forming organic density maps.
+
+```tsx
+import { FlowCurrents } from "./components/backgrounds/FlowCurrents";
+
+<FlowCurrents
+  count={3000}
+  speed={1.2}
+  colorWarm="#e8855a"
+  colorCool="#5a9bcc"
+  colorAccent="#a0c878"
+  style={{ position: "absolute", inset: 0 }}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | `3000` | Particle count (500–6000) |
+| `speed` | `number` | `1.0` | Flow speed multiplier |
+| `noiseScale` | `number` | `0.004` | Noise field scale |
+| `trailOpacity` | `number` | `8` | Trail fade amount (2–30) |
+| `noiseEvol` | `number` | `0.0005` | How fast the field evolves |
+| `colorWarm` | `string` | `"#e8855a"` | Warm region color |
+| `colorCool` | `string` | `"#5a9bcc"` | Cool region color |
+| `colorAccent` | `string` | `"#a0c878"` | Accent region color |
+| `seed` | `number` | `42731` | RNG seed |
+
+---
+
+### `gravity-storm`
+
+Multiple gravitational attractors pull a particle swarm into complex orbital patterns.
+
+```tsx
+import { GravityStorm } from "./components/backgrounds/GravityStorm";
+
+<GravityStorm
+  attractors={4}
+  gravity={1.2}
+  colorCore="#ff6b35"
+  colorTrail="#7b5ea7"
+  style={{ position: "absolute", inset: 0 }}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `count` | `number` | `1200` | Particle count (200–3000) |
+| `attractors` | `number` | `3` | Number of gravity wells (1–8) |
+| `gravity` | `number` | `1.0` | Gravity strength |
+| `turbulence` | `number` | `0.5` | Random velocity perturbation |
+| `orbitSpeed` | `number` | `0.008` | Attractor drift speed |
+| `colorCore` | `string` | `"#ff6b35"` | High-velocity particle color |
+| `colorTrail` | `string` | `"#7b5ea7"` | Low-velocity particle color |
+| `seed` | `number` | `42731` | RNG seed |
+
+---
+
+### `geo-pulse`
+
+Nested parametric polygons rotating at prime-ratio angular velocities.
+
+```tsx
+import { GeoPulse } from "./components/backgrounds/GeoPulse";
+
+<GeoPulse
+  layers={8}
+  sides={6}
+  pulse={0.15}
+  colorPrimary="#d97757"
+  style={{ position: "absolute", inset: 0 }}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `layers` | `number` | `7` | Number of polygon layers (3–12) |
+| `sides` | `number` | `6` | Polygon vertex count (3–12) |
+| `rotSpeed` | `number` | `0.008` | Base rotation speed |
+| `pulse` | `number` | `0.12` | Breathing amplitude (0–0.4) |
+| `connect` | `number` | `0.4` | Cross-layer connection density |
+| `colorPrimary` | `string` | `"#d97757"` | Primary line color |
+| `colorSecondary` | `string` | `"#6a9bcc"` | Secondary line color |
+| `colorAccent` | `string` | `"#e8d87a"` | Accent line color |
+| `seed` | `number` | `42731` | RNG seed |
+
+---
+
+## Usage in Next.js
+
+Canvas APIs require a browser environment. Mark any page or component that uses these as a Client Component:
+
+```tsx
+"use client";
+import { WaveEther } from "./components/backgrounds/WaveEther";
+```
+
+---
+
+## Usage in Vite / plain React
+
+No special setup needed. Import and use directly.
+
+---
+
+## Setting a custom registry (for development)
+
+```bash
+DANO796_REACT_REART_REGISTRY=http://localhost:3000/registry.json npx @dano796/react-reart list
+```
+
+---
+
+## License
+
+MIT

package/cli/build-registry.mjs

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+/**
+ * build-registry.mjs — generates cli/registry.json from the source registry.
+ *
+ * Uses esbuild to compile src/registry/index.ts on-the-fly and dynamically
+ * imports the registry array, ensuring robust parsing regardless of formatting.
+ *
+ * Usage: node cli/build-registry.mjs
+ */
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import { buildSync } from "esbuild";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, "..");
+
+// ─── Compile and load the registry ─────────────────────────────────────────
+
+const registryPath = path.join(root, "src", "registry", "index.ts");
+const tempOutfile = path.join(root, "cli", ".registry-temp.mjs");
+
+try {
+  // Compile TypeScript to ESM using esbuild
+  buildSync({
+    entryPoints: [registryPath],
+    bundle: true,
+    format: "esm",
+    platform: "node",
+    outfile: tempOutfile,
+    external: ["react", "react-dom", "ogl"], // Don't bundle peer dependencies
+    logLevel: "error",
+  });
+
+  // Dynamically import the compiled module
+  const registryModule = await import(
+    `file://${tempOutfile}?cacheBust=${Date.now()}`
+  );
+
+  if (!registryModule.registry || !Array.isArray(registryModule.registry)) {
+    throw new Error(
+      "Could not find 'registry' export in src/registry/index.ts or it is not an array"
+    );
+  }
+
+  const registry = registryModule.registry;
+
+  if (registry.length === 0) {
+    throw new Error("Registry array is empty");
+  }
+
+  // Extract only the fields needed for CLI
+  const entries = registry.map((entry) => {
+    if (!entry.id || !entry.name || !entry.files || entry.files.length === 0) {
+      throw new Error(
+        `Invalid registry entry: missing required fields (id, name, or files)`
+      );
+    }
+
+    return {
+      id: entry.id,
+      name: entry.name,
+      description: entry.description ?? "",
+      tags: entry.tags ?? [],
+      files: entry.files,
+      ...(entry.tier ? { tier: entry.tier } : {}),
+      ...(entry.peerDependencies?.length > 0
+        ? { peerDependencies: entry.peerDependencies }
+        : {}),
+    };
+  });
+
+  // ─── Output ────────────────────────────────────────────────────────────────
+
+  // Source paths in the TypeScript registry use the pattern:
+  //   src/components/backgrounds/X  →  components/backgrounds/X  (no doubling)
+  //   src/components/engines/X      →  components/backgrounds/engines/X
+  //   src/components/utils/X        →  components/backgrounds/utils/X
+  //   src/components/schemas/X      →  components/backgrounds/schemas/X
+  function sourceToTarget(sourcePath) {
+    // Handle backgrounds/ subdirectory first to avoid doubling
+    if (sourcePath.startsWith("src/components/backgrounds/")) {
+      return sourcePath.replace(
+        /^src\/components\/backgrounds\//,
+        "components/backgrounds/"
+      );
+    }
+    return sourcePath.replace(/^src\/components\//, "components/backgrounds/");
+  }
+
+  const BASE_URL =
+    "https://raw.githubusercontent.com/dano796/reart/main";
+
+  const output = {
+    version: "1.0.0",
+    baseUrl: BASE_URL,
+    components: entries.map((entry) => ({
+      id: entry.id,
+      name: entry.name,
+      description: entry.description,
+      tags: entry.tags,
+      files: entry.files.map((source) => ({
+        source,
+        target: sourceToTarget(source),
+      })),
+      ...(entry.tier ? { tier: entry.tier } : {}),
+      ...(entry.peerDependencies?.length > 0
+        ? { peerDependencies: entry.peerDependencies }
+        : {}),
+    })),
+  };
+
+  const outPath = path.join(root, "cli", "registry.json");
+  fs.writeFileSync(outPath, JSON.stringify(output, null, 2) + "\n", "utf-8");
+  console.log(
+    `✓ cli/registry.json written with ${output.components.length} components.`
+  );
+} catch (error) {
+  console.error("Error building registry:", error.message);
+  process.exit(1);
+} finally {
+  // Clean up temporary compiled file
+  if (fs.existsSync(tempOutfile)) {
+    fs.unlinkSync(tempOutfile);
+  }
+}
+