@sharedex/ui 0.0.0-stage → 0.9.0

package/dist/buttons/effects/fill/fillSlash.schema.js

@@ -0,0 +1,12 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_SLASH_SCHEMA = defineSchema()({
+    id: "fillSlash",
+    family: "button",
+    factory: "fillSlash",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end"], labels: { start: "Reading start", end: "Reading end" }, default: "start" },
+        angle: { kind: "number", label: "Lean", min: 0, max: 40, step: 1, unit: "°", default: 20 },
+        ...buttonFillFields(),
+    },
+});

package/dist/buttons/effects/fill/fillSpotlight.d.ts

@@ -0,0 +1,11 @@
+import type { ButtonEffect } from "../../types.js";
+export interface FillSpotlightOptions {
+    /** The light's colour. Default the accent colour, partly see-through. */
+    readonly color?: string;
+    /** Its radius, px. Default `90`. */
+    readonly size?: number;
+    /** Seconds it takes to fade in. Default `0.3`. */
+    readonly duration?: number;
+}
+/** A soft light follows the pointer inside the button. Needs a mouse; from the keyboard it sits in the middle. */
+export declare function fillSpotlight(options?: FillSpotlightOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillSpotlight.js

@@ -0,0 +1,22 @@
+import { at, defineButton, layerOf, timed, v, varName, whenOn } from "../kit.js";
+const ID = "fillSpotlight";
+const LAYER = layerOf(ID);
+// a gradient at the pointer: this repaints as the pointer moves, over one button, while it is hovered
+const CSS = `  ${at(LAYER)} {
+    background: radial-gradient(circle calc(${v(ID, "size")} * 1px) at var(--sx-btn-x, 50%) var(--sx-btn-y, 50%), ${v(ID, "color")}, transparent);
+    opacity: 0;
+    ${timed(ID, "opacity")}
+  }
+${whenOn(ID, LAYER, "opacity: 1;")}`;
+/** A soft light follows the pointer inside the button. Needs a mouse; from the keyboard it sits in the middle. */
+export function fillSpotlight(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "color")]: options.color ?? "color-mix(in oklab, var(--color-sx-accent) 70%, transparent)",
+            [varName(ID, "size")]: options.size ?? 90,
+            [varName(ID, "time")]: `${options.duration ?? 0.3}s`,
+        },
+        layers: [{ slot: "fill" }],
+        needs: { pointer: true },
+    });
+}

package/dist/buttons/effects/fill/fillSpotlight.schema.d.ts

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

package/dist/buttons/effects/fill/fillSpotlight.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_SPOTLIGHT_SCHEMA = defineSchema()({
+    id: "fillSpotlight",
+    family: "button",
+    factory: "fillSpotlight",
+    fields: {
+        color: { kind: "color", label: "Colour", default: "color-mix(in oklab, var(--color-sx-accent) 70%, transparent)" },
+        size: { kind: "number", label: "Radius", min: 20, max: 240, step: 5, unit: "px", default: 90 },
+        duration: { kind: "number", label: "Fade time", min: 0.1, max: 1, step: 0.05, unit: "s", default: 0.3 },
+    },
+});

