@zendir/ui 0.1.0

package/dist/react/core/ConnectionForm.js

@@ -0,0 +1,496 @@
+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";
+const PROTOCOLS = ["wss", "ws", "mqtts", "mqtt", "tcp"];
+const 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"
+        }
+      )
+    ] })
+  ] });
+});
+export {
+  ConnectionForm
+};
+//# sourceMappingURL=ConnectionForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionForm.js","sources":["../../../src/react/core/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 './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/Container.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { StatusLevel } from '../utils';
+import { AstroIconName } from './AstroIcon';
+
+export type ContainerVariant = 'default' | 'elevated' | 'outlined' | 'ghost' | 'glass' | 'glass-dark' | 'glass-light';
+export type ContainerPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface ContainerProps {
+    /** Visual variant */
+    variant?: ContainerVariant;
+    /** Padding size */
+    padding?: ContainerPadding;
+    /** Container title */
+    title?: React.ReactNode;
+    /** Subtitle or description */
+    subtitle?: React.ReactNode;
+    /** Status indicator (affects left border in non-glass mode) */
+    status?: StatusLevel;
+    /** Header actions (buttons, etc.) */
+    actions?: React.ReactNode;
+    /** Full height */
+    fullHeight?: boolean;
+    /**
+     * Clip overflowing content area when fullHeight is enabled.
+     * Keep false for form cards so wrapped rows can expand naturally.
+     */
+    clipContent?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Children */
+    children: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Click handler */
+    onClick?: () => void;
+    /** Disable auto-glass effect in transparent theme */
+    disableAutoGlass?: boolean;
+    /** Icon to display in header (Astro icon name) */
+    icon?: AstroIconName;
+    /** Icon status - shows status symbol and colors icon accordingly */
+    iconStatus?: StatusLevel;
+    /** Custom status message shown in tooltip (overrides default description) */
+    statusMessage?: string;
+    /** Custom icon color (overrides iconStatus and theme color) */
+    iconColor?: string;
+    /** Custom accent color for glass mode (title, line, etc.) */
+    accentColor?: string;
+}
+export declare const Container: React.NamedExoticComponent<ContainerProps>;
+export default Container;