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

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

@@ -0,0 +1,100 @@
+import { Options } from "./options.js";
+import { ActionTile } from "./tile.js";
+import { createContext, useContext, useMemo, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Moon, Sun } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/control-center/appearance.tsx
+var AppearanceContext = createContext(null);
+var subscribeRootAppearance = (onChange) => {
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	const applyAuto = () => {
+		if (document.documentElement.getAttribute("data-theme-mode") === "auto") document.documentElement.classList.toggle("dark", media.matches);
+	};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class", "data-theme-mode"]
+	});
+	media.addEventListener("change", applyAuto);
+	applyAuto();
+	return () => {
+		observer.disconnect();
+		media.removeEventListener("change", applyAuto);
+	};
+};
+var subscribeExternalAppearance = () => () => void 0;
+var getRootDark = () => document.documentElement.classList.contains("dark");
+var getRootAppearance = () => {
+	return `${document.documentElement.getAttribute("data-theme-mode") === "auto" ? "auto" : getRootDark() ? "dark" : "light"}:${getRootDark()}`;
+};
+var getServerAppearance = () => "light:false";
+var setRootThemeMode = (mode) => {
+	document.documentElement.setAttribute("data-theme-mode", mode);
+	document.documentElement.classList.toggle("dark", mode === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches : mode === "dark");
+};
+var setRootDark = (dark) => {
+	setRootThemeMode(dark ? "dark" : "light");
+};
+var AppearanceProvider = ({ appearance, children }) => {
+	const [mode, dark] = useSyncExternalStore(appearance ? subscribeExternalAppearance : subscribeRootAppearance, getRootAppearance, getServerAppearance).split(":");
+	const value = useMemo(() => appearance ?? {
+		isDark: dark === "true",
+		setDark: setRootDark,
+		themeMode: mode === "auto" ? "auto" : dark === "true" ? "dark" : "light",
+		setThemeMode: setRootThemeMode
+	}, [
+		appearance,
+		mode,
+		dark
+	]);
+	return /* @__PURE__ */ jsx(AppearanceContext.Provider, {
+		value,
+		children
+	});
+};
+var useAppearance = () => {
+	const appearance = useContext(AppearanceContext);
+	if (!appearance) throw new Error("Appearance tiles must be rendered inside ControlCenter");
+	return appearance;
+};
+var AppearanceToggle = ({ label }) => {
+	const { isDark, setDark } = useAppearance();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label: label ?? `Switch to ${isDark ? "light" : "dark"} mode`,
+		compact: true,
+		icon: /* @__PURE__ */ jsx(isDark ? Moon : Sun, { size: 20 }),
+		onPress: () => setDark(!isDark)
+	});
+};
+var AppearanceTile = ({ onOpen, label = "Appearance" }) => {
+	const { isDark } = useAppearance();
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: isDark ? "Dark" : "Light",
+		icon: /* @__PURE__ */ jsx(isDark ? Moon : Sun, { size: 16 }),
+		onPress: onOpen
+	});
+};
+var options = [{
+	value: "light",
+	label: "Light"
+}, {
+	value: "dark",
+	label: "Dark"
+}];
+var AppearanceSettings = () => {
+	const { isDark, themeMode, setDark, setThemeMode } = useAppearance();
+	return /* @__PURE__ */ jsx(Options, {
+		value: themeMode ?? (isDark ? "dark" : "light"),
+		options: setThemeMode ? [...options, {
+			value: "auto",
+			label: "Auto"
+		}] : options,
+		onChange: (value) => {
+			if (setThemeMode && (value === "auto" || value === "light" || value === "dark")) setThemeMode(value);
+			else setDark(value === "dark");
+		}
+	});
+};
+//#endregion
+export { AppearanceProvider, AppearanceSettings, AppearanceTile, AppearanceToggle, useAppearance };

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

