@chuzi/shared 0.2.0

package/dist/realms/index.d.ts

@@ -0,0 +1,109 @@
+import { StoryListItem, RealmId } from '../types/index.js';
+
+/**
+ * Realm rendering contract. Each realm (cosmos, wilds, future depths/etc)
+ * implements this interface and ships as a self-contained subpath module
+ * (`@chuzi/shared/realms/cosmos`, `@chuzi/shared/realms/wilds`, ...).
+ *
+ * Apps don't import realms directly — they read `user.realm`, then dynamic-
+ * import the matching module. Adding a new realm is a one-package change
+ * with zero modifications to app code.
+ *
+ * The `Component` generic is left abstract so this contract works for any
+ * renderer. Web/TV apps satisfy it with `React.ComponentType`; React Native
+ * apps satisfy it with their own component type. chuzi-shared itself stays
+ * dependency-free.
+ */
+/** State badge applied to an atom regardless of realm. Realms render it
+ *  in their own visual language (orbit ring, marker post, glow, etc.). */
+type AtomState = "default" | "watched" | "bookmarked" | "in_progress" | "new";
+/** Continuous zoom levels. Camera flies smoothly between them; LOD swaps
+ *  geometry/asset quality as it crosses thresholds. */
+type ZoomLevel = "overview" | "sector" | "atom";
+interface AtomVisualProps {
+    /** Position in realm-space (the realm decides the coordinate convention). */
+    position: [number, number, number];
+    /** Relative scale, 0–1 normalized. Realms map this to height/girth/etc. */
+    scale: number;
+    /** Realm-interpretable hue, 0–360. Cosmos: stellar class. Wilds: foliage. */
+    hue: number;
+    /** Realm-interpretable intensity, 0–1. Cosmos: luminosity. Wilds: density. */
+    intensity: number;
+    /** Cross-realm state badge. */
+    state: AtomState;
+    /** Pass-through metadata for realm-specific rendering. */
+    metadata: {
+        title: string;
+        runtime?: number;
+        popularity?: number;
+        mood?: string;
+        genre?: string | null;
+    };
+}
+type AtomMapping = (film: StoryListItem) => AtomVisualProps;
+interface AudioPalette {
+    /** Looping ambient bed (deep-space rumble, forest wind, ocean swell, ...). */
+    ambientLoop?: string;
+    /** Plays when focus moves to a new atom. */
+    focusChime?: string;
+    /** Plays during the engage transition into the player. */
+    engageImpact?: string;
+    /** Plays during the back transition out of the player. */
+    backWhoosh?: string;
+}
+interface MotionTokens {
+    /** Free-flight responsiveness (pointer/touch). */
+    flightAcceleration: number;
+    flightDamping: number;
+    /** D-pad / focus-snap easing duration in ms. */
+    focusEaseMs: number;
+    /** Length of the engage transition (atom → player) in ms. */
+    engageDurationMs: number;
+    /** Length of the back transition (player → atom) in ms. Should equal
+     *  engageDurationMs by default — symmetric transitions feel grounded. */
+    backDurationMs: number;
+}
+/** A geometric atom in realm-space, used by `focusSnap` to compute the
+ *  best neighbor in a given direction. Realms get the bare minimum and
+ *  decide how to weight (e.g. cosmos prefers angular alignment, wilds
+ *  prefers walking distance along the floor plane). */
+interface AtomLocation {
+    id: string;
+    position: [number, number, number];
+}
+type FocusSnap = (currentId: string, direction: "up" | "down" | "left" | "right", atoms: AtomLocation[]) => string | null;
+/**
+ * The full realm module. `Component` is whatever component type the host
+ * renderer expects (see file-level doc).
+ */
+interface RealmModule<Component = unknown> {
+    id: RealmId;
+    /** The environment: skybox / canopy / ocean / city. */
+    World: Component;
+    /** A single film embodied (Star, Tree, Bioluminescent organism, ...). */
+    Atom: Component;
+    /** A curated grouping (Constellation, Grove, Reef, ...). */
+    Group: Component;
+    /** Camera + motion controller. Receives an `IntentSource` prop and
+     *  maps intents to realm-specific motion. */
+    NavRig: Component;
+    /** The signature transition: atom expands to fill the screen and
+     *  hands off to the player surface. Reverses on close. */
+    EngageTransition: Component;
+    /** Maps shared catalog data → realm-specific visual props. */
+    mapping: AtomMapping;
+    /** Realm-specific audio bed and stingers. */
+    audio: AudioPalette;
+    /** Realm-specific timing/easing constants. */
+    motion: MotionTokens;
+    /** D-pad neighbor selection algorithm. Realms own the spatial weighting. */
+    focusSnap: FocusSnap;
+}
+/**
+ * Default focus-snap implementation: pick the atom closest to a 60°
+ * directional cone from the current atom. Realms can replace this when
+ * their geometry calls for different weighting.
+ */
+declare function defaultFocusSnap(currentId: string, direction: "up" | "down" | "left" | "right", atoms: AtomLocation[]): string | null;
+
+export { type AtomLocation, type AtomMapping, type AtomState, type AtomVisualProps, type AudioPalette, type FocusSnap, type MotionTokens, type RealmModule, type ZoomLevel, defaultFocusSnap };

