@zendir/ui 0.1.0

package/dist/react/core/AppBar.js

@@ -0,0 +1,817 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { memo, useState, useRef, useEffect, useMemo } from "react";
+import { useDisplaySettingsOptional } from "../context/DisplaySettingsContext.js";
+import { classNames, safeAccentText } from "../utils/index.js";
+import { AstroIcon } from "./AstroIcon.js";
+import { ColorPickerPanel } from "./ColorPickerPanel.js";
+import { Tooltip } from "./Tooltip.js";
+import { useBreakpoint } from "./layout/useBreakpoint.js";
+import { useTheme } from "../theme/ThemeProvider.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" }
+];
+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
+        }
+      )
+    }
+  ) });
+});
+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
+        }
+      )
+    }
+  ) });
+});
+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))
+      ]
+    }
+  );
+});
+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" })
+      ]
+    }
+  ) });
+});
+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"
+                ] })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+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
+    } })
+  ] });
+});
+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
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  AppBar
+};
+//# sourceMappingURL=AppBar.js.map