@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/backgrounds/effects/grid/morphGrid.js

@@ -0,0 +1,74 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+import { CELL_GRID, cells } from "./lines.js";
+export const MORPH_GRID_META = {
+    id: "morph-grid",
+    label: "Dynamic CSS Shape Morphing Grid",
+    category: "grid",
+    family: "css",
+    cost: { kb: "1–3 KB", cpu: 2, gpu: 2 },
+    tier: "all",
+    note: "The morph is a square scaling inside a round clip: transform only, so it runs on the compositor.",
+};
+/** The atlas's cell budget (it assumed border-radius repaints; kept as a sane cap). */
+export const MORPH_GRID_MAX_CELLS = 200;
+// Square to circle without animating border-radius (which repaints every
+// frame on the main thread): each cell is a round clip, and inside it a
+// square scales from 71% (it fits the circle whole: a square) to 100% (the
+// clip cuts its corners: a circle), turning as it goes; the clip is a circle,
+// so it never needs to turn itself. One transform animation per cell: the
+// compositor runs it, and Chrome restyles one element per cell per frame (it
+// restyles every separately animated element, so a second animation on the
+// cell doubled the cost). A diagonal delay makes the morph sweep as a wave.
+const CSS = `@layer components {
+  :where([data-sx-bg="morph-grid"]) {
+    ${CELL_GRID}
+    gap: 1.5cqmin;
+  }
+  :where([data-sx-bg="morph-grid"] [data-sx-bg-part="cell"]) {
+    place-self: center;
+    inline-size: 70%;
+    max-block-size: 70%;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    overflow: hidden;
+    opacity: 0.75;
+  }
+  :where([data-sx-bg="morph-grid"] [data-sx-bg-part="cell"])::before {
+    content: "";
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    border-radius: 10%;
+    background: var(--c);
+    animation: sx-bg-morph-shape ${duration("var(--sx-bg-d)")} ease-in-out var(--delay) infinite;
+  }
+  @keyframes sx-bg-morph-shape {
+    0%, 100% { transform: rotate(0deg) scale(0.71); }
+    50% { transform: rotate(90deg) scale(1); }
+  }
+}`;
+/** A grid of squares that morph into circles and back in a diagonal wave. */
+export function morphGrid(options = {}) {
+    const palette = paletteVars(options.colors);
+    const cols = cells(options.cols, 12, 40);
+    const rows = Math.min(cells(options.rows, 7, 40), Math.floor(MORPH_GRID_MAX_CELLS / cols));
+    const d = options.duration ?? 5;
+    const nodes = [];
+    for (let y = 0; y < rows; y++) {
+        for (let x = 0; x < cols; x++) {
+            nodes.push({
+                part: "cell",
+                vars: {
+                    "--c": paletteRef(x + y, palette.count),
+                    "--delay": `${-round(((x + y) / (cols + rows)) * d, 2)}s`,
+                },
+            });
+        }
+    }
+    return defineCssEffect(MORPH_GRID_META, CSS, options, {
+        vars: { ...palette.vars, "--sx-bg-cols": cols, "--sx-bg-rows": rows, "--sx-bg-d": `${d}s` },
+        nodes,
+    });
+}

package/dist/backgrounds/effects/grid/morphGrid.schema.d.ts

@@ -0,0 +1 @@
+export declare const MORPH_GRID_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/grid/morphGrid.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, colorsField } from "../../../schema/common.js";
+export const MORPH_GRID_SCHEMA = defineSchema()({
+    id: "morph-grid",
+    family: "background",
+    factory: "morphGrid",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        cols: { kind: "integer", label: "Columns", min: 1, max: 40, default: 12 },
+        rows: { kind: "integer", label: "Rows", min: 1, max: 40, default: 7, help: "At most 200 cells in all." },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-primary))", "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-secondary))"], 1, 6) },
+        duration: { kind: "number", label: "Cycle", min: 0.5, max: 20, step: 0.5, unit: "s", default: 5 },
+    },
+});

package/dist/backgrounds/effects/grid/neonGridTrail.d.ts

