fancy-ui-react 0.2.1 → 0.4.0

package/dist/components/datamosh-transition/datamosh-transition-core.d.ts

@@ -0,0 +1,180 @@
+/**
+ * DatamoshTransition core — pure math, no DOM.
+ *
+ * The look: flat blocks of saturated colour in a FIXED column grid, each column
+ * a stack of tiles falling along one sigmoid curve — slivers at the top and
+ * bottom, one fat tile snapping open through the middle. Nothing ever moves
+ * horizontally; only the vertical tiling animates.
+ *
+ * On top of that sits the transition itself: every column owns a covered band
+ * [top, bot] (0..1 of the height). Cover drops the band's bottom edge like a
+ * curtain, reveal lets its top edge fall away, columns staggered right to left.
+ */
+export declare const DEFAULT_COLORS: readonly ["#ffffff", "#3566ff", "#ffcf00", "#192aff", "#d62036", "#282142", "#ec4978", "#ff9900", "#14101f", "#00dd33", "#00ef82"];
+/** Column edges sit at W·(i/N)^power: narrow left, wide right — reads as receding perspective. */
+export declare const DEFAULT_COLUMNS = 11;
+export declare const DEFAULT_POWER = 1.65;
+/** Odd so exactly one tile sits dead centre and takes the whole bulge. */
+export declare const DEFAULT_TILES = 15;
+/** Seconds per tile step at speed 1. */
+export declare const CYCLE = 0.2;
+/** Seconds between neighbouring columns starting to fall (right column first). */
+export declare const FALL_STAGGER = 0.006;
+/** Sigmoid exponent — steepness at the centre is tile height. */
+export declare const STRETCH = 8.5;
+/** Exponential arrival rate inside a tile step (the "spring"). */
+export declare const SPRING_K = 1.6;
+/** Each tile overhangs the one below by this fraction of the height. */
+export declare const BLEED = 0.012;
+/** Phase offset per column, in tiles — the zig-zag. Negative: stacks ride higher to the right. */
+export declare const COL_PHASE = -0.4;
+/** Slope of the curve past both ends; clamping would pile off-screen tiles onto y = 0. */
+export declare const TAIL_SLOPE = 0.05;
+/** Length of the cyclic colour strip every column reads. */
+export declare const STRIP_LENGTH = 61;
+/** Small, fast, seedable PRNG (32-bit state). Same seed → same sequence. */
+export declare function mulberry32(seed: number): () => number;
+/** Relative luminance of a hex (#rgb / #rrggbb) or rgb() colour; null when unparseable. */
+export declare function luminance(color: string): number | null;
+export interface PaletteRoles {
+    /** The lightest colour — recurs most often (~a quarter of the strip). */
+    light: number;
+    /** The darkest one or two colours — the other contrast anchor. */
+    darks: number[];
+    /** Everything else. */
+    hues: number[];
+}
+/** Split a palette into contrast anchors and mid-tone hues by luminance. */
+export declare function paletteRoles(colors: readonly string[]): PaletteRoles;
+/**
+ * The cyclic colour strip, as palette indices. Light and dark anchors recur
+ * often on purpose: a fixed palette stride walks past them and leaves flat
+ * mid-tone corduroy. No two neighbours repeat, including across the wrap.
+ */
+export declare function buildStrip(seed: number, colors: readonly string[], len?: number): number[];
+/** Colour for a tile, keyed by its IDENTITY (never its on-screen slot) — colours stay put. */
+export declare function stripIndex(strip: readonly number[], id: number, column: number): number;
+/** Column edges in device px: W·(i/N)^power, rounded. Length = columns + 1. */
+export declare function columnEdges(width: number, columns: number, power: number): number[];
+/** Force a usable odd tile count (≥ 3). */
+export declare function oddTiles(tiles: number): number;
+/**
+ * Where tile boundary `k` sits, 0..1 of the height. Sigmoid across [0, tiles],
+ * extended LINEARLY (shallow slope) past both ends rather than clamped.
+ */
+export declare function tileEdge(k: number, tiles: number, stretch?: number): number;
+/**
+ * Re-time the fraction of one tile step: exponential arrival mirrored at the
+ * halfway point. Rushes in, hangs at the centre (fattest), releases. Monotonic,
+ * exact at 0 and 1, so the stack never drifts off schedule.
+ */
+export declare function springStep(p: number): number;
+/**
+ * Unbounded phase of column `i` at `elapsed` seconds. Never wrapped: tile
+ * identity is derived from it, so a wrap would teleport every boundary.
+ */
+export declare function columnFlow(elapsed: number, column: number, columns: number, speed?: number): number;
+export interface TileRect {
+    id: number;
+    /** Device px, unclamped. */
+    top: number;
+    /** Device px, bleed included, unclamped. */
+    bot: number;
+}
+/**
+ * The tiles of one column at `flow`, ordered BOTTOM-UP (paint order): each
+ * tile overhangs the one below it by `bleed` px, so painting upward laps the
+ * overhang over the lower tile instead of hiding it under it.
+ */
+export declare function columnTiles(flow: number, tiles: number, height: number, bleed: number): TileRect[];
+export type Direction = "cover" | "reveal";
+export interface Coverage {
+    /** Covered band per column, linear 0..1 (eased only when drawn). */
+    top: Float32Array;
+    bot: Float32Array;
+}
+export declare function createCoverage(columns: number, covered?: boolean): Coverage;
+/** Order in which the columns move. */
+export type DatamoshSweep = "right" | "left" | "center" | "edges" | "random";
+/**
+ * Delay before each column moves, in seconds. `right` starts at the rightmost
+ * column, `center` fans out from the middle, `edges` closes in from both
+ * sides, `random` is a seeded shuffle.
+ */
+export declare function columnDelays(columns: number, sweep: DatamoshSweep, stagger: number, seed?: number): number[];
+/**
+ * Advance every column one step toward `direction`. Cover drops the band's
+ * bottom edge to 1 (and pulls a half-fallen top back up); reveal lets the top
+ * edge fall onto the bottom one. Monotonic per column, so an interruption just
+ * reverses from wherever each column is. Returns true once every column is done.
+ */
+export declare function stepCoverage(cov: Coverage, direction: Direction, phaseTime: number, dt: number, duration: number, delays: ArrayLike<number>): boolean;
+/** Snap every column to the end of `direction`. */
+export declare function settleCoverage(cov: Coverage, direction: Direction): void;
+/** Ease for a band edge: cubic in-out, exact at 0 and 1. */
+export declare function easeEdge(a: number): number;
+/**
+ * Shape of the covered band. `curtain` drops from the top and falls away,
+ * `rise` climbs from the bottom and lifts off, `split` opens from the centre
+ * line and squeezes shut onto it, `interlace` alternates curtain and rise
+ * column by column. Everything stays vertical.
+ */
+export type DatamoshEffect = "curtain" | "rise" | "split" | "interlace";
+export interface Band {
+    /** 0..1 of the height. */
+    y0: number;
+    y1: number;
+    /** Draw the tile stack upside down (tiles rise instead of fall). */
+    mirror: boolean;
+}
+/**
+ * Map a column's curtain-space band `[top, bot]` (already eased) onto the
+ * screen for `effect`. Curtain space is what `stepCoverage` animates; every
+ * effect is a pure re-mapping of it, so interruptions behave the same.
+ */
+export declare function columnBand(effect: DatamoshEffect, column: number, top: number, bot: number): Band;
+/** Ready-made palettes. Each keeps one light anchor and a couple of near-blacks. */
+export declare const DATAMOSH_PALETTES: {
+    readonly broadcast: readonly ["#ffffff", "#3566ff", "#ffcf00", "#192aff", "#d62036", "#282142", "#ec4978", "#ff9900", "#14101f", "#00dd33", "#00ef82"];
+    readonly thermal: readonly ["#fff4d6", "#ffd23f", "#ff9f1c", "#ff5a1f", "#e0282e", "#b0125b", "#6a0f63", "#2a0a3d", "#0d0614"];
+    readonly sunset: readonly ["#fff6d8", "#fbc56b", "#f59a3a", "#e97a1d", "#c85a14", "#8a4a22", "#5a3b25", "#2d1c16", "#140b08"];
+    readonly mono: readonly ["#ffffff", "#e5e5e5", "#b5b5b5", "#8a8a8a", "#5c5c5c", "#2e2e2e", "#141414", "#050505"];
+    readonly acid: readonly ["#f4ffe8", "#e4ff1a", "#00ff9c", "#00e0ff", "#3d5afe", "#8c3dff", "#ff2bd6", "#1b0b36", "#070707"];
+};
+export type DatamoshPaletteName = keyof typeof DATAMOSH_PALETTES;
+/** Resolve a palette name or colour list; falls back to the default for anything unusable. */
+export declare function resolvePalette(colors: readonly string[] | DatamoshPaletteName | undefined): string[];
+/** Largest brightness gain the `boost` auto-levels may apply. */
+export declare const MAX_GAIN = 1.6;
+/** Share of the picture's height the slots sample from, centred. */
+export declare const SOURCE_SPAN = 0.6;
+/**
+ * Height (0..1) a slot samples the picture at: spread linearly over the middle
+ * `SOURCE_SPAN` of the picture. Not along the fall's sigmoid, which packs
+ * almost every slot against the edges, and not over the full height, where
+ * frames and borders (the darkest, dullest parts of most pictures) sit.
+ */
+export declare function sourceSlotY(slot: number, tiles: number): number;
+/**
+ * Which rest slot a tile's colour is sampled from. Keyed by IDENTITY, like the
+ * colour strip: a tile keeps its piece of the picture as it falls, so the
+ * image gets dragged down in chunks instead of sliding under the grid.
+ */
+export declare function sourceSlot(id: number, column: number, tiles: number): number;
+/** Source rect that fits an image over a box like `object-fit: cover`. */
+export declare function coverFit(imgW: number, imgH: number, boxW: number, boxH: number): {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+};
+/**
+ * Colour table `[column][slot]` sampled from an RGBA buffer that already maps
+ * onto the overlay box. Each cell averages a 3×3 neighbourhood at the column's
+ * centre and the slot's height. `edges` are column edges normalised to 0..1.
+ *
+ * With `boost` (default), the table is auto-levelled (darkest cell → black,
+ * brightest → white) and saturated, so a moody picture still decodes into the
+ * flat, saturated blocks the effect is about.
+ */
+export declare function sampleSource(pixels: ArrayLike<number>, pw: number, ph: number, edges: readonly number[], tiles: number, boost?: boolean): string[][];

