@glasshome/ui 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",
@@ -51,6 +51,7 @@
 	"files": [
 		"dist",
 		"src/astro",
+		"src/lib",
 		"src/styles",
 		"scripts"
 	],
@@ -77,6 +78,8 @@
 		"clsx": "^2.1.1",
 		"cva": "^1.0.0-beta.4",
 		"embla-carousel": "^8.5.1",
+		"embla-carousel-autoplay": "^8.5.1",
+		"embla-carousel-fade": "^8.5.1",
 		"solid-sonner": "^0.3.1",
 		"tailwind-merge": "^3.4.0"
 	},

package/src/astro/Carousel.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * Server-rendered carousel. Slides live in the HTML, so they are indexable and
+ * the first one is the LCP image; the client script only adds behaviour.
+ * Use this on content pages; use the Solid <Carousel> inside an app.
+ *
+ * Slides go in the default slot as <CarouselItem>-shaped elements, or pass
+ * `count` to have dots rendered for you.
+ */
+import {
+	CAROUSEL_DOTS,
+	CAROUSEL_VIEWPORT,
+	type CarouselTransition,
+	carouselDot,
+	carouselTrack,
+} from "../lib/carousel-classes";
+import { cn } from "../lib/utils";
+
+interface Props {
+	transition?: CarouselTransition;
+	/** Advance every N ms. Skipped under prefers-reduced-motion. */
+	autoplay?: number;
+	loop?: boolean;
+	/** Slide count; when set, dots are rendered. */
+	count?: number;
+	class?: string;
+}
+
+const {
+	transition = "slide",
+	autoplay,
+	loop = false,
+	count,
+	class: className,
+	...rest
+} = Astro.props;
+---
+
+<div
+	data-carousel
+	data-carousel-transition={transition}
+	data-carousel-autoplay={autoplay}
+	data-carousel-loop={loop ? "" : undefined}
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...rest}
+>
+	<div data-carousel-viewport class={CAROUSEL_VIEWPORT}>
+		<div class={carouselTrack(transition)}>
+			<slot />
+		</div>
+	</div>
+
+	<slot name="controls" />
+
+	{
+		count && (
+			<div class={CAROUSEL_DOTS} data-carousel-dots>
+				{Array.from({ length: count }, (_, i) => (
+					<button
+						type="button"
+						data-carousel-dot
+						aria-label={`Go to slide ${i + 1}`}
+						aria-current={i === 0}
+						class={carouselDot(i === 0)}
+					/>
+				))}
+			</div>
+		)
+	}
+</div>
+
+<script>
+	import { initCarousels } from "../lib/carousel-init";
+
+	initCarousels();
+	document.addEventListener("astro:page-load", () => initCarousels());
+</script>

package/src/lib/alert-tones.ts

