@sharedex/ui 0.0.0-stage → 0.9.0

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;

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

@@ -0,0 +1,32 @@
+import { DIR, at, defineText, hostOf, layerOf, loop, seconds, v, varName } from "../kit.js";
+const ID = "inkLineShadow";
+const SHADOW = layerOf(ID);
+/** One tile of diagonal stripes that joins up with its neighbours. */
+const TILE = "0.18em";
+// A copy behind the text, down and towards the reading end, painted with stripes. The stripes move by moving the
+// background one tile: the one way to move a fill inside letters (listed in the test).
+const LOOK = `  ${at(`${hostOf(ID)} ${SHADOW}`)} {
+    display: block;
+    translate: calc(${v(ID, "offset")} * ${DIR}) ${v(ID, "offset")};
+    background: linear-gradient(45deg, ${v(ID, "color")} 25%, transparent 25% 50%, ${v(ID, "color")} 50% 75%, transparent 75%) 0 0 / ${TILE} ${TILE};
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }`;
+const CSS = `  @keyframes sx-text-inkLineShadow { to { background-position: ${TILE} 0; } }
+${loop(ID, SHADOW, `sx-text-inkLineShadow ${v(ID, "time")} linear infinite`)}`;
+/** A shadow made of diagonal stripes sits behind the text, the stripes sliding along. */
+export function inkLineShadow(options = {}) {
+    const duration = options.duration ?? 0.8;
+    return defineText(ID, duration > 0 ? CSS : "", {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "offset")]: `${options.offset ?? 0.06}em`,
+            ...(duration > 0 ? { [varName(ID, "time")]: seconds(duration) } : {}),
+        },
+        layers: [{ slot: "under", copy: true }],
+        claims: ["shadow"],
+        needs: duration > 0 ? { loop: true } : {},
+    });
+}

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

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

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

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_LINE_SHADOW_SCHEMA = defineSchema()({
+    id: "inkLineShadow",
+    family: "text",
+    factory: "inkLineShadow",
+    fields: {
+        color: { kind: "color", label: "Stripes", default: "var(--color-sx-accent)" },
+        offset: { kind: "number", label: "Offset", min: 0, max: 0.3, step: 0.01, unit: "em", default: 0.06 },
+        duration: { kind: "number", label: "Stripe speed", min: 0, max: 4, step: 0.1, unit: "s", default: 0.8, help: "0 keeps them still." },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface InkLinesOptions {
+    /** The lines' colours. Default the theme's primary and accent. */
+    readonly colors?: readonly string[];
+    /** How many lines cross the text. Default `6`. */
+    readonly count?: number;
+    /** How fast they sway: 1 is the default pace. Default `1`. */
+    readonly speed?: number;
+    /** Each line's thickness, in px. Default `3`. */
+    readonly width?: number;
+}
+/** Coloured curved lines sway inside the letters, drawn on a canvas. It carries code: the page needs `"use client"`. */
+export declare function inkLines(options?: InkLinesOptions): TextEffect;

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

@@ -0,0 +1,14 @@
+import { SHOW, at, defineText, hostOf, layerOf } from "../kit.js";
+import { THEME_COLORS } from "./kit.js";
+import { attachLines } from "./lines.js";
+const ID = "inkLines";
+// The canvas stands in for the text once it has drawn (data-sx-text-drawn); until then, and without scripts, the HTML
+// text shows. Under reduced motion it draws once and holds still.
+const LOOK = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; }
+  ${at(`${hostOf(ID)}[data-sx-text-drawn] ${SHOW}`)} { opacity: 0; }`;
+/** Coloured curved lines sway inside the letters, drawn on a canvas. It carries code: the page needs `"use client"`. */
+export function inkLines(options = {}) {
+    const settings = { colors: options.colors ?? THEME_COLORS, count: options.count ?? 6, speed: options.speed ?? 1, width: options.width ?? 3 };
+    const program = { attach: (el) => attachLines(el, settings), signature: JSON.stringify(settings) };
+    return defineText(ID, "", { look: LOOK, layers: [{}], claims: ["paint"], program });
+}

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

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

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

@@ -0,0 +1,13 @@
+import { colorsField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const INK_LINES_SCHEMA = defineSchema()({
+    id: "inkLines",
+    family: "text",
+    factory: "inkLines",
+    fields: {
+        colors: colorsField(["var(--color-sx-primary)", "var(--color-sx-accent)"]),
+        count: { kind: "integer", label: "Lines", min: 1, max: 16, default: 6 },
+        speed: { kind: "number", label: "Speed", min: 0.1, max: 4, step: 0.1, default: 1 },
+        width: { kind: "number", label: "Line width", min: 1, max: 12, step: 0.5, unit: "px", default: 3 },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkNeonOptions {
+    /** The glow's colour. Default the theme's primary. */
+    readonly color?: string;
+    /** Seconds from one flicker to the next; `0` never flickers. Default `7`. */
+    readonly flicker?: number;
+}
+/** A neon tube: the text glows in a colour and flickers briefly now and then. The glow stays still under reduced motion. */
+export declare function inkNeon(options?: InkNeonOptions): TextEffect;

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

@@ -0,0 +1,26 @@
+import { at, defineText, hostOf, layerOf, loop, seconds, v, varName } from "../kit.js";
+const ID = "inkNeon";
+const GLOW = layerOf(ID);
+// The glow is a copy behind the text with fixed shadows; only its opacity flickers, so no shadow is ever repainted
+// (atlas rule 6). The flicker is a few quick steps at the start of each period, then steady light.
+const LOOK = `  ${at(`${hostOf(ID)} ${GLOW}`)} {
+    display: block;
+    color: ${v(ID, "color")};
+    text-shadow: 0 0 0.08em ${v(ID, "color")}, 0 0 0.25em ${v(ID, "color")}, 0 0 0.6em ${v(ID, "color")};
+  }`;
+const CSS = `  @keyframes sx-text-inkNeon {
+    0%, 2%, 5%, 9%, 100% { opacity: 1; }
+    1%, 4%, 7% { opacity: 0.25; }
+  }
+${loop(ID, GLOW, `sx-text-inkNeon ${v(ID, "time")} steps(1, end) infinite`)}`;
+/** A neon tube: the text glows in a colour and flickers briefly now and then. The glow stays still under reduced motion. */
+export function inkNeon(options = {}) {
+    const flicker = options.flicker ?? 7;
+    return defineText(ID, flicker > 0 ? CSS : "", {
+        look: LOOK,
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)", ...(flicker > 0 ? { [varName(ID, "time")]: seconds(flicker) } : {}) },
+        layers: [{ slot: "under", copy: true }],
+        claims: ["shadow"],
+        needs: flicker > 0 ? { loop: true } : {},
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_NEON_SCHEMA = defineSchema()({
+    id: "inkNeon",
+    family: "text",
+    factory: "inkNeon",
+    fields: {
+        color: { kind: "color", label: "Glow", default: "var(--color-sx-primary)" },
+        flicker: { kind: "number", label: "Flicker every", min: 0, max: 30, step: 0.5, unit: "s", default: 7, help: "0 never flickers." },
+    },
+});

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

@@ -0,0 +1,9 @@
+import type { TextEffect } from "../../types.js";
+export interface InkProgressOptions {
+    /** The colour the letters fill with. Default the theme's primary. */
+    readonly color?: string;
+    /** The letters' colour before they fill. Default the text's colour, faded. */
+    readonly base?: string;
+}
+/** The letters fill with colour as a value goes from 0 to 1: `<Text progress={0.6} effect={inkProgress()}>`. */
+export declare function inkProgress(options?: InkProgressOptions): TextEffect;

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

@@ -0,0 +1,25 @@
+import { SHOW, at, defineText, hostOf, layerOf, v, varName } from "../kit.js";
+import { fromStart } from "./kit.js";
+const ID = "inkProgress";
+const FILL = layerOf(ID);
+// A filled copy over the text, cut off past `progress` from the reading start. A state, not a motion: the look ships
+// under reduced motion too; only the easing between values is motion.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} { color: ${v(ID, "base")}; }
+  ${at(`${hostOf(ID)} ${FILL}`)} {
+    display: block;
+    color: ${v(ID, "color")};
+    clip-path: ${fromStart("var(--sx-text-progress, 0)")};
+  }`;
+const CSS = `  ${at(`${hostOf(ID)} ${FILL}`)} { transition: clip-path 0.4s var(--ease-sx-out, ease-out); }`;
+/** The letters fill with colour as a value goes from 0 to 1: `<Text progress={0.6} effect={inkProgress()}>`. */
+export function inkProgress(options = {}) {
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-primary)",
+            [varName(ID, "base")]: options.base ?? "color-mix(in oklab, currentColor 30%, transparent)",
+        },
+        layers: [{ copy: true }],
+        claims: ["paint"],
+    });
+}

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

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

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

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_PROGRESS_SCHEMA = defineSchema()({
+    id: "inkProgress",
+    family: "text",
+    factory: "inkProgress",
+    fields: {
+        color: { kind: "color", label: "Fill", default: "var(--color-sx-primary)" },
+        base: { kind: "color", label: "Before it fills", default: "color-mix(in oklab, currentColor 30%, transparent)" },
+    },
+});

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

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface InkShinyOptions {
+    /** The shine's colour. Default the text's own colour, at full strength over the dimmed text. */
+    readonly color?: string;
+    /** How much of its colour the text keeps under the shine, 0 to 1. Default `0.55`. */
+    readonly dim?: number;
+    /** How wide the band of light is, in % of the text. Default `30`. */
+    readonly width?: number;
+    /** Seconds from one pass to the next, the pause included. Default `3`. */
+    readonly duration?: number;
+}
+/** A band of light sweeps across the text, again and again. Good for "New" badges and short labels. */
+export declare function inkShiny(options?: InkShinyOptions): TextEffect;

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

