@wardic/solid 0.0.0-stage → 1.0.0-rc.1

package/dist/solid/wardic-config.d.ts

@@ -0,0 +1,69 @@
+/**
+ * `WardicConfig` on the Solid 1 binding (#434, Motion's `MotionConfig`): settings for the Wardic
+ * elements below it. It provides a context and no runtime, so it nests anywhere under a
+ * `WardicProvider`.
+ *
+ * @module
+ */
+import { type JSX } from "solid-js";
+import type * as ReducedMotion from "@wardic/core/ReducedMotion";
+import type { WardicTransformPoint, WardicVariantTransition } from "./config.ts";
+import { type WardicConfigValue } from "./wardic-config-value.ts";
+/** `WardicConfig`'s props. */
+export interface WardicConfigProps {
+    /**
+     * The **Config transition**: each Wardic element below runs on it when it gives no `transition` of
+     * its own, a Variant child in place of its parent's, as Motion's `MotionConfig` `transition`. It
+     * replaces an enclosing config's, or with `inherit: true` lays its own fields over it. Read when
+     * each animation starts.
+     */
+    readonly transition?: WardicVariantTransition | undefined;
+    /**
+     * How the Wardic elements below honour the user's `prefers-reduced-motion`, as Motion's
+     * `MotionConfig` `reducedMotion`: `"user"` follows it, `"always"` reduces motion whatever it is,
+     * `"never"` animates whatever it is. It replaces an enclosing config's, and the `WardicProvider`'s
+     * for them; with none, theirs applies. Read when each animation starts.
+     */
+    readonly reducedMotion?: ReducedMotion.Config | undefined;
+    /**
+     * Every animation of the Wardic elements below lands at its end on the next frame, as Motion's
+     * `MotionConfig` `skipAnimations`: its legs, exits, layout animations, a drag's release,
+     * `createAnimate` and `createSpring`, each still told. For end-to-end and visual-regression tests.
+     * An inner config's `false` animates its subtree again. Read when each animation starts.
+     */
+    readonly skipAnimations?: boolean | undefined;
+    /**
+     * Which of the props given a Wardic element's tag below reach the element (Motion's
+     * `MotionConfig` `isValidProp`): one it returns `false` for is kept off it, for a prop a styling
+     * system reads that shouldn't render as an attribute. Asked of no prop starting with `on`, nor a
+     * wrapped component's, which get every prop, as Motion's do. It replaces an enclosing config's. Read as
+     * each element is made, for the props it has then.
+     */
+    readonly isValidProp?: ((key: string) => boolean) | undefined;
+    /**
+     * Where the points a drag or a pan below uses are (Motion's `MotionConfig`
+     * `transformPagePoint`): handed each point in the viewport's coordinates, it gives the one the
+     * gesture uses. Read at each drag or pan start, and applied to its down, each move, a drag
+     * controls' start and its snap to the cursor, and to the boxes drag constraints are measured from;
+     * never to a layout animation's boxes, which Wardic already reads through their ancestors'
+     * transforms. `correctParentTransform(parent)` makes one for a zoomed or rotated parent, and
+     * `transformViewBoxPoint(svg)` one for an SVG's viewBox. It replaces an enclosing config's.
+     */
+    readonly transformPagePoint?: WardicTransformPoint | undefined;
+    readonly children?: JSX.Element;
+}
+/**
+ * Settings for the Wardic elements below it (Motion's `MotionConfig`): their default
+ * `transition`, their `reducedMotion` and `skipAnimations`. Nest it anywhere under a
+ * `WardicProvider`; an inner one replaces an outer one's, unless its transition inherits it.
+ *
+ * ```tsx
+ * <WardicConfig transition={{ type: "spring", stiffness: 300, damping: 30 }}>
+ *   <wardic.div animate={{ x: 100 }} />
+ * </WardicConfig>
+ * ```
+ */
+export declare function WardicConfig(props: WardicConfigProps): JSX.Element;
+/** The nearest `WardicConfig`'s settings, or none. Internal. */
+export declare const useWardicConfig: () => WardicConfigValue | undefined;
+//# sourceMappingURL=wardic-config.d.ts.map

