@vezham/react 26.0.0-alpha.9 → 26.0.0-beta.2

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

@@ -7,12 +7,12 @@ import { TileContent } from "../../components/panel/footer/control-center/contro
 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 { WidgetPreview, getWidgetSize, useWidgetTiles, widgetSizes } 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 { useId, useMemo, 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";
@@ -39,12 +39,12 @@ var sections = [
 		keywords: "profile name email"
 	},
 	{
-		title: "Edit Widgets",
+		title: "Widget Center",
 		icon: Settings,
 		keywords: "notification center tiles"
 	},
 	{
-		title: "Edit Controls",
+		title: "Control Center",
 		icon: Settings,
 		keywords: "control center tiles"
 	}
@@ -75,38 +75,83 @@ var categoryFor = (type) => {
 	if (type === "preview-media" || type === "preview-sound") return "Sound & Media";
 	return "General";
 };
+var suggestionShapesFor = (type) => {
+	if ([
+		"appearance-toggle",
+		"direction-toggle",
+		"preview-focus",
+		"preview-stage-manager"
+	].includes(type)) return [
+		"compact",
+		"wide",
+		"full"
+	];
+	if ([
+		"preview-display",
+		"preview-media",
+		"preview-sound"
+	].includes(type)) return ["wide", "full"];
+	return ["wide", "full"];
+};
 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",
+	const configuredControls = useMemo(() => controlCenter ? resolveTiles(controlCenter, () => void 0) : [], [controlCenter]);
+	const controls = useTileEditor(configuredControls);
+	const currentControls = new Map(controls.orderedTiles.map((tile) => [tile.id, tile]));
+	if (active === "Widget Center") return /* @__PURE__ */ jsx(TileGallery, {
+		title: "Widget Center",
 		kind: "widgets",
 		editor: widgets.editor,
-		tiles: widgets.orderedTiles.map((tile) => ({
-			...tile,
-			shape: tile.size,
-			category: tile.category,
-			preview: /* @__PURE__ */ jsx(WidgetPreview, { tile })
-		})),
+		tiles: widgets.orderedTiles.map((tile) => {
+			const size = getWidgetSize(tile);
+			return {
+				...tile,
+				shape: size,
+				category: tile.category,
+				suggestionGroup: tile.label,
+				suggestionShapes: widgetSizes,
+				suggestionPreview: (suggestionSize) => /* @__PURE__ */ jsx(WidgetPreview, { tile: {
+					...tile,
+					size: suggestionSize,
+					span: void 0
+				} }),
+				preview: /* @__PURE__ */ jsx(WidgetPreview, { tile })
+			};
+		}),
 		onDone
 	}, "widgets");
 	return /* @__PURE__ */ jsx(AppearanceProvider, { children: /* @__PURE__ */ jsx(PreviewProvider, {
 		enabled: true,
 		children: /* @__PURE__ */ jsx(TileGallery, {
-			title: "Edit Controls",
+			title: "Control Center",
 			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
-				})
-			})),
+			tiles: configuredControls.map((configuredTile) => {
+				const tile = currentControls.get(configuredTile.id) ?? configuredTile;
+				const type = controlCenter?.tiles.find((item) => item.id === tile.id)?.type ?? "";
+				const label = controls.editor.items.find((item) => item.id === tile.id)?.label ?? tile.id;
+				return {
+					id: tile.id,
+					label,
+					shape: tile.span,
+					suggestionGroup: label,
+					suggestionShapes: suggestionShapesFor(type),
+					suggestionPreview: (span) => /* @__PURE__ */ jsx(TileContent, {
+						entry: {
+							...tile,
+							span
+						},
+						context: {},
+						onOpen: () => void 0
+					}),
+					category: categoryFor(type),
+					preview: /* @__PURE__ */ jsx(TileContent, {
+						entry: tile,
+						context: {},
+						onOpen: () => void 0
+					})
+				};
+			}),
 			onDone
 		}, "controls")
 	}) });
