@glasshome/ui 0.5.3 → 1.0.0

package/package.json

@@ -1,10 +1,8 @@
 {
 	"name": "@glasshome/ui",
-	"version": "0.5.3",
+	"version": "1.0.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
-	"main": "./dist/index.js",
-	"types": "./dist/index.d.ts",
 	"homepage": "https://github.com/glasshome/ui#readme",
 	"bugs": {
 		"url": "https://github.com/glasshome/ui/issues"
@@ -13,9 +11,11 @@
 		"access": "public"
 	},
 	"engines": {
-		"node": ">=18"
+		"node": ">=20"
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.css"
+	],
 	"keywords": [
 		"solidjs",
 		"components",
@@ -42,23 +42,34 @@
 			"types": "./dist/tokens/index.d.ts",
 			"import": "./dist/tokens/index.js"
 		},
+		"./astro/*": "./src/astro/*",
 		"./styles": "./src/styles/globals.css",
 		"./package.json": "./package.json",
-		"./styles/theme": "./src/styles/theme.css"
+		"./styles/theme": "./src/styles/theme.css",
+		"./scripts/*": "./scripts/*"
 	},
 	"files": [
 		"dist",
-		"src/styles"
+		"src/astro",
+		"src/styles",
+		"scripts"
 	],
 	"scripts": {
 		"build": "vite build && tsc",
 		"check:tokens": "bun scripts/check-tokens.ts",
+		"check:types": "tsc --noEmit -p tsconfig.test.json",
+		"check:publish": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./styles ./styles/theme",
 		"dev": "vite build --watch",
-		"lint": "biome check ."
+		"lint": "biome check .",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"dev:gallery": "vite --config vite.dev.config.ts"
 	},
 	"peerDependencies": {
-		"@glasshome/sync-layer": ">=0.1.0",
-		"solid-js": "^1.9.9"
+		"astro": ">=4",
+		"solid-js": "^1.9.9",
+		"tailwindcss": "^4.1.13",
+		"tw-animate-css": "^1.4.0"
 	},
 	"dependencies": {
 		"@iconify-icon/solid": "^3.0.3",
@@ -66,24 +77,34 @@
 		"clsx": "^2.1.1",
 		"cva": "^1.0.0-beta.4",
 		"embla-carousel": "^8.5.1",
-		"lucide-solid": "^1.21.0",
 		"solid-sonner": "^0.3.1",
-		"tailwind-merge": "^3.4.0",
-		"tailwindcss": "^4.1.13",
-		"tw-animate-css": "^1.4.0"
+		"tailwind-merge": "^3.4.0"
 	},
 	"devDependencies": {
+		"@arethetypeswrong/cli": "^0.18.5",
+		"@biomejs/biome": "2.4.15",
+		"@solidjs/testing-library": "^0.8.10",
+		"@tailwindcss/vite": "^4.1.13",
 		"@types/json-schema": "^7.0.15",
 		"@types/node": "^25.2.2",
+		"happy-dom": "^20.11.0",
+		"publint": "^0.3.21",
+		"tailwindcss": "^4.1.13",
+		"tw-animate-css": "^1.4.0",
 		"typescript": "^5",
 		"vite": "^8.1.0",
 		"vite-plugin-solid": "^2.11.12",
-		"@biomejs/biome": "2.4.15"
+		"vitest": "^4.1.10"
 	},
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/glasshome/ui.git"
+		"url": "git+https://github.com/glasshome/ui.git"
 	},
 	"author": "GlassHome Labs",
-	"license": "MIT"
+	"license": "MIT",
+	"peerDependenciesMeta": {
+		"astro": {
+			"optional": true
+		}
+	}
 }

package/scripts/check-tokens.ts