package/dist/solid/wardic-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wardic-config.d.ts","sourceRoot":"","sources":["../../src/wardic-config.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAA6B,KAAK,GAAG,EAAc,MAAM,UAAU,CAAA;AAC1E,OAAO,KAAK,KAAK,aAAa,MAAM,4BAA4B,CAAA;AAChE,OAAO,KAAK,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAChF,OAAO,EAAsH,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAIrL,8BAA8B;AAC9B,MAAM,WAAW,iBAAiB;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,uBAAuB,GAAG,SAAS,CAAA;IACzD;;;;;OAKG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,SAAS,CAAA;IACzD;;;;;OAKG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC7C;;;;;;OAMG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAA;IAC7D;;;;;;;;OAQG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAA;IAC9D,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAChC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAKlE;AAED,gEAAgE;AAChE,eAAO,MAAM,eAAe,QAAO,iBAAiB,GAAG,SAA4C,CAAA"}

package/dist/solid/wardic-config.jsx

@@ -0,0 +1,30 @@
+/**
+ * `WardicConfig` on the Solid 1 binding (#434, Motion's `MotionConfig`): settings for the Wardic
+ * elements below it. It provides a context and no runtime, so it nests anywhere under a
+ * `WardicProvider`.
+ *
+ * @module
+ */
+import { createContext, createMemo, useContext } from "solid-js";
+import { configIsValidPropOf, configReducedMotionOf, configTransformPagePointOf, configSkipAnimationsOf, configTransitionOf } from "./wardic-config-value.js";
+const WardicConfigContext = createContext(undefined);
+/**
+ * Settings for the Wardic elements below it (Motion's `MotionConfig`): their default
+ * `transition`, their `reducedMotion` and `skipAnimations`. Nest it anywhere under a
+ * `WardicProvider`; an inner one replaces an outer one's, unless its transition inherits it.
+ *
+ * ```tsx
+ * <WardicConfig transition={{ type: "spring", stiffness: 300, damping: 30 }}>
+ *   <wardic.div animate={{ x: 100 }} />
+ * </WardicConfig>
+ * ```
+ */
+export function WardicConfig(props) {
+    const parent = useContext(WardicConfigContext);
+    // One object per change, so the elements below share it, and its caches (#66, #301) hit.
+    const transition = createMemo(() => configTransitionOf(props.transition, parent));
+    return <WardicConfigContext.Provider value={{ transition, reducedMotion: () => configReducedMotionOf(props.reducedMotion, parent), skipAnimations: () => configSkipAnimationsOf(props.skipAnimations, parent), isValidProp: () => configIsValidPropOf(props.isValidProp, parent), transformPagePoint: () => configTransformPagePointOf(props.transformPagePoint, parent) }}>{props.children}</WardicConfigContext.Provider>;
+}
+/** The nearest `WardicConfig`'s settings, or none. Internal. */
+export const useWardicConfig = () => useContext(WardicConfigContext);
+//# sourceMappingURL=wardic-config.jsx.map

package/dist/solid/wardic-config.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"wardic-config.jsx","sourceRoot":"","sources":["../../src/wardic-config.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAY,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1E,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,kBAAkB,EAA0B,MAAM,0BAA0B,CAAA;AAErL,MAAM,mBAAmB,GAAG,aAAa,CAAgC,SAAS,CAAC,CAAA;AA8CnF;;;;;;;;;;GAUG;AACH,MAAM,UAAU,YAAY,CAAC,KAAwB;IACnD,MAAM,MAAM,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAA;IAC9C,yFAAyF;IACzF,MAAM,UAAU,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAA;IACjF,OAAO,CAAC,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,aAAa,EAAE,MAAM,CAAC,EAAE,cAAc,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,KAAK,CAAC,cAAc,EAAE,MAAM,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,WAAW,EAAE,MAAM,CAAC,EAAE,kBAAkB,EAAE,GAAG,EAAE,CAAC,0BAA0B,CAAC,KAAK,CAAC,kBAAkB,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;AAC7Z,CAAC;AAED,gEAAgE;AAChE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAkC,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA"}