package/dist/buttons/effects/fill/fillSweep.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export interface FillSweepOptions extends FillOptions {
+    /** The edge it comes from. `"start"` follows the reading direction. Default `"start"`. */
+    readonly from?: "start" | "end" | "top" | "bottom";
+}
+/** A colour slides in from one edge: a layer scaled from that edge. */
+export declare function fillSweep(options?: FillSweepOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillSweep.js

@@ -0,0 +1,26 @@
+import { DIR, at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillSweep";
+const LAYER = layerOf(ID);
+const H = v(ID, "h");
+const FLIP = v(ID, "flip");
+const CSS = `  ${at(LAYER)} {
+    background: ${v(ID, "color")};
+    scale: calc(1 - ${H}) ${H};
+    transform-origin: calc(50% + ${DIR} * (${FLIP} - 0.5) * 100%) calc(${FLIP} * 100%);
+    ${fillTransition(ID, "scale")}
+  }
+${whenOn(ID, LAYER, "scale: 1 1;")}
+${labelFollows(ID)}`;
+/** A colour slides in from one edge: a layer scaled from that edge. */
+export function fillSweep(options = {}) {
+    const from = options.from ?? "start";
+    return defineButton(ID, CSS, {
+        vars: {
+            ...fillVars(ID, options),
+            [varName(ID, "h")]: from === "start" || from === "end" ? 1 : 0,
+            [varName(ID, "flip")]: from === "end" || from === "bottom" ? 1 : 0,
+        },
+        layers: [{ slot: "fill" }],
+    });
+}

package/dist/buttons/effects/fill/fillSweep.schema.d.ts

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

package/dist/buttons/effects/fill/fillSweep.schema.js

@@ -0,0 +1,11 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_SWEEP_SCHEMA = defineSchema()({
+    id: "fillSweep",
+    family: "button",
+    factory: "fillSweep",
+    fields: {
+        from: { kind: "choice", label: "From", values: ["start", "end", "top", "bottom"], labels: { start: "Reading start", end: "Reading end", top: "Top", bottom: "Bottom" }, default: "start" },
+        ...buttonFillFields(),
+    },
+});

package/dist/buttons/effects/fill/fillWave.d.ts

@@ -0,0 +1,10 @@
+import type { ButtonEffect } from "../../types.js";
+import { type FillOptions } from "./kit.js";
+export interface FillWaveOptions extends FillOptions {
+    /** How tall the crest is, px. Default `10`. */
+    readonly crest?: number;
+    /** Seconds for one sideways loop of the wave. Default `1.4`. */
+    readonly loop?: number;
+}
+/** The button fills with water: a layer rises under an SVG wave that rolls sideways while hovered. */
+export declare function fillWave(options?: FillWaveOptions): ButtonEffect;

package/dist/buttons/effects/fill/fillWave.js

@@ -0,0 +1,47 @@
+import { wavePath } from "../../../backgrounds/effects/svgKit.js";
+import { DIR, at, defineButton, layerOf, v, varName, whenOn } from "../kit.js";
+import { fillTransition, fillVars, labelFollows } from "./kit.js";
+const ID = "fillWave";
+const LAYER = layerOf(ID);
+const SVG = `${LAYER} > svg`;
+const ROLL = "sx-btn-fillWave";
+const CREST = `calc(${v(ID, "crest")} * 1px)`;
+// two periods in a box twice the button's width: sliding by half of it loops without a seam
+const WAVE = wavePath({ period: 100, periods: 2, base: 10, amplitude: 8, closeTo: 20 });
+const CSS = `  ${at(LAYER)} {
+    background: ${v(ID, "color")};
+    translate: 0 calc(100% + ${CREST});
+    ${fillTransition(ID, "translate")}
+  }
+${whenOn(ID, LAYER, "translate: 0 0;")}
+  ${at(SVG)} {
+    position: absolute;
+    inset-block-end: calc(100% - 1px);
+    inset-inline-start: 0;
+    display: block;
+    inline-size: 200%;
+    block-size: ${CREST};
+    fill: ${v(ID, "color")};
+    animation: ${ROLL} ${v(ID, "loop")} linear infinite paused;
+  }
+${whenOn(ID, SVG, "animation-play-state: running;")}
+  @keyframes ${ROLL} {
+    to { translate: calc(${DIR} * -50%) 0; }
+  }
+${labelFollows(ID)}`;
+/** The button fills with water: a layer rises under an SVG wave that rolls sideways while hovered. */
+export function fillWave(options = {}) {
+    return defineButton(ID, CSS, {
+        vars: {
+            ...fillVars(ID, { ...options, duration: options.duration ?? 0.6 }),
+            [varName(ID, "crest")]: options.crest ?? 10,
+            [varName(ID, "loop")]: `${options.loop ?? 1.4}s`,
+        },
+        layers: [
+            {
+                slot: "fill",
+                svg: { viewBox: "0 0 200 20", preserveAspectRatio: "none", children: [{ tag: "path", attrs: { d: WAVE } }] },
+            },
+        ],
+    });
+}

package/dist/buttons/effects/fill/fillWave.schema.d.ts

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

package/dist/buttons/effects/fill/fillWave.schema.js

@@ -0,0 +1,12 @@
+import { buttonFillFields } from "../../../schema/common.js";
+import { defineSchema } from "../../../schema/define.js";
+export const FILL_WAVE_SCHEMA = defineSchema()({
+    id: "fillWave",
+    family: "button",
+    factory: "fillWave",
+    fields: {
+        ...buttonFillFields(0.6),
+        crest: { kind: "number", label: "Crest height", min: 2, max: 24, step: 1, unit: "px", default: 10 },
+        loop: { kind: "number", label: "Wave speed", min: 0.4, max: 4, step: 0.1, unit: "s", help: "Seconds for one sideways loop.", default: 1.4 },
+    },
+});

package/dist/buttons/effects/fill/kit.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonVars } from "../../types.js";
+export interface FillOptions {
+    /** The colour that fills the button. Default `var(--color-sx-accent)`. */
+    readonly color?: string;
+    /** The label's colour while filled. Default `var(--color-sx-ink)`. */
+    readonly textColor?: string;
+    /** Seconds the fill takes. Default `0.35`. */
+    readonly duration?: number;
+}
+export declare function fillVars(id: string, options: FillOptions): ButtonVars;
+/** A `transition` for one property of a fill, at its duration. */
+export declare const fillTransition: (id: string, property: string, ease?: string) => string;
+/** The label changes colour with the fill. */
+export declare function labelFollows(id: string): string;

package/dist/buttons/effects/fill/kit.js

@@ -0,0 +1,16 @@
+// What the fills share: a colour for the layer, a colour for the label on top of it, and how long the change takes.
+import { at, labelOf, timed, v, varName, whenOn } from "../kit.js";
+export function fillVars(id, options) {
+    return {
+        [varName(id, "color")]: options.color ?? "var(--color-sx-accent)",
+        [varName(id, "text")]: options.textColor ?? "var(--color-sx-ink)",
+        [varName(id, "time")]: `${options.duration ?? 0.35}s`,
+    };
+}
+/** A `transition` for one property of a fill, at its duration. */
+export const fillTransition = timed;
+/** The label changes colour with the fill. */
+export function labelFollows(id) {
+    return `  ${at(labelOf(id))} { ${timed(id, "color")} }
+${whenOn(id, labelOf(id), `color: ${v(id, "text")};`)}`;
+}

package/dist/buttons/effects/glass/glassBlur.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonEffect } from "../../types.js";
+import { type GlassOptions } from "./kit.js";
+export type GlassBlurOptions = GlassOptions;
+/**
+ * Frosted glass: the button blurs and tints whatever lies behind it, with a light edge and a sheen on hover. Wear it on
+ * a see-through face (`variant="ghost"`) over something colourful. Live blur costs GPU time whenever the page behind moves.
+ */
+export declare function glassBlur(options?: GlassBlurOptions): ButtonEffect;

