@glasshome/ui 1.4.0 → 1.5.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/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/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/{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.5.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

@@ -233,7 +233,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 */