@sharedex/ui 0.0.0-stage → 0.10.0

package/dist/text/effects/enter/enterSkeleton.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterSkeletonOptions extends EnterOptions {
+    /** The placeholder bars' colour. Default a light tint of the theme's ink. */
+    readonly color?: string;
+}
+/** Grey placeholder bars pulse where the words will be, then fade away to show them: a loading skeleton turning into text. */
+export declare function enterSkeleton(options?: EnterSkeletonOptions): TextEffect;

package/dist/text/effects/enter/enterSkeleton.js

@@ -0,0 +1,24 @@
+import { COVER, UNIT, at, enter, scripted, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterSkeleton";
+// The bars pulse (opacity, not a moving gradient: that would repaint every frame) and fade out; the words, hidden while
+// they wait, appear under the fading bars.
+const CSS = `${scripted(`    ${at(`[data-sx-text~="${ID}"] ${UNIT}`)} { position: relative; }
+    ${at(`[data-sx-text~="${ID}"] ${COVER}`)} {
+      display: block;
+      position: absolute;
+      inset: 0.04em 0;
+      background: ${v(ID, "color")};
+      border-radius: 0.25em;
+    }`)}
+${enter(ID, { target: COVER, name: "bar", from: "opacity: 1;", frames: "0%, 40%, 75% { opacity: 1; } 20%, 60% { opacity: 0.45; } 100% { opacity: 0; }", ease: "ease-in-out" })}
+${enter(ID, { target: UNIT, name: "words", from: "color: transparent;", frames: "0%, 74.9% { color: transparent; }", ease: "linear" })}`;
+/** Grey placeholder bars pulse where the words will be, then fade away to show them: a loading skeleton turning into text. */
+export function enterSkeleton(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.05, ...options }, {
+        by: "words",
+        duration: 1.4,
+        vars: { [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-ink) 14%, transparent)" },
+        needs: { cover: true },
+    });
+}

package/dist/text/effects/enter/enterSkeleton.schema.d.ts

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

package/dist/text/effects/enter/enterSkeleton.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_SKELETON_SCHEMA = defineSchema()({
+    id: "enterSkeleton",
+    family: "text",
+    factory: "enterSkeleton",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 1.4, stagger: 0.05 }),
+        from: textFromField(),
+        color: { kind: "color", label: "Bar colour", default: "color-mix(in oklab, var(--color-sx-ink) 14%, transparent)" },
+    },
+});

package/dist/text/effects/enter/enterStamp.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export interface EnterStampOptions extends EnterOptions {
+    /** How large each piece starts, before it lands. Default `2.2`. */
+    readonly size?: number;
+}
+/** Each word slams down from large, like a rubber stamp, with a small shake as it lands. */
+export declare function enterStamp(options?: EnterStampOptions): TextEffect;

package/dist/text/effects/enter/enterStamp.js

@@ -0,0 +1,15 @@
+import { enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterStamp";
+// It speeds up into the landing (ease-in), then shakes a little, smaller each time.
+const CSS = enter(ID, {
+    from: `opacity: 0; scale: ${v(ID, "size")};`,
+    frames: `0% { opacity: 0; scale: ${v(ID, "size")}; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
+    50% { opacity: 1; scale: 1; translate: 0 0; animation-timing-function: ease-in-out; }
+    60% { translate: 0.05em 0; } 70% { translate: -0.04em 0; } 80% { translate: 0.025em 0; } 90% { translate: -0.01em 0; }
+    100% { opacity: 1; scale: 1; translate: 0 0; }`,
+});
+/** Each word slams down from large, like a rubber stamp, with a small shake as it lands. */
+export function enterStamp(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.22, ...options }, { by: "words", duration: 0.8, vars: { [varName(ID, "size")]: options.size ?? 2.2 } });
+}

package/dist/text/effects/enter/enterStamp.schema.d.ts

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

package/dist/text/effects/enter/enterStamp.schema.js

@@ -0,0 +1,13 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_STAMP_SCHEMA = defineSchema()({
+    id: "enterStamp",
+    family: "text",
+    factory: "enterStamp",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.8, stagger: 0.22 }),
+        from: textFromField(),
+        size: { kind: "number", label: "Starting size", min: 1, max: 5, step: 0.1, default: 2.2 },
+    },
+});