@@ -0,0 +1,13 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const NEON_GRID_TRAIL_META: EffectMeta;
+export interface NeonGridTrailOptions extends LayerOptions {
+    /** Cell size in px. */
+    readonly cell?: number;
+    /** How long a lit cell takes to fade, in ms. */
+    readonly fade?: number;
+    /** Grid lines, then the neon. */
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A dark grid whose cells light up in neon along the cursor's path, then fade. */
+export declare function neonGridTrail(options?: NeonGridTrailOptions): CanvasEffect;

package/dist/backgrounds/effects/grid/neonGridTrail.js

@@ -0,0 +1,70 @@
+import { defineCanvasEffect } from "../define.js";
+import { aim, paint } from "../canvasKit.js";
+export const NEON_GRID_TRAIL_META = {
+    id: "neon-grid-trail",
+    label: "Interactive Neon Grid Trail",
+    category: "grid",
+    family: "canvas",
+    cost: { kb: "2–5 KB", cpu: 2, gpu: 1 },
+    tier: "all",
+    needs: { pointer: true },
+    note: "Fade cells with a time value instead of a timer per cell.",
+};
+// Each cell stores only WHEN it was last touched; its glow is computed from
+// that time while drawing. No timers, no per-cell animation state. The path
+// between two pointer samples is filled in, so fast moves leave no gaps.
+function program(cell, fade) {
+    return {
+        init(env) {
+            const cols = Math.ceil(env.width / cell);
+            const rows = Math.ceil(env.height / cell);
+            return { time: 0, cols, rows, hit: new Float64Array(cols * rows).fill(-Infinity), last: null };
+        },
+        step(state, deltaMs, pointer, env) {
+            state.time += deltaMs;
+            const p = aim(pointer, state.time * 1.6, env);
+            const from = state.last ?? p;
+            const steps = Math.max(1, Math.ceil(Math.hypot(p.x - from.x, p.y - from.y) / (cell / 2)));
+            for (let s = 1; s <= steps; s++) {
+                const x = Math.floor((from.x + ((p.x - from.x) * s) / steps) / cell);
+                const y = Math.floor((from.y + ((p.y - from.y) * s) / steps) / cell);
+                if (x >= 0 && y >= 0 && x < state.cols && y < state.rows)
+                    state.hit[y * state.cols + x] = state.time;
+            }
+            state.last = p;
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            ctx.strokeStyle = paint(env, 0, 0.5);
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for (let x = 0; x <= state.cols; x++) {
+                ctx.moveTo(x * cell + 0.5, 0);
+                ctx.lineTo(x * cell + 0.5, env.height);
+            }
+            for (let y = 0; y <= state.rows; y++) {
+                ctx.moveTo(0, y * cell + 0.5);
+                ctx.lineTo(env.width, y * cell + 0.5);
+            }
+            ctx.stroke();
+            for (let i = 0; i < state.hit.length; i++) {
+                const age = state.time - (state.hit[i] ?? -Infinity);
+                if (age >= fade)
+                    continue;
+                const glow = 1 - age / fade;
+                const x = (i % state.cols) * cell;
+                const y = Math.floor(i / state.cols) * cell;
+                ctx.fillStyle = paint(env, 1, glow * 0.18);
+                ctx.fillRect(x - 3, y - 3, cell + 6, cell + 6); // soft halo
+                ctx.fillStyle = paint(env, 1, glow * 0.65);
+                ctx.fillRect(x + 1, y + 1, cell - 1, cell - 1);
+            }
+        },
+    };
+}
+/** A dark grid whose cells light up in neon along the cursor's path, then fade. */
+export function neonGridTrail(options = {}) {
+    return defineCanvasEffect(NEON_GRID_TRAIL_META, program(options.cell ?? 32, options.fade ?? 900), options, {
+        colors: options.colors ?? ["color-mix(in oklab, var(--color-sx-muted) 22%, transparent)", "var(--color-sx-accent)"],
+    });
+}

package/dist/backgrounds/effects/grid/neonGridTrail.schema.d.ts

@@ -0,0 +1 @@
+export declare const NEON_GRID_TRAIL_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/grid/neonGridTrail.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, seedField, colorsField } from "../../../schema/common.js";
+export const NEON_GRID_TRAIL_SCHEMA = defineSchema()({
+    id: "neon-grid-trail",
+    family: "background",
+    factory: "neonGridTrail",
+    fields: {
+        ...layerFields(),
+        cell: { kind: "number", label: "Cell size", min: 12, max: 120, step: 1, unit: "px", default: 32 },
+        fade: { kind: "number", label: "Fade", min: 100, max: 4000, step: 50, unit: "ms", default: 900 },
+        colors: { ...colorsField(["color-mix(in oklab, var(--color-sx-muted) 22%, transparent)", "var(--color-sx-accent)"], 1, 2), help: "Grid lines, then the neon." },
+        seed: seedField(1),
+    },
+});

