cssints 0.6.0 → 0.7.0

package/dist/{author-types-C1AhsnrT.d.mts → author-types-D9IjEXwn.d.mts}

@@ -1,4 +1,3 @@
-//#region src/author-types.d.ts
 /** A declaration a member emits: property and value (a custom property, `--_r`, is allowed). */
 type Decl = readonly [prop: string, value: string];
 /** A feature of `@mdn/browser-compat-data`: `css.at-rules.container.style_queries_for_custom_properties`. */
@@ -76,5 +75,4 @@ interface Conflict {
   props: (string | RegExp)[];
   message: string;
 }
-//#endregion
 export { Kernel as a, GlobalRule as i, Conflict as n, Runtime as o, Decl as r, ThemeRule as s, BcdKey as t };

package/dist/check.d.mts

@@ -1,7 +1,6 @@
-import { t as ContrastError } from "./errors-D4ZbcwRo.mjs";
+import { t as ContrastError } from "./errors-jNEiB3ye.mjs";
 import { Warning } from "@cssints/css-grammar/support";
 import { Effect } from "effect";
-//#region src/check.d.ts
 /**
  * The WCAG 2.x contrast ratio of two CSS colours, as `css.check.contrast` computes it: culori reads the colour, one
  * outside sRGB is clipped to it, a translucent one has no contrast. `text` is the ratio cut (not rounded) at two places,
@@ -18,5 +17,4 @@ export declare const contrast: (foreground: string, background: string) => Effec
  * never goes through it and keeps the warning. A custom property is `--name`.
  */
 export declare const loweredOf: (property: string, value: string, warning: Warning) => Effect.Effect<string | undefined, never, never>;
-//#endregion
 export { ContrastError };

package/dist/check.mjs

@@ -1,8 +1,8 @@
-import { s as ContrastError } from "./registry-ByrYF2v5.mjs";
-import { t as fallbackOf } from "./lowered-CKSYUc0i.mjs";
-import { i as shown, r as ratio, t as luminance } from "./color-BYIxVLlS.mjs";
+import { s as ContrastError } from "./registry-8sYvlzyn.mjs";
+import { t as fallbackOf } from "./lowered-DOJEDRFM.mjs";
+import { i as shown, r as ratio, t as luminance } from "./color-BB8ipynT.mjs";
 import { Effect } from "effect";
-//#region src/check.ts
+// src/check.ts
 /**
 * The WCAG 2.x contrast ratio of two CSS colours, as `css.check.contrast` computes it: culori reads the colour, one
 * outside sRGB is clipped to it, a translucent one has no contrast. `text` is the ratio cut (not rounded) at two places,
@@ -33,5 +33,4 @@ const contrast = Effect.fn("cssints.contrast")(function* (foreground, background
 const loweredOf = Effect.fn("cssints.loweredOf")(function* (property, value, warning) {
 	return yield* Effect.sync(() => fallbackOf(property, value, warning));
 });
-//#endregion
 export { ContrastError, contrast, loweredOf };

package/dist/clay-types.d.mts

@@ -1,5 +1,4 @@
-import { d as createTokens, om as Part, rm as Check, s as Overrides, t as CheckOverrides } from "./theme-types-BY0mRf3K.mjs";
-//#region src/clay-types.d.ts
+import { am as Check, cm as Part, d as createTokens, s as Overrides, t as CheckOverrides } from "./theme-types-CplLnGgG.mjs";
 /** A number of pixels, or `"Npx"`. */
 export type Px = number | `${number}px`;
 /** Pixels, `N%` of the parent, `auto` (Clay's FIT) or `stretch` (Clay's GROW). */
@@ -40,6 +39,28 @@ export type FloatOptions = {
   root?: boolean;
   parent?: never;
 });