package/dist/text/effects/enter/enterTracking.d.ts

@@ -0,0 +1,8 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterTiming } from "./kit.js";
+export interface EnterTrackingOptions extends Omit<EnterTiming, "stagger" | "from"> {
+    /** The extra space between letters it starts with, in em. Default `0.5`. */
+    readonly spread?: number;
+}
+/** The letters start spaced wide apart and close in as the text fades in. Arabic and other joined scripts just fade. */
+export declare function enterTracking(options?: EnterTrackingOptions): TextEffect;

package/dist/text/effects/enter/enterTracking.js

@@ -0,0 +1,11 @@
+import { SHOW, enter, v, varName } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterTracking";
+// Letter spacing reflows the text on every frame: allowed on one heading (listed in the test). Joined scripts get a
+// plain fade instead, because spacing out Arabic letters breaks the joins between them.
+const CSS = `${enter(ID, { target: SHOW, from: `opacity: 0; letter-spacing: ${v(ID, "spread")};` })}
+${enter(ID, { target: SHOW, name: "joined", when: "[data-sx-text-joined]", from: "opacity: 0;" })}`;
+/** The letters start spaced wide apart and close in as the text fades in. Arabic and other joined scripts just fade. */
+export function enterTracking(options = {}) {
+    return defineEnter(ID, CSS, options, { duration: 1.2, vars: { [varName(ID, "spread")]: `${options.spread ?? 0.5}em` } });
+}

package/dist/text/effects/enter/enterTracking.schema.d.ts

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

package/dist/text/effects/enter/enterTracking.schema.js

