@zendir/ui 0.1.0

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

@@ -0,0 +1,108 @@
+/**
+ * @zendir/ui - Core Components
+ *
+ * Foundational UI components following Astro UX Design System.
+ * These are the building blocks for creating space operations interfaces.
+ */
+export { Icon, getIconNames, isValidIconName } from './Icon';
+export type { IconProps, IconName } from './Icon';
+export { AstroIcon, isAstroIconsAvailable, preloadAstroIcons, getIconAliases, isIconAlias, getAstroIconNames, getAllIconNames, ASTRO_ICON_NAMES, } from './AstroIcon';
+export type { AstroIconProps, AstroIconName, AstroIconSize } from './AstroIcon';
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+export { Input } from './Input';
+export type { InputProps, InputSize, LabelPlacement } from './Input';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+export { Tooltip } from './Tooltip';
+export type { TooltipProps, TooltipPlacement } from './Tooltip';
+export { Dialog } from './Dialog';
+export type { DialogProps, DialogActionsProps, DialogSize } from './Dialog';
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge';
+export { Tabs } from './Tabs';
+export type { TabsProps, TabsListProps, TabProps, TabsPanelProps } from './Tabs';
+export { Container } from './Container';
+export type { ContainerProps, ContainerVariant, ContainerPadding } from './Container';
+export { GlassCard, GLASS_COLOR_OVERLAYS } from './GlassCard';
+export type { GlassCardProps, GlassColorOverlay, GlassAccentPosition } from './GlassCard';
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+export { DataValue, DataValueGroup } from './DataValue';
+export type { DataValueProps, DataValueGroupProps, DataValueVariant, DataValueSize } from './DataValue';
+export { HeaderIconWithStatus } from './HeaderIconWithStatus';
+export type { HeaderIconWithStatusProps } from './HeaderIconWithStatus';
+export { CardHeader } from './CardHeader';
+export type { CardHeaderProps } from './CardHeader';
+export { getPropertyConfig, formatPropertyLabel, deriveStatus, deriveBatteryStatus, formatPropertyValue, createPropertyConfig, getPropertiesByCategory, PROPERTY_PRESETS, CATEGORY_ICONS, CATEGORY_LABELS, } from './propertyConfig';
+export type { PropertyConfig, PropertyKey, PropertyCategory, StatusThresholds, } from './propertyConfig';
+export { MessageStream } from './MessageStream';
+export type { MessageStreamProps, StreamMessage } from './MessageStream';
+export { AppBar } from './AppBar';
+export type { AppBarProps, AppBarBranding } from './AppBar';
+export { ColorPickerPanel } from './ColorPickerPanel';
+export type { ColorPickerPanelProps } from './ColorPickerPanel';
+export { 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, } from './Typography';
+export type { TypographyProps, TypographyVariant, TypographyElement, TypographyColor, } from './Typography';
+export { NumberInput } from './NumberInput';
+export type { NumberInputProps, NumberInputSize, SliderStatus } from './NumberInput';
+export { SideNav } from './SideNav';
+export type { SideNavProps, SideNavHeaderProps, SideNavItemProps, SideNavSectionProps, SideNavFooterProps } from './SideNav';
+export { ToastProvider, useToast, useToastManager } from './Toast';
+export type { ToastOptions, ToastStatus, ToastPosition, ToastProviderProps } from './Toast';
+export { Popover, Menu } from './Popover';
+export type { PopoverProps, PopoverPlacement, MenuProps, MenuItemProps } from './Popover';
+export { Box } from './layout/Box';
+export type { BoxProps } from './layout/Box';
+export { Flex } from './layout/Flex';
+export type { FlexProps } from './layout/Flex';
+export { Grid } from './layout/Grid';
+export type { GridProps } from './layout/Grid';
+export { Stack, HStack, VStack } from './layout/Stack';
+export type { StackProps } from './layout/Stack';
+export { Center } from './layout/Center';
+export type { CenterProps } from './layout/Center';
+export { Spacer } from './layout/Spacer';
+export type { SpacerProps } from './layout/Spacer';
+export { Divider } from './layout/Divider';
+export type { DividerProps } from './layout/Divider';
+export { useBreakpoint, BREAKPOINTS } from './layout/useBreakpoint';
+export type { Breakpoint, ResponsiveValue } from './layout/useBreakpoint';
+export { resolveResponsive, resolveSpacing } from './layout/responsive';
+export type { SpacingToken } from './layout/responsive';
+export { ConfirmDialog, ConfirmProvider, useConfirm } from './ConfirmDialog';
+export type { ConfirmDialogProps, ConfirmOptions, ConfirmStatus } from './ConfirmDialog';
+export { PinInput } from './PinInput';
+export type { PinInputProps } from './PinInput';
+export { CopyButton, useCopyToClipboard } from './CopyButton';
+export type { CopyButtonProps, UseCopyToClipboardReturn } from './CopyButton';
+export { DataTable, DataTableRowDetail } from './DataTable';
+export type { DataTableProps, DataTableColumn, DataTableRowDetailProps, DataTableRowDetailField } from './DataTable';
+export { ImageGallery } from './ImageGallery';
+export type { ImageGalleryProps, GalleryImage } from './ImageGallery';
+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 './ChatPanel';
+export type { ChatPanelProps, ChatMessage, ChatBlock, ChatBlockEvent, ChatBlockAlert, ChatBlockTelemetry, ChatBlockProgress, ChatBlockTable, ChatBlockActions, ChatBlockChoice, ChatBlockConfirm, ChatBlockCommand, ChatBlockKV, ChatResponseFormat, ChatResponsePayload, ChatResponseParserOptions, McpToolContent, McpToolResult } from './ChatPanel';
+export { ConnectionForm } from './ConnectionForm';
+export type { ConnectionFormProps, ConnectionConfig } from './ConnectionForm';
+export { SidePanel } from './SidePanel';
+export type { SidePanelProps, SidePanelPosition } from './SidePanel';
+export { HexViewer, REGION_COLORS, REGION_BORDER_COLORS } from './HexViewer';
+export type { HexViewerProps, HexHighlight, HexRegion, DecodedField, PacketHeaderEntry, ByteGrouping, OffsetBase, Endianness } from './HexViewer';
+export { LimitsBar } from './LimitsBar';
+export type { LimitsBarProps, LimitsState } from './LimitsBar';
+export { LogViewer } from './LogViewer';
+export type { LogViewerProps, LogEntry, LogSeverity } from './LogViewer';
+export { PacketViewer } from './PacketViewer';
+export type { PacketViewerProps, PacketItem, PacketItemLimits, PacketItemLimitsState, PacketViewMode } from './PacketViewer';
+export { CommandBuilder } from './CommandBuilder';
+export type { CommandBuilderProps, CommandParameter, CommandParamType, CommandHistoryEntry } from './CommandBuilder';
+export { FileExplorer } from './FileExplorer';
+export type { FileExplorerProps, FileNode, FileViewMode, FileSortBy } from './FileExplorer';
+export { MissionCalendar } from './MissionCalendar';
+export type { MissionCalendarProps, CalendarEvent, CalendarTimeline, CalendarViewMode, ActivityStatus, ActivityType, } from './MissionCalendar';
+export { ActivityPlanner } from './ActivityPlanner';
+export type { ActivityPlannerProps, ActivityFormData, } from './ActivityPlanner';

