@glasshome/ui 1.4.0 → 1.6.0

package/dist/solid/media-copy.d.ts

@@ -0,0 +1,4 @@
+import { MediaStoreError } from "./media-store.js";
+export declare function toMediaStoreError(cause: unknown): MediaStoreError;
+export declare function mediaStoreErrorCopy(error: MediaStoreError): string;
+export declare function mediaIndexErrorCopy(error: MediaStoreError): string;

package/dist/solid/media-store.d.ts

@@ -0,0 +1,55 @@
+export type StoredMedia = {
+    id: string;
+    mimeType: string;
+    width?: number;
+    height?: number;
+    size: number;
+    /** Server-computed count of live widget configs referencing this id. */
+    usedBy: number;
+};
+export type MediaQuotaUsage = {
+    bytes: number;
+    limitBytes: number;
+    files: number;
+    limitFiles: number;
+};
+export type MediaStoreErrorKind = "file_too_large" | "image_too_large" | "not_an_image" | "quota_bytes_exceeded" | "quota_files_exceeded" | "upload_rate_exceeded" | "server_storage_full" | "no_active_household" | "upload_failed";
+export declare class MediaStoreError extends Error {
+    readonly kind: MediaStoreErrorKind;
+    readonly usage?: MediaQuotaUsage;
+    constructor(kind: MediaStoreErrorKind, usage?: MediaQuotaUsage);
+}
+/** One gallery open, one query: the server counts usage in the same scan. */
+export type MediaIndex = {
+    media: StoredMedia[];
+    usage: MediaQuotaUsage;
+};
+/** "thumb" is a server-side derivative, longest edge ~400px, for grids. */
+export type MediaVariant = "original" | "thumb";
+export interface MediaStore {
+    index(): Promise<MediaIndex>;
+    upload(file: File): Promise<StoredMedia>;
+    remove(id: string): Promise<void>;
+    url(id: string, variant?: MediaVariant): string;
+}
+export declare const MediaStoreContext: import("solid-js").Context<MediaStore | undefined>;
+/** Host apps call this once at startup; MediaStoreContext overrides it per-tree. */
+export declare function provideMediaStore(store: MediaStore): void;
+export declare function useMediaStore(): MediaStore | undefined;
+/** One grid page. The picker and the library both slice by this, so neither can
+ *  mount a whole 500-file library at once. */
+export declare const MEDIA_PAGE_SIZE = 24;
+/** A row whose mime is missing or not a string is not an image; a throw here would
+ *  take the surrounding gallery down with it. */
+export declare function isMediaImage(item: StoredMedia): boolean;
+/** Unused first: someone browsing stored media is looking for what is safe to delete. */
+export declare function sortMediaForClearing(media: StoredMedia[]): StoredMedia[];
+export interface BrokenMedia {
+    isBroken: (item: StoredMedia) => boolean;
+    markBroken: (item: StoredMedia) => void;
+}
+/** Keyed by the url that failed, so a re-uploaded id (new url) starts unbroken again. */
+export declare function createBrokenMedia(thumbUrl: (id: string) => string): BrokenMedia;
+export declare function mediaUrl(id: string | null | undefined): string | undefined;
+/** Reads better than mediaUrl in an image widget's source. */
+export declare const imageUrl: typeof mediaUrl;

package/dist/solid/media-tile.d.ts

@@ -0,0 +1,15 @@
+import type { StoredMedia } from "./media-store.js";
+export interface MediaTileProps {
+    item: StoredMedia;
+    thumbUrl: string;
+    /** Describes what the click does here: the picker chooses, a library opens a preview. */
+    label: string;
+    broken: boolean;
+    onSelect: () => void;
+    onBroken: () => void;
+    onDelete?: () => void;
+    markUnused?: boolean;
+    selected?: boolean;
+    class?: string;
+}
+export declare function MediaTile(props: MediaTileProps): import("solid-js").JSX.Element;