package/dist/solid/wardic.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `wardic.create(tag | Component)` HOC + the `wardic.*` motion-element proxy (ADR-0008,
+ * Tier 1 headline surface): the **Complete element**'s component forms, every Feature brought with it
+ * (#511, ADR-0067), as Motion's `motion` is. The forms' shared code, and how a component is made, is
+ * `element.tsx`'s; `w.tsx` holds the Slim element's forms.
+ *
+ * `wardic.<tag>` (e.g. `wardic.div`, `wardic.button`) is a cached shorthand for
+ * `wardic.create("<tag>")` — `wardic.div === wardic.div`.
+ *
+ * `wardic.create`'s options (#443, Motion's): `forwardMotionProps` hands the motion props on too, and
+ * `type` says what its element is for its server render. Every component made is marked
+ * (`isWardicComponent`), and a `WardicConfig`'s `isValidProp` keeps a tag's props off its element.
+ */
+import type { Accessor, JSX } from "solid-js";
+import type { WardConfig } from "./config.ts";
+import { type Create, type WardicComponent } from "./element.tsx";
+export { MOTION_PROPS, motionToConfig, type WardicMotionProps } from "./motion-props.ts";
+export { configOfMotion, type Create, type WardicComponent, type WardicProps, type WardicWrappable } from "./element.tsx";
+/**
+ * `wardic.create(tag | Component)` — build a **Complete element** (#511): the
+ * forms' `create` (`element.tsx`'s `createWith`), bringing every Feature.
+ *
+ * @param arg an element tag string (e.g. `"div"`) OR a component forwarding `ref`.
+ * @returns a Solid component accepting the element's / component's props + motion props.
+ */
+export declare const create: Create;
+/**
+ * The typed `wardic` proxy: called, it's the `use:wardic` directive; `wardic.create` is the
+ * HOC, and `wardic.<tag>` is a Complete element for that intrinsic element (cached per tag).
+ */
+export type Wardic = ((el: HTMLElement, value: Accessor<WardConfig>) => void) & {
+    readonly create: typeof create;
+} & {
+    readonly [Tag in keyof JSX.IntrinsicElements]: WardicComponent<Tag>;
+};
+/**
+ * The Complete element: `wardic.div` and every other tag, with every Feature whatever its section
+ * gives, and `wardic.create(Component)`. Handy for trying something out, heavy for a page: under a
+ * `strict` provider it throws in development. Motion's `motion.div`.
+ *
+ * @example <wardic.div drag whileHover={{ scale: 1.05 }} />
+ * @see https://wardic.dev/reference/solid/elements/wardic
+ */
+export declare const wardic: Wardic;
+//# sourceMappingURL=wardic.d.ts.map

package/dist/solid/wardic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wardic.d.ts","sourceRoot":"","sources":["../../src/wardic.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAG7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,KAAK,MAAM,EAAoB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAEnF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AACxF,OAAO,EAAE,cAAc,EAAE,KAAK,MAAM,EAAE,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAEzH;;;;;;GAMG;AACH,eAAO,MAAM,MAAM,EAAE,MAA2B,CAAA;AAQhD;;;GAGG;AACH,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,GAAG;IAC9E,QAAQ,CAAC,MAAM,EAAE,OAAO,MAAM,CAAA;CAC/B,GAAG;IACF,QAAQ,EAAE,GAAG,IAAI,MAAM,GAAG,CAAC,iBAAiB,GAAG,eAAe,CAAC,GAAG,CAAC;CACpE,CAAA;AAED;;;;;;;GAOG;AAIH,eAAO,MAAM,MAAM,EAAE,MAAoD,CAAA"}

package/dist/solid/wardic.jsx

