@zendir/ui 0.5.0 → 0.6.0

package/dist/react/core/navigation/AppBar.js

@@ -1,817 +1,839 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { memo, useState, useRef, useEffect, useMemo } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-import { useDisplaySettingsOptional } from "../../context/DisplaySettingsContext.js";
 import { classNames, safeAccentText } from "../../utils/index.js";
+import { useBreakpoint } from "../layout/useBreakpoint.js";
+import { Tooltip } from "../overlays/Tooltip.js";
 import { AstroIcon } from "../display/AstroIcon.js";
+import { useDisplaySettingsOptional } from "../../context/DisplaySettingsContext.js";
 import { ColorPickerPanel } from "../widgets/ColorPickerPanel.js";
-import { Tooltip } from "../overlays/Tooltip.js";
-import { useBreakpoint } from "../layout/useBreakpoint.js";
-const THEME_VARIANTS = [
-  { key: "hybrid", label: "Zen (Hybrid)", tooltip: "Default theme - Astro status colors with purple accents" },
-  { key: "purple-hue", label: "Zen (Purple Hue)", tooltip: "Purple accent theme - vibrant purple tones" },
-  { key: "astro", label: "Astro", tooltip: "Astro UX Design System theme - dark blue tones" },
-  { key: "transparent", label: "Glass", tooltip: "Glassmorphism theme - transparent with blur effects" },
-  { key: "transparent-bold", label: "Bold", tooltip: "Bold glass theme - stronger transparency effects" },
-  { key: "transparent-minimal", label: "Minimal", tooltip: "Minimal glass theme - ultra-subtle borders, clean surfaces" }
+import React, { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/navigation/AppBar.tsx
+/**
+* @zendir/ui - AppBar Component
+*
+* Enterprise-grade application bar with integrated theme controls,
+* compact mode toggle, and display settings management.
+*
+* Features:
+* - Customizable branding (logo, name, domain, version)
+* - Dark/light mode toggle
+* - Theme variant selector
+* - Color picker (accent + glass tint)
+* - Compact mode toggle (affects all cards globally)
+* - Integrates with DisplaySettingsProvider
+* - Responsive design
+* - AstroUXDS compliant
+*
+* @example
+* ```tsx
+* import { AppBar, ThemeProvider, DisplaySettingsProvider } from '@zendir/ui';
+*
+* <ThemeProvider>
+*   <DisplaySettingsProvider>
+*     <AppBar
+*       appName="Mission Control"
+*       appDomain="NASA"
+*       appVersion="1.0.0"
+*       showThemeControls
+*       showCompactToggle
+*     />
+*     <App />
+*   </DisplaySettingsProvider>
+* </ThemeProvider>
+* ```
+*/
+var THEME_VARIANTS = [
+	{
+		key: "hybrid",
+		label: "Zen (Hybrid)",
+		tooltip: "Default theme - Astro status colors with purple accents"
+	},
+	{
+		key: "purple-hue",
+		label: "Zen (Purple Hue)",
+		tooltip: "Purple accent theme - vibrant purple tones"
+	},
+	{
+		key: "astro",
+		label: "Astro",
+		tooltip: "Astro UX Design System theme - dark blue tones"
+	},
+	{
+		key: "transparent",
+		label: "Glass",
+		tooltip: "Glassmorphism theme - transparent with blur effects"
+	},
+	{
+		key: "transparent-bold",
+		label: "Bold",
+		tooltip: "Bold glass theme - stronger transparency effects"
+	},
+	{
+		key: "transparent-minimal",
+		label: "Minimal",
+		tooltip: "Minimal glass theme - ultra-subtle borders, clean surfaces"
+	}
 ];
-const ModeToggle = memo(function ModeToggle2({ mode, onToggle, tokens }) {
-  const isDark = mode === "dark";
-  const tooltipText = isDark ? "Switch to Light Mode" : "Switch to Dark Mode";
-  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipText, placement: "bottom", children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: onToggle,
-      "aria-label": tooltipText,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 32,
-        height: 32,
-        padding: 0,
-        border: "none",
-        borderRadius: tokens.borderRadius.md,
-        backgroundColor: "rgba(255,255,255,0.08)",
-        color: tokens.colors.text.primary,
-        cursor: "pointer",
-        transition: "all 0.15s ease"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.15)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.08)";
-      },
-      children: /* @__PURE__ */ jsx(
-        AstroIcon,
-        {
-          name: isDark ? "brightness-3" : "brightness-high",
-          size: 16,
-          color: tokens.colors.text.primary
-        }
-      )
-    }
-  ) });
+var ModeToggle = memo(function ModeToggle({ mode, onToggle, tokens }) {
+	const isDark = mode === "dark";
+	const tooltipText = isDark ? "Switch to Light Mode" : "Switch to Dark Mode";
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltipText,
+		placement: "bottom",
+		children: /* @__PURE__ */ jsx("button", {
+			onClick: onToggle,
+			"aria-label": tooltipText,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: 32,
+				height: 32,
+				padding: 0,
+				border: "none",
+				borderRadius: tokens.borderRadius.md,
+				backgroundColor: "rgba(255,255,255,0.08)",
+				color: tokens.colors.text.primary,
+				cursor: "pointer",
+				transition: "all 0.15s ease"
+			},
+			onMouseEnter: (e) => {
+				e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.15)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.08)";
+			},
+			children: /* @__PURE__ */ jsx(AstroIcon, {
+				name: isDark ? "brightness-3" : "brightness-high",
+				size: 16,
+				color: tokens.colors.text.primary
+			})
+		})
+	});
 });
