@zendir/ui 0.5.0 → 0.6.0

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

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