@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/text/effects/stroke/strokeDraw.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface StrokeDrawOptions {
+    /** The outline's and the fill's colour. Default the text's own colour. */
+    readonly color?: string;
+    /** The outline's width, in px. Default `1.5`. */
+    readonly width?: number;
+    /** Seconds to draw it and fill it. Default `2.4`. */
+    readonly duration?: number;
+    /** Seconds before it starts. Default `0`. */
+    readonly delay?: number;
+}
+/** The letters' outlines draw themselves, then fill in. For logos and short headings, on one line. */
+export declare function strokeDraw(options?: StrokeDrawOptions): TextEffect;

package/dist/text/effects/stroke/strokeDraw.js

@@ -0,0 +1,38 @@
+import { SHOW, at, defineText, enter, hostOf, layerOf, seconds, v, varName } from "../kit.js";
+const ID = "strokeDraw";
+const LINE = `${layerOf(ID)} text`;
+/** A dash longer than any one letter's outline: each letter's outline draws in over the same time. */
+const DASH = 400;
+// HTML text can't draw its outline bit by bit, so the visible text is the SVG's, on one line; the HTML text stays for
+// screen readers and holds the size, unseen. Without motion, or scripts, the SVG text simply shows, filled.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} { opacity: 0; white-space: nowrap; }
+  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; }
+  ${at(`${hostOf(ID)} ${LINE}`)} {
+    fill: ${v(ID, "color")};
+    stroke: ${v(ID, "color")};
+    stroke-width: ${v(ID, "width")};
+  }`;
+const CSS = enter(ID, {
+    target: LINE,
+    from: `stroke-dasharray: ${DASH}; stroke-dashoffset: ${DASH}; fill-opacity: 0;`,
+    frames: `0% { stroke-dasharray: ${DASH}; stroke-dashoffset: ${DASH}; fill-opacity: 0; }
+    70% { stroke-dasharray: ${DASH}; stroke-dashoffset: 0; fill-opacity: 0; }
+    100% { stroke-dasharray: ${DASH}; stroke-dashoffset: 0; fill-opacity: 1; }`,
+    ease: "ease-in-out",
+});
+/** The letters' outlines draw themselves, then fill in. For logos and short headings, on one line. */
+export function strokeDraw(options = {}) {
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "currentColor",
+            [varName(ID, "width")]: `${options.width ?? 1.5}px`,
+            [varName(ID, "time")]: seconds(options.duration ?? 2.4),
+            [varName(ID, "stagger")]: "0s",
+            [varName(ID, "delay")]: seconds(options.delay ?? 0),
+        },
+        layers: [{ svgText: "draw" }],
+        claims: ["paint", "enter"],
+        needs: { inView: true },
+    });
+}

package/dist/text/effects/stroke/strokeDraw.schema.d.ts

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

package/dist/text/effects/stroke/strokeDraw.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_DRAW_SCHEMA = defineSchema()({
+    id: "strokeDraw",
+    family: "text",
+    factory: "strokeDraw",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "currentColor" },
+        width: { kind: "number", label: "Outline", min: 0.5, max: 6, step: 0.25, unit: "px", default: 1.5 },
+        duration: { kind: "number", label: "Duration", min: 0.5, max: 8, step: 0.1, unit: "s", default: 2.4 },
+        delay: { kind: "number", label: "Delay", min: 0, max: 3, step: 0.05, unit: "s", default: 0 },
+    },
+});

package/dist/text/effects/stroke/strokeFill.d.ts

@@ -0,0 +1,11 @@
+import type { TextEffect } from "../../types.js";
+export interface StrokeFillOptions {
+    /** The outline's and the fill's colour. Default the text's own colour. */
+    readonly color?: string;
+    /** The outline's width, in px. Default `1.5`. */
+    readonly width?: number;
+    /** Seconds the fill takes. Default `0.45`. */
+    readonly duration?: number;
+}
+/** Big outlined letters that fill with colour from the reading start on hover. */
+export declare function strokeFill(options?: StrokeFillOptions): TextEffect;

package/dist/text/effects/stroke/strokeFill.js

@@ -0,0 +1,31 @@
+import { SHOW, at, defineText, hostOf, layerOf, v, varName, whenOn } from "../kit.js";
+import { fromStart } from "../ink/kit.js";
+const ID = "strokeFill";
+const FILL = layerOf(ID);
+// The text is an outline; a filled copy over it is cut away from the reading start and uncovered on hover. The cut is
+// a clip-path, so the fill moves without repainting the letters.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    -webkit-text-fill-color: transparent;
+    -webkit-text-stroke: ${v(ID, "width")} ${v(ID, "color")};
+  }
+  ${at(`${hostOf(ID)} ${FILL}`)} {
+    display: block;
+    color: ${v(ID, "color")};
+    -webkit-text-stroke: ${v(ID, "width")} ${v(ID, "color")};
+    clip-path: ${fromStart("0")};
+  }
+${whenOn(ID, FILL, `clip-path: ${fromStart("1")};`)}`;
+const CSS = `  ${at(`${hostOf(ID)} ${FILL}`)} { transition: clip-path ${v(ID, "time")} var(--ease-sx-out, ease-out); }`;
+/** Big outlined letters that fill with colour from the reading start on hover. */
+export function strokeFill(options = {}) {
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "currentColor",
+            [varName(ID, "width")]: `${options.width ?? 1.5}px`,
+            [varName(ID, "time")]: `${options.duration ?? 0.45}s`,
+        },
+        layers: [{ copy: true }],
+        claims: ["stroke"],
+    });
+}

