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

package/dist/browser/unstable/v2/reorder.js

@@ -0,0 +1,663 @@
+import { createComponent as _$createComponent } from "@solidjs/web";
+import { mergeProps as _$mergeProps } from "@solidjs/web";
+import { applyRef as _$applyRef } from "@solidjs/web";
+/**
+ * `<Reorder>` on Solid 2 (#209 PR 3b, ADR-0020, ADR-0037, ADR-0045): drag items to reorder a list,
+ * or reorder it by keyboard. `reorderGroup(config)` and `reorderItem(list, config)` are refs that
+ * carry their props, as a ward is; `Reorder.Group` and `Reorder.Item` are built on them.
+ *
+ * ```tsx
+ * const list = reorderGroup({ values: items, onReorder: setItems })
+ * <ul {...list}>
+ *   <For each={items()}>
+ *     {(item) => {
+ *       const row = reorderItem(list, { value: item, whileDrag: { scale: 1.05 } })
+ *       return <li {...row}>{item.name}</li>
+ *     }}
+ *   </For>
+ * </ul>
+ * ```
+ *
+ * The **Reorder group** is `@wardic/dom`'s `ReorderController` (core's `Reorder.Group` underneath),
+ * as on the Solid 1 binding: it reads each item's slot and drag offset from its projection node,
+ * runs the **Crossover** on each drag sample, calls the app's `onReorder`, runs **Auto-scroll**,
+ * detects the axis after every Measure pass, and speaks the **Keyboard reorder** through the
+ * Environment's `Announcer`. This file adds Solid 2's half: the reactive config, the lifecycle, the
+ * props and the components. The app owns `values` and keys its items with `<For>`. The group flushes
+ * Solid right after the app's `onReorder`, so the DOM follows within the controller's call, as
+ * Solid 1's synchronous updates have it.
+ *
+ * - **The group** spreads `overflow-anchor: none` under the config's `style` (Motion's
+ *   Group.tsx:187-195 at 16c6122), so the browser's scroll anchoring doesn't shift the page as items
+ *   move; given to `ref` alone it sets it on the element. `list.move(value, toIndex)` moves a value
+ *   in code, announced.
+ * - **An item** is a ward (`row.read`, `row.atom`, `row.Provider`): a `layout` node whose drag the
+ *   group's axis decides per gesture, raised while dragged, whose `touch-action` follows the group's
+ *   axis. Its `value` is read once. Its spread carries the keyboard reorder's `tabindex="0"` and
+ *   `aria-describedby` (the group's instructions); an app's own `tabindex` and `aria-describedby`
+ *   go in the item's config, as a ward's `style` does: its `tabindex` wins, its ids come first
+ *   (#209 PR 3b's R2). Written in JSX after the spread, they'd replace the item's (Solid's rule).
+ *
+ * @module
+ */
+import * as InputSource from "@wardic/core/InputSource";
+import * as DomAnnouncer from "@wardic/dom/DomAnnouncer";
+import * as ReorderController from "@wardic/dom/ReorderController";
+import * as Style from "@wardic/dom/Style";
+import * as Arr from "effect/Array";
+import * as Bool from "effect/Boolean";
+import * as Effect from "effect/Effect";
+import { constUndefined, identity, pipe } from "effect/Function";
+import * as Match from "effect/Match";
+import * as Option from "effect/Option";
+import * as Predicate from "effect/Predicate";
+import * as Scope from "effect/Scope";
+import * as UndefinedOr from "effect/UndefinedOr";
+import { isServer } from "@solidjs/web";
+import { createContext, createEffect, createMemo, createSignal, flush, omit, onCleanup, untrack, useContext } from "solid-js";
+import { MOTION_PROPS_V2 as MOTION_PROPS } from "../../motion-props.js";
+import { drag } from "../../features/drag.js";
+import { focus } from "../../features/focus.js";
+import { hover } from "../../features/hover.js";
+import { inView } from "../../features/in-view.js";
+import { layout } from "../../features/layout.js";
+import { pan } from "../../features/pan.js";
+import { press } from "../../features/press.js";
+import { inputIn } from "../../gesture-features.js";
+import * as OwnerScope from "../../owner-scope.js";
+import { watchItemInput } from "../../reorder-input.js";
+import { changesContext } from "../../variant-tree.js";
+import { configView } from "./config-view.js";
+import { useBrought, useWardicRuntime } from "./provider.js";
+import { useLayoutServices } from "./layout-projection.js";
+import { spreadPropsOf, withSpreadProps, wardConfigView, wardWith } from "./ward.js";
+import { drivenWard, givenOf, handOver, listOf, refsOf, sets, setKeysOf, staticElementOf } from "./element.js";
+import { w } from "./w.js";
+import { CLIENT_ONLY, CLIENT_ONLY_DEFERRED } from "./solid-reactivity.js";
+import { eachOf, neverLands, NO_EVENTS, serverWhen, Waiters, whenOf } from "./waiters.js";
+/** A group's config read per key (#259). */
+const GROUP_VIEW = configView(["values", "onReorder", "axis", "keyboard", "announcements", "instructions", "style"], ["onReorder"]);
+/** A group's config as a view of `config`. */
+const groupViewOf = (config, beside) => GROUP_VIEW.of(config, beside);
+// Module state (#460, Q7): a cache held weakly by the object it's for, so it goes with it.
+const GROUP_LAYERS = new WeakMap();
+/** The `AbortError`'s message for a group's `next` its disposal cut off. */
+const GROUP_GONE = "The Reorder group was disposed before its next event.";
+/**
+ * A **Reorder group**'s mark (#349): what tells a group given to `Reorder.Group`'s `groupRef` from a
+ * function handed the component's own. Internal.
+ */
+export const REORDER_GROUP = Symbol("wardic.reorderGroup");
+/** An item's own keys read per key (#259); the rest are its ward's, which reads them itself. */
+/**
+ * What an item brings (ADR-0067 decision 12), whatever its section has (#511): its layout node, its
+ * drag, and every other gesture, so `whileHover` or `whileTap` on an item works as on Motion's, for
+ * about 0.5 KB gzipped beside the drag's.
+ */
+const ITEM_BRINGS = [layout, drag, hover, press, focus, inView, pan];
+const ITEM_VIEW = configView(["value", "layout", "tabindex", "aria-describedby"], []);
+/** An item's `layout` as its Layout mode: `"position"`, else `true` (ADR-0009, *Amendment (#42)*). */
+const itemLayoutOf = layout => Bool.match(layout === "position", {
+  onTrue: () => "position",
+  onFalse: () => true
+});
+/** A config given whole as an accessor, which the Solid 2 binding no longer reads (#259). */
+const WHOLE_GROUP_ACCESSOR = "reorderGroup(config) takes its config as an object, read per key (#259): make a key reactive with an accessor " + "(`reorderGroup({ values: items, onReorder: setItems })`), a getter, a store or a component's props.";
+const WHOLE_ITEM_ACCESSOR = "reorderItem(list, config) takes its config as an object, read per key (#259): `reorderItem(list, { value })`, " + "a key made reactive with an accessor, a getter, a store or a component's props.";
+/** Whether a call is Solid applying a ref. */
+const isElement = value => Predicate.hasProperty(value, "nodeType");
+/** The group's keyboard reorder settings, as accessors (ADR-0037). */
+const keyboardOf = cfg => ({
+  keyboard: () => cfg().keyboard !== false,
+  instructions: () => UndefinedOr.match(cfg().instructions, {
+    onUndefined: () => ReorderController.DEFAULT_INSTRUCTIONS,
+    onDefined: identity
+  })
+});
+/** The group element's style: the config's over `overflow-anchor: none`. */
+const groupStyleOf = style => pipe(style, Style.over(ReorderController.GROUP_STYLE));
+/**
+ * A ref carrying `props` and `reads`: `props` enumerable (a spread applies them), `reads` not. Called
+ * with nothing, as Solid 2's `merge` calls a spread's function source, it gives `ref` and `props` alone
+ * (#495), so none of its own names (`name`, `length`, its reads) shadows the element's props.
+ */
+const refCarrying = (attach, props, reads) => {
+  const self = value => {
+    if (isElement(value)) {
+      attach(value);
+      return undefined;
+    }
+    return spread;
+  };
+  const spreadProps = {
+    ref: {
+      value: self,
+      enumerable: true
+    },
+    ...props
+  };
+  const spread = spreadPropsOf(spreadProps);
+  Object.defineProperties(self, {
+    [REORDER_GROUP]: {
+      value: true
+    },
+    ...spreadProps
+  });
+  return Object.assign(self, reads);
+};
+/**
+ * Makes a list of your own elements reorderable, by dragging or from the keyboard: spread the group on
+ * the list's element, and make each item with `reorderItem`, keyed with `<For>`. Your app owns
+ * `values`, and sets them from `onReorder`; a reorder it makes itself animates too. Call it where you'd
+ * make a signal, under a `WardicProvider`. `Reorder.Group` is built on it.
+ *
+ * @example
+ * const list = reorderGroup({ values: items, onReorder: setItems })
+ * <ul {...list}>
+ *   <For each={items()}>
+ *     {(item) => {
+ *       const row = reorderItem(list, { value: item })
+ *       return <li {...row}>{item.name}</li>
+ *     }}
+ *   </For>
+ * </ul>
+ * @see https://wardic.dev/reference/solid/reorder/reorder-group
+ */
+// ADR-0020. Given to `ref` alone, it's client-only. Its axis is the config's, else detected from the
+// items' boxes after every Measure pass (for their touch-action); a drag resolves its own at its start.
+// A `values` change re-measures. On a server it renders the element's style and nothing else: no
+// controller, no runtime; its `group`, `move` and `controller` do nothing (ADR-0021).
+export function reorderGroup(config) {
+  if (Predicate.isFunction(config)) throw new Error(WHOLE_GROUP_ACCESSOR);
+  const beside = {};
+  const view = groupViewOf(config, beside);
+  const cfg = () => view;
+  const runtime = useWardicRuntime();
+  if (isServer) return layered(serverReorderGroup(cfg), config, beside);
+  const [detected, setDetected] = createSignal("y");
+  // Its events (#257 item 3), ended with it.
+  const events = new Waiters(GROUP_GONE);
+  onCleanup(() => events.dispose());
+  // Whether the app's `move` is the call under way: its reorder isn't flushed.
+  let moving = false;
+  // The group's controller, over the provider's projection system and the Environment's channel to
+  // assistive technology (ADR-0037), in a Scope of the group's own, closed with its owner: set before
+  // the controller is built, so one that fails as it's built leaves nothing (#618).
+  const scope = OwnerScope.open(runtime);
+  onCleanup(() => OwnerScope.close(runtime, scope, CLOSE_FAILED));
+  const controller = runtime.runSync(ReorderController.make({
+    values: () => untrack(() => cfg().values),
+    // The DOM follows a reorder within the controller's call, as on Solid 1, whose updates are
+    // synchronous: the controller keeps focus on a lifted item right after (moving a focused node
+    // can blur it), and Solid 2 would otherwise move the node at its next flush, after that.
+    // A `move` the app calls doesn't: nothing reads the DOM after it, and the app may call it inside
+    // an `action`, where Solid refuses a flush (FLUSH_IN_ACTION, #257 item 12).
+    onReorder: values => {
+      const onReorder = untrack(() => cfg().onReorder);
+      if (moving) return onReorder(values);
+      flush(() => onReorder(values));
+    },
+    onReorderEnd: end => events.tell("reorderEnd", () => end),
+    onHoldStart: start => events.tell("holdStart", () => start),
+    onHoldEnd: end => events.tell("holdEnd", () => end),
+    axis: () => Option.fromUndefinedOr(untrack(() => cfg().axis)),
+    onAxis: setDetected,
+    keyedWith: "<For>",
+    keyboard: () => untrack(() => cfg().keyboard) !== false,
+    announcements: () => Option.fromUndefinedOr(untrack(() => cfg().announcements))
+  }).pipe(Effect.provide(useLayoutServices()), Scope.provide(scope)));
+  // The app's axis, else the detected one. When the app's is cleared, detected here, from the boxes the
+  // engine holds, so the items' touch-action follows in the same flush (#257's audit: an effect that
+  // detected it wrote a signal the items read a flush late, EFFECT_RELAY_TEAR). A Measure pass's change
+  // comes through `onAxis`. Lazy: read first by an item, so a given group's `axis` beside it, laid
+  // over its config by the `Reorder.Group` the items render in, is the one it tracks (#398).
+  const axis = createMemo(() => UndefinedOr.match(cfg().axis, {
+    onDefined: identity,
+    onUndefined: () => {
+      detected();
+      return controller.detect();
+    }
+  }), AXIS_MEMO);
+  // A `values` change re-measures, so the items animate to their new slots whoever reordered them.
+  createEffect(() => cfg().values, () => {
+    controller.valuesChanged();
+  }, CLIENT_ONLY_DEFERRED);
+  const attach = element => {
+    // Given to `ref` alone, the element has no spread's style: the group sets its own.
+    if (element.style.getPropertyValue("overflow-anchor") === "") element.style.setProperty("overflow-anchor", "none");
+    controller.attach(element);
+  };
+  return layered(refCarrying(attach, {
+    style: {
+      get: () => groupStyleOf(cfg().style),
+      enumerable: true
+    }
+  }, {
+    group: controller.group,
+    axis,
+    move: (value, toIndex) => {
+      moving = true;
+      try {
+        controller.move(value, toIndex);
+      } finally {
+        moving = false;
+      }
+    },
+    next: name => events.wait(name),
+    each: name => eachOf(events, name),
+    when: name => whenOf(events, name),
+    controller,
+    ...keyboardOf(cfg)
+  }), config, beside);
+}
+/** The group's axis memo's options: client-only, and lazy (#398). */
+const AXIS_MEMO = {
+  ...CLIENT_ONLY,
+  lazy: true
+};
+/** `group`, its config and its layer kept for a `Reorder.Group` it's given to (#398). */
+const layered = (group, config, beside) => {
+  GROUP_LAYERS.set(group, {
+    config,
+    beside
+  });
+  return group;
+};
+/**
+ * A given group's element props (#398): each config key its `Reorder.Group` sets, laid over the
+ * group's config, read through the element's prop. A key the group's config sets too is an error.
+ */
+const besideGroup = (local, group) => {
+  const layer = UndefinedOr.getOrThrow(GROUP_LAYERS.get(group));
+  const given = setKeysOf(local, GROUP_CONFIG);
+  const twice = setKeysOf(layer.config, given);
+  if (twice.length > 0) {
+    throw new Error(`Reorder.Group: ${listOf(twice)} set both in the group given to groupRef and on the element (#398). ` + "Set each key in one place: in reorderGroup({ … }), or on the element.");
+  }
+  Arr.forEach(given, key => Object.defineProperty(layer.beside, key, {
+    enumerable: true,
+    configurable: true,
+    get: () => local[key]
+  }));
+};
+/** What a group's Scope reports when one of its finalizers fails as its owner goes. */
+const CLOSE_FAILED = "wardic.reorder: a finalizer failed";
+/**
+ * {@link reorderGroup} during a server render (ADR-0021): the group element's style and the app's
+ * axis, else `"y"`; its `group`, `move` and `controller` do nothing.
+ */
+const serverReorderGroup = cfg => {
+  const controller = ReorderController.inert;
+  const axis = () => UndefinedOr.match(cfg().axis, {
+    onUndefined: () => "y",
+    onDefined: identity
+  });
+  return refCarrying(constUndefined, {
+    style: {
+      value: groupStyleOf(untrack(() => cfg().style)),
+      enumerable: true
+    }
+  }, {
+    group: controller.group,
+    axis,
+    move: constUndefined,
+    next: neverLands,
+    each: () => NO_EVENTS,
+    when: serverWhen,
+    controller,
+    ...keyboardOf(cfg)
+  });
+};
+/** A Reorder item's drag axis for its gesture's axis: a grid's `xy` is a free drag. Built once, at module load. */
+const dragAxisFor = Match.type().pipe(Match.when("xy", () => true), Match.orElse(axis => axis));
+/**
+ * What an item adds to its spread for the keyboard reorder (ADR-0037): `tabindex="0"` while the
+ * group's keyboard is on and the app gave no `tabindex`, and `aria-describedby` with the group's
+ * instructions (`describedBy`, set on the client) after the app's own ids.
+ */
+const keyboardAttributes = (list, cfg, describedBy) => ({
+  tabindex: {
+    get: () => UndefinedOr.match(cfg().tabindex, {
+      onDefined: identity,
+      onUndefined: () => Bool.match(list.keyboard(), {
+        onTrue: () => 0,
+        onFalse: constUndefined
+      })
+    }),
+    enumerable: true
+  },
+  "aria-describedby": {
+    get: () => {
+      const ids = Arr.filter([cfg()["aria-describedby"], Bool.match(list.keyboard(), {
+        onTrue: describedBy,
+        onFalse: constUndefined
+      })], Predicate.isNotUndefined);
+      return Bool.match(ids.length === 0, {
+        onTrue: constUndefined,
+        onFalse: () => ids.join(" ")
+      });
+    },
+    enumerable: true
+  }
+});
+/**
+ * Makes an element an item of a Reorder group: a ward, spread on the element, `<li {...row}>`, or given
+ * to `Reorder.Item`'s `wardRef`. `value` is its value in the group's `values`, read once; the rest is a
+ * ward's config, but `layout` (`true` or `"position"`), `layoutId` and `drag`, which the group sets. It's
+ * a tab stop for the keyboard reorder: your own `tabindex` and `aria-describedby` go in its config.
+ * Call it where you'd make a signal: in a `<For>` callback.
+ *
+ * @example
+ * const row = reorderItem(list, { value: item, whileDrag: { scale: 1.05 } })
+ * <li {...row}>{item.name}</li>
+ * @see https://wardic.dev/reference/solid/reorder/reorder-item
+ */
+// ADR-0020. Given to `ref` alone, it's client-only. The element takes the drag defaults, with the
+// group's axis's touch-action, which its `style` can override.
+export function reorderItem(list, config, options) {
+  return reorderItemWith(list, config, UndefinedOr.map(options, o => o.parent), undefined);
+}
+/** A `<Reorder>` item's mark (#349): the group it's in. Internal. */
+export const REORDER_ITEM = Symbol("wardic.reorderItem");
+/** {@link reorderItem} for `tag` (`Reorder.Item`'s `as`). Internal. */
+const reorderItemWith = (list, config, parent, tag) => {
+  if (Predicate.isFunction(config)) throw new Error(WHOLE_ITEM_ACCESSOR);
+  // Its own keys read per key (#259); the rest are its ward's config, read by the ward. Its `layout`
+  // is its Layout mode, `true` or `"position"` whatever the config gives, read at each layout
+  // animation's start as any ward's is (ADR-0009, *Amendment (#42)*).
+  const own = ITEM_VIEW.of(config);
+  const cfg = () => own;
+  const fixed = {
+    layout: () => itemLayoutOf(own.layout)
+  };
+  const wardConfig = config;
+  // Its group's axis's `touch-action`, under its style: none when its own presses don't drag it
+  // (`dragListener={false}`, #431), as with its other drag defaults, so a list dragged by handles scrolls by touch.
+  const touchAction = Bool.match(untrack(() => wardConfig.dragListener) !== false, {
+    onTrue: () => () => ({
+      "touch-action": Style.reorderTouchAction(list.axis())
+    }),
+    onFalse: constUndefined
+  });
+  // On a server the item renders the drag defaults with its group's touch-action, and joins no
+  // controller (ADR-0021); the instructions element exists on the client only.
+  if (isServer) {
+    const row = wardWith(wardConfig, {
+      tag,
+      brings: ITEM_BRINGS,
+      dragAxis: () => true,
+      baseStyle: touchAction,
+      fixed,
+      group: list,
+      parent
+    });
+    return withSpreadProps(Object.defineProperties(row, {
+      [REORDER_ITEM]: {
+        value: list
+      }
+    }), keyboardAttributes(list, cfg, constUndefined));
+  }
+  const runtime = useWardicRuntime();
+  // Its keys' input, the `drag` Feature's it brings (#511).
+  const services = useBrought(ITEM_BRINGS);
+  const value = untrack(() => own.value);
+  // A keyboard lift turns the item's `whileDrag` on (ADR-0037).
+  const [lifted, setLifted] = createSignal(false);
+  let element;
+  const driver = list.controller.item(value, () => Option.fromUndefinedOr(element), setLifted);
+  // An item unmounted mid-gesture gets no end sample: its disposal ends the gesture (and a lift).
+  onCleanup(driver.dispose);
+  // The instructions' id (ADR-0037), derived, so the element is rendered with its `aria-describedby`:
+  // the page's document's, until the element's own replaces it (an iframe's). An effect adds the
+  // instructions element, writing nothing. An effect that wrote the id after the mount relayed
+  // through four effects, each flush showing the item without it (#320).
+  const [document, setDocument] = createSignal(globalThis.document);
+  const describedBy = createMemo(() => DomAnnouncer.instructionsIdOf(document(), list.instructions()), CLIENT_ONLY);
+  createEffect(() => ({
+    doc: document(),
+    text: list.instructions()
+  }), ({
+    doc,
+    text
+  }) => DomAnnouncer.showInstructions(doc, text), CLIENT_ONLY);
+  const row = wardWith(wardConfig, {
+    tag,
+    brings: ITEM_BRINGS,
+    fixed,
+    group: list,
+    parent,
+    dragAxis: () => dragAxisFor(driver.dragAxis()),
+    onDragSample: driver.onSample,
+    onLayoutHandle: driver.register,
+    raiseWhileDragged: true,
+    keysTaken: true,
+    lifted,
+    baseStyle: touchAction,
+    onMount: (el, watch) => {
+      element = el;
+      setDocument(DomAnnouncer.documentOf(el));
+      // Its keys, blurs and presses (ADR-0037), watched in the ward's watch Scope, with no fiber at rest (#379).
+      watch(onDefect => Effect.provideService(watchItemInput(el, driver, effect => void runtime.runFork(effect), onDefect), InputSource.InputSource, inputIn(services())));
+      return () => {
+        element = undefined;
+      };
+    }
+  });
+  // eslint-disable-next-line solid/reactivity -- handed to getters, which read it where the spread tracks them
+  return withSpreadProps(Object.defineProperties(row, {
+    [REORDER_ITEM]: {
+      value: list
+    }
+  }), keyboardAttributes(list, cfg, describedBy));
+};
+// --- Components (ADR-0020: built on the factories) ---------------------------------------------
+/** The nearest `Reorder.Group`'s group, for its items: `null` for none (Solid 2's contexts). */
+const GroupContext = createContext(null);
+const GROUP_OWN = ["values", "onReorder", "axis", "keyboard", "announcements", "instructions", "as", "ref", "style", "children", "groupRef"];
+const ITEM_OWN = [...MOTION_PROPS, "value", "as", "ref", "style", "children", "tabindex", "aria-describedby", "wardRef"];
+/** A group's config keys: beside a given group, each it doesn't set (#398). */
+const GROUP_CONFIG = ["values", "onReorder", "axis", "keyboard", "announcements", "instructions"];
+/** An item's config keys, its motion props and its own: beside a given item, each it doesn't set (#398). */
+const ITEM_CONFIG = [...MOTION_PROPS, "value", "tabindex", "aria-describedby"];
+/** A `<Reorder>` item's keyboard reorder attributes (ADR-0037), which a given item's element carries (#349). */
+const KEYBOARD_ATTRIBUTES = ["tabindex", "aria-describedby"];
+/**
+ * The Wardic element for `tag`, as a plain component: a Slim element's (`w[tag]`, #511), so a Reorder
+ * brings no Feature but its own (ADR-0067 decision 12) and renders under a `strict` section.
+ */
+const wardicTag = tag => UndefinedOr.getOrThrow(w[tag]);
+/** The group given to `groupRef` (#349), or `undefined` for a function or none: read once, untracked, as `ref` is. */
+const givenGroupOf = local => {
+  const ref = untrack(() => local.groupRef);
+  return Bool.match(Predicate.hasProperty(ref, REORDER_GROUP), {
+    onTrue: () => ref,
+    onFalse: constUndefined
+  });
+};
+/**
+ * A list put in order by dragging its items, or from the keyboard, rendered as `as`, `"ul"` by
+ * default. Your app owns `values`, and sets them from `onReorder`; or give it a group made with
+ * `reorderGroup` as `groupRef`. Key its `Reorder.Item`s with `<For>`.
+ *
+ * @see https://wardic.dev/reference/solid/reorder/reorder
+ */
+// ADR-0020, #349: a `reorderGroup` on `w[as]`, the group in context for its items.
+function Group(props) {
+  const local = props;
+  const given = givenGroupOf(local);
+  const list = UndefinedOr.match(given, {
+    onUndefined: () => {
+      // Its props are its config, read per key (#259).
+      const made = reorderGroup(local);
+      // The group, to its `groupRef` (#257 item 3), read once, untracked, as `ref` is.
+      const give = untrack(() => local.groupRef);
+      if (Predicate.isFunction(give)) give(made);
+      return made;
+    },
+    onDefined: group => {
+      besideGroup(local, group);
+      return group;
+    }
+  });
+  const Tag = wardicTag(UndefinedOr.match(untrack(() => local.as), {
+    onUndefined: () => "ul",
+    onDefined: identity
+  }));
+  const rest = omit(props, ...GROUP_OWN);
+  // Its element's style over the group's: `overflow-anchor: none`, under a given group's config (#349).
+  const styleOf = UndefinedOr.match(given, {
+    onUndefined: () => () => pipe(local.style, Style.over(ReorderController.GROUP_STYLE)),
+    onDefined: group => () => pipe(local.style, Style.over(group.style))
+  });
+  return _$createComponent(GroupContext, {
+    value: list,
+    get children() {
+      var _ref$ = refsOf(local, [list]);
+      return _$createComponent(Tag, _$mergeProps(rest, {
+        get style() {
+          return styleOf();
+        },
+        ref(r$) {
+          (typeof _ref$ === "function" || Array.isArray(_ref$)) && _$applyRef(_ref$, r$);
+        },
+        get children() {
+          return local.children;
+        }
+      }));
+    }
+  });
+}
+/**
+ * A `<Reorder>` item given to `Reorder.Item`'s `wardRef` (#349): one of `list`'s, made with
+ * {@link reorderItem}. Its element is driven by a ward of the component's, and carries the item's
+ * keyboard reorder attributes.
+ */
+const givenItem = (list, local, share, tag) => {
+  if (Predicate.isUndefined(share.internal.group)) {
+    throw new Error("Reorder.Item: the ward in wardRef isn't a Reorder item (#349). Make it with reorderItem(list, { value }), list the group it's in.");
+  }
+  if (share.internal.group !== list) {
+    throw new Error("Reorder.Item: the item in wardRef is another group's (#349). Make it with reorderItem(list, …), list the Reorder.Group it renders in.");
+  }
+  const item = untrack(() => local.wardRef);
+  const {
+    ward: row,
+    setup
+  } = drivenWard("Reorder.Item", local, share, {
+    tag
+  }, ITEM_CONFIG);
+  // Its keyboard attributes: the item's, or the element's where it sets one the item doesn't (#398).
+  const keys = Object.defineProperties({}, Object.fromEntries(Arr.map(KEYBOARD_ATTRIBUTES, key => [key, Bool.match(sets(local, key), {
+    onTrue: () => ({
+      enumerable: true,
+      get: () => local[key]
+    }),
+    onFalse: () => UndefinedOr.getOrThrow(Object.getOwnPropertyDescriptor(item, key))
+  })])));
+  return {
+    row,
+    keys,
+    setup
+  };
+};
+/**
+ * An item of the `Reorder.Group` around it, rendered as `as`, `"li"` by default: made from its props,
+ * or an item made with `reorderItem` given as `wardRef`. Outside a group it throws, as Motion's does.
+ *
+ * @see https://wardic.dev/reference/solid/reorder/reorder
+ */
+// ADR-0020, #349: a `reorderItem` on the nearest group.
+function Item(props) {
+  const list = useContext(GroupContext);
+  if (Predicate.isNull(list)) throw new Error("Reorder.Item must be a child of Reorder.Group");
+  const local = props;
+  const tag = UndefinedOr.match(untrack(() => local.as), {
+    onUndefined: () => "li",
+    onDefined: identity
+  });
+  const given = givenOf(local);
+  // One plain element a tag, as every Wardic element's (#618, M3).
+  const Element = staticElementOf(tag);
+  const rest = omit(props, ...ITEM_OWN);
+  const element = UndefinedOr.match(given, {
+    onUndefined: () => {
+      // Its props are its config, read per key (#259); its `layout` is read as a Layout mode.
+      const row = reorderItemWith(list, local, undefined, tag);
+      // Its ward, to the item's `wardRef` (#257).
+      handOver(local, row);
+      // The ward's spread props, as an object: spread as the function it is, it's a source `merge`
+      // calls in a computation, whose keys `spread` can't know, so it inserts children too (#525, #618 M3).
+      const rowProps = row();
+      return {
+        row,
+        setup: undefined,
+        render: () => (() => {
+          var _ref$2 = refsOf(local, [row]);
+          return _$createComponent(Element, _$mergeProps(rest, rowProps, {
+            ref(r$) {
+              (typeof _ref$2 === "function" || Array.isArray(_ref$2)) && _$applyRef(_ref$2, r$);
+            },
+            get children() {
+              return local.children;
+            }
+          }));
+        })()
+      };
+    },
+    onDefined: share => {
+      const {
+        row,
+        keys,
+        setup
+      } = givenItem(list, local, share, tag);
+      return {
+        row,
+        setup,
+        render: () => (() => {
+          var _ref$3 = refsOf(local, [row]);
+          return _$createComponent(Element, _$mergeProps(rest, () => row.with({
+            style: local.style
+          }), keys, {
+            ref(r$) {
+              (typeof _ref$3 === "function" || Array.isArray(_ref$3)) && _$applyRef(_ref$3, r$);
+            },
+            get children() {
+              return local.children;
+            }
+          }));
+        })()
+      };
+    }
+  });
+  // An item that changes what its children read renders its variant context's Provider around them
+  // (#50), as every Wardic element does; any other renders none.
+  const config = UndefinedOr.match(element.setup, {
+    onUndefined: () => wardConfigView(local),
+    onDefined: identity
+  });
+  return Bool.match(untrack(() => changesContext(config)), {
+    onFalse: element.render,
+    onTrue: () => _$createComponent(element.row.Provider, {
+      get children() {
+        return element.render();
+      }
+    })
+  });
+}
+/**
+ * A list put in order by dragging its items, or from the keyboard: `Reorder.Group` and `Reorder.Item`.
+ * Your app owns the order: the group takes it as `values`, and `onReorder` hands each new one back.
+ * Motion's `Reorder`.
+ *
+ * @example
+ * <Reorder.Group values={items()} onReorder={setItems}>
+ *   <For each={items()}>{(item) => <Reorder.Item value={item}>{item}</Reorder.Item>}</For>
+ * </Reorder.Group>
+ * @see https://wardic.dev/reference/solid/reorder/reorder
+ */
+// ADR-0020.
+export const Reorder = {
+  Group,
+  Item
+};
+//# sourceMappingURL=reorder.js.map