-const CompactToggle = memo(function CompactToggle2({ isCompact, onToggle, tokens }) {
-  const tooltipText = isCompact ? "Switch to Expanded View" : "Switch to Compact View";
-  return /* @__PURE__ */ jsx(Tooltip, { content: tooltipText, placement: "bottom", children: /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: onToggle,
-      "aria-label": tooltipText,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: 32,
-        height: 32,
-        padding: 0,
-        border: "none",
-        borderRadius: tokens.borderRadius.md,
-        backgroundColor: isCompact ? "rgba(139, 92, 246, 0.25)" : "rgba(255,255,255,0.08)",
-        color: isCompact ? "#a78bfa" : tokens.colors.text.primary,
-        cursor: "pointer",
-        transition: "all 0.15s ease"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = isCompact ? "rgba(139, 92, 246, 0.35)" : "rgba(255,255,255,0.15)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = isCompact ? "rgba(139, 92, 246, 0.25)" : "rgba(255,255,255,0.08)";
-      },
-      children: /* @__PURE__ */ jsx(
-        AstroIcon,
-        {
-          name: isCompact ? "view-comfy" : "view-module",
-          size: 16,
-          color: isCompact ? "#a78bfa" : tokens.colors.text.primary
-        }
-      )
-    }
-  ) });
+var CompactToggle = memo(function CompactToggle({ isCompact, onToggle, tokens }) {
+	const tooltipText = isCompact ? "Switch to Expanded View" : "Switch to Compact View";
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: tooltipText,
+		placement: "bottom",
+		children: /* @__PURE__ */ jsx("button", {
+			onClick: onToggle,
+			"aria-label": tooltipText,
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				width: 32,
+				height: 32,
+				padding: 0,
+				border: "none",
+				borderRadius: tokens.borderRadius.md,
+				backgroundColor: isCompact ? `${tokens.colors.accent.primary}40` : "rgba(255,255,255,0.08)",
+				color: isCompact ? tokens.colors.accent.secondary : tokens.colors.text.primary,
+				cursor: "pointer",
+				transition: "all 0.15s ease"
+			},
+			onMouseEnter: (e) => {
+				e.currentTarget.style.backgroundColor = isCompact ? `${tokens.colors.accent.primary}59` : "rgba(255,255,255,0.15)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.backgroundColor = isCompact ? `${tokens.colors.accent.primary}40` : "rgba(255,255,255,0.08)";
+			},
+			children: /* @__PURE__ */ jsx(AstroIcon, {
+				name: isCompact ? "view-comfy" : "view-module",
+				size: 16,
+				color: isCompact ? tokens.colors.accent.secondary : tokens.colors.text.primary
+			})
+		})
+	});
 });
-const ThemeSelector = memo(function ThemeSelector2({ currentTheme, onSelect, tokens }) {
-  const safeAccentBg = useMemo(() => {
-    const hex = tokens.colors.accent.primary.replace("#", "");
-    if (hex.length < 6) return tokens.colors.accent.primary;
-    const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-    const r = parseInt(hex.slice(0, 2), 16) / 255;
-    const g = parseInt(hex.slice(2, 4), 16) / 255;
-    const b = parseInt(hex.slice(4, 6), 16) / 255;
-    const L = 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-    if (1.05 / (L + 0.05) >= 4.5) return tokens.colors.accent.primary;
-    const factor = 0.88;
-    const dr = Math.min(255, Math.round(r * 255 * factor));
-    const dg = Math.min(255, Math.round(g * 255 * factor));
-    const db = Math.min(255, Math.round(b * 255 * factor));
-    return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
-  }, [tokens.colors.accent.primary]);
-  const coreThemes = THEME_VARIANTS.filter((t) => !t.key.startsWith("transparent"));
-  const glassThemes = THEME_VARIANTS.filter((t) => t.key.startsWith("transparent"));
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: 4,
-        padding: 2,
-        backgroundColor: "rgba(255,255,255,0.05)",
-        borderRadius: tokens.borderRadius.md
-      },
-      role: "group",
-      "aria-label": "Theme selector",
-      children: [
-        coreThemes.map(({ key, label, tooltip }) => /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onSelect(key),
-            "aria-label": `Select ${label} theme`,
-            style: {
-              padding: "4px 10px",
-              border: "none",
-              borderRadius: tokens.borderRadius.sm,
-              backgroundColor: currentTheme === key ? safeAccentBg : "transparent",
-              color: currentTheme === key ? "#ffffff" : tokens.colors.text.secondary,
-              fontSize: "0.6875rem",
-              // 11px in rem
-              fontWeight: currentTheme === key ? 500 : 400,
-              // AstroUXDS: 500 (medium) not 600
-              cursor: "pointer",
-              transition: "all 0.15s ease",
-              whiteSpace: "nowrap"
-            },
-            onMouseEnter: (e) => {
-              if (currentTheme !== key) {
-                e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
-              }
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = currentTheme === key ? safeAccentBg : "transparent";
-            },
-            children: label
-          }
-        ) }, key)),
-        /* @__PURE__ */ jsx("div", { style: { width: 1, height: 16, backgroundColor: "rgba(255,255,255,0.15)", margin: "0 2px" } }),
-        glassThemes.map(({ key, label, tooltip }) => /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: "bottom", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onSelect(key),
-            "aria-label": `Select ${label} theme`,
-            style: {
-              padding: "4px 10px",
-              border: "none",
-              borderRadius: tokens.borderRadius.sm,
-              backgroundColor: currentTheme === key ? safeAccentBg : "transparent",
-              color: currentTheme === key ? "#ffffff" : tokens.colors.text.secondary,
-              fontSize: "0.6875rem",
-              // 11px in rem
-              fontWeight: currentTheme === key ? 500 : 400,
-              // AstroUXDS: 500 (medium) not 600
-              cursor: "pointer",
-              transition: "all 0.15s ease",
-              whiteSpace: "nowrap"
-            },
-            onMouseEnter: (e) => {
-              if (currentTheme !== key) {
-                e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
-              }
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.backgroundColor = currentTheme === key ? safeAccentBg : "transparent";
-            },
-            children: label
-          }
-        ) }, key))
-      ]
-    }
-  );
+var ThemeSelector = memo(function ThemeSelector({ currentTheme, onSelect, tokens }) {
+	const safeAccentBg = useMemo(() => {
+		const hex = tokens.colors.accent.primary.replace("#", "");
+		if (hex.length < 6) return tokens.colors.accent.primary;
+		const toLinear = (c) => c <= .03928 ? c / 12.92 : Math.pow((c + .055) / 1.055, 2.4);
+		const r = parseInt(hex.slice(0, 2), 16) / 255;
+		const g = parseInt(hex.slice(2, 4), 16) / 255;
+		const b = parseInt(hex.slice(4, 6), 16) / 255;
+		if (1.05 / (.2126 * toLinear(r) + .7152 * toLinear(g) + .0722 * toLinear(b) + .05) >= 4.5) return tokens.colors.accent.primary;
+		const factor = .88;
+		const dr = Math.min(255, Math.round(r * 255 * factor));
+		const dg = Math.min(255, Math.round(g * 255 * factor));
+		const db = Math.min(255, Math.round(b * 255 * factor));
+		return `#${dr.toString(16).padStart(2, "0")}${dg.toString(16).padStart(2, "0")}${db.toString(16).padStart(2, "0")}`;
+	}, [tokens.colors.accent.primary]);
+	const coreThemes = THEME_VARIANTS.filter((t) => !t.key.startsWith("transparent"));
+	const glassThemes = THEME_VARIANTS.filter((t) => t.key.startsWith("transparent"));
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 4,
+			padding: 2,
+			backgroundColor: "rgba(255,255,255,0.05)",
+			borderRadius: tokens.borderRadius.md
+		},
+		role: "group",
+		"aria-label": "Theme selector",
+		children: [
+			coreThemes.map(({ key, label, tooltip }) => /* @__PURE__ */ jsx(Tooltip, {
+				content: tooltip,
+				placement: "bottom",
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => onSelect(key),
+					"aria-label": `Select ${label} theme`,
+					style: {
+						padding: "4px 10px",
+						border: "none",
+						borderRadius: tokens.borderRadius.sm,
+						backgroundColor: currentTheme === key ? safeAccentBg : "transparent",
+						color: currentTheme === key ? "#ffffff" : tokens.colors.text.secondary,
+						fontSize: "0.6875rem",
+						fontWeight: currentTheme === key ? 500 : 400,
+						cursor: "pointer",
+						transition: "all 0.15s ease",
+						whiteSpace: "nowrap"
+					},
+					onMouseEnter: (e) => {
+						if (currentTheme !== key) e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.backgroundColor = currentTheme === key ? safeAccentBg : "transparent";
+					},
+					children: label
+				})
+			}, key)),
+			/* @__PURE__ */ jsx("div", { style: {
+				width: 1,
+				height: 16,
+				backgroundColor: "rgba(255,255,255,0.15)",
+				margin: "0 2px"
+			} }),
+			glassThemes.map(({ key, label, tooltip }) => /* @__PURE__ */ jsx(Tooltip, {
+				content: tooltip,
+				placement: "bottom",
+				children: /* @__PURE__ */ jsx("button", {
+					onClick: () => onSelect(key),
+					"aria-label": `Select ${label} theme`,
+					style: {
+						padding: "4px 10px",
+						border: "none",
+						borderRadius: tokens.borderRadius.sm,
+						backgroundColor: currentTheme === key ? safeAccentBg : "transparent",
+						color: currentTheme === key ? "#ffffff" : tokens.colors.text.secondary,
+						fontSize: "0.6875rem",
+						fontWeight: currentTheme === key ? 500 : 400,
+						cursor: "pointer",
+						transition: "all 0.15s ease",
+						whiteSpace: "nowrap"
+					},
+					onMouseEnter: (e) => {
+						if (currentTheme !== key) e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.1)";
+					},
+					onMouseLeave: (e) => {
+						e.currentTarget.style.backgroundColor = currentTheme === key ? safeAccentBg : "transparent";
+					},
+					children: label
+				})
+			}, key))
+		]
+	});
 });