package/dist/text/effects/stroke/strokeFill.schema.d.ts

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

package/dist/text/effects/stroke/strokeFill.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_FILL_SCHEMA = defineSchema()({
+    id: "strokeFill",
+    family: "text",
+    factory: "strokeFill",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "currentColor" },
+        width: { kind: "number", label: "Outline", min: 0.5, max: 6, step: 0.25, unit: "px", default: 1.5 },
+        duration: { kind: "number", label: "Fill time", min: 0.1, max: 2, step: 0.05, unit: "s", default: 0.45 },
+    },
+});

package/dist/text/effects/stroke/strokeGradient.d.ts

@@ -0,0 +1,13 @@
+import type { TextEffect } from "../../types.js";
+export interface StrokeGradientOptions {
+    /** The bright outline's colour under the pointer. Default the theme's primary. */
+    readonly color?: string;
+    /** The outline's colour elsewhere. Default the text's colour, faded. */
+    readonly base?: string;
+    /** How far the light reaches around the pointer, in px. Default `120`. */
+    readonly radius?: number;
+    /** The outline's width, in px. Default `1.5`. */
+    readonly width?: number;
+}
+/** Big outlined text; the outline lights up in colour around the mouse. Needs a mouse: a plain outline elsewhere. */
+export declare function strokeGradient(options?: StrokeGradientOptions): TextEffect;

package/dist/text/effects/stroke/strokeGradient.js