@@ -0,0 +1,65 @@
+export type AlertTone = "info" | "warning" | "success" | "destructive";
+
+export type AlertToneStyle = {
+	color: string;
+	icon: string;
+	text: string;
+};
+
+/* Text mixes in oklab: no hue channel, a hued tone desaturates without swinging yellow. */
+export const ALERT_TONES: Record<AlertTone, AlertToneStyle> = {
+	info: {
+		color: "var(--primary)",
+		icon: "lucide:info",
+		text: "var(--primary-tint-foreground)",
+	},
+	warning: {
+		color: "var(--warning)",
+		icon: "lucide:alert-triangle",
+		text: "color-mix(in oklab, var(--warning) 55%, var(--foreground))",
+	},
+	success: {
+		color: "var(--success)",
+		icon: "lucide:check-circle-2",
+		text: "color-mix(in oklab, var(--success) 60%, var(--foreground))",
+	},
+	destructive: {
+		color: "var(--destructive)",
+		icon: "lucide:alert-octagon",
+		text: "color-mix(in oklab, var(--destructive) 65%, var(--foreground))",
+	},
+};
+
+/* Lucide glyph paths (viewBox 0 0 24 24), rendered by both the Solid and Astro <Alert>. */
+export const ALERT_ICON_PATHS: Record<AlertTone, string> = {
+	info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
+	warning:
+		'<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/>',
+	success: '<path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11 3 3L22 4"/>',
+	destructive:
+		'<path d="M12 16h.01"/><path d="M12 8v4"/><path d="M15.312 2a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688A2 2 0 0 1 15.312 22H8.688a2 2 0 0 1-1.414-.586l-4.688-4.688A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2z"/>',
+};
+
+/* srgb, not oklch: oklch drags a tone mixed toward transparent down to mud. */
+export const alertBorder = (c: string) => `color-mix(in srgb, ${c} 28%, transparent)`;
+export const alertFill = (c: string) => `color-mix(in srgb, ${c} 9%, transparent)`;
+export const alertIconFill = (c: string) => `color-mix(in srgb, ${c} 16%, transparent)`;
+
+export const ALERT_CLASS =
+	"relative overflow-hidden flex items-start gap-3 rounded-lg border p-3 backdrop-blur-sm";
+export const ALERT_ICON_CLASS =
+	"flex size-8 shrink-0 items-center justify-center rounded-md [&>svg]:size-[18px]";
+export const ALERT_ICON_BG_CLASS =
+	"pointer-events-none absolute -right-3 -bottom-4 [&>svg]:size-28 [&>svg]:[stroke-width:2.5px]";
+export function alertIconBgStyle(color: string): Record<string, string> {
+	return {
+		color,
+		opacity: "0.32",
+		"-webkit-mask-image": "radial-gradient(140% 140% at 100% 100%, #000 45%, transparent 95%)",
+		"mask-image": "radial-gradient(140% 140% at 100% 100%, #000 45%, transparent 95%)",
+	};
+}
+export const ALERT_CONTENT_CLASS = "relative z-10 min-w-0 flex-1";
+export const ALERT_TITLE_CLASS = "font-semibold text-base leading-snug";
+export const ALERT_DESCRIPTION_CLASS =
+	"text-foreground/80 text-sm leading-snug [&:not(:first-child)]:mt-0.5";

package/src/lib/badge-tone.ts

@@ -0,0 +1,4 @@
+export const BADGE_DEFAULT_TONE = "var(--primary)";
+
+export const BADGE_TONE_CLASS =
+	"inline-flex w-fit shrink-0 cursor-default select-none items-center gap-1.5 whitespace-nowrap rounded-full border px-2.5 py-0.5 font-medium text-xs";

package/src/lib/button-variants.ts

