@fungi.computer/caps 0.0.0-stage → 0.0.1

package/dist/form-schema.js

@@ -0,0 +1,398 @@
+import { Option, Schema, SchemaAST } from "effect";
+import * as z from "zod";
+/** Holds a field annotation inside schema annotations (Effect or Zod). */
+export class FieldMeta {
+    annotation;
+    constructor(annotation) {
+        this.annotation = annotation;
+    }
+}
+/** Holds the section list inside a struct's annotations. */
+export class SectionsMeta {
+    sections;
+    constructor(sections) {
+        this.sections = sections;
+    }
+}
+const formKey = "caps/form";
+/**
+ * Each `field()` call gets its own key, because both libraries replace an
+ * annotation key wholesale; reading merges every form key in order.
+ */
+let fieldCalls = 0;
+/**
+ * Annotate a schema field for forms. Works with Effect
+ * (`Schema.String.annotate(field({ … }))`) and Zod (`z.string().meta(field({ … }))`).
+ * `label` and `help` also become the schema's `title` and `description`.
+ */
+export function field(annotation) {
+    fieldCalls += 1;
+    const annotations = {
+        [`${formKey}:${String(fieldCalls)}`]: new FieldMeta(annotation),
+    };
+    if (annotation.label !== undefined)
+        annotations.title = annotation.label;
+    if (annotation.help !== undefined)
+        annotations.description = annotation.help;
+    return annotations;
+}
+/** Annotate a struct with its sections, in display order. */
+export function sections(list) {
+    return { [formKey]: new SectionsMeta(list) };
+}
+/** A key or token: masked, never autofilled, with a reveal key. */
+export const Secret = Schema.String.annotate(field({ kind: "secret" })).pipe(Schema.brand("Secret"));
+const humanize = (key) => {
+    const words = key
+        .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+        .replace(/[-_]+/g, " ")
+        .toLowerCase();
+    return words.charAt(0).toUpperCase() + words.slice(1);
+};
+function annotationOf(record) {
+    return Object.values(record ?? {}).reduce((merged, value) => value instanceof FieldMeta ? { ...merged, ...value.annotation } : merged, {});
+}
+/** Later annotations win key by key, so `Secret.annotate(field({ label }))` stays a secret. */
+function mergeAnnotations(records) {
+    return records.reduce((merged, record) => ({ ...merged, ...annotationOf(record) }), {});
+}
+function sectionsOf(record) {
+    const value = record?.[formKey];
+    return value instanceof SectionsMeta ? value.sections : {};
+}
+// ---- Effect -------------------------------------------------------------
+const readLiteral = Schema.decodeUnknownOption(Schema.String);
+function effectLiterals(ast) {
+    if (SchemaAST.isLiteral(ast))
+        return Option.match(readLiteral(ast.literal), {
+            onNone: () => null,
+            onSome: (literal) => [literal],
+        });
+    if (!SchemaAST.isUnion(ast))
+        return null;
+    const literals = [];
+    for (const member of ast.types) {
+        if (SchemaAST.isUndefined(member))
+            continue;
+        const inner = effectLiterals(member);
+        if (inner === null)
+            return null;
+        literals.push(...inner);
+    }
+    return literals;
+}
+function effectValueType(ast) {
+    if (SchemaAST.isString(ast))
+        return { type: "string", literals: [] };
+    if (SchemaAST.isNumber(ast))
+        return { type: "number", nullable: false };
+    if (SchemaAST.isBoolean(ast))
+        return { type: "boolean" };
+    const literals = effectLiterals(ast);
+    if (literals !== null)
+        return { type: "string", literals };
+    if (SchemaAST.isArrays(ast)) {
+        const [item] = ast.rest;
+        if (item === undefined)
+            return null;
+        if (SchemaAST.isString(item))
+            return { type: "strings", literals: [] };
+        const options = effectLiterals(item);
+        return options === null ? null : { type: "strings", literals: options };
+    }
+    if (SchemaAST.isUnion(ast)) {
+        const present = ast.types.filter((member) => !SchemaAST.isUndefined(member) && !SchemaAST.isNull(member));
+        const nullable = ast.types.some((member) => SchemaAST.isNull(member));
+        const [only] = present;
+        if (present.length !== 1 || only === undefined)
+            return null;
+        const inner = effectValueType(only);
+        if (inner?.type === "number")
+            return { type: "number", nullable };
+        return nullable ? null : inner;
+    }
+    return null;
+}
+function effectFields(schema) {
+    const ast = schema.ast;
+    if (!SchemaAST.isObjects(ast))
+        throw new Error("A schema form needs a Schema.Struct.");
+    const fields = ast.propertySignatures.map((property) => {
+        const name = String(property.name);
+        const encoded = SchemaAST.toEncoded(property.type);
+        // File declarations are opaque to inference; the annotation names the input.
+        // `.check()` moves later annotations onto the check; read them all.
+        const annotation = mergeAnnotations([
+            property.type.annotations,
+            ...(property.type.checks ?? []).map((check) => check.annotations),
+        ]);
+        const valueType = annotation.kind === "file" ? { type: "files" } : effectValueType(encoded);
+        if (valueType === null)
+            throw new Error(`Schema field "${name}" has no form control. Annotate it with field({ render }) or a kind.`);
+        return {
+            name,
+            valueType,
+            optional: property.type.context?.isOptional === true,
+            annotation,
+            title: SchemaAST.resolveTitle(property.type),
+            description: SchemaAST.resolveDescription(property.type),
+        };
+    });
+    return {
+        fields,
+        sections: sectionsOf(SchemaAST.resolve(ast)),
+    };
+}
+function zodUnwrap(node) {
+    let current = node;
+    let optional = false;
+    let nullable = false;
+    for (;;) {
+        if (current instanceof z.ZodOptional) {
+            optional = true;
+            current = current.unwrap();
+        }
+        else if (current instanceof z.ZodNullable) {
+            nullable = true;
+            current = current.unwrap();
+        }
+        else if (current instanceof z.ZodDefault) {
+            current = current.unwrap();
+        }
+        else if (current instanceof z.ZodPipe) {
+            current = current.in;
+        }
+        else
+            return { node: current, optional, nullable };
+    }
+}
+function zodLiterals(node) {
+    if (node instanceof z.ZodUnion) {
+        const members = node.options.map((option) => zodLiterals(option));
+        return members.some((member) => member === null)
+            ? null
+            : members.flatMap((member) => member ?? []);
+    }
+    const values = node instanceof z.ZodEnum
+        ? node.options
+        : node instanceof z.ZodLiteral
+            ? [...node.values]
+            : null;
+    if (values === null)
+        return null;
+    const literals = values.map((value) => readLiteral(value));
+    return literals.every(Option.isSome)
+        ? literals.map((literal) => literal.value)
+        : null;
+}
+function zodValueType(node) {
+    const { node: inner, nullable } = zodUnwrap(node);
+    if (inner instanceof z.ZodString)
+        return { type: "string", literals: [] };
+    if (inner instanceof z.ZodNumber)
+        return { type: "number", nullable };
+    if (inner instanceof z.ZodBoolean)
+        return { type: "boolean" };
+    const literals = zodLiterals(inner);
+    if (literals !== null)
+        return { type: "string", literals };
+    if (inner instanceof z.ZodArray) {
+        const item = zodUnwrap(inner.element).node;
+        if (item instanceof z.ZodString)
+            return { type: "strings", literals: [] };
+        const options = zodLiterals(item);
+        return options === null ? null : { type: "strings", literals: options };
+    }
+    return null;
+}
+/** Zod keeps `.meta()` on the node it was called on: collect inner to outer. */
+function zodMetas(node) {
+    const chain = [node];
+    for (;;) {
+        const last = chain[chain.length - 1];
+        if (last === undefined)
+            break;
+        const next = last instanceof z.ZodOptional ||
+            last instanceof z.ZodNullable ||
+            last instanceof z.ZodDefault
+            ? last.unwrap()
+            : last instanceof z.ZodPipe
+                ? last.in
+                : last;
+        if (next === last)
+            break;
+        chain.push(next);
+    }
+    return chain.reverse().map((entry) => z.globalRegistry.get(entry));
+}
+function zodMeta(node) {
+    return zodMetas(node).reduce((merged, meta) => ({ ...merged, ...meta }), {});
+}
+function zodEntries(object) {
+    return Object.entries(object.shape);
+}
+function zodFields(schema) {
+    const root = zodUnwrap(schema).node;
+    if (!(root instanceof z.ZodObject))
+        throw new Error("A schema form needs a z.object.");
+    const fields = zodEntries(root).map(([name, node]) => {
+        const metas = zodMetas(node);
+        const annotation = mergeAnnotations(metas);
+        const valueType = annotation.kind === "file" ? { type: "files" } : zodValueType(node);
+        if (valueType === null)
+            throw new Error(`Schema field "${name}" has no form control. Annotate it with field({ render }) or a kind.`);
+        const meta = zodMeta(node);
+        return {
+            name,
+            valueType,
+            optional: zodUnwrap(node).optional,
+            annotation,
+            title: meta.title,
+            description: meta.description,
+        };
+    });
+    return {
+        fields,
+        sections: sectionsOf(zodMeta(schema)),
+    };
+}
+// ---- Resolution ---------------------------------------------------------
+function resolveOptions(values, annotation) {
+    const labels = annotation.options ?? {};
+    const keys = values.length > 0 ? values : Object.keys(labels);
+    return keys.map((value) => {
+        const entry = labels[value];
+        const option = entry === undefined
+            ? {}
+            : entry instanceof Object
+                ? entry
+                : { label: entry };
+        return {
+            value,
+            label: option.label ?? humanize(value),
+            description: option.description,
+            meta: option.meta,
+            icon: option.icon,
+            caption: option.caption,
+            disabled: option.disabled === true,
+        };
+    });
+}
+/** The kind a field renders as: its annotation wins, then the schema type. */
+function inferKind(valueType, options) {
+    const icons = options.some((option) => option.icon !== undefined);
+    switch (valueType.type) {
+        case "boolean":
+            return "switch";
+        case "number":
+            return "number";
+        case "strings":
+            return icons ? "icon-checkboxes" : "checkboxes";
+        case "files":
+            return "file";
+        case "string": {
+            if (options.length === 0)
+                return "text";
+            if (options.length > 12)
+                return "combobox";
+            if (icons)
+                return "icon-radio";
+            const cards = options.some((option) => option.description !== undefined || option.meta !== undefined);
+            return cards || options.length <= 3 ? "radio" : "select";
+        }
+    }
+}
+function emptyValue(valueType, options) {
+    switch (valueType.type) {
+        case "boolean":
+            return false;
+        case "number":
+            return valueType.nullable ? null : 0;
+        case "strings":
+        case "files":
+            return [];
+        case "string":
+            return options[0]?.value ?? "";
+    }
+}
+/** Read a form's fields, sections and empty defaults from its schema. */
+export function describeSchema(schema) {
+    const raw = schema instanceof z.ZodType ? zodFields(schema) : effectFields(schema);
+    const fields = raw.fields.map((entry, index) => {
+        const { kind: annotatedKind, ...annotation } = entry.annotation;
+        const options = resolveOptions(entry.valueType.type === "string" || entry.valueType.type === "strings"
+            ? entry.valueType.literals
+            : [], entry.annotation);
+        const help = annotation.help ?? entry.description;
+        return {
+            ...annotation,
+            name: entry.name,
+            label: annotation.label ?? entry.title ?? humanize(entry.name),
+            help,
+            kind: annotatedKind ?? inferKind(entry.valueType, options),
+            options,
+            optionalInSchema: entry.optional,
+            index,
+        };
+    });
+    const defaults = {};
+    raw.fields.forEach((entry, index) => {
+        const resolved = fields[index];
+        if (resolved)
+            defaults[entry.name] = emptyValue(entry.valueType, resolved.options);
+    });
+    const order = (field) => field.order ?? field.index;
+    // A section the struct doesn't declare (a field reused from another
+    // schema) falls back to the untitled group rather than disappearing.
+    const sectionOf = (field) => field.section !== undefined && Object.hasOwn(raw.sections, field.section)
+        ? field.section
+        : null;
+    const grouped = (id) => fields
+        .filter((field) => sectionOf(field) === id)
+        .sort((left, right) => order(left) - order(right));
+    const declared = Object.entries(raw.sections).map(([id, section]) => ({
+        id,
+        title: section.title,
+        description: section.description,
+        fields: grouped(id),
+    }));
+    const loose = {
+        id: null,
+        title: undefined,
+        description: undefined,
+        fields: grouped(null),
+    };
+    return {
+        fields,
+        sections: [loose, ...declared].filter((section) => section.fields.length > 0),
+        defaults,
+    };
+}
+/** The schema as a Standard Schema validator for TanStack Form. */
+export function standardSchema(schema) {
+    const validator = schema instanceof z.ZodType ? schema : Schema.toStandardSchemaV1(schema);
+    return {
+        "~standard": {
+            ...validator["~standard"],
+            validate: (value) => {
+                const result = validator["~standard"].validate(value);
+                return result instanceof Promise
+                    ? result.then((validated) => formIssues(validated))
+                    : formIssues(result);
+            },
+        },
+    };
+}
+/** Flat form controls own their array-item errors, such as one oversized file. */
+function formIssues(result) {
+    return result.issues === undefined
+        ? result
+        : {
+            issues: result.issues.map((issue) => issue.path === undefined
+                ? issue
+                : {
+                    ...issue,
+                    path: issue.path.slice(0, 1),
+                }),
+        };
+}