@@ -0,0 +1,35 @@
+import { SHOW, at, defineText, hostOf, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "strokeGradient";
+const LIT = layerOf(ID);
+// A faint outline, and over it a bright copy seen only through a soft circle around the pointer. The circle moves by
+// its mask position (a small repaint per move, none at rest); it fades in on hover. Without a mouse: the faint outline.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    -webkit-text-fill-color: transparent;
+    -webkit-text-stroke: ${v(ID, "width")} ${v(ID, "base")};
+  }`;
+const MASK = `radial-gradient(circle ${v(ID, "radius")} at var(--sx-text-x, 50%) var(--sx-text-y, 50%), black, transparent)`;
+const CSS = `  ${at(`${hostOf(ID)} ${LIT}`)} {
+    display: block;
+    -webkit-text-fill-color: transparent;
+    -webkit-text-stroke: ${v(ID, "width")} ${v(ID, "color")};
+    -webkit-mask-image: ${MASK};
+    mask-image: ${MASK};
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+  }
+${whenOn(ID, LIT, "opacity: 1;")}`;
+/** Big outlined text; the outline lights up in colour around the mouse. Needs a mouse: a plain outline elsewhere. */
+export function strokeGradient(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 35%, transparent)",
+            [varName(ID, "radius")]: `${options.radius ?? 120}px`,
+            [varName(ID, "width")]: `${options.width ?? 1.5}px`,
+        },
+        layers: [{ copy: true }],
+        claims: ["stroke"],
+        needs: { pointer: true },
+    });
+}

package/dist/text/effects/stroke/strokeGradient.schema.d.ts

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

package/dist/text/effects/stroke/strokeGradient.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_GRADIENT_SCHEMA = defineSchema()({
+    id: "strokeGradient",
+    family: "text",
+    factory: "strokeGradient",
+    fields: {
+        color: { kind: "color", label: "Lit outline", default: "var(--color-sx-primary)" },
+        base: { kind: "color", label: "Outline", default: "color-mix(in oklab, currentColor 35%, transparent)" },
+        radius: { kind: "number", label: "Light reach", min: 20, max: 400, step: 5, unit: "px", default: 120 },
+        width: { kind: "number", label: "Outline", min: 0.5, max: 6, step: 0.25, unit: "px", default: 1.5 },
+    },
+});

package/dist/text/effects/stroke/strokeHandwrite.d.ts

@@ -0,0 +1,17 @@
+import type { TextEffect } from "../../types.js";
+export interface StrokeHandwriteOptions {
+    /** The words as single-line paths (`d` strings), exported from Figma or Illustrator in the order they are written. */
+    readonly paths?: readonly string[];
+    /** The paths' coordinate box. Default `"0 0 100 100"`. */
+    readonly viewBox?: string;
+    /** The ink's colour. Default the text's own colour. */
+    readonly color?: string;
+    /** The pen's width, in the paths' own units (it scales with the drawing). Default `2`. */
+    readonly width?: number;
+    /** Seconds each path takes to write. Default `1.2`. */
+    readonly duration?: number;
+    /** Seconds between one path and the next. Default `0.4`. */
+    readonly stagger?: number;
+}
+/** A signature or handwritten words write themselves, stroke by stroke. Give it the words as paths. */
+export declare function strokeHandwrite(options?: StrokeHandwriteOptions): TextEffect;

package/dist/text/effects/stroke/strokeHandwrite.js

@@ -0,0 +1,47 @@
+import { SHOW, at, defineText, enter, hostOf, layerOf, seconds, v, varName } from "../kit.js";
+const ID = "strokeHandwrite";
+const PEN = `${layerOf(ID)} path`;
+// The handwriting stands in for the text (which stays for screen readers and holds the size), as long as there are
+// paths. pathLength="1" makes one dash the whole path, so every path writes over the same time.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} { opacity: calc(1 - ${v(ID, "hide")}); }
+  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} { display: block; }
+  ${at(`${hostOf(ID)} ${PEN}`)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: ${v(ID, "width")};
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }`;
+// The dash exists only while it writes: at rest the ink is whole. No non-scaling-stroke: with it, Chromium mis-draws
+// the dash (see text/runtime/fit.ts); the drawing scales evenly, so the pen scales with it.
+const CSS = enter(ID, {
+    target: PEN,
+    from: "stroke-dasharray: 1; stroke-dashoffset: 1;",
+    frames: "from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; }",
+    ease: "ease-in-out",
+});
+/** A signature or handwritten words write themselves, stroke by stroke. Give it the words as paths. */
+export function strokeHandwrite(options = {}) {
+    const paths = options.paths ?? [];
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "hide")]: paths.length > 0 ? 1 : 0,
+            [varName(ID, "color")]: options.color ?? "currentColor",
+            [varName(ID, "width")]: options.width ?? 2,
+            [varName(ID, "time")]: seconds(options.duration ?? 1.2),
+            [varName(ID, "stagger")]: seconds(options.stagger ?? 0.4),
+            [varName(ID, "delay")]: "0s",
+        },
+        layers: paths.length > 0
+            ? [{
+                    svg: {
+                        viewBox: options.viewBox ?? "0 0 100 100",
+                        children: paths.map((d, i) => ({ tag: "path", attrs: { d, pathLength: 1 }, vars: { "--sx-o": i } })),
+                    },
+                }]
+            : [],
+        claims: ["paint", "enter"],
+        needs: { inView: true },
+    });
+}

package/dist/text/effects/stroke/strokeHandwrite.schema.d.ts

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

package/dist/text/effects/stroke/strokeHandwrite.schema.js

