@zendir/ui 0.1.0

package/dist/react/core/ColorPickerPanel.js

@@ -0,0 +1,293 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect } from "react";
+import { PRESET_COLORS } from "../context/DisplaySettingsContext.js";
+import { AstroIcon } from "./AstroIcon.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+const COLOR_SWATCHES = Object.entries(PRESET_COLORS).map(([key, color]) => ({
+  key,
+  color,
+  label: key.charAt(0).toUpperCase() + key.slice(1)
+}));
+const TargetToggle = memo(function TargetToggle2({ value, onChange, tokens }) {
+  const targets = [
+    { key: "both", label: "Both" },
+    { key: "accent", label: "Accent" },
+    { key: "glass", label: "Glass" }
+  ];
+  return /* @__PURE__ */ jsx("div", { style: {
+    display: "flex",
+    gap: 2,
+    padding: 2,
+    backgroundColor: "rgba(255,255,255,0.05)",
+    borderRadius: tokens.borderRadius.sm
+  }, children: targets.map(({ key, label }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => onChange(key),
+      style: {
+        flex: 1,
+        padding: "4px 8px",
+        border: "none",
+        borderRadius: tokens.borderRadius.sm - 2,
+        backgroundColor: value === key ? "rgba(255,255,255,0.15)" : "transparent",
+        color: value === key ? tokens.colors.text.primary : tokens.colors.text.tertiary,
+        fontSize: "0.625rem",
+        // 10px in rem
+        fontWeight: value === key ? 600 : 400,
+        cursor: "pointer",
+        transition: "all 0.15s ease"
+      },
+      children: label
+    },
+    key
+  )) });
+});
+const ColorGrid = memo(function ColorGrid2({ selectedColor, onSelect, tokens: _tokens }) {
+  return /* @__PURE__ */ jsx("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "repeat(6, 1fr)",
+    gap: 4
+  }, children: COLOR_SWATCHES.map(({ key, color, label }) => {
+    const isSelected = selectedColor.toLowerCase() === color.toLowerCase();
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => onSelect(color),
+        "aria-label": `Select ${label}`,
+        title: label,
+        style: {
+          width: 24,
+          height: 24,
+          padding: 0,
+          border: isSelected ? "2px solid white" : "1px solid rgba(255,255,255,0.2)",
+          borderRadius: 4,
+          backgroundColor: color,
+          cursor: "pointer",
+          transition: "all 0.15s ease",
+          transform: isSelected ? "scale(1.1)" : "scale(1)",
+          boxShadow: isSelected ? `0 0 8px ${color}80` : "none"
+        },
+        onMouseEnter: (e) => {
+          if (!isSelected) {
+            e.currentTarget.style.transform = "scale(1.15)";
+            e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
+          }
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.transform = isSelected ? "scale(1.1)" : "scale(1)";
+          e.currentTarget.style.borderColor = isSelected ? "white" : "rgba(255,255,255,0.2)";
+        }
+      },
+      key
+    );
+  }) });
+});
+const ColorPickerPanel = memo(function ColorPickerPanel2({
+  accentColor,
+  glassTint,
+  colorTarget,
+  onAccentChange,
+  onGlassTintChange,
+  onTargetChange,
+  onColorSelect,
+  compact = true,
+  className = ""
+}) {
+  const { tokens, theme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const panelRef = useRef(null);
+  const triggerRef = useRef(null);
+  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+  const displayColor = colorTarget === "glass" ? glassTint : accentColor;
+  const handleColorSelect = (color) => {
+    if (onColorSelect) {
+      onColorSelect(color);
+    } else {
+      switch (colorTarget) {
+        case "accent":
+          onAccentChange(color);
+          break;
+        case "glass":
+          onGlassTintChange(color);
+          break;
+        case "both":
+        default:
+          onAccentChange(color);
+          onGlassTintChange(color);
+          break;
+      }
+    }
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (panelRef.current && !panelRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (event) => {
+      var _a;
+      if (event.key === "Escape") {
+        setIsOpen(false);
+        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }
+  }, [isOpen]);
+  if (compact) {
+    return /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, className, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: triggerRef,
+          onClick: () => setIsOpen(!isOpen),
+          "aria-label": "Open color picker",
+          "aria-expanded": isOpen,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 36,
+            height: 36,
+            padding: 0,
+            border: "2px solid rgba(255,255,255,0.3)",
+            borderRadius: tokens.borderRadius.md,
+            backgroundColor: displayColor,
+            cursor: "pointer",
+            transition: "all 0.15s ease",
+            boxShadow: isOpen ? `0 0 12px ${displayColor}60` : "none"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.borderColor = "rgba(255,255,255,0.5)";
+            e.currentTarget.style.transform = "scale(1.05)";
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.borderColor = "rgba(255,255,255,0.3)";
+            e.currentTarget.style.transform = "scale(1)";
+          },
+          children: /* @__PURE__ */ jsx(AstroIcon, { name: "palette", size: 16, color: "white" })
+        }
+      ),
+      isOpen && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          style: {
+            position: "absolute",
+            top: "100%",
+            right: 0,
+            marginTop: 8,
+            padding: 12,
+            backgroundColor: tokens.colors.background.elevated,
+            border: `1px solid ${tokens.colors.border.default}`,
+            borderRadius: tokens.borderRadius.lg,
+            boxShadow: tokens.shadows.lg,
+            zIndex: 1e3,
+            minWidth: 180
+          },
+          children: [
+            isTransparentTheme && /* @__PURE__ */ jsxs("div", { style: { marginBottom: 12 }, children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: "0.625rem",
+                // 10px in rem
+                fontWeight: 500,
+                color: tokens.colors.text.tertiary,
+                marginBottom: 6,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              }, children: "Apply to" }),
+              /* @__PURE__ */ jsx(
+                TargetToggle,
+                {
+                  value: colorTarget,
+                  onChange: onTargetChange,
+                  tokens
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                fontSize: "0.625rem",
+                // 10px in rem
+                fontWeight: 500,
+                color: tokens.colors.text.tertiary,
+                marginBottom: 6,
+                textTransform: "uppercase",
+                letterSpacing: "0.05em"
+              }, children: colorTarget === "glass" ? "Glass Tint" : colorTarget === "accent" ? "Accent Color" : "Color" }),
+              /* @__PURE__ */ jsx(
+                ColorGrid,
+                {
+                  selectedColor: displayColor,
+                  onSelect: handleColorSelect,
+                  tokens
+                }
+              )
+            ] }),
+            isTransparentTheme && colorTarget === "both" && accentColor !== glassTint && /* @__PURE__ */ jsxs("div", { style: {
+              marginTop: 12,
+              paddingTop: 12,
+              borderTop: `1px solid ${tokens.colors.border.muted}`,
+              display: "flex",
+              gap: 8,
+              fontSize: "0.625rem",
+              // 10px in rem
+              color: tokens.colors.text.tertiary
+            }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: 2,
+                  backgroundColor: accentColor,
+                  border: "1px solid rgba(255,255,255,0.2)"
+                } }),
+                "Accent"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 4 }, children: [
+                /* @__PURE__ */ jsx("span", { style: {
+                  width: 12,
+                  height: 12,
+                  borderRadius: 2,
+                  backgroundColor: glassTint,
+                  border: "1px solid rgba(255,255,255,0.2)"
+                } }),
+                "Glass"
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    isTransparentTheme && /* @__PURE__ */ jsx(
+      TargetToggle,
+      {
+        value: colorTarget,
+        onChange: onTargetChange,
+        tokens
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ColorGrid,
+      {
+        selectedColor: displayColor,
+        onSelect: handleColorSelect,
+        tokens
+      }
+    )
+  ] });
+});
+export {
+  ColorPickerPanel
+};
+//# sourceMappingURL=ColorPickerPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPanel.js","sources":["../../../src/react/core/ColorPickerPanel.tsx"],"sourcesContent":["/**\n * @zendir/ui - ColorPickerPanel Component\n * \n * Compact color picker with preset colors and target selector.\n * Used in AppBar for selecting accent and glass tint colors.\n * \n * Features:\n * - Preset color swatches grid\n * - Target toggle: Both | Accent Only | Glass Only\n * - Popover design with smooth animations\n * - Keyboard accessible\n * \n * @example\n * ```tsx\n * <ColorPickerPanel\n *   accentColor=\"#8b5cf6\"\n *   glassTint=\"#8b5cf6\"\n *   colorTarget=\"both\"\n *   onAccentChange={setAccentColor}\n *   onGlassTintChange={setGlassTint}\n *   onTargetChange={setColorTarget}\n * />\n * ```\n */\n\nimport React, { memo, useState, useRef, useEffect } from 'react';\nimport { useTheme } from '../theme';\nimport { PRESET_COLORS, type ColorTarget } from '../context/DisplaySettingsContext';\nimport { AstroIcon } from './AstroIcon';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface ColorPickerPanelProps {\n  /** Current accent color */\n  accentColor: string;\n  \n  /** Current glass tint color */\n  glassTint: string;\n  \n  /** Which color to affect: both, accent, or glass */\n  colorTarget: ColorTarget;\n  \n  /** Callback when accent color changes */\n  onAccentChange: (color: string) => void;\n  \n  /** Callback when glass tint changes */\n  onGlassTintChange: (color: string) => void;\n  \n  /** Callback when target changes */\n  onTargetChange: (target: ColorTarget) => void;\n  \n  /** Callback when any color is selected (respects target) */\n  onColorSelect?: (color: string) => void;\n  \n  /** Compact mode - show only trigger button */\n  compact?: boolean;\n  \n  /** Custom className */\n  className?: string;\n}\n\n// =============================================================================\n// Color Swatches\n// =============================================================================\n\nconst COLOR_SWATCHES = Object.entries(PRESET_COLORS).map(([key, color]) => ({\n  key,\n  color,\n  label: key.charAt(0).toUpperCase() + key.slice(1),\n}));\n\n// =============================================================================\n// Target Toggle Component\n// =============================================================================\n\ninterface TargetToggleProps {\n  value: ColorTarget;\n  onChange: (target: ColorTarget) => void;\n  tokens: any;\n}\n\nconst TargetToggle = memo(function TargetToggle({ value, onChange, tokens }: TargetToggleProps) {\n  const targets: { key: ColorTarget; label: string }[] = [\n    { key: 'both', label: 'Both' },\n    { key: 'accent', label: 'Accent' },\n    { key: 'glass', label: 'Glass' },\n  ];\n  \n  return (\n    <div style={{\n      display: 'flex',\n      gap: 2,\n      padding: 2,\n      backgroundColor: 'rgba(255,255,255,0.05)',\n      borderRadius: tokens.borderRadius.sm,\n    }}>\n      {targets.map(({ key, label }) => (\n        <button\n          key={key}\n          onClick={() => onChange(key)}\n          style={{\n            flex: 1,\n            padding: '4px 8px',\n            border: 'none',\n            borderRadius: tokens.borderRadius.sm - 2,\n            backgroundColor: value === key ? 'rgba(255,255,255,0.15)' : 'transparent',\n            color: value === key ? tokens.colors.text.primary : tokens.colors.text.tertiary,\n            fontSize: '0.625rem', // 10px in rem\n            fontWeight: value === key ? 600 : 400,\n            cursor: 'pointer',\n            transition: 'all 0.15s ease',\n          }}\n        >\n          {label}\n        </button>\n      ))}\n    </div>\n  );\n});\n\n// =============================================================================\n// Color Grid Component\n// =============================================================================\n\ninterface ColorGridProps {\n  selectedColor: string;\n  onSelect: (color: string) => void;\n  tokens: any;\n}\n\nconst ColorGrid = memo(function ColorGrid({ selectedColor, onSelect, tokens: _tokens }: ColorGridProps) {\n  return (\n    <div style={{\n      display: 'grid',\n      gridTemplateColumns: 'repeat(6, 1fr)',\n      gap: 4,\n    }}>\n      {COLOR_SWATCHES.map(({ key, color, label }) => {\n        const isSelected = selectedColor.toLowerCase() === color.toLowerCase();\n        \n        return (\n          <button\n            key={key}\n            onClick={() => onSelect(color)}\n            aria-label={`Select ${label}`}\n            title={label}\n            style={{\n              width: 24,\n              height: 24,\n              padding: 0,\n              border: isSelected ? '2px solid white' : '1px solid rgba(255,255,255,0.2)',\n              borderRadius: 4,\n              backgroundColor: color,\n              cursor: 'pointer',\n              transition: 'all 0.15s ease',\n              transform: isSelected ? 'scale(1.1)' : 'scale(1)',\n              boxShadow: isSelected ? `0 0 8px ${color}80` : 'none',\n            }}\n            onMouseEnter={(e) => {\n              if (!isSelected) {\n                e.currentTarget.style.transform = 'scale(1.15)';\n                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)';\n              }\n            }}\n            onMouseLeave={(e) => {\n              e.currentTarget.style.transform = isSelected ? 'scale(1.1)' : 'scale(1)';\n              e.currentTarget.style.borderColor = isSelected ? 'white' : 'rgba(255,255,255,0.2)';\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n});\n\n// =============================================================================\n// ColorPickerPanel Component\n// =============================================================================\n\nexport const ColorPickerPanel = memo(function ColorPickerPanel({\n  accentColor,\n  glassTint,\n  colorTarget,\n  onAccentChange,\n  onGlassTintChange,\n  onTargetChange,\n  onColorSelect,\n  compact = true,\n  className = '',\n}: ColorPickerPanelProps): React.ReactElement {\n  const { tokens, theme } = useTheme();\n  const [isOpen, setIsOpen] = useState(false);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  \n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n  \n  // Current display color based on target\n  const displayColor = colorTarget === 'glass' ? glassTint : accentColor;\n  \n  // Handle color selection\n  const handleColorSelect = (color: string) => {\n    if (onColorSelect) {\n      onColorSelect(color);\n    } else {\n      switch (colorTarget) {\n        case 'accent':\n          onAccentChange(color);\n          break;\n        case 'glass':\n          onGlassTintChange(color);\n          break;\n        case 'both':\n        default:\n          onAccentChange(color);\n          onGlassTintChange(color);\n          break;\n      }\n    }\n  };\n  \n  // Close panel when clicking outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        panelRef.current &&\n        !panelRef.current.contains(event.target as Node) &&\n        triggerRef.current &&\n        !triggerRef.current.contains(event.target as Node)\n      ) {\n        setIsOpen(false);\n      }\n    };\n    \n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside);\n      return () => document.removeEventListener('mousedown', handleClickOutside);\n    }\n  }, [isOpen]);\n  \n  // Close on escape key\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n    \n    if (isOpen) {\n      document.addEventListener('keydown', handleEscape);\n      return () => document.removeEventListener('keydown', handleEscape);\n    }\n  }, [isOpen]);\n  \n  if (compact) {\n    return (\n      <div style={{ position: 'relative' }} className={className}>\n        {/* Trigger Button */}\n        <button\n          ref={triggerRef}\n          onClick={() => setIsOpen(!isOpen)}\n          aria-label=\"Open color picker\"\n          aria-expanded={isOpen}\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            width: 36,\n            height: 36,\n            padding: 0,\n            border: '2px solid rgba(255,255,255,0.3)',\n            borderRadius: tokens.borderRadius.md,\n            backgroundColor: displayColor,\n            cursor: 'pointer',\n            transition: 'all 0.15s ease',\n            boxShadow: isOpen ? `0 0 12px ${displayColor}60` : 'none',\n          }}\n          onMouseEnter={(e) => {\n            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)';\n            e.currentTarget.style.transform = 'scale(1.05)';\n          }}\n          onMouseLeave={(e) => {\n            e.currentTarget.style.borderColor = 'rgba(255,255,255,0.3)';\n            e.currentTarget.style.transform = 'scale(1)';\n          }}\n        >\n          <AstroIcon name=\"palette\" size={16} color=\"white\" />\n        </button>\n        \n        {/* Popover Panel */}\n        {isOpen && (\n          <div\n            ref={panelRef}\n            style={{\n              position: 'absolute',\n              top: '100%',\n              right: 0,\n              marginTop: 8,\n              padding: 12,\n              backgroundColor: tokens.colors.background.elevated,\n              border: `1px solid ${tokens.colors.border.default}`,\n              borderRadius: tokens.borderRadius.lg,\n              boxShadow: tokens.shadows.lg,\n              zIndex: 1000,\n              minWidth: 180,\n            }}\n          >\n            {/* Target Toggle - only show for transparent themes */}\n            {isTransparentTheme && (\n              <div style={{ marginBottom: 12 }}>\n                <div style={{\n                  fontSize: '0.625rem', // 10px in rem\n                  fontWeight: 500,\n                  color: tokens.colors.text.tertiary,\n                  marginBottom: 6,\n                  textTransform: 'uppercase',\n                  letterSpacing: '0.05em',\n                }}>\n                  Apply to\n                </div>\n                <TargetToggle\n                  value={colorTarget}\n                  onChange={onTargetChange}\n                  tokens={tokens}\n                />\n              </div>\n            )}\n            \n            {/* Color Grid */}\n            <div>\n              <div style={{\n                fontSize: '0.625rem', // 10px in rem\n                fontWeight: 500,\n                color: tokens.colors.text.tertiary,\n                marginBottom: 6,\n                textTransform: 'uppercase',\n                letterSpacing: '0.05em',\n              }}>\n                {colorTarget === 'glass' ? 'Glass Tint' : colorTarget === 'accent' ? 'Accent Color' : 'Color'}\n              </div>\n              <ColorGrid\n                selectedColor={displayColor}\n                onSelect={handleColorSelect}\n                tokens={tokens}\n              />\n            </div>\n            \n            {/* Current Colors Display */}\n            {isTransparentTheme && colorTarget === 'both' && accentColor !== glassTint && (\n              <div style={{\n                marginTop: 12,\n                paddingTop: 12,\n                borderTop: `1px solid ${tokens.colors.border.muted}`,\n                display: 'flex',\n                gap: 8,\n                fontSize: '0.625rem', // 10px in rem\n                color: tokens.colors.text.tertiary,\n              }}>\n                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>\n                  <span style={{\n                    width: 12,\n                    height: 12,\n                    borderRadius: 2,\n                    backgroundColor: accentColor,\n                    border: '1px solid rgba(255,255,255,0.2)',\n                  }} />\n                  Accent\n                </div>\n                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>\n                  <span style={{\n                    width: 12,\n                    height: 12,\n                    borderRadius: 2,\n                    backgroundColor: glassTint,\n                    border: '1px solid rgba(255,255,255,0.2)',\n                  }} />\n                  Glass\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n  \n  // Expanded/inline mode\n  return (\n    <div className={className} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>\n      {isTransparentTheme && (\n        <TargetToggle\n          value={colorTarget}\n          onChange={onTargetChange}\n          tokens={tokens}\n        />\n      )}\n      <ColorGrid\n        selectedColor={displayColor}\n        onSelect={handleColorSelect}\n        tokens={tokens}\n      />\n    </div>\n  );\n});\n\nexport default ColorPickerPanel;\n"],"names":["TargetToggle","ColorGrid","ColorPickerPanel"],"mappings":"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"}

