@zendir/ui 0.4.1 → 0.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerPanel.js","sources":["../../../../src/react/core/widgets/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 '../display/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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"}
+{"version":3,"file":"ColorPickerPanel.js","names":[],"sources":["../../../../src/react/core/widgets/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 {\n  PRESET_COLORS,\n  type ColorTarget,\n} from \"../../context/DisplaySettingsContext\";\nimport { AstroIcon } from \"../display/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({\n  value,\n  onChange,\n  tokens,\n}: 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\n      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    >\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:\n              value === key ? \"rgba(255,255,255,0.15)\" : \"transparent\",\n            color:\n              value === key\n                ? tokens.colors.text.primary\n                : 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({\n  selectedColor,\n  onSelect,\n  tokens: _tokens,\n}: ColorGridProps) {\n  return (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: \"repeat(6, 1fr)\",\n        gap: 4,\n      }}\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\n                ? \"2px solid white\"\n                : \"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\n                ? \"scale(1.1)\"\n                : \"scale(1)\";\n              e.currentTarget.style.borderColor = isSelected\n                ? \"white\"\n                : \"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 =\n    theme === \"transparent\" ||\n    theme === \"transparent-bold\" ||\n    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 () =>\n        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\n                  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                >\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\n                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              >\n                {colorTarget === \"glass\"\n                  ? \"Glass Tint\"\n                  : colorTarget === \"accent\"\n                    ? \"Accent Color\"\n                    : \"Color\"}\n              </div>\n              <ColorGrid\n                selectedColor={displayColor}\n                onSelect={handleColorSelect}\n                tokens={tokens}\n              />\n            </div>\n\n            {/* Current Colors Display */}\n            {isTransparentTheme &&\n              colorTarget === \"both\" &&\n              accentColor !== glassTint && (\n                <div\n                  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                >\n                  <div\n                    style={{ display: \"flex\", alignItems: \"center\", gap: 4 }}\n                  >\n                    <span\n                      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                    />\n                    Accent\n                  </div>\n                  <div\n                    style={{ display: \"flex\", alignItems: \"center\", gap: 4 }}\n                  >\n                    <span\n                      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                    />\n                    Glass\n                  </div>\n                </div>\n              )}\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  // Expanded/inline mode\n  return (\n    <div\n      className={className}\n      style={{ display: \"flex\", flexDirection: \"column\", gap: 12 }}\n    >\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"],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type CommandParamType = 'int' | 'uint' | 'float' | 'string' | 'boolean' | 'enum' | 'hex' | 'block';
+export type CommandParamType = "int" | "uint" | "float" | "string" | "boolean" | "enum" | "hex" | "block";
 export interface CommandParameter {
     /** Parameter name */
     name: string;
@@ -35,7 +34,7 @@ export interface CommandHistoryEntry {
     target: string;
     command: string;
     parameters: Record<string, unknown>;
-    status: 'sent' | 'success' | 'error';
+    status: "sent" | "success" | "error";
     error?: string;
 }
 export interface CommandBuilderProps {