@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/components/widgets/gauge/GaugeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeWidget.tsx"],"sourcesContent":["/**\n * GaugeWidget Component\n *\n * Gauge widget with circular and linear variants.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, GaugeConfig } from '../../../types';\nimport { CircularGauge, type ThresholdConfig } from './CircularGauge';\nimport { LinearGauge } from './LinearGauge';\nimport { unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GaugeWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Gauge data */\n  data?: GaugeData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives gauge data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface GaugeData {\n  /** Current value */\n  value: number;\n  /** Optional label */\n  label?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst DEFAULT_THRESHOLDS: ThresholdConfig[] = [\n  { value: 33, color: 'var(--color-state-error)' },\n  { value: 66, color: 'var(--color-state-warning)' },\n  { value: 100, color: 'var(--color-state-success)' },\n];\n\nfunction buildThresholds(config?: GaugeConfig): ThresholdConfig[] {\n  if (!config?.thresholds?.length) {\n    return DEFAULT_THRESHOLDS;\n  }\n\n  return config.thresholds.map((t) => ({\n    value: t.value,\n    color:\n      t.color === 'success'\n        ? 'var(--color-state-success)'\n        : t.color === 'warning'\n          ? 'var(--color-state-warning)'\n          : t.color === 'error'\n            ? 'var(--color-state-error)'\n            : t.color,\n  }));\n}\n\nfunction formatGaugeValue(value: number, config?: GaugeConfig): string {\n  const format = config?.format || 'number';\n\n  switch (format) {\n    case 'percentage':\n      return `${value.toFixed(0)}%`;\n    case 'currency':\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        maximumFractionDigits: 0,\n      }).format(value);\n    case 'number':\n    default:\n      return new Intl.NumberFormat('en-US', {\n        maximumFractionDigits: config?.decimals || 0,\n      }).format(value);\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeWidget: FC<GaugeWidgetProps> = memo(function GaugeWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as GaugeConfig | undefined;\n\n  const thresholds = useMemo(() => buildThresholds(config), [config]);\n\n  const formatValue = useCallback((value: number) => formatGaugeValue(value, config), [config]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isLinear = config?.variant === 'linear';\n\n  // Normalize data from different formats (DataSink array, single object, etc.)\n  const normalizedData = useMemo((): GaugeData | null => {\n    if (!rawData) return null;\n\n    // Explicit top-level `value` always wins — even if a sibling envelope\n    // key exists (`{value: 42, data: [...]}` is a common summary+detail\n    // shape) we prefer the summary value rather than coercing to array mode.\n    if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {\n      const asRecord = rawData as unknown as Record<string, unknown>;\n      if ('value' in asRecord && typeof asRecord.value === 'number') {\n        return rawData as GaugeData;\n      }\n    }\n\n    // BOFF-2246: unwrap common envelopes so the existing array handler below\n    // (with its rich common-field heuristics) runs for parsers emitting\n    // `{data: [...]}` / `{items: [...]}` — previously those payloads hit\n    // \"No gauge data\" because no handler matched.\n    //\n    // Caveat: summary+detail payloads like `{ totalSales: 120, data: [...] }`\n    // should keep the top-level numeric (the existing single-object handler\n    // below has a generic \"any numeric field\" last-resort scan that would\n    // otherwise surface it). Skip the unwrap whenever ANY numeric sibling\n    // exists alongside the envelope key — matches the scope of the generic\n    // scan so we don't regress previously-working payloads.\n    let data: unknown = rawData;\n    if (data && typeof data === 'object' && !Array.isArray(data)) {\n      const obj = data as Record<string, unknown>;\n      const hasTopLevelNumericSibling = Object.entries(obj).some(([k, v]) => {\n        if (k === 'data' || k === 'items' || k === 'rows') return false;\n        return typeof v === 'number';\n      });\n\n      if (!hasTopLevelNumericSibling) {\n        // Array-aware unwrap — picks the first envelope key that's actually\n        // an array, so payloads like `{data: {page: 1}, items: [...]}` still\n        // reach the array handler below.\n        const maybe = unwrapRows(obj);\n        if (maybe && maybe.length > 0) data = maybe;\n      }\n    }\n\n    // Get configured value field from widget config\n    const valueField =\n      ((config as Record<string, unknown> | undefined)?.valueField as string) ||\n      ((config as Record<string, unknown> | undefined)?.value_field as string) ||\n      'value';\n\n    // Handle array from DataSink - extract value from first item\n    if (Array.isArray(data) && data.length > 0) {\n      const firstItem = data[0] as Record<string, unknown>;\n\n      // Try configured field first\n      if (typeof firstItem[valueField] === 'number') {\n        return {\n          value: firstItem[valueField] as number,\n          label: typeof firstItem.label === 'string' ? firstItem.label : undefined,\n        };\n      }\n\n      // Try common numeric field names\n      const numericFields = [\n        'value',\n        'growth',\n        'percentage',\n        'percent',\n        'progress',\n        'score',\n        'rate',\n        'amount',\n        'total',\n      ];\n      for (const field of numericFields) {\n        if (typeof firstItem[field] === 'number') {\n          return {\n            value: firstItem[field] as number,\n            label:\n              typeof firstItem.label === 'string'\n                ? firstItem.label\n                : typeof firstItem.name === 'string'\n                  ? firstItem.name\n                  : undefined,\n          };\n        }\n      }\n\n      // Find any numeric field\n      const numericEntry = Object.entries(firstItem).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        return {\n          value: numericEntry[1] as number,\n          label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n        };\n      }\n\n      // Try to aggregate (average) across all rows if single item didn't work\n      if (data.length > 1) {\n        const allNumericFields = Object.entries(firstItem).filter(([, v]) => typeof v === 'number');\n        if (allNumericFields.length > 0) {\n          const [fieldName] = allNumericFields[0];\n          const avg =\n            data.reduce((sum, row) => {\n              const val = (row as Record<string, unknown>)[fieldName];\n              return sum + (typeof val === 'number' ? val : 0);\n            }, 0) / data.length;\n\n          return {\n            value: Math.round(avg * 100) / 100,\n            label: `Avg ${fieldName.charAt(0).toUpperCase()}${fieldName.slice(1)}`,\n          };\n        }\n      }\n    }\n\n    // Handle single object without 'value' property\n    if (typeof data === 'object' && !Array.isArray(data)) {\n      const dataObj = data as unknown as Record<string, unknown>;\n\n      // Try configured field\n      if (typeof dataObj[valueField] === 'number') {\n        return {\n          value: dataObj[valueField] as number,\n          label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n        };\n      }\n\n      // Try common field names\n      const numericFields = [\n        'value',\n        'growth',\n        'percentage',\n        'percent',\n        'progress',\n        'score',\n        'rate',\n        'amount',\n        'total',\n      ];\n      for (const field of numericFields) {\n        if (typeof dataObj[field] === 'number') {\n          return {\n            value: dataObj[field] as number,\n            label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n          };\n        }\n      }\n\n      // Find any numeric field\n      const numericEntry = Object.entries(dataObj).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        return {\n          value: numericEntry[1] as number,\n          label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n        };\n      }\n    }\n\n    // Handle direct number\n    if (typeof data === 'number') {\n      return { value: data };\n    }\n\n    // Handle string that can be parsed as number\n    if (typeof data === 'string') {\n      const parsed = parseFloat(data);\n      if (!isNaN(parsed)) {\n        return { value: parsed };\n      }\n    }\n\n    return null;\n  }, [rawData, config]);\n\n  // Handle drilldown click - must be after normalizedData is computed\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && normalizedData) {\n      onDrilldown({\n        value: normalizedData.value,\n        label: normalizedData.label,\n        min: config?.min,\n        max: config?.max,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, normalizedData, config?.min, config?.max]);\n\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!normalizedData) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg\n            className=\"w-12 h-12 mx-auto mb-2 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n            />\n          </svg>\n          <p>No gauge data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`\n        flex flex-col items-center justify-center h-full p-4\n        ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n      `}\n      onClick={handleClick}\n      role={isClickable ? 'button' : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Label */}\n      {normalizedData.label && <p className=\"text-sm text-text-secondary mb-3 text-center\">{normalizedData.label}</p>}\n\n      {/* Gauge */}\n      <div className={`${isLinear ? 'w-full max-w-xs' : ''}`}>\n        {isLinear ? (\n          <LinearGauge\n            value={normalizedData.value}\n            min={config?.min}\n            max={config?.max}\n            thresholds={thresholds}\n            unit={config?.unit}\n            formatValue={formatValue}\n            showZones={config?.showZones}\n          />\n        ) : (\n          <CircularGauge\n            value={normalizedData.value}\n            min={config?.min}\n            max={config?.max}\n            thresholds={thresholds}\n            unit={config?.unit}\n            formatValue={formatValue}\n            size={config?.size === 'sm' ? 100 : config?.size === 'md' ? 140 : config?.size === 'lg' ? 180 : 140}\n          />\n        )}\n      </div>\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-3 flex items-center justify-center\">\n          <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n            View details\n            <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default GaugeWidget;\n"],"mappings":"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"}
+{"version":3,"file":"GaugeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/gauge/GaugeWidget.tsx"],"sourcesContent":["/**\n * GaugeWidget Component\n *\n * Gauge widget with circular and linear variants.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, GaugeConfig } from '../../../types';\nimport { CircularGauge, type ThresholdConfig } from './CircularGauge';\nimport { LinearGauge } from './LinearGauge';\nimport { unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface GaugeWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Gauge data */\n  data?: GaugeData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives gauge data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface GaugeData {\n  /** Current value */\n  value: number;\n  /** Optional label */\n  label?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst DEFAULT_THRESHOLDS: ThresholdConfig[] = [\n  { value: 33, color: 'var(--color-state-error)' },\n  { value: 66, color: 'var(--color-state-warning)' },\n  { value: 100, color: 'var(--color-state-success)' },\n];\n\nfunction buildThresholds(config?: GaugeConfig): ThresholdConfig[] {\n  if (!config?.thresholds?.length) {\n    return DEFAULT_THRESHOLDS;\n  }\n\n  return config.thresholds.map((t) => ({\n    value: t.value,\n    color:\n      t.color === 'success'\n        ? 'var(--color-state-success)'\n        : t.color === 'warning'\n          ? 'var(--color-state-warning)'\n          : t.color === 'error'\n            ? 'var(--color-state-error)'\n            : t.color,\n  }));\n}\n\nfunction formatGaugeValue(value: number, config?: GaugeConfig): string {\n  const format = config?.format || 'number';\n\n  switch (format) {\n    case 'percentage':\n      return `${value.toFixed(0)}%`;\n    case 'currency':\n      return new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        maximumFractionDigits: 0,\n      }).format(value);\n    case 'number':\n    default:\n      return new Intl.NumberFormat('en-US', {\n        maximumFractionDigits: config?.decimals || 0,\n      }).format(value);\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const GaugeWidget: FC<GaugeWidgetProps> = memo(function GaugeWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as GaugeConfig | undefined;\n\n  const thresholds = useMemo(() => buildThresholds(config), [config]);\n\n  const formatValue = useCallback((value: number) => formatGaugeValue(value, config), [config]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isLinear = config?.variant === 'linear';\n\n  // Normalize data from different formats (DataSink array, single object, etc.)\n  const normalizedData = useMemo((): GaugeData | null => {\n    if (!rawData) return null;\n\n    // Explicit top-level `value` always wins — even if a sibling envelope\n    // key exists (`{value: 42, data: [...]}` is a common summary+detail\n    // shape) we prefer the summary value rather than coercing to array mode.\n    if (rawData && typeof rawData === 'object' && !Array.isArray(rawData)) {\n      const asRecord = rawData as unknown as Record<string, unknown>;\n      if ('value' in asRecord && typeof asRecord.value === 'number') {\n        return rawData as GaugeData;\n      }\n    }\n\n    // BOFF-2246: unwrap common envelopes so the existing array handler below\n    // (with its rich common-field heuristics) runs for parsers emitting\n    // `{data: [...]}` / `{items: [...]}` — previously those payloads hit\n    // \"No gauge data\" because no handler matched.\n    //\n    // Caveat: summary+detail payloads like `{ totalSales: 120, data: [...] }`\n    // should keep the top-level numeric (the existing single-object handler\n    // below has a generic \"any numeric field\" last-resort scan that would\n    // otherwise surface it). Skip the unwrap whenever ANY numeric sibling\n    // exists alongside the envelope key — matches the scope of the generic\n    // scan so we don't regress previously-working payloads.\n    let data: unknown = rawData;\n    if (data && typeof data === 'object' && !Array.isArray(data)) {\n      const obj = data as Record<string, unknown>;\n      const hasTopLevelNumericSibling = Object.entries(obj).some(([k, v]) => {\n        if (k === 'data' || k === 'items' || k === 'rows') return false;\n        return typeof v === 'number';\n      });\n\n      if (!hasTopLevelNumericSibling) {\n        // Array-aware unwrap — picks the first envelope key that's actually\n        // an array, so payloads like `{data: {page: 1}, items: [...]}` still\n        // reach the array handler below.\n        const maybe = unwrapRows(obj);\n        if (maybe && maybe.length > 0) data = maybe;\n      }\n    }\n\n    // Get configured value field from widget config\n    const valueField =\n      ((config as Record<string, unknown> | undefined)?.valueField as string) ||\n      ((config as Record<string, unknown> | undefined)?.value_field as string) ||\n      'value';\n\n    // Handle array from DataSink - extract value from first item\n    if (Array.isArray(data) && data.length > 0) {\n      const firstItem = data[0] as Record<string, unknown>;\n\n      // Try configured field first\n      if (typeof firstItem[valueField] === 'number') {\n        return {\n          value: firstItem[valueField] as number,\n          label: typeof firstItem.label === 'string' ? firstItem.label : undefined,\n        };\n      }\n\n      // Try common numeric field names\n      const numericFields = [\n        'value',\n        'growth',\n        'percentage',\n        'percent',\n        'progress',\n        'score',\n        'rate',\n        'amount',\n        'total',\n      ];\n      for (const field of numericFields) {\n        if (typeof firstItem[field] === 'number') {\n          return {\n            value: firstItem[field] as number,\n            label:\n              typeof firstItem.label === 'string'\n                ? firstItem.label\n                : typeof firstItem.name === 'string'\n                  ? firstItem.name\n                  : undefined,\n          };\n        }\n      }\n\n      // Find any numeric field\n      const numericEntry = Object.entries(firstItem).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        return {\n          value: numericEntry[1] as number,\n          label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n        };\n      }\n\n      // Try to aggregate (average) across all rows if single item didn't work\n      if (data.length > 1) {\n        const allNumericFields = Object.entries(firstItem).filter(([, v]) => typeof v === 'number');\n        if (allNumericFields.length > 0) {\n          const [fieldName] = allNumericFields[0];\n          const avg =\n            data.reduce((sum, row) => {\n              const val = (row as Record<string, unknown>)[fieldName];\n              return sum + (typeof val === 'number' ? val : 0);\n            }, 0) / data.length;\n\n          return {\n            value: Math.round(avg * 100) / 100,\n            label: `Avg ${fieldName.charAt(0).toUpperCase()}${fieldName.slice(1)}`,\n          };\n        }\n      }\n    }\n\n    // Handle single object without 'value' property\n    if (typeof data === 'object' && !Array.isArray(data)) {\n      const dataObj = data as unknown as Record<string, unknown>;\n\n      // Try configured field\n      if (typeof dataObj[valueField] === 'number') {\n        return {\n          value: dataObj[valueField] as number,\n          label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n        };\n      }\n\n      // Try common field names\n      const numericFields = [\n        'value',\n        'growth',\n        'percentage',\n        'percent',\n        'progress',\n        'score',\n        'rate',\n        'amount',\n        'total',\n      ];\n      for (const field of numericFields) {\n        if (typeof dataObj[field] === 'number') {\n          return {\n            value: dataObj[field] as number,\n            label: typeof dataObj.label === 'string' ? dataObj.label : undefined,\n          };\n        }\n      }\n\n      // Find any numeric field\n      const numericEntry = Object.entries(dataObj).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        return {\n          value: numericEntry[1] as number,\n          label: `${numericEntry[0].charAt(0).toUpperCase()}${numericEntry[0].slice(1)}`,\n        };\n      }\n    }\n\n    // Handle direct number\n    if (typeof data === 'number') {\n      return { value: data };\n    }\n\n    // Handle string that can be parsed as number\n    if (typeof data === 'string') {\n      const parsed = parseFloat(data);\n      if (!isNaN(parsed)) {\n        return { value: parsed };\n      }\n    }\n\n    return null;\n  }, [rawData, config]);\n\n  // Handle drilldown click - must be after normalizedData is computed\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && normalizedData) {\n      onDrilldown({\n        value: normalizedData.value,\n        label: normalizedData.label,\n        min: config?.min,\n        max: config?.max,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, normalizedData, config?.min, config?.max]);\n\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!normalizedData) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n            />\n          </svg>\n          <p>No gauge data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={`\n        flex flex-col items-center justify-center h-full p-4\n        ${isClickable ? 'cursor-pointer hover:bg-bg-sunken/50 transition-colors' : ''}\n      `}\n      onClick={handleClick}\n      role={isClickable ? 'button' : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Label */}\n      {normalizedData.label && <p className=\"text-sm text-text-secondary mb-3 text-center\">{normalizedData.label}</p>}\n\n      {/* Gauge */}\n      <div className={`${isLinear ? 'w-full max-w-xs' : ''}`}>\n        {isLinear ? (\n          <LinearGauge\n            value={normalizedData.value}\n            min={config?.min}\n            max={config?.max}\n            thresholds={thresholds}\n            unit={config?.unit}\n            formatValue={formatValue}\n            showZones={config?.showZones}\n          />\n        ) : (\n          <CircularGauge\n            value={normalizedData.value}\n            min={config?.min}\n            max={config?.max}\n            thresholds={thresholds}\n            unit={config?.unit}\n            formatValue={formatValue}\n            size={config?.size === 'sm' ? 100 : config?.size === 'md' ? 140 : config?.size === 'lg' ? 180 : 140}\n          />\n        )}\n      </div>\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-3 flex items-center justify-center\">\n          <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n            View details\n            <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default GaugeWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/heatmap/HeatmapConfig.js

@@ -1,126 +1,129 @@
-import { memo as e, useCallback as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { memo as e, useCallback as t, useMemo as n } from "react";
+import { useI18n as r } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/heatmap/HeatmapConfig.tsx
-var i = [
-	{
-		value: "blue",
-		label: "Blue"
-	},
-	{
-		value: "green",
-		label: "Green"
-	},
-	{
-		value: "red",
-		label: "Red"
-	}
-], a = "\n  w-full px-3 py-2\n  text-sm text-text-primary\n  bg-bg-surface\n  border border-border-default\n  rounded-md\n  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n", o = e(function({ config: e, onChange: o }) {
-	let s = t((t, n) => {
-		o({
+var o = "\n  w-full px-3 py-2\n  text-sm text-text-primary\n  bg-bg-surface\n  border border-border-default\n  rounded-md\n  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n", s = e(function({ config: e, onChange: s }) {
+	let { t: c } = r(), l = n(() => [
+		{
+			value: "blue",
+			label: c("bigconsole.widget.config.heatmap.colorScheme.blue", "Blue")
+		},
+		{
+			value: "green",
+			label: c("bigconsole.widget.config.heatmap.colorScheme.green", "Green")
+		},
+		{
+			value: "red",
+			label: c("bigconsole.widget.config.heatmap.colorScheme.red", "Red")
+		}
+	], [c]), u = t((t, n) => {
+		s({
 			...e,
 			[t]: n
 		});
-	}, [e, o]);
-	return /* @__PURE__ */ r("div", {
-		className: "space-y-4",
+	}, [e, s]);
+	return /* @__PURE__ */ a("div", {
+		className: "min-w-0 space-y-form-gap",
 		children: [
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "X-Axis Field"
-			}), /* @__PURE__ */ n("input", {
+				children: c("bigconsole.widget.config.heatmap.xAxisFieldLabel", "X-Axis Field")
+			}), /* @__PURE__ */ i("input", {
 				type: "text",
 				value: e.xAxisField || "",
-				onChange: (e) => s("xAxisField", e.target.value),
-				placeholder: "e.g., hour, column",
-				className: a
+				onChange: (e) => u("xAxisField", e.target.value),
+				placeholder: c("bigconsole.widget.config.heatmap.xAxisFieldPlaceholder", "e.g., hour, column"),
+				className: o
 			})] }),
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Y-Axis Field"
-			}), /* @__PURE__ */ n("input", {
+				children: c("bigconsole.widget.config.heatmap.yAxisFieldLabel", "Y-Axis Field")
+			}), /* @__PURE__ */ i("input", {
 				type: "text",
 				value: e.yAxisField || "",
-				onChange: (e) => s("yAxisField", e.target.value),
-				placeholder: "e.g., day, row",
-				className: a
+				onChange: (e) => u("yAxisField", e.target.value),
+				placeholder: c("bigconsole.widget.config.heatmap.yAxisFieldPlaceholder", "e.g., day, row"),
+				className: o
 			})] }),
-			/* @__PURE__ */ r("div", { children: [
-				/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ a("div", { children: [
+				/* @__PURE__ */ i("label", {
 					className: "block text-sm font-medium text-text-primary mb-1",
-					children: "Value Field"
+					children: c("bigconsole.widget.config.heatmap.valueFieldLabel", "Value Field")
 				}),
-				/* @__PURE__ */ n("input", {
+				/* @__PURE__ */ i("input", {
 					type: "text",
 					value: e.valueField || "",
-					onChange: (e) => s("valueField", e.target.value),
-					placeholder: "e.g., tickets, count",
-					className: a
+					onChange: (e) => u("valueField", e.target.value),
+					placeholder: c("bigconsole.widget.config.heatmap.valueFieldPlaceholder", "e.g., tickets, count"),
+					className: o
 				}),
-				/* @__PURE__ */ r("p", {
+				/* @__PURE__ */ i("p", {
 					className: "mt-1 text-xs text-text-secondary",
-					children: [
-						"Left empty, the widget reads the parser's ",
-						/* @__PURE__ */ n("code", { children: "rows" }),
-						" / ",
-						/* @__PURE__ */ n("code", { children: "columns" }),
-						" / ",
-						/* @__PURE__ */ n("code", { children: "cells" }),
-						" ",
-						"output directly."
-					]
+					children: c("bigconsole.widget.config.heatmap.valueFieldHelp", "Left empty, the widget reads the parser's rows / columns / cells output directly.")
 				})
 			] }),
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Color Scheme"
-			}), /* @__PURE__ */ n("select", {
+				children: c("bigconsole.widget.config.heatmap.colorSchemeLabel", "Color Scheme")
+			}), /* @__PURE__ */ i("select", {
 				value: e.colorScheme || "blue",
-				onChange: (e) => s("colorScheme", e.target.value),
-				className: a,
-				children: i.map((e) => /* @__PURE__ */ n("option", {
+				onChange: (e) => u("colorScheme", e.target.value),
+				className: o,
+				children: l.map((e) => /* @__PURE__ */ i("option", {
 					value: e.value,
 					children: e.label
 				}, e.value))
 			})] }),
-			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+			/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
 				className: "block text-sm font-medium text-text-primary mb-1",
-				children: "Decimal Places"
-			}), /* @__PURE__ */ n("input", {
+				children: c("bigconsole.widget.config.heatmap.decimalPlacesLabel", "Decimal Places")
+			}), /* @__PURE__ */ i("input", {
 				type: "number",
 				min: 0,
 				max: 6,
 				value: e.decimals ?? 0,
-				onChange: (e) => s("decimals", Number(e.target.value)),
-				className: a
+				onChange: (e) => u("decimals", Number(e.target.value)),
+				className: o
 			})] }),
-			/* @__PURE__ */ r("label", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ n("input", {
-					type: "checkbox",
-					checked: e.showValues !== !1,
-					onChange: (e) => s("showValues", e.target.checked),
-					className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
-				}), /* @__PURE__ */ n("span", {
-					className: "text-sm text-text-primary",
-					children: "Show cell values"
-				})]
-			}),
-			/* @__PURE__ */ r("label", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ n("input", {
-					type: "checkbox",
-					checked: e.showLegend !== !1,
-					onChange: (e) => s("showLegend", e.target.checked),
-					className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
-				}), /* @__PURE__ */ n("span", {
-					className: "text-sm text-text-primary",
-					children: "Show color legend"
-				})]
+			/* @__PURE__ */ a("div", {
+				role: "group",
+				"aria-label": "Display options",
+				className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
+				children: [
+					/* @__PURE__ */ i("p", {
+						className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
+						children: "Display options"
+					}),
+					/* @__PURE__ */ a("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ i("input", {
+							type: "checkbox",
+							checked: e.showValues !== !1,
+							onChange: (e) => u("showValues", e.target.checked),
+							className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
+						}), /* @__PURE__ */ i("span", {
+							className: "text-sm text-text-primary",
+							children: c("bigconsole.widget.config.heatmap.showValues", "Show cell values")
+						})]
+					}),
+					/* @__PURE__ */ a("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ i("input", {
+							type: "checkbox",
+							checked: e.showLegend !== !1,
+							onChange: (e) => u("showLegend", e.target.checked),
+							className: "\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          "
+						}), /* @__PURE__ */ i("span", {
+							className: "text-sm text-text-primary",
+							children: c("bigconsole.widget.config.heatmap.showLegend", "Show color legend")
+						})]
+					})
+				]
 			})
 		]
 	});
 });
 //#endregion
