shardlight 0.1.0

package/dist/core/index.js

@@ -0,0 +1,3 @@
+export { CURRENT_VERSION, NullContextError, abortError, acquireSource, blob, buildLayers, cacheSize, canvas2dBaker, canvasToBlob, clearCache, clusters, collapse, collapseTrigger, computeFrame, createCanvas, createLightModel, createScheduler, defineEffect, definePreset, defineShardKind, definedOnly, disposeSource, ember, fan, flicker, freeCanvas, get2dContext, getEffect, getPreset, getShardKind, halo, hashString, hover, isAbortError, isBrowser, isCssIdentifier, isLowMemoryDevice, layerId, listEffects, listPresets, listShardKinds, makeRgba, migrateConfig, mulberry32, parseColor, prewarm, pulse, registerBuiltInEffects, registerBuiltInKinds, registerBuiltInPresets, registerEffect, registerPreset, registerShardKind, releasePrewarm, releaseSource, resolveConfig, shardSeed, sparkle, spin, stableStringify, star, starburst, sun, unregisterEffect, unregisterPreset, unregisterShardKind } from '../chunk-ZWPHIC3K.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/createShardLight-DTUyJQML.d.ts

@@ -0,0 +1,56 @@
+import * as THREE from 'three';
+import { P as Preset, a as ShardLightConfig, S as ShardInput, E as EffectConfig, B as Baker } from './baker-BmlWqsXG.js';
+import { Layer, LightModel, SetValues } from './core/index.js';
+
+interface CreateShardLightOptions {
+    preset?: Preset | null;
+    config?: Partial<ShardLightConfig>;
+    shards?: ShardInput[];
+    effects?: EffectConfig[];
+    color?: string;
+    /** World units (plane edge). */
+    size?: number;
+    /** Texture edge. Default 1024. */
+    resolution?: number;
+    rayScale?: number;
+    baker?: Baker;
+    /** Default true: effects run from `onBeforeRender`. */
+    autoUpdate?: boolean;
+    /** Faces the camera. Default false. */
+    billboard?: boolean;
+    /** Circular hit radius at the centre, as a fraction of the half-edge. */
+    hitRadius?: number;
+    /** Seconds for hover to ease in/out. Default 0.25; 0 snaps. */
+    hoverEase?: number;
+    /** Seconds for the click collapse to ease in/out. Default 0.3; 0 snaps. */
+    collapseEase?: number;
+    /** Custom material factory, for custom shading. */
+    material?: (layer: Layer) => THREE.Material;
+    renderOrder?: number;
+    depthTest?: boolean;
+    toneMapped?: boolean;
+    onReady?: () => void;
+}
+interface ShardLightController {
+    object: THREE.Group;
+    model: LightModel;
+    set(values: SetValues): void;
+    /** Ease the whole-light hover amount toward 0 or 1. */
+    setHover(hovered: boolean): void;
+    /** Ease the collapse toward expanded / collapsed. */
+    setCollapsed(collapsed: boolean): void;
+    /** Flip between expanded and collapsed. */
+    toggleCollapsed(): void;
+    update(patch: Partial<CreateShardLightOptions>): void;
+    tick(dt: number): void;
+    ready: Promise<void>;
+    dispose(): void;
+}
+/**
+ * The three.js adapter: one additive plane per layer. It wraps a
+ * `createLightModel()` and turns the model's layers and frame values into
+ * meshes, scales and opacities.
+ */
+declare function createShardLight(options?: CreateShardLightOptions): ShardLightController;
+
+export { type CreateShardLightOptions as C, type ShardLightController as S, createShardLight as c };

package/dist/effects-bjjSnDyP.d.ts

