@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/forms/effects/check/checkScribble.js

@@ -0,0 +1,42 @@
+import { CHECKED, MARK, at, choiceLayer, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkScribble";
+const ROOT = choiceOf(ID);
+const PEN = `${choiceLayer(ID)} [data-sx-choice-svg="pen"]`;
+/** Our own strokes, a little loose, running past the box's edges like a pen would. */
+const PATHS = {
+    check: "M3.5 13.2c1.7.4 3.6 2.4 5.3 5.5C11.4 13.4 15.4 7.7 21 3.7",
+    cross: "M4.8 5.2c3.8 4.3 9.4 10 14.4 14.2M19.6 4.6c-4.7 4.4-9.7 9.7-14.8 14.8",
+};
+// The box stays an outline (no fill) and the stroke draws over it. The drawn stroke is the state: it holds under
+// reduced motion, where it just appears.
+const STATE = `  ${at(ROOT)} {
+    --sx-choice-fill: transparent;
+  }
+  ${at(`${ROOT} ${MARK}`)} {
+    display: none;
+  }
+  ${at(PEN)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: 2.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 1 2;
+    stroke-dashoffset: 1.01;
+  }
+  ${at(inItem(ROOT, CHECKED, PEN))} {
+    stroke-dashoffset: 0;
+  }`;
+const CSS = `  ${at(PEN)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ease-in-out;
+  }`;
+/** A loose hand-drawn tick, or a cross, scribbles itself over the box. */
+export function checkScribble(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["checkbox"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.4}s` },
+        layers: [{ slot: "box", keep: true, svg: { viewBox: "0 0 24 24", children: [{ tag: "path", part: "pen", attrs: { pathLength: 1, d: PATHS[options.kind ?? "check"] } }] } }],
+        claims: ["mark"],
+    });
+}

package/dist/forms/effects/check/checkScribble.schema.d.ts

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

package/dist/forms/effects/check/checkScribble.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_SCRIBBLE_SCHEMA = defineSchema()({
+    id: "checkScribble",
+    family: "form",
+    factory: "checkScribble",
+    fields: {
+        kind: { kind: "choice", label: "Mark", values: ["check", "cross"], labels: { check: "Tick", cross: "Cross" }, default: "check" },
+        color: { kind: "color", label: "Ink", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/forms/effects/check/checkStrike.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface CheckStrikeOptions {
+    /** `"line"`: a line strikes the words through. `"box"`: the box flattens into a bar first. Default `"line"`. */
+    readonly kind?: "line" | "box";
+    /** Seconds the line takes. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A line strikes the words through, the words go quiet; or the box itself flattens into the line. */
+export declare function checkStrike(options?: CheckStrikeOptions): FormEffect;

package/dist/forms/effects/check/checkStrike.js

@@ -0,0 +1,54 @@
+import { BOX, CHECKED, DIR, MARK, TEXT, at, choiceLayer, choiceOf, defineForm, inItem, v, varName } from "../kit.js";
+const ID = "checkStrike";
+const ROOT = choiceOf(ID);
+const LINE = choiceLayer(ID, "line");
+// A to-do list's "done": a line through the words, the words muted. The line sits on the first line of words, as
+// wide as they are (the words stop at their own width). With `kind: "box"` the box squashes into a bar and loses its
+// tick before the line runs (the factors are 1 for "line", so the same sheet serves both). Done is a state: the line
+// and the bar hold under reduced motion.
+const STATE = `  ${at(`${ROOT} ${TEXT}`)} {
+    justify-self: start;
+  }
+  ${at(inItem(ROOT, CHECKED))} {
+    --sx-choice-text: var(--color-sx-muted);
+  }
+  ${at(LINE)} {
+    inset: calc(0.75em - 1px) 0 auto;
+    block-size: 2px;
+    border-radius: 1px;
+    background: currentColor;
+    scale: 0 1;
+    transform-origin: calc(50% - 50% * ${DIR}) 50%;
+  }
+  ${at(inItem(ROOT, CHECKED, LINE))} {
+    scale: 1 1;
+  }
+  ${at(inItem(ROOT, CHECKED, BOX))} {
+    scale: 1 ${v(ID, "squash")};
+  }
+  ${at(inItem(ROOT, CHECKED, MARK))} {
+    opacity: ${v(ID, "mark")};
+  }`;
+const CSS = `  ${at(LINE)} {
+    transition: scale ${v(ID, "time")} ease-out ${v(ID, "delay")};
+  }
+  ${at(`${ROOT} ${BOX}`)} {
+    transition: scale calc(${v(ID, "time")} * 0.6) ease-out;
+  }`;
+/** A line strikes the words through, the words go quiet; or the box itself flattens into the line. */
+export function checkStrike(options = {}) {
+    const box = options.kind === "box";
+    const time = options.duration ?? 0.3;
+    return defineForm(ID, CSS, {
+        fits: ["checkbox"],
+        state: STATE,
+        vars: {
+            [varName(ID, "time")]: `${time}s`,
+            [varName(ID, "squash")]: box ? 0.2 : 1,
+            [varName(ID, "mark")]: box ? 0 : 1,
+            [varName(ID, "delay")]: box ? `${time * 0.5}s` : "0s",
+        },
+        layers: [{ slot: "text", part: "line", keep: true }],
+        claims: box ? ["box", "mark"] : [],
+    });
+}

package/dist/forms/effects/check/checkStrike.schema.d.ts

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

package/dist/forms/effects/check/checkStrike.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHECK_STRIKE_SCHEMA = defineSchema()({
+    id: "checkStrike",
+    family: "form",
+    factory: "checkStrike",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["line", "box"], labels: { line: "A line through the words", box: "The box flattens into the line" }, default: "line" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/forms/effects/chip/chipCheck.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface ChipCheckOptions {
+    /** Seconds the check takes to slide in. Default `0.2`. */
+    readonly duration?: number;
+}
+/** A chip's check slides in from its start as it turns on, the words making room, and its tick draws. */
+export declare function chipCheck(options?: ChipCheckOptions): FormEffect;

package/dist/forms/effects/chip/chipCheck.js

@@ -0,0 +1,26 @@
+import { CHIP_CHECK, CHIP_ON, CHIP_OPTION, DIR, EASE, SPRING, at, chipsOf, defineForm, v, varName } from "../kit.js";
+const ID = "chipCheck";
+const ROOT = chipsOf(ID);
+// A chip that is on opens a column for its check (the base sheet's state: a grid column from 0fr to 1fr). This is the
+// motion: the column opens smoothly, pushing the words aside, the check slides in from the chip's start and its tick
+// draws, a moment later. Transitions only, so nothing plays on load.
+const CSS = `  ${at(`${ROOT} ${CHIP_OPTION}`)} {
+    transition: grid-template-columns ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${ROOT} ${CHIP_CHECK} > svg`)} {
+    transition: translate ${v(ID, "time")} ${SPRING}, opacity ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${ROOT} ${CHIP_OPTION}:not(${CHIP_ON}) ${CHIP_CHECK} > svg`)} {
+    translate: calc(-100% * ${DIR}) 0;
+    opacity: 0;
+  }
+  ${at(`${ROOT} ${CHIP_CHECK} path`)} {
+    transition: stroke-dashoffset ${v(ID, "time")} ${EASE} calc(${v(ID, "time")} * 0.5);
+  }
+  ${at(`${ROOT} ${CHIP_OPTION}:not(${CHIP_ON}) ${CHIP_CHECK} path`)} {
+    transition-delay: 0s;
+  }`;
+/** A chip's check slides in from its start as it turns on, the words making room, and its tick draws. */
+export function chipCheck(options = {}) {
+    return defineForm(ID, CSS, { fits: ["chip"], vars: { [varName(ID, "time")]: `${options.duration ?? 0.2}s` } });
+}

package/dist/forms/effects/chip/chipCheck.schema.d.ts

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

package/dist/forms/effects/chip/chipCheck.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHIP_CHECK_SCHEMA = defineSchema()({
+    id: "chipCheck",
+    family: "form",
+    factory: "chipCheck",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.4, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/chip/chipMerge.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface ChipMergeOptions {
+    /** The colour of the chips that are on. Default a light tint of `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** Chips that are on next to each other merge into one block: a bridge fills the gap and the corners that meet square off. */
+export declare function chipMerge(options?: ChipMergeOptions): FormEffect;

package/dist/forms/effects/chip/chipMerge.js

@@ -0,0 +1,63 @@
+import { CHIP_CONTROL, CHIP_ON, CHIP_OPTION, DIR, at, chipLayer, chipsOf, defineForm, v, varName } from "../kit.js";
+const ID = "chipMerge";
+const ROOT = chipsOf(ID);
+const PILL = chipLayer(ID, "pill");
+const BRIDGE = chipLayer(ID, "bridge");
+const NEXT_ON = `:has(+ ${CHIP_OPTION} ${CHIP_CONTROL}:checked)`;
+/** The look's border width (a hook it sets), so the pill covers the chip's border too. */
+const BW = "var(--sx-chip-bw, 0px)";
+// Each chip that is on sits on a pill, its own border made invisible. Between two chips that are on, a bridge the size of
+// the gap fills in, and the corners that meet square off: a run of chips reads as one block. The pills and bridges are
+// the state; only how they come and go moves. A run that wraps carries on past the line's end by one gap.
+const STATE = `  ${at(`${ROOT} ${CHIP_OPTION}${CHIP_ON}`)} {
+    --sx-chip-edge: transparent;
+  }
+  ${at(PILL)} {
+    inset: calc(${BW} * -1);
+    border-radius: inherit;
+    background: ${v(ID, "color")};
+    opacity: 0;
+  }
+  ${at(`${ROOT} ${CHIP_OPTION}${CHIP_ON} ${PILL}`)} {
+    opacity: 1;
+  }
+  ${at(`${ROOT} ${CHIP_OPTION}${CHIP_ON}${NEXT_ON} ${PILL}`)} {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  ${at(`${ROOT} ${CHIP_OPTION}${CHIP_ON} + ${CHIP_OPTION}${CHIP_ON} ${PILL}`)} {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  ${at(BRIDGE)} {
+    inset-block: calc(${BW} * -1);
+    inset-inline-start: calc(100% + ${BW});
+    inline-size: var(--sx-chips-gap);
+    background: ${v(ID, "color")};
+    scale: 0 1;
+    transform-origin: calc(50% - 50% * ${DIR}) 50%;
+  }
+  ${at(`${ROOT} ${CHIP_OPTION}${CHIP_ON}${NEXT_ON} ${BRIDGE}`)} {
+    scale: 1 1;
+  }`;
+const CSS = `  ${at(PILL)} {
+    transition: opacity ${v(ID, "time")} ease-out, border-radius ${v(ID, "time")} ease-out;
+  }
+  ${at(BRIDGE)} {
+    transition: scale ${v(ID, "time")} ease-out;
+  }`;
+/** Chips that are on next to each other merge into one block: a bridge fills the gap and the corners that meet square off. */
+export function chipMerge(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["chip"],
+        state: STATE,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-primary) 22%, var(--color-sx-secondary))",
+            [varName(ID, "time")]: `${options.duration ?? 0.2}s`,
+        },
+        layers: [
+            { slot: "row", part: "pill", keep: true },
+            { slot: "row", part: "bridge", keep: true },
+        ],
+    });
+}