-const AccentBordersToggle = memo(function AccentBordersToggle2({ enabled, onToggle, tokens }) {
-  return /* @__PURE__ */ jsx(Tooltip, { content: enabled ? "Accent borders enabled - Click to disable" : "Accent borders disabled - Click to enable", placement: "bottom", children: /* @__PURE__ */ jsxs(
-    "button",
-    {
-      onClick: onToggle,
-      "aria-label": enabled ? "Disable accent borders" : "Enable accent borders",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 4,
-        padding: "4px 8px",
-        border: "none",
-        borderRadius: tokens.borderRadius.sm,
-        backgroundColor: enabled ? `${tokens.colors.accent.primary}30` : "rgba(255,255,255,0.05)",
-        color: enabled ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
-        fontSize: "0.625rem",
-        // 10px in rem
-        fontWeight: 500,
-        cursor: "pointer",
-        transition: "all 0.15s ease",
-        whiteSpace: "nowrap"
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.backgroundColor = enabled ? `${tokens.colors.accent.primary}40` : "rgba(255,255,255,0.1)";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = enabled ? `${tokens.colors.accent.primary}30` : "rgba(255,255,255,0.05)";
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: {
-          width: 8,
-          height: 8,
-          borderRadius: 2,
-          border: `2px solid ${enabled ? tokens.colors.accent.primary : tokens.colors.text.tertiary}`,
-          backgroundColor: "transparent"
-        } }),
-        /* @__PURE__ */ jsx("span", { children: "Borders" })
-      ]
-    }
-  ) });
+var AccentBordersToggle = memo(function AccentBordersToggle({ enabled, onToggle, tokens }) {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		content: enabled ? "Accent borders enabled - Click to disable" : "Accent borders disabled - Click to enable",
+		placement: "bottom",
+		children: /* @__PURE__ */ jsxs("button", {
+			onClick: onToggle,
+			"aria-label": enabled ? "Disable accent borders" : "Enable accent borders",
+			style: {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: 4,
+				padding: "4px 8px",
+				border: "none",
+				borderRadius: tokens.borderRadius.sm,
+				backgroundColor: enabled ? `${tokens.colors.accent.primary}30` : "rgba(255,255,255,0.05)",
+				color: enabled ? safeAccentText(tokens.colors.accent.primary) : tokens.colors.text.tertiary,
+				fontSize: "0.625rem",
+				fontWeight: 500,
+				cursor: "pointer",
+				transition: "all 0.15s ease",
+				whiteSpace: "nowrap"
+			},
+			onMouseEnter: (e) => {
+				e.currentTarget.style.backgroundColor = enabled ? `${tokens.colors.accent.primary}40` : "rgba(255,255,255,0.1)";
+			},
+			onMouseLeave: (e) => {
+				e.currentTarget.style.backgroundColor = enabled ? `${tokens.colors.accent.primary}30` : "rgba(255,255,255,0.05)";
+			},
+			children: [/* @__PURE__ */ jsx("span", { style: {
+				width: 8,
+				height: 8,
+				borderRadius: 2,
+				border: `2px solid ${enabled ? tokens.colors.accent.primary : tokens.colors.text.tertiary}`,
+				backgroundColor: "transparent"
+			} }), /* @__PURE__ */ jsx("span", { children: "Borders" })]
+		})
+	});
 });
