@vezham/react 26.0.0-alpha.5 → 26.0.0-alpha.6

package/dist/lib/pages/settings/index.d.ts

@@ -0,0 +1,17 @@
+import type { ControlCenterConfig } from '../../components/panel/footer/control-center/types';
+import type { SettingsSection } from './navigation';
+export declare const validateSearch: (search: Record<string, unknown>) => {
+    section: SettingsSection;
+};
+export declare const SettingsRoute: ({ controlCenter }: {
+    controlCenter?: ControlCenterConfig;
+}) => import("react").JSX.Element;
+export declare const SettingsPage: ({ onBack, section, onSectionChange, controlCenter }: {
+    onBack?: () => void;
+    section?: SettingsSection;
+    onSectionChange?: (section: SettingsSection) => void;
+    controlCenter?: ControlCenterConfig;
+}) => import("react").JSX.Element;
+export { SettingsNavigationContext } from './navigation';
+export type { SettingsSection } from './navigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/pages/settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oDAAoD,CAAA;AAW7F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AA6BnD,eAAO,MAAM,cAAc,GACzB,QAAQ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAC9B;IAAE,OAAO,EAAE,eAAe,CAAA;CAI3B,CAAA;AAEF,eAAO,MAAM,aAAa,GAAI,mBAE3B;IACD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,gCAcA,CAAA;AA6ED,eAAO,MAAM,YAAY,GAAI,qDAK1B;IACD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAA;IACpD,aAAa,CAAC,EAAE,mBAAmB,CAAA;CACpC,gCA8JA,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAA;AACxD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA"}

package/dist/lib/pages/settings/index.js