package/dist/form.d.ts

@@ -0,0 +1,30 @@
+import { Field as BoundField, type DeepKeys, type DeepValue, type FieldValidateOrFn, type FieldAsyncValidateOrFn, type FormValidateOrFn, type FormAsyncValidateOrFn } from "@tanstack/react-form";
+import type { ComponentProps, ReactNode } from "react";
+import { type ButtonProps } from "./components/button.js";
+import { type FieldProps, type FormFooterProps } from "./components/field.js";
+/** TanStack field binding with Caps labels, descriptions, errors, and control ARIA. */
+export declare function FormField<TParentData, TName extends DeepKeys<TParentData>, TData extends DeepValue<TParentData, TName>, TOnMount extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChange extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnChangeAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnBlur extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnBlurAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnSubmit extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnSubmitAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TOnDynamic extends undefined | FieldValidateOrFn<TParentData, TName, TData>, TOnDynamicAsync extends undefined | FieldAsyncValidateOrFn<TParentData, TName, TData>, TFormOnMount extends undefined | FormValidateOrFn<TParentData>, TFormOnChange extends undefined | FormValidateOrFn<TParentData>, TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnBlur extends undefined | FormValidateOrFn<TParentData>, TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>, TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>, TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>, TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>, TSubmitMeta>({ children, label, description, orientation, optional, required, className, ...options }: ComponentProps<typeof BoundField<TParentData, TName, TData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TFormOnMount, TFormOnChange, TFormOnChangeAsync, TFormOnBlur, TFormOnBlurAsync, TFormOnSubmit, TFormOnSubmitAsync, TFormOnDynamic, TFormOnDynamicAsync, TFormOnServer, TSubmitMeta>> & Pick<FieldProps, "label" | "description" | "orientation" | "optional" | "required" | "className">): import("react/jsx-runtime").JSX.Element;
+/** Values read by the submit action from TanStack’s form store. */
+export type SubmissionState = {
+    canSubmit: boolean;
+    isSubmitting: boolean;
+};
+/** Footer presentation plus the submit action; TanStack owns availability and busy state. */
+export type SubmitFooterProps = Omit<FormFooterProps, "children"> & {
+    form: {
+        /** TanStack’s reactive selector component. */
+        Subscribe: (props: {
+            selector: (state: SubmissionState) => SubmissionState;
+            children: (state: SubmissionState) => ReactNode;
+        }) => ReactNode;
+    };
+    label: ReactNode;
+    disabled?: boolean;
+    buttonProps?: Omit<ButtonProps, "type" | "disabled" | "loading" | "children" | "onClick" | "asChild">;
+};
+/** Submit button subscribed to TanStack's canSubmit/isSubmitting store state. */
+export declare function SubmitFooter({ form, label, disabled, buttonProps, ...props }: SubmitFooterProps): import("react/jsx-runtime").JSX.Element;
+export { effectValidator, fieldError } from "./form-error.js";
+export * from "./schema-form.js";
+export { FormFields, type FormFieldsProps } from "./form-fields.js";
+export * from "./form-schema.js";

