@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/schema/text.js

@@ -0,0 +1,150 @@
+// The text effects' option schemas, keyed by id, in the order of TEXT_EFFECTS. Imports only the schema files and
+// the registry, which import only types: this entry carries no effect code. Each schema gets its registry metadata here.
+import { TEXT_EFFECTS } from "../text/registry.js";
+import { ENTER_RISE_SCHEMA } from "../text/effects/enter/enterRise.schema.js";
+import { ENTER_WORDS_SCHEMA } from "../text/effects/enter/enterWords.schema.js";
+import { ENTER_MASK_SCHEMA } from "../text/effects/enter/enterMask.schema.js";
+import { ENTER_BLUR_SCHEMA } from "../text/effects/enter/enterBlur.schema.js";
+import { ENTER_BOUNCE_SCHEMA } from "../text/effects/enter/enterBounce.schema.js";
+import { ENTER_FLIP_SCHEMA } from "../text/effects/enter/enterFlip.schema.js";
+import { ENTER_POP_SCHEMA } from "../text/effects/enter/enterPop.schema.js";
+import { ENTER_RANDOM_SCHEMA } from "../text/effects/enter/enterRandom.schema.js";
+import { ENTER_BOX_SCHEMA } from "../text/effects/enter/enterBox.schema.js";
+import { ENTER_TRACKING_SCHEMA } from "../text/effects/enter/enterTracking.schema.js";
+import { ENTER_ASSEMBLE_SCHEMA } from "../text/effects/enter/enterAssemble.schema.js";
+import { ENTER_STAMP_SCHEMA } from "../text/effects/enter/enterStamp.schema.js";
+import { ENTER_REDACT_SCHEMA } from "../text/effects/enter/enterRedact.schema.js";
+import { ENTER_SKELETON_SCHEMA } from "../text/effects/enter/enterSkeleton.schema.js";
+import { INK_SHINY_SCHEMA } from "../text/effects/ink/inkShiny.schema.js";
+import { INK_GRADIENT_SCHEMA } from "../text/effects/ink/inkGradient.schema.js";
+import { INK_AURORA_SCHEMA } from "../text/effects/ink/inkAurora.schema.js";
+import { INK_VIDEO_SCHEMA } from "../text/effects/ink/inkVideo.schema.js";
+import { INK_IMAGE_SCHEMA } from "../text/effects/ink/inkImage.schema.js";
+import { INK_SPARKLES_SCHEMA } from "../text/effects/ink/inkSparkles.schema.js";
+import { INK_LINE_SHADOW_SCHEMA } from "../text/effects/ink/inkLineShadow.schema.js";
+import { INK_NEON_SCHEMA } from "../text/effects/ink/inkNeon.schema.js";
+import { INK_COLOURFUL_SCHEMA } from "../text/effects/ink/inkColourful.schema.js";
+import { INK_LINES_SCHEMA } from "../text/effects/ink/inkLines.schema.js";
+import { INK_GRAIN_SCHEMA } from "../text/effects/ink/inkGrain.schema.js";
+import { INK_SWEEP_SCHEMA } from "../text/effects/ink/inkSweep.schema.js";
+import { INK_FOIL_SCHEMA } from "../text/effects/ink/inkFoil.schema.js";
+import { INK_PROGRESS_SCHEMA } from "../text/effects/ink/inkProgress.schema.js";
+import { INK_DOTS_SCHEMA } from "../text/effects/ink/inkDots.schema.js";
+import { STROKE_FILL_SCHEMA } from "../text/effects/stroke/strokeFill.schema.js";
+import { STROKE_HANDWRITE_SCHEMA } from "../text/effects/stroke/strokeHandwrite.schema.js";
+import { STROKE_DRAW_SCHEMA } from "../text/effects/stroke/strokeDraw.schema.js";
+import { STROKE_GRADIENT_SCHEMA } from "../text/effects/stroke/strokeGradient.schema.js";
+import { STROKE_COMIC_SCHEMA } from "../text/effects/stroke/strokeComic.schema.js";
+import { STROKE_UNDERLINE_SCHEMA } from "../text/effects/stroke/strokeUnderline.schema.js";
+import { STROKE_NOTE_SCHEMA } from "../text/effects/stroke/strokeNote.schema.js";
+import { DECODE_HOVER_SCHEMA } from "../text/effects/decode/decodeHover.schema.js";
+import { DECODE_REVEAL_SCHEMA } from "../text/effects/decode/decodeReveal.schema.js";
+import { DECODE_BINARY_SCHEMA } from "../text/effects/decode/decodeBinary.schema.js";
+import { SCRUB_HIGHLIGHT_SCHEMA } from "../text/effects/scrub/scrubHighlight.schema.js";
+import { SCRUB_PARALLAX_SCHEMA } from "../text/effects/scrub/scrubParallax.schema.js";
+import { SCRUB_PIN_SCHEMA } from "../text/effects/scrub/scrubPin.schema.js";
+import { SCRUB_MARKER_SCHEMA } from "../text/effects/scrub/scrubMarker.schema.js";
+import { SCRUB_FLOAT_SCHEMA } from "../text/effects/scrub/scrubFloat.schema.js";
+import { SCRUB_SKEW_SCHEMA } from "../text/effects/scrub/scrubSkew.schema.js";
+import { SCRUB_CYLINDER_SCHEMA } from "../text/effects/scrub/scrubCylinder.schema.js";
+import { POINTER_PROXIMITY_SCHEMA } from "../text/effects/pointer/pointerProximity.schema.js";
+import { POINTER_PRESSURE_SCHEMA } from "../text/effects/pointer/pointerPressure.schema.js";
+import { POINTER_JELLO_SCHEMA } from "../text/effects/pointer/pointerJello.schema.js";
+import { POINTER_WAVE_SCHEMA } from "../text/effects/pointer/pointerWave.schema.js";
+import { POINTER_SPOTLIGHT_SCHEMA } from "../text/effects/pointer/pointerSpotlight.schema.js";
+import { POINTER_SHADOW_SCHEMA } from "../text/effects/pointer/pointerShadow.schema.js";
+import { POINTER_TRAIL_SCHEMA } from "../text/effects/pointer/pointerTrail.schema.js";
+import { POINTER_RIPPLE_SCHEMA } from "../text/effects/pointer/pointerRipple.schema.js";
+import { POINTER_TILT_SCHEMA } from "../text/effects/pointer/pointerTilt.schema.js";
+import { POINTER_ROLL_SCHEMA } from "../text/effects/pointer/pointerRoll.schema.js";
+import { WARP_GLITCH_SCHEMA } from "../text/effects/warp/warpGlitch.schema.js";
+import { WARP_SQUIGGLE_SCHEMA } from "../text/effects/warp/warpSquiggle.schema.js";
+import { WARP_WAVE_SCHEMA } from "../text/effects/warp/warpWave.schema.js";
+import { WARP_GOO_SCHEMA } from "../text/effects/warp/warpGoo.schema.js";
+import { WARP_RGB_SCHEMA } from "../text/effects/warp/warpRgb.schema.js";
+import { WARP_SHADER_SCHEMA } from "../text/effects/warp/warpShader.schema.js";
+import { WARP_FUZZ_SCHEMA } from "../text/effects/warp/warpFuzz.schema.js";
+import { WARP_ASCII_SCHEMA } from "../text/effects/warp/warpAscii.schema.js";
+import { SOLID_SHADOW_SCHEMA } from "../text/effects/solid/solidShadow.schema.js";
+import { SOLID_LAYERS_SCHEMA } from "../text/effects/solid/solidLayers.schema.js";
+import { SOLID_PARTICLES_SCHEMA } from "../text/effects/solid/solidParticles.schema.js";
+import { SOLID_ECHO_SCHEMA } from "../text/effects/solid/solidEcho.schema.js";
+import { SOLID_FALL_SCHEMA } from "../text/effects/solid/solidFall.schema.js";
+const BY_ID = {
+    enterRise: ENTER_RISE_SCHEMA,
+    enterWords: ENTER_WORDS_SCHEMA,
+    enterMask: ENTER_MASK_SCHEMA,
+    enterBlur: ENTER_BLUR_SCHEMA,
+    enterBounce: ENTER_BOUNCE_SCHEMA,
+    enterFlip: ENTER_FLIP_SCHEMA,
+    enterPop: ENTER_POP_SCHEMA,
+    enterRandom: ENTER_RANDOM_SCHEMA,
+    enterBox: ENTER_BOX_SCHEMA,
+    enterTracking: ENTER_TRACKING_SCHEMA,
+    enterAssemble: ENTER_ASSEMBLE_SCHEMA,
+    enterStamp: ENTER_STAMP_SCHEMA,
+    enterRedact: ENTER_REDACT_SCHEMA,
+    enterSkeleton: ENTER_SKELETON_SCHEMA,
+    decodeHover: DECODE_HOVER_SCHEMA,
+    decodeReveal: DECODE_REVEAL_SCHEMA,
+    decodeBinary: DECODE_BINARY_SCHEMA,
+    scrubHighlight: SCRUB_HIGHLIGHT_SCHEMA,
+    scrubParallax: SCRUB_PARALLAX_SCHEMA,
+    scrubPin: SCRUB_PIN_SCHEMA,
+    scrubMarker: SCRUB_MARKER_SCHEMA,
+    scrubFloat: SCRUB_FLOAT_SCHEMA,
+    scrubSkew: SCRUB_SKEW_SCHEMA,
+    scrubCylinder: SCRUB_CYLINDER_SCHEMA,
+    inkShiny: INK_SHINY_SCHEMA,
+    inkGradient: INK_GRADIENT_SCHEMA,
+    inkAurora: INK_AURORA_SCHEMA,
+    inkVideo: INK_VIDEO_SCHEMA,
+    inkImage: INK_IMAGE_SCHEMA,
+    inkSparkles: INK_SPARKLES_SCHEMA,
+    inkLineShadow: INK_LINE_SHADOW_SCHEMA,
+    inkNeon: INK_NEON_SCHEMA,
+    inkColourful: INK_COLOURFUL_SCHEMA,
+    inkLines: INK_LINES_SCHEMA,
+    inkGrain: INK_GRAIN_SCHEMA,
+    inkSweep: INK_SWEEP_SCHEMA,
+    inkFoil: INK_FOIL_SCHEMA,
+    inkProgress: INK_PROGRESS_SCHEMA,
+    inkDots: INK_DOTS_SCHEMA,
+    strokeFill: STROKE_FILL_SCHEMA,
+    strokeHandwrite: STROKE_HANDWRITE_SCHEMA,
+    strokeDraw: STROKE_DRAW_SCHEMA,
+    strokeGradient: STROKE_GRADIENT_SCHEMA,
+    strokeComic: STROKE_COMIC_SCHEMA,
+    strokeUnderline: STROKE_UNDERLINE_SCHEMA,
+    strokeNote: STROKE_NOTE_SCHEMA,
+    pointerProximity: POINTER_PROXIMITY_SCHEMA,
+    pointerPressure: POINTER_PRESSURE_SCHEMA,
+    pointerJello: POINTER_JELLO_SCHEMA,
+    pointerWave: POINTER_WAVE_SCHEMA,
+    pointerSpotlight: POINTER_SPOTLIGHT_SCHEMA,
+    pointerShadow: POINTER_SHADOW_SCHEMA,
+    pointerTrail: POINTER_TRAIL_SCHEMA,
+    pointerRipple: POINTER_RIPPLE_SCHEMA,
+    pointerTilt: POINTER_TILT_SCHEMA,
+    pointerRoll: POINTER_ROLL_SCHEMA,
+    warpGlitch: WARP_GLITCH_SCHEMA,
+    warpSquiggle: WARP_SQUIGGLE_SCHEMA,
+    warpWave: WARP_WAVE_SCHEMA,
+    warpGoo: WARP_GOO_SCHEMA,
+    warpRgb: WARP_RGB_SCHEMA,
+    warpShader: WARP_SHADER_SCHEMA,
+    warpFuzz: WARP_FUZZ_SCHEMA,
+    warpAscii: WARP_ASCII_SCHEMA,
+    solidShadow: SOLID_SHADOW_SCHEMA,
+    solidLayers: SOLID_LAYERS_SCHEMA,
+    solidParticles: SOLID_PARTICLES_SCHEMA,
+    solidEcho: SOLID_ECHO_SCHEMA,
+    solidFall: SOLID_FALL_SCHEMA,
+};
+/** Every text effect's schema, with its registry metadata, in registry order. Throws if one is missing (caught by the tests). */
+export const TEXT_SCHEMAS = Object.fromEntries(TEXT_EFFECTS.map((m) => {
+    const schema = BY_ID[m.id];
+    if (!schema)
+        throw new Error(`[@sharedex/ui] no schema for text effect "${m.id}"`);
+    return [m.id, { ...schema, meta: { label: m.label, category: m.group, family: m.tech, tier: m.tier } }];
+}));