package/dist/buttons/effects/glass/glassBlur.js

@@ -0,0 +1,11 @@
+import { defineButton } from "../kit.js";
+import { GLASS_LAYERS, frost, glassCss, glassVars } from "./kit.js";
+const ID = "glassBlur";
+const CSS = glassCss(ID, frost(ID, 1.4));
+/**
+ * Frosted glass: the button blurs and tints whatever lies behind it, with a light edge and a sheen on hover. Wear it on
+ * a see-through face (`variant="ghost"`) over something colourful. Live blur costs GPU time whenever the page behind moves.
+ */
+export function glassBlur(options = {}) {
+    return defineButton(ID, CSS, { vars: glassVars(ID, options, { strength: 0.25, blur: 12 }), layers: GLASS_LAYERS });
+}

package/dist/buttons/effects/glass/glassBlur.schema.d.ts

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

package/dist/buttons/effects/glass/glassBlur.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLASS_BLUR_SCHEMA = defineSchema()({
+    id: "glassBlur",
+    family: "button",
+    factory: "glassBlur",
+    fields: {
+        tint: { kind: "color", label: "Tint", default: "var(--color-sx-secondary)" },
+        strength: { kind: "number", label: "Milkiness", min: 0, max: 1, step: 0.05, default: 0.25 },
+        blur: { kind: "number", label: "Blur", min: 0, max: 40, step: 1, unit: "px", help: "How much it blurs what lies behind.", default: 12 },
+        highlight: { kind: "color", label: "Edge light", default: "white" },
+    },
+});

package/dist/buttons/effects/glass/glassDistort.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlassDistortOptions {
+    /** How far the picture is pushed about, px. Default `8`. */
+    readonly strength?: number;
+    /** Seconds the three warps take to cycle while hovered. Default `0.4`. */
+    readonly duration?: number;
+}
+/**
+ * The button warps as if seen through moving water while it is hovered (three SVG displacement filters it steps through).
+ * Mid tier: a weaker device gets the label shivering instead (`glassDistort-lite`).
+ */
+export declare function glassDistort(options?: GlassDistortOptions): ButtonEffect;