+/**
+ * The options of `shadow()`: one object, all optional, lengths in pixels. No options at all is the default shadow
+ * (`{ x: 0, y: 2, blur: 12, color: "rgb(0 0 0 / 0.4)" }`); the fields a state names are the ones it changes.
+ */
+export type ShadowOptions = {
+  /** Moves the shadow from the element's box, in pixels (a negative one goes left or up). Default: 0. */
+  x?: Px;
+  /** Moves the shadow down (or up, negative). Default: 2. */
+  y?: Px;
+  /** The blur radius in pixels: the width of the soft edge, not negative. Default: 12. */
+  blur?: Px;
+  /** The colour of the shadow, as any colour a Clay page can draw. Default: `rgb(0 0 0 / 0.4)`. */
+  color?: string;
+};
+/** The options of `backdrop()`: the element is glass over the content behind it. */
+export type BackdropOptions = {
+  /**
+   * The blur radius in pixels, as CSS's `backdrop-filter` reads one: about twice the gaussian's standard deviation.
+   * Not negative. Default: 12.
+   */
+  blur?: Px;
+};
 /** The options of `image()`: the image's size in pixels, and how it fills its box. */
 export type ImageOptions = {
   /** The image's width in whole pixels: the element's box starts at the image's own size. */
@@ -58,6 +79,33 @@ interface Rgba {
   b: number;
   a: number;
 }
+/** A shadow the renderer draws: the element's box, offset and blurred, in that colour. */
+export interface Shadow {
+  x: number;
+  y: number;
+  blur: number;
+  color: Rgba;
+}
+/** A backdrop the renderer blurs: the content under the element's box, before the element's own commands. */
+export interface Backdrop {
+  blur: number;
+}
+/** A gradient stop: where it sits up the gradient line (0..1) and its colour. */
+export interface GradientStop {
+  offset: number;
+  color: Rgba;
+}
+/**
+ * A linear gradient the renderer draws instead of the solid fill (`css.backgroundImage`): CSS's gradient line of `angle`
+ * across the element's box, `stops` from its start to its end.
+ */
+export interface BackgroundImage {
+  kind: "linear";
+  /** CSS's angle in degrees: 0 up, 90 right, 180 down (the default), 270 left. */
+  angle: number;
+  /** Two or more, in order (a later one is at or past an earlier one). */
+  stops: GradientStop[];
+}
 interface Axis {
   type: "FIT" | "GROW" | "PERCENT" | "FIXED";
   min?: number;
@@ -104,6 +152,21 @@ export interface ClayFields {
   image?: {
     imageData: string;
   };
+  /**
+   * A shadow (`css.shadow`): not a field of `Clay_ElementDeclaration` (Clay 1.0 has none) — the declaration keeps its
+   * layout and the renderer draws the shadow before the element's own command, keyed by its id.
+   */
+  shadow?: Shadow;
+  /**
+   * A backdrop (`css.backdrop`): not a field of `Clay_ElementDeclaration` either — the renderer blurs the pixels under
+   * the element's box before the element's own command, keyed by its id.
+   */
+  backdrop?: Backdrop;
+  /**
+   * A gradient (`css.backgroundImage`): not a field of `Clay_ElementDeclaration` either — the renderer fills the element's
+   * box with it instead of `backgroundColor`, keyed by its id.
+   */
+  backgroundImage?: BackgroundImage;
   aspectRatio?: {
     aspectRatio: number;
   };
@@ -206,6 +269,28 @@ export declare const float: (options?: FloatOptions) => ClayStyle;
  * renderer as `imageData`.
  */
 export declare const image: (src: string, options: ImageOptions) => ClayStyle;
+/**
+ * A shadow of the element: a renderer effect, not a Clay field (Clay 1.0 has none), so `header()` prints nothing for it
+ * and the C targets ignore it until a page draws it themselves. The declaration keeps the layout; the renderer draws the
+ * element's own box, offset by `x`/`y` and blurred by `blur`, in `color`, before the element's command. The element needs
+ * an `id`: the renderer keys the shadow by Clay's element id.
+ */
+export declare const shadow: (options?: ShadowOptions) => ClayStyle;
+/**
+ * A backdrop of the element: the content under it is blurred, then the element is drawn over it, so a translucent fill
+ * is glass over our own page (the desktop behind the window is out of reach). A renderer effect, not a Clay field, as
+ * `shadow` is: `header()` prints nothing for it and only a renderer that reads it draws one. The element needs an `id`.
+ * Today `native/solid`'s ThorVG renderer is the one that blurs.
+ */
+export declare const backdrop: (options?: BackdropOptions) => ClayStyle;
+/**
+ * A background image of the element, as CSS's `linear-gradient()` in one string: an optional direction (`<number>deg`, or
+ * `to top | to bottom | to left | to right`) and two or more colour stops with an optional `<number>%` each. Only a linear
+ * gradient is drawn. It is a renderer effect, not a Clay field, as `shadow` is: `header()` prints nothing for it and only
+ * a renderer that reads it draws one; the C targets keep their solid fill. `header()` and the C pages ignore it, the
+ * desktop renderer fills the element's box instead of `backgroundColor`, and the element needs an `id`.
+ */
+export declare const backgroundImage: (gradient: string) => ClayStyle;
 /** Merges styles in argument order: a later prop wins. */
 export declare const cn: (...styles: ClayStyle[]) => ClayStyle;
 /** Under the pointer: header() prints the style with it as `<name>_hover`. States do not nest. */
@@ -228,5 +313,4 @@ export declare const fonts: <const N extends readonly [string, ...string[]]>(...
 export declare const createGlobalTheme: <const X extends object, const O extends Overrides<X>>(tokens: X, name: string, overrides: O & CheckOverrides<X, O>) => void;
 /** The styles of a built module as a C header: `CLAY(id, name)` and `CLAY_TEXT(s, name_text)`. */
 export declare const header: (styles: Record<string, unknown>) => string;
-//#endregion
 export { createTokens };

package/dist/clay.d.mts

@@ -1,4 +1,3 @@
-//#region src/clay.d.ts
 export declare const createTokens: (...args: unknown[]) => unknown;
 export declare const createGlobalTheme: (...args: unknown[]) => Readonly<{
   __done: true;
@@ -25,7 +24,7 @@ export declare const active: (...styles: unknown[]) => ClayNode;
  * @returns {Record<string, unknown>} a style per font, by name, and the list
  */
 export declare const fonts: (...names: unknown[]) => Record<string, unknown>;
-export declare const backgroundColor: ((...parts: unknown[]) => ClayNode) | undefined, bg: ((...parts: unknown[]) => ClayNode) | undefined, color: ((...parts: unknown[]) => ClayNode) | undefined, borderColor: ((...parts: unknown[]) => ClayNode) | undefined, width: ((...parts: unknown[]) => ClayNode) | undefined, height: ((...parts: unknown[]) => ClayNode) | undefined, padding: ((...parts: unknown[]) => ClayNode) | undefined, p: ((...parts: unknown[]) => ClayNode) | undefined, paddingInline: ((...parts: unknown[]) => ClayNode) | undefined, paddingBlock: ((...parts: unknown[]) => ClayNode) | undefined, paddingTop: ((...parts: unknown[]) => ClayNode) | undefined, paddingRight: ((...parts: unknown[]) => ClayNode) | undefined, paddingBottom: ((...parts: unknown[]) => ClayNode) | undefined, paddingLeft: ((...parts: unknown[]) => ClayNode) | undefined, pt: ((...parts: unknown[]) => ClayNode) | undefined, pr: ((...parts: unknown[]) => ClayNode) | undefined, pb: ((...parts: unknown[]) => ClayNode) | undefined, pl: ((...parts: unknown[]) => ClayNode) | undefined, gap: ((...parts: unknown[]) => ClayNode) | undefined, flexDirection: ((...parts: unknown[]) => ClayNode) | undefined, justifyContent: ((...parts: unknown[]) => ClayNode) | undefined, alignItems: ((...parts: unknown[]) => ClayNode) | undefined, borderRadius: ((...parts: unknown[]) => ClayNode) | undefined, borderWidth: ((...parts: unknown[]) => ClayNode) | undefined, border: ((...parts: unknown[]) => ClayNode) | undefined, overflow: ((...parts: unknown[]) => ClayNode) | undefined, fontSize: ((...parts: unknown[]) => ClayNode) | undefined, letterSpacing: ((...parts: unknown[]) => ClayNode) | undefined, lineHeight: ((...parts: unknown[]) => ClayNode) | undefined, textAlign: ((...parts: unknown[]) => ClayNode) | undefined, whiteSpace: ((...parts: unknown[]) => ClayNode) | undefined, float: ((...parts: unknown[]) => ClayNode) | undefined, image: ((...parts: unknown[]) => ClayNode) | undefined;
+export declare const backgroundColor: ((...parts: unknown[]) => ClayNode) | undefined, bg: ((...parts: unknown[]) => ClayNode) | undefined, color: ((...parts: unknown[]) => ClayNode) | undefined, borderColor: ((...parts: unknown[]) => ClayNode) | undefined, width: ((...parts: unknown[]) => ClayNode) | undefined, height: ((...parts: unknown[]) => ClayNode) | undefined, padding: ((...parts: unknown[]) => ClayNode) | undefined, p: ((...parts: unknown[]) => ClayNode) | undefined, paddingInline: ((...parts: unknown[]) => ClayNode) | undefined, paddingBlock: ((...parts: unknown[]) => ClayNode) | undefined, paddingTop: ((...parts: unknown[]) => ClayNode) | undefined, paddingRight: ((...parts: unknown[]) => ClayNode) | undefined, paddingBottom: ((...parts: unknown[]) => ClayNode) | undefined, paddingLeft: ((...parts: unknown[]) => ClayNode) | undefined, pt: ((...parts: unknown[]) => ClayNode) | undefined, pr: ((...parts: unknown[]) => ClayNode) | undefined, pb: ((...parts: unknown[]) => ClayNode) | undefined, pl: ((...parts: unknown[]) => ClayNode) | undefined, gap: ((...parts: unknown[]) => ClayNode) | undefined, flexDirection: ((...parts: unknown[]) => ClayNode) | undefined, justifyContent: ((...parts: unknown[]) => ClayNode) | undefined, alignItems: ((...parts: unknown[]) => ClayNode) | undefined, borderRadius: ((...parts: unknown[]) => ClayNode) | undefined, borderWidth: ((...parts: unknown[]) => ClayNode) | undefined, border: ((...parts: unknown[]) => ClayNode) | undefined, overflow: ((...parts: unknown[]) => ClayNode) | undefined, fontSize: ((...parts: unknown[]) => ClayNode) | undefined, letterSpacing: ((...parts: unknown[]) => ClayNode) | undefined, lineHeight: ((...parts: unknown[]) => ClayNode) | undefined, textAlign: ((...parts: unknown[]) => ClayNode) | undefined, whiteSpace: ((...parts: unknown[]) => ClayNode) | undefined, float: ((...parts: unknown[]) => ClayNode) | undefined, image: ((...parts: unknown[]) => ClayNode) | undefined, backgroundImage: ((...parts: unknown[]) => ClayNode) | undefined, shadow: ((...parts: unknown[]) => ClayNode) | undefined, backdrop: ((...parts: unknown[]) => ClayNode) | undefined;
 /**
  * The styles of a module as C: a `Clay_ElementDeclaration` per export, and a `Clay_TextElementConfig` named
  * `<name>_text` for one that sets text props, for `CLAY(id, name)` and `CLAY_TEXT(s, name_text)`. A state is a whole
@@ -37,4 +36,4 @@ export declare const backgroundColor: ((...parts: unknown[]) => ClayNode) | unde
  * @returns {string} a C header that includes clay.h
  */
 export declare const header: (styles: Record<string, unknown>) => string;
-//#endregion
+export {};

package/dist/clay.mjs

@@ -1,10 +1,10 @@
-import { a as registry } from "./registry-ByrYF2v5.mjs";
-import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-WGcgMD4V.mjs";
-import { n as valueOf, t as together } from "./contrast-DLi4pp25.mjs";
-import { n as parseColor } from "./color-BYIxVLlS.mjs";
+import { a as registry } from "./registry-8sYvlzyn.mjs";
+import { a as createTokens$1, i as createGlobalTheme$1, j as fail, s as sets } from "./theme-DBCyDih4.mjs";
+import { n as valueOf, t as together } from "./contrast-Dw6gXoO3.mjs";
+import { n as parseColor } from "./color-BB8ipynT.mjs";
 import { Formatter, Predicate } from "effect";
 import { clampRgb, formatHex } from "culori/fn";
-//#region src/clay.ts
+// src/clay.ts
 const tables = registry.clayTokens ??= {
 	properties: /* @__PURE__ */ new Map(),
 	defs: /* @__PURE__ */ new Map(),
@@ -82,7 +82,8 @@ const one = (key, read) => (prop, parts) => {
 const COLOURS = /* @__PURE__ */ new Set([
 	"backgroundColor",
 	"color",
-	"borderColor"
+	"borderColor",
+	"shadowColor"
 ]);
 const sides = (keys, read) => (prop, parts) => {
 	if (parts.length < 1 || parts.length > 4) throw fail(`cssints: ${prop} takes 1 to 4 values, got ${parts.length}`);
@@ -197,6 +198,119 @@ const imageOf = (prop, parts) => {
 		["aspectRatio", keyword("fill", "contain")(`${prop}.fit`, o.fit ?? "fill") === "contain" ? w / h : 0]
 	];
 };
+const SHADOW_OPTIONS = [
+	"x",
+	"y",
+	"blur",
+	"color"
+];
+const SHADOW_FIELDS = [
+	"shadowX",
+	"shadowY",
+	"shadowBlur",
+	"shadowColor"
+];
+const SHADOW_COLOUR = "rgb(0 0 0 / 0.4)";
+const SHADOW_DEFAULT = {
+	x: 0,
+	y: 2,
+	blur: 12,
+	color: SHADOW_COLOUR
+};
+const shadowOf = (prop, parts) => {
+	if (parts.length > 1) throw fail(`cssints: ${prop} takes one object of options, got ${parts.length} values`);
+	const o = options(prop, parts[0] ?? {}, SHADOW_OPTIONS);
+	const given = Object.keys(o).length ? o : SHADOW_DEFAULT;
+	const out = [];
+	if (given.x !== void 0) out.push(["shadowX", offset(`${prop}.x`, given.x)]);
+	if (given.y !== void 0) out.push(["shadowY", offset(`${prop}.y`, given.y)]);
+	if (given.blur !== void 0) out.push(["shadowBlur", px(`${prop}.blur`, given.blur)]);
+	if (given.color !== void 0) out.push(["shadowColor", colour(`${prop}.color`, given.color)]);
+	return out;
+};
+const GRADIENT = "a linear-gradient() as one string: an optional direction (<number>deg, or to top | to bottom | to left | to right; 180deg by default) and two or more colour stops with an optional <number>% each";
+const DEGREES = /^(-?(?:\d+\.?\d*|\.\d+))deg$/;
+const PLAIN_NUMBER = /^-?(?:\d+\.?\d*|\.\d+)$/;
+const OTHER_ANGLE = /^-?(?:\d+\.?\d*|\.\d+)(?:turn|rad|grad)$/;
+const PERCENT_ONLY = /^-?(?:\d+\.?\d*|\.\d+)%$/;
+const OFFSET_AT_END = /^(.*\S)\s+(-?(?:\d+\.?\d*|\.\d+)%)$/;
+const LENGTH_AT_END = /^(.*\S)\s+(-?(?:\d+\.?\d*|\.\d+)(?:px|em|rem|vh|vw|pt))$/;
+const TO = {
+	"to top": 0,
+	"to right": 90,
+	"to bottom": 180,
+	"to left": 270
+};
+const splitStops = (text) => text.trim() ? text.split(/,(?![^(]*\))/).map((stop) => stop.trim()) : [];
+const directionOf = (prop, first) => {
+	const deg = DEGREES.exec(first);
+	if (deg) return {
+		angle: Number(deg[1]),
+		skip: true
+	};
+	if (Object.hasOwn(TO, first)) return {
+		angle: TO[first],
+		skip: true
+	};
+	if (OTHER_ANGLE.test(first) || PLAIN_NUMBER.test(first) || first.startsWith("to ")) throw fail(`cssints: ${prop}: unexpected ${say(first)} as a direction, expected <number>deg or ${Object.keys(TO).join(" | ")}`);
+	return {
+		angle: 180,
+		skip: false
+	};
+};
+const gradientOf = (prop, text) => {
+	const m = /^linear-gradient\((.*)\)$/s.exec(text.trim());
+	if (!m) throw fail(`cssints: ${prop}: unexpected ${say(text)}, expected ${GRADIENT}`);
+	const parts = splitStops(m[1]);
+	const { angle, skip } = directionOf(prop, parts[0] ?? "");
+	const stops = parts.slice(skip ? 1 : 0).map((token) => {
+		const end = OFFSET_AT_END.exec(token);
+		const text = end ? end[1] : token;
+		const length = end ? null : LENGTH_AT_END.exec(token);
+		if (length) throw fail(`cssints: ${prop}: unexpected ${say(length[2])} as a stop, expected a percentage ("50%", or no offset)`);
+		if (!end && PERCENT_ONLY.test(token)) throw fail(`cssints: ${prop}: unexpected ${say(token)}, expected a colour (colour hints are not drawn)`);
+		colour(prop, text);
+		return {
+			text,
+			percent: end ? Number.parseFloat(end[2]) : void 0
+		};
+	});
+	if (stops.length < 2) throw fail(`cssints: ${prop}: a gradient needs two or more colour stops, got ${stops.length}`);
+	const numbers = stops.map((s) => s.percent);
+	const edges = numbers.map((p, i) => p !== void 0 ? p : i === 0 ? 0 : i === numbers.length - 1 ? 100 : void 0);
+	const at = edges.map((percent, i) => {
+		if (percent !== void 0) return percent;
+		const before = edges.findLastIndex((p, k) => k < i && p !== void 0);
+		const after = edges.findIndex((p, k) => k > i && p !== void 0);
+		const [from, to] = [edges[before], edges[after]];
+		return from + (to - from) * (i - before) / (after - before);
+	});
+	return {
+		angle,
+		stops: stops.map((s, i) => {
+			const percent = at[i];
+			if (percent < 0 || percent > 100) throw fail(`cssints: ${prop}: unexpected ${say(`${percent}%`)} as an offset, expected 0% to 100%`);
+			if (i && percent < at[i - 1]) throw fail(`cssints: ${prop}: the stops go backwards: ${say(`${at[i - 1]}%`)} then ${say(`${percent}%`)}`);
+			return {
+				text: s.text,
+				offset: percent / 100
+			};
+		})
+	};
+};
+const backgroundImageOf = (prop, parts) => {
+	if (parts.length !== 1) throw fail(`cssints: ${prop} takes one string, got ${parts.length} values`);
+	if (typeof parts[0] !== "string") throw fail(`cssints: ${prop}: unexpected ${say(parts[0])}, expected ${GRADIENT}`);
+	gradientOf(prop, parts[0]);
+	return [["backgroundImage", parts[0]]];
+};
+const BACKDROP_OPTIONS = ["blur"];
+const BACKDROP_DEFAULT = 12;
+const backdropOf = (prop, parts) => {
+	if (parts.length > 1) throw fail(`cssints: ${prop} takes one object of options, got ${parts.length} values`);
+	const o = options(prop, parts[0] ?? {}, BACKDROP_OPTIONS);
+	return [["backdropBlur", px(`${prop}.blur`, o.blur ?? BACKDROP_DEFAULT)]];
+};
 const PADDING = [
 	"paddingTop",
 	"paddingRight",
@@ -257,7 +371,10 @@ const MEMBERS = {
 	textAlign: one("textAlign", keyword("left", "center", "right")),
 	whiteSpace: one("whiteSpace", keyword("normal", "pre-line", "nowrap")),
 	float: floating,
-	image: imageOf
+	image: imageOf,
+	backgroundImage: backgroundImageOf,
+	shadow: shadowOf,
+	backdrop: backdropOf
 };
 const member = (name, build) => (...parts) => {
 	if (parts.some(isClay)) throw fail(`cssints: ${name}: a style is not a value`);
@@ -310,7 +427,7 @@ const fonts = (...names) => {
 		]])]))
 	};
 };
-const { backgroundColor, bg, color, borderColor, width, height, padding, p, paddingInline, paddingBlock, paddingTop, paddingRight, paddingBottom, paddingLeft, pt, pr, pb, pl, gap, flexDirection, justifyContent, alignItems, borderRadius, borderWidth, border, overflow, fontSize, letterSpacing, lineHeight, textAlign, whiteSpace, float, image } = Object.fromEntries(Object.entries(MEMBERS).map(([k, b]) => [k, member(k, b)]));
+const { backgroundColor, bg, color, borderColor, width, height, padding, p, paddingInline, paddingBlock, paddingTop, paddingRight, paddingBottom, paddingLeft, pt, pr, pb, pl, gap, flexDirection, justifyContent, alignItems, borderRadius, borderWidth, border, overflow, fontSize, letterSpacing, lineHeight, textAlign, whiteSpace, float, image, backgroundImage, shadow, backdrop } = Object.fromEntries(Object.entries(MEMBERS).map(([k, b]) => [k, member(k, b)]));
 const rgba = (prop, text, values) => {
 	const flat = text.replace(VAR, (m, n) => valueOf(tables, n, values) ?? m);
 	const c = flat.includes("var(") ? void 0 : parseColor(flat);
@@ -428,6 +545,24 @@ const shapeOf = (entries, values) => {
 	if (FLOATING.some((k) => p.has(k))) out.floating = floatingOf(p);
 	if (p.has("imageSrc")) out.image = { imageData: get("imageSrc") };
 	if (p.get("aspectRatio")) out.aspectRatio = { aspectRatio: get("aspectRatio") };
+	if (p.has("backgroundImage")) {
+		const g = gradientOf("backgroundImage", String(p.get("backgroundImage")));
+		out.backgroundImage = {
+			kind: "linear",
+			angle: g.angle,
+			stops: g.stops.map((s) => ({
+				offset: s.offset,
+				color: rgba("backgroundImage", s.text, values)
+			}))
+		};
+	}
+	if (SHADOW_FIELDS.some((k) => p.has(k))) out.shadow = {
+		x: get("shadowX") ?? SHADOW_DEFAULT.x,
+		y: get("shadowY") ?? SHADOW_DEFAULT.y,
+		blur: get("shadowBlur") ?? SHADOW_DEFAULT.blur,
+		color: rgba("shadow.color", String(get("shadowColor") ?? SHADOW_COLOUR), values)
+	};
+	if (p.has("backdropBlur")) out.backdrop = { blur: get("backdropBlur") };
 	const text = {};
 	if (p.has("color")) text.textColor = colourOf("color");
 	for (const k of [
@@ -450,7 +585,7 @@ const VISIBLE = {
 	horizontal: 0,
 	vertical: 0
 };
-const isLeaf = (v) => typeof v !== "object" || Object.hasOwn(v, "r") || Object.hasOwn(v, "type");
+const isLeaf = (v) => typeof v !== "object" || Array.isArray(v) || Object.hasOwn(v, "r") || Object.hasOwn(v, "type");
 const pick = (full, mask) => Object.fromEntries(Object.keys(mask).map((k) => [k, isLeaf(mask[k]) ? full[k] : pick(full[k], mask[k])]));
 const diff = (a, b) => {
 	const out = {};
@@ -486,7 +621,7 @@ const literalOf = (n, values) => {
 };
 const replacement = (n) => {
 	const out = literalOf(n);
-	if (!n.__clay.some(([k, v]) => COLOURS.has(k) && String(v).includes("var("))) return out;
+	if (!n.__clay.some(([k, v]) => (COLOURS.has(k) || k === "backgroundImage") && String(v).includes("var("))) return out;
 	const themes = {};
 	for (const { label, values } of together({
 		themed: tables.themed,
@@ -530,6 +665,9 @@ const SHAPE = /* @__PURE__ */ new Set([
 	"clip",
 	"floating",
 	"image",
+	"backgroundImage",
+	"shadow",
+	"backdrop",
 	"aspectRatio",
 	"text",
 	"themes",
@@ -559,6 +697,9 @@ const header = (styles) => {
 		const base = Object.fromEntries(Object.entries(v).filter(([k]) => !STATES.includes(k)));
 		for (const [suffix, shape] of [["", base], ...STATES.flatMap((s) => v[s] ? [[`_${s.slice(1)}`, merge(base, v[s])]] : [])]) {
 			const { text, ...decl } = shape;
+			delete decl.shadow;
+			delete decl.backdrop;
+			delete decl.backgroundImage;
 			if (Object.keys(decl).length) lines.push(`static const Clay_ElementDeclaration ${name}${suffix}${theme} = ${c("", decl)};`);
 			if (text) lines.push(`static const Clay_TextElementConfig ${name}${suffix}_text${theme} = ${c("", text)};`);
 		}
@@ -573,5 +714,4 @@ const header = (styles) => {
 	}
 	return `${lines.join("\n")}\n`;
 };
-//#endregion
-export { active, alignItems, backgroundColor, bg, border, borderColor, borderRadius, borderWidth, cn, color, createGlobalTheme, createTokens, flexDirection, float, focus, fontSize, fonts, gap, header, height, hover, image, justifyContent, letterSpacing, lineHeight, overflow, p, padding, paddingBlock, paddingBottom, paddingInline, paddingLeft, paddingRight, paddingTop, pb, pl, pr, pt, textAlign, whiteSpace, width };
+export { active, alignItems, backdrop, backgroundColor, backgroundImage, bg, border, borderColor, borderRadius, borderWidth, cn, color, createGlobalTheme, createTokens, flexDirection, float, focus, fontSize, fonts, gap, header, height, hover, image, justifyContent, letterSpacing, lineHeight, overflow, p, padding, paddingBlock, paddingBottom, paddingInline, paddingLeft, paddingRight, paddingTop, pb, pl, pr, pt, shadow, textAlign, whiteSpace, width };

package/dist/{color-BYIxVLlS.mjs → color-BB8ipynT.mjs}

@@ -1,5 +1,5 @@
 import { clampRgb, modeA98, modeHsl, modeHwb, modeLab, modeLch, modeLrgb, modeOklab, modeOklch, modeP3, modeProphoto, modeRec2020, modeRgb, modeXyz50, modeXyz65, parse, useMode, wcagLuminance } from "culori/fn";
-//#region src/color.ts
+// src/color.ts
 for (const mode of [
 	modeRgb,
 	modeHsl,
@@ -25,5 +25,4 @@ const luminance = (text) => {
 };
 const ratio = (a, b) => (Math.max(a, b) + .05) / (Math.min(a, b) + .05);
 const shown = (r) => (Math.floor(r * 100) / 100).toFixed(2);
-//#endregion
 export { shown as i, parseColor as n, ratio as r, luminance as t };

package/dist/color-DNL0XuEi.mjs

@@ -0,0 +1 @@
+export { t as luminance, n as parseColor, r as ratio, i as shown } from "./color-BB8ipynT.mjs";

package/dist/{contrast-DLi4pp25.mjs → contrast-Dw6gXoO3.mjs}

@@ -1,7 +1,7 @@
-import { a as registry, d as MacroError, o as warn } from "./registry-ByrYF2v5.mjs";
-import { l as layerStatements } from "./sheet-BT2R1wk_.mjs";
+import { a as registry, d as MacroError, o as warn } from "./registry-8sYvlzyn.mjs";
+import { l as layerStatements } from "./sheet-qCuMvyUo.mjs";
 import { Effect } from "effect";
-//#region src/contrast.ts
+// src/contrast.ts
 const VAR = /var\((--[^\s,)]+)\)/g;
 const valueOf = (state, name, values) => {
 	const def = state.defs.get(name);
@@ -70,7 +70,7 @@ const verify = (check, state, { luminance, ratio, shown }) => {
 const verifyChecks = Effect.fnUntraced(function* (select) {
 	const checks = [...registry.checks.values()].filter(select);
 	if (!checks.length) return;
-	const colours = yield* Effect.promise(() => import("./color-C8OzjAeg.mjs"));
+	const colours = yield* Effect.promise(() => import("./color-DNL0XuEi.mjs"));
 	for (const check of checks) {
 		const errors = verify(check, registry, colours);
 		if (errors.length) return yield* new MacroError({
@@ -79,5 +79,4 @@ const verifyChecks = Effect.fnUntraced(function* (select) {
 		});
 	}
 });
-//#endregion
 export { valueOf as n, verifyChecks as r, together as t };

package/dist/derived.d.mts

@@ -1,4 +1,3 @@
-//#region src/derived.d.ts
 type Space = "srgb" | "srgb-linear" | "oklab" | "oklch" | "lab";
 export interface Color {
   s: Space;
@@ -10,5 +9,4 @@ export declare const KEY = "--_derived";
 export declare const evaluate: (text: string, get?: (name: string) => string | Color) => Color;
 export declare const css: (c: Color) => string;
 declare const _default: () => void;
-//#endregion
 export { _default as default };

package/dist/derived.mjs

@@ -1,4 +1,4 @@
-//#region src/derived.ts
+// src/derived.ts
 /** The custom property of :root that carries the data (derived-data.ts writes it). */
 const KEY = "--_derived";
 const mul = (m, v) => [
@@ -387,5 +387,4 @@ var derived_default = () => {
 	};
 	if (!go()) addEventListener("load", go, { once: true });
 };
-//#endregion
 export { KEY, css, derived_default as default, evaluate };

package/dist/{devtools-link-D2YxsJKZ.mjs → devtools-link-DN91p7g5.mjs}

@@ -1,6 +1,6 @@
 import { join, relative, sep } from "node:path";
 import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from "node:fs";
-//#region src/devtools-link.ts
+// src/devtools-link.ts
 /**
 * The repository of an app is the workspace of its sessions: the nearest folder up with a `.git` (a file in a worktree).
 * @param {string} from a folder
@@ -90,5 +90,4 @@ const attach = (git, id, sessionID) => {
 		writeFileSync(file, JSON.stringify({ sessionID }));
 	} else rmSync(file, { force: true });
 };
-//#endregion
 export { servers as a, serverId as i, gitRoot as n, sessionOf as o, register as r, attach as t };

package/dist/devtools-link.d.mts

@@ -1,4 +1,3 @@
-//#region src/devtools-link.d.ts
 /** A running dev server, as it announced itself. */
 export interface DevServer {
   id: string;
@@ -51,5 +50,4 @@ export declare const sessionOf: (git: string, id: string) => string | undefined;
  * @param {string} [sessionID] the session; none detaches
  * @returns {void}
  */
-export declare const attach: (git: string, id: string, sessionID?: string) => void;
-//#endregion
+export declare const attach: (git: string, id: string, sessionID?: string) => void;

package/dist/devtools-link.mjs

@@ -1,2 +1 @@
-import { a as servers, i as serverId, n as gitRoot, o as sessionOf, r as register, t as attach } from "./devtools-link-D2YxsJKZ.mjs";
-export { attach, gitRoot, register, serverId, servers, sessionOf };
+export { t as attach, n as gitRoot, r as register, i as serverId, a as servers, o as sessionOf } from "./devtools-link-DN91p7g5.mjs";

package/dist/{errors-D4ZbcwRo.d.mts → errors-jNEiB3ye.d.mts}

@@ -1,4 +1,3 @@
-//#region src/errors.d.ts
 declare const MacroError_base: new <A extends Record<string, any> = {}>(args: import("effect/Types").VoidIfEmpty<{ readonly [P in keyof A as P extends "_tag" ? never : P]: A[P]; }>) => import("effect/Cause").YieldableError & {
   readonly _tag: "MacroError";
 } & Readonly<A>;
@@ -28,5 +27,4 @@ declare class ContrastError extends ContrastError_base<{
   /** The colour as given. */
   readonly colour: string;
 }> {}
-//#endregion
 export { ImportError as n, MacroError as r, ContrastError as t };

package/dist/{frame-BoBKjgBB.mjs → frame-DqwCA4OH.mjs}

@@ -1,5 +1,5 @@
 import { scope } from "cssints/plugin";
-//#region src/frame.ts
+// src/frame.ts
 const registered = (names) => names.map((n) => `@property --_${n} { syntax: "<length>"; inherits: false; initial-value: 0px; }`).join("\n");
 const inner = "max(var(--_x) - var(--_p) - var(--_b), 0px)";
 const outer = (parent) => `max(var(${parent}, calc(var(--_r) + var(--_m))) - var(--_m), 0px)`;
@@ -88,5 +88,4 @@ const frameScope = scope("frame", {
 	}
 });
 const { frame } = frameScope.export();
-//#endregion
 export { frameScope as n, frame as t };

package/dist/frame.d.mts

@@ -1,4 +1,3 @@
-//#region src/frame.d.ts
 /**
  * `frame().radius(t.radius.lg).padding(4).border("1px").margin(2)`: a box whose radius follows from the frames around it
  * (`radius` is the radius of the outermost frame; inside, it is the parent's inner radius less the margin). `padding` and
@@ -68,5 +67,4 @@ export declare const frame: () => import("cssints/plugin").Chain<"frame", {
     readonly spacing: true;
     readonly emit: (v: string) => [string, string][];
   };
-}, {}>;
-//#endregion
+}, {}>;

package/dist/frame.mjs

@@ -1,2 +1 @@
-import { n as frameScope, t as frame } from "./frame-BoBKjgBB.mjs";
-export { frame, frameScope };
+export { t as frame, n as frameScope } from "./frame-DqwCA4OH.mjs";

package/dist/group-common-CTUs5yym.d.mts

@@ -0,0 +1 @@
+import "./theme-types-CplLnGgG.mjs";

package/dist/{group-types-Dn9CIR8J.d.mts → group-types-BBaZ8dwy.d.mts}

@@ -1,8 +1,7 @@
-import { $p as Fn, Qp as CheckMath, Xp as Arg, Zp as CheckFn, am as Fallback, cm as Text, em as Result, om as Part, rm as Check, sm as Style, tm as Text$1 } from "./theme-types-BY0mRf3K.mjs";
+import { $p as CheckFn, Qp as Arg, am as Check, cm as Part, em as CheckMath, lm as Style, nm as Result, rm as Text$1, sm as Fallback, tm as Fn, um as Text } from "./theme-types-CplLnGgG.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
 import { CSSStyleValue } from "@cssints/css-grammar/values";
 import { QueryKind, ValidQuery } from "@cssints/css-grammar/query";
-//#region src/group-types.d.ts
 /**
  * What a group bans. `kw`: by property, its keywords, and `name(` for a function only that property has; `fn`: functions
  * (anywhere); `unit`; `media`, `container`, `supports`: the words of a query (`scroll-state(`).
@@ -51,5 +50,4 @@ interface GCondition<B extends Ban, K extends QueryKind, R> {
   <const Q extends readonly [string, string, ...string[]]>(...queries: { [I in keyof Q]: GQ<B, K, Q[I]>; }): { [I in keyof Q]: R; };
   <const Q extends string>(query: GQ<B, K, Q>): R;
 }
-//#endregion
 export { GProp as a, GMath as i, GFn as n, GLayout as r, GCondition as t };

package/dist/groups/baseline-2015/with-downstream.d.mts

@@ -1,9 +1,8 @@
-import { A as Wrap, C as Keyframes, D as QueryWrap, F as cv, H as style, I as firstThatWorks, J as FlexMethods, K as within, L as global, M as cn, O as StateWrap, R as group, S as CvValue, T as PositionTry, W as token, _ as CSSStyleValue, a as DtcgUnit, am as Fallback, b as CvConfig, c as Tokens, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as attr, k as Steps, l as check, m as CSS, n as DtcgColor, o as DtcgValue, om as Part, p as AttrOp, q as ClassValue, r as DtcgCubicBezier, s as Overrides, sm as Style, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, x as CvProps, z as keyframes } from "../../theme-types-BY0mRf3K.mjs";
-import { a as GProp, r as GLayout, t as GCondition } from "../../group-types-Dn9CIR8J.mjs";
-import "../../group-common-3PAVTxpd.mjs";
+import { A as Steps, B as keyframes, C as CvValue, E as PositionTry, I as cv, J as within, K as token, L as firstThatWorks, M as attr, N as cn, O as QueryWrap, R as global, S as CvProps, U as style, X as FlexMethods, Y as ClassValue, _ as CSSStyleValue, a as DtcgUnit, c as Tokens, cm as Part, d as createTokens, f as layers, g as CSSImageValue, h as CSSColorValue, i as DtcgShadow, j as Wrap, k as StateWrap, l as check, lm as Style, m as CSS, n as DtcgColor, o as DtcgValue, p as AttrOp, r as DtcgCubicBezier, s as Overrides, sm as Fallback, t as CheckOverrides, u as createGlobalTheme, v as CSSUnitValue, w as Keyframes, x as CvConfig, z as group } from "../../theme-types-CplLnGgG.mjs";
+import { a as GProp, r as GLayout, t as GCondition } from "../../group-types-BBaZ8dwy.mjs";
+import "../../group-common-CTUs5yym.mjs";
 import { active, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, attrFn, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, bg, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, calc, captionSide, checked, clear, color, colorFn, columnGap, content, counter, counterIncrement, counterReset, counters, cubicBezier, direction, disabled, display, empty, emptyCells, enabled, firstChild, firstOfType, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, floodColor, floodOpacity, focus, font, fontFamily, fontSize, fontStyle, fontWeight, height, hover, hsl, hsla, image, inRange, indeterminate, invalid, justifyContent, lastChild, lastOfType, left, letterSpacing, lightingColor, lineHeight, linearGradient, link, listStyle, listStyleImage, listStylePosition, listStyleType, m, margin, marginBottom, marginLeft, marginRight, marginTop, matrix, matrix3d, maxHeight, maxWidth, mb, minHeight, minWidth, ml, mr, mt, onlyChild, onlyOfType, opacity, optional, order, outOfRange, outlineColor, outlineStyle, outlineWidth, overflow, overflowX, overflowY, p, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pb, perspective, perspectiveFn, perspectiveOrigin, pl, pointerEvents, position, pr, pt, quotes, radialGradient, repeatingLinearGradient, repeatingRadialGradient, required, rgb, rgba, right, root, rotate3d, rotateFn, rotateX, rotateY, rotateZ, scale3d, scaleFn, scaleX, scaleY, scaleZ, skew, skewX, skewY, steps, supports, tableLayout, target, textAlign, textIndent, textOverflow, textShadow, textTransform, top, transform, transformOrigin, transformStyle, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, translate3d, translateFn, translateX, translateY, translateZ, unicodeBidi, url, valid, verticalAlign, visibility, visited, width, wordBreak, wordSpacing, zIndex } from "../baseline-2015.mjs";
 import { properties } from "@cssints/css-grammar/mdn";
-//#region src/groups/baseline-2015/with-downstream.d.ts
 type B = {
   id: "baseline-2015/with-downstream";
   kw: {
@@ -77,5 +76,4 @@ export declare const textDecoration: P<"text-decoration">;
 export declare const whiteSpace: P<"white-space">;
 export declare const media: GCondition<B, "media", QueryWrap>;
 export declare const flex: GLayout<B, "flex", Pick<FlexMethods, "direction" | "wrap" | "flow" | "alignItems" | "alignContent" | "justifyContent" | "columnGap">>;
-//#endregion
 export { type AttrOp, type CSS, type CSSColorValue, type CSSImageValue, type CSSStyleValue, type CSSUnitValue, CheckOverrides, type ClassValue, type CvConfig, type CvProps, type CvValue, DtcgColor, DtcgCubicBezier, DtcgShadow, DtcgUnit, DtcgValue, type Fallback, type Keyframes, Overrides, type Part, type PositionTry, type QueryWrap, type StateWrap, type Steps, type Style, Tokens, type Wrap, active, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, attr, attrFn, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, bg, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRadius, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, calc, captionSide, check, checked, clear, cn, color, colorFn, columnGap, content, counter, counterIncrement, counterReset, counters, createGlobalTheme, createTokens, cubicBezier, cv, direction, disabled, display, empty, emptyCells, enabled, firstChild, firstOfType, firstThatWorks, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, floodColor, floodOpacity, focus, font, fontFamily, fontSize, fontStyle, fontWeight, global, group, height, hover, hsl, hsla, image, inRange, indeterminate, invalid, justifyContent, keyframes, lastChild, lastOfType, layers, left, letterSpacing, lightingColor, lineHeight, linearGradient, link, listStyle, listStyleImage, listStylePosition, listStyleType, m, margin, marginBottom, marginLeft, marginRight, marginTop, matrix, matrix3d, maxHeight, maxWidth, mb, minHeight, minWidth, ml, mr, mt, onlyChild, onlyOfType, opacity, optional, order, outOfRange, outlineColor, outlineStyle, outlineWidth, overflow, overflowX, overflowY, p, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, pb, perspective, perspectiveFn, perspectiveOrigin, pl, pointerEvents, position, pr, pt, quotes, radialGradient, repeatingLinearGradient, repeatingRadialGradient, required, rgb, rgba, right, root, rotate3d, rotateFn, rotateX, rotateY, rotateZ, scale3d, scaleFn, scaleX, scaleY, scaleZ, skew, skewX, skewY, steps, style, supports, tableLayout, target, textAlign, textIndent, textOverflow, textShadow, textTransform, token, top, transform, transformOrigin, transformStyle, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, translate3d, translateFn, translateX, translateY, translateZ, unicodeBidi, url, valid, verticalAlign, visibility, visited, width, within, wordBreak, wordSpacing, zIndex };