package/dist/backgrounds/effects/grid/quantumGrid.d.ts

@@ -0,0 +1,13 @@
+import type { CanvasEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const QUANTUM_GRID_META: EffectMeta;
+export interface QuantumGridOptions extends LayerOptions {
+    /** Cell size in px. */
+    readonly cell?: number;
+    readonly speed?: number;
+    /** How far a tile rises, in px. */
+    readonly lift?: number;
+    readonly colors?: readonly string[];
+    readonly seed?: number;
+}
+/** A field of tiles that rises and falls in a ripple around the cursor. */
+export declare function quantumGrid(options?: QuantumGridOptions): CanvasEffect;

package/dist/backgrounds/effects/grid/quantumGrid.js

@@ -0,0 +1,73 @@
+import { defineCanvasEffect, defineCssEffect, liteMeta } from "../define.js";
+import { aim, paint } from "../canvasKit.js";
+export const QUANTUM_GRID_META = {
+    id: "quantum-grid",
+    label: "Quantum Grid Hero",
+    category: "grid",
+    family: "canvas",
+    cost: { kb: "3–8 KB", cpu: 2, gpu: 2 },
+    tier: "mid",
+    needs: { pointer: true },
+    note: "Tech inferred; check the code.",
+};
+const QUANTUM_LITE_META = liteMeta({ ...QUANTUM_GRID_META, family: "css", needs: {} }, "A still grid of raised tiles with a soft glow, no ripple.");
+// A ripple spreads from the pointer (or a wandering point on touch screens and
+// before the pointer arrives): every tile's height is a damped sine of its
+// distance to that point. Tiles are drawn as cubes: a darker side under a top
+// face lifted by the height.
+function program(cell, speed, lift) {
+    return {
+        init(env) {
+            const cols = Math.ceil(env.width / cell) + 1;
+            const rows = Math.ceil(env.height / cell) + 2;
+            return { time: 0, cols, rows, z: new Float32Array(cols * rows) };
+        },
+        step(state, deltaMs, pointer, env) {
+            state.time += deltaMs * speed;
+            const source = aim(pointer, state.time, env);
+            const t = state.time * 0.004;
+            for (let y = 0; y < state.rows; y++) {
+                for (let x = 0; x < state.cols; x++) {
+                    const d = Math.hypot(x * cell + cell / 2 - source.x, y * cell + cell / 2 - source.y);
+                    state.z[y * state.cols + x] = Math.sin(d * 0.045 - t) * Math.exp(-d / 280);
+                }
+            }
+        },
+        draw(ctx, state, env) {
+            ctx.clearRect(0, 0, env.width, env.height);
+            const inset = Math.max(2, cell * 0.1);
+            const face = cell - inset * 2;
+            for (let y = 0; y < state.rows; y++) {
+                for (let x = 0; x < state.cols; x++) {
+                    const z = state.z[y * state.cols + x] ?? 0;
+                    const h = (z + 1) / 2; // 0 … 1
+                    const px = x * cell + inset;
+                    const py = y * cell + inset - h * lift;
+                    ctx.fillStyle = paint(env, 1, 0.25 + h * 0.35);
+                    ctx.fillRect(px, py + face, face, h * lift + 2); // side
+                    ctx.fillStyle = paint(env, 0, 0.12 + h * 0.55);
+                    ctx.fillRect(px, py, face, face); // top
+                }
+            }
+        },
+    };
+}
+const LITE_CSS = `@layer components {
+  :where([data-sx-bg="quantum-grid-lite"]) {
+    background:
+      radial-gradient(ellipse at 50% 45%, color-mix(in oklab, var(--color-sx-accent) 30%, transparent), transparent 70%),
+      linear-gradient(to bottom, transparent 0 82%, color-mix(in oklab, var(--color-sx-accent) 40%, transparent) 82%) 0 0 / var(--sx-bg-cell) var(--sx-bg-cell),
+      linear-gradient(color-mix(in oklab, var(--color-sx-accent) 22%, transparent), color-mix(in oklab, var(--color-sx-accent) 22%, transparent)) 0 0 / calc(var(--sx-bg-cell) - 6px) calc(var(--sx-bg-cell) - 6px) space;
+  }
+}`;
+/** A field of tiles that rises and falls in a ripple around the cursor. */
+export function quantumGrid(options = {}) {
+    const cell = options.cell ?? 36;
+    return defineCanvasEffect(QUANTUM_GRID_META, program(cell, options.speed ?? 1, options.lift ?? 10), options, {
+        colors: options.colors ?? [
+            "var(--color-sx-accent)",
+            "color-mix(in oklab, var(--color-sx-accent) 45%, black)",
+        ],
+        fallback: defineCssEffect(QUANTUM_LITE_META, LITE_CSS, options, { vars: { "--sx-bg-cell": `${cell}px` } }),
+    });
+}

package/dist/backgrounds/effects/grid/quantumGrid.schema.d.ts

@@ -0,0 +1 @@
+export declare const QUANTUM_GRID_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/grid/quantumGrid.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField, seedField, colorsField } from "../../../schema/common.js";
+export const QUANTUM_GRID_SCHEMA = defineSchema()({
+    id: "quantum-grid",
+    family: "background",
+    factory: "quantumGrid",
+    fields: {
+        ...layerFields(),
+        cell: { kind: "number", label: "Cell size", min: 12, max: 120, step: 1, unit: "px", default: 36 },
+        speed: speedField(),
+        lift: { kind: "number", label: "Lift", min: 0, max: 40, step: 1, unit: "px", default: 10 },
+        colors: { ...colorsField(["var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-accent) 45%, black)"], 1, 6) },
+        seed: seedField(1),
+    },
+});

