@zendir/ui 0.5.0 → 0.6.0

package/dist/react/astro/ClassificationBanner.js

@@ -1,83 +1,99 @@
-import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
 import { classNames } from "../utils/index.js";
-const CLASSIFICATION_STYLES = {
-  unclassified: {
-    bg: "#007a33",
-    text: "#ffffff",
-    label: "UNCLASSIFIED"
-  },
-  cui: {
-    bg: "#502b85",
-    text: "#ffffff",
-    label: "CUI"
-  },
-  controlled: {
-    bg: "#502b85",
-    text: "#ffffff",
-    label: "CONTROLLED"
-  },
-  confidential: {
-    bg: "#0033a0",
-    text: "#ffffff",
-    label: "CONFIDENTIAL"
-  },
-  secret: {
-    bg: "#c8102e",
-    text: "#ffffff",
-    label: "SECRET"
-  },
-  "top-secret": {
-    bg: "#ff8c00",
-    text: "#000000",
-    label: "TOP SECRET"
-  },
-  "top-secret-sci": {
-    bg: "#fce83a",
-    text: "#000000",
-    label: "TOP SECRET//SCI"
-  }
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/astro/ClassificationBanner.tsx
+/**
+* @zendir/ui - ClassificationBanner Component (Pure React)
+*
+* Security classification banner following Astro UX Design System.
+* Required for U.S. Space Force applications to display security classification.
+*
+* Features:
+* - Theme-integrated via useTheme()
+* - Official classification colors per DoD standards
+* - Top/bottom positioning
+* - Accessible (screen reader announces classification)
+*/
+var CLASSIFICATION_STYLES = {
+	unclassified: {
+		bg: "#007a33",
+		text: "#ffffff",
+		label: "UNCLASSIFIED"
+	},
+	cui: {
+		bg: "#502b85",
+		text: "#ffffff",
+		label: "CUI"
+	},
+	controlled: {
+		bg: "#502b85",
+		text: "#ffffff",
+		label: "CONTROLLED"
+	},
+	confidential: {
+		bg: "#0033a0",
+		text: "#ffffff",
+		label: "CONFIDENTIAL"
+	},
+	secret: {
+		bg: "#c8102e",
+		text: "#ffffff",
+		label: "SECRET"
+	},
+	"top-secret": {
+		bg: "#ff8c00",
+		text: "#000000",
+		label: "TOP SECRET"
+	},
+	"top-secret-sci": {
+		bg: "#fce83a",
+		text: "#000000",
+		label: "TOP SECRET//SCI"
+	}
 };
-const ClassificationBanner = memo(function ClassificationBanner2({
-  classification,
-  label,
-  position = "top",
-  className = ""
-}) {
-  const { tokens } = useTheme();
-  const style = CLASSIFICATION_STYLES[classification] ?? CLASSIFICATION_STYLES.unclassified;
-  const displayLabel = label ?? style.label;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames("zendir-classification-banner", className),
-      role: "banner",
-      "aria-label": `Security classification: ${displayLabel}`,
-      style: {
-        position: "fixed",
-        left: 0,
-        right: 0,
-        [position]: 0,
-        zIndex: 9999,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        height: 20,
-        backgroundColor: style.bg,
-        color: style.text,
-        fontSize: tokens.typography.fontSize.xs,
-        fontWeight: tokens.typography.fontWeight.bold,
-        letterSpacing: tokens.typography.letterSpacing.wide,
-        textTransform: "uppercase",
-        fontFamily: tokens.typography.fontFamily.primary,
-        userSelect: "none"
-      },
-      children: displayLabel
-    }
-  );
+/**
+* ClassificationBanner - Pure React classification banner
+*
+* Displays security classification level. Required for U.S. Space Force applications.
+*
+* @example
+* ```tsx
+* <ClassificationBanner classification="unclassified" />
+* <ClassificationBanner classification="secret" position="bottom" />
+* ```
+*/
+var ClassificationBanner = memo(function ClassificationBanner({ classification, label, position = "top", className = "" }) {
+	const { tokens } = useTheme();
+	const style = CLASSIFICATION_STYLES[classification] ?? CLASSIFICATION_STYLES.unclassified;
+	const displayLabel = label ?? style.label;
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("zendir-classification-banner", className),
+		role: "banner",
+		"aria-label": `Security classification: ${displayLabel}`,
+		style: {
+			position: "fixed",
+			left: 0,
+			right: 0,
+			[position]: 0,
+			zIndex: 9999,
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			height: 20,
+			backgroundColor: style.bg,
+			color: style.text,
+			fontSize: tokens.typography.fontSize.xs,
+			fontWeight: tokens.typography.fontWeight.bold,
+			letterSpacing: tokens.typography.letterSpacing.wide,
+			textTransform: "uppercase",
+			fontFamily: tokens.typography.fontFamily.primary,
+			userSelect: "none"
+		},
+		children: displayLabel
+	});
 });