package/dist/schema/textParts.d.ts

@@ -0,0 +1,4 @@
+import type { Schema } from "./types.js";
+export declare const WORD_CYCLE_SCHEMAS: Readonly<Record<string, Schema>>;
+export declare const NUMBER_ROLL_SCHEMAS: Readonly<Record<string, Schema>>;
+export declare const TYPEWRITER_SCHEMAS: Readonly<Record<string, Schema>>;

package/dist/schema/textParts.js

@@ -0,0 +1,8 @@
+// The text components a section can carry: the Hero's cycling word (WordCycle), About's rolling figures
+// (NumberRoll), and the Typewriter, their props as forms. Imports only the schema files.
+import { WORD_CYCLE_SCHEMA } from "../text/cycle/WordCycle.schema.js";
+import { NUMBER_ROLL_SCHEMA } from "../text/number/NumberRoll.schema.js";
+import { TYPEWRITER_SCHEMA } from "../text/type/Typewriter.schema.js";
+export const WORD_CYCLE_SCHEMAS = { wordCycle: { ...WORD_CYCLE_SCHEMA, meta: { label: "Cycling word" } } };
+export const NUMBER_ROLL_SCHEMAS = { numberRoll: { ...NUMBER_ROLL_SCHEMA, meta: { label: "Rolling number" } } };
+export const TYPEWRITER_SCHEMAS = { typewriter: { ...TYPEWRITER_SCHEMA, meta: { label: "Typewriter" } } };