@@ -0,0 +1,27 @@
+import { SHOW, at, defineText, hostOf, loop, partOf, seconds, v, varName } from "../kit.js";
+import { windowEnd, windowParts } from "./kit.js";
+const ID = "inkShiny";
+const parts = windowParts(ID);
+const end = windowEnd(ID);
+const play = `${v(ID, "time")} linear infinite`;
+// The band passes in the first 70% of each period, then waits. Under reduced motion the text keeps its full colour.
+const CSS = `${parts.css}
+  ${at(`${hostOf(ID)} ${SHOW}`)} { color: color-mix(in oklab, currentColor calc(${v(ID, "dim")} * 100%), transparent); }
+  ${at(`${hostOf(ID)} ${partOf(ID, "copy")}`)} { color: ${v(ID, "color")}; }
+  @keyframes sx-text-inkShiny-win { 0% { ${parts.win} } 70%, 100% { ${end.win} } }
+  @keyframes sx-text-inkShiny-copy { 0% { ${parts.copy} } 70%, 100% { ${end.copy} } }
+${loop(ID, partOf(ID, "win"), `sx-text-inkShiny-win ${play}`)}
+${loop(ID, partOf(ID, "copy"), `sx-text-inkShiny-copy ${play}`)}`;
+/** A band of light sweeps across the text, again and again. Good for "New" badges and short labels. */
+export function inkShiny(options = {}) {
+    return defineText(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "currentColor",
+            [varName(ID, "dim")]: options.dim ?? 0.55,
+            [varName(ID, "width")]: options.width ?? 30,
+            [varName(ID, "time")]: seconds(options.duration ?? 3),
+        },
+        layers: [{ window: true }],
+        needs: { loop: true },
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const INK_SHINY_SCHEMA = defineSchema()({
+    id: "inkShiny",
+    family: "text",
+    factory: "inkShiny",
+    fields: {
+        color: { kind: "color", label: "Shine colour", default: "currentColor" },
+        dim: { kind: "number", label: "Text under the shine", min: 0, max: 1, step: 0.05, default: 0.55 },
+        width: { kind: "number", label: "Band width", min: 5, max: 80, step: 1, unit: "%", default: 30 },
+        duration: { kind: "number", label: "Period", min: 0.5, max: 10, step: 0.1, unit: "s", default: 3 },
+    },
+});

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

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface InkSparklesOptions {
+    /** The stars' colour. Default the theme's accent. */
+    readonly color?: string;
+    /** How many stars. Default `8`. */
+    readonly count?: number;
+    /** Where they sit: the same seed gives the same stars on the server and in the browser. Default `1`. */
+    readonly seed?: number;
+}
+/** Little stars pop and twinkle around the word. */
+export declare function inkSparkles(options?: InkSparklesOptions): TextEffect;

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

@@ -0,0 +1,39 @@
+import { rng } from "../../../backgrounds/runtime/rng.js";
+import { at, defineText, hostOf, layerOf, loop, v, varName } from "../kit.js";
+const ID = "inkSparkles";
+const STAR = `${layerOf(ID)} > [data-sx-text-node]`;
+// Four-pointed stars around and over the text, each twinkling on its own clock. The layer reaches a little past the
+// text, so stars can sit on its edges.
+const CSS = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; inset: -0.3em -0.2em; }
+  ${at(`${hostOf(ID)} ${STAR}`)} {
+    inset-inline-start: var(--x);
+    inset-block-start: var(--y);
+    inline-size: var(--s);
+    block-size: var(--s);
+    translate: -50% -50%;
+    background: ${v(ID, "color")};
+    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
+    scale: 0;
+  }
+  @keyframes sx-text-inkSparkles {
+    0%, 100% { scale: 0; rotate: 0deg; }
+    50% { scale: 1; rotate: 90deg; }
+  }
+${loop(ID, STAR, "sx-text-inkSparkles var(--t) ease-in-out var(--d) infinite")}`;
+/** Little stars pop and twinkle around the word. */
+export function inkSparkles(options = {}) {
+    const r = rng(options.seed ?? 1);
+    const round = (n) => Number(n.toFixed(2));
+    const nodes = Array.from({ length: options.count ?? 8 }, () => ({
+        "--x": `${round(r() * 100)}%`,
+        "--y": `${round(r() * 100)}%`,
+        "--s": `${round(0.25 + r() * 0.35)}em`,
+        "--t": `${round(1.2 + r() * 1.2)}s`,
+        "--d": `${round(-r() * 2.4)}s`,
+    }));
+    return defineText(ID, CSS, {
+        vars: { [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)" },
+        layers: [{ nodes }],
+        needs: { loop: true },
+    });
+}

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

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

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

@@ -0,0 +1,12 @@
+import { seedField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const INK_SPARKLES_SCHEMA = defineSchema()({
+    id: "inkSparkles",
+    family: "text",
+    factory: "inkSparkles",
+    fields: {
+        color: { kind: "color", label: "Stars", default: "var(--color-sx-accent)" },
+        count: { kind: "integer", label: "Stars", min: 1, max: 20, default: 8 },
+        seed: seedField(1),
+    },
+});