-export {
-  ClassificationBanner
-};
-//# sourceMappingURL=ClassificationBanner.js.map
+//#endregion
+export { ClassificationBanner };
+
+//# sourceMappingURL=ClassificationBanner.js.map

package/dist/react/astro/ClassificationBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClassificationBanner.js","sources":["../../../src/react/astro/ClassificationBanner.tsx"],"sourcesContent":["/**\n * @zendir/ui - ClassificationBanner Component (Pure React)\n * \n * Security classification banner following Astro UX Design System.\n * Required for U.S. Space Force applications to display security classification.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - Official classification colors per DoD standards\n * - Top/bottom positioning\n * - Accessible (screen reader announces classification)\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames } from '../utils';\n\nexport type ClassificationLevel =\n  | 'unclassified'\n  | 'cui'\n  | 'controlled'\n  | 'confidential'\n  | 'secret'\n  | 'top-secret'\n  | 'top-secret-sci';\n\nexport interface ClassificationBannerProps {\n  /** Classification level */\n  classification: ClassificationLevel;\n  /** Custom label (overrides default text) */\n  label?: string;\n  /** Position of the banner */\n  position?: 'top' | 'bottom';\n  /** Custom className */\n  className?: string;\n}\n\n// Official DoD classification colors\nconst CLASSIFICATION_STYLES: Record<\n  ClassificationLevel,\n  { bg: string; text: string; label: string }\n> = {\n  unclassified: {\n    bg: '#007a33',\n    text: '#ffffff',\n    label: 'UNCLASSIFIED',\n  },\n  cui: {\n    bg: '#502b85',\n    text: '#ffffff',\n    label: 'CUI',\n  },\n  controlled: {\n    bg: '#502b85',\n    text: '#ffffff',\n    label: 'CONTROLLED',\n  },\n  confidential: {\n    bg: '#0033a0',\n    text: '#ffffff',\n    label: 'CONFIDENTIAL',\n  },\n  secret: {\n    bg: '#c8102e',\n    text: '#ffffff',\n    label: 'SECRET',\n  },\n  'top-secret': {\n    bg: '#ff8c00',\n    text: '#000000',\n    label: 'TOP SECRET',\n  },\n  'top-secret-sci': {\n    bg: '#fce83a',\n    text: '#000000',\n    label: 'TOP SECRET//SCI',\n  },\n};\n\n/**\n * ClassificationBanner - Pure React classification banner\n * \n * Displays security classification level. Required for U.S. Space Force applications.\n * \n * @example\n * ```tsx\n * <ClassificationBanner classification=\"unclassified\" />\n * <ClassificationBanner classification=\"secret\" position=\"bottom\" />\n * ```\n */\nexport const ClassificationBanner = memo(function ClassificationBanner({\n  classification,\n  label,\n  position = 'top',\n  className = '',\n}: ClassificationBannerProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const style = CLASSIFICATION_STYLES[classification] ?? CLASSIFICATION_STYLES.unclassified;\n  const displayLabel = label ?? style.label;\n\n  return (\n    <div\n      className={classNames('zendir-classification-banner', className)}\n      role=\"banner\"\n      aria-label={`Security classification: ${displayLabel}`}\n      style={{\n        position: 'fixed',\n        left: 0,\n        right: 0,\n        [position]: 0,\n        zIndex: 9999,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        height: 20,\n        backgroundColor: style.bg,\n        color: style.text,\n        fontSize: tokens.typography.fontSize.xs,\n        fontWeight: tokens.typography.fontWeight.bold,\n        letterSpacing: tokens.typography.letterSpacing.wide,\n        textTransform: 'uppercase',\n        fontFamily: tokens.typography.fontFamily.primary,\n        userSelect: 'none',\n      }}\n    >\n      {displayLabel}\n    </div>\n  );\n});\n"],"names":["ClassificationBanner"],"mappings":";;;;AAsCA,MAAM,wBAGF;AAAA,EACF,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,KAAK;AAAA,IACH,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,YAAY;AAAA,IACV,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAAA,EAET,kBAAkB;AAAA,IAChB,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAEX;AAaO,MAAM,uBAAuB,KAAK,SAASA,sBAAqB;AAAA,EACrE;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AACd,GAAkD;AAChD,QAAM,EAAE,OAAA,IAAW,SAAA;AACnB,QAAM,QAAQ,sBAAsB,cAAc,KAAK,sBAAsB;AAC7E,QAAM,eAAe,SAAS,MAAM;AAEpC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gCAAgC,SAAS;AAAA,MAC/D,MAAK;AAAA,MACL,cAAY,4BAA4B,YAAY;AAAA,MACpD,OAAO;AAAA,QACL,UAAU;AAAA,QACV,MAAM;AAAA,QACN,OAAO;AAAA,QACP,CAAC,QAAQ,GAAG;AAAA,QACZ,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,iBAAiB,MAAM;AAAA,QACvB,OAAO,MAAM;AAAA,QACb,UAAU,OAAO,WAAW,SAAS;AAAA,QACrC,YAAY,OAAO,WAAW,WAAW;AAAA,QACzC,eAAe,OAAO,WAAW,cAAc;AAAA,QAC/C,eAAe;AAAA,QACf,YAAY,OAAO,WAAW,WAAW;AAAA,QACzC,YAAY;AAAA,MAAA;AAAA,MAGb,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"ClassificationBanner.js","names":[],"sources":["../../../src/react/astro/ClassificationBanner.tsx"],"sourcesContent":["/**\n * @zendir/ui - ClassificationBanner Component (Pure React)\n *\n * Security classification banner following Astro UX Design System.\n * Required for U.S. Space Force applications to display security classification.\n *\n * Features:\n * - Theme-integrated via useTheme()\n * - Official classification colors per DoD standards\n * - Top/bottom positioning\n * - Accessible (screen reader announces classification)\n */\n\nimport React, { memo } from \"react\";\nimport { useTheme } from \"../theme\";\nimport { classNames } from \"../utils\";\n\nexport type ClassificationLevel =\n  | \"unclassified\"\n  | \"cui\"\n  | \"controlled\"\n  | \"confidential\"\n  | \"secret\"\n  | \"top-secret\"\n  | \"top-secret-sci\";\n\nexport interface ClassificationBannerProps {\n  /** Classification level */\n  classification: ClassificationLevel;\n  /** Custom label (overrides default text) */\n  label?: string;\n  /** Position of the banner */\n  position?: \"top\" | \"bottom\";\n  /** Custom className */\n  className?: string;\n}\n\n// Official DoD classification colors\nconst CLASSIFICATION_STYLES: Record<\n  ClassificationLevel,\n  { bg: string; text: string; label: string }\n> = {\n  unclassified: {\n    bg: \"#007a33\",\n    text: \"#ffffff\",\n    label: \"UNCLASSIFIED\",\n  },\n  cui: {\n    bg: \"#502b85\",\n    text: \"#ffffff\",\n    label: \"CUI\",\n  },\n  controlled: {\n    bg: \"#502b85\",\n    text: \"#ffffff\",\n    label: \"CONTROLLED\",\n  },\n  confidential: {\n    bg: \"#0033a0\",\n    text: \"#ffffff\",\n    label: \"CONFIDENTIAL\",\n  },\n  secret: {\n    bg: \"#c8102e\",\n    text: \"#ffffff\",\n    label: \"SECRET\",\n  },\n  \"top-secret\": {\n    bg: \"#ff8c00\",\n    text: \"#000000\",\n    label: \"TOP SECRET\",\n  },\n  \"top-secret-sci\": {\n    bg: \"#fce83a\",\n    text: \"#000000\",\n    label: \"TOP SECRET//SCI\",\n  },\n};\n\n/**\n * ClassificationBanner - Pure React classification banner\n *\n * Displays security classification level. Required for U.S. Space Force applications.\n *\n * @example\n * ```tsx\n * <ClassificationBanner classification=\"unclassified\" />\n * <ClassificationBanner classification=\"secret\" position=\"bottom\" />\n * ```\n */\nexport const ClassificationBanner = memo(function ClassificationBanner({\n  classification,\n  label,\n  position = \"top\",\n  className = \"\",\n}: ClassificationBannerProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const style =\n    CLASSIFICATION_STYLES[classification] ?? CLASSIFICATION_STYLES.unclassified;\n  const displayLabel = label ?? style.label;\n\n  return (\n    <div\n      className={classNames(\"zendir-classification-banner\", className)}\n      role=\"banner\"\n      aria-label={`Security classification: ${displayLabel}`}\n      style={{\n        position: \"fixed\",\n        left: 0,\n        right: 0,\n        [position]: 0,\n        zIndex: 9999,\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        height: 20,\n        backgroundColor: style.bg,\n        color: style.text,\n        fontSize: tokens.typography.fontSize.xs,\n        fontWeight: tokens.typography.fontWeight.bold,\n        letterSpacing: tokens.typography.letterSpacing.wide,\n        textTransform: \"uppercase\",\n        fontFamily: tokens.typography.fontFamily.primary,\n        userSelect: \"none\",\n      }}\n    >\n      {displayLabel}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;AAsCA,IAAM,wBAGF;CACF,cAAc;EACZ,IAAI;EACJ,MAAM;EACN,OAAO;CACT;CACA,KAAK;EACH,IAAI;EACJ,MAAM;EACN,OAAO;CACT;CACA,YAAY;EACV,IAAI;EACJ,MAAM;EACN,OAAO;CACT;CACA,cAAc;EACZ,IAAI;EACJ,MAAM;EACN,OAAO;CACT;CACA,QAAQ;EACN,IAAI;EACJ,MAAM;EACN,OAAO;CACT;CACA,cAAc;EACZ,IAAI;EACJ,MAAM;EACN,OAAO;CACT;CACA,kBAAkB;EAChB,IAAI;EACJ,MAAM;EACN,OAAO;CACT;AACF;;;;;;;;;;;;AAaA,IAAa,uBAAuB,KAAK,SAAS,qBAAqB,EACrE,gBACA,OACA,WAAW,OACX,YAAY,MACoC;CAChD,MAAM,EAAE,WAAW,SAAS;CAC5B,MAAM,QACJ,sBAAsB,mBAAmB,sBAAsB;CACjE,MAAM,eAAe,SAAS,MAAM;CAEpC,OACE,oBAAC,OAAD;EACE,WAAW,WAAW,gCAAgC,SAAS;EAC/D,MAAK;EACL,cAAY,4BAA4B;EACxC,OAAO;GACL,UAAU;GACV,MAAM;GACN,OAAO;IACN,WAAW;GACZ,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,iBAAiB,MAAM;GACvB,OAAO,MAAM;GACb,UAAU,OAAO,WAAW,SAAS;GACrC,YAAY,OAAO,WAAW,WAAW;GACzC,eAAe,OAAO,WAAW,cAAc;GAC/C,eAAe;GACf,YAAY,OAAO,WAAW,WAAW;GACzC,YAAY;EACd;YAEC;CACE,CAAA;AAET,CAAC"}