-const ThemeControlsDropdown = memo(function ThemeControlsDropdown2({
-  currentTheme,
-  mode,
-  onThemeSelect,
-  onModeToggle,
-  accentBordersEnabled = true,
-  onAccentBordersToggle,
-  showAccentBorders = false,
-  tokens
-}) {
-  var _a;
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef(null);
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () => document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [isOpen]);
-  const currentLabel = ((_a = THEME_VARIANTS.find((t) => t.key === currentTheme)) == null ? void 0 : _a.label) || "Theme";
-  const coreThemes = THEME_VARIANTS.filter((t) => !t.key.startsWith("transparent"));
-  const glassThemes = THEME_VARIANTS.filter((t) => t.key.startsWith("transparent"));
-  return /* @__PURE__ */ jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx(Tooltip, { content: "Theme settings", placement: "bottom", children: /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setIsOpen(!isOpen),
-        "aria-label": "Theme settings",
-        "aria-expanded": isOpen,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          padding: "6px 10px",
-          border: `1px solid ${tokens.colors.border.muted}`,
-          borderRadius: tokens.borderRadius.md,
-          backgroundColor: isOpen ? tokens.colors.background.elevated : "transparent",
-          color: tokens.colors.text.secondary,
-          fontSize: "0.6875rem",
-          // 11px in rem
-          fontWeight: 500,
-          cursor: "pointer",
-          transition: "all 0.15s ease"
-        },
-        onMouseEnter: (e) => {
-          if (!isOpen) {
-            e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
-          }
-        },
-        onMouseLeave: (e) => {
-          if (!isOpen) {
-            e.currentTarget.style.backgroundColor = "transparent";
-          }
-        },
-        children: [
-          /* @__PURE__ */ jsx(AstroIcon, { name: "settings", size: 14, color: tokens.colors.text.secondary }),
-          /* @__PURE__ */ jsx("span", { children: currentLabel }),
-          /* @__PURE__ */ jsx(
-            AstroIcon,
-            {
-              name: isOpen ? "arrow-up" : "arrow-down",
-              size: 10,
-              color: tokens.colors.text.tertiary
-            }
-          )
-        ]
-      }
-    ) }),
-    isOpen && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "100%",
-          right: 0,
-          marginTop: 4,
-          minWidth: 220,
-          padding: tokens.spacing.sm,
-          backgroundColor: tokens.colors.background.surface,
-          border: `1px solid ${tokens.colors.border.muted}`,
-          borderRadius: tokens.borderRadius.lg,
-          boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
-          zIndex: 1e3
-        },
-        children: [
-          /* @__PURE__ */ jsxs("div", { style: { marginBottom: tokens.spacing.sm }, children: [
-            /* @__PURE__ */ jsx("div", { style: {
-              fontSize: "0.625rem",
-              // 10px in rem 
-              color: tokens.colors.text.muted,
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 8,
-              paddingLeft: 4
-            }, children: "Theme" }),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: coreThemes.map(({ key, label }) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => {
-                  onThemeSelect(key);
-                  setIsOpen(false);
-                },
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  padding: "8px 12px",
-                  border: "none",
-                  borderRadius: tokens.borderRadius.sm,
-                  backgroundColor: currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent",
-                  color: currentTheme === key ? tokens.colors.accent.primary : tokens.colors.text.primary,
-                  fontSize: "0.75rem",
-                  // 12px in rem
-                  fontWeight: currentTheme === key ? 600 : 400,
-                  cursor: "pointer",
-                  textAlign: "left",
-                  transition: "all 0.1s ease"
-                },
-                onMouseEnter: (e) => {
-                  if (currentTheme !== key) {
-                    e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
-                  }
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.backgroundColor = currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent";
-                },
-                children: [
-                  currentTheme === key && /* @__PURE__ */ jsx(AstroIcon, { name: "check", size: 12, color: tokens.colors.accent.primary }),
-                  /* @__PURE__ */ jsx("span", { style: { marginLeft: currentTheme === key ? 0 : 20 }, children: label })
-                ]
-              },
-              key
-            )) }),
-            /* @__PURE__ */ jsx("div", { style: {
-              height: 1,
-              backgroundColor: tokens.colors.border.muted,
-              margin: `${tokens.spacing.xs} 0`
-            } }),
-            /* @__PURE__ */ jsx("div", { style: {
-              fontSize: "0.625rem",
-              // 10px in rem 
-              color: tokens.colors.text.muted,
-              textTransform: "uppercase",
-              letterSpacing: "0.05em",
-              marginBottom: 6,
-              paddingLeft: 4
-            }, children: "Glass" }),
-            /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: glassThemes.map(({ key, label }) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => {
-                  onThemeSelect(key);
-                  setIsOpen(false);
-                },
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  padding: "8px 12px",
-                  border: "none",
-                  borderRadius: tokens.borderRadius.sm,
-                  backgroundColor: currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent",
-                  color: currentTheme === key ? tokens.colors.accent.primary : tokens.colors.text.primary,
-                  fontSize: "0.75rem",
-                  // 12px in rem
-                  fontWeight: currentTheme === key ? 600 : 400,
-                  cursor: "pointer",
-                  textAlign: "left",
-                  transition: "all 0.1s ease"
-                },
-                onMouseEnter: (e) => {
-                  if (currentTheme !== key) {
-                    e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
-                  }
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.backgroundColor = currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent";
-                },
-                children: [
-                  currentTheme === key && /* @__PURE__ */ jsx(AstroIcon, { name: "check", size: 12, color: tokens.colors.accent.primary }),
-                  /* @__PURE__ */ jsx("span", { style: { marginLeft: currentTheme === key ? 0 : 20 }, children: label })
-                ]
-              },
-              key
-            )) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { style: {
-            height: 1,
-            backgroundColor: tokens.colors.border.muted,
-            margin: `${tokens.spacing.sm} 0`
-          } }),
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => {
-                  onModeToggle();
-                },
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  padding: "8px 12px",
-                  border: "none",
-                  borderRadius: tokens.borderRadius.sm,
-                  backgroundColor: "transparent",
-                  color: tokens.colors.text.primary,
-                  fontSize: "0.75rem",
-                  // 12px in rem
-                  cursor: "pointer",
-                  transition: "all 0.1s ease"
-                },
-                onMouseEnter: (e) => {
-                  e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                    /* @__PURE__ */ jsx(
-                      AstroIcon,
-                      {
-                        name: mode === "dark" ? "brightness-high" : "brightness-low",
-                        size: 14,
-                        color: tokens.colors.text.secondary
-                      }
-                    ),
-                    mode === "dark" ? "Dark Mode" : "Light Mode"
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { style: {
-                    width: 32,
-                    height: 18,
-                    borderRadius: 9,
-                    backgroundColor: mode === "dark" ? tokens.colors.accent.primary : tokens.colors.border.default,
-                    padding: 2,
-                    transition: "all 0.15s ease"
-                  }, children: /* @__PURE__ */ jsx("div", { style: {
-                    width: 14,
-                    height: 14,
-                    borderRadius: "50%",
-                    backgroundColor: "#fff",
-                    transition: "all 0.15s ease",
-                    transform: mode === "dark" ? "translateX(14px)" : "translateX(0)"
-                  } }) })
-                ]
-              }
-            ),
-            showAccentBorders && onAccentBordersToggle && /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: onAccentBordersToggle,
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  padding: "8px 12px",
-                  border: "none",
-                  borderRadius: tokens.borderRadius.sm,
-                  backgroundColor: "transparent",
-                  color: tokens.colors.text.primary,
-                  fontSize: "0.75rem",
-                  // 12px in rem
-                  cursor: "pointer",
-                  transition: "all 0.1s ease"
-                },
-                onMouseEnter: (e) => {
-                  e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
-                },
-                onMouseLeave: (e) => {
-                  e.currentTarget.style.backgroundColor = "transparent";
-                },
-                children: /* @__PURE__ */ jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                  /* @__PURE__ */ jsx("span", { style: {
-                    width: 14,
-                    height: 14,
-                    borderRadius: 3,
-                    border: `2px solid ${tokens.colors.text.secondary}`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  }, children: accentBordersEnabled && /* @__PURE__ */ jsx(AstroIcon, { name: "check", size: 10, color: tokens.colors.text.secondary }) }),
-                  "Accent Borders"
-                ] })
-              }
-            )
-          ] })
-        ]
-      }
-    )
-  ] });
+var ThemeControlsDropdown = memo(function ThemeControlsDropdown({ currentTheme, mode, onThemeSelect, onModeToggle, accentBordersEnabled = true, onAccentBordersToggle, showAccentBorders = false, tokens }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const dropdownRef = useRef(null);
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target)) setIsOpen(false);
+		};
+		if (isOpen) {
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => document.removeEventListener("mousedown", handleClickOutside);
+		}
+	}, [isOpen]);
+	const currentLabel = THEME_VARIANTS.find((t) => t.key === currentTheme)?.label || "Theme";
+	const coreThemes = THEME_VARIANTS.filter((t) => !t.key.startsWith("transparent"));
+	const glassThemes = THEME_VARIANTS.filter((t) => t.key.startsWith("transparent"));
+	return /* @__PURE__ */ jsxs("div", {
+		ref: dropdownRef,
+		style: { position: "relative" },
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			content: "Theme settings",
+			placement: "bottom",
+			children: /* @__PURE__ */ jsxs("button", {
+				onClick: () => setIsOpen(!isOpen),
+				"aria-label": "Theme settings",
+				"aria-expanded": isOpen,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					padding: "6px 10px",
+					border: `1px solid ${tokens.colors.border.muted}`,
+					borderRadius: tokens.borderRadius.md,
+					backgroundColor: isOpen ? tokens.colors.background.elevated : "transparent",
+					color: tokens.colors.text.secondary,
+					fontSize: "0.6875rem",
+					fontWeight: 500,
+					cursor: "pointer",
+					transition: "all 0.15s ease"
+				},
+				onMouseEnter: (e) => {
+					if (!isOpen) e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+				},
+				onMouseLeave: (e) => {
+					if (!isOpen) e.currentTarget.style.backgroundColor = "transparent";
+				},
+				children: [
+					/* @__PURE__ */ jsx(AstroIcon, {
+						name: "settings",
+						size: 14,
+						color: tokens.colors.text.secondary
+					}),
+					/* @__PURE__ */ jsx("span", { children: currentLabel }),
+					/* @__PURE__ */ jsx(AstroIcon, {
+						name: isOpen ? "arrow-up" : "arrow-down",
+						size: 10,
+						color: tokens.colors.text.tertiary
+					})
+				]
+			})
+		}), isOpen && /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				top: "100%",
+				right: 0,
+				marginTop: 4,
+				minWidth: 220,
+				padding: tokens.spacing.sm,
+				backgroundColor: tokens.colors.background.surface,
+				border: `1px solid ${tokens.colors.border.muted}`,
+				borderRadius: tokens.borderRadius.lg,
+				boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
+				zIndex: 1e3
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: tokens.spacing.sm },
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "0.625rem",
+								color: tokens.colors.text.muted,
+								textTransform: "uppercase",
+								letterSpacing: "0.05em",
+								marginBottom: 8,
+								paddingLeft: 4
+							},
+							children: "Theme"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 2
+							},
+							children: coreThemes.map(({ key, label }) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => {
+									onThemeSelect(key);
+									setIsOpen(false);
+								},
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 8,
+									padding: "8px 12px",
+									border: "none",
+									borderRadius: tokens.borderRadius.sm,
+									backgroundColor: currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent",
+									color: currentTheme === key ? tokens.colors.accent.primary : tokens.colors.text.primary,
+									fontSize: "0.75rem",
+									fontWeight: currentTheme === key ? 600 : 400,
+									cursor: "pointer",
+									textAlign: "left",
+									transition: "all 0.1s ease"
+								},
+								onMouseEnter: (e) => {
+									if (currentTheme !== key) e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.backgroundColor = currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent";
+								},
+								children: [currentTheme === key && /* @__PURE__ */ jsx(AstroIcon, {
+									name: "check",
+									size: 12,
+									color: tokens.colors.accent.primary
+								}), /* @__PURE__ */ jsx("span", {
+									style: { marginLeft: currentTheme === key ? 0 : 20 },
+									children: label
+								})]
+							}, key))
+						}),
+						/* @__PURE__ */ jsx("div", { style: {
+							height: 1,
+							backgroundColor: tokens.colors.border.muted,
+							margin: `${tokens.spacing.xs} 0`
+						} }),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								fontSize: "0.625rem",
+								color: tokens.colors.text.muted,
+								textTransform: "uppercase",
+								letterSpacing: "0.05em",
+								marginBottom: 6,
+								paddingLeft: 4
+							},
+							children: "Glass"
+						}),
+						/* @__PURE__ */ jsx("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 2
+							},
+							children: glassThemes.map(({ key, label }) => /* @__PURE__ */ jsxs("button", {
+								onClick: () => {
+									onThemeSelect(key);
+									setIsOpen(false);
+								},
+								style: {
+									display: "flex",
+									alignItems: "center",
+									gap: 8,
+									padding: "8px 12px",
+									border: "none",
+									borderRadius: tokens.borderRadius.sm,
+									backgroundColor: currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent",
+									color: currentTheme === key ? tokens.colors.accent.primary : tokens.colors.text.primary,
+									fontSize: "0.75rem",
+									fontWeight: currentTheme === key ? 600 : 400,
+									cursor: "pointer",
+									textAlign: "left",
+									transition: "all 0.1s ease"
+								},
+								onMouseEnter: (e) => {
+									if (currentTheme !== key) e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+								},
+								onMouseLeave: (e) => {
+									e.currentTarget.style.backgroundColor = currentTheme === key ? `${tokens.colors.accent.primary}20` : "transparent";
+								},
+								children: [currentTheme === key && /* @__PURE__ */ jsx(AstroIcon, {
+									name: "check",
+									size: 12,
+									color: tokens.colors.accent.primary
+								}), /* @__PURE__ */ jsx("span", {
+									style: { marginLeft: currentTheme === key ? 0 : 20 },
+									children: label
+								})]
+							}, key))
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", { style: {
+					height: 1,
+					backgroundColor: tokens.colors.border.muted,
+					margin: `${tokens.spacing.sm} 0`
+				} }),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						gap: 4
+					},
+					children: [/* @__PURE__ */ jsxs("button", {
+						onClick: () => {
+							onModeToggle();
+						},
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "8px 12px",
+							border: "none",
+							borderRadius: tokens.borderRadius.sm,
+							backgroundColor: "transparent",
+							color: tokens.colors.text.primary,
+							fontSize: "0.75rem",
+							cursor: "pointer",
+							transition: "all 0.1s ease"
+						},
+						onMouseEnter: (e) => {
+							e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.backgroundColor = "transparent";
+						},
+						children: [/* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ jsx(AstroIcon, {
+								name: mode === "dark" ? "brightness-high" : "brightness-low",
+								size: 14,
+								color: tokens.colors.text.secondary
+							}), mode === "dark" ? "Dark Mode" : "Light Mode"]
+						}), /* @__PURE__ */ jsx("div", {
+							style: {
+								width: 32,
+								height: 18,
+								borderRadius: 9,
+								backgroundColor: mode === "dark" ? tokens.colors.accent.primary : tokens.colors.border.default,
+								padding: 2,
+								transition: "all 0.15s ease"
+							},
+							children: /* @__PURE__ */ jsx("div", { style: {
+								width: 14,
+								height: 14,
+								borderRadius: "50%",
+								backgroundColor: "#fff",
+								transition: "all 0.15s ease",
+								transform: mode === "dark" ? "translateX(14px)" : "translateX(0)"
+							} })
+						})]
+					}), showAccentBorders && onAccentBordersToggle && /* @__PURE__ */ jsx("button", {
+						onClick: onAccentBordersToggle,
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: "8px 12px",
+							border: "none",
+							borderRadius: tokens.borderRadius.sm,
+							backgroundColor: "transparent",
+							color: tokens.colors.text.primary,
+							fontSize: "0.75rem",
+							cursor: "pointer",
+							transition: "all 0.1s ease"
+						},
+						onMouseEnter: (e) => {
+							e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.backgroundColor = "transparent";
+						},
+						children: /* @__PURE__ */ jsxs("span", {
+							style: {
+								display: "flex",
+								alignItems: "center",
+								gap: 8
+							},
+							children: [/* @__PURE__ */ jsx("span", {
+								style: {
+									width: 14,
+									height: 14,
+									borderRadius: 3,
+									border: `2px solid ${tokens.colors.text.secondary}`,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center"
+								},
+								children: accentBordersEnabled && /* @__PURE__ */ jsx(AstroIcon, {
+									name: "check",
+									size: 10,
+									color: tokens.colors.text.secondary
+								})
+							}), "Accent Borders"]
+						})
+					})]
+				})
+			]
+		})]
+	});
 });