@@ -0,0 +1,14 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_HANDWRITE_SCHEMA = defineSchema()({
+    id: "strokeHandwrite",
+    family: "text",
+    factory: "strokeHandwrite",
+    fields: {
+        paths: { kind: "texts", label: "Paths", min: 0, max: 40, help: "The words as single-line SVG paths (d strings), in writing order.", default: [] },
+        viewBox: { kind: "text", label: "Path box", placeholder: "0 0 100 100", advanced: true, default: "0 0 100 100" },
+        color: { kind: "color", label: "Ink", default: "currentColor" },
+        width: { kind: "number", label: "Pen width", min: 0.5, max: 8, step: 0.25, default: 2 },
+        duration: { kind: "number", label: "Per path", min: 0.2, max: 5, step: 0.1, unit: "s", default: 1.2 },
+        stagger: { kind: "number", label: "Between paths", min: 0, max: 2, step: 0.05, unit: "s", default: 0.4 },
+    },
+});

package/dist/text/effects/stroke/strokeNote.d.ts

@@ -0,0 +1,18 @@
+import type { TextEffect } from "../../types.js";
+export type NoteKind = "underline" | "box" | "circle" | "strike" | "cross" | "bracket";
+export interface StrokeNoteOptions {
+    /** What is drawn round the text. Default `"circle"`. */
+    readonly kind?: NoteKind;
+    /** The pen's colour. Default the theme's accent. */
+    readonly color?: string;
+    /** The pen's width, in px. Default `2.5`. */
+    readonly width?: number;
+    /** Seconds to draw it. Default `0.8`. */
+    readonly duration?: number;
+    /** Seconds before it starts, once the text is on screen. Default `0.2`. */
+    readonly delay?: number;
+    /** How the hand wobbles: the same seed draws the same line on the server and in the browser. Default `1`. */
+    readonly seed?: number;
+}
+/** A hand-drawn circle, box, underline, strike, cross or brackets draws itself round the text as it enters. */
+export declare function strokeNote(options?: StrokeNoteOptions): TextEffect;

package/dist/text/effects/stroke/strokeNote.js

@@ -0,0 +1,79 @@
+import { rng } from "../../../backgrounds/runtime/rng.js";
+import { at, defineText, enter, hostOf, layerOf, seconds, v, varName } from "../kit.js";
+const ID = "strokeNote";
+const PEN = `${layerOf(ID)} path`;
+/** Each kind as points in a 100 x 100 box, drawn in reading order. Strokes are separated by `M`. */
+const SHAPES = {
+    underline: "M 2 60 Q 30 40 50 55 T 98 45",
+    box: "M 3 8 L 97 4 L 96 95 L 4 96 L 2 6",
+    circle: "M 55 4 C 88 3 99 30 97 55 C 95 86 68 98 44 97 C 14 95 2 74 3 47 C 4 19 27 5 60 7",
+    strike: "M 2 54 L 98 46",
+    cross: "M 4 8 L 96 92 M 96 8 L 4 92",
+    bracket: "M 12 4 L 4 5 L 5 95 L 13 96 M 88 4 L 96 5 L 95 95 L 87 96",
+};
+/** Where the drawing sits round the text: [block start, block end, inline start, inline end], in em (negative = outside). */
+const PLACE = {
+    underline: [0.85, -0.25, 0, 0],
+    box: [-0.15, -0.15, -0.25, -0.25],
+    circle: [-0.3, -0.3, -0.45, -0.45],
+    strike: [0.2, 0.2, -0.05, -0.05],
+    cross: [-0.05, -0.05, -0.1, -0.1],
+    bracket: [-0.1, -0.1, -0.3, -0.3],
+};
+/** The shape with every coordinate nudged by up to 1.5, as a hand would: seeded, so server and browser agree. */
+function wobble(d, seed) {
+    const r = rng(seed);
+    return d.replace(/-?\d+(\.\d+)?/g, (n) => String(Math.round((Number(n) + (r() - 0.5) * 3) * 10) / 10));
+}
+// The drawing is stretched to the text until Text sizes it in px (fit); the stroke keeps its width either way.
+// Mirrored in right-to-left text, so it starts at the reading start. Without motion or scripts, it is simply there.
+const LOOK = `  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} {
+    display: block;
+    inset-block: ${v(ID, "top")} ${v(ID, "bottom")};
+    inset-inline: ${v(ID, "start")} ${v(ID, "end")};
+    scale: var(--sx-text-dir) 1;
+  }
+  ${at(`${hostOf(ID)} ${PEN}`)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: ${v(ID, "width")};
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }`;
+// The dash exists only while it draws in: at rest the line is whole, even before Text has sized the drawing.
+const CSS = enter(ID, {
+    target: PEN,
+    from: "stroke-dasharray: 1; stroke-dashoffset: 1;",
+    frames: "from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; }",
+    ease: "ease-in-out",
+});
+/** A hand-drawn circle, box, underline, strike, cross or brackets draws itself round the text as it enters. */
+export function strokeNote(options = {}) {
+    const kind = options.kind ?? "circle";
+    const [top, bottom, start, end] = PLACE[kind];
+    const path = wobble(SHAPES[kind], options.seed ?? 1);
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "var(--color-sx-accent)",
+            [varName(ID, "width")]: `${options.width ?? 2.5}px`,
+            [varName(ID, "top")]: `${top}em`,
+            [varName(ID, "bottom")]: `${bottom}em`,
+            [varName(ID, "start")]: `${start}em`,
+            [varName(ID, "end")]: `${end}em`,
+            [varName(ID, "time")]: seconds(options.duration ?? 0.8),
+            [varName(ID, "stagger")]: "0s",
+            [varName(ID, "delay")]: seconds(options.delay ?? 0.2),
+        },
+        layers: [{
+                svg: {
+                    viewBox: "0 0 100 100",
+                    preserveAspectRatio: "none",
+                    fit: true,
+                    children: [{ tag: "path", attrs: { d: path, "data-sx-text-fit": path, pathLength: 1, "vector-effect": "non-scaling-stroke" } }],
+                },
+            }],
+        claims: ["stroke"],
+        needs: { inView: true },
+    });
+}