@@ -0,0 +1,13 @@
+import { type ToolbarActionEvent } from '../../../toolbar-actions';
+import type { ControlCenterConfig, ControlCenterContext, ControlCenterProps, TileDefinition, TileRegistration } from './types';
+export type ControlCenterActionEvent = ToolbarActionEvent & {
+    tileId: string;
+};
+export type ConfiguredControlCenterProps<Context extends object> = Omit<ControlCenterProps<Context & ControlCenterContext>, 'tiles' | 'editControls'> & {
+    config: ControlCenterConfig;
+    registrations?: Readonly<Record<string, TileRegistration<Context & ControlCenterContext>>>;
+    onAction?: (event: ControlCenterActionEvent) => void;
+};
+export declare const resolveTiles: <Context extends object>(config: ControlCenterConfig, onAction: (tileId: string, actionKey: string) => void, registrations?: Readonly<Record<string, TileRegistration<Context>>>) => readonly TileDefinition<Context>[];
+export declare const ConfiguredControlCenter: <Context extends object>({ config, registrations, onAction, ...props }: ConfiguredControlCenterProps<Context>) => import("react").JSX.Element;
+//# sourceMappingURL=configured.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"configured.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/configured.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,kBAAkB,EAExB,MAAM,0BAA0B,CAAA;AA8BjC,OAAO,KAAK,EAEV,mBAAmB,EACnB,oBAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EACjB,MAAM,SAAS,CAAA;AAwEhB,MAAM,MAAM,wBAAwB,GAAG,kBAAkB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAA;AAC9E,MAAM,MAAM,4BAA4B,CAAC,OAAO,SAAS,MAAM,IAAI,IAAI,CACrE,kBAAkB,CAAC,OAAO,GAAG,oBAAoB,CAAC,EAClD,OAAO,GAAG,cAAc,CACzB,GAAG;IACF,MAAM,EAAE,mBAAmB,CAAA;IAC3B,aAAa,CAAC,EAAE,QAAQ,CACtB,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,OAAO,GAAG,oBAAoB,CAAC,CAAC,CACjE,CAAA;IACD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAA;CACrD,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,SAAS,MAAM,EACjD,QAAQ,mBAAmB,EAC3B,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,EACrD,gBAAe,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAM,KACtE,SAAS,cAAc,CAAC,OAAO,CAAC,EA8C/B,CAAA;AAEJ,eAAO,MAAM,uBAAuB,GAAI,OAAO,SAAS,MAAM,EAAE,+CAK7D,4BAA4B,CAAC,OAAO,CAAC,gCA4BvC,CAAA"}

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