@@ -0,0 +1,11 @@
+import { textEnterFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_TRACKING_SCHEMA = defineSchema()({
+    id: "enterTracking",
+    family: "text",
+    factory: "enterTracking",
+    fields: {
+        ...textEnterFields({ duration: 1.2 }),
+        spread: { kind: "number", label: "Starting spread", min: 0, max: 2, step: 0.05, unit: "em", default: 0.5 },
+    },
+});

package/dist/text/effects/enter/enterWords.d.ts

@@ -0,0 +1,5 @@
+import type { TextEffect } from "../../types.js";
+import { type EnterOptions } from "./kit.js";
+export type EnterWordsOptions = EnterOptions;
+/** Words fade in one after another, without moving, like a sentence being written. */
+export declare function enterWords(options?: EnterWordsOptions): TextEffect;

package/dist/text/effects/enter/enterWords.js

@@ -0,0 +1,9 @@
+import { enter } from "../kit.js";
+import { defineEnter } from "./kit.js";
+const ID = "enterWords";
+// no movement and an even pace: words appear the way a sentence is written out
+const CSS = enter(ID, { from: "opacity: 0;", ease: "ease-in-out" });
+/** Words fade in one after another, without moving, like a sentence being written. */
+export function enterWords(options = {}) {
+    return defineEnter(ID, CSS, { stagger: 0.08, ...options }, { by: "words", duration: 0.5 });
+}

package/dist/text/effects/enter/enterWords.schema.d.ts

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

package/dist/text/effects/enter/enterWords.schema.js

@@ -0,0 +1,12 @@
+import { textByField, textEnterFields, textFromField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const ENTER_WORDS_SCHEMA = defineSchema()({
+    id: "enterWords",
+    family: "text",
+    factory: "enterWords",
+    fields: {
+        by: textByField("words"),
+        ...textEnterFields({ duration: 0.5, stagger: 0.08 }),
+        from: textFromField(),
+    },
+});

package/dist/text/effects/enter/kit.d.ts

@@ -0,0 +1,33 @@
+import type { TextEffect, TextNeeds, TextOrder, TextSplit, TextVars } from "../../types.js";
+import { type TextParts } from "../kit.js";
+/** The options every entrance takes (Magic UI's "Text Animate presets": the same looks by letter, word or line). */
+export interface EnterTiming {
+    /** Seconds one piece takes. */
+    readonly duration?: number;
+    /** Seconds between one piece and the next. Default by what moves: `0.03` letters, `0.07` words, `0.12` lines. */
+    readonly stagger?: number;
+    /** Seconds before the first piece starts. Default `0`. */
+    readonly delay?: number;
+    /** Which piece goes first: the reading start (default), the end, the middle out or the edges in. */
+    readonly from?: Exclude<TextOrder, "random">;
+}
+export interface EnterOptions extends EnterTiming {
+    /** What moves: letters, words or lines. Letters only in short text; joined scripts such as Arabic move by the word. */
+    readonly by?: TextSplit;
+}
+/** The stagger when none is given, by what moves. */
+export declare const STAGGER: Record<TextSplit, number>;
+export interface EnterSpec {
+    /** What it moves when `by` is left out (or always, for an effect without `by`). */
+    readonly by?: TextSplit;
+    readonly duration: number;
+    /** Its own vars, besides the timing. */
+    readonly vars?: TextVars;
+    /** Its own needs, besides `split`, `order` and `inView`. */
+    readonly needs?: TextNeeds;
+    readonly parts?: TextParts;
+}
+/** An entrance from its id, rules, options and defaults: timing vars, the `enter` claim, the pieces it needs. */
+export declare function defineEnter(id: string, css: string, options: EnterOptions & {
+    readonly seed?: number;
+}, spec: EnterSpec, order?: TextOrder): TextEffect;

package/dist/text/effects/enter/kit.js

@@ -0,0 +1,19 @@
+// What every entrance shares: the timing options and how they become vars and needs.
+import { defineText, seconds, varName } from "../kit.js";
+/** The stagger when none is given, by what moves. */
+export const STAGGER = { chars: 0.03, words: 0.07, lines: 0.12 };
+/** An entrance from its id, rules, options and defaults: timing vars, the `enter` claim, the pieces it needs. */
+export function defineEnter(id, css, options, spec, order) {
+    const by = options.by ?? spec.by;
+    return defineText(id, css, {
+        ...spec.parts,
+        vars: {
+            [varName(id, "time")]: seconds(options.duration ?? spec.duration),
+            [varName(id, "stagger")]: seconds(options.stagger ?? (by ? STAGGER[by] : 0)),
+            [varName(id, "delay")]: seconds(options.delay ?? 0),
+            ...spec.vars,
+        },
+        claims: ["enter"],
+        needs: { ...(by ? { split: by, order: order ?? options.from ?? "start" } : {}), inView: true, ...spec.needs },
+    });
+}

package/dist/text/effects/ink/inkAurora.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface InkAuroraOptions {
+    /** The three lights' colours. Default the theme's primary, accent, and a mix of the two. */
+    readonly colors?: readonly [string, string, string];
+    /** The colour between the lights. Default the text's own colour. */
+    readonly base?: string;
+    /** Seconds for one full drift. Default `12`. */
+    readonly duration?: number;
+}
+/** Soft coloured lights drift slowly inside the letters, like the northern lights. */
+export declare function inkAurora(options?: InkAuroraOptions): TextEffect;

package/dist/text/effects/ink/inkAurora.js

@@ -0,0 +1,41 @@
+import { PAINT, at, defineText, hostOf, loop, seconds, v, varName } from "../kit.js";
+const ID = "inkAurora";
+/** Each light's place in its tile, as a share of the text's size: [x, y]. */
+const START = [[0, 0], [1 / 3, 1 / 2], [-1 / 3, 1 / 4]];
+/** Where each one has drifted after a loop, in whole tiles, so the loop has no seam. */
+const DRIFT = [[1, 0], [-1, 1], [0, -1]];
+const at3 = (shift) => shift
+    .map(([x, y], i) => {
+    const [sx, sy] = START[i];
+    return `calc(var(--sx-tx, 0px) * -1 + var(--sx-tw, 0px) * ${sx + x}) calc(var(--sx-ty, 0px) * -1 + var(--sx-th, 0px) * ${sy + y})`;
+})
+    .join(", ");
+const LIGHTS = [1, 2, 3].map((n) => `radial-gradient(closest-side, ${v(ID, `c${n}`)}, transparent)`).join(", ");
+// Three soft lights inside the letters drift by whole tiles of the text's size, so the loop has no seam. It moves the
+// background: the one way to move a fill inside letters (listed in the test).
+const LOOK = `  ${at(`${hostOf(ID)} ${PAINT}`)} {
+    background: ${LIGHTS}, ${v(ID, "base")};
+    background-size: var(--sx-tw, 100%) var(--sx-th, 100%);
+    background-position: ${at3([[0, 0], [0, 0], [0, 0]])};
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }`;
+const CSS = `  @keyframes sx-text-inkAurora { to { background-position: ${at3(DRIFT)}; } }
+${loop(ID, PAINT, `sx-text-inkAurora ${v(ID, "time")} linear infinite`)}`;
+/** Soft coloured lights drift slowly inside the letters, like the northern lights. */
+export function inkAurora(options = {}) {
+    const [c1, c2, c3] = options.colors ?? ["var(--color-sx-primary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-primary), var(--color-sx-accent))"];
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "c1")]: c1,
+            [varName(ID, "c2")]: c2,
+            [varName(ID, "c3")]: c3,
+            [varName(ID, "base")]: options.base ?? "currentColor",
+            [varName(ID, "time")]: seconds(options.duration ?? 12),
+        },
+        claims: ["paint"],
+        needs: { paint: true, loop: true },
+    });
+}