@@ -0,0 +1,31 @@
+import { runDirective } from "./directive.js";
+import { COMPLETE } from "./complete.js";
+import { createOf, formOf } from "./element.jsx";
+export { MOTION_PROPS, motionToConfig } from "./motion-props.js";
+export { configOfMotion } from "./element.jsx";
+/**
+ * `wardic.create(tag | Component)` — build a **Complete element** (#511): the
+ * forms' `create` (`element.tsx`'s `createWith`), bringing every Feature.
+ *
+ * @param arg an element tag string (e.g. `"div"`) OR a component forwarding `ref`.
+ * @returns a Solid component accepting the element's / component's props + motion props.
+ */
+export const create = createOf(COMPLETE);
+/**
+ * The `use:wardic` directive: drive `el` through Wardic's motion spine, a Complete element. An arrow
+ * function, so the `wardic` Proxy over it has no non-configurable `prototype` to keep.
+ */
+const wardicDirective = (el, value) => runDirective(el, value, COMPLETE);
+/**
+ * The Complete element: `wardic.div` and every other tag, with every Feature whatever its section
+ * gives, and `wardic.create(Component)`. Handy for trying something out, heavy for a page: under a
+ * `strict` provider it throws in development. Motion's `motion.div`.
+ *
+ * @example <wardic.div drag whileHover={{ scale: 1.05 }} />
+ * @see https://wardic.dev/reference/solid/elements/wardic
+ */
+// The motion-element proxy and the `use:wardic` directive (ADR-0008 Tier 1, ADR-0042): every way to
+// make a Complete Wardic element but createWard's spread. `wardic(el, accessor)` is the directive;
+// `wardic.<tag>` is `create(tag)`, cached so `wardic.div === wardic.div`; any other key is undefined.
+export const wardic = formOf(wardicDirective, create, {});
+//# sourceMappingURL=wardic.jsx.map

package/dist/solid/wardic.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"wardic.jsx","sourceRoot":"","sources":["../../src/wardic.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAe,QAAQ,EAAE,MAAM,EAAwB,MAAM,eAAe,CAAA;AAEnF,OAAO,EAAE,YAAY,EAAE,cAAc,EAA0B,MAAM,mBAAmB,CAAA;AACxF,OAAO,EAAE,cAAc,EAA6E,MAAM,eAAe,CAAA;AAEzH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAW,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAEhD;;;GAGG;AACH,MAAM,eAAe,GAAG,CAAC,EAAe,EAAE,KAA2B,EAAQ,EAAE,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;AAYjH;;;;;;;GAOG;AACH,oGAAoG;AACpG,mGAAmG;AACnG,sGAAsG;AACtG,MAAM,CAAC,MAAM,MAAM,GAAW,MAAM,CAAS,eAAe,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,100 @@
 {
   "name": "@wardic/solid",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-rc.1",
+  "description": "Motion for React's API on Solid 1 and Solid 2: Wardic's elements, gestures, layout and presence animations.",
+  "keywords": [
+    "animation",
+    "motion",
+    "solid",
+    "solidjs",
+    "framer-motion",
+    "layout-animation",
+    "gestures"
+  ],
+  "homepage": "https://wardic.dev",
+  "bugs": "https://github.com/wardiclabs/wardic/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wardiclabs/wardic.git",
+    "directory": "packages/solid"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "The Wardic contributors",
+    "email": "hello@wardic.dev",
+    "url": "https://wardic.dev"
+  },
+  "files": [
+    "dist/solid",
+    "dist/browser",
+    "dist/server",
+    "src",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "@wardic/source": "./src/index.ts",
+      "types": "./dist/solid/index.d.ts",
+      "solid": "./dist/solid/index.js",
+      "browser": "./dist/browser/index.js",
+      "worker": "./dist/server/index.js",
+      "deno": "./dist/server/index.js",
+      "node": "./dist/server/index.js",
+      "default": "./dist/browser/index.js"
+    },
+    "./unstable/v2": {
+      "@wardic/source": "./src/unstable/v2/index.ts",
+      "types": "./dist/solid/unstable/v2/index.d.ts",
+      "solid": "./dist/solid/unstable/v2/index.js",
+      "browser": "./dist/browser/unstable/v2/index.js",
+      "worker": "./dist/server/unstable/v2/index.js",
+      "deno": "./dist/server/unstable/v2/index.js",
+      "node": "./dist/server/unstable/v2/index.js",
+      "default": "./dist/browser/unstable/v2/index.js"
+    }
+  },
+  "scripts": {
+    "build": "../../node_modules/typescript-7/bin/tsc --build",
+    "typecheck": "../../node_modules/typescript-7/bin/tsc --build",
+    "typecheck:tests": "../../node_modules/typescript-7/bin/tsc -p tsconfig.test.json && ../../node_modules/typescript-7/bin/tsc -p tsconfig.v2.json"
+  },
+  "dependencies": {
+    "@solid-primitives/refs": "^1.1.3",
+    "@wardic/core": "1.0.0-rc.1",
+    "@wardic/dom": "1.0.0-rc.1",
+    "csstype": "^3.1.0"
+  },
+  "peerDependencies": {
+    "@solidjs/web": "^2.0.0-rc.20",
+    "effect": "^4.1.1",
+    "solid-js": "^1.9.13 || ^2.0.0-rc.20"
+  },
+  "peerDependenciesMeta": {
+    "@solidjs/web": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "7.29.7",
+    "@babel/preset-typescript": "7",
+    "@solidjs/babel-plugin": "2.0.0-rc.20",
+    "@solidjs/diagnostics": "2.0.0-rc.20",
+    "@solidjs/router": "1.0.1",
+    "@solidjs/router-2": "npm:@solidjs/router@2.0.0-next.43",
+    "@solidjs/web": "2.0.0-rc.20",
+    "@types/babel__core": "^7.20.5",
+    "@wardic/test": "1.0.0-rc.1",
+    "babel-preset-solid": "1.9.12",
+    "effect": "4.1.1",
+    "solid-js": "^1.9.18",
+    "solid-js-2": "npm:solid-js@2.0.0-rc.20"
+  }
+}