package/dist/form.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field as BoundField, useSelector, } from "@tanstack/react-form";
+import { Button } from "./components/button.js";
+import { fieldError } from "./form-error.js";
+import { Field, FormFooter, } from "./components/field.js";
+/** TanStack field binding with Caps labels, descriptions, errors, and control ARIA. */
+export function FormField({ children, label, description, orientation = "vertical", optional = false, required = false, className, ...options }) {
+    const submitted = useSelector(options.form.store, (state) => state.submissionAttempts > 0);
+    return (_jsx(BoundField, { ...options, children: (field) => (_jsx(Field, { label: label, description: description, orientation: orientation, optional: optional, required: required, className: className, error: field.state.meta.isBlurred || submitted
+                ? fieldError(field.state.meta)
+                : undefined, children: children(field) })) }));
+}
+/** Submit button subscribed to TanStack's canSubmit/isSubmitting store state. */
+export function SubmitFooter({ form, label, disabled = false, buttonProps, ...props }) {
+    return (_jsx(form.Subscribe, { selector: ({ canSubmit, isSubmitting }) => ({ canSubmit, isSubmitting }), children: ({ canSubmit, isSubmitting }) => (_jsx(FormFooter, { ...props, children: _jsx(Button, { ...buttonProps, type: "submit", disabled: disabled || !canSubmit || isSubmitting, loading: isSubmitting, children: label }) })) }));
+}
+export { effectValidator, fieldError } from "./form-error.js";
+export * from "./schema-form.js";
+export { FormFields } from "./form-fields.js";
+export * from "./form-schema.js";