package/dist/solid/option-card.d.ts

@@ -0,0 +1,17 @@
+import { type JSX } from "solid-js";
+export declare function OptionCardGroup(props: {
+    value: string | null;
+    onChange: (value: string) => void;
+    "aria-label"?: string;
+    class?: string;
+    children: JSX.Element;
+}): JSX.Element;
+export declare function OptionCard(props: {
+    value: string;
+    title: string;
+    description?: string;
+    icon?: string;
+    disabled?: boolean;
+    class?: string;
+    children?: JSX.Element;
+}): JSX.Element;

package/dist/solid/password-input.d.ts

@@ -0,0 +1,9 @@
+import { type Component, type ComponentProps, type JSX } from "solid-js";
+import { Input } from "./input.js";
+declare const PasswordInput: Component<Omit<ComponentProps<typeof Input>, "type"> & {
+    /** Rendered left-aligned inside the field (e.g. a lock glyph). */
+    leading?: JSX.Element;
+    showLabel?: string;
+    hideLabel?: string;
+}>;
+export { PasswordInput };

package/dist/solid/popover.d.ts

@@ -11,7 +11,11 @@ declare const Popover: typeof import("@kobalte/core/popover").Root & {
     Trigger: typeof import("@kobalte/core/popover").Trigger;
 };
 declare const PopoverTrigger: Component<ComponentProps<typeof PopoverPrimitive.Trigger>>;
-declare const PopoverContent: Component<ComponentProps<typeof PopoverPrimitive.Content>>;
+type PopoverContentProps = ComponentProps<typeof PopoverPrimitive.Content> & {
+    /** "field" wears the concave input surface, the way SelectContent does. */
+    surface?: "overlay" | "field";
+};
+declare const PopoverContent: Component<PopoverContentProps>;
 declare const PopoverAnchor: Component<ComponentProps<typeof PopoverPrimitive.Anchor>>;
 declare const anchorToTriggerTop: (anchor?: HTMLElement) => {
     x: number;

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

@@ -1,5 +1,7 @@
 import { RadioGroup as RadioGroupPrimitive } from "@kobalte/core/radio-group";
 import { type Component, type ComponentProps } from "solid-js";
 declare const RadioGroup: Component<ComponentProps<typeof RadioGroupPrimitive>>;
-declare const RadioGroupItem: Component<ComponentProps<typeof RadioGroupPrimitive.Item>>;
+declare const RadioGroupItem: Component<ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    showControl?: boolean;
+}>;
 export { RadioGroup, RadioGroupItem };

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

@@ -1,4 +1,6 @@
+import type { VariantProps } from "cva";
 import { type Component, type ComponentProps, type JSX, type ParentComponent } from "solid-js";
+import type { buttonVariants } from "../lib/button-variants.js";
 interface ResponsiveDialogProps {
     children: JSX.Element;
     open?: boolean;
@@ -12,5 +14,7 @@ declare const ResponsiveDialogHeader: Component<ComponentProps<"div">>;
 declare const ResponsiveDialogTitle: Component<ComponentProps<"h2">>;
 declare const ResponsiveDialogDescription: Component<ComponentProps<"p">>;
 declare const ResponsiveDialogFooter: Component<ComponentProps<"div">>;
-declare const ResponsiveDialogClose: ParentComponent<ComponentProps<"button">>;
+/** Defaults to the footer's outline button; an icon-only close passes `ghost`
+ *  so the glyph is not boxed. */
+declare const ResponsiveDialogClose: ParentComponent<ComponentProps<"button"> & VariantProps<typeof buttonVariants>>;
 export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger, };

package/dist/solid/schema-form.d.ts

@@ -22,7 +22,7 @@ export interface ExtendedJSONSchema extends JSONSchema7 {
  * schemas with formTypes it predates). Kept in lockstep with the SDK's field
  * helpers by dash's formType parity test.
  */