@@ -122,7 +167,7 @@ var SettingsPage = ({ onBack, section = "General", onSectionChange, controlCente
 		if (window.matchMedia("(min-width: 768px)").matches) toggleNavigation();
 		else setIsDrawerOpen((open) => !open);
 	};
-	useSidebarShortcut(toggleSidebar, active !== "Edit Widgets" && active !== "Edit Controls");
+	useSidebarShortcut(toggleSidebar, active !== "Widget Center" && active !== "Control Center");
 	const { user } = useUser();
 	const visibleSections = sections.filter((section) => `${section.title} ${section.keywords}`.toLowerCase().includes(query.toLowerCase().trim()));
 	const openSection = (section) => {
@@ -130,7 +175,7 @@ var SettingsPage = ({ onBack, section = "General", onSectionChange, controlCente
 		onSectionChange?.(section);
 		setIsDrawerOpen(false);
 	};
-	if (active === "Edit Widgets" || active === "Edit Controls") return /* @__PURE__ */ jsx(SettingsGallery, {
+	if (active === "Widget Center" || active === "Control Center") return /* @__PURE__ */ jsx(SettingsGallery, {
 		active,
 		controlCenter,
 		onDone: () => openSection("General")

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

@@ -1,4 +1,4 @@
-export type SettingsSection = 'General' | 'Appearance' | 'Notifications' | 'Account' | 'Edit Widgets' | 'Edit Controls';
+export type SettingsSection = 'General' | 'Appearance' | 'Notifications' | 'Account' | 'Widget Center' | 'Control Center';
 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

@@ -1 +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"}
+{"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,eAAe,GACf,gBAAgB,CAAA;AACpB,eAAO,MAAM,yBAAyB,qCACzB,eAAe,KAAK,IAAI,SAC9B,CAAA;AACP,eAAO,MAAM,qBAAqB,mBAFrB,eAAe,KAAK,IAAI,QAE2C,CAAA"}

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

@@ -204,7 +204,7 @@ var settingsComponents = {
 };
 var SettingsContentView = ({ active }) => {
 	const preferences = useSettingsPreferences();
-	if (active === "Edit Widgets" || active === "Edit Controls") return null;
+	if (active === "Widget Center" || active === "Control Center") return null;
 	const Content = settingsComponents[active];
 	return /* @__PURE__ */ jsx(Content, { ...preferences });
 };

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

@@ -1,10 +1,15 @@
 import { ReactNode } from 'react';
 import { EditorState } from '../../components/panel/footer/control-center/editor';
+type GalleryShape = 'small' | 'medium' | 'large' | 'compact' | 'standard' | 'wide' | 'full';
 type GalleryTile = {
     id: string;
     label: string;
+    description?: string;
     category: string;
-    shape: 'small' | 'medium' | 'large' | 'compact' | 'standard' | 'wide' | 'full';
+    shape: GalleryShape;
+    suggestionGroup?: string;
+    suggestionShapes?: readonly GalleryShape[];
+    suggestionPreview?: (shape: GalleryShape) => ReactNode;
     preview?: ReactNode;
 };
 type Props = {

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

@@ -1 +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"}
+{"version":3,"file":"tile-gallery.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/settings/tile-gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,SAAS,EAGf,MAAM,OAAO,CAAA;AAWd,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qDAAqD,CAAA;AAOtF,KAAK,YAAY,GACf,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAMzE,KAAK,WAAW,GAAG;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,YAAY,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IAC1C,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,SAAS,CAAA;IACtD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AASD,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;AAigBD,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,gCA6FvC,CAAA"}

package/dist/lib/pages/settings/tile-gallery.js

@@ -1,12 +1,17 @@
-import { useId, useState } from "react";
+import { controlCenterVariants } from "../../components/panel/footer/control-center/variant.js";
+import { notificationCenterWidgetVariants } from "../../components/panel/footer/notification-center/widget-tiles.js";
+import { Fragment, useId, useState } from "react";
 import { Button, Drawer, SearchField, Surface, Tooltip } from "@vezham/react-v3";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Add, AltArrowLeft, Minus, Settings, Sidebar } from "@vezham/icons-react";
 //#region src/lib/pages/settings/tile-gallery.tsx
+var controlCenterStyles = controlCenterVariants();
+var widgetStyles = notificationCenterWidgetVariants();
+var controlSpan = (shape) => shape;
+var widgetSize = (shape) => shape;
 var useGallery = ({ kind, tiles, editor }) => {
 	const dragInstructionsId = useId();
 	const [draggedId, setDraggedId] = useState(null);
-	const [draggedHeight, setDraggedHeight] = useState(0);
 	const [dropTarget, setDropTarget] = useState(null);
 	const [announcement, setAnnouncement] = useState("");
 	const [query, setQuery] = useState("");
@@ -18,19 +23,43 @@ var useGallery = ({ kind, tiles, editor }) => {
 	const categories = ["All", ...new Set(tiles.map((tile) => tile.category))];
 	const matchingTiles = tiles.filter((tile) => `${tile.label} ${tile.category}`.toLowerCase().includes(normalizedQuery));
 	const matchingCategories = [...new Set(matchingTiles.map((tile) => tile.category))];
-	const available = tiles.filter((tile) => `${tile.label} ${tile.category}`.toLowerCase().includes(normalizedQuery) && (category === "All" || tile.category === category));
+	const availableTiles = tiles.filter((tile) => `${tile.label} ${tile.category}`.toLowerCase().includes(normalizedQuery) && (category === "All" || tile.category === category));
+	const seenSuggestionGroups = /* @__PURE__ */ new Set();
+	const available = availableTiles.filter((tile) => {
+		const group = tile.suggestionGroup ?? tile.id;
+		if (seenSuggestionGroups.has(group)) return false;
+		seenSuggestionGroups.add(group);
+		return true;
+	}).flatMap((tile) => tile.suggestionShapes ? tile.suggestionShapes.map((shape) => ({
+		...tile,
+		shape,
+		preview: tile.suggestionPreview?.(shape) ?? tile.preview,
+		suggestionKey: `${tile.id}:${shape}`
+	})) : [{
+		...tile,
+		suggestionKey: tile.id
+	}]);
+	const availableGroups = Array.from(available.reduce((groups, tile) => {
+		const group = tile.suggestionGroup ?? tile.id;
+		const existing = groups.get(group);
+		if (existing) existing.tiles.push(tile);
+		else groups.set(group, {
+			id: group,
+			label: tile.label,
+			tiles: [tile]
+		});
+		return groups;
+	}, /* @__PURE__ */ new Map()).values());
 	const visible = editor.items.filter((item) => item.visible).flatMap((item) => tiles.filter((tile) => tile.id === item.id));
 	const itemFor = (id) => editor.items.find((item) => item.id === id);
 	const finishDrag = () => {
 		setDraggedId(null);
 		setDropTarget(null);
-		setDraggedHeight(0);
 	};
-	const startDrag = (event, id) => {
+	const startDrag = (event, id, span) => {
 		event.dataTransfer.setData("application/x-vx-settings-tile", id);
+		if (span) event.dataTransfer.setData("application/x-vx-settings-tile-span", span);
 		event.dataTransfer.effectAllowed = "move";
-		const currentTile = event.currentTarget;
-		setDraggedHeight((currentTile.hasAttribute("data-preview-tile") ? currentTile : currentTile.querySelector("[inert]"))?.getBoundingClientRect().height ?? 64);
 		setDraggedId(id);
 	};
 	const moveTile = (id, offset) => {
@@ -49,11 +78,14 @@ var useGallery = ({ kind, tiles, editor }) => {
 		event.preventDefault();
 		event.stopPropagation();
 		const id = event.dataTransfer.getData("application/x-vx-settings-tile");
+		const requestedSpan = event.dataTransfer.getData("application/x-vx-settings-tile-span");
 		const item = itemFor(id);
+		const span = tiles.find((tile) => tile.id === id)?.suggestionShapes?.includes(requestedSpan) ? requestedSpan : void 0;
 		finishDrag();
 		if (!item?.editable) return;
 		if (editor.onPlace) {
-			editor.onPlace(id, target);
+			if (span) editor.onPlace(id, target, span);
+			else editor.onPlace(id, target);
 			return;
 		}
 		if (!item.visible) editor.onVisibilityChange(id, true);
@@ -87,18 +119,17 @@ var useGallery = ({ kind, tiles, editor }) => {
 		className: `w-full justify-start rounded-lg text-sm ${category === value ? "bg-surface-secondary font-semibold" : "text-muted"}`,
 		children: [/* @__PURE__ */ jsx(Settings, { size: 16 }), value === "All" ? `All ${kind}` : value]
 	}, value));
-	const tileSpan = (tile) => kind === "widgets" ? tile.shape === "large" ? "col-span-2 row-span-2" : tile.shape === "medium" ? "col-span-2" : "" : tile.shape === "compact" ? "" : tile.shape === "standard" ? "col-span-2" : tile.shape === "wide" ? "col-span-3" : "col-span-4";
+	const tileSpan = (tile) => kind === "widgets" ? widgetStyles.tile({ size: widgetSize(tile.shape) }) : controlCenterStyles.tileContainer({ span: controlSpan(tile.shape) });
 	const draggedTile = tiles.find((tile) => tile.id === draggedId);
 	const blankWidget = (tile) => /* @__PURE__ */ jsx(Surface, {
 		variant: "transparent",
 		"aria-hidden": "true",
-		className: `bg-surface-secondary border-border w-full rounded-2xl border ${tile.shape === "large" ? "aspect-square" : tile.shape === "medium" ? "aspect-[2/1]" : "aspect-square"}`,
+		className: `bg-surface-secondary border-border w-full rounded-2xl border ${widgetStyles.preview({ size: widgetSize(tile.shape) })}`,
 		children: null
 	});
 	return {
 		dragInstructionsId,
 		draggedId,
-		draggedHeight,
 		dropTarget,
 		announcement,
 		query,
@@ -107,12 +138,18 @@ var useGallery = ({ kind, tiles, editor }) => {
 		isCategoryMenuOpen,
 		showPreview,
 		available,
+		availableGroups,
 		visible,
 		itemFor,
 		finishDrag,
 		startDrag,
 		moveTile,
 		dropTile,
+		addTile: (tile) => {
+			if (editor.onAdd && tile.suggestionShapes) editor.onAdd(tile.id, tile.shape);
+			else if (editor.onPlace && tile.suggestionShapes) editor.onPlace(tile.id, void 0, tile.shape);
+			else editor.onVisibilityChange(tile.id, true);
+		},
 		search,
 		categoryButtons,
 		tileSpan,
@@ -123,19 +160,9 @@ var useGallery = ({ kind, tiles, editor }) => {
 		setShowPreview
 	};
 };
-var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHeight, dropTarget, itemFor, startDrag, finishDrag, moveTile, dropTile, tileSpan, blankWidget, dragInstructionsId, draggedTile, setDropTarget }) => /* @__PURE__ */ jsxs("aside", {
+var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, dropTarget, itemFor, startDrag, finishDrag, moveTile, dropTile, tileSpan, blankWidget, dragInstructionsId, draggedTile, setDropTarget }) => /* @__PURE__ */ jsxs("aside", {
 	"aria-label": `Current ${kind}`,
 	className: `${showPreview ? "flex" : "hidden xl:flex"} border-border min-h-0 min-w-0 flex-1 flex-col p-5 xl:w-96 xl:flex-none xl:border-l`,
-	onDragOver: (event) => {
-		if (!event.dataTransfer.types.includes("application/x-vx-settings-tile")) return;
-		event.preventDefault();
-		event.dataTransfer.dropEffect = "move";
-		setDropTarget("empty");
-	},
-	onDragLeave: (event) => {
-		if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget(null);
-	},
-	onDrop: (event) => dropTile(event),
 	children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "mb-4 flex items-center justify-between gap-3",
@@ -148,7 +175,18 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 			})]
 		}),
 		/* @__PURE__ */ jsxs("div", {
-			className: "@container mx-auto min-h-0 w-full max-w-[352px] flex-1 overflow-y-auto px-2 pt-3 pb-4",
+			"data-preview-drop-area": true,
+			className: `relative ${kind === "widgets" ? widgetStyles.galleryPreview() : controlCenterStyles.galleryPreview()}`,
+			onDragOver: (event) => {
+				if (!event.dataTransfer.types.includes("application/x-vx-settings-tile")) return;
+				event.preventDefault();
+				event.dataTransfer.dropEffect = "move";
+				setDropTarget("empty");
+			},
+			onDragLeave: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget(null);
+			},
+			onDrop: (event) => dropTile(event),
 			children: [visible.length === 0 && /* @__PURE__ */ jsxs("p", {
 				className: "text-muted py-8 text-center text-sm",
 				children: [
@@ -156,11 +194,13 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 					kind,
 					" added. Choose a tile from the gallery."
 				]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: `grid gap-4 ${kind === "widgets" ? "auto-rows-[calc((100cqw-1rem)/2)] grid-cols-2" : "grid-cols-4 items-start"}`,
-				children: [visible.map((tile) => {
+			}), /* @__PURE__ */ jsx("div", {
+				className: kind === "widgets" ? widgetStyles.grid() : controlCenterStyles.home(),
+				children: visible.map((tile, index) => {
 					const editable = itemFor(tile.id)?.editable;
-					return /* @__PURE__ */ jsxs("div", {
+					const nextTile = visible[index + 1];
+					const emptyWidgetSlot = kind === "widgets" && draggedTile !== void 0 && tile.shape === "small" && nextTile?.shape !== "small";
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
 						"data-preview-tile": tile.id,
 						draggable: editable,
 						role: "group",
@@ -180,7 +220,7 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 						onDrop: (event) => dropTile(event, tile.id),
 						"data-dragging": draggedId === tile.id || void 0,
 						"data-drop-target": dropTarget === tile.id || void 0,
-						className: `group focus-visible:outline-focus data-[drop-target]:bg-accent-soft data-[drop-target]:outline-accent/40 group-focus-within:[&>div>*]:ring-foreground/35 group-hover:[&>div>*]:ring-foreground/35 relative min-w-0 rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 data-[dragging]:opacity-40 data-[drop-target]:outline data-[drop-target]:outline-offset-2 [&>div>*]:transition-[box-shadow] group-focus-within:[&>div>*]:ring-1 group-hover:[&>div>*]:ring-1 ${editable ? "cursor-grab active:cursor-grabbing" : ""} ${tileSpan(tile)}`,
+						className: `group focus-visible:outline-focus data-[drop-target]:bg-accent-soft data-[drop-target]:outline-accent/40 group-focus-within:[&>div>*]:ring-foreground/35 group-hover:[&>div>*]:ring-foreground/35 relative min-w-0 overflow-visible rounded-2xl focus-visible:outline-2 focus-visible:outline-offset-2 data-[dragging]:opacity-40 data-[drop-target]:outline data-[drop-target]:outline-offset-2 [&>div>*]:transition-[box-shadow] group-focus-within:[&>div>*]:ring-1 group-hover:[&>div>*]:ring-1 ${editable ? "cursor-grab active:cursor-grabbing" : ""} ${tileSpan(tile)}`,
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								inert: true,
@@ -215,24 +255,32 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 								isIconOnly: true,
 								size: "sm",
 								variant: "secondary",
-								className: "text-muted absolute -top-2 -left-2 z-10 size-6 min-w-0 rounded-full p-0 opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100",
+								className: "border-danger text-danger hover:bg-danger/10! absolute -top-1 -left-1 z-20 size-6! min-w-0 rounded-full border bg-transparent! p-0 opacity-0 shadow-md transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
 								"aria-label": `Remove ${tile.label}`,
 								onPress: () => editor.onVisibilityChange(tile.id, false),
 								children: /* @__PURE__ */ jsx(Minus, {
 									"aria-hidden": "true",
-									className: "size-3.5"
+									className: "size-3"
 								})
 							}), /* @__PURE__ */ jsxs(Tooltip.Content, { children: ["Remove ", tile.label] })] })
 						]
-					}, tile.id);
-				}), draggedTile && /* @__PURE__ */ jsx("div", {
-					"data-preview-empty-drop": true,
-					"aria-label": `Drop ${draggedTile.label} here`,
-					"data-drop-target": dropTarget === "empty" || void 0,
-					className: `border-border text-muted data-[drop-target]:border-accent/40 data-[drop-target]:bg-accent-soft flex items-center justify-center rounded-2xl border border-dashed text-xs ${tileSpan(draggedTile)}`,
-					style: kind === "controls" ? { height: draggedHeight } : void 0,
-					children: "Drop here"
-				})]
+					}), emptyWidgetSlot && /* @__PURE__ */ jsx("div", {
+						"data-preview-empty-slot": tile.id,
+						"data-drop-target": dropTarget === `after:${tile.id}` || void 0,
+						onDragOver: (event) => {
+							if (!event.dataTransfer.types.includes("application/x-vx-settings-tile")) return;
+							event.preventDefault();
+							event.stopPropagation();
+							event.dataTransfer.dropEffect = "move";
+							setDropTarget(`after:${tile.id}`);
+						},
+						onDragLeave: (event) => {
+							if (!event.currentTarget.contains(event.relatedTarget)) setDropTarget((current) => current === `after:${tile.id}` ? null : current);
+						},
+						onDrop: (event) => dropTile(event, nextTile?.id),
+						className: "aspect-square"
+					})] }, tile.id);
+				})
 			})]
 		}),
 		/* @__PURE__ */ jsxs(Button, {
@@ -243,67 +291,94 @@ var GalleryPreview = ({ kind, editor, showPreview, visible, draggedId, draggedHe
 		})
 	]
 });