-export { o as default };
+export { s as default };
 
 //# sourceMappingURL=HeatmapConfig.js.map

package/dist/bigconsole/components/widgets/heatmap/HeatmapConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeatmapConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/heatmap/HeatmapConfig.tsx"],"sourcesContent":["/**\n * HeatmapConfig Component\n *\n * Configuration panel for Heatmap widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { HeatmapConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface HeatmapConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst COLOR_SCHEMES = [\n  { value: 'blue', label: 'Blue' },\n  { value: 'green', label: 'Green' },\n  { value: 'red', label: 'Red' },\n];\n\nconst FIELD_CLASSES = `\n  w-full px-3 py-2\n  text-sm text-text-primary\n  bg-bg-surface\n  border border-border-default\n  rounded-md\n  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n`;\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const HeatmapConfig: FC<HeatmapConfigProps> = memo(function HeatmapConfig({ config, onChange }) {\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Axis + value fields */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">X-Axis Field</label>\n        <input\n          type=\"text\"\n          value={config.xAxisField || ''}\n          onChange={(e) => handleChange('xAxisField', e.target.value)}\n          placeholder=\"e.g., hour, column\"\n          className={FIELD_CLASSES}\n        />\n      </div>\n\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Y-Axis Field</label>\n        <input\n          type=\"text\"\n          value={config.yAxisField || ''}\n          onChange={(e) => handleChange('yAxisField', e.target.value)}\n          placeholder=\"e.g., day, row\"\n          className={FIELD_CLASSES}\n        />\n      </div>\n\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Field</label>\n        <input\n          type=\"text\"\n          value={config.valueField || ''}\n          onChange={(e) => handleChange('valueField', e.target.value)}\n          placeholder=\"e.g., tickets, count\"\n          className={FIELD_CLASSES}\n        />\n        <p className=\"mt-1 text-xs text-text-secondary\">\n          Left empty, the widget reads the parser&apos;s <code>rows</code> / <code>columns</code> / <code>cells</code>{' '}\n          output directly.\n        </p>\n      </div>\n\n      {/* Color scheme */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Color Scheme</label>\n        <select\n          value={config.colorScheme || 'blue'}\n          onChange={(e) => handleChange('colorScheme', e.target.value)}\n          className={FIELD_CLASSES}\n        >\n          {COLOR_SCHEMES.map((scheme) => (\n            <option key={scheme.value} value={scheme.value}>\n              {scheme.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {/* Decimals */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Decimal Places</label>\n        <input\n          type=\"number\"\n          min={0}\n          max={6}\n          value={config.decimals ?? 0}\n          onChange={(e) => handleChange('decimals', Number(e.target.value))}\n          className={FIELD_CLASSES}\n        />\n      </div>\n\n      {/* Toggles */}\n      <label className=\"flex items-center gap-3\">\n        <input\n          type=\"checkbox\"\n          checked={config.showValues !== false}\n          onChange={(e) => handleChange('showValues', e.target.checked)}\n          className=\"\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          \"\n        />\n        <span className=\"text-sm text-text-primary\">Show cell values</span>\n      </label>\n\n      <label className=\"flex items-center gap-3\">\n        <input\n          type=\"checkbox\"\n          checked={config.showLegend !== false}\n          onChange={(e) => handleChange('showLegend', e.target.checked)}\n          className=\"\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          \"\n        />\n        <span className=\"text-sm text-text-primary\">Show color legend</span>\n      </label>\n    </div>\n  );\n});\n\nexport default HeatmapConfig;\n"],"mappings":";;;AAwBA,IAAM,IAAgB;CACpB;EAAE,OAAO;EAAQ,OAAO;EAAQ;CAChC;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAO,OAAO;EAAO;CAC/B,EAEK,IAAgB,sLAaT,IAAwC,EAAK,SAAuB,EAAE,WAAQ,eAAY;CACrG,IAAM,IAAe,GACU,GAAQ,MAAyB;AAC5D,IAAS;GAAE,GAAG;IAAS,IAAM;GAAO,CAAC;IAEvC,CAAC,GAAQ,EAAS,CACnB;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAoB,CAAA,EACxF,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAY;IACZ,WAAW;IACX,CAAA,CACE,EAAA,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAoB,CAAA,EACxF,kBAAC,SAAD;IACE,MAAK;IACL,OAAO,EAAO,cAAc;IAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;IAC3D,aAAY;IACZ,WAAW;IACX,CAAA,CACE,EAAA,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,SAAD;KAAO,WAAU;eAAmD;KAAmB,CAAA;IACvF,kBAAC,SAAD;KACE,MAAK;KACL,OAAO,EAAO,cAAc;KAC5B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,MAAM;KAC3D,aAAY;KACZ,WAAW;KACX,CAAA;IACF,kBAAC,KAAD;KAAG,WAAU;eAAb;MAAgD;MACC,kBAAC,QAAD,EAAA,UAAM,QAAW,CAAA;;MAAG,kBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;;MAAG,kBAAC,QAAD,EAAA,UAAM,SAAY,CAAA;MAAC;MAAI;MAE/G;;IACA,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAoB,CAAA,EACxF,kBAAC,UAAD;IACE,OAAO,EAAO,eAAe;IAC7B,WAAW,MAAM,EAAa,eAAe,EAAE,OAAO,MAAM;IAC5D,WAAW;cAEV,EAAc,KAAK,MAClB,kBAAC,UAAD;KAA2B,OAAO,EAAO;eACtC,EAAO;KACD,EAFI,EAAO,MAEX,CACT;IACK,CAAA,CACL,EAAA,CAAA;GAGN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,WAAU;cAAmD;IAAsB,CAAA,EAC1F,kBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,KAAK;IACL,OAAO,EAAO,YAAY;IAC1B,WAAW,MAAM,EAAa,YAAY,OAAO,EAAE,OAAO,MAAM,CAAC;IACjE,WAAW;IACX,CAAA,CACE,EAAA,CAAA;GAGN,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD;KACE,MAAK;KACL,SAAS,EAAO,eAAe;KAC/B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,QAAQ;KAC7D,WAAU;KAQV,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eAA4B;KAAuB,CAAA,CAC7D;;GAER,kBAAC,SAAD;IAAO,WAAU;cAAjB,CACE,kBAAC,SAAD;KACE,MAAK;KACL,SAAS,EAAO,eAAe;KAC/B,WAAW,MAAM,EAAa,cAAc,EAAE,OAAO,QAAQ;KAC7D,WAAU;KAQV,CAAA,EACF,kBAAC,QAAD;KAAM,WAAU;eAA4B;KAAwB,CAAA,CAC9D;;GACJ;;EAER"}
+{"version":3,"file":"HeatmapConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/heatmap/HeatmapConfig.tsx"],"sourcesContent":["/**\n * HeatmapConfig Component\n *\n * Configuration panel for Heatmap widgets.\n */\n\nimport { type FC, memo, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { HeatmapConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface HeatmapConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst FIELD_CLASSES = `\n  w-full px-3 py-2\n  text-sm text-text-primary\n  bg-bg-surface\n  border border-border-default\n  rounded-md\n  focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n`;\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const HeatmapConfig: FC<HeatmapConfigProps> = memo(function HeatmapConfig({ config, onChange }) {\n  const { t } = useI18n();\n\n  const COLOR_SCHEMES = useMemo(\n    () => [\n      { value: 'blue', label: t('bigconsole.widget.config.heatmap.colorScheme.blue', 'Blue') },\n      { value: 'green', label: t('bigconsole.widget.config.heatmap.colorScheme.green', 'Green') },\n      { value: 'red', label: t('bigconsole.widget.config.heatmap.colorScheme.red', 'Red') },\n    ],\n    [t]\n  );\n\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  return (\n    <div className=\"min-w-0 space-y-form-gap\">\n      {/* Axis + value fields */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.heatmap.xAxisFieldLabel', 'X-Axis Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.xAxisField || ''}\n          onChange={(e) => handleChange('xAxisField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.heatmap.xAxisFieldPlaceholder', 'e.g., hour, column')}\n          className={FIELD_CLASSES}\n        />\n      </div>\n\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.heatmap.yAxisFieldLabel', 'Y-Axis Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.yAxisField || ''}\n          onChange={(e) => handleChange('yAxisField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.heatmap.yAxisFieldPlaceholder', 'e.g., day, row')}\n          className={FIELD_CLASSES}\n        />\n      </div>\n\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.heatmap.valueFieldLabel', 'Value Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.valueField || ''}\n          onChange={(e) => handleChange('valueField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.heatmap.valueFieldPlaceholder', 'e.g., tickets, count')}\n          className={FIELD_CLASSES}\n        />\n        <p className=\"mt-1 text-xs text-text-secondary\">\n          {t(\n            'bigconsole.widget.config.heatmap.valueFieldHelp',\n            \"Left empty, the widget reads the parser's rows / columns / cells output directly.\"\n          )}\n        </p>\n      </div>\n\n      {/* Color scheme */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.heatmap.colorSchemeLabel', 'Color Scheme')}\n        </label>\n        <select\n          value={config.colorScheme || 'blue'}\n          onChange={(e) => handleChange('colorScheme', e.target.value)}\n          className={FIELD_CLASSES}\n        >\n          {COLOR_SCHEMES.map((scheme) => (\n            <option key={scheme.value} value={scheme.value}>\n              {scheme.label}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {/* Decimals */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.heatmap.decimalPlacesLabel', 'Decimal Places')}\n        </label>\n        <input\n          type=\"number\"\n          min={0}\n          max={6}\n          value={config.decimals ?? 0}\n          onChange={(e) => handleChange('decimals', Number(e.target.value))}\n          className={FIELD_CLASSES}\n        />\n      </div>\n\n      {/* Toggles */}\n      <div\n        role=\"group\"\n        aria-label=\"Display options\"\n        className=\"space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap\"\n      >\n        {/* Toggles are a different KIND of control from the field stack above, so they\n          get their own labelled group instead of being visually identical to it\n          (BOFF-5636). */}\n        <p className=\"text-xs font-bold uppercase tracking-wider text-text-secondary\">Display options</p>\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showValues !== false}\n            onChange={(e) => handleChange('showValues', e.target.checked)}\n            className=\"\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.heatmap.showValues', 'Show cell values')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showLegend !== false}\n            onChange={(e) => handleChange('showLegend', e.target.checked)}\n            className=\"\n            w-4 h-4\n            text-action-primary-bg\n            bg-bg-surface\n            border-border-default\n            rounded\n            focus:ring-action-primary-bg\n          \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.heatmap.showLegend', 'Show color legend')}\n          </span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default HeatmapConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/iframe-widget/IframeWidget.js

@@ -33,7 +33,7 @@ var a = e(function({ widget: e, data: a }) {
 			className: "text-center",
 			children: [
 				/* @__PURE__ */ n("svg", {
-					className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+					className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 					fill: "none",
 					stroke: "currentColor",
 					viewBox: "0 0 24 24",
@@ -46,7 +46,7 @@ var a = e(function({ widget: e, data: a }) {
 				}),
 				/* @__PURE__ */ n("p", { children: "No URL configured" }),
 				/* @__PURE__ */ n("p", {
-					className: "text-xs text-text-tertiary mt-1",
+					className: "text-xs text-text-muted mt-1",
 					children: "Configure a URL to embed content"
 				})
 			]

package/dist/bigconsole/components/widgets/iframe-widget/IframeWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"IframeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/iframe-widget/IframeWidget.tsx"],"sourcesContent":["/**\n * IframeWidget Component\n *\n * Displays embedded iframe content.\n *\n * Data flow: DataSink → Parser → Widget\n * - Static configuration lives in `widget.config` (url, sandbox, allowFullscreen, title).\n * - Dynamic parser output is passed in `data` and overrides matching config keys.\n * - This lets the iframe render from manual configuration, parser-driven data, or both.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IframeWidgetProps {\n  widget: Widget;\n  data?: IframeData;\n}\n\nexport interface IframeData {\n  url?: string;\n  title?: string;\n  allowFullscreen?: boolean;\n  sandbox?: string;\n  loading?: 'lazy' | 'eager';\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Resolve the effective iframe configuration.\n *\n * Priority (highest first):\n * 1. Parser-provided `data` fields\n * 2. User-configured `widget.config` fields\n * 3. Safe defaults (empty URL, restricted sandbox, no fullscreen)\n *\n * This is the function the widget tests exercise directly; keeping the merge\n * logic pure makes the DataSink → Parser → Widget contract explicit.\n */\nexport function resolveIframeConfig(\n  widgetConfig: Record<string, unknown> | undefined,\n  data: IframeData | undefined\n): Required<IframeData> & { hasUrl: boolean } {\n  const cfg = widgetConfig ?? {};\n\n  const coercedBoolean = (value: unknown): boolean | undefined => {\n    if (typeof value === 'boolean') return value;\n    if (typeof value === 'string') return value.toLowerCase() === 'true';\n    return undefined;\n  };\n\n  const coercedLoading = (value: unknown): 'lazy' | 'eager' => {\n    if (value === 'eager' || value === 'lazy') return value;\n    return 'lazy';\n  };\n\n  const url = (data?.url ?? cfg.url ?? '') as string;\n  const title = (data?.title ?? cfg.title ?? 'Embedded Content') as string;\n  const allowFullscreen = coercedBoolean(data?.allowFullscreen ?? cfg.allowFullscreen) ?? false;\n  const sandbox = ((data?.sandbox ?? cfg.sandbox) as string | undefined) ?? 'allow-scripts allow-same-origin';\n  const loading = coercedLoading(data?.loading ?? cfg.loading);\n\n  return {\n    url,\n    title,\n    allowFullscreen,\n    sandbox,\n    loading,\n    hasUrl: typeof url === 'string' && url.length > 0,\n  };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const IframeWidget: FC<IframeWidgetProps> = memo(function IframeWidget({ widget, data }) {\n  const config = useMemo(() => resolveIframeConfig(widget.config, data), [widget.config, data]);\n\n  if (!config.hasUrl) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg\n            className=\"w-12 h-12 mx-auto mb-2 text-text-tertiary\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n            />\n          </svg>\n          <p>No URL configured</p>\n          <p className=\"text-xs text-text-tertiary mt-1\">Configure a URL to embed content</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full w-full\">\n      <iframe\n        src={config.url}\n        title={config.title}\n        className=\"w-full h-full border-0 rounded\"\n        allowFullScreen={config.allowFullscreen}\n        sandbox={config.sandbox}\n        loading={config.loading}\n      />\n    </div>\n  );\n});\n\nexport default IframeWidget;\n"],"mappings":";;;AA8CA,SAAgB,EACd,GACA,GAC4C;CAC5C,IAAM,IAAM,KAAgB,EAAE,EAExB,KAAkB,MAAwC;AAC9D,MAAI,OAAO,KAAU,UAAW,QAAO;AACvC,MAAI,OAAO,KAAU,SAAU,QAAO,EAAM,aAAa,KAAK;IAI1D,KAAkB,MAClB,MAAU,WAAW,MAAU,SAAe,IAC3C,QAGH,IAAO,GAAM,OAAO,EAAI,OAAO;AAMrC,QAAO;EACL;EACA,OAPa,GAAM,SAAS,EAAI,SAAS;EAQzC,iBAPsB,EAAe,GAAM,mBAAmB,EAAI,gBAAgB,IAAI;EAQtF,SAPgB,GAAM,WAAW,EAAI,WAAmC;EAQxE,SAPc,EAAe,GAAM,WAAW,EAAI,QAAQ;EAQ1D,QAAQ,OAAO,KAAQ,YAAY,EAAI,SAAS;EACjD;;AAOH,IAAa,IAAsC,EAAK,SAAsB,EAAE,WAAQ,WAAQ;CAC9F,IAAM,IAAS,QAAc,EAAoB,EAAO,QAAQ,EAAK,EAAE,CAAC,EAAO,QAAQ,EAAK,CAAC;AA0B7F,QAxBK,EAAO,SAyBV,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,UAAD;GACE,KAAK,EAAO;GACZ,OAAO,EAAO;GACd,WAAU;GACV,iBAAiB,EAAO;GACxB,SAAS,EAAO;GAChB,SAAS,EAAO;GAChB,CAAA;EACE,CAAA,GAhCJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,QAAO;KACP,SAAQ;eAER,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACN,kBAAC,KAAD,EAAA,UAAG,qBAAqB,CAAA;IACxB,kBAAC,KAAD;KAAG,WAAU;eAAkC;KAAoC,CAAA;IAC/E;;EACF,CAAA;EAgBV"}
+{"version":3,"file":"IframeWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/iframe-widget/IframeWidget.tsx"],"sourcesContent":["/**\n * IframeWidget Component\n *\n * Displays embedded iframe content.\n *\n * Data flow: DataSink → Parser → Widget\n * - Static configuration lives in `widget.config` (url, sandbox, allowFullscreen, title).\n * - Dynamic parser output is passed in `data` and overrides matching config keys.\n * - This lets the iframe render from manual configuration, parser-driven data, or both.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface IframeWidgetProps {\n  widget: Widget;\n  data?: IframeData;\n}\n\nexport interface IframeData {\n  url?: string;\n  title?: string;\n  allowFullscreen?: boolean;\n  sandbox?: string;\n  loading?: 'lazy' | 'eager';\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Resolve the effective iframe configuration.\n *\n * Priority (highest first):\n * 1. Parser-provided `data` fields\n * 2. User-configured `widget.config` fields\n * 3. Safe defaults (empty URL, restricted sandbox, no fullscreen)\n *\n * This is the function the widget tests exercise directly; keeping the merge\n * logic pure makes the DataSink → Parser → Widget contract explicit.\n */\nexport function resolveIframeConfig(\n  widgetConfig: Record<string, unknown> | undefined,\n  data: IframeData | undefined\n): Required<IframeData> & { hasUrl: boolean } {\n  const cfg = widgetConfig ?? {};\n\n  const coercedBoolean = (value: unknown): boolean | undefined => {\n    if (typeof value === 'boolean') return value;\n    if (typeof value === 'string') return value.toLowerCase() === 'true';\n    return undefined;\n  };\n\n  const coercedLoading = (value: unknown): 'lazy' | 'eager' => {\n    if (value === 'eager' || value === 'lazy') return value;\n    return 'lazy';\n  };\n\n  const url = (data?.url ?? cfg.url ?? '') as string;\n  const title = (data?.title ?? cfg.title ?? 'Embedded Content') as string;\n  const allowFullscreen = coercedBoolean(data?.allowFullscreen ?? cfg.allowFullscreen) ?? false;\n  const sandbox = ((data?.sandbox ?? cfg.sandbox) as string | undefined) ?? 'allow-scripts allow-same-origin';\n  const loading = coercedLoading(data?.loading ?? cfg.loading);\n\n  return {\n    url,\n    title,\n    allowFullscreen,\n    sandbox,\n    loading,\n    hasUrl: typeof url === 'string' && url.length > 0,\n  };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const IframeWidget: FC<IframeWidgetProps> = memo(function IframeWidget({ widget, data }) {\n  const config = useMemo(() => resolveIframeConfig(widget.config, data), [widget.config, data]);\n\n  if (!config.hasUrl) {\n    return (\n      <div className=\"flex items-center justify-center h-full text-text-secondary text-sm\">\n        <div className=\"text-center\">\n          <svg className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14\"\n            />\n          </svg>\n          <p>No URL configured</p>\n          <p className=\"text-xs text-text-muted mt-1\">Configure a URL to embed content</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full w-full\">\n      <iframe\n        src={config.url}\n        title={config.title}\n        className=\"w-full h-full border-0 rounded\"\n        allowFullScreen={config.allowFullscreen}\n        sandbox={config.sandbox}\n        loading={config.loading}\n      />\n    </div>\n  );\n});\n\nexport default IframeWidget;\n"],"mappings":";;;AA8CA,SAAgB,EACd,GACA,GAC4C;CAC5C,IAAM,IAAM,KAAgB,EAAE,EAExB,KAAkB,MAAwC;AAC9D,MAAI,OAAO,KAAU,UAAW,QAAO;AACvC,MAAI,OAAO,KAAU,SAAU,QAAO,EAAM,aAAa,KAAK;IAI1D,KAAkB,MAClB,MAAU,WAAW,MAAU,SAAe,IAC3C,QAGH,IAAO,GAAM,OAAO,EAAI,OAAO;AAMrC,QAAO;EACL;EACA,OAPa,GAAM,SAAS,EAAI,SAAS;EAQzC,iBAPsB,EAAe,GAAM,mBAAmB,EAAI,gBAAgB,IAAI;EAQtF,SAPgB,GAAM,WAAW,EAAI,WAAmC;EAQxE,SAPc,EAAe,GAAM,WAAW,EAAI,QAAQ;EAQ1D,QAAQ,OAAO,KAAQ,YAAY,EAAI,SAAS;EACjD;;AAOH,IAAa,IAAsC,EAAK,SAAsB,EAAE,WAAQ,WAAQ;CAC9F,IAAM,IAAS,QAAc,EAAoB,EAAO,QAAQ,EAAK,EAAE,CAAC,EAAO,QAAQ,EAAK,CAAC;AAqB7F,QAnBK,EAAO,SAoBV,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,UAAD;GACE,KAAK,EAAO;GACZ,OAAO,EAAO;GACd,WAAU;GACV,iBAAiB,EAAO;GACxB,SAAS,EAAO;GAChB,SAAS,EAAO;GAChB,CAAA;EACE,CAAA,GA3BJ,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD;KAAK,WAAU;KAAyC,MAAK;KAAO,QAAO;KAAe,SAAQ;eAChG,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACN,kBAAC,KAAD,EAAA,UAAG,qBAAqB,CAAA;IACxB,kBAAC,KAAD;KAAG,WAAU;eAA+B;KAAoC,CAAA;IAC5E;;EACF,CAAA;EAgBV"}