package/dist/buttons/effects/glass/glassDistort.js

@@ -0,0 +1,49 @@
+import { at, bodyOf, defineButton, labelOf, layerOf, varName, whenOn } from "../kit.js";
+const ID = "glassDistort";
+const WARPS = ["w1", "w2", "w3"];
+/** One warp: smooth noise that pushes the button's pixels sideways more than up and down, like moving water. */
+const warp = (n, strength) => ({
+    tag: "filter",
+    attrs: { id: `{uid}-d${n}`, x: "-10%", y: "-30%", width: "120%", height: "160%" },
+    children: [
+        { tag: "feTurbulence", attrs: { type: "fractalNoise", "base-frequency": `${0.012 + n * 0.004} 0.09`, "num-octaves": 2, seed: n * 5, result: "noise" } },
+        {
+            tag: "feDisplacementMap",
+            attrs: { in: "SourceGraphic", in2: "noise", scale: strength, "x-channel-selector": "R", "y-channel-selector": "G" },
+        },
+    ],
+});
+const defs = (strength) => ({ slot: "body", part: "defs", svg: { children: WARPS.map((_, i) => warp(i + 1, strength)) } });
+// The filters never change; while hovered the body steps through the three, so it costs nothing at rest. The body
+// can carry a filter (it is a stacking context already); the face can't.
+const BODY = bodyOf(ID);
+const CSS = `  ${at(layerOf(ID, "defs"))} { inset: auto; inline-size: 0; block-size: 0; overflow: hidden; }
+${whenOn(ID, BODY, `animation: sx-btn-glassDistort var(${varName(ID, "time")}) steps(1) infinite;`)}
+  @keyframes sx-btn-glassDistort {
+${WARPS.map((w, i) => `    ${Math.round((i * 100) / 3)}% { filter: var(${varName(ID, w)}); }`).join("\n")}
+  }`;
+// Without filters (`-lite`): the label shivers sideways for the same time.
+const LITE = "glassDistort-lite";
+const LITE_CSS = `${whenOn(LITE, labelOf(LITE), `animation: sx-btn-glassDistort-lite var(${varName(LITE, "time")}) steps(1) infinite;`)}
+  @keyframes sx-btn-glassDistort-lite {
+    0% { translate: calc(var(--sx-btn-dir) * 1px) 0; }
+    33% { translate: calc(var(--sx-btn-dir) * -2px) 0; }
+    67% { translate: 0 1px; }
+  }`;
+/**
+ * The button warps as if seen through moving water while it is hovered (three SVG displacement filters it steps through).
+ * Mid tier: a weaker device gets the label shivering instead (`glassDistort-lite`).
+ */
+export function glassDistort(options = {}) {
+    const time = `${options.duration ?? 0.4}s`;
+    const lite = defineButton(LITE, LITE_CSS, { vars: { [varName(LITE, "time")]: time }, claims: ["label"] });
+    return defineButton(ID, CSS, {
+        vars: {
+            [varName(ID, "time")]: time,
+            ...Object.fromEntries(WARPS.map((w, i) => [varName(ID, w), `url(#{uid}-d${i + 1})`])),
+        },
+        layers: [defs(options.strength ?? 8)],
+        tier: "mid",
+        fallback: lite,
+    });
+}

package/dist/buttons/effects/glass/glassDistort.schema.d.ts

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

package/dist/buttons/effects/glass/glassDistort.schema.js

@@ -0,0 +1,10 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLASS_DISTORT_SCHEMA = defineSchema()({
+    id: "glassDistort",
+    family: "button",
+    factory: "glassDistort",
+    fields: {
+        strength: { kind: "number", label: "Strength", min: 1, max: 24, step: 1, unit: "px", default: 8 },
+        duration: { kind: "number", label: "Speed", min: 0.15, max: 2, step: 0.05, unit: "s", help: "Seconds the three warps take while hovered.", default: 0.4 },
+    },
+});