package/dist/react/core/CommandBuilder.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+
+export type CommandParamType = 'int' | 'uint' | 'float' | 'string' | 'boolean' | 'enum' | 'hex' | 'block';
+export interface CommandParameter {
+    /** Parameter name */
+    name: string;
+    /** Parameter type */
+    type: CommandParamType;
+    /** Description */
+    description?: string;
+    /** Default value */
+    default?: unknown;
+    /** Whether parameter is required (default: true) */
+    required?: boolean;
+    /** Minimum value (for numeric types) */
+    min?: number;
+    /** Maximum value (for numeric types) */
+    max?: number;
+    /** Bit size */
+    bitSize?: number;
+    /** Enum options (for enum type) */
+    options?: (string | number)[];
+    /** Units label */
+    units?: string;
+    /** Validation regex pattern (for string type) */
+    pattern?: string;
+    /** Whether this is a hazardous parameter */
+    hazardous?: boolean;
+    /** Hazardous description */
+    hazardousDescription?: string;
+}
+export interface CommandHistoryEntry {
+    id: string;
+    timestamp: Date;
+    target: string;
+    command: string;
+    parameters: Record<string, unknown>;
+    status: 'sent' | 'success' | 'error';
+    error?: string;
+}
+export interface CommandBuilderProps {
+    /** Target name */
+    target: string;
+    /** Command name */
+    command: string;
+    /** Command description */
+    description?: string;
+    /** Whether this is a hazardous command */
+    hazardous?: boolean;
+    /** Hazardous warning text */
+    hazardousDescription?: string;
+    /** Command parameters */
+    parameters: CommandParameter[];
+    /** Called when command is sent */
+    onSend: (params: Record<string, unknown>) => void | Promise<void>;
+    /** Command history entries */
+    history?: CommandHistoryEntry[];
+    /** Show command history (default: true) */
+    showHistory?: boolean;
+    /** Show raw command preview (default: true) */
+    showPreview?: boolean;
+    /** Whether send is disabled */
+    disabled?: boolean;
+    /** Height (default: auto) */
+    height?: number | string;
+    /** CSS class */
+    className?: string;
+    /** Show outer container border (default: true). Set false when embedded inside a Container/card. */
+    bordered?: boolean;
+    /** Custom style overrides for the outer container */
+    style?: React.CSSProperties;
+}
+export declare const CommandBuilder: React.NamedExoticComponent<CommandBuilderProps>;
+export default CommandBuilder;