package/dist/text/effects/ink/inkAurora.schema.d.ts

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

package/dist/text/effects/ink/inkAurora.schema.js

@@ -0,0 +1,12 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const INK_AURORA_SCHEMA = defineSchema()({
+    id: "inkAurora",
+    family: "text",
+    factory: "inkAurora",
+    fields: {
+        colors: colorsField(["var(--color-sx-primary)", "var(--color-sx-accent)", "color-mix(in oklab, var(--color-sx-primary), var(--color-sx-accent))"], 3, 3, "Lights"),
+        base: { kind: "color", label: "Between the lights", default: "currentColor" },
+        duration: { kind: "number", label: "Drift time", min: 2, max: 40, step: 0.5, unit: "s", default: 12 },
+    },
+});

package/dist/text/effects/ink/inkColourful.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkColourfulOptions {
+    /** The colour the letters start from; the others come from turning its hue, so it needs some colour in it. Default the theme's accent. */
+    readonly color?: string;
+    /** Seconds for a letter to go round every colour. Default `5`. */
+    readonly duration?: number;
+}
+/** Every letter shows a different colour and they keep changing, a wave of colour running along the word. */
+export declare function inkColourful(options?: InkColourfulOptions): TextEffect;

package/dist/text/effects/ink/inkColourful.js

@@ -0,0 +1,17 @@
+import { PAINT, at, defineText, hostOf, loop, seconds, v, varName } from "../kit.js";
+const ID = "inkColourful";
+// Each letter turns through the colour wheel (a hue filter, which the compositor runs), a step behind the one before.
+// A filter on every letter costs: at most 40 letters, longer text by the word.
+const LOOK = `  ${at(`${hostOf(ID)} ${PAINT}`)} { color: ${v(ID, "color")}; }`;
+const CSS = `  ${at(`${hostOf(ID)} ${PAINT}`)} { display: inline-block; }
+  @keyframes sx-text-inkColourful { to { filter: hue-rotate(360deg); } }
+${loop(ID, PAINT, `sx-text-inkColourful ${v(ID, "time")} linear calc(var(--sx-i, var(--sx-wi, 0)) * -0.35s) infinite`)}`;
+/** Every letter shows a different colour and they keep changing, a wave of colour running along the word. */
+export function inkColourful(options = {}) {
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)", [varName(ID, "time")]: seconds(options.duration ?? 5) },
+        claims: ["paint"],
+        needs: { split: "chars", paint: true, loop: true, maxPieces: 40 },
+    });
+}

package/dist/text/effects/ink/inkColourful.schema.d.ts

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

package/dist/text/effects/ink/inkColourful.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_COLOURFUL_SCHEMA = defineSchema()({
+    id: "inkColourful",
+    family: "text",
+    factory: "inkColourful",
+    fields: {
+        color: { kind: "color", label: "Starting colour", default: "var(--color-sx-accent)" },
+        duration: { kind: "number", label: "Colour cycle", min: 1, max: 20, step: 0.5, unit: "s", default: 5 },
+    },
+});