package/dist/react/astro/GlobalStatusBar.d.ts

@@ -1,5 +1,4 @@
 import { default as React, ReactNode } from 'react';
-
 export interface GlobalStatusBarProps {
     /** Application name */
     appName?: string;

package/dist/react/astro/GlobalStatusBar.js

@@ -1,165 +1,159 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { useTheme } from "../theme/ThemeProvider.js";
-import { safeAccentText, classNames } from "../utils/index.js";
-const GlobalStatusBar = memo(function GlobalStatusBar2({
-  appName = "Zendir",
-  appDomain,
-  appVersion,
-  username,
-  leftSlot,
-  centerSlot,
-  rightSlot,
-  children,
-  className = ""
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      className: classNames("zendir-global-status-bar", className),
-      role: "banner",
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        height: 56,
-        padding: `0 ${tokens.spacing.lg}`,
-        backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
-        ...isTransparentTheme && { backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)" },
-        borderBottom: `1px solid ${tokens.colors.border.muted}`,
-        color: tokens.colors.text.primary,
-        fontFamily: tokens.typography.fontFamily.primary
-      },
-      children: [
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: tokens.spacing.lg,
-              flex: "1 1 0"
-            },
-            children: [
-              leftSlot,
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "baseline", gap: tokens.spacing.sm }, children: [
-                appDomain && /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: tokens.typography.fontSize.sm,
-                      fontWeight: tokens.typography.fontWeight.normal,
-                      color: tokens.colors.text.tertiary,
-                      textTransform: "uppercase",
-                      letterSpacing: tokens.typography.letterSpacing.wide
-                    },
-                    children: appDomain
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    style: {
-                      fontSize: tokens.typography.fontSize.xl,
-                      fontWeight: tokens.typography.fontWeight.semibold,
-                      letterSpacing: tokens.typography.letterSpacing.tight,
-                      color: tokens.colors.text.primary
-                    },
-                    children: appName
-                  }
-                ),
-                appVersion && /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    style: {
-                      fontSize: tokens.typography.fontSize.xs,
-                      fontWeight: tokens.typography.fontWeight.normal,
-                      color: tokens.colors.text.tertiary
-                    },
-                    children: [
-                      "v",
-                      appVersion
-                    ]
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              flex: "0 0 auto"
-            },
-            children: [
-              centerSlot,
-              children
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              gap: tokens.spacing.lg,
-              flex: "1 1 0"
-            },
-            children: [
-              rightSlot,
-              username && /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: tokens.spacing.sm,
-                    paddingLeft: tokens.spacing.lg,
-                    borderLeft: `1px solid ${tokens.colors.border.muted}`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          width: 28,
-                          height: 28,
-                          borderRadius: tokens.borderRadius.full,
-                          backgroundColor: `${tokens.colors.accent.primary}20`,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          fontSize: tokens.typography.fontSize.sm,
-                          fontWeight: tokens.typography.fontWeight.semibold,
-                          color: safeAccentText(tokens.colors.accent.primary)
-                        },
-                        children: username.charAt(0).toUpperCase()
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("span", { style: {
-                      fontSize: tokens.typography.fontSize.sm,
-                      fontWeight: tokens.typography.fontWeight.medium,
-                      color: tokens.colors.text.primary
-                    }, children: username })
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+import { classNames, safeAccentText } from "../utils/index.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/astro/GlobalStatusBar.tsx
+/**
+* @zendir/ui - GlobalStatusBar Component (Pure React)
+*
+* Primary header component for space applications following Astro UX patterns.
+*
+* Features:
+* - Theme-integrated via useTheme()
+* - App identity (name, domain, version)
+* - Clock slot
+* - Monitoring icons slot
+* - Username display
+* - Responsive design
+*/
+/**
+* GlobalStatusBar - Pure React global status bar
+*
+* Primary header component for space applications. Includes slots for:
+* - App switcher (left)
+* - Global clock (center)
+* - Monitoring icons (right)
+*
+* @example
+* ```tsx
+* <GlobalStatusBar
+*   appName="Mission Control"
+*   appDomain="Zendir"
+*   username="Demo User"
+*   centerSlot={<MissionClock />}
+*   rightSlot={<MonitoringIcons />}
+* />
+* ```
+*/
+var GlobalStatusBar = memo(function GlobalStatusBar({ appName = "Zendir", appDomain, appVersion, username, leftSlot, centerSlot, rightSlot, children, className = "" }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	return /* @__PURE__ */ jsxs("header", {
+		className: classNames("zendir-global-status-bar", className),
+		role: "banner",
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "space-between",
+			height: 56,
+			padding: `0 ${tokens.spacing.lg}`,
+			backgroundColor: isTransparentTheme ? "transparent" : tokens.colors.background.surface,
+			...isTransparentTheme && {
+				backdropFilter: "blur(12px)",
+				WebkitBackdropFilter: "blur(12px)"
+			},
+			borderBottom: `1px solid ${tokens.colors.border.muted}`,
+			color: tokens.colors.text.primary,
+			fontFamily: tokens.typography.fontFamily.primary
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: tokens.spacing.lg,
+					flex: "1 1 0"
+				},
+				children: [leftSlot, /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "baseline",
+						gap: tokens.spacing.sm
+					},
+					children: [
+						appDomain && /* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.sm,
+								fontWeight: tokens.typography.fontWeight.normal,
+								color: tokens.colors.text.tertiary,
+								textTransform: "uppercase",
+								letterSpacing: tokens.typography.letterSpacing.wide
+							},
+							children: appDomain
+						}),
+						/* @__PURE__ */ jsx("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.xl,
+								fontWeight: tokens.typography.fontWeight.semibold,
+								letterSpacing: tokens.typography.letterSpacing.tight,
+								color: tokens.colors.text.primary
+							},
+							children: appName
+						}),
+						appVersion && /* @__PURE__ */ jsxs("span", {
+							style: {
+								fontSize: tokens.typography.fontSize.xs,
+								fontWeight: tokens.typography.fontWeight.normal,
+								color: tokens.colors.text.tertiary
+							},
+							children: ["v", appVersion]
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					flex: "0 0 auto"
+				},
+				children: [centerSlot, children]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "flex-end",
+					gap: tokens.spacing.lg,
+					flex: "1 1 0"
+				},
+				children: [rightSlot, username && /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: tokens.spacing.sm,
+						paddingLeft: tokens.spacing.lg,
+						borderLeft: `1px solid ${tokens.colors.border.muted}`
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							width: 28,
+							height: 28,
+							borderRadius: tokens.borderRadius.full,
+							backgroundColor: `${tokens.colors.accent.primary}20`,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							fontSize: tokens.typography.fontSize.sm,
+							fontWeight: tokens.typography.fontWeight.semibold,
+							color: safeAccentText(tokens.colors.accent.primary)
+						},
+						children: username.charAt(0).toUpperCase()
+					}), /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: tokens.typography.fontSize.sm,
+							fontWeight: tokens.typography.fontWeight.medium,
+							color: tokens.colors.text.primary
+						},
+						children: username
+					})]
+				})]
+			})
+		]
+	});
 });
