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

package/dist/lib/components/panel/header/index.js

@@ -9,7 +9,7 @@ import { BookmarksTrigger } from "./bookmarks/index.js";
 import { StorageTrigger } from "./storage/index.js";
 import { useCallback, useState } from "react";
 import { Avatar, Button, Dropdown, Label, Separator, Surface, Tooltip, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowDown, Archive, Bookmark, Magnifier, SidebarMinimalistic } from "@vezham/icons-react";
 //#region src/lib/components/panel/header/index.tsx
 var Header = ({ users, showSearch = false, showBookamarks = false, showStorage = false, onAvatarClick, onSearchClick, isDockHidden = false, onToggleDock, isSidebarOpen = false, onToggleSidebar, extraActions, className, compact = false, hideSeparator = false, showMenuUtilities = true }) => {
@@ -95,7 +95,7 @@ var Header = ({ users, showSearch = false, showBookamarks = false, showStorage =
 			})]
 		})]
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Surface, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Surface, {
 		variant: "transparent",
 		className: `flex flex-row items-center gap-1 md:flex-col md:gap-3 ${className ?? ""}`,
 		"data-vx": "header",
@@ -190,7 +190,7 @@ var HeaderApplicationMenuContent = ({ onClose, onSearch, navigationLabel, onTogg
 				onPress: onClose,
 				children: /* @__PURE__ */ jsx(Label, { children: "Back to home" })
 			}),
-			showHistoryNavigation && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
+			showHistoryNavigation && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Dropdown.Item, {
 				id: "back",
 				textValue: "Back",
 				"aria-keyshortcuts": "Meta+ArrowLeft",
@@ -252,7 +252,7 @@ var HeaderApplicationMenuContent = ({ onClose, onSearch, navigationLabel, onTogg
 					})
 				]
 			}),