@@ -0,0 +1,157 @@
+import { ToolbarActionsContext } from "../../../toolbar-actions/index.js";
+import { AppearanceSettings, AppearanceTile, AppearanceToggle } from "./appearance.js";
+import { PreviewAirDropSettings, PreviewAirDropTile, PreviewBluetoothSettings, PreviewBluetoothTile, PreviewDisplayTile, PreviewFocusTile, PreviewMediaTile, PreviewMirroringSettings, PreviewMirroringTile, PreviewSoundTile, PreviewStageManagerTile, PreviewWiFiSettings, PreviewWiFiTile } from "./preview.js";
+import { ControlCenter } from "./control-center.js";
+import { DirectionSettings, DirectionTile, DirectionToggle } from "./direction.js";
+import { DocumentLanguageSettings, DocumentLanguageTile, LanguageSettings, LanguageTile } from "./language.js";
+import { ThemeSettings, ThemeTile } from "./theme.js";
+import { useCallback, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/control-center/configured.tsx
+var ConfiguredLanguageTile = ({ onOpen, label, language, i18n }) => language ? /* @__PURE__ */ jsx(LanguageTile, {
+	language,
+	label,
+	onOpen
+}) : /* @__PURE__ */ jsx(DocumentLanguageTile, {
+	i18n,
+	label,
+	onOpen
+});
+var ConfiguredLanguageSettings = ({ language, i18n }) => language ? /* @__PURE__ */ jsx(LanguageSettings, { language }) : /* @__PURE__ */ jsx(DocumentLanguageSettings, { i18n });
+var builtins = {
+	"direction-toggle": {
+		Tile: DirectionToggle,
+		label: "Direction"
+	},
+	"appearance-toggle": {
+		Tile: AppearanceToggle,
+		label: "Appearance"
+	},
+	appearance: {
+		Tile: AppearanceTile,
+		Panel: AppearanceSettings,
+		label: "Appearance"
+	},
+	theme: {
+		Tile: ThemeTile,
+		Panel: ThemeSettings,
+		label: "Theme"
+	},
+	direction: {
+		Tile: DirectionTile,
+		Panel: DirectionSettings,
+		label: "Direction"
+	},
+	language: {
+		Tile: ConfiguredLanguageTile,
+		Panel: ConfiguredLanguageSettings,
+		label: "Language"
+	},
+	"preview-wifi": {
+		Tile: PreviewWiFiTile,
+		Panel: PreviewWiFiSettings,
+		label: "Wi-Fi"
+	},
+	"preview-bluetooth": {
+		Tile: PreviewBluetoothTile,
+		Panel: PreviewBluetoothSettings,
+		label: "Bluetooth"
+	},
+	"preview-airdrop": {
+		Tile: PreviewAirDropTile,
+		Panel: PreviewAirDropSettings,
+		label: "AirDrop"
+	},
+	"preview-focus": {
+		Tile: PreviewFocusTile,
+		label: "Do Not Disturb"
+	},
+	"preview-stage-manager": {
+		Tile: PreviewStageManagerTile,
+		label: "Stage Manager"
+	},
+	"preview-mirroring": {
+		Tile: PreviewMirroringTile,
+		Panel: PreviewMirroringSettings,
+		label: "Screen Mirroring"
+	},
+	"preview-media": {
+		Tile: PreviewMediaTile,
+		label: "Media"
+	},
+	"preview-display": {
+		Tile: PreviewDisplayTile,
+		label: "Display"
+	},
+	"preview-sound": {
+		Tile: PreviewSoundTile,
+		label: "Sound"
+	}
+};
+var resolveTiles = (config, onAction, registrations = {}) => config.tiles.map((tile) => {
+	const { id, span, label, description, editable } = tile;
+	const registration = tile.type === "custom" ? registrations[id] : builtins[tile.type];
+	const base = {
+		id,
+		span,
+		label: label ?? registration?.label ?? id,
+		editable: editable ?? true
+	};
+	const emit = () => {
+		if (tile.type === "custom") onAction(id, tile.action);
+	};
+	if (!registration) {
+		if (tile.type !== "custom") throw new Error(`Unknown control center tile type: ${tile.type}`);
+		return {
+			...base,
+			label: label ?? id,
+			description,
+			onAction: emit
+		};
+	}
+	const { Tile, Panel } = registration;
+	if (Panel) return {
+		...base,
+		title: base.label,
+		Panel: (props) => /* @__PURE__ */ jsx(Panel, { ...props }),
+		Tile: (props) => /* @__PURE__ */ jsx(Tile, {
+			...props,
+			label: base.label,
+			onAction: emit
+		})
+	};
+	return {
+		...base,
+		Tile: (props) => /* @__PURE__ */ jsx(Tile, {
+			...props,
+			label: tile.type === "appearance-toggle" || tile.type === "direction-toggle" ? label : base.label,
+			onOpen: emit,
+			onAction: emit
+		})
+	};
+});
+var ConfiguredControlCenter = ({ config, registrations, onAction, ...props }) => {
+	const actions = useContext(ToolbarActionsContext);
+	const emit = useCallback((tileId, actionKey) => {
+		const event = {
+			tileId,
+			actionKey,
+			pageKey: "control-center",
+			pathname: window.location.pathname
+		};
+		if (onAction) onAction(event);
+		else if (!actions?.emit(event)) throw new Error(`Unhandled control center action: ${actionKey}`);
+	}, [actions, onAction]);
+	const tiles = useMemo(() => resolveTiles(config, emit, registrations), [
+		config,
+		emit,
+		registrations
+	]);
+	return /* @__PURE__ */ jsx(ControlCenter, {
+		...props,
+		tiles,
+		editControls: config.editControls
+	});
+};
+//#endregion
+export { ConfiguredControlCenter, resolveTiles };

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

@@ -0,0 +1,8 @@
+import type { ControlCenterProps, TileDefinition } from './types';
+export declare const ControlCenter: <Context extends object>({ context, tiles, trigger, placement, onOpenChange, appearance, preview, editControls }: ControlCenterProps<Context>) => import("react").JSX.Element;
+export declare const TileContent: <Context extends object>({ entry, context, onOpen }: {
+    entry: TileDefinition<Context>;
+    context: Context;
+    onOpen: () => void;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=control-center.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"control-center.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/control-center.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAcjE,eAAO,MAAM,aAAa,GAAI,OAAO,SAAS,MAAM,EAAE,yFASnD,kBAAkB,CAAC,OAAO,CAAC,gCAgH7B,CAAA;AAkDD,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,MAAM,EAAE,4BAIjD;IACD,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAA;IAC9B,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,gCAkBA,CAAA"}

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

@@ -0,0 +1,180 @@
+import { controlCenterVariants } from "./variant.js";
+import { ActionTile } from "./tile.js";
+import { AppearanceProvider } from "./appearance.js";
+import { useSettingsNavigation } from "../../../../pages/settings/navigation.js";
+import { useTileEditor } from "./editor.js";
+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 { 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", {
+	"aria-hidden": "true",
+	className: styles.edgeHighlight()
+}), /* @__PURE__ */ jsx("div", {
+	"aria-hidden": "true",
+	className: styles.surfaceHighlight()
+})] });
+var ControlCenter = ({ context, tiles, trigger, placement = "bottom end", onOpenChange, appearance, preview = false, editControls = false }) => {
+	const isCompact = useMediaQuery("(width < 768px)", { initializeWithValue: false });
+	const footer = useContext(FooterControlCenterContext);
+	const isFooterTrigger = Boolean(footer);
+	const [localOpen, setLocalOpen] = useState(false);
+	const isOpen = footer?.isOpen ?? localOpen;
+	const setOpen = footer?.onOpenChange ?? setLocalOpen;
+	const [panel, setPanel] = useState(null);
+	const { visibleTiles } = useTileEditor(tiles);
+	const openSettings = useSettingsNavigation();
+	const changeOpen = (nextOpen) => {
+		setOpen(nextOpen);
+		if (!nextOpen) setPanel(null);
+		onOpenChange?.(nextOpen);
+	};
+	const button = trigger ?? /* @__PURE__ */ jsx(Button, {
+		"aria-label": "Control center",
+		isIconOnly: true,
+		size: "sm",
+		variant: "ghost",
+		className: isFooterTrigger ? footerTriggerClassName : void 0,
+		children: /* @__PURE__ */ jsx(Settings, {
+			size: isFooterTrigger ? 20 : 16,
+			className: styles.triggerIcon()
+		})
+	});
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ScrollShadow, {
+		className: styles.viewport(),
+		hideScrollBar: true,
+		children: [preview && /* @__PURE__ */ jsx("p", {
+			className: styles.previewNotice(),
+			children: "UI preview · Device controls are simulated."
+		}), /* @__PURE__ */ jsx(PanelOutlet, {
+			context,
+			tiles: visibleTiles,
+			panel,
+			onPanelChange: setPanel
+		})]
+	}, panel ?? "home"), !panel && editControls && openSettings && /* @__PURE__ */ jsx("div", {
+		className: "flex shrink-0 justify-center pt-4",
+		children: /* @__PURE__ */ jsx(Button, {
+			size: "sm",
+			variant: "secondary",
+			className: "rounded-full",
+			onPress: () => {
+				changeOpen(false);
+				openSettings("Edit Controls");
+			},
+			children: "Edit Controls"
+		})
+	})] });
+	return /* @__PURE__ */ jsx(AppearanceProvider, {
+		appearance,
+		children: /* @__PURE__ */ jsx(PreviewProvider, {
+			enabled: preview,
+			children: isCompact ? /* @__PURE__ */ jsxs(Sheet, {
+				isOpen,
+				onOpenChange: changeOpen,
+				placement: "bottom",
+				isHandleOnly: true,
+				shouldAutoFocus: true,
+				children: [footer?.compact ? null : /* @__PURE__ */ jsx(Sheet.Trigger, { children: button }), /* @__PURE__ */ jsx(Sheet.Backdrop, {
+					className: styles.backdrop(),
+					variant: "blur",
+					children: /* @__PURE__ */ jsx(Sheet.Content, {
+						className: styles.sheetContent(),
+						children: /* @__PURE__ */ jsxs(Sheet.Dialog, {
+							className: styles.surface({ presentation: "sheet" }),
+							children: [
+								/* @__PURE__ */ jsx(GlassHighlights, {}),
+								/* @__PURE__ */ jsx(Sheet.Handle, {}),
+								/* @__PURE__ */ jsx(Sheet.CloseTrigger, { "aria-label": "Close Control Center" }),
+								/* @__PURE__ */ jsx(Sheet.Header, {
+									className: styles.sheetHeader(),
+									children: /* @__PURE__ */ jsx(Sheet.Heading, {
+										className: styles.sheetHeading(),
+										children: "Control Center"
+									})
+								}),
+								/* @__PURE__ */ jsx(Sheet.Body, {
+									className: styles.content({ presentation: "sheet" }),
+									children: content
+								})
+							]
+						})
+					})
+				})]
+			}) : /* @__PURE__ */ jsxs(Popover, {
+				isOpen,
+				onOpenChange: changeOpen,
+				children: [footer?.compact ? null : button, /* @__PURE__ */ jsxs(Popover.Content, {
+					className: styles.surface(),
+					offset: 8,
+					placement,
+					children: [/* @__PURE__ */ jsx(GlassHighlights, {}), /* @__PURE__ */ jsx(Popover.Dialog, {
+						"aria-label": "Control Center",
+						className: styles.content(),
+						children: content
+					})]
+				})]
+			})
+		})
+	});
+};
+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", {
+			className: styles.panelHeader(),
+			children: [/* @__PURE__ */ jsx(Button, {
+				"aria-label": "Back to Control Center",
+				isIconOnly: true,
+				size: "sm",
+				variant: "ghost",
+				onPress: () => onPanelChange(null),
+				children: /* @__PURE__ */ jsx(AltArrowLeft, { size: 16 })
+			}), /* @__PURE__ */ jsx("span", {
+				className: styles.panelTitle(),
+				children: entry.title
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: styles.panelBody(),
+			children: /* @__PURE__ */ jsx(Content, { ...context }, panel)
+		})] });
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.home(),
+		children: tiles.map((entry) => /* @__PURE__ */ jsx("div", {
+			className: styles.tileContainer({ span: entry.span }),
+			children: /* @__PURE__ */ jsx(TileContent, {
+				entry,
+				context,
+				onOpen: () => onPanelChange(entry.id)
+			})
+		}, entry.id))
+	});
+};
+var TileContent = ({ entry, context, onOpen }) => {
+	if (entry.onAction) return /* @__PURE__ */ jsx(ActionTile, {
+		label: entry.label,
+		description: entry.description,
+		icon: entry.icon,
+		compact: entry.span === "compact",
+		onPress: () => entry.onAction(context)
+	});
+	if (entry.Panel) {
+		const Tile = entry.Tile;
+		return /* @__PURE__ */ jsx(Tile, {
+			...context,
+			onOpen
+		});
+	}
+	const Tile = entry.Tile;
+	return /* @__PURE__ */ jsx(Tile, { ...context });
+};
+//#endregion
+export { ControlCenter, TileContent };

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