package/dist/lib/cn.d.ts

@@ -0,0 +1,8 @@
+import { cva } from "class-variance-authority";
+/** A conditional class value accepted by cn. */
+export type { ClassValue } from "cn";
+export { cva };
+/** Merge conditional classes with Tailwind rules and Stipe's named spacing. */
+export declare const cn: import("cn").CnFunction;
+/** Resolve a typed React class-name prop before merging its classes. */
+export declare function resolveClassName<State>(className: string | ((state: State) => string | undefined) | undefined, state: State): string | undefined;

package/dist/lib/cn.js

@@ -0,0 +1,12 @@
+import { STIPE_SPACING_NAMES } from "@fungi.computer/stipe";
+import { cva } from "class-variance-authority";
+import { createCn } from "cn/config";
+export { cva };
+/** Merge conditional classes with Tailwind rules and Stipe's named spacing. */
+export const cn = createCn({
+    extend: { theme: { spacing: [...STIPE_SPACING_NAMES] } },
+});
+/** Resolve a typed React class-name prop before merging its classes. */
+export function resolveClassName(className, state) {
+    return typeof className === "function" ? className(state) : className;
+}

package/dist/lib/format-money.d.ts

@@ -0,0 +1,2 @@
+/** Format USD with cents, preserving sub-cent precision without displaying non-zero amounts as zero. */
+export declare function formatMoney(amount: number): string;