package/dist/components/datamosh-transition/datamosh-transition-core.js

@@ -0,0 +1,370 @@
+"use client";
+const DEFAULT_COLORS = [
+  "#ffffff",
+  "#3566ff",
+  "#ffcf00",
+  "#192aff",
+  "#d62036",
+  "#282142",
+  "#ec4978",
+  "#ff9900",
+  "#14101f",
+  "#00dd33",
+  "#00ef82"
+];
+const DEFAULT_COLUMNS = 11;
+const DEFAULT_POWER = 1.65;
+const DEFAULT_TILES = 15;
+const CYCLE = 0.2;
+const FALL_STAGGER = 6e-3;
+const STRETCH = 8.5;
+const BLEED = 0.012;
+const COL_PHASE = -0.4;
+const TAIL_SLOPE = 0.05;
+const STRIP_LENGTH = 61;
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return () => {
+    a = a + 1831565813 >>> 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function luminance(color) {
+  const s = color.trim().toLowerCase();
+  let rgb = null;
+  const hex = s.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/);
+  if (hex) {
+    const h = hex[1];
+    const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+    rgb = [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+  } else {
+    const m = s.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/);
+    if (m) rgb = [Number(m[1]), Number(m[2]), Number(m[3])];
+  }
+  if (!rgb) return null;
+  const [r, g, b] = rgb.map((v) => {
+    const c = Math.min(255, v) / 255;
+    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function paletteRoles(colors) {
+  const ranked = colors.map((c, i) => ({ i, l: luminance(c) ?? 0.5 })).sort((a, b) => a.l - b.l || a.i - b.i);
+  const light = ranked[ranked.length - 1].i;
+  const darkCount = colors.length >= 5 ? 2 : 1;
+  const darks = ranked.slice(0, darkCount).map((r) => r.i);
+  const hues = ranked.slice(darkCount, -1).map((r) => r.i);
+  return { light, darks, hues };
+}
+function pickDifferent(from, avoid, len) {
+  for (let i = 1; i <= len; i++) {
+    const c = (from + i) % len;
+    if (!avoid.includes(c)) return c;
+  }
+  return from;
+}
+function buildStrip(seed, colors, len = STRIP_LENGTH) {
+  const n = colors.length;
+  if (n < 2) return Array.from({ length: len }, () => 0);
+  const { light, darks, hues } = paletteRoles(colors);
+  const pool = hues.length ? hues : darks;
+  const rand = mulberry32(seed);
+  const strip = [];
+  let lastHue = -1;
+  for (let k = 0; k < len; k++) {
+    const r = rand();
+    let next;
+    if (r < 0.26) {
+      next = light;
+    } else if (r < 0.42) {
+      next = darks[Math.floor(rand() * darks.length)];
+    } else {
+      let h = pool[Math.floor(rand() * pool.length)];
+      if (h === lastHue && pool.length > 1) h = pool[(pool.indexOf(h) + 1) % pool.length];
+      lastHue = h;
+      next = h;
+    }
+    if (k > 0 && next === strip[k - 1]) next = pickDifferent(next, [strip[k - 1]], n);
+    strip.push(next);
+  }
+  if (len > 2 && strip[len - 1] === strip[0]) {
+    strip[len - 1] = pickDifferent(strip[len - 1], [strip[len - 2], strip[0]], n);
+  }
+  return strip;
+}
+function stripIndex(strip, id, column) {
+  const len = strip.length;
+  const s = id - column;
+  return strip[(s % len + len) % len];
+}
+function columnEdges(width, columns, power) {
+  const edges = [];
+  for (let i = 0; i <= columns; i++) {
+    edges.push(Math.round(width * Math.pow(i / columns, power)));
+  }
+  return edges;
+}
+function oddTiles(tiles) {
+  const t = Math.max(3, Math.round(Number.isFinite(tiles) ? tiles : DEFAULT_TILES));
+  return t % 2 === 0 ? t + 1 : t;
+}
+function tileEdge(k, tiles, stretch = STRETCH) {
+  const u = k / tiles;
+  if (u < 0) return u * TAIL_SLOPE;
+  if (u > 1) return 1 + (u - 1) * TAIL_SLOPE;
+  const a = Math.pow(u, stretch);
+  return a / (a + Math.pow(1 - u, stretch));
+}
+const SPRING_NORM = 1 - Math.exp(-1.6);
+function springStep(p) {
+  const half = (t) => (1 - Math.exp(-1.6 * t)) / SPRING_NORM;
+  return p < 0.5 ? 0.5 * half(2 * p) : 1 - 0.5 * half(2 * (1 - p));
+}
+function columnFlow(elapsed, column, columns, speed = 1) {
+  const delay = (columns - 1 - column) * FALL_STAGGER;
+  const t = elapsed - delay;
+  const raw = t <= 0 ? 0 : t * speed / CYCLE;
+  const linear = raw + column * COL_PHASE;
+  const step = Math.floor(linear);
+  return step + springStep(linear - step);
+}
+function columnTiles(flow, tiles, height, bleed) {
+  const out = [];
+  const base = -Math.floor(flow);
+  for (let n = tiles + 2; n >= -2; n--) {
+    const id = base + n;
+    const k = id + flow;
+    const top = Math.round(tileEdge(k, tiles) * height);
+    const bot = Math.round(tileEdge(k + 1, tiles) * height) + bleed;
+    if (bot <= top) continue;
+    out.push({ id, top, bot });
+  }
+  return out;
+}
+function createCoverage(columns, covered = false) {
+  const top = new Float32Array(columns);
+  const bot = new Float32Array(columns);
+  if (covered) bot.fill(1);
+  return { top, bot };
+}
+function columnDelays(columns, sweep, stagger, seed = 1) {
+  const mid = (columns - 1) / 2;
+  const rank = (i) => {
+    switch (sweep) {
+      case "left":
+        return i;
+      case "center":
+        return Math.abs(i - mid);
+      case "edges":
+        return mid - Math.abs(i - mid);
+      case "random":
+        return 0;
+      default:
+        return columns - 1 - i;
+    }
+  };
+  if (sweep === "random") {
+    const order = Array.from({ length: columns }, (_, i) => i);
+    const rand = mulberry32(seed ^ 24301);
+    for (let i = order.length - 1; i > 0; i--) {
+      const j = Math.floor(rand() * (i + 1));
+      [order[i], order[j]] = [order[j], order[i]];
+    }
+    const delays = new Array(columns);
+    order.forEach((col, k) => delays[col] = k * stagger);
+    return delays;
+  }
+  return Array.from({ length: columns }, (_, i) => rank(i) * stagger);
+}
+function stepCoverage(cov, direction, phaseTime, dt, duration, delays) {
+  const n = cov.top.length;
+  const rate = duration > 0 ? dt / duration : Infinity;
+  let done = true;
+  for (let i = 0; i < n; i++) {
+    const started = phaseTime >= (delays[i] ?? 0);
+    if (direction === "cover") {
+      if (cov.bot[i] - cov.top[i] <= 1e-6 && cov.bot[i] < 1) {
+        cov.top[i] = 0;
+        cov.bot[i] = 0;
+      }
+      if (started) {
+        cov.bot[i] = Math.min(1, cov.bot[i] + rate);
+        cov.top[i] = Math.max(0, cov.top[i] - rate);
+      }
+      if (cov.bot[i] < 1 || cov.top[i] > 0) done = false;
+    } else {
+      if (started) cov.top[i] = Math.min(cov.bot[i], cov.top[i] + rate);
+      if (cov.top[i] < cov.bot[i]) done = false;
+    }
+  }
+  return done;
+}
+function settleCoverage(cov, direction) {
+  if (direction === "cover") {
+    cov.top.fill(0);
+    cov.bot.fill(1);
+  } else {
+    cov.top.fill(0);
+    cov.bot.fill(0);
+  }
+}
+function easeEdge(a) {
+  const x = Math.min(1, Math.max(0, a));
+  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+function columnBand(effect, column, top, bot) {
+  const rise = effect === "rise" || effect === "interlace" && column % 2 === 1;
+  if (effect === "split") {
+    const half = Math.max(0, bot - top) / 2;
+    return { y0: 0.5 - half, y1: 0.5 + half, mirror: false };
+  }
+  if (rise) return { y0: 1 - bot, y1: 1 - top, mirror: true };
+  return { y0: top, y1: bot, mirror: false };
+}
+const DATAMOSH_PALETTES = {
+  broadcast: DEFAULT_COLORS,
+  thermal: [
+    "#fff4d6",
+    "#ffd23f",
+    "#ff9f1c",
+    "#ff5a1f",
+    "#e0282e",
+    "#b0125b",
+    "#6a0f63",
+    "#2a0a3d",
+    "#0d0614"
+  ],
+  sunset: [
+    "#fff6d8",
+    "#fbc56b",
+    "#f59a3a",
+    "#e97a1d",
+    "#c85a14",
+    "#8a4a22",
+    "#5a3b25",
+    "#2d1c16",
+    "#140b08"
+  ],
+  mono: ["#ffffff", "#e5e5e5", "#b5b5b5", "#8a8a8a", "#5c5c5c", "#2e2e2e", "#141414", "#050505"],
+  acid: [
+    "#f4ffe8",
+    "#e4ff1a",
+    "#00ff9c",
+    "#00e0ff",
+    "#3d5afe",
+    "#8c3dff",
+    "#ff2bd6",
+    "#1b0b36",
+    "#070707"
+  ]
+};
+function resolvePalette(colors) {
+  if (typeof colors === "string") return [...DATAMOSH_PALETTES[colors] ?? DEFAULT_COLORS];
+  return colors && colors.length >= 2 ? [...colors] : [...DEFAULT_COLORS];
+}
+const MAX_GAIN = 1.6;
+const SOURCE_SPAN = 0.6;
+function sourceSlotY(slot, tiles) {
+  return 0.5 + ((slot + 0.5) / tiles - 0.5) * SOURCE_SPAN;
+}
+function sourceSlot(id, column, tiles) {
+  const s = id - column;
+  return (s % tiles + tiles) % tiles;
+}
+function coverFit(imgW, imgH, boxW, boxH) {
+  if (imgW <= 0 || imgH <= 0 || boxW <= 0 || boxH <= 0) return { sx: 0, sy: 0, sw: imgW, sh: imgH };
+  const scale = Math.max(boxW / imgW, boxH / imgH);
+  const sw = boxW / scale;
+  const sh = boxH / scale;
+  return { sx: (imgW - sw) / 2, sy: (imgH - sh) / 2, sw, sh };
+}
+function sampleSource(pixels, pw, ph, edges, tiles, boost = true) {
+  const at = (x, y) => {
+    const cx = Math.min(pw - 1, Math.max(0, x));
+    const cy = Math.min(ph - 1, Math.max(0, y));
+    return (cy * pw + cx) * 4;
+  };
+  const cells = [];
+  let lo = Infinity;
+  let hi = -Infinity;
+  for (let i = 0; i + 1 < edges.length; i++) {
+    const x = Math.round((edges[i] + edges[i + 1]) / 2 * (pw - 1));
+    const row = [];
+    for (let s = 0; s < tiles; s++) {
+      const y = Math.round(sourceSlotY(s, tiles) * (ph - 1));
+      let r = 0;
+      let g = 0;
+      let b = 0;
+      for (let dy = -1; dy <= 1; dy++) {
+        for (let dx = -1; dx <= 1; dx++) {
+          const k = at(x + dx, y + dy);
+          r += pixels[k];
+          g += pixels[k + 1];
+          b += pixels[k + 2];
+        }
+      }
+      const cell = [r / 9, g / 9, b / 9];
+      const l = 0.2126 * cell[0] + 0.7152 * cell[1] + 0.0722 * cell[2];
+      lo = Math.min(lo, l);
+      hi = Math.max(hi, l);
+      row.push(cell);
+    }
+    cells.push(row);
+  }
+  const span = hi - lo;
+  const level = boost && span > 8 ? Math.min(MAX_GAIN, 255 / (hi - lo * 0.5)) : 1;
+  const offset = boost && span > 8 ? lo * 0.5 : 0;
+  const saturation = boost ? 1.35 : 1;
+  const clamp = (v) => Math.round(Math.min(255, Math.max(0, v)));
+  return cells.map(
+    (row) => row.map(([r, g, b]) => {
+      let [nr, ng, nb] = [(r - offset) * level, (g - offset) * level, (b - offset) * level];
+      const l = 0.2126 * nr + 0.7152 * ng + 0.0722 * nb;
+      nr = l + (nr - l) * saturation;
+      ng = l + (ng - l) * saturation;
+      nb = l + (nb - l) * saturation;
+      return `rgb(${clamp(nr)}, ${clamp(ng)}, ${clamp(nb)})`;
+    })
+  );
+}
+export {
+  BLEED,
+  COL_PHASE,
+  CYCLE,
+  DATAMOSH_PALETTES,
+  DEFAULT_COLORS,
+  DEFAULT_COLUMNS,
+  DEFAULT_POWER,
+  DEFAULT_TILES,
+  FALL_STAGGER,
+  MAX_GAIN,
+  SOURCE_SPAN,
+  STRETCH,
+  STRIP_LENGTH,
+  TAIL_SLOPE,
+  buildStrip,
+  columnBand,
+  columnDelays,
+  columnEdges,
+  columnFlow,
+  columnTiles,
+  coverFit,
+  createCoverage,
+  easeEdge,
+  luminance,
+  mulberry32,
+  oddTiles,
+  paletteRoles,
+  resolvePalette,
+  sampleSource,
+  settleCoverage,
+  sourceSlot,
+  sourceSlotY,
+  springStep,
+  stepCoverage,
+  stripIndex,
+  tileEdge
+};

package/dist/components/datamosh-transition/index.d.ts

@@ -0,0 +1,3 @@
+export { DatamoshTransition } from "./DatamoshTransition.js";
+export type { DatamoshTransitionProps, DatamoshTransitionPhase, DatamoshTransitionHandle, } from "./DatamoshTransition.js";
+export { DATAMOSH_PALETTES, type DatamoshEffect, type DatamoshSweep, type DatamoshPaletteName, } from "./datamosh-transition-core.js";

package/dist/components/dock/Dock.d.ts

@@ -7,22 +7,25 @@ export interface DockProps {
     magnification?: number;
     /** Pointer distance over which the magnification falls off. */
     distance?: number;
-    /** Vertical alignment of the icons. */
+    /** Cross-axis alignment of the icons. */
     direction?: Direction;
     /** Dock orientation. */
     orientation?: DataOrientation;
-    /**
-     * Accessible name for the toolbar. The dock spreads no rest props, so this
-     * is the only way to name one whose icons carry no label of their own.
-     */
+    /** A soft pool of accent light inside the shelf that follows the pointer. */
+    spotlight?: boolean;
+    /** A soft contact shadow / glow ellipse under each icon that grows with it. */
+    reflection?: boolean;
+    /** Accessible name for the toolbar. */
     ariaLabel?: string;
     /** The `DockIcon`s and `DockSeparator`s. */
     children?: ReactNode;
 }
 /**
- * An icon dock whose items magnify smoothly as the pointer approaches.
+ * An icon dock on a lit glass shelf: icons swell on a cosine curve as the
+ * pointer approaches, a pool of light follows it across the shelf, and the
+ * shelf edge brightens near it.
  *
  * No `ref` prop: the source exposes no bindable ref, and no rest props either —
  * it reads only these props and spreads nothing.
  */
-export declare function Dock({ className, magnification, distance, direction, orientation, ariaLabel, children, }: DockProps): import("react").JSX.Element;
+export declare function Dock({ className, magnification, distance, direction, orientation, spotlight, reflection, ariaLabel, children, }: DockProps): import("react").JSX.Element;