@zendir/ui 0.5.0 → 0.6.1

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":["/**\r\n * @zendir/ui - ClassificationBanner Component (Pure React)\r\n *\r\n * Security classification banner following Astro UX Design System.\r\n * Required for U.S. Space Force applications to display security classification.\r\n *\r\n * Features:\r\n * - Theme-integrated via useTheme()\r\n * - Official classification colors per DoD standards\r\n * - Top/bottom positioning\r\n * - Accessible (screen reader announces classification)\r\n */\r\n\r\nimport React, { memo } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { classNames } from \"../utils\";\r\n\r\nexport type ClassificationLevel =\r\n  | \"unclassified\"\r\n  | \"cui\"\r\n  | \"controlled\"\r\n  | \"confidential\"\r\n  | \"secret\"\r\n  | \"top-secret\"\r\n  | \"top-secret-sci\";\r\n\r\nexport interface ClassificationBannerProps {\r\n  /** Classification level */\r\n  classification: ClassificationLevel;\r\n  /** Custom label (overrides default text) */\r\n  label?: string;\r\n  /** Position of the banner */\r\n  position?: \"top\" | \"bottom\";\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n// Official DoD classification colors\r\nconst CLASSIFICATION_STYLES: Record<\r\n  ClassificationLevel,\r\n  { bg: string; text: string; label: string }\r\n> = {\r\n  unclassified: {\r\n    bg: \"#007a33\",\r\n    text: \"#ffffff\",\r\n    label: \"UNCLASSIFIED\",\r\n  },\r\n  cui: {\r\n    bg: \"#502b85\",\r\n    text: \"#ffffff\",\r\n    label: \"CUI\",\r\n  },\r\n  controlled: {\r\n    bg: \"#502b85\",\r\n    text: \"#ffffff\",\r\n    label: \"CONTROLLED\",\r\n  },\r\n  confidential: {\r\n    bg: \"#0033a0\",\r\n    text: \"#ffffff\",\r\n    label: \"CONFIDENTIAL\",\r\n  },\r\n  secret: {\r\n    bg: \"#c8102e\",\r\n    text: \"#ffffff\",\r\n    label: \"SECRET\",\r\n  },\r\n  \"top-secret\": {\r\n    bg: \"#ff8c00\",\r\n    text: \"#000000\",\r\n    label: \"TOP SECRET\",\r\n  },\r\n  \"top-secret-sci\": {\r\n    bg: \"#fce83a\",\r\n    text: \"#000000\",\r\n    label: \"TOP SECRET//SCI\",\r\n  },\r\n};\r\n\r\n/**\r\n * ClassificationBanner - Pure React classification banner\r\n *\r\n * Displays security classification level. Required for U.S. Space Force applications.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ClassificationBanner classification=\"unclassified\" />\r\n * <ClassificationBanner classification=\"secret\" position=\"bottom\" />\r\n * ```\r\n */\r\nexport const ClassificationBanner = memo(function ClassificationBanner({\r\n  classification,\r\n  label,\r\n  position = \"top\",\r\n  className = \"\",\r\n}: ClassificationBannerProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const style =\r\n    CLASSIFICATION_STYLES[classification] ?? CLASSIFICATION_STYLES.unclassified;\r\n  const displayLabel = label ?? style.label;\r\n\r\n  return (\r\n    <div\r\n      className={classNames(\"zendir-classification-banner\", className)}\r\n      role=\"banner\"\r\n      aria-label={`Security classification: ${displayLabel}`}\r\n      style={{\r\n        position: \"fixed\",\r\n        left: 0,\r\n        right: 0,\r\n        [position]: 0,\r\n        zIndex: 9999,\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"center\",\r\n        height: 20,\r\n        backgroundColor: style.bg,\r\n        color: style.text,\r\n        fontSize: tokens.typography.fontSize.xs,\r\n        fontWeight: tokens.typography.fontWeight.bold,\r\n        letterSpacing: tokens.typography.letterSpacing.wide,\r\n        textTransform: \"uppercase\",\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        userSelect: \"none\",\r\n      }}\r\n    >\r\n      {displayLabel}\r\n    </div>\r\n  );\r\n});\r\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":["/**\r\n * @zendir/ui - GlobalStatusBar Component (Pure React)\r\n *\r\n * Primary header component for space applications following Astro UX patterns.\r\n *\r\n * Features:\r\n * - Theme-integrated via useTheme()\r\n * - App identity (name, domain, version)\r\n * - Clock slot\r\n * - Monitoring icons slot\r\n * - Username display\r\n * - Responsive design\r\n */\r\n\r\nimport React, { memo, ReactNode } from \"react\";\r\nimport { useTheme } from \"../theme\";\r\nimport { classNames, safeAccentText } from \"../utils\";\r\n\r\nexport interface GlobalStatusBarProps {\r\n  /** Application name */\r\n  appName?: string;\r\n  /** Application domain (organization/mission) */\r\n  appDomain?: string;\r\n  /** Application version */\r\n  appVersion?: string;\r\n  /** Username to display */\r\n  username?: string;\r\n  /** Left slot content (app switcher, etc.) */\r\n  leftSlot?: ReactNode;\r\n  /** Center slot content (typically clock) */\r\n  centerSlot?: ReactNode;\r\n  /** Right slot content (monitoring icons, controls) */\r\n  rightSlot?: ReactNode;\r\n  /** Additional children */\r\n  children?: ReactNode;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * GlobalStatusBar - Pure React global status bar\r\n *\r\n * Primary header component for space applications. Includes slots for:\r\n * - App switcher (left)\r\n * - Global clock (center)\r\n * - Monitoring icons (right)\r\n *\r\n * @example\r\n * ```tsx\r\n * <GlobalStatusBar\r\n *   appName=\"Mission Control\"\r\n *   appDomain=\"Zendir\"\r\n *   username=\"Demo User\"\r\n *   centerSlot={<MissionClock />}\r\n *   rightSlot={<MonitoringIcons />}\r\n * />\r\n * ```\r\n */\r\nexport const GlobalStatusBar = memo(function GlobalStatusBar({\r\n  appName = \"Zendir\",\r\n  appDomain,\r\n  appVersion,\r\n  username,\r\n  leftSlot,\r\n  centerSlot,\r\n  rightSlot,\r\n  children,\r\n  className = \"\",\r\n}: GlobalStatusBarProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme =\r\n    theme === \"transparent\" ||\r\n    theme === \"transparent-bold\" ||\r\n    theme === \"transparent-minimal\";\r\n  return (\r\n    <header\r\n      className={classNames(\"zendir-global-status-bar\", className)}\r\n      role=\"banner\"\r\n      style={{\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        justifyContent: \"space-between\",\r\n        height: 56,\r\n        padding: `0 ${tokens.spacing.lg}`,\r\n        backgroundColor: isTransparentTheme\r\n          ? \"transparent\"\r\n          : tokens.colors.background.surface,\r\n        ...(isTransparentTheme && {\r\n          backdropFilter: \"blur(12px)\",\r\n          WebkitBackdropFilter: \"blur(12px)\" as const,\r\n        }),\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n        color: tokens.colors.text.primary,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n      }}\r\n    >\r\n      {/* Left section: App identity */}\r\n      <div\r\n        style={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          gap: tokens.spacing.lg,\r\n          flex: \"1 1 0\",\r\n        }}\r\n      >\r\n        {leftSlot}\r\n\r\n        <div\r\n          style={{\r\n            display: \"flex\",\r\n            alignItems: \"baseline\",\r\n            gap: tokens.spacing.sm,\r\n          }}\r\n        >\r\n          {appDomain && (\r\n            <span\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                fontWeight: tokens.typography.fontWeight.normal,\r\n                color: tokens.colors.text.tertiary,\r\n                textTransform: \"uppercase\",\r\n                letterSpacing: tokens.typography.letterSpacing.wide,\r\n              }}\r\n            >\r\n              {appDomain}\r\n            </span>\r\n          )}\r\n          <span\r\n            style={{\r\n              fontSize: tokens.typography.fontSize.xl,\r\n              fontWeight: tokens.typography.fontWeight.semibold,\r\n              letterSpacing: tokens.typography.letterSpacing.tight,\r\n              color: tokens.colors.text.primary,\r\n            }}\r\n          >\r\n            {appName}\r\n          </span>\r\n          {appVersion && (\r\n            <span\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.xs,\r\n                fontWeight: tokens.typography.fontWeight.normal,\r\n                color: tokens.colors.text.tertiary,\r\n              }}\r\n            >\r\n              v{appVersion}\r\n            </span>\r\n          )}\r\n        </div>\r\n      </div>\r\n\r\n      {/* Center section: Clock */}\r\n      <div\r\n        style={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          justifyContent: \"center\",\r\n          flex: \"0 0 auto\",\r\n        }}\r\n      >\r\n        {centerSlot}\r\n        {children}\r\n      </div>\r\n\r\n      {/* Right section: Monitoring + User */}\r\n      <div\r\n        style={{\r\n          display: \"flex\",\r\n          alignItems: \"center\",\r\n          justifyContent: \"flex-end\",\r\n          gap: tokens.spacing.lg,\r\n          flex: \"1 1 0\",\r\n        }}\r\n      >\r\n        {rightSlot}\r\n\r\n        {username && (\r\n          <div\r\n            style={{\r\n              display: \"flex\",\r\n              alignItems: \"center\",\r\n              gap: tokens.spacing.sm,\r\n              paddingLeft: tokens.spacing.lg,\r\n              borderLeft: `1px solid ${tokens.colors.border.muted}`,\r\n            }}\r\n          >\r\n            {/* User avatar */}\r\n            <div\r\n              style={{\r\n                width: 28,\r\n                height: 28,\r\n                borderRadius: tokens.borderRadius.full,\r\n                backgroundColor: `${tokens.colors.accent.primary}20`,\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                fontWeight: tokens.typography.fontWeight.semibold,\r\n                color: safeAccentText(tokens.colors.accent.primary),\r\n              }}\r\n            >\r\n              {username.charAt(0).toUpperCase()}\r\n            </div>\r\n            <span\r\n              style={{\r\n                fontSize: tokens.typography.fontSize.sm,\r\n                fontWeight: tokens.typography.fontWeight.medium,\r\n                color: tokens.colors.text.primary,\r\n              }}\r\n            >\r\n              {username}\r\n            </span>\r\n          </div>\r\n        )}\r\n      </div>\r\n    </header>\r\n  );\r\n});\r\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"}