package/dist/buttons/effects/glass/glassLiquid.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonEffect } from "../../types.js";
+import { type GlassOptions } from "./kit.js";
+export interface GlassLiquidOptions extends GlassOptions {
+    /** How far the glass bends what lies behind it, px. Default `24`. */
+    readonly bend?: number;
+}
+/**
+ * Liquid glass: it blurs what lies behind the button and bends it, as poured glass does (an SVG displacement filter in
+ * `backdrop-filter`, which only Chromium draws; elsewhere it is frosted glass). Wear it on a see-through face
+ * (`variant="ghost"`). Mid tier: a weaker device gets the frosted glass alone (`glassLiquid-lite`).
+ */
+export declare function glassLiquid(options?: GlassLiquidOptions): ButtonEffect;

package/dist/buttons/effects/glass/glassLiquid.js

@@ -0,0 +1,53 @@
+import { at, defineButton, layerOf, v, varName } from "../kit.js";
+import { GLASS_LAYERS, frost, glassCss, glassVars } from "./kit.js";
+const ID = "glassLiquid";
+/** Slow, smooth noise that pushes the backdrop about: what lies behind looks seen through poured glass. */
+const lens = (bend) => ({
+    slot: "under",
+    part: "defs",
+    svg: {
+        children: [
+            {
+                tag: "filter",
+                attrs: { id: "{uid}-liquid", x: "0", y: "0", width: "100%", height: "100%", "color-interpolation-filters": "sRGB" },
+                children: [
+                    { tag: "feTurbulence", attrs: { type: "fractalNoise", "base-frequency": "0.008 0.014", "num-octaves": 2, seed: 4, result: "noise" } },
+                    { tag: "feGaussianBlur", attrs: { in: "noise", "std-deviation": 2, result: "soft" } },
+                    {
+                        tag: "feDisplacementMap",
+                        attrs: { in: "SourceGraphic", in2: "soft", scale: bend, "x-channel-selector": "R", "y-channel-selector": "G" },
+                    },
+                ],
+            },
+        ],
+    },
+});
+// Only Chromium draws an SVG filter in backdrop-filter. The plain blur comes first, and the bend replaces it where the
+// browser says it can draw one. Whether Safari and Firefox answer that truthfully is not checked yet (see ../../CLAUDE.md).
+const CSS = `${glassCss(ID, frost(ID, 1.5))}
+  ${at(layerOf(ID, "defs"))} { inset: auto; inline-size: 0; block-size: 0; overflow: hidden; }
+  @supports (backdrop-filter: url(#a)) {
+    ${at(layerOf(ID, "pane"))} {
+      backdrop-filter: ${v(ID, "lens")} ${frost(ID, 1.5)};
+    }
+  }`;
+const LITE = `${ID}-lite`;
+const LITE_CSS = glassCss(LITE, frost(LITE, 1.5));
+/**
+ * Liquid glass: it blurs what lies behind the button and bends it, as poured glass does (an SVG displacement filter in
+ * `backdrop-filter`, which only Chromium draws; elsewhere it is frosted glass). Wear it on a see-through face
+ * (`variant="ghost"`). Mid tier: a weaker device gets the frosted glass alone (`glassLiquid-lite`).
+ */
+export function glassLiquid(options = {}) {
+    const defaults = { strength: 0.15, blur: 3 };
+    return defineButton(ID, CSS, {
+        vars: { ...glassVars(ID, options, defaults), [varName(ID, "lens")]: "url(#{uid}-liquid)" },
+        layers: [lens(options.bend ?? 24), ...GLASS_LAYERS],
+        tier: "mid",
+        // without the bend, a light blur reads as a smudge: the frosted version blurs at least 10 px
+        fallback: defineButton(LITE, LITE_CSS, {
+            vars: glassVars(LITE, { ...options, blur: Math.max(options.blur ?? defaults.blur, 10) }, defaults),
+            layers: GLASS_LAYERS,
+        }),
+    });
+}

package/dist/buttons/effects/glass/glassLiquid.schema.d.ts

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

package/dist/buttons/effects/glass/glassLiquid.schema.js

@@ -0,0 +1,13 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLASS_LIQUID_SCHEMA = defineSchema()({
+    id: "glassLiquid",
+    family: "button",
+    factory: "glassLiquid",
+    fields: {
+        tint: { kind: "color", label: "Tint", default: "var(--color-sx-secondary)" },
+        strength: { kind: "number", label: "Milkiness", min: 0, max: 1, step: 0.05, default: 0.15 },
+        blur: { kind: "number", label: "Blur", min: 0, max: 40, step: 1, unit: "px", help: "How much it blurs what lies behind.", default: 3 },
+        highlight: { kind: "color", label: "Edge light", default: "white" },
+        bend: { kind: "number", label: "Bend", min: 0, max: 60, step: 1, unit: "px", help: "How far it bends what lies behind (Chromium only).", default: 24 },
+    },
+});