package/dist/schema/ticker.d.ts

@@ -0,0 +1,3 @@
+import type { Schema } from "./types.js";
+export declare const TICKER_SCHEMAS: Readonly<Record<string, Schema>>;
+export type { TickerDrive, TickerSettings } from "../ticker/Ticker.schema.js";

package/dist/schema/ticker.js

@@ -0,0 +1,3 @@
+// The Ticker's option schema: its props as one form (`TickerSettings`). Imports only the schema file.
+import { TICKER_SCHEMA } from "../ticker/Ticker.schema.js";
+export const TICKER_SCHEMAS = { ticker: { ...TICKER_SCHEMA, meta: { label: "Ticker" } } };

package/dist/schema/transitions.d.ts

@@ -0,0 +1,5 @@
+import type { Schema } from "./types.js";
+/** Every transition's schema, with its registry metadata, in registry order. Throws if one is missing (caught by the tests). */
+export declare const TRANSITION_SCHEMAS: Readonly<Record<string, Schema>>;
+/** `Reveal`'s props: the section reveal (its `effect` is a transition that plays as a reveal). */
+export declare const REVEAL_SCHEMAS: Readonly<Record<string, Schema>>;

package/dist/schema/transitions.js

@@ -0,0 +1,96 @@
+// The transitions' option schemas, keyed by id, in the order of TRANSITION_EFFECTS, plus the section reveal
+// (`Reveal`'s props). Imports only the schema files and the registry, which import only types: this entry
+// carries no effect code. Each schema gets its registry metadata here (label, group, kind, tier, modes).
+import { TRANSITION_EFFECTS } from "../transitions/registry.js";
+import { REVEAL_SCHEMA } from "../transitions/reveal/Reveal.schema.js";
+import { FADE_SCHEMA } from "../transitions/effects/stage/fade.schema.js";
+import { CUBE_SCHEMA } from "../transitions/effects/stage/cube.schema.js";
+import { FLIP_SCHEMA } from "../transitions/effects/stage/flip.schema.js";
+import { CARDS_SCHEMA } from "../transitions/effects/stage/cards.schema.js";
+import { CREATIVE_SCHEMA } from "../transitions/effects/stage/creative.schema.js";
+import { PUSH_SCHEMA } from "../transitions/effects/stage/push.schema.js";
+import { CARD_STACK_SCHEMA } from "../transitions/effects/stage/cardStack.schema.js";
+import { TINDER_SCHEMA } from "../transitions/effects/stage/tinder.schema.js";
+import { WIPE_SCHEMA } from "../transitions/effects/css/wipe.schema.js";
+import { IRIS_SCHEMA } from "../transitions/effects/css/iris.schema.js";
+import { DIAGONAL_SCHEMA } from "../transitions/effects/css/diagonal.schema.js";
+import { SPLIT_CURTAIN_SCHEMA } from "../transitions/effects/css/splitCurtain.schema.js";
+import { COLOR_BLOCK_SCHEMA } from "../transitions/effects/css/colorBlock.schema.js";
+import { GRADIENT_MASK_SCHEMA } from "../transitions/effects/css/gradientMask.schema.js";
+import { BLUR_SHARP_SCHEMA } from "../transitions/effects/css/blurSharp.schema.js";
+import { PIXEL_GRID_SCHEMA } from "../transitions/effects/css/pixelGrid.schema.js";
+import { SHUTTERS_SCHEMA } from "../transitions/effects/css/shutters.schema.js";
+import { SLICER_SCHEMA } from "../transitions/effects/css/slicer.schema.js";
+import { FADE_UP_SCHEMA } from "../transitions/effects/css/fadeUp.schema.js";
+import { BLUR_FADE_SCHEMA } from "../transitions/effects/css/blurFade.schema.js";
+import { ZOOM_OUT_SCHEMA } from "../transitions/effects/css/zoomOut.schema.js";
+import { BLINDS_SCHEMA } from "../transitions/effects/css/blinds.schema.js";
+import { RANDOM_GRID_SCHEMA } from "../transitions/effects/css/randomGrid.schema.js";
+import { COLUMN_WAVE_SCHEMA } from "../transitions/effects/css/columnWave.schema.js";
+import { INK_SCHEMA } from "../transitions/effects/css/ink.schema.js";
+import { GOOEY_SCHEMA } from "../transitions/effects/css/gooey.schema.js";
+import { DISPLACEMENT_SCHEMA } from "../transitions/effects/shader/displacement.schema.js";
+import { STRETCH_WARP_SCHEMA } from "../transitions/effects/shader/stretchWarp.schema.js";
+import { RIPPLE_SCHEMA } from "../transitions/effects/shader/ripple.schema.js";
+import { CHROMATIC_SHIFT_SCHEMA } from "../transitions/effects/shader/chromaticShift.schema.js";
+import { LIQUID_MORPH_SCHEMA } from "../transitions/effects/shader/liquidMorph.schema.js";
+import { PIXEL_DISSOLVE_SCHEMA } from "../transitions/effects/shader/pixelDissolve.schema.js";
+import { NOISE_BURN_SCHEMA } from "../transitions/effects/shader/noiseBurn.schema.js";
+import { CROSS_ZOOM_SCHEMA } from "../transitions/effects/shader/crossZoom.schema.js";
+import { SWIRL_SCHEMA } from "../transitions/effects/shader/swirl.schema.js";
+import { DREAMY_SCHEMA } from "../transitions/effects/shader/dreamy.schema.js";
+import { DIRECTIONAL_WARP_SCHEMA } from "../transitions/effects/shader/directionalWarp.schema.js";
+import { MORPH_SCHEMA } from "../transitions/effects/shader/morph.schema.js";
+import { GRID_FLIP_SCHEMA } from "../transitions/effects/shader/gridFlip.schema.js";
+import { PAGE_CURL_SCHEMA } from "../transitions/effects/shader/pageCurl.schema.js";
+const BY_ID = {
+    fade: FADE_SCHEMA,
+    cube: CUBE_SCHEMA,
+    flip: FLIP_SCHEMA,
+    cards: CARDS_SCHEMA,
+    creative: CREATIVE_SCHEMA,
+    push: PUSH_SCHEMA,
+    cardStack: CARD_STACK_SCHEMA,
+    tinder: TINDER_SCHEMA,
+    wipe: WIPE_SCHEMA,
+    iris: IRIS_SCHEMA,
+    diagonal: DIAGONAL_SCHEMA,
+    splitCurtain: SPLIT_CURTAIN_SCHEMA,
+    colorBlock: COLOR_BLOCK_SCHEMA,
+    gradientMask: GRADIENT_MASK_SCHEMA,
+    blurSharp: BLUR_SHARP_SCHEMA,
+    pixelGrid: PIXEL_GRID_SCHEMA,
+    shutters: SHUTTERS_SCHEMA,
+    slicer: SLICER_SCHEMA,
+    fadeUp: FADE_UP_SCHEMA,
+    blurFade: BLUR_FADE_SCHEMA,
+    zoomOut: ZOOM_OUT_SCHEMA,
+    blinds: BLINDS_SCHEMA,
+    randomGrid: RANDOM_GRID_SCHEMA,
+    columnWave: COLUMN_WAVE_SCHEMA,
+    ink: INK_SCHEMA,
+    gooey: GOOEY_SCHEMA,
+    displacement: DISPLACEMENT_SCHEMA,
+    stretchWarp: STRETCH_WARP_SCHEMA,
+    ripple: RIPPLE_SCHEMA,
+    chromaticShift: CHROMATIC_SHIFT_SCHEMA,
+    liquidMorph: LIQUID_MORPH_SCHEMA,
+    pixelDissolve: PIXEL_DISSOLVE_SCHEMA,
+    noiseBurn: NOISE_BURN_SCHEMA,
+    crossZoom: CROSS_ZOOM_SCHEMA,
+    swirl: SWIRL_SCHEMA,
+    dreamy: DREAMY_SCHEMA,
+    directionalWarp: DIRECTIONAL_WARP_SCHEMA,
+    morph: MORPH_SCHEMA,
+    gridFlip: GRID_FLIP_SCHEMA,
+    pageCurl: PAGE_CURL_SCHEMA,
+};
+/** Every transition's schema, with its registry metadata, in registry order. Throws if one is missing (caught by the tests). */
+export const TRANSITION_SCHEMAS = Object.fromEntries(TRANSITION_EFFECTS.map((m) => {
+    const schema = BY_ID[m.id];
+    if (!schema)
+        throw new Error(`[@sharedex/ui] no schema for transition "${m.id}"`);
+    return [m.id, { ...schema, meta: { label: m.label, category: m.group, family: m.kind, tier: m.tier, modes: m.modes } }];
+}));
+/** `Reveal`'s props: the section reveal (its `effect` is a transition that plays as a reveal). */
+export const REVEAL_SCHEMAS = { reveal: { ...REVEAL_SCHEMA, meta: { label: "Reveal" } } };