package/src/animation-controls.ts

@@ -0,0 +1,204 @@
+/**
+ * **Animation controls** (#433's PR 3, CONTEXT.md; Motion's `useAnimationControls`), Solid-free: one
+ * object made outside any component and given as `animate={controls}` to any number of Wardic
+ * elements, which follow its calls.
+ *
+ * - **`start(definition, transitionOverride)`** sets each element's `animate` entry (a **Controls
+ *   change**), so it Retargets, staggers its Variant children and lands as a change of the prop would.
+ *   It resolves once each element and the Variant children it hands its names to have landed.
+ *   - The override is the transition of that change: it beats the definition's own on the element and
+ *     on each Variant child, and it is their orchestration (stagger, `when`), as Motion's
+ *     `transitionOverride` is.
+ *   - Their next Retarget, a gesture's, runs on their own transitions again.
+ * - **`set(definition)`** is an **Instant change**: the elements and their Variant children
+ *   snap there, as Motion's `setValues` sets them.
+ * - **`stop()`** ends each element's running legs where they are.
+ *
+ * A function definition is called once per element, with its `custom`, values and velocities, as
+ * Motion's `controls.start((i) => …)`. An element hears the controls from its mount to its unmount.
+ *
+ * @module
+ */
+import * as Arr from "effect/Array"
+import * as Bool from "effect/Boolean"
+import * as Predicate from "effect/Predicate"
+import * as UndefinedOr from "effect/UndefinedOr"
+import type { WardConfig, WardicTransition, WardicVariant, WardicVariantLabels, WardicVariantResolver } from "./config.ts"
+
+/** What controls start or set an element to: a target, a variant name or a list of them, or a function of each element's `custom`. Motion's `AnimationDefinition`. */
+export type WardicControlsDefinition = WardicVariant | WardicVariantLabels | WardicVariantResolver
+
+/** The mark that tells controls from a target. */
+const CONTROLS: unique symbol = Symbol("wardic.animationControls")
+
+/**
+ * `createAnimationControls()`'s controls: give them as `animate={controls}`, and every element given
+ * them follows `start`, `set` and `stop`. Motion's `LegacyAnimationControls`.
+ */
+// #433.
+export interface WardicAnimationControls {
+  readonly [CONTROLS]: true
+  /**
+   * Animates every element given these controls to `definition`, as a change of its `animate` would,
+   * its variant children following. `transitionOverride`, when given, is the transition of this change,
+   * over the definition's own, and its stagger. Resolves once each element and its children have landed.
+   */
+  readonly start: (definition: WardicControlsDefinition, transitionOverride?: WardicTransition) => Promise<void>
+  /** Sets every element given these controls, and its variant children, at `definition` at once. */
+  readonly set: (definition: WardicControlsDefinition) => void
+  /** Ends every element's running animation where it is. */
+  readonly stop: () => void
+}
+
+/**
+ * A **Controls change** (#433): what one `start` or `set` set one element's `animate` entry to, the
+ * transition it runs on, and the landings it waits for. The element and each Variant child it reaches
+ * join it at the Retarget it makes them run, and leave at that one's landing (or the next's).
+ */
+export interface ControlsChange {
+  /** Its place among every change: a trigger key part, so a change is a trigger even to the same name. */
+  readonly serial: number
+  /** The element's `animate` entry: a target or a name, a resolver already called. */
+  readonly definition: WardicVariant | WardicVariantLabels
+  /** The transition of the change (start's override, set's instant one), or none: the element's own. */
+  readonly override: WardicTransition | undefined
+  /** Elements in it that haven't landed. */
+  pending: number
+  /** Whether every element it reaches has had its chance to join: its binding's flush has run. */
+  armed: boolean
+  /** Told once it has landed. */
+  readonly landed: () => void
+}
+
+/** What a controlled element does at a change, as its binding wires it: its entry set, and the change's landing promised. */
+export interface Controlled {
+  readonly change: (definition: WardicControlsDefinition, override: WardicTransition | undefined) => Promise<void>
+  readonly stop: () => void
+}
+
+/** The elements each controls reach, by the controls. */
+// Module state (#460, Q7): each controls object's subscribers, held weakly by it.
+const subscribers = new WeakMap<WardicAnimationControls, Set<Controlled>>()
+
+/** `set`'s transition (#433, Motion's `setValues`): none to speak of, and no orchestration. */
+export const INSTANT: WardicTransition = { type: "tween", duration: 0 }
+
+/**
+ * Makes animation controls, which animate elements from code by their variants or targets: give them
+ * to each element as `animate={controls}`, on a `w.*` element, in a ward's config or on a
+ * `Reorder.Item`, then `start`, `set` or `stop` them. Needs no owner. Motion's `useAnimationControls`.
+ *
+ * @example
+ * const controls = createAnimationControls()
+ * <w.ul initial="hidden" animate={controls} variants={list}>…</w.ul>
+ * await controls.start("visible")
+ * @see https://wardic.dev/reference/solid/animation/create-animation-controls
+ */
+// #433's PR 3: each `start` or `set` is a Controls change of each element's `animate` entry.
+export const createAnimationControls = (): WardicAnimationControls => {
+  const reached = new Set<Controlled>()
+  const controls: WardicAnimationControls = {
+    [CONTROLS]: true,
+    start: (definition, transitionOverride) =>
+      Promise.all(Arr.map(Arr.fromIterable(reached), (element) => element.change(definition, transitionOverride))).then(() => undefined),
+    set: (definition) =>
+      reached.forEach((element) => {
+        void element.change(definition, INSTANT)
+      }),
+    stop: () => reached.forEach((element) => element.stop()),
+  }
+  subscribers.set(controls, reached)
+  return controls
+}
+
+/** Whether `u` is **Animation controls** (Motion's `isAnimationControls`). */
+export const isAnimationControls = (u: unknown): u is WardicAnimationControls => Predicate.hasProperty(u, CONTROLS)
+
+/** Reach `element` from `controls`, until the returned function: its mount to its unmount. */
+export const subscribe = (controls: WardicAnimationControls, element: Controlled): (() => void) => {
+  const reached = subscribers.get(controls)
+  if (Predicate.isUndefined(reached)) return () => undefined
+  reached.add(element)
+  return () => {
+    reached.delete(element)
+  }
+}
+
+/** The changes made, counted. */
+// Module state (#460, Q7): an id counter, only compared for order and identity.
+let serials = 0
+
+/**
+ * A change of one element (#433): its entry, `definition` called with the element's `custom`, values
+ * and velocities when it's a resolver (once, as Motion's), on `override`; and its landing, promised. It
+ * lands once every element it reaches has joined, at the end of the binding's flush (`armed`), and
+ * left. One that reaches no element lands then.
+ */
+export const changeOf = (
+  definition: WardicControlsDefinition,
+  override: WardicTransition | undefined,
+  custom: unknown,
+  values: Readonly<Record<string, number | string>>,
+  velocities: Readonly<Record<string, number>>,
+): { readonly change: ControlsChange; readonly landing: Promise<void> } => {
+  let resolve!: () => void
+  const landing = new Promise<void>((done) => {
+    resolve = done
+  })
+  const entry = Bool.match(Predicate.isFunction(definition), {
+    onTrue: () => (definition as WardicVariantResolver)(custom, { ...values }, { ...velocities }),
+    onFalse: () => definition as WardicVariant | WardicVariantLabels,
+  })
+  const change: ControlsChange = { serial: ++serials, definition: entry, override, pending: 0, armed: false, landed: resolve }
+  return { change, landing }
+}
+
+/** An element joins `change`: it runs a Retarget for it. */
+export const join = (change: ControlsChange): void => {
+  change.pending++
+}
+
+/** An element in `change` landed, or left it (a later change, its unmount): it lands once none is left and it's armed. */
+export const leave = (change: ControlsChange): void => {
+  change.pending--
+  if (change.armed && change.pending <= 0) change.landed()
+}
+
+/** `change` armed, its binding's flush having run: it lands now if no element joined, or all have left. */
+export const arm = (change: ControlsChange): void => {
+  change.armed = true
+  if (change.pending <= 0) change.landed()
+}
+
+/**
+ * An element's config with **Animation controls** for its `animate` (#433), as everything but its
+ * controls reads it: `change`'s entry (none before the first), and marked controlled, so it names its
+ * own variants whatever the entry is (Motion's `isControllingVariants`).
+ */
+export const controlledConfigOf = <C extends Pick<WardConfig, "animate">>(config: C, change: ControlsChange | undefined): C =>
+  ({ ...config, animate: UndefinedOr.map(change, (c) => c.definition), controlled: true }) as C
+
+/** A config as a server reads it (#433): one given **Animation controls** has no entry yet, and is controlled. */
+export const uncontrolledOf = <C extends Pick<WardConfig, "animate">>(config: C): C =>
+  Bool.match(isAnimationControls(config.animate), { onTrue: () => controlledConfigOf(config, undefined), onFalse: () => config })
+
+/** What a controlled element reads at a change: its `custom`, and its values and velocities now (its Snapshot). */
+export interface ControlledState {
+  readonly custom: () => unknown
+  readonly snapshot: { readonly values: Readonly<Record<string, number | string>>; readonly velocities: Readonly<Record<string, number>> }
+}
+
+/**
+ * A mounted element as its controls reach it (#433): a change sets its entry through `setChange`, its
+ * binding's signal, and arms once the binding's flush has run (a microtask after, Solid 2's included),
+ * every element it reaches joined by then; `stop` ends its legs.
+ */
+export const controlledElement = (setChange: (change: ControlsChange) => void, state: ControlledState, stop: () => void): Controlled => ({
+  change: (definition, override) => {
+    const made = changeOf(definition, override, state.custom(), state.snapshot.values, state.snapshot.velocities)
+    setChange(made.change)
+    queueMicrotask(() => arm(made.change))
+    return made.landing
+  },
+  stop,
+})