package/dist/react/core/layout/Box.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from './useBreakpoint';
+import { SpacingToken } from './responsive';
+
+type SpacingInput = SpacingToken | string | number;
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Element type to render */
+    as?: React.ElementType;
+    /** Padding (all sides) */
+    padding?: ResponsiveValue<SpacingInput>;
+    /** Shorthand alias for padding */
+    p?: ResponsiveValue<SpacingInput>;
+    /** Padding horizontal (left + right) */
+    px?: ResponsiveValue<SpacingInput>;
+    /** Padding vertical (top + bottom) */
+    py?: ResponsiveValue<SpacingInput>;
+    /** Padding top */
+    pt?: ResponsiveValue<SpacingInput>;
+    /** Padding right */
+    pr?: ResponsiveValue<SpacingInput>;
+    /** Padding bottom */
+    pb?: ResponsiveValue<SpacingInput>;
+    /** Padding left */
+    pl?: ResponsiveValue<SpacingInput>;
+    /** Margin (all sides) */
+    margin?: ResponsiveValue<SpacingInput>;
+    /** Shorthand alias for margin */
+    m?: ResponsiveValue<SpacingInput>;
+    /** Margin horizontal (left + right) */
+    mx?: ResponsiveValue<SpacingInput>;
+    /** Margin vertical (top + bottom) */
+    my?: ResponsiveValue<SpacingInput>;
+    /** Margin top */
+    mt?: ResponsiveValue<SpacingInput>;
+    /** Margin right */
+    mr?: ResponsiveValue<SpacingInput>;
+    /** Margin bottom */
+    mb?: ResponsiveValue<SpacingInput>;
+    /** Margin left */
+    ml?: ResponsiveValue<SpacingInput>;
+    /** Background color: 'base' | 'surface' | 'elevated' | 'overlay' | custom CSS color */
+    background?: string;
+    /** Border: true for default border, or custom CSS border */
+    border?: boolean | string;
+    /** Border radius token or CSS value */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
+    /** Box shadow token or CSS value */
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;
+    /** CSS display property */
+    display?: ResponsiveValue<string>;
+    /** CSS width */
+    width?: ResponsiveValue<string | number>;
+    /** CSS height */
+    height?: ResponsiveValue<string | number>;
+    /** CSS min-width */
+    minWidth?: string | number;
+    /** CSS min-height */
+    minHeight?: string | number;
+    /** CSS max-width */
+    maxWidth?: string | number;
+    /** CSS max-height */
+    maxHeight?: string | number;
+    /** CSS overflow */
+    overflow?: string;
+    /** CSS position */
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    /** CSS flex property */
+    flex?: string | number;
+    /** CSS flex-grow */
+    flexGrow?: number;
+    /** CSS flex-shrink */
+    flexShrink?: number;
+    /** Children */
+    children?: React.ReactNode;
+}
+export declare const Box: React.MemoExoticComponent<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>>;
+export default Box;

package/dist/react/core/layout/Box.js