package/dist/schema/types.d.ts

@@ -0,0 +1,182 @@
+/**
+ * What every field shares.
+ *
+ * `default` is a value that, written explicitly, gives exactly what leaving
+ * the option out gives (tested): the form shows it, and a config never stores
+ * it. Without `default` the option is **auto**: the piece decides when it is
+ * left out (a count that depends on the screen, a seed whose absence means
+ * something else), the form shows `auto` (and `autoNote`), and only a change
+ * is stored.
+ */
+interface FieldBase<V> {
+    readonly label: string;
+    /** One line under the control. */
+    readonly help?: string;
+    /** Folded away under "Advanced" in the form. */
+    readonly advanced?: boolean;
+    readonly default?: V;
+    /** Shown while an auto option is unset: what the piece does then (`"90, at most 150 on touch screens"`). */
+    readonly autoNote?: string;
+    /** Where the control sits while an auto option is unset (a slider needs a position). */
+    readonly autoValue?: V;
+    /** The piece can't be made without it (an image's `src`). It has no default. */
+    readonly required?: boolean;
+}
+export interface NumberField extends FieldBase<number> {
+    readonly kind: "number";
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    /** `px`, `s`, `°`, `%` … shown after the number. */
+    readonly unit?: string;
+}
+export interface IntegerField extends FieldBase<number> {
+    readonly kind: "integer";
+    readonly min: number;
+    readonly max: number;
+    readonly unit?: string;
+}
+/** A random seed: an integer the form can shuffle. */
+export interface SeedField extends FieldBase<number> {
+    readonly kind: "seed";
+}
+export interface BooleanField extends FieldBase<boolean> {
+    readonly kind: "boolean";
+}
+/** One of a few values: words (`"x" | "y"`), or numbers where a number union is the option's type (`1 | -1`). */
+export interface ChoiceField<V extends string | number = string> extends FieldBase<V> {
+    readonly kind: "choice";
+    readonly values: readonly V[];
+    /** Display names, keyed by the value as text; the value itself is shown when missing. */
+    readonly labels?: Readonly<Record<string, string>>;
+}
+/** One CSS colour: a theme token (`var(--color-sx-accent)`), `color-mix(…)`, or any CSS colour. */
+export interface ColorField extends FieldBase<string> {
+    readonly kind: "color";
+}
+/** A list of CSS colours. */
+export interface ColorsField extends FieldBase<readonly string[]> {
+    readonly kind: "colors";
+    readonly min: number;
+    readonly max: number;
+}
+/** A list of texts or addresses (an image sequence's frames). */
+export interface TextsField extends FieldBase<readonly string[]> {
+    readonly kind: "texts";
+    readonly min: number;
+    readonly max: number;
+    readonly url?: boolean;
+}
+/** A `[min, max]` pair. */
+export interface RangeField extends FieldBase<readonly [number, number]> {
+    readonly kind: "range";
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly unit?: string;
+}
+export interface TextField extends FieldBase<string> {
+    readonly kind: "text";
+    /** An address (an image, a video): the form checks it looks like one. */
+    readonly url?: boolean;
+    readonly placeholder?: string;
+}
+/**
+ * A spot in a box: one of `keywords` (`"pointer"`, `"center"`), or `[x, y]`
+ * as fractions of the box (`[0, 0]` = top start corner).
+ */
+export interface PointField extends FieldBase<string | readonly [number, number]> {
+    readonly kind: "point";
+    readonly keywords: readonly string[];
+    readonly labels?: Readonly<Record<string, string>>;
+}
+/**
+ * A fixed-length list of numbers (`[x, y, z]`), one control per entry. With
+ * `percent`, an entry may also be a percentage string (`"-20%"`).
+ */
+export interface VectorField extends FieldBase<readonly (number | string)[]> {
+    readonly kind: "vector";
+    /** One per entry: `["x", "y", "z"]`. */
+    readonly labels: readonly string[];
+    readonly min: number;
+    readonly max: number;
+    readonly step: number;
+    readonly unit?: string;
+    readonly percent?: boolean;
+}
+/**
+ * Another configurable piece, chosen by id from a family and configured with
+ * its own schema (a shader's CSS `fallback`, a section reveal's `effect`).
+ * Stored as `{ id, options }`; an export writes it as a call (`wipe({ … })`).
+ */
+export interface EffectField extends FieldBase<EffectValue> {
+    readonly kind: "effect";
+    readonly family: SchemaFamily;
+    /** Only pieces whose `meta.modes` include this one (`"reveal"`, `"carousel"`). */
+    readonly mode?: string;
+    /** Only pieces whose `meta.family` (the technology) is one of these (`["css"]` for a shader's fallback). */
+    readonly kinds?: readonly string[];
+}
+/** A nested object of fields (`creative({ prev, next })`). */
+export interface GroupField extends FieldBase<Readonly<Record<string, unknown>>> {
+    readonly kind: "group";
+    readonly fields: Readonly<Record<string, Field>>;
+    /**
+     * The option also takes `false` (the carousel's `morph`): the label of the
+     * switch that turns the whole group off. Stored as `false`.
+     */
+    readonly off?: string;
+}
+export type Field = NumberField | IntegerField | SeedField | BooleanField | ChoiceField<string | number> | ColorField | ColorsField | TextsField | RangeField | TextField | PointField | VectorField | EffectField | GroupField;
+export type FieldKind = Field["kind"];
+/** A configured piece: which one, and the options that differ from its defaults. */
+export interface EffectValue {
+    readonly id: string;
+    readonly options: Readonly<Record<string, unknown>>;
+}
+/** The groups of configurable pieces. */
+export declare const SCHEMA_FAMILIES: readonly ["background", "transition", "reveal", "carousel-layout", "carousel-modifier", "carousel-presence", "carousel-open", "carousel-physics", "carousel", "ticker", "grid", "grid-open", "scroll", "button", "text", "word-cycle", "typewriter", "number-roll", "form"];
+export type SchemaFamily = (typeof SCHEMA_FAMILIES)[number];
+/** Where a factory is imported from. */
+export type SchemaEntry = "@sharedex/ui" | "@sharedex/ui/three";
+/** What a builder shows about a piece (from its registry: BACKGROUND_EFFECTS, TRANSITION_EFFECTS …). */
+export interface SchemaMeta {
+    readonly label: string;
+    readonly category?: string;
+    /** The technology (css, svg, canvas, webgl, three, media …). */
+    readonly family?: string;
+    /** The weakest device it runs smoothly on: all, mid, high. */
+    readonly tier?: string;
+    /** Where it can play (transitions: `carousel`, `reveal`; form effects: the controls they fit, `field`, `checkbox` …). */
+    readonly modes?: readonly string[];
+}
+/** One configurable piece. */
+export interface Schema {
+    /** The piece's id in its registry (`"water-ripple"`, `"noiseBurn"`, `"barrel"`). */
+    readonly id: string;
+    readonly family: SchemaFamily;
+    /**
+     * The exported function that takes the options (`"waterRipple"`), or a
+     * member of an exported object (`"presence.contract"`: the import is `presence`).
+     */
+    readonly factory: string;
+    readonly entry: SchemaEntry;
+    /**
+     * The factory takes these options as positional arguments, in this order,
+     * instead of one options object: `pagedBy(n, maxPages)`.
+     */
+    readonly args?: readonly string[];
+    /** The option fields, in the order the form shows them. */
+    readonly fields: Readonly<Record<string, Field>>;
+    /**
+     * Options that can't be a form field (functions, MotionValues, React nodes):
+     * named here so the form can list them as "set in code".
+     */
+    readonly code: readonly string[];
+    /** Label, category, tier: set by the family registry. */
+    readonly meta?: SchemaMeta;
+}
+type IsTuple2<V> = V extends readonly [number, number] ? (number extends V["length"] ? false : true) : false;
+/** The field kinds that can describe an option of type `V`. */
+export type FieldFor<V> = [V] extends [boolean] ? BooleanField : [V] extends [number] ? NumberField | IntegerField | SeedField | (number extends V ? never : ChoiceField<V>) : IsTuple2<V> extends true ? RangeField | VectorField : [V] extends [readonly string[]] ? ColorsField | TextsField : [V] extends [string] ? (string extends V ? never : ChoiceField<V>) | ChoiceField | ColorField | TextField : [V] extends [EffectValue] ? EffectField : (string extends V ? TextField | ColorField : never) | ([V] extends [string | readonly [number, number]] ? PointField : never) | EffectField | GroupField;
+export {};