-export {
-  GlobalStatusBar
-};
-//# sourceMappingURL=GlobalStatusBar.js.map
+//#endregion
+export { GlobalStatusBar };
+
+//# sourceMappingURL=GlobalStatusBar.js.map

package/dist/react/astro/GlobalStatusBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalStatusBar.js","sources":["../../../src/react/astro/GlobalStatusBar.tsx"],"sourcesContent":["/**\n * @zendir/ui - GlobalStatusBar Component (Pure React)\n * \n * Primary header component for space applications following Astro UX patterns.\n * \n * Features:\n * - Theme-integrated via useTheme()\n * - App identity (name, domain, version)\n * - Clock slot\n * - Monitoring icons slot\n * - Username display\n * - Responsive design\n */\n\nimport React, { memo, ReactNode } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, safeAccentText } from '../utils';\n\nexport interface GlobalStatusBarProps {\n  /** Application name */\n  appName?: string;\n  /** Application domain (organization/mission) */\n  appDomain?: string;\n  /** Application version */\n  appVersion?: string;\n  /** Username to display */\n  username?: string;\n  /** Left slot content (app switcher, etc.) */\n  leftSlot?: ReactNode;\n  /** Center slot content (typically clock) */\n  centerSlot?: ReactNode;\n  /** Right slot content (monitoring icons, controls) */\n  rightSlot?: ReactNode;\n  /** Additional children */\n  children?: ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\n/**\n * GlobalStatusBar - Pure React global status bar\n * \n * Primary header component for space applications. Includes slots for:\n * - App switcher (left)\n * - Global clock (center)\n * - Monitoring icons (right)\n * \n * @example\n * ```tsx\n * <GlobalStatusBar\n *   appName=\"Mission Control\"\n *   appDomain=\"Zendir\"\n *   username=\"Demo User\"\n *   centerSlot={<MissionClock />}\n *   rightSlot={<MonitoringIcons />}\n * />\n * ```\n */\nexport const GlobalStatusBar = memo(function GlobalStatusBar({\n  appName = 'Zendir',\n  appDomain,\n  appVersion,\n  username,\n  leftSlot,\n  centerSlot,\n  rightSlot,\n  children,\n  className = '',\n}: GlobalStatusBarProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  return (\n    <header\n      className={classNames('zendir-global-status-bar', className)}\n      role=\"banner\"\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        height: 56,\n        padding: `0 ${tokens.spacing.lg}`,\n        backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n        ...(isTransparentTheme && { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' as const }),\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        color: tokens.colors.text.primary,\n        fontFamily: tokens.typography.fontFamily.primary,\n      }}\n    >\n      {/* Left section: App identity */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          gap: tokens.spacing.lg,\n          flex: '1 1 0',\n        }}\n      >\n        {leftSlot}\n        \n        <div style={{ display: 'flex', alignItems: 'baseline', gap: tokens.spacing.sm }}>\n          {appDomain && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.normal,\n                color: tokens.colors.text.tertiary,\n                textTransform: 'uppercase',\n                letterSpacing: tokens.typography.letterSpacing.wide,\n              }}\n            >\n              {appDomain}\n            </span>\n          )}\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xl,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              letterSpacing: tokens.typography.letterSpacing.tight,\n              color: tokens.colors.text.primary,\n            }}\n          >\n            {appName}\n          </span>\n          {appVersion && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.normal,\n                color: tokens.colors.text.tertiary,\n              }}\n            >\n              v{appVersion}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Center section: Clock */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flex: '0 0 auto',\n        }}\n      >\n        {centerSlot}\n        {children}\n      </div>\n\n      {/* Right section: Monitoring + User */}\n      <div\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'flex-end',\n          gap: tokens.spacing.lg,\n          flex: '1 1 0',\n        }}\n      >\n        {rightSlot}\n        \n        {username && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: tokens.spacing.sm,\n              paddingLeft: tokens.spacing.lg,\n              borderLeft: `1px solid ${tokens.colors.border.muted}`,\n            }}\n          >\n            {/* User avatar */}\n            <div\n              style={{\n                width: 28,\n                height: 28,\n                borderRadius: tokens.borderRadius.full,\n                backgroundColor: `${tokens.colors.accent.primary}20`,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.semibold,\n                color: safeAccentText(tokens.colors.accent.primary),\n              }}\n            >\n              {username.charAt(0).toUpperCase()}\n            </div>\n            <span style={{ \n              fontSize: tokens.typography.fontSize.sm, \n              fontWeight: tokens.typography.fontWeight.medium,\n              color: tokens.colors.text.primary,\n            }}>\n              {username}\n            </span>\n          </div>\n        )}\n      </div>\n    </header>\n  );\n});\n"],"names":["GlobalStatusBar"],"mappings":"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"}
+{"version":3,"file":"GlobalStatusBar.js","names":[],"sources":["../../../src/react/astro/GlobalStatusBar.tsx"],"sourcesContent":["/**\n * @zendir/ui - GlobalStatusBar Component (Pure React)\n *\n * Primary header component for space applications following Astro UX patterns.\n *\n * Features:\n * - Theme-integrated via useTheme()\n * - App identity (name, domain, version)\n * - Clock slot\n * - Monitoring icons slot\n * - Username display\n * - Responsive design\n */\n\nimport React, { memo, ReactNode } from \"react\";\nimport { useTheme } from \"../theme\";\nimport { classNames, safeAccentText } from \"../utils\";\n\nexport interface GlobalStatusBarProps {\n  /** Application name */\n  appName?: string;\n  /** Application domain (organization/mission) */\n  appDomain?: string;\n  /** Application version */\n  appVersion?: string;\n  /** Username to display */\n  username?: string;\n  /** Left slot content (app switcher, etc.) */\n  leftSlot?: ReactNode;\n  /** Center slot content (typically clock) */\n  centerSlot?: ReactNode;\n  /** Right slot content (monitoring icons, controls) */\n  rightSlot?: ReactNode;\n  /** Additional children */\n  children?: ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\n/**\n * GlobalStatusBar - Pure React global status bar\n *\n * Primary header component for space applications. Includes slots for:\n * - App switcher (left)\n * - Global clock (center)\n * - Monitoring icons (right)\n *\n * @example\n * ```tsx\n * <GlobalStatusBar\n *   appName=\"Mission Control\"\n *   appDomain=\"Zendir\"\n *   username=\"Demo User\"\n *   centerSlot={<MissionClock />}\n *   rightSlot={<MonitoringIcons />}\n * />\n * ```\n */\nexport const GlobalStatusBar = memo(function GlobalStatusBar({\n  appName = \"Zendir\",\n  appDomain,\n  appVersion,\n  username,\n  leftSlot,\n  centerSlot,\n  rightSlot,\n  children,\n  className = \"\",\n}: GlobalStatusBarProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    theme === \"transparent-minimal\";\n  return (\n    <header\n      className={classNames(\"zendir-global-status-bar\", className)}\n      role=\"banner\"\n      style={{\n        display: \"flex\",\n        alignItems: \"center\",\n        justifyContent: \"space-between\",\n        height: 56,\n        padding: `0 ${tokens.spacing.lg}`,\n        backgroundColor: isTransparentTheme\n          ? \"transparent\"\n          : tokens.colors.background.surface,\n        ...(isTransparentTheme && {\n          backdropFilter: \"blur(12px)\",\n          WebkitBackdropFilter: \"blur(12px)\" as const,\n        }),\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        color: tokens.colors.text.primary,\n        fontFamily: tokens.typography.fontFamily.primary,\n      }}\n    >\n      {/* Left section: App identity */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: tokens.spacing.lg,\n          flex: \"1 1 0\",\n        }}\n      >\n        {leftSlot}\n\n        <div\n          style={{\n            display: \"flex\",\n            alignItems: \"baseline\",\n            gap: tokens.spacing.sm,\n          }}\n        >\n          {appDomain && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.normal,\n                color: tokens.colors.text.tertiary,\n                textTransform: \"uppercase\",\n                letterSpacing: tokens.typography.letterSpacing.wide,\n              }}\n            >\n              {appDomain}\n            </span>\n          )}\n          <span\n            style={{\n              fontSize: tokens.typography.fontSize.xl,\n              fontWeight: tokens.typography.fontWeight.semibold,\n              letterSpacing: tokens.typography.letterSpacing.tight,\n              color: tokens.colors.text.primary,\n            }}\n          >\n            {appName}\n          </span>\n          {appVersion && (\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.normal,\n                color: tokens.colors.text.tertiary,\n              }}\n            >\n              v{appVersion}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Center section: Clock */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          flex: \"0 0 auto\",\n        }}\n      >\n        {centerSlot}\n        {children}\n      </div>\n\n      {/* Right section: Monitoring + User */}\n      <div\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"flex-end\",\n          gap: tokens.spacing.lg,\n          flex: \"1 1 0\",\n        }}\n      >\n        {rightSlot}\n\n        {username && (\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: tokens.spacing.sm,\n              paddingLeft: tokens.spacing.lg,\n              borderLeft: `1px solid ${tokens.colors.border.muted}`,\n            }}\n          >\n            {/* User avatar */}\n            <div\n              style={{\n                width: 28,\n                height: 28,\n                borderRadius: tokens.borderRadius.full,\n                backgroundColor: `${tokens.colors.accent.primary}20`,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.semibold,\n                color: safeAccentText(tokens.colors.accent.primary),\n              }}\n            >\n              {username.charAt(0).toUpperCase()}\n            </div>\n            <span\n              style={{\n                fontSize: tokens.typography.fontSize.sm,\n                fontWeight: tokens.typography.fontWeight.medium,\n                color: tokens.colors.text.primary,\n              }}\n            >\n              {username}\n            </span>\n          </div>\n        )}\n      </div>\n    </header>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,IAAa,kBAAkB,KAAK,SAAS,gBAAgB,EAC3D,UAAU,UACV,WACA,YACA,UACA,UACA,YACA,WACA,UACA,YAAY,MAC+B;CAC3C,MAAM,EAAE,QAAQ,UAAU,SAAS;CACnC,MAAM,qBACJ,UAAU,iBACV,UAAU,sBACV,UAAU;CACZ,OACE,qBAAC,UAAD;EACE,WAAW,WAAW,4BAA4B,SAAS;EAC3D,MAAK;EACL,OAAO;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,QAAQ;GACR,SAAS,KAAK,OAAO,QAAQ;GAC7B,iBAAiB,qBACb,gBACA,OAAO,OAAO,WAAW;GAC7B,GAAI,sBAAsB;IACxB,gBAAgB;IAChB,sBAAsB;GACxB;GACA,cAAc,aAAa,OAAO,OAAO,OAAO;GAChD,OAAO,OAAO,OAAO,KAAK;GAC1B,YAAY,OAAO,WAAW,WAAW;EAC3C;YAnBF;GAsBE,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,KAAK,OAAO,QAAQ;KACpB,MAAM;IACR;cANF,CAQG,UAED,qBAAC,OAAD;KACE,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK,OAAO,QAAQ;KACtB;eALF;MAOG,aACC,oBAAC,QAAD;OACE,OAAO;QACL,UAAU,OAAO,WAAW,SAAS;QACrC,YAAY,OAAO,WAAW,WAAW;QACzC,OAAO,OAAO,OAAO,KAAK;QAC1B,eAAe;QACf,eAAe,OAAO,WAAW,cAAc;OACjD;iBAEC;MACG,CAAA;MAER,oBAAC,QAAD;OACE,OAAO;QACL,UAAU,OAAO,WAAW,SAAS;QACrC,YAAY,OAAO,WAAW,WAAW;QACzC,eAAe,OAAO,WAAW,cAAc;QAC/C,OAAO,OAAO,OAAO,KAAK;OAC5B;iBAEC;MACG,CAAA;MACL,cACC,qBAAC,QAAD;OACE,OAAO;QACL,UAAU,OAAO,WAAW,SAAS;QACrC,YAAY,OAAO,WAAW,WAAW;QACzC,OAAO,OAAO,OAAO,KAAK;OAC5B;iBALF,CAMC,KACG,UACE;;KAEL;MACF;;GAGL,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,MAAM;IACR;cANF,CAQG,YACA,QACE;;GAGL,qBAAC,OAAD;IACE,OAAO;KACL,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,KAAK,OAAO,QAAQ;KACpB,MAAM;IACR;cAPF,CASG,WAEA,YACC,qBAAC,OAAD;KACE,OAAO;MACL,SAAS;MACT,YAAY;MACZ,KAAK,OAAO,QAAQ;MACpB,aAAa,OAAO,QAAQ;MAC5B,YAAY,aAAa,OAAO,OAAO,OAAO;KAChD;eAPF,CAUE,oBAAC,OAAD;MACE,OAAO;OACL,OAAO;OACP,QAAQ;OACR,cAAc,OAAO,aAAa;OAClC,iBAAiB,GAAG,OAAO,OAAO,OAAO,QAAQ;OACjD,SAAS;OACT,YAAY;OACZ,gBAAgB;OAChB,UAAU,OAAO,WAAW,SAAS;OACrC,YAAY,OAAO,WAAW,WAAW;OACzC,OAAO,eAAe,OAAO,OAAO,OAAO,OAAO;MACpD;gBAEC,SAAS,OAAO,CAAC,CAAC,CAAC,YAAY;KAC7B,CAAA,GACL,oBAAC,QAAD;MACE,OAAO;OACL,UAAU,OAAO,WAAW,SAAS;OACrC,YAAY,OAAO,WAAW,WAAW;OACzC,OAAO,OAAO,OAAO,KAAK;MAC5B;gBAEC;KACG,CAAA,CACH;MAEJ;;EACC;;AAEZ,CAAC"}