@@ -0,0 +1,126 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { resolveResponsive, resolveResponsiveSpacing } from "./responsive.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
+const Box = memo(forwardRef(function Box2({
+  as: Component = "div",
+  padding,
+  p,
+  px,
+  py,
+  pt,
+  pr,
+  pb,
+  pl,
+  margin,
+  m,
+  mx,
+  my,
+  mt,
+  mr,
+  mb,
+  ml,
+  background,
+  border,
+  borderRadius,
+  shadow,
+  display,
+  width,
+  height,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+  overflow,
+  position,
+  flex,
+  flexGrow,
+  flexShrink,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const { tokens } = useTheme();
+  const { breakpoint } = useBreakpoint();
+  const resolve = (val) => resolveResponsiveSpacing(val, breakpoint, tokens);
+  const paddingAll = resolve(padding ?? p);
+  const paddingX = resolve(px);
+  const paddingY = resolve(py);
+  const marginAll = resolve(margin ?? m);
+  const marginX = resolve(mx);
+  const marginY = resolve(my);
+  const resolveBackground = (bg) => {
+    if (!bg) return void 0;
+    const bgMap = {
+      base: tokens.colors.background.base,
+      surface: tokens.colors.background.surface,
+      elevated: tokens.colors.background.elevated,
+      overlay: tokens.colors.background.overlay
+    };
+    return bgMap[bg] || bg;
+  };
+  const resolveBorder = (b) => {
+    if (!b) return void 0;
+    if (b === true) return `1px solid ${tokens.colors.border.default}`;
+    return b;
+  };
+  const resolveBorderRadius = (br) => {
+    if (!br) return void 0;
+    if (br in tokens.borderRadius) return tokens.borderRadius[br];
+    return br;
+  };
+  const resolveShadow = (s) => {
+    if (!s) return void 0;
+    if (s in tokens.shadows && s !== "glow") return tokens.shadows[s];
+    return s;
+  };
+  const resolveSize = (val) => {
+    if (val === void 0) return void 0;
+    if (typeof val === "number") return `${val}px`;
+    return val;
+  };
+  const computedStyle = {
+    // Padding
+    ...paddingAll ? { padding: paddingAll } : {},
+    ...paddingX ? { paddingLeft: paddingX, paddingRight: paddingX } : {},
+    ...paddingY ? { paddingTop: paddingY, paddingBottom: paddingY } : {},
+    ...resolve(pt) ? { paddingTop: resolve(pt) } : {},
+    ...resolve(pr) ? { paddingRight: resolve(pr) } : {},
+    ...resolve(pb) ? { paddingBottom: resolve(pb) } : {},
+    ...resolve(pl) ? { paddingLeft: resolve(pl) } : {},
+    // Margin
+    ...marginAll ? { margin: marginAll } : {},
+    ...marginX ? { marginLeft: marginX, marginRight: marginX } : {},
+    ...marginY ? { marginTop: marginY, marginBottom: marginY } : {},
+    ...resolve(mt) ? { marginTop: resolve(mt) } : {},
+    ...resolve(mr) ? { marginRight: resolve(mr) } : {},
+    ...resolve(mb) ? { marginBottom: resolve(mb) } : {},
+    ...resolve(ml) ? { marginLeft: resolve(ml) } : {},
+    // Visual
+    backgroundColor: resolveBackground(background),
+    border: resolveBorder(border),
+    borderRadius: resolveBorderRadius(borderRadius),
+    boxShadow: resolveShadow(shadow),
+    // Layout
+    display: resolveResponsive(display, breakpoint),
+    width: resolveSize(resolveResponsive(width, breakpoint)),
+    height: resolveSize(resolveResponsive(height, breakpoint)),
+    minWidth: resolveSize(minWidth),
+    minHeight: resolveSize(minHeight),
+    maxWidth: resolveSize(maxWidth),
+    maxHeight: resolveSize(maxHeight),
+    overflow,
+    position,
+    flex,
+    flexGrow,
+    flexShrink,
+    // User overrides
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children });
+}));
+export {
+  Box
+};
+//# sourceMappingURL=Box.js.map