package/dist/lib/format-money.js

@@ -0,0 +1,22 @@
+const regularUsd = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+});
+const subcentUsd = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 5,
+});
+/** Format USD with cents, preserving sub-cent precision without displaying non-zero amounts as zero. */
+export function formatMoney(amount) {
+    if (!Number.isFinite(amount))
+        throw new RangeError("Money amount must be finite");
+    if (amount !== 0 && Math.abs(amount) < 0.00001)
+        return amount < 0 ? ">-$0.01" : "<$0.01";
+    return amount !== 0 && Math.abs(amount) < 0.01
+        ? subcentUsd.format(amount)
+        : regularUsd.format(amount);
+}

package/dist/lib/glide.d.ts

@@ -0,0 +1,12 @@
+import { type RefCallback } from "react";
+/**
+ * One highlight that glides between a list's rows instead of blinking from
+ * row to row. `lit` selects the highlighted row (keyboard or pointer). While
+ * the highlight moves, a single stand-in carrying that row's own resting
+ * background and radius travels from the previous row and the rows' own
+ * highlights are held back, so at rest every row looks exactly as it always
+ * has. Within one open list the glide remembers its last row, so leaving and
+ * re-entering glides from where it was. Timing and easing are the theme's;
+ * reduced motion moves the highlight at once.
+ */
+export declare function useGlide(lit: string): RefCallback<HTMLElement>;

package/dist/lib/glide.js