package/dist/schema/types.js

@@ -0,0 +1,28 @@
+// ---------------------------------------------------------------------------
+// Option schemas: every configurable piece of @sharedex/ui described as data,
+// so a form (the Design System Builder) can edit any option and a generator
+// can write the same values back as a factory call. Pure data: no React, no
+// DOM, no effect code.
+// ---------------------------------------------------------------------------
+/** The groups of configurable pieces. */
+export const SCHEMA_FAMILIES = [
+    "background",
+    "transition",
+    "reveal",
+    "carousel-layout",
+    "carousel-modifier",
+    "carousel-presence",
+    "carousel-open",
+    "carousel-physics",
+    "carousel",
+    "ticker",
+    "grid",
+    "grid-open",
+    "scroll",
+    "button",
+    "text",
+    "word-cycle",
+    "typewriter",
+    "number-roll",
+    "form",
+];

package/dist/sections/about/About.d.ts

@@ -0,0 +1,54 @@
+import type { ReactNode } from "react";
+import { type SectionRevealOption } from "../shared/reveal.js";
+import type { SectionMedia, SectionPartProps, SectionStatRoll, SectionTextEffect } from "../shared/types.js";
+import type { AboutLayout } from "./layouts.js";
+export interface AboutStat {
+    /** The figure itself: "1998", "40+", "4.9/5". */
+    readonly value: string;
+    readonly label: string;
+}
+export interface AboutContent {
+    readonly eyebrow?: string;
+    readonly title: string;
+    /** One string per paragraph. */
+    readonly body: string | readonly string[];
+    readonly stats?: readonly AboutStat[];
+    readonly media?: SectionMedia;
+}
+export interface AboutRootProps {
+    readonly content: AboutContent;
+    readonly layout?: AboutLayout;
+    readonly unstyled?: boolean;
+    /** A decorative layer behind the content, usually `<Background.Root effect={…} />`. */
+    readonly background?: ReactNode;
+    /**
+     * Reveal the main parts one after another when the section scrolls into view:
+     * `true` (`fadeUp()`), a CSS transition (`blurFade()` …), or
+     * `{ effect, stagger, delay, duration, once, threshold }`.
+     */
+    readonly reveal?: SectionRevealOption;
+    /**
+     * Text effects for the title (`enterRise()`, or a list that stacks): set, it renders as `Text` wearing them; left
+     * out, a plain heading.
+     */
+    readonly titleEffect?: SectionTextEffect;
+    /** Text effects for the eyebrow, the same way. */
+    readonly eyebrowEffect?: SectionTextEffect;
+    /**
+     * Roll each figure to its value as it comes into view (a `NumberRoll`): `true`, or its settings
+     * (`{ look: "spin", duration: 2 }`). `"40+"` rolls to 40 and keeps its `+`; a figure that isn't one plain number
+     * (`"1 000"`) stays as written. Left out, the figures are plain text.
+     */
+    readonly statRoll?: boolean | SectionStatRoll;
+    readonly className?: string;
+    /** Replaces the default composition (`<About.Text />`, `<About.Stats />`, `<About.Media />`). */
+    readonly children?: ReactNode;
+}
+declare function Root({ content, layout, unstyled, className, background, reveal, titleEffect, eyebrowEffect, statRoll, children, }: AboutRootProps): import("react").JSX.Element;
+declare function Text({ className, children }: SectionPartProps): import("react").JSX.Element;
+declare function Eyebrow({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+declare function Title({ className, children }: SectionPartProps): import("react").JSX.Element;
+declare function Body({ className, children }: SectionPartProps): import("react").JSX.Element;
+declare function Stats({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+declare function Media({ className, children }: SectionPartProps): import("react").JSX.Element | null;
+export { Root, Text, Eyebrow, Title, Body, Stats, Media };

package/dist/sections/about/About.js

@@ -0,0 +1,56 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { partAttrs } from "../shared/attrs.js";
+import { NumberRoll } from "../../text/number/NumberRoll.js";
+import { Heading } from "../shared/Heading.js";
+import { parseStat } from "../shared/stat.js";
+import { createSectionContext, SectionShell } from "../shared/context.js";
+import { revealAttrs } from "../shared/reveal.js";
+import { MediaView } from "../shared/MediaView.js";
+const { Provider, useSection } = createSectionContext("About");
+/** `statRoll={true}`: every setting at its default (one object, so the context doesn't change every render). */
+const NO_SETTINGS = {};
+/** A figure that rolls to its value, with what's written around the number kept as it is. */
+function Figure({ value, roll }) {
+    const stat = parseStat(value);
+    if (!stat)
+        return _jsx(_Fragment, { children: value });
+    return (_jsxs(_Fragment, { children: [stat.prefix, _jsx(NumberRoll, { ...roll, value: stat.value, locale: stat.locale, format: stat.format }), stat.suffix] }));
+}
+function Root({ content, layout = "story", unstyled = false, className, background, reveal, titleEffect, eyebrowEffect, statRoll, children, }) {
+    return (_jsx(Provider, { layout: layout, content: content, reveal: reveal, titleEffect: titleEffect, eyebrowEffect: eyebrowEffect, statRoll: statRoll === true ? NO_SETTINGS : statRoll === false ? undefined : statRoll, children: (titleId, shellReveal) => (_jsx(SectionShell, { section: "about", layout: layout, unstyled: unstyled, titleId: titleId, className: className, background: background, reveal: shellReveal, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Text, {}), _jsx(Stats, {}), _jsx(Media, {})] })) })) }));
+}
+function Text({ className, children }) {
+    const { reveal } = useSection("Text");
+    return (_jsx("div", { ...partAttrs("about", "text"), ...revealAttrs(reveal, 0), className: className, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Eyebrow, {}), _jsx(Title, {}), _jsx(Body, {})] })) }));
+}
+function Eyebrow({ className, children }) {
+    const { content, eyebrowEffect } = useSection("Eyebrow");
+    const text = children ?? content.eyebrow;
+    return text ? _jsx(Heading, { as: "p", attrs: partAttrs("about", "eyebrow"), className: className, effect: eyebrowEffect, children: text }) : null;
+}
+function Title({ className, children }) {
+    const { content, titleId, titleEffect } = useSection("Title");
+    return (_jsx(Heading, { as: "h2", attrs: partAttrs("about", "title"), id: titleId, className: className, effect: titleEffect, children: children ?? content.title }));
+}
+function Body({ className, children }) {
+    const { content } = useSection("Body");
+    const paragraphs = typeof content.body === "string" ? [content.body] : content.body;
+    return (_jsx("div", { ...partAttrs("about", "body"), className: className, children: children ?? paragraphs.map((p, i) => _jsx("p", { children: p }, i)) }));
+}
+function Stats({ className, children }) {
+    const { content, reveal, statRoll } = useSection("Stats");
+    const stats = content.stats ?? [];
+    if (!children && stats.length === 0)
+        return null;
+    return (_jsx("dl", { ...partAttrs("about", "stats"), ...revealAttrs(reveal, 1), className: className, children: children ??
+            stats.map((s) => (_jsxs("div", { ...partAttrs("about", "stat"), children: [_jsx("dt", { ...partAttrs("about", "stat-label"), children: s.label }), _jsx("dd", { ...partAttrs("about", "stat-value"), children: statRoll ? _jsx(Figure, { value: s.value, roll: statRoll }) : s.value })] }, s.label))) }));
+}
+function Media({ className, children }) {
+    const { content, reveal } = useSection("Media");
+    if (!children && !content.media)
+        return null;
+    return (_jsx("div", { ...partAttrs("about", "media"), ...revealAttrs(reveal, 2), className: className, children: children ?? (content.media ? _jsx(MediaView, { media: content.media }) : null) }));
+}
+// The parts. About, the compound object, is assembled in ./index.ts, outside this client module.
+export { Root, Text, Eyebrow, Title, Body, Stats, Media };

