@zendir/ui 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @zendir/ui
 
+## 0.4.1
+
+### Patch Changes
+
+- Fix Popover first-open positioning flash: panel now renders with
+  `visibility: hidden` until the initial `requestAnimationFrame` resolves
+  real coordinates, preventing the one-frame misposition on first open.
+
+## 0.4.0
+
+### Minor Changes
+
+- Add `ImageFrame` widget: renders a single-channel sensor/CCD data frame
+  (`number[]` of samples) as a false-colour image on a canvas, with
+  fixed-ceiling normalisation, `cividis`/`gray` colormaps, an optional raw
+  value grid, and loading/empty states. Purely presentational — callers
+  pass the frame data in. Also exports the pure `decodeImage` helper.
+
+### Patch Changes
+
+- Scope the Dialog focus trap to the open transition so typing in a dialog
+  input isn't interrupted when the surrounding parent re-renders.
+
 ## 0.3.0 
 
 **Upgrade from npm:** The latest public release on the registry is

package/dist/index.js

@@ -37,6 +37,8 @@ import { PinInput } from "./react/core/inputs/PinInput.js";
 import { CopyButton, useCopyToClipboard } from "./react/core/display/CopyButton.js";
 import { DataTable, DataTableRowDetail } from "./react/core/data/DataTable.js";
 import { ImageGallery } from "./react/core/widgets/ImageGallery.js";
+import { ImageFrame, decodeImage } from "./react/core/widgets/ImageFrame.js";
+import { ImagePanel } from "./react/core/widgets/ImagePanel.js";
 import { CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ChatPanel, createChatResponseParser, parseChatResponse, parseMcpToolResult } from "./react/core/widgets/ChatPanel.js";
 import { ConnectionForm } from "./react/core/widgets/ConnectionForm.js";
 import { SidePanel } from "./react/core/overlays/SidePanel.js";