package/dist/react/core/layout/Box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Box.js","sources":["../../../../src/react/core/layout/Box.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Box Layout Primitive\r\n * \r\n * The foundational layout building block. A themed <div> with shorthand props\r\n * for padding, margin, background, border, and display properties.\r\n * \r\n * Follows Astro UX spacing tokens (4px grid system).\r\n * All spacing props accept SpacingTokens ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'),\r\n * numbers (px), or CSS strings.\r\n * \r\n * @example\r\n * ```tsx\r\n * <Box padding=\"md\" background=\"surface\">\r\n *   <H3>Section Title</H3>\r\n *   <Body1>Content here</Body1>\r\n * </Box>\r\n * \r\n * <Box padding={['sm', 'md', 'lg']} borderRadius=\"md\">\r\n *   Responsive padding\r\n * </Box>\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef } from 'react';\r\nimport { useTheme } from '../../theme';\r\nimport { useBreakpoint } from './useBreakpoint';\r\nimport { resolveResponsiveSpacing, resolveResponsive } from './responsive';\r\nimport type { ResponsiveValue } from './useBreakpoint';\r\nimport type { SpacingToken } from './responsive';\r\n\r\ntype SpacingInput = SpacingToken | string | number;\r\n\r\nexport interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n  \r\n  // Spacing\r\n  /** Padding (all sides) */\r\n  padding?: ResponsiveValue<SpacingInput>;\r\n  /** Shorthand alias for padding */\r\n  p?: ResponsiveValue<SpacingInput>;\r\n  /** Padding horizontal (left + right) */\r\n  px?: ResponsiveValue<SpacingInput>;\r\n  /** Padding vertical (top + bottom) */\r\n  py?: ResponsiveValue<SpacingInput>;\r\n  /** Padding top */\r\n  pt?: ResponsiveValue<SpacingInput>;\r\n  /** Padding right */\r\n  pr?: ResponsiveValue<SpacingInput>;\r\n  /** Padding bottom */\r\n  pb?: ResponsiveValue<SpacingInput>;\r\n  /** Padding left */\r\n  pl?: ResponsiveValue<SpacingInput>;\r\n  /** Margin (all sides) */\r\n  margin?: ResponsiveValue<SpacingInput>;\r\n  /** Shorthand alias for margin */\r\n  m?: ResponsiveValue<SpacingInput>;\r\n  /** Margin horizontal (left + right) */\r\n  mx?: ResponsiveValue<SpacingInput>;\r\n  /** Margin vertical (top + bottom) */\r\n  my?: ResponsiveValue<SpacingInput>;\r\n  /** Margin top */\r\n  mt?: ResponsiveValue<SpacingInput>;\r\n  /** Margin right */\r\n  mr?: ResponsiveValue<SpacingInput>;\r\n  /** Margin bottom */\r\n  mb?: ResponsiveValue<SpacingInput>;\r\n  /** Margin left */\r\n  ml?: ResponsiveValue<SpacingInput>;\r\n  \r\n  // Visual\r\n  /** Background color: 'base' | 'surface' | 'elevated' | 'overlay' | custom CSS color */\r\n  background?: string;\r\n  /** Border: true for default border, or custom CSS border */\r\n  border?: boolean | string;\r\n  /** Border radius token or CSS value */\r\n  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;\r\n  /** Box shadow token or CSS value */\r\n  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | string;\r\n  \r\n  // Layout\r\n  /** CSS display property */\r\n  display?: ResponsiveValue<string>;\r\n  /** CSS width */\r\n  width?: ResponsiveValue<string | number>;\r\n  /** CSS height */\r\n  height?: ResponsiveValue<string | number>;\r\n  /** CSS min-width */\r\n  minWidth?: string | number;\r\n  /** CSS min-height */\r\n  minHeight?: string | number;\r\n  /** CSS max-width */\r\n  maxWidth?: string | number;\r\n  /** CSS max-height */\r\n  maxHeight?: string | number;\r\n  /** CSS overflow */\r\n  overflow?: string;\r\n  /** CSS position */\r\n  position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';\r\n  /** CSS flex property */\r\n  flex?: string | number;\r\n  /** CSS flex-grow */\r\n  flexGrow?: number;\r\n  /** CSS flex-shrink */\r\n  flexShrink?: number;\r\n  \r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Box = memo(forwardRef<HTMLDivElement, BoxProps>(function Box(\r\n  {\r\n    as: Component = 'div',\r\n    padding, p, px, py, pt, pr, pb, pl,\r\n    margin, m, mx, my, mt, mr, mb, ml,\r\n    background,\r\n    border,\r\n    borderRadius,\r\n    shadow,\r\n    display,\r\n    width,\r\n    height,\r\n    minWidth,\r\n    minHeight,\r\n    maxWidth,\r\n    maxHeight,\r\n    overflow,\r\n    position,\r\n    flex,\r\n    flexGrow,\r\n    flexShrink,\r\n    style,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref\r\n): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  const { breakpoint } = useBreakpoint();\r\n  \r\n  const resolve = (val: ResponsiveValue<SpacingInput> | undefined) =>\r\n    resolveResponsiveSpacing(val, breakpoint, tokens);\r\n  \r\n  // Resolve padding (p is alias for padding)\r\n  const paddingAll = resolve(padding ?? p);\r\n  const paddingX = resolve(px);\r\n  const paddingY = resolve(py);\r\n  \r\n  // Resolve margin (m is alias for margin)\r\n  const marginAll = resolve(margin ?? m);\r\n  const marginX = resolve(mx);\r\n  const marginY = resolve(my);\r\n  \r\n  // Background color resolution\r\n  const resolveBackground = (bg: string | undefined): string | undefined => {\r\n    if (!bg) return undefined;\r\n    const bgMap: Record<string, string> = {\r\n      base: tokens.colors.background.base,\r\n      surface: tokens.colors.background.surface,\r\n      elevated: tokens.colors.background.elevated,\r\n      overlay: tokens.colors.background.overlay,\r\n    };\r\n    return bgMap[bg] || bg;\r\n  };\r\n  \r\n  // Border resolution\r\n  const resolveBorder = (b: boolean | string | undefined): string | undefined => {\r\n    if (!b) return undefined;\r\n    if (b === true) return `1px solid ${tokens.colors.border.default}`;\r\n    return b;\r\n  };\r\n  \r\n  // Border radius resolution\r\n  const resolveBorderRadius = (br: string | undefined): string | undefined => {\r\n    if (!br) return undefined;\r\n    if (br in tokens.borderRadius) return tokens.borderRadius[br as keyof typeof tokens.borderRadius];\r\n    return br;\r\n  };\r\n  \r\n  // Shadow resolution\r\n  const resolveShadow = (s: string | undefined): string | undefined => {\r\n    if (!s) return undefined;\r\n    if (s in tokens.shadows && s !== 'glow') return tokens.shadows[s as keyof Omit<typeof tokens.shadows, 'glow'>];\r\n    return s;\r\n  };\r\n  \r\n  // Size resolution (number → px)\r\n  const resolveSize = (val: string | number | undefined): string | undefined => {\r\n    if (val === undefined) return undefined;\r\n    if (typeof val === 'number') return `${val}px`;\r\n    return val;\r\n  };\r\n  \r\n  const computedStyle: React.CSSProperties = {\r\n    // Padding\r\n    ...(paddingAll ? { padding: paddingAll } : {}),\r\n    ...(paddingX ? { paddingLeft: paddingX, paddingRight: paddingX } : {}),\r\n    ...(paddingY ? { paddingTop: paddingY, paddingBottom: paddingY } : {}),\r\n    ...(resolve(pt) ? { paddingTop: resolve(pt) } : {}),\r\n    ...(resolve(pr) ? { paddingRight: resolve(pr) } : {}),\r\n    ...(resolve(pb) ? { paddingBottom: resolve(pb) } : {}),\r\n    ...(resolve(pl) ? { paddingLeft: resolve(pl) } : {}),\r\n    \r\n    // Margin\r\n    ...(marginAll ? { margin: marginAll } : {}),\r\n    ...(marginX ? { marginLeft: marginX, marginRight: marginX } : {}),\r\n    ...(marginY ? { marginTop: marginY, marginBottom: marginY } : {}),\r\n    ...(resolve(mt) ? { marginTop: resolve(mt) } : {}),\r\n    ...(resolve(mr) ? { marginRight: resolve(mr) } : {}),\r\n    ...(resolve(mb) ? { marginBottom: resolve(mb) } : {}),\r\n    ...(resolve(ml) ? { marginLeft: resolve(ml) } : {}),\r\n    \r\n    // Visual\r\n    backgroundColor: resolveBackground(background),\r\n    border: resolveBorder(border),\r\n    borderRadius: resolveBorderRadius(borderRadius),\r\n    boxShadow: resolveShadow(shadow),\r\n    \r\n    // Layout\r\n    display: resolveResponsive(display, breakpoint),\r\n    width: resolveSize(resolveResponsive(width, breakpoint)),\r\n    height: resolveSize(resolveResponsive(height, breakpoint)),\r\n    minWidth: resolveSize(minWidth),\r\n    minHeight: resolveSize(minHeight),\r\n    maxWidth: resolveSize(maxWidth),\r\n    maxHeight: resolveSize(maxHeight),\r\n    overflow,\r\n    position,\r\n    flex,\r\n    flexGrow,\r\n    flexShrink,\r\n    \r\n    // User overrides\r\n    ...style,\r\n  };\r\n  \r\n  return (\r\n    <Component ref={ref} style={computedStyle} {...rest}>\r\n      {children}\r\n    </Component>\r\n  );\r\n}));\r\n\r\nexport default Box;\r\n"],"names":["Box"],"mappings":"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"}

package/dist/react/core/layout/Center.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+
+export interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Element type to render */
+    as?: React.ElementType;
+    /** Width (CSS value or number for px) */
+    width?: string | number;
+    /** Height (CSS value or number for px) */
+    height?: string | number;
+    /** Max width constraint */
+    maxWidth?: string | number;
+    /** Also center text */
+    textAlign?: boolean;
+    /** Inline-flex instead of flex */
+    inline?: boolean;
+    /** Children */
+    children?: React.ReactNode;
+}
+export declare const Center: React.MemoExoticComponent<React.ForwardRefExoticComponent<CenterProps & React.RefAttributes<HTMLDivElement>>>;
+export default Center;

package/dist/react/core/layout/Center.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, forwardRef } from "react";
+const Center = memo(forwardRef(function Center2({
+  as: Component = "div",
+  width,
+  height,
+  maxWidth,
+  textAlign = false,
+  inline = false,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const resolveSize = (val) => {
+    if (val === void 0) return void 0;
+    if (typeof val === "number") return `${val}px`;
+    return val;
+  };
+  const computedStyle = {
+    display: inline ? "inline-flex" : "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: resolveSize(width),
+    height: resolveSize(height),
+    maxWidth: resolveSize(maxWidth),
+    textAlign: textAlign ? "center" : void 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Component, { ref, style: computedStyle, ...rest, children });
+}));
+export {
+  Center
+};
+//# sourceMappingURL=Center.js.map

package/dist/react/core/layout/Center.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Center.js","sources":["../../../../src/react/core/layout/Center.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Center Layout Primitive\r\n * \r\n * Centers content horizontally and vertically using flexbox.\r\n * Common in operator dashboards for loading states, empty states, and hero sections.\r\n * \r\n * @example\r\n * ```tsx\r\n * <Center height=\"100vh\">\r\n *   <VStack spacing=\"md\" align=\"center\">\r\n *     <Icon name=\"satellite\" size={64} />\r\n *     <H2>No Telemetry Data</H2>\r\n *     <Body2>Connect to a spacecraft to begin monitoring.</Body2>\r\n *     <Button>Connect</Button>\r\n *   </VStack>\r\n * </Center>\r\n * ```\r\n */\r\n\r\nimport React, { memo, forwardRef } from 'react';\r\n\r\nexport interface CenterProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Element type to render */\r\n  as?: React.ElementType;\r\n  /** Width (CSS value or number for px) */\r\n  width?: string | number;\r\n  /** Height (CSS value or number for px) */\r\n  height?: string | number;\r\n  /** Max width constraint */\r\n  maxWidth?: string | number;\r\n  /** Also center text */\r\n  textAlign?: boolean;\r\n  /** Inline-flex instead of flex */\r\n  inline?: boolean;\r\n  /** Children */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nexport const Center = memo(forwardRef<HTMLDivElement, CenterProps>(function Center(\r\n  {\r\n    as: Component = 'div',\r\n    width,\r\n    height,\r\n    maxWidth,\r\n    textAlign = false,\r\n    inline = false,\r\n    style,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref\r\n): React.ReactElement {\r\n  const resolveSize = (val: string | number | undefined): string | undefined => {\r\n    if (val === undefined) return undefined;\r\n    if (typeof val === 'number') return `${val}px`;\r\n    return val;\r\n  };\r\n\r\n  const computedStyle: React.CSSProperties = {\r\n    display: inline ? 'inline-flex' : 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: resolveSize(width),\r\n    height: resolveSize(height),\r\n    maxWidth: resolveSize(maxWidth),\r\n    textAlign: textAlign ? 'center' : undefined,\r\n    ...style,\r\n  };\r\n\r\n  return (\r\n    <Component ref={ref} style={computedStyle} {...rest}>\r\n      {children}\r\n    </Component>\r\n  );\r\n}));\r\n\r\nexport default Center;\r\n"],"names":["Center"],"mappings":";;AAsCO,MAAM,SAAS,KAAK,WAAwC,SAASA,QAC1E;AAAA,EACE,IAAI,YAAY;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACoB;AACpB,QAAM,cAAc,CAAC,QAAyD;AAC5E,QAAI,QAAQ,OAAW,QAAO;AAC9B,QAAI,OAAO,QAAQ,SAAU,QAAO,GAAG,GAAG;AAC1C,WAAO;AAAA,EACT;AAEA,QAAM,gBAAqC;AAAA,IACzC,SAAS,SAAS,gBAAgB;AAAA,IAClC,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,OAAO,YAAY,KAAK;AAAA,IACxB,QAAQ,YAAY,MAAM;AAAA,IAC1B,UAAU,YAAY,QAAQ;AAAA,IAC9B,WAAW,YAAY,WAAW;AAAA,IAClC,GAAG;AAAA,EAAA;AAGL,6BACG,WAAA,EAAU,KAAU,OAAO,eAAgB,GAAG,MAC5C,UACH;AAEJ,CAAC,CAAC;"}

package/dist/react/core/layout/Divider.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Divider orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Optional centered label text */
+    label?: string;
+    /** Spacing around the divider (CSS value) */
+    spacing?: string;
+    /** Color override */
+    color?: string;
+    /** Dashed style */
+    dashed?: boolean;
+}
+export declare const Divider: React.NamedExoticComponent<DividerProps>;
+export default Divider;

package/dist/react/core/layout/Divider.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { useTheme } from "../../theme/ThemeProvider.js";
+const Divider = memo(function Divider2({
+  orientation = "horizontal",
+  label,
+  spacing,
+  color,
+  dashed = false,
+  style,
+  ...rest
+}) {
+  const { tokens } = useTheme();
+  const lineColor = color || tokens.colors.border.muted;
+  const borderStyle = dashed ? "dashed" : "solid";
+  if (orientation === "vertical") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        style: {
+          width: "1px",
+          alignSelf: "stretch",
+          backgroundColor: lineColor,
+          flexShrink: 0,
+          ...spacing ? { margin: `0 ${spacing}` } : {},
+          ...dashed ? {
+            backgroundColor: "transparent",
+            borderLeft: `1px ${borderStyle} ${lineColor}`
+          } : {},
+          ...style
+        },
+        ...rest
+      }
+    );
+  }
+  if (label) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "separator",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: tokens.spacing.sm,
+          ...spacing ? { margin: `${spacing} 0` } : {},
+          ...style
+        },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("div", { style: {
+            flex: 1,
+            height: "1px",
+            backgroundColor: lineColor,
+            ...dashed ? {
+              backgroundColor: "transparent",
+              borderTop: `1px ${borderStyle} ${lineColor}`
+            } : {}
+          } }),
+          /* @__PURE__ */ jsx("span", { style: {
+            fontSize: tokens.typography.fontSize.xs,
+            fontWeight: tokens.typography.fontWeight.medium,
+            color: tokens.colors.text.tertiary,
+            fontFamily: tokens.typography.fontFamily.primary,
+            letterSpacing: tokens.typography.letterSpacing.wide,
+            textTransform: "uppercase",
+            flexShrink: 0,
+            padding: `0 ${tokens.spacing.xs}`
+          }, children: label }),
+          /* @__PURE__ */ jsx("div", { style: {
+            flex: 1,
+            height: "1px",
+            backgroundColor: lineColor,
+            ...dashed ? {
+              backgroundColor: "transparent",
+              borderTop: `1px ${borderStyle} ${lineColor}`
+            } : {}
+          } })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": "horizontal",
+      style: {
+        width: "100%",
+        height: "1px",
+        backgroundColor: lineColor,
+        flexShrink: 0,
+        ...spacing ? { margin: `${spacing} 0` } : {},
+        ...dashed ? {
+          backgroundColor: "transparent",
+          borderTop: `1px ${borderStyle} ${lineColor}`
+        } : {},
+        ...style
+      },
+      ...rest
+    }
+  );
+});
+export {
+  Divider
+};
+//# sourceMappingURL=Divider.js.map