package/dist/realms/index.js

@@ -0,0 +1,23 @@
+// src/realms/index.ts
+function defaultFocusSnap(currentId, direction, atoms) {
+  const current = atoms.find((a) => a.id === currentId);
+  if (!current) return null;
+  const dirVec = direction === "left" ? [-1, 0] : direction === "right" ? [1, 0] : direction === "up" ? [0, 1] : [0, -1];
+  let best = null;
+  for (const a of atoms) {
+    if (a.id === currentId) continue;
+    const dx = a.position[0] - current.position[0];
+    const dy = a.position[1] - current.position[1];
+    const dist = Math.hypot(dx, dy);
+    if (dist === 0) continue;
+    const dot = (dx * dirVec[0] + dy * dirVec[1]) / dist;
+    if (dot < 0.5) continue;
+    const score = dist / Math.max(dot, 1e-3);
+    if (!best || score < best.score) best = { id: a.id, score };
+  }
+  return best?.id ?? null;
+}
+
+export { defaultFocusSnap };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/realms/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/realms/index.ts"],"names":[],"mappings":";AA6HO,SAAS,gBAAA,CACd,SAAA,EACA,SAAA,EACA,KAAA,EACe;AACf,EAAA,MAAM,UAAU,KAAA,CAAM,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,SAAS,CAAA;AACpD,EAAA,IAAI,CAAC,SAAS,OAAO,IAAA;AAErB,EAAA,MAAM,MAAA,GACJ,cAAc,MAAA,GAAS,CAAC,IAAI,CAAC,CAAA,GAC3B,cAAc,OAAA,GAAU,CAAC,GAAG,CAAC,CAAA,GAC7B,cAAc,IAAA,GAAO,CAAC,GAAG,CAAC,CAAA,GAC1B,CAAC,CAAA,EAAG,EAAE,CAAA;AAEV,EAAA,IAAI,IAAA,GAA6C,IAAA;AACjD,EAAA,KAAA,MAAW,KAAK,KAAA,EAAO;AACrB,IAAA,IAAI,CAAA,CAAE,OAAO,SAAA,EAAW;AACxB,IAAA,MAAM,KAAK,CAAA,CAAE,QAAA,CAAS,CAAC,CAAA,GAAI,OAAA,CAAQ,SAAS,CAAC,CAAA;AAC7C,IAAA,MAAM,KAAK,CAAA,CAAE,QAAA,CAAS,CAAC,CAAA,GAAI,OAAA,CAAQ,SAAS,CAAC,CAAA;AAC7C,IAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,EAAA,EAAI,EAAE,CAAA;AAC9B,IAAA,IAAI,SAAS,CAAA,EAAG;AAChB,IAAA,MAAM,GAAA,GAAA,CAAO,KAAK,MAAA,CAAO,CAAC,IAAI,EAAA,GAAK,MAAA,CAAO,CAAC,CAAA,IAAK,IAAA;AAEhD,IAAA,IAAI,MAAM,GAAA,EAAK;AAEf,IAAA,MAAM,KAAA,GAAQ,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,KAAK,IAAK,CAAA;AACxC,IAAA,IAAI,CAAC,IAAA,IAAQ,KAAA,GAAQ,IAAA,CAAK,KAAA,SAAc,EAAE,EAAA,EAAI,CAAA,CAAE,EAAA,EAAI,KAAA,EAAM;AAAA,EAC5D;AACA,EAAA,OAAO,MAAM,EAAA,IAAM,IAAA;AACrB","file":"index.js","sourcesContent":["import type { RealmId, StoryListItem } from \"../types/index.js\";\n\n/**\n * Realm rendering contract. Each realm (cosmos, wilds, future depths/etc)\n * implements this interface and ships as a self-contained subpath module\n * (`@chuzi/shared/realms/cosmos`, `@chuzi/shared/realms/wilds`, ...).\n *\n * Apps don't import realms directly — they read `user.realm`, then dynamic-\n * import the matching module. Adding a new realm is a one-package change\n * with zero modifications to app code.\n *\n * The `Component` generic is left abstract so this contract works for any\n * renderer. Web/TV apps satisfy it with `React.ComponentType`; React Native\n * apps satisfy it with their own component type. chuzi-shared itself stays\n * dependency-free.\n */\n\n/** State badge applied to an atom regardless of realm. Realms render it\n *  in their own visual language (orbit ring, marker post, glow, etc.). */\nexport type AtomState = \"default\" | \"watched\" | \"bookmarked\" | \"in_progress\" | \"new\";\n\n/** Continuous zoom levels. Camera flies smoothly between them; LOD swaps\n *  geometry/asset quality as it crosses thresholds. */\nexport type ZoomLevel = \"overview\" | \"sector\" | \"atom\";\n\nexport interface AtomVisualProps {\n  /** Position in realm-space (the realm decides the coordinate convention). */\n  position: [number, number, number];\n  /** Relative scale, 0–1 normalized. Realms map this to height/girth/etc. */\n  scale: number;\n  /** Realm-interpretable hue, 0–360. Cosmos: stellar class. Wilds: foliage. */\n  hue: number;\n  /** Realm-interpretable intensity, 0–1. Cosmos: luminosity. Wilds: density. */\n  intensity: number;\n  /** Cross-realm state badge. */\n  state: AtomState;\n  /** Pass-through metadata for realm-specific rendering. */\n  metadata: {\n    title: string;\n    runtime?: number;\n    popularity?: number;\n    mood?: string;\n    genre?: string | null;\n  };\n}\n\nexport type AtomMapping = (film: StoryListItem) => AtomVisualProps;\n\nexport interface AudioPalette {\n  /** Looping ambient bed (deep-space rumble, forest wind, ocean swell, ...). */\n  ambientLoop?: string;\n  /** Plays when focus moves to a new atom. */\n  focusChime?: string;\n  /** Plays during the engage transition into the player. */\n  engageImpact?: string;\n  /** Plays during the back transition out of the player. */\n  backWhoosh?: string;\n}\n\nexport interface MotionTokens {\n  /** Free-flight responsiveness (pointer/touch). */\n  flightAcceleration: number;\n  flightDamping: number;\n  /** D-pad / focus-snap easing duration in ms. */\n  focusEaseMs: number;\n  /** Length of the engage transition (atom → player) in ms. */\n  engageDurationMs: number;\n  /** Length of the back transition (player → atom) in ms. Should equal\n   *  engageDurationMs by default — symmetric transitions feel grounded. */\n  backDurationMs: number;\n}\n\n/** A geometric atom in realm-space, used by `focusSnap` to compute the\n *  best neighbor in a given direction. Realms get the bare minimum and\n *  decide how to weight (e.g. cosmos prefers angular alignment, wilds\n *  prefers walking distance along the floor plane). */\nexport interface AtomLocation {\n  id: string;\n  position: [number, number, number];\n}\n\nexport type FocusSnap = (\n  currentId: string,\n  direction: \"up\" | \"down\" | \"left\" | \"right\",\n  atoms: AtomLocation[],\n) => string | null;\n\n/**\n * The full realm module. `Component` is whatever component type the host\n * renderer expects (see file-level doc).\n */\nexport interface RealmModule<Component = unknown> {\n  id: RealmId;\n\n  /** The environment: skybox / canopy / ocean / city. */\n  World: Component;\n  /** A single film embodied (Star, Tree, Bioluminescent organism, ...). */\n  Atom: Component;\n  /** A curated grouping (Constellation, Grove, Reef, ...). */\n  Group: Component;\n  /** Camera + motion controller. Receives an `IntentSource` prop and\n   *  maps intents to realm-specific motion. */\n  NavRig: Component;\n  /** The signature transition: atom expands to fill the screen and\n   *  hands off to the player surface. Reverses on close. */\n  EngageTransition: Component;\n\n  /** Maps shared catalog data → realm-specific visual props. */\n  mapping: AtomMapping;\n\n  /** Realm-specific audio bed and stingers. */\n  audio: AudioPalette;\n\n  /** Realm-specific timing/easing constants. */\n  motion: MotionTokens;\n\n  /** D-pad neighbor selection algorithm. Realms own the spatial weighting. */\n  focusSnap: FocusSnap;\n}\n\n/**\n * Default focus-snap implementation: pick the atom closest to a 60°\n * directional cone from the current atom. Realms can replace this when\n * their geometry calls for different weighting.\n */\nexport function defaultFocusSnap(\n  currentId: string,\n  direction: \"up\" | \"down\" | \"left\" | \"right\",\n  atoms: AtomLocation[],\n): string | null {\n  const current = atoms.find((a) => a.id === currentId);\n  if (!current) return null;\n\n  const dirVec: [number, number] =\n    direction === \"left\" ? [-1, 0]\n    : direction === \"right\" ? [1, 0]\n    : direction === \"up\" ? [0, 1]\n    : [0, -1];\n\n  let best: { id: string; score: number } | null = null;\n  for (const a of atoms) {\n    if (a.id === currentId) continue;\n    const dx = a.position[0] - current.position[0];\n    const dy = a.position[1] - current.position[1];\n    const dist = Math.hypot(dx, dy);\n    if (dist === 0) continue;\n    const dot = (dx * dirVec[0] + dy * dirVec[1]) / dist;\n    // Cone of acceptance: dot > 0.5 ≈ within 60° of direction.\n    if (dot < 0.5) continue;\n    // Score: closer is better, more aligned is better.\n    const score = dist / Math.max(dot, 0.001);\n    if (!best || score < best.score) best = { id: a.id, score };\n  }\n  return best?.id ?? null;\n}\n"]}