package/dist/forms/effects/chip/chipMerge.schema.d.ts

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

package/dist/forms/effects/chip/chipMerge.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const CHIP_MERGE_SCHEMA = defineSchema()({
+    id: "chipMerge",
+    family: "form",
+    factory: "chipMerge",
+    fields: {
+        color: { kind: "color", label: "Colour", autoNote: "a light tint of the primary colour" },
+        duration: { kind: "number", label: "Duration", min: 0.05, max: 0.5, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/file/fileButton.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface FileButtonOptions {
+    /** The button's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/** The browser's own file button, dressed as a solid pill that lifts on hover and dips on a press. */
+export declare function fileButton(options?: FileButtonOptions): FormEffect;

package/dist/forms/effects/file/fileButton.js

@@ -0,0 +1,28 @@
+import { at, defineForm, fileOf, v, varName } from "../kit.js";
+const ID = "fileButton";
+const ROOT = fileOf(ID);
+const CONTROL = "[data-sx-file-control]";
+// The browser's own file button (::file-selector-button), kept: it opens the picker from the keyboard and reads the
+// browser's own words. This dresses it as a solid pill through the look's hooks; it lifts on hover and dips on a press.
+// One rule per selector with the pseudo-element (a browser without it would drop a list that names it).
+const STATE = `  ${at(ROOT)} {
+    --sx-file-button-bg: ${v(ID, "color")};
+    --sx-file-button-ink: var(--color-sx-on-primary);
+    --sx-file-button-line: transparent;
+    --sx-file-button-radius: 999px;
+  }`;
+const CSS = `  ${at(`${ROOT} ${CONTROL}`)}::file-selector-button {
+    transition: translate 0.15s ease-out, scale 0.1s ease-out;
+  }
+  @media (hover: hover) and (pointer: fine) {
+    ${at(`${ROOT} ${CONTROL}:not(:disabled):hover`)}::file-selector-button {
+      translate: 0 -1px;
+    }
+  }
+  ${at(`${ROOT} ${CONTROL}:active`)}::file-selector-button {
+    scale: 0.97;
+  }`;
+/** The browser's own file button, dressed as a solid pill that lifts on hover and dips on a press. */
+export function fileButton(options = {}) {
+    return defineForm(ID, CSS, { fits: ["file"], state: STATE, vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" } });
+}

package/dist/forms/effects/file/fileButton.schema.d.ts

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

package/dist/forms/effects/file/fileButton.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_BUTTON_SCHEMA = defineSchema()({
+    id: "fileButton",
+    family: "form",
+    factory: "fileButton",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "var(--color-sx-primary)" },
+    },
+});

package/dist/forms/effects/file/fileCards.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface FileCardsOptions {
+    /** Seconds a card takes to come in or go. Default `0.25`. */
+    readonly duration?: number;
+}
+/** Cards rise in as files are added, slide out when removed, and the others glide into place (moves too). */
+export declare function fileCards(options?: FileCardsOptions): FormEffect;

package/dist/forms/effects/file/fileCards.js

@@ -0,0 +1,38 @@
+import { CARD, DIR, EASE, SPRING, at, defineForm, fileOf, v, varName } from "../kit.js";
+const ID = "fileCards";
+const ROOT = fileOf(ID);
+// A file's card rises in when it is added (only once the user has added or removed one: never on load), slides out
+// toward the end when removed (the FileDrop keeps it, marked data-sx-leaving, until this animation ends: needs.flip),
+// and the others glide into the gap or the new order (the FileDrop's FLIP: an inline translate taken back to nothing).
+const CSS = `  ${at(`${ROOT} ${CARD}`)} {
+    transition: translate ${v(ID, "time")} ${SPRING}, scale ${v(ID, "time")} ${SPRING}, opacity ${v(ID, "time")} ${EASE};
+  }
+  @starting-style {
+    ${at(`${ROOT}[data-sx-live] ${CARD}`)} {
+      translate: 0 0.5rem;
+      scale: 0.96;
+      opacity: 0;
+    }
+  }
+  ${at(`${ROOT} ${CARD}[data-sx-leaving]`)} {
+    animation: sx-form-fileCards-out ${v(ID, "time")} ${EASE} forwards;
+  }
+  ${at(`${ROOT} [data-sx-file-remove] svg`)} {
+    transition: rotate 0.2s ${EASE};
+  }
+  @media (hover: hover) and (pointer: fine) {
+    ${at(`${ROOT} [data-sx-file-remove]:hover svg`)} {
+      rotate: 90deg;
+    }
+  }
+  @keyframes sx-form-fileCards-out {
+    to {
+      translate: calc(1.5rem * ${DIR}) 0;
+      scale: 0.94;
+      opacity: 0;
+    }
+  }`;
+/** Cards rise in as files are added, slide out when removed, and the others glide into place (moves too). */
+export function fileCards(options = {}) {
+    return defineForm(ID, CSS, { fits: ["file"], needs: { flip: true }, vars: { [varName(ID, "time")]: `${options.duration ?? 0.25}s` } });
+}

package/dist/forms/effects/file/fileCards.schema.d.ts

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

package/dist/forms/effects/file/fileCards.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_CARDS_SCHEMA = defineSchema()({
+    id: "fileCards",
+    family: "form",
+    factory: "fileCards",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.5, step: 0.05, unit: "s", default: 0.25 },
+    },
+});

package/dist/forms/effects/file/fileDrag.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface FileDragOptions {
+    /** The tint the zone takes while files are over it. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+    /** Seconds it takes. Default `0.2`. */
+    readonly duration?: number;
+}
+/** While files are dragged over the zone it takes a tint, grows a little and its icon hops; red for files it won't take. */
+export declare function fileDrag(options?: FileDragOptions): FormEffect;

package/dist/forms/effects/file/fileDrag.js

@@ -0,0 +1,45 @@
+import { EASE, OVER, OVER_REJECT, SPRING, ZONE, at, defineForm, fileLayer, fileOf, loopPaused, v, varName } from "../kit.js";
+const ID = "fileDrag";
+const ROOT = fileOf(ID);
+const GLOW = fileLayer(ID, "glow");
+const ICON = "[data-sx-file-icon]";
+// While files are dragged over the zone it takes a tint (red when the browser can tell they are of a kind it won't
+// take), grows a little, and its icon hops, inviting the drop. The tint is the state: it holds under reduced motion.
+const STATE = `  ${at(GLOW)} {
+    background: color-mix(in oklab, ${v(ID, "color")} 10%, transparent);
+    opacity: 0;
+  }
+  ${at(`${ROOT}${OVER} ${GLOW}`)} {
+    opacity: 1;
+  }
+  ${at(`${ROOT}${OVER_REJECT} ${GLOW}`)} {
+    background: color-mix(in oklab, var(--color-sx-danger) 10%, transparent);
+    opacity: 1;
+  }`;
+const CSS = `  ${at(GLOW)} {
+    transition: opacity ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${ROOT} ${ZONE}`)} {
+    transition: scale ${v(ID, "time")} ${SPRING};
+  }
+  ${at(`${ROOT}${OVER} ${ZONE}`)} {
+    scale: 1.01;
+  }
+  ${at(`${ROOT}${OVER} ${ICON}`)} {
+    animation: sx-form-fileDrag-hop 0.9s ease-in-out infinite;
+  }
+${loopPaused(`${ROOT} ${ICON}`)}
+  @keyframes sx-form-fileDrag-hop {
+    50% {
+      translate: 0 -0.3rem;
+    }
+  }`;
+/** While files are dragged over the zone it takes a tint, grows a little and its icon hops; red for files it won't take. */
+export function fileDrag(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["file"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", [varName(ID, "time")]: `${options.duration ?? 0.2}s` },
+        layers: [{ slot: "zone", part: "glow", keep: true }],
+    });
+}

package/dist/forms/effects/file/fileDrag.schema.d.ts

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

package/dist/forms/effects/file/fileDrag.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_DRAG_SCHEMA = defineSchema()({
+    id: "fileDrag",
+    family: "form",
+    factory: "fileDrag",
+    fields: {
+        color: { kind: "color", label: "Tint", default: "var(--color-sx-primary)" },
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.5, step: 0.05, unit: "s", default: 0.2 },
+    },
+});

package/dist/forms/effects/file/filePage.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface FilePageOptions {
+    /** The frame's colour. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/** The page-wide drop overlay (`page`) fades in, its dashed frame settling and its words rising. */
+export declare function filePage(options?: FilePageOptions): FormEffect;

package/dist/forms/effects/file/filePage.js

@@ -0,0 +1,46 @@
+import { EASE, SPRING, at, defineForm, fileLayer, fileOf, v, varName } from "../kit.js";
+const ID = "filePage";
+const ROOT = fileOf(ID);
+const FRAME = fileLayer(ID, "frame");
+const PAGE = "[data-sx-file-page]";
+// With `page`, a FileDrop covers the window while files are dragged over it. This draws a dashed frame round the
+// overlay (the state, kept under reduced motion) and brings it in: the overlay fades, the frame settles from a little
+// smaller, the words rise.
+const STATE = `  ${at(FRAME)} {
+    border: 3px dashed ${v(ID, "color")};
+    border-radius: var(--radius-sx-card, 1rem);
+  }`;
+const CSS = `  ${at(`${ROOT}[data-sx-page-over] ${PAGE}`)} {
+    animation: sx-form-filePage-fade 0.2s ${EASE};
+  }
+  ${at(`${ROOT}[data-sx-page-over] ${FRAME}`)} {
+    animation: sx-form-filePage-frame 0.35s ${SPRING};
+  }
+  ${at(`${ROOT}[data-sx-page-over] [data-sx-file-page-words]`)} {
+    animation: sx-form-filePage-words 0.35s ${EASE};
+  }
+  @keyframes sx-form-filePage-fade {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes sx-form-filePage-frame {
+    from {
+      scale: 0.96;
+    }
+  }
+  @keyframes sx-form-filePage-words {
+    from {
+      translate: 0 0.75rem;
+      opacity: 0;
+    }
+  }`;
+/** The page-wide drop overlay (`page`) fades in, its dashed frame settling and its words rising. */
+export function filePage(options = {}) {
+    return defineForm(ID, CSS, {
+        fits: ["file"],
+        state: STATE,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)" },
+        layers: [{ slot: "page", part: "frame", keep: true }],
+    });
+}

package/dist/forms/effects/file/filePage.schema.d.ts

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

package/dist/forms/effects/file/filePage.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_PAGE_SCHEMA = defineSchema()({
+    id: "filePage",
+    family: "form",
+    factory: "filePage",
+    fields: {
+        color: { kind: "color", label: "Frame colour", default: "var(--color-sx-primary)" },
+    },
+});

package/dist/forms/effects/file/filePreview.d.ts

@@ -0,0 +1,7 @@
+import type { FormEffect } from "../../types.js";
+export interface FilePreviewOptions {
+    /** Seconds a picture takes to fade in. Default `0.3`. */
+    readonly duration?: number;
+}
+/** Image files show a thumbnail in their card, fading in once it has loaded. */
+export declare function filePreview(options?: FilePreviewOptions): FormEffect;

package/dist/forms/effects/file/filePreview.js

@@ -0,0 +1,17 @@
+import { EASE, at, defineForm, fileOf, v, varName } from "../kit.js";
+const ID = "filePreview";
+const ROOT = fileOf(ID);
+const IMG = "[data-sx-file-thumb] > img";
+// Asks the FileDrop for pictures (needs.preview: an object URL per image file, let go when the file goes) and fades
+// each one in, settling from a little larger, once it has loaded (data-sx-loaded). Under reduced motion it just shows.
+const CSS = `  ${at(`${ROOT} ${IMG}`)} {
+    transition: opacity ${v(ID, "time")} ${EASE}, scale ${v(ID, "time")} ${EASE};
+  }
+  ${at(`${ROOT} ${IMG}:not([data-sx-loaded])`)} {
+    opacity: 0;
+    scale: 1.08;
+  }`;
+/** Image files show a thumbnail in their card, fading in once it has loaded. */
+export function filePreview(options = {}) {
+    return defineForm(ID, CSS, { fits: ["file"], needs: { preview: true }, vars: { [varName(ID, "time")]: `${options.duration ?? 0.3}s` } });
+}

package/dist/forms/effects/file/filePreview.schema.d.ts

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

package/dist/forms/effects/file/filePreview.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILE_PREVIEW_SCHEMA = defineSchema()({
+    id: "filePreview",
+    family: "form",
+    factory: "filePreview",
+    fields: {
+        duration: { kind: "number", label: "Duration", min: 0.1, max: 0.8, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/forms/effects/file/fileProgress.d.ts

@@ -0,0 +1,9 @@
+import type { FormEffect } from "../../types.js";
+export interface FileProgressOptions {
+    /** A bar under the name, or a ring that fills. Either ends in a check. Default `"bar"`. */
+    readonly kind?: "bar" | "ring";
+    /** The colour of the progress. Default `var(--color-sx-primary)`. */
+    readonly color?: string;
+}
+/** Each file's upload fills a bar (or a ring) smoothly, which turns into a check drawn at the end. */
+export declare function fileProgress(options?: FileProgressOptions): FormEffect;