@imperosoft/cris-webui-components 0.1.0-beta.5 → 0.1.0-beta.7

package/dist/index.d.mts

@@ -24,6 +24,8 @@ interface CrisButtonProps {
     iconClass?: string;
     /** Icon size - number (px), string ('50%', '2rem'), or preset ('xs'|'sm'|'md'|'lg'|'xl') */
     iconSize?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Icon container size as percentage (default: 80% for top/bottom, 20% for left/right) */
+    iconContainerSize?: string;
     /** Icon inline style */
     iconStyle?: React.CSSProperties;
     /** Icon position relative to text */
@@ -51,7 +53,7 @@ interface CrisButtonProps {
     /** Custom release handler */
     onRelease?: () => void;
 }
-declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconStyle, iconPosition, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconContainerSize, iconStyle, iconPosition, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
 interface CrisTextProps {
     /** Serial join for indirect text */

package/dist/index.d.ts

@@ -24,6 +24,8 @@ interface CrisButtonProps {
     iconClass?: string;
     /** Icon size - number (px), string ('50%', '2rem'), or preset ('xs'|'sm'|'md'|'lg'|'xl') */
     iconSize?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Icon container size as percentage (default: 80% for top/bottom, 20% for left/right) */
+    iconContainerSize?: string;
     /** Icon inline style */
     iconStyle?: React.CSSProperties;
     /** Icon position relative to text */
@@ -51,7 +53,7 @@ interface CrisButtonProps {
     /** Custom release handler */
     onRelease?: () => void;
 }
-declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconStyle, iconPosition, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
+declare function CrisButton({ join, joinFeedback, joinEnable, joinVisible, text, textPressed, textSelected, icon, iconName, iconClass, iconSize, iconContainerSize, iconStyle, iconPosition, showControlFeedback, showLocalFeedback, suppressKeyClicks, smartId, className, classActive, classPressed, classDisabled, children, onPress, onRelease, }: CrisButtonProps): react_jsx_runtime.JSX.Element | null;
 
 interface CrisTextProps {
     /** Serial join for indirect text */

package/dist/index.js

@@ -75,6 +75,7 @@ function CrisButton({
   iconName,
   iconClass,
   iconSize,
+  iconContainerSize,
   iconStyle,
   iconPosition = "top",
   showControlFeedback = true,
@@ -174,7 +175,7 @@ function CrisButton({
       computedIconStyle.filter = filter;
     }
   }
-  const renderIcon = () => {
+  const renderIconElement = () => {
     if (icon) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: iconClasses, style: computedIconStyle, children: icon });
     }
@@ -194,6 +195,13 @@ function CrisButton({
     }
     return null;
   };
+  const isVertical = iconPosition === "top" || iconPosition === "bottom";
+  const hasText = currentText !== "";
+  const defaultContainerSize = hasText ? isVertical ? "80%" : "20%" : "100%";
+  const containerSize = iconContainerSize ?? defaultContainerSize;
+  const textContainerSize = `calc(100% - ${containerSize})`;
+  const iconContainerStyle = isVertical ? { height: containerSize, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" } : { width: containerSize, height: "100%", display: "flex", alignItems: "center", justifyContent: "center" };
+  const textContainerStyle = isVertical ? { height: textContainerSize, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" } : { width: textContainerSize, height: "100%", display: "flex", alignItems: "center", justifyContent: "center" };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -207,8 +215,8 @@ function CrisButton({
       onTouchCancel: handleRelease,
       children: [
         children,
-        hasIcon && renderIcon(),
-        currentText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cris-button-text", children: currentText })
+        hasIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cris-button-icon-container", style: iconContainerStyle, children: renderIconElement() }),
+        currentText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "cris-button-text-container", style: textContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cris-button-text", children: currentText }) })
       ]
     }
   );

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/CrisButton.tsx","../src/utils/icons.ts","../src/components/CrisText.tsx","../src/components/CrisSlider.tsx","../src/components/CrisGauge.tsx"],"sourcesContent":["/**\r\n * @imperosoft/cris-webui-components\r\n *\r\n * CRIS - Crestron React Impero Soft WebUI components library\r\n *\r\n * Provides reusable UI components for Crestron touch panel interfaces.\r\n */\r\n\r\n// Components\r\nexport { CrisButton } from './components/CrisButton';\r\nexport type { CrisButtonProps } from './components/CrisButton';\r\n\r\nexport { CrisText } from './components/CrisText';\r\nexport type { CrisTextProps } from './components/CrisText';\r\n\r\nexport { CrisSlider } from './components/CrisSlider';\r\nexport type { CrisSliderProps } from './components/CrisSlider';\r\n\r\nexport { CrisGauge } from './components/CrisGauge';\r\nexport type { CrisGaugeProps } from './components/CrisGauge';\r\n\r\n// Utilities\r\nexport { configureIcons, getIconUrl, getIconFilter, getIconConfig } from './utils/icons';\r\nexport type { IconConfig } from './utils/icons';\r\n","import { useState, useRef, ReactNode } from 'react';\r\nimport { useDigital, useJoinsStore } from '@imperosoft/cris-webui-core';\r\nimport { getIconUrl, getIconFilter } from '../utils/icons';\r\n\r\nexport interface CrisButtonProps {\r\n  /** Digital join for press action */\r\n  join?: number;\r\n  /** Digital join for feedback (defaults to join) */\r\n  joinFeedback?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Button text */\r\n  text?: string;\r\n  /** Text when pressed (local feedback) */\r\n  textPressed?: string;\r\n  /** Text when selected (controller feedback) */\r\n  textSelected?: string;\r\n\r\n  /** Icon as ReactNode (for custom SVG components) */\r\n  icon?: ReactNode;\r\n  /** Icon name (loads SVG from configured path, e.g., 'motor-stop') */\r\n  iconName?: string;\r\n  /** Icon CSS class (for CSS-based icons, e.g., 'ico-motor-stop') */\r\n  iconClass?: string;\r\n  /** Icon size - number (px), string ('50%', '2rem'), or preset ('xs'|'sm'|'md'|'lg'|'xl') */\r\n  iconSize?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  /** Icon inline style */\r\n  iconStyle?: React.CSSProperties;\r\n  /** Icon position relative to text */\r\n  iconPosition?: 'left' | 'right' | 'top' | 'bottom';\r\n\r\n  /** Show controller feedback styling */\r\n  showControlFeedback?: boolean;\r\n  /** Show local press feedback styling */\r\n  showLocalFeedback?: boolean;\r\n  /** Suppress click actions (display only) */\r\n  suppressKeyClicks?: boolean;\r\n\r\n  /** Smart object ID (for smarts instead of joins) */\r\n  smartId?: number;\r\n\r\n  /** Custom class names */\r\n  className?: string;\r\n  /** Class when active (controller feedback) */\r\n  classActive?: string;\r\n  /** Class when pressed (local feedback) */\r\n  classPressed?: string;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n\r\n  /** Children content */\r\n  children?: ReactNode;\r\n\r\n  /** Custom click handler (called on press) */\r\n  onPress?: () => void;\r\n  /** Custom release handler */\r\n  onRelease?: () => void;\r\n}\r\n\r\nexport function CrisButton({\r\n  join,\r\n  joinFeedback,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  textPressed,\r\n  textSelected,\r\n  icon,\r\n  iconName,\r\n  iconClass,\r\n  iconSize,\r\n  iconStyle,\r\n  iconPosition = 'top',\r\n  showControlFeedback = true,\r\n  showLocalFeedback = true,\r\n  suppressKeyClicks = false,\r\n  smartId,\r\n  className = '',\r\n  classActive = '',\r\n  classPressed = '',\r\n  classDisabled = '',\r\n  children,\r\n  onPress,\r\n  onRelease,\r\n}: CrisButtonProps) {\r\n  const [pressed, setPressed] = useState(false);\r\n  const pressedRef = useRef(false);\r\n\r\n  // Get join values reactively\r\n  const feedbackJoin = joinFeedback ?? join;\r\n  const feedback = useDigital(feedbackJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Get action method\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n\r\n  // Determine if button is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if button is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Determine current feedback state\r\n  const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;\r\n  const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;\r\n\r\n  // Determine current text\r\n  let currentText = text ?? '';\r\n  if (hasPressedFeedback && textPressed != null) {\r\n    currentText = textPressed;\r\n  } else if (hasControlFeedback && textSelected != null) {\r\n    currentText = textSelected;\r\n  }\r\n\r\n  // Event handlers\r\n  const handlePress = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (pressedRef.current) return;\r\n\r\n    pressedRef.current = true;\r\n    setPressed(true);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onPress?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, true);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  const handleRelease = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (!pressedRef.current) return;\r\n\r\n    pressedRef.current = false;\r\n    setPressed(false);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onRelease?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, false);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const classes = [\r\n    'cris-button',\r\n    className,\r\n    hasControlFeedback && classActive,\r\n    hasPressedFeedback && classPressed,\r\n    !isEnabled && classDisabled,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Flex direction based on icon position\r\n  const flexDirection =\r\n    iconPosition === 'top'\r\n      ? 'flex-col'\r\n      : iconPosition === 'bottom'\r\n        ? 'flex-col-reverse'\r\n        : iconPosition === 'left'\r\n          ? 'flex-row'\r\n          : 'flex-row-reverse';\r\n\r\n  // Determine if we have any icon to show\r\n  const hasIcon = icon != null || iconName != null || iconClass != null;\r\n\r\n  // Size presets mapping\r\n  const sizePresets: Record<string, string> = {\r\n    xs: '16px',\r\n    sm: '24px',\r\n    md: '32px',\r\n    lg: '48px',\r\n    xl: '64px',\r\n  };\r\n\r\n  // Calculate icon size value\r\n  const getIconSizeValue = (): string | undefined => {\r\n    if (iconSize == null) return undefined;\r\n    if (typeof iconSize === 'number') return `${iconSize}px`;\r\n    if (iconSize in sizePresets) return sizePresets[iconSize];\r\n    return iconSize; // Already a string like '50%' or '2rem'\r\n  };\r\n\r\n  const iconSizeValue = getIconSizeValue();\r\n\r\n  // Build icon classes\r\n  const iconClasses = [\r\n    'cris-button-icon',\r\n    iconClass,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Build icon style with size and filter support\r\n  const computedIconStyle: React.CSSProperties = {\r\n    ...iconStyle,\r\n  };\r\n\r\n  // Apply size\r\n  if (iconSizeValue) {\r\n    computedIconStyle.width = iconSizeValue;\r\n    computedIconStyle.height = iconSizeValue;\r\n  }\r\n\r\n  // Apply filter from config if using iconName (only if not overridden by iconStyle)\r\n  if (iconName && !iconStyle?.filter) {\r\n    const filter = getIconFilter(hasControlFeedback || hasPressedFeedback);\r\n    if (filter) {\r\n      computedIconStyle.filter = filter;\r\n    }\r\n  }\r\n\r\n  // Render icon element\r\n  const renderIcon = () => {\r\n    if (icon) {\r\n      // ReactNode icon (custom component)\r\n      return <span className={iconClasses} style={computedIconStyle}>{icon}</span>;\r\n    }\r\n\r\n    if (iconName) {\r\n      // Icon by name (loads from configured path)\r\n      return (\r\n        <img\r\n          className={iconClasses}\r\n          style={computedIconStyle}\r\n          src={getIconUrl(iconName)}\r\n          alt=\"\"\r\n        />\r\n      );\r\n    }\r\n\r\n    if (iconClass) {\r\n      // CSS-based icon (like Angular version)\r\n      return <img className={iconClasses} style={computedIconStyle} alt=\"\" />;\r\n    }\r\n\r\n    return null;\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`${classes} flex items-center justify-center ${flexDirection}`}\r\n      style={{ cursor: suppressKeyClicks ? 'default' : 'pointer' }}\r\n      onMouseDown={handlePress}\r\n      onMouseUp={handleRelease}\r\n      onMouseLeave={handleRelease}\r\n      onTouchStart={handlePress}\r\n      onTouchEnd={handleRelease}\r\n      onTouchCancel={handleRelease}\r\n    >\r\n      {children}\r\n      {hasIcon && renderIcon()}\r\n      {currentText && <span className=\"cris-button-text\">{currentText}</span>}\r\n    </div>\r\n  );\r\n}\r\n","/**\r\n * Icon configuration and utilities for CRIS components\r\n *\r\n * Supports different base paths for dev vs production (Crestron controller)\r\n */\r\n\r\nexport interface IconConfig {\r\n  /** Base path for icon assets (e.g., '/assets/icons/' or 'http://controller/icons/') */\r\n  basePath: string;\r\n  /** File extension (default: 'svg') */\r\n  extension: string;\r\n  /** Default filter for inactive state */\r\n  defaultFilter?: string;\r\n  /** Default filter for active state */\r\n  activeFilter?: string;\r\n}\r\n\r\n// Default configuration\r\nlet iconConfig: IconConfig = {\r\n  basePath: '/assets/icons/',\r\n  extension: 'svg',\r\n  defaultFilter: undefined,\r\n  activeFilter: undefined,\r\n};\r\n\r\n/**\r\n * Configure icon paths and defaults\r\n * Call this once at app startup\r\n *\r\n * @example\r\n * // Development\r\n * configureIcons({ basePath: '/assets/icons/' });\r\n *\r\n * // Production on Crestron controller\r\n * configureIcons({ basePath: '/html/icons/' });\r\n *\r\n * // With color filters\r\n * configureIcons({\r\n *   basePath: '/assets/icons/',\r\n *   defaultFilter: 'brightness(0) invert(1)', // white\r\n *   activeFilter: 'brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(0deg)', // red\r\n * });\r\n */\r\nexport function configureIcons(config: Partial<IconConfig>): void {\r\n  iconConfig = { ...iconConfig, ...config };\r\n}\r\n\r\n/**\r\n * Get current icon configuration\r\n */\r\nexport function getIconConfig(): IconConfig {\r\n  return iconConfig;\r\n}\r\n\r\n/**\r\n * Get full URL for an icon\r\n *\r\n * @param name - Icon name (without path or extension), e.g., 'motor-stop'\r\n * @returns Full URL to the icon\r\n */\r\nexport function getIconUrl(name: string): string {\r\n  if (!name) return '';\r\n\r\n  // If already a full URL or path, return as-is\r\n  if (name.startsWith('http') || name.startsWith('/') || name.startsWith('.')) {\r\n    return name;\r\n  }\r\n\r\n  const { basePath, extension } = iconConfig;\r\n  const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`;\r\n  return `${normalizedBase}${name}.${extension}`;\r\n}\r\n\r\n/**\r\n * Get CSS filter for icon state\r\n */\r\nexport function getIconFilter(active: boolean): string | undefined {\r\n  return active ? iconConfig.activeFilter : iconConfig.defaultFilter;\r\n}\r\n","import { ReactNode } from 'react';\r\nimport { useDigital, useSerial, useCipDecode } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisTextProps {\r\n  /** Serial join for indirect text */\r\n  joinIndirectText?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n  /** Static text (used if no joinIndirectText) */\r\n  text?: string;\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Text element CSS class */\r\n  textClassName?: string;\r\n  /** Text element inline style */\r\n  textStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n  /** Children content */\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function CrisText({\r\n  joinIndirectText,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  className = '',\r\n  style,\r\n  textClassName = '',\r\n  textStyle,\r\n  classDisabled = '',\r\n  children,\r\n}: CrisTextProps) {\r\n  // Get join values reactively\r\n  const indirectText = useSerial(joinIndirectText ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if text is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if text is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get the raw text - indirect text or static text\r\n  const rawText = joinIndirectText != null ? indirectText : (text ?? '');\r\n\r\n  // Decode CIP patterns in the text\r\n  const currentText = useCipDecode(rawText);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-text',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div className={containerClasses} style={style}>\r\n      {children}\r\n      {currentText && (\r\n        <span className={`cris-text-text ${textClassName}`} style={textStyle}>\r\n          {currentText}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { useDigital, useAnalog, useJoinsStore } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisSliderProps {\r\n  /** Analog join for value (shared with digital if joinDigital not set) */\r\n  join?: number;\r\n  /** Digital join for press/release feedback */\r\n  joinDigital?: number;\r\n  /** Analog join for value (overrides join) */\r\n  joinAnalog?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Horizontal orientation (default false = vertical) */\r\n  horizontal?: boolean;\r\n  /** Hide fill bar */\r\n  fillHidden?: boolean;\r\n  /** Track size as percentage of container (default 20) */\r\n  trackSizePercent?: number;\r\n  /** Thumb size as percentage of container (default 4) */\r\n  thumbSizePercent?: number;\r\n  /** Delay in ms after drag before updating from feedback (default 1000) */\r\n  delayMsAfterDragUpdateFeedback?: number;\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Bar/track CSS class */\r\n  barClassName?: string;\r\n  /** Bar/track inline style */\r\n  barStyle?: React.CSSProperties;\r\n  /** Fill CSS class */\r\n  fillClassName?: string;\r\n  /** Fill inline style */\r\n  fillStyle?: React.CSSProperties;\r\n  /** Thumb CSS class */\r\n  thumbClassName?: string;\r\n  /** Thumb inline style */\r\n  thumbStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisSlider({\r\n  join,\r\n  joinDigital,\r\n  joinAnalog,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  horizontal = false,\r\n  fillHidden = false,\r\n  trackSizePercent = 20,\r\n  thumbSizePercent = 4,\r\n  delayMsAfterDragUpdateFeedback = 1000,\r\n  className = '',\r\n  style,\r\n  barClassName = '',\r\n  barStyle,\r\n  fillClassName = '',\r\n  fillStyle,\r\n  thumbClassName = '',\r\n  thumbStyle,\r\n  classDisabled = '',\r\n}: CrisSliderProps) {\r\n  // Effective joins\r\n  const effectiveAnalogJoin = joinAnalog ?? join;\r\n  const effectiveDigitalJoin = joinDigital ?? join;\r\n\r\n  // Get join values reactively\r\n  const analogValue = useAnalog(effectiveAnalogJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Action methods\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n  const aSet = useJoinsStore((state) => state.aSet);\r\n\r\n  // Local state\r\n  const [ratioCurrent, setRatioCurrent] = useState(0);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const isDraggingOrJustAfterRef = useRef(false);\r\n  const ratioBeforeDragRef = useRef(0);\r\n  const afterDragTimeoutRef = useRef<number | null>(null);\r\n  const touchingRef = useRef(false);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Convert analog value to ratio\r\n  const analogToRatio = useCallback(\r\n    (value: number) => {\r\n      const range = maxValue - minValue;\r\n      if (range <= 0) return 0;\r\n      return Math.max(0, Math.min(1, (value - minValue) / range));\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Convert ratio to analog value\r\n  const ratioToAnalog = useCallback(\r\n    (ratio: number) => {\r\n      const range = maxValue - minValue;\r\n      return Math.round(minValue + ratio * range);\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Update ratio from controller feedback\r\n  const updateFromFeedback = useCallback(() => {\r\n    if (!isDraggingOrJustAfterRef.current && effectiveAnalogJoin != null) {\r\n      setRatioCurrent(analogToRatio(analogValue));\r\n    }\r\n  }, [analogValue, analogToRatio, effectiveAnalogJoin]);\r\n\r\n  // Update from feedback when analog value changes\r\n  useEffect(() => {\r\n    updateFromFeedback();\r\n  }, [updateFromFeedback]);\r\n\r\n  // Handle drag start\r\n  const handleDragStart = useCallback(() => {\r\n    if (!isEnabled) return;\r\n\r\n    setIsDragging(true);\r\n\r\n    // Send digital press\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, true);\r\n    }\r\n\r\n    // Save ratio before drag\r\n    if (!isDraggingOrJustAfterRef.current) {\r\n      ratioBeforeDragRef.current = ratioCurrent;\r\n    }\r\n    isDraggingOrJustAfterRef.current = true;\r\n\r\n    // Clear any pending timeout\r\n    if (afterDragTimeoutRef.current !== null) {\r\n      window.clearTimeout(afterDragTimeoutRef.current);\r\n      afterDragTimeoutRef.current = null;\r\n    }\r\n  }, [isEnabled, effectiveDigitalJoin, dSet, ratioCurrent]);\r\n\r\n  // Handle drag end\r\n  const handleDragEnd = useCallback(() => {\r\n    if (!isDragging) return;\r\n\r\n    setIsDragging(false);\r\n\r\n    // Send digital release\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, false);\r\n    }\r\n\r\n    // Schedule feedback update after delay\r\n    if (delayMsAfterDragUpdateFeedback > 0) {\r\n      afterDragTimeoutRef.current = window.setTimeout(() => {\r\n        isDraggingOrJustAfterRef.current = false;\r\n        updateFromFeedback();\r\n        afterDragTimeoutRef.current = null;\r\n      }, delayMsAfterDragUpdateFeedback);\r\n    } else {\r\n      isDraggingOrJustAfterRef.current = false;\r\n      updateFromFeedback();\r\n    }\r\n  }, [isDragging, effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback]);\r\n\r\n  // Handle move/drag\r\n  const handleMove = useCallback(\r\n    (clientX: number, clientY: number, bounds: DOMRect) => {\r\n      if (!isDragging) return;\r\n\r\n      let newRatio: number;\r\n      if (horizontal) {\r\n        newRatio = (clientX - bounds.left) / bounds.width;\r\n      } else {\r\n        newRatio = 1 - (clientY - bounds.top) / bounds.height;\r\n      }\r\n      newRatio = Math.max(0, Math.min(1, newRatio));\r\n\r\n      setRatioCurrent(newRatio);\r\n\r\n      // Send analog value\r\n      if (effectiveAnalogJoin != null) {\r\n        aSet(effectiveAnalogJoin, ratioToAnalog(newRatio));\r\n      }\r\n    },\r\n    [isDragging, horizontal, effectiveAnalogJoin, aSet, ratioToAnalog]\r\n  );\r\n\r\n  // Mouse handlers\r\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (touchingRef.current) return;\r\n    if (event.button !== 0) return;\r\n\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (isDragging) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      handleMove(event.clientX, event.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Touch handlers\r\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    touchingRef.current = true;\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchEnd = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleTouchCancel = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (isDragging && event.touches.length > 0) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      const touch = event.touches[0];\r\n      handleMove(touch.clientX, touch.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-slider',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Calculate bar style\r\n  const computedBarStyle: React.CSSProperties = {\r\n    ...barStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const width = 100 - thumbSizePercent;\r\n    const left = (100 - width) / 2;\r\n    computedBarStyle.height = `${trackSizePercent}%`;\r\n    computedBarStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.width = `${width}%`;\r\n    computedBarStyle.left = `${left}%`;\r\n  } else {\r\n    const height = 100 - thumbSizePercent;\r\n    const top = (100 - height) / 2;\r\n    computedBarStyle.width = `${trackSizePercent}%`;\r\n    computedBarStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.height = `${height}%`;\r\n    computedBarStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate fill style\r\n  const computedFillStyle: React.CSSProperties = {\r\n    ...fillStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const range = 100 - thumbSizePercent;\r\n    const left = thumbSizePercent / 2;\r\n    const width = range * ratioCurrent;\r\n    computedFillStyle.height = `${trackSizePercent}%`;\r\n    computedFillStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.width = `${width}%`;\r\n    computedFillStyle.left = `${left}%`;\r\n  } else {\r\n    const range = 100 - thumbSizePercent;\r\n    const top = 100 - (range * ratioCurrent + thumbSizePercent / 2);\r\n    const height = range + thumbSizePercent / 2 - top;\r\n    computedFillStyle.width = `${trackSizePercent}%`;\r\n    computedFillStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.height = `${height}%`;\r\n    computedFillStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate thumb style\r\n  const computedThumbStyle: React.CSSProperties = {\r\n    ...thumbStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const maxLeft = 100 - thumbSizePercent;\r\n    const left = maxLeft * ratioCurrent;\r\n    computedThumbStyle.width = `${thumbSizePercent}%`;\r\n    computedThumbStyle.height = '100%';\r\n    computedThumbStyle.left = `${left}%`;\r\n  } else {\r\n    const maxTop = 100 - thumbSizePercent;\r\n    const top = maxTop - maxTop * ratioCurrent;\r\n    computedThumbStyle.width = '100%';\r\n    computedThumbStyle.height = `${thumbSizePercent}%`;\r\n    computedThumbStyle.top = `${top}%`;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={containerClasses}\r\n      style={{\r\n        ...style,\r\n        position: 'relative',\r\n        cursor: isEnabled ? 'pointer' : 'default',\r\n        touchAction: 'none',\r\n        userSelect: 'none',\r\n      }}\r\n      onMouseDown={handleMouseDown}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseUp={handleMouseUp}\r\n      onMouseLeave={handleMouseLeave}\r\n      onTouchStart={handleTouchStart}\r\n      onTouchMove={handleTouchMove}\r\n      onTouchEnd={handleTouchEnd}\r\n      onTouchCancel={handleTouchCancel}\r\n    >\r\n      {/* Bar/Track */}\r\n      <div className={`cris-slider-bar ${barClassName}`} style={computedBarStyle} />\r\n\r\n      {/* Fill */}\r\n      {!fillHidden && (\r\n        <div className={`cris-slider-fill ${fillClassName}`} style={computedFillStyle} />\r\n      )}\r\n\r\n      {/* Thumb */}\r\n      <div className={`cris-slider-thumb ${thumbClassName}`} style={computedThumbStyle} />\r\n    </div>\r\n  );\r\n}\r\n","import { useAnalog, useDigital } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisGaugeProps {\r\n  /** Static value (used if no join) */\r\n  value?: number;\r\n  /** Analog join for value */\r\n  join?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Number of segments (default 20) */\r\n  segments?: number;\r\n  /** Invert direction (default false) */\r\n  inverted?: boolean;\r\n  /** Orientation (default vertical) */\r\n  orientation?: 'vertical' | 'horizontal';\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n\r\n  /** Inactive segment CSS class */\r\n  inactiveSegmentClassName?: string;\r\n  /** Inactive segment inline style */\r\n  inactiveSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Active segment CSS class (all levels) */\r\n  segmentClassName?: string;\r\n  /** Active segment inline style (all levels) */\r\n  segmentStyle?: React.CSSProperties;\r\n\r\n  /** Low level segment CSS class (0-60%) */\r\n  lowSegmentClassName?: string;\r\n  /** Low level segment inline style */\r\n  lowSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Medium level segment CSS class (60-80%) */\r\n  mediumSegmentClassName?: string;\r\n  /** Medium level segment inline style */\r\n  mediumSegmentStyle?: React.CSSProperties;\r\n\r\n  /** High level segment CSS class (80-100%) */\r\n  highSegmentClassName?: string;\r\n  /** High level segment inline style */\r\n  highSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisGauge({\r\n  value,\r\n  join,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  segments = 20,\r\n  inverted = false,\r\n  orientation = 'vertical',\r\n  className = '',\r\n  style,\r\n  inactiveSegmentClassName = '',\r\n  inactiveSegmentStyle,\r\n  segmentClassName = '',\r\n  segmentStyle,\r\n  lowSegmentClassName = '',\r\n  lowSegmentStyle,\r\n  mediumSegmentClassName = '',\r\n  mediumSegmentStyle,\r\n  highSegmentClassName = '',\r\n  highSegmentStyle,\r\n  classDisabled = '',\r\n}: CrisGaugeProps) {\r\n  // Get join values reactively\r\n  const joinValue = useAnalog(join ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get current value\r\n  const currentValue = join != null ? joinValue : (value ?? 0);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Determine segment type (low, medium, high)\r\n  const getSegmentType = (segment: number): 'low' | 'medium' | 'high' => {\r\n    const lowMax = segments * 0.6;\r\n    const mediumMax = segments * 0.8;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    if (seg <= lowMax) return 'low';\r\n    if (seg <= mediumMax) return 'medium';\r\n    return 'high';\r\n  };\r\n\r\n  // Check if segment is active\r\n  const isSegmentActive = (segment: number): boolean => {\r\n    if (currentValue < minValue) return false;\r\n    if (currentValue > maxValue) return true;\r\n\r\n    const ratio = currentValue / (maxValue - minValue);\r\n    let segMax = Math.round(segments * ratio);\r\n    if (ratio !== 0 && segMax === 0) segMax = 1;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    return seg <= segMax;\r\n  };\r\n\r\n  // Get segment class\r\n  const getSegmentClass = (segment: number): string => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    const classes = ['cris-gauge-segment', type, orientation];\r\n\r\n    if (active) {\r\n      classes.push('active');\r\n      // Add type-specific or general active class\r\n      if (type === 'low' && (lowSegmentClassName || segmentClassName)) {\r\n        classes.push(lowSegmentClassName || segmentClassName);\r\n      } else if (type === 'medium' && (mediumSegmentClassName || segmentClassName)) {\r\n        classes.push(mediumSegmentClassName || segmentClassName);\r\n      } else if (type === 'high' && (highSegmentClassName || segmentClassName)) {\r\n        classes.push(highSegmentClassName || segmentClassName);\r\n      }\r\n    } else {\r\n      if (inactiveSegmentClassName) {\r\n        classes.push(inactiveSegmentClassName);\r\n      }\r\n    }\r\n\r\n    return classes.filter(Boolean).join(' ');\r\n  };\r\n\r\n  // Get segment style\r\n  const getSegmentStyle = (segment: number): React.CSSProperties | undefined => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    if (active) {\r\n      if (type === 'low' && (lowSegmentStyle || segmentStyle)) {\r\n        return lowSegmentStyle || segmentStyle;\r\n      } else if (type === 'medium' && (mediumSegmentStyle || segmentStyle)) {\r\n        return mediumSegmentStyle || segmentStyle;\r\n      } else if (type === 'high' && (highSegmentStyle || segmentStyle)) {\r\n        return highSegmentStyle || segmentStyle;\r\n      }\r\n    } else {\r\n      return inactiveSegmentStyle;\r\n    }\r\n\r\n    return undefined;\r\n  };\r\n\r\n  // Build container classes\r\n  const containerClasses = [\r\n    'cris-gauge',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Container flex style\r\n  const containerStyle: React.CSSProperties = {\r\n    ...style,\r\n    display: 'flex',\r\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  };\r\n\r\n  return (\r\n    <div className={containerClasses} style={containerStyle}>\r\n      {Array.from({ length: segments }, (_, segment) => (\r\n        <div\r\n          key={segment}\r\n          className={getSegmentClass(segment)}\r\n          style={getSegmentStyle(segment)}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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","names":["import_cris_webui_core","import_jsx_runtime","import_react","import_cris_webui_core","import_jsx_runtime","import_cris_webui_core","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/components/CrisButton.tsx","../src/utils/icons.ts","../src/components/CrisText.tsx","../src/components/CrisSlider.tsx","../src/components/CrisGauge.tsx"],"sourcesContent":["/**\r\n * @imperosoft/cris-webui-components\r\n *\r\n * CRIS - Crestron React Impero Soft WebUI components library\r\n *\r\n * Provides reusable UI components for Crestron touch panel interfaces.\r\n */\r\n\r\n// Components\r\nexport { CrisButton } from './components/CrisButton';\r\nexport type { CrisButtonProps } from './components/CrisButton';\r\n\r\nexport { CrisText } from './components/CrisText';\r\nexport type { CrisTextProps } from './components/CrisText';\r\n\r\nexport { CrisSlider } from './components/CrisSlider';\r\nexport type { CrisSliderProps } from './components/CrisSlider';\r\n\r\nexport { CrisGauge } from './components/CrisGauge';\r\nexport type { CrisGaugeProps } from './components/CrisGauge';\r\n\r\n// Utilities\r\nexport { configureIcons, getIconUrl, getIconFilter, getIconConfig } from './utils/icons';\r\nexport type { IconConfig } from './utils/icons';\r\n","import { useState, useRef, ReactNode } from 'react';\r\nimport { useDigital, useJoinsStore } from '@imperosoft/cris-webui-core';\r\nimport { getIconUrl, getIconFilter } from '../utils/icons';\r\n\r\nexport interface CrisButtonProps {\r\n  /** Digital join for press action */\r\n  join?: number;\r\n  /** Digital join for feedback (defaults to join) */\r\n  joinFeedback?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Button text */\r\n  text?: string;\r\n  /** Text when pressed (local feedback) */\r\n  textPressed?: string;\r\n  /** Text when selected (controller feedback) */\r\n  textSelected?: string;\r\n\r\n  /** Icon as ReactNode (for custom SVG components) */\r\n  icon?: ReactNode;\r\n  /** Icon name (loads SVG from configured path, e.g., 'motor-stop') */\r\n  iconName?: string;\r\n  /** Icon CSS class (for CSS-based icons, e.g., 'ico-motor-stop') */\r\n  iconClass?: string;\r\n  /** Icon size - number (px), string ('50%', '2rem'), or preset ('xs'|'sm'|'md'|'lg'|'xl') */\r\n  iconSize?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  /** Icon container size as percentage (default: 80% for top/bottom, 20% for left/right) */\r\n  iconContainerSize?: string;\r\n  /** Icon inline style */\r\n  iconStyle?: React.CSSProperties;\r\n  /** Icon position relative to text */\r\n  iconPosition?: 'left' | 'right' | 'top' | 'bottom';\r\n\r\n  /** Show controller feedback styling */\r\n  showControlFeedback?: boolean;\r\n  /** Show local press feedback styling */\r\n  showLocalFeedback?: boolean;\r\n  /** Suppress click actions (display only) */\r\n  suppressKeyClicks?: boolean;\r\n\r\n  /** Smart object ID (for smarts instead of joins) */\r\n  smartId?: number;\r\n\r\n  /** Custom class names */\r\n  className?: string;\r\n  /** Class when active (controller feedback) */\r\n  classActive?: string;\r\n  /** Class when pressed (local feedback) */\r\n  classPressed?: string;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n\r\n  /** Children content */\r\n  children?: ReactNode;\r\n\r\n  /** Custom click handler (called on press) */\r\n  onPress?: () => void;\r\n  /** Custom release handler */\r\n  onRelease?: () => void;\r\n}\r\n\r\nexport function CrisButton({\r\n  join,\r\n  joinFeedback,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  textPressed,\r\n  textSelected,\r\n  icon,\r\n  iconName,\r\n  iconClass,\r\n  iconSize,\r\n  iconContainerSize,\r\n  iconStyle,\r\n  iconPosition = 'top',\r\n  showControlFeedback = true,\r\n  showLocalFeedback = true,\r\n  suppressKeyClicks = false,\r\n  smartId,\r\n  className = '',\r\n  classActive = '',\r\n  classPressed = '',\r\n  classDisabled = '',\r\n  children,\r\n  onPress,\r\n  onRelease,\r\n}: CrisButtonProps) {\r\n  const [pressed, setPressed] = useState(false);\r\n  const pressedRef = useRef(false);\r\n\r\n  // Get join values reactively\r\n  const feedbackJoin = joinFeedback ?? join;\r\n  const feedback = useDigital(feedbackJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Get action method\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n\r\n  // Determine if button is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if button is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Determine current feedback state\r\n  const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;\r\n  const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;\r\n\r\n  // Determine current text\r\n  let currentText = text ?? '';\r\n  if (hasPressedFeedback && textPressed != null) {\r\n    currentText = textPressed;\r\n  } else if (hasControlFeedback && textSelected != null) {\r\n    currentText = textSelected;\r\n  }\r\n\r\n  // Event handlers\r\n  const handlePress = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (pressedRef.current) return;\r\n\r\n    pressedRef.current = true;\r\n    setPressed(true);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onPress?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, true);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  const handleRelease = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (!pressedRef.current) return;\r\n\r\n    pressedRef.current = false;\r\n    setPressed(false);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onRelease?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, false);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const classes = [\r\n    'cris-button',\r\n    className,\r\n    hasControlFeedback && classActive,\r\n    hasPressedFeedback && classPressed,\r\n    !isEnabled && classDisabled,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Flex direction based on icon position\r\n  const flexDirection =\r\n    iconPosition === 'top'\r\n      ? 'flex-col'\r\n      : iconPosition === 'bottom'\r\n        ? 'flex-col-reverse'\r\n        : iconPosition === 'left'\r\n          ? 'flex-row'\r\n          : 'flex-row-reverse';\r\n\r\n  // Determine if we have any icon to show\r\n  const hasIcon = icon != null || iconName != null || iconClass != null;\r\n\r\n  // Size presets mapping\r\n  const sizePresets: Record<string, string> = {\r\n    xs: '16px',\r\n    sm: '24px',\r\n    md: '32px',\r\n    lg: '48px',\r\n    xl: '64px',\r\n  };\r\n\r\n  // Calculate icon size value\r\n  const getIconSizeValue = (): string | undefined => {\r\n    if (iconSize == null) return undefined;\r\n    if (typeof iconSize === 'number') return `${iconSize}px`;\r\n    if (iconSize in sizePresets) return sizePresets[iconSize];\r\n    return iconSize; // Already a string like '50%' or '2rem'\r\n  };\r\n\r\n  const iconSizeValue = getIconSizeValue();\r\n\r\n  // Build icon classes\r\n  const iconClasses = [\r\n    'cris-button-icon',\r\n    iconClass,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Build icon style with size and filter support\r\n  const computedIconStyle: React.CSSProperties = {\r\n    ...iconStyle,\r\n  };\r\n\r\n  // Apply size\r\n  if (iconSizeValue) {\r\n    computedIconStyle.width = iconSizeValue;\r\n    computedIconStyle.height = iconSizeValue;\r\n  }\r\n\r\n  // Apply filter from config if using iconName (only if not overridden by iconStyle)\r\n  if (iconName && !iconStyle?.filter) {\r\n    const filter = getIconFilter(hasControlFeedback || hasPressedFeedback);\r\n    if (filter) {\r\n      computedIconStyle.filter = filter;\r\n    }\r\n  }\r\n\r\n  // Render icon element\r\n  const renderIconElement = () => {\r\n    if (icon) {\r\n      // ReactNode icon (custom component)\r\n      return <span className={iconClasses} style={computedIconStyle}>{icon}</span>;\r\n    }\r\n\r\n    if (iconName) {\r\n      // Icon by name (loads from configured path)\r\n      return (\r\n        <img\r\n          className={iconClasses}\r\n          style={computedIconStyle}\r\n          src={getIconUrl(iconName)}\r\n          alt=\"\"\r\n        />\r\n      );\r\n    }\r\n\r\n    if (iconClass) {\r\n      // CSS-based icon (like Angular version)\r\n      return <img className={iconClasses} style={computedIconStyle} alt=\"\" />;\r\n    }\r\n\r\n    return null;\r\n  };\r\n\r\n  // Calculate icon container size (default: 100% if no text, otherwise 80% for top/bottom, 20% for left/right)\r\n  const isVertical = iconPosition === 'top' || iconPosition === 'bottom';\r\n  const hasText = currentText !== '';\r\n  const defaultContainerSize = hasText ? (isVertical ? '80%' : '20%') : '100%';\r\n  const containerSize = iconContainerSize ?? defaultContainerSize;\r\n\r\n  // Calculate text container size (remaining space)\r\n  const textContainerSize = `calc(100% - ${containerSize})`;\r\n\r\n  // Container style for icon area\r\n  const iconContainerStyle: React.CSSProperties = isVertical\r\n    ? { height: containerSize, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }\r\n    : { width: containerSize, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' };\r\n\r\n  // Container style for text area\r\n  const textContainerStyle: React.CSSProperties = isVertical\r\n    ? { height: textContainerSize, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }\r\n    : { width: textContainerSize, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' };\r\n\r\n  return (\r\n    <div\r\n      className={`${classes} flex items-center justify-center ${flexDirection}`}\r\n      style={{ cursor: suppressKeyClicks ? 'default' : 'pointer' }}\r\n      onMouseDown={handlePress}\r\n      onMouseUp={handleRelease}\r\n      onMouseLeave={handleRelease}\r\n      onTouchStart={handlePress}\r\n      onTouchEnd={handleRelease}\r\n      onTouchCancel={handleRelease}\r\n    >\r\n      {children}\r\n      {hasIcon && (\r\n        <div className=\"cris-button-icon-container\" style={iconContainerStyle}>\r\n          {renderIconElement()}\r\n        </div>\r\n      )}\r\n      {currentText && (\r\n        <div className=\"cris-button-text-container\" style={textContainerStyle}>\r\n          <span className=\"cris-button-text\">{currentText}</span>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","/**\r\n * Icon configuration and utilities for CRIS components\r\n *\r\n * Supports different base paths for dev vs production (Crestron controller)\r\n */\r\n\r\nexport interface IconConfig {\r\n  /** Base path for icon assets (e.g., '/assets/icons/' or 'http://controller/icons/') */\r\n  basePath: string;\r\n  /** File extension (default: 'svg') */\r\n  extension: string;\r\n  /** Default filter for inactive state */\r\n  defaultFilter?: string;\r\n  /** Default filter for active state */\r\n  activeFilter?: string;\r\n}\r\n\r\n// Default configuration\r\nlet iconConfig: IconConfig = {\r\n  basePath: '/assets/icons/',\r\n  extension: 'svg',\r\n  defaultFilter: undefined,\r\n  activeFilter: undefined,\r\n};\r\n\r\n/**\r\n * Configure icon paths and defaults\r\n * Call this once at app startup\r\n *\r\n * @example\r\n * // Development\r\n * configureIcons({ basePath: '/assets/icons/' });\r\n *\r\n * // Production on Crestron controller\r\n * configureIcons({ basePath: '/html/icons/' });\r\n *\r\n * // With color filters\r\n * configureIcons({\r\n *   basePath: '/assets/icons/',\r\n *   defaultFilter: 'brightness(0) invert(1)', // white\r\n *   activeFilter: 'brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(0deg)', // red\r\n * });\r\n */\r\nexport function configureIcons(config: Partial<IconConfig>): void {\r\n  iconConfig = { ...iconConfig, ...config };\r\n}\r\n\r\n/**\r\n * Get current icon configuration\r\n */\r\nexport function getIconConfig(): IconConfig {\r\n  return iconConfig;\r\n}\r\n\r\n/**\r\n * Get full URL for an icon\r\n *\r\n * @param name - Icon name (without path or extension), e.g., 'motor-stop'\r\n * @returns Full URL to the icon\r\n */\r\nexport function getIconUrl(name: string): string {\r\n  if (!name) return '';\r\n\r\n  // If already a full URL or path, return as-is\r\n  if (name.startsWith('http') || name.startsWith('/') || name.startsWith('.')) {\r\n    return name;\r\n  }\r\n\r\n  const { basePath, extension } = iconConfig;\r\n  const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`;\r\n  return `${normalizedBase}${name}.${extension}`;\r\n}\r\n\r\n/**\r\n * Get CSS filter for icon state\r\n */\r\nexport function getIconFilter(active: boolean): string | undefined {\r\n  return active ? iconConfig.activeFilter : iconConfig.defaultFilter;\r\n}\r\n","import { ReactNode } from 'react';\r\nimport { useDigital, useSerial, useCipDecode } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisTextProps {\r\n  /** Serial join for indirect text */\r\n  joinIndirectText?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n  /** Static text (used if no joinIndirectText) */\r\n  text?: string;\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Text element CSS class */\r\n  textClassName?: string;\r\n  /** Text element inline style */\r\n  textStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n  /** Children content */\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function CrisText({\r\n  joinIndirectText,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  className = '',\r\n  style,\r\n  textClassName = '',\r\n  textStyle,\r\n  classDisabled = '',\r\n  children,\r\n}: CrisTextProps) {\r\n  // Get join values reactively\r\n  const indirectText = useSerial(joinIndirectText ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if text is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if text is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get the raw text - indirect text or static text\r\n  const rawText = joinIndirectText != null ? indirectText : (text ?? '');\r\n\r\n  // Decode CIP patterns in the text\r\n  const currentText = useCipDecode(rawText);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-text',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div className={containerClasses} style={style}>\r\n      {children}\r\n      {currentText && (\r\n        <span className={`cris-text-text ${textClassName}`} style={textStyle}>\r\n          {currentText}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { useDigital, useAnalog, useJoinsStore } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisSliderProps {\r\n  /** Analog join for value (shared with digital if joinDigital not set) */\r\n  join?: number;\r\n  /** Digital join for press/release feedback */\r\n  joinDigital?: number;\r\n  /** Analog join for value (overrides join) */\r\n  joinAnalog?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Horizontal orientation (default false = vertical) */\r\n  horizontal?: boolean;\r\n  /** Hide fill bar */\r\n  fillHidden?: boolean;\r\n  /** Track size as percentage of container (default 20) */\r\n  trackSizePercent?: number;\r\n  /** Thumb size as percentage of container (default 4) */\r\n  thumbSizePercent?: number;\r\n  /** Delay in ms after drag before updating from feedback (default 1000) */\r\n  delayMsAfterDragUpdateFeedback?: number;\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Bar/track CSS class */\r\n  barClassName?: string;\r\n  /** Bar/track inline style */\r\n  barStyle?: React.CSSProperties;\r\n  /** Fill CSS class */\r\n  fillClassName?: string;\r\n  /** Fill inline style */\r\n  fillStyle?: React.CSSProperties;\r\n  /** Thumb CSS class */\r\n  thumbClassName?: string;\r\n  /** Thumb inline style */\r\n  thumbStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisSlider({\r\n  join,\r\n  joinDigital,\r\n  joinAnalog,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  horizontal = false,\r\n  fillHidden = false,\r\n  trackSizePercent = 20,\r\n  thumbSizePercent = 4,\r\n  delayMsAfterDragUpdateFeedback = 1000,\r\n  className = '',\r\n  style,\r\n  barClassName = '',\r\n  barStyle,\r\n  fillClassName = '',\r\n  fillStyle,\r\n  thumbClassName = '',\r\n  thumbStyle,\r\n  classDisabled = '',\r\n}: CrisSliderProps) {\r\n  // Effective joins\r\n  const effectiveAnalogJoin = joinAnalog ?? join;\r\n  const effectiveDigitalJoin = joinDigital ?? join;\r\n\r\n  // Get join values reactively\r\n  const analogValue = useAnalog(effectiveAnalogJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Action methods\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n  const aSet = useJoinsStore((state) => state.aSet);\r\n\r\n  // Local state\r\n  const [ratioCurrent, setRatioCurrent] = useState(0);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const isDraggingOrJustAfterRef = useRef(false);\r\n  const ratioBeforeDragRef = useRef(0);\r\n  const afterDragTimeoutRef = useRef<number | null>(null);\r\n  const touchingRef = useRef(false);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Convert analog value to ratio\r\n  const analogToRatio = useCallback(\r\n    (value: number) => {\r\n      const range = maxValue - minValue;\r\n      if (range <= 0) return 0;\r\n      return Math.max(0, Math.min(1, (value - minValue) / range));\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Convert ratio to analog value\r\n  const ratioToAnalog = useCallback(\r\n    (ratio: number) => {\r\n      const range = maxValue - minValue;\r\n      return Math.round(minValue + ratio * range);\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Update ratio from controller feedback\r\n  const updateFromFeedback = useCallback(() => {\r\n    if (!isDraggingOrJustAfterRef.current && effectiveAnalogJoin != null) {\r\n      setRatioCurrent(analogToRatio(analogValue));\r\n    }\r\n  }, [analogValue, analogToRatio, effectiveAnalogJoin]);\r\n\r\n  // Update from feedback when analog value changes\r\n  useEffect(() => {\r\n    updateFromFeedback();\r\n  }, [updateFromFeedback]);\r\n\r\n  // Handle drag start\r\n  const handleDragStart = useCallback(() => {\r\n    if (!isEnabled) return;\r\n\r\n    setIsDragging(true);\r\n\r\n    // Send digital press\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, true);\r\n    }\r\n\r\n    // Save ratio before drag\r\n    if (!isDraggingOrJustAfterRef.current) {\r\n      ratioBeforeDragRef.current = ratioCurrent;\r\n    }\r\n    isDraggingOrJustAfterRef.current = true;\r\n\r\n    // Clear any pending timeout\r\n    if (afterDragTimeoutRef.current !== null) {\r\n      window.clearTimeout(afterDragTimeoutRef.current);\r\n      afterDragTimeoutRef.current = null;\r\n    }\r\n  }, [isEnabled, effectiveDigitalJoin, dSet, ratioCurrent]);\r\n\r\n  // Handle drag end\r\n  const handleDragEnd = useCallback(() => {\r\n    if (!isDragging) return;\r\n\r\n    setIsDragging(false);\r\n\r\n    // Send digital release\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, false);\r\n    }\r\n\r\n    // Schedule feedback update after delay\r\n    if (delayMsAfterDragUpdateFeedback > 0) {\r\n      afterDragTimeoutRef.current = window.setTimeout(() => {\r\n        isDraggingOrJustAfterRef.current = false;\r\n        updateFromFeedback();\r\n        afterDragTimeoutRef.current = null;\r\n      }, delayMsAfterDragUpdateFeedback);\r\n    } else {\r\n      isDraggingOrJustAfterRef.current = false;\r\n      updateFromFeedback();\r\n    }\r\n  }, [isDragging, effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback]);\r\n\r\n  // Handle move/drag\r\n  const handleMove = useCallback(\r\n    (clientX: number, clientY: number, bounds: DOMRect) => {\r\n      if (!isDragging) return;\r\n\r\n      let newRatio: number;\r\n      if (horizontal) {\r\n        newRatio = (clientX - bounds.left) / bounds.width;\r\n      } else {\r\n        newRatio = 1 - (clientY - bounds.top) / bounds.height;\r\n      }\r\n      newRatio = Math.max(0, Math.min(1, newRatio));\r\n\r\n      setRatioCurrent(newRatio);\r\n\r\n      // Send analog value\r\n      if (effectiveAnalogJoin != null) {\r\n        aSet(effectiveAnalogJoin, ratioToAnalog(newRatio));\r\n      }\r\n    },\r\n    [isDragging, horizontal, effectiveAnalogJoin, aSet, ratioToAnalog]\r\n  );\r\n\r\n  // Mouse handlers\r\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (touchingRef.current) return;\r\n    if (event.button !== 0) return;\r\n\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (isDragging) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      handleMove(event.clientX, event.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Touch handlers\r\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    touchingRef.current = true;\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchEnd = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleTouchCancel = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (isDragging && event.touches.length > 0) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      const touch = event.touches[0];\r\n      handleMove(touch.clientX, touch.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-slider',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Calculate bar style\r\n  const computedBarStyle: React.CSSProperties = {\r\n    ...barStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const width = 100 - thumbSizePercent;\r\n    const left = (100 - width) / 2;\r\n    computedBarStyle.height = `${trackSizePercent}%`;\r\n    computedBarStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.width = `${width}%`;\r\n    computedBarStyle.left = `${left}%`;\r\n  } else {\r\n    const height = 100 - thumbSizePercent;\r\n    const top = (100 - height) / 2;\r\n    computedBarStyle.width = `${trackSizePercent}%`;\r\n    computedBarStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.height = `${height}%`;\r\n    computedBarStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate fill style\r\n  const computedFillStyle: React.CSSProperties = {\r\n    ...fillStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const range = 100 - thumbSizePercent;\r\n    const left = thumbSizePercent / 2;\r\n    const width = range * ratioCurrent;\r\n    computedFillStyle.height = `${trackSizePercent}%`;\r\n    computedFillStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.width = `${width}%`;\r\n    computedFillStyle.left = `${left}%`;\r\n  } else {\r\n    const range = 100 - thumbSizePercent;\r\n    const top = 100 - (range * ratioCurrent + thumbSizePercent / 2);\r\n    const height = range + thumbSizePercent / 2 - top;\r\n    computedFillStyle.width = `${trackSizePercent}%`;\r\n    computedFillStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.height = `${height}%`;\r\n    computedFillStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate thumb style\r\n  const computedThumbStyle: React.CSSProperties = {\r\n    ...thumbStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const maxLeft = 100 - thumbSizePercent;\r\n    const left = maxLeft * ratioCurrent;\r\n    computedThumbStyle.width = `${thumbSizePercent}%`;\r\n    computedThumbStyle.height = '100%';\r\n    computedThumbStyle.left = `${left}%`;\r\n  } else {\r\n    const maxTop = 100 - thumbSizePercent;\r\n    const top = maxTop - maxTop * ratioCurrent;\r\n    computedThumbStyle.width = '100%';\r\n    computedThumbStyle.height = `${thumbSizePercent}%`;\r\n    computedThumbStyle.top = `${top}%`;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={containerClasses}\r\n      style={{\r\n        ...style,\r\n        position: 'relative',\r\n        cursor: isEnabled ? 'pointer' : 'default',\r\n        touchAction: 'none',\r\n        userSelect: 'none',\r\n      }}\r\n      onMouseDown={handleMouseDown}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseUp={handleMouseUp}\r\n      onMouseLeave={handleMouseLeave}\r\n      onTouchStart={handleTouchStart}\r\n      onTouchMove={handleTouchMove}\r\n      onTouchEnd={handleTouchEnd}\r\n      onTouchCancel={handleTouchCancel}\r\n    >\r\n      {/* Bar/Track */}\r\n      <div className={`cris-slider-bar ${barClassName}`} style={computedBarStyle} />\r\n\r\n      {/* Fill */}\r\n      {!fillHidden && (\r\n        <div className={`cris-slider-fill ${fillClassName}`} style={computedFillStyle} />\r\n      )}\r\n\r\n      {/* Thumb */}\r\n      <div className={`cris-slider-thumb ${thumbClassName}`} style={computedThumbStyle} />\r\n    </div>\r\n  );\r\n}\r\n","import { useAnalog, useDigital } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisGaugeProps {\r\n  /** Static value (used if no join) */\r\n  value?: number;\r\n  /** Analog join for value */\r\n  join?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Number of segments (default 20) */\r\n  segments?: number;\r\n  /** Invert direction (default false) */\r\n  inverted?: boolean;\r\n  /** Orientation (default vertical) */\r\n  orientation?: 'vertical' | 'horizontal';\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n\r\n  /** Inactive segment CSS class */\r\n  inactiveSegmentClassName?: string;\r\n  /** Inactive segment inline style */\r\n  inactiveSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Active segment CSS class (all levels) */\r\n  segmentClassName?: string;\r\n  /** Active segment inline style (all levels) */\r\n  segmentStyle?: React.CSSProperties;\r\n\r\n  /** Low level segment CSS class (0-60%) */\r\n  lowSegmentClassName?: string;\r\n  /** Low level segment inline style */\r\n  lowSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Medium level segment CSS class (60-80%) */\r\n  mediumSegmentClassName?: string;\r\n  /** Medium level segment inline style */\r\n  mediumSegmentStyle?: React.CSSProperties;\r\n\r\n  /** High level segment CSS class (80-100%) */\r\n  highSegmentClassName?: string;\r\n  /** High level segment inline style */\r\n  highSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisGauge({\r\n  value,\r\n  join,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  segments = 20,\r\n  inverted = false,\r\n  orientation = 'vertical',\r\n  className = '',\r\n  style,\r\n  inactiveSegmentClassName = '',\r\n  inactiveSegmentStyle,\r\n  segmentClassName = '',\r\n  segmentStyle,\r\n  lowSegmentClassName = '',\r\n  lowSegmentStyle,\r\n  mediumSegmentClassName = '',\r\n  mediumSegmentStyle,\r\n  highSegmentClassName = '',\r\n  highSegmentStyle,\r\n  classDisabled = '',\r\n}: CrisGaugeProps) {\r\n  // Get join values reactively\r\n  const joinValue = useAnalog(join ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get current value\r\n  const currentValue = join != null ? joinValue : (value ?? 0);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Determine segment type (low, medium, high)\r\n  const getSegmentType = (segment: number): 'low' | 'medium' | 'high' => {\r\n    const lowMax = segments * 0.6;\r\n    const mediumMax = segments * 0.8;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    if (seg <= lowMax) return 'low';\r\n    if (seg <= mediumMax) return 'medium';\r\n    return 'high';\r\n  };\r\n\r\n  // Check if segment is active\r\n  const isSegmentActive = (segment: number): boolean => {\r\n    if (currentValue < minValue) return false;\r\n    if (currentValue > maxValue) return true;\r\n\r\n    const ratio = currentValue / (maxValue - minValue);\r\n    let segMax = Math.round(segments * ratio);\r\n    if (ratio !== 0 && segMax === 0) segMax = 1;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    return seg <= segMax;\r\n  };\r\n\r\n  // Get segment class\r\n  const getSegmentClass = (segment: number): string => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    const classes = ['cris-gauge-segment', type, orientation];\r\n\r\n    if (active) {\r\n      classes.push('active');\r\n      // Add type-specific or general active class\r\n      if (type === 'low' && (lowSegmentClassName || segmentClassName)) {\r\n        classes.push(lowSegmentClassName || segmentClassName);\r\n      } else if (type === 'medium' && (mediumSegmentClassName || segmentClassName)) {\r\n        classes.push(mediumSegmentClassName || segmentClassName);\r\n      } else if (type === 'high' && (highSegmentClassName || segmentClassName)) {\r\n        classes.push(highSegmentClassName || segmentClassName);\r\n      }\r\n    } else {\r\n      if (inactiveSegmentClassName) {\r\n        classes.push(inactiveSegmentClassName);\r\n      }\r\n    }\r\n\r\n    return classes.filter(Boolean).join(' ');\r\n  };\r\n\r\n  // Get segment style\r\n  const getSegmentStyle = (segment: number): React.CSSProperties | undefined => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    if (active) {\r\n      if (type === 'low' && (lowSegmentStyle || segmentStyle)) {\r\n        return lowSegmentStyle || segmentStyle;\r\n      } else if (type === 'medium' && (mediumSegmentStyle || segmentStyle)) {\r\n        return mediumSegmentStyle || segmentStyle;\r\n      } else if (type === 'high' && (highSegmentStyle || segmentStyle)) {\r\n        return highSegmentStyle || segmentStyle;\r\n      }\r\n    } else {\r\n      return inactiveSegmentStyle;\r\n    }\r\n\r\n    return undefined;\r\n  };\r\n\r\n  // Build container classes\r\n  const containerClasses = [\r\n    'cris-gauge',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Container flex style\r\n  const containerStyle: React.CSSProperties = {\r\n    ...style,\r\n    display: 'flex',\r\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  };\r\n\r\n  return (\r\n    <div className={containerClasses} style={containerStyle}>\r\n      {Array.from({ length: segments }, (_, segment) => (\r\n        <div\r\n          key={segment}\r\n          className={getSegmentClass(segment)}\r\n          style={getSegmentStyle(segment)}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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","names":["import_cris_webui_core","import_jsx_runtime","import_react","import_cris_webui_core","import_jsx_runtime","import_cris_webui_core","import_jsx_runtime"]}

package/dist/index.mjs

@@ -42,6 +42,7 @@ function CrisButton({
   iconName,
   iconClass,
   iconSize,
+  iconContainerSize,
   iconStyle,
   iconPosition = "top",
   showControlFeedback = true,
@@ -141,7 +142,7 @@ function CrisButton({
       computedIconStyle.filter = filter;
     }
   }
-  const renderIcon = () => {
+  const renderIconElement = () => {
     if (icon) {
       return /* @__PURE__ */ jsx("span", { className: iconClasses, style: computedIconStyle, children: icon });
     }
@@ -161,6 +162,13 @@ function CrisButton({
     }
     return null;
   };
+  const isVertical = iconPosition === "top" || iconPosition === "bottom";
+  const hasText = currentText !== "";
+  const defaultContainerSize = hasText ? isVertical ? "80%" : "20%" : "100%";
+  const containerSize = iconContainerSize ?? defaultContainerSize;
+  const textContainerSize = `calc(100% - ${containerSize})`;
+  const iconContainerStyle = isVertical ? { height: containerSize, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" } : { width: containerSize, height: "100%", display: "flex", alignItems: "center", justifyContent: "center" };
+  const textContainerStyle = isVertical ? { height: textContainerSize, width: "100%", display: "flex", alignItems: "center", justifyContent: "center" } : { width: textContainerSize, height: "100%", display: "flex", alignItems: "center", justifyContent: "center" };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -174,8 +182,8 @@ function CrisButton({
       onTouchCancel: handleRelease,
       children: [
         children,
-        hasIcon && renderIcon(),
-        currentText && /* @__PURE__ */ jsx("span", { className: "cris-button-text", children: currentText })
+        hasIcon && /* @__PURE__ */ jsx("div", { className: "cris-button-icon-container", style: iconContainerStyle, children: renderIconElement() }),
+        currentText && /* @__PURE__ */ jsx("div", { className: "cris-button-text-container", style: textContainerStyle, children: /* @__PURE__ */ jsx("span", { className: "cris-button-text", children: currentText }) })
       ]
     }
   );

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CrisButton.tsx","../src/utils/icons.ts","../src/components/CrisText.tsx","../src/components/CrisSlider.tsx","../src/components/CrisGauge.tsx"],"sourcesContent":["import { useState, useRef, ReactNode } from 'react';\r\nimport { useDigital, useJoinsStore } from '@imperosoft/cris-webui-core';\r\nimport { getIconUrl, getIconFilter } from '../utils/icons';\r\n\r\nexport interface CrisButtonProps {\r\n  /** Digital join for press action */\r\n  join?: number;\r\n  /** Digital join for feedback (defaults to join) */\r\n  joinFeedback?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Button text */\r\n  text?: string;\r\n  /** Text when pressed (local feedback) */\r\n  textPressed?: string;\r\n  /** Text when selected (controller feedback) */\r\n  textSelected?: string;\r\n\r\n  /** Icon as ReactNode (for custom SVG components) */\r\n  icon?: ReactNode;\r\n  /** Icon name (loads SVG from configured path, e.g., 'motor-stop') */\r\n  iconName?: string;\r\n  /** Icon CSS class (for CSS-based icons, e.g., 'ico-motor-stop') */\r\n  iconClass?: string;\r\n  /** Icon size - number (px), string ('50%', '2rem'), or preset ('xs'|'sm'|'md'|'lg'|'xl') */\r\n  iconSize?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  /** Icon inline style */\r\n  iconStyle?: React.CSSProperties;\r\n  /** Icon position relative to text */\r\n  iconPosition?: 'left' | 'right' | 'top' | 'bottom';\r\n\r\n  /** Show controller feedback styling */\r\n  showControlFeedback?: boolean;\r\n  /** Show local press feedback styling */\r\n  showLocalFeedback?: boolean;\r\n  /** Suppress click actions (display only) */\r\n  suppressKeyClicks?: boolean;\r\n\r\n  /** Smart object ID (for smarts instead of joins) */\r\n  smartId?: number;\r\n\r\n  /** Custom class names */\r\n  className?: string;\r\n  /** Class when active (controller feedback) */\r\n  classActive?: string;\r\n  /** Class when pressed (local feedback) */\r\n  classPressed?: string;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n\r\n  /** Children content */\r\n  children?: ReactNode;\r\n\r\n  /** Custom click handler (called on press) */\r\n  onPress?: () => void;\r\n  /** Custom release handler */\r\n  onRelease?: () => void;\r\n}\r\n\r\nexport function CrisButton({\r\n  join,\r\n  joinFeedback,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  textPressed,\r\n  textSelected,\r\n  icon,\r\n  iconName,\r\n  iconClass,\r\n  iconSize,\r\n  iconStyle,\r\n  iconPosition = 'top',\r\n  showControlFeedback = true,\r\n  showLocalFeedback = true,\r\n  suppressKeyClicks = false,\r\n  smartId,\r\n  className = '',\r\n  classActive = '',\r\n  classPressed = '',\r\n  classDisabled = '',\r\n  children,\r\n  onPress,\r\n  onRelease,\r\n}: CrisButtonProps) {\r\n  const [pressed, setPressed] = useState(false);\r\n  const pressedRef = useRef(false);\r\n\r\n  // Get join values reactively\r\n  const feedbackJoin = joinFeedback ?? join;\r\n  const feedback = useDigital(feedbackJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Get action method\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n\r\n  // Determine if button is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if button is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Determine current feedback state\r\n  const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;\r\n  const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;\r\n\r\n  // Determine current text\r\n  let currentText = text ?? '';\r\n  if (hasPressedFeedback && textPressed != null) {\r\n    currentText = textPressed;\r\n  } else if (hasControlFeedback && textSelected != null) {\r\n    currentText = textSelected;\r\n  }\r\n\r\n  // Event handlers\r\n  const handlePress = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (pressedRef.current) return;\r\n\r\n    pressedRef.current = true;\r\n    setPressed(true);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onPress?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, true);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  const handleRelease = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (!pressedRef.current) return;\r\n\r\n    pressedRef.current = false;\r\n    setPressed(false);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onRelease?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, false);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const classes = [\r\n    'cris-button',\r\n    className,\r\n    hasControlFeedback && classActive,\r\n    hasPressedFeedback && classPressed,\r\n    !isEnabled && classDisabled,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Flex direction based on icon position\r\n  const flexDirection =\r\n    iconPosition === 'top'\r\n      ? 'flex-col'\r\n      : iconPosition === 'bottom'\r\n        ? 'flex-col-reverse'\r\n        : iconPosition === 'left'\r\n          ? 'flex-row'\r\n          : 'flex-row-reverse';\r\n\r\n  // Determine if we have any icon to show\r\n  const hasIcon = icon != null || iconName != null || iconClass != null;\r\n\r\n  // Size presets mapping\r\n  const sizePresets: Record<string, string> = {\r\n    xs: '16px',\r\n    sm: '24px',\r\n    md: '32px',\r\n    lg: '48px',\r\n    xl: '64px',\r\n  };\r\n\r\n  // Calculate icon size value\r\n  const getIconSizeValue = (): string | undefined => {\r\n    if (iconSize == null) return undefined;\r\n    if (typeof iconSize === 'number') return `${iconSize}px`;\r\n    if (iconSize in sizePresets) return sizePresets[iconSize];\r\n    return iconSize; // Already a string like '50%' or '2rem'\r\n  };\r\n\r\n  const iconSizeValue = getIconSizeValue();\r\n\r\n  // Build icon classes\r\n  const iconClasses = [\r\n    'cris-button-icon',\r\n    iconClass,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Build icon style with size and filter support\r\n  const computedIconStyle: React.CSSProperties = {\r\n    ...iconStyle,\r\n  };\r\n\r\n  // Apply size\r\n  if (iconSizeValue) {\r\n    computedIconStyle.width = iconSizeValue;\r\n    computedIconStyle.height = iconSizeValue;\r\n  }\r\n\r\n  // Apply filter from config if using iconName (only if not overridden by iconStyle)\r\n  if (iconName && !iconStyle?.filter) {\r\n    const filter = getIconFilter(hasControlFeedback || hasPressedFeedback);\r\n    if (filter) {\r\n      computedIconStyle.filter = filter;\r\n    }\r\n  }\r\n\r\n  // Render icon element\r\n  const renderIcon = () => {\r\n    if (icon) {\r\n      // ReactNode icon (custom component)\r\n      return <span className={iconClasses} style={computedIconStyle}>{icon}</span>;\r\n    }\r\n\r\n    if (iconName) {\r\n      // Icon by name (loads from configured path)\r\n      return (\r\n        <img\r\n          className={iconClasses}\r\n          style={computedIconStyle}\r\n          src={getIconUrl(iconName)}\r\n          alt=\"\"\r\n        />\r\n      );\r\n    }\r\n\r\n    if (iconClass) {\r\n      // CSS-based icon (like Angular version)\r\n      return <img className={iconClasses} style={computedIconStyle} alt=\"\" />;\r\n    }\r\n\r\n    return null;\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`${classes} flex items-center justify-center ${flexDirection}`}\r\n      style={{ cursor: suppressKeyClicks ? 'default' : 'pointer' }}\r\n      onMouseDown={handlePress}\r\n      onMouseUp={handleRelease}\r\n      onMouseLeave={handleRelease}\r\n      onTouchStart={handlePress}\r\n      onTouchEnd={handleRelease}\r\n      onTouchCancel={handleRelease}\r\n    >\r\n      {children}\r\n      {hasIcon && renderIcon()}\r\n      {currentText && <span className=\"cris-button-text\">{currentText}</span>}\r\n    </div>\r\n  );\r\n}\r\n","/**\r\n * Icon configuration and utilities for CRIS components\r\n *\r\n * Supports different base paths for dev vs production (Crestron controller)\r\n */\r\n\r\nexport interface IconConfig {\r\n  /** Base path for icon assets (e.g., '/assets/icons/' or 'http://controller/icons/') */\r\n  basePath: string;\r\n  /** File extension (default: 'svg') */\r\n  extension: string;\r\n  /** Default filter for inactive state */\r\n  defaultFilter?: string;\r\n  /** Default filter for active state */\r\n  activeFilter?: string;\r\n}\r\n\r\n// Default configuration\r\nlet iconConfig: IconConfig = {\r\n  basePath: '/assets/icons/',\r\n  extension: 'svg',\r\n  defaultFilter: undefined,\r\n  activeFilter: undefined,\r\n};\r\n\r\n/**\r\n * Configure icon paths and defaults\r\n * Call this once at app startup\r\n *\r\n * @example\r\n * // Development\r\n * configureIcons({ basePath: '/assets/icons/' });\r\n *\r\n * // Production on Crestron controller\r\n * configureIcons({ basePath: '/html/icons/' });\r\n *\r\n * // With color filters\r\n * configureIcons({\r\n *   basePath: '/assets/icons/',\r\n *   defaultFilter: 'brightness(0) invert(1)', // white\r\n *   activeFilter: 'brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(0deg)', // red\r\n * });\r\n */\r\nexport function configureIcons(config: Partial<IconConfig>): void {\r\n  iconConfig = { ...iconConfig, ...config };\r\n}\r\n\r\n/**\r\n * Get current icon configuration\r\n */\r\nexport function getIconConfig(): IconConfig {\r\n  return iconConfig;\r\n}\r\n\r\n/**\r\n * Get full URL for an icon\r\n *\r\n * @param name - Icon name (without path or extension), e.g., 'motor-stop'\r\n * @returns Full URL to the icon\r\n */\r\nexport function getIconUrl(name: string): string {\r\n  if (!name) return '';\r\n\r\n  // If already a full URL or path, return as-is\r\n  if (name.startsWith('http') || name.startsWith('/') || name.startsWith('.')) {\r\n    return name;\r\n  }\r\n\r\n  const { basePath, extension } = iconConfig;\r\n  const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`;\r\n  return `${normalizedBase}${name}.${extension}`;\r\n}\r\n\r\n/**\r\n * Get CSS filter for icon state\r\n */\r\nexport function getIconFilter(active: boolean): string | undefined {\r\n  return active ? iconConfig.activeFilter : iconConfig.defaultFilter;\r\n}\r\n","import { ReactNode } from 'react';\r\nimport { useDigital, useSerial, useCipDecode } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisTextProps {\r\n  /** Serial join for indirect text */\r\n  joinIndirectText?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n  /** Static text (used if no joinIndirectText) */\r\n  text?: string;\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Text element CSS class */\r\n  textClassName?: string;\r\n  /** Text element inline style */\r\n  textStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n  /** Children content */\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function CrisText({\r\n  joinIndirectText,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  className = '',\r\n  style,\r\n  textClassName = '',\r\n  textStyle,\r\n  classDisabled = '',\r\n  children,\r\n}: CrisTextProps) {\r\n  // Get join values reactively\r\n  const indirectText = useSerial(joinIndirectText ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if text is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if text is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get the raw text - indirect text or static text\r\n  const rawText = joinIndirectText != null ? indirectText : (text ?? '');\r\n\r\n  // Decode CIP patterns in the text\r\n  const currentText = useCipDecode(rawText);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-text',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div className={containerClasses} style={style}>\r\n      {children}\r\n      {currentText && (\r\n        <span className={`cris-text-text ${textClassName}`} style={textStyle}>\r\n          {currentText}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { useDigital, useAnalog, useJoinsStore } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisSliderProps {\r\n  /** Analog join for value (shared with digital if joinDigital not set) */\r\n  join?: number;\r\n  /** Digital join for press/release feedback */\r\n  joinDigital?: number;\r\n  /** Analog join for value (overrides join) */\r\n  joinAnalog?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Horizontal orientation (default false = vertical) */\r\n  horizontal?: boolean;\r\n  /** Hide fill bar */\r\n  fillHidden?: boolean;\r\n  /** Track size as percentage of container (default 20) */\r\n  trackSizePercent?: number;\r\n  /** Thumb size as percentage of container (default 4) */\r\n  thumbSizePercent?: number;\r\n  /** Delay in ms after drag before updating from feedback (default 1000) */\r\n  delayMsAfterDragUpdateFeedback?: number;\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Bar/track CSS class */\r\n  barClassName?: string;\r\n  /** Bar/track inline style */\r\n  barStyle?: React.CSSProperties;\r\n  /** Fill CSS class */\r\n  fillClassName?: string;\r\n  /** Fill inline style */\r\n  fillStyle?: React.CSSProperties;\r\n  /** Thumb CSS class */\r\n  thumbClassName?: string;\r\n  /** Thumb inline style */\r\n  thumbStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisSlider({\r\n  join,\r\n  joinDigital,\r\n  joinAnalog,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  horizontal = false,\r\n  fillHidden = false,\r\n  trackSizePercent = 20,\r\n  thumbSizePercent = 4,\r\n  delayMsAfterDragUpdateFeedback = 1000,\r\n  className = '',\r\n  style,\r\n  barClassName = '',\r\n  barStyle,\r\n  fillClassName = '',\r\n  fillStyle,\r\n  thumbClassName = '',\r\n  thumbStyle,\r\n  classDisabled = '',\r\n}: CrisSliderProps) {\r\n  // Effective joins\r\n  const effectiveAnalogJoin = joinAnalog ?? join;\r\n  const effectiveDigitalJoin = joinDigital ?? join;\r\n\r\n  // Get join values reactively\r\n  const analogValue = useAnalog(effectiveAnalogJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Action methods\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n  const aSet = useJoinsStore((state) => state.aSet);\r\n\r\n  // Local state\r\n  const [ratioCurrent, setRatioCurrent] = useState(0);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const isDraggingOrJustAfterRef = useRef(false);\r\n  const ratioBeforeDragRef = useRef(0);\r\n  const afterDragTimeoutRef = useRef<number | null>(null);\r\n  const touchingRef = useRef(false);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Convert analog value to ratio\r\n  const analogToRatio = useCallback(\r\n    (value: number) => {\r\n      const range = maxValue - minValue;\r\n      if (range <= 0) return 0;\r\n      return Math.max(0, Math.min(1, (value - minValue) / range));\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Convert ratio to analog value\r\n  const ratioToAnalog = useCallback(\r\n    (ratio: number) => {\r\n      const range = maxValue - minValue;\r\n      return Math.round(minValue + ratio * range);\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Update ratio from controller feedback\r\n  const updateFromFeedback = useCallback(() => {\r\n    if (!isDraggingOrJustAfterRef.current && effectiveAnalogJoin != null) {\r\n      setRatioCurrent(analogToRatio(analogValue));\r\n    }\r\n  }, [analogValue, analogToRatio, effectiveAnalogJoin]);\r\n\r\n  // Update from feedback when analog value changes\r\n  useEffect(() => {\r\n    updateFromFeedback();\r\n  }, [updateFromFeedback]);\r\n\r\n  // Handle drag start\r\n  const handleDragStart = useCallback(() => {\r\n    if (!isEnabled) return;\r\n\r\n    setIsDragging(true);\r\n\r\n    // Send digital press\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, true);\r\n    }\r\n\r\n    // Save ratio before drag\r\n    if (!isDraggingOrJustAfterRef.current) {\r\n      ratioBeforeDragRef.current = ratioCurrent;\r\n    }\r\n    isDraggingOrJustAfterRef.current = true;\r\n\r\n    // Clear any pending timeout\r\n    if (afterDragTimeoutRef.current !== null) {\r\n      window.clearTimeout(afterDragTimeoutRef.current);\r\n      afterDragTimeoutRef.current = null;\r\n    }\r\n  }, [isEnabled, effectiveDigitalJoin, dSet, ratioCurrent]);\r\n\r\n  // Handle drag end\r\n  const handleDragEnd = useCallback(() => {\r\n    if (!isDragging) return;\r\n\r\n    setIsDragging(false);\r\n\r\n    // Send digital release\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, false);\r\n    }\r\n\r\n    // Schedule feedback update after delay\r\n    if (delayMsAfterDragUpdateFeedback > 0) {\r\n      afterDragTimeoutRef.current = window.setTimeout(() => {\r\n        isDraggingOrJustAfterRef.current = false;\r\n        updateFromFeedback();\r\n        afterDragTimeoutRef.current = null;\r\n      }, delayMsAfterDragUpdateFeedback);\r\n    } else {\r\n      isDraggingOrJustAfterRef.current = false;\r\n      updateFromFeedback();\r\n    }\r\n  }, [isDragging, effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback]);\r\n\r\n  // Handle move/drag\r\n  const handleMove = useCallback(\r\n    (clientX: number, clientY: number, bounds: DOMRect) => {\r\n      if (!isDragging) return;\r\n\r\n      let newRatio: number;\r\n      if (horizontal) {\r\n        newRatio = (clientX - bounds.left) / bounds.width;\r\n      } else {\r\n        newRatio = 1 - (clientY - bounds.top) / bounds.height;\r\n      }\r\n      newRatio = Math.max(0, Math.min(1, newRatio));\r\n\r\n      setRatioCurrent(newRatio);\r\n\r\n      // Send analog value\r\n      if (effectiveAnalogJoin != null) {\r\n        aSet(effectiveAnalogJoin, ratioToAnalog(newRatio));\r\n      }\r\n    },\r\n    [isDragging, horizontal, effectiveAnalogJoin, aSet, ratioToAnalog]\r\n  );\r\n\r\n  // Mouse handlers\r\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (touchingRef.current) return;\r\n    if (event.button !== 0) return;\r\n\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (isDragging) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      handleMove(event.clientX, event.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Touch handlers\r\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    touchingRef.current = true;\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchEnd = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleTouchCancel = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (isDragging && event.touches.length > 0) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      const touch = event.touches[0];\r\n      handleMove(touch.clientX, touch.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-slider',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Calculate bar style\r\n  const computedBarStyle: React.CSSProperties = {\r\n    ...barStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const width = 100 - thumbSizePercent;\r\n    const left = (100 - width) / 2;\r\n    computedBarStyle.height = `${trackSizePercent}%`;\r\n    computedBarStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.width = `${width}%`;\r\n    computedBarStyle.left = `${left}%`;\r\n  } else {\r\n    const height = 100 - thumbSizePercent;\r\n    const top = (100 - height) / 2;\r\n    computedBarStyle.width = `${trackSizePercent}%`;\r\n    computedBarStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.height = `${height}%`;\r\n    computedBarStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate fill style\r\n  const computedFillStyle: React.CSSProperties = {\r\n    ...fillStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const range = 100 - thumbSizePercent;\r\n    const left = thumbSizePercent / 2;\r\n    const width = range * ratioCurrent;\r\n    computedFillStyle.height = `${trackSizePercent}%`;\r\n    computedFillStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.width = `${width}%`;\r\n    computedFillStyle.left = `${left}%`;\r\n  } else {\r\n    const range = 100 - thumbSizePercent;\r\n    const top = 100 - (range * ratioCurrent + thumbSizePercent / 2);\r\n    const height = range + thumbSizePercent / 2 - top;\r\n    computedFillStyle.width = `${trackSizePercent}%`;\r\n    computedFillStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.height = `${height}%`;\r\n    computedFillStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate thumb style\r\n  const computedThumbStyle: React.CSSProperties = {\r\n    ...thumbStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const maxLeft = 100 - thumbSizePercent;\r\n    const left = maxLeft * ratioCurrent;\r\n    computedThumbStyle.width = `${thumbSizePercent}%`;\r\n    computedThumbStyle.height = '100%';\r\n    computedThumbStyle.left = `${left}%`;\r\n  } else {\r\n    const maxTop = 100 - thumbSizePercent;\r\n    const top = maxTop - maxTop * ratioCurrent;\r\n    computedThumbStyle.width = '100%';\r\n    computedThumbStyle.height = `${thumbSizePercent}%`;\r\n    computedThumbStyle.top = `${top}%`;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={containerClasses}\r\n      style={{\r\n        ...style,\r\n        position: 'relative',\r\n        cursor: isEnabled ? 'pointer' : 'default',\r\n        touchAction: 'none',\r\n        userSelect: 'none',\r\n      }}\r\n      onMouseDown={handleMouseDown}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseUp={handleMouseUp}\r\n      onMouseLeave={handleMouseLeave}\r\n      onTouchStart={handleTouchStart}\r\n      onTouchMove={handleTouchMove}\r\n      onTouchEnd={handleTouchEnd}\r\n      onTouchCancel={handleTouchCancel}\r\n    >\r\n      {/* Bar/Track */}\r\n      <div className={`cris-slider-bar ${barClassName}`} style={computedBarStyle} />\r\n\r\n      {/* Fill */}\r\n      {!fillHidden && (\r\n        <div className={`cris-slider-fill ${fillClassName}`} style={computedFillStyle} />\r\n      )}\r\n\r\n      {/* Thumb */}\r\n      <div className={`cris-slider-thumb ${thumbClassName}`} style={computedThumbStyle} />\r\n    </div>\r\n  );\r\n}\r\n","import { useAnalog, useDigital } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisGaugeProps {\r\n  /** Static value (used if no join) */\r\n  value?: number;\r\n  /** Analog join for value */\r\n  join?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Number of segments (default 20) */\r\n  segments?: number;\r\n  /** Invert direction (default false) */\r\n  inverted?: boolean;\r\n  /** Orientation (default vertical) */\r\n  orientation?: 'vertical' | 'horizontal';\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n\r\n  /** Inactive segment CSS class */\r\n  inactiveSegmentClassName?: string;\r\n  /** Inactive segment inline style */\r\n  inactiveSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Active segment CSS class (all levels) */\r\n  segmentClassName?: string;\r\n  /** Active segment inline style (all levels) */\r\n  segmentStyle?: React.CSSProperties;\r\n\r\n  /** Low level segment CSS class (0-60%) */\r\n  lowSegmentClassName?: string;\r\n  /** Low level segment inline style */\r\n  lowSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Medium level segment CSS class (60-80%) */\r\n  mediumSegmentClassName?: string;\r\n  /** Medium level segment inline style */\r\n  mediumSegmentStyle?: React.CSSProperties;\r\n\r\n  /** High level segment CSS class (80-100%) */\r\n  highSegmentClassName?: string;\r\n  /** High level segment inline style */\r\n  highSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisGauge({\r\n  value,\r\n  join,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  segments = 20,\r\n  inverted = false,\r\n  orientation = 'vertical',\r\n  className = '',\r\n  style,\r\n  inactiveSegmentClassName = '',\r\n  inactiveSegmentStyle,\r\n  segmentClassName = '',\r\n  segmentStyle,\r\n  lowSegmentClassName = '',\r\n  lowSegmentStyle,\r\n  mediumSegmentClassName = '',\r\n  mediumSegmentStyle,\r\n  highSegmentClassName = '',\r\n  highSegmentStyle,\r\n  classDisabled = '',\r\n}: CrisGaugeProps) {\r\n  // Get join values reactively\r\n  const joinValue = useAnalog(join ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get current value\r\n  const currentValue = join != null ? joinValue : (value ?? 0);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Determine segment type (low, medium, high)\r\n  const getSegmentType = (segment: number): 'low' | 'medium' | 'high' => {\r\n    const lowMax = segments * 0.6;\r\n    const mediumMax = segments * 0.8;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    if (seg <= lowMax) return 'low';\r\n    if (seg <= mediumMax) return 'medium';\r\n    return 'high';\r\n  };\r\n\r\n  // Check if segment is active\r\n  const isSegmentActive = (segment: number): boolean => {\r\n    if (currentValue < minValue) return false;\r\n    if (currentValue > maxValue) return true;\r\n\r\n    const ratio = currentValue / (maxValue - minValue);\r\n    let segMax = Math.round(segments * ratio);\r\n    if (ratio !== 0 && segMax === 0) segMax = 1;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    return seg <= segMax;\r\n  };\r\n\r\n  // Get segment class\r\n  const getSegmentClass = (segment: number): string => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    const classes = ['cris-gauge-segment', type, orientation];\r\n\r\n    if (active) {\r\n      classes.push('active');\r\n      // Add type-specific or general active class\r\n      if (type === 'low' && (lowSegmentClassName || segmentClassName)) {\r\n        classes.push(lowSegmentClassName || segmentClassName);\r\n      } else if (type === 'medium' && (mediumSegmentClassName || segmentClassName)) {\r\n        classes.push(mediumSegmentClassName || segmentClassName);\r\n      } else if (type === 'high' && (highSegmentClassName || segmentClassName)) {\r\n        classes.push(highSegmentClassName || segmentClassName);\r\n      }\r\n    } else {\r\n      if (inactiveSegmentClassName) {\r\n        classes.push(inactiveSegmentClassName);\r\n      }\r\n    }\r\n\r\n    return classes.filter(Boolean).join(' ');\r\n  };\r\n\r\n  // Get segment style\r\n  const getSegmentStyle = (segment: number): React.CSSProperties | undefined => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    if (active) {\r\n      if (type === 'low' && (lowSegmentStyle || segmentStyle)) {\r\n        return lowSegmentStyle || segmentStyle;\r\n      } else if (type === 'medium' && (mediumSegmentStyle || segmentStyle)) {\r\n        return mediumSegmentStyle || segmentStyle;\r\n      } else if (type === 'high' && (highSegmentStyle || segmentStyle)) {\r\n        return highSegmentStyle || segmentStyle;\r\n      }\r\n    } else {\r\n      return inactiveSegmentStyle;\r\n    }\r\n\r\n    return undefined;\r\n  };\r\n\r\n  // Build container classes\r\n  const containerClasses = [\r\n    'cris-gauge',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Container flex style\r\n  const containerStyle: React.CSSProperties = {\r\n    ...style,\r\n    display: 'flex',\r\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  };\r\n\r\n  return (\r\n    <div className={containerClasses} style={containerStyle}>\r\n      {Array.from({ length: segments }, (_, segment) => (\r\n        <div\r\n          key={segment}\r\n          className={getSegmentClass(segment)}\r\n          style={getSegmentStyle(segment)}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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","names":["useDigital","jsx","jsxs","useState","useRef","useDigital","useJoinsStore","jsx","jsxs","useAnalog","useDigital","jsx"]}
+{"version":3,"sources":["../src/components/CrisButton.tsx","../src/utils/icons.ts","../src/components/CrisText.tsx","../src/components/CrisSlider.tsx","../src/components/CrisGauge.tsx"],"sourcesContent":["import { useState, useRef, ReactNode } from 'react';\r\nimport { useDigital, useJoinsStore } from '@imperosoft/cris-webui-core';\r\nimport { getIconUrl, getIconFilter } from '../utils/icons';\r\n\r\nexport interface CrisButtonProps {\r\n  /** Digital join for press action */\r\n  join?: number;\r\n  /** Digital join for feedback (defaults to join) */\r\n  joinFeedback?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Button text */\r\n  text?: string;\r\n  /** Text when pressed (local feedback) */\r\n  textPressed?: string;\r\n  /** Text when selected (controller feedback) */\r\n  textSelected?: string;\r\n\r\n  /** Icon as ReactNode (for custom SVG components) */\r\n  icon?: ReactNode;\r\n  /** Icon name (loads SVG from configured path, e.g., 'motor-stop') */\r\n  iconName?: string;\r\n  /** Icon CSS class (for CSS-based icons, e.g., 'ico-motor-stop') */\r\n  iconClass?: string;\r\n  /** Icon size - number (px), string ('50%', '2rem'), or preset ('xs'|'sm'|'md'|'lg'|'xl') */\r\n  iconSize?: number | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  /** Icon container size as percentage (default: 80% for top/bottom, 20% for left/right) */\r\n  iconContainerSize?: string;\r\n  /** Icon inline style */\r\n  iconStyle?: React.CSSProperties;\r\n  /** Icon position relative to text */\r\n  iconPosition?: 'left' | 'right' | 'top' | 'bottom';\r\n\r\n  /** Show controller feedback styling */\r\n  showControlFeedback?: boolean;\r\n  /** Show local press feedback styling */\r\n  showLocalFeedback?: boolean;\r\n  /** Suppress click actions (display only) */\r\n  suppressKeyClicks?: boolean;\r\n\r\n  /** Smart object ID (for smarts instead of joins) */\r\n  smartId?: number;\r\n\r\n  /** Custom class names */\r\n  className?: string;\r\n  /** Class when active (controller feedback) */\r\n  classActive?: string;\r\n  /** Class when pressed (local feedback) */\r\n  classPressed?: string;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n\r\n  /** Children content */\r\n  children?: ReactNode;\r\n\r\n  /** Custom click handler (called on press) */\r\n  onPress?: () => void;\r\n  /** Custom release handler */\r\n  onRelease?: () => void;\r\n}\r\n\r\nexport function CrisButton({\r\n  join,\r\n  joinFeedback,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  textPressed,\r\n  textSelected,\r\n  icon,\r\n  iconName,\r\n  iconClass,\r\n  iconSize,\r\n  iconContainerSize,\r\n  iconStyle,\r\n  iconPosition = 'top',\r\n  showControlFeedback = true,\r\n  showLocalFeedback = true,\r\n  suppressKeyClicks = false,\r\n  smartId,\r\n  className = '',\r\n  classActive = '',\r\n  classPressed = '',\r\n  classDisabled = '',\r\n  children,\r\n  onPress,\r\n  onRelease,\r\n}: CrisButtonProps) {\r\n  const [pressed, setPressed] = useState(false);\r\n  const pressedRef = useRef(false);\r\n\r\n  // Get join values reactively\r\n  const feedbackJoin = joinFeedback ?? join;\r\n  const feedback = useDigital(feedbackJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Get action method\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n\r\n  // Determine if button is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if button is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Determine current feedback state\r\n  const hasControlFeedback = showControlFeedback && feedbackJoin != null && feedback;\r\n  const hasPressedFeedback = showLocalFeedback && pressed && isEnabled;\r\n\r\n  // Determine current text\r\n  let currentText = text ?? '';\r\n  if (hasPressedFeedback && textPressed != null) {\r\n    currentText = textPressed;\r\n  } else if (hasControlFeedback && textSelected != null) {\r\n    currentText = textSelected;\r\n  }\r\n\r\n  // Event handlers\r\n  const handlePress = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (pressedRef.current) return;\r\n\r\n    pressedRef.current = true;\r\n    setPressed(true);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onPress?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, true);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  const handleRelease = () => {\r\n    if (suppressKeyClicks) return;\r\n    if (!pressedRef.current) return;\r\n\r\n    pressedRef.current = false;\r\n    setPressed(false);\r\n\r\n    if (!isEnabled) return;\r\n\r\n    // Custom handler\r\n    onRelease?.();\r\n\r\n    // Send to controller\r\n    if (join != null && smartId == null) {\r\n      dSet(join, false);\r\n    }\r\n    // TODO: Add smartId support when smarts are implemented in core\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const classes = [\r\n    'cris-button',\r\n    className,\r\n    hasControlFeedback && classActive,\r\n    hasPressedFeedback && classPressed,\r\n    !isEnabled && classDisabled,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Flex direction based on icon position\r\n  const flexDirection =\r\n    iconPosition === 'top'\r\n      ? 'flex-col'\r\n      : iconPosition === 'bottom'\r\n        ? 'flex-col-reverse'\r\n        : iconPosition === 'left'\r\n          ? 'flex-row'\r\n          : 'flex-row-reverse';\r\n\r\n  // Determine if we have any icon to show\r\n  const hasIcon = icon != null || iconName != null || iconClass != null;\r\n\r\n  // Size presets mapping\r\n  const sizePresets: Record<string, string> = {\r\n    xs: '16px',\r\n    sm: '24px',\r\n    md: '32px',\r\n    lg: '48px',\r\n    xl: '64px',\r\n  };\r\n\r\n  // Calculate icon size value\r\n  const getIconSizeValue = (): string | undefined => {\r\n    if (iconSize == null) return undefined;\r\n    if (typeof iconSize === 'number') return `${iconSize}px`;\r\n    if (iconSize in sizePresets) return sizePresets[iconSize];\r\n    return iconSize; // Already a string like '50%' or '2rem'\r\n  };\r\n\r\n  const iconSizeValue = getIconSizeValue();\r\n\r\n  // Build icon classes\r\n  const iconClasses = [\r\n    'cris-button-icon',\r\n    iconClass,\r\n    hasControlFeedback && 'active',\r\n    hasPressedFeedback && 'pressed',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Build icon style with size and filter support\r\n  const computedIconStyle: React.CSSProperties = {\r\n    ...iconStyle,\r\n  };\r\n\r\n  // Apply size\r\n  if (iconSizeValue) {\r\n    computedIconStyle.width = iconSizeValue;\r\n    computedIconStyle.height = iconSizeValue;\r\n  }\r\n\r\n  // Apply filter from config if using iconName (only if not overridden by iconStyle)\r\n  if (iconName && !iconStyle?.filter) {\r\n    const filter = getIconFilter(hasControlFeedback || hasPressedFeedback);\r\n    if (filter) {\r\n      computedIconStyle.filter = filter;\r\n    }\r\n  }\r\n\r\n  // Render icon element\r\n  const renderIconElement = () => {\r\n    if (icon) {\r\n      // ReactNode icon (custom component)\r\n      return <span className={iconClasses} style={computedIconStyle}>{icon}</span>;\r\n    }\r\n\r\n    if (iconName) {\r\n      // Icon by name (loads from configured path)\r\n      return (\r\n        <img\r\n          className={iconClasses}\r\n          style={computedIconStyle}\r\n          src={getIconUrl(iconName)}\r\n          alt=\"\"\r\n        />\r\n      );\r\n    }\r\n\r\n    if (iconClass) {\r\n      // CSS-based icon (like Angular version)\r\n      return <img className={iconClasses} style={computedIconStyle} alt=\"\" />;\r\n    }\r\n\r\n    return null;\r\n  };\r\n\r\n  // Calculate icon container size (default: 100% if no text, otherwise 80% for top/bottom, 20% for left/right)\r\n  const isVertical = iconPosition === 'top' || iconPosition === 'bottom';\r\n  const hasText = currentText !== '';\r\n  const defaultContainerSize = hasText ? (isVertical ? '80%' : '20%') : '100%';\r\n  const containerSize = iconContainerSize ?? defaultContainerSize;\r\n\r\n  // Calculate text container size (remaining space)\r\n  const textContainerSize = `calc(100% - ${containerSize})`;\r\n\r\n  // Container style for icon area\r\n  const iconContainerStyle: React.CSSProperties = isVertical\r\n    ? { height: containerSize, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }\r\n    : { width: containerSize, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' };\r\n\r\n  // Container style for text area\r\n  const textContainerStyle: React.CSSProperties = isVertical\r\n    ? { height: textContainerSize, width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }\r\n    : { width: textContainerSize, height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' };\r\n\r\n  return (\r\n    <div\r\n      className={`${classes} flex items-center justify-center ${flexDirection}`}\r\n      style={{ cursor: suppressKeyClicks ? 'default' : 'pointer' }}\r\n      onMouseDown={handlePress}\r\n      onMouseUp={handleRelease}\r\n      onMouseLeave={handleRelease}\r\n      onTouchStart={handlePress}\r\n      onTouchEnd={handleRelease}\r\n      onTouchCancel={handleRelease}\r\n    >\r\n      {children}\r\n      {hasIcon && (\r\n        <div className=\"cris-button-icon-container\" style={iconContainerStyle}>\r\n          {renderIconElement()}\r\n        </div>\r\n      )}\r\n      {currentText && (\r\n        <div className=\"cris-button-text-container\" style={textContainerStyle}>\r\n          <span className=\"cris-button-text\">{currentText}</span>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","/**\r\n * Icon configuration and utilities for CRIS components\r\n *\r\n * Supports different base paths for dev vs production (Crestron controller)\r\n */\r\n\r\nexport interface IconConfig {\r\n  /** Base path for icon assets (e.g., '/assets/icons/' or 'http://controller/icons/') */\r\n  basePath: string;\r\n  /** File extension (default: 'svg') */\r\n  extension: string;\r\n  /** Default filter for inactive state */\r\n  defaultFilter?: string;\r\n  /** Default filter for active state */\r\n  activeFilter?: string;\r\n}\r\n\r\n// Default configuration\r\nlet iconConfig: IconConfig = {\r\n  basePath: '/assets/icons/',\r\n  extension: 'svg',\r\n  defaultFilter: undefined,\r\n  activeFilter: undefined,\r\n};\r\n\r\n/**\r\n * Configure icon paths and defaults\r\n * Call this once at app startup\r\n *\r\n * @example\r\n * // Development\r\n * configureIcons({ basePath: '/assets/icons/' });\r\n *\r\n * // Production on Crestron controller\r\n * configureIcons({ basePath: '/html/icons/' });\r\n *\r\n * // With color filters\r\n * configureIcons({\r\n *   basePath: '/assets/icons/',\r\n *   defaultFilter: 'brightness(0) invert(1)', // white\r\n *   activeFilter: 'brightness(0) invert(0.5) sepia(1) saturate(5) hue-rotate(0deg)', // red\r\n * });\r\n */\r\nexport function configureIcons(config: Partial<IconConfig>): void {\r\n  iconConfig = { ...iconConfig, ...config };\r\n}\r\n\r\n/**\r\n * Get current icon configuration\r\n */\r\nexport function getIconConfig(): IconConfig {\r\n  return iconConfig;\r\n}\r\n\r\n/**\r\n * Get full URL for an icon\r\n *\r\n * @param name - Icon name (without path or extension), e.g., 'motor-stop'\r\n * @returns Full URL to the icon\r\n */\r\nexport function getIconUrl(name: string): string {\r\n  if (!name) return '';\r\n\r\n  // If already a full URL or path, return as-is\r\n  if (name.startsWith('http') || name.startsWith('/') || name.startsWith('.')) {\r\n    return name;\r\n  }\r\n\r\n  const { basePath, extension } = iconConfig;\r\n  const normalizedBase = basePath.endsWith('/') ? basePath : `${basePath}/`;\r\n  return `${normalizedBase}${name}.${extension}`;\r\n}\r\n\r\n/**\r\n * Get CSS filter for icon state\r\n */\r\nexport function getIconFilter(active: boolean): string | undefined {\r\n  return active ? iconConfig.activeFilter : iconConfig.defaultFilter;\r\n}\r\n","import { ReactNode } from 'react';\r\nimport { useDigital, useSerial, useCipDecode } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisTextProps {\r\n  /** Serial join for indirect text */\r\n  joinIndirectText?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n  /** Static text (used if no joinIndirectText) */\r\n  text?: string;\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Text element CSS class */\r\n  textClassName?: string;\r\n  /** Text element inline style */\r\n  textStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n  /** Children content */\r\n  children?: ReactNode;\r\n}\r\n\r\nexport function CrisText({\r\n  joinIndirectText,\r\n  joinEnable,\r\n  joinVisible,\r\n  text,\r\n  className = '',\r\n  style,\r\n  textClassName = '',\r\n  textStyle,\r\n  classDisabled = '',\r\n  children,\r\n}: CrisTextProps) {\r\n  // Get join values reactively\r\n  const indirectText = useSerial(joinIndirectText ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if text is enabled\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n\r\n  // Determine if text is visible\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get the raw text - indirect text or static text\r\n  const rawText = joinIndirectText != null ? indirectText : (text ?? '');\r\n\r\n  // Decode CIP patterns in the text\r\n  const currentText = useCipDecode(rawText);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-text',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div className={containerClasses} style={style}>\r\n      {children}\r\n      {currentText && (\r\n        <span className={`cris-text-text ${textClassName}`} style={textStyle}>\r\n          {currentText}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n","import { useState, useRef, useEffect, useCallback } from 'react';\r\nimport { useDigital, useAnalog, useJoinsStore } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisSliderProps {\r\n  /** Analog join for value (shared with digital if joinDigital not set) */\r\n  join?: number;\r\n  /** Digital join for press/release feedback */\r\n  joinDigital?: number;\r\n  /** Analog join for value (overrides join) */\r\n  joinAnalog?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Horizontal orientation (default false = vertical) */\r\n  horizontal?: boolean;\r\n  /** Hide fill bar */\r\n  fillHidden?: boolean;\r\n  /** Track size as percentage of container (default 20) */\r\n  trackSizePercent?: number;\r\n  /** Thumb size as percentage of container (default 4) */\r\n  thumbSizePercent?: number;\r\n  /** Delay in ms after drag before updating from feedback (default 1000) */\r\n  delayMsAfterDragUpdateFeedback?: number;\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n  /** Bar/track CSS class */\r\n  barClassName?: string;\r\n  /** Bar/track inline style */\r\n  barStyle?: React.CSSProperties;\r\n  /** Fill CSS class */\r\n  fillClassName?: string;\r\n  /** Fill inline style */\r\n  fillStyle?: React.CSSProperties;\r\n  /** Thumb CSS class */\r\n  thumbClassName?: string;\r\n  /** Thumb inline style */\r\n  thumbStyle?: React.CSSProperties;\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisSlider({\r\n  join,\r\n  joinDigital,\r\n  joinAnalog,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  horizontal = false,\r\n  fillHidden = false,\r\n  trackSizePercent = 20,\r\n  thumbSizePercent = 4,\r\n  delayMsAfterDragUpdateFeedback = 1000,\r\n  className = '',\r\n  style,\r\n  barClassName = '',\r\n  barStyle,\r\n  fillClassName = '',\r\n  fillStyle,\r\n  thumbClassName = '',\r\n  thumbStyle,\r\n  classDisabled = '',\r\n}: CrisSliderProps) {\r\n  // Effective joins\r\n  const effectiveAnalogJoin = joinAnalog ?? join;\r\n  const effectiveDigitalJoin = joinDigital ?? join;\r\n\r\n  // Get join values reactively\r\n  const analogValue = useAnalog(effectiveAnalogJoin ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Action methods\r\n  const dSet = useJoinsStore((state) => state.dSet);\r\n  const aSet = useJoinsStore((state) => state.aSet);\r\n\r\n  // Local state\r\n  const [ratioCurrent, setRatioCurrent] = useState(0);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const isDraggingOrJustAfterRef = useRef(false);\r\n  const ratioBeforeDragRef = useRef(0);\r\n  const afterDragTimeoutRef = useRef<number | null>(null);\r\n  const touchingRef = useRef(false);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Convert analog value to ratio\r\n  const analogToRatio = useCallback(\r\n    (value: number) => {\r\n      const range = maxValue - minValue;\r\n      if (range <= 0) return 0;\r\n      return Math.max(0, Math.min(1, (value - minValue) / range));\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Convert ratio to analog value\r\n  const ratioToAnalog = useCallback(\r\n    (ratio: number) => {\r\n      const range = maxValue - minValue;\r\n      return Math.round(minValue + ratio * range);\r\n    },\r\n    [minValue, maxValue]\r\n  );\r\n\r\n  // Update ratio from controller feedback\r\n  const updateFromFeedback = useCallback(() => {\r\n    if (!isDraggingOrJustAfterRef.current && effectiveAnalogJoin != null) {\r\n      setRatioCurrent(analogToRatio(analogValue));\r\n    }\r\n  }, [analogValue, analogToRatio, effectiveAnalogJoin]);\r\n\r\n  // Update from feedback when analog value changes\r\n  useEffect(() => {\r\n    updateFromFeedback();\r\n  }, [updateFromFeedback]);\r\n\r\n  // Handle drag start\r\n  const handleDragStart = useCallback(() => {\r\n    if (!isEnabled) return;\r\n\r\n    setIsDragging(true);\r\n\r\n    // Send digital press\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, true);\r\n    }\r\n\r\n    // Save ratio before drag\r\n    if (!isDraggingOrJustAfterRef.current) {\r\n      ratioBeforeDragRef.current = ratioCurrent;\r\n    }\r\n    isDraggingOrJustAfterRef.current = true;\r\n\r\n    // Clear any pending timeout\r\n    if (afterDragTimeoutRef.current !== null) {\r\n      window.clearTimeout(afterDragTimeoutRef.current);\r\n      afterDragTimeoutRef.current = null;\r\n    }\r\n  }, [isEnabled, effectiveDigitalJoin, dSet, ratioCurrent]);\r\n\r\n  // Handle drag end\r\n  const handleDragEnd = useCallback(() => {\r\n    if (!isDragging) return;\r\n\r\n    setIsDragging(false);\r\n\r\n    // Send digital release\r\n    if (effectiveDigitalJoin != null) {\r\n      dSet(effectiveDigitalJoin, false);\r\n    }\r\n\r\n    // Schedule feedback update after delay\r\n    if (delayMsAfterDragUpdateFeedback > 0) {\r\n      afterDragTimeoutRef.current = window.setTimeout(() => {\r\n        isDraggingOrJustAfterRef.current = false;\r\n        updateFromFeedback();\r\n        afterDragTimeoutRef.current = null;\r\n      }, delayMsAfterDragUpdateFeedback);\r\n    } else {\r\n      isDraggingOrJustAfterRef.current = false;\r\n      updateFromFeedback();\r\n    }\r\n  }, [isDragging, effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback]);\r\n\r\n  // Handle move/drag\r\n  const handleMove = useCallback(\r\n    (clientX: number, clientY: number, bounds: DOMRect) => {\r\n      if (!isDragging) return;\r\n\r\n      let newRatio: number;\r\n      if (horizontal) {\r\n        newRatio = (clientX - bounds.left) / bounds.width;\r\n      } else {\r\n        newRatio = 1 - (clientY - bounds.top) / bounds.height;\r\n      }\r\n      newRatio = Math.max(0, Math.min(1, newRatio));\r\n\r\n      setRatioCurrent(newRatio);\r\n\r\n      // Send analog value\r\n      if (effectiveAnalogJoin != null) {\r\n        aSet(effectiveAnalogJoin, ratioToAnalog(newRatio));\r\n      }\r\n    },\r\n    [isDragging, horizontal, effectiveAnalogJoin, aSet, ratioToAnalog]\r\n  );\r\n\r\n  // Mouse handlers\r\n  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (touchingRef.current) return;\r\n    if (event.button !== 0) return;\r\n\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    handleMove(event.clientX, event.clientY, bounds);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {\r\n    if (isDragging) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      handleMove(event.clientX, event.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Touch handlers\r\n  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    touchingRef.current = true;\r\n    handleDragStart();\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchMove = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (!isDragging) return;\r\n    const bounds = event.currentTarget.getBoundingClientRect();\r\n    const touch = event.touches[0];\r\n    handleMove(touch.clientX, touch.clientY, bounds);\r\n  };\r\n\r\n  const handleTouchEnd = () => {\r\n    handleDragEnd();\r\n  };\r\n\r\n  const handleTouchCancel = (event: React.TouchEvent<HTMLDivElement>) => {\r\n    if (isDragging && event.touches.length > 0) {\r\n      const bounds = event.currentTarget.getBoundingClientRect();\r\n      const touch = event.touches[0];\r\n      handleMove(touch.clientX, touch.clientY, bounds);\r\n    }\r\n    handleDragEnd();\r\n  };\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Build class names\r\n  const containerClasses = [\r\n    'cris-slider',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Calculate bar style\r\n  const computedBarStyle: React.CSSProperties = {\r\n    ...barStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const width = 100 - thumbSizePercent;\r\n    const left = (100 - width) / 2;\r\n    computedBarStyle.height = `${trackSizePercent}%`;\r\n    computedBarStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.width = `${width}%`;\r\n    computedBarStyle.left = `${left}%`;\r\n  } else {\r\n    const height = 100 - thumbSizePercent;\r\n    const top = (100 - height) / 2;\r\n    computedBarStyle.width = `${trackSizePercent}%`;\r\n    computedBarStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedBarStyle.height = `${height}%`;\r\n    computedBarStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate fill style\r\n  const computedFillStyle: React.CSSProperties = {\r\n    ...fillStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const range = 100 - thumbSizePercent;\r\n    const left = thumbSizePercent / 2;\r\n    const width = range * ratioCurrent;\r\n    computedFillStyle.height = `${trackSizePercent}%`;\r\n    computedFillStyle.top = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.width = `${width}%`;\r\n    computedFillStyle.left = `${left}%`;\r\n  } else {\r\n    const range = 100 - thumbSizePercent;\r\n    const top = 100 - (range * ratioCurrent + thumbSizePercent / 2);\r\n    const height = range + thumbSizePercent / 2 - top;\r\n    computedFillStyle.width = `${trackSizePercent}%`;\r\n    computedFillStyle.left = `${(100 - trackSizePercent) / 2}%`;\r\n    computedFillStyle.height = `${height}%`;\r\n    computedFillStyle.top = `${top}%`;\r\n  }\r\n\r\n  // Calculate thumb style\r\n  const computedThumbStyle: React.CSSProperties = {\r\n    ...thumbStyle,\r\n    position: 'absolute',\r\n  };\r\n\r\n  if (horizontal) {\r\n    const maxLeft = 100 - thumbSizePercent;\r\n    const left = maxLeft * ratioCurrent;\r\n    computedThumbStyle.width = `${thumbSizePercent}%`;\r\n    computedThumbStyle.height = '100%';\r\n    computedThumbStyle.left = `${left}%`;\r\n  } else {\r\n    const maxTop = 100 - thumbSizePercent;\r\n    const top = maxTop - maxTop * ratioCurrent;\r\n    computedThumbStyle.width = '100%';\r\n    computedThumbStyle.height = `${thumbSizePercent}%`;\r\n    computedThumbStyle.top = `${top}%`;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={containerClasses}\r\n      style={{\r\n        ...style,\r\n        position: 'relative',\r\n        cursor: isEnabled ? 'pointer' : 'default',\r\n        touchAction: 'none',\r\n        userSelect: 'none',\r\n      }}\r\n      onMouseDown={handleMouseDown}\r\n      onMouseMove={handleMouseMove}\r\n      onMouseUp={handleMouseUp}\r\n      onMouseLeave={handleMouseLeave}\r\n      onTouchStart={handleTouchStart}\r\n      onTouchMove={handleTouchMove}\r\n      onTouchEnd={handleTouchEnd}\r\n      onTouchCancel={handleTouchCancel}\r\n    >\r\n      {/* Bar/Track */}\r\n      <div className={`cris-slider-bar ${barClassName}`} style={computedBarStyle} />\r\n\r\n      {/* Fill */}\r\n      {!fillHidden && (\r\n        <div className={`cris-slider-fill ${fillClassName}`} style={computedFillStyle} />\r\n      )}\r\n\r\n      {/* Thumb */}\r\n      <div className={`cris-slider-thumb ${thumbClassName}`} style={computedThumbStyle} />\r\n    </div>\r\n  );\r\n}\r\n","import { useAnalog, useDigital } from '@imperosoft/cris-webui-core';\r\n\r\nexport interface CrisGaugeProps {\r\n  /** Static value (used if no join) */\r\n  value?: number;\r\n  /** Analog join for value */\r\n  join?: number;\r\n  /** Digital join for enable state */\r\n  joinEnable?: number;\r\n  /** Digital join for visibility */\r\n  joinVisible?: number;\r\n\r\n  /** Minimum value (default 0) */\r\n  minValue?: number;\r\n  /** Maximum value (default 65535) */\r\n  maxValue?: number;\r\n  /** Number of segments (default 20) */\r\n  segments?: number;\r\n  /** Invert direction (default false) */\r\n  inverted?: boolean;\r\n  /** Orientation (default vertical) */\r\n  orientation?: 'vertical' | 'horizontal';\r\n\r\n  /** Container CSS class */\r\n  className?: string;\r\n  /** Container inline style */\r\n  style?: React.CSSProperties;\r\n\r\n  /** Inactive segment CSS class */\r\n  inactiveSegmentClassName?: string;\r\n  /** Inactive segment inline style */\r\n  inactiveSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Active segment CSS class (all levels) */\r\n  segmentClassName?: string;\r\n  /** Active segment inline style (all levels) */\r\n  segmentStyle?: React.CSSProperties;\r\n\r\n  /** Low level segment CSS class (0-60%) */\r\n  lowSegmentClassName?: string;\r\n  /** Low level segment inline style */\r\n  lowSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Medium level segment CSS class (60-80%) */\r\n  mediumSegmentClassName?: string;\r\n  /** Medium level segment inline style */\r\n  mediumSegmentStyle?: React.CSSProperties;\r\n\r\n  /** High level segment CSS class (80-100%) */\r\n  highSegmentClassName?: string;\r\n  /** High level segment inline style */\r\n  highSegmentStyle?: React.CSSProperties;\r\n\r\n  /** Class when disabled */\r\n  classDisabled?: string;\r\n}\r\n\r\nexport function CrisGauge({\r\n  value,\r\n  join,\r\n  joinEnable,\r\n  joinVisible,\r\n  minValue = 0,\r\n  maxValue = 65535,\r\n  segments = 20,\r\n  inverted = false,\r\n  orientation = 'vertical',\r\n  className = '',\r\n  style,\r\n  inactiveSegmentClassName = '',\r\n  inactiveSegmentStyle,\r\n  segmentClassName = '',\r\n  segmentStyle,\r\n  lowSegmentClassName = '',\r\n  lowSegmentStyle,\r\n  mediumSegmentClassName = '',\r\n  mediumSegmentStyle,\r\n  highSegmentClassName = '',\r\n  highSegmentStyle,\r\n  classDisabled = '',\r\n}: CrisGaugeProps) {\r\n  // Get join values reactively\r\n  const joinValue = useAnalog(join ?? 0);\r\n  const enabled = useDigital(joinEnable ?? 0);\r\n  const visible = useDigital(joinVisible ?? 0);\r\n\r\n  // Determine if enabled and visible\r\n  const isEnabled = joinEnable == null ? true : enabled;\r\n  const isVisible = joinVisible == null ? true : visible;\r\n\r\n  // Get current value\r\n  const currentValue = join != null ? joinValue : (value ?? 0);\r\n\r\n  // Don't render if not visible\r\n  if (!isVisible) return null;\r\n\r\n  // Determine segment type (low, medium, high)\r\n  const getSegmentType = (segment: number): 'low' | 'medium' | 'high' => {\r\n    const lowMax = segments * 0.6;\r\n    const mediumMax = segments * 0.8;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    if (seg <= lowMax) return 'low';\r\n    if (seg <= mediumMax) return 'medium';\r\n    return 'high';\r\n  };\r\n\r\n  // Check if segment is active\r\n  const isSegmentActive = (segment: number): boolean => {\r\n    if (currentValue < minValue) return false;\r\n    if (currentValue > maxValue) return true;\r\n\r\n    const ratio = currentValue / (maxValue - minValue);\r\n    let segMax = Math.round(segments * ratio);\r\n    if (ratio !== 0 && segMax === 0) segMax = 1;\r\n\r\n    const seg =\r\n      (inverted && orientation === 'vertical') || (!inverted && orientation === 'horizontal')\r\n        ? segment + 1\r\n        : segments - segment;\r\n\r\n    return seg <= segMax;\r\n  };\r\n\r\n  // Get segment class\r\n  const getSegmentClass = (segment: number): string => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    const classes = ['cris-gauge-segment', type, orientation];\r\n\r\n    if (active) {\r\n      classes.push('active');\r\n      // Add type-specific or general active class\r\n      if (type === 'low' && (lowSegmentClassName || segmentClassName)) {\r\n        classes.push(lowSegmentClassName || segmentClassName);\r\n      } else if (type === 'medium' && (mediumSegmentClassName || segmentClassName)) {\r\n        classes.push(mediumSegmentClassName || segmentClassName);\r\n      } else if (type === 'high' && (highSegmentClassName || segmentClassName)) {\r\n        classes.push(highSegmentClassName || segmentClassName);\r\n      }\r\n    } else {\r\n      if (inactiveSegmentClassName) {\r\n        classes.push(inactiveSegmentClassName);\r\n      }\r\n    }\r\n\r\n    return classes.filter(Boolean).join(' ');\r\n  };\r\n\r\n  // Get segment style\r\n  const getSegmentStyle = (segment: number): React.CSSProperties | undefined => {\r\n    const type = getSegmentType(segment);\r\n    const active = isSegmentActive(segment);\r\n\r\n    if (active) {\r\n      if (type === 'low' && (lowSegmentStyle || segmentStyle)) {\r\n        return lowSegmentStyle || segmentStyle;\r\n      } else if (type === 'medium' && (mediumSegmentStyle || segmentStyle)) {\r\n        return mediumSegmentStyle || segmentStyle;\r\n      } else if (type === 'high' && (highSegmentStyle || segmentStyle)) {\r\n        return highSegmentStyle || segmentStyle;\r\n      }\r\n    } else {\r\n      return inactiveSegmentStyle;\r\n    }\r\n\r\n    return undefined;\r\n  };\r\n\r\n  // Build container classes\r\n  const containerClasses = [\r\n    'cris-gauge',\r\n    className,\r\n    !isEnabled && classDisabled,\r\n    !isEnabled && 'disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Container flex style\r\n  const containerStyle: React.CSSProperties = {\r\n    ...style,\r\n    display: 'flex',\r\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n  };\r\n\r\n  return (\r\n    <div className={containerClasses} style={containerStyle}>\r\n      {Array.from({ length: segments }, (_, segment) => (\r\n        <div\r\n          key={segment}\r\n          className={getSegmentClass(segment)}\r\n          style={getSegmentStyle(segment)}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":"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","names":["useDigital","jsx","jsxs","useState","useRef","useDigital","useJoinsStore","jsx","jsxs","useAnalog","useDigital","jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imperosoft/cris-webui-components",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.7",
   "description": "CRIS - Crestron React Impero Soft WebUI components library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",