@@ -0,0 +1,276 @@
+import { AppIcon } from "../../components/app-icon/index.js";
+import { AppearanceProvider } from "../../components/panel/footer/control-center/appearance.js";
+import { SettingsNavigationContext } from "./navigation.js";
+import { useTileEditor } from "../../components/panel/footer/control-center/editor.js";
+import { PreviewProvider } from "../../components/panel/footer/control-center/preview.js";
+import { TileContent } from "../../components/panel/footer/control-center/control-center.js";
+import { resolveTiles } from "../../components/panel/footer/control-center/configured.js";
+import { useSidebarShortcut, useWorkspaceNavigation } from "../../components/workspace-navigation/index.js";
+import { useUser } from "../../store/users/useUserStore.js";
+import { WidgetPreview, useWidgetTiles } from "../../components/panel/footer/notification-center/widget-tiles.js";
+import { ShortcutButton } from "../../components/shortcut-key/index.js";
+import { SettingsContent } from "./settings-content.js";
+import { TileGallery } from "./tile-gallery.js";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useId, useState } from "react";
+import { Avatar, Button, Drawer, SearchField } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AltArrowLeft, Bell, Settings, Sun, UserRounded } from "@vezham/icons-react";
+//#region src/lib/pages/settings/index.tsx
+var sections = [
+	{
+		title: "General",
+		icon: Settings,
+		keywords: "language"
+	},
+	{
+		title: "Appearance",
+		icon: Sun,
+		keywords: "theme light dark system"
+	},
+	{
+		title: "Notifications",
+		icon: Bell,
+		keywords: "sounds badges"
+	},
+	{
+		title: "Account",
+		icon: UserRounded,
+		keywords: "profile name email"
+	},
+	{
+		title: "Edit Widgets",
+		icon: Settings,
+		keywords: "notification center tiles"
+	},
+	{
+		title: "Edit Controls",
+		icon: Settings,
+		keywords: "control center tiles"
+	}
+];
+var validateSearch = (search) => ({ section: sections.some((section) => section.title === search.section) ? search.section : "General" });
+var SettingsRoute = ({ controlCenter }) => {
+	const navigate = useNavigate();
+	const { section } = validateSearch(useSearch({ strict: false }));
+	return /* @__PURE__ */ jsx(SettingsPage, {
+		section,
+		onSectionChange: (next) => navigate({
+			to: "/settings",
+			search: { section: next }
+		}),
+		controlCenter,
+		onBack: () => navigate({ to: "/" })
+	});
+};
+var categoryFor = (type) => {
+	if (type.includes("appearance") || type.includes("theme")) return "Appearance";
+	if ([
+		"preview-wifi",
+		"preview-bluetooth",
+		"preview-airdrop",
+		"preview-mirroring"
+	].includes(type)) return "Connectivity";
+	if (type === "preview-display") return "Display & Brightness";
+	if (type === "preview-media" || type === "preview-sound") return "Sound & Media";
+	return "General";
+};
+var SettingsGallery = ({ active, controlCenter, onDone }) => {
+	const widgets = useWidgetTiles();
+	const controls = useTileEditor(controlCenter ? resolveTiles(controlCenter, () => void 0) : []);
+	if (active === "Edit Widgets") return /* @__PURE__ */ jsx(TileGallery, {
+		title: "Edit Widgets",
+		kind: "widgets",
+		editor: widgets.editor,
+		tiles: widgets.orderedTiles.map((tile) => ({
+			...tile,
+			shape: tile.size,
+			category: tile.category,
+			preview: /* @__PURE__ */ jsx(WidgetPreview, { tile })
+		})),
+		onDone
+	}, "widgets");
+	return /* @__PURE__ */ jsx(AppearanceProvider, { children: /* @__PURE__ */ jsx(PreviewProvider, {
+		enabled: true,
+		children: /* @__PURE__ */ jsx(TileGallery, {
+			title: "Edit Controls",
+			kind: "controls",
+			editor: controls.editor,
+			tiles: controls.orderedTiles.map((tile) => ({
+				id: tile.id,
+				label: controls.editor.items.find((item) => item.id === tile.id)?.label ?? tile.id,
+				shape: tile.span,
+				category: categoryFor(controlCenter?.tiles.find((item) => item.id === tile.id)?.type ?? ""),
+				preview: /* @__PURE__ */ jsx(TileContent, {
+					entry: tile,
+					context: {},
+					onOpen: () => void 0
+				})
+			})),
+			onDone
+		}, "controls")
+	}) });
+};
+var SettingsPage = ({ onBack, section = "General", onSectionChange, controlCenter }) => {
+	const [localActive, setActive] = useState(section);
+	const active = onSectionChange ? section : localActive;
+	const [query, setQuery] = useState("");
+	const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+	const sidebarId = useId();
+	const { isNavigationCollapsed, toggleNavigation } = useWorkspaceNavigation();
+	const toggleSidebar = () => {
+		if (window.matchMedia("(min-width: 768px)").matches) toggleNavigation();
+		else setIsDrawerOpen((open) => !open);
+	};
+	useSidebarShortcut(toggleSidebar, active !== "Edit Widgets" && active !== "Edit Controls");
+	const { user } = useUser();
+	const visibleSections = sections.filter((section) => `${section.title} ${section.keywords}`.toLowerCase().includes(query.toLowerCase().trim()));
+	const openSection = (section) => {
+		setActive(section);
+		onSectionChange?.(section);
+		setIsDrawerOpen(false);
+	};
+	if (active === "Edit Widgets" || active === "Edit Controls") return /* @__PURE__ */ jsx(SettingsGallery, {
+		active,
+		controlCenter,
+		onDone: () => openSection("General")
+	});
+	const sidebar = /* @__PURE__ */ jsxs("div", {
+		className: "px-4 py-2",
+		children: [
+			onBack && /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: "mb-4 w-full justify-start gap-3 px-3 text-sm",
+				onPress: onBack,
+				children: [/* @__PURE__ */ jsx(AltArrowLeft, { size: 18 }), "Back to app"]
+			}),
+			/* @__PURE__ */ jsx("h1", {
+				className: "mb-4 px-3 text-lg font-semibold",
+				children: "Settings"
+			}),
+			/* @__PURE__ */ jsx(SearchField, {
+				"aria-label": "Search settings",
+				value: query,
+				onChange: setQuery,
+				variant: "secondary",
+				className: "mx-3 mb-4",
+				children: /* @__PURE__ */ jsxs(SearchField.Group, { children: [
+					/* @__PURE__ */ jsx(SearchField.SearchIcon, {}),
+					/* @__PURE__ */ jsx(SearchField.Input, { placeholder: "Search settings" }),
+					/* @__PURE__ */ jsx(SearchField.ClearButton, { "aria-label": "Clear settings search" })
+				] })
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				className: "mb-4 h-auto w-full justify-start gap-3 rounded-lg px-3 py-2 text-left",
+				onPress: () => openSection("Account"),
+				"aria-label": "Account profile",
+				children: [/* @__PURE__ */ jsxs(Avatar, {
+					className: "size-11 shrink-0",
+					children: [/* @__PURE__ */ jsx(Avatar.Image, { src: user?.avatar ?? void 0 }), /* @__PURE__ */ jsx(Avatar.Fallback, { children: user?.firstName?.slice(0, 1) || "U" })]
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "block truncate font-semibold",
+						children: [user?.firstName, user?.lastName].filter(Boolean).join(" ") || "Your account"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-muted block text-xs font-normal",
+						children: "Account settings"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted mb-2 px-3 text-xs font-medium",
+				children: "App settings"
+			}),
+			/* @__PURE__ */ jsxs("nav", {
+				"aria-label": "Settings sections",
+				className: "space-y-1",
+				children: [visibleSections.map(({ title, icon: Icon }) => /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					className: `h-auto min-h-0 w-full justify-start gap-3 rounded-full px-3 py-2 text-sm leading-5 ${active === title ? "bg-surface-secondary text-foreground font-bold" : "text-muted hover:bg-surface-secondary font-normal"}`,
+					"aria-current": active === title ? "page" : void 0,
+					onPress: () => openSection(title),
+					children: [/* @__PURE__ */ jsx(Icon, {
+						size: 18,
+						className: "shrink-0",
+						"aria-hidden": "true"
+					}), title]
+				}, title)), visibleSections.length === 0 && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					className: "text-muted p-2 text-sm",
+					children: "No settings found."
+				})]
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "h-full min-h-0 w-full",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "bg-background flex h-full min-h-0 overflow-hidden",
+			children: [!isNavigationCollapsed && /* @__PURE__ */ jsx("aside", {
+				id: sidebarId,
+				className: "hidden h-full w-56 shrink-0 overflow-y-auto md:ml-24 md:block",
+				children: sidebar
+			}), /* @__PURE__ */ jsx("section", {
+				"aria-label": `${active} settings`,
+				className: "h-full min-w-0 flex-1 overflow-y-auto p-5 md:px-10 md:py-8",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "mx-auto w-full max-w-3xl",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "mb-6 flex items-center gap-3",
+						children: [
+							/* @__PURE__ */ jsx(ShortcutButton, {
+								label: isNavigationCollapsed ? "Show Sidebar" : "Hide Sidebar",
+								shortcut: "⌘ S",
+								"aria-keyshortcuts": "Meta+S",
+								"aria-controls": sidebarId,
+								"aria-expanded": !isNavigationCollapsed,
+								className: "hidden md:inline-flex",
+								onPress: toggleNavigation,
+								children: /* @__PURE__ */ jsx(AppIcon, {
+									icon: "vx:sidebar",
+									size: 18,
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "ghost",
+								size: "sm",
+								isIconOnly: true,
+								"aria-label": "Show Sidebar",
+								"aria-expanded": isDrawerOpen,
+								className: "md:hidden",
+								onPress: () => setIsDrawerOpen(true),
+								children: /* @__PURE__ */ jsx(AppIcon, {
+									icon: "vx:sidebar",
+									size: 18,
+									"aria-hidden": "true"
+								})
+							}),
+							/* @__PURE__ */ jsx("h2", {
+								className: "text-xl font-semibold",
+								children: active
+							})
+						]
+					}), /* @__PURE__ */ jsx(SettingsContent, { active })]
+				})
+			})]
+		}), /* @__PURE__ */ jsx(Drawer.Backdrop, {
+			isOpen: isDrawerOpen,
+			onOpenChange: setIsDrawerOpen,
+			children: /* @__PURE__ */ jsx(Drawer.Content, {
+				placement: "left",
+				children: /* @__PURE__ */ jsxs(Drawer.Dialog, {
+					className: "bg-background w-[min(20rem,calc(100vw-2rem))]",
+					children: [/* @__PURE__ */ jsxs(Drawer.Header, { children: [/* @__PURE__ */ jsx(Drawer.Heading, { children: "Settings" }), /* @__PURE__ */ jsx(Drawer.CloseTrigger, { "aria-label": "Hide Sidebar" })] }), /* @__PURE__ */ jsx(Drawer.Body, {
+						className: "p-0",
+						children: sidebar
+					})]
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { SettingsNavigationContext, SettingsPage, SettingsRoute, validateSearch };

package/dist/lib/pages/settings/navigation.d.ts

@@ -0,0 +1,4 @@
+export type SettingsSection = 'General' | 'Appearance' | 'Notifications' | 'Account' | 'Edit Widgets' | 'Edit Controls';
+export declare const SettingsNavigationContext: import("react").Context<((section: SettingsSection) => void) | null>;
+export declare const useSettingsNavigation: () => ((section: SettingsSection) => void) | null;
+//# sourceMappingURL=navigation.d.ts.map

package/dist/lib/pages/settings/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/navigation.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GACvB,SAAS,GACT,YAAY,GACZ,eAAe,GACf,SAAS,GACT,cAAc,GACd,eAAe,CAAA;AACnB,eAAO,MAAM,yBAAyB,qCACzB,eAAe,KAAK,IAAI,SAC9B,CAAA;AACP,eAAO,MAAM,qBAAqB,mBAFrB,eAAe,KAAK,IAAI,QAE2C,CAAA"}

package/dist/lib/pages/settings/navigation.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from "react";
+//#region src/lib/pages/settings/navigation.tsx
+var SettingsNavigationContext = createContext(null);
+var useSettingsNavigation = () => useContext(SettingsNavigationContext);
+//#endregion
+export { SettingsNavigationContext, useSettingsNavigation };

package/dist/lib/pages/settings/settings-content.d.ts

@@ -0,0 +1,5 @@
+import type { SettingsSection } from './navigation';
+export declare const SettingsContent: ({ active }: {
+    active: SettingsSection;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=settings-content.d.ts.map

package/dist/lib/pages/settings/settings-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-content.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/settings-content.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAoOnD,eAAO,MAAM,eAAe,GAAI,YAAY;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,gCAItE,CAAA"}

package/dist/lib/pages/settings/settings-content.js

@@ -0,0 +1,213 @@
+import { AppearanceProvider, useAppearance } from "../../components/panel/footer/control-center/appearance.js";
+import { useRootAttribute } from "../../components/panel/footer/control-center/document.js";
+import { useUser } from "../../store/users/useUserStore.js";
+import { useState, useSyncExternalStore } from "react";
+import { Button, Input, Label, ListBox, Select, Surface, Switch, TextField } from "@vezham/react-v3";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/pages/settings/settings-content.tsx
+var subscribeNotifications = (onChange) => {
+	window.addEventListener("storage", onChange);
+	window.addEventListener("vx:notification-settings", onChange);
+	return () => {
+		window.removeEventListener("storage", onChange);
+		window.removeEventListener("vx:notification-settings", onChange);
+	};
+};
+var readNotifications = () => localStorage.getItem("demo:notification-settings") ?? "";
+var serverNotifications = () => "";
+var useSettingsPreferences = () => {
+	const { user, updateUser } = useUser();
+	const { value: language, onChange: setLanguage } = useRootAttribute("lang", "en");
+	const { themeMode: mode, setThemeMode: setMode } = useAppearance();
+	const [name, setName] = useState(user?.firstName ?? "");
+	const [lastName, setLastName] = useState(user?.lastName ?? "");
+	const [email, setEmail] = useState(user?.email ?? "");
+	const [saved, setSaved] = useState(false);
+	const snapshot = useSyncExternalStore(subscribeNotifications, readNotifications, serverNotifications);
+	let notifications = {
+		sounds: true,
+		badges: true
+	};
+	try {
+		const value = JSON.parse(snapshot || "null");
+		if (value && typeof value.sounds === "boolean" && typeof value.badges === "boolean") notifications = {
+			sounds: value.sounds,
+			badges: value.badges
+		};
+	} catch {}
+	const setNotifications = (next) => {
+		localStorage.setItem("demo:notification-settings", JSON.stringify(next));
+		window.dispatchEvent(new Event("vx:notification-settings"));
+	};
+	return {
+		updateUser,
+		language,
+		setLanguage,
+		mode,
+		setMode,
+		name,
+		setName,
+		lastName,
+		setLastName,
+		email,
+		setEmail,
+		saved,
+		setSaved,
+		notifications,
+		setNotifications
+	};
+};
+var AccountSettings = ({ updateUser, name, setName, lastName, setLastName, email, setEmail, saved, setSaved }) => /* @__PURE__ */ jsxs("form", {
+	className: "border-border bg-surface space-y-4 rounded-xl border p-5",
+	onSubmit: (event) => {
+		event.preventDefault();
+		updateUser({
+			firstName: name,
+			lastName,
+			email
+		});
+		setSaved(true);
+	},
+	onChange: () => setSaved(false),
+	children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "text-muted text-sm",
+			children: "Profile changes apply to this demo session."
+		}),
+		/* @__PURE__ */ jsxs(TextField, {
+			name: "firstName",
+			value: name,
+			onChange: setName,
+			isRequired: true,
+			children: [/* @__PURE__ */ jsx(Label, { children: "First name" }), /* @__PURE__ */ jsx(Input, { variant: "secondary" })]
+		}),
+		/* @__PURE__ */ jsxs(TextField, {
+			name: "lastName",
+			value: lastName,
+			onChange: setLastName,
+			children: [/* @__PURE__ */ jsx(Label, { children: "Last name" }), /* @__PURE__ */ jsx(Input, { variant: "secondary" })]
+		}),
+		/* @__PURE__ */ jsxs(TextField, {
+			name: "email",
+			type: "email",
+			value: email,
+			onChange: setEmail,
+			isRequired: true,
+			children: [/* @__PURE__ */ jsx(Label, { children: "Email" }), /* @__PURE__ */ jsx(Input, { variant: "secondary" })]
+		}),
+		/* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			children: "Save changes"
+		}),
+		/* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "text-muted text-sm",
+			children: saved ? "Changes saved." : ""
+		})
+	]
+});
+var AppearanceSettings = ({ mode, setMode }) => /* @__PURE__ */ jsxs("div", {
+	className: "border-border bg-surface rounded-xl border p-5",
+	children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "mb-1 text-sm font-medium",
+			children: "Appearance"
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "text-muted mb-5 text-xs",
+			children: "Choose a light, dark, or automatic appearance."
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "grid grid-cols-3 gap-3",
+			children: [
+				"light",
+				"dark",
+				"auto"
+			].map((value) => /* @__PURE__ */ jsxs(Button, {
+				variant: "ghost",
+				"aria-pressed": mode === value,
+				className: `h-auto flex-col gap-2 rounded-lg p-2 ${mode === value ? "ring-accent ring-2" : ""}`,
+				onPress: () => setMode?.(value),
+				children: [/* @__PURE__ */ jsxs("span", {
+					"aria-hidden": "true",
+					className: `border-border relative block h-16 w-full overflow-hidden rounded-md border ${value === "dark" ? "bg-foreground" : "bg-surface-secondary"}`,
+					children: [
+						/* @__PURE__ */ jsx("span", { className: "bg-muted/30 absolute inset-y-0 left-0 w-1/3" }),
+						/* @__PURE__ */ jsx("span", { className: `absolute inset-y-3 right-2 left-[40%] rounded-sm ${value === "dark" ? "bg-background/30" : "bg-surface"}` }),
+						value === "auto" && /* @__PURE__ */ jsx("span", { className: "bg-foreground/70 absolute inset-y-0 right-0 w-1/2" })
+					]
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs capitalize",
+					children: value === "auto" ? "System" : value
+				})]
+			}, value))
+		})
+	]
+});
+var GeneralSettings = ({ language, setLanguage }) => /* @__PURE__ */ jsxs(Surface, {
+	className: "border-border flex flex-wrap items-center justify-between gap-4 rounded-xl border p-4 shadow-none",
+	children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-sm font-medium",
+		children: "Language"
+	}), /* @__PURE__ */ jsx("p", {
+		className: "text-muted mt-1 text-xs",
+		children: "Language for the app interface"
+	})] }), /* @__PURE__ */ jsxs(Select, {
+		"aria-label": "Language",
+		className: "w-40",
+		value: language,
+		onChange: (value) => {
+			if (typeof value === "string") {
+				setLanguage(value);
+				document.documentElement.lang = value;
+			}
+		},
+		variant: "secondary",
+		children: [/* @__PURE__ */ jsxs(Select.Trigger, { children: [/* @__PURE__ */ jsx(Select.Value, {}), /* @__PURE__ */ jsx(Select.Indicator, {})] }), /* @__PURE__ */ jsx(Select.Popover, { children: /* @__PURE__ */ jsx(ListBox, { children: [{
+			id: "en",
+			label: "English"
+		}, {
+			id: "zh",
+			label: "中文"
+		}].map((option) => /* @__PURE__ */ jsxs(ListBox.Item, {
+			id: option.id,
+			textValue: option.label,
+			children: [option.label, /* @__PURE__ */ jsx(ListBox.ItemIndicator, {})]
+		}, option.id)) }) })]
+	})]
+});
+var NotificationsSettings = ({ notifications, setNotifications }) => /* @__PURE__ */ jsxs("div", {
+	className: "space-y-4",
+	children: [/* @__PURE__ */ jsx("p", {
+		className: "text-muted text-sm",
+		children: "Demo preferences are saved on this device. Notification delivery is simulated."
+	}), ["sounds", "badges"].map((key) => /* @__PURE__ */ jsx(Switch, {
+		className: "border-border bg-surface w-full rounded-xl border p-4",
+		isSelected: notifications[key],
+		onChange: (selected) => {
+			setNotifications({
+				...notifications,
+				[key]: selected
+			});
+		},
+		children: /* @__PURE__ */ jsxs(Switch.Content, {
+			className: "flex w-full flex-row-reverse justify-between gap-3 text-sm",
+			children: [/* @__PURE__ */ jsx(Switch.Control, { children: /* @__PURE__ */ jsx(Switch.Thumb, {}) }), key === "sounds" ? "Notification sounds" : "Notification badges"]
+		})
+	}, key))]
+});
+var settingsComponents = {
+	Account: AccountSettings,
+	Appearance: AppearanceSettings,
+	General: GeneralSettings,
+	Notifications: NotificationsSettings
+};
+var SettingsContentView = ({ active }) => {
+	const preferences = useSettingsPreferences();
+	if (active === "Edit Widgets" || active === "Edit Controls") return null;
+	const Content = settingsComponents[active];
+	return /* @__PURE__ */ jsx(Content, { ...preferences });
+};
+var SettingsContent = ({ active }) => /* @__PURE__ */ jsx(AppearanceProvider, { children: /* @__PURE__ */ jsx(SettingsContentView, { active }) });
+//#endregion
+export { SettingsContent };

package/dist/lib/pages/settings/tile-gallery.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+import type { EditorState } from '../../components/panel/footer/control-center/editor';
+type GalleryTile = {
+    id: string;
+    label: string;
+    category: string;
+    shape: 'small' | 'medium' | 'large' | 'compact' | 'standard' | 'wide' | 'full';
+    preview?: ReactNode;
+};
+type Props = {
+    title: string;
+    kind: 'widgets' | 'controls';
+    tiles: readonly GalleryTile[];
+    editor: EditorState;
+    onDone: () => void;
+};
+export declare const TileGallery: (props: Props) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=tile-gallery.d.ts.map

package/dist/lib/pages/settings/tile-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-gallery.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/tile-gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,SAAS,EAAmB,MAAM,OAAO,CAAA;AAWvE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAA;AAEtF,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,SAAS,GAAG,UAAU,CAAA;IAC5B,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,MAAM,EAAE,WAAW,CAAA;IACnB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AA4YD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,gCA4FvC,CAAA"}