package/dist/text/effects/stroke/strokeNote.schema.d.ts

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

package/dist/text/effects/stroke/strokeNote.schema.js

@@ -0,0 +1,15 @@
+import { seedField } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_NOTE_SCHEMA = defineSchema()({
+    id: "strokeNote",
+    family: "text",
+    factory: "strokeNote",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["underline", "box", "circle", "strike", "cross", "bracket"], labels: { underline: "Underline", box: "Box", circle: "Circle", strike: "Strike-through", cross: "Cross-out", bracket: "Brackets" }, default: "circle" },
+        color: { kind: "color", label: "Pen", default: "var(--color-sx-accent)" },
+        width: { kind: "number", label: "Pen width", min: 0.5, max: 8, step: 0.25, unit: "px", default: 2.5 },
+        duration: { kind: "number", label: "Duration", min: 0.2, max: 3, step: 0.05, unit: "s", default: 0.8 },
+        delay: { kind: "number", label: "Delay", min: 0, max: 3, step: 0.05, unit: "s", default: 0.2 },
+        seed: seedField(1),
+    },
+});

package/dist/text/effects/stroke/strokeUnderline.d.ts

@@ -0,0 +1,16 @@
+import type { TextEffect } from "../../types.js";
+export interface StrokeUnderlineOptions {
+    /**
+     * - `"slide"` (default): a line grows from the reading start.
+     * - `"centre"`: it grows out from the middle.
+     * - `"wave"`: a wavy underline fades in.
+     * - `"draw"`: a hand-drawn line writes itself under the text (one line of text).
+     */
+    readonly kind?: "slide" | "centre" | "wave" | "draw";
+    /** The line's colour. Default the text's own colour. */
+    readonly color?: string;
+    /** The line's thickness, in em. Default `0.07`. */
+    readonly thickness?: number;
+}
+/** Link underlines that slide in, grow from the middle, wave in or draw themselves on hover and keyboard focus. */
+export declare function strokeUnderline(options?: StrokeUnderlineOptions): TextEffect;

package/dist/text/effects/stroke/strokeUnderline.js

