@zendir/ui 0.4.1 → 0.6.0

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

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