package/dist/sections/about/index.d.ts

@@ -0,0 +1,16 @@
+import { Root, Text, Eyebrow, Title, Body, Stats, Media } from "./About.js";
+export { ABOUT_LAYOUTS } from "./layouts.js";
+export type { AboutLayout } from "./layouts.js";
+/**
+ * Who you are, in a few paragraphs, with optional key figures and an image.
+ * Figures render as a `<dl>`: the label is the term, the value its definition.
+ */
+export declare const About: {
+    Root: typeof Root;
+    Text: typeof Text;
+    Eyebrow: typeof Eyebrow;
+    Title: typeof Title;
+    Body: typeof Body;
+    Stats: typeof Stats;
+    Media: typeof Media;
+};

package/dist/sections/about/index.js

@@ -0,0 +1,10 @@
+// A plain module (no "use client"), like grid/index.ts and the carousel's parts/index.ts. The compound object is
+// built here so a Server Component can render <About.Root>: built inside the client module, it reaches the server
+// as an opaque client reference, and About.Root is undefined there (found by the Next.js end-to-end check).
+import { Root, Text, Eyebrow, Title, Body, Stats, Media } from "./About.js";
+export { ABOUT_LAYOUTS } from "./layouts.js";
+/**
+ * Who you are, in a few paragraphs, with optional key figures and an image.
+ * Figures render as a `<dl>`: the label is the term, the value its definition.
+ */
+export const About = { Root, Text, Eyebrow, Title, Body, Stats, Media };

package/dist/sections/about/layouts.d.ts

@@ -0,0 +1,3 @@
+/** Layout presets, in the order the builder and the docs list them. */
+export declare const ABOUT_LAYOUTS: readonly ["story", "split-stats", "centered"];
+export type AboutLayout = (typeof ABOUT_LAYOUTS)[number];

package/dist/sections/about/layouts.js

@@ -0,0 +1,3 @@
+// A plain module (no "use client"): the layout ids are data that Server Components, the builder and tests read.
+/** Layout presets, in the order the builder and the docs list them. */
+export const ABOUT_LAYOUTS = ["story", "split-stats", "centered"];