package/dist/text/effects/ink/inkDots.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkDotsOptions {
+    /** The dots' colour. Default the text's own colour. */
+    readonly color?: string;
+    /** The grid's step, in em: one dot per step. Default `0.14`. */
+    readonly size?: number;
+}
+/** The letters are made of dots, like a dot-matrix or LED sign. Still: it costs nothing after the first paint. */
+export declare function inkDots(options?: InkDotsOptions): TextEffect;

package/dist/text/effects/ink/inkDots.js

@@ -0,0 +1,13 @@
+import { defineText, paint, v, varName } from "../kit.js";
+const ID = "inkDots";
+// One dot per tile, placed on the whole text, so the grid runs on unbroken across pieces. Bold type shows it best.
+const LOOK = paint(ID, `radial-gradient(circle closest-side, ${v(ID, "color")} 72%, transparent 78%)`, "", `${v(ID, "size")} ${v(ID, "size")}`);
+/** The letters are made of dots, like a dot-matrix or LED sign. Still: it costs nothing after the first paint. */
+export function inkDots(options = {}) {
+    return defineText(ID, "", {
+        look: LOOK,
+        vars: { [varName(ID, "color")]: options.color ?? "currentColor", [varName(ID, "size")]: `${options.size ?? 0.14}em` },
+        claims: ["paint"],
+        needs: { paint: true },
+    });
+}

package/dist/text/effects/ink/inkDots.schema.d.ts

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

package/dist/text/effects/ink/inkDots.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_DOTS_SCHEMA = defineSchema()({
+    id: "inkDots",
+    family: "text",
+    factory: "inkDots",
+    fields: {
+        color: { kind: "color", label: "Dots", default: "currentColor" },
+        size: { kind: "number", label: "Dot step", min: 0.06, max: 0.5, step: 0.01, unit: "em", default: 0.14 },
+    },
+});

package/dist/text/effects/ink/inkFoil.d.ts

@@ -0,0 +1,7 @@
+import type { TextEffect } from "../../types.js";
+export interface InkFoilOptions {
+    /** `"chrome"` (default): polished metal from the theme's ink. `"holo"`: a holographic rainbow from the theme's colours. */
+    readonly kind?: "chrome" | "holo";
+}
+/** Metallic or holographic foil inside the letters; the sheen follows the mouse. Still on touch screens. */
+export declare function inkFoil(options?: InkFoilOptions): TextEffect;

package/dist/text/effects/ink/inkFoil.js

@@ -0,0 +1,26 @@
+import { PAINT, at, defineText, hostOf, paint, v, varName } from "../kit.js";
+const ID = "inkFoil";
+const CHROME = [90, 35, 80, 20, 70, 40, 90].map((n) => `color-mix(in oklab, var(--color-sx-ink) ${n}%, var(--color-sx-secondary))`);
+const HOLO = [
+    "var(--color-sx-primary)",
+    "color-mix(in oklab, var(--color-sx-primary), var(--color-sx-accent))",
+    "var(--color-sx-accent)",
+    "color-mix(in oklab, var(--color-sx-accent), var(--color-sx-secondary))",
+    "var(--color-sx-primary)",
+];
+// The sheen is twice the text's size; the pointer slides it (a repaint on each move, nothing at rest). Without a mouse,
+// and before the pointer arrives, it sits in the middle: a still sheen.
+const at2 = "calc(var(--sx-tx, 0px) * -1 - var(--sx-tw, 0px) * var(--sx-text-px, 0.5)) calc(var(--sx-ty, 0px) * -1 - var(--sx-th, 0px) * var(--sx-text-py, 0.5))";
+const LOOK = `${paint(ID, v(ID, "image"), "", "calc(var(--sx-tw, 100%) * 2) calc(var(--sx-th, 100%) * 2)")}
+  ${at(`${hostOf(ID)} ${PAINT}`)} { background-position: ${at2}; }`;
+const CSS = `  ${at(`${hostOf(ID)} ${PAINT}`)} { transition: background-position 0.25s ease-out; }`;
+/** Metallic or holographic foil inside the letters; the sheen follows the mouse. Still on touch screens. */
+export function inkFoil(options = {}) {
+    const stops = options.kind === "holo" ? HOLO : CHROME;
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: { [varName(ID, "image")]: `linear-gradient(115deg, ${stops.join(", ")})` },
+        claims: ["paint"],
+        needs: { paint: true, pointer: true },
+    });
+}