package/dist/backgrounds/effects/grid/triangleGrid.d.ts

@@ -0,0 +1,15 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const TRIANGLE_GRID_META: EffectMeta;
+export interface TriangleGridOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Triangle side in px. */
+    readonly size?: number;
+    /** Line width in px. */
+    readonly line?: number;
+    /** The resting line colour. */
+    readonly color?: string;
+    /** The travelling glow. */
+    readonly glow?: string;
+}
+/** A triangle lattice whose lines light up as a glow drifts beneath them. */
+export declare function triangleGrid(options?: TriangleGridOptions): CssEffect;

package/dist/backgrounds/effects/grid/triangleGrid.js

@@ -0,0 +1,67 @@
+import { round } from "../../runtime/rng.js";
+import { defineCssEffect, duration, svgUrl } from "../define.js";
+export const TRIANGLE_GRID_META = {
+    id: "triangle-grid",
+    label: "Geometric Glowing Triangle Mask Grid",
+    category: "grid",
+    family: "css",
+    cost: { kb: "1–3 KB", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Animated masks repaint; keep the glow area small.",
+};
+/**
+ * One tile of an equilateral triangle lattice (side 100, height 173.2): two
+ * horizontals and two diagonals. Used as a mask, so its colour is irrelevant.
+ */
+function latticeTile(strokeWidth) {
+    const h = 173.205;
+    return svgUrl(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 ${h}'>` +
+        `<path d='M0 0H100M0 ${h / 2}H100M0 ${h}H100M0 0L100 ${h}M100 0L0 ${h}' stroke='black' stroke-width='${strokeWidth}' fill='none'/>` +
+        "</svg>");
+}
+// The mask (the lattice) stays still; only the glow under it moves, with
+// transform. The lines show faintly everywhere and brightly where the glow is.
+const CSS = `@layer components {
+  :where([data-sx-bg="triangle-grid"] [data-sx-bg-part="lines"]) {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    background: var(--sx-bg-color);
+    mask-image: var(--sx-bg-tile);
+    mask-size: var(--sx-bg-w) var(--sx-bg-h);
+    mask-position: center;
+  }
+  :where([data-sx-bg="triangle-grid"] [data-sx-bg-part="lines"])::before {
+    content: "";
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 50%;
+    inline-size: 60cqmax;
+    aspect-ratio: 1;
+    margin-inline-start: -30cqmax;
+    margin-block-start: -30cqmax;
+    background: radial-gradient(closest-side, var(--sx-bg-glow), transparent);
+    animation: sx-bg-tri-glow ${duration("16s")} ease-in-out infinite alternate;
+  }
+  @keyframes sx-bg-tri-glow {
+    0% { transform: translate3d(-32cqw, -22cqh, 0); }
+    35% { transform: translate3d(26cqw, -12cqh, 0); }
+    70% { transform: translate3d(-12cqw, 24cqh, 0); }
+    100% { transform: translate3d(30cqw, 18cqh, 0); }
+  }
+}`;
+/** A triangle lattice whose lines light up as a glow drifts beneath them. */
+export function triangleGrid(options = {}) {
+    const size = options.size ?? 64;
+    const line = options.line ?? 1.5;
+    return defineCssEffect(TRIANGLE_GRID_META, CSS, options, {
+        vars: {
+            "--sx-bg-tile": latticeTile(round((line * 100) / size, 2)),
+            "--sx-bg-w": `${size}px`,
+            "--sx-bg-h": `${round(size * 1.73205, 2)}px`,
+            "--sx-bg-color": options.color ?? "color-mix(in oklab, var(--color-sx-muted) 25%, transparent)",
+            "--sx-bg-glow": options.glow ?? "var(--color-sx-accent)",
+        },
+        nodes: [{ part: "lines", vars: {} }],
+    });
+}

package/dist/backgrounds/effects/grid/triangleGrid.schema.d.ts

@@ -0,0 +1 @@
+export declare const TRIANGLE_GRID_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/grid/triangleGrid.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields, speedField } from "../../../schema/common.js";
+export const TRIANGLE_GRID_SCHEMA = defineSchema()({
+    id: "triangle-grid",
+    family: "background",
+    factory: "triangleGrid",
+    fields: {
+        ...layerFields(),
+        speed: speedField(),
+        size: { kind: "number", label: "Triangle side", min: 16, max: 200, step: 1, unit: "px", default: 64 },
+        line: { kind: "number", label: "Line width", min: 0.5, max: 6, step: 0.5, unit: "px", default: 1.5 },
+        color: { kind: "color", label: "Lines", default: "color-mix(in oklab, var(--color-sx-muted) 25%, transparent)" },
+        glow: { kind: "color", label: "Travelling glow", default: "var(--color-sx-accent)" },
+    },
+});