@@ -0,0 +1,44 @@
+import { cva } from "cva";
+
+/* Buttons are glass pills on an OPAQUE --card base: a translucent fill goes
+ * muddy over dark heroes/sections. Every class is literal for Tailwind's
+ * scanner. `size: none` is sizeless for callers that own height/padding. */
+export const buttonVariants = cva({
+	base: "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+	variants: {
+		variant: {
+			default:
+				"glass glass-tint [--glass-text:70%] [--glass-tone:var(--primary)] [--glass-wash:30%] hover:[--glass-edge:color-mix(in_srgb,var(--primary)_60%,transparent)] hover:[--glass-wash:40%]",
+			destructive:
+				"glass glass-tint [--glass-text:61%] [--glass-tone:var(--destructive)] [--glass-wash:30%] focus-visible:ring-destructive/30 hover:[--glass-edge:color-mix(in_srgb,var(--destructive)_60%,transparent)] hover:[--glass-wash:40%]",
+			secondary:
+				"glass glass-tint [--glass-tone:var(--accent)] [--glass-wash:30%] hover:[--glass-edge:color-mix(in_srgb,var(--accent)_60%,transparent)] hover:[--glass-wash:40%]",
+			outline:
+				"glass [--glass-edge:var(--border)] hover:[--glass-base:var(--muted)] dark:[--glass-base:var(--input)] dark:hover:[--glass-base:var(--muted)]",
+			ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+			lg: "h-10 px-6 has-[>svg]:px-4",
+			icon: "size-9 p-2",
+			none: "",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+// Evaluated once for static/SSR call sites (marketing CTAs, .astro frontmatter)
+// that want a class string without hydrating <Button>. Sizeless: callers add
+// their own height and padding.
+export const BUTTON_DEFAULT_CLASS = buttonVariants({ variant: "default", size: "none" });
+export const BUTTON_OUTLINE_CLASS = buttonVariants({ variant: "outline", size: "none" });
+
+/* Round ghost icon button (copy buttons, small icon actions). Size and text
+ * color stay at the call site. */
+export const ICON_BUTTON_CLASS =
+	"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full transition-all duration-150 hover:bg-primary/10 active:scale-90";

package/src/lib/card-classes.ts

@@ -0,0 +1,37 @@
+const CARD_KNOBS =
+	"glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0]";
+
+export const CARD_SURFACE_BASE = `${CARD_KNOBS} [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)]`;
+
+/* Split from the surface so dash's performant-blur engine can gate it off and
+ * paint a precomputed frost instead. */
+export const CARD_BLUR = "backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.8]";
+
+export const CARD_SURFACE = `${CARD_SURFACE_BASE} ${CARD_BLUR}`;
+
+/* Opaque fill, no blur: for busy/dark backgrounds and transform-animated
+ * contexts where backdrop-blur can't run. */
+export const CARD_SURFACE_OPAQUE = CARD_KNOBS;
+
+/* Recessed track frame (tabs, segmented controls). */
+export const TRACK_SURFACE = "border border-border/50 bg-card/40 backdrop-blur-sm";
+
+export const CARD_PADDING = {
+	slots: "flex flex-col gap-3 py-3 md:gap-4 md:py-4",
+	md: "p-4",
+	sm: "p-3",
+	none: "",
+} as const;
+
+export type CardPadding = keyof typeof CARD_PADDING;
+
+export const CARD_INTERACTIVE =
+	"cursor-pointer transition-colors duration-200 hover:border-border hover:bg-foreground/[0.03] focus-within:border-border";
+
+export const CARD_HEADER_CLASS =
+	"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] md:px-4";
+export const CARD_TITLE_CLASS = "font-semibold leading-none";
+export const CARD_DESCRIPTION_CLASS = "text-muted-foreground text-sm";
+export const CARD_ACTION_CLASS = "col-start-2 row-span-2 row-start-1 self-start justify-self-end";
+export const CARD_CONTENT_CLASS = "px-3 md:px-4";
+export const CARD_FOOTER_CLASS = "flex items-center px-3 md:px-4 [.border-t]:pt-6";

package/src/lib/carousel-classes.ts

@@ -0,0 +1,35 @@
+/* Shared by the Solid <Carousel> and astro/Carousel.astro so the two render the
+ * same markup. Astro renders slides server-side (SEO, LCP) and enhances them on
+ * the client with the same embla engine. */
+
+export type CarouselTransition = "slide" | "fade" | "wipe";
+
+export const CAROUSEL_VIEWPORT = "h-full overflow-hidden";
+
+/** Stacked modes put every slide in one grid cell; slide lays out a flex track. */
+export function carouselTrack(
+	transition: CarouselTransition,
+	orientation: "horizontal" | "vertical" = "horizontal",
+) {
+	return transition === "slide"
+		? `flex ${orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col"}`
+		: "carousel-stack";
+}
+
+export function carouselItem(
+	transition: CarouselTransition,
+	orientation: "horizontal" | "vertical" = "horizontal",
+) {
+	// Stacked slides fill their grid cell; only a flex track needs basis/gutter.
+	if (transition === "wipe") return "min-w-0 carousel-wipe";
+	if (transition === "fade") return "min-w-0";
+	return `min-w-0 shrink-0 grow-0 basis-full ${orientation === "horizontal" ? "pl-4" : "pt-4"}`;
+}
+
+export const CAROUSEL_DOTS = "flex items-center justify-center gap-2";
+
+export function carouselDot(active: boolean) {
+	return `h-1.5 rounded-full transition-all hover:bg-foreground/70 ${
+		active ? "w-6 bg-foreground/80" : "w-1.5 bg-foreground/40"
+	}`;
+}

package/src/lib/carousel-init.ts

@@ -0,0 +1,87 @@
+import EmblaCarousel from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+import Fade from "embla-carousel-fade";
+import { type CarouselTransition, carouselDot } from "./carousel-classes.js";
+
+/**
+ * Client enhancement for astro/Carousel.astro. The markup is already in the
+ * server HTML; this only adds behaviour, so the slides stay visible (and
+ * indexable) if the script never runs.
+ *
+ * Emits `carousel:select` with `{ index }` so a host page can sync its own
+ * chrome (labels, lightboxes) without owning the carousel.
+ */
+export function initCarousels(root: ParentNode = document) {
+	const roots = Array.from(root.querySelectorAll("[data-carousel]")) as HTMLElement[];
+	for (const el of roots) {
+		if (el.dataset.carouselReady) continue;
+		el.dataset.carouselReady = "1";
+
+		const viewport = el.querySelector("[data-carousel-viewport]") as HTMLElement | null;
+		if (!viewport) continue;
+
+		const transition = (el.dataset.carouselTransition ?? "slide") as CarouselTransition;
+		const autoplayMs = Number(el.dataset.carouselAutoplay ?? 0);
+		const loop = el.dataset.carouselLoop === "";
+		const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+		const plugins = [];
+		if (transition !== "slide") plugins.push(Fade());
+		if (autoplayMs > 0 && !reduced) {
+			// Manual nav should not kill autoplay for good; hovering pauses it and
+			// leaving resumes, which is what a hero carousel wants.
+			plugins.push(
+				Autoplay({
+					delay: autoplayMs,
+					stopOnInteraction: false,
+					stopOnMouseEnter: true,
+					stopOnFocusIn: true,
+				}),
+			);
+		}
+
+		const embla = EmblaCarousel(viewport, { loop }, plugins);
+		const dots = Array.from(el.querySelectorAll("[data-carousel-dot]")) as HTMLButtonElement[];
+
+		let previous = -1;
+		const onSelect = () => {
+			const index = embla.selectedScrollSnap();
+			embla.slideNodes().forEach((node, i) => {
+				node.toggleAttribute("data-selected", i === index);
+				// The outgoing slide stays visible one layer down until the sweep lands.
+				node.toggleAttribute("data-prev", i === previous && i !== index);
+			});
+			previous = index;
+			dots.forEach((dot, i) => {
+				dot.className = carouselDot(i === index);
+				dot.setAttribute("aria-current", String(i === index));
+			});
+			el.dispatchEvent(new CustomEvent("carousel:select", { detail: { index }, bubbles: true }));
+		};
+
+		el.addEventListener("keydown", (e) => {
+			const key = (e as KeyboardEvent).key;
+			if (key !== "ArrowLeft" && key !== "ArrowRight") return;
+			e.preventDefault();
+			if (key === "ArrowLeft") embla.scrollPrev();
+			else embla.scrollNext();
+		});
+
+		// A host that covers the carousel (a lightbox) pauses it, so the slide
+		// does not change behind the overlay.
+		const autoplay = (embla.plugins() as { autoplay?: { play: () => void; stop: () => void } })
+			.autoplay;
+		el.addEventListener("carousel:pause", () => autoplay?.stop());
+		el.addEventListener("carousel:resume", () => autoplay?.play());
+
+		dots.forEach((dot, i) => {
+			dot.addEventListener("click", () => embla.scrollTo(i));
+		});
+		el.querySelector("[data-carousel-prev]")?.addEventListener("click", () => embla.scrollPrev());
+		el.querySelector("[data-carousel-next]")?.addEventListener("click", () => embla.scrollNext());
+
+		onSelect();
+		embla.on("select", onSelect);
+		embla.on("reInit", onSelect);
+	}
+}

package/src/lib/glass-tone.ts

@@ -0,0 +1,23 @@
+/* Per-tone label contrast: light tones (amber, lime) mix further toward
+ * --foreground so they read as strongly as dark ones. */
+const TONE_L: Record<string, number> = {
+	"var(--primary)": 0.48,
+	"var(--accent)": 0.6,
+	"var(--success)": 0.68,
+	"var(--warning)": 0.76,
+	"var(--destructive)": 0.66,
+	"var(--muted-foreground)": 0.55,
+};
+
+export function toneTextMix(color: string): number {
+	const known = TONE_L[color];
+	const raw = color.match(/oklch\(\s*([0-9.]+)/)?.[1];
+	const l = known ?? (raw ? Number.parseFloat(raw) : 0.6);
+	return Math.min(70, Math.max(46, Math.round(71 - (l - 0.5) * 60)));
+}
+
+/* oklab, not oklch: no hue channel, so a hued tone desaturates toward neutral
+ * instead of swinging toward yellow. */
+export function glassToneText(color: string): string {
+	return `color-mix(in oklab, ${color} ${toneTextMix(color)}%, var(--foreground))`;
+}

package/src/lib/input-classes.ts

@@ -0,0 +1,5 @@
+/* Recessed (concave) glass field. Opaque --input fill: a translucent field
+ * shows whatever sits behind it (worst inside the overlapping Select listbox). */
+export const INPUT_SURFACE = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
+
+export const INPUT_CLASS = `flex h-9 w-full min-w-0 rounded-md ${INPUT_SURFACE} px-3 py-1 text-base outline-none transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40`;

package/src/lib/logo-lockup.ts

@@ -0,0 +1,49 @@
+/**
+ * The GlassHome lockup spec, pure — shared by the Solid <Logo>, the Astro
+ * <Logo>, and any `.astro` consumer that needs the class strings without
+ * hydrating a component.
+ *
+ * One ratio everywhere (audit L2): the sub-brand line is the dominant element,
+ * the wordmark sits above it as a smaller eyebrow. Sub-line spec (audit L1):
+ * text-primary, uppercase, bold, tracking-[0.18em] — never restyled per
+ * surface, never recolored, and the mark is never stretched or used as an
+ * avatar.
+ */
+
+export type LogoSize = "sm" | "md" | "lg";
+
+export const LOGO_DEFAULT_SRC = "/assets/glasshome_logo.png";
+export const LOGO_DEFAULT_SUB = "Dash";
+export const LOGO_DEFAULT_SIZE: LogoSize = "md";
+
+/** Rendered pixel size of the mark per size, for width/height attrs (CLS). */
+export const LOGO_MARK_PX: Record<LogoSize, number> = {
+	sm: 32,
+	md: 48,
+	lg: 64,
+};
+
+export const LOGO_SIZES: Record<
+	LogoSize,
+	{ mark: string; name: string; sub: string; gap: string }
+> = {
+	sm: { mark: "h-8 w-8", name: "text-xs", sub: "text-base", gap: "gap-1.5" },
+	md: { mark: "h-12 w-12", name: "text-base", sub: "text-2xl", gap: "gap-2" },
+	lg: { mark: "h-16 w-16", name: "text-lg", sub: "text-3xl", gap: "gap-2" },
+};
+
+/**
+ * The stack sits on the mark's baseline (items-end), so the sub-brand line
+ * bottoms out level with the mark rather than floating centred against it.
+ */
+export const LOGO_ROOT_CLASS = "inline-flex items-end";
+/** The two lines are pinned by an explicit gap, never by line-height slack. */
+export const LOGO_STACK_CLASS = "flex flex-col gap-0.5";
+/**
+ * Compose as cn(SIZE, BASE), not cn(BASE, SIZE): tailwind-merge treats a
+ * font-size class as carrying a line-height, so a trailing `text-2xl` would
+ * strip the `leading-none` these rely on.
+ */
+export const LOGO_MARK_CLASS = "shrink-0";
+export const LOGO_NAME_CLASS = "whitespace-nowrap font-bold leading-none tracking-tight";
+export const LOGO_SUB_CLASS = "font-bold text-primary uppercase leading-none tracking-[0.18em]";

package/src/lib/overlay-classes.ts

@@ -0,0 +1,7 @@
+/* Floating-panel glass: opaque popover fill so menus stay legible over anything. */
+export const OVERLAY_SURFACE =
+	"glass [--glass-base:var(--popover)] [--glass-rim:0.3] [--glass-lift:0.55]";
+
+/* Modal scrim behind dialogs/sheets. BottomSheet keeps its own unblurred scrim
+ * (backdrop-blur is too slow on mobile). */
+export const SCRIM_CLASS = "bg-background/70 backdrop-blur-sm";

package/src/lib/section-tokens.ts

@@ -0,0 +1,8 @@
+/* Concentric radius: inner = outer - padding, clamped for tiny --radius themes. */
+export const SECTION_OUTER_RADIUS = "rounded-[var(--radius)]";
+export const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-0.75rem))]";
+export const SECTION_PADDING = "p-3";
+
+const SECTION_ROW_SURFACE = `${SECTION_INNER_RADIUS} border border-border/60 bg-card/60`;
+
+export const SECTION_ROW_CLASS = `${SECTION_ROW_SURFACE} ${SECTION_PADDING}`;

package/src/lib/tier-badge.ts

@@ -0,0 +1,31 @@
+/* Metallic tier chip: 135deg brushed sweep, bright ends, dip in the middle. */
+
+export const TIER_BADGE_CLASS =
+	"inline-flex cursor-default select-none items-center rounded-full px-2 py-0.5 font-black text-[10px] uppercase tracking-wider";
+
+/** Optional sweep shaping. Default is the symmetric brushed look (both ends
+ *  `hi`, dipping to `lo` at the midpoint). The collectible/license golds are a
+ *  lit bevel instead: they dip early and land on a darker `end`. */
+export interface TierSweep {
+	/** Far end of the sweep. Default: `hi` (symmetric). */
+	end?: string;
+	/** Where `lo` sits, in percent. Default: 50. */
+	stop?: number;
+}
+
+/** Inline style for the metallic pill body. Keys are CSS property names (works
+ *  as a Solid `style` object and, joined, as an Astro `style` string). */
+export function tierBadgeStyle(
+	hi: string,
+	lo: string,
+	text: string,
+	sweep: TierSweep = {},
+): Record<string, string> {
+	const end = sweep.end ?? hi;
+	const stop = sweep.stop ?? 50;
+	return {
+		background: `linear-gradient(135deg, ${hi}, ${lo} ${stop}%, ${end})`,
+		color: text,
+		"box-shadow": "inset 0 1px 0 oklch(1 0 0 / 0.45), 0 1px 2px oklch(0 0 0 / 0.25)",
+	};
+}

package/src/lib/use-is-mobile.ts

@@ -0,0 +1,17 @@
+import { createSignal, onCleanup, onMount } from "solid-js";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function createIsMobile() {
+	const [isMobile, setIsMobile] = createSignal<boolean | undefined>(undefined);
+
+	onMount(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		onCleanup(() => mql.removeEventListener("change", onChange));
+	});
+
+	return isMobile;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/src/styles/globals.css

@@ -101,6 +101,14 @@
  * mixed toward transparent-black down to mud on light surfaces. Deliberately
  * unlayered so the material owns border/background/box-shadow; tune via knobs. */
 :where(.glass) {
+	/* Descendant-readable mirror of this surface's tone. The --glass-* knobs are
+	 * @property inherits:false so a nested glass element never picks up an
+	 * ancestor's tint — correct for surfaces, but it also means a plain child
+	 * (an icon, a label) reading var(--glass-tone) silently gets `transparent`
+	 * and paints nothing. --surface-tone is an ordinary inheriting property, so
+	 * children can read it; a nested .glass re-declares it from its own knob,
+	 * which resets the chain and keeps the no-leak guarantee. */
+	--surface-tone: var(--glass-tone);
 	border: 1px solid var(--glass-edge);
 	/* Base is a gradient layer (not background-color) so the frost slice can sit
 	 * BELOW it — background-color always paints under every image layer, which
@@ -162,3 +170,54 @@
 		background: var(--muted-foreground);
 	}
 }
+
+/* Stacked carousel modes (fade, wipe) put every slide in one grid cell. This is
+ * structural, so it ships as real CSS: a Tailwind arbitrary variant written in
+ * package source never reaches a consumer, because Tailwind skips node_modules
+ * when scanning for class names. */
+.carousel-stack {
+	display: grid;
+}
+.carousel-stack > * {
+	grid-column: 1;
+	grid-row: 1;
+}
+
+/* Carousel `wipe`: the incoming slide sweeps in diagonally over the previous
+ * one, which stays fully visible beneath until the sweep lands. Only the
+ * incoming slide animates: giving the outgoing one a matching transition makes
+ * it collapse at the same time, which reads as two wipes from opposite corners.
+ * Slides are opaque here; embla's fade plugin only stops the track translating,
+ * and its opacity would wash out the sweep. */
+.carousel-wipe {
+	/* Content choreography, not a state change: the motion scale's rungs are for
+	 * micro-interactions and are far too quick to read as a sweep. Override per
+	 * instance by setting --carousel-wipe on the carousel. */
+	--carousel-wipe: 1600ms;
+	clip-path: polygon(0 0, 300% 0, 0 300%, 0 0);
+	/* The fade plugin fades AND parks inactive slides off-screen
+	 * (transform: translate(containerWidth + 2)), on embla's own short scroll
+	 * duration. Both have to be neutralised or the sweep reveals empty space
+	 * once the outgoing slide leaves: in wipe mode clip-path is the only reveal,
+	 * and z-index alone decides what shows through. Inline styles, hence
+	 * !important. */
+	opacity: 1 !important;
+	transform: none !important;
+}
+.carousel-wipe[data-prev] {
+	z-index: 1;
+}
+.carousel-wipe[data-selected] {
+	z-index: 2;
+	animation: carousel-wipe-in var(--carousel-wipe) ease-in-out;
+}
+@keyframes carousel-wipe-in {
+	from {
+		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
+	}
+}
+@media (prefers-reduced-motion: reduce) {
+	.carousel-wipe[data-selected] {
+		animation: none;
+	}
+}

package/src/styles/theme.css

@@ -160,6 +160,14 @@
 	--shadow-2xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.4);
 	--tracking-normal: 0em;
 	--spacing: 0.27rem;
+
+	/* Motion. Durations name the gesture, not the number: micro is a hover or
+	 * border change, state a tone or chip swap, expand an open/close. Theme
+	 * independent, so declared once; zeroed under prefers-reduced-motion. */
+	--ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
+	--duration-micro: 120ms;
+	--duration-state: 160ms;
+	--duration-expand: 200ms;
 }
 
 .dark {
@@ -418,6 +426,13 @@
 	::view-transition-new(area-title) {
 		animation: none !important;
 	}
+
+	/* Anything timed off the motion scale stops moving, no per-component opt-in. */
+	:root {
+		--duration-micro: 0ms;
+		--duration-state: 0ms;
+		--duration-expand: 0ms;
+	}
 }
 
 /* Performance: disable all backdrop-filter when reduce-blur is active */