-export declare const SCHEMA_FORM_FORM_TYPES: readonly ["icon-picker", "area-picker", "list", "variants"];
+export declare const SCHEMA_FORM_FORM_TYPES: readonly ["icon-picker", "image-picker", "area-picker", "list", "variants"];
 /**
  * New-item defaults from the wire schema: the serialized `default` when the
  * SDK provided one (field.variants always does), else property defaults; for

package/dist/solid/settings-row.d.ts

@@ -36,6 +36,10 @@ export declare function LabeledInput(props: {
 }): JSX.Element;
 export declare function SwitchRow(props: {
     label: string;
+    description?: string;
+    /** Iconify id shown before the label (sensitive-device rows, platform toggles). */
+    icon?: string;
     checked: boolean;
+    disabled?: boolean;
     onChange: (value: boolean) => void;
 }): JSX.Element;

package/dist/solid/step-indicator.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Position inside a multi-step flow: dots for the eye, one spoken line for
+ * screen readers. The dots carry no text of their own, so the sr-only line is
+ * the only place the position is readable.
+ */
+export declare function StepIndicator(props: {
+    count: number;
+    index: number;
+    class?: string;
+}): import("solid-js").JSX.Element;

package/dist/solid/switch.d.ts

@@ -1,11 +1,8 @@
-import { type Component } from "solid-js";
-interface SwitchProps {
+import { type Component, type ComponentProps } from "solid-js";
+type SwitchProps = Omit<ComponentProps<"button">, "onChange" | "children"> & {
     checked?: boolean;
     defaultChecked?: boolean;
     onChange?: (checked: boolean) => void;
-    disabled?: boolean;
-    class?: string;
-    name?: string;
-}
+};
 declare const Switch: Component<SwitchProps>;
 export { Switch };

package/dist/{utils-B020EZLJ.js → utils-8e8QCynI.js}

@@ -152,10 +152,14 @@ var m = (e) => typeof e == "boolean" ? `${e}` : e === 0 ? "0" : e, h = [], { com
 	none: ""
 }, T = "cursor-pointer transition-colors duration-200 hover:border-border hover:bg-foreground/[0.03] focus-within:border-border", E = "@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", D = "font-semibold leading-none", O = "text-muted-foreground text-sm", k = "col-start-2 row-span-2 row-start-1 self-start justify-self-end", A = "px-3 md:px-4", j = "flex items-center px-3 md:px-4 [.border-t]:pt-6", ae = "h-full overflow-hidden";
 function oe(e, t = "horizontal") {
-	return e === "slide" ? `flex ${t === "horizontal" ? "-ml-4" : "-mt-4 flex-col"}` : "carousel-stack";
+	if (e === "wipe") return "carousel-stack";
+	let n = t === "vertical";
+	return e === "fade" ? n ? "flex flex-col" : "flex" : `flex ${n ? "-mt-4 flex-col" : "-ml-4"}`;
 }
 function se(e, t = "horizontal") {
-	return e === "wipe" ? "min-w-0 carousel-wipe" : e === "fade" ? "min-w-0" : `min-w-0 shrink-0 grow-0 basis-full ${t === "horizontal" ? "pl-4" : "pt-4"}`;
+	if (e === "wipe") return "min-w-0 carousel-wipe";
+	let n = "min-w-0 shrink-0 grow-0 basis-full";
+	return e === "fade" ? n : `${n} ${t === "horizontal" ? "pl-4" : "pt-4"}`;
 }
 var M = "flex items-center justify-center gap-2";
 function N(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@glasshome/ui",
-	"version": "1.4.0",
+	"version": "1.6.0",
 	"description": "SolidJS component library for GlassHome, built on Kobalte",
 	"type": "module",
 	"homepage": "https://github.com/glasshome/ui#readme",

package/src/lib/carousel-classes.ts

@@ -6,24 +6,35 @@ 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. */
+/**
+ * Only wipe stacks in CSS. Fade keeps embla's standard flex track, which is the
+ * structure its plugin is built for: embla reads each snap from the slide's
+ * offset along the axis, and the plugin then translates every slide back onto
+ * the viewport to cross-fade them. Slides sharing one grid cell share offset 0,
+ * so every snap collapses onto the same point and a pointer drag has no
+ * distance to resolve: it never changes slide. Index-driven navigation
+ * (autoplay, arrows, dots) survives the collapse, which is why wipe still
+ * advances.
+ */
 export function carouselTrack(
 	transition: CarouselTransition,
 	orientation: "horizontal" | "vertical" = "horizontal",
 ) {
-	return transition === "slide"
-		? `flex ${orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col"}`
-		: "carousel-stack";
+	if (transition === "wipe") return "carousel-stack";
+	const vertical = orientation === "vertical";
+	// Fade slides sit on top of each other, so the track carries no gutter.
+	if (transition === "fade") return vertical ? "flex flex-col" : "flex";
+	return `flex ${vertical ? "-mt-4 flex-col" : "-ml-4"}`;
 }
 
 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"}`;
+	const track = "min-w-0 shrink-0 grow-0 basis-full";
+	if (transition === "fade") return track;
+	return `${track} ${orientation === "horizontal" ? "pl-4" : "pt-4"}`;
 }
 
 export const CAROUSEL_DOTS = "flex items-center justify-center gap-2";