@@ -0,0 +1,60 @@
+// Fails when styles/theme.css and tokens/presets.ts (midnight-glass) drift.
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { DEFAULT_THEME_ID, getPreset, type ThemeColors } from "../src/tokens";
+
+const css = readFileSync(
+	path.resolve(path.dirname(new URL(import.meta.url).pathname), "../src/styles/theme.css"),
+	"utf8",
+);
+
+const KEYS: Record<string, keyof ThemeColors> = {
+	"--primary": "primary",
+	"--accent": "accent",
+	"--secondary": "secondary",
+	"--border": "border",
+	"--card": "card",
+	"--background": "background",
+	"--muted": "muted",
+	"--muted-foreground": "mutedForeground",
+	"--input": "input",
+	"--ring": "ring",
+	"--destructive": "destructive",
+	"--popover": "popover",
+};
+
+function cssVars(block: string): Record<string, string> {
+	const match = css.match(new RegExp(`${block}\\s*\\{([^}]*)\\}`));
+	if (!match) throw new Error(`block not found in theme.css: ${block}`);
+	const vars: Record<string, string> = {};
+	for (const line of match[1].split("\n")) {
+		const m = line.match(/^\s*(--[\w-]+):\s*(.+?);\s*$/);
+		if (m) vars[m[1]] = m[2];
+	}
+	return vars;
+}
+
+const preset = getPreset(DEFAULT_THEME_ID);
+if (!preset) throw new Error(`preset missing: ${DEFAULT_THEME_ID}`);
+
+let drift = 0;
+for (const [mode, block] of [
+	["light", ":root"],
+	["dark", ".dark"],
+] as const) {
+	const vars = cssVars(block);
+	for (const [cssKey, tokenKey] of Object.entries(KEYS)) {
+		const cssValue = vars[cssKey];
+		const tokenValue = preset.colors[mode][tokenKey];
+		if (cssValue !== tokenValue) {
+			console.error(`${mode} ${cssKey}: css="${cssValue}" tokens="${tokenValue}"`);
+			drift++;
+		}
+	}
+}
+
+if (drift > 0) {
+	console.error(`${drift} token(s) drifted between theme.css and tokens/presets.ts`);
+	process.exit(1);
+}
+console.log("theme.css and tokens/presets.ts in sync");

package/scripts/check-ui-drift.mjs