package/dist/text/effects/ink/inkFoil.schema.d.ts

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

package/dist/text/effects/ink/inkFoil.schema.js

@@ -0,0 +1,9 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_FOIL_SCHEMA = defineSchema()({
+    id: "inkFoil",
+    family: "text",
+    factory: "inkFoil",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["chrome", "holo"], labels: { chrome: "Chrome", holo: "Holographic" }, default: "chrome" },
+    },
+});

package/dist/text/effects/ink/inkGradient.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkGradientOptions {
+    /** The gradient's colours, in order. Default the theme's primary and accent. */
+    readonly colors?: readonly string[];
+    /** Seconds for the colours to travel once across the text; `0` keeps it still. Default `6`. */
+    readonly duration?: number;
+}
+/** The letters are filled with a gradient whose colours flow slowly along the text, towards the reading end. */
+export declare function inkGradient(options?: InkGradientOptions): TextEffect;

package/dist/text/effects/ink/inkGradient.js

@@ -0,0 +1,21 @@
+import { DIR, PAINT, defineText, loop, paint, seconds, v, varName } from "../kit.js";
+import { THEME_COLORS, seamless } from "./kit.js";
+const ID = "inkGradient";
+// One tile of the gradient is exactly the text's width and ends where it starts, so moving it by one width loops with no
+// seam. It moves the background: the one way to move a fill inside letters (listed in the test). Before the text is
+// measured it stays still.
+const LOOK = paint(ID, `${v(ID, "image")}`);
+const CSS = `  @keyframes sx-text-inkGradient {
+    to { background-position: calc(var(--sx-tx, 0px) * -1 - var(--sx-tw, 0px) * ${DIR}) calc(var(--sx-ty, 0px) * -1); }
+  }
+${loop(ID, PAINT, `sx-text-inkGradient ${v(ID, "time")} linear infinite`)}`;
+/** The letters are filled with a gradient whose colours flow slowly along the text, towards the reading end. */
+export function inkGradient(options = {}) {
+    const duration = options.duration ?? 6;
+    return defineText(ID, duration > 0 ? CSS : "", {
+        look: LOOK,
+        vars: { [varName(ID, "image")]: seamless(options.colors ?? THEME_COLORS), [varName(ID, "time")]: seconds(duration) },
+        claims: ["paint"],
+        needs: { paint: true, ...(duration > 0 ? { loop: true } : {}) },
+    });
+}

package/dist/text/effects/ink/inkGradient.schema.d.ts

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

package/dist/text/effects/ink/inkGradient.schema.js

@@ -0,0 +1,11 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const INK_GRADIENT_SCHEMA = defineSchema()({
+    id: "inkGradient",
+    family: "text",
+    factory: "inkGradient",
+    fields: {
+        colors: colorsField(["var(--color-sx-primary)", "var(--color-sx-accent)"]),
+        duration: { kind: "number", label: "Flow time", min: 0, max: 30, step: 0.5, unit: "s", default: 6, help: "0 keeps it still." },
+    },
+});

package/dist/text/effects/ink/inkGrain.d.ts

@@ -0,0 +1,7 @@
+import type { TextEffect } from "../../types.js";
+export interface InkGrainOptions {
+    /** The gradient's colours. Default the theme's primary and accent. */
+    readonly colors?: readonly string[];
+}
+/** A gradient with a film-grain texture inside the letters. Still: it costs nothing after the first paint. */
+export declare function inkGrain(options?: InkGrainOptions): TextEffect;

package/dist/text/effects/ink/inkGrain.js