-			showMenuUtilities && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Dropdown.Item, {
+			showMenuUtilities && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, {}), /* @__PURE__ */ jsxs(Dropdown.Item, {
 				id: "search",
 				textValue: "Search",
 				"aria-label": "Open command palette",
@@ -319,7 +319,7 @@ var HeaderApplicationMenuContent = ({ onClose, onSearch, navigationLabel, onTogg
 };
 var HeaderPanelMenuItems = ({ showBookamarks, showStorage, onClose }) => {
 	const { toggleInfoPanel, activeInfoPanel, isOpen } = useInfoPanel();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [showBookamarks && /* @__PURE__ */ jsxs(Dropdown.Item, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [showBookamarks && /* @__PURE__ */ jsxs(Dropdown.Item, {
 		id: "bookmarks",
 		textValue: "Bookmarks",
 		"aria-label": "Bookmarks",

package/dist/lib/components/panel/header/storage/types.d.ts

@@ -341,7 +341,7 @@ declare const useProps: (originalProps: Props) => {
             variant?: "dark" | "light" | "default" | "glass" | undefined;
         } & import('tailwind-variants').ClassProp<import('tailwind-variants').ClassValue>) | undefined) => string;
     };
-    classNames: Partial<Record<"tabs" | "base" | "search_input" | "search_input_wrapper" | "search_icon" | "empty_container" | "empty_icon" | "empty_title" | "empty_description" | "item" | "tabs_list_container" | "tabs_list" | "tab_archive" | "tab_trash" | "tab_indicator" | "container" | "actions_bar" | "actions_bar_with_gap" | "clear_all_button" | "restore_all_button" | "items_container" | "date_group" | "date_header" | "date_label" | "date_divider" | "items_list" | "item_favicon" | "item_fallback_icon" | "item_content" | "item_title" | "item_url" | "item_actions" | "unarchive_button" | "restore_button" | "delete_button" | "delete_permanent_button" | "action_icon" | "action_icon_success" | "action_icon_danger" | "action_icon_default", string>> | undefined;
+    classNames: Partial<Record<"tabs" | "base" | "container" | "search_input" | "search_input_wrapper" | "search_icon" | "empty_container" | "empty_icon" | "empty_title" | "empty_description" | "item" | "tabs_list_container" | "tabs_list" | "tab_archive" | "tab_trash" | "tab_indicator" | "actions_bar" | "actions_bar_with_gap" | "clear_all_button" | "restore_all_button" | "items_container" | "date_group" | "date_header" | "date_label" | "date_divider" | "items_list" | "item_favicon" | "item_fallback_icon" | "item_content" | "item_title" | "item_url" | "item_actions" | "unarchive_button" | "restore_button" | "delete_button" | "delete_permanent_button" | "action_icon" | "action_icon_success" | "action_icon_danger" | "action_icon_default", string>> | undefined;
     children: ReactNode;
     getTabsProps: () => {
         className: string;

package/dist/lib/components/panel/info-panel/container.module.js

@@ -1,8 +1,10 @@
+//#region src/lib/components/panel/info-panel/container.module.css
+var panel = "_panel_inr1p_1";
 var container_module_default = {
-	panel: "_panel_inr1p_1",
+	panel,
 	"panel-enter": "_panel-enter_inr1p_1",
 	"panel-exit": "_panel-exit_inr1p_1",
 	"panel-reduced": "_panel-reduced_inr1p_1"
 };
 //#endregion
-export { container_module_default as default };
+export { container_module_default as default, panel };

package/dist/lib/components/panel/menu/index.js

@@ -3,7 +3,7 @@ import { useProps } from "./types.js";
 import { useNavigate } from "@tanstack/react-router";
 import { forwardRef, useState } from "react";
 import { Drawer, ScrollShadow, Tooltip, cn } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/components/panel/menu/index.tsx
 var Menu = forwardRef((props, ref) => {
 	const navigate = useNavigate();
@@ -75,7 +75,7 @@ var Menu = forwardRef((props, ref) => {
 			children: item.submenu?.map((subItem) => renderSubMenuItem(subItem, depth + 1))
 		})] }, item.key);
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Component, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Component, {
 		...getBaseProps(),
 		children: /* @__PURE__ */ jsx(ScrollShadow, {
 			...getScrollProps(),

package/dist/lib/components/panel/menu/types.d.ts

@@ -186,7 +186,7 @@ declare const useProps: (originalProps: Props) => {
             itemRadius?: "none" | "lg" | "sm" | "md" | "full" | undefined;
         } & import('tailwind-variants').ClassProp<import('tailwind-variants').ClassValue>) | undefined) => string;
     };
-    classNames: Partial<Record<"label" | "icon" | "scroll" | "base" | "align" | "item" | "container" | "icon_wrapper" | "tooltip_trigger" | "tooltip_content", string>> | undefined;
+    classNames: Partial<Record<"label" | "icon" | "scroll" | "base" | "align" | "container" | "item" | "icon_wrapper" | "tooltip_trigger" | "tooltip_content", string>> | undefined;
     children: ReactNode;
     getBaseProps: () => {
         color?: string | undefined | undefined;

package/dist/lib/layouts/menu-layout/index-md.js

@@ -16,7 +16,7 @@ import { HomeNavigationBubble } from "./home-navigation-bubble.js";
 import { useLocation } from "@tanstack/react-router";
 import { useState } from "react";
 import { Surface } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/layouts/menu-layout/index-md.tsx
 var headerUsers = {
 	id: "1",
@@ -47,7 +47,7 @@ var MenuMD = ({ items, controlCenter }) => {
 	useSidebarShortcut(toggleDock, isHome);
 	const selectedKey = getSelectedMenuKey(location.pathname, items);
 	const { user } = useUser();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(NavigationPanel, {
 			collapsed: isNavigationCollapsed,
 			footerUser: {
@@ -93,7 +93,7 @@ var NavigationPanel = ({ collapsed, footerUser, items, controlCenter, navigation
 	variant: "transparent",
 	className: `border-default-300 sticky top-0 left-0 z-[10] flex h-[100dvh] shrink-0 flex-col overflow-hidden transition-[width,padding,gap] duration-300 ease-out ${navigationWidth} ${collapsed ? "border-0 p-0" : "gap-6 px-4 pt-3 pb-4"}`,
 	"data-vx": "menu-layout",
-	children: !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+	children: !collapsed && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(Header, {
 			users: headerUsers,
 			showSearch: true,

package/dist/lib/layouts/menu-layout/index-sm.js

@@ -18,7 +18,7 @@ import { getNavigationToolbar } from "../../navigation-toolbar.js";
 import { useLocation } from "@tanstack/react-router";
 import React, { useState } from "react";
 import { Surface, toast } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/lib/layouts/menu-layout/index-sm.tsx
 var MenuSM = ({ items, controlCenter }) => {
 	const [selectedKey, setSelectedKey] = React.useState(items[0]?.key ?? "");
@@ -49,7 +49,7 @@ var MenuSM = ({ items, controlCenter }) => {
 		avatar: "https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/blue.jpg"
 	};
 	const { user } = useUser();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("div", {
 			className: "pointer-events-none fixed top-3 right-3 left-3 z-40 flex items-center justify-between gap-2",
 			children: [/* @__PURE__ */ jsx(Surface, {

package/dist/lib/layouts/section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EAElB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAA;AAMlB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAClC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAudD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAI/C,CAAA;AAED,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,aAAa,EAAE,CAAA;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/layouts/section/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AAWd,OAAO,EAAE,KAAK,iBAAiB,EAAsB,MAAM,kBAAkB,CAAA;AAI7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,EACL,KAAK,aAAa,EAGlB,KAAK,aAAa,EAElB,KAAK,iBAAiB,EAEvB,MAAM,WAAW,CAAA;AAMlB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,YAAY,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAClC,IAAI,EAAE,iBAAiB,EAAE,CAAA;IACzB,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3C,IAAI,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,WAAW,CAAC,EAAE,aAAa,EAAE,CAAA;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAodD,QAAA,MAAM,aAAa,GAAI,OAAO,kBAAkB,gCAI/C,CAAA;AAED,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EAChB,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,aAAa,EAAE,CAAA;AACxB,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sBAAsB,CAAA;AAEjE,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA"}

package/dist/lib/layouts/section/index.js

@@ -12,14 +12,14 @@ import { SectionToolbarContentProvider, useRegisteredSectionToolbarContent, useS
 import { useLocation, useNavigate, useRouter } from "@tanstack/react-router";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { Drawer, Surface, Tabs, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useHotkey } from "@tanstack/react-hotkeys";
 //#region src/lib/layouts/section/index.tsx
 var EMPTY_SIDEBAR_ITEMS = [];
 var EMPTY_MENU_ACTIONS = [];
 var EMPTY_VIEW_ACTIONS = [];
 var matchesPath = (pathname, href) => Boolean(href && (pathname === href || pathname.startsWith(`${href}/`)));
-var CompactTabs = ({ title, displayTabs, search, primaryAction }) => /* @__PURE__ */ jsx(Fragment, { children: displayTabs.length > 0 && /* @__PURE__ */ jsx(Tabs.ListContainer, {
+var CompactTabs = ({ title, displayTabs, search, primaryAction }) => displayTabs.length > 0 && /* @__PURE__ */ jsx(Tabs.ListContainer, {
 	className: `scrollbar-hide order-2 mb-3 w-fit min-w-0 self-center overflow-x-auto rounded-full ${search && primaryAction ? "max-w-[calc(100%-9rem)]" : "max-w-[calc(100%-1.5rem)]"}`,
 	children: /* @__PURE__ */ jsx(Tabs.List, {
 		"aria-label": `${title} tabs`,
@@ -30,8 +30,8 @@ var CompactTabs = ({ title, displayTabs, search, primaryAction }) => /* @__PURE_
 			children: [tab.title, /* @__PURE__ */ jsx(Tabs.Indicator, {})]
 		}, tab.key))
 	})
-}, JSON.stringify(displayTabs.map((tab) => tab.key))) });
-var SectionPanels = ({ displayTabs, selectedTab, children }) => /* @__PURE__ */ jsxs(Fragment, { children: [displayTabs.length === 0 && children, displayTabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
+}, JSON.stringify(displayTabs.map((tab) => tab.key)));
+var SectionPanels = ({ displayTabs, selectedTab, children }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [displayTabs.length === 0 && children, displayTabs.map((tab) => /* @__PURE__ */ jsx(Tabs.Panel, {
 	id: tab.key,
 	className: "m-0 flex min-h-0 flex-1 flex-col p-0",
 	children: tab.key === selectedTab?.key && children
@@ -59,7 +59,7 @@ var SectionBody = ({ hasSidebar, isNavigationCollapsed, sidebarId, sidebar, filt
 });
 var SectionNavigationControls = ({ isNavigationCollapsed, sidebarId, toggleNavigation }) => {
 	const router = useRouter();
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		!isNavigationCollapsed && /* @__PURE__ */ jsx(ShortcutButton, {
 			className: "h-9 w-9 min-w-9 p-0",
 			label: "Hide Sidebar",
@@ -212,7 +212,7 @@ var SectionLayoutToolbar = ({ options, navigation, preferences, displayTabs, isC
 		search: toolbarSearch,
 		menuActions,
 		primaryAction: hideCompactControls ? void 0 : primaryAction,
-		toolbar: /* @__PURE__ */ jsxs(Fragment, { children: [toolbar, registeredToolbarContent.desktop] }),
+		toolbar: /* @__PURE__ */ jsxs(Fragment$1, { children: [toolbar, registeredToolbarContent.desktop] }),
 		mobileToolbar: registeredToolbarContent.mobile,
 		onSync: handleSync,
 		navigationControls: /* @__PURE__ */ jsx(SectionNavigationControls, {
@@ -238,7 +238,7 @@ var SectionLayoutContent = (props) => {
 		onExpandedChange: navigation.setExpandedSidebarKeys,
 		onNavigate: () => navigation.setIsDrawerOpen(false)
 	});
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsx(SectionLayoutToolbar, {
 			options: props,
 			navigation,

package/dist/lib/layouts/section/sidebar.js

@@ -3,7 +3,7 @@ import { getSelectedMenuKey } from "../../navigation.js";
 import { useSectionSidebarState } from "./sidebar-state.js";
 import { Link } from "@tanstack/react-router";
 import { useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowDown } from "@vezham/icons-react";
 //#region src/lib/layouts/section/sidebar.tsx
 var getEntryAppearance = (pathname, item) => {
@@ -15,7 +15,7 @@ var getEntryAppearance = (pathname, item) => {
 		href: item.href ?? item.children?.[0]?.href ?? "/"
 	};
 };
-var SidebarEntryLabel = ({ item }) => /* @__PURE__ */ jsxs(Fragment, { children: [item.icon && /* @__PURE__ */ jsx(AppIcon, {
+var SidebarEntryLabel = ({ item }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon && /* @__PURE__ */ jsx(AppIcon, {
 	icon: item.icon,
 	size: 18,
 	className: "shrink-0",

package/dist/lib/layouts/section/toolbar-more-sheet.js

@@ -3,7 +3,7 @@ import { MenuSheet } from "../../components/menu/sheet.js";
 import { sortDirections, sortFields } from "./sort-menu.js";
 import { createContext, useContext, useMemo, useState } from "react";
 import { Button, Label, Separator } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AltArrowLeft, AltArrowRight, CheckCircle, MenuDots, SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
 //#region src/lib/layouts/section/toolbar-more-sheet.tsx
 var MobileToolbarNavigationContext = createContext(null);
@@ -48,7 +48,7 @@ var SheetFilters = ({ filterGroups, selectedFilters, onToggleFilter }) => {
 		]
 	}, group.label));
 };
-var SheetSort = ({ sortValue, onSortChange }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+var SheetSort = ({ sortValue, onSortChange }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 	/* @__PURE__ */ jsx(Label, {
 		className: "text-muted px-3 pt-2",
 		children: "Sort by"
@@ -107,7 +107,7 @@ var SheetHome = ({ sync, onSync, filterAction, sort, sortValue, viewModeActions,
 		menuActions,
 		mobileToolbar
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		mobileToolbar,
 		separators.afterMobile && /* @__PURE__ */ jsx(Separator, { className: "my-1" }),
 		sync && renderActions([{

package/dist/lib/layouts/section/toolbar.js

@@ -6,7 +6,7 @@ import { DEFAULT_SORT, SortMenu } from "./sort-menu.js";
 import { ToolbarMoreSheet } from "./toolbar-more-sheet.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Button, Chip, CloseButton, Dropdown, Label, Popover, SearchField, Separator, Tabs, Tooltip, useMediaQuery } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SortFromBottomToTop, SortFromTopToBottom } from "@vezham/icons-react";
 //#region src/lib/layouts/section/toolbar.tsx
 var iconButtonClassName = "h-9 w-9 min-w-9 p-0";
@@ -241,7 +241,7 @@ var SectionSearchField = ({ search }) => {
 			/* @__PURE__ */ jsx(SearchField.ClearButton, { "aria-label": `Clear ${label.toLowerCase()}` })
 		] })
 	});
-	if (search.onSearch) return /* @__PURE__ */ jsxs(Fragment, { children: [input(true), /* @__PURE__ */ jsxs(Tooltip, {
+	if (search.onSearch) return /* @__PURE__ */ jsxs(Fragment$1, { children: [input(true), /* @__PURE__ */ jsxs(Tooltip, {
 		delay: 0,
 		children: [/* @__PURE__ */ jsx(Button, {
 			isIconOnly: true,
@@ -257,7 +257,7 @@ var SectionSearchField = ({ search }) => {
 			})
 		}), /* @__PURE__ */ jsx(Tooltip.Content, { children: "Search" })]
 	})] });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [input(true), /* @__PURE__ */ jsxs(Popover, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [input(true), /* @__PURE__ */ jsxs(Popover, {
 		isOpen: search.isOpen,
 		onOpenChange: search.onOpenChange,
 		children: [/* @__PURE__ */ jsxs(Tooltip, {
@@ -352,7 +352,7 @@ var ToolbarActions = ({ search, toolbar, sync = true, onSync, filterAction, hasF
 				onChange: onSortChange
 			})
 		})] }),
-		viewModeActions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [(filterAction || sort) && /* @__PURE__ */ jsx(Separator, {
+		viewModeActions.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [(filterAction || sort) && /* @__PURE__ */ jsx(Separator, {
 			orientation: "vertical",
 			className: "h-8"
 		}), /* @__PURE__ */ jsx("div", {

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

@@ -1 +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"}
+{"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;AAa7F,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;AAoID,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

@@ -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"}