@zendir/ui 0.5.0 → 0.6.1

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

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

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-
 export interface FileNode {
     /** File/folder name */
     name: string;
@@ -20,9 +19,9 @@ export interface FileNode {
     /** Whether the file is readonly */
     readonly?: boolean;
 }
-export type FileViewMode = 'tree' | 'list';
-export type FileSortBy = 'name' | 'size' | 'modified';
-export type FileSortDir = 'asc' | 'desc';
+export type FileViewMode = "tree" | "list";
+export type FileSortBy = "name" | "size" | "modified";
+export type FileSortDir = "asc" | "desc";
 export interface FileExplorerProps {
     /** Root file tree */
     files: FileNode[];