package/src/animation-frame.ts

@@ -0,0 +1,32 @@
+/**
+ * `createAnimationFrame`'s run, Solid-free, on both bindings (#443, Motion's `useAnimationFrame`):
+ * core's `LiveValue.eachFrame`, the app's callback in it reported as every per-frame callback is.
+ *
+ * @module
+ */
+import * as LiveValue from "@wardic/core/LiveValue"
+import * as Report from "@wardic/dom/Report"
+import * as Cause from "effect/Cause"
+import type * as Effect from "effect/Effect"
+import type * as Scope from "effect/Scope"
+import type { WardicRuntime, WardicServices } from "./runtime.ts"
+
+/**
+ * `callback` told each frame's time and delta on `runtime`'s Frame loop, for as long as the Scope is
+ * open. A throw from it is logged at the first of a run of throws, and the next frame calls it as ever
+ * (ADR-0030, *Amendment (#257 item 4)*, as `onUpdate`): a frame that returns ends the run, so the next
+ * throw logs again.
+ */
+export const eachFrameOf = (runtime: WardicRuntime, callback: (time: number, delta: number) => void): Effect.Effect<void, never, WardicServices | Scope.Scope> => {
+  let failing = false
+  return LiveValue.eachFrame((time, delta) => {
+    try {
+      callback(time, delta)
+      failing = false
+    } catch (defect) {
+      if (failing) return
+      failing = true
+      runtime.runFork(Report.failure("wardic.createAnimationFrame: the callback failed", Cause.die(defect)))
+    }
+  })
+}