@@ -0,0 +1,116 @@
+// Deny-by-default UI drift guard, shared by hub and dash. Glass, panels,
+// pills, and callouts must come from @glasshome/ui (see SPEC.md); this scans
+// app markup for the raw idioms those primitives replace.
+//
+// Escape hatch: `ui-drift-ok <reason>` in a comment on the line or the line
+// above. SKIP_UI_DRIFT_CHECK=1 skips entirely.
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+const RULES = [
+	[
+		"hand-rolled blur",
+		/(?:backdrop-blur(?:-\w+|-\[[^\]]+\])?|backdrop-filter)/,
+		"blur belongs to the material: use <Card>/CARD_BLUR, OVERLAY_SURFACE, SCRIM_CLASS, or TRACK_SURFACE",
+	],
+	[
+		"hand-rolled surface fill",
+		/\b(?<!hover:)(?<!focus:)(?<!active:)(?<!group-hover:)bg-(?:card|background|popover)\/\d+/,
+		"translucent surface fills come from <Card>, <Overlay>, or a --glass-base knob",
+	],
+	[
+		"bespoke pill",
+		/rounded-full[^"'`]*\bborder\b[^"'`]*bg-(?:card|background)\b/,
+		'use <Badge tone> or <Button size="none">',
+	],
+	[
+		"raw palette color",
+		/\b(?:bg|text|border)-(?:amber|green|yellow|red|blue|orange|emerald|rose|sky)-\d{3}\b/,
+		"use theme vars: var(--success)/var(--warning)/var(--destructive) via <Badge>/<Alert>",
+	],
+	[
+		"tinted callout",
+		/border-(?:primary|destructive|warning|success)\/\d+[^"'`]*bg-(?:primary|destructive|warning|success)\/\d+/,
+		"use <Alert tone> (Solid or astro) or ALERT_TONES",
+	],
+	[
+		"shadcn field chrome",
+		/border-input\s[^"'`]*bg-(?:background|transparent)\b/,
+		"use INPUT_CLASS / INPUT_SURFACE / FIELD_CHROME from @glasshome/ui",
+	],
+	[
+		"solid badge",
+		/border-transparent\s+bg-primary\s+text-primary-foreground/,
+		"use <Badge tone> — there are no solid badge variants",
+	],
+];
+
+function walk(dir) {
+	const out = [];
+	for (const name of readdirSync(dir)) {
+		const p = join(dir, name);
+		const s = statSync(p);
+		if (s.isDirectory()) out.push(...walk(p));
+		else if (/\.(astro|tsx)$/.test(p)) out.push(p);
+	}
+	return out;
+}
+
+export function checkUiDrift({ root = "src", allowFiles = [], allowPrefixes = [] } = {}) {
+	if (process.env.SKIP_UI_DRIFT_CHECK === "1") return 0;
+
+	const offenders = [];
+	for (const file of walk(root)) {
+		if (allowFiles.includes(file)) continue;
+		if (allowPrefixes.some((p) => file.startsWith(p))) continue;
+		const text = readFileSync(file, "utf8");
+		const lines = text.split("\n");
+		const flagged = new Set();
+		lines.forEach((line, i) => {
+			if (line.includes("ui-drift-ok") || (i > 0 && lines[i - 1].includes("ui-drift-ok"))) return;
+			for (const [type, re, fix] of RULES) {
+				if (re.test(line)) {
+					offenders.push({ file, line: i + 1, type, fix });
+					flagged.add(type);
+				}
+			}
+		});
+		// Class lists split across lines evade line rules: rerun on a
+		// whitespace-collapsed copy and report file-level hits not already seen.
+		if (!text.includes("ui-drift-ok")) {
+			const collapsed = text.replace(/\s+/g, " ");
+			for (const [type, re, fix] of RULES) {
+				if (!flagged.has(type) && re.test(collapsed)) {
+					offenders.push({ file, line: 0, type: `${type} (multi-line)`, fix });
+				}
+			}
+		}
+	}
+
+	if (offenders.length === 0) {
+		console.log("ui:check — no hand-rolled primitives found ✓");
+		return 0;
+	}
+
+	const byType = {};
+	for (const o of offenders) {
+		byType[o.type] ??= [];
+		byType[o.type].push(o);
+	}
+	console.error(
+		`ui:check — ${offenders.length} hand-rolled primitive(s) duplicating @glasshome/ui:\n`,
+	);
+	for (const [type, list] of Object.entries(byType)) {
+		console.error(`  ${type} (${list.length}) — ${list[0].fix}`);
+		for (const o of list) console.error(`    ${o.file}${o.line ? `:${o.line}` : ""}`);
+		console.error("");
+	}
+	console.error(
+		"Migrate to the package primitive, or add `ui-drift-ok <reason>` in a line comment if bespoke is intended.",
+	);
+	return 1;
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+	process.exit(checkUiDrift());
+}

package/src/astro/Alert.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * Static tone alert/callout for Astro / SSR pages — the same `ALERT_TONES` table
+ * and surface recipe the Solid <Alert> and hub's docs Callout use, rendered as
+ * plain HTML with zero JS and the lucide glyph inlined as SVG (no icon runtime).
+ * Drop this into `.astro` markup instead of hand-writing a
+ * `rounded-lg border border-primary/40 bg-primary/10` note box.
+ */
+import {
+	ALERT_CLASS,
+	ALERT_CONTENT_CLASS,
+	ALERT_DESCRIPTION_CLASS,
+	ALERT_ICON_BG_CLASS,
+	ALERT_ICON_PATHS,
+	ALERT_TITLE_CLASS,
+	ALERT_TONES,
+	type AlertTone,
+	alertIconBgStyle,
+	cn,
+	glassToneText,
+} from "@glasshome/ui";
+
+interface Props {
+	tone?: AlertTone;
+	/** Bold heading line. Optional. */
+	title?: string;
+	class?: string;
+}
+
+const { tone = "info", title, class: className, ...rest } = Astro.props;
+const t = ALERT_TONES[tone];
+
+const surfaceStyle = `--glass-tone:${t.color};color:var(--foreground)`;
+
+const iconBgStyle = Object.entries(alertIconBgStyle(t.color))
+	.map(([k, v]) => `${k}:${v}`)
+	.join(";");
+---
+
+<div
+	data-slot="alert"
+	role={tone === "destructive" ? "alert" : "status"}
+	class={cn(ALERT_CLASS, "glass glass-tint", className)}
+	style={surfaceStyle}
+	{...rest}
+>
+	<span class={ALERT_ICON_BG_CLASS} style={iconBgStyle} aria-hidden="true">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			set:html={ALERT_ICON_PATHS[tone]}
+		/>
+	</span>
+	<div class={ALERT_CONTENT_CLASS}>
+		{title && <p data-slot="alert-title" class={ALERT_TITLE_CLASS} style={`color:${glassToneText(t.color)}`}>{title}</p>}
+		<div data-slot="alert-description" class={ALERT_DESCRIPTION_CLASS}><slot /></div>
+	</div>
+</div>

package/src/astro/Badge.astro

@@ -0,0 +1,16 @@
+---
+import { BADGE_DEFAULT_TONE, BADGE_TONE_CLASS } from "../lib/badge-tone";
+import { cn } from "../lib/utils";
+
+interface Props {
+	tone?: string;
+	as?: keyof HTMLElementTagNameMap;
+	class?: string;
+}
+
+const { tone = BADGE_DEFAULT_TONE, as: Tag = "span", class: className, ...rest } = Astro.props;
+---
+
+<Tag data-slot="badge" class={cn(BADGE_TONE_CLASS, "glass glass-tint", className)} style={`--glass-tone:${tone}`} {...rest}>
+	<slot />
+</Tag>

package/src/astro/Button.astro

@@ -0,0 +1,43 @@
+---
+/**
+ * Static button/CTA for Astro / SSR pages — the same `buttonVariants` recipe the
+ * Solid <Button> uses, rendered as a plain <a>/<button> with zero JS. Drop this
+ * into `.astro` markup instead of hand-writing a `rounded-full bg-primary px-6`
+ * pill.
+ *
+ * Renders an <a> when `href` is set, else a <button>. `size` defaults to `none`
+ * (sizeless: color + shape only) so marketing CTAs supply their own height and
+ * padding via `class`, matching how the hub pill tokens are used.
+ */
+import { buttonVariants, cn } from "@glasshome/ui";
+
+interface Props {
+	variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
+	size?: "default" | "sm" | "lg" | "icon" | "none";
+	href?: string;
+	type?: "button" | "submit" | "reset";
+	class?: string;
+}
+
+const {
+	variant = "default",
+	size = "none",
+	href,
+	type = "button",
+	class: className,
+	...rest
+} = Astro.props;
+const cls = cn(buttonVariants({ variant, size }), className);
+---
+
+{
+	href ? (
+		<a data-slot="button" href={href} class={cls} {...rest}>
+			<slot />
+		</a>
+	) : (
+		<button data-slot="button" type={type} class={cls} {...rest}>
+			<slot />
+		</button>
+	)
+}

package/src/astro/Card.astro

@@ -0,0 +1,39 @@
+---
+import {
+	CARD_INTERACTIVE,
+	CARD_PADDING,
+	CARD_SURFACE,
+	CARD_SURFACE_OPAQUE,
+	type CardPadding,
+} from "../lib/card-classes";
+import { cn } from "../lib/utils";
+
+interface Props {
+	as?: keyof HTMLElementTagNameMap;
+	interactive?: boolean;
+	opaque?: boolean;
+	padding?: CardPadding;
+	class?: string;
+}
+
+const {
+	as: Tag = "div",
+	interactive = false,
+	opaque = false,
+	padding = "none",
+	class: className,
+	...rest
+} = Astro.props;
+
+const classes = cn(
+	opaque ? CARD_SURFACE_OPAQUE : CARD_SURFACE,
+	"rounded-[var(--radius)]",
+	CARD_PADDING[padding],
+	interactive && CARD_INTERACTIVE,
+	className,
+);
+---
+
+<Tag data-slot="card" class={classes} {...rest}>
+	<slot />
+</Tag>

package/src/astro/Logo.astro

@@ -0,0 +1,69 @@
+---
+/**
+ * The GlassHome lockup for Astro / SSR pages — the same spec the Solid <Logo>
+ * renders, as plain HTML with zero JS. Use this instead of hand-building a
+ * mark + "GlassHome" + sub-line stack; that is how the lockup ended up in six
+ * shapes across the repos.
+ *
+ * `href` renders the whole lockup as a link. The `sub` slot replaces the
+ * sub-brand line for surfaces that animate over it (e.g. hub's launch
+ * countdown cross-fade); it inherits nothing, so pass LOGO_SUB_CLASS yourself.
+ */
+import {
+	cn,
+	LOGO_DEFAULT_SIZE,
+	LOGO_DEFAULT_SRC,
+	LOGO_DEFAULT_SUB,
+	LOGO_MARK_CLASS,
+	LOGO_MARK_PX,
+	LOGO_NAME_CLASS,
+	LOGO_ROOT_CLASS,
+	LOGO_SIZES,
+	LOGO_STACK_CLASS,
+	LOGO_SUB_CLASS,
+	type LogoSize,
+} from "@glasshome/ui";
+
+interface Props {
+	/** Sub-brand line. Defaults to "Dash". */
+	sub?: string;
+	size?: LogoSize;
+	/** Renders the lockup as a link when set. */
+	href?: string;
+	/** Override the mark asset. Both apps serve the default path. */
+	src?: string;
+	class?: string;
+	/** Extra classes for the mark, e.g. a hover transform. */
+	markClass?: string;
+}
+
+const {
+	sub = LOGO_DEFAULT_SUB,
+	size = LOGO_DEFAULT_SIZE,
+	href,
+	src = LOGO_DEFAULT_SRC,
+	class: className,
+	markClass,
+	...rest
+} = Astro.props;
+
+const s = LOGO_SIZES[size];
+const px = LOGO_MARK_PX[size];
+const Tag = href ? "a" : "div";
+---
+
+<Tag data-slot="logo" class={cn(LOGO_ROOT_CLASS, s.gap, className)} href={href} {...rest}>
+	<img
+		src={src}
+		alt=""
+		width={px}
+		height={px}
+		class={cn(LOGO_MARK_CLASS, s.mark, markClass)}
+	/>
+	<span class={LOGO_STACK_CLASS}>
+		<span data-slot="logo-name" class={cn(s.name, LOGO_NAME_CLASS)}>GlassHome</span>
+		<slot name="sub">
+			<span data-slot="logo-sub" class={cn(s.sub, LOGO_SUB_CLASS)}>{sub}</span>
+		</slot>
+	</span>
+</Tag>

package/src/astro/TierBadge.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * Static metallic tier chip for Astro / SSR pages (PRO / EARLY BIRD / CREATOR /
+ * FOUNDER) — the same tier tokens the Solid <TierBadge> uses, rendered as plain
+ * HTML with zero JS. One family; only the hi/lo/text triplet changes per tier.
+ */
+import { TIER_BADGE_CLASS, tierBadgeStyle } from "../lib/tier-badge";
+import { cn } from "../lib/utils";
+
+interface Props {
+	/** Gradient high stop (the near end of the diagonal sweep, and by default
+	 *  the far end too). */
+	hi: string;
+	/** Gradient low stop (the dip). */
+	lo: string;
+	/** Dark label color. */
+	text: string;
+	/** Far end of the sweep. Default: `hi` (symmetric brushed look). */
+	end?: string;
+	/** Where `lo` sits, in percent. Default: 50. */
+	stop?: number;
+	class?: string;
+}
+
+const { hi, lo, text, end, stop, class: className, ...rest } = Astro.props;
+const style = Object.entries(tierBadgeStyle(hi, lo, text, { end, stop }))
+	.map(([k, v]) => `${k}:${v}`)
+	.join(";");
+---
+
+<span data-slot="tier-badge" class={cn(TIER_BADGE_CLASS, className)} style={style} {...rest}>
+	<slot />
+</span>