@zendir/ui 0.2.20 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommandBuilder.js","sources":["../../../../src/react/core/widgets/CommandBuilder.tsx"],"sourcesContent":["/**\n * @zendir/ui - CommandBuilder Component\n * \n * Dynamic command parameter form for spacecraft command construction and execution.\n * Builds a form from a command definition with type-appropriate inputs,\n * validation, hazardous warnings, and send/history functionality.\n * \n * Features:\n * - Auto-generated form from command parameter definitions\n * - Type-appropriate inputs (number, string, boolean, enum/state, hex)\n * - Validation with min/max/regex constraints\n * - Hazardous command warnings\n * - Command history with re-send\n * - Raw command preview\n * - Required/optional parameter indicators\n * - Default values\n * \n * @example\n * ```tsx\n * <CommandBuilder\n *   target=\"INST\"\n *   command=\"COLLECT\"\n *   parameters={[\n *     { name: 'TYPE', type: 'enum', options: ['NORMAL', 'SPECIAL'], required: true },\n *     { name: 'DURATION', type: 'float', min: 0, max: 100, default: 1.0, units: 'sec' },\n *   ]}\n *   onSend={(params) => console.log('Send:', params)}\n * />\n * ```\n */\n\nimport React, { useState, useCallback, useMemo, memo } from 'react';\nimport { useTheme } from '../../theme';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type CommandParamType = 'int' | 'uint' | 'float' | 'string' | 'boolean' | 'enum' | 'hex' | 'block';\n\nexport interface CommandParameter {\n  /** Parameter name */\n  name: string;\n  /** Parameter type */\n  type: CommandParamType;\n  /** Description */\n  description?: string;\n  /** Default value */\n  default?: unknown;\n  /** Whether parameter is required (default: true) */\n  required?: boolean;\n  /** Minimum value (for numeric types) */\n  min?: number;\n  /** Maximum value (for numeric types) */\n  max?: number;\n  /** Bit size */\n  bitSize?: number;\n  /** Enum options (for enum type) */\n  options?: (string | number)[];\n  /** Units label */\n  units?: string;\n  /** Validation regex pattern (for string type) */\n  pattern?: string;\n  /** Whether this is a hazardous parameter */\n  hazardous?: boolean;\n  /** Hazardous description */\n  hazardousDescription?: string;\n}\n\nexport interface CommandHistoryEntry {\n  id: string;\n  timestamp: Date;\n  target: string;\n  command: string;\n  parameters: Record<string, unknown>;\n  status: 'sent' | 'success' | 'error';\n  error?: string;\n}\n\nexport interface CommandBuilderProps {\n  /** Target name */\n  target: string;\n  /** Command name */\n  command: string;\n  /** Command description */\n  description?: string;\n  /** Whether this is a hazardous command */\n  hazardous?: boolean;\n  /** Hazardous warning text */\n  hazardousDescription?: string;\n  /** Command parameters */\n  parameters: CommandParameter[];\n  /** Called when command is sent */\n  onSend: (params: Record<string, unknown>) => void | Promise<void>;\n  /** Command history entries */\n  history?: CommandHistoryEntry[];\n  /** Show command history (default: true) */\n  showHistory?: boolean;\n  /** Show raw command preview (default: true) */\n  showPreview?: boolean;\n  /** Whether send is disabled */\n  disabled?: boolean;\n  /** Height (default: auto) */\n  height?: number | string;\n  /** CSS class */\n  className?: string;\n  /** Show outer container border (default: true). Set false when embedded inside a Container/card. */\n  bordered?: boolean;\n  /** Custom style overrides for the outer container */\n  style?: React.CSSProperties;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const CommandBuilder = memo(function CommandBuilder({\n  target,\n  command,\n  description,\n  hazardous = false,\n  hazardousDescription,\n  parameters,\n  onSend,\n  history = [],\n  showHistory = true,\n  showPreview = true,\n  disabled = false,\n  height,\n  className = '',\n  bordered = true,\n  style: styleProp,\n}: CommandBuilderProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [values, setValues] = useState<Record<string, unknown>>(() => {\n    const defaults: Record<string, unknown> = {};\n    parameters.forEach(p => {\n      if (p.default !== undefined) defaults[p.name] = p.default;\n      else if (p.type === 'boolean') defaults[p.name] = false;\n      else if (p.type === 'enum' && p.options?.length) defaults[p.name] = p.options[0];\n      else defaults[p.name] = '';\n    });\n    return defaults;\n  });\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [sending, setSending] = useState(false);\n  const [showConfirm, setShowConfirm] = useState(false);\n  const [showHistoryPanel, setShowHistoryPanel] = useState(false);\n\n  const setValue = useCallback((name: string, value: unknown) => {\n    setValues(prev => ({ ...prev, [name]: value }));\n    setErrors(prev => {\n      const next = { ...prev };\n      delete next[name];\n      return next;\n    });\n  }, []);\n\n  const validate = useCallback((): boolean => {\n    const errs: Record<string, string> = {};\n    parameters.forEach(p => {\n      const val = values[p.name];\n      const required = p.required !== false;\n      if (required && (val === undefined || val === '' || val === null)) {\n        errs[p.name] = 'Required';\n        return;\n      }\n      if (val === '' || val === undefined) return;\n      if ((p.type === 'int' || p.type === 'uint' || p.type === 'float') && typeof val === 'string') {\n        const num = Number(val);\n        if (isNaN(num)) { errs[p.name] = 'Must be a number'; return; }\n        if (p.min !== undefined && num < p.min) { errs[p.name] = `Min: ${p.min}`; return; }\n        if (p.max !== undefined && num > p.max) { errs[p.name] = `Max: ${p.max}`; return; }\n        if (p.type === 'uint' && num < 0) { errs[p.name] = 'Must be >= 0'; return; }\n        if (p.type === 'int' && !Number.isInteger(num)) { errs[p.name] = 'Must be integer'; return; }\n      }\n      if (p.type === 'string' && p.pattern && typeof val === 'string') {\n        if (!new RegExp(p.pattern).test(val)) { errs[p.name] = 'Invalid format'; }\n      }\n    });\n    setErrors(errs);\n    return Object.keys(errs).length === 0;\n  }, [parameters, values]);\n\n  const handleSend = useCallback(async () => {\n    if (!validate()) return;\n    if (hazardous && !showConfirm) {\n      setShowConfirm(true);\n      return;\n    }\n    setShowConfirm(false);\n    setSending(true);\n    try {\n      const processedValues: Record<string, unknown> = {};\n      parameters.forEach(p => {\n        let val = values[p.name];\n        if ((p.type === 'int' || p.type === 'uint' || p.type === 'float') && typeof val === 'string') {\n          val = Number(val);\n        }\n        processedValues[p.name] = val;\n      });\n      await onSend(processedValues);\n    } finally {\n      setSending(false);\n    }\n  }, [validate, hazardous, showConfirm, parameters, values, onSend]);\n\n  const commandString = useMemo(() => {\n    const params = parameters.map(p => `${p.name}=${JSON.stringify(values[p.name] ?? '')}`).join(', ');\n    return `cmd(\"${target} ${command}\" ${params ? `with ${params}` : ''})`;\n  }, [target, command, parameters, values]);\n\n  const resetToDefaults = useCallback(() => {\n    const defaults: Record<string, unknown> = {};\n    parameters.forEach(p => {\n      if (p.default !== undefined) defaults[p.name] = p.default;\n      else if (p.type === 'boolean') defaults[p.name] = false;\n      else if (p.type === 'enum' && p.options?.length) defaults[p.name] = p.options[0];\n      else defaults[p.name] = '';\n    });\n    setValues(defaults);\n    setErrors({});\n  }, [parameters]);\n\n  const inputStyle: React.CSSProperties = {\n    background: tokens.colors.background.base,\n    color: tokens.colors.text.primary,\n    border: `1px solid ${tokens.colors.border.muted}`,\n    borderRadius: tokens.borderRadius.md,\n    padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n    fontSize: tokens.typography.fontSize.xs,\n    outline: 'none',\n    fontFamily: tokens.typography.fontFamily.mono,\n    width: '100%',\n    minHeight: 40,\n    boxSizing: 'border-box' as const,\n    transition: 'border-color 150ms ease',\n  };\n\n  return (\n    <div\n      className={`command-builder ${className}`}\n      style={{\n        height: typeof height === 'number' ? height : undefined,\n        background: tokens.colors.background.base,\n        ...(bordered ? (tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }) : { border: 'none' }),\n        borderRadius: tokens.borderRadius.lg,\n        overflow: 'hidden',\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: tokens.colors.text.primary,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        ...styleProp,\n      }}\n    >\n      {/* Header */}\n      <div style={{\n        padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        background: hazardous ? `${tokens.colors.status.critical}12` : tokens.colors.background.surface,\n        display: 'flex', alignItems: 'center', justifyContent: 'space-between',\n      }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\n          {hazardous && <span role=\"img\" aria-label=\"Hazardous command\" style={{ fontSize: tokens.typography.fontSize.lg }}>&#x26A0;</span>}\n          <span style={{\n            background: `${tokens.colors.interactive.default}22`,\n            color: tokens.colors.interactive.default,\n            padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n            borderRadius: tokens.borderRadius.md,\n            fontSize: tokens.typography.fontSize.xxs,\n            fontWeight: tokens.typography.fontWeight.medium,\n          }}>\n            {target}\n          </span>\n          <span style={{ fontWeight: tokens.typography.fontWeight.bold, fontSize: tokens.typography.fontSize.sm }}>{command}</span>\n          {hazardous && (\n            <span style={{\n              background: `${tokens.colors.status.critical}22`,\n              color: tokens.colors.status.critical,\n              padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n              borderRadius: tokens.borderRadius.sm,\n              fontSize: tokens.typography.fontSize.micro,\n              fontWeight: tokens.typography.fontWeight.bold,\n              textTransform: 'uppercase',\n              letterSpacing: '0.5px',\n            }}>\n              Hazardous\n            </span>\n          )}\n        </div>\n        {showHistory && history.length > 0 && (\n          <button\n            onClick={() => setShowHistoryPanel(p => !p)}\n            aria-expanded={showHistoryPanel}\n            aria-label={`Command history (${history.length} entries)`}\n            style={{\n              background: tokens.colors.background.base,\n              color: tokens.colors.text.secondary,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md,\n              padding: `${tokens.spacing.xxs} ${tokens.spacing.sm}`,\n              fontSize: tokens.typography.fontSize.xxs,\n              cursor: 'pointer',\n              transition: 'all 150ms ease',\n            }}\n          >\n            History ({history.length})\n          </button>\n        )}\n      </div>\n\n      {description && (\n        <div style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          fontSize: tokens.typography.fontSize.xs,\n          color: tokens.colors.text.secondary,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          lineHeight: tokens.typography.lineHeight.normal,\n        }}>\n          {description}\n        </div>\n      )}\n\n      {/* Parameters form */}\n      <div role=\"form\" aria-label={`${target} ${command} parameters`} style={{ flex: 1, overflow: 'auto', padding: tokens.spacing.smd }}>\n        {parameters.length === 0 ? (\n          <div style={{\n            color: tokens.colors.text.muted,\n            fontSize: tokens.typography.fontSize.xs,\n            textAlign: 'center',\n            padding: tokens.spacing.xl,\n          }}>\n            No parameters — command will be sent as-is\n          </div>\n        ) : (\n          <div style={{ display: 'flex', flexDirection: 'column', gap: tokens.spacing.smd }}>\n            {parameters.map(p => (\n              <div key={p.name}>\n                <div style={{\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: tokens.spacing.sm,\n                  marginBottom: tokens.spacing.xs,\n                }}>\n                  <label htmlFor={`cmd-param-${p.name}`} style={{\n                    fontWeight: tokens.typography.fontWeight.medium,\n                    fontSize: tokens.typography.fontSize.xs,\n                    color: tokens.colors.text.primary,\n                  }}>\n                    {p.name}\n                    {p.required !== false && <span aria-label=\"required\" style={{ color: tokens.colors.status.critical, marginLeft: tokens.spacing.xxs }}>*</span>}\n                  </label>\n                  <span style={{\n                    fontSize: tokens.typography.fontSize.xxs,\n                    color: tokens.colors.text.muted,\n                    background: tokens.colors.background.surface,\n                    padding: `1px ${tokens.spacing.xs}`,\n                    borderRadius: tokens.borderRadius.sm,\n                  }}>\n                    {p.type}{p.bitSize ? ` (${p.bitSize}b)` : ''}\n                  </span>\n                  {p.units && <span style={{ fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.interactive.default }}>[{p.units}]</span>}\n                  {p.hazardous && <span aria-label=\"Hazardous parameter\" style={{ fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.status.critical }}>&#x26A0;</span>}\n                </div>\n                {p.description && (\n                  <div id={`cmd-param-desc-${p.name}`} style={{\n                    fontSize: tokens.typography.fontSize.xxs,\n                    color: tokens.colors.text.muted,\n                    marginBottom: tokens.spacing.xs,\n                    lineHeight: tokens.typography.lineHeight.tight,\n                  }}>\n                    {p.description}\n                  </div>\n                )}\n                \n                {/* Input by type */}\n                {p.type === 'boolean' ? (\n                  <label style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: tokens.spacing.sm,\n                    fontSize: tokens.typography.fontSize.xs,\n                    cursor: 'pointer',\n                  }}>\n                    <input\n                      id={`cmd-param-${p.name}`}\n                      type=\"checkbox\"\n                      checked={!!values[p.name]}\n                      onChange={e => setValue(p.name, e.target.checked)}\n                      aria-describedby={p.description ? `cmd-param-desc-${p.name}` : undefined}\n                      style={{ accentColor: tokens.colors.interactive.default }}\n                    />\n                    {values[p.name] ? 'TRUE' : 'FALSE'}\n                  </label>\n                ) : p.type === 'enum' ? (\n                  <select\n                    id={`cmd-param-${p.name}`}\n                    value={String(values[p.name] ?? '')}\n                    onChange={e => setValue(p.name, e.target.value)}\n                    aria-describedby={p.description ? `cmd-param-desc-${p.name}` : undefined}\n                    style={inputStyle}\n                  >\n                    {p.options?.map(opt => (\n                      <option key={String(opt)} value={String(opt)}>{String(opt)}</option>\n                    ))}\n                  </select>\n                ) : (\n                  <input\n                    id={`cmd-param-${p.name}`}\n                    type={p.type === 'int' || p.type === 'uint' || p.type === 'float' ? 'number' : 'text'}\n                    value={String(values[p.name] ?? '')}\n                    onChange={e => setValue(p.name, e.target.value)}\n                    placeholder={p.default !== undefined ? `Default: ${p.default}` : undefined}\n                    min={p.min} max={p.max}\n                    step={p.type === 'float' ? 'any' : 1}\n                    aria-describedby={p.description ? `cmd-param-desc-${p.name}` : undefined}\n                    aria-invalid={!!errors[p.name]}\n                    style={{\n                      ...inputStyle,\n                      borderColor: errors[p.name] ? tokens.colors.status.critical : tokens.colors.border.muted,\n                    }}\n                  />\n                )}\n                {errors[p.name] && (\n                  <span role=\"alert\" style={{\n                    display: 'block',\n                    fontSize: tokens.typography.fontSize.xxs,\n                    color: tokens.colors.status.critical,\n                    marginTop: tokens.spacing.xxs,\n                  }}>\n                    {errors[p.name]}\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      {/* Command preview */}\n      {showPreview && (\n        <div aria-label=\"Command preview\" style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          background: tokens.colors.background.surface,\n          fontFamily: tokens.typography.fontFamily.mono,\n          fontSize: tokens.typography.fontSize.xxs,\n          color: tokens.colors.text.muted,\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n        }}>\n          {commandString}\n        </div>\n      )}\n\n      {/* Hazardous confirmation */}\n      {showConfirm && (\n        <div role=\"alertdialog\" aria-label=\"Confirm hazardous command\" style={{\n          padding: tokens.spacing.smd,\n          borderTop: `1px solid ${tokens.colors.status.critical}44`,\n          background: `${tokens.colors.status.critical}12`,\n        }}>\n          <div style={{\n            fontWeight: tokens.typography.fontWeight.bold,\n            color: tokens.colors.status.critical,\n            marginBottom: tokens.spacing.sm,\n            fontSize: tokens.typography.fontSize.sm,\n          }}>\n            Confirm Hazardous Command\n          </div>\n          <p style={{\n            fontSize: tokens.typography.fontSize.xs,\n            color: tokens.colors.text.secondary,\n            marginBottom: tokens.spacing.smd,\n            lineHeight: tokens.typography.lineHeight.normal,\n          }}>\n            {hazardousDescription || `Are you sure you want to send ${target} ${command}?`}\n          </p>\n          <div style={{ display: 'flex', gap: tokens.spacing.sm }}>\n            <button\n              onClick={handleSend}\n              style={{\n                background: tokens.colors.status.critical,\n                color: tokens.colors.text.inverse,\n                border: 'none',\n                borderRadius: tokens.borderRadius.md,\n                padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n                cursor: 'pointer',\n                transition: 'opacity 150ms ease',\n              }}\n            >\n              Confirm Send\n            </button>\n            <button\n              onClick={() => setShowConfirm(false)}\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.secondary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md,\n                padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n                fontSize: tokens.typography.fontSize.xs,\n                cursor: 'pointer',\n                transition: 'opacity 150ms ease',\n              }}\n            >\n              Cancel\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* Send button bar */}\n      {!showConfirm && (\n        <div style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          background: tokens.colors.background.surface,\n          display: 'flex', alignItems: 'center', justifyContent: 'space-between',\n        }}>\n          <button onClick={resetToDefaults} aria-label=\"Reset all parameters to defaults\" style={{\n            background: 'transparent',\n            color: tokens.colors.text.muted,\n            border: `1px solid ${tokens.colors.border.muted}`,\n            borderRadius: tokens.borderRadius.md,\n            padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n            fontSize: tokens.typography.fontSize.xxs,\n            cursor: 'pointer',\n            transition: 'all 150ms ease',\n          }}>\n            Reset Defaults\n          </button>\n          <button\n            onClick={handleSend}\n            disabled={disabled || sending}\n            aria-busy={sending}\n            style={{\n              background: hazardous ? tokens.colors.status.critical : tokens.colors.interactive.default,\n              color: tokens.colors.text.inverse,\n              border: 'none',\n              borderRadius: tokens.borderRadius.md,\n              padding: `${tokens.spacing.sm} ${tokens.spacing.lg}`,\n              fontSize: tokens.typography.fontSize.sm,\n              fontWeight: tokens.typography.fontWeight.medium,\n              cursor: disabled || sending ? 'not-allowed' : 'pointer',\n              opacity: disabled || sending ? 0.5 : 1,\n              transition: 'opacity 150ms ease',\n            }}\n          >\n            {sending ? 'Sending...' : 'Send Command'}\n          </button>\n        </div>\n      )}\n\n      {/* History panel */}\n      {showHistoryPanel && history.length > 0 && (\n        <div role=\"list\" aria-label=\"Command history\" style={{\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          background: tokens.colors.background.surface,\n          maxHeight: 200, overflow: 'auto',\n        }}>\n          <div style={{\n            padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n            fontSize: tokens.typography.fontSize.xxs,\n            color: tokens.colors.text.muted,\n            fontWeight: tokens.typography.fontWeight.medium,\n            textTransform: 'uppercase',\n            letterSpacing: '0.5px',\n          }}>\n            Command History\n          </div>\n          {history.slice().reverse().map(h => (\n            <div\n              role=\"listitem\"\n              key={h.id}\n              style={{\n                borderBottom: `1px solid ${tokens.colors.border.muted}`,\n              }}\n            >\n              <button\n                type=\"button\"\n                aria-label={`${h.status} at ${h.timestamp.toLocaleTimeString()}`}\n                style={{\n                  width: '100%',\n                  textAlign: 'left',\n                  padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n                  fontSize: tokens.typography.fontSize.xxs,\n                  display: 'flex',\n                  alignItems: 'center',\n                  gap: tokens.spacing.sm,\n                  cursor: 'pointer',\n                  transition: 'background 150ms ease',\n                  border: 'none',\n                  background: 'transparent',\n                  color: 'inherit',\n                }}\n                onClick={() => setValues(h.parameters)}\n              >\n              {/* Astro UX status shape */}\n              <span aria-hidden=\"true\" style={{\n                width: 8, height: 8, flexShrink: 0,\n                ...(h.status === 'success' ? {\n                  borderRadius: tokens.borderRadius.full,\n                  background: tokens.colors.status.normal,\n                } : h.status === 'error' ? {\n                  borderRadius: 0,\n                  background: tokens.colors.status.critical,\n                  clipPath: 'polygon(50% 100%, 0% 0%, 100% 0%)',\n                } : {\n                  borderRadius: tokens.borderRadius.full,\n                  background: 'transparent',\n                  border: `2px solid ${tokens.colors.status.standby}`,\n                }),\n              }} />\n              <span style={{\n                color: tokens.colors.text.muted,\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontSize: tokens.typography.fontSize.xxs,\n                flexShrink: 0,\n              }}>\n                {h.timestamp.toLocaleTimeString()}\n              </span>\n              <span style={{\n                fontFamily: tokens.typography.fontFamily.mono,\n                fontSize: tokens.typography.fontSize.xxs,\n                flex: 1,\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n                whiteSpace: 'nowrap',\n              }}>\n                {Object.entries(h.parameters).map(([k, v]) => `${k}=${JSON.stringify(v)}`).join(', ')}\n              </span>\n              {h.error && <span style={{\n                fontSize: tokens.typography.fontSize.micro,\n                color: tokens.colors.status.critical,\n              }}>\n                {h.error}\n              </span>}\n              </button>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default CommandBuilder;\n"],"names":["CommandBuilder"],"mappings":"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"}

package/dist/react/core/{ConnectionForm.d.ts → widgets/ConnectionForm.d.ts}

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { LabelPlacement } from './Input';
+import { LabelPlacement } from '../inputs/Input';
 
 export interface ConnectionConfig {
     /** Host */

package/dist/react/core/{ConnectionForm.js → widgets/ConnectionForm.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, useMemo, useId, useRef, useState, useEffect, useCallback } from "react";
-import { useBreakpoint } from "./layout/useBreakpoint.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useBreakpoint } from "../layout/useBreakpoint.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const PROTOCOLS = ["wss", "ws", "mqtts", "mqtt", "tcp"];
 const DEFAULT_PORTS = {
   ws: 80,

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionForm.js","sources":["../../../../src/react/core/widgets/ConnectionForm.tsx"],"sourcesContent":["/**\n * @zendir/ui - ConnectionForm Component\n * \n * MQTT/WebSocket connection form with URL composition, recent connections,\n * URL parameter sharing, and persistence. Tailored for operator dashboards\n * that require broker configuration (host, port, protocol, credentials).\n * \n * Astro UX Compliance:\n * - Status indicators for connection state (connected/disconnected/error)\n * - Form validation with clear error states\n * - Keyboard shortcut for quick connect (Ctrl+Enter)\n * \n * @example\n * ```tsx\n * <ConnectionForm\n *   onConnect={(config) => client.connect(config)}\n *   onDisconnect={() => client.disconnect()}\n *   connected={isConnected}\n *   defaultProtocol=\"wss\"\n *   showAdvanced\n * />\n * ```\n */\n\nimport React, { memo, useState, useCallback, useEffect, useMemo, useId, useRef } from 'react';\nimport { useTheme } from '../../theme';\nimport type { LabelPlacement } from '../inputs/Input';\nimport { useBreakpoint } from '../layout/useBreakpoint';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport interface ConnectionConfig {\n  /** Host */\n  host: string;\n  /** Port */\n  port: number;\n  /** Protocol */\n  protocol: 'ws' | 'wss' | 'mqtt' | 'mqtts' | 'tcp';\n  /** Path (e.g. /mqtt) */\n  path?: string;\n  /** Username */\n  username?: string;\n  /** Password */\n  password?: string;\n  /** Client ID */\n  clientId?: string;\n}\n\nexport interface ConnectionFormProps {\n  /** Connect handler */\n  onConnect: (config: ConnectionConfig) => void;\n  /** Disconnect handler */\n  onDisconnect?: () => void;\n  /** Current connection state */\n  connected?: boolean;\n  /** Connection in progress */\n  connecting?: boolean;\n  /** Default protocol */\n  defaultProtocol?: ConnectionConfig['protocol'];\n  /** Default host */\n  defaultHost?: string;\n  /** Default port */\n  defaultPort?: number;\n  /** Default path */\n  defaultPath?: string;\n  /** Show advanced fields (clientId, credentials) */\n  showAdvanced?: boolean;\n  /** Persist to localStorage (key name) */\n  persistKey?: string;\n  /** Parse URL params on mount */\n  parseUrlParams?: boolean;\n  /** Error message */\n  error?: string | null;\n  /** Compact layout */\n  compact?: boolean;\n  /** Custom style */\n  style?: React.CSSProperties;\n  /**\n   * Label placement style for form fields.\n   * - `'outlined'` — label sits on the input border (notched/Material-style). **Default.**\n   * - `'above'`    — label sits above the input with a gap (classic stack).\n   */\n  labelPlacement?: LabelPlacement;\n}\n\nconst PROTOCOLS: ConnectionConfig['protocol'][] = ['wss', 'ws', 'mqtts', 'mqtt', 'tcp'];\nconst DEFAULT_PORTS: Record<string, number> = {\n  ws: 80, wss: 443, mqtt: 1883, mqtts: 8883, tcp: 1883,\n};\n\nexport const ConnectionForm = memo(function ConnectionForm({\n  onConnect,\n  onDisconnect,\n  connected = false,\n  connecting = false,\n  defaultProtocol = 'wss',\n  defaultHost = 'localhost',\n  defaultPort,\n  defaultPath = '/mqtt',\n  showAdvanced = false,\n  persistKey,\n  parseUrlParams = false,\n  error,\n  compact = false,\n  style,\n  labelPlacement = 'outlined',\n}: ConnectionFormProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const { isMobile } = useBreakpoint();\n  const isOutlined = labelPlacement === 'outlined';\n  \n  const initialConfig: ConnectionConfig = useMemo(() => {\n    // Try localStorage\n    if (persistKey) {\n      try {\n        const saved = localStorage.getItem(persistKey);\n        if (saved) return JSON.parse(saved);\n      } catch { /* ignore */ }\n    }\n    \n    // Try URL params\n    if (parseUrlParams && typeof window !== 'undefined') {\n      const params = new URLSearchParams(window.location.search);\n      if (params.has('host')) {\n        return {\n          host: params.get('host') || defaultHost,\n          port: parseInt(params.get('port') || String(defaultPort || DEFAULT_PORTS[defaultProtocol])),\n          protocol: (params.get('protocol') || defaultProtocol) as ConnectionConfig['protocol'],\n          path: params.get('path') || defaultPath,\n          username: params.get('username') || '',\n          password: params.get('password') || '',\n          clientId: params.get('clientId') || '',\n        };\n      }\n    }\n    \n    return {\n      host: defaultHost,\n      port: defaultPort || DEFAULT_PORTS[defaultProtocol],\n      protocol: defaultProtocol,\n      path: defaultPath,\n      username: '',\n      password: '',\n      clientId: '',\n    };\n  }, []);\n  \n  const baseId = useId();\n  const passwordInputRef = useRef<HTMLInputElement>(null);\n  const usernameInputRef = useRef<HTMLInputElement>(null);\n  const [config, setConfig] = useState<ConnectionConfig>(initialConfig);\n  const [showAdv, setShowAdv] = useState(showAdvanced);\n  const [showPassword, setShowPassword] = useState(false);\n  \n  // Persist on change\n  useEffect(() => {\n    if (persistKey) {\n      try {\n        localStorage.setItem(persistKey, JSON.stringify(config));\n      } catch { /* ignore */ }\n    }\n  }, [config, persistKey]);\n  \n  const updateField = useCallback(<K extends keyof ConnectionConfig>(key: K, value: ConnectionConfig[K]) => {\n    setConfig(prev => ({ ...prev, [key]: value }));\n  }, []);\n  \n  const handleProtocolChange = useCallback((protocol: ConnectionConfig['protocol']) => {\n    setConfig(prev => ({\n      ...prev,\n      protocol,\n      port: prev.port === DEFAULT_PORTS[prev.protocol] ? DEFAULT_PORTS[protocol] : prev.port,\n    }));\n  }, []);\n  \n  const handleSubmit = useCallback((e: React.FormEvent) => {\n    e.preventDefault();\n    if (!connected) onConnect(config);\n    else onDisconnect?.();\n  }, [config, connected, onConnect, onDisconnect]);\n  \n  const getShareUrl = useCallback(() => {\n    const base = window.location.origin + window.location.pathname;\n    const params = new URLSearchParams({\n      host: config.host,\n      port: String(config.port),\n      protocol: config.protocol,\n      ...(config.path ? { path: config.path } : {}),\n    });\n    return `${base}?${params.toString()}`;\n  }, [config]);\n  \n  const fullUrl = `${config.protocol}://${config.host}:${config.port}${config.path || ''}`;\n  \n  const inputStyle: React.CSSProperties = {\n    width: '100%',\n    minHeight: compact ? 32 : 40,\n    padding: compact ? `6px ${tokens.spacing.sm}` : `${tokens.spacing.sm} ${tokens.spacing.md}`,\n    fontSize: tokens.typography.fontSize.sm,\n    fontFamily: tokens.typography.fontFamily.primary,\n    color: tokens.colors.text.primary,\n    backgroundColor: tokens.colors.background.base,\n    border: `1px solid ${tokens.colors.border.default}`,\n    borderRadius: tokens.borderRadius.md,\n    outline: 'none',\n    transition: tokens.animation.fast,\n    boxSizing: 'border-box',\n  };\n  \n  const labelStyle: React.CSSProperties = isOutlined\n    ? {\n        position: 'absolute',\n        top: 0,\n        left: '10px',\n        transform: 'translateY(-50%)',\n        backgroundColor: tokens.colors.background.base,\n        padding: '0 5px',\n        fontSize: tokens.typography.fontSize.xxs,\n        fontWeight: tokens.typography.fontWeight.medium,\n        color: tokens.colors.text.tertiary,\n        textTransform: 'uppercase',\n        letterSpacing: '0.04em',\n        zIndex: 1,\n        pointerEvents: 'none',\n        lineHeight: 1.2,\n        whiteSpace: 'nowrap',\n      }\n    : {\n        display: 'block',\n        fontSize: tokens.typography.fontSize.xxs,\n        fontWeight: tokens.typography.fontWeight.medium,\n        color: tokens.colors.text.tertiary,\n        marginBottom: '4px',\n        textTransform: 'uppercase',\n        letterSpacing: '0.04em',\n      };\n  \n  // Wrapper for outlined fields (position: relative so the label can sit on the border)\n  const fieldWrapperStyle: React.CSSProperties = isOutlined\n    ? { position: 'relative' }\n    : {};\n  \n  // Status dot\n  const statusColor = connected\n    ? tokens.colors.status.normal\n    : error\n      ? tokens.colors.status.critical\n      : tokens.colors.status.off;\n  \n  return (\n    <form onSubmit={handleSubmit} aria-label=\"Connection configuration\" style={{\n      fontFamily: tokens.typography.fontFamily.primary,\n      ...style,\n    }}>\n      {/* Status bar */}\n      <div aria-live=\"polite\" style={{\n        display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, flexWrap: 'wrap',\n        marginBottom: tokens.spacing.md,\n      }}>\n        <div style={{\n          width: 8, height: 8, borderRadius: '50%',\n          backgroundColor: statusColor,\n          boxShadow: connected ? `0 0 6px ${statusColor}` : 'none',\n          transition: tokens.animation.fast,\n        }} />\n        <span style={{\n          fontSize: tokens.typography.fontSize.xs,\n          color: tokens.colors.text.secondary,\n          fontWeight: tokens.typography.fontWeight.medium,\n        }}>\n          {connecting ? 'Connecting...' : connected ? 'Connected' : 'Disconnected'}\n        </span>\n        <div style={{ flex: 1 }} />\n        <span style={{\n          fontSize: tokens.typography.fontSize.xxs,\n          color: tokens.colors.text.tertiary,\n          fontFamily: tokens.typography.fontFamily.mono,\n          overflow: 'hidden', textOverflow: 'ellipsis',\n          maxWidth: isMobile ? '100%' : 280,\n          whiteSpace: isMobile ? 'normal' : 'nowrap',\n          wordBreak: isMobile ? 'break-all' : 'normal',\n        }}>\n          {fullUrl}\n        </span>\n      </div>\n      \n      {/* Main fields */}\n      <div\n        style={{\n          display: 'grid',\n          gridTemplateColumns: isMobile ? '1fr' : 'minmax(80px, 100px) 1fr minmax(60px, 80px)',\n          gap: tokens.spacing.sm,\n        }}\n      >\n        {/* Protocol */}\n        <div style={fieldWrapperStyle}>\n          <label htmlFor={`${baseId}-protocol`} style={labelStyle}>Protocol</label>\n          <select\n            id={`${baseId}-protocol`}\n            value={config.protocol}\n            onChange={e => handleProtocolChange(e.target.value as ConnectionConfig['protocol'])}\n            disabled={connected || connecting}\n            style={{\n              ...inputStyle,\n              cursor: 'pointer',\n              appearance: 'auto',\n            }}\n          >\n            {PROTOCOLS.map(p => (\n              <option key={p} value={p}>{p.toUpperCase()}</option>\n            ))}\n          </select>\n        </div>\n        \n        {/* Host */}\n        <div style={fieldWrapperStyle}>\n          <label htmlFor={`${baseId}-host`} style={labelStyle}>Host</label>\n          <input\n            id={`${baseId}-host`}\n            type=\"text\"\n            value={config.host}\n            onChange={e => updateField('host', e.target.value)}\n            disabled={connected || connecting}\n            placeholder=\"broker.example.com\"\n            style={inputStyle}\n          />\n        </div>\n        \n        {/* Port */}\n        <div style={fieldWrapperStyle}>\n          <label htmlFor={`${baseId}-port`} style={labelStyle}>Port</label>\n          <input\n            id={`${baseId}-port`}\n            type=\"number\"\n            value={config.port}\n            min={1}\n            max={65535}\n            onChange={e => {\n              const v = parseInt(e.target.value) || 0;\n              updateField('port', Math.max(0, Math.min(65535, v)));\n            }}\n            disabled={connected || connecting}\n            style={{ ...inputStyle, fontFamily: tokens.typography.fontFamily.mono }}\n          />\n        </div>\n      </div>\n      \n      {/* Path */}\n      <div style={{ marginTop: tokens.spacing.sm, ...fieldWrapperStyle }}>\n        <label htmlFor={`${baseId}-path`} style={labelStyle}>Path</label>\n        <input\n          id={`${baseId}-path`}\n          type=\"text\"\n          value={config.path || ''}\n          onChange={e => updateField('path', e.target.value)}\n          disabled={connected || connecting}\n          placeholder=\"/mqtt\"\n          style={inputStyle}\n        />\n      </div>\n      \n      {/* Advanced toggle */}\n      <button\n        type=\"button\"\n        onClick={() => setShowAdv(p => !p)}\n        style={{\n          display: 'flex', alignItems: 'center', gap: '4px',\n          fontSize: tokens.typography.fontSize.xxs,\n          color: tokens.colors.text.tertiary,\n          backgroundColor: 'transparent', border: 'none',\n          cursor: 'pointer', marginTop: tokens.spacing.sm,\n          padding: 0,\n          fontFamily: tokens.typography.fontFamily.primary,\n        }}\n      >\n        <svg\n          width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\"\n          style={{ transition: tokens.animation.fast, transform: showAdv ? 'rotate(90deg)' : 'rotate(0)' }}\n        >\n          <polyline points=\"9 18 15 12 9 6\" />\n        </svg>\n        Advanced\n      </button>\n      \n      {/* Advanced fields */}\n      {showAdv && (\n        <div style={{\n          marginTop: tokens.spacing.sm,\n          display: 'grid',\n          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',\n          gap: tokens.spacing.sm,\n        }}>\n          <div style={fieldWrapperStyle}>\n            <label htmlFor={`${baseId}-username`} style={labelStyle}>Username</label>\n            <input\n              ref={usernameInputRef}\n              id={`${baseId}-username`}\n              type=\"text\"\n              value={config.username || ''}\n              onChange={e => updateField('username', e.target.value)}\n              onPaste={e => {\n                const pasted = e.clipboardData.getData('text');\n                const trimmed = pasted.trim();\n                const input = usernameInputRef.current;\n                if (input) {\n                  const cur = config.username || '';\n                  const start = input.selectionStart ?? cur.length;\n                  const end = input.selectionEnd ?? cur.length;\n                  const newValue = cur.slice(0, start) + trimmed + cur.slice(end);\n                  if (trimmed !== pasted || newValue !== cur) {\n                    e.preventDefault();\n                    updateField('username', newValue);\n                    requestAnimationFrame(() => {\n                      input.setSelectionRange(start + trimmed.length, start + trimmed.length);\n                    });\n                  }\n                } else if (trimmed !== pasted) {\n                  e.preventDefault();\n                  updateField('username', trimmed);\n                }\n              }}\n              onBlur={() => {\n                const cur = config.username ?? '';\n                const trimmed = cur.trim();\n                if (trimmed !== cur) updateField('username', trimmed);\n              }}\n              disabled={connected || connecting}\n              autoComplete=\"username\"\n              style={inputStyle}\n            />\n          </div>\n          <div style={fieldWrapperStyle}>\n            <label htmlFor={`${baseId}-password`} style={labelStyle}>Password</label>\n            <div style={{ position: 'relative' }}>\n              <input\n                ref={passwordInputRef}\n                id={`${baseId}-password`}\n                type={showPassword ? 'text' : 'password'}\n                value={config.password || ''}\n                onChange={e => updateField('password', e.target.value)}\n                onPaste={e => {\n                  const pasted = e.clipboardData.getData('text');\n                  const trimmed = pasted.trim();\n                  const input = passwordInputRef.current;\n                  if (input) {\n                    const cur = config.password || '';\n                    const start = input.selectionStart ?? cur.length;\n                    const end = input.selectionEnd ?? cur.length;\n                    const newValue = cur.slice(0, start) + trimmed + cur.slice(end);\n                    if (trimmed !== pasted || newValue !== cur) {\n                      e.preventDefault();\n                      updateField('password', newValue);\n                      requestAnimationFrame(() => {\n                        const pos = start + trimmed.length;\n                        input.setSelectionRange(pos, pos);\n                      });\n                    }\n                  } else if (trimmed !== pasted) {\n                    e.preventDefault();\n                    updateField('password', trimmed);\n                  }\n                }}\n                onBlur={() => {\n                  const cur = config.password ?? '';\n                  const trimmed = cur.trim();\n                  if (trimmed !== cur) updateField('password', trimmed);\n                }}\n                disabled={connected || connecting}\n                autoComplete=\"current-password\"\n                style={{ ...inputStyle, paddingRight: 36 }}\n              />\n              <button\n                type=\"button\"\n                onClick={() => setShowPassword(p => !p)}\n                style={{\n                  position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)',\n                  background: 'none', border: 'none', cursor: 'pointer',\n                  color: tokens.colors.text.tertiary, fontSize: tokens.typography.fontSize.xxs,\n                  minHeight: 32,\n                  padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n                }}\n              >\n                {showPassword ? 'Hide' : 'Show'}\n              </button>\n            </div>\n          </div>\n          <div style={{ gridColumn: '1 / -1', ...fieldWrapperStyle }}>\n            <label htmlFor={`${baseId}-clientId`} style={labelStyle}>Client ID</label>\n            <input\n              id={`${baseId}-clientId`}\n              type=\"text\"\n              value={config.clientId || ''}\n              onChange={e => updateField('clientId', e.target.value)}\n              disabled={connected || connecting}\n              placeholder=\"auto-generated if empty\"\n              style={inputStyle}\n            />\n          </div>\n        </div>\n      )}\n      \n      {/* Error */}\n      {error && (\n        <div style={{\n          marginTop: tokens.spacing.sm,\n          padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,\n          fontSize: tokens.typography.fontSize.xs,\n          color: tokens.colors.status.critical,\n          backgroundColor: `${tokens.colors.status.critical}10`,\n          border: `1px solid ${tokens.colors.status.critical}20`,\n          borderRadius: tokens.borderRadius.sm,\n        }}>\n          {error}\n        </div>\n      )}\n      \n      {/* Actions */}\n      <div style={{\n        display: 'flex', alignItems: 'center', gap: tokens.spacing.sm,\n        flexDirection: isMobile ? 'column' : 'row',\n        marginTop: tokens.spacing.md,\n      }}>\n        <button\n          type=\"submit\"\n          disabled={connecting || !config.host}\n          style={{\n            flex: 1,\n            padding: compact ? `8px ${tokens.spacing.md}` : `${tokens.spacing.sm} ${tokens.spacing.lg}`,\n            minHeight: 44,\n            fontSize: tokens.typography.fontSize.sm,\n            fontWeight: tokens.typography.fontWeight.semibold,\n            fontFamily: tokens.typography.fontFamily.primary,\n            color: tokens.colors.text.inverse || '#fff',\n            backgroundColor: connected ? tokens.colors.status.critical : tokens.colors.accent.primary,\n            border: 'none',\n            borderRadius: tokens.borderRadius.md,\n            cursor: connecting || !config.host ? 'not-allowed' : 'pointer',\n            opacity: connecting || !config.host ? 0.6 : 1,\n            transition: tokens.animation.fast,\n          }}\n        >\n          {connecting ? 'Connecting...' : connected ? 'Disconnect' : 'Connect'}\n        </button>\n        \n        {parseUrlParams && !connected && (\n          <button\n            type=\"button\"\n            title=\"Copy share URL\"\n            onClick={() => {\n              navigator.clipboard?.writeText(getShareUrl());\n            }}\n            style={{\n              padding: compact ? '8px' : tokens.spacing.sm,\n              minHeight: 44,\n              width: isMobile ? '100%' : 'auto',\n              fontSize: tokens.typography.fontSize.xs,\n              color: tokens.colors.text.tertiary,\n              backgroundColor: 'transparent',\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md,\n              cursor: 'pointer',\n              fontFamily: tokens.typography.fontFamily.primary,\n            }}\n          >\n            Share\n          </button>\n        )}\n      </div>\n    </form>\n  );\n});\n\nexport default ConnectionForm;\n"],"names":["ConnectionForm"],"mappings":"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"}

package/dist/react/core/{FileExplorer.js → widgets/FileExplorer.js}

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { memo, useState, useMemo, useCallback } from "react";
-import { AstroIcon } from "./AstroIcon.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { AstroIcon } from "../display/AstroIcon.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 function formatFileSize(bytes) {
   if (bytes === void 0 || bytes === null) return "—";
   if (bytes === 0) return "0 B";

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileExplorer.js","sources":["../../../../src/react/core/widgets/FileExplorer.tsx"],"sourcesContent":["/**\n * @zendir/ui - FileExplorer Component\n * \n * Hierarchical file browser for mission data management and file operations.\n * Supports tree navigation, file actions (download, delete, upload),\n * search, breadcrumbs, and multiple selection.\n * \n * Features:\n * - Tree view and list view modes\n * - Breadcrumb navigation\n * - File type icons\n * - Search/filter\n * - Multi-select with checkboxes\n * - File actions (open, download, delete, rename)\n * - Upload dropzone\n * - File size and modified date display\n * - Sort by name, size, date\n * \n * @example\n * ```tsx\n * <FileExplorer\n *   files={fileTree}\n *   onFileOpen={(file) => console.log('Open:', file)}\n *   onFileDownload={(file) => console.log('Download:', file)}\n * />\n * ```\n */\n\nimport React, { useState, useCallback, useMemo, memo } from 'react';\nimport { useTheme } from '../../theme';\nimport { AstroIcon, type AstroIconName } from '../display/AstroIcon';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface FileNode {\n  /** File/folder name */\n  name: string;\n  /** Full path */\n  path: string;\n  /** Whether this is a directory */\n  isDirectory: boolean;\n  /** File size in bytes (for files) */\n  size?: number;\n  /** Last modified date */\n  modified?: string | Date;\n  /** MIME type */\n  mimeType?: string;\n  /** Children (for directories) */\n  children?: FileNode[];\n  /** Custom icon name */\n  icon?: string;\n  /** Whether the file is readonly */\n  readonly?: boolean;\n}\n\nexport type FileViewMode = 'tree' | 'list';\nexport type FileSortBy = 'name' | 'size' | 'modified';\nexport type FileSortDir = 'asc' | 'desc';\n\nexport interface FileExplorerProps {\n  /** Root file tree */\n  files: FileNode[];\n  /** Height (default: 500) */\n  height?: number | string;\n  /** Title */\n  title?: string;\n  /** View mode (default: 'list') */\n  viewMode?: FileViewMode;\n  /** Show search bar (default: true) */\n  showSearch?: boolean;\n  /** Show breadcrumbs (default: true) */\n  showBreadcrumbs?: boolean;\n  /** Show file details (size, date) (default: true) */\n  showDetails?: boolean;\n  /** Allow multi-select (default: false) */\n  multiSelect?: boolean;\n  /** Allow upload (default: false) */\n  allowUpload?: boolean;\n  /** Allow delete (default: false) */\n  allowDelete?: boolean;\n  /** Called when a file is opened/double-clicked */\n  onFileOpen?: (file: FileNode) => void;\n  /** Called when download is requested */\n  onFileDownload?: (file: FileNode) => void;\n  /** Called when delete is requested */\n  onFileDelete?: (files: FileNode[]) => void;\n  /** Called when files are uploaded */\n  onFileUpload?: (files: File[], targetPath: string) => void;\n  /** Called when selection changes */\n  onSelectionChange?: (files: FileNode[]) => void;\n  /** CSS class */\n  className?: string;\n  /** Show outer container border (default: true). Set false when embedded inside a Container/card. */\n  bordered?: boolean;\n  /** Custom style overrides for the outer container */\n  style?: React.CSSProperties;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nfunction formatFileSize(bytes?: number): string {\n  if (bytes === undefined || bytes === null) return '—';\n  if (bytes === 0) return '0 B';\n  const units = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(1024));\n  return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;\n}\n\nfunction formatDate(date?: string | Date): string {\n  if (!date) return '—';\n  const d = typeof date === 'string' ? new Date(date) : date;\n  if (isNaN(d.getTime())) return String(date);\n  return d.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' }) + ' '\n    + d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });\n}\n\nfunction getFileIconName(file: FileNode): AstroIconName {\n  if (file.isDirectory) return 'folder';\n  const ext = file.name.split('.').pop()?.toLowerCase() ?? '';\n  const iconMap: Record<string, AstroIconName> = {\n    rb: 'code', py: 'code', js: 'code', ts: 'code', jsx: 'code', tsx: 'code',\n    json: 'insert-drive-file', yaml: 'insert-drive-file', yml: 'insert-drive-file',\n    xml: 'insert-drive-file', csv: 'table-chart', txt: 'short-text',\n    md: 'description', log: 'insert-drive-file', gz: 'archive', zip: 'archive', tar: 'archive',\n    bin: 'storage', dat: 'storage', png: 'image', jpg: 'image', gif: 'image', svg: 'image',\n    pdf: 'picture-as-pdf', doc: 'insert-drive-file', xls: 'table-chart', ppt: 'insert-drive-file',\n  };\n  return iconMap[ext] || 'insert-drive-file';\n}\n\nfunction flattenVisible(\n  files: FileNode[],\n  expanded: Set<string>,\n  depth: number = 0,\n): { file: FileNode; depth: number }[] {\n  const result: { file: FileNode; depth: number }[] = [];\n  for (const f of files) {\n    result.push({ file: f, depth });\n    if (f.isDirectory && expanded.has(f.path) && f.children) {\n      result.push(...flattenVisible(f.children, expanded, depth + 1));\n    }\n  }\n  return result;\n}\n\nfunction filterFiles(files: FileNode[], query: string): FileNode[] {\n  const q = query.toLowerCase();\n  return files.reduce<FileNode[]>((acc, f) => {\n    if (f.isDirectory && f.children) {\n      const filteredChildren = filterFiles(f.children, query);\n      if (filteredChildren.length > 0 || f.name.toLowerCase().includes(q)) {\n        acc.push({ ...f, children: filteredChildren });\n      }\n    } else if (f.name.toLowerCase().includes(q)) {\n      acc.push(f);\n    }\n    return acc;\n  }, []);\n}\n\nfunction sortFiles(files: FileNode[], sortBy: FileSortBy, sortDir: FileSortDir): FileNode[] {\n  const sorted = [...files].sort((a, b) => {\n    // Directories first\n    if (a.isDirectory !== b.isDirectory) return a.isDirectory ? -1 : 1;\n    let cmp = 0;\n    if (sortBy === 'name') cmp = a.name.localeCompare(b.name);\n    else if (sortBy === 'size') cmp = (a.size ?? 0) - (b.size ?? 0);\n    else if (sortBy === 'modified') {\n      const da = a.modified ? new Date(a.modified).getTime() : 0;\n      const db = b.modified ? new Date(b.modified).getTime() : 0;\n      cmp = da - db;\n    }\n    return sortDir === 'asc' ? cmp : -cmp;\n  });\n  return sorted.map(f => f.isDirectory && f.children\n    ? { ...f, children: sortFiles(f.children, sortBy, sortDir) }\n    : f\n  );\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\nexport const FileExplorer = memo(function FileExplorer({\n  files,\n  height = 500,\n  title,\n  viewMode: initialViewMode = 'list',\n  showSearch = true,\n  showBreadcrumbs = true,\n  showDetails = true,\n  multiSelect = false,\n  allowUpload = false,\n  allowDelete = false,\n  onFileOpen,\n  onFileDownload: _onFileDownload,\n  onFileDelete,\n  onFileUpload,\n  onSelectionChange: _onSelectionChange,\n  className = '',\n  bordered = true,\n  style: styleProp,\n}: FileExplorerProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const isTransparentTheme =\n    theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  const [expanded, setExpanded] = useState<Set<string>>(new Set());\n  const [selected, setSelected] = useState<Set<string>>(new Set());\n  const [currentPath, setCurrentPath] = useState<string[]>([]);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [sortBy, setSortBy] = useState<FileSortBy>('name');\n  const [sortDir, setSortDir] = useState<FileSortDir>('asc');\n  const [isDragging, setIsDragging] = useState(false);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [viewportHeight, setViewportHeight] = useState(240);\n  const listRef = React.useRef<HTMLDivElement>(null);\n\n  const processedFiles = useMemo(() => {\n    let result = files;\n    if (searchQuery.trim()) result = filterFiles(result, searchQuery);\n    return sortFiles(result, sortBy, sortDir);\n  }, [files, searchQuery, sortBy, sortDir]);\n\n  // Navigate to directory by breadcrumb\n  const currentFiles = useMemo(() => {\n    let current = processedFiles;\n    for (const dir of currentPath) {\n      const found = current.find(f => f.isDirectory && f.name === dir);\n      if (found && found.children) current = found.children;\n      else break;\n    }\n    return current;\n  }, [processedFiles, currentPath]);\n\n  const visibleItems = useMemo(() => {\n    if (initialViewMode === 'tree') return flattenVisible(processedFiles, expanded);\n    return currentFiles.map(f => ({ file: f, depth: 0 }));\n  }, [processedFiles, expanded, currentFiles, initialViewMode]);\n\n  const toggleExpand = useCallback((path: string) => {\n    setExpanded(prev => {\n      const next = new Set(prev);\n      if (next.has(path)) next.delete(path);\n      else next.add(path);\n      return next;\n    });\n  }, []);\n\n  const toggleSelect = useCallback((path: string) => {\n    setSelected(prev => {\n      const next = new Set(prev);\n      if (next.has(path)) next.delete(path);\n      else {\n        if (!multiSelect) next.clear();\n        next.add(path);\n      }\n      return next;\n    });\n  }, [multiSelect]);\n\n  const handleFileClick = useCallback((file: FileNode) => {\n    if (file.isDirectory) {\n      if (initialViewMode === 'list') {\n        setCurrentPath(prev => [...prev, file.name]);\n      } else {\n        toggleExpand(file.path);\n      }\n    } else {\n      toggleSelect(file.path);\n    }\n  }, [initialViewMode, toggleExpand, toggleSelect]);\n\n  const handleFileDoubleClick = useCallback((file: FileNode) => {\n    if (!file.isDirectory) onFileOpen?.(file);\n  }, [onFileOpen]);\n\n  const navigateTo = useCallback((idx: number) => {\n    setCurrentPath(prev => prev.slice(0, idx));\n  }, []);\n\n  const handleDrop = useCallback((e: React.DragEvent) => {\n    e.preventDefault();\n    setIsDragging(false);\n    if (!allowUpload || !onFileUpload) return;\n    const droppedFiles = Array.from(e.dataTransfer.files);\n    if (droppedFiles.length > 0) {\n      onFileUpload(droppedFiles, '/' + currentPath.join('/'));\n    }\n  }, [allowUpload, onFileUpload, currentPath]);\n\n  const handleSort = useCallback((col: FileSortBy) => {\n    if (sortBy === col) setSortDir(d => d === 'asc' ? 'desc' : 'asc');\n    else { setSortBy(col); setSortDir('asc'); }\n  }, [sortBy]);\n\n  const selectedFiles = useMemo(() =>\n    visibleItems.filter(v => selected.has(v.file.path)).map(v => v.file),\n  [visibleItems, selected]);\n  const rowHeightPx = Number.parseInt(String(tokens.elementSize.sm), 10) || 32;\n  const overscanRows = 12;\n  const totalRows = visibleItems.length;\n  const startRow = Math.max(0, Math.floor(scrollTop / rowHeightPx) - overscanRows);\n  const visibleRows = Math.ceil(viewportHeight / rowHeightPx) + overscanRows * 2;\n  const endRow = Math.min(totalRows, startRow + visibleRows);\n  const virtualVisibleItems = useMemo(\n    () => visibleItems.slice(startRow, endRow),\n    [visibleItems, startRow, endRow],\n  );\n\n  React.useEffect(() => {\n    const el = listRef.current;\n    if (!el) return undefined;\n\n    const updateHeight = () => setViewportHeight(Math.max(rowHeightPx * 4, el.clientHeight || 240));\n    updateHeight();\n\n    if (typeof ResizeObserver !== 'undefined') {\n      const observer = new ResizeObserver(updateHeight);\n      observer.observe(el);\n      return () => observer.disconnect();\n    }\n\n    window.addEventListener('resize', updateHeight);\n    return () => window.removeEventListener('resize', updateHeight);\n  }, [rowHeightPx]);\n\n  return (\n    <div\n      className={`file-explorer ${className}`}\n      style={{\n        height: typeof height === 'number' ? height : undefined,\n        background: tokens.colors.background.base,\n        ...(bordered ? (tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }) : { border: 'none' }),\n        borderRadius: tokens.borderRadius.lg,\n        overflow: 'hidden',\n        display: 'flex',\n        flexDirection: 'column',\n        fontFamily: tokens.typography.fontFamily.primary,\n        color: tokens.colors.text.primary,\n        backdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        WebkitBackdropFilter: isTransparentTheme ? 'blur(10px)' : undefined,\n        ...styleProp,\n      }}\n    >\n      {/* Header */}\n      <div style={{\n        padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        background: tokens.colors.background.surface,\n        backdropFilter: 'blur(8px)',\n        display: 'flex', alignItems: 'center', justifyContent: 'space-between',\n      }}>\n        <span style={{ fontWeight: tokens.typography.fontWeight.medium, fontSize: tokens.typography.fontSize.sm }}>{title || 'File Explorer'}</span>\n        <div style={{ display: 'flex', gap: tokens.spacing.sm }}>\n          {allowUpload && (\n            <button aria-label=\"Upload files\" style={{\n              background: tokens.colors.interactive.default,\n              color: tokens.colors.text.inverse, border: 'none', borderRadius: tokens.borderRadius.md,\n              padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`, fontSize: tokens.typography.fontSize.xxs, cursor: 'pointer',\n              fontWeight: tokens.typography.fontWeight.medium,\n              transition: 'opacity 150ms ease',\n            }}>\n              Upload\n            </button>\n          )}\n          {allowDelete && selectedFiles.length > 0 && (\n            <button\n              onClick={() => onFileDelete?.(selectedFiles)}\n              aria-label={`Delete ${selectedFiles.length} selected files`}\n              style={{\n                background: `${tokens.colors.status.critical}22`,\n                color: tokens.colors.status.critical,\n                border: `1px solid ${tokens.colors.status.critical}44`,\n                borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`, fontSize: tokens.typography.fontSize.xxs, cursor: 'pointer',\n                fontWeight: tokens.typography.fontWeight.medium,\n                transition: 'opacity 150ms ease',\n              }}\n            >\n              Delete ({selectedFiles.length})\n            </button>\n          )}\n        </div>\n      </div>\n\n      {/* Toolbar: search + breadcrumbs */}\n      {(showSearch || showBreadcrumbs) && (\n        <div style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex', alignItems: 'center', gap: tokens.spacing.sm,\n          background: tokens.colors.background.surface,\n        }}>\n          {showBreadcrumbs && initialViewMode === 'list' && (\n            <nav aria-label=\"File path\" style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs, fontSize: tokens.typography.fontSize.xs, flex: 1 }}>\n              <span\n                role=\"button\"\n                tabIndex={0}\n                aria-label=\"Navigate to root\"\n                onClick={() => navigateTo(0)}\n                onKeyDown={e => { if (e.key === 'Enter') navigateTo(0); }}\n                style={{ cursor: 'pointer', color: tokens.colors.interactive.default, fontWeight: tokens.typography.fontWeight.medium }}\n              >\n                /\n              </span>\n              {currentPath.map((dir, idx) => (\n                <React.Fragment key={idx}>\n                  <span aria-hidden=\"true\" style={{ color: tokens.colors.text.muted }}>/</span>\n                  <span\n                    role=\"button\"\n                    tabIndex={0}\n                    aria-label={`Navigate to ${dir}`}\n                    onClick={() => navigateTo(idx + 1)}\n                    onKeyDown={e => { if (e.key === 'Enter') navigateTo(idx + 1); }}\n                    style={{\n                      cursor: 'pointer',\n                      color: idx === currentPath.length - 1 ? tokens.colors.text.primary : tokens.colors.interactive.default,\n                      fontWeight: idx === currentPath.length - 1 ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.normal,\n                    }}\n                  >\n                    {dir}\n                  </span>\n                </React.Fragment>\n              ))}\n            </nav>\n          )}\n          {showSearch && (\n            <input\n              type=\"text\"\n              value={searchQuery}\n              onChange={e => setSearchQuery(e.target.value)}\n              placeholder=\"Search files...\"\n              aria-label=\"Search files\"\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`, fontSize: tokens.typography.fontSize.xs,\n                outline: 'none', minWidth: 150,\n                transition: 'border-color 150ms ease',\n              }}\n            />\n          )}\n        </div>\n      )}\n\n      {/* Column headers */}\n      <div role=\"row\" style={{\n        display: 'grid',\n        gridTemplateColumns: showDetails ? '1fr auto auto' : '1fr',\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        background: tokens.colors.background.surface,\n        fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, fontWeight: tokens.typography.fontWeight.medium,\n        textTransform: 'uppercase',\n        letterSpacing: '0.5px',\n      }}>\n        <span role=\"columnheader\" tabIndex={0} aria-label=\"Sort by name\" onClick={() => handleSort('name')} onKeyDown={e => { if (e.key === 'Enter') handleSort('name'); }} style={{ cursor: 'pointer' }}>\n          Name {sortBy === 'name' && (sortDir === 'asc' ? '\\u25B2' : '\\u25BC')}\n        </span>\n        {showDetails && (\n          <>\n            <span role=\"columnheader\" tabIndex={0} aria-label=\"Sort by size\" onClick={() => handleSort('size')} onKeyDown={e => { if (e.key === 'Enter') handleSort('size'); }} style={{ cursor: 'pointer', minWidth: 70, textAlign: 'right' }}>\n              Size {sortBy === 'size' && (sortDir === 'asc' ? '\\u25B2' : '\\u25BC')}\n            </span>\n            <span role=\"columnheader\" tabIndex={0} aria-label=\"Sort by modified date\" onClick={() => handleSort('modified')} onKeyDown={e => { if (e.key === 'Enter') handleSort('modified'); }} style={{ cursor: 'pointer', minWidth: 140, textAlign: 'right' }}>\n              Modified {sortBy === 'modified' && (sortDir === 'asc' ? '\\u25B2' : '\\u25BC')}\n            </span>\n          </>\n        )}\n      </div>\n\n      {/* File list */}\n      <div\n        ref={listRef}\n        style={{\n          flex: 1, overflow: 'auto', position: 'relative',\n          border: isDragging ? `2px dashed ${tokens.colors.interactive.default}` : '2px solid transparent',\n        }}\n        onScroll={e => setScrollTop(e.currentTarget.scrollTop)}\n        onDragOver={allowUpload ? e => { e.preventDefault(); setIsDragging(true); } : undefined}\n        onDragLeave={allowUpload ? () => setIsDragging(false) : undefined}\n        onDrop={allowUpload ? handleDrop : undefined}\n      >\n        {isDragging && (\n          <div style={{\n            position: 'absolute', inset: 0, background: `${tokens.colors.interactive.default}11`,\n            display: 'flex', alignItems: 'center', justifyContent: 'center',\n            fontSize: tokens.typography.fontSize.sm, color: tokens.colors.interactive.default,\n            fontWeight: tokens.typography.fontWeight.medium, zIndex: 10,\n          }}>\n            Drop files to upload\n          </div>\n        )}\n        {visibleItems.length === 0 ? (\n          <div style={{\n            display: 'flex', alignItems: 'center', justifyContent: 'center',\n            height: '100%', color: tokens.colors.text.muted, fontSize: tokens.typography.fontSize.sm,\n          }}>\n            {searchQuery ? 'No matching files' : 'Empty directory'}\n          </div>\n        ) : (\n          <div style={{ height: totalRows * rowHeightPx, position: 'relative' }}>\n            <div style={{ position: 'absolute', top: startRow * rowHeightPx, left: 0, right: 0 }}>\n              {virtualVisibleItems.map(({ file, depth }) => (\n                <div\n                  role=\"treeitem\"\n                  tabIndex={0}\n                  aria-label={`${file.isDirectory ? 'Folder' : 'File'}: ${file.name}`}\n                  aria-selected={selected.has(file.path)}\n                  key={file.path}\n                  onClick={() => handleFileClick(file)}\n                  onDoubleClick={() => handleFileDoubleClick(file)}\n                  onKeyDown={e => { if (e.key === 'Enter') handleFileDoubleClick(file); if (e.key === ' ') { e.preventDefault(); handleFileClick(file); } }}\n                  style={{\n                    display: 'grid',\n                    gridTemplateColumns: showDetails ? '1fr auto auto' : '1fr',\n                    padding: `0 ${tokens.spacing.smd}`,\n                    paddingLeft: `calc(${tokens.spacing.smd} + ${depth * 20}px)`,\n                    height: tokens.elementSize.sm,\n                    alignItems: 'center',\n                    borderBottom: `1px solid ${tokens.colors.border.muted}`,\n                    cursor: 'pointer',\n                    background: selected.has(file.path) ? `${tokens.colors.interactive.default}15` : 'transparent',\n                    transition: 'background 150ms ease',\n                  }}\n                  onMouseEnter={e => {\n                    if (!selected.has(file.path)) (e.currentTarget as HTMLDivElement).style.background = tokens.colors.background.surface;\n                  }}\n                  onMouseLeave={e => {\n                    (e.currentTarget as HTMLDivElement).style.background = selected.has(file.path) ? `${tokens.colors.interactive.default}15` : 'transparent';\n                  }}\n                >\n                  <span style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm, overflow: 'hidden' }}>\n                    {multiSelect && (\n                      <input\n                        type=\"checkbox\"\n                        checked={selected.has(file.path)}\n                        onChange={() => toggleSelect(file.path)}\n                        onClick={e => e.stopPropagation()}\n                        aria-label={`Select ${file.name}`}\n                        style={{ accentColor: tokens.colors.interactive.default }}\n                      />\n                    )}\n                    {initialViewMode === 'tree' && file.isDirectory && (\n                      <span aria-hidden=\"true\" style={{ fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, width: 12, textAlign: 'center' }}>\n                        {expanded.has(file.path) ? '\\u25BC' : '\\u25B6'}\n                      </span>\n                    )}\n                    <span aria-hidden=\"true\" style={{ display: 'inline-flex', alignItems: 'center', fontSize: tokens.typography.fontSize.sm }}>\n                      <AstroIcon name={getFileIconName(file)} size=\"small\" label=\"\" style={{ fontSize: 'inherit' }} />\n                    </span>\n                    <span style={{\n                      fontSize: tokens.typography.fontSize.xs,\n                      fontWeight: file.isDirectory ? tokens.typography.fontWeight.medium : tokens.typography.fontWeight.normal,\n                      color: file.isDirectory ? tokens.colors.interactive.default : tokens.colors.text.primary,\n                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',\n                    }}>\n                      {file.name}\n                    </span>\n                  </span>\n                  {showDetails && (\n                    <>\n                      <span style={{ fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.muted, textAlign: 'right', minWidth: 70, fontFamily: tokens.typography.fontFamily.mono }}>\n                        {file.isDirectory ? '—' : formatFileSize(file.size)}\n                      </span>\n                      <span style={{ fontSize: tokens.typography.fontSize.xs, color: tokens.colors.text.muted, textAlign: 'right', minWidth: 140, fontFamily: tokens.typography.fontFamily.mono }}>\n                        {formatDate(file.modified)}\n                      </span>\n                    </>\n                  )}\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n\n      {/* Status bar */}\n      <div style={{\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        borderTop: `1px solid ${tokens.colors.border.muted}`,\n        background: tokens.colors.background.surface,\n        fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted,\n        display: 'flex', justifyContent: 'space-between',\n      }}>\n        <span>{visibleItems.length} items</span>\n        {selected.size > 0 && <span>{selected.size} selected</span>}\n      </div>\n    </div>\n  );\n});\n\nexport default FileExplorer;\n"],"names":["FileExplorer"],"mappings":"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"}

package/dist/react/core/{HexViewer.js → widgets/HexViewer.js}

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState, useCallback, useRef, useEffect, memo } from "react";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const REGION_COLORS = {
   primary: "rgba(96, 165, 250, 0.15)",
   secondary: "rgba(168, 85, 247, 0.15)",

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

@@ -0,0 +1 @@
+{"version":3,"file":"HexViewer.js","sources":["../../../../src/react/core/widgets/HexViewer.tsx"],"sourcesContent":["/**\n * @zendir/ui - HexViewer Component\n * \n * Displays raw binary data in a hex viewer format for telemetry packet analysis.\n * Shows offset, hex bytes, and ASCII representation side by side.\n * \n * Features:\n * - Hex + ASCII view with configurable bytes per row (8, 16, 32)\n * - Byte highlighting with custom colors (for field boundaries, errors, etc.)\n * - Click-to-select bytes and ranges\n * - Search by hex pattern or ASCII string\n * - Offset display in hex or decimal\n * - Live data streaming support (auto-scroll)\n * - Copy selection as hex, decimal, or ASCII\n * - Byte grouping (1, 2, 4, 8)\n * - Endianness toggle for multi-byte interpretation\n * - Status bar showing cursor position, selection info, data interpretation\n * \n * Astro UX Compliance:\n * - Dark theme with monospace font\n * - Status colors for highlighting\n * - Accessible keyboard navigation\n * \n * @example\n * ```tsx\n * <HexViewer\n *   data={new Uint8Array([0x48, 0x65, 0x6C, 0x6C, 0x6F])}\n *   bytesPerRow={16}\n *   highlights={[{ start: 0, end: 4, color: '#4CAF50', label: 'Header' }]}\n * />\n * ```\n */\n\nimport React, { useState, useRef, useCallback, useMemo, useEffect, memo } from 'react';\nimport { useTheme } from '../../theme';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface HexHighlight {\n  /** Start byte offset (inclusive) */\n  start: number;\n  /** End byte offset (inclusive) */\n  end: number;\n  /** Highlight color (CSS color) */\n  color: string;\n  /** Optional label for the highlight region */\n  label?: string;\n}\n\n/**\n * Named region for structural packet analysis (e.g., CCSDS Primary Header,\n * Secondary Header, User Data). Regions provide persistent background color\n * and a legend entry, unlike transient highlights.\n */\nexport interface HexRegion {\n  /** Start byte offset (inclusive) */\n  start: number;\n  /** End byte offset (exclusive) */\n  end: number;\n  /** Region display name (e.g., \"Primary Header\") */\n  label: string;\n  /** Background fill color (CSS rgba recommended) */\n  color: string;\n  /** Border/accent color for the region */\n  borderColor?: string;\n}\n\n/**\n * A decoded field within the packet payload for the fields table.\n * Enables cross-highlighting: hover a field row → highlight its bytes,\n * hover hex bytes → highlight the corresponding field row.\n */\nexport interface DecodedField {\n  /** Field name */\n  name: string;\n  /** Decoded value (displayed via toString) */\n  value: string | number | boolean | null;\n  /** Engineering units (e.g., \"°C\", \"V\", \"rpm\") */\n  unit?: string;\n  /** Byte offset within the packet where this field starts */\n  byteOffset?: number;\n  /** Size in bits */\n  sizeBits?: number;\n  /** Optional description / tooltip */\n  description?: string;\n}\n\n/**\n * Packet header key-value pairs shown in a collapsible summary panel.\n * Supports CCSDS-style primary + secondary header display.\n */\nexport interface PacketHeaderEntry {\n  /** Label (e.g., \"APID\", \"Sequence Count\", \"Spacecraft ID\") */\n  label: string;\n  /** Value */\n  value: string | number;\n  /** Render value in monospace font */\n  mono?: boolean;\n}\n\n/** Pre-defined region color palette for space packet headers */\nexport const REGION_COLORS = {\n  primary:   'rgba(96, 165, 250, 0.15)',\n  secondary: 'rgba(168, 85, 247, 0.15)',\n  tertiary:  'rgba(251, 191, 36, 0.15)',\n  userData:  'rgba(34, 197, 94, 0.15)',\n  error:     'rgba(255, 56, 56, 0.15)',\n} as const;\n\nexport const REGION_BORDER_COLORS = {\n  primary:   'rgba(96, 165, 250, 0.5)',\n  secondary: 'rgba(168, 85, 247, 0.5)',\n  tertiary:  'rgba(251, 191, 36, 0.5)',\n  userData:  'rgba(34, 197, 94, 0.5)',\n  error:     'rgba(255, 56, 56, 0.5)',\n} as const;\n\nexport type ByteGrouping = 1 | 2 | 4 | 8;\nexport type OffsetBase = 'hex' | 'decimal';\nexport type Endianness = 'big' | 'little';\n\nexport interface HexViewerProps {\n  /** Binary data to display */\n  data: Uint8Array | number[];\n  /** Bytes per row (default: 16) */\n  bytesPerRow?: 8 | 16 | 32;\n  /** Byte grouping for hex display (default: 1) */\n  byteGrouping?: ByteGrouping;\n  /** Offset display base (default: 'hex') */\n  offsetBase?: OffsetBase;\n  /** Highlighted byte regions (transient, e.g., search results or field hover) */\n  highlights?: HexHighlight[];\n  /** Named structural regions (persistent background, e.g., Primary/Secondary Header) */\n  regions?: HexRegion[];\n  /** Decoded fields for the fields table (cross-highlights with hex bytes) */\n  decodedFields?: DecodedField[];\n  /** Packet header entries for the summary panel */\n  packetHeaders?: PacketHeaderEntry[];\n  /** External hover highlight range (for cross-component linking) */\n  externalHighlight?: { start: number; end: number } | null;\n  /** Whether to show the ASCII column (default: true) */\n  showAscii?: boolean;\n  /** Whether to show the offset column (default: true) */\n  showOffset?: boolean;\n  /** Whether to show the status/info bar (default: true) */\n  showStatusBar?: boolean;\n  /** Whether to show the search bar (default: true) */\n  showSearch?: boolean;\n  /** Whether to show the toolbar (default: true) */\n  showToolbar?: boolean;\n  /** Whether to show the decoded fields table (default: true if decodedFields provided) */\n  showFieldsTable?: boolean;\n  /** Whether to show the packet header summary (default: true if packetHeaders provided) */\n  showHeaderSummary?: boolean;\n  /**\n   * Height of the viewer (default: 400).\n   * When constrained, HexViewer enables outer scroll fallback so expanded\n   * panels (headers/decoded fields) never trap lower sections.\n   */\n  height?: number | string;\n  /** Title for the viewer */\n  title?: string;\n  /** Whether data is streaming (auto-scroll to bottom) */\n  streaming?: boolean;\n  /** Endianness for multi-byte interpretation (default: 'big') */\n  endianness?: Endianness;\n  /** Called when byte selection changes */\n  onSelectionChange?: (start: number, end: number) => void;\n  /** Called when a byte is clicked */\n  onByteClick?: (offset: number, value: number) => void;\n  /** Called when hovering a byte (for external cross-highlighting) */\n  onByteHover?: (byteIndex: number) => void;\n  /** Called when mouse leaves hex area */\n  onByteLeave?: () => void;\n  /** CSS class name */\n  className?: string;\n  /** Show outer container border (default: true). Set false when embedded inside a Container/card. */\n  bordered?: boolean;\n  /** Custom style overrides for the outer container */\n  style?: React.CSSProperties;\n}\n\n// =============================================================================\n// Helpers\n// =============================================================================\n\nfunction toUint8Array(data: Uint8Array | number[]): Uint8Array {\n  return data instanceof Uint8Array ? data : new Uint8Array(data);\n}\n\nfunction byteToHex(byte: number): string {\n  return byte.toString(16).padStart(2, '0').toUpperCase();\n}\n\nfunction byteToAscii(byte: number): string {\n  return byte >= 0x20 && byte <= 0x7E ? String.fromCharCode(byte) : '.';\n}\n\nfunction formatOffset(offset: number, base: OffsetBase, totalBytes: number): string {\n  if (base === 'hex') {\n    const width = Math.max(4, Math.ceil(Math.log2(Math.max(totalBytes, 1)) / 4) * 1);\n    return offset.toString(16).padStart(Math.max(width, 4), '0').toUpperCase();\n  }\n  const width = Math.max(4, totalBytes.toString().length);\n  return offset.toString().padStart(width, ' ');\n}\n\nfunction interpretBytes(\n  data: Uint8Array,\n  offset: number,\n  endianness: Endianness,\n): { u8: number; i8: number; u16?: number; i16?: number; u32?: number; i32?: number; f32?: number; f64?: number } {\n  const result: ReturnType<typeof interpretBytes> = {\n    u8: data[offset],\n    i8: data[offset] > 127 ? data[offset] - 256 : data[offset],\n  };\n\n  if (offset + 1 < data.length) {\n    const view = new DataView(data.buffer, data.byteOffset + offset, Math.min(8, data.length - offset));\n    const be = endianness === 'big';\n    result.u16 = view.getUint16(0, !be);\n    result.i16 = view.getInt16(0, !be);\n    if (offset + 3 < data.length) {\n      result.u32 = view.getUint32(0, !be);\n      result.i32 = view.getInt32(0, !be);\n      result.f32 = view.getFloat32(0, !be);\n    }\n    if (offset + 7 < data.length) {\n      result.f64 = view.getFloat64(0, !be);\n    }\n  }\n  return result;\n}\n\nconst HEX_ROW_HEIGHT = 22;\nconst HEX_OVERSCAN_ROWS = 16;\nconst MAX_RENDERED_SEARCH_HIGHLIGHTS = 400;\n\n// =============================================================================\n// Sub-components\n// =============================================================================\n\nconst HexRow = memo(function HexRow({\n  offset,\n  bytes,\n  bytesPerRow,\n  byteGrouping,\n  offsetBase,\n  totalBytes,\n  showAscii,\n  showOffset,\n  highlights,\n  regions,\n  effectiveHighlight,\n  selectedStart,\n  selectedEnd,\n  cursorOffset,\n  onByteMouseDown,\n  onByteMouseEnter,\n  onByteClick,\n  handleByteHoverInternal,\n  handleByteLeaveInternal,\n  tokens,\n}: {\n  offset: number;\n  bytes: Uint8Array;\n  bytesPerRow: number;\n  byteGrouping: ByteGrouping;\n  offsetBase: OffsetBase;\n  totalBytes: number;\n  showAscii: boolean;\n  showOffset: boolean;\n  highlights: HexHighlight[];\n  regions: HexRegion[];\n  effectiveHighlight: { start: number; end: number } | null | undefined;\n  selectedStart: number;\n  selectedEnd: number;\n  cursorOffset: number;\n  onByteMouseDown: (idx: number) => void;\n  onByteMouseEnter: (idx: number) => void;\n  onByteClick: (idx: number) => void;\n  handleByteHoverInternal: (idx: number) => void;\n  handleByteLeaveInternal: () => void;\n  tokens: ReturnType<typeof useTheme>['tokens'];\n}) {\n  const hexCells: React.ReactNode[] = [];\n  const asciiCells: React.ReactNode[] = [];\n\n  for (let i = 0; i < bytesPerRow; i++) {\n    const byteIdx = offset + i;\n    const isValid = i < bytes.length;\n    const byte = isValid ? bytes[i] : 0;\n\n    // Determine highlight color (priority: selection > cross-highlight > search highlight > region)\n    let bgColor = 'transparent';\n    let fgColor = tokens.colors.text.primary;\n    let borderBottom = '2px solid transparent';\n    const isSelected = byteIdx >= Math.min(selectedStart, selectedEnd) && byteIdx <= Math.max(selectedStart, selectedEnd) && selectedStart >= 0;\n    const isCursor = byteIdx === cursorOffset;\n\n    // 1. Region background (lowest priority — always visible unless overridden)\n    let regionColor: string | null = null;\n    for (let r = 0; r < regions.length; r++) {\n      const region = regions[r];\n      if (byteIdx < region.start) break;\n      if (byteIdx >= region.start && byteIdx < region.end) {\n        regionColor = region.color;\n        break;\n      }\n    }\n    if (regionColor) {\n      bgColor = regionColor;\n    }\n\n    // 2. Search highlights\n    for (const h of highlights) {\n      if (byteIdx >= h.start && byteIdx <= h.end) {\n        bgColor = `${h.color}33`;\n        fgColor = h.color;\n        break;\n      }\n    }\n\n    // 3. Cross-highlight from field hover or external\n    if (effectiveHighlight && byteIdx >= effectiveHighlight.start && byteIdx < effectiveHighlight.end) {\n      bgColor = `${tokens.colors.status.caution}4D`;\n      borderBottom = `2px solid ${tokens.colors.status.caution}`;\n    }\n\n    // 4. Selection (highest priority)\n    if (isSelected) {\n      bgColor = `${tokens.colors.interactive.default}4D`;\n      fgColor = tokens.colors.interactive.default;\n    }\n\n    // Add grouping space\n    const needsGroupSpace = i > 0 && i % byteGrouping === 0;\n\n    hexCells.push(\n      <span\n        key={`hex-${i}`}\n        role=\"button\"\n        tabIndex={isValid ? 0 : -1}\n        onMouseDown={() => isValid && onByteMouseDown(byteIdx)}\n        onMouseEnter={() => { isValid && onByteMouseEnter(byteIdx); isValid && handleByteHoverInternal(byteIdx); }}\n        onMouseLeave={() => isValid && handleByteLeaveInternal()}\n        onClick={() => isValid && onByteClick(byteIdx)}\n        onKeyDown={e => { if (isValid && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onByteClick(byteIdx); } }}\n        style={{\n          padding: '0 2px',\n          marginLeft: needsGroupSpace ? 6 : 0,\n          background: bgColor,\n          color: isValid ? fgColor : `${tokens.colors.text.muted}26`,\n          cursor: isValid ? 'pointer' : 'default',\n          borderBottom: isCursor ? `2px solid ${tokens.colors.status.normal}` : borderBottom,\n          borderRadius: tokens.borderRadius.sm,\n          userSelect: 'none',\n          transition: 'background 0.1s ease',\n        }}\n      >\n        {isValid ? byteToHex(byte) : '  '}\n      </span>,\n    );\n\n    if (showAscii) {\n      asciiCells.push(\n        <span\n          key={`ascii-${i}`}\n          role=\"button\"\n          tabIndex={isValid ? 0 : -1}\n          onMouseDown={() => isValid && onByteMouseDown(byteIdx)}\n          onMouseEnter={() => { isValid && onByteMouseEnter(byteIdx); isValid && handleByteHoverInternal(byteIdx); }}\n          onMouseLeave={() => isValid && handleByteLeaveInternal()}\n          onClick={() => isValid && onByteClick(byteIdx)}\n          onKeyDown={e => { if (isValid && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); onByteClick(byteIdx); } }}\n          style={{\n            background: bgColor,\n            color: isValid ? (byte >= 0x20 && byte <= 0x7E ? fgColor : `${tokens.colors.text.muted}33`) : 'transparent',\n            cursor: isValid ? 'pointer' : 'default',\n            borderBottom: isCursor ? `2px solid ${tokens.colors.status.normal}` : borderBottom,\n            borderRadius: tokens.borderRadius.sm,\n            userSelect: 'none',\n            width: 8,\n            textAlign: 'center' as const,\n          }}\n        >\n          {isValid ? byteToAscii(byte) : ' '}\n        </span>,\n      );\n    }\n  }\n\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', height: HEX_ROW_HEIGHT, lineHeight: `${HEX_ROW_HEIGHT}px` }}>\n      {showOffset && (\n        <span style={{ color: tokens.colors.text.muted, marginRight: 12, minWidth: 60, textAlign: 'right' }}>\n          {formatOffset(offset, offsetBase, totalBytes)}\n        </span>\n      )}\n      <span style={{ display: 'flex', gap: 1, marginRight: showAscii ? 16 : 0, letterSpacing: '0.5px' }}>\n        {hexCells}\n      </span>\n      {showAscii && (\n        <>\n          <span style={{ color: `${tokens.colors.border.muted}`, marginRight: 8 }}>│</span>\n          <span style={{ display: 'flex', letterSpacing: '1px' }}>\n            {asciiCells}\n          </span>\n        </>\n      )}\n    </div>\n  );\n});\n\n// =============================================================================\n// Main Component\n// =============================================================================\n\nexport function HexViewer({\n  data: rawData,\n  bytesPerRow = 16,\n  byteGrouping = 1,\n  offsetBase = 'hex',\n  highlights = [],\n  regions = [],\n  decodedFields,\n  packetHeaders,\n  externalHighlight,\n  showAscii = true,\n  showOffset = true,\n  showStatusBar = true,\n  showSearch = true,\n  showToolbar = true,\n  showFieldsTable,\n  showHeaderSummary,\n  height = 400,\n  title,\n  streaming = false,\n  endianness = 'big',\n  onSelectionChange,\n  onByteClick,\n  onByteHover,\n  onByteLeave,\n  className = '',\n  bordered = true,\n  style: styleProp,\n}: HexViewerProps): React.ReactElement {\n  const { tokens } = useTheme();\n  const data = useMemo(() => toUint8Array(rawData), [rawData]);\n  const [hoveredFieldIdx, setHoveredFieldIdx] = useState<number | null>(null);\n  const [fieldHighlight, setFieldHighlight] = useState<{ start: number; end: number } | null>(null);\n  const [showHeaders, setShowHeaders] = useState(true);\n  const [showFields, setShowFields] = useState(true);\n\n  const sortedRegions = useMemo(\n    () => [...regions].sort((a, b) => a.start - b.start),\n    [regions],\n  );\n\n  // Build field byte ranges for cross-highlighting\n  const fieldByteRanges = useMemo(() => {\n    if (!decodedFields) return [];\n    return decodedFields.map(f => ({\n      start: f.byteOffset ?? 0,\n      end: (f.byteOffset ?? 0) + Math.ceil((f.sizeBits ?? 0) / 8),\n      name: f.name,\n    }));\n  }, [decodedFields]);\n\n  // Cross-highlight: field hover → byte highlight\n  const handleFieldHover = useCallback((fieldIdx: number) => {\n    setHoveredFieldIdx(fieldIdx);\n    const range = fieldByteRanges[fieldIdx];\n    if (range && range.end > range.start) setFieldHighlight(range);\n  }, [fieldByteRanges]);\n\n  const handleFieldLeave = useCallback(() => {\n    setHoveredFieldIdx(null);\n    setFieldHighlight(null);\n  }, []);\n\n  // Cross-highlight: byte hover → field highlight\n  const handleByteHoverInternal = useCallback((byteIdx: number) => {\n    onByteHover?.(byteIdx);\n    const fi = fieldByteRanges.findIndex(r => byteIdx >= r.start && byteIdx < r.end);\n    if (fi >= 0) {\n      setHoveredFieldIdx(fi);\n      setFieldHighlight(fieldByteRanges[fi]);\n    } else {\n      setHoveredFieldIdx(null);\n      setFieldHighlight({ start: byteIdx, end: byteIdx + 1 });\n    }\n  }, [fieldByteRanges, onByteHover]);\n\n  const handleByteLeaveInternal = useCallback(() => {\n    onByteLeave?.();\n    setHoveredFieldIdx(null);\n    setFieldHighlight(null);\n  }, [onByteLeave]);\n\n  // Merge field highlight + external highlight into effective highlights\n  const effectiveHighlight = externalHighlight || fieldHighlight;\n\n  const shouldShowFieldsTable = showFieldsTable ?? (decodedFields && decodedFields.length > 0);\n  const shouldShowHeaderSummary = showHeaderSummary ?? (packetHeaders && packetHeaders.length > 0);\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const hasConstrainedHeight = useMemo(() => {\n    if (height === undefined || height === null) return false;\n    if (typeof height === 'string') return height.trim().toLowerCase() !== 'auto';\n    return true;\n  }, [height]);\n  const decodedFieldsMaxHeight = useMemo(() => {\n    if (typeof height === 'number') {\n      // Keep decoded fields useful but avoid starving the hex grid.\n      return Math.min(220, Math.max(120, Math.floor(height * 0.32)));\n    }\n    return 200;\n  }, [height]);\n\n  const [cursorOffset, setCursorOffset] = useState(-1);\n  const [selectStart, setSelectStart] = useState(-1);\n  const [selectEnd, setSelectEnd] = useState(-1);\n  const [isDragging, setIsDragging] = useState(false);\n  const [searchQuery, setSearchQuery] = useState('');\n  const [searchType, setSearchType] = useState<'hex' | 'ascii'>('hex');\n  const [searchResults, setSearchResults] = useState<number[]>([]);\n  const [currentSearchIdx, setCurrentSearchIdx] = useState(-1);\n  const [localBytesPerRow, setLocalBytesPerRow] = useState(bytesPerRow);\n  const [localGrouping, setLocalGrouping] = useState(byteGrouping);\n  const [localOffsetBase, setLocalOffsetBase] = useState(offsetBase);\n  const [localEndianness, setLocalEndianness] = useState(endianness);\n  const [localShowAscii, setLocalShowAscii] = useState(showAscii);\n  const [scrollTop, setScrollTop] = useState(0);\n  const [viewportHeight, setViewportHeight] = useState(160);\n\n  // Auto-scroll when streaming\n  useEffect(() => {\n    if (streaming && scrollRef.current) {\n      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;\n    }\n  }, [data, streaming]);\n\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) return undefined;\n\n    const updateViewportHeight = () => {\n      setViewportHeight(Math.max(120, el.clientHeight || 160));\n    };\n\n    updateViewportHeight();\n    if (typeof ResizeObserver !== 'undefined') {\n      const observer = new ResizeObserver(updateViewportHeight);\n      observer.observe(el);\n      return () => observer.disconnect();\n    }\n\n    window.addEventListener('resize', updateViewportHeight);\n    return () => window.removeEventListener('resize', updateViewportHeight);\n  }, []);\n\n  const totalRows = Math.max(1, Math.ceil(data.length / localBytesPerRow));\n  const startRow = Math.max(0, Math.floor(scrollTop / HEX_ROW_HEIGHT) - HEX_OVERSCAN_ROWS);\n  const visibleRowCount = Math.ceil(viewportHeight / HEX_ROW_HEIGHT) + HEX_OVERSCAN_ROWS * 2;\n  const endRow = Math.min(totalRows, startRow + visibleRowCount);\n  const virtualRows = useMemo(() => {\n    const result: { offset: number; bytes: Uint8Array }[] = [];\n    for (let row = startRow; row < endRow; row++) {\n      const offset = row * localBytesPerRow;\n      const bytes = data.subarray(offset, Math.min(data.length, offset + localBytesPerRow));\n      result.push({ offset, bytes });\n    }\n    if (result.length === 0) {\n      result.push({ offset: 0, bytes: new Uint8Array(0) });\n    }\n    return result;\n  }, [data, localBytesPerRow, startRow, endRow]);\n\n  // Search\n  const doSearch = useCallback(() => {\n    if (!searchQuery.trim()) {\n      setSearchResults([]);\n      setCurrentSearchIdx(-1);\n      return;\n    }\n\n    const results: number[] = [];\n    if (searchType === 'hex') {\n      const hexStr = searchQuery.replace(/\\s+/g, '');\n      if (hexStr.length % 2 !== 0 || !/^[0-9a-fA-F]+$/.test(hexStr)) return;\n      const searchBytes = new Uint8Array(hexStr.length / 2);\n      for (let i = 0; i < searchBytes.length; i++) {\n        searchBytes[i] = parseInt(hexStr.slice(i * 2, i * 2 + 2), 16);\n      }\n      for (let i = 0; i <= data.length - searchBytes.length; i++) {\n        let match = true;\n        for (let j = 0; j < searchBytes.length; j++) {\n          if (data[i + j] !== searchBytes[j]) { match = false; break; }\n        }\n        if (match) results.push(i);\n      }\n    } else {\n      const encoder = new TextEncoder();\n      const searchBytes = encoder.encode(searchQuery);\n      for (let i = 0; i <= data.length - searchBytes.length; i++) {\n        let match = true;\n        for (let j = 0; j < searchBytes.length; j++) {\n          if (data[i + j] !== searchBytes[j]) { match = false; break; }\n        }\n        if (match) results.push(i);\n      }\n    }\n    setSearchResults(results);\n    setCurrentSearchIdx(results.length > 0 ? 0 : -1);\n    if (results.length > 0) {\n      setCursorOffset(results[0]);\n      if (scrollRef.current) {\n        const rowIdx = Math.floor(results[0] / localBytesPerRow);\n        scrollRef.current.scrollTop = Math.max(0, rowIdx * HEX_ROW_HEIGHT - 100);\n      }\n    }\n  }, [searchQuery, searchType, data, localBytesPerRow]);\n\n  const scrollToOffset = useCallback((offset: number) => {\n    if (!scrollRef.current) return;\n    const rowIdx = Math.floor(offset / localBytesPerRow);\n    scrollRef.current.scrollTop = Math.max(0, rowIdx * HEX_ROW_HEIGHT - 100);\n  }, [localBytesPerRow]);\n\n  const handleHexScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {\n    setScrollTop(event.currentTarget.scrollTop);\n  }, []);\n\n  const nextSearchResult = useCallback(() => {\n    if (searchResults.length === 0) return;\n    const nextIdx = (currentSearchIdx + 1) % searchResults.length;\n    setCurrentSearchIdx(nextIdx);\n    setCursorOffset(searchResults[nextIdx]);\n    scrollToOffset(searchResults[nextIdx]);\n  }, [searchResults, currentSearchIdx, scrollToOffset]);\n\n  const prevSearchResult = useCallback(() => {\n    if (searchResults.length === 0) return;\n    const prevIdx = (currentSearchIdx - 1 + searchResults.length) % searchResults.length;\n    setCurrentSearchIdx(prevIdx);\n    setCursorOffset(searchResults[prevIdx]);\n    scrollToOffset(searchResults[prevIdx]);\n  }, [searchResults, currentSearchIdx, scrollToOffset]);\n\n  // Selection handlers\n  const handleByteMouseDown = useCallback((idx: number) => {\n    setSelectStart(idx);\n    setSelectEnd(idx);\n    setCursorOffset(idx);\n    setIsDragging(true);\n  }, []);\n\n  const handleByteMouseEnter = useCallback((idx: number) => {\n    if (isDragging) {\n      setSelectEnd(idx);\n    }\n  }, [isDragging]);\n\n  const handleMouseUp = useCallback(() => {\n    if (isDragging) {\n      setIsDragging(false);\n      if (onSelectionChange && selectStart >= 0 && selectEnd >= 0) {\n        onSelectionChange(Math.min(selectStart, selectEnd), Math.max(selectStart, selectEnd));\n      }\n    }\n  }, [isDragging, selectStart, selectEnd, onSelectionChange]);\n\n  useEffect(() => {\n    window.addEventListener('mouseup', handleMouseUp);\n    return () => window.removeEventListener('mouseup', handleMouseUp);\n  }, [handleMouseUp]);\n\n  const handleByteClickCb = useCallback((idx: number) => {\n    setCursorOffset(idx);\n    if (onByteClick) {\n      onByteClick(idx, data[idx]);\n    }\n  }, [data, onByteClick]);\n\n  // Copy selection\n  const copySelection = useCallback((format: 'hex' | 'decimal' | 'ascii') => {\n    if (selectStart < 0 || selectEnd < 0) return;\n    const start = Math.min(selectStart, selectEnd);\n    const end = Math.max(selectStart, selectEnd);\n    const selected = data.slice(start, end + 1);\n\n    let text: string;\n    if (format === 'hex') {\n      text = Array.from(selected).map(b => byteToHex(b)).join(' ');\n    } else if (format === 'decimal') {\n      text = Array.from(selected).join(', ');\n    } else {\n      text = Array.from(selected).map(b => byteToAscii(b)).join('');\n    }\n    navigator.clipboard?.writeText(text);\n  }, [data, selectStart, selectEnd]);\n\n  // Interpretation of cursor byte\n  const interpretation = useMemo(() => {\n    if (cursorOffset < 0 || cursorOffset >= data.length) return null;\n    return interpretBytes(data, cursorOffset, localEndianness);\n  }, [data, cursorOffset, localEndianness]);\n\n  const renderedSearchResultEntries = useMemo(() => {\n    if (searchResults.length <= MAX_RENDERED_SEARCH_HIGHLIGHTS) {\n      return searchResults.map((pos, idx) => ({ pos, idx }));\n    }\n\n    const halfWindow = Math.floor(MAX_RENDERED_SEARCH_HIGHLIGHTS / 2);\n    const anchor = currentSearchIdx >= 0 ? currentSearchIdx : 0;\n    const start = Math.max(0, anchor - halfWindow);\n    const end = Math.min(searchResults.length, start + MAX_RENDERED_SEARCH_HIGHLIGHTS);\n    const adjustedStart = Math.max(0, end - MAX_RENDERED_SEARCH_HIGHLIGHTS);\n\n    return searchResults\n      .slice(adjustedStart, end)\n      .map((pos, i) => ({ pos, idx: adjustedStart + i }));\n  }, [searchResults, currentSearchIdx]);\n\n  // Search highlights\n  const allHighlights = useMemo(() => {\n    const h = [...highlights];\n    const searchLen = searchType === 'hex' ? searchQuery.replace(/\\s+/g, '').length / 2 : searchQuery.length;\n    renderedSearchResultEntries.forEach(({ pos, idx }) => {\n      h.push({\n        start: pos,\n        end: pos + Math.max(0, searchLen - 1),\n        color: idx === currentSearchIdx ? tokens.colors.status.serious : tokens.colors.status.caution,\n        label: `Search match ${idx + 1}`,\n      });\n    });\n    return h;\n  }, [highlights, renderedSearchResultEntries, currentSearchIdx, searchQuery, searchType, tokens]);\n\n  const containerStyle: React.CSSProperties = {\n    fontFamily: tokens.typography.fontFamily.mono,\n    fontSize: 13,\n    lineHeight: '22px',\n    background: tokens.colors.background.base,\n    border: bordered ? `1px solid ${tokens.colors.border.muted}` : 'none',\n    borderRadius: tokens.borderRadius.lg,\n    overflowX: 'hidden',\n    overflowY: hasConstrainedHeight ? 'auto' : 'visible',\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 0,\n    height: hasConstrainedHeight ? height : undefined,\n    color: tokens.colors.text.primary,\n    ...styleProp,\n  };\n\n  return (\n    <div\n      className={`hex-viewer ${className}`}\n      style={containerStyle}\n    >\n      {/* Sticky header: title bar + toolbar stay pinned while content scrolls */}\n      <div style={{\n        position: 'sticky',\n        top: 0,\n        zIndex: 10,\n        background: tokens.colors.background.surface,\n        flexShrink: 0,\n      }}>\n      {/* Title bar */}\n      {title && (\n        <div style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n        }}>\n          <span style={{ fontWeight: tokens.typography.fontWeight.medium, fontSize: tokens.typography.fontSize.base, fontFamily: tokens.typography.fontFamily.primary }}>\n            {title}\n          </span>\n          <span style={{ fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.muted }}>\n            {data.length.toLocaleString()} bytes\n          </span>\n        </div>\n      )}\n\n      {/* Toolbar */}\n      {showToolbar && (\n        <div role=\"toolbar\" aria-label=\"Hex viewer controls\" style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          gap: tokens.spacing.sm,\n          flexWrap: 'wrap',\n          fontSize: tokens.typography.fontSize.sm,\n        }}>\n          <label style={{ display: 'flex', alignItems: 'center', gap: 4, color: tokens.colors.text.muted }}>\n            Bytes/Row:\n            <select\n              aria-label=\"Bytes per row\"\n              value={localBytesPerRow}\n              onChange={e => setLocalBytesPerRow(Number(e.target.value) as 8 | 16 | 32)}\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: '2px 4px', fontSize: 11,\n              }}\n            >\n              <option value={8}>8</option>\n              <option value={16}>16</option>\n              <option value={32}>32</option>\n            </select>\n          </label>\n          <label style={{ display: 'flex', alignItems: 'center', gap: 4, color: tokens.colors.text.muted }}>\n            Group:\n            <select\n              aria-label=\"Byte grouping\"\n              value={localGrouping}\n              onChange={e => setLocalGrouping(Number(e.target.value) as ByteGrouping)}\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: '2px 4px', fontSize: 11,\n              }}\n            >\n              <option value={1}>1</option>\n              <option value={2}>2</option>\n              <option value={4}>4</option>\n              <option value={8}>8</option>\n            </select>\n          </label>\n          <label style={{ display: 'flex', alignItems: 'center', gap: 4, color: tokens.colors.text.muted }}>\n            Offset:\n            <select\n              aria-label=\"Offset format\"\n              value={localOffsetBase}\n              onChange={e => setLocalOffsetBase(e.target.value as OffsetBase)}\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: '2px 4px', fontSize: 11,\n              }}\n            >\n              <option value=\"hex\">Hex</option>\n              <option value=\"decimal\">Dec</option>\n            </select>\n          </label>\n          <label style={{ display: 'flex', alignItems: 'center', gap: 4, color: tokens.colors.text.muted }}>\n            Endian:\n            <select\n              aria-label=\"Endianness\"\n              value={localEndianness}\n              onChange={e => setLocalEndianness(e.target.value as Endianness)}\n              style={{\n                background: tokens.colors.background.base,\n                color: tokens.colors.text.primary,\n                border: `1px solid ${tokens.colors.border.muted}`,\n                borderRadius: tokens.borderRadius.md, padding: '2px 4px', fontSize: 11,\n              }}\n            >\n              <option value=\"big\">Big</option>\n              <option value=\"little\">Little</option>\n            </select>\n          </label>\n          <label style={{ display: 'flex', alignItems: 'center', gap: 4, color: tokens.colors.text.muted, cursor: 'pointer' }}>\n            <input\n              type=\"checkbox\"\n              checked={localShowAscii}\n              onChange={e => setLocalShowAscii(e.target.checked)}\n              style={{ accentColor: tokens.colors.interactive.default }}\n            />\n            ASCII\n          </label>\n          <div style={{ flex: 1 }} />\n          {selectStart >= 0 && selectEnd >= 0 && (\n            <div style={{ display: 'flex', gap: 4 }}>\n              {(['hex', 'decimal', 'ascii'] as const).map(fmt => (\n                <button\n                  key={fmt}\n                  onClick={() => copySelection(fmt)}\n                  style={{\n                    background: tokens.colors.background.base,\n                    color: tokens.colors.text.secondary,\n                    border: `1px solid ${tokens.colors.border.muted}`,\n                    borderRadius: tokens.borderRadius.md, padding: '2px 8px', fontSize: 10,\n                    cursor: 'pointer',\n                  }}\n                >\n                  Copy {fmt}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Search bar */}\n      {showSearch && (\n        <div role=\"search\" style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderBottom: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          gap: tokens.spacing.sm,\n        }}>\n          <label\n            htmlFor=\"hex-search-type\"\n            style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', border: 0 }}\n          >\n            Search type\n          </label>\n          <select\n            id=\"hex-search-type\"\n            value={searchType}\n            onChange={e => setSearchType(e.target.value as 'hex' | 'ascii')}\n            style={{\n              background: tokens.colors.background.base,\n              color: tokens.colors.text.primary,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`, fontSize: tokens.typography.fontSize.sm,\n            }}\n          >\n            <option value=\"hex\">Hex</option>\n            <option value=\"ascii\">ASCII</option>\n          </select>\n          <input\n            type=\"text\"\n            value={searchQuery}\n            onChange={e => setSearchQuery(e.target.value)}\n            onKeyDown={e => { if (e.key === 'Enter') doSearch(); }}\n            placeholder={searchType === 'hex' ? 'e.g. 48 65 6C 6C 6F' : 'Search ASCII...'}\n            aria-label=\"Search hex data\"\n            style={{\n              flex: 1,\n              background: tokens.colors.background.base,\n              color: tokens.colors.text.primary,\n              border: `1px solid ${tokens.colors.border.muted}`,\n              borderRadius: tokens.borderRadius.md, padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`, fontSize: tokens.typography.fontSize.sm,\n              outline: 'none',\n              fontFamily: 'inherit',\n            }}\n          />\n          <button onClick={doSearch} aria-label=\"Find matches\" style={{\n            background: tokens.colors.interactive.default,\n            color: tokens.colors.text.inverse, border: 'none', borderRadius: tokens.borderRadius.md,\n            padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`, fontSize: tokens.typography.fontSize.sm, cursor: 'pointer',\n            fontWeight: tokens.typography.fontWeight.medium,\n          }}>\n            Find\n          </button>\n          {searchResults.length > 0 && (\n            <>\n              <span style={{ fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.muted }} aria-live=\"polite\">\n                {currentSearchIdx + 1}/{searchResults.length}\n              </span>\n              <button onClick={prevSearchResult} aria-label=\"Previous match\" style={{ background: 'none', border: 'none', color: tokens.colors.text.secondary, cursor: 'pointer', fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.xs }}>&#x25B2;</button>\n              <button onClick={nextSearchResult} aria-label=\"Next match\" style={{ background: 'none', border: 'none', color: tokens.colors.text.secondary, cursor: 'pointer', fontSize: tokens.typography.fontSize.base, padding: tokens.spacing.xs }}>&#x25BC;</button>\n            </>\n          )}\n        </div>\n      )}\n      </div>{/* end sticky header */}\n\n      {/* Packet Header Summary (collapsible) */}\n      {shouldShowHeaderSummary && packetHeaders && packetHeaders.length > 0 && (\n        <div style={{ flexShrink: 0 }}>\n          <div\n            role=\"button\"\n            tabIndex={0}\n            aria-expanded={showHeaders}\n            aria-label=\"Toggle packet headers\"\n            onClick={() => setShowHeaders(!showHeaders)}\n            onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setShowHeaders(!showHeaders); } }}\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: tokens.spacing.sm,\n              padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n              background: tokens.colors.background.surface,\n              cursor: 'pointer',\n              borderBottom: `1px solid ${tokens.colors.border.muted}`,\n              userSelect: 'none',\n            }}\n          >\n            <span aria-hidden=\"true\" style={{ fontSize: tokens.typography.fontSize.micro, color: tokens.colors.text.muted, transition: 'transform 150ms ease', transform: showHeaders ? 'rotate(0deg)' : 'rotate(-90deg)' }}>\n              {'\\u25BC'}\n            </span>\n            <span style={{ fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.secondary, fontWeight: tokens.typography.fontWeight.medium }}>\n              Packet Headers\n            </span>\n          </div>\n          {showHeaders && (\n            <div style={{\n              padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n              borderBottom: `1px solid ${tokens.colors.border.muted}`,\n              background: tokens.colors.background.base,\n            }}>\n              <div style={{\n                display: 'grid',\n                gridTemplateColumns: 'auto 1fr',\n                gap: `${tokens.spacing.xxs} ${tokens.spacing.md}`,\n                fontSize: tokens.typography.fontSize.sm,\n                lineHeight: tokens.typography.lineHeight.tight,\n              }}>\n                {packetHeaders.map((entry, i) => (\n                  <React.Fragment key={i}>\n                    <span style={{ color: tokens.colors.text.muted }}>{entry.label}</span>\n                    <span style={{\n                      color: tokens.colors.text.primary,\n                      fontWeight: tokens.typography.fontWeight.medium,\n                      fontFamily: entry.mono ? tokens.typography.fontFamily.mono : 'inherit',\n                    }}>\n                      {entry.value}\n                    </span>\n                  </React.Fragment>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Decoded Fields Table (collapsible) */}\n      {shouldShowFieldsTable && decodedFields && decodedFields.length > 0 && (\n        <div style={{ flexShrink: 0 }}>\n          <div\n            role=\"button\"\n            tabIndex={0}\n            aria-expanded={showFields}\n            aria-label=\"Toggle decoded fields\"\n            onClick={() => setShowFields(!showFields)}\n            onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setShowFields(!showFields); } }}\n            style={{\n              display: 'flex',\n              alignItems: 'center',\n              gap: tokens.spacing.sm,\n              padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n              background: tokens.colors.background.surface,\n              cursor: 'pointer',\n              borderBottom: `1px solid ${tokens.colors.border.muted}`,\n              userSelect: 'none',\n            }}\n          >\n            <span aria-hidden=\"true\" style={{ fontSize: tokens.typography.fontSize.micro, color: tokens.colors.text.muted, transition: 'transform 150ms ease', transform: showFields ? 'rotate(0deg)' : 'rotate(-90deg)' }}>\n              {'\\u25BC'}\n            </span>\n            <span style={{ fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.secondary, fontWeight: tokens.typography.fontWeight.medium }}>\n              Decoded Fields ({decodedFields.length})\n            </span>\n          </div>\n          {showFields && (\n            <div\n              role=\"table\"\n              aria-label=\"Decoded packet fields\"\n              style={{\n                borderBottom: `1px solid ${tokens.colors.border.muted}`,\n                maxHeight: decodedFieldsMaxHeight,\n                overflowY: 'auto',\n              }}\n            >\n              {/* Fields table header */}\n              <div role=\"row\" style={{\n                display: 'flex',\n                alignItems: 'center',\n                padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n                borderBottom: `1px solid ${tokens.colors.border.muted}`,\n                gap: tokens.spacing.sm,\n                position: 'sticky',\n                top: 0,\n                background: tokens.colors.background.surface,\n                zIndex: 1,\n              }}>\n                <span role=\"columnheader\" style={{ flex: 2, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: 'uppercase', letterSpacing: '0.5px' }}>Field</span>\n                <span role=\"columnheader\" style={{ flex: 2, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: 'uppercase', letterSpacing: '0.5px', textAlign: 'right' }}>Value</span>\n                <span role=\"columnheader\" style={{ flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: 'uppercase', letterSpacing: '0.5px', textAlign: 'right' }}>Unit</span>\n                <span role=\"columnheader\" style={{ flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: 'uppercase', letterSpacing: '0.5px', textAlign: 'right' }}>Offset</span>\n                <span role=\"columnheader\" style={{ flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textTransform: 'uppercase', letterSpacing: '0.5px', textAlign: 'right' }}>Size</span>\n              </div>\n              {/* Field rows */}\n              {decodedFields.map((field, fi) => {\n                const isHovered = hoveredFieldIdx === fi;\n                return (\n                  <div\n                    key={fi}\n                    onMouseEnter={() => handleFieldHover(fi)}\n                    onMouseLeave={handleFieldLeave}\n                    title={field.description}\n                    style={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      padding: `3px ${tokens.spacing.smd}`,\n                      gap: tokens.spacing.sm,\n                      background: isHovered\n                        ? `${tokens.colors.status.caution}14`\n                        : (fi % 2 === 0 ? tokens.colors.background.base : 'transparent'),\n                      transition: 'background 0.15s ease',\n                      cursor: 'default',\n                      minHeight: tokens.elementSize.sm,\n                    }}\n                  >\n                    <span role=\"cell\" style={{\n                      flex: 2, fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.secondary,\n                      overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',\n                    }}>\n                      {field.name}\n                    </span>\n                    <span role=\"cell\" style={{\n                      flex: 2, fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.primary,\n                      fontWeight: tokens.typography.fontWeight.medium,\n                      fontFamily: tokens.typography.fontFamily.mono, textAlign: 'right',\n                    }}>\n                      {field.value === null || field.value === undefined ? '\\u2014' : String(field.value)}\n                    </span>\n                    <span role=\"cell\" style={{\n                      flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textAlign: 'right',\n                    }}>\n                      {field.unit || ''}\n                    </span>\n                    <span role=\"cell\" style={{\n                      flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textAlign: 'right',\n                      fontFamily: tokens.typography.fontFamily.mono,\n                    }}>\n                      {field.byteOffset !== undefined ? field.byteOffset : ''}\n                    </span>\n                    <span role=\"cell\" style={{\n                      flex: 1, fontSize: tokens.typography.fontSize.xxs, color: tokens.colors.text.muted, textAlign: 'right',\n                      fontFamily: tokens.typography.fontFamily.mono,\n                    }}>\n                      {field.sizeBits ? `${field.sizeBits}b` : ''}\n                    </span>\n                  </div>\n                );\n              })}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Region legend */}\n      {regions.length > 0 && (\n        <div\n          role=\"group\"\n          aria-label=\"Packet structure regions\"\n          style={{\n            padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n            borderBottom: `1px solid ${tokens.colors.border.muted}`,\n            display: 'flex',\n            alignItems: 'center',\n            gap: tokens.spacing.smd,\n            flexWrap: 'wrap',\n            fontSize: tokens.typography.fontSize.xxs,\n            background: tokens.colors.background.surface,\n          }}\n        >\n          {regions.map((r, i) => (\n            <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: tokens.spacing.xs }}>\n              <span aria-hidden=\"true\" style={{\n                display: 'inline-block',\n                width: 10, height: 10,\n                borderRadius: tokens.borderRadius.sm,\n                background: r.color,\n                border: `1px solid ${r.borderColor || 'transparent'}`,\n              }} />\n              <span style={{ color: tokens.colors.text.muted }}>\n                {r.label} ({r.end - r.start}B)\n              </span>\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Column headers */}\n      <div role=\"row\" aria-label=\"Column headers\" style={{\n        padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        borderBottom: `1px solid ${tokens.colors.border.muted}`,\n        display: 'flex',\n        alignItems: 'center',\n        fontSize: tokens.typography.fontSize.xxs,\n        color: tokens.colors.text.muted,\n        textTransform: 'uppercase',\n        letterSpacing: '0.5px',\n        fontWeight: tokens.typography.fontWeight.medium,\n        background: tokens.colors.background.surface,\n      }}>\n        {showOffset && <span style={{ marginRight: tokens.spacing.smd, minWidth: 60, textAlign: 'right' }}>Offset</span>}\n        <span style={{ flex: 1 }}>Hex</span>\n        {localShowAscii && (\n          <>\n            <span aria-hidden=\"true\" style={{ color: `${tokens.colors.border.muted}`, marginRight: tokens.spacing.sm }}>|</span>\n            <span>ASCII</span>\n          </>\n        )}\n      </div>\n\n      {/* Hex content */}\n      <div\n        ref={scrollRef}\n        role=\"grid\"\n        aria-label=\"Hex data\"\n        tabIndex={0}\n        onScroll={handleHexScroll}\n        style={{\n          flex: '1 1 160px',\n          minHeight: 160,\n          overflow: 'auto',\n          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n        }}\n      >\n        <div style={{ height: totalRows * HEX_ROW_HEIGHT, position: 'relative' }}>\n          <div style={{ position: 'absolute', top: startRow * HEX_ROW_HEIGHT, left: 0, right: 0 }}>\n            {virtualRows.map(row => (\n              <HexRow\n                key={row.offset}\n                offset={row.offset}\n                bytes={row.bytes}\n                bytesPerRow={localBytesPerRow}\n                byteGrouping={localGrouping}\n                offsetBase={localOffsetBase}\n                totalBytes={data.length}\n                showAscii={localShowAscii}\n                showOffset={showOffset}\n                highlights={allHighlights}\n                regions={sortedRegions}\n                effectiveHighlight={effectiveHighlight}\n                selectedStart={selectStart}\n                selectedEnd={selectEnd}\n                cursorOffset={cursorOffset}\n                onByteMouseDown={handleByteMouseDown}\n                onByteMouseEnter={handleByteMouseEnter}\n                onByteClick={handleByteClickCb}\n                handleByteHoverInternal={handleByteHoverInternal}\n                handleByteLeaveInternal={handleByteLeaveInternal}\n                tokens={tokens}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      {/* Highlight legend */}\n      {highlights.length > 0 && (\n        <div role=\"group\" aria-label=\"Search highlights\" style={{\n          padding: `${tokens.spacing.xs} ${tokens.spacing.smd}`,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          gap: tokens.spacing.smd,\n          flexWrap: 'wrap',\n          fontSize: tokens.typography.fontSize.xxs,\n          background: tokens.colors.background.surface,\n        }}>\n          {highlights.filter(h => h.label).map((h, i) => (\n            <span key={i} style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.xs }}>\n              <span aria-hidden=\"true\" style={{ width: 10, height: 10, borderRadius: tokens.borderRadius.sm, background: h.color, display: 'inline-block' }} />\n              <span style={{ color: tokens.colors.text.muted }}>\n                {h.label} (0x{h.start.toString(16)}-0x{h.end.toString(16)})\n              </span>\n            </span>\n          ))}\n        </div>\n      )}\n\n      {/* Status bar */}\n      {showStatusBar && (\n        <div role=\"status\" aria-live=\"polite\" style={{\n          padding: `${tokens.spacing.sm} ${tokens.spacing.smd}`,\n          borderTop: `1px solid ${tokens.colors.border.muted}`,\n          display: 'flex',\n          alignItems: 'center',\n          gap: tokens.spacing.md,\n          fontSize: tokens.typography.fontSize.sm,\n          background: tokens.colors.background.surface,\n          color: tokens.colors.text.muted,\n          flexWrap: 'wrap',\n        }}>\n          <span>Size: {data.length.toLocaleString()} bytes</span>\n          {cursorOffset >= 0 && cursorOffset < data.length && (\n            <>\n              <span>\n                Offset: 0x{cursorOffset.toString(16).toUpperCase()} ({cursorOffset})\n              </span>\n              <span>\n                Value: 0x{byteToHex(data[cursorOffset])} ({data[cursorOffset]})\n              </span>\n            </>\n          )}\n          {selectStart >= 0 && selectEnd >= 0 && selectStart !== selectEnd && (\n            <span>\n              Selection: {Math.abs(selectEnd - selectStart) + 1} bytes\n              (0x{Math.min(selectStart, selectEnd).toString(16).toUpperCase()}-0x{Math.max(selectStart, selectEnd).toString(16).toUpperCase()})\n            </span>\n          )}\n          {interpretation && (\n            <span style={{ display: 'flex', gap: tokens.spacing.sm, color: tokens.colors.text.secondary }}>\n              <span>U8: {interpretation.u8}</span>\n              <span>I8: {interpretation.i8}</span>\n              {interpretation.u16 !== undefined && <span>U16: {interpretation.u16}</span>}\n              {interpretation.u32 !== undefined && <span>U32: {interpretation.u32}</span>}\n              {interpretation.f32 !== undefined && <span>F32: {interpretation.f32.toFixed(6)}</span>}\n            </span>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport default HexViewer;\n"],"names":["width","HexRow"],"mappings":"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"}

package/dist/react/core/{ImageGallery.d.ts → widgets/ImageGallery.d.ts}

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ResponsiveValue } from './layout/useBreakpoint';
+import { ResponsiveValue } from '../layout/useBreakpoint';
 
 export interface GalleryImage {
     /** Unique identifier */

package/dist/react/core/{ImageGallery.js → widgets/ImageGallery.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { memo, useState, useEffect, useCallback } from "react";
-import { useBreakpoint, resolveResponsiveValue } from "./layout/useBreakpoint.js";
-import { Pagination } from "./Pagination.js";
-import { useTheme } from "../theme/ThemeProvider.js";
+import { useBreakpoint, resolveResponsiveValue } from "../layout/useBreakpoint.js";
+import { Pagination } from "../navigation/Pagination.js";
+import { useTheme } from "../../theme/ThemeProvider.js";
 const ImageGallery = memo(function ImageGallery2({
   images,
   columns = [2, 3, 4],