package/src/lib/tier-badge.ts

@@ -1,7 +1,7 @@
 /* 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";
+	"inline-flex cursor-default select-none items-center rounded-full px-2 py-0.5 font-black text-[10px] tracking-wide";
 
 /** Optional sweep shaping. Default is the symmetric brushed look (both ends
  *  `hi`, dipping to `lo` at the midpoint). The collectible/license golds are a

package/src/styles/globals.css

@@ -192,28 +192,29 @@
 }
 
 /**
- * Consistent, theme-aware thin scrollbar across browsers. Firefox uses
- * scrollbar-width/color; Chromium/WebKit use the ::-webkit-scrollbar pseudos.
- * Applied by the <ScrollArea> component so every scroll surface reads the same.
+ * Consistent, theme-aware overlay scrollbar across browsers. Firefox uses
+ * scrollbar-width/color; Chromium/WebKit use the ::-webkit-scrollbar pseudos
+ * (no stepper-button pseudo is declared, so none render). Applied by every
+ * scroll surface that isn't a bare page — <ScrollArea>, dialogs, sheets.
  */
 .gh-scroll {
 	scrollbar-width: thin;
-	scrollbar-color: var(--border) transparent;
+	scrollbar-color: color-mix(in srgb, var(--foreground) 22%, transparent) transparent;
 	&::-webkit-scrollbar {
-		width: 10px;
-		height: 10px;
+		width: 8px;
+		height: 8px;
 	}
 	&::-webkit-scrollbar-track {
 		background: transparent;
 	}
 	&::-webkit-scrollbar-thumb {
-		background: var(--border);
+		background: color-mix(in srgb, var(--foreground) 22%, transparent);
 		border-radius: 9999px;
 		border: 2px solid transparent;
 		background-clip: padding-box;
 	}
 	&::-webkit-scrollbar-thumb:hover {
-		background: var(--muted-foreground);
+		background: color-mix(in srgb, var(--foreground) 38%, transparent);
 	}
 }
 
@@ -233,7 +234,7 @@
 	margin-top: 0.125rem;
 }
 
-/* Stacked carousel modes (fade, wipe) put every slide in one grid cell. This is
+/* Carousel `wipe` puts 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. */

package/src/styles/theme.css

@@ -261,10 +261,6 @@
 	label:has(> input:is([type="checkbox"], [type="radio"]):not(:disabled)) {
 		cursor: pointer;
 	}
-	/* Old embedded WebViews (Shelly Wall Display) native-paint appearance:button as a gray box. */
-	button {
-		appearance: none;
-	}
 }
 
 /* Utility classes */