@glasshome/ui 0.5.4 → 1.0.0

package/README.md

@@ -2,37 +2,43 @@
 
 SolidJS component library for GlassHome, built on [Kobalte](https://kobalte.dev).
 
-56 accessible, theme-aware components plus utility functions and a Tailwind v4 CSS preset — everything you need to build smart-home dashboards. Powers [GlassHome](https://glasshome.app), the local-first dashboard for Home Assistant.
+70+ accessible, theme-aware components plus framework-agnostic design tokens and a Tailwind v4 CSS preset, everything you need to build smart-home dashboards. Powers [GlassHome](https://glasshome.app), the local-first dashboard for Home Assistant.
+
+The whole library wears a single glass material (`.glass` with typed `--glass-*` knobs). `SPEC.md` is the design-system contract; the live gallery (`bun run dev:gallery`) is its executable form.
 
 ## Install
 
 ```bash
-npm install @glasshome/ui solid-js
+bun add @glasshome/ui solid-js @glasshome/sync-layer
 # or
-bun add @glasshome/ui solid-js
+npm install @glasshome/ui solid-js @glasshome/sync-layer
 ```
 
-> `solid-js ^1.9.9` is a required peer dependency.
+Peer dependencies:
 
-## Subpath Imports
+| Package | Needed for |
+| --- | --- |
+| `solid-js` `^1.9` | everything under `/solid` |
+| `@glasshome/sync-layer` | `/solid` only (EntitySelector, AreaPicker, demo-mode helpers) |
 
-### `@glasshome/ui` — Utilities
+The package is **ESM-only** and ships modern ESM with type declarations that resolve under both bundler and Node 16+ module resolution. Node `>=20`.
 
-Framework-agnostic helpers exported from the root entrypoint.
+## Entry points
 
-```typescript
-import { cn, createIsMobile } from "@glasshome/ui";
+### `@glasshome/ui` — utilities and surface recipes
 
-// Merge Tailwind classes with conflict resolution
-const cls = cn("px-4 py-2", condition && "bg-primary text-white");
+Framework-agnostic root: class-string recipes for the sanctioned glass surfaces, safe to import from server code (e.g. Astro frontmatter) where Solid components cannot run.
 
-// Reactive mobile breakpoint signal (SolidJS)
-const isMobile = createIsMobile();
+```typescript
+import { cn, buttonVariants, CARD_SURFACE, ALERT_TONES, OVERLAY_SURFACE } from "@glasshome/ui";
+
+const cls = cn("px-4 py-2", condition && "text-white");
+const btn = buttonVariants({ variant: "outline", size: "sm" });
 ```
 
-### `@glasshome/ui/solid` — Components
+### `@glasshome/ui/solid` — components
 
-All 56 Kobalte-based components are exported from a single subpath.
+All components are exported from a single subpath.
 
 ```tsx
 import { Button, Card, CardHeader, CardTitle, CardContent, Badge } from "@glasshome/ui/solid";
@@ -42,7 +48,7 @@ function DeviceCard() {
     <Card>
       <CardHeader>
         <CardTitle>Living Room</CardTitle>
-        <Badge>Online</Badge>
+        <Badge tone="var(--success)" dot>Online</Badge>
       </CardHeader>
       <CardContent>
         <Button onClick={() => console.log("toggled")}>Toggle Light</Button>
@@ -52,25 +58,53 @@ function DeviceCard() {
 }
 ```
 
-Available components include:
+Component families: `Accordion` · `Alert` · `AlertDialog` · `AreaPicker` · `AspectRatio` · `Avatar` · `Badge` · `BottomSheet` · `Breadcrumb` · `Button` · `ButtonGroup` · `Calendar` · `Card` · `Carousel` · `Charts (AreaChart, BarList)` · `Checkbox` · `Collapsible` · `ColorSlider` · `ColorWheel` · `Command` · `ContextMenu` · `CopyButton` · `CountPill` · `DataTable` · `Dialog` · `Dock` · `DropdownMenu` · `Empty` · `EntitySelector` · `Field` · `Form` · `HoverCard` · `Input` · `InputGroup` · `InputOTP` · `Item` · `Kbd` · `Label` · `Logo` · `Menubar` · `NavigationMenu` · `NumberField` · `Overlay` · `PageHeader` · `Pagination` · `Popover` · `Progress` · `RadioGroup` · `Resizable` · `ResponsiveDialog` · `SchemaForm` · `ScopeIndicator` · `ScrollArea` · `SectionCard` · `Select` · `Separator` · `SettingsRow` · `Sheet` · `Sidebar` · `Skeleton` · `Slider` · `SlidingIndicator` · `Sonner (toast)` · `Spinner` · `Switch` · `Table` · `Tabs` · `Textarea` · `TierBadge` · `Toggle` · `ToggleGroup` · `Tooltip` · `WidgetCard` · `WidgetIdentity` · `WidgetTrustBadge`
 
-`Accordion` · `Alert` · `AlertDialog` · `AspectRatio` · `Avatar` · `Badge` · `Breadcrumb` · `Button` · `ButtonGroup` · `Calendar` · `Card` · `Carousel` · `Checkbox` · `Collapsible` · `Command` · `ContextMenu` · `CopyButton` · `Dialog` · `Dock` · `Drawer` · `DropdownMenu` · `Empty` · `Field` · `Form` · `GeometricBackground` · `GlassEffect` · `HoverCard` · `Input` · `InputGroup` · `InputOTP` · `Item` · `Kbd` · `Label` · `Menubar` · `NavigationMenu` · `Pagination` · `Popover` · `Progress` · `RadioGroup` · `ResizablePanel` · `ResponsiveDialog` · `ScrollArea` · `Select` · `Separator` · `Sheet` · `Skeleton` · `Slider` · `Sonner (toast)` · `Spinner` · `Switch` · `Table` · `Tabs` · `Textarea` · `Toggle` · `ToggleGroup` · `Tooltip`
+`Badge` is glass-only: `tone` takes any CSS color (`<Badge tone="var(--success)" dot>`); there are no solid variant badges.
 
-### `@glasshome/ui/styles` — Tailwind v4 CSS
+### `@glasshome/ui/tokens` — design tokens as data
+
+Framework-free theme model: presets, oklch parsing/derivation, and oklch→hex conversion (gamut-mapped, for renderers that cannot parse oklch). Safe in Node scripts, servers, and build tooling.
+
+```typescript
+import { THEME_PRESETS, DEFAULT_THEME_ID, resolveThemeColors, oklchToHex } from "@glasshome/ui/tokens";
+```
 
-Import the shared CSS preset in your app's stylesheet:
+### `@glasshome/ui/astro/*` — zero-JS server components
+
+Astro components rendering the same surfaces with no client JS:
+
+```astro
+---
+import Badge from "@glasshome/ui/astro/Badge.astro";
+import Button from "@glasshome/ui/astro/Button.astro";
+import Card from "@glasshome/ui/astro/Card.astro";
+import Alert from "@glasshome/ui/astro/Alert.astro";
+---
+```
+
+Do not import `@glasshome/ui/solid` in server-run `.astro` files; use these or the root recipes instead.
+
+### `@glasshome/ui/styles` — Tailwind v4 CSS
 
 ```css
 @import "@glasshome/ui/styles";
 ```
 
-This provides the GlassHome design tokens (colors, radii, animations) as a Tailwind v4 theme layer.
+Provides the glass material, design tokens (colors, radii, animations), and the Tailwind v4 theme layer. `@glasshome/ui/styles/theme` exposes the token palette alone.
 
-## Peer Dependencies
+## Development
 
-| Package | Required | Notes |
-| ---------- | -------- | ---------------------------------------- |
-| `solid-js` | Yes | SolidJS reactive primitives and JSX runtime |
+```bash
+bun install
+bun run dev:gallery   # live component gallery on :5199, hot-reloads against src
+bun run test          # vitest unit + render smoke tests
+bun run lint          # biome
+bun run check:tokens  # theme.css <-> tokens/presets.ts sync guard
+bun run check:types   # typecheck src + tests
+bun run build         # dist ESM + declarations
+bun run check:publish # publint + arethetypeswrong
+```
 
 ## License
 

package/dist/index.d.ts

@@ -1,3 +1,10 @@
-export { buttonVariants } from "./lib/button-variants";
-export { createIsMobile } from "./lib/use-is-mobile";
-export { cn } from "./lib/utils";
+export { ALERT_CLASS, ALERT_CONTENT_CLASS, ALERT_DESCRIPTION_CLASS, ALERT_ICON_BG_CLASS, ALERT_ICON_CLASS, ALERT_ICON_PATHS, ALERT_TITLE_CLASS, ALERT_TONES, type AlertTone, type AlertToneStyle, alertBorder, alertFill, alertIconBgStyle, alertIconFill, } from "./lib/alert-tones.js";
+export { BUTTON_DEFAULT_CLASS, BUTTON_OUTLINE_CLASS, buttonVariants, ICON_BUTTON_CLASS, } from "./lib/button-variants.js";
+export { CARD_BLUR, CARD_SURFACE, CARD_SURFACE_BASE, CARD_SURFACE_OPAQUE, TRACK_SURFACE, } from "./lib/card-classes.js";
+export { glassToneText, toneTextMix } from "./lib/glass-tone.js";
+export { INPUT_CLASS, INPUT_SURFACE } from "./lib/input-classes.js";
+export { 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 "./lib/logo-lockup.js";
+export { OVERLAY_SURFACE, SCRIM_CLASS } from "./lib/overlay-classes.js";
+export { SECTION_INNER_RADIUS, SECTION_OUTER_RADIUS, SECTION_PADDING, SECTION_ROW_CLASS, } from "./lib/section-tokens.js";
+export { createIsMobile } from "./lib/use-is-mobile.js";
+export { cn } from "./lib/utils.js";

package/dist/index.js

@@ -1,13 +1,13 @@
-import { n as e, t } from "./utils-JJqwPy_d.js";
-import { createSignal as n, onCleanup as r, onMount as i } from "solid-js";
+import { A as e, B as t, C as n, F as r, G as i, H as a, I as o, J as s, K as c, L as l, M as u, P as d, R as f, U as p, V as m, W as h, X as g, Y as _, Z as v, _ as y, a as b, b as x, c as S, d as C, f as w, g as T, h as E, i as D, j as O, l as k, m as A, n as j, o as M, p as N, q as P, r as F, s as I, t as L, u as R, v as z, x as B, y as V } from "./utils-gbdcvo14.js";
+import { createSignal as H, onCleanup as U, onMount as W } from "solid-js";
 //#region src/lib/use-is-mobile.ts
-var a = 768;
-function o() {
-	let [e, t] = n(void 0);
-	return i(() => {
-		let e = window.matchMedia(`(max-width: ${a - 1}px)`), n = () => t(window.innerWidth < a);
-		e.addEventListener("change", n), t(window.innerWidth < a), r(() => e.removeEventListener("change", n));
+var G = 768;
+function K() {
+	let [e, t] = H(void 0);
+	return W(() => {
+		let e = window.matchMedia(`(max-width: ${G - 1}px)`), n = () => t(window.innerWidth < G);
+		e.addEventListener("change", n), t(window.innerWidth < G), U(() => e.removeEventListener("change", n));
 	}), e;
 }
 //#endregion
-export { e as buttonVariants, t as cn, o as createIsMobile };
+export { t as ALERT_CLASS, m as ALERT_CONTENT_CLASS, a as ALERT_DESCRIPTION_CLASS, p as ALERT_ICON_BG_CLASS, h as ALERT_ICON_CLASS, i as ALERT_ICON_PATHS, c as ALERT_TITLE_CLASS, P as ALERT_TONES, r as BUTTON_DEFAULT_CLASS, o as BUTTON_OUTLINE_CLASS, n as CARD_BLUR, e as CARD_SURFACE, O as CARD_SURFACE_BASE, u as CARD_SURFACE_OPAQUE, l as ICON_BUTTON_CLASS, z as INPUT_CLASS, V as INPUT_SURFACE, S as LOGO_DEFAULT_SIZE, k as LOGO_DEFAULT_SRC, R as LOGO_DEFAULT_SUB, C as LOGO_MARK_CLASS, w as LOGO_MARK_PX, N as LOGO_NAME_CLASS, A as LOGO_ROOT_CLASS, E as LOGO_SIZES, T as LOGO_STACK_CLASS, y as LOGO_SUB_CLASS, M as OVERLAY_SURFACE, I as SCRIM_CLASS, j as SECTION_INNER_RADIUS, F as SECTION_OUTER_RADIUS, D as SECTION_PADDING, b as SECTION_ROW_CLASS, d as TRACK_SURFACE, s as alertBorder, _ as alertFill, g as alertIconBgStyle, v as alertIconFill, f as buttonVariants, L as cn, K as createIsMobile, x as glassToneText, B as toneTextMix };

package/dist/lib/alert-tones.d.ts

@@ -0,0 +1,18 @@
+export type AlertTone = "info" | "warning" | "success" | "destructive";
+export type AlertToneStyle = {
+    color: string;
+    icon: string;
+    text: string;
+};
+export declare const ALERT_TONES: Record<AlertTone, AlertToneStyle>;
+export declare const ALERT_ICON_PATHS: Record<AlertTone, string>;
+export declare const alertBorder: (c: string) => string;
+export declare const alertFill: (c: string) => string;
+export declare const alertIconFill: (c: string) => string;
+export declare const ALERT_CLASS = "relative overflow-hidden flex items-start gap-3 rounded-lg border p-3 backdrop-blur-sm";
+export declare const ALERT_ICON_CLASS = "flex size-8 shrink-0 items-center justify-center rounded-md [&>svg]:size-[18px]";
+export declare const ALERT_ICON_BG_CLASS = "pointer-events-none absolute -right-3 -bottom-4 [&>svg]:size-28 [&>svg]:[stroke-width:2.5px]";
+export declare function alertIconBgStyle(color: string): Record<string, string>;
+export declare const ALERT_CONTENT_CLASS = "relative z-10 min-w-0 flex-1";
+export declare const ALERT_TITLE_CLASS = "font-semibold text-base leading-snug";
+export declare const ALERT_DESCRIPTION_CLASS = "text-foreground/80 text-sm leading-snug [&:not(:first-child)]:mt-0.5";

package/dist/lib/badge-tone.d.ts

@@ -0,0 +1,2 @@
+export declare const BADGE_DEFAULT_TONE = "var(--primary)";
+export declare 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/dist/lib/button-variants.d.ts

@@ -1,22 +1,11 @@
-/**
- * Button class recipe. Pure (only `cva`, no Solid/Kobalte), so it can be
- * imported server-side and from framework-agnostic entry points — Astro
- * frontmatter pulls this to build class strings without hydrating a component.
- * The Solid `<Button>` and the hub's marketing pill tokens share this one recipe.
- *
- * Buttons are pills: `rounded-full` is the base shape everywhere. `size: none`
- * is sizeless (color + shape only) for callers that supply their own height and
- * padding.
- */
 export declare const buttonVariants: import("cva").CVAComponent<Omit<{
     base: string;
     variants: {
         variant: {
             default: string;
-            gradient: string;
             destructive: string;
-            outline: string;
             secondary: string;
+            outline: string;
             ghost: string;
             link: string;
         };
@@ -36,10 +25,9 @@ export declare const buttonVariants: import("cva").CVAComponent<Omit<{
     variants: {
         variant: {
             default: string;
-            gradient: string;
             destructive: string;
-            outline: string;
             secondary: string;
+            outline: string;
             ghost: string;
             link: string;
         };
@@ -58,10 +46,9 @@ export declare const buttonVariants: import("cva").CVAComponent<Omit<{
 }, {
     variant: {
         default: string;
-        gradient: string;
         destructive: string;
-        outline: string;
         secondary: string;
+        outline: string;
         ghost: string;
         link: string;
     };
@@ -73,3 +60,6 @@ export declare const buttonVariants: import("cva").CVAComponent<Omit<{
         none: string;
     };
 }>;
+export declare const BUTTON_DEFAULT_CLASS: string;
+export declare const BUTTON_OUTLINE_CLASS: string;
+export declare 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/dist/lib/card-classes.d.ts

@@ -0,0 +1,19 @@
+export declare const CARD_SURFACE_BASE = "glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0] [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)]";
+export declare const CARD_BLUR = "backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.8]";
+export declare const CARD_SURFACE = "glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0] [--glass-base:color-mix(in_srgb,var(--card)_60%,transparent)] backdrop-blur-[var(--glass-blur,24px)] backdrop-saturate-[1.8]";
+export declare const CARD_SURFACE_OPAQUE = "glass [--glass-wash:20%] [--glass-rim:0.3] [--glass-lift:0.45] [--glass-shade:0.05] dark:[--glass-shade:0]";
+export declare const TRACK_SURFACE = "border border-border/50 bg-card/40 backdrop-blur-sm";
+export declare const CARD_PADDING: {
+    readonly slots: "flex flex-col gap-3 py-3 md:gap-4 md:py-4";
+    readonly md: "p-4";
+    readonly sm: "p-3";
+    readonly none: "";
+};
+export type CardPadding = keyof typeof CARD_PADDING;
+export declare const CARD_INTERACTIVE = "cursor-pointer transition-colors duration-200 hover:border-border hover:bg-foreground/[0.03] focus-within:border-border";
+export declare 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 declare const CARD_TITLE_CLASS = "font-semibold leading-none";
+export declare const CARD_DESCRIPTION_CLASS = "text-muted-foreground text-sm";
+export declare const CARD_ACTION_CLASS = "col-start-2 row-span-2 row-start-1 self-start justify-self-end";
+export declare const CARD_CONTENT_CLASS = "px-3 md:px-4";
+export declare const CARD_FOOTER_CLASS = "flex items-center px-3 md:px-4 [.border-t]:pt-6";

package/dist/lib/glass-tone.d.ts

@@ -0,0 +1,2 @@
+export declare function toneTextMix(color: string): number;
+export declare function glassToneText(color: string): string;

package/dist/lib/input-classes.d.ts

@@ -0,0 +1,2 @@
+export declare const INPUT_SURFACE = "glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04]";
+export declare const INPUT_CLASS = "flex h-9 w-full min-w-0 rounded-md glass glass-sink [--glass-base:var(--input)] [--glass-light:0.04] 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/dist/lib/logo-lockup.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 declare const LOGO_DEFAULT_SRC = "/assets/glasshome_logo.png";
+export declare const LOGO_DEFAULT_SUB = "Dash";
+export declare const LOGO_DEFAULT_SIZE: LogoSize;
+/** Rendered pixel size of the mark per size, for width/height attrs (CLS). */
+export declare const LOGO_MARK_PX: Record<LogoSize, number>;
+export declare const LOGO_SIZES: Record<LogoSize, {
+    mark: string;
+    name: string;
+    sub: string;
+    gap: string;
+}>;
+/**
+ * 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 declare const LOGO_ROOT_CLASS = "inline-flex items-end";
+/** The two lines are pinned by an explicit gap, never by line-height slack. */
+export declare 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 declare const LOGO_MARK_CLASS = "shrink-0";
+export declare const LOGO_NAME_CLASS = "whitespace-nowrap font-bold leading-none tracking-tight";
+export declare const LOGO_SUB_CLASS = "font-bold text-primary uppercase leading-none tracking-[0.18em]";

package/dist/lib/overlay-classes.d.ts

@@ -0,0 +1,2 @@
+export declare const OVERLAY_SURFACE = "glass [--glass-base:var(--popover)] [--glass-rim:0.3] [--glass-lift:0.55]";
+export declare const SCRIM_CLASS = "bg-background/70 backdrop-blur-sm";

package/dist/lib/section-tokens.d.ts

@@ -0,0 +1,4 @@
+export declare const SECTION_OUTER_RADIUS = "rounded-[var(--radius)]";
+export declare const SECTION_INNER_RADIUS = "rounded-[max(0px,calc(var(--radius)-0.75rem))]";
+export declare const SECTION_PADDING = "p-3";
+export declare const SECTION_ROW_CLASS = "rounded-[max(0px,calc(var(--radius)-0.75rem))] border border-border/60 bg-card/60 p-3";

package/dist/lib/tier-badge.d.ts

@@ -0,0 +1,13 @@
+export declare 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 declare function tierBadgeStyle(hi: string, lo: string, text: string, sweep?: TierSweep): Record<string, string>;

package/dist/solid/alert-dialog.d.ts

@@ -10,8 +10,6 @@ declare const AlertDialog: typeof import("@kobalte/core/alert-dialog").Root & {
     Trigger: typeof import("@kobalte/core/alert-dialog").Trigger;
 };
 declare const AlertDialogTrigger: Component<ComponentProps<typeof AlertDialogPrimitive.Trigger>>;
-declare const AlertDialogPortal: typeof import("@kobalte/core/alert-dialog").Portal;
-declare const AlertDialogOverlay: Component<ComponentProps<typeof AlertDialogPrimitive.Overlay>>;
 declare const AlertDialogContent: Component<ComponentProps<typeof AlertDialogPrimitive.Content>>;
 declare const AlertDialogHeader: Component<ComponentProps<"div">>;
 declare const AlertDialogFooter: Component<ComponentProps<"div">>;
@@ -19,4 +17,4 @@ declare const AlertDialogTitle: Component<ComponentProps<typeof AlertDialogPrimi
 declare const AlertDialogDescription: Component<ComponentProps<typeof AlertDialogPrimitive.Description>>;
 declare const AlertDialogAction: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton>>;
 declare const AlertDialogCancel: Component<ComponentProps<typeof AlertDialogPrimitive.CloseButton>>;
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, };

package/dist/solid/alert.d.ts

@@ -1,22 +1,13 @@
 import { type Component, type ComponentProps, type JSX } from "solid-js";
-/**
- * Tone-driven alert (the design formerly known as hub's SectionAlert). One
- * component, four tones, both themes, all color from theme vars via color-mix.
- * Text mixes in oklab (not oklch) so a hued tone desaturates toward neutral
- * with its hue intact instead of swinging toward yellow.
- */
-export type AlertTone = "info" | "warning" | "success" | "destructive";
+import { type AlertTone } from "../lib/alert-tones.js";
+export type { AlertTone };
 type AlertProps = ComponentProps<"div"> & {
     tone?: AlertTone;
-    /** Override the default per-tone icon with any JSX (e.g. a lucide-solid icon). */
     icon?: JSX.Element;
-    /** Bold heading line. */
     title?: JSX.Element;
-    /** Trailing element pinned right (e.g. a Button). */
     action?: JSX.Element;
 };
 declare const Alert: Component<AlertProps>;
-/** Back-compat sub-parts for the older compound usage (Alert > AlertTitle/Description). */
 declare const AlertTitle: Component<ComponentProps<"div">>;
 declare const AlertDescription: Component<ComponentProps<"div">>;
 export { Alert, AlertDescription, AlertTitle };

package/dist/solid/badge.d.ts

@@ -1,57 +1,22 @@
-import { type VariantProps } from "cva";
 import { type Component, type ComponentProps, type ValidComponent } from "solid-js";
-declare const badgeVariants: import("cva").CVAComponent<Omit<{
-    base: string;
-    variants: {
-        variant: {
-            default: string;
-            secondary: string;
-            destructive: string;
-            outline: string;
-        };
-    };
-    defaultVariants: {
-        variant: "default";
-    };
-}, "defaultVariants"> & {
-    variants: {
-        variant: {
-            default: string;
-            secondary: string;
-            destructive: string;
-            outline: string;
-        };
-    };
-    defaultVariants: Omit<{}, "variant"> & {
-        variant: "default";
-    };
-}, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
-}>;
-type BadgeProps = ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
-    component?: ValidComponent;
-    /**
-     * Glass tone chip: pass any CSS color (a semantic token like var(--success)
-     * or an arbitrary categorical hue) and the badge renders as a frosted tinted
-     * pill, both themes, no dark: overrides. Overrides `variant` when set.
-     */
+type BadgeProps = ComponentProps<"span"> & {
+    as?: ValidComponent;
+    /** Any CSS color (semantic token or arbitrary hue). Defaults to var(--primary). */
     tone?: string;
-    /** With `tone`: render a lit status dot before the label. */
-    dot?: boolean;
 };
 declare const Badge: Component<BadgeProps>;
 type TierBadgeProps = ComponentProps<"span"> & {
-    /** Gradient high stop (both ends of the diagonal sweep). */
+    /** Gradient high stop (the near end of the diagonal sweep, and by default
+     *  the far end too). */
     hi: string;
-    /** Gradient low stop (the mid dip). */
+    /** 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;
 };
 /**
  * Metallic tier chip (PRO / EARLY BIRD / CREATOR): a brushed-metal pill with a
@@ -59,4 +24,4 @@ type TierBadgeProps = ComponentProps<"span"> & {
  * One family; only the hi/lo/text triplet changes per tier.
  */
 declare const TierBadge: Component<TierBadgeProps>;
-export { Badge, badgeVariants, TierBadge };
+export { Badge, TierBadge };

package/dist/solid/bottom-sheet/bottom-sheet.d.ts

@@ -1,5 +1,5 @@
 import { type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
-import { type InitialFocus } from "./focus-trap";
+import { type InitialFocus } from "./focus-trap.js";
 interface BottomSheetRootProps {
     open?: boolean;
     defaultOpen?: boolean;

package/dist/solid/bottom-sheet/constants.d.ts

@@ -1,6 +1,5 @@
 export declare const EASE = "cubic-bezier(0.32, 0.72, 0, 1)";
 export declare const TRANSITION_MS = 500;
-export declare const TRANSITION_CSS = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1), opacity 500ms cubic-bezier(0.32, 0.72, 0, 1)";
 export declare const DEAD_ZONE_PX = 6;
 export declare const CLOSE_DISTANCE_RATIO = 0.4;
 export declare const CLOSE_VELOCITY_PX_PER_MS = 0.5;

package/dist/solid/bottom-sheet/drag-controller.d.ts

@@ -1,4 +1,4 @@
-import type { SheetState } from "./state-machine";
+import type { SheetState } from "./state-machine.js";
 interface DragHandle {
     destroy: () => void;
 }

package/dist/solid/bottom-sheet/index.d.ts

@@ -1,2 +1 @@
-export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, } from "./bottom-sheet";
-export type { SheetState } from "./state-machine";
+export { BottomSheet, BottomSheetBody, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetOverlay, BottomSheetPortal, BottomSheetTitle, BottomSheetTrigger, } from "./bottom-sheet.js";

package/dist/solid/breadcrumb.d.ts

@@ -3,7 +3,7 @@ declare const Breadcrumb: Component<ComponentProps<"nav">>;
 declare const BreadcrumbList: Component<ComponentProps<"ol">>;
 declare const BreadcrumbItem: Component<ComponentProps<"li">>;
 declare const BreadcrumbLink: Component<ComponentProps<"a"> & {
-    component?: ValidComponent;
+    as?: ValidComponent;
 }>;
 declare const BreadcrumbPage: Component<ComponentProps<"span">>;
 declare const BreadcrumbSeparator: ParentComponent<ComponentProps<"li">>;

package/dist/solid/button-group.d.ts

@@ -1,6 +1,6 @@
 import { type VariantProps } from "cva";
 import { type Component, type ComponentProps, type ValidComponent } from "solid-js";
-import { Separator } from "./separator";
+import { Separator } from "./separator.js";
 declare const buttonGroupVariants: import("cva").CVAComponent<Omit<{
     base: string;
     variants: {
@@ -30,7 +30,7 @@ declare const buttonGroupVariants: import("cva").CVAComponent<Omit<{
 }>;
 declare const ButtonGroup: Component<ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>>;
 declare const ButtonGroupText: Component<ComponentProps<"div"> & {
-    component?: ValidComponent;
+    as?: ValidComponent;
 }>;
 declare const ButtonGroupSeparator: Component<ComponentProps<typeof Separator>>;
 export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/solid/button.d.ts

@@ -1,7 +1,7 @@
 import { Button as KobalteButton } from "@kobalte/core/button";
 import type { VariantProps } from "cva";
 import { type ComponentProps } from "solid-js";
-import { buttonVariants } from "../lib/button-variants";
+import { buttonVariants } from "../lib/button-variants.js";
 type ButtonProps = ComponentProps<typeof KobalteButton> & VariantProps<typeof buttonVariants>;
 declare function Button(props: ButtonProps): import("solid-js").JSX.Element;
 export { Button, buttonVariants };

package/dist/solid/card.d.ts

@@ -1,5 +1,13 @@
-import { type Component, type ComponentProps } from "solid-js";
-declare const Card: Component<ComponentProps<"div">>;
+import { type Component, type ComponentProps, type ValidComponent } from "solid-js";
+import { type CardPadding } from "../lib/card-classes.js";
+type CardProps = ComponentProps<"div"> & {
+    interactive?: boolean;
+    opaque?: boolean;
+    padding?: CardPadding;
+    as?: ValidComponent;
+    href?: string;
+};
+declare const Card: Component<CardProps>;
 declare const CardHeader: Component<ComponentProps<"div">>;
 declare const CardTitle: Component<ComponentProps<"div">>;
 declare const CardDescription: Component<ComponentProps<"div">>;

package/dist/solid/carousel.d.ts

@@ -1,6 +1,6 @@
 import { type EmblaCarouselType, type EmblaOptionsType, type EmblaPluginType } from "embla-carousel";
 import { type Component, type ComponentProps, type ParentComponent } from "solid-js";
-import { Button } from "./button";
+import { Button } from "./button.js";
 type CarouselApi = EmblaCarouselType;
 declare const Carousel: ParentComponent<ComponentProps<"div"> & {
     opts?: EmblaOptionsType;

package/dist/solid/charts.d.ts

@@ -0,0 +1,45 @@
+export declare function formatCompact(n: number): string;
+export declare function formatBytes(bytes: number): string;
+/**
+ * Filled area + line chart for a daily series. `data` is oldest-first
+ * [{day,count}]. Renders a scaling SVG; the caller sizes the container.
+ */
+export declare function AreaChart(props: {
+    data: {
+        day: string;
+        count: number;
+    }[];
+    class?: string;
+    height?: number;
+    /** Tooltip value formatter (e.g. formatBytes for a size series). */
+    format?: (n: number) => string;
+}): import("solid-js").JSX.Element;
+/**
+ * Horizontal bar list: one row per item, bar width proportional to `value`.
+ * `format` renders the trailing value label (defaults to compact number).
+ */
+export declare function BarList(props: {
+    items: {
+        label: string;
+        value: number;
+        sublabel?: string;
+        href?: string;
+    }[];
+    format?: (value: number) => string;
+    empty?: string;
+}): import("solid-js").JSX.Element;
+/** Segmented control for the chart time window — the shipped Tabs (sliding
+ * `.glass` primary indicator). Values are numeric days; Tabs speaks strings, so
+ * map at the edge. */
+export declare function RangeToggle(props: {
+    value: number;
+    onChange: (days: number) => void;
+}): import("solid-js").JSX.Element;
+/** Segmented proportion bar (e.g. staleness fresh/aging/stale). */
+export declare function StackedBar(props: {
+    segments: {
+        label: string;
+        value: number;
+        class: string;
+    }[];
+}): import("solid-js").JSX.Element;

package/dist/solid/count-pill.d.ts

@@ -0,0 +1,10 @@
+import type { JSX } from "solid-js";
+/**
+ * Small neutral count chip (list size, item count) sitting next to a title.
+ * The one source for `rounded-full bg-foreground/10 … tabular-nums`, previously
+ * hand-inlined in SectionCard, PageHeader, and widget rows.
+ */
+export declare function CountPill(props: {
+    children: JSX.Element;
+    class?: string;
+}): JSX.Element;