@@ -143,7 +145,9 @@ export {
   HeaderIconWithStatus,
   HexViewer,
   Icon,
+  ImageFrame,
   ImageGallery,
+  ImagePanel,
   Input,
   Label,
   LayerControlPanel,
@@ -202,6 +206,7 @@ export {
   classNames,
   createChatResponseParser,
   createPropertyConfig,
+  decodeImage,
   deriveBatteryStatus,
   deriveStatus,
   ecefEulerXyzToHpr,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react/core/feedback/Dialog.js

@@ -52,27 +52,30 @@ const Dialog = memo(function Dialog2({
       onClose();
     }
   }, [closeOnEscape, onClose]);
+  const handleKeyDownRef = useRef(handleKeyDown);
+  handleKeyDownRef.current = handleKeyDown;
   useEffect(() => {
-    if (open) {
-      previousActiveElement.current = document.activeElement;
-      document.body.style.overflow = "hidden";
-      document.addEventListener("keydown", handleKeyDown);
-      const focusTimer = setTimeout(() => {
-        var _a;
-        const focusable = (_a = dialogRef.current) == null ? void 0 : _a.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        focusable == null ? void 0 : focusable.focus();
-      }, 0);
-      return () => {
-        var _a;
-        clearTimeout(focusTimer);
-        document.body.style.overflow = "";
-        document.removeEventListener("keydown", handleKeyDown);
-        (_a = previousActiveElement.current) == null ? void 0 : _a.focus();
-      };
-    }
-  }, [open, handleKeyDown]);
+    if (!open) return void 0;
+    previousActiveElement.current = document.activeElement;
+    document.body.style.overflow = "hidden";
+    const onKeyDown = (e) => handleKeyDownRef.current(e);
+    document.addEventListener("keydown", onKeyDown);
+    const focusTimer = setTimeout(() => {
+      var _a, _b;
+      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(document.activeElement)) return;
+      const focusable = (_b = dialogRef.current) == null ? void 0 : _b.querySelector(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      );
+      focusable == null ? void 0 : focusable.focus();
+    }, 0);
+    return () => {
+      var _a;
+      clearTimeout(focusTimer);
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", onKeyDown);
+      (_a = previousActiveElement.current) == null ? void 0 : _a.focus();
+    };
+  }, [open]);
   if (!open) return null;
   if (typeof document === "undefined") return null;
   return createPortal(/* @__PURE__ */ jsxs(

package/dist/react/core/feedback/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/react/core/feedback/Dialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Dialog/Modal Component\n * \n * Modal dialog following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Dialog\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   title=\"Confirm Action\"\n * >\n *   <p>Are you sure you want to proceed?</p>\n *   <Dialog.Actions>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </Dialog.Actions>\n * </Dialog>\n * ```\n */\n\nimport React, { memo, useEffect, useRef, useCallback, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';\n\nexport interface DialogProps {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Dialog title */\n  title?: string;\n  /** Size variant */\n  size?: DialogSize;\n  /** Show close button */\n  showCloseButton?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdropClick?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface DialogActionsProps {\n  children: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n}\n\nconst DialogActions = memo(function DialogActions({\n  children,\n  align = 'right',\n}: DialogActionsProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.lg,\n        paddingTop: tokens.spacing.md,\n        borderTop: tokens.borders.divider,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Dialog = memo(function Dialog({\n  open,\n  onClose,\n  title,\n  size = 'medium',\n  showCloseButton = true,\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  children,\n  className = '',\n}: DialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const DIALOG_Z_INDEX = 2147483000;\n  \n  const sizeConfig = {\n    small: { width: 'min(360px, calc(100vw - 32px))', maxHeight: '80vh' },\n    medium: { width: 'min(540px, calc(100vw - 32px))', maxHeight: '80vh' },\n    large: { width: 'min(800px, calc(100vw - 32px))', maxHeight: '90vh' },\n    fullscreen: { width: '100vw', maxHeight: '100vh' },\n  };\n  const config = sizeConfig[size];\n  \n  // Handle escape key\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (closeOnEscape && e.key === 'Escape') {\n      onClose();\n    }\n  }, [closeOnEscape, onClose]);\n  \n  // Focus trap and escape key\n  useEffect(() => {\n    if (open) {\n      previousActiveElement.current = document.activeElement as HTMLElement;\n      document.body.style.overflow = 'hidden';\n      document.addEventListener('keydown', handleKeyDown);\n      \n      // Focus first focusable element\n      const focusTimer = setTimeout(() => {\n        const focusable = dialogRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        focusable?.focus();\n      }, 0);\n      \n      return () => {\n        clearTimeout(focusTimer);\n        document.body.style.overflow = '';\n        document.removeEventListener('keydown', handleKeyDown);\n        previousActiveElement.current?.focus();\n      };\n    }\n  }, [open, handleKeyDown]);\n  \n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n\n  return createPortal((\n    <div\n      className={classNames('zendir-dialog-backdrop', className)}\n      onClick={closeOnBackdropClick ? onClose : undefined}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,\n        backdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        display: 'flex',\n        alignItems: size === 'fullscreen' ? 'stretch' : 'center',\n        justifyContent: 'center',\n        zIndex: DIALOG_Z_INDEX,\n        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n      }}\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className=\"zendir-dialog\"\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          width: config.width,\n          maxWidth: size === 'fullscreen' ? '100vw' : 'calc(100vw - 32px)',\n          maxHeight: config.maxHeight,\n          backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.08)' : tokens.colors.background.surface,\n          ...(isTransparentTheme && { backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', border: '1px solid rgba(139, 92, 246, 0.2)' }),\n          borderRadius: size === 'fullscreen' ? 0 : tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          display: 'flex',\n          flexDirection: 'column',\n          overflow: 'hidden',\n          animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n        }}\n      >\n        {/* Header */}\n        {(title || showCloseButton) && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n              borderBottom: tokens.borders.divider,\n            }}\n          >\n            {title && (\n              <h2\n                id={titleId}\n                style={{\n                  margin: 0,\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                }}\n              >\n                {title}\n              </h2>\n            )}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n                style={{\n                  padding: tokens.spacing.sm,\n                  minWidth: 44,\n                  minHeight: 44,\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  borderRadius: tokens.borderRadius.sm,\n                  cursor: 'pointer',\n                  color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  transition: `color ${tokens.animation.fast}`,\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.primary;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;\n                }}\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        \n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: tokens.spacing.lg,\n            overflow: 'auto',\n          }}\n        >\n          {children}\n        </div>\n      </div>\n      \n      <style>\n        {`\n          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }\n          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n        `}\n      </style>\n    </div>\n  ), document.body);\n}) as React.NamedExoticComponent<DialogProps> & {\n  Actions: typeof DialogActions;\n};\n\n// Attach subcomponent\n(Dialog as any).Actions = DialogActions;\n\nexport default Dialog;\n"],"names":["DialogActions","Dialog"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/react/core/feedback/Dialog.tsx"],"sourcesContent":["/**\n * @zendir/ui - Dialog/Modal Component\n * \n * Modal dialog following Astro UX Design System.\n * \n * @example\n * ```tsx\n * <Dialog\n *   open={isOpen}\n *   onClose={() => setIsOpen(false)}\n *   title=\"Confirm Action\"\n * >\n *   <p>Are you sure you want to proceed?</p>\n *   <Dialog.Actions>\n *     <Button variant=\"secondary\" onClick={() => setIsOpen(false)}>Cancel</Button>\n *     <Button onClick={handleConfirm}>Confirm</Button>\n *   </Dialog.Actions>\n * </Dialog>\n * ```\n */\n\nimport React, { memo, useEffect, useRef, useCallback, useId } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\n\nexport type DialogSize = 'small' | 'medium' | 'large' | 'fullscreen';\n\nexport interface DialogProps {\n  /** Open state */\n  open: boolean;\n  /** Close handler */\n  onClose: () => void;\n  /** Dialog title */\n  title?: string;\n  /** Size variant */\n  size?: DialogSize;\n  /** Show close button */\n  showCloseButton?: boolean;\n  /** Close on backdrop click */\n  closeOnBackdropClick?: boolean;\n  /** Close on escape key */\n  closeOnEscape?: boolean;\n  /** Children */\n  children: React.ReactNode;\n  /** Custom className */\n  className?: string;\n}\n\nexport interface DialogActionsProps {\n  children: React.ReactNode;\n  align?: 'left' | 'center' | 'right';\n}\n\nconst DialogActions = memo(function DialogActions({\n  children,\n  align = 'right',\n}: DialogActionsProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center',\n        gap: tokens.spacing.sm,\n        marginTop: tokens.spacing.lg,\n        paddingTop: tokens.spacing.md,\n        borderTop: tokens.borders.divider,\n      }}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport const Dialog = memo(function Dialog({\n  open,\n  onClose,\n  title,\n  size = 'medium',\n  showCloseButton = true,\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  children,\n  className = '',\n}: DialogProps): React.ReactElement | null {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const previousActiveElement = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n  const DIALOG_Z_INDEX = 2147483000;\n  \n  const sizeConfig = {\n    small: { width: 'min(360px, calc(100vw - 32px))', maxHeight: '80vh' },\n    medium: { width: 'min(540px, calc(100vw - 32px))', maxHeight: '80vh' },\n    large: { width: 'min(800px, calc(100vw - 32px))', maxHeight: '90vh' },\n    fullscreen: { width: '100vw', maxHeight: '100vh' },\n  };\n  const config = sizeConfig[size];\n  \n  // Handle escape key. Kept in a ref so the focus-trap effect below can\n  // depend on `open` ALONE: if the effect re-ran whenever `onClose` changed\n  // identity (e.g. a parent passing an inline arrow that re-renders on a\n  // status poll), it would re-fire the focus() call on every render and pull\n  // focus out of whatever the user was typing — making inputs untypable.\n  const handleKeyDown = useCallback((e: KeyboardEvent) => {\n    if (closeOnEscape && e.key === 'Escape') {\n      onClose();\n    }\n  }, [closeOnEscape, onClose]);\n  const handleKeyDownRef = useRef(handleKeyDown);\n  handleKeyDownRef.current = handleKeyDown;\n\n  // Focus trap and escape key — runs only on open/close transitions.\n  useEffect(() => {\n    if (!open) return undefined;\n\n    previousActiveElement.current = document.activeElement as HTMLElement;\n    document.body.style.overflow = 'hidden';\n    const onKeyDown = (e: KeyboardEvent) => handleKeyDownRef.current(e);\n    document.addEventListener('keydown', onKeyDown);\n\n    // Move focus into the dialog once — but honour a child that already\n    // grabbed it (e.g. an Input with autoFocus). Without this guard we'd\n    // override the intended initial focus and land on the first focusable,\n    // which is usually the close button.\n    const focusTimer = setTimeout(() => {\n      if (dialogRef.current?.contains(document.activeElement)) return;\n      const focusable = dialogRef.current?.querySelector<HTMLElement>(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n      );\n      focusable?.focus();\n    }, 0);\n\n    return () => {\n      clearTimeout(focusTimer);\n      document.body.style.overflow = '';\n      document.removeEventListener('keydown', onKeyDown);\n      previousActiveElement.current?.focus();\n    };\n  }, [open]);\n  \n  if (!open) return null;\n  if (typeof document === 'undefined') return null;\n\n  return createPortal((\n    <div\n      className={classNames('zendir-dialog-backdrop', className)}\n      onClick={closeOnBackdropClick ? onClose : undefined}\n      style={{\n        position: 'fixed',\n        inset: 0,\n        backgroundColor: isTransparentTheme ? `${tokens.colors.background.base}66` : `${tokens.colors.background.base}99`,\n        backdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(4px)' : undefined,\n        display: 'flex',\n        alignItems: size === 'fullscreen' ? 'stretch' : 'center',\n        justifyContent: 'center',\n        zIndex: DIALOG_Z_INDEX,\n        animation: `zendir-dialog-backdrop ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n      }}\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        className=\"zendir-dialog\"\n        onClick={(e) => e.stopPropagation()}\n        style={{\n          width: config.width,\n          maxWidth: size === 'fullscreen' ? '100vw' : 'calc(100vw - 32px)',\n          maxHeight: config.maxHeight,\n          backgroundColor: isTransparentTheme ? 'rgba(139, 92, 246, 0.08)' : tokens.colors.background.surface,\n          ...(isTransparentTheme && { backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)', border: '1px solid rgba(139, 92, 246, 0.2)' }),\n          borderRadius: size === 'fullscreen' ? 0 : tokens.borderRadius.lg,\n          boxShadow: tokens.shadows.xl,\n          display: 'flex',\n          flexDirection: 'column',\n          overflow: 'hidden',\n          animation: `zendir-dialog-panel ${tokens.animation.duration.normal}ms ${tokens.animation.easing.default} both`,\n        }}\n      >\n        {/* Header */}\n        {(title || showCloseButton) && (\n          <div\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'space-between',\n              padding: `${tokens.spacing.md} ${tokens.spacing.lg}`,\n              borderBottom: tokens.borders.divider,\n            }}\n          >\n            {title && (\n              <h2\n                id={titleId}\n                style={{\n                  margin: 0,\n                  fontSize: tokens.typography.fontSize.lg,\n                  fontWeight: tokens.typography.fontWeight.semibold,\n                  color: tokens.colors.text.primary,\n                }}\n              >\n                {title}\n              </h2>\n            )}\n            {showCloseButton && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                aria-label=\"Close dialog\"\n                style={{\n                  padding: tokens.spacing.sm,\n                  minWidth: 44,\n                  minHeight: 44,\n                  backgroundColor: 'transparent',\n                  border: 'none',\n                  borderRadius: tokens.borderRadius.sm,\n                  cursor: 'pointer',\n                  color: tokens.colors.text.muted ?? tokens.colors.text.tertiary,\n                  display: 'flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  transition: `color ${tokens.animation.fast}`,\n                }}\n                onMouseEnter={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.primary;\n                }}\n                onMouseLeave={(e) => {\n                  e.currentTarget.style.color = tokens.colors.text.muted ?? tokens.colors.text.tertiary;\n                }}\n              >\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n                </svg>\n              </button>\n            )}\n          </div>\n        )}\n        \n        {/* Content */}\n        <div\n          style={{\n            flex: 1,\n            padding: tokens.spacing.lg,\n            overflow: 'auto',\n          }}\n        >\n          {children}\n        </div>\n      </div>\n      \n      <style>\n        {`\n          @keyframes zendir-dialog-backdrop { from { opacity: 0; } to { opacity: 1; } }\n          @keyframes zendir-dialog-panel { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n        `}\n      </style>\n    </div>\n  ), document.body);\n}) as React.NamedExoticComponent<DialogProps> & {\n  Actions: typeof DialogActions;\n};\n\n// Attach subcomponent\n(Dialog as any).Actions = DialogActions;\n\nexport default Dialog;\n"],"names":["DialogActions","Dialog"],"mappings":"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"}

package/dist/react/core/index.d.ts

@@ -83,6 +83,10 @@ export { DataTable, DataTableRowDetail } from './data/DataTable';
 export type { DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField } from './data/DataTable';
 export { ImageGallery } from './widgets/ImageGallery';
 export type { ImageGalleryProps, GalleryImage } from './widgets/ImageGallery';
+export { ImageFrame, decodeImage } from './widgets/ImageFrame';
+export type { ImageFrameProps, ImageColormap } from './widgets/ImageFrame';
+export { ImagePanel } from './widgets/ImagePanel';
+export type { ImagePanelProps } from './widgets/ImagePanel';
 export { ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT } from './widgets/ChatPanel';
 export type { ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult } from './widgets/ChatPanel';
 export { ConnectionForm } from './widgets/ConnectionForm';

package/dist/react/core/index.js

@@ -37,6 +37,8 @@ import { PinInput } from "./inputs/PinInput.js";
 import { CopyButton, useCopyToClipboard } from "./display/CopyButton.js";
 import { DataTable, DataTableRowDetail } from "./data/DataTable.js";
 import { ImageGallery } from "./widgets/ImageGallery.js";
+import { ImageFrame, decodeImage } from "./widgets/ImageFrame.js";
+import { ImagePanel } from "./widgets/ImagePanel.js";
 import { CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ChatPanel, createChatResponseParser, parseChatResponse, parseMcpToolResult } from "./widgets/ChatPanel.js";
 import { ConnectionForm } from "./widgets/ConnectionForm.js";
 import { SidePanel } from "./overlays/SidePanel.js";
@@ -106,7 +108,9 @@ export {
   HeaderIconWithStatus,
   HexViewer,
   Icon,
+  ImageFrame,
   ImageGallery,
+  ImagePanel,
   Input,
   Label,
   LimitsBar,
@@ -138,6 +142,7 @@ export {
   VStack,
   createChatResponseParser,
   createPropertyConfig,
+  decodeImage,
   deriveBatteryStatus,
   deriveStatus,
   formatPropertyLabel,

package/dist/react/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react/core/navigation/SideNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.js","sources":["../../../../src/react/core/navigation/SideNav.tsx"],"sourcesContent":["/**\n * @zendir/ui - SideNav Component\n * \n * Persistent sidebar navigation for operator dashboards. Compound component\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\n * \n * Responsive: Full sidebar on desktop, hamburger overlay on mobile.\n * \n * Astro UX Compliance:\n * - Persistent side navigation pattern (AstroUXDS Navigation)\n * - Status indicator integration\n * - Active state highlighting with accent color\n * - Keyboard navigation support\n * - Reduced motion support\n * \n * @example\n * ```tsx\n * <SideNav>\n *   <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\n *   <SideNav.Section title=\"Operations\">\n *     <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\n *     <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\n *     <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\n *   </SideNav.Section>\n *   <SideNav.Divider />\n *   <SideNav.Section title=\"Analysis\">\n *     <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\n *     <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\n *   </SideNav.Section>\n *   <SideNav.Footer>\n *     <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\n *   </SideNav.Footer>\n * </SideNav>\n * ```\n */\n\nimport React, { memo, useState, createContext, useContext, useCallback, useEffect, useLayoutEffect } from 'react';\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\nimport { useTheme } from '../../theme';\nimport { safeAccentText } from '../../utils';\nimport { Icon } from '../display/Icon';\nimport type { IconName } from '../display/Icon';\n\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\n\nconst SIDENAV_STATUS_COLORS: Record<string, string> = {\n  off: '#a4abb6',\n  standby: '#2dccff',\n  normal: '#56f000',\n  caution: '#fce83a',\n  serious: '#ffb302',\n  critical: '#ff3838',\n};\n\n/** Astro UX dual-coded status shape (color + geometry). */\nfunction NavStatusShape({ status, size = 8 }: { status: string; size?: number }) {\n  const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;\n  const glow = `${color}50`;\n  const style = { flexShrink: 0 as const, filter: `drop-shadow(0 0 3px ${glow})` };\n\n  switch (status) {\n    case 'caution':\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} /></svg>;\n    case 'serious':\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,1 11,6 6,11 1,6\" fill={color} /></svg>;\n    case 'critical':\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,11 1,2 11,2\" fill={color} /></svg>;\n    case 'standby':\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" /></svg>;\n    case 'off':\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} /></svg>;\n    default: // normal\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} /></svg>;\n  }\n}\n\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\n\nconst SIDENAV_BREAKPOINTS = {\n  mobile: 768,\n  tablet: 1024,\n} as const;\n\ntype SideNavMode = 'desktop' | 'tablet' | 'mobile';\n\nfunction getSideNavMode(width: number): SideNavMode {\n  if (width < SIDENAV_BREAKPOINTS.mobile) return 'mobile';\n  if (width < SIDENAV_BREAKPOINTS.tablet) return 'tablet';\n  return 'desktop';\n}\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\ninterface SideNavContextValue {\n  collapsed: boolean;\n  mobileOpen: boolean;\n  mode: SideNavMode;\n  showCollapseToggle: boolean;\n  setMobileOpen: (open: boolean) => void;\n  toggleCollapse: () => void;\n}\n\nconst SideNavContext = createContext<SideNavContextValue>({\n  collapsed: false,\n  mobileOpen: false,\n  mode: 'desktop',\n  showCollapseToggle: true,\n  setMobileOpen: () => {},\n  toggleCollapse: () => {},\n});\n\n// ─── SideNav ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavProps {\n  /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */\n  collapsed?: boolean;\n  /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */\n  onCollapsedChange?: (collapsed: boolean) => void;\n  /** Show a collapse/expand toggle button in the sidebar (default true). */\n  showCollapseToggle?: boolean;\n  /** Width in pixels (default 260) */\n  width?: number;\n  /** Collapsed width in pixels (default 64) */\n  collapsedWidth?: number;\n  /**\n   * Mobile viewport behavior.\n   * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\n   * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\n   */\n  mobileVariant?: 'drawer' | 'collapsed';\n  /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */\n  children?: React.ReactNode;\n  /** Custom style */\n  style?: React.CSSProperties;\n}\n\nconst SideNavRoot = memo(function SideNav({\n  collapsed,\n  onCollapsedChange,\n  showCollapseToggle = true,\n  width = 260,\n  collapsedWidth = 64,\n  mobileVariant = 'drawer',\n  children,\n  style,\n}: SideNavProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [mobileOpen, setMobileOpen] = useState(false);\n  const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);\n  \n  // Initialize to 'desktop' to guarantee the first client render matches SSR\n  // (where window is undefined), preventing a React hydration mismatch if the\n  // client happens to be on a mobile/tablet width at initial load.\n  const [viewMode, setViewMode] = useState<SideNavMode>('desktop');\n  \n  useIsomorphicLayoutEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    // Synchronously correct the viewMode right after hydration but before paint\n    setViewMode(getSideNavMode(window.innerWidth));\n\n    let rafId: number;\n    const handleResize = () => {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));\n    };\n    window.addEventListener('resize', handleResize, { passive: true });\n    return () => {\n      window.removeEventListener('resize', handleResize);\n      cancelAnimationFrame(rafId);\n    };\n  }, []);\n\n  // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\n  const effectiveMode = mobileVariant === 'collapsed' && viewMode === 'mobile' ? 'tablet' : viewMode;\n\n  // Reset user toggle when crossing breakpoints\n  useEffect(() => {\n    setUserCollapsed(null);\n  }, [effectiveMode]);\n\n  // Close mobile drawer when switching away from mobile\n  useEffect(() => {\n    if (effectiveMode !== 'mobile' && mobileOpen) setMobileOpen(false);\n  }, [effectiveMode, mobileOpen]);\n  \n  // Close mobile nav on escape\n  useEffect(() => {\n    if (!mobileOpen) return;\n    const handleEsc = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') setMobileOpen(false);\n    };\n    document.addEventListener('keydown', handleEsc);\n    return () => document.removeEventListener('keydown', handleEsc);\n  }, [mobileOpen]);\n\n  // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\n  const autoCollapsed = effectiveMode === 'tablet';\n  const isCollapsed = collapsed !== undefined\n    ? collapsed\n    : userCollapsed !== null\n      ? userCollapsed\n      : autoCollapsed;\n  const isMobile = effectiveMode === 'mobile';\n  const navWidth = isCollapsed ? collapsedWidth : width;\n\n  const handleToggleCollapse = useCallback(() => {\n    const next = !isCollapsed;\n    setUserCollapsed(next);\n    onCollapsedChange?.(next);\n  }, [isCollapsed, onCollapsedChange]);\n  \n  const navStyle: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    width: isMobile ? 280 : navWidth,\n    height: '100%',\n    backgroundColor: isTransparentTheme\n      ? 'rgba(15, 12, 30, 0.7)'\n      : tokens.colors.background.surface,\n    borderRight: `1px solid ${tokens.colors.border.muted}`,\n    transition: 'width 0.25s ease, transform 0.25s ease',\n    overflowX: 'hidden',\n    overflowY: 'auto',\n    flexShrink: 0,\n    fontFamily: tokens.typography.fontFamily.primary,\n    ...(isTransparentTheme ? {\n      backdropFilter: 'blur(16px)',\n      WebkitBackdropFilter: 'blur(16px)',\n    } : {}),\n    ...style,\n  };\n  \n  const contextValue: SideNavContextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };\n  \n  // Mobile: hamburger button + overlay drawer\n  if (isMobile) {\n    return (\n      <SideNavContext.Provider value={contextValue}>\n        {/* Hamburger button */}\n        <button\n          aria-label=\"Open navigation\"\n          onClick={() => setMobileOpen(true)}\n          style={{\n            position: 'fixed',\n            top: 6,\n            left: 6,\n            zIndex: 1001,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            width: 32,\n            height: 32,\n            border: 'none',\n            borderRadius: tokens.borderRadius.sm,\n            backgroundColor: 'transparent',\n            color: tokens.colors.text.primary,\n            cursor: 'pointer',\n            padding: 0,\n            transition: tokens.animation.fast,\n          }}\n        >\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\n            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\n            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\n          </svg>\n        </button>\n        \n        {/* Overlay */}\n        <div\n          aria-hidden=\"true\"\n          style={{\n            position: 'fixed',\n            inset: 0,\n            zIndex: 1002,\n            backgroundColor: `${tokens.colors.background.base}99`,\n            backdropFilter: 'blur(4px)',\n            opacity: mobileOpen ? 1 : 0,\n            pointerEvents: mobileOpen ? 'auto' : 'none',\n            transition: 'opacity 0.25s ease',\n          }}\n          onClick={() => setMobileOpen(false)}\n        />\n        \n        {/* Slide-out nav */}\n        <nav\n          role=\"navigation\"\n          aria-label=\"Main navigation\"\n          style={{\n            ...navStyle,\n            position: 'fixed',\n            top: 0,\n            left: 0,\n            zIndex: 1003,\n            transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)',\n            boxShadow: mobileOpen ? tokens.shadows.xl : 'none',\n          }}\n        >\n          {children}\n        </nav>\n      </SideNavContext.Provider>\n    );\n  }\n  \n  return (\n    <SideNavContext.Provider value={contextValue}>\n      <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\n        {children}\n      </nav>\n    </SideNavContext.Provider>\n  );\n});\n\n// ─── Header ──────────────────────────────────────────────────────────────────\n\n/** Default height for the logo row so dashboard / operator / other apps align the same mark. */\nexport const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;\n\nexport interface SideNavHeaderProps {\n  /** Logo element (Icon, image, or ReactNode) */\n  logo?: React.ReactNode;\n  /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */\n  collapsedLogo?: React.ReactNode;\n  /** App title */\n  title?: string;\n  /** Subtitle or version */\n  subtitle?: string;\n  /** Role badge (e.g., \"Operator\", \"Admin\") */\n  badge?: string;\n  /** Badge variant for color */\n  badgeVariant?: 'info' | 'success' | 'warning' | 'caution';\n  /**\n   * Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band\n   * so different logo assets still line up across apps (dashboard vs operator).\n   */\n  logoSlotHeight?: number;\n  /** Children override (advanced: replaces default header content entirely) */\n  children?: React.ReactNode;\n}\n\n/** Chevron toggle button for collapsing/expanding the sidebar. */\nfunction CollapseToggleButton() {\n  const { tokens } = useTheme();\n  const { collapsed, toggleCollapse } = useContext(SideNavContext);\n  const [hovered, setHovered] = useState(false);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\n      onClick={toggleCollapse}\n      onMouseEnter={() => setHovered(true)}\n      onMouseLeave={() => setHovered(false)}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        width: 28,\n        height: 28,\n        border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\n        borderRadius: tokens.borderRadius.md,\n        backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : 'transparent',\n        color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,\n        cursor: 'pointer',\n        flexShrink: 0,\n        padding: 0,\n        transition: tokens.animation.fast,\n        outline: 'none',\n      }}\n    >\n      <svg\n        width=\"14\"\n        height=\"14\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        style={{\n          transition: 'transform 0.25s ease',\n          transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',\n        }}\n      >\n        <polyline points=\"15 18 9 12 15 6\" />\n      </svg>\n    </button>\n  );\n}\n\nconst SideNavHeader = memo(function SideNavHeader({\n  logo,\n  collapsedLogo,\n  title,\n  subtitle,\n  badge,\n  badgeVariant = 'info',\n  logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,\n  children,\n}: SideNavHeaderProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);\n  const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\n  const showToggle = showCollapseToggle && mode !== 'mobile';\n  const hasMeta = Boolean(title || subtitle || badge);\n  const slotH = logoSlotHeight;\n\n  const badgeColors: Record<string, string> = {\n    info: tokens.colors.accent.primary,\n    success: tokens.colors.status.normal,\n    warning: tokens.colors.status.caution,\n    caution: tokens.colors.status.serious,\n  };\n\n  const metaBlock = !collapsed && hasMeta ? (\n    <div style={{ flex: 1, minWidth: 0, width: '100%' }}>\n      {title ? (\n        <div style={{\n          fontSize: tokens.typography.fontSize.sm,\n          fontWeight: tokens.typography.fontWeight.bold,\n          color: tokens.colors.text.primary,\n          lineHeight: tokens.typography.lineHeight.tight,\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}>\n          {title}\n        </div>\n      ) : null}\n      {(subtitle || badge) ? (\n        <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, marginTop: title ? '2px' : 0, flexWrap: 'wrap' }}>\n          {subtitle ? (\n            <span style={{\n              fontSize: tokens.typography.fontSize.xxs,\n              color: tokens.colors.text.tertiary,\n            }}>\n              {subtitle}\n            </span>\n          ) : null}\n          {badge ? (\n            <span style={{\n              fontSize: '0.6rem',\n              fontWeight: tokens.typography.fontWeight.bold,\n              color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),\n              backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,\n              border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,\n              padding: '1px 6px',\n              borderRadius: tokens.borderRadius.sm,\n              textTransform: 'uppercase',\n              letterSpacing: '0.05em',\n            }}>\n              {badge}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n    </div>\n  ) : null;\n\n  const logoSlot = displayLogo ? (\n    <div\n      style={{\n        height: slotH,\n        minHeight: slotH,\n        maxHeight: slotH,\n        width: '100%',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: collapsed ? 'center' : 'flex-start',\n        overflow: 'hidden',\n        boxSizing: 'border-box',\n        marginBottom: !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0,\n      }}\n    >\n      <div\n        style={{\n          maxHeight: '100%',\n          maxWidth: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: collapsed ? 'center' : 'flex-start',\n          minWidth: 0,\n          cursor: collapsed && showToggle ? 'pointer' : undefined,\n        }}\n        onClick={collapsed && showToggle ? toggleCollapse : undefined}\n      >\n        {displayLogo}\n      </div>\n    </div>\n  ) : null;\n\n  if (children) {\n    return (\n      <div style={{\n        padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        flexShrink: 0,\n        boxSizing: 'border-box',\n        position: 'relative',\n      }}>\n        {children}\n      </div>\n    );\n  }\n\n  // Collapsed: centered logo in the same fixed slot height as expanded (visual parity with operator).\n  if (collapsed) {\n    return (\n      <div style={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,\n        minHeight: slotH + 24,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        flexShrink: 0,\n        boxSizing: 'border-box',\n        position: 'relative',\n        justifyContent: 'center',\n      }}>\n        {logoSlot}\n        {showToggle ? (\n          <div style={{ position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)' }}>\n            <CollapseToggleButton />\n          </div>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div style={{\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\n      borderBottom: `1px solid ${tokens.colors.border.muted}`,\n      flexShrink: 0,\n      boxSizing: 'border-box',\n      position: 'relative',\n    }}>\n      {showToggle ? (\n        <div style={{ position: 'absolute', top: tokens.spacing.sm, right: tokens.spacing.sm, zIndex: 1 }}>\n          <CollapseToggleButton />\n        </div>\n      ) : null}\n      <div style={{ paddingRight: showToggle ? 36 : 0, width: '100%', minWidth: 0 }}>\n        {logoSlot}\n        {metaBlock}\n      </div>\n    </div>\n  );\n});\n\n// ─── Item ────────────────────────────────────────────────────────────────────\n\nexport interface SideNavItemProps {\n  /** Icon name from zendir-ui icon library */\n  icon?: IconName | React.ReactNode;\n  /** Label text */\n  label: string;\n  /** Description text displayed beneath the label (hidden in collapsed mode) */\n  description?: string;\n  /** Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") */\n  tag?: string;\n  /** Tag color variant */\n  tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';\n  /** Link href (renders <a>) */\n  href?: string;\n  /** Click handler (renders <button>) */\n  onClick?: () => void;\n  /** Active state */\n  active?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Notification badge count */\n  badge?: number;\n  /** External link indicator */\n  external?: boolean;\n  /**\n   * Astro UX status level — renders a dual-coded indicator (color + shape).\n   * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\n   * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\n   */\n  status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\n  /** Optional status label shown as tooltip or text next to status shape */\n  statusLabel?: string;\n  /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */\n  suffix?: React.ReactNode;\n}\n\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\n  default: { bg: '#ffffff10', fg: '#9590a8', border: '#ffffff15' },\n  info: { bg: '#8a2be218', fg: '#c4a0ff', border: '#8a2be230' },\n  success: { bg: '#56f00018', fg: '#56f000', border: '#56f00030' },\n  warning: { bg: '#fce83a18', fg: '#fce83a', border: '#fce83a30' },\n  danger: { bg: '#ff383818', fg: '#ff3838', border: '#ff383830' },\n};\n\nconst SideNavItem = memo(function SideNavItem({\n  icon,\n  label,\n  description,\n  tag,\n  tagVariant = 'default',\n  href,\n  onClick,\n  active = false,\n  disabled = false,\n  badge,\n  external = false,\n  status,\n  statusLabel,\n  suffix,\n}: SideNavItemProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed, setMobileOpen } = useContext(SideNavContext);\n  const [isHovered, setIsHovered] = useState(false);\n  \n  const handleClick = useCallback((e: React.MouseEvent) => {\n    if (disabled) return;\n    if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {\n      e.preventDefault();\n    }\n    setMobileOpen(false);\n    onClick?.();\n  }, [disabled, onClick, href, setMobileOpen]);\n  \n  // Status-aware accent: when an item has a status, tint active/hover with its color\n  const statusColor = status ? (SIDENAV_STATUS_COLORS[status] ?? undefined) : undefined;\n  const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);\n  \n  const hasDescription = !!description && !collapsed;\n  \n  const iconElement = typeof icon === 'string'\n    ? <Icon name={icon as IconName} size={hasDescription ? 22 : 20} color={active ? accentColor : tokens.colors.text.secondary} />\n    : icon;\n  \n  const itemStyle: React.CSSProperties = {\n    display: 'flex',\n    alignItems: hasDescription ? 'flex-start' : 'center',\n    gap: tokens.spacing.sm,\n    padding: collapsed\n      ? `${tokens.spacing.sm} 0`\n      : hasDescription\n        ? `10px 16px 10px 12px`\n        : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\n    justifyContent: collapsed ? 'center' : 'flex-start',\n    color: active\n      ? accentColor\n      : disabled\n        ? tokens.colors.text.tertiary\n        : tokens.colors.text.secondary,\n    backgroundColor: active\n      ? `${accentColor}12`\n      : isHovered && !disabled\n        ? `${accentColor}08`\n        : 'transparent',\n    fontSize: tokens.typography.fontSize.sm,\n    fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,\n    fontFamily: tokens.typography.fontFamily.primary,\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    textDecoration: 'none',\n    borderTop: 'none',\n    borderRight: 'none',\n    borderBottom: 'none',\n    borderLeft: active\n      ? `3px solid ${accentColor}`\n      : '3px solid transparent',\n    outline: 'none',\n    width: '100%',\n    boxSizing: 'border-box',\n    transition: tokens.animation.fast,\n    position: 'relative',\n    opacity: disabled ? 0.5 : 1,\n  };\n  \n  const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\n  \n  const content = (\n    <>\n      {/* Icon + collapsed status overlay */}\n      {iconElement && (\n        <span style={{ flexShrink: 0, display: 'flex', position: 'relative', marginTop: hasDescription ? '2px' : 0 }}>\n          {iconElement}\n          {/* In collapsed mode, show a small status shape overlaid on the icon (top-left) */}\n          {collapsed && status && (\n            <span\n              style={{\n                position: 'absolute',\n                top: -3,\n                left: -4,\n                lineHeight: 0,\n              }}\n              title={statusLabel ?? status}\n            >\n              <NavStatusShape status={status} size={7} />\n            </span>\n          )}\n        </span>\n      )}\n      {!collapsed && (\n        <>\n          {/* Label + description block */}\n          <span style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>\n            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\n              <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\n                {label}\n              </span>\n              {tag && (\n                <span style={{\n                  fontSize: '0.6rem',\n                  fontWeight: tokens.typography.fontWeight.bold,\n                  color: tagColors.fg,\n                  backgroundColor: tagColors.bg,\n                  border: `1px solid ${tagColors.border}`,\n                  padding: '1px 5px',\n                  borderRadius: tokens.borderRadius.sm,\n                  textTransform: 'uppercase',\n                  letterSpacing: '0.04em',\n                  flexShrink: 0,\n                  lineHeight: '1.3',\n                  whiteSpace: 'nowrap',\n                }}>\n                  {tag}\n                </span>\n              )}\n            </span>\n            {description && (\n              <span style={{\n                display: 'block',\n                fontSize: tokens.typography.fontSize.xxs,\n                color: tokens.colors.text.tertiary,\n                lineHeight: tokens.typography.lineHeight.normal,\n                marginTop: '2px',\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                fontWeight: tokens.typography.fontWeight.normal,\n              }}>\n                {description}\n              </span>\n            )}\n          </span>\n          {/* Right-side trailing elements — badge, status, suffix, external icon */}\n          {(badge !== undefined && badge > 0 || status || suffix || external) && (\n            <span style={{\n              display: 'inline-flex',\n              alignItems: 'center',\n              gap: 8,\n              flexShrink: 0,\n              marginTop: hasDescription ? '2px' : 0,\n            }}>\n              {/* Badge */}\n              {badge !== undefined && badge > 0 && (\n                <span style={{\n                  fontSize: '0.65rem',\n                  fontWeight: tokens.typography.fontWeight.bold,\n                  color: '#fff',\n                  backgroundColor: tokens.colors.status.critical,\n                  borderRadius: tokens.borderRadius.full,\n                  minWidth: '18px',\n                  height: '18px',\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  padding: '0 5px',\n                  flexShrink: 0,\n                  lineHeight: 1,\n                  boxSizing: 'border-box',\n                }}>\n                  {badge > 99 ? '99+' : badge}\n                </span>\n              )}\n              {/* Status */}\n              {status && (\n                <span\n                  style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\n                  role=\"status\"\n                  aria-label={`Status: ${statusLabel ?? status}`}\n                  title={statusLabel ?? status}\n                >\n                  <NavStatusShape status={status} size={8} />\n                </span>\n              )}\n              {/* Suffix */}\n              {suffix && (\n                <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}>\n                  {suffix}\n                </span>\n              )}\n              {/* External */}\n              {external && (\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" style={{ flexShrink: 0, opacity: 0.5 }}>\n                  <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n                  <polyline points=\"15 3 21 3 21 9\" />\n                  <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\n                </svg>\n              )}\n            </span>\n          )}\n        </>\n      )}\n    </>\n  );\n  \n  const props = {\n    style: itemStyle,\n    onMouseEnter: () => setIsHovered(true),\n    onMouseLeave: () => setIsHovered(false),\n    title: collapsed ? label : undefined,\n    'aria-current': active ? ('page' as const) : undefined,\n    'aria-disabled': disabled,\n  };\n  \n  if (href && !disabled) {\n    return (\n      <a href={href} onClick={handleClick} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>\n        {content}\n      </a>\n    );\n  }\n  \n  return (\n    <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\n      {content}\n    </button>\n  );\n});\n\n// ─── Section ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavSectionProps {\n  /** Section title */\n  title?: string;\n  /** Children (SideNav.Item elements) */\n  children?: React.ReactNode;\n}\n\nconst SideNavSection = memo(function SideNavSection({\n  title,\n  children,\n}: SideNavSectionProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed } = useContext(SideNavContext);\n  \n  return (\n    <div style={{ marginTop: tokens.spacing.sm }}>\n      {title && !collapsed && (\n        <div style={{\n          padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\n          fontSize: tokens.typography.fontSize.xxs,\n          fontWeight: tokens.typography.fontWeight.bold,\n          color: tokens.colors.text.tertiary,\n          textTransform: 'uppercase',\n          letterSpacing: '0.08em',\n        }}>\n          {title}\n        </div>\n      )}\n      {collapsed && title && (\n        <div style={{\n          width: '60%',\n          height: '1px',\n          backgroundColor: tokens.colors.border.muted,\n          margin: `${tokens.spacing.xs} auto`,\n        }} />\n      )}\n      {children}\n    </div>\n  );\n});\n\n// ─── Divider ─────────────────────────────────────────────────────────────────\n\nexport interface SideNavDividerProps {\n  /** Optional label shown in the center of the divider line */\n  label?: string;\n}\n\nconst SideNavDivider = memo(function SideNavDivider({\n  label,\n}: SideNavDividerProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { collapsed } = useContext(SideNavContext);\n\n  if (collapsed) {\n    return (\n      <div style={{\n        width: '60%',\n        height: '1px',\n        backgroundColor: tokens.colors.border.muted,\n        margin: `${tokens.spacing.sm} auto`,\n      }} />\n    );\n  }\n\n  if (label) {\n    return (\n      <div style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: tokens.spacing.sm,\n        padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n      }}>\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\n        <span style={{\n          fontSize: tokens.typography.fontSize.xxs,\n          color: tokens.colors.text.tertiary,\n          textTransform: 'uppercase',\n          letterSpacing: '0.06em',\n          whiteSpace: 'nowrap',\n        }}>\n          {label}\n        </span>\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\n      </div>\n    );\n  }\n\n  return (\n    <div style={{\n      height: '1px',\n      backgroundColor: tokens.colors.border.muted,\n      margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\n    }} />\n  );\n});\n\n// ─── Footer ──────────────────────────────────────────────────────────────────\n\nexport interface SideNavFooterProps {\n  children?: React.ReactNode;\n}\n\nconst SideNavFooter = memo(function SideNavFooter({\n  children,\n}: SideNavFooterProps): React.ReactElement {\n  const { tokens } = useTheme();\n  \n  return (\n    <div style={{\n      marginTop: 'auto',\n      borderTop: `1px solid ${tokens.colors.border.muted}`,\n      paddingTop: tokens.spacing.xs,\n      paddingBottom: tokens.spacing.xs,\n    }}>\n      {children}\n    </div>\n  );\n});\n\n// ─── Compound Export ─────────────────────────────────────────────────────────\n\ntype SideNavComponent = typeof SideNavRoot & {\n  Header: typeof SideNavHeader;\n  Item: typeof SideNavItem;\n  Section: typeof SideNavSection;\n  Divider: typeof SideNavDivider;\n  Footer: typeof SideNavFooter;\n};\n\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\n  Header: SideNavHeader,\n  Item: SideNavItem,\n  Section: SideNavSection,\n  Divider: SideNavDivider,\n  Footer: SideNavFooter,\n});\n\nexport default SideNav;\n"],"names":["SideNav","SideNavHeader","SideNavItem","SideNavSection","SideNavDivider","SideNavFooter"],"mappings":"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"}
+{"version":3,"file":"SideNav.js","sources":["../../../../src/react/core/navigation/SideNav.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - SideNav Component\r\n * \r\n * Persistent sidebar navigation for operator dashboards. Compound component\r\n * pattern with Header, Item, Section, Divider, and Footer subcomponents.\r\n * \r\n * Responsive: Full sidebar on desktop, hamburger overlay on mobile.\r\n * \r\n * Astro UX Compliance:\r\n * - Persistent side navigation pattern (AstroUXDS Navigation)\r\n * - Status indicator integration\r\n * - Active state highlighting with accent color\r\n * - Keyboard navigation support\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <SideNav>\r\n *   <SideNav.Header logo={<Icon name=\"satellite\" size={24} />} title=\"Space Range\" badge=\"Operator\" />\r\n *   <SideNav.Section title=\"Operations\">\r\n *     <SideNav.Item icon=\"controls\" label=\"Controls\" description=\"System command interface\" href=\"/controls\" active />\r\n *     <SideNav.Item icon=\"telemetry\" label=\"Telemetry\" href=\"/telemetry\" badge={3} tag=\"LIVE\" tagVariant=\"success\" />\r\n *     <SideNav.Item icon=\"images\" label=\"Images\" href=\"/images\" />\r\n *   </SideNav.Section>\r\n *   <SideNav.Divider />\r\n *   <SideNav.Section title=\"Analysis\">\r\n *     <SideNav.Item icon=\"chart\" label=\"Plots\" href=\"/plots\" />\r\n *     <SideNav.Item icon=\"map\" label=\"Map\" href=\"/map\" />\r\n *   </SideNav.Section>\r\n *   <SideNav.Footer>\r\n *     <SideNav.Item icon=\"settings\" label=\"Settings\" href=\"/settings\" />\r\n *   </SideNav.Footer>\r\n * </SideNav>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, createContext, useContext, useCallback, useEffect, useLayoutEffect } from 'react';\r\n\r\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\r\nimport { useTheme } from '../../theme';\r\nimport { safeAccentText } from '../../utils';\r\nimport { Icon } from '../display/Icon';\r\nimport type { IconName } from '../display/Icon';\r\n\r\n// ─── Astro UX Status Shape ───────────────────────────────────────────────────\r\n\r\nconst SIDENAV_STATUS_COLORS: Record<string, string> = {\r\n  off: '#a4abb6',\r\n  standby: '#2dccff',\r\n  normal: '#56f000',\r\n  caution: '#fce83a',\r\n  serious: '#ffb302',\r\n  critical: '#ff3838',\r\n};\r\n\r\n/** Astro UX dual-coded status shape (color + geometry). */\r\nfunction NavStatusShape({ status, size = 8 }: { status: string; size?: number }) {\r\n  const color = SIDENAV_STATUS_COLORS[status] ?? SIDENAV_STATUS_COLORS.off;\r\n  const glow = `${color}50`;\r\n  const style = { flexShrink: 0 as const, filter: `drop-shadow(0 0 3px ${glow})` };\r\n\r\n  switch (status) {\r\n    case 'caution':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} /></svg>;\r\n    case 'serious':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,1 11,6 6,11 1,6\" fill={color} /></svg>;\r\n    case 'critical':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><polygon points=\"6,11 1,2 11,2\" fill={color} /></svg>;\r\n    case 'standby':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3.5\" fill=\"none\" stroke={color} strokeWidth=\"2\" /></svg>;\r\n    case 'off':\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"3\" fill={color} /></svg>;\r\n    default: // normal\r\n      return <svg viewBox=\"0 0 12 12\" width={size} height={size} style={style} aria-hidden=\"true\"><circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} /></svg>;\r\n  }\r\n}\r\n\r\n// ─── Responsive Breakpoints ──────────────────────────────────────────────────\r\n\r\nconst SIDENAV_BREAKPOINTS = {\r\n  mobile: 768,\r\n  tablet: 1024,\r\n} as const;\r\n\r\ntype SideNavMode = 'desktop' | 'tablet' | 'mobile';\r\n\r\nfunction getSideNavMode(width: number): SideNavMode {\r\n  if (width < SIDENAV_BREAKPOINTS.mobile) return 'mobile';\r\n  if (width < SIDENAV_BREAKPOINTS.tablet) return 'tablet';\r\n  return 'desktop';\r\n}\r\n\r\n// ─── Context ─────────────────────────────────────────────────────────────────\r\n\r\ninterface SideNavContextValue {\r\n  collapsed: boolean;\r\n  mobileOpen: boolean;\r\n  mode: SideNavMode;\r\n  showCollapseToggle: boolean;\r\n  setMobileOpen: (open: boolean) => void;\r\n  toggleCollapse: () => void;\r\n}\r\n\r\nconst SideNavContext = createContext<SideNavContextValue>({\r\n  collapsed: false,\r\n  mobileOpen: false,\r\n  mode: 'desktop',\r\n  showCollapseToggle: true,\r\n  setMobileOpen: () => {},\r\n  toggleCollapse: () => {},\r\n});\r\n\r\n// ─── SideNav ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavProps {\r\n  /** Collapsed mode (icon-only). When omitted, auto-collapses on tablet viewports. */\r\n  collapsed?: boolean;\r\n  /** Callback when collapsed state changes (via toggle button or responsive breakpoint). */\r\n  onCollapsedChange?: (collapsed: boolean) => void;\r\n  /** Show a collapse/expand toggle button in the sidebar (default true). */\r\n  showCollapseToggle?: boolean;\r\n  /** Width in pixels (default 260) */\r\n  width?: number;\r\n  /** Collapsed width in pixels (default 64) */\r\n  collapsedWidth?: number;\r\n  /**\r\n   * Mobile viewport behavior.\r\n   * - `'drawer'` (default): hamburger button with slide-out overlay drawer.\r\n   * - `'collapsed'`: persistent collapsed icon-only strip (same as tablet).\r\n   */\r\n  mobileVariant?: 'drawer' | 'collapsed';\r\n  /** Children (SideNav.Header, SideNav.Item, SideNav.Section, SideNav.Footer) */\r\n  children?: React.ReactNode;\r\n  /** Custom style */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst SideNavRoot = memo(function SideNav({\r\n  collapsed,\r\n  onCollapsedChange,\r\n  showCollapseToggle = true,\r\n  width = 260,\r\n  collapsedWidth = 64,\r\n  mobileVariant = 'drawer',\r\n  children,\r\n  style,\r\n}: SideNavProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [mobileOpen, setMobileOpen] = useState(false);\r\n  const [userCollapsed, setUserCollapsed] = useState<boolean | null>(null);\r\n  \r\n  // Initialize to 'desktop' to guarantee the first client render matches SSR\r\n  // (where window is undefined), preventing a React hydration mismatch if the\r\n  // client happens to be on a mobile/tablet width at initial load.\r\n  const [viewMode, setViewMode] = useState<SideNavMode>('desktop');\r\n  \r\n  useIsomorphicLayoutEffect(() => {\r\n    if (typeof window === 'undefined') return;\r\n\r\n    // Synchronously correct the viewMode right after hydration but before paint\r\n    setViewMode(getSideNavMode(window.innerWidth));\r\n\r\n    let rafId: number;\r\n    const handleResize = () => {\r\n      cancelAnimationFrame(rafId);\r\n      rafId = requestAnimationFrame(() => setViewMode(getSideNavMode(window.innerWidth)));\r\n    };\r\n    window.addEventListener('resize', handleResize, { passive: true });\r\n    return () => {\r\n      window.removeEventListener('resize', handleResize);\r\n      cancelAnimationFrame(rafId);\r\n    };\r\n  }, []);\r\n\r\n  // When mobileVariant='collapsed', promote mobile to tablet (collapsed inline strip)\r\n  const effectiveMode = mobileVariant === 'collapsed' && viewMode === 'mobile' ? 'tablet' : viewMode;\r\n\r\n  // Reset user toggle when crossing breakpoints\r\n  useEffect(() => {\r\n    setUserCollapsed(null);\r\n  }, [effectiveMode]);\r\n\r\n  // Close mobile drawer when switching away from mobile\r\n  useEffect(() => {\r\n    if (effectiveMode !== 'mobile' && mobileOpen) setMobileOpen(false);\r\n  }, [effectiveMode, mobileOpen]);\r\n  \r\n  // Close mobile nav on escape\r\n  useEffect(() => {\r\n    if (!mobileOpen) return;\r\n    const handleEsc = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') setMobileOpen(false);\r\n    };\r\n    document.addEventListener('keydown', handleEsc);\r\n    return () => document.removeEventListener('keydown', handleEsc);\r\n  }, [mobileOpen]);\r\n\r\n  // Resolve collapsed: explicit prop > user toggle > auto (tablet = collapsed)\r\n  const autoCollapsed = effectiveMode === 'tablet';\r\n  const isCollapsed = collapsed !== undefined\r\n    ? collapsed\r\n    : userCollapsed !== null\r\n      ? userCollapsed\r\n      : autoCollapsed;\r\n  const isMobile = effectiveMode === 'mobile';\r\n  const navWidth = isCollapsed ? collapsedWidth : width;\r\n\r\n  const handleToggleCollapse = useCallback(() => {\r\n    const next = !isCollapsed;\r\n    setUserCollapsed(next);\r\n    onCollapsedChange?.(next);\r\n  }, [isCollapsed, onCollapsedChange]);\r\n  \r\n  const navStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    width: isMobile ? 280 : navWidth,\r\n    height: '100%',\r\n    backgroundColor: isTransparentTheme\r\n      ? 'rgba(15, 12, 30, 0.7)'\r\n      : tokens.colors.background.surface,\r\n    borderRight: `1px solid ${tokens.colors.border.muted}`,\r\n    transition: 'width 0.25s ease, transform 0.25s ease',\r\n    overflowX: 'hidden',\r\n    overflowY: 'auto',\r\n    flexShrink: 0,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    ...(isTransparentTheme ? {\r\n      backdropFilter: 'blur(16px)',\r\n      WebkitBackdropFilter: 'blur(16px)',\r\n    } : {}),\r\n    ...style,\r\n  };\r\n  \r\n  const contextValue: SideNavContextValue = { collapsed: isCollapsed, mobileOpen, mode: effectiveMode, showCollapseToggle, setMobileOpen, toggleCollapse: handleToggleCollapse };\r\n  \r\n  // Mobile: hamburger button + overlay drawer\r\n  if (isMobile) {\r\n    return (\r\n      <SideNavContext.Provider value={contextValue}>\r\n        {/* Hamburger button */}\r\n        <button\r\n          aria-label=\"Open navigation\"\r\n          onClick={() => setMobileOpen(true)}\r\n          style={{\r\n            position: 'fixed',\r\n            top: 6,\r\n            left: 6,\r\n            zIndex: 1001,\r\n            display: 'flex',\r\n            alignItems: 'center',\r\n            justifyContent: 'center',\r\n            width: 32,\r\n            height: 32,\r\n            border: 'none',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            backgroundColor: 'transparent',\r\n            color: tokens.colors.text.primary,\r\n            cursor: 'pointer',\r\n            padding: 0,\r\n            transition: tokens.animation.fast,\r\n          }}\r\n        >\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\">\r\n            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\" />\r\n            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\" />\r\n            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\" />\r\n          </svg>\r\n        </button>\r\n        \r\n        {/* Overlay */}\r\n        <div\r\n          aria-hidden=\"true\"\r\n          style={{\r\n            position: 'fixed',\r\n            inset: 0,\r\n            zIndex: 1002,\r\n            backgroundColor: `${tokens.colors.background.base}99`,\r\n            backdropFilter: 'blur(4px)',\r\n            opacity: mobileOpen ? 1 : 0,\r\n            pointerEvents: mobileOpen ? 'auto' : 'none',\r\n            transition: 'opacity 0.25s ease',\r\n          }}\r\n          onClick={() => setMobileOpen(false)}\r\n        />\r\n        \r\n        {/* Slide-out nav */}\r\n        <nav\r\n          role=\"navigation\"\r\n          aria-label=\"Main navigation\"\r\n          style={{\r\n            ...navStyle,\r\n            position: 'fixed',\r\n            top: 0,\r\n            left: 0,\r\n            zIndex: 1003,\r\n            transform: mobileOpen ? 'translateX(0)' : 'translateX(-100%)',\r\n            boxShadow: mobileOpen ? tokens.shadows.xl : 'none',\r\n          }}\r\n        >\r\n          {children}\r\n        </nav>\r\n      </SideNavContext.Provider>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <SideNavContext.Provider value={contextValue}>\r\n      <nav role=\"navigation\" aria-label=\"Main navigation\" style={navStyle}>\r\n        {children}\r\n      </nav>\r\n    </SideNavContext.Provider>\r\n  );\r\n});\r\n\r\n// ─── Header ──────────────────────────────────────────────────────────────────\r\n\r\n/** Default height for the logo row so dashboard / operator / other apps align the same mark. */\r\nexport const SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX = 44;\r\n\r\nexport interface SideNavHeaderProps {\r\n  /** Logo element (Icon, image, or ReactNode) */\r\n  logo?: React.ReactNode;\r\n  /** Compact logo shown when sidebar is collapsed or on tablet (e.g., just the icon mark) */\r\n  collapsedLogo?: React.ReactNode;\r\n  /** App title */\r\n  title?: string;\r\n  /** Subtitle or version */\r\n  subtitle?: string;\r\n  /** Role badge (e.g., \"Operator\", \"Admin\") */\r\n  badge?: string;\r\n  /** Badge variant for color */\r\n  badgeVariant?: 'info' | 'success' | 'warning' | 'caution';\r\n  /**\r\n   * Fixed height (px) for the top logo band. Title, subtitle, and badge render below this band\r\n   * so different logo assets still line up across apps (dashboard vs operator).\r\n   */\r\n  logoSlotHeight?: number;\r\n  /** Children override (advanced: replaces default header content entirely) */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/** Chevron toggle button for collapsing/expanding the sidebar. */\r\nfunction CollapseToggleButton() {\r\n  const { tokens } = useTheme();\r\n  const { collapsed, toggleCollapse } = useContext(SideNavContext);\r\n  const [hovered, setHovered] = useState(false);\r\n\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}\r\n      onClick={toggleCollapse}\r\n      onMouseEnter={() => setHovered(true)}\r\n      onMouseLeave={() => setHovered(false)}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        width: 28,\r\n        height: 28,\r\n        border: `1px solid ${hovered ? tokens.colors.border.focus : tokens.colors.border.muted}`,\r\n        borderRadius: tokens.borderRadius.md,\r\n        backgroundColor: hovered ? `${tokens.colors.accent.primary}15` : 'transparent',\r\n        color: hovered ? tokens.colors.accent.primary : tokens.colors.text.tertiary,\r\n        cursor: 'pointer',\r\n        flexShrink: 0,\r\n        padding: 0,\r\n        transition: tokens.animation.fast,\r\n        outline: 'none',\r\n      }}\r\n    >\r\n      <svg\r\n        width=\"14\"\r\n        height=\"14\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"2\"\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n        style={{\r\n          transition: 'transform 0.25s ease',\r\n          transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',\r\n        }}\r\n      >\r\n        <polyline points=\"15 18 9 12 15 6\" />\r\n      </svg>\r\n    </button>\r\n  );\r\n}\r\n\r\nconst SideNavHeader = memo(function SideNavHeader({\r\n  logo,\r\n  collapsedLogo,\r\n  title,\r\n  subtitle,\r\n  badge,\r\n  badgeVariant = 'info',\r\n  logoSlotHeight = SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX,\r\n  children,\r\n}: SideNavHeaderProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed, mode, showCollapseToggle, toggleCollapse } = useContext(SideNavContext);\r\n  const displayLogo = collapsed && collapsedLogo ? collapsedLogo : logo;\r\n  const showToggle = showCollapseToggle && mode !== 'mobile';\r\n  const hasMeta = Boolean(title || subtitle || badge);\r\n  const slotH = logoSlotHeight;\r\n\r\n  const badgeColors: Record<string, string> = {\r\n    info: tokens.colors.accent.primary,\r\n    success: tokens.colors.status.normal,\r\n    warning: tokens.colors.status.caution,\r\n    caution: tokens.colors.status.serious,\r\n  };\r\n\r\n  const metaBlock = !collapsed && hasMeta ? (\r\n    <div style={{ flex: 1, minWidth: 0, width: '100%' }}>\r\n      {title ? (\r\n        <div style={{\r\n          fontSize: tokens.typography.fontSize.sm,\r\n          fontWeight: tokens.typography.fontWeight.bold,\r\n          color: tokens.colors.text.primary,\r\n          lineHeight: tokens.typography.lineHeight.tight,\r\n          whiteSpace: 'nowrap',\r\n          overflow: 'hidden',\r\n          textOverflow: 'ellipsis',\r\n        }}>\r\n          {title}\r\n        </div>\r\n      ) : null}\r\n      {(subtitle || badge) ? (\r\n        <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, marginTop: title ? '2px' : 0, flexWrap: 'wrap' }}>\r\n          {subtitle ? (\r\n            <span style={{\r\n              fontSize: tokens.typography.fontSize.xxs,\r\n              color: tokens.colors.text.tertiary,\r\n            }}>\r\n              {subtitle}\r\n            </span>\r\n          ) : null}\r\n          {badge ? (\r\n            <span style={{\r\n              fontSize: '0.6rem',\r\n              fontWeight: tokens.typography.fontWeight.bold,\r\n              color: badgeColors[badgeVariant] || safeAccentText(tokens.colors.accent.primary),\r\n              backgroundColor: `${badgeColors[badgeVariant] || tokens.colors.accent.primary}18`,\r\n              border: `1px solid ${badgeColors[badgeVariant] || tokens.colors.accent.primary}30`,\r\n              padding: '1px 6px',\r\n              borderRadius: tokens.borderRadius.sm,\r\n              textTransform: 'uppercase',\r\n              letterSpacing: '0.05em',\r\n            }}>\r\n              {badge}\r\n            </span>\r\n          ) : null}\r\n        </div>\r\n      ) : null}\r\n    </div>\r\n  ) : null;\r\n\r\n  const logoSlot = displayLogo ? (\r\n    <div\r\n      style={{\r\n        height: slotH,\r\n        minHeight: slotH,\r\n        maxHeight: slotH,\r\n        width: '100%',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: collapsed ? 'center' : 'flex-start',\r\n        overflow: 'hidden',\r\n        boxSizing: 'border-box',\r\n        marginBottom: !collapsed && hasMeta && displayLogo ? tokens.spacing.sm : 0,\r\n      }}\r\n    >\r\n      <div\r\n        style={{\r\n          maxHeight: '100%',\r\n          maxWidth: '100%',\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          justifyContent: collapsed ? 'center' : 'flex-start',\r\n          minWidth: 0,\r\n          cursor: collapsed && showToggle ? 'pointer' : undefined,\r\n        }}\r\n        onClick={collapsed && showToggle ? toggleCollapse : undefined}\r\n      >\r\n        {displayLogo}\r\n      </div>\r\n    </div>\r\n  ) : null;\r\n\r\n  if (children) {\r\n    return (\r\n      <div style={{\r\n        padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n        flexShrink: 0,\r\n        boxSizing: 'border-box',\r\n        position: 'relative',\r\n      }}>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Collapsed: centered logo in the same fixed slot height as expanded (visual parity with operator).\r\n  if (collapsed) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        alignItems: 'center',\r\n        padding: `${tokens.spacing.md} ${tokens.spacing.sm}`,\r\n        minHeight: slotH + 24,\r\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n        flexShrink: 0,\r\n        boxSizing: 'border-box',\r\n        position: 'relative',\r\n        justifyContent: 'center',\r\n      }}>\r\n        {logoSlot}\r\n        {showToggle ? (\r\n          <div style={{ position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)' }}>\r\n            <CollapseToggleButton />\r\n          </div>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div style={{\r\n      display: 'flex',\r\n      flexDirection: 'column',\r\n      alignItems: 'stretch',\r\n      padding: `${tokens.spacing.md} 16px ${tokens.spacing.md} 15px`,\r\n      borderBottom: `1px solid ${tokens.colors.border.muted}`,\r\n      flexShrink: 0,\r\n      boxSizing: 'border-box',\r\n      position: 'relative',\r\n    }}>\r\n      {showToggle ? (\r\n        <div style={{ position: 'absolute', top: tokens.spacing.sm, right: tokens.spacing.sm, zIndex: 1 }}>\r\n          <CollapseToggleButton />\r\n        </div>\r\n      ) : null}\r\n      <div style={{ paddingRight: showToggle ? 36 : 0, width: '100%', minWidth: 0 }}>\r\n        {logoSlot}\r\n        {metaBlock}\r\n      </div>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Item ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavItemProps {\r\n  /** Icon name from zendir-ui icon library */\r\n  icon?: IconName | React.ReactNode;\r\n  /** Label text */\r\n  label: string;\r\n  /** Description text displayed beneath the label (hidden in collapsed mode) */\r\n  description?: string;\r\n  /** Small tag/chip displayed after the label (e.g. \"v2\", \"NEW\", \"BETA\") */\r\n  tag?: string;\r\n  /** Tag color variant */\r\n  tagVariant?: 'default' | 'info' | 'success' | 'warning' | 'danger';\r\n  /** Link href (renders <a>) */\r\n  href?: string;\r\n  /** Click handler (renders <button>) */\r\n  onClick?: () => void;\r\n  /** Active state */\r\n  active?: boolean;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Notification badge count */\r\n  badge?: number;\r\n  /** External link indicator */\r\n  external?: boolean;\r\n  /**\r\n   * Astro UX status level — renders a dual-coded indicator (color + shape).\r\n   * Shapes per official Astro UXDS: normal = ● filled circle, standby = ◎ ring,\r\n   * caution = ■ square, serious = ◆ diamond, critical = ▼ triangle, off = · small circle.\r\n   */\r\n  status?: 'off' | 'standby' | 'normal' | 'caution' | 'serious' | 'critical';\r\n  /** Optional status label shown as tooltip or text next to status shape */\r\n  statusLabel?: string;\r\n  /** Right-side slot — arbitrary ReactNode rendered at the end of the item row */\r\n  suffix?: React.ReactNode;\r\n}\r\n\r\nconst TAG_COLORS: Record<string, { bg: string; fg: string; border: string }> = {\r\n  default: { bg: '#ffffff10', fg: '#9590a8', border: '#ffffff15' },\r\n  info: { bg: '#8a2be218', fg: '#c4a0ff', border: '#8a2be230' },\r\n  success: { bg: '#56f00018', fg: '#56f000', border: '#56f00030' },\r\n  warning: { bg: '#fce83a18', fg: '#fce83a', border: '#fce83a30' },\r\n  danger: { bg: '#ff383818', fg: '#ff3838', border: '#ff383830' },\r\n};\r\n\r\nconst SideNavItem = memo(function SideNavItem({\r\n  icon,\r\n  label,\r\n  description,\r\n  tag,\r\n  tagVariant = 'default',\r\n  href,\r\n  onClick,\r\n  active = false,\r\n  disabled = false,\r\n  badge,\r\n  external = false,\r\n  status,\r\n  statusLabel,\r\n  suffix,\r\n}: SideNavItemProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed, setMobileOpen } = useContext(SideNavContext);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const handleClick = useCallback((e: React.MouseEvent) => {\r\n    if (disabled) return;\r\n    if (onClick && href && !e.metaKey && !e.ctrlKey && !e.shiftKey) {\r\n      e.preventDefault();\r\n    }\r\n    setMobileOpen(false);\r\n    onClick?.();\r\n  }, [disabled, onClick, href, setMobileOpen]);\r\n  \r\n  // Status-aware accent: when an item has a status, tint active/hover with its color\r\n  const statusColor = status ? (SIDENAV_STATUS_COLORS[status] ?? undefined) : undefined;\r\n  const accentColor = statusColor && active ? statusColor : safeAccentText(tokens.colors.accent.primary);\r\n  \r\n  const hasDescription = !!description && !collapsed;\r\n  \r\n  const iconElement = typeof icon === 'string'\r\n    ? <Icon name={icon as IconName} size={hasDescription ? 22 : 20} color={active ? accentColor : tokens.colors.text.secondary} />\r\n    : icon;\r\n  \r\n  const itemStyle: React.CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: hasDescription ? 'flex-start' : 'center',\r\n    gap: tokens.spacing.sm,\r\n    padding: collapsed\r\n      ? `${tokens.spacing.sm} 0`\r\n      : hasDescription\r\n        ? `10px 16px 10px 12px`\r\n        : `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 12px`,\r\n    justifyContent: collapsed ? 'center' : 'flex-start',\r\n    color: active\r\n      ? accentColor\r\n      : disabled\r\n        ? tokens.colors.text.tertiary\r\n        : tokens.colors.text.secondary,\r\n    backgroundColor: active\r\n      ? `${accentColor}12`\r\n      : isHovered && !disabled\r\n        ? `${accentColor}08`\r\n        : 'transparent',\r\n    fontSize: tokens.typography.fontSize.sm,\r\n    fontWeight: active ? tokens.typography.fontWeight.semibold : tokens.typography.fontWeight.normal,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    cursor: disabled ? 'not-allowed' : 'pointer',\r\n    textDecoration: 'none',\r\n    borderTop: 'none',\r\n    borderRight: 'none',\r\n    borderBottom: 'none',\r\n    borderLeft: active\r\n      ? `3px solid ${accentColor}`\r\n      : '3px solid transparent',\r\n    outline: 'none',\r\n    width: '100%',\r\n    boxSizing: 'border-box',\r\n    transition: tokens.animation.fast,\r\n    position: 'relative',\r\n    opacity: disabled ? 0.5 : 1,\r\n  };\r\n  \r\n  const tagColors = TAG_COLORS[tagVariant] ?? TAG_COLORS.default;\r\n  \r\n  const content = (\r\n    <>\r\n      {/* Icon + collapsed status overlay */}\r\n      {iconElement && (\r\n        <span style={{ flexShrink: 0, display: 'flex', position: 'relative', marginTop: hasDescription ? '2px' : 0 }}>\r\n          {iconElement}\r\n          {/* In collapsed mode, show a small status shape overlaid on the icon (top-left) */}\r\n          {collapsed && status && (\r\n            <span\r\n              style={{\r\n                position: 'absolute',\r\n                top: -3,\r\n                left: -4,\r\n                lineHeight: 0,\r\n              }}\r\n              title={statusLabel ?? status}\r\n            >\r\n              <NavStatusShape status={status} size={7} />\r\n            </span>\r\n          )}\r\n        </span>\r\n      )}\r\n      {!collapsed && (\r\n        <>\r\n          {/* Label + description block */}\r\n          <span style={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>\r\n            <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>\r\n              <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>\r\n                {label}\r\n              </span>\r\n              {tag && (\r\n                <span style={{\r\n                  fontSize: '0.6rem',\r\n                  fontWeight: tokens.typography.fontWeight.bold,\r\n                  color: tagColors.fg,\r\n                  backgroundColor: tagColors.bg,\r\n                  border: `1px solid ${tagColors.border}`,\r\n                  padding: '1px 5px',\r\n                  borderRadius: tokens.borderRadius.sm,\r\n                  textTransform: 'uppercase',\r\n                  letterSpacing: '0.04em',\r\n                  flexShrink: 0,\r\n                  lineHeight: '1.3',\r\n                  whiteSpace: 'nowrap',\r\n                }}>\r\n                  {tag}\r\n                </span>\r\n              )}\r\n            </span>\r\n            {description && (\r\n              <span style={{\r\n                display: 'block',\r\n                fontSize: tokens.typography.fontSize.xxs,\r\n                color: tokens.colors.text.tertiary,\r\n                lineHeight: tokens.typography.lineHeight.normal,\r\n                marginTop: '2px',\r\n                whiteSpace: 'nowrap',\r\n                overflow: 'hidden',\r\n                textOverflow: 'ellipsis',\r\n                fontWeight: tokens.typography.fontWeight.normal,\r\n              }}>\r\n                {description}\r\n              </span>\r\n            )}\r\n          </span>\r\n          {/* Right-side trailing elements — badge, status, suffix, external icon */}\r\n          {(badge !== undefined && badge > 0 || status || suffix || external) && (\r\n            <span style={{\r\n              display: 'inline-flex',\r\n              alignItems: 'center',\r\n              gap: 8,\r\n              flexShrink: 0,\r\n              marginTop: hasDescription ? '2px' : 0,\r\n            }}>\r\n              {/* Badge */}\r\n              {badge !== undefined && badge > 0 && (\r\n                <span style={{\r\n                  fontSize: '0.65rem',\r\n                  fontWeight: tokens.typography.fontWeight.bold,\r\n                  color: '#fff',\r\n                  backgroundColor: tokens.colors.status.critical,\r\n                  borderRadius: tokens.borderRadius.full,\r\n                  minWidth: '18px',\r\n                  height: '18px',\r\n                  display: 'inline-flex',\r\n                  alignItems: 'center',\r\n                  justifyContent: 'center',\r\n                  padding: '0 5px',\r\n                  flexShrink: 0,\r\n                  lineHeight: 1,\r\n                  boxSizing: 'border-box',\r\n                }}>\r\n                  {badge > 99 ? '99+' : badge}\r\n                </span>\r\n              )}\r\n              {/* Status */}\r\n              {status && (\r\n                <span\r\n                  style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\r\n                  role=\"status\"\r\n                  aria-label={`Status: ${statusLabel ?? status}`}\r\n                  title={statusLabel ?? status}\r\n                >\r\n                  <NavStatusShape status={status} size={8} />\r\n                </span>\r\n              )}\r\n              {/* Suffix */}\r\n              {suffix && (\r\n                <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center' }}>\r\n                  {suffix}\r\n                </span>\r\n              )}\r\n              {/* External */}\r\n              {external && (\r\n                <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" style={{ flexShrink: 0, opacity: 0.5 }}>\r\n                  <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\r\n                  <polyline points=\"15 3 21 3 21 9\" />\r\n                  <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />\r\n                </svg>\r\n              )}\r\n            </span>\r\n          )}\r\n        </>\r\n      )}\r\n    </>\r\n  );\r\n  \r\n  const props = {\r\n    style: itemStyle,\r\n    onMouseEnter: () => setIsHovered(true),\r\n    onMouseLeave: () => setIsHovered(false),\r\n    title: collapsed ? label : undefined,\r\n    'aria-current': active ? ('page' as const) : undefined,\r\n    'aria-disabled': disabled,\r\n  };\r\n  \r\n  if (href && !disabled) {\r\n    return (\r\n      <a href={href} onClick={handleClick} target={external ? '_blank' : undefined} rel={external ? 'noopener noreferrer' : undefined} {...props}>\r\n        {content}\r\n      </a>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <button type=\"button\" onClick={handleClick} disabled={disabled} {...props}>\r\n      {content}\r\n    </button>\r\n  );\r\n});\r\n\r\n// ─── Section ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavSectionProps {\r\n  /** Section title */\r\n  title?: string;\r\n  /** Children (SideNav.Item elements) */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavSection = memo(function SideNavSection({\r\n  title,\r\n  children,\r\n}: SideNavSectionProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed } = useContext(SideNavContext);\r\n  \r\n  return (\r\n    <div style={{ marginTop: tokens.spacing.sm }}>\r\n      {title && !collapsed && (\r\n        <div style={{\r\n          padding: `${tokens.spacing.xs} 16px ${tokens.spacing.xs} 15px`,\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          fontWeight: tokens.typography.fontWeight.bold,\r\n          color: tokens.colors.text.tertiary,\r\n          textTransform: 'uppercase',\r\n          letterSpacing: '0.08em',\r\n        }}>\r\n          {title}\r\n        </div>\r\n      )}\r\n      {collapsed && title && (\r\n        <div style={{\r\n          width: '60%',\r\n          height: '1px',\r\n          backgroundColor: tokens.colors.border.muted,\r\n          margin: `${tokens.spacing.xs} auto`,\r\n        }} />\r\n      )}\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Divider ─────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavDividerProps {\r\n  /** Optional label shown in the center of the divider line */\r\n  label?: string;\r\n}\r\n\r\nconst SideNavDivider = memo(function SideNavDivider({\r\n  label,\r\n}: SideNavDividerProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { collapsed } = useContext(SideNavContext);\r\n\r\n  if (collapsed) {\r\n    return (\r\n      <div style={{\r\n        width: '60%',\r\n        height: '1px',\r\n        backgroundColor: tokens.colors.border.muted,\r\n        margin: `${tokens.spacing.sm} auto`,\r\n      }} />\r\n    );\r\n  }\r\n\r\n  if (label) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: tokens.spacing.sm,\r\n        padding: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n      }}>\r\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n          textTransform: 'uppercase',\r\n          letterSpacing: '0.06em',\r\n          whiteSpace: 'nowrap',\r\n        }}>\r\n          {label}\r\n        </span>\r\n        <div style={{ flex: 1, height: '1px', backgroundColor: tokens.colors.border.muted }} />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div style={{\r\n      height: '1px',\r\n      backgroundColor: tokens.colors.border.muted,\r\n      margin: `${tokens.spacing.sm} 16px ${tokens.spacing.sm} 15px`,\r\n    }} />\r\n  );\r\n});\r\n\r\n// ─── Footer ──────────────────────────────────────────────────────────────────\r\n\r\nexport interface SideNavFooterProps {\r\n  children?: React.ReactNode;\r\n}\r\n\r\nconst SideNavFooter = memo(function SideNavFooter({\r\n  children,\r\n}: SideNavFooterProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  \r\n  return (\r\n    <div style={{\r\n      marginTop: 'auto',\r\n      borderTop: `1px solid ${tokens.colors.border.muted}`,\r\n      paddingTop: tokens.spacing.xs,\r\n      paddingBottom: tokens.spacing.xs,\r\n    }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype SideNavComponent = typeof SideNavRoot & {\r\n  Header: typeof SideNavHeader;\r\n  Item: typeof SideNavItem;\r\n  Section: typeof SideNavSection;\r\n  Divider: typeof SideNavDivider;\r\n  Footer: typeof SideNavFooter;\r\n};\r\n\r\nexport const SideNav: SideNavComponent = Object.assign(SideNavRoot, {\r\n  Header: SideNavHeader,\r\n  Item: SideNavItem,\r\n  Section: SideNavSection,\r\n  Divider: SideNavDivider,\r\n  Footer: SideNavFooter,\r\n});\r\n\r\nexport default SideNav;\r\n"],"names":["SideNav","SideNavHeader","SideNavItem","SideNavSection","SideNavDivider","SideNavFooter"],"mappings":"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"}

package/dist/react/core/overlays/Popover.js

@@ -50,6 +50,10 @@ const Popover = memo(function Popover2({
     };
   }, []);
   const [position, setPosition] = useState({});
+  const [positioned, setPositioned] = useState(false);
+  useEffect(() => {
+    if (!isOpen) setPositioned(false);
+  }, [isOpen]);
   useEffect(() => {
     if (!isOpen || !triggerRef.current) return;
     const gap = 8;
@@ -103,6 +107,7 @@ const Popover = memo(function Popover2({
         pos.width = width;
       }
       setPosition(pos);
+      setPositioned(true);
     };
     const raf = requestAnimationFrame(updatePosition);
     window.addEventListener("resize", updatePosition);
@@ -142,6 +147,7 @@ const Popover = memo(function Popover2({
         ...popoverHoverProps,
         style: {
           ...position,
+          visibility: positioned ? "visible" : "hidden",
           backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.85)" : tokens.colors.background.elevated,
           border: `1px solid ${tokens.colors.border.muted}`,
           borderRadius: tokens.borderRadius.md,

package/dist/react/core/overlays/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Popover & Menu Components\r\n * \r\n * General-purpose popover for dropdown menus, sort controls, action menus,\r\n * and contextual information. Portal-rendered with auto-positioning.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent with Dialog/Tooltip styling\r\n * - Focus trap for keyboard navigation\r\n * - Escape to close\r\n * - Click outside to close\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <Popover\r\n *   trigger={<Button variant=\"secondary\">Sort</Button>}\r\n *   placement=\"bottom-start\"\r\n * >\r\n *   <Menu>\r\n *     <Menu.Item onClick={...}>Sort by Time</Menu.Item>\r\n *     <Menu.Item onClick={...}>Sort by Name</Menu.Item>\r\n *     <Menu.Divider />\r\n *     <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\r\n *   </Menu>\r\n * </Popover>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';\r\nimport { useTheme } from '../../theme';\r\n\r\n// ─── Popover ─────────────────────────────────────────────────────────────────\r\n\r\nexport type PopoverPlacement = \r\n  | 'top' | 'top-start' | 'top-end'\r\n  | 'bottom' | 'bottom-start' | 'bottom-end'\r\n  | 'left' | 'left-start' | 'left-end'\r\n  | 'right' | 'right-start' | 'right-end';\r\n\r\nexport interface PopoverProps {\r\n  /** Trigger element */\r\n  trigger: React.ReactElement;\r\n  /** Popover content */\r\n  children: React.ReactNode;\r\n  /** Placement relative to trigger */\r\n  placement?: PopoverPlacement;\r\n  /** Open on hover instead of click */\r\n  hover?: boolean;\r\n  /** Controlled open state */\r\n  open?: boolean;\r\n  /** Controlled open change */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /** Close on content click */\r\n  closeOnClick?: boolean;\r\n  /** Width: 'trigger' matches trigger width, number for px, 'auto' */\r\n  width?: 'trigger' | 'auto' | number;\r\n  /** Custom style for popover panel */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst PopoverContext = createContext<{ close: () => void }>({ close: () => {} });\r\n\r\nexport const Popover = memo(function Popover({\r\n  trigger,\r\n  children,\r\n  placement = 'bottom-start',\r\n  hover = false,\r\n  open: controlledOpen,\r\n  onOpenChange,\r\n  closeOnClick = true,\r\n  width = 'auto',\r\n  style,\r\n}: PopoverProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [internalOpen, setInternalOpen] = useState(false);\r\n  const triggerRef = useRef<HTMLDivElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\r\n  \r\n  const setOpen = useCallback((val: boolean) => {\r\n    if (controlledOpen === undefined) setInternalOpen(val);\r\n    onOpenChange?.(val);\r\n  }, [controlledOpen, onOpenChange]);\r\n  \r\n  const close = useCallback(() => setOpen(false), [setOpen]);\r\n  \r\n  // Click outside\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: MouseEvent) => {\r\n      if (\r\n        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&\r\n        popoverRef.current && !popoverRef.current.contains(e.target as Node)\r\n      ) {\r\n        close();\r\n      }\r\n    };\r\n    document.addEventListener('mousedown', handler);\r\n    return () => document.removeEventListener('mousedown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  // Escape key + cleanup hoverTimeout on unmount\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') close();\r\n    };\r\n    document.addEventListener('keydown', handler);\r\n    return () => document.removeEventListener('keydown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  useEffect(() => {\r\n    return () => { clearTimeout(hoverTimeout.current); };\r\n  }, []);\r\n  \r\n  // Position calculation\r\n  const [position, setPosition] = useState<React.CSSProperties>({});\r\n  \r\n  useEffect(() => {\r\n    if (!isOpen || !triggerRef.current) return;\r\n    const gap = 8;\r\n    const viewportPadding = 8;\r\n\r\n    const updatePosition = () => {\r\n      const rect = triggerRef.current?.getBoundingClientRect();\r\n      if (!rect) return;\r\n\r\n      const panelWidth = width === 'trigger'\r\n        ? rect.width\r\n        : typeof width === 'number'\r\n          ? width\r\n          : (popoverRef.current?.offsetWidth ?? 220);\r\n      const panelHeight = popoverRef.current?.offsetHeight ?? 220;\r\n\r\n      let left = rect.left;\r\n      let top = rect.bottom + gap;\r\n\r\n      if (placement.startsWith('top')) {\r\n        top = rect.top - panelHeight - gap;\r\n      } else if (placement.startsWith('bottom')) {\r\n        top = rect.bottom + gap;\r\n      } else if (placement.startsWith('left')) {\r\n        left = rect.left - panelWidth - gap;\r\n      } else if (placement.startsWith('right')) {\r\n        left = rect.right + gap;\r\n      }\r\n\r\n      if (placement.startsWith('top') || placement.startsWith('bottom')) {\r\n        if (placement.endsWith('-start')) {\r\n          left = rect.left;\r\n        } else if (placement.endsWith('-end')) {\r\n          left = rect.right - panelWidth;\r\n        } else {\r\n          left = rect.left + (rect.width - panelWidth) / 2;\r\n        }\r\n      } else {\r\n        if (placement.endsWith('-start')) {\r\n          top = rect.top;\r\n        } else if (placement.endsWith('-end')) {\r\n          top = rect.bottom - panelHeight;\r\n        } else {\r\n          top = rect.top + (rect.height - panelHeight) / 2;\r\n        }\r\n      }\r\n\r\n      left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));\r\n      top = Math.max(viewportPadding, Math.min(top, window.innerHeight - panelHeight - viewportPadding));\r\n\r\n      const pos: React.CSSProperties = {\r\n        position: 'fixed',\r\n        zIndex: 9990,\r\n        left,\r\n        top,\r\n      };\r\n\r\n      if (width === 'trigger') {\r\n        pos.width = rect.width;\r\n        pos.minWidth = rect.width;\r\n      } else if (typeof width === 'number') {\r\n        pos.width = width;\r\n      }\r\n\r\n      setPosition(pos);\r\n    };\r\n\r\n    const raf = requestAnimationFrame(updatePosition);\r\n    window.addEventListener('resize', updatePosition);\r\n    window.addEventListener('scroll', updatePosition, true);\r\n    return () => {\r\n      cancelAnimationFrame(raf);\r\n      window.removeEventListener('resize', updatePosition);\r\n      window.removeEventListener('scroll', updatePosition, true);\r\n    };\r\n  }, [isOpen, placement, width]);\r\n  \r\n  const triggerProps: Record<string, (() => void) | undefined> = {};\r\n  if (hover) {\r\n    triggerProps.onMouseEnter = () => {\r\n      clearTimeout(hoverTimeout.current);\r\n      setOpen(true);\r\n    };\r\n    triggerProps.onMouseLeave = () => {\r\n      hoverTimeout.current = setTimeout(close, 150);\r\n    };\r\n  } else {\r\n    triggerProps.onClick = () => setOpen(!isOpen);\r\n  }\r\n  \r\n  const popoverHoverProps = hover ? {\r\n    onMouseEnter: () => clearTimeout(hoverTimeout.current),\r\n    onMouseLeave: () => { hoverTimeout.current = setTimeout(close, 150); },\r\n  } : {};\r\n  \r\n  return (\r\n    <PopoverContext.Provider value={{ close }}>\r\n      <div ref={triggerRef} style={{ display: 'inline-flex' }} aria-expanded={isOpen} aria-haspopup=\"true\" {...triggerProps}>\r\n        {trigger}\r\n      </div>\r\n      \r\n      {isOpen && (\r\n        <div\r\n          ref={popoverRef}\r\n          role=\"dialog\"\r\n          onClick={closeOnClick ? close : undefined}\r\n          {...popoverHoverProps}\r\n          style={{\r\n            ...position,\r\n            backgroundColor: isTransparentTheme\r\n              ? 'rgba(15, 12, 30, 0.85)'\r\n              : tokens.colors.background.elevated,\r\n            border: `1px solid ${tokens.colors.border.muted}`,\r\n            borderRadius: tokens.borderRadius.md,\r\n            boxShadow: tokens.shadows.lg,\r\n            padding: tokens.spacing.xs,\r\n            maxWidth: 'min(320px, calc(100vw - 16px))',\r\n            fontFamily: tokens.typography.fontFamily.primary,\r\n            animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\r\n            ...(isTransparentTheme ? {\r\n              backdropFilter: 'blur(16px)',\r\n              WebkitBackdropFilter: 'blur(16px)',\r\n            } : {}),\r\n            ...style,\r\n          }}\r\n        >\r\n          {children}\r\n        </div>\r\n      )}\r\n      \r\n      <style>{`\r\n        @keyframes zendir-popover-enter {\r\n          from { opacity: 0; transform: translateY(-4px) scale(0.98); }\r\n          to { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n      `}</style>\r\n    </PopoverContext.Provider>\r\n  );\r\n});\r\n\r\n// ─── Menu ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuProps {\r\n  children: React.ReactNode;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst MenuRoot = memo(function Menu({ children, style }: MenuProps): React.ReactElement {\r\n  return (\r\n    <div role=\"menu\" style={{ minWidth: 'min(160px, calc(100vw - 32px))', ...style }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuItemProps {\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Icon (ReactNode or IconName string) */\r\n  icon?: React.ReactNode;\r\n  /** Label text */\r\n  children: React.ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Destructive action (red text) */\r\n  destructive?: boolean;\r\n  /** Keyboard shortcut hint */\r\n  shortcut?: string;\r\n}\r\n\r\nconst MenuItem = memo(function MenuItem({\r\n  onClick,\r\n  icon,\r\n  children,\r\n  disabled = false,\r\n  destructive = false,\r\n  shortcut,\r\n}: MenuItemProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { close } = useContext(PopoverContext);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const handleClick = useCallback(() => {\r\n    if (disabled) return;\r\n    onClick?.();\r\n    close();\r\n  }, [disabled, onClick, close]);\r\n  \r\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\r\n    const item = e.currentTarget;\r\n    const siblings = item.parentElement?.querySelectorAll('[role=\"menuitem\"]:not([disabled])');\r\n    if (!siblings) return;\r\n    const items = Array.from(siblings) as HTMLElement[];\r\n    const idx = items.indexOf(item as HTMLElement);\r\n    \r\n    if (e.key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      items[(idx + 1) % items.length]?.focus();\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      items[(idx - 1 + items.length) % items.length]?.focus();\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault();\r\n      items[0]?.focus();\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault();\r\n      items[items.length - 1]?.focus();\r\n    }\r\n  }, []);\r\n  \r\n  const color = destructive\r\n    ? tokens.colors.status.critical\r\n    : disabled\r\n      ? tokens.colors.text.tertiary\r\n      : tokens.colors.text.primary;\r\n  \r\n  return (\r\n    <button\r\n      role=\"menuitem\"\r\n      tabIndex={disabled ? -1 : 0}\r\n      onClick={handleClick}\r\n      onKeyDown={handleKeyDown}\r\n      disabled={disabled}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: tokens.spacing.sm,\r\n        width: '100%',\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\r\n        minHeight: 44,\r\n        border: 'none',\r\n        background: isHovered && !disabled\r\n          ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\r\n          : 'transparent',\r\n        color,\r\n        fontSize: tokens.typography.fontSize.sm,\r\n        fontWeight: tokens.typography.fontWeight.normal,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        cursor: disabled ? 'not-allowed' : 'pointer',\r\n        borderRadius: tokens.borderRadius.sm,\r\n        textAlign: 'left',\r\n        transition: tokens.animation.fast,\r\n        opacity: disabled ? 0.5 : 1,\r\n        outline: 'none',\r\n      }}\r\n    >\r\n      {icon && <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>}\r\n      <span style={{ flex: 1 }}>{children}</span>\r\n      {shortcut && (\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n          fontFamily: tokens.typography.fontFamily.mono,\r\n          flexShrink: 0,\r\n        }}>\r\n          {shortcut}\r\n        </span>\r\n      )}\r\n    </button>\r\n  );\r\n});\r\n\r\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\r\n\r\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      style={{\r\n        height: '1px',\r\n        backgroundColor: tokens.colors.border.muted,\r\n        margin: `${tokens.spacing.xs} 0`,\r\n      }}\r\n    />\r\n  );\r\n});\r\n\r\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\r\n\r\nconst MenuLabel = memo(function MenuLabel({ children }: { children: React.ReactNode }): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div style={{\r\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n      fontSize: tokens.typography.fontSize.xxs,\r\n      fontWeight: tokens.typography.fontWeight.bold,\r\n      color: tokens.colors.text.tertiary,\r\n      textTransform: 'uppercase',\r\n      letterSpacing: '0.06em',\r\n    }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype MenuComponent = typeof MenuRoot & {\r\n  Item: typeof MenuItem;\r\n  Divider: typeof MenuDivider;\r\n  Label: typeof MenuLabel;\r\n};\r\n\r\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\r\n  Item: MenuItem,\r\n  Divider: MenuDivider,\r\n  Label: MenuLabel,\r\n});\r\n\r\nexport default Popover;\r\n"],"names":["Popover","Menu","MenuItem","MenuDivider","MenuLabel"],"mappings":";;;AA6DA,MAAM,iBAAiB,cAAqC,EAAE,OAAO,MAAM;AAAC,GAAG;AAExE,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,MAAM;AAAA,EACN;AAAA,EACA,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AACF,GAAqC;AACnC,QAAM,EAAE,QAAQ,MAAA,IAAU,SAAA;AAC1B,QAAM,qBAAqB,UAAU,iBAAiB,UAAU,sBAAsB,UAAU;AAChG,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,eAAe,OAAA;AAErB,QAAM,SAAS,mBAAmB,SAAY,iBAAiB;AAE/D,QAAM,UAAU,YAAY,CAAC,QAAiB;AAC5C,QAAI,mBAAmB,OAAW,iBAAgB,GAAG;AACrD,iDAAe;AAAA,EACjB,GAAG,CAAC,gBAAgB,YAAY,CAAC;AAEjC,QAAM,QAAQ,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,OAAO,CAAC;AAGzD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,UAAU,CAAC,MAAkB;AACjC,UACE,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,EAAE,MAAc,KACnE,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,EAAE,MAAc,GACnE;AACA,cAAA;AAAA,MACF;AAAA,IACF;AACA,aAAS,iBAAiB,aAAa,OAAO;AAC9C,WAAO,MAAM,SAAS,oBAAoB,aAAa,OAAO;AAAA,EAChE,GAAG,CAAC,QAAQ,KAAK,CAAC;AAGlB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,UAAU,CAAC,MAAqB;AACpC,UAAI,EAAE,QAAQ,SAAU,OAAA;AAAA,IAC1B;AACA,aAAS,iBAAiB,WAAW,OAAO;AAC5C,WAAO,MAAM,SAAS,oBAAoB,WAAW,OAAO;AAAA,EAC9D,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,YAAU,MAAM;AACd,WAAO,MAAM;AAAE,mBAAa,aAAa,OAAO;AAAA,IAAG;AAAA,EACrD,GAAG,CAAA,CAAE;AAGL,QAAM,CAAC,UAAU,WAAW,IAAI,SAA8B,CAAA,CAAE;AAEhE,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,CAAC,WAAW,QAAS;AACpC,UAAM,MAAM;AACZ,UAAM,kBAAkB;AAExB,UAAM,iBAAiB,MAAM;;AAC3B,YAAM,QAAO,gBAAW,YAAX,mBAAoB;AACjC,UAAI,CAAC,KAAM;AAEX,YAAM,aAAa,UAAU,YACzB,KAAK,QACL,OAAO,UAAU,WACf,UACC,gBAAW,YAAX,mBAAoB,gBAAe;AAC1C,YAAM,gBAAc,gBAAW,YAAX,mBAAoB,iBAAgB;AAExD,UAAI,OAAO,KAAK;AAChB,UAAI,MAAM,KAAK,SAAS;AAExB,UAAI,UAAU,WAAW,KAAK,GAAG;AAC/B,cAAM,KAAK,MAAM,cAAc;AAAA,MACjC,WAAW,UAAU,WAAW,QAAQ,GAAG;AACzC,cAAM,KAAK,SAAS;AAAA,MACtB,WAAW,UAAU,WAAW,MAAM,GAAG;AACvC,eAAO,KAAK,OAAO,aAAa;AAAA,MAClC,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,eAAO,KAAK,QAAQ;AAAA,MACtB;AAEA,UAAI,UAAU,WAAW,KAAK,KAAK,UAAU,WAAW,QAAQ,GAAG;AACjE,YAAI,UAAU,SAAS,QAAQ,GAAG;AAChC,iBAAO,KAAK;AAAA,QACd,WAAW,UAAU,SAAS,MAAM,GAAG;AACrC,iBAAO,KAAK,QAAQ;AAAA,QACtB,OAAO;AACL,iBAAO,KAAK,QAAQ,KAAK,QAAQ,cAAc;AAAA,QACjD;AAAA,MACF,OAAO;AACL,YAAI,UAAU,SAAS,QAAQ,GAAG;AAChC,gBAAM,KAAK;AAAA,QACb,WAAW,UAAU,SAAS,MAAM,GAAG;AACrC,gBAAM,KAAK,SAAS;AAAA,QACtB,OAAO;AACL,gBAAM,KAAK,OAAO,KAAK,SAAS,eAAe;AAAA,QACjD;AAAA,MACF;AAEA,aAAO,KAAK,IAAI,iBAAiB,KAAK,IAAI,MAAM,OAAO,aAAa,aAAa,eAAe,CAAC;AACjG,YAAM,KAAK,IAAI,iBAAiB,KAAK,IAAI,KAAK,OAAO,cAAc,cAAc,eAAe,CAAC;AAEjG,YAAM,MAA2B;AAAA,QAC/B,UAAU;AAAA,QACV,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,MAAA;AAGF,UAAI,UAAU,WAAW;AACvB,YAAI,QAAQ,KAAK;AACjB,YAAI,WAAW,KAAK;AAAA,MACtB,WAAW,OAAO,UAAU,UAAU;AACpC,YAAI,QAAQ;AAAA,MACd;AAEA,kBAAY,GAAG;AAAA,IACjB;AAEA,UAAM,MAAM,sBAAsB,cAAc;AAChD,WAAO,iBAAiB,UAAU,cAAc;AAChD,WAAO,iBAAiB,UAAU,gBAAgB,IAAI;AACtD,WAAO,MAAM;AACX,2BAAqB,GAAG;AACxB,aAAO,oBAAoB,UAAU,cAAc;AACnD,aAAO,oBAAoB,UAAU,gBAAgB,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,QAAQ,WAAW,KAAK,CAAC;AAE7B,QAAM,eAAyD,CAAA;AAC/D,MAAI,OAAO;AACT,iBAAa,eAAe,MAAM;AAChC,mBAAa,aAAa,OAAO;AACjC,cAAQ,IAAI;AAAA,IACd;AACA,iBAAa,eAAe,MAAM;AAChC,mBAAa,UAAU,WAAW,OAAO,GAAG;AAAA,IAC9C;AAAA,EACF,OAAO;AACL,iBAAa,UAAU,MAAM,QAAQ,CAAC,MAAM;AAAA,EAC9C;AAEA,QAAM,oBAAoB,QAAQ;AAAA,IAChC,cAAc,MAAM,aAAa,aAAa,OAAO;AAAA,IACrD,cAAc,MAAM;AAAE,mBAAa,UAAU,WAAW,OAAO,GAAG;AAAA,IAAG;AAAA,EAAA,IACnE,CAAA;AAEJ,8BACG,eAAe,UAAf,EAAwB,OAAO,EAAE,SAChC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,KAAK,YAAY,OAAO,EAAE,SAAS,cAAA,GAAiB,iBAAe,QAAQ,iBAAc,QAAQ,GAAG,cACtG,UAAA,SACH;AAAA,IAEC,UACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS,eAAe,QAAQ;AAAA,QAC/B,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,GAAG;AAAA,UACH,iBAAiB,qBACb,2BACA,OAAO,OAAO,WAAW;AAAA,UAC7B,QAAQ,aAAa,OAAO,OAAO,OAAO,KAAK;AAAA,UAC/C,cAAc,OAAO,aAAa;AAAA,UAClC,WAAW,OAAO,QAAQ;AAAA,UAC1B,SAAS,OAAO,QAAQ;AAAA,UACxB,UAAU;AAAA,UACV,YAAY,OAAO,WAAW,WAAW;AAAA,UACzC,WAAW,8BAA8B,OAAO,UAAU,OAAO,OAAO;AAAA,UACxE,GAAI,qBAAqB;AAAA,YACvB,gBAAgB;AAAA,YAChB,sBAAsB;AAAA,UAAA,IACpB,CAAA;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,QAGJ;AAAA,MAAA;AAAA,IAAA;AAAA,wBAIJ,SAAA,EAAO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAKN;AAAA,EAAA,GACJ;AAEJ,CAAC;AASD,MAAM,WAAW,KAAK,SAASC,MAAK,EAAE,UAAU,SAAwC;AACtF,SACE,oBAAC,OAAA,EAAI,MAAK,QAAO,OAAO,EAAE,UAAU,kCAAkC,GAAG,MAAA,GACtE,SAAA,CACH;AAEJ,CAAC;AAmBD,MAAM,WAAW,KAAK,SAASC,UAAS;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AACF,GAAsC;AACpC,QAAM,EAAE,OAAA,IAAW,SAAA;AACnB,QAAM,EAAE,MAAA,IAAU,WAAW,cAAc;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,SAAU;AACd;AACA,UAAA;AAAA,EACF,GAAG,CAAC,UAAU,SAAS,KAAK,CAAC;AAE7B,QAAM,gBAAgB,YAAY,CAAC,MAA2B;;AAC5D,UAAM,OAAO,EAAE;AACf,UAAM,YAAW,UAAK,kBAAL,mBAAoB,iBAAiB;AACtD,QAAI,CAAC,SAAU;AACf,UAAM,QAAQ,MAAM,KAAK,QAAQ;AACjC,UAAM,MAAM,MAAM,QAAQ,IAAmB;AAE7C,QAAI,EAAE,QAAQ,aAAa;AACzB,QAAE,eAAA;AACF,mBAAO,MAAM,KAAK,MAAM,MAAM,MAA9B,mBAAiC;AAAA,IACnC,WAAW,EAAE,QAAQ,WAAW;AAC9B,QAAE,eAAA;AACF,mBAAO,MAAM,IAAI,MAAM,UAAU,MAAM,MAAM,MAA7C,mBAAgD;AAAA,IAClD,WAAW,EAAE,QAAQ,QAAQ;AAC3B,QAAE,eAAA;AACF,kBAAM,CAAC,MAAP,mBAAU;AAAA,IACZ,WAAW,EAAE,QAAQ,OAAO;AAC1B,QAAE,eAAA;AACF,kBAAM,MAAM,SAAS,CAAC,MAAtB,mBAAyB;AAAA,IAC3B;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ,cACV,OAAO,OAAO,OAAO,WACrB,WACE,OAAO,OAAO,KAAK,WACnB,OAAO,OAAO,KAAK;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,WAAW,KAAK;AAAA,MAC1B,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK,OAAO,QAAQ;AAAA,QACpB,OAAO;AAAA,QACP,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;AAAA,QAClD,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,YAAY,aAAa,CAAC,WACtB,GAAG,cAAc,OAAO,OAAO,OAAO,WAAW,OAAO,OAAO,OAAO,OAAO,OAC7E;AAAA,QACJ;AAAA,QACA,UAAU,OAAO,WAAW,SAAS;AAAA,QACrC,YAAY,OAAO,WAAW,WAAW;AAAA,QACzC,YAAY,OAAO,WAAW,WAAW;AAAA,QACzC,QAAQ,WAAW,gBAAgB;AAAA,QACnC,cAAc,OAAO,aAAa;AAAA,QAClC,WAAW;AAAA,QACX,YAAY,OAAO,UAAU;AAAA,QAC7B,SAAS,WAAW,MAAM;AAAA,QAC1B,SAAS;AAAA,MAAA;AAAA,MAGV,UAAA;AAAA,QAAA,QAAQ,oBAAC,UAAK,OAAO,EAAE,YAAY,GAAG,SAAS,OAAA,GAAW,UAAA,KAAA,CAAK;AAAA,4BAC/D,QAAA,EAAK,OAAO,EAAE,MAAM,EAAA,GAAM,UAAS;AAAA,QACnC,YACC,oBAAC,QAAA,EAAK,OAAO;AAAA,UACX,UAAU,OAAO,WAAW,SAAS;AAAA,UACrC,OAAO,OAAO,OAAO,KAAK;AAAA,UAC1B,YAAY,OAAO,WAAW,WAAW;AAAA,UACzC,YAAY;AAAA,QAAA,GAEX,UAAA,SAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AAID,MAAM,cAAc,KAAK,SAASC,eAAkC;AAClE,QAAM,EAAE,OAAA,IAAW,SAAA;AACnB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,iBAAiB,OAAO,OAAO,OAAO;AAAA,QACtC,QAAQ,GAAG,OAAO,QAAQ,EAAE;AAAA,MAAA;AAAA,IAC9B;AAAA,EAAA;AAGN,CAAC;AAID,MAAM,YAAY,KAAK,SAASC,WAAU,EAAE,YAA+D;AACzG,QAAM,EAAE,OAAA,IAAW,SAAA;AACnB,SACE,oBAAC,SAAI,OAAO;AAAA,IACV,SAAS,GAAG,OAAO,QAAQ,EAAE,IAAI,OAAO,QAAQ,EAAE;AAAA,IAClD,UAAU,OAAO,WAAW,SAAS;AAAA,IACrC,YAAY,OAAO,WAAW,WAAW;AAAA,IACzC,OAAO,OAAO,OAAO,KAAK;AAAA,IAC1B,eAAe;AAAA,IACf,eAAe;AAAA,EAAA,GAEd,SAAA,CACH;AAEJ,CAAC;AAUM,MAAM,OAAsB,OAAO,OAAO,UAAU;AAAA,EACzD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT,CAAC;"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/react/core/overlays/Popover.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Popover & Menu Components\r\n * \r\n * General-purpose popover for dropdown menus, sort controls, action menus,\r\n * and contextual information. Portal-rendered with auto-positioning.\r\n * \r\n * Astro UX Compliance:\r\n * - Consistent with Dialog/Tooltip styling\r\n * - Focus trap for keyboard navigation\r\n * - Escape to close\r\n * - Click outside to close\r\n * - Reduced motion support\r\n * \r\n * @example\r\n * ```tsx\r\n * <Popover\r\n *   trigger={<Button variant=\"secondary\">Sort</Button>}\r\n *   placement=\"bottom-start\"\r\n * >\r\n *   <Menu>\r\n *     <Menu.Item onClick={...}>Sort by Time</Menu.Item>\r\n *     <Menu.Item onClick={...}>Sort by Name</Menu.Item>\r\n *     <Menu.Divider />\r\n *     <Menu.Item onClick={...} destructive>Clear All</Menu.Item>\r\n *   </Menu>\r\n * </Popover>\r\n * ```\r\n */\r\n\r\nimport React, { memo, useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';\r\nimport { useTheme } from '../../theme';\r\n\r\n// ─── Popover ─────────────────────────────────────────────────────────────────\r\n\r\nexport type PopoverPlacement = \r\n  | 'top' | 'top-start' | 'top-end'\r\n  | 'bottom' | 'bottom-start' | 'bottom-end'\r\n  | 'left' | 'left-start' | 'left-end'\r\n  | 'right' | 'right-start' | 'right-end';\r\n\r\nexport interface PopoverProps {\r\n  /** Trigger element */\r\n  trigger: React.ReactElement;\r\n  /** Popover content */\r\n  children: React.ReactNode;\r\n  /** Placement relative to trigger */\r\n  placement?: PopoverPlacement;\r\n  /** Open on hover instead of click */\r\n  hover?: boolean;\r\n  /** Controlled open state */\r\n  open?: boolean;\r\n  /** Controlled open change */\r\n  onOpenChange?: (open: boolean) => void;\r\n  /** Close on content click */\r\n  closeOnClick?: boolean;\r\n  /** Width: 'trigger' matches trigger width, number for px, 'auto' */\r\n  width?: 'trigger' | 'auto' | number;\r\n  /** Custom style for popover panel */\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst PopoverContext = createContext<{ close: () => void }>({ close: () => {} });\r\n\r\nexport const Popover = memo(function Popover({\r\n  trigger,\r\n  children,\r\n  placement = 'bottom-start',\r\n  hover = false,\r\n  open: controlledOpen,\r\n  onOpenChange,\r\n  closeOnClick = true,\r\n  width = 'auto',\r\n  style,\r\n}: PopoverProps): React.ReactElement {\r\n  const { tokens, theme } = useTheme();\r\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\r\n  const [internalOpen, setInternalOpen] = useState(false);\r\n  const triggerRef = useRef<HTMLDivElement>(null);\r\n  const popoverRef = useRef<HTMLDivElement>(null);\r\n  const hoverTimeout = useRef<ReturnType<typeof setTimeout>>();\r\n  \r\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\r\n  \r\n  const setOpen = useCallback((val: boolean) => {\r\n    if (controlledOpen === undefined) setInternalOpen(val);\r\n    onOpenChange?.(val);\r\n  }, [controlledOpen, onOpenChange]);\r\n  \r\n  const close = useCallback(() => setOpen(false), [setOpen]);\r\n  \r\n  // Click outside\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: MouseEvent) => {\r\n      if (\r\n        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&\r\n        popoverRef.current && !popoverRef.current.contains(e.target as Node)\r\n      ) {\r\n        close();\r\n      }\r\n    };\r\n    document.addEventListener('mousedown', handler);\r\n    return () => document.removeEventListener('mousedown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  // Escape key + cleanup hoverTimeout on unmount\r\n  useEffect(() => {\r\n    if (!isOpen) return;\r\n    const handler = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') close();\r\n    };\r\n    document.addEventListener('keydown', handler);\r\n    return () => document.removeEventListener('keydown', handler);\r\n  }, [isOpen, close]);\r\n  \r\n  useEffect(() => {\r\n    return () => { clearTimeout(hoverTimeout.current); };\r\n  }, []);\r\n  \r\n  // Position calculation — `positioned` gates visibility so the panel is never\r\n  // painted in document flow before the first RAF resolves coordinates.\r\n  const [position, setPosition] = useState<React.CSSProperties>({});\r\n  const [positioned, setPositioned] = useState(false);\r\n\r\n  // Reset visibility guard whenever the popover closes so the next open starts\r\n  // hidden again rather than flashing the stale coordinates for one frame.\r\n  useEffect(() => {\r\n    if (!isOpen) setPositioned(false);\r\n  }, [isOpen]);\r\n\r\n  useEffect(() => {\r\n    if (!isOpen || !triggerRef.current) return;\r\n    const gap = 8;\r\n    const viewportPadding = 8;\r\n\r\n    const updatePosition = () => {\r\n      const rect = triggerRef.current?.getBoundingClientRect();\r\n      if (!rect) return;\r\n\r\n      const panelWidth = width === 'trigger'\r\n        ? rect.width\r\n        : typeof width === 'number'\r\n          ? width\r\n          : (popoverRef.current?.offsetWidth ?? 220);\r\n      const panelHeight = popoverRef.current?.offsetHeight ?? 220;\r\n\r\n      let left = rect.left;\r\n      let top = rect.bottom + gap;\r\n\r\n      if (placement.startsWith('top')) {\r\n        top = rect.top - panelHeight - gap;\r\n      } else if (placement.startsWith('bottom')) {\r\n        top = rect.bottom + gap;\r\n      } else if (placement.startsWith('left')) {\r\n        left = rect.left - panelWidth - gap;\r\n      } else if (placement.startsWith('right')) {\r\n        left = rect.right + gap;\r\n      }\r\n\r\n      if (placement.startsWith('top') || placement.startsWith('bottom')) {\r\n        if (placement.endsWith('-start')) {\r\n          left = rect.left;\r\n        } else if (placement.endsWith('-end')) {\r\n          left = rect.right - panelWidth;\r\n        } else {\r\n          left = rect.left + (rect.width - panelWidth) / 2;\r\n        }\r\n      } else {\r\n        if (placement.endsWith('-start')) {\r\n          top = rect.top;\r\n        } else if (placement.endsWith('-end')) {\r\n          top = rect.bottom - panelHeight;\r\n        } else {\r\n          top = rect.top + (rect.height - panelHeight) / 2;\r\n        }\r\n      }\r\n\r\n      left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));\r\n      top = Math.max(viewportPadding, Math.min(top, window.innerHeight - panelHeight - viewportPadding));\r\n\r\n      const pos: React.CSSProperties = {\r\n        position: 'fixed',\r\n        zIndex: 9990,\r\n        left,\r\n        top,\r\n      };\r\n\r\n      if (width === 'trigger') {\r\n        pos.width = rect.width;\r\n        pos.minWidth = rect.width;\r\n      } else if (typeof width === 'number') {\r\n        pos.width = width;\r\n      }\r\n\r\n      setPosition(pos);\r\n      setPositioned(true);\r\n    };\r\n\r\n    const raf = requestAnimationFrame(updatePosition);\r\n    window.addEventListener('resize', updatePosition);\r\n    window.addEventListener('scroll', updatePosition, true);\r\n    return () => {\r\n      cancelAnimationFrame(raf);\r\n      window.removeEventListener('resize', updatePosition);\r\n      window.removeEventListener('scroll', updatePosition, true);\r\n    };\r\n  }, [isOpen, placement, width]);\r\n  \r\n  const triggerProps: Record<string, (() => void) | undefined> = {};\r\n  if (hover) {\r\n    triggerProps.onMouseEnter = () => {\r\n      clearTimeout(hoverTimeout.current);\r\n      setOpen(true);\r\n    };\r\n    triggerProps.onMouseLeave = () => {\r\n      hoverTimeout.current = setTimeout(close, 150);\r\n    };\r\n  } else {\r\n    triggerProps.onClick = () => setOpen(!isOpen);\r\n  }\r\n  \r\n  const popoverHoverProps = hover ? {\r\n    onMouseEnter: () => clearTimeout(hoverTimeout.current),\r\n    onMouseLeave: () => { hoverTimeout.current = setTimeout(close, 150); },\r\n  } : {};\r\n  \r\n  return (\r\n    <PopoverContext.Provider value={{ close }}>\r\n      <div ref={triggerRef} style={{ display: 'inline-flex' }} aria-expanded={isOpen} aria-haspopup=\"true\" {...triggerProps}>\r\n        {trigger}\r\n      </div>\r\n      \r\n      {isOpen && (\r\n        <div\r\n          ref={popoverRef}\r\n          role=\"dialog\"\r\n          onClick={closeOnClick ? close : undefined}\r\n          {...popoverHoverProps}\r\n          style={{\r\n            ...position,\r\n            visibility: positioned ? 'visible' : 'hidden',\r\n            backgroundColor: isTransparentTheme\r\n              ? 'rgba(15, 12, 30, 0.85)'\r\n              : tokens.colors.background.elevated,\r\n            border: `1px solid ${tokens.colors.border.muted}`,\r\n            borderRadius: tokens.borderRadius.md,\r\n            boxShadow: tokens.shadows.lg,\r\n            padding: tokens.spacing.xs,\r\n            maxWidth: 'min(320px, calc(100vw - 16px))',\r\n            fontFamily: tokens.typography.fontFamily.primary,\r\n            animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,\r\n            ...(isTransparentTheme ? {\r\n              backdropFilter: 'blur(16px)',\r\n              WebkitBackdropFilter: 'blur(16px)',\r\n            } : {}),\r\n            ...style,\r\n          }}\r\n        >\r\n          {children}\r\n        </div>\r\n      )}\r\n      \r\n      <style>{`\r\n        @keyframes zendir-popover-enter {\r\n          from { opacity: 0; transform: translateY(-4px) scale(0.98); }\r\n          to { opacity: 1; transform: translateY(0) scale(1); }\r\n        }\r\n      `}</style>\r\n    </PopoverContext.Provider>\r\n  );\r\n});\r\n\r\n// ─── Menu ────────────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuProps {\r\n  children: React.ReactNode;\r\n  style?: React.CSSProperties;\r\n}\r\n\r\nconst MenuRoot = memo(function Menu({ children, style }: MenuProps): React.ReactElement {\r\n  return (\r\n    <div role=\"menu\" style={{ minWidth: 'min(160px, calc(100vw - 32px))', ...style }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Menu.Item ───────────────────────────────────────────────────────────────\r\n\r\nexport interface MenuItemProps {\r\n  /** Click handler */\r\n  onClick?: () => void;\r\n  /** Icon (ReactNode or IconName string) */\r\n  icon?: React.ReactNode;\r\n  /** Label text */\r\n  children: React.ReactNode;\r\n  /** Disabled state */\r\n  disabled?: boolean;\r\n  /** Destructive action (red text) */\r\n  destructive?: boolean;\r\n  /** Keyboard shortcut hint */\r\n  shortcut?: string;\r\n}\r\n\r\nconst MenuItem = memo(function MenuItem({\r\n  onClick,\r\n  icon,\r\n  children,\r\n  disabled = false,\r\n  destructive = false,\r\n  shortcut,\r\n}: MenuItemProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { close } = useContext(PopoverContext);\r\n  const [isHovered, setIsHovered] = useState(false);\r\n  \r\n  const handleClick = useCallback(() => {\r\n    if (disabled) return;\r\n    onClick?.();\r\n    close();\r\n  }, [disabled, onClick, close]);\r\n  \r\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\r\n    const item = e.currentTarget;\r\n    const siblings = item.parentElement?.querySelectorAll('[role=\"menuitem\"]:not([disabled])');\r\n    if (!siblings) return;\r\n    const items = Array.from(siblings) as HTMLElement[];\r\n    const idx = items.indexOf(item as HTMLElement);\r\n    \r\n    if (e.key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      items[(idx + 1) % items.length]?.focus();\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      items[(idx - 1 + items.length) % items.length]?.focus();\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault();\r\n      items[0]?.focus();\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault();\r\n      items[items.length - 1]?.focus();\r\n    }\r\n  }, []);\r\n  \r\n  const color = destructive\r\n    ? tokens.colors.status.critical\r\n    : disabled\r\n      ? tokens.colors.text.tertiary\r\n      : tokens.colors.text.primary;\r\n  \r\n  return (\r\n    <button\r\n      role=\"menuitem\"\r\n      tabIndex={disabled ? -1 : 0}\r\n      onClick={handleClick}\r\n      onKeyDown={handleKeyDown}\r\n      disabled={disabled}\r\n      onMouseEnter={() => setIsHovered(true)}\r\n      onMouseLeave={() => setIsHovered(false)}\r\n      style={{\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        gap: tokens.spacing.sm,\r\n        width: '100%',\r\n        padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,\r\n        minHeight: 44,\r\n        border: 'none',\r\n        background: isHovered && !disabled\r\n          ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12`\r\n          : 'transparent',\r\n        color,\r\n        fontSize: tokens.typography.fontSize.sm,\r\n        fontWeight: tokens.typography.fontWeight.normal,\r\n        fontFamily: tokens.typography.fontFamily.primary,\r\n        cursor: disabled ? 'not-allowed' : 'pointer',\r\n        borderRadius: tokens.borderRadius.sm,\r\n        textAlign: 'left',\r\n        transition: tokens.animation.fast,\r\n        opacity: disabled ? 0.5 : 1,\r\n        outline: 'none',\r\n      }}\r\n    >\r\n      {icon && <span style={{ flexShrink: 0, display: 'flex' }}>{icon}</span>}\r\n      <span style={{ flex: 1 }}>{children}</span>\r\n      {shortcut && (\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xxs,\r\n          color: tokens.colors.text.tertiary,\r\n          fontFamily: tokens.typography.fontFamily.mono,\r\n          flexShrink: 0,\r\n        }}>\r\n          {shortcut}\r\n        </span>\r\n      )}\r\n    </button>\r\n  );\r\n});\r\n\r\n// ─── Menu.Divider ────────────────────────────────────────────────────────────\r\n\r\nconst MenuDivider = memo(function MenuDivider(): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      style={{\r\n        height: '1px',\r\n        backgroundColor: tokens.colors.border.muted,\r\n        margin: `${tokens.spacing.xs} 0`,\r\n      }}\r\n    />\r\n  );\r\n});\r\n\r\n// ─── Menu.Label ──────────────────────────────────────────────────────────────\r\n\r\nconst MenuLabel = memo(function MenuLabel({ children }: { children: React.ReactNode }): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  return (\r\n    <div style={{\r\n      padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\r\n      fontSize: tokens.typography.fontSize.xxs,\r\n      fontWeight: tokens.typography.fontWeight.bold,\r\n      color: tokens.colors.text.tertiary,\r\n      textTransform: 'uppercase',\r\n      letterSpacing: '0.06em',\r\n    }}>\r\n      {children}\r\n    </div>\r\n  );\r\n});\r\n\r\n// ─── Compound Export ─────────────────────────────────────────────────────────\r\n\r\ntype MenuComponent = typeof MenuRoot & {\r\n  Item: typeof MenuItem;\r\n  Divider: typeof MenuDivider;\r\n  Label: typeof MenuLabel;\r\n};\r\n\r\nexport const Menu: MenuComponent = Object.assign(MenuRoot, {\r\n  Item: MenuItem,\r\n  Divider: MenuDivider,\r\n  Label: MenuLabel,\r\n});\r\n\r\nexport default Popover;\r\n"],"names":["Popover","Menu","MenuItem","MenuDivider","MenuLabel"],"mappings":"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"}

package/dist/react/core/widgets/ImageFrame.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+
+/** Built-in colormap names. */
+export type ImageColormap = 'cividis' | 'gray';
+export interface ImageFrameProps {
+    /** Flat, row-major single-channel samples. Length must equal width*height. */
+    data?: number[];
+    /**
+     * Pre-decoded RGBA pixels (length = width*height*4). When provided this
+     * is painted directly and `data` / `maxADU` / `colormap` are ignored.
+     * Escape hatch for callers that already have an image buffer.
+     */
+    pixels?: Uint8ClampedArray;
+    /** Frame width in pixels. */
+    width: number;
+    /** Frame height in pixels. Defaults to `width` (square). */
+    height?: number;
+    /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */
+    maxADU?: number;
+    /** Colormap applied to normalised intensities. Default 'cividis'. */
+    colormap?: ImageColormap;
+    /** Show the raw sample values as a grid below the image. Default false. */
+    showValues?: boolean;
+    /** Optional title shown above the image. */
+    title?: string;
+    /** Loading state (skeleton). */
+    loading?: boolean;
+    /** Message shown when there is no frame to display. */
+    emptyMessage?: string;
+    /** Custom class name. */
+    className?: string;
+}
+/**
+ * decodeImage — pure transform: single-channel samples → canvas-ready
+ * RGBA. Fixed-ceiling normalisation (`sample / maxADU`) so the output
+ * reflects the real signal level relative to saturation rather than
+ * rescaling per frame. Returns null on invalid input.
+ */
+export declare function decodeImage(opts: {
+    data: number[];
+    width: number;
+    height?: number;
+    maxADU?: number;
+    colormap?: ImageColormap;
+}): {
+    width: number;
+    height: number;
+    pixels: Uint8ClampedArray;
+} | null;
+export declare const ImageFrame: React.NamedExoticComponent<ImageFrameProps>;
+export default ImageFrame;

package/dist/react/core/widgets/ImageFrame.js

@@ -0,0 +1,201 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useRef, useMemo, useEffect } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames, lerp } from "../../utils/index.js";
+const DEFAULT_MAX_ADU = 65535;
+const COLORMAPS = {
+  // Dark teal → yellow; a cividis-style ramp that reads well on dark UI.
+  cividis: (t) => [lerp(42, 237, t), lerp(123, 222, t), lerp(155, 83, t)],
+  gray: (t) => {
+    const v = lerp(0, 255, t);
+    return [v, v, v];
+  }
+};
+function decodeImage(opts) {
+  const { data, width, height, maxADU = DEFAULT_MAX_ADU, colormap = "cividis" } = opts;
+  if (!Array.isArray(data)) return null;
+  if (!Number.isFinite(width) || width <= 0) return null;
+  const W = Math.floor(width);
+  const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : W;
+  if (data.length !== W * H) return null;
+  const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;
+  const ceiling = Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;
+  const pixels = new Uint8ClampedArray(W * H * 4);
+  for (let i = 0; i < W * H; i++) {
+    const raw = data[i];
+    const t = Number.isFinite(raw) ? raw / ceiling : 0;
+    const [r, g, b] = ramp(t);
+    const off = i * 4;
+    pixels[off + 0] = r;
+    pixels[off + 1] = g;
+    pixels[off + 2] = b;
+    pixels[off + 3] = 255;
+  }
+  return { width: W, height: H, pixels };
+}
+function formatValues(data, width, height, maxADU) {
+  if (width * height !== data.length) return data.join(", ");
+  const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);
+  const rows = [];
+  for (let y = 0; y < height; y++) {
+    const cells = [];
+    for (let x = 0; x < width; x++) {
+      cells.push(String(data[y * width + x]).padStart(colW, " "));
+    }
+    rows.push(cells.join(" "));
+  }
+  return rows.join("\n");
+}
+const ImageFrame = memo(function ImageFrame2({
+  data,
+  pixels,
+  width,
+  height,
+  maxADU = DEFAULT_MAX_ADU,
+  colormap = "cividis",
+  showValues = false,
+  title,
+  loading = false,
+  emptyMessage = "No frame to display.",
+  className = ""
+}) {
+  const { tokens } = useTheme();
+  const canvasRef = useRef(null);
+  const H = Number.isFinite(height) && height > 0 ? Math.floor(height) : Math.floor(width);
+  const W = Math.floor(width);
+  const decoded = useMemo(() => {
+    if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) {
+      return { width: W, height: H, pixels };
+    }
+    if (Array.isArray(data)) {
+      return decodeImage({ data, width: W, height: H, maxADU, colormap });
+    }
+    return null;
+  }, [data, pixels, W, H, maxADU, colormap]);
+  useEffect(() => {
+    if (!decoded) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = decoded.width;
+    canvas.height = decoded.height;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const img = ctx.createImageData(decoded.width, decoded.height);
+    img.data.set(decoded.pixels);
+    ctx.putImageData(img, 0, 0);
+  }, [decoded]);
+  const surfaceStyle = {
+    backgroundColor: tokens.colors.background.surface,
+    borderRadius: tokens.borderRadius.lg,
+    padding: tokens.spacing.md,
+    color: tokens.colors.text.primary,
+    fontFamily: tokens.typography.fontFamily.primary,
+    display: "flex",
+    flexDirection: "column",
+    gap: tokens.spacing.sm
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-image-frame", "loading", className),
+        role: "img",
+        "aria-busy": "true",
+        "aria-label": "Loading image",
+        style: surfaceStyle,
+        children: [
+          title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                width: "100%",
+                aspectRatio: `${W} / ${H}`,
+                background: "rgba(255,255,255,0.06)",
+                borderRadius: tokens.borderRadius.sm
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (!decoded) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames("zendir-image-frame", "empty", className),
+        role: "img",
+        "aria-label": "No image",
+        style: { ...surfaceStyle, textAlign: "center", color: tokens.colors.text.tertiary },
+        children: [
+          title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: tokens.typography.fontSize.xs }, children: emptyMessage })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("zendir-image-frame", className),
+      "aria-label": title || "Image frame",
+      style: surfaceStyle,
+      children: [
+        title && /* @__PURE__ */ jsx(FrameTitle, { tokens, title }),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            "data-testid": "image-frame-canvas",
+            style: {
+              width: "100%",
+              aspectRatio: `${decoded.width} / ${decoded.height}`,
+              imageRendering: "pixelated",
+              display: "block",
+              background: "rgba(0,0,0,0.4)",
+              borderRadius: tokens.borderRadius.sm
+            }
+          }
+        ),
+        showValues && Array.isArray(data) && /* @__PURE__ */ jsx(
+          "pre",
+          {
+            "data-testid": "image-frame-values",
+            style: {
+              margin: 0,
+              padding: tokens.spacing.sm,
+              background: "rgba(0,0,0,0.45)",
+              borderRadius: tokens.borderRadius.sm,
+              color: tokens.colors.text.primary,
+              fontSize: 10,
+              lineHeight: 1.25,
+              fontFamily: tokens.typography.fontFamily.mono,
+              whiteSpace: "pre",
+              overflow: "auto",
+              maxHeight: 220
+            },
+            children: formatValues(data, decoded.width, decoded.height, maxADU)
+          }
+        )
+      ]
+    }
+  );
+});
+const FrameTitle = ({ tokens, title }) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    style: {
+      margin: 0,
+      fontSize: tokens.typography.fontSize.md,
+      fontWeight: tokens.typography.fontWeight.semibold,
+      color: tokens.colors.text.primary
+    },
+    children: title
+  }
+);
+export {
+  ImageFrame,
+  decodeImage
+};
+//# sourceMappingURL=ImageFrame.js.map

package/dist/react/core/widgets/ImageFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageFrame.js","sources":["../../../../src/react/core/widgets/ImageFrame.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - ImageFrame Component\r\n *\r\n * Renders a single-channel data frame (e.g. a CCD/sensor readout) as a\r\n * false-colour image on a <canvas>. Purely presentational: hand it an\r\n * array of samples and it paints them — it has no knowledge of where\r\n * the data came from (engine, file, websocket, console). This is the\r\n * reusable surface that callers \"dump\" a frame into.\r\n *\r\n * Pipeline per sample: normalise against a fixed ceiling (`maxADU`) to\r\n * an intensity in [0,1], run that through a colormap, pack RGBA. The\r\n * default `cividis` ramp (dark teal → yellow) reads well on dark UI.\r\n *\r\n * The canvas's native resolution is the frame's width×height, so each\r\n * sample is exactly one pixel; CSS scales it up with\r\n * `image-rendering: pixelated`, keeping small sensor frames crisp.\r\n *\r\n * Astro UX Compliance:\r\n * - Themed surface, border radius, and typography via `useTheme`.\r\n * - Loading and empty states with friendly messaging.\r\n * - Monospace raw-value grid for analysis.\r\n *\r\n * @example\r\n * ```tsx\r\n * <ImageFrame\r\n *   data={ccdSamples}      // number[] length = width*height\r\n *   width={28}\r\n *   maxADU={65535}\r\n *   title=\"CCD capture\"\r\n *   showValues\r\n * />\r\n * ```\r\n */\r\n\r\nimport React, { memo, useEffect, useMemo, useRef } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { classNames, lerp } from '../../utils';\r\n\r\n// =============================================================================\r\n// Types\r\n// =============================================================================\r\n\r\n/** Built-in colormap names. */\r\nexport type ImageColormap = 'cividis' | 'gray';\r\n\r\nexport interface ImageFrameProps {\r\n  /** Flat, row-major single-channel samples. Length must equal width*height. */\r\n  data?: number[];\r\n  /**\r\n   * Pre-decoded RGBA pixels (length = width*height*4). When provided this\r\n   * is painted directly and `data` / `maxADU` / `colormap` are ignored.\r\n   * Escape hatch for callers that already have an image buffer.\r\n   */\r\n  pixels?: Uint8ClampedArray;\r\n  /** Frame width in pixels. */\r\n  width: number;\r\n  /** Frame height in pixels. Defaults to `width` (square). */\r\n  height?: number;\r\n  /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */\r\n  maxADU?: number;\r\n  /** Colormap applied to normalised intensities. Default 'cividis'. */\r\n  colormap?: ImageColormap;\r\n  /** Show the raw sample values as a grid below the image. Default false. */\r\n  showValues?: boolean;\r\n  /** Optional title shown above the image. */\r\n  title?: string;\r\n  /** Loading state (skeleton). */\r\n  loading?: boolean;\r\n  /** Message shown when there is no frame to display. */\r\n  emptyMessage?: string;\r\n  /** Custom class name. */\r\n  className?: string;\r\n}\r\n\r\n// =============================================================================\r\n// Pure helpers (exported for testing / reuse)\r\n// =============================================================================\r\n\r\nconst DEFAULT_MAX_ADU = 65535;\r\n\r\n/** Two-stop colormaps: intensity t in [0,1] → [r,g,b] (0..255). */\r\nconst COLORMAPS: Record<ImageColormap, (t: number) => [number, number, number]> = {\r\n  // Dark teal → yellow; a cividis-style ramp that reads well on dark UI.\r\n  cividis: (t) => [lerp(42, 237, t), lerp(123, 222, t), lerp(155, 83, t)],\r\n  gray: (t) => {\r\n    const v = lerp(0, 255, t);\r\n    return [v, v, v];\r\n  },\r\n};\r\n\r\n/**\r\n * decodeImage — pure transform: single-channel samples → canvas-ready\r\n * RGBA. Fixed-ceiling normalisation (`sample / maxADU`) so the output\r\n * reflects the real signal level relative to saturation rather than\r\n * rescaling per frame. Returns null on invalid input.\r\n */\r\nexport function decodeImage(opts: {\r\n  data: number[];\r\n  width: number;\r\n  height?: number;\r\n  maxADU?: number;\r\n  colormap?: ImageColormap;\r\n}): { width: number; height: number; pixels: Uint8ClampedArray } | null {\r\n  const { data, width, height, maxADU = DEFAULT_MAX_ADU, colormap = 'cividis' } = opts;\r\n  if (!Array.isArray(data)) return null;\r\n  if (!Number.isFinite(width) || width <= 0) return null;\r\n  const W = Math.floor(width);\r\n  const H = Number.isFinite(height) && (height as number) > 0 ? Math.floor(height as number) : W;\r\n  if (data.length !== W * H) return null;\r\n\r\n  const ramp = COLORMAPS[colormap] || COLORMAPS.cividis;\r\n  const ceiling = Number.isFinite(maxADU) && maxADU > 0 ? maxADU : DEFAULT_MAX_ADU;\r\n\r\n  const pixels = new Uint8ClampedArray(W * H * 4);\r\n  for (let i = 0; i < W * H; i++) {\r\n    const raw = data[i];\r\n    // sample / ceiling (lerp clamps t to [0,1]); non-finite reads as 0.\r\n    const t = Number.isFinite(raw) ? raw / ceiling : 0;\r\n    const [r, g, b] = ramp(t);\r\n    const off = i * 4;\r\n    pixels[off + 0] = r;\r\n    pixels[off + 1] = g;\r\n    pixels[off + 2] = b;\r\n    pixels[off + 3] = 255;\r\n  }\r\n  return { width: W, height: H, pixels };\r\n}\r\n\r\n/** Pretty-print samples as a width-padded grid for the values view. */\r\nfunction formatValues(data: number[], width: number, height: number, maxADU: number): string {\r\n  if (width * height !== data.length) return data.join(', ');\r\n  const colW = Math.max(3, String(Math.floor(maxADU) || 1).length);\r\n  const rows: string[] = [];\r\n  for (let y = 0; y < height; y++) {\r\n    const cells: string[] = [];\r\n    for (let x = 0; x < width; x++) {\r\n      cells.push(String(data[y * width + x]).padStart(colW, ' '));\r\n    }\r\n    rows.push(cells.join(' '));\r\n  }\r\n  return rows.join('\\n');\r\n}\r\n\r\n// =============================================================================\r\n// Component\r\n// =============================================================================\r\n\r\nexport const ImageFrame = memo(function ImageFrame({\r\n  data,\r\n  pixels,\r\n  width,\r\n  height,\r\n  maxADU = DEFAULT_MAX_ADU,\r\n  colormap = 'cividis',\r\n  showValues = false,\r\n  title,\r\n  loading = false,\r\n  emptyMessage = 'No frame to display.',\r\n  className = '',\r\n}: ImageFrameProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const canvasRef = useRef<HTMLCanvasElement>(null);\r\n\r\n  const H = Number.isFinite(height) && (height as number) > 0 ? Math.floor(height as number) : Math.floor(width);\r\n  const W = Math.floor(width);\r\n\r\n  // Decode once per frame/option change. A pre-decoded `pixels` buffer\r\n  // wins; otherwise decode `data` through the colormap.\r\n  const decoded = useMemo(() => {\r\n    if (pixels instanceof Uint8ClampedArray && pixels.length === W * H * 4) {\r\n      return { width: W, height: H, pixels };\r\n    }\r\n    if (Array.isArray(data)) {\r\n      return decodeImage({ data, width: W, height: H, maxADU, colormap });\r\n    }\r\n    return null;\r\n  }, [data, pixels, W, H, maxADU, colormap]);\r\n\r\n  useEffect(() => {\r\n    if (!decoded) return;\r\n    const canvas = canvasRef.current;\r\n    if (!canvas) return;\r\n    canvas.width = decoded.width;\r\n    canvas.height = decoded.height;\r\n    const ctx = canvas.getContext('2d');\r\n    if (!ctx) return;\r\n    // Build via createImageData + set (rather than `new ImageData(buf,…)`)\r\n    // to sidestep the lib.dom ArrayBuffer/ArrayBufferLike typing mismatch\r\n    // on newer TypeScript, and it's the same cost.\r\n    const img = ctx.createImageData(decoded.width, decoded.height);\r\n    img.data.set(decoded.pixels);\r\n    ctx.putImageData(img, 0, 0);\r\n  }, [decoded]);\r\n\r\n  const surfaceStyle: React.CSSProperties = {\r\n    backgroundColor: tokens.colors.background.surface,\r\n    borderRadius: tokens.borderRadius.lg,\r\n    padding: tokens.spacing.md,\r\n    color: tokens.colors.text.primary,\r\n    fontFamily: tokens.typography.fontFamily.primary,\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: tokens.spacing.sm,\r\n  };\r\n\r\n  // Loading state\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className={classNames('zendir-image-frame', 'loading', className)}\r\n        role=\"img\"\r\n        aria-busy=\"true\"\r\n        aria-label=\"Loading image\"\r\n        style={surfaceStyle}\r\n      >\r\n        {title && <FrameTitle tokens={tokens} title={title} />}\r\n        <div\r\n          style={{\r\n            width: '100%',\r\n            aspectRatio: `${W} / ${H}`,\r\n            background: 'rgba(255,255,255,0.06)',\r\n            borderRadius: tokens.borderRadius.sm,\r\n          }}\r\n        />\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Empty state\r\n  if (!decoded) {\r\n    return (\r\n      <div\r\n        className={classNames('zendir-image-frame', 'empty', className)}\r\n        role=\"img\"\r\n        aria-label=\"No image\"\r\n        style={{ ...surfaceStyle, textAlign: 'center', color: tokens.colors.text.tertiary }}\r\n      >\r\n        {title && <FrameTitle tokens={tokens} title={title} />}\r\n        <p style={{ margin: 0, fontSize: tokens.typography.fontSize.xs }}>{emptyMessage}</p>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={classNames('zendir-image-frame', className)}\r\n      aria-label={title || 'Image frame'}\r\n      style={surfaceStyle}\r\n    >\r\n      {title && <FrameTitle tokens={tokens} title={title} />}\r\n\r\n      <canvas\r\n        ref={canvasRef}\r\n        data-testid=\"image-frame-canvas\"\r\n        style={{\r\n          width: '100%',\r\n          aspectRatio: `${decoded.width} / ${decoded.height}`,\r\n          imageRendering: 'pixelated',\r\n          display: 'block',\r\n          background: 'rgba(0,0,0,0.4)',\r\n          borderRadius: tokens.borderRadius.sm,\r\n        }}\r\n      />\r\n\r\n      {showValues && Array.isArray(data) && (\r\n        <pre\r\n          data-testid=\"image-frame-values\"\r\n          style={{\r\n            margin: 0,\r\n            padding: tokens.spacing.sm,\r\n            background: 'rgba(0,0,0,0.45)',\r\n            borderRadius: tokens.borderRadius.sm,\r\n            color: tokens.colors.text.primary,\r\n            fontSize: 10,\r\n            lineHeight: 1.25,\r\n            fontFamily: tokens.typography.fontFamily.mono,\r\n            whiteSpace: 'pre',\r\n            overflow: 'auto',\r\n            maxHeight: 220,\r\n          }}\r\n        >\r\n          {formatValues(data, decoded.width, decoded.height, maxADU)}\r\n        </pre>\r\n      )}\r\n    </div>\r\n  );\r\n});\r\n\r\n/** Small header row shared across states. */\r\nconst FrameTitle = ({ tokens, title }: { tokens: ReturnType<typeof useTheme>['tokens']; title: string }) => (\r\n  <h3\r\n    style={{\r\n      margin: 0,\r\n      fontSize: tokens.typography.fontSize.md,\r\n      fontWeight: tokens.typography.fontWeight.semibold,\r\n      color: tokens.colors.text.primary,\r\n    }}\r\n  >\r\n    {title}\r\n  </h3>\r\n);\r\n\r\nexport default ImageFrame;\r\n"],"names":["ImageFrame"],"mappings":"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"}

package/dist/react/core/widgets/ImagePanel.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { ImageColormap } from './ImageFrame';
+
+export interface ImagePanelProps {
+    /** Flat, row-major single-channel samples. Length must equal width*height. */
+    data?: number[];
+    /** Pre-decoded RGBA pixels — escape hatch for callers with their own buffer. */
+    pixels?: Uint8ClampedArray;
+    /** Frame width in pixels. */
+    width: number;
+    /** Frame height in pixels. Defaults to `width` (square). */
+    height?: number;
+    /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */
+    maxADU?: number;
+    /** Colormap applied to normalised intensities. Default 'cividis'. */
+    colormap?: ImageColormap;
+    /** Show the raw sample values as a grid below the image. Default false. */
+    showValues?: boolean;
+    /** Message shown when no frame is available. */
+    emptyMessage?: string;
+    /** Title rendered above the frame. */
+    title?: string;
+    /** True while a capture is in flight. Drives the button label + skeleton. */
+    loading?: boolean;
+    /** Error from the upstream capture. Rendered as a red banner above the frame. */
+    error?: string | null;
+    /** Click handler for the refresh button. Omit to hide the button entirely. */
+    onRefresh?: () => void;
+    /** Label for the idle refresh button. Default 'Refresh'. */
+    refreshLabel?: string;
+    /** Label while `loading` is true. Default 'Capturing…'. */
+    refreshingLabel?: string;
+    /**
+     * Disable the refresh button even when not loading — e.g. when the
+     * caller has no data source bound (no CCD selected). The button is
+     * always disabled while `loading` is true regardless of this prop.
+     */
+    refreshDisabled?: boolean;
+    /** Extra class name applied to the outer wrapper. */
+    className?: string;
+}
+export declare const ImagePanel: React.NamedExoticComponent<ImagePanelProps>;
+export default ImagePanel;

package/dist/react/core/widgets/ImagePanel.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
+import { classNames } from "../../utils/index.js";
+import { ImageFrame } from "./ImageFrame.js";
+const ImagePanel = memo(function ImagePanel2({
+  // frame
+  data,
+  pixels,
+  width,
+  height,
+  maxADU,
+  colormap,
+  showValues,
+  emptyMessage,
+  // chrome
+  title,
+  loading = false,
+  error = null,
+  onRefresh,
+  refreshLabel = "Refresh",
+  refreshingLabel = "Capturing…",
+  refreshDisabled = false,
+  className = ""
+}) {
+  const { tokens } = useTheme();
+  const buttonDisabled = loading || refreshDisabled;
+  const hasFrame = Array.isArray(data) || pixels instanceof Uint8ClampedArray;
+  const frameLoading = loading && !hasFrame;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "image-panel",
+      className: classNames("zendir-image-panel", className),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacing.sm,
+        fontFamily: tokens.typography.fontFamily.primary
+      },
+      children: [
+        onRefresh && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": "image-panel-refresh",
+            onClick: onRefresh,
+            disabled: buttonDisabled,
+            "aria-busy": loading ? "true" : "false",
+            style: {
+              alignSelf: "flex-start",
+              padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
+              borderRadius: tokens.borderRadius.sm,
+              border: `1px solid ${tokens.colors.border.muted}`,
+              background: buttonDisabled ? "rgba(255,255,255,0.03)" : "rgba(255,255,255,0.08)",
+              color: buttonDisabled ? tokens.colors.text.tertiary : tokens.colors.text.primary,
+              cursor: buttonDisabled ? "default" : "pointer",
+              fontSize: tokens.typography.fontSize.xs,
+              fontFamily: tokens.typography.fontFamily.primary,
+              // Make the disabled state visually consistent across browsers.
+              opacity: buttonDisabled ? 0.85 : 1
+            },
+            children: loading ? refreshingLabel : refreshLabel
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "image-panel-error",
+            role: "alert",
+            style: {
+              color: tokens.colors.status.critical,
+              fontSize: tokens.typography.fontSize.xs,
+              background: "rgba(255, 56, 56, 0.08)",
+              border: `1px solid ${tokens.colors.status.critical}33`,
+              borderRadius: tokens.borderRadius.sm,
+              padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,
+              wordBreak: "break-word"
+            },
+            children: error
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ImageFrame,
+          {
+            data,
+            pixels,
+            width,
+            height,
+            maxADU,
+            colormap,
+            showValues,
+            title,
+            loading: frameLoading,
+            emptyMessage
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  ImagePanel
+};
+//# sourceMappingURL=ImagePanel.js.map

package/dist/react/core/widgets/ImagePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePanel.js","sources":["../../../../src/react/core/widgets/ImagePanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - ImagePanel Component\n *\n * Reusable chrome around `<ImageFrame>` for sensor/CCD-style image\n * surfaces. Adds the bits every imaging panel needs but `<ImageFrame>`\n * intentionally doesn't:\n *\n *   - **Refresh button** with disabled / busy states.\n *   - **Error banner** when the upstream capture failed.\n *   - **Title strip + frame** in a single bordered card.\n *\n * Like `<ImageFrame>`, this component is **purely presentational** —\n * it knows nothing about where the data came from. Callers wire up the\n * I/O (engine, file, websocket) and feed:\n *\n *   - `data` / `pixels` / `width` / `maxADU` / `colormap` → forwarded\n *     to `<ImageFrame>` unchanged.\n *   - `onRefresh` → click handler for the button.\n *   - `loading` → toggles the button's \"Capturing…\" label AND the\n *     frame's skeleton state when there's no frame yet.\n *   - `error` → renders a red strip above the frame.\n *\n * The component handles the common refresh-disabled-while-loading\n * pattern internally so callers don't have to compute it.\n *\n * @example\n * ```tsx\n * <ImagePanel\n *   title=\"CCD capture\"\n *   data={samples}\n *   width={28}\n *   maxADU={65535}\n *   loading={busy}\n *   error={err}\n *   onRefresh={capture}\n *   refreshDisabled={!ccd}\n *   emptyMessage=\"No frame captured yet.\"\n * />\n * ```\n */\n\nimport React, { memo } from 'react';\nimport { useTheme } from '../../theme';\nimport { classNames } from '../../utils';\nimport { ImageFrame, type ImageColormap } from './ImageFrame';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface ImagePanelProps {\n  // -- Frame inputs (forwarded to <ImageFrame>) ----------------------------\n  /** Flat, row-major single-channel samples. Length must equal width*height. */\n  data?: number[];\n  /** Pre-decoded RGBA pixels — escape hatch for callers with their own buffer. */\n  pixels?: Uint8ClampedArray;\n  /** Frame width in pixels. */\n  width: number;\n  /** Frame height in pixels. Defaults to `width` (square). */\n  height?: number;\n  /** Saturation ceiling used to normalise `data` → [0,1]. Default 65535. */\n  maxADU?: number;\n  /** Colormap applied to normalised intensities. Default 'cividis'. */\n  colormap?: ImageColormap;\n  /** Show the raw sample values as a grid below the image. Default false. */\n  showValues?: boolean;\n  /** Message shown when no frame is available. */\n  emptyMessage?: string;\n\n  // -- Panel chrome --------------------------------------------------------\n  /** Title rendered above the frame. */\n  title?: string;\n  /** True while a capture is in flight. Drives the button label + skeleton. */\n  loading?: boolean;\n  /** Error from the upstream capture. Rendered as a red banner above the frame. */\n  error?: string | null;\n  /** Click handler for the refresh button. Omit to hide the button entirely. */\n  onRefresh?: () => void;\n  /** Label for the idle refresh button. Default 'Refresh'. */\n  refreshLabel?: string;\n  /** Label while `loading` is true. Default 'Capturing…'. */\n  refreshingLabel?: string;\n  /**\n   * Disable the refresh button even when not loading — e.g. when the\n   * caller has no data source bound (no CCD selected). The button is\n   * always disabled while `loading` is true regardless of this prop.\n   */\n  refreshDisabled?: boolean;\n  /** Extra class name applied to the outer wrapper. */\n  className?: string;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const ImagePanel = memo(function ImagePanel({\n  // frame\n  data,\n  pixels,\n  width,\n  height,\n  maxADU,\n  colormap,\n  showValues,\n  emptyMessage,\n  // chrome\n  title,\n  loading = false,\n  error = null,\n  onRefresh,\n  refreshLabel = 'Refresh',\n  refreshingLabel = 'Capturing…',\n  refreshDisabled = false,\n  className = '',\n}: ImagePanelProps): React.ReactElement {\n  const { tokens } = useTheme();\n\n  // Button is disabled while loading OR when caller explicitly disables it\n  // (e.g. no source bound yet). Coalesced here so callers don't repeat the\n  // `loading || refreshDisabled` pattern.\n  const buttonDisabled = loading || refreshDisabled;\n\n  // Skeleton state inside ImageFrame should fire only while loading AND\n  // there's nothing to show yet — once we have data, repeat captures\n  // refresh in-place without flashing the skeleton.\n  const hasFrame = Array.isArray(data) || pixels instanceof Uint8ClampedArray;\n  const frameLoading = loading && !hasFrame;\n\n  return (\n    <div\n      data-testid=\"image-panel\"\n      className={classNames('zendir-image-panel', className)}\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        gap: tokens.spacing.sm,\n        fontFamily: tokens.typography.fontFamily.primary,\n      }}\n    >\n      {onRefresh && (\n        <button\n          type=\"button\"\n          data-testid=\"image-panel-refresh\"\n          onClick={onRefresh}\n          disabled={buttonDisabled}\n          aria-busy={loading ? 'true' : 'false'}\n          style={{\n            alignSelf: 'flex-start',\n            padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n            borderRadius: tokens.borderRadius.sm,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            background: buttonDisabled\n              ? 'rgba(255,255,255,0.03)'\n              : 'rgba(255,255,255,0.08)',\n            color: buttonDisabled ? tokens.colors.text.tertiary : tokens.colors.text.primary,\n            cursor: buttonDisabled ? 'default' : 'pointer',\n            fontSize: tokens.typography.fontSize.xs,\n            fontFamily: tokens.typography.fontFamily.primary,\n            // Make the disabled state visually consistent across browsers.\n            opacity: buttonDisabled ? 0.85 : 1,\n          }}\n        >\n          {loading ? refreshingLabel : refreshLabel}\n        </button>\n      )}\n\n      {error && (\n        <div\n          data-testid=\"image-panel-error\"\n          role=\"alert\"\n          style={{\n            color: tokens.colors.status.critical,\n            fontSize: tokens.typography.fontSize.xs,\n            background: 'rgba(255, 56, 56, 0.08)',\n            border: `1px solid ${tokens.colors.status.critical}33`,\n            borderRadius: tokens.borderRadius.sm,\n            padding: `${tokens.spacing.xs}px ${tokens.spacing.sm}px`,\n            wordBreak: 'break-word',\n          }}\n        >\n          {error}\n        </div>\n      )}\n\n      <ImageFrame\n        data={data}\n        pixels={pixels}\n        width={width}\n        height={height}\n        maxADU={maxADU}\n        colormap={colormap}\n        showValues={showValues}\n        title={title}\n        loading={frameLoading}\n        emptyMessage={emptyMessage}\n      />\n    </div>\n  );\n});\n\nexport default ImagePanel;\n"],"names":["ImagePanel"],"mappings":";;;;;AAgGO,MAAM,aAAa,KAAK,SAASA,YAAW;AAAA;AAAA,EAEjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,YAAY;AACd,GAAwC;AACtC,QAAM,EAAE,OAAA,IAAW,SAAA;AAKnB,QAAM,iBAAiB,WAAW;AAKlC,QAAM,WAAW,MAAM,QAAQ,IAAI,KAAK,kBAAkB;AAC1D,QAAM,eAAe,WAAW,CAAC;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAW,WAAW,sBAAsB,SAAS;AAAA,MACrD,OAAO;AAAA,QACL,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK,OAAO,QAAQ;AAAA,QACpB,YAAY,OAAO,WAAW,WAAW;AAAA,MAAA;AAAA,MAG1C,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,eAAY;AAAA,YACZ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,aAAW,UAAU,SAAS;AAAA,YAC9B,OAAO;AAAA,cACL,WAAW;AAAA,cACX,SAAS,GAAG,OAAO,QAAQ,EAAE,MAAM,OAAO,QAAQ,EAAE;AAAA,cACpD,cAAc,OAAO,aAAa;AAAA,cAClC,QAAQ,aAAa,OAAO,OAAO,OAAO,KAAK;AAAA,cAC/C,YAAY,iBACR,2BACA;AAAA,cACJ,OAAO,iBAAiB,OAAO,OAAO,KAAK,WAAW,OAAO,OAAO,KAAK;AAAA,cACzE,QAAQ,iBAAiB,YAAY;AAAA,cACrC,UAAU,OAAO,WAAW,SAAS;AAAA,cACrC,YAAY,OAAO,WAAW,WAAW;AAAA;AAAA,cAEzC,SAAS,iBAAiB,OAAO;AAAA,YAAA;AAAA,YAGlC,oBAAU,kBAAkB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIhC,SACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,MAAK;AAAA,YACL,OAAO;AAAA,cACL,OAAO,OAAO,OAAO,OAAO;AAAA,cAC5B,UAAU,OAAO,WAAW,SAAS;AAAA,cACrC,YAAY;AAAA,cACZ,QAAQ,aAAa,OAAO,OAAO,OAAO,QAAQ;AAAA,cAClD,cAAc,OAAO,aAAa;AAAA,cAClC,SAAS,GAAG,OAAO,QAAQ,EAAE,MAAM,OAAO,QAAQ,EAAE;AAAA,cACpD,WAAW;AAAA,YAAA;AAAA,YAGZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAIL;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,SAAS;AAAA,YACT;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/react/index.d.ts

@@ -14,11 +14,11 @@
  * Note: `zendir-ts` (the Zendir TypeScript SDK) is optional. All types are
  * provided locally. Install `zendir-ts` for API client functionality.
  */
-export { Icon, getIconNames, isValidIconName, Button, Input, Select, Toggle, Checkbox, Tooltip, Dialog, Badge, Container, Tabs, Pagination, GlassCard, GLASS_COLOR_OVERLAYS, DataValue, DataValueGroup, MessageStream, AppBar, ColorPickerPanel, getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, NumberInput, SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, ToastProvider, useToast, useToastManager, Popover, Menu, Box, Flex, Grid, Stack, HStack, VStack, Center, Spacer, Divider, useBreakpoint, BREAKPOINTS, resolveResponsive, resolveSpacing, ConfirmDialog, ConfirmProvider, useConfirm, PinInput, CopyButton, useCopyToClipboard, DataTable, DataTableRowDetail, ImageGallery, ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ConnectionForm, SidePanel, HexViewer, REGION_COLORS, REGION_BORDER_COLORS, LimitsBar, LogViewer, PacketViewer, CommandBuilder, FileExplorer, MissionCalendar, ActivityPlanner, Typography, Display1, Display2, H1, H2, H3, H4, H5, H6, Body1, Body2, Body3, Compact, Micro, Mono, DataText, Label, FONT_FAMILY_PRIMARY, FONT_FAMILY_MONO, FONT_WEIGHTS, CardHeader, HeaderIconWithStatus, Capture, useCapture, loadCapturePlaceholderImage, } from './core';
+export { Icon, getIconNames, isValidIconName, Button, Input, Select, Toggle, Checkbox, Tooltip, Dialog, Badge, Container, Tabs, Pagination, GlassCard, GLASS_COLOR_OVERLAYS, DataValue, DataValueGroup, MessageStream, AppBar, ColorPickerPanel, getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, NumberInput, SideNav, SIDENAV_HEADER_LOGO_SLOT_HEIGHT_PX, ToastProvider, useToast, useToastManager, Popover, Menu, Box, Flex, Grid, Stack, HStack, VStack, Center, Spacer, Divider, useBreakpoint, BREAKPOINTS, resolveResponsive, resolveSpacing, ConfirmDialog, ConfirmProvider, useConfirm, PinInput, CopyButton, useCopyToClipboard, DataTable, DataTableRowDetail, ImageGallery, ImageFrame, decodeImage, ImagePanel, ChatPanel, parseChatResponse, createChatResponseParser, parseMcpToolResult, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ConnectionForm, SidePanel, HexViewer, REGION_COLORS, REGION_BORDER_COLORS, LimitsBar, LogViewer, PacketViewer, CommandBuilder, FileExplorer, MissionCalendar, ActivityPlanner, Typography, Display1, Display2, H1, H2, H3, H4, H5, H6, Body1, Body2, Body3, Compact, Micro, Mono, DataText, Label, FONT_FAMILY_PRIMARY, FONT_FAMILY_MONO, FONT_WEIGHTS, CardHeader, HeaderIconWithStatus, Capture, useCapture, loadCapturePlaceholderImage, } from './core';
 export { ecefMetersToSdkPosition, ecefEulerXyzToHpr } from './3d';
 export { ZenSpace3D, useSimulationScene } from './3d';
 export type { ZenSpace3DProps, ZenSpace3DHandle, UseSimulationSceneOptions, UseSimulationSceneResult, SimulationSceneClient, SimulationSceneObject, StructureDiag, PositionTickDiag, } from './3d';
-export type { NumberInputProps, NumberInputSize, SliderStatus, StatusThresholds, SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps, ToastOptions, ToastStatus, ToastPosition, ToastProviderProps, PopoverProps, PopoverPlacement, MenuProps, MenuItemProps, BoxProps, FlexProps, GridProps, StackProps, CenterProps, SpacerProps, DividerProps, Breakpoint, ResponsiveValue, SpacingToken, ConfirmDialogProps, ConfirmOptions, ConfirmStatus, PinInputProps, CopyButtonProps, UseCopyToClipboardReturn, DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField, ImageGalleryProps, GalleryImage, ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult, ConnectionFormProps, ConnectionConfig, SidePanelProps, SidePanelPosition, HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness, LimitsBarProps, LimitsState, LogViewerProps, LogEntry, LogSeverity, PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode, CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry, FileExplorerProps, FileNode, FileViewMode, FileSortBy, MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, ActivityPlannerProps, ActivityFormData, TypographyProps, TypographyVariant, TypographyElement, TypographyColor, CardHeaderProps, HeaderIconWithStatusProps, IconProps, IconName, ButtonProps, ButtonVariant, ButtonSize, InputProps, InputSize, LabelPlacement, SelectProps, SelectOption, ToggleProps, CheckboxProps, TooltipProps, TooltipPlacement, DialogProps, DialogActionsProps, DialogSize, BadgeProps, BadgeVariant, BadgeSize, ContainerProps, ContainerVariant, ContainerPadding, TabsProps, TabsListProps, TabProps, TabsPanelProps, PaginationProps, GlassCardProps, GlassColorOverlay, DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize, MessageStreamProps, StreamMessage, AppBarProps, AppBarBranding, ColorPickerPanelProps, PropertyConfig, PropertyKey, PropertyCategory, GlassAccentPosition, CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './core';
+export type { NumberInputProps, NumberInputSize, SliderStatus, StatusThresholds, SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps, ToastOptions, ToastStatus, ToastPosition, ToastProviderProps, PopoverProps, PopoverPlacement, MenuProps, MenuItemProps, BoxProps, FlexProps, GridProps, StackProps, CenterProps, SpacerProps, DividerProps, Breakpoint, ResponsiveValue, SpacingToken, ConfirmDialogProps, ConfirmOptions, ConfirmStatus, PinInputProps, CopyButtonProps, UseCopyToClipboardReturn, DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField, ImageGalleryProps, GalleryImage, ImageFrameProps, ImageColormap, ImagePanelProps, ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult, ConnectionFormProps, ConnectionConfig, SidePanelProps, SidePanelPosition, HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness, LimitsBarProps, LimitsState, LogViewerProps, LogEntry, LogSeverity, PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode, CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry, FileExplorerProps, FileNode, FileViewMode, FileSortBy, MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, ActivityPlannerProps, ActivityFormData, TypographyProps, TypographyVariant, TypographyElement, TypographyColor, CardHeaderProps, HeaderIconWithStatusProps, IconProps, IconName, ButtonProps, ButtonVariant, ButtonSize, InputProps, InputSize, LabelPlacement, SelectProps, SelectOption, ToggleProps, CheckboxProps, TooltipProps, TooltipPlacement, DialogProps, DialogActionsProps, DialogSize, BadgeProps, BadgeVariant, BadgeSize, ContainerProps, ContainerVariant, ContainerPadding, TabsProps, TabsListProps, TabProps, TabsPanelProps, PaginationProps, GlassCardProps, GlassColorOverlay, DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize, MessageStreamProps, StreamMessage, AppBarProps, AppBarBranding, ColorPickerPanelProps, PropertyConfig, PropertyKey, PropertyCategory, GlassAccentPosition, CaptureProps, CaptureHandle, CaptureRequest, CaptureArgs, CapturedImage, UseCaptureOptions, UseCaptureResult, } from './core';
 export { ThemeProvider, useTheme, useThemeTokens, useScrollbarStyles, CardAccentProvider, useCardAccent, getSystemAccentColor, getAccentColorOptions, CARD_ACCENT_COLORS, SPACE_SYSTEM_COLORS, } from './theme';
 export type { ThemeProviderProps, ThemeContextValue, ThemeVariant, ThemeMode, ThemeTokens, ThemeColors, ThemeAnimation, ThemeFocus, LayoutTokens, BorderTokens, CardAccentKey, CardAccentColor, CardAccentContextValue, CardAccentProviderProps, } from './theme';
 export { DisplaySettingsProvider, useDisplaySettings, useDisplaySettingsOptional, getEffectiveCompactMode, PRESET_COLORS, GLASS_TINTS, } from './context';

package/dist/react.js

@@ -37,6 +37,8 @@ import { PinInput } from "./react/core/inputs/PinInput.js";
 import { CopyButton, useCopyToClipboard } from "./react/core/display/CopyButton.js";
 import { DataTable, DataTableRowDetail } from "./react/core/data/DataTable.js";
 import { ImageGallery } from "./react/core/widgets/ImageGallery.js";
+import { ImageFrame, decodeImage } from "./react/core/widgets/ImageFrame.js";
+import { ImagePanel } from "./react/core/widgets/ImagePanel.js";
 import { CHAT_RESPONSE_JSON_PROMPT, CHAT_RESPONSE_MCP_TOOL, CHAT_RESPONSE_TOOL_SCHEMA, CHAT_RESPONSE_YAML_PROMPT, CHAT_STATUS_RULES_PROMPT, ChatPanel, createChatResponseParser, parseChatResponse, parseMcpToolResult } from "./react/core/widgets/ChatPanel.js";
 import { ConnectionForm } from "./react/core/widgets/ConnectionForm.js";
 import { SidePanel } from "./react/core/overlays/SidePanel.js";
@@ -143,7 +145,9 @@ export {
   HeaderIconWithStatus,
   HexViewer,
   Icon,
+  ImageFrame,
   ImageGallery,
+  ImagePanel,
   Input,
   Label,
   LayerControlPanel,
@@ -202,6 +206,7 @@ export {
   classNames,
   createChatResponseParser,
   createPropertyConfig,
+  decodeImage,
   deriveBatteryStatus,
   deriveStatus,
   ecefEulerXyzToHpr,

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendir/ui",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "description": "React UI components for space operations, built on the Astro UX Design System",
   "type": "module",
   "main": "./dist/index.js",
@@ -217,9 +217,9 @@
   "devDependencies": {
     "@astrouxds/react": "^7.27.0",
     "@changesets/cli": "^2.27.0",
-    "@size-limit/preset-small-lib": "^12.0.0",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.18.0",
+    "@size-limit/preset-small-lib": "^12.0.0",
     "@storybook/addon-a11y": "8.6.17",
     "@storybook/addon-essentials": "8.6.17",
     "@storybook/addon-interactions": "8.6.17",