@@ -0,0 +1,143 @@
+import { useCallback, useRef } from "react";
+import { canAnimate, motionEasing, readMotion } from "./motion.js";
+/**
+ * The attribute a row carries while the glide stands in for its highlight:
+ * empty while the stand-in travels, `measure` while its resting colour is read.
+ */
+const glideStandInAttribute = "data-glide-stand-in";
+function boxIn(host, element) {
+    const outer = host.getBoundingClientRect();
+    const inner = element.getBoundingClientRect();
+    // Host-relative and scroll-aware, so a scrolled list glides true.
+    return {
+        x: inner.left - outer.left + host.scrollLeft - host.clientLeft,
+        y: inner.top - outer.top + host.scrollTop - host.clientTop,
+        width: inner.width,
+        height: inner.height,
+    };
+}
+function place(box) {
+    return {
+        transform: `translate(${String(box.x)}px, ${String(box.y)}px)`,
+        width: `${String(box.width)}px`,
+        height: `${String(box.height)}px`,
+    };
+}
+/**
+ * One highlight that glides between a list's rows instead of blinking from
+ * row to row. `lit` selects the highlighted row (keyboard or pointer). While
+ * the highlight moves, a single stand-in carrying that row's own resting
+ * background and radius travels from the previous row and the rows' own
+ * highlights are held back, so at rest every row looks exactly as it always
+ * has. Within one open list the glide remembers its last row, so leaving and
+ * re-entering glides from where it was. Timing and easing are the theme's;
+ * reduced motion moves the highlight at once.
+ */
+export function useGlide(lit) {
+    const detach = useRef(null);
+    // A callback ref, so a list that mounts later (a popover's) still glides.
+    return useCallback((element) => {
+        detach.current?.();
+        detach.current = element ? attachGlide(element, lit) : null;
+    }, [lit]);
+}
+function attachGlide(element, lit) {
+    if (!canAnimate(element))
+        return () => undefined;
+    const document = element.ownerDocument;
+    let current = element.querySelector(lit);
+    let last = current ? boxIn(element, current) : null;
+    let ghost = null;
+    let flight = null;
+    const standIns = new Set();
+    const release = () => {
+        for (const row of standIns)
+            row.removeAttribute(glideStandInAttribute);
+        standIns.clear();
+        if (ghost)
+            ghost.hidden = true;
+        flight = null;
+    };
+    const stage = () => {
+        if (ghost)
+            return ghost;
+        const created = document.createElement("span");
+        created.className = "caps-glide";
+        created.setAttribute("aria-hidden", "true");
+        element.prepend(created);
+        // The stand-in paints above the list's background, below its rows.
+        element.classList.add("caps-glide-host");
+        if (getComputedStyle(element).position === "static")
+            element.classList.add("caps-glide-anchor");
+        ghost = created;
+        return created;
+    };
+    const glide = (to, away) => {
+        const motion = readMotion(element);
+        const target = boxIn(element, to);
+        const from = flight && ghost ? boxIn(element, ghost) : last;
+        last = target;
+        flight?.cancel();
+        release();
+        if (motion.reduced || from === null)
+            return;
+        if (Math.abs(from.y - target.y) < 1 && Math.abs(from.x - target.x) < 1)
+            return;
+        // Read the row's resting highlight, not a frame of its colour transition.
+        to.setAttribute(glideStandInAttribute, "measure");
+        const style = getComputedStyle(to);
+        const background = style.backgroundColor;
+        const radius = style.borderRadius;
+        for (const row of [to, away]) {
+            if (!row)
+                continue;
+            row.setAttribute(glideStandInAttribute, "");
+            standIns.add(row);
+        }
+        const stand = stage();
+        stand.hidden = false;
+        stand.style.backgroundColor = background;
+        stand.style.borderRadius = radius;
+        const animation = stand.animate([place(from), place(target)], {
+            duration: motion.normal,
+            easing: motionEasing(motion, motion.ease),
+            fill: "forwards",
+        });
+        flight = animation;
+        animation.addEventListener("finish", () => {
+            if (flight === animation)
+                release();
+        });
+    };
+    const update = () => {
+        const next = element.querySelector(lit);
+        if (next === current)
+            return;
+        const away = current;
+        current = next;
+        // A row that lights from nothing glides from the remembered row.
+        if (next)
+            glide(next, away);
+    };
+    const observer = new MutationObserver(update);
+    observer.observe(element, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: [
+            "data-highlighted",
+            "data-active",
+            "data-navigation",
+            "aria-selected",
+        ],
+    });
+    element.addEventListener("pointerover", update);
+    element.addEventListener("pointerout", update);
+    return () => {
+        observer.disconnect();
+        element.removeEventListener("pointerover", update);
+        element.removeEventListener("pointerout", update);
+        flight?.cancel();
+        release();
+        ghost?.remove();
+    };
+}

package/dist/lib/ime.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardEvent } from "react";
+/** Native composition, including confirmation events whose flag is already false. */
+export declare function isImeComposing(event: Pick<KeyboardEvent, "nativeEvent">): boolean;

package/dist/lib/ime.js

@@ -0,0 +1,8 @@
+import * as z from "zod/mini";
+// Some browsers clear isComposing before dispatching the confirmation key.
+const compositionConfirmation = z.object({ keyCode: z.literal(229) });
+/** Native composition, including confirmation events whose flag is already false. */
+export function isImeComposing(event) {
+    return (event.nativeEvent.isComposing ||
+        z.safeParse(compositionConfirmation, event.nativeEvent).success);
+}