@@ -0,0 +1,3 @@
+import type { ControlCenterProps } from './types';
+export declare const DefaultControlCenter: (props: Pick<ControlCenterProps<object>, "placement" | "appearance" | "onOpenChange">) => import("react").JSX.Element;
+//# sourceMappingURL=default.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/default.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAkB,MAAM,SAAS,CAAA;AA0BjE,eAAO,MAAM,oBAAoB,GAC/B,OAAO,IAAI,CACT,kBAAkB,CAAC,MAAM,CAAC,EAC1B,WAAW,GAAG,YAAY,GAAG,cAAc,CAC5C,gCACsE,CAAA"}

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

@@ -0,0 +1,37 @@
+import { AppearanceSettings, AppearanceTile } from "./appearance.js";
+import { ControlCenter } from "./control-center.js";
+import { DirectionSettings, DirectionTile } from "./direction.js";
+import { ThemeSettings, ThemeTile } from "./theme.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/lib/components/panel/footer/control-center/default.tsx
+var tiles = [
+	{
+		id: "appearance",
+		span: "full",
+		Tile: AppearanceTile,
+		title: "Appearance",
+		Panel: AppearanceSettings
+	},
+	{
+		id: "theme",
+		span: "full",
+		Tile: ThemeTile,
+		title: "Theme",
+		Panel: ThemeSettings
+	},
+	{
+		id: "direction",
+		span: "full",
+		Tile: DirectionTile,
+		title: "Direction",
+		Panel: DirectionSettings
+	}
+];
+var DefaultControlCenter = (props) => /* @__PURE__ */ jsx(ControlCenter, {
+	context: {},
+	tiles,
+	editControls: true,
+	...props
+});
+//#endregion
+export { DefaultControlCenter };

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,40 @@
+import { Options } from "./options.js";
+import { ActionTile } from "./tile.js";
+import { useRootAttribute } from "./document.js";
+import { jsx } from "react/jsx-runtime";
+import { AlignLeft, AlignRight } from "@vezham/icons-react";
+//#region src/lib/components/panel/footer/control-center/direction.tsx
+var options = [{
+	value: "ltr",
+	label: "LTR"
+}, {
+	value: "rtl",
+	label: "RTL"
+}];
+var DirectionTile = ({ onOpen, label = "Direction" }) => {
+	const { value } = useRootAttribute("dir", "ltr");
+	const Icon = value === "rtl" ? AlignRight : AlignLeft;
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label,
+		description: value.toUpperCase(),
+		icon: /* @__PURE__ */ jsx(Icon, { size: 18 }),
+		onPress: onOpen
+	});
+};
+var DirectionSettings = () => {
+	return /* @__PURE__ */ jsx(Options, {
+		...useRootAttribute("dir", "ltr"),
+		options
+	});
+};
+var DirectionToggle = ({ label }) => {
+	const { value, onChange } = useRootAttribute("dir", "ltr");
+	return /* @__PURE__ */ jsx(ActionTile, {
+		label: label ?? `Switch to ${value === "rtl" ? "LTR" : "RTL"}`,
+		compact: true,
+		icon: /* @__PURE__ */ jsx(value === "rtl" ? AlignRight : AlignLeft, { size: 20 }),
+		onPress: () => onChange(value === "rtl" ? "ltr" : "rtl")
+	});
+};
+//#endregion
+export { DirectionSettings, DirectionTile, DirectionToggle };

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