package/dist/buttons/effects/glass/glassNative.d.ts

@@ -0,0 +1,8 @@
+import type { ButtonEffect } from "../../types.js";
+import { type GlassOptions } from "./kit.js";
+export type GlassNativeOptions = GlassOptions;
+/**
+ * Apple's glass material: the system's own where WebKit offers it, a close copy elsewhere. Wear it on a see-through
+ * face (`variant="ghost"`) over something colourful.
+ */
+export declare function glassNative(options?: GlassNativeOptions): ButtonEffect;

package/dist/buttons/effects/glass/glassNative.js

@@ -0,0 +1,22 @@
+import { at, defineButton, layerOf } from "../kit.js";
+import { GLASS_LAYERS, frost, glassCss, glassVars } from "./kit.js";
+const ID = "glassNative";
+// WebKit's `-apple-visual-effect` draws the system's own glass, but it is private: off in Safari, and in a WKWebView
+// only behind a private setting. Where it is on, it replaces the pane's paint (it doesn't combine with backdrop-filter).
+// Everywhere else the pane copies the system's thin material: a heavy blur, strong saturation, a hairline edge.
+const CSS = `${glassCss(ID, frost(ID, 1.8))}
+  @supports (-apple-visual-effect: -apple-system-glass-material) {
+    ${at(layerOf(ID, "pane"))} {
+      -apple-visual-effect: -apple-system-glass-material;
+      background: none;
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }`;
+/**
+ * Apple's glass material: the system's own where WebKit offers it, a close copy elsewhere. Wear it on a see-through
+ * face (`variant="ghost"`) over something colourful.
+ */
+export function glassNative(options = {}) {
+    return defineButton(ID, CSS, { vars: glassVars(ID, options, { strength: 0.18, blur: 24 }), layers: GLASS_LAYERS });
+}

package/dist/buttons/effects/glass/glassNative.schema.d.ts

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

package/dist/buttons/effects/glass/glassNative.schema.js

@@ -0,0 +1,12 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLASS_NATIVE_SCHEMA = defineSchema()({
+    id: "glassNative",
+    family: "button",
+    factory: "glassNative",
+    fields: {
+        tint: { kind: "color", label: "Tint", default: "var(--color-sx-secondary)" },
+        strength: { kind: "number", label: "Milkiness", min: 0, max: 1, step: 0.05, default: 0.18 },
+        blur: { kind: "number", label: "Blur", min: 0, max: 40, step: 1, unit: "px", help: "How much it blurs what lies behind.", default: 24 },
+        highlight: { kind: "color", label: "Edge light", default: "white" },
+    },
+});

package/dist/buttons/effects/glass/glassRefract.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonEffect } from "../../types.js";
+export interface GlassRefractOptions {
+    /** A picture to see through the glass (a URL; another origin must send CORS headers). Default: the theme's colours. */
+    readonly image?: string;
+    /** How strongly the edge bends the picture, 0-1. Default `0.6`. */
+    readonly bend?: number;
+    /** The label's colour over the glass. Default `var(--color-sx-on-primary)`: the glass leans to the primary colour. */
+    readonly textColor?: string;
+}
+/**
+ * A picture, or the theme's colours, bent through a glass lens the size of the button (WebGL): the edge pulls it in and
+ * splits it a little into colours, and the light on the rim follows the pointer. WebGL can't see the page behind, so it
+ * bends what you give it. One GPU context per button, so use it once on a page; it needs a client page. High tier:
+ * other devices get the picture with a light edge (`glassRefract-lite`).
+ */
+export declare function glassRefract(options?: GlassRefractOptions): ButtonEffect;

package/dist/buttons/effects/glass/glassRefract.js