package/dist/backgrounds/effects/media/image.schema.d.ts

@@ -0,0 +1 @@
+export declare const IMAGE_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/media/image.schema.js

@@ -0,0 +1,17 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const IMAGE_SCHEMA = defineSchema()({
+    id: "image",
+    family: "background",
+    factory: "image",
+    fields: {
+        ...layerFields(),
+        src: { kind: "text", label: "Image", url: true, required: true },
+        srcSet: { kind: "text", label: "srcset", autoNote: "none", advanced: true },
+        sizes: { kind: "text", label: "sizes", autoNote: "none", advanced: true },
+        fit: { kind: "choice", label: "Fit", values: ["cover", "contain", "tile"], default: "cover" },
+        tileSize: { kind: "text", label: "Tile size", placeholder: "200px", autoNote: "the image's own size", help: "With fit: tile." },
+        position: { kind: "text", label: "Position", placeholder: "center", autoNote: "center", advanced: true },
+        loading: { kind: "choice", label: "Loading", values: ["lazy", "eager"], default: "lazy", help: "eager for a background visible on load." },
+    },
+});

package/dist/backgrounds/effects/media/media.d.ts

@@ -0,0 +1,30 @@
+import type { EffectMeta, LayerOptions, MediaEffect } from "../../types.js";
+export declare const IMAGE_META: EffectMeta;
+export declare const VIDEO_META: EffectMeta;
+export interface ImageOptions extends LayerOptions {
+    readonly src: string;
+    readonly srcSet?: string;
+    readonly sizes?: string;
+    /** `tile` repeats the image at `tileSize`. Default `cover`. */
+    readonly fit?: "cover" | "contain" | "tile";
+    readonly tileSize?: string;
+    readonly position?: string;
+    /** `eager` for a background that is visible on load (above the fold). */
+    readonly loading?: "lazy" | "eager";
+}
+/** Your own image as a layer: a texture, a paper edge, a dust overlay. Decorative (empty alt). */
+export declare function image(options: ImageOptions): MediaEffect;
+export interface VideoOptions extends LayerOptions {
+    /** One URL, or several `{ src, type }` sources (e.g. WebM then MP4). */
+    readonly src: string | readonly {
+        readonly src: string;
+        readonly type?: string;
+    }[];
+    /** Strongly recommended: shown before the first frame and under reduced motion. */
+    readonly poster?: string;
+    readonly fit?: "cover" | "contain";
+    readonly position?: string;
+    readonly playbackRate?: number;
+}
+/** Your own muted, looping video. Pauses off screen; shows the poster under reduced motion. */
+export declare function video(options: VideoOptions): MediaEffect;