package/dist/react/core/layout/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../src/react/core/layout/Divider.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Divider\r\n * \r\n * Visual separator line following Astro UX Design System.\r\n * Theme-aware with muted border colors. Supports horizontal and vertical orientation.\r\n * \r\n * @example\r\n * ```tsx\r\n * <VStack spacing=\"md\">\r\n *   <Section1 />\r\n *   <Divider />\r\n *   <Section2 />\r\n * </VStack>\r\n * \r\n * <HStack spacing=\"md\">\r\n *   <Panel1 />\r\n *   <Divider orientation=\"vertical\" />\r\n *   <Panel2 />\r\n * </HStack>\r\n * \r\n * <Divider label=\"OR\" />\r\n * ```\r\n */\r\n\r\nimport React, { memo } from 'react';\r\nimport { useTheme } from '../../theme';\r\n\r\nexport interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Divider orientation */\r\n  orientation?: 'horizontal' | 'vertical';\r\n  /** Optional centered label text */\r\n  label?: string;\r\n  /** Spacing around the divider (CSS value) */\r\n  spacing?: string;\r\n  /** Color override */\r\n  color?: string;\r\n  /** Dashed style */\r\n  dashed?: boolean;\r\n}\r\n\r\nexport const Divider = memo(function Divider({\r\n  orientation = 'horizontal',\r\n  label,\r\n  spacing,\r\n  color,\r\n  dashed = false,\r\n  style,\r\n  ...rest\r\n}: DividerProps): React.ReactElement {\r\n  const { tokens } = useTheme();\r\n  \r\n  const lineColor = color || tokens.colors.border.muted;\r\n  const borderStyle = dashed ? 'dashed' : 'solid';\r\n  \r\n  if (orientation === 'vertical') {\r\n    return (\r\n      <div\r\n        role=\"separator\"\r\n        aria-orientation=\"vertical\"\r\n        style={{\r\n          width: '1px',\r\n          alignSelf: 'stretch',\r\n          backgroundColor: lineColor,\r\n          flexShrink: 0,\r\n          ...(spacing ? { margin: `0 ${spacing}` } : {}),\r\n          ...(dashed ? {\r\n            backgroundColor: 'transparent',\r\n            borderLeft: `1px ${borderStyle} ${lineColor}`,\r\n          } : {}),\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      />\r\n    );\r\n  }\r\n  \r\n  // Horizontal with optional label\r\n  if (label) {\r\n    return (\r\n      <div\r\n        role=\"separator\"\r\n        style={{\r\n          display: 'flex',\r\n          alignItems: 'center',\r\n          gap: tokens.spacing.sm,\r\n          ...(spacing ? { margin: `${spacing} 0` } : {}),\r\n          ...style,\r\n        }}\r\n        {...rest}\r\n      >\r\n        <div style={{\r\n          flex: 1,\r\n          height: '1px',\r\n          backgroundColor: lineColor,\r\n          ...(dashed ? {\r\n            backgroundColor: 'transparent',\r\n            borderTop: `1px ${borderStyle} ${lineColor}`,\r\n          } : {}),\r\n        }} />\r\n        <span style={{\r\n          fontSize: tokens.typography.fontSize.xs,\r\n          fontWeight: tokens.typography.fontWeight.medium,\r\n          color: tokens.colors.text.tertiary,\r\n          fontFamily: tokens.typography.fontFamily.primary,\r\n          letterSpacing: tokens.typography.letterSpacing.wide,\r\n          textTransform: 'uppercase',\r\n          flexShrink: 0,\r\n          padding: `0 ${tokens.spacing.xs}`,\r\n        }}>\r\n          {label}\r\n        </span>\r\n        <div style={{\r\n          flex: 1,\r\n          height: '1px',\r\n          backgroundColor: lineColor,\r\n          ...(dashed ? {\r\n            backgroundColor: 'transparent',\r\n            borderTop: `1px ${borderStyle} ${lineColor}`,\r\n          } : {}),\r\n        }} />\r\n      </div>\r\n    );\r\n  }\r\n  \r\n  return (\r\n    <div\r\n      role=\"separator\"\r\n      aria-orientation=\"horizontal\"\r\n      style={{\r\n        width: '100%',\r\n        height: '1px',\r\n        backgroundColor: lineColor,\r\n        flexShrink: 0,\r\n        ...(spacing ? { margin: `${spacing} 0` } : {}),\r\n        ...(dashed ? {\r\n          backgroundColor: 'transparent',\r\n          borderTop: `1px ${borderStyle} ${lineColor}`,\r\n        } : {}),\r\n        ...style,\r\n      }}\r\n      {...rest}\r\n    />\r\n  );\r\n});\r\n\r\nexport default Divider;\r\n"],"names":["Divider"],"mappings":";;;AAwCO,MAAM,UAAU,KAAK,SAASA,SAAQ;AAAA,EAC3C,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,QAAM,EAAE,OAAA,IAAW,SAAA;AAEnB,QAAM,YAAY,SAAS,OAAO,OAAO,OAAO;AAChD,QAAM,cAAc,SAAS,WAAW;AAExC,MAAI,gBAAgB,YAAY;AAC9B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,OAAO;AAAA,UACL,OAAO;AAAA,UACP,WAAW;AAAA,UACX,iBAAiB;AAAA,UACjB,YAAY;AAAA,UACZ,GAAI,UAAU,EAAE,QAAQ,KAAK,OAAO,GAAA,IAAO,CAAA;AAAA,UAC3C,GAAI,SAAS;AAAA,YACX,iBAAiB;AAAA,YACjB,YAAY,OAAO,WAAW,IAAI,SAAS;AAAA,UAAA,IACzC,CAAA;AAAA,UACJ,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AAGA,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,KAAK,OAAO,QAAQ;AAAA,UACpB,GAAI,UAAU,EAAE,QAAQ,GAAG,OAAO,KAAA,IAAS,CAAA;AAAA,UAC3C,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,SAAI,OAAO;AAAA,YACV,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,GAAI,SAAS;AAAA,cACX,iBAAiB;AAAA,cACjB,WAAW,OAAO,WAAW,IAAI,SAAS;AAAA,YAAA,IACxC,CAAA;AAAA,UAAC,GACJ;AAAA,UACH,oBAAC,UAAK,OAAO;AAAA,YACX,UAAU,OAAO,WAAW,SAAS;AAAA,YACrC,YAAY,OAAO,WAAW,WAAW;AAAA,YACzC,OAAO,OAAO,OAAO,KAAK;AAAA,YAC1B,YAAY,OAAO,WAAW,WAAW;AAAA,YACzC,eAAe,OAAO,WAAW,cAAc;AAAA,YAC/C,eAAe;AAAA,YACf,YAAY;AAAA,YACZ,SAAS,KAAK,OAAO,QAAQ,EAAE;AAAA,UAAA,GAE9B,UAAA,OACH;AAAA,UACA,oBAAC,SAAI,OAAO;AAAA,YACV,MAAM;AAAA,YACN,QAAQ;AAAA,YACR,iBAAiB;AAAA,YACjB,GAAI,SAAS;AAAA,cACX,iBAAiB;AAAA,cACjB,WAAW,OAAO,WAAW,IAAI,SAAS;AAAA,YAAA,IACxC,CAAA;AAAA,UAAC,EACP,CAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGT;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAiB;AAAA,MACjB,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,YAAY;AAAA,QACZ,GAAI,UAAU,EAAE,QAAQ,GAAG,OAAO,KAAA,IAAS,CAAA;AAAA,QAC3C,GAAI,SAAS;AAAA,UACX,iBAAiB;AAAA,UACjB,WAAW,OAAO,WAAW,IAAI,SAAS;AAAA,QAAA,IACxC,CAAA;AAAA,QACJ,GAAG;AAAA,MAAA;AAAA,MAEJ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/react/core/layout/Flex.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { ResponsiveValue } from './useBreakpoint';
+import { SpacingToken } from './responsive';
+import { BoxProps } from './Box';
+
+type SpacingInput = SpacingToken | string | number;
+export interface FlexProps extends BoxProps {
+    /** Flex direction */
+    direction?: ResponsiveValue<'row' | 'column' | 'row-reverse' | 'column-reverse'>;
+    /** Flex wrap */
+    wrap?: ResponsiveValue<'nowrap' | 'wrap' | 'wrap-reverse'>;
+    /** Gap between children (spacing token, px number, or CSS string) */
+    gap?: ResponsiveValue<SpacingInput>;
+    /** Row gap (overrides gap for rows) */
+    rowGap?: ResponsiveValue<SpacingInput>;
+    /** Column gap (overrides gap for columns) */
+    columnGap?: ResponsiveValue<SpacingInput>;
+    /** Align items (cross-axis) */
+    align?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'>;
+    /** Justify content (main-axis) */
+    justify?: ResponsiveValue<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    /** Shorthand: set both direction="column" */
+    column?: boolean;
+    /** Shorthand: center both axes */
+    center?: boolean;
+    /** Make flex container inline */
+    inline?: boolean;
+}
+export declare const Flex: React.MemoExoticComponent<React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>>;
+export default Flex;