@@ -0,0 +1,5 @@
+export declare const useRootAttribute: (attribute: "dir" | "lang" | "data-vx-theme-color", fallback: string) => {
+    value: string;
+    onChange: (next: string) => void;
+};
+//# sourceMappingURL=document.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/components/panel/footer/control-center/document.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAC3B,WAAW,KAAK,GAAG,MAAM,GAAG,qBAAqB,EACjD,UAAU,MAAM;;qBAqBG,MAAM;CAI1B,CAAA"}

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

@@ -0,0 +1,19 @@
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/lib/components/panel/footer/control-center/document.ts
+var useRootAttribute = (attribute, fallback) => {
+	return {
+		value: useSyncExternalStore(useCallback((onChange) => {
+			const observer = new MutationObserver(onChange);
+			observer.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: [attribute]
+			});
+			return () => observer.disconnect();
+		}, [attribute]), useCallback(() => document.documentElement.getAttribute(attribute) || fallback, [attribute, fallback]), useCallback(() => fallback, [fallback])),
+		onChange: (next) => {
+			document.documentElement.setAttribute(attribute, next);
+		}
+	};
+};
+//#endregion
+export { useRootAttribute };

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

@@ -0,0 +1,25 @@
+export type EditorState = {
+    items: readonly {
+        id: string;
+        label: string;
+        visible: boolean;
+        editable: boolean;
+    }[];
+    onVisibilityChange: (id: string, visible: boolean) => void;
+    onMove: (id: string, offset: number) => void;
+    onReset: () => void;
+    onPlace?: (id: string, target?: string) => void;
+};
+type EditableTile = {
+    id: string;
+    label?: string;
+    title?: string;
+    editable?: boolean;
+};
+export declare const useTileEditor: <Tile extends EditableTile>(tiles: readonly Tile[], storageKey?: string) => {
+    editor: EditorState;
+    orderedTiles: Tile[];
+    visibleTiles: Tile[];
+};
+export {};
+//# sourceMappingURL=editor.d.ts.map

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

@@ -0,0 +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"}