package/dist/backgrounds/effects/media/media.js

@@ -0,0 +1,53 @@
+import { layerVars } from "../define.js";
+export const IMAGE_META = {
+    id: "image",
+    label: "Image layer (ripped paper, dust, any texture)",
+    category: "media",
+    family: "media",
+    cost: { kb: "your file (export as WebP or AVIF)", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Static. Cost is only download size. Full-screen blend modes cost a little GPU on every repaint.",
+};
+export const VIDEO_META = {
+    id: "video",
+    label: "Video background",
+    category: "media",
+    family: "media",
+    cost: { kb: "your file (1–8 MB typical)", cpu: 1, gpu: 1 },
+    tier: "all",
+    note: "Decoded by dedicated video hardware, so cheap to play but expensive to download.",
+};
+/** Your own image as a layer: a texture, a paper edge, a dust overlay. Decorative (empty alt). */
+export function image(options) {
+    return {
+        kind: "media",
+        meta: IMAGE_META,
+        media: {
+            type: "image",
+            src: options.src,
+            fit: options.fit ?? "cover",
+            loading: options.loading ?? "lazy",
+            ...(options.srcSet !== undefined ? { srcSet: options.srcSet } : {}),
+            ...(options.sizes !== undefined ? { sizes: options.sizes } : {}),
+            ...(options.tileSize !== undefined ? { tileSize: options.tileSize } : {}),
+            ...(options.position !== undefined ? { position: options.position } : {}),
+        },
+        vars: layerVars(options),
+    };
+}
+/** Your own muted, looping video. Pauses off screen; shows the poster under reduced motion. */
+export function video(options) {
+    return {
+        kind: "media",
+        meta: VIDEO_META,
+        media: {
+            type: "video",
+            sources: typeof options.src === "string" ? [{ src: options.src }] : options.src,
+            fit: options.fit ?? "cover",
+            playbackRate: options.playbackRate ?? 1,
+            ...(options.poster !== undefined ? { poster: options.poster } : {}),
+            ...(options.position !== undefined ? { position: options.position } : {}),
+        },
+        vars: layerVars(options),
+    };
+}

package/dist/backgrounds/effects/media/video.schema.d.ts

@@ -0,0 +1 @@
+export declare const VIDEO_SCHEMA: import("../../../schema/types.js").Schema;

package/dist/backgrounds/effects/media/video.schema.js

@@ -0,0 +1,15 @@
+import { defineSchema } from "../../../schema/define.js";
+import { layerFields } from "../../../schema/common.js";
+export const VIDEO_SCHEMA = defineSchema()({
+    id: "video",
+    family: "background",
+    factory: "video",
+    fields: {
+        ...layerFields(),
+        src: { kind: "text", label: "Video", url: true, required: true },
+        poster: { kind: "text", label: "Poster", url: true, autoNote: "none (strongly recommended)" },
+        fit: { kind: "choice", label: "Fit", values: ["cover", "contain"], default: "cover" },
+        position: { kind: "text", label: "Position", placeholder: "center", autoNote: "center", advanced: true },
+        playbackRate: { kind: "number", label: "Playback rate", min: 0.25, max: 4, step: 0.05, default: 1 },
+    },
+});

package/dist/backgrounds/effects/palette.d.ts

@@ -0,0 +1,10 @@
+import type { CssVars } from "../types.js";
+/** Default palette: the theme's accent, then mixes toward primary and surface. */
+export declare const SX_PALETTE: readonly [string, ...string[]];
+/** At most 6 colours; an empty list falls back to the default palette. */
+export declare function paletteVars(colors: readonly string[] | undefined): {
+    vars: CssVars;
+    count: number;
+};
+/** The `var()` for colour number `i` (wraps around the palette). */
+export declare function paletteRef(i: number, count: number): string;

package/dist/backgrounds/effects/palette.js

@@ -0,0 +1,21 @@
+// A small colour list for effects made of many coloured elements. The colours
+// go on the layer as --sx-bg-c1 … --sx-bg-cN; each element points at one.
+/** Default palette: the theme's accent, then mixes toward primary and surface. */
+export const SX_PALETTE = [
+    "var(--color-sx-accent)",
+    "color-mix(in oklab, var(--color-sx-accent) 55%, var(--color-sx-primary))",
+    "color-mix(in oklab, var(--color-sx-accent) 60%, var(--color-sx-secondary))",
+];
+/** At most 6 colours; an empty list falls back to the default palette. */
+export function paletteVars(colors) {
+    const list = colors && colors.length > 0 ? colors.slice(0, 6) : SX_PALETTE;
+    const vars = {};
+    list.forEach((c, i) => {
+        vars[`--sx-bg-c${i + 1}`] = c;
+    });
+    return { vars, count: list.length };
+}
+/** The `var()` for colour number `i` (wraps around the palette). */
+export function paletteRef(i, count) {
+    return `var(--sx-bg-c${(i % count) + 1})`;
+}

package/dist/backgrounds/effects/particle/bokeh.d.ts

@@ -0,0 +1,13 @@
+import type { CssEffect, EffectMeta, LayerOptions } from "../../types.js";
+export declare const BOKEH_META: EffectMeta;
+export interface BokehOptions extends LayerOptions {
+    readonly speed?: number;
+    /** Number of lights (1–40). */
+    readonly count?: number;
+    readonly colors?: readonly string[];
+    /** Light size range, in % of the layer's longer side. */
+    readonly size?: readonly [min: number, max: number];
+    readonly seed?: number;
+}
+/** Out-of-focus lights drifting and breathing. */
+export declare function bokeh(options?: BokehOptions): CssEffect;

package/dist/backgrounds/effects/particle/bokeh.js

@@ -0,0 +1,58 @@
+import { between, rng, round } from "../../runtime/rng.js";
+import { defineCssEffect, duration } from "../define.js";
+import { paletteRef, paletteVars } from "../palette.js";
+export const BOKEH_META = {
+    id: "bokeh",
+    label: "Bokeh lights",
+    category: "particle",
+    family: "css",
+    cost: { kb: "<2 KB", cpu: 1, gpu: 2 },
+    tier: "all",
+    note: "Pre-blur with radial-gradient instead of filter: blur().",
+};
+const CSS = `@layer components {
+  :where([data-sx-bg="bokeh"] [data-sx-bg-part="light"]) {
+    position: absolute;
+    inset-inline-start: var(--x);
+    inset-block-start: var(--y);
+    inline-size: var(--s);
+    aspect-ratio: 1;
+    translate: -50% -50%;
+    border-radius: 50%;
+    background: radial-gradient(circle closest-side, var(--c) var(--core), transparent);
+    opacity: var(--o);
+    animation: sx-bg-bokeh ${duration("var(--d)")} ease-in-out var(--delay) infinite alternate;
+  }
+  @keyframes sx-bg-bokeh {
+    50% { opacity: calc(var(--o) * 0.45); }
+    to { transform: translate3d(var(--dx), var(--dy), 0); opacity: var(--o); }
+  }
+}`;
+/** Out-of-focus lights drifting and breathing. */
+export function bokeh(options = {}) {
+    const palette = paletteVars(options.colors);
+    const r = rng(options.seed ?? 11);
+    const count = Math.min(40, Math.max(1, Math.round(options.count ?? 16)));
+    const [minSize, maxSize] = options.size ?? [3, 12];
+    const nodes = [];
+    for (let i = 0; i < count; i++) {
+        const d = round(between(r, 10, 24), 1);
+        nodes.push({
+            part: "light",
+            vars: {
+                "--x": `${round(between(r, 0, 100), 1)}%`,
+                "--y": `${round(between(r, 0, 100), 1)}%`,
+                "--s": `${round(between(r, minSize, maxSize), 1)}cqmax`,
+                "--o": round(between(r, 0.18, 0.5)),
+                // 0% = all edge, 60% = a crisp disc with a soft rim
+                "--core": `${round(between(r, 0, 60), 0)}%`,
+                "--c": paletteRef(i, palette.count),
+                "--dx": `${round(between(r, -6, 6), 1)}cqmax`,
+                "--dy": `${round(between(r, -14, -4), 1)}cqmax`,
+                "--d": `${d}s`,
+                "--delay": `${-round(between(r, 0, d), 1)}s`,
+            },
+        });
+    }
+    return defineCssEffect(BOKEH_META, CSS, options, { vars: palette.vars, nodes });
+}

package/dist/backgrounds/effects/particle/bokeh.schema.d.ts

@@ -0,0 +1 @@
+export declare const BOKEH_SCHEMA: import("../../../schema/types.js").Schema;