-var GalleryAvailable = ({ kind, editor, isSearching, showPreview, category, available, itemFor, startDrag, finishDrag, blankWidget }) => /* @__PURE__ */ jsxs("section", {
-	"aria-label": `Available ${kind}`,
-	className: `${showPreview ? "hidden xl:flex" : "flex"} min-h-0 min-w-0 flex-1 flex-col p-4 md:p-6`,
-	children: [
-		/* @__PURE__ */ jsx("h2", {
-			className: "mb-1 text-sm font-semibold",
-			children: isSearching ? "Search results" : category === "All" ? "Suggestions" : category
-		}),
-		/* @__PURE__ */ jsx("p", {
-			className: "text-muted mb-5 text-xs",
-			children: "Add or drag a tile into your preview. Changes save automatically."
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "min-h-0 flex-1 overflow-y-auto p-1",
-			children: [available.length === 0 && /* @__PURE__ */ jsxs("p", {
-				role: "status",
-				className: "text-muted py-8 text-sm",
-				children: [
-					"No ",
-					kind,
-					" found."
-				]
-			}), /* @__PURE__ */ jsx("div", {
-				className: "grid grid-cols-2 items-start gap-4 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
-				children: available.map((tile) => {
-					const item = itemFor(tile.id);
-					return /* @__PURE__ */ jsxs("div", {
-						"data-gallery-tile": tile.id,
-						draggable: item?.editable,
-						onDragStart: (event) => startDrag(event, tile.id),
-						onDragEnd: finishDrag,
-						className: `group relative min-w-0 ${tile.shape === "medium" || tile.shape === "large" || tile.shape === "full" || tile.shape === "wide" ? "col-span-2" : ""}`,
-						children: [
-							/* @__PURE__ */ jsx("div", {
-								inert: true,
-								className: "pointer-events-none flex min-h-24 items-center justify-center [&>button]:w-full",
-								children: kind === "widgets" ? tile.preview ?? blankWidget(tile) : tile.preview
-							}),
-							item?.editable && !item.visible && /* @__PURE__ */ jsx(Button, {
-								isIconOnly: true,
-								size: "sm",
-								variant: "ghost",
-								"aria-label": `Quick add ${tile.label}`,
-								className: "bg-success hover:bg-success/90 absolute -top-1 -left-1 z-10 size-7 min-w-0 rounded-full p-0 text-white opacity-0 shadow-sm transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
-								onPress: () => editor.onVisibilityChange(tile.id, true),
-								children: /* @__PURE__ */ jsx(Add, {
-									"aria-hidden": "true",
-									className: "size-4"
-								})
-							}),
-							/* @__PURE__ */ jsx("p", {
-								className: "mt-2 min-w-0 truncate text-xs",
-								children: tile.label
-							})
-						]
-					}, tile.id);
+var GalleryAvailable = ({ kind, isSearching, showPreview, category, available, availableGroups, itemFor, startDrag, finishDrag, blankWidget, addTile }) => {
+	const suggestionTile = (tile) => {
+		const item = itemFor(tile.id);
+		const isAdded = item?.visible === true;
+		const isCompactControl = kind === "controls" && tile.shape === "compact";
+		const size = kind === "controls" ? controlCenterStyles.gallerySuggestion({ span: controlSpan(tile.shape) }) : widgetStyles.gallerySuggestion({ size: widgetSize(tile.shape) });
+		return /* @__PURE__ */ jsxs("div", {
+			"data-gallery-tile": tile.suggestionKey,
+			"data-control-span": kind === "controls" ? tile.shape : void 0,
+			"data-widget-size": kind === "widgets" ? tile.shape : void 0,
+			"data-added": isAdded || void 0,
+			draggable: item?.editable,
+			onDragStart: (event) => startDrag(event, tile.id, tile.suggestionShapes ? tile.shape : void 0),
+			onDragEnd: finishDrag,
+			className: `group relative min-w-0 justify-self-center transition-opacity ${kind === "widgets" ? "grid h-full grid-rows-[minmax(0,1fr)_auto] self-stretch" : ""} ${isAdded ? "opacity-50" : ""} ${size}`,
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					inert: true,
+					className: `pointer-events-none flex items-center justify-center [&>section]:w-full ${isCompactControl ? "mx-auto size-14 [&>button]:size-14" : "[&>button]:w-full"} ${kind === "widgets" ? "h-full min-h-24 [&>[data-widget-size]]:w-full" : ""}`,
+					children: kind === "widgets" ? tile.preview ?? blankWidget(tile) : tile.preview
+				}),
+				item?.editable && !item.visible && /* @__PURE__ */ jsx(Button, {
+					isIconOnly: true,
+					size: "sm",
+					variant: "ghost",
+					"aria-label": `Quick add ${tile.label}${tile.suggestionKey === tile.id ? "" : ` (${tile.shape})`}`,
+					className: "bg-success hover:bg-success/90 absolute -top-1 -left-1 z-10 size-6 min-w-0 rounded-full p-0 text-white opacity-0 shadow-sm transition-opacity group-focus-within:opacity-100 group-hover:opacity-100",
+					onPress: () => addTile(tile),
+					children: /* @__PURE__ */ jsx(Add, {
+						"aria-hidden": "true",
+						className: "size-3"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-2 min-w-0 text-center",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						children: tile.label
+					}), kind === "widgets" && tile.description && /* @__PURE__ */ jsx("p", {
+						className: "text-muted mt-0.5 line-clamp-2 text-xs",
+						children: tile.description
+					})]
 				})
-			})]
-		})
-	]
-});
+			]
+		}, tile.suggestionKey);
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": `Available ${kind}`,
+		className: `${showPreview ? "hidden xl:flex" : "flex"} min-h-0 min-w-0 flex-1 flex-col p-4 md:p-6`,
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "mb-1 text-sm font-semibold",
+				children: isSearching ? "Search results" : category === "All" ? "Suggestions" : category
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-muted mb-5 text-xs",
+				children: "Add or drag a tile into your preview. Changes save automatically."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-h-0 flex-1 overflow-y-auto p-3",
+				children: [available.length === 0 && /* @__PURE__ */ jsxs("p", {
+					role: "status",
+					className: "text-muted py-8 text-sm",
+					children: [
+						"No ",
+						kind,
+						" found."
+					]
+				}), available.some((tile) => tile.suggestionShapes) ? /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-6",
+					children: availableGroups.map((group) => /* @__PURE__ */ jsxs("section", {
+						"aria-label": `${group.label} sizes`,
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: "text-sm font-light",
+							children: group.label
+						}), /* @__PURE__ */ jsx("div", {
+							className: `mt-3 grid grid-cols-1 justify-items-center gap-x-8 gap-y-4 min-[600px]:grid-cols-2 min-[820px]:grid-cols-3 ${kind === "widgets" ? "items-stretch" : ""}`,
+							children: group.tiles.map(suggestionTile)
+						})]
+					}, group.id))
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "grid grid-cols-2 items-start gap-4 sm:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5",
+					children: available.map(suggestionTile)
+				})]
+			})
+		]
+	});
+};
 var TileGallery = (props) => {
 	const context = {
 		...props,
@@ -316,7 +391,7 @@ var TileGallery = (props) => {
 			/* @__PURE__ */ jsx("span", {
 				id: dragInstructionsId,
 				className: "sr-only",
-				children: "Drag the tile to reorder, or focus it and use the arrow keys."
+				children: "Drag the tile to reorder or drop it anywhere in the preview. You can also focus it and use the arrow keys."
 			}),
 			/* @__PURE__ */ jsx("span", {
 				role: "status",

package/dist/lib/store/useBookmarks/index.js

@@ -1,4 +1,4 @@
-import { bookmarksData } from "./data.js";
+import { bookmarksData, sampleFavorites } from "./data.js";
 import { Bookmarks } from "./action.js";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 //#region src/lib/store/useBookmarks/index.ts
@@ -26,4 +26,4 @@ var useBookmarks = {
 	actions: useBookmarksActions
 };
 //#endregion
-export { useBookmarks };
+export { bookmarksData, sampleFavorites, useBookmarks };

package/dist/lib/store/useStorage/index.js

@@ -10,4 +10,4 @@ var useStorageList = (rq = {}) => useQuery({
 });
 var useStorage = { list: useStorageList };
 //#endregion
-export { useStorage };
+export { storageData, useStorage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vezham/react",
-  "version": "26.0.0-alpha.9",
+  "version": "26.0.0-beta.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vezham/vx-fe-pkgs.git",
@@ -109,7 +109,7 @@
   ],
   "dependencies": {
     "@tanstack/react-hotkeys": "^0.10.0",
-    "@vezham/hooks": "26.0.0-alpha.9",
+    "@vezham/hooks": "26.0.0-beta.2",
     "react-aria-components": "1.21.1"
   }
 }