-const SectionHeader = memo(function SectionHeader2({ title, tokens }) {
-  var _a, _b;
-  return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: tokens.spacing.xs }, children: [
-    /* @__PURE__ */ jsx("span", { style: {
-      fontSize: tokens.typography.fontSize.xxs,
-      fontFamily: tokens.typography.fontFamily.primary,
-      color: ((_a = tokens.colors.interactive) == null ? void 0 : _a.default) ?? tokens.colors.text.secondary,
-      fontWeight: tokens.typography.fontWeight.bold
-    }, children: title }),
-    /* @__PURE__ */ jsx("div", { style: {
-      width: "100%",
-      height: tokens.borders.width.thin,
-      background: ((_b = tokens.colors.interactive) == null ? void 0 : _b.default) ?? tokens.colors.text.secondary,
-      opacity: 0.5,
-      marginTop: tokens.spacing.xs
-    } })
-  ] });
+var SectionHeader = memo(function SectionHeader({ title, tokens }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			textAlign: "center",
+			marginBottom: tokens.spacing.xs
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: tokens.typography.fontSize.xxs,
+				fontFamily: tokens.typography.fontFamily.primary,
+				color: tokens.colors.interactive?.default ?? tokens.colors.text.secondary,
+				fontWeight: tokens.typography.fontWeight.bold
+			},
+			children: title
+		}), /* @__PURE__ */ jsx("div", { style: {
+			width: "100%",
+			height: tokens.borders.width.thin,
+			background: tokens.colors.interactive?.default ?? tokens.colors.text.secondary,
+			opacity: .5,
+			marginTop: tokens.spacing.xs
+		} })]
+	});
 });