@@ -0,0 +1,55 @@
+import { attachRefract } from "../../runtime/refract.js";
+import { at, defineButton, labelOf, layerOf, v, varName } from "../kit.js";
+const ID = "glassRefract";
+const LITE = `${ID}-lite`;
+/**
+ * What both show before and without WebGL: the picture, or the theme's colours, with a light edge and a veil of the
+ * primary colour, so the label (on-primary) reads. The full effect draws its canvas over it; if WebGL fails, the
+ * canvas goes and this stays.
+ */
+function css(id) {
+    const lens = layerOf(id);
+    return `  ${at(lens)} {
+    background:
+      linear-gradient(to bottom, color-mix(in oklab, white 22%, transparent), transparent 55%),
+      linear-gradient(color-mix(in oklab, var(--color-sx-primary) 40%, transparent), color-mix(in oklab, var(--color-sx-primary) 40%, transparent)),
+      ${v(id, "image")},
+      radial-gradient(circle at 78% 25%, var(--color-sx-secondary), transparent 45%),
+      linear-gradient(90deg, var(--color-sx-primary), var(--color-sx-accent));
+    background-size: cover;
+    box-shadow: inset 0 1px 0 color-mix(in oklab, white 45%, transparent), inset 0 0 0 1px color-mix(in oklab, white 18%, transparent);
+  }
+  ${at(labelOf(id))} { color: ${v(id, "text")}; }
+  ${at(`${lens} > canvas`)} {
+    position: absolute;
+    inset: 0;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }`;
+}
+const vars = (id, options) => ({
+    [varName(id, "image")]: options.image ? `url(${JSON.stringify(options.image)})` : "none",
+    [varName(id, "text")]: options.textColor ?? "var(--color-sx-on-primary)",
+});
+/**
+ * A picture, or the theme's colours, bent through a glass lens the size of the button (WebGL): the edge pulls it in and
+ * splits it a little into colours, and the light on the rim follows the pointer. WebGL can't see the page behind, so it
+ * bends what you give it. One GPU context per button, so use it once on a page; it needs a client page. High tier:
+ * other devices get the picture with a light edge (`glassRefract-lite`).
+ */
+export function glassRefract(options = {}) {
+    const { image } = options;
+    const bend = Math.min(1, Math.max(0, options.bend ?? 0.6));
+    const program = {
+        attach: (el) => attachRefract(el, { image, bend }),
+        signature: JSON.stringify({ image, bend }),
+    };
+    return defineButton(ID, css(ID), {
+        vars: vars(ID, options),
+        layers: [{ slot: "fill" }],
+        program,
+        tier: "high",
+        fallback: defineButton(LITE, css(LITE), { vars: vars(LITE, options), layers: [{ slot: "fill" }] }),
+    });
+}

package/dist/buttons/effects/glass/glassRefract.schema.d.ts

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

package/dist/buttons/effects/glass/glassRefract.schema.js

@@ -0,0 +1,11 @@
+import { defineSchema } from "../../../schema/define.js";
+export const GLASS_REFRACT_SCHEMA = defineSchema()({
+    id: "glassRefract",
+    family: "button",
+    factory: "glassRefract",
+    fields: {
+        image: { kind: "text", label: "Picture", url: true, placeholder: "/images/glass.jpg", help: "Seen through the glass. Another site must allow CORS.", autoNote: "the theme's colours" },
+        bend: { kind: "number", label: "Bend", min: 0, max: 1, step: 0.05, default: 0.6 },
+        textColor: { kind: "color", label: "Label colour", help: "The glass leans to the primary colour, so its text colour reads by default.", default: "var(--color-sx-on-primary)" },
+    },
+});

package/dist/buttons/effects/glass/kit.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonLayer, ButtonVars } from "../../types.js";
+export interface GlassOptions {
+    /** The glass's tint. Default `var(--color-sx-secondary)`, the surface colour. */
+    readonly tint?: string;
+    /** How milky the glass is, 0-1. Default `0.25`. */
+    readonly strength?: number;
+    /** How much it blurs what lies behind, px. Default `12`. */
+    readonly blur?: number;
+    /** The light on its edge and in its sheen. Default `white`. */
+    readonly highlight?: string;
+}
+export declare function glassVars(id: string, options: GlassOptions, defaults: {
+    readonly strength: number;
+    readonly blur: number;
+}): ButtonVars;
+export declare const GLASS_LAYERS: readonly ButtonLayer[];
+/** `blur(…) saturate(…)` from an effect's vars. */
+export declare const frost: (id: string, saturate: number) => string;
+/** The pane and its sheen. `backdrop` is the pane's backdrop-filter. */
+export declare function glassCss(id: string, backdrop: string): string;