@@ -0,0 +1,287 @@
+import * as react from 'react';
+import { ComponentType } from 'react';
+import { ParamsOf, ShardKindDefinition } from './core/index.js';
+import { c as ShardBase, E as EffectConfig } from './baker-BmlWqsXG.js';
+
+/**
+ * `<Shard>` props: a stable `id`, an optional `kind`, and any of that kind's
+ * flat parameters. Returns `null` and registers itself with the nearest
+ * `<ShardLight>` / `<ShardLightMesh>`.
+ */
+interface ShardProps {
+    id: string;
+    kind?: string;
+    [param: string]: unknown;
+}
+declare function Shard(props: ShardProps): null;
+
+/** Props for a component made by `createShardComponent`. */
+type ShardComponentProps<D> = Omit<ShardBase, 'kind'> & {
+    id: string;
+} & Partial<ParamsOf<D>>;
+/**
+ * Make a typed component for a shard kind: `const Dots = createShardComponent(dots)`
+ *. Works in both React entries.
+ */
+declare function createShardComponent<D extends ShardKindDefinition<any, any>>(def: D): ComponentType<ShardComponentProps<D>>;
+
+/** The built-in kinds as typed components. Shared by DOM and R3F. */
+declare const Glow: react.ComponentType<ShardComponentProps<ShardKindDefinition<"blob", {
+    readonly strength: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly size: {
+        readonly type: "number";
+        readonly default: 0.5;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly hardness: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 0.999;
+    };
+    readonly falloff: {
+        readonly type: "number";
+        readonly default: 2;
+        readonly min: 0.1;
+        readonly max: 8;
+    };
+    readonly aspect: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0.1;
+        readonly max: 10;
+    };
+    readonly angle: {
+        readonly type: "angle";
+        readonly default: 0;
+    };
+    readonly softness: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 50;
+        readonly unit: "px";
+    };
+    readonly variance: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 1;
+    };
+}>>>;
+declare const Rays: react.ComponentType<ShardComponentProps<ShardKindDefinition<"fan", {
+    readonly strength: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly size: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly count: {
+        readonly type: "number";
+        readonly default: 4;
+        readonly min: 1;
+        readonly max: 256;
+        readonly step: 1;
+    };
+    readonly angle: {
+        readonly type: "angle";
+        readonly default: 0;
+    };
+    readonly jitter: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly inner: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly variance: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly width: {
+        readonly type: "number";
+        readonly default: 4;
+        readonly min: 0;
+        readonly max: 100;
+        readonly unit: "px";
+        readonly ray: true;
+    };
+    readonly taper: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly falloff: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 8;
+    };
+    readonly fadeIn: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly softness: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 50;
+        readonly unit: "px";
+        readonly ray: true;
+    };
+}>>>;
+declare const Streaks: react.ComponentType<ShardComponentProps<ShardKindDefinition<"clusters", {
+    readonly clusters: {
+        readonly type: "number";
+        readonly default: 4;
+        readonly min: 1;
+        readonly max: 64;
+        readonly step: 1;
+    };
+    readonly perCluster: {
+        readonly type: "number";
+        readonly default: 5;
+        readonly min: 1;
+        readonly max: 64;
+        readonly step: 1;
+    };
+    readonly spread: {
+        readonly type: "number";
+        readonly default: 20;
+        readonly min: 0;
+        readonly max: 360;
+    };
+    readonly inner: {
+        readonly type: "number";
+        readonly default: 0.1;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly strength: {
+        readonly type: "number";
+        readonly default: 0.5;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly size: {
+        readonly type: "number";
+        readonly default: 0.5;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly angle: {
+        readonly type: "angle";
+        readonly default: 0;
+    };
+    readonly variance: {
+        readonly type: "number";
+        readonly default: 0.5;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly width: {
+        readonly type: "number";
+        readonly default: 2;
+        readonly min: 0;
+        readonly max: 100;
+        readonly unit: "px";
+        readonly ray: true;
+    };
+    readonly taper: {
+        readonly type: "number";
+        readonly default: 0.5;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly falloff: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 8;
+    };
+    readonly fadeIn: {
+        readonly type: "number";
+        readonly default: 0.1;
+        readonly min: 0;
+        readonly max: 1;
+    };
+    readonly softness: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 50;
+        readonly unit: "px";
+        readonly ray: true;
+    };
+}>>>;
+declare const Halo: react.ComponentType<ShardComponentProps<ShardKindDefinition<"halo", {
+    readonly strength: {
+        readonly type: "number";
+        readonly default: 0.1;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly size: {
+        readonly type: "number";
+        readonly default: 0.5;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly width: {
+        readonly type: "number";
+        readonly default: 0.05;
+        readonly min: 0;
+        readonly max: 2;
+    };
+    readonly falloff: {
+        readonly type: "number";
+        readonly default: 1;
+        readonly min: 0;
+        readonly max: 8;
+    };
+    readonly softness: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 50;
+        readonly unit: "px";
+    };
+    readonly variance: {
+        readonly type: "number";
+        readonly default: 0;
+        readonly min: 0;
+        readonly max: 1;
+    };
+}>>>;
+
+/** `true` adds the effect with its defaults; an object adds it with those params. */
+type EffectShorthand = boolean | Record<string, unknown>;
+/**
+ * Turn the `flicker` / `collapse` shorthands into effect configs and append them
+ * to any explicit `effects`.
+ */
+declare function normalizeEffects(effects?: readonly EffectConfig[] | null, flicker?: EffectShorthand, collapse?: EffectShorthand): EffectConfig[];
+
+export { type EffectShorthand as E, Glow as G, Halo as H, Rays as R, Shard as S, type ShardComponentProps as a, type ShardProps as b, Streaks as c, createShardComponent as d, normalizeEffects as n };

package/dist/r3f/index.d.ts

@@ -0,0 +1,59 @@
+import * as react from 'react';
+import { GroupProps } from '@react-three/fiber';
+import * as THREE from 'three';
+import { S as ShardInput, E as EffectConfig } from '../baker-BmlWqsXG.js';
+export { B as Baker, P as Preset, a as ShardLightConfig } from '../baker-BmlWqsXG.js';
+import { SetValues, LightModel } from '../core/index.js';
+export { Layer } from '../core/index.js';
+import { E as EffectShorthand } from '../effects-bjjSnDyP.js';
+export { G as Glow, H as Halo, R as Rays, S as Shard, a as ShardComponentProps, b as ShardProps, c as Streaks, d as createShardComponent, n as normalizeEffects } from '../effects-bjjSnDyP.js';
+import { C as CreateShardLightOptions } from '../createShardLight-DTUyJQML.js';
+
+interface ShardLightMeshProps extends Omit<GroupProps, 'ref'> {
+    preset?: CreateShardLightOptions['preset'];
+    config?: CreateShardLightOptions['config'];
+    /** Overrides the preset's colour for the whole light. */
+    color?: string;
+    /** Plain shard objects; `<Shard>` children are also accepted. */
+    shards?: ShardInput[];
+    effects?: EffectConfig[];
+    flicker?: EffectShorthand;
+    /** Click the light to collapse it (click again to expand). */
+    collapse?: EffectShorthand;
+    size?: number;
+    resolution?: number;
+    rayScale?: number;
+    baker?: CreateShardLightOptions['baker'];
+    autoUpdate?: boolean;
+    billboard?: boolean;
+    hitRadius?: number;
+    /** Seconds for hover to ease in/out. Default 0.25; 0 snaps. */
+    hoverEase?: number;
+    /** Seconds for the click collapse to ease in/out. Default 0.3; 0 snaps. */
+    collapseEase?: number;
+    material?: CreateShardLightOptions['material'];
+    renderOrder?: number;
+    depthTest?: boolean;
+    toneMapped?: boolean;
+    onReady?: () => void;
+}
+interface ShardLightHandle {
+    set(values: SetValues): void;
+    /** Ease the whole-light hover amount toward 0 or 1. */
+    setHover(hovered: boolean): void;
+    /** Ease the collapse toward expanded / collapsed. */
+    setCollapsed(collapsed: boolean): void;
+    /** Flip between expanded and collapsed. */
+    toggleCollapsed(): void;
+    ready: Promise<void>;
+    object: THREE.Group | null;
+    model: LightModel | null;
+}
+/**
+ * `<ShardLightMesh>`: a thin wrapper over `createShardLight`,
+ * mounting its `object` with `<primitive>` and pushing prop and `<Shard>`
+ * changes into `update()`.
+ */
+declare const ShardLightMesh: react.ForwardRefExoticComponent<ShardLightMeshProps & react.RefAttributes<ShardLightHandle>>;
+
+export { EffectConfig, EffectShorthand, LightModel, SetValues, ShardInput, type ShardLightHandle, ShardLightMesh, type ShardLightMeshProps };

package/dist/r3f/index.js

@@ -0,0 +1,164 @@
+import { useShardRegistry, normalizeEffects, ShardLightContext } from '../chunk-W7WG7K5R.js';
+export { Glow, Halo, Rays, Shard, Streaks, createShardComponent, normalizeEffects } from '../chunk-W7WG7K5R.js';
+import { createShardLight } from '../chunk-MARSXMGB.js';
+import { collapseTrigger } from '../chunk-ZWPHIC3K.js';
+import { forwardRef, useMemo, useState, useEffect, useImperativeHandle } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ShardLightMesh = forwardRef(
+  function ShardLightMesh2(props, ref) {
+    const {
+      preset,
+      config,
+      color,
+      shards: shardsProp,
+      effects,
+      flicker,
+      collapse,
+      size,
+      resolution,
+      rayScale,
+      baker,
+      autoUpdate,
+      billboard,
+      hitRadius,
+      hoverEase,
+      collapseEase,
+      material,
+      renderOrder,
+      depthTest,
+      toneMapped,
+      onReady,
+      children,
+      ...groupProps
+    } = props;
+    const { registry, shards: childShards } = useShardRegistry();
+    const effectsList = useMemo(
+      () => normalizeEffects(effects, flicker, collapse),
+      [effects, flicker, collapse]
+    );
+    const shards = useMemo(
+      () => [...childShards, ...shardsProp ?? []],
+      [childShards, shardsProp]
+    );
+    const [controller, setController] = useState(null);
+    useEffect(() => {
+      const created = createShardLight({
+        preset,
+        config,
+        color,
+        shards,
+        effects: effectsList,
+        size,
+        resolution,
+        rayScale,
+        baker,
+        autoUpdate,
+        billboard,
+        hitRadius,
+        hoverEase,
+        collapseEase,
+        material,
+        renderOrder,
+        depthTest,
+        toneMapped
+      });
+      setController(created);
+      return () => {
+        created.dispose();
+        setController(null);
+      };
+    }, []);
+    const updateKey = JSON.stringify({
+      preset,
+      config,
+      color,
+      shards,
+      effects: effectsList,
+      size,
+      resolution,
+      rayScale,
+      renderOrder,
+      depthTest,
+      toneMapped,
+      autoUpdate,
+      billboard,
+      hitRadius,
+      hoverEase,
+      collapseEase
+    });
+    useEffect(() => {
+      controller?.update({
+        preset,
+        config,
+        color,
+        shards,
+        effects: effectsList,
+        size,
+        resolution,
+        rayScale,
+        baker,
+        autoUpdate,
+        billboard,
+        hitRadius,
+        hoverEase,
+        collapseEase,
+        material,
+        renderOrder,
+        depthTest,
+        toneMapped
+      });
+    }, [controller, updateKey]);
+    useEffect(() => {
+      if (!controller) return;
+      let alive = true;
+      controller.ready.then(() => {
+        if (alive) onReady?.();
+      });
+      return () => {
+        alive = false;
+      };
+    }, [controller]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        set: (values) => controller?.set(values),
+        setHover: (hovered) => controller?.setHover(hovered),
+        setCollapsed: (collapsed) => controller?.setCollapsed(collapsed),
+        toggleCollapsed: () => controller?.toggleCollapsed(),
+        ready: controller?.ready ?? Promise.resolve(),
+        object: controller?.object ?? null,
+        model: controller?.model ?? null
+      }),
+      [controller]
+    );
+    if (!controller) return null;
+    const { onPointerOver, onPointerOut, onClick, ...restGroupProps } = groupProps;
+    return /* @__PURE__ */ jsx(ShardLightContext.Provider, { value: registry, children: /* @__PURE__ */ jsx(
+      "primitive",
+      {
+        object: controller.object,
+        ...restGroupProps,
+        onPointerOver: (event) => {
+          controller.setHover(true);
+          onPointerOver?.(event);
+        },
+        onPointerOut: (event) => {
+          controller.setHover(false);
+          onPointerOut?.(event);
+        },
+        onClick: (event) => {
+          const trigger = collapseTrigger(controller.model.resolved.effects);
+          if (trigger === "click") controller.toggleCollapsed();
+          else if (trigger === "once") controller.setCollapsed(true);
+          onClick?.(event);
+        },
+        children
+      }
+    ) });
+  }
+);
+
+export { ShardLightMesh };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/r3f/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/r3f/ShardLightMesh.tsx"],"names":["ShardLightMesh"],"mappings":"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","file":"index.js","sourcesContent":["import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';\nimport type { GroupProps, ThreeEvent } from '@react-three/fiber';\nimport type * as THREE from 'three';\nimport {\n  normalizeEffects,\n  ShardLightContext,\n  useShardRegistry,\n  type EffectShorthand,\n} from '../shared-react/index.js';\nimport {\n  createShardLight,\n  type CreateShardLightOptions,\n  type ShardLightController,\n} from '../three/index.js';\nimport { collapseTrigger } from '../core/index.js';\nimport type { EffectConfig, LightModel, SetValues, ShardInput } from '../core/index.js';\n\nexport interface ShardLightMeshProps extends Omit<GroupProps, 'ref'> {\n  preset?: CreateShardLightOptions['preset'];\n  config?: CreateShardLightOptions['config'];\n  /** Overrides the preset's colour for the whole light. */\n  color?: string;\n  /** Plain shard objects; `<Shard>` children are also accepted. */\n  shards?: ShardInput[];\n  effects?: EffectConfig[];\n  flicker?: EffectShorthand;\n  /** Click the light to collapse it (click again to expand). */\n  collapse?: EffectShorthand;\n  size?: number;\n  resolution?: number;\n  rayScale?: number;\n  baker?: CreateShardLightOptions['baker'];\n  autoUpdate?: boolean;\n  billboard?: boolean;\n  hitRadius?: number;\n  /** Seconds for hover to ease in/out. Default 0.25; 0 snaps. */\n  hoverEase?: number;\n  /** Seconds for the click collapse to ease in/out. Default 0.3; 0 snaps. */\n  collapseEase?: number;\n  material?: CreateShardLightOptions['material'];\n  renderOrder?: number;\n  depthTest?: boolean;\n  toneMapped?: boolean;\n  onReady?: () => void;\n}\n\nexport interface ShardLightHandle {\n  set(values: SetValues): void;\n  /** Ease the whole-light hover amount toward 0 or 1. */\n  setHover(hovered: boolean): void;\n  /** Ease the collapse toward expanded / collapsed. */\n  setCollapsed(collapsed: boolean): void;\n  /** Flip between expanded and collapsed. */\n  toggleCollapsed(): void;\n  ready: Promise<void>;\n  object: THREE.Group | null;\n  model: LightModel | null;\n}\n\n/**\n * `<ShardLightMesh>`: a thin wrapper over `createShardLight`,\n * mounting its `object` with `<primitive>` and pushing prop and `<Shard>`\n * changes into `update()`.\n */\nexport const ShardLightMesh = forwardRef<ShardLightHandle, ShardLightMeshProps>(\n  function ShardLightMesh(props, ref) {\n    const {\n      preset,\n      config,\n      color,\n      shards: shardsProp,\n      effects,\n      flicker,\n      collapse,\n      size,\n      resolution,\n      rayScale,\n      baker,\n      autoUpdate,\n      billboard,\n      hitRadius,\n      hoverEase,\n      collapseEase,\n      material,\n      renderOrder,\n      depthTest,\n      toneMapped,\n      onReady,\n      children,\n      ...groupProps\n    } = props;\n\n    const { registry, shards: childShards } = useShardRegistry();\n    const effectsList = useMemo(\n      () => normalizeEffects(effects, flicker, collapse),\n      [effects, flicker, collapse],\n    );\n    const shards = useMemo(\n      () => [...childShards, ...(shardsProp ?? [])],\n      [childShards, shardsProp],\n    );\n\n    const [controller, setController] = useState<ShardLightController | null>(null);\n\n    // Create the controller once, on mount.\n    useEffect(() => {\n      const created = createShardLight({\n        preset,\n        config,\n        color,\n        shards,\n        effects: effectsList,\n        size,\n        resolution,\n        rayScale,\n        baker,\n        autoUpdate,\n        billboard,\n        hitRadius,\n        hoverEase,\n        collapseEase,\n        material,\n        renderOrder,\n        depthTest,\n        toneMapped,\n      });\n      setController(created);\n      return () => {\n        created.dispose();\n        setController(null);\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    const updateKey = JSON.stringify({\n      preset,\n      config,\n      color,\n      shards,\n      effects: effectsList,\n      size,\n      resolution,\n      rayScale,\n      renderOrder,\n      depthTest,\n      toneMapped,\n      autoUpdate,\n      billboard,\n      hitRadius,\n      hoverEase,\n      collapseEase,\n    });\n\n    useEffect(() => {\n      controller?.update({\n        preset,\n        config,\n        color,\n        shards,\n        effects: effectsList,\n        size,\n        resolution,\n        rayScale,\n        baker,\n        autoUpdate,\n        billboard,\n        hitRadius,\n        hoverEase,\n        collapseEase,\n        material,\n        renderOrder,\n        depthTest,\n        toneMapped,\n      });\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [controller, updateKey]);\n\n    useEffect(() => {\n      if (!controller) return;\n      let alive = true;\n      controller.ready.then(() => {\n        if (alive) onReady?.();\n      });\n      return () => {\n        alive = false;\n      };\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [controller]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        set: (values: SetValues) => controller?.set(values),\n        setHover: (hovered: boolean) => controller?.setHover(hovered),\n        setCollapsed: (collapsed: boolean) => controller?.setCollapsed(collapsed),\n        toggleCollapsed: () => controller?.toggleCollapsed(),\n        ready: controller?.ready ?? Promise.resolve(),\n        object: controller?.object ?? null,\n        model: controller?.model ?? null,\n      }),\n      [controller],\n    );\n\n    if (!controller) return null;\n\n    const { onPointerOver, onPointerOut, onClick, ...restGroupProps } = groupProps;\n\n    return (\n      <ShardLightContext.Provider value={registry}>\n        <primitive\n          object={controller.object}\n          {...restGroupProps}\n          onPointerOver={(event: ThreeEvent<PointerEvent>) => {\n            controller.setHover(true);\n            onPointerOver?.(event);\n          }}\n          onPointerOut={(event: ThreeEvent<PointerEvent>) => {\n            controller.setHover(false);\n            onPointerOut?.(event);\n          }}\n          onClick={(event: ThreeEvent<MouseEvent>) => {\n            const trigger = collapseTrigger(controller.model.resolved.effects);\n            if (trigger === 'click') controller.toggleCollapsed();\n            else if (trigger === 'once') controller.setCollapsed(true);\n            onClick?.(event);\n          }}\n        >\n          {children}\n        </primitive>\n      </ShardLightContext.Provider>\n    );\n  },\n);\n"]}

package/dist/react/index.d.ts

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+import { P as Preset, a as ShardLightConfig, E as EffectConfig, B as Baker } from '../baker-BmlWqsXG.js';
+export { b as ShardConfig, S as ShardInput } from '../baker-BmlWqsXG.js';
+import { SetValues, LightModel } from '../core/index.js';
+export { ChannelValues, Layer } from '../core/index.js';
+import { E as EffectShorthand } from '../effects-bjjSnDyP.js';
+export { G as Glow, H as Halo, R as Rays, S as Shard, a as ShardComponentProps, b as ShardProps, c as Streaks, d as createShardComponent, n as normalizeEffects } from '../effects-bjjSnDyP.js';
+
+interface ShardLightProps {
+    /** Starting config. Omitted or `null` = start empty. */
+    preset?: Preset | null;
+    /** Data-driven alternative or addition to children. */
+    config?: Partial<ShardLightConfig>;
+    /** Shorthand for `config.color`. */
+    color?: string;
+    /** CSS edge length of the light box. */
+    size?: number | string;
+    /** Bake size. `'auto'` uses rendered size × DPR, capped. */
+    resolution?: number | 'auto';
+    /** Thins every ray. */
+    rayScale?: number;
+    effects?: EffectConfig[];
+    flicker?: EffectShorthand;
+    /** Click the light to collapse it (click again to expand). */
+    collapse?: EffectShorthand;
+    /** Static channel values. */
+    channels?: Record<string, {
+        scale?: number;
+        opacity?: number;
+    }>;
+    /** CSS `mix-blend-mode` of the whole light. Default `plus-lighter`. */
+    blend?: string;
+    baker?: Baker;
+    /** Fires once every layer is baked and decoded. */
+    onReady?: () => void;
+    /** Shown until it's ready (SSR, first paint). */
+    fallback?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/** The root `<div>` plus the imperative API. */
+type ShardLightHandle = HTMLDivElement & {
+    set(values: SetValues): void;
+    setChannel(channel: string, values: {
+        scale?: number;
+        opacity?: number;
+        rotation?: number;
+    }): void;
+    /** Drives the whole-light hover amount (`spin`/`hover` shards use it). */
+    setHover(hovered: boolean): void;
+    /** Eases the light toward collapsed (click behavior). */
+    setCollapsed(collapsed: boolean): void;
+    /** Flips between expanded and collapsed. */
+    toggleCollapsed(): void;
+    readonly ready: Promise<void>;
+    readonly model: LightModel | null;
+};
+declare const ShardLight: react.ForwardRefExoticComponent<ShardLightProps & react.RefAttributes<ShardLightHandle>>;
+
+export { Baker, EffectConfig, EffectShorthand, LightModel, Preset, SetValues, ShardLight, ShardLightConfig, type ShardLightHandle, type ShardLightProps };