package/dist/realms/wilds/components/index.d.ts

@@ -0,0 +1,88 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { AtomVisualProps } from '../../index.js';
+import { ReactNode } from 'react';
+import { StoryListItem } from '../../../types/index.js';
+
+interface TreeProps {
+    visual: AtomVisualProps;
+    onSelect?: () => void;
+}
+/**
+ * A single film-tree with a lush, multi-clustered canopy. Foliage is built
+ * from overlapping dodecahedrons arranged around the crown — reads as a
+ * dense, heavily-branched tree. Trees within a genre clump share the same
+ * hue; brightness scales with popularity.
+ */
+declare function Tree({ visual, onSelect }: TreeProps): react_jsx_runtime.JSX.Element;
+
+interface WildsWorldProps {
+    children: ReactNode;
+    /** Pixel device ratio cap. Default [1,2] — keeps perf bounded on retina laptops. */
+    dpr?: number | [number, number];
+}
+/**
+ * Wilds environment shell. A lush forest under a cosmic sky — the stars
+ * visible overhead are the same cosmos the director may have just left.
+ * Bright hemisphere + directional lighting keeps the canopy vivid even
+ * against the dark backdrop.
+ */
+declare function WildsWorld({ children, dpr }: WildsWorldProps): react_jsx_runtime.JSX.Element;
+
+interface ForestBackdropProps {
+    /** Number of ambient backdrop trees. Default 320. */
+    count?: number;
+    /** Inner radius — backdrop starts beyond this. */
+    innerRadius?: number;
+    /** Outer radius — backdrop fades out by here. */
+    outerRadius?: number;
+    /** Deterministic seed; identical seeds produce identical forests. */
+    seed?: number;
+}
+/**
+ * Ambient surrounding forest. Three overlapping canopy layers per tree
+ * (dodecahedrons at staggered offsets) give the backdrop lush, full
+ * silhouettes. Four instanced draw calls total (trunk + 3 canopy layers)
+ * keep the cost constant regardless of count.
+ */
+declare function ForestBackdrop({ count, innerRadius, outerRadius, seed, }: ForestBackdropProps): react_jsx_runtime.JSX.Element;
+
+interface WildsSandboxProps {
+    films: StoryListItem[];
+    onFilmSelect?: (film: StoryListItem) => void;
+    /** Layout seed — same seed + same films = same forest. */
+    seed?: number;
+}
+/**
+ * Drop-in 3D wilds sandbox: hand a list of films, get back a navigable
+ * forest where each film is a tree. Trees are clustered into clumps
+ * (groves) rather than uniformly distributed — mirrors how real forests
+ * grow, and reads better visually than a tree grid. Mirrors `CosmosSandbox`.
+ */
+declare function WildsSandbox({ films, onFilmSelect, seed, }: WildsSandboxProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Spatial distribution helpers for the wilds realm. Trees grow in clumps
+ * (groves), not on a uniform grid: pick a small set of cluster anchors,
+ * then scatter trees around them with a soft falloff. Deterministic when a
+ * seed is provided so the same catalog produces the same forest.
+ */
+type Vec3 = [number, number, number];
+interface DistributeForestOptions {
+    /** Outer radius the forest occupies, in world units. */
+    radius?: number;
+    /** Number of clumps. Capped at `count`. */
+    clumpCount?: number;
+    /** Spread of each clump (stddev-ish, in world units). */
+    clumpSpread?: number;
+    /** Deterministic seed; identical seeds produce identical layouts. */
+    seed?: number;
+}
+/**
+ * Cluster trees around a small number of anchor points, with each anchor
+ * placed in a disk of `radius`. Each tree is offset from its anchor by a
+ * 2D gaussian-ish jitter (`clumpSpread`). Y is always 0 — trees stand on
+ * the ground plane.
+ */
+declare function distributeForest(count: number, options?: DistributeForestOptions): Vec3[];
+
+export { type DistributeForestOptions, ForestBackdrop, type ForestBackdropProps, Tree, type TreeProps, type Vec3, WildsSandbox, type WildsSandboxProps, WildsWorld, type WildsWorldProps, distributeForest };

package/dist/realms/wilds/components/index.js

@@ -0,0 +1,359 @@
+import { useRef, useMemo } from 'react';
+import { useFrame, Canvas } from '@react-three/fiber';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Stars, OrbitControls } from '@react-three/drei';
+import { Object3D, Color } from 'three';
+
+// src/realms/wilds/components/Tree.tsx
+function Tree({ visual, onSelect }) {
+  const ref = useRef(null);
+  useFrame(({ clock }) => {
+    if (!ref.current) return;
+    const phase = visual.position[0] * 0.4 + visual.position[2] * 0.6;
+    const sway = Math.sin(clock.elapsedTime * 0.6 + phase) * 0.04;
+    ref.current.rotation.z = sway;
+  });
+  const trunkHeight = 1.6 + visual.scale * 2.4;
+  const trunkRadius = 0.09 + visual.scale * 0.055;
+  const lightness = 52 + visual.intensity * 18;
+  const canopyColor = `hsl(${visual.hue}, 82%, ${lightness}%)`;
+  const trunkColor = "#6b5a45";
+  const seed = Math.abs(Math.round(visual.position[0] * 127 + visual.position[2] * 311));
+  const foliage = useMemo(() => {
+    const clusters = [];
+    const crownY = trunkHeight * 0.78;
+    const baseR = 0.65 + visual.scale * 0.5 + visual.intensity * 0.3;
+    clusters.push({ x: 0, y: crownY + baseR * 0.35, z: 0, r: baseR });
+    clusters.push({ x: 0, y: crownY + baseR * 0.95, z: 0, r: baseR * 0.55 });
+    const mainCount = 5 + Math.floor(visual.scale * 3);
+    for (let i = 0; i < mainCount; i++) {
+      const a = i / mainCount * Math.PI * 2 + seed % 100 * 0.063;
+      const spread = baseR * (0.6 + (seed + i * 7) % 5 * 0.09);
+      const yOff = ((seed + i * 13) % 7 - 3) * 0.1;
+      const sz = baseR * (0.38 + (seed + i * 11) % 5 * 0.07);
+      clusters.push({
+        x: Math.cos(a) * spread,
+        y: crownY + yOff,
+        z: Math.sin(a) * spread,
+        r: sz
+      });
+    }
+    const lowerCount = 3 + Math.floor(visual.scale * 2);
+    for (let i = 0; i < lowerCount; i++) {
+      const a = i / lowerCount * Math.PI * 2 + seed % 50 * 0.126;
+      const spread = baseR * 0.85 + 0.25;
+      clusters.push({
+        x: Math.cos(a) * spread,
+        y: crownY - 0.35 - (seed + i * 17) % 4 * 0.12,
+        z: Math.sin(a) * spread,
+        r: baseR * (0.28 + (seed + i * 7) % 3 * 0.06)
+      });
+    }
+    return clusters;
+  }, [trunkHeight, visual.scale, visual.intensity, seed]);
+  function handleClick(e) {
+    if (!onSelect) return;
+    e.stopPropagation();
+    onSelect();
+  }
+  const onClick = onSelect ? handleClick : void 0;
+  return /* @__PURE__ */ jsxs("group", { ref, position: visual.position, children: [
+    /* @__PURE__ */ jsxs("mesh", { position: [0, trunkHeight / 2, 0], onClick, children: [
+      /* @__PURE__ */ jsx("cylinderGeometry", { args: [trunkRadius * 0.65, trunkRadius, trunkHeight, 8] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: trunkColor, roughness: 0.9 })
+    ] }),
+    foliage.map((c, i) => /* @__PURE__ */ jsxs("mesh", { position: [c.x, c.y, c.z], onClick, children: [
+      /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [c.r, 1] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: canopyColor, roughness: 0.7 })
+    ] }, i))
+  ] });
+}
+function ForestBackdrop({
+  count = 320,
+  innerRadius = 36,
+  outerRadius = 78,
+  seed = 7
+}) {
+  const trunkRef = useRef(null);
+  const canopy1Ref = useRef(null);
+  const canopy2Ref = useRef(null);
+  const canopy3Ref = useRef(null);
+  const placements = useMemo(
+    () => buildPlacements(count, innerRadius, outerRadius, seed),
+    [count, innerRadius, outerRadius, seed]
+  );
+  useFrame(() => {
+    const trunk = trunkRef.current;
+    const c1 = canopy1Ref.current;
+    const c2 = canopy2Ref.current;
+    const c3 = canopy3Ref.current;
+    if (!trunk || !c1 || !c2 || !c3) return;
+    if (trunk.userData.placed) return;
+    const dummy = new Object3D();
+    const color = new Color();
+    placements.forEach((p, i) => {
+      const trunkH = p.trunkHeight;
+      const canopyH = p.canopyHeight;
+      const canopyR = p.canopyRadius;
+      dummy.position.set(p.x, trunkH / 2, p.z);
+      dummy.rotation.set(0, p.rot, 0);
+      dummy.scale.set(p.trunkRadius * 2, trunkH, p.trunkRadius * 2);
+      dummy.updateMatrix();
+      trunk.setMatrixAt(i, dummy.matrix);
+      dummy.position.set(p.x, trunkH + canopyH * 0.3, p.z);
+      dummy.rotation.set(0, p.rot, 0);
+      dummy.scale.set(canopyR * 0.9, canopyH * 0.5, canopyR * 0.9);
+      dummy.updateMatrix();
+      c1.setMatrixAt(i, dummy.matrix);
+      const off2x = Math.cos(p.rot + 0.8) * canopyR * 0.35;
+      const off2z = Math.sin(p.rot + 0.8) * canopyR * 0.35;
+      dummy.position.set(p.x + off2x, trunkH + canopyH * 0.5, p.z + off2z);
+      dummy.rotation.set(0, p.rot * 1.3, 0);
+      dummy.scale.set(canopyR * 0.7, canopyH * 0.4, canopyR * 0.7);
+      dummy.updateMatrix();
+      c2.setMatrixAt(i, dummy.matrix);
+      const off3x = Math.cos(p.rot + 3.2) * canopyR * 0.4;
+      const off3z = Math.sin(p.rot + 3.2) * canopyR * 0.4;
+      dummy.position.set(p.x + off3x, trunkH + canopyH * 0.1, p.z + off3z);
+      dummy.rotation.set(0, p.rot * 0.7, 0);
+      dummy.scale.set(canopyR * 0.55, canopyH * 0.35, canopyR * 0.55);
+      dummy.updateMatrix();
+      c3.setMatrixAt(i, dummy.matrix);
+      const hue = BACKDROP_HUES[i % BACKDROP_HUES.length];
+      color.setHSL(hue / 360, 0.5, 0.36);
+      c1.setColorAt(i, color);
+      color.setHSL(hue / 360, 0.5, 0.4);
+      c2.setColorAt(i, color);
+      color.setHSL(hue / 360, 0.5, 0.32);
+      c3.setColorAt(i, color);
+    });
+    trunk.instanceMatrix.needsUpdate = true;
+    c1.instanceMatrix.needsUpdate = true;
+    c2.instanceMatrix.needsUpdate = true;
+    c3.instanceMatrix.needsUpdate = true;
+    if (c1.instanceColor) c1.instanceColor.needsUpdate = true;
+    if (c2.instanceColor) c2.instanceColor.needsUpdate = true;
+    if (c3.instanceColor) c3.instanceColor.needsUpdate = true;
+    trunk.userData.placed = true;
+  });
+  return /* @__PURE__ */ jsxs("group", { children: [
+    /* @__PURE__ */ jsxs("instancedMesh", { ref: trunkRef, args: [void 0, void 0, count], children: [
+      /* @__PURE__ */ jsx("cylinderGeometry", { args: [1, 1, 1, 6] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#5a4a38", roughness: 0.95 })
+    ] }),
+    /* @__PURE__ */ jsxs("instancedMesh", { ref: canopy1Ref, args: [void 0, void 0, count], children: [
+      /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#ffffff", roughness: 0.8 })
+    ] }),
+    /* @__PURE__ */ jsxs("instancedMesh", { ref: canopy2Ref, args: [void 0, void 0, count], children: [
+      /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#ffffff", roughness: 0.8 })
+    ] }),
+    /* @__PURE__ */ jsxs("instancedMesh", { ref: canopy3Ref, args: [void 0, void 0, count], children: [
+      /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [1, 1] }),
+      /* @__PURE__ */ jsx("meshStandardMaterial", { color: "#ffffff", roughness: 0.8 })
+    ] })
+  ] });
+}
+var BACKDROP_HUES = [120, 140, 100, 160, 80, 150, 95, 130, 110, 170];
+function buildPlacements(count, innerRadius, outerRadius, seed) {
+  const random = mulberry32(seed);
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const t = Math.sqrt(random());
+    const r = innerRadius + t * (outerRadius - innerRadius);
+    const theta = random() * Math.PI * 2;
+    const x = Math.cos(theta) * r;
+    const z = Math.sin(theta) * r;
+    const sizeJitter = 0.7 + random() * 0.9;
+    const trunkHeight = 1.6 * sizeJitter;
+    const trunkRadius = 0.18 * sizeJitter;
+    const canopyHeight = 2.4 * sizeJitter;
+    const canopyRadius = 1.1 * sizeJitter;
+    out.push({
+      x,
+      z,
+      rot: random() * Math.PI * 2,
+      trunkHeight,
+      trunkRadius,
+      canopyHeight,
+      canopyRadius
+    });
+  }
+  return out;
+}
+function mulberry32(seed) {
+  let s = seed >>> 0;
+  return () => {
+    s = s + 1831565813 >>> 0;
+    let t = s;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var SKY = "#0e1030";
+var GROUND_COLOR = "#2a5a35";
+function WildsWorld({ children, dpr = [1, 2] }) {
+  return /* @__PURE__ */ jsxs(
+    Canvas,
+    {
+      camera: { position: [0, 8, 36], fov: 60, near: 0.1, far: 500 },
+      dpr,
+      gl: { antialias: true },
+      children: [
+        /* @__PURE__ */ jsx("color", { attach: "background", args: [SKY] }),
+        /* @__PURE__ */ jsx("fog", { attach: "fog", args: [SKY, 70, 180] }),
+        /* @__PURE__ */ jsx(
+          Stars,
+          {
+            radius: 180,
+            depth: 80,
+            count: 2500,
+            factor: 4,
+            saturation: 0.5,
+            fade: true,
+            speed: 0.8
+          }
+        ),
+        /* @__PURE__ */ jsx("ambientLight", { intensity: 0.65 }),
+        /* @__PURE__ */ jsx("hemisphereLight", { args: ["#f0f8ff", "#3a5a38", 1.2] }),
+        /* @__PURE__ */ jsx("directionalLight", { position: [10, 30, 8], intensity: 1.5, color: "#fff5e0" }),
+        /* @__PURE__ */ jsx(Ground, {}),
+        /* @__PURE__ */ jsx(ForestBackdrop, {}),
+        /* @__PURE__ */ jsx(
+          OrbitControls,
+          {
+            enablePan: false,
+            maxDistance: 80,
+            minDistance: 6,
+            maxPolarAngle: Math.PI / 2.05
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function Ground() {
+  return /* @__PURE__ */ jsxs("mesh", { rotation: [-Math.PI / 2, 0, 0], position: [0, -0.01, 0], receiveShadow: true, children: [
+    /* @__PURE__ */ jsx("circleGeometry", { args: [120, 64] }),
+    /* @__PURE__ */ jsx("meshStandardMaterial", { color: GROUND_COLOR, roughness: 0.9 })
+  ] });
+}
+
+// src/realms/wilds/index.ts
+var GENRE_HUE = {
+  drama: 70,
+  // oak — warm green-gold
+  thriller: 150,
+  // pine — cool green
+  horror: 25,
+  // dead/gnarled — burnt umber
+  comedy: 95,
+  // birch — bright spring
+  romance: 330,
+  // cherry blossom — pink
+  scifi: 180,
+  // alien luminescent
+  documentary: 110,
+  // generic forest green
+  animation: 280
+  // fantasy violet
+};
+function clamp01(n) {
+  return Math.max(0, Math.min(1, n));
+}
+function popularityToIntensity(film) {
+  const watches = Math.max(0, film.watch_starts_count);
+  const log = Math.log10(1 + watches);
+  return clamp01(log / 6);
+}
+function deriveScale(film) {
+  const scenes = film.scenes_count ?? 1;
+  return clamp01(0.3 + Math.log10(1 + scenes) / 3);
+}
+function deriveHue(film) {
+  const genreKey = (film.genre ?? "").toLowerCase().replace(/[^a-z]/g, "");
+  const hue = GENRE_HUE[genreKey];
+  return hue !== void 0 ? hue : 110;
+}
+function deriveState(film) {
+  return film.published ? "default" : "new";
+}
+var wildsMapping = (film) => ({
+  position: [0, 0, 0],
+  // assigned by the realm's spatial layouter
+  scale: deriveScale(film),
+  hue: deriveHue(film),
+  intensity: popularityToIntensity(film),
+  state: deriveState(film),
+  metadata: {
+    title: film.title,
+    popularity: film.watch_starts_count,
+    genre: film.genre
+  }
+});
+
+// src/realms/wilds/components/layout.ts
+function distributeForest(count, options = {}) {
+  const radius = options.radius ?? 28;
+  const clumpSpread = options.clumpSpread ?? 4;
+  const random = options.seed !== void 0 ? mulberry322(options.seed) : Math.random;
+  const desiredClumps = options.clumpCount ?? Math.max(2, Math.round(count / 4));
+  const clumpCount = Math.max(1, Math.min(count, desiredClumps));
+  const anchors = [];
+  for (let i = 0; i < clumpCount; i++) {
+    const r = Math.sqrt(random()) * radius;
+    const theta = random() * Math.PI * 2;
+    anchors.push([Math.cos(theta) * r, 0, Math.sin(theta) * r]);
+  }
+  const positions = [];
+  for (let i = 0; i < count; i++) {
+    const anchor = anchors[i % clumpCount];
+    const dx = gaussian(random) * clumpSpread;
+    const dz = gaussian(random) * clumpSpread;
+    positions.push([anchor[0] + dx, 0, anchor[2] + dz]);
+  }
+  return positions;
+}
+function gaussian(random) {
+  const u1 = Math.max(1e-9, random());
+  const u2 = random();
+  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+}
+function mulberry322(seed) {
+  let s = seed >>> 0;
+  return () => {
+    s = s + 1831565813 >>> 0;
+    let t = s;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function WildsSandbox({
+  films,
+  onFilmSelect,
+  seed = 1
+}) {
+  const placed = useMemo(() => {
+    const positions = distributeForest(films.length, { seed });
+    return films.map((film, i) => ({
+      film,
+      visual: { ...wildsMapping(film), position: positions[i] }
+    }));
+  }, [films, seed]);
+  return /* @__PURE__ */ jsx(WildsWorld, { children: placed.map(({ film, visual }) => /* @__PURE__ */ jsx(
+    Tree,
+    {
+      visual,
+      onSelect: onFilmSelect ? () => onFilmSelect(film) : void 0
+    },
+    film.id
+  )) });
+}
+
+export { ForestBackdrop, Tree, WildsSandbox, WildsWorld, distributeForest };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map