@@ -0,0 +1,16 @@
+import { PAINT_SIZE, defineText, paint, v, varName } from "../kit.js";
+import { THEME_COLORS } from "./kit.js";
+const ID = "inkGrain";
+/** Fractal noise as an SVG picture: no colour of its own, only light and dark, blended over the gradient. */
+const NOISE = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;
+// The noise tiles at its own size; the gradient spans the whole text.
+const LOOK = paint(ID, `${NOISE}, ${v(ID, "image")}`, `background-blend-mode: soft-light, normal;`, `160px 160px, ${PAINT_SIZE}`);
+/** A gradient with a film-grain texture inside the letters. Still: it costs nothing after the first paint. */
+export function inkGrain(options = {}) {
+    return defineText(ID, "", {
+        look: LOOK,
+        vars: { [varName(ID, "image")]: `linear-gradient(120deg, ${(options.colors ?? THEME_COLORS).join(", ")})` },
+        claims: ["paint"],
+        needs: { paint: true },
+    });
+}

package/dist/text/effects/ink/inkGrain.schema.d.ts

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

package/dist/text/effects/ink/inkGrain.schema.js

@@ -0,0 +1,10 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const INK_GRAIN_SCHEMA = defineSchema()({
+    id: "inkGrain",
+    family: "text",
+    factory: "inkGrain",
+    fields: {
+        colors: colorsField(["var(--color-sx-primary)", "var(--color-sx-accent)"]),
+    },
+});

package/dist/text/effects/ink/inkImage.d.ts

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkImageOptions {
+    /** The picture seen through the letters. */
+    readonly src?: string;
+    /** Seconds for a slow pan up and down the picture; `0` keeps it still. Default `0`. */
+    readonly pan?: number;
+}
+/** A picture shows through the letters; it can pan slowly. */
+export declare function inkImage(options?: InkImageOptions): TextEffect;

package/dist/text/effects/ink/inkImage.js

@@ -0,0 +1,21 @@
+import { PAINT, SHOW, at, defineText, hostOf, loop, paint, seconds, v, varName } from "../kit.js";
+const ID = "inkImage";
+// Whole text: the picture covers it. Cut into pieces, each piece shows its part of a picture as wide as the text.
+const LOOK = `${paint(ID, `${v(ID, "src")} no-repeat`, "", "var(--sx-tw, 100%) auto")}
+  ${at(`${hostOf(ID)} ${SHOW} > ${PAINT}`)} { background-size: cover; background-position: 50% 50%; }`;
+// The pan moves the background: the one way to move a fill inside letters (listed in the test). Whole text only.
+const CSS = `  @keyframes sx-text-inkImage { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
+${loop(ID, `${SHOW} > ${PAINT}`, `sx-text-inkImage ${v(ID, "time")} ease-in-out infinite alternate`)}`;
+/** A picture shows through the letters; it can pan slowly. */
+export function inkImage(options = {}) {
+    const pan = options.pan ?? 0;
+    return defineText(ID, pan > 0 ? CSS : "", {
+        look: LOOK,
+        vars: {
+            [varName(ID, "src")]: options.src ? `url(${JSON.stringify(options.src)})` : "none",
+            ...(pan > 0 ? { [varName(ID, "time")]: seconds(pan) } : {}),
+        },
+        claims: ["paint"],
+        needs: { paint: true, ...(pan > 0 ? { loop: true } : {}) },
+    });
+}

package/dist/text/effects/ink/inkImage.schema.d.ts

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

package/dist/text/effects/ink/inkImage.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_IMAGE_SCHEMA = defineSchema()({
+    id: "inkImage",
+    family: "text",
+    factory: "inkImage",
+    fields: {
+        src: { kind: "text", label: "Picture", url: true, placeholder: "/photo.jpg", required: true },
+        pan: { kind: "number", label: "Pan time", min: 0, max: 30, step: 0.5, unit: "s", default: 0, help: "0 keeps it still. Whole text only." },
+    },
+});

package/dist/text/effects/ink/inkLineShadow.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface InkLineShadowOptions {
+    /** The stripes' colour. Default the theme's accent. */
+    readonly color?: string;
+    /** How far the shadow sits from the text, in em. Default `0.06`. */
+    readonly offset?: number;
+    /** Seconds for the stripes to move one step; `0` keeps them still. Default `0.8`. */
+    readonly duration?: number;
+}
+/** A shadow made of diagonal stripes sits behind the text, the stripes sliding along. */
+export declare function inkLineShadow(options?: InkLineShadowOptions): TextEffect;