-const AppBar = memo(function AppBar2({
-  appName = "Zendir",
-  appDomain,
-  appVersion,
-  branding,
-  showThemeControls = true,
-  showCompactToggle = true,
-  showColorPicker = true,
-  showThemeSelector = true,
-  showModeOnly = false,
-  compactThemeControls = false,
-  defaultTheme,
-  defaultMode,
-  defaultCompactMode,
-  leftSlot,
-  centerSlot,
-  rightSlot,
-  rightSectionTitle,
-  showBranding = true,
-  centerGrow = false,
-  variant = "default",
-  onThemeChange,
-  onModeChange,
-  onCompactModeChange,
-  className = "",
-  height = 52,
-  sticky = true
-}) {
-  const { tokens, theme, mode, setTheme, setMode, toggleMode } = useTheme();
-  const { isMobile } = useBreakpoint();
-  const displaySettings = useDisplaySettingsOptional();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const compactMode = (displaySettings == null ? void 0 : displaySettings.compactMode) ?? defaultCompactMode ?? false;
-  React.useEffect(() => {
-    if (defaultTheme && theme !== defaultTheme) {
-      setTheme(defaultTheme);
-      onThemeChange == null ? void 0 : onThemeChange(defaultTheme);
-    }
-    if (defaultMode && mode !== defaultMode) {
-      setMode(defaultMode);
-      onModeChange == null ? void 0 : onModeChange(defaultMode);
-    }
-  }, []);
-  const handleModeToggle = () => {
-    toggleMode();
-    onModeChange == null ? void 0 : onModeChange(mode === "dark" ? "light" : "dark");
-  };
-  const handleThemeChange = (newTheme) => {
-    setTheme(newTheme);
-    onThemeChange == null ? void 0 : onThemeChange(newTheme);
-  };
-  const handleCompactToggle = () => {
-    if (displaySettings) {
-      displaySettings.toggleCompactMode();
-      onCompactModeChange == null ? void 0 : onCompactModeChange(!compactMode);
-    } else {
-      onCompactModeChange == null ? void 0 : onCompactModeChange(!compactMode);
-    }
-  };
-  const isDense = variant === "dense";
-  const effectiveHeight = height ?? (isDense ? 44 : 52);
-  const paddingH = isDense ? isMobile ? tokens.spacing.xs : tokens.spacing.sm : isMobile ? tokens.spacing.md : tokens.spacing.lg;
-  const paddingV = isDense ? tokens.spacing.xs : 0;
-  const gap = isDense ? isMobile ? tokens.spacing.sm : tokens.spacing.md : tokens.spacing.sm;
-  const minHeight = isDense && isMobile ? 44 : void 0;
-  const renderBranding = () => {
-    if (branding == null ? void 0 : branding.logo) {
-      const content = branding.logo;
-      if (branding.href) {
-        return /* @__PURE__ */ jsx("a", { href: branding.href, style: { display: "flex", alignItems: "center", textDecoration: "none" }, children: content });
-      }
-      return /* @__PURE__ */ jsx(Fragment, { children: content });
-    }
-    if (branding == null ? void 0 : branding.logoUrl) {
-      const img = /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: branding.logoUrl,
-          alt: branding.logoAlt || appName,
-          style: {
-            height: branding.logoHeight || 28,
-            width: "auto",
-            objectFit: "contain"
-          }
-        }
-      );
-      if (branding.href) {
-        return /* @__PURE__ */ jsx("a", { href: branding.href, style: { display: "flex", alignItems: "center", textDecoration: "none" }, children: img });
-      }
-      return img;
-    }
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: tokens.spacing.sm }, children: [
-      appDomain && /* @__PURE__ */ jsx("span", { style: {
-        fontSize: tokens.typography.fontSize.sm,
-        fontWeight: 400,
-        color: tokens.colors.text.secondary,
-        textTransform: "uppercase",
-        letterSpacing: "0.05em"
-      }, children: appDomain }),
-      /* @__PURE__ */ jsx("span", { style: {
-        fontSize: tokens.typography.fontSize.lg,
-        fontWeight: 500,
-        // AstroUXDS medium for app title
-        color: tokens.colors.text.primary
-      }, children: appName }),
-      appVersion && /* @__PURE__ */ jsxs("span", { style: {
-        fontSize: tokens.typography.fontSize.xs,
-        color: tokens.colors.text.tertiary
-      }, children: [
-        "v",
-        appVersion.replace(/^v/, "")
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      className: classNames("zendir-app-bar", className),
-      role: "banner",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        height: effectiveHeight,
-        padding: paddingV ? `${paddingV} ${paddingH}` : `0 ${paddingH}`,
-        backgroundColor: isTransparentTheme ? "rgba(0,0,0,0.4)" : tokens.colors.background.surface,
-        ...isTransparentTheme && {
-          backdropFilter: "blur(16px)",
-          WebkitBackdropFilter: "blur(16px)"
-        },
-        borderBottom: tokens.borders.divider,
-        color: tokens.colors.text.primary,
-        fontFamily: tokens.typography.fontFamily.primary,
-        gap,
-        ...minHeight && { minHeight },
-        ...sticky && {
-          position: "sticky",
-          top: 0,
-          zIndex: 100
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: isDense ? gap : isMobile ? tokens.spacing.md : tokens.spacing.lg,
-              flex: "1 1 0",
-              minWidth: 0
-            },
-            children: [
-              showBranding && renderBranding(),
-              leftSlot
-            ]
-          }
-        ),
-        centerSlot && /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flex: centerGrow ? "1 1 0" : "0 0 auto",
-              minWidth: 0
-            },
-            children: centerSlot
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              gap: tokens.spacing.sm,
-              flex: "1 1 0",
-              minWidth: 0
-            },
-            children: [
-              rightSectionTitle != null && rightSectionTitle !== "" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", flexShrink: 0 }, children: [
-                /* @__PURE__ */ jsx(SectionHeader, { title: rightSectionTitle, tokens }),
-                rightSlot
-              ] }) : rightSlot,
-              showThemeControls && /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: isMobile ? 6 : 8,
-                    marginLeft: isMobile ? tokens.spacing.xs : tokens.spacing.sm,
-                    minWidth: 0
-                  },
-                  children: compactThemeControls ? /* @__PURE__ */ jsx(
-                    ThemeControlsDropdown,
-                    {
-                      currentTheme: theme,
-                      mode,
-                      onThemeSelect: handleThemeChange,
-                      onModeToggle: handleModeToggle,
-                      accentBordersEnabled: (displaySettings == null ? void 0 : displaySettings.accentBorders) ?? true,
-                      onAccentBordersToggle: displaySettings == null ? void 0 : displaySettings.toggleAccentBorders,
-                      showAccentBorders: isTransparentTheme && !!displaySettings,
-                      tokens
-                    }
-                  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    showThemeSelector && !showModeOnly && /* @__PURE__ */ jsx(
-                      ThemeSelector,
-                      {
-                        currentTheme: theme,
-                        onSelect: handleThemeChange,
-                        tokens
-                      }
-                    ),
-                    !showModeOnly && isTransparentTheme && displaySettings && /* @__PURE__ */ jsx(
-                      AccentBordersToggle,
-                      {
-                        enabled: displaySettings.accentBorders,
-                        onToggle: displaySettings.toggleAccentBorders,
-                        tokens
-                      }
-                    ),
-                    showColorPicker && !showModeOnly && isTransparentTheme && displaySettings && /* @__PURE__ */ jsx(
-                      ColorPickerPanel,
-                      {
-                        accentColor: displaySettings.accentColor,
-                        glassTint: displaySettings.glassTint,
-                        colorTarget: displaySettings.colorTarget,
-                        onAccentChange: displaySettings.setAccentColor,
-                        onGlassTintChange: displaySettings.setGlassTint,
-                        onTargetChange: displaySettings.setColorTarget,
-                        onColorSelect: displaySettings.setColor,
-                        compact: true
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      ModeToggle,
-                      {
-                        mode,
-                        onToggle: handleModeToggle,
-                        tokens
-                      }
-                    )
-                  ] })
-                }
-              ),
-              showCompactToggle && /* @__PURE__ */ jsx(
-                CompactToggle,
-                {
-                  isCompact: compactMode,
-                  onToggle: handleCompactToggle,
-                  tokens
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+var AppBar = memo(function AppBar({ appName = "Zendir", appDomain, appVersion, branding, showThemeControls = true, showCompactToggle = true, showColorPicker = true, showThemeSelector = true, showModeOnly = false, compactThemeControls = false, defaultTheme, defaultMode, defaultCompactMode, leftSlot, centerSlot, rightSlot, rightSectionTitle, showBranding = true, centerGrow = false, variant = "default", onThemeChange, onModeChange, onCompactModeChange, className = "", height = 52, sticky = true }) {
+	const { tokens, theme, mode, setTheme, setMode, toggleMode } = useTheme();
+	const { isMobile } = useBreakpoint();
+	const displaySettings = useDisplaySettingsOptional();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const compactMode = displaySettings?.compactMode ?? defaultCompactMode ?? false;
+	React.useEffect(() => {
+		if (defaultTheme && theme !== defaultTheme) {
+			setTheme(defaultTheme);
+			onThemeChange?.(defaultTheme);
+		}
+		if (defaultMode && mode !== defaultMode) {
+			setMode(defaultMode);
+			onModeChange?.(defaultMode);
+		}
+	}, []);
+	const handleModeToggle = () => {
+		toggleMode();
+		onModeChange?.(mode === "dark" ? "light" : "dark");
+	};
+	const handleThemeChange = (newTheme) => {
+		setTheme(newTheme);
+		onThemeChange?.(newTheme);
+	};
+	const handleCompactToggle = () => {
+		if (displaySettings) {
+			displaySettings.toggleCompactMode();
+			onCompactModeChange?.(!compactMode);
+		} else onCompactModeChange?.(!compactMode);
+	};
+	const isDense = variant === "dense";
+	const effectiveHeight = height ?? (isDense ? 44 : 52);
+	const paddingH = isDense ? isMobile ? tokens.spacing.xs : tokens.spacing.sm : isMobile ? tokens.spacing.md : tokens.spacing.lg;
+	const paddingV = isDense ? tokens.spacing.xs : 0;
+	const gap = isDense ? isMobile ? tokens.spacing.sm : tokens.spacing.md : tokens.spacing.sm;
+	const minHeight = isDense && isMobile ? 44 : void 0;
+	const renderBranding = () => {
+		if (branding?.logo) {
+			const content = branding.logo;
+			if (branding.href) return /* @__PURE__ */ jsx("a", {
+				href: branding.href,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					textDecoration: "none"
+				},
+				children: content
+			});
+			return /* @__PURE__ */ jsx(Fragment, { children: content });
+		}
+		if (branding?.logoUrl) {
+			const img = /* @__PURE__ */ jsx("img", {
+				src: branding.logoUrl,
+				alt: branding.logoAlt || appName,
+				style: {
+					height: branding.logoHeight || 28,
+					width: "auto",
+					objectFit: "contain"
+				}
+			});
+			if (branding.href) return /* @__PURE__ */ jsx("a", {
+				href: branding.href,
+				style: {
+					display: "flex",
+					alignItems: "center",
+					textDecoration: "none"
+				},
+				children: img
+			});
+			return img;
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				alignItems: "baseline",
+				gap: tokens.spacing.sm
+			},
+			children: [
+				appDomain && /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: tokens.typography.fontSize.sm,
+						fontWeight: 400,
+						color: tokens.colors.text.secondary,
+						textTransform: "uppercase",
+						letterSpacing: "0.05em"
+					},
+					children: appDomain
+				}),
+				/* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: tokens.typography.fontSize.lg,
+						fontWeight: 500,
+						color: tokens.colors.text.primary
+					},
+					children: appName
+				}),
+				appVersion && /* @__PURE__ */ jsxs("span", {
+					style: {
+						fontSize: tokens.typography.fontSize.xs,
+						color: tokens.colors.text.tertiary
+					},
+					children: ["v", appVersion.replace(/^v/, "")]
+				})
+			]
+		});
+	};
+	return /* @__PURE__ */ jsxs("header", {
+		className: classNames("zendir-app-bar", className),
+		role: "banner",
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			height: effectiveHeight,
+			padding: paddingV ? `${paddingV} ${paddingH}` : `0 ${paddingH}`,
+			backgroundColor: isTransparentTheme ? "rgba(0,0,0,0.4)" : tokens.colors.background.surface,
+			...isTransparentTheme && {
+				backdropFilter: "blur(16px)",
+				WebkitBackdropFilter: "blur(16px)"
+			},
+			borderBottom: tokens.borders.divider,
+			color: tokens.colors.text.primary,
+			fontFamily: tokens.typography.fontFamily.primary,
+			gap,
+			...minHeight && { minHeight },
+			...sticky && {
+				position: "sticky",
+				top: 0,
+				zIndex: 100
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: isDense ? gap : isMobile ? tokens.spacing.md : tokens.spacing.lg,
+					flex: "1 1 0",
+					minWidth: 0
+				},
+				children: [showBranding && renderBranding(), leftSlot]
+			}),
+			centerSlot && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					flex: centerGrow ? "1 1 0" : "0 0 auto",
+					minWidth: 0
+				},
+				children: centerSlot
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "flex-end",
+					gap: tokens.spacing.sm,
+					flex: "1 1 0",
+					minWidth: 0
+				},
+				children: [
+					rightSectionTitle != null && rightSectionTitle !== "" ? /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							flexShrink: 0
+						},
+						children: [/* @__PURE__ */ jsx(SectionHeader, {
+							title: rightSectionTitle,
+							tokens
+						}), rightSlot]
+					}) : rightSlot,
+					showThemeControls && /* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: isMobile ? 6 : 8,
+							marginLeft: isMobile ? tokens.spacing.xs : tokens.spacing.sm,
+							minWidth: 0
+						},
+						children: compactThemeControls ? /* @__PURE__ */ jsx(ThemeControlsDropdown, {
+							currentTheme: theme,
+							mode,
+							onThemeSelect: handleThemeChange,
+							onModeToggle: handleModeToggle,
+							accentBordersEnabled: displaySettings?.accentBorders ?? true,
+							onAccentBordersToggle: displaySettings?.toggleAccentBorders,
+							showAccentBorders: isTransparentTheme && !!displaySettings,
+							tokens
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							showThemeSelector && !showModeOnly && /* @__PURE__ */ jsx(ThemeSelector, {
+								currentTheme: theme,
+								onSelect: handleThemeChange,
+								tokens
+							}),
+							!showModeOnly && isTransparentTheme && displaySettings && /* @__PURE__ */ jsx(AccentBordersToggle, {
+								enabled: displaySettings.accentBorders,
+								onToggle: displaySettings.toggleAccentBorders,
+								tokens
+							}),
+							showColorPicker && !showModeOnly && isTransparentTheme && displaySettings && /* @__PURE__ */ jsx(ColorPickerPanel, {
+								accentColor: displaySettings.accentColor,
+								glassTint: displaySettings.glassTint,
+								colorTarget: displaySettings.colorTarget,
+								onAccentChange: displaySettings.setAccentColor,
+								onGlassTintChange: displaySettings.setGlassTint,
+								onTargetChange: displaySettings.setColorTarget,
+								onColorSelect: displaySettings.setColor,
+								compact: true
+							}),
+							/* @__PURE__ */ jsx(ModeToggle, {
+								mode,
+								onToggle: handleModeToggle,
+								tokens
+							})
+						] })
+					}),
+					showCompactToggle && /* @__PURE__ */ jsx(CompactToggle, {
+						isCompact: compactMode,
+						onToggle: handleCompactToggle,
+						tokens
+					})
+				]
+			})
+		]
+	});
 });
-export {
-  AppBar
-};
-//# sourceMappingURL=AppBar.js.map
+//#endregion
+export { AppBar, AppBar as default };
+
+//# sourceMappingURL=AppBar.js.map