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

package/dist/lib/components/command/index.js

@@ -1,3 +1,3 @@
-import "./command-provider.js";
+import { CommandProvider } from "./command-provider.js";
 import { useCommand } from "@vezham/hooks";
-export { useCommand };
+export { CommandProvider, useCommand };

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

@@ -7,7 +7,7 @@ import { SidebarItemType } from "./types.js";
 import { useLocation, useNavigate } from "@tanstack/react-router";
 import { useEffect, useMemo, useState } from "react";
 import { Button, useOverlayState } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Magnifier, MenuDots } from "@vezham/icons-react";
 //#region src/lib/components/menu/index.tsx
 var flattenMenuItems = (menuItems = []) => {
@@ -69,7 +69,7 @@ var BottomNavbar = ({ items = EMPTY_ITEMS, onSelect, isDarkMode = false, bgColor
 		if (item.href) navigate({ to: item.href });
 	};
 	if (flatItems.length === 0) return null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 		className: `${getNavbarContainerClasses({
 			bgColorClass,
 			isDarkMode

package/dist/lib/components/panel/footer/ai/message-actions.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Button } from "@vezham/react-v3";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { BranchingPathsUp } from "@vezham/icons-react";
 import { ChatMessageActions } from "@vezham/react-pro-v3";
 import { writeClipboardText } from "@vezham/docs-react/utils/clipboard";
@@ -8,7 +8,7 @@ import { writeClipboardText } from "@vezham/docs-react/utils/clipboard";
 var MessageActions = ({ message, conversation }) => {
 	const [copied, setCopied] = useState(false);
 	const [error, setError] = useState(false);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChatMessageActions, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ChatMessageActions, { children: [
 		/* @__PURE__ */ jsx(ChatMessageActions.Copy, {
 			"aria-label": "Copy response",
 			tooltip: "Copy",

package/dist/lib/components/panel/footer/ai/mock-result.js

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Button, Card, Input, Label, TextField } 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/footer/ai/mock-result.tsx
 var ResultCard = ({ title, description, children, footer }) => /* @__PURE__ */ jsxs(Card, {
 	className: "my-3",
@@ -104,7 +104,7 @@ var MockResult = ({ prompt }) => {
 	if (/workspace/i.test(prompt)) return /* @__PURE__ */ jsx(ResultCard, {
 		title: "Workspace guide",
 		description: "Search pages, save bookmarks, and explore Storage.",
-		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 			variant: "secondary",
 			size: "sm",
 			onPress: () => setSaved(true),

package/dist/lib/components/panel/footer/control-center/appearance.d.ts

@@ -5,8 +5,9 @@ export declare const AppearanceProvider: ({ appearance, children }: {
     children: ReactNode;
 }) => import("react").JSX.Element;
 export declare const useAppearance: () => AppearanceAdapter;
-export declare const AppearanceToggle: ({ label }: {
+export declare const AppearanceToggle: ({ label, compact }: {
     label?: string;
+    compact?: boolean;
 }) => import("react").JSX.Element;
 export declare const AppearanceTile: ({ onOpen, label }: {
     label?: string;

package/dist/lib/components/panel/footer/control-center/appearance.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/appearance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAMd,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,SAAS,CAAA;AA0C3D,eAAO,MAAM,kBAAkB,GAAI,0BAGhC;IACD,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAuBA,CAAA;AAED,eAAO,MAAM,aAAa,yBAKzB,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAW7D,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,mBAG5B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,gCAWA,CAAA;AAOD,eAAO,MAAM,kBAAkB,mCAoB9B,CAAA"}
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/appearance.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAA;AAMd,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,SAAS,CAAA;AA0C3D,eAAO,MAAM,kBAAkB,GAAI,0BAGhC;IACD,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAuBA,CAAA;AAED,eAAO,MAAM,aAAa,yBAKzB,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,oBAG9B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,gCAeA,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,mBAG5B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,gCAWA,CAAA;AAOD,eAAO,MAAM,kBAAkB,mCAoB9B,CAAA"}

package/dist/lib/components/panel/footer/control-center/appearance.js

@@ -57,11 +57,12 @@ var useAppearance = () => {
 	if (!appearance) throw new Error("Appearance tiles must be rendered inside ControlCenter");
 	return appearance;
 };
-var AppearanceToggle = ({ label }) => {
+var AppearanceToggle = ({ label, compact = true }) => {
 	const { isDark, setDark } = useAppearance();
 	return /* @__PURE__ */ jsx(ActionTile, {
-		label: label ?? `Switch to ${isDark ? "light" : "dark"} mode`,
-		compact: true,
+		label: label ?? (compact ? `Switch to ${isDark ? "light" : "dark"} mode` : "Appearance"),
+		description: compact ? void 0 : isDark ? "Dark" : "Light",
+		compact,
 		icon: /* @__PURE__ */ jsx(isDark ? Moon : Sun, { size: 20 }),
 		onPress: () => setDark(!isDark)
 	});

package/dist/lib/components/panel/footer/control-center/control-center.js

@@ -7,13 +7,13 @@ import { FooterControlCenterContext } from "./footer-context.js";
 import { PreviewProvider } from "./preview.js";
 import { useContext, useState } from "react";
 import { Button, Popover, ScrollShadow, 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 { AltArrowLeft, Settings } from "@vezham/icons-react";
 import { Sheet } from "@vezham/react-pro-v3";
 //#region src/lib/components/panel/footer/control-center/control-center.tsx
 var styles = controlCenterVariants();
 var footerTriggerClassName = "text-muted hover:text-foreground h-5 w-5 min-w-0 p-0 [&_svg]:size-5";
-var GlassHighlights = () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+var GlassHighlights = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 	"aria-hidden": "true",
 	className: styles.edgeHighlight()
 }), /* @__PURE__ */ jsx("div", {
@@ -46,7 +46,7 @@ var ControlCenter = ({ context, tiles, trigger, placement = "bottom end", onOpen
 			className: styles.triggerIcon()
 		})
 	});
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ScrollShadow, {
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ScrollShadow, {
 		className: styles.viewport(),
 		hideScrollBar: true,
 		children: [preview && /* @__PURE__ */ jsx("p", {
@@ -66,9 +66,9 @@ var ControlCenter = ({ context, tiles, trigger, placement = "bottom end", onOpen
 			className: "rounded-full",
 			onPress: () => {
 				changeOpen(false);
-				openSettings("Edit Controls");
+				openSettings("Control Center");
 			},
-			children: "Edit Controls"
+			children: "Control Center"
 		})
 	})] });
 	return /* @__PURE__ */ jsx(AppearanceProvider, {
@@ -128,7 +128,7 @@ var PanelOutlet = ({ context, tiles, panel, onPanelChange }) => {
 	const entry = tiles.find((entry) => entry.id === panel);
 	if (entry?.Panel) {
 		const Content = entry.Panel;
-		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: styles.panelHeader(),
 			children: [/* @__PURE__ */ jsx(Button, {
 				"aria-label": "Back to Control Center",
@@ -149,7 +149,7 @@ var PanelOutlet = ({ context, tiles, panel, onPanelChange }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: styles.home(),
 		children: tiles.map((entry) => /* @__PURE__ */ jsx("div", {
-			className: styles.tileContainer({ span: entry.span }),
+			className: `${styles.tileContainer({ span: entry.span })} ${entry.span === "compact" ? "" : "[&>button]:w-full"}`,
 			children: /* @__PURE__ */ jsx(TileContent, {
 				entry,
 				context,
@@ -174,7 +174,10 @@ var TileContent = ({ entry, context, onOpen }) => {
 		});
 	}
 	const Tile = entry.Tile;
-	return /* @__PURE__ */ jsx(Tile, { ...context });
+	return /* @__PURE__ */ jsx(Tile, {
+		...context,
+		compact: entry.span === "compact"
+	});
 };
 //#endregion
 export { ControlCenter, TileContent };

package/dist/lib/components/panel/footer/control-center/direction.d.ts

@@ -3,7 +3,8 @@ export declare const DirectionTile: ({ onOpen, label }: {
     onOpen: () => void;
 }) => import("react").JSX.Element;
 export declare const DirectionSettings: () => import("react").JSX.Element;
-export declare const DirectionToggle: ({ label }: {
+export declare const DirectionToggle: ({ label, compact }: {
     label?: string;
+    compact?: boolean;
 }) => import("react").JSX.Element;
 //# sourceMappingURL=direction.d.ts.map

package/dist/lib/components/panel/footer/control-center/direction.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/direction.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,aAAa,GAAI,mBAG3B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,gCAWA,CAAA;AAED,eAAO,MAAM,iBAAiB,mCAG7B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,WAAW;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAW5D,CAAA"}
+{"version":3,"file":"direction.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/direction.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,aAAa,GAAI,mBAG3B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,gCAWA,CAAA;AAED,eAAO,MAAM,iBAAiB,mCAG7B,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,oBAG7B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,gCAeA,CAAA"}

package/dist/lib/components/panel/footer/control-center/direction.js

@@ -27,12 +27,14 @@ var DirectionSettings = () => {
 		options
 	});
 };
-var DirectionToggle = ({ label }) => {
+var DirectionToggle = ({ label, compact = true }) => {
 	const { value, onChange } = useRootAttribute("dir", "ltr");
+	const Icon = value === "rtl" ? AlignRight : AlignLeft;
 	return /* @__PURE__ */ jsx(ActionTile, {
-		label: label ?? `Switch to ${value === "rtl" ? "LTR" : "RTL"}`,
-		compact: true,
-		icon: /* @__PURE__ */ jsx(value === "rtl" ? AlignRight : AlignLeft, { size: 20 }),
+		label: label ?? (compact ? `Switch to ${value === "rtl" ? "LTR" : "RTL"}` : "Direction"),
+		description: compact ? void 0 : value.toUpperCase(),
+		compact,
+		icon: /* @__PURE__ */ jsx(Icon, { size: 20 }),
 		onPress: () => onChange(value === "rtl" ? "ltr" : "rtl")
 	});
 };

package/dist/lib/components/panel/footer/control-center/editor.d.ts

@@ -8,13 +8,15 @@ export type EditorState = {
     onVisibilityChange: (id: string, visible: boolean) => void;
     onMove: (id: string, offset: number) => void;
     onReset: () => void;
-    onPlace?: (id: string, target?: string) => void;
+    onAdd?: (id: string, span?: string) => void;
+    onPlace?: (id: string, target?: string, span?: string) => void;
 };
 type EditableTile = {
     id: string;
     label?: string;
     title?: string;
     editable?: boolean;
+    span?: string;
 };
 export declare const useTileEditor: <Tile extends EditableTile>(tiles: readonly Tile[], storageKey?: string) => {
     editor: EditorState;

package/dist/lib/components/panel/footer/control-center/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/editor.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,SAAS;QACd,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,OAAO,CAAA;KAClB,EAAE,CAAA;IACH,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1D,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAChD,CAAA;AACD,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AASD,eAAO,MAAM,aAAa,GAAI,IAAI,SAAS,YAAY,EACrD,OAAO,SAAS,IAAI,EAAE,EACtB,mBAAgC;;;;CA4FjC,CAAA"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/editor.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,SAAS;QACd,EAAE,EAAE,MAAM,CAAA;QACV,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,OAAO,CAAA;QAChB,QAAQ,EAAE,OAAO,CAAA;KAClB,EAAE,CAAA;IACH,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1D,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/D,CAAA;AACD,KAAK,YAAY,GAAG;IAClB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AASD,eAAO,MAAM,aAAa,GAAI,IAAI,SAAS,YAAY,EACrD,OAAO,SAAS,IAAI,EAAE,EACtB,mBAAgC;;;;CA6GjC,CAAA"}

package/dist/lib/components/panel/footer/control-center/editor.js

@@ -12,10 +12,14 @@ var useTileEditor = (tiles, storageKey = "vx:control-center") => {
 	const snapshot = useSyncExternalStore(subscribe, () => localStorage.getItem(storageKey) ?? "", () => "");
 	let order = [];
 	let hidden = [];
+	const spans = {};
 	try {
 		const value = JSON.parse(snapshot || "{}");
 		if (Array.isArray(value.order)) order = [...new Set(value.order.filter((id) => typeof id === "string"))];
 		if (Array.isArray(value.hidden)) hidden = value.hidden.filter((id) => typeof id === "string");
+		if (value.spans && typeof value.spans === "object") {
+			for (const [id, span] of Object.entries(value.spans)) if (typeof span === "string") spans[id] = span;
+		}
 	} catch {}
 	const tilesById = new Map(tiles.map((tile) => [tile.id, tile]));
 	const orderedIds = new Set(order);
@@ -23,11 +27,15 @@ var useTileEditor = (tiles, storageKey = "vx:control-center") => {
 	const orderedTiles = [...order.flatMap((id) => {
 		const tile = tilesById.get(id);
 		return tile ? [tile] : [];
-	}), ...tiles.filter((tile) => !orderedIds.has(tile.id))];
-	const save = (nextOrder, nextHidden) => {
+	}), ...tiles.filter((tile) => !orderedIds.has(tile.id))].map((tile) => spans[tile.id] ? {
+		...tile,
+		span: spans[tile.id]
+	} : tile);
+	const save = (nextOrder, nextHidden, nextSpans = spans) => {
 		localStorage.setItem(storageKey, JSON.stringify({
 			order: nextOrder,
-			hidden: nextHidden
+			hidden: nextHidden,
+			spans: nextSpans
 		}));
 		window.dispatchEvent(new Event("vx:tile-preferences"));
 	};
@@ -51,7 +59,14 @@ var useTileEditor = (tiles, storageKey = "vx:control-center") => {
 				ids.splice(target, 0, id);
 				save(ids, hidden);
 			},
-			onPlace: (id, target) => {
+			onAdd: (id, span) => {
+				if (!tilesById.has(id) || tilesById.get(id)?.editable === false) return;
+				save(order, hidden.filter((value) => value !== id), span ? {
+					...spans,
+					[id]: span
+				} : spans);
+			},
+			onPlace: (id, target, span) => {
 				if (!tilesById.has(id) || tilesById.get(id)?.editable === false) return;
 				const ids = orderedTiles.map((tile) => tile.id);
 				const from = ids.indexOf(id);
@@ -60,9 +75,12 @@ var useTileEditor = (tiles, storageKey = "vx:control-center") => {
 					ids.splice(from, 1);
 					ids.splice(to, 0, id);
 				}
-				save(ids, hidden.filter((value) => value !== id));
+				save(ids, hidden.filter((value) => value !== id), span ? {
+					...spans,
+					[id]: span
+				} : spans);
 			},
-			onReset: () => save(tiles.map((tile) => tile.id), [])
+			onReset: () => save(tiles.map((tile) => tile.id), [], {})
 		},
 		orderedTiles,
 		visibleTiles: orderedTiles.filter((tile) => !hiddenIds.has(tile.id))

package/dist/lib/components/panel/footer/control-center/preview.d.ts

@@ -13,11 +13,13 @@ export declare const PreviewBluetoothTile: ({ onOpen, label }: Props) => import(
 export declare const PreviewBluetoothSettings: () => import("react").JSX.Element;
 export declare const PreviewAirDropTile: ({ onOpen, label }: Props) => import("react").JSX.Element;
 export declare const PreviewAirDropSettings: () => import("react").JSX.Element;
-export declare const PreviewFocusTile: ({ label }: {
+export declare const PreviewFocusTile: ({ label, compact }: {
     label?: string;
+    compact?: boolean;
 }) => import("react").JSX.Element;
-export declare const PreviewStageManagerTile: ({ label }: {
+export declare const PreviewStageManagerTile: ({ label, compact }: {
     label?: string;
+    compact?: boolean;
 }) => import("react").JSX.Element;
 export declare const PreviewMirroringTile: ({ onOpen, label }: Props) => import("react").JSX.Element;
 export declare const PreviewMirroringSettings: () => import("react").JSX.Element;

package/dist/lib/components/panel/footer/control-center/preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AA8Dd,eAAO,MAAM,eAAe,GAAI,uBAG7B;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAcA,CAAA;AASD,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AAoEnD,eAAO,MAAM,eAAe,GAAI,mBAA6B,KAAK,gCAmBjE,CAAA;AACD,eAAO,MAAM,mBAAmB,mCAY/B,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,gCAmBP,CAAA;AACD,eAAO,MAAM,wBAAwB,mCAYpC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,mBAA+B,KAAK,gCAiBtE,CAAA;AACD,eAAO,MAAM,sBAAsB,mCASlC,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAE9B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAWA,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,WAErC;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAWA,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,gCAiBP,CAAA;AACD,eAAO,MAAM,wBAAwB,mCASpC,CAAA;AAiCD,eAAO,MAAM,kBAAkB,GAAI,WAEhC;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAeA,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAyBvE,CAAA;AAGD,eAAO,MAAM,gBAAgB,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCA4CvE,CAAA"}
+{"version":3,"file":"preview.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/preview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AA8Dd,eAAO,MAAM,eAAe,GAAI,uBAG7B;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB,gCAcA,CAAA;AASD,KAAK,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CAAA;AAoEnD,eAAO,MAAM,eAAe,GAAI,mBAA6B,KAAK,gCAmBjE,CAAA;AACD,eAAO,MAAM,mBAAmB,mCAY/B,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,gCAmBP,CAAA;AACD,eAAO,MAAM,wBAAwB,mCAYpC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,mBAA+B,KAAK,gCAiBtE,CAAA;AACD,eAAO,MAAM,sBAAsB,mCASlC,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,oBAG9B;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,gCAYA,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,oBAGrC;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,gCAYA,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,mBAGlC,KAAK,gCAiBP,CAAA;AACD,eAAO,MAAM,wBAAwB,mCASpC,CAAA;AAiCD,eAAO,MAAM,kBAAkB,GAAI,WAEhC;IACD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,gCAeA,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCAyBvE,CAAA;AAGD,eAAO,MAAM,gBAAgB,GAAI,WAAqB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,gCA4CvE,CAAA"}

package/dist/lib/components/panel/footer/control-center/preview.js

@@ -198,22 +198,24 @@ var PreviewAirDropSettings = () => {
 		onChange: (airdrop) => update({ airdrop })
 	});
 };
-var PreviewFocusTile = ({ label = "Do Not Disturb" }) => {
+var PreviewFocusTile = ({ label = "Do Not Disturb", compact = false }) => {
 	const { state, update } = usePreview();
 	return /* @__PURE__ */ jsx(ActionTile, {
 		label,
 		description: state.focus ? "On" : "Off",
 		icon: /* @__PURE__ */ jsx(Moon, { size: 18 }),
+		compact,
 		isSelected: state.focus,
 		onPress: () => update({ focus: !state.focus })
 	});
 };
-var PreviewStageManagerTile = ({ label = "Stage Manager" }) => {
+var PreviewStageManagerTile = ({ label = "Stage Manager", compact = false }) => {
 	const { state, update } = usePreview();
 	return /* @__PURE__ */ jsx(ActionTile, {
 		label,
 		description: state.stageManager ? "On" : "Off",
 		icon: /* @__PURE__ */ jsx(Widget2, { size: 18 }),
+		compact,
 		isSelected: state.stageManager,
 		onPress: () => update({ stageManager: !state.stageManager })
 	});

package/dist/lib/components/panel/footer/control-center/tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,eAAO,MAAM,UAAU,GAAI,4DAOxB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,gCAwBA,CAAA"}
+{"version":3,"file":"tile.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/tile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQtC,eAAO,MAAM,UAAU,GAAI,4DAOxB;IACD,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,gCAyBA,CAAA"}

package/dist/lib/components/panel/footer/control-center/tile.js

@@ -10,15 +10,20 @@ var ActionTile = ({ label, description, icon, compact = false, isSelected, onPre
 		compact,
 		selected: isSelected
 	}),
-	isIconOnly: compact,
 	variant: "ghost",
 	onPress,
-	children: compact ? icon ?? label : /* @__PURE__ */ jsxs("span", {
-		className: styles.content(),
-		children: [icon && /* @__PURE__ */ jsx("span", {
-			className: styles.icon({ selected: isSelected }),
-			children: icon
-		}), /* @__PURE__ */ jsxs("span", {
+	children: /* @__PURE__ */ jsxs("span", {
+		"data-slot": "tile-content",
+		className: styles.content({ compact }),
+		children: [(icon || compact) && /* @__PURE__ */ jsx("span", {
+			"data-slot": "tile-icon",
+			className: styles.icon({
+				compact,
+				selected: isSelected
+			}),
+			children: icon ?? label
+		}), !compact && /* @__PURE__ */ jsxs("span", {
+			"data-slot": "tile-text",
 			className: styles.text(),
 			children: [/* @__PURE__ */ jsx("span", {
 				className: styles.title(),

package/dist/lib/components/panel/footer/control-center/variant.d.ts

@@ -8,15 +8,19 @@ export declare const controlCenterVariants: import('tailwind-variants').TVReturn
     span: {
         compact: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         standard: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         wide: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         full: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
     };
     presentation: {
@@ -58,6 +62,8 @@ export declare const controlCenterVariants: import('tailwind-variants').TVReturn
     previewTitle: string;
     mediaControls: string;
     connectionIcon: string;
+    galleryPreview: string;
+    gallerySuggestion: string;
 }, undefined, {
     active: {
         true: {
@@ -68,15 +74,19 @@ export declare const controlCenterVariants: import('tailwind-variants').TVReturn
     span: {
         compact: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         standard: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         wide: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         full: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
     };
     presentation: {
@@ -118,6 +128,8 @@ export declare const controlCenterVariants: import('tailwind-variants').TVReturn
     previewTitle: string;
     mediaControls: string;
     connectionIcon: string;
+    galleryPreview: string;
+    gallerySuggestion: string;
 }, import('tailwind-variants').TVReturnTypeLike<{
     active: {
         true: {
@@ -128,15 +140,19 @@ export declare const controlCenterVariants: import('tailwind-variants').TVReturn
     span: {
         compact: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         standard: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         wide: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
         full: {
             tileContainer: string;
+            gallerySuggestion: string;
         };
     };
     presentation: {
@@ -178,6 +194,8 @@ export declare const controlCenterVariants: import('tailwind-variants').TVReturn
     previewTitle: string;
     mediaControls: string;
     connectionIcon: string;
+    galleryPreview: string;
+    gallerySuggestion: string;
 }>>;
 export declare const controlCenterTileVariants: import('tailwind-variants').TVReturnType<{
     selected: {
@@ -190,9 +208,12 @@ export declare const controlCenterTileVariants: import('tailwind-variants').TVRe
     compact: {
         true: {
             button: string;
+            content: string;
+            icon: string;
         };
         false: {
             button: string;
+            icon: string;
         };
     };
 }, {
@@ -213,9 +234,12 @@ export declare const controlCenterTileVariants: import('tailwind-variants').TVRe
     compact: {
         true: {
             button: string;
+            content: string;
+            icon: string;
         };
         false: {
             button: string;
+            icon: string;
         };
     };
 }, {
@@ -236,9 +260,12 @@ export declare const controlCenterTileVariants: import('tailwind-variants').TVRe
     compact: {
         true: {
             button: string;
+            content: string;
+            icon: string;
         };
         false: {
             button: string;
+            icon: string;
         };
     };
 }, {

package/dist/lib/components/panel/footer/control-center/variant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/variant.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DhC,CAAA;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BpC,CAAA;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;cAS7B,CAAA"}
+{"version":3,"file":"variant.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/variant.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwEhC,CAAA;AAEF,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCpC,CAAA;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;cAS7B,CAAA"}

package/dist/lib/components/panel/footer/control-center/variant.js

@@ -14,7 +14,7 @@ var controlCenterVariants = tv({
 		panelHeader: "flex items-center gap-2 px-1 pt-1 pb-2",
 		panelTitle: "text-sm font-semibold capitalize",
 		panelBody: "p-1",
-		home: "grid grid-cols-4 items-center gap-x-2 gap-y-3",
+		home: "grid grid-cols-2 items-center gap-x-2 gap-y-3 min-[420px]:grid-cols-3 sm:grid-cols-4",
 		tileContainer: "min-w-0",
 		optionsList: "flex flex-col gap-1",
 		colorSettings: "flex flex-col gap-3",
@@ -30,7 +30,9 @@ var controlCenterVariants = tv({
 		previewHeader: "flex items-center gap-2 [&>button]:ms-auto",
 		previewTitle: "text-sm font-medium",
 		mediaControls: "flex items-center justify-center gap-2",
-		connectionIcon: "text-muted"
+		connectionIcon: "text-muted",
+		galleryPreview: "mx-auto min-h-0 w-full max-w-72 flex-1 overflow-y-auto p-2",
+		gallerySuggestion: "shrink-0"
 	},
 	variants: {
 		active: {
@@ -38,10 +40,22 @@ var controlCenterVariants = tv({
 			false: {}
 		},
 		span: {
-			compact: { tileContainer: "col-span-1 aspect-square w-full overflow-hidden [&>button]:size-full [&>button>span>span:last-child]:hidden" },
-			standard: { tileContainer: "col-span-2 min-w-0 [&>button]:w-full" },
-			wide: { tileContainer: "col-span-3 min-w-0 [&>button]:w-full" },
-			full: { tileContainer: "col-span-4 min-w-0 [&>button]:w-full" }
+			compact: {
+				tileContainer: "col-span-1 h-14 w-14 justify-self-center",
+				gallerySuggestion: "w-24"
+			},
+			standard: {
+				tileContainer: "col-span-2 min-w-0",
+				gallerySuggestion: "w-[17rem] min-[420px]:w-[11.167rem] sm:w-[8.25rem]"
+			},
+			wide: {
+				tileContainer: "col-span-2 w-full max-w-[12.125rem] min-w-0 justify-self-center min-[420px]:col-span-3",
+				gallerySuggestion: "w-full max-w-[12.125rem]"
+			},
+			full: {
+				tileContainer: "col-span-2 min-w-0 min-[420px]:col-span-3 sm:col-span-4",
+				gallerySuggestion: "w-[17rem]"
+			}
 		},
 		presentation: {
 			popover: { surface: "bg-transparent" },
@@ -57,7 +71,7 @@ var controlCenterTileVariants = tv({
 	slots: {
 		button: "bg-default-hover hover:bg-surface rounded-full",
 		content: "flex min-w-0 items-center gap-2",
-		icon: "bg-surface flex size-10 shrink-0 items-center justify-center rounded-full border shadow-sm",
+		icon: "bg-surface flex size-10 shrink-0 items-center justify-center rounded-full",
 		text: "flex min-w-0 flex-col",
 		title: "truncate text-sm font-medium",
 		description: "text-muted truncate text-xs"
@@ -71,8 +85,15 @@ var controlCenterTileVariants = tv({
 			false: {}
 		},
 		compact: {
-			true: { button: "size-14 shrink-0" },
-			false: { button: "h-auto min-h-14 items-center justify-between px-3 py-2.5 text-start" }
+			true: {
+				button: "bg-surface! hover:bg-surface! size-14 shrink-0 items-center justify-center p-0 shadow-none!",
+				content: "size-full justify-center",
+				icon: "size-full border-0! bg-transparent! shadow-none! ring-0! [&>svg]:size-[1.375rem]"
+			},
+			false: {
+				button: "h-auto min-h-14 items-center justify-between px-3 py-2.5 text-start",
+				icon: "border shadow-sm"
+			}
 		}
 	},
 	defaultVariants: { compact: false }

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

@@ -5,7 +5,7 @@ import { DefaultControlCenter } from "./control-center/default.js";
 import { UserMenu } from "./user-menu.js";
 import { useMemo, useState } from "react";
 import { Badge, Button, Dropdown, 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 { Bell, MenuDots, Settings, VezhamTamizhi } from "@vezham/icons-react";
 //#region src/lib/components/panel/footer/index.tsx
 var footerActionClassName = "text-muted hover:text-foreground h-5 w-5 min-w-0 p-0 [&_svg]:size-5";
@@ -85,7 +85,7 @@ var Footer = ({ user, showAI = false, showControlCenter = false, controlCenter,
 		isOpen: controlCenterOpen,
 		onOpenChange: setControlCenterOpen
 	}), [compact, controlCenterOpen]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Separator, { className: "hidden md:block" }), /* @__PURE__ */ jsxs(Surface, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Separator, { className: "hidden md:block" }), /* @__PURE__ */ jsxs(Surface, {
 		variant: "transparent",
 		className: `flex items-center justify-center gap-2 md:flex-col md:gap-3 ${className ?? ""}`,
 		children: [

package/dist/lib/components/panel/footer/notification-center/index.js

@@ -32,7 +32,7 @@ var NotificationDrawer = forwardRef((props, ref) => {
 	const handleEdit = () => {
 		if (openSettings) {
 			onClose();
-			openSettings("Edit Widgets");
+			openSettings("Widget Center");
 		} else if (onEdit) onEdit();
 		else {
 			onClose();
@@ -44,7 +44,7 @@ var NotificationDrawer = forwardRef((props, ref) => {
 		size: "sm",
 		...getEditButtonProps(),
 		onPress: handleEdit,
-		children: "Edit Widgets"
+		children: "Widget Center"
 	});
 	if (compact) return /* @__PURE__ */ jsx(InfoPanelSheet, {
 		isOpen,