@@ -0,0 +1,56 @@
+import { SHOW, START_X, at, defineText, hostOf, layerOf, v, varName, whenOn } from "../kit.js";
+const ID = "strokeUnderline";
+/** A loose hand-drawn line in a 100 x 100 box, sized to the text by Text. */
+const DRAWN = "M 1 60 C 20 20, 35 90, 52 50 S 82 30, 99 60";
+const PEN = `${layerOf(ID)} path`;
+// A link's text can wrap: the bars are a background on the text as an inline box, so each line gets its own piece.
+// The kinds travel as vars (a bar of 0 is no bar, a transparent wave is no wave), so one stylesheet serves all four.
+// A state, not a motion: the hover look ships under reduced motion too; only the transitions are motion.
+const LOOK = `  ${at(`${hostOf(ID)} ${SHOW}`)} {
+    display: inline;
+    background: linear-gradient(${v(ID, "color")}, ${v(ID, "color")}) no-repeat;
+    background-size: 0% ${v(ID, "bar")};
+    background-position: ${v(ID, "x")} 100%;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+    text-decoration: underline wavy transparent;
+    text-decoration-thickness: calc(${v(ID, "thickness")} * 0.8);
+    text-underline-offset: 0.25em;
+  }
+  ${at(`${hostOf(ID)} ${layerOf(ID)}`)} {
+    display: block;
+    inset-block: auto -0.2em;
+    block-size: 0.35em;
+    scale: var(--sx-text-dir) 1;
+  }
+  ${at(`${hostOf(ID)} ${PEN}`)} {
+    fill: none;
+    stroke: ${v(ID, "color")};
+    stroke-width: ${v(ID, "thickness")};
+    stroke-linecap: round;
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+  }
+${whenOn(ID, SHOW, `background-size: 100% ${v(ID, "bar")}; text-decoration-color: ${v(ID, "wave")};`)}
+${whenOn(ID, PEN, "stroke-dashoffset: 0;")}`;
+const CSS = `  ${at(`${hostOf(ID)} ${SHOW}`)} { transition: background-size 0.3s var(--ease-sx-out, ease-out), text-decoration-color 0.3s ease-out; }
+  ${at(`${hostOf(ID)} ${PEN}`)} { transition: stroke-dashoffset 0.5s ease-in-out; }`;
+/** Link underlines that slide in, grow from the middle, wave in or draw themselves on hover and keyboard focus. */
+export function strokeUnderline(options = {}) {
+    const kind = options.kind ?? "slide";
+    const thickness = options.thickness ?? 0.07;
+    return defineText(ID, CSS, {
+        look: LOOK,
+        vars: {
+            [varName(ID, "color")]: options.color ?? "currentColor",
+            [varName(ID, "thickness")]: `${thickness}em`,
+            [varName(ID, "bar")]: kind === "slide" || kind === "centre" ? `${thickness}em` : "0em",
+            [varName(ID, "x")]: kind === "centre" ? "50%" : START_X,
+            [varName(ID, "wave")]: kind === "wave" ? (options.color ?? "currentColor") : "transparent",
+        },
+        layers: kind === "draw"
+            ? [{ svg: { viewBox: "0 0 100 100", preserveAspectRatio: "none", fit: true, children: [{ tag: "path", attrs: { d: DRAWN, "data-sx-text-fit": DRAWN, pathLength: 1, "vector-effect": "non-scaling-stroke" } }] } }]
+            : [],
+        claims: ["stroke"],
+    });
+}

package/dist/text/effects/stroke/strokeUnderline.schema.d.ts

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

package/dist/text/effects/stroke/strokeUnderline.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const STROKE_UNDERLINE_SCHEMA = defineSchema()({
+    id: "strokeUnderline",
+    family: "text",
+    factory: "strokeUnderline",
+    fields: {
+        kind: { kind: "choice", label: "Kind", values: ["slide", "centre", "wave", "draw"], labels: { slide: "Slide from the start", centre: "Grow from the middle", wave: "Wavy", draw: "Hand-drawn" }, default: "slide" },
+        color: { kind: "color", label: "Line", default: "currentColor" },
+        thickness: { kind: "number", label: "Thickness", min: 0.02, max: 0.3, step: 0.01, unit: "em", default: 0.07 },
+    },
+});

package/dist/text/effects/warp/ascii.d.ts

@@ -0,0 +1,9 @@
+export interface AsciiSettings {
+    /** The characters from faint to dense. */
+    readonly ramp: string;
+    /** A cell's size, in px; 0: an eighth of the text's size, so a heading of any size reads. */
+    readonly cell: number;
+    /** Whether a few characters flicker. */
+    readonly flicker: boolean;
+}
+export declare function attachAscii(el: HTMLElement, id: string, s: AsciiSettings): () => void;

package/dist/text/effects/warp/ascii.js

@@ -0,0 +1,83 @@
+// warpAscii's program: how much of each cell of a grid the letters cover, read once per measure from a small canvas,
+// then each covered cell drawn as a character, denser for more cover, a few of them flickering. Imported only by warpAscii.
+import { createColorResolver } from "../../../backgrounds/runtime/color.js";
+import { attachLoop, drawWords, rgba, snapshot } from "../../runtime/canvasText.js";
+function coverage(snap, cell) {
+    const cols = Math.max(1, Math.ceil(snap.w / cell));
+    const rows = Math.max(1, Math.ceil(snap.h / cell));
+    const small = document.createElement("canvas");
+    small.getContext("2d", { willReadFrequently: true });
+    // the words drawn at 1/cell scale: each pixel is one cell's average cover
+    const c = drawWords(small, { ...snap, dpr: 1 / cell }, "black");
+    const fill = new Float32Array(cols * rows);
+    if (!c)
+        return { cols, rows, fill };
+    const data = c.getImageData(0, 0, small.width, small.height).data;
+    for (let y = 0; y < Math.min(rows, small.height); y++) {
+        for (let x = 0; x < Math.min(cols, small.width); x++)
+            fill[y * cols + x] = (data[(y * small.width + x) * 4 + 3] ?? 0) / 255;
+    }
+    return { cols, rows, fill };
+}
+export function attachAscii(el, id, s) {
+    const layer = el.querySelector(`[data-sx-text-layer="${id}"]`);
+    const show = el.querySelector("[data-sx-text-show]");
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!layer || !show || !ctx)
+        return () => { };
+    layer.appendChild(canvas);
+    const resolver = createColorResolver(el);
+    const ramp = [...(s.ramp.length > 1 ? s.ramp : " .:-=+*#%@")];
+    let grid = { cols: 1, rows: 1, fill: new Float32Array(1) };
+    let color = "currentColor";
+    let dpr = 1;
+    let step = -1;
+    let cell = 8;
+    const loop = attachLoop(el, layer, {
+        measure() {
+            const snap = snapshot(layer, show, (c) => resolver.resolve(c));
+            dpr = snap.dpr;
+            canvas.width = Math.max(1, Math.round(snap.w * dpr));
+            canvas.height = Math.max(1, Math.round(snap.h * dpr));
+            cell = s.cell > 0 ? s.cell : Math.max(3, Math.round(snap.size / 8));
+            grid = coverage(snap, cell);
+            color = rgba(snap.color);
+            step = -1;
+        },
+        frame(t) {
+            // about 12 flickers a second: the characters only change when the step does
+            const now = Math.floor(t * 12);
+            if (now === step)
+                return s.flicker;
+            step = now;
+            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = color;
+            ctx.font = `${cell * 1.15}px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`;
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            const last = ramp.length - 1;
+            for (let y = 0; y < grid.rows; y++) {
+                for (let x = 0; x < grid.cols; x++) {
+                    const f = grid.fill[y * grid.cols + x] ?? 0;
+                    if (f < 0.08)
+                        continue;
+                    let k = Math.round(f * last);
+                    // a cell flickers to a neighbouring character now and then: the same cells on the same step, no randomness
+                    if (s.flicker && !loop.still() && ((x * 7 + y * 13 + now * 5) % 23) === 0)
+                        k = Math.max(1, k - 1 - ((x + now) % 2));
+                    ctx.fillText(ramp[k] ?? "#", (x + 0.5) * cell, (y + 0.5) * cell);
+                }
+            }
+            el.setAttribute("data-sx-text-drawn", "");
+            return s.flicker;
+        },
+    });
+    return () => {
+        loop.stop();
+        resolver.dispose();
+        canvas.remove();
+        el.removeAttribute("data-sx-text-drawn");
+    };
+}

package/dist/text/effects/warp/fuzz.d.ts

@@ -0,0 +1,8 @@
+export interface FuzzSettings {
+    /** px the rows move at rest, and while hovered. */
+    readonly rest: number;
+    readonly hover: number;
+    /** A row's height, in px. */
+    readonly row: number;
+}
+export declare function attachFuzz(el: HTMLElement, id: string, s: FuzzSettings): () => void;