@burdenoff/microfe-bigconsole 2026.728.1 → 2026.729.2

package/dist/bigconsole/components/widgets/pivot-table/PivotTableWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"PivotTableWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/pivot-table/PivotTableWidget.tsx"],"sourcesContent":["/**\n * PivotTableWidget Component\n *\n * Interactive pivot table for data analysis with rows, columns, and aggregations.\n * v2.0 spec compliant widget type.\n *\n * In edit mode it exposes a drag-and-drop field shelf: fields can be dragged\n * between the Rows / Columns / Values / Available zones, the pivot recomputes\n * live, and the new layout is persisted to widget config so it survives reload.\n */\n\nimport type { JSX } from 'react';\nimport { type FC, memo, useMemo, useState, useCallback } from 'react';\nimport type { Widget, PivotTableConfig as PivotTableConfigType, PivotValueField } from '../../../types';\nimport { ChevronDown, ChevronRight, Settings, GripVertical } from 'lucide-react';\nimport { useIsEditMode } from '../../../store';\nimport { useWidgetOperations } from '../../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\n// Re-export types from main types file\nexport type PivotTableConfig = PivotTableConfigType;\nexport type ValueField = PivotValueField;\n\nexport interface PivotTableWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Raw data array */\n  data?: Record<string, unknown> | Record<string, unknown>[];\n  /** Whether the widget is in edit mode */\n  isEditMode?: boolean;\n  /** Whether the widget is selected */\n  isSelected?: boolean;\n  /** Whether data is loading */\n  isLoading?: boolean;\n  /** Error message if any */\n  error?: string | null;\n  /** Callback when widget is clicked */\n  onClick?: () => void;\n  /** Drilldown handler */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\ninterface PivotNode {\n  key: string;\n  values: Record<string, number>;\n  children: Map<string, PivotNode>;\n  expanded: boolean;\n  depth: number;\n}\n\n/** The arrangement of fields across the pivot's three field zones. */\ninterface PivotLayout {\n  rows: string[];\n  columns: string[];\n  values: ValueField[];\n}\n\n/** Drop targets for the drag-and-drop field shelf. */\ntype PivotZone = 'rows' | 'columns' | 'values' | 'available';\n\nconst AGGREGATIONS: ValueField['aggregation'][] = ['sum', 'count', 'average', 'min', 'max'];\n\n// ============================================================================\n// Aggregation Functions\n// ============================================================================\n\nconst aggregationFunctions: Record<string, (values: number[]) => number> = {\n  sum: (values) => values.reduce((a, b) => a + b, 0),\n  count: (values) => values.length,\n  average: (values) => (values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0),\n  min: (values) => (values.length ? Math.min(...values) : 0),\n  max: (values) => (values.length ? Math.max(...values) : 0),\n};\n\n// ============================================================================\n// Pivot Engine\n// ============================================================================\n\nfunction buildPivotTree(\n  data: Record<string, unknown>[],\n  rowFields: string[],\n  valueFields: ValueField[],\n  depth: number = 0\n): PivotNode {\n  const root: PivotNode = {\n    key: 'root',\n    values: {},\n    children: new Map(),\n    expanded: true,\n    depth,\n  };\n\n  if (rowFields.length === 0) {\n    // Leaf level - aggregate values\n    for (const vf of valueFields) {\n      const values = data.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n      root.values[vf.field] = aggregationFunctions[vf.aggregation](values);\n    }\n    return root;\n  }\n\n  const currentField = rowFields[0];\n  const remainingFields = rowFields.slice(1);\n\n  // Group data by current field\n  const groups = new Map<string, Record<string, unknown>[]>();\n  for (const row of data) {\n    const key = String(row[currentField] ?? 'Unknown');\n    if (!groups.has(key)) {\n      groups.set(key, []);\n    }\n    groups.get(key)!.push(row);\n  }\n\n  // Build children recursively\n  for (const [key, groupData] of groups) {\n    const childNode = buildPivotTree(groupData, remainingFields, valueFields, depth + 1);\n    childNode.key = key;\n    root.children.set(key, childNode);\n  }\n\n  // Calculate aggregates for this level\n  for (const vf of valueFields) {\n    const values = data.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n    root.values[vf.field] = aggregationFunctions[vf.aggregation](values);\n  }\n\n  return root;\n}\n\nfunction getColumnValues(data: Record<string, unknown>[], columnFields: string[]): string[] {\n  if (columnFields.length === 0) return ['Total'];\n\n  const columnField = columnFields[0];\n  const uniqueValues = new Set<string>();\n  for (const row of data) {\n    uniqueValues.add(String(row[columnField] ?? 'Unknown'));\n  }\n  return Array.from(uniqueValues).sort();\n}\n\nfunction getValuesByColumn(\n  data: Record<string, unknown>[],\n  columnFields: string[],\n  valueFields: ValueField[],\n  rowFilter: Record<string, string>\n): Map<string, Record<string, number>> {\n  // Filter data by row values\n  let filteredData = data;\n  for (const [field, value] of Object.entries(rowFilter)) {\n    filteredData = filteredData.filter((row) => String(row[field]) === value);\n  }\n\n  const result = new Map<string, Record<string, number>>();\n\n  if (columnFields.length === 0) {\n    // No column grouping - just aggregate\n    const values: Record<string, number> = {};\n    for (const vf of valueFields) {\n      const nums = filteredData.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n      values[vf.field] = aggregationFunctions[vf.aggregation](nums);\n    }\n    result.set('Total', values);\n    return result;\n  }\n\n  const columnField = columnFields[0];\n  const columnValues = getColumnValues(data, columnFields);\n\n  for (const colValue of columnValues) {\n    const colData = filteredData.filter((row) => String(row[columnField]) === colValue);\n    const values: Record<string, number> = {};\n    for (const vf of valueFields) {\n      const nums = colData.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n      values[vf.field] = aggregationFunctions[vf.aggregation](nums);\n    }\n    result.set(colValue, values);\n  }\n\n  return result;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const PivotTableWidget: FC<PivotTableWidgetProps> = memo(function PivotTableWidget({\n  widget,\n  data: rawData = [],\n  onDrilldown,\n}) {\n  // Normalize data to array format\n  const data = useMemo(() => (Array.isArray(rawData) ? rawData : []), [rawData]);\n  const config: PivotTableConfig = useMemo(() => {\n    const defaultConfig: PivotTableConfig = {\n      rows: [],\n      columns: [],\n      values: [],\n      showRowTotals: true,\n      showColumnTotals: true,\n      showGrandTotal: true,\n      expandable: true,\n      numberFormat: 'number',\n      decimalPlaces: 0,\n    };\n    return widget.config ? { ...defaultConfig, ...(widget.config as Partial<PivotTableConfig>) } : defaultConfig;\n  }, [widget.config]);\n\n  const isEditMode = useIsEditMode();\n  const { updateWidget } = useWidgetOperations(undefined, undefined, { skipFetch: true });\n\n  // Field arrangement is local state so dragging recomputes the pivot instantly.\n  // Seeded from config and kept in sync with it: if config changes externally\n  // (properties panel, undo, another editor), we re-seed during render via the\n  // \"adjust state on prop change\" pattern. Our own persist round-trip re-seeds\n  // to the identical layout, so it can't loop.\n  const configSig = JSON.stringify({ rows: config.rows, columns: config.columns, values: config.values });\n  const [layout, setLayout] = useState<PivotLayout>({\n    rows: config.rows,\n    columns: config.columns,\n    values: config.values,\n  });\n  const [seededSig, setSeededSig] = useState(configSig);\n  if (configSig !== seededSig) {\n    // Config changed externally → re-seed during render (React's documented\n    // \"adjusting state on prop change\" pattern). Our own persist re-seeds to the\n    // identical layout, so this can't loop.\n    setSeededSig(configSig);\n    setLayout({ rows: config.rows, columns: config.columns, values: config.values });\n  }\n\n  const { rows: rowFields, columns: columnFields, values: valueFields } = layout;\n\n  // Persist the layout to config (edit mode only — viewers explore locally).\n  const persistLayout = useCallback(\n    (next: PivotLayout) => {\n      if (!isEditMode) return;\n      void updateWidget({\n        id: widget.id,\n        config: {\n          ...(widget.config as Record<string, unknown> | undefined),\n          rows: next.rows,\n          columns: next.columns,\n          values: next.values,\n        },\n      });\n    },\n    [isEditMode, updateWidget, widget.id, widget.config]\n  );\n\n  const applyLayout = useCallback(\n    (next: PivotLayout) => {\n      setLayout(next);\n      persistLayout(next);\n    },\n    [persistLayout]\n  );\n\n  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set(['root']));\n\n  // Build pivot structure\n  const pivotTree = useMemo(() => {\n    return buildPivotTree(data, rowFields, valueFields);\n  }, [data, rowFields, valueFields]);\n\n  const columnValues = useMemo(() => {\n    return getColumnValues(data, columnFields);\n  }, [data, columnFields]);\n\n  // Grand totals per column for the footer — computed once (was previously\n  // recomputed for every column value inside the footer's render loop).\n  const footerColumnData = useMemo(\n    () => (config.showColumnTotals ? getValuesByColumn(data, columnFields, valueFields, {}) : null),\n    [config.showColumnTotals, data, columnFields, valueFields]\n  );\n\n  // All fields present in the data, and those not yet placed in a zone.\n  const allFields = useMemo(() => (data.length > 0 ? Object.keys(data[0]) : []), [data]);\n  const availableFields = useMemo(() => {\n    const used = new Set<string>([...rowFields, ...columnFields, ...valueFields.map((v) => v.field)]);\n    return allFields.filter((f) => !used.has(f));\n  }, [allFields, rowFields, columnFields, valueFields]);\n\n  // Move a field from one zone to another and recompute + persist.\n  const moveField = useCallback(\n    (field: string, from: PivotZone, to: PivotZone) => {\n      if (from === to) return;\n      const next: PivotLayout = {\n        rows: from === 'rows' ? rowFields.filter((f) => f !== field) : [...rowFields],\n        columns: from === 'columns' ? columnFields.filter((f) => f !== field) : [...columnFields],\n        values: from === 'values' ? valueFields.filter((v) => v.field !== field) : [...valueFields],\n      };\n      if (to === 'rows' && !next.rows.includes(field)) next.rows.push(field);\n      else if (to === 'columns' && !next.columns.includes(field)) next.columns.push(field);\n      else if (to === 'values' && !next.values.some((v) => v.field === field)) {\n        next.values.push({ field, aggregation: 'sum' });\n      }\n      applyLayout(next);\n    },\n    [rowFields, columnFields, valueFields, applyLayout]\n  );\n\n  const changeAggregation = useCallback(\n    (field: string, aggregation: ValueField['aggregation']) => {\n      applyLayout({\n        rows: [...rowFields],\n        columns: [...columnFields],\n        values: valueFields.map((v) => (v.field === field ? { ...v, aggregation } : v)),\n      });\n    },\n    [rowFields, columnFields, valueFields, applyLayout]\n  );\n\n  // Format number based on config\n  const formatValue = useCallback(\n    (value: number): string => {\n      if (isNaN(value)) return '-';\n\n      switch (config.numberFormat) {\n        case 'currency':\n          return new Intl.NumberFormat('en-US', {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: config.decimalPlaces,\n            maximumFractionDigits: config.decimalPlaces,\n          }).format(value);\n        case 'percentage':\n          return new Intl.NumberFormat('en-US', {\n            style: 'percent',\n            minimumFractionDigits: config.decimalPlaces,\n            maximumFractionDigits: config.decimalPlaces,\n          }).format(value / 100);\n        default:\n          return new Intl.NumberFormat('en-US', {\n            minimumFractionDigits: config.decimalPlaces,\n            maximumFractionDigits: config.decimalPlaces,\n          }).format(value);\n      }\n    },\n    [config.numberFormat, config.decimalPlaces]\n  );\n\n  // Toggle row expansion\n  const toggleRow = useCallback((rowPath: string) => {\n    setExpandedRows((prev) => {\n      const next = new Set(prev);\n      if (next.has(rowPath)) {\n        next.delete(rowPath);\n      } else {\n        next.add(rowPath);\n      }\n      return next;\n    });\n  }, []);\n\n  // Handle cell click for drilldown\n  const handleCellClick = useCallback(\n    (rowFilter: Record<string, string>, columnValue: string) => {\n      if (onDrilldown) {\n        onDrilldown({\n          rowFilter,\n          columnValue,\n          type: 'pivot_cell_click',\n        });\n      }\n    },\n    [onDrilldown]\n  );\n\n  // Render row recursively\n  const renderRows = useCallback(\n    (node: PivotNode, rowFilter: Record<string, string>, parentPath: string, depth: number): JSX.Element[] => {\n      const rows: JSX.Element[] = [];\n      const hasChildren = node.children.size > 0;\n      const isExpanded = expandedRows.has(parentPath);\n      const rowField = rowFields[depth - 1];\n\n      if (depth > 0) {\n        const columnData = getValuesByColumn(data, columnFields, valueFields, rowFilter);\n\n        rows.push(\n          <tr key={parentPath} className=\"hover:bg-bg-sunken/50 transition-colors\">\n            {/* Row header */}\n            <td\n              className=\"sticky left-0 bg-bg-surface border-r border-border-default px-3 py-2 font-medium text-sm\"\n              style={{ paddingLeft: `${depth * 16 + 8}px` }}\n            >\n              <div className=\"flex items-center gap-1\">\n                {config.expandable && hasChildren && (\n                  <button\n                    type=\"button\"\n                    onClick={() => toggleRow(parentPath)}\n                    className=\"p-0.5 hover:bg-bg-sunken rounded\"\n                  >\n                    {isExpanded ? (\n                      <ChevronDown className=\"w-4 h-4 text-text-secondary\" />\n                    ) : (\n                      <ChevronRight className=\"w-4 h-4 text-text-secondary\" />\n                    )}\n                  </button>\n                )}\n                {!hasChildren && config.expandable && <span className=\"w-5\" />}\n                <span>{node.key}</span>\n              </div>\n            </td>\n\n            {/* Value cells */}\n            {columnValues.map((colValue) => {\n              const cellValues = columnData.get(colValue) || {};\n              return valueFields.map((vf) => (\n                <td\n                  key={`${colValue}-${vf.field}`}\n                  className=\"px-3 py-2 text-sm text-right tabular-nums cursor-pointer hover:bg-action-primary-bg/10\"\n                  onClick={() => handleCellClick(rowFilter, colValue)}\n                >\n                  {formatValue(cellValues[vf.field] || 0)}\n                </td>\n              ));\n            })}\n\n            {/* Row total */}\n            {config.showRowTotals &&\n              valueFields.map((vf) => (\n                <td\n                  key={`total-${vf.field}`}\n                  className=\"px-3 py-2 text-sm text-right tabular-nums font-medium bg-bg-sunken/30\"\n                >\n                  {formatValue(node.values[vf.field] || 0)}\n                </td>\n              ))}\n          </tr>\n        );\n      }\n\n      // Render children if expanded\n      if (hasChildren && (isExpanded || depth === 0)) {\n        const sortedKeys = Array.from(node.children.keys()).sort();\n        for (const childKey of sortedKeys) {\n          const childNode = node.children.get(childKey)!;\n          const childPath = `${parentPath}/${childKey}`;\n          const childFilter = rowField ? { ...rowFilter, [rowField]: childKey } : rowFilter;\n          rows.push(...renderRows(childNode, childFilter, childPath, depth + 1));\n        }\n      }\n\n      return rows;\n    },\n    [\n      data,\n      config,\n      rowFields,\n      columnFields,\n      valueFields,\n      columnValues,\n      expandedRows,\n      formatValue,\n      handleCellClick,\n      toggleRow,\n    ]\n  );\n\n  const hasLayout = rowFields.length > 0 || valueFields.length > 0;\n\n  // No data state\n  if (data.length === 0) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full p-8 text-text-secondary\">\n        <Settings className=\"w-12 h-12 mb-4 opacity-50\" />\n        <p className=\"text-sm\">No data available</p>\n        <p className=\"text-xs mt-1\">Configure data source to populate pivot table</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full overflow-hidden\">\n      {/* Drag-and-drop field shelf (edit mode) */}\n      {isEditMode && (\n        <PivotFieldShelf\n          rowFields={rowFields}\n          columnFields={columnFields}\n          valueFields={valueFields}\n          availableFields={availableFields}\n          onMoveField={moveField}\n          onChangeAggregation={changeAggregation}\n        />\n      )}\n\n      {!hasLayout ? (\n        <div className=\"flex flex-col items-center justify-center flex-1 p-8 text-text-secondary\">\n          <Settings className=\"w-12 h-12 mb-4 opacity-50\" />\n          <p className=\"text-sm\">Configure Pivot Table</p>\n          <p className=\"text-xs mt-1\">\n            {isEditMode\n              ? 'Drag fields into the Rows and Values zones above'\n              : 'Add row fields and value fields in widget settings'}\n          </p>\n        </div>\n      ) : (\n        <div className=\"flex-1 overflow-auto\">\n          <table className=\"w-full border-collapse\">\n            {/* Header */}\n            <thead className=\"sticky top-0 z-10\">\n              {/* Column headers row */}\n              <tr className=\"bg-bg-sunken\">\n                <th className=\"sticky left-0 bg-bg-sunken border-r border-b border-border-default px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-text-secondary\">\n                  {rowFields.length > 0 ? rowFields.map((r) => r.replace(/_/g, ' ')).join(' / ') : 'Values'}\n                </th>\n\n                {/* Column value headers */}\n                {columnValues.map((colValue) => (\n                  <th\n                    key={colValue}\n                    colSpan={valueFields.length || 1}\n                    className=\"border-b border-border-default px-3 py-2 text-center text-xs font-semibold uppercase tracking-wider text-text-secondary\"\n                  >\n                    {colValue}\n                  </th>\n                ))}\n\n                {/* Total header */}\n                {config.showRowTotals && (\n                  <th\n                    colSpan={valueFields.length || 1}\n                    className=\"border-b border-border-default px-3 py-2 text-center text-xs font-semibold uppercase tracking-wider text-text-secondary bg-bg-sunken/50\"\n                  >\n                    Total\n                  </th>\n                )}\n              </tr>\n\n              {/* Value field headers row (if multiple values) */}\n              {valueFields.length > 1 && (\n                <tr className=\"bg-bg-surface\">\n                  <th className=\"sticky left-0 bg-bg-surface border-r border-b border-border-default\" />\n                  {columnValues.map((colValue) =>\n                    valueFields.map((vf) => (\n                      <th\n                        key={`${colValue}-${vf.field}`}\n                        className=\"border-b border-border-default px-3 py-1 text-center text-xs text-text-secondary\"\n                      >\n                        {vf.label || vf.field.replace(/_/g, ' ')}\n                      </th>\n                    ))\n                  )}\n                  {config.showRowTotals &&\n                    valueFields.map((vf) => (\n                      <th\n                        key={`total-${vf.field}`}\n                        className=\"border-b border-border-default px-3 py-1 text-center text-xs text-text-secondary bg-bg-sunken/30\"\n                      >\n                        {vf.label || vf.field.replace(/_/g, ' ')}\n                      </th>\n                    ))}\n                </tr>\n              )}\n            </thead>\n\n            {/* Body */}\n            <tbody className=\"divide-y divide-border-default\">{renderRows(pivotTree, {}, 'root', 0)}</tbody>\n\n            {/* Footer with column totals */}\n            {config.showColumnTotals && (\n              <tfoot>\n                <tr className=\"bg-bg-sunken/50 font-medium\">\n                  <td className=\"sticky left-0 bg-bg-sunken/50 border-r border-t border-border-default px-3 py-2 text-sm\">\n                    Total\n                  </td>\n                  {columnValues.map((colValue) => {\n                    const cellValues = footerColumnData?.get(colValue) || {};\n                    return valueFields.map((vf) => (\n                      <td\n                        key={`footer-${colValue}-${vf.field}`}\n                        className=\"border-t border-border-default px-3 py-2 text-sm text-right tabular-nums\"\n                      >\n                        {formatValue(cellValues[vf.field] || 0)}\n                      </td>\n                    ));\n                  })}\n                  {config.showRowTotals &&\n                    config.showGrandTotal &&\n                    valueFields.map((vf) => (\n                      <td\n                        key={`grand-${vf.field}`}\n                        className=\"border-t border-border-default px-3 py-2 text-sm text-right tabular-nums font-bold bg-bg-sunken\"\n                      >\n                        {formatValue(pivotTree.values[vf.field] || 0)}\n                      </td>\n                    ))}\n                </tr>\n              </tfoot>\n            )}\n          </table>\n        </div>\n      )}\n    </div>\n  );\n});\n\n// ============================================================================\n// Field shelf (drag-and-drop zones)\n// ============================================================================\n\ninterface PivotFieldShelfProps {\n  rowFields: string[];\n  columnFields: string[];\n  valueFields: ValueField[];\n  availableFields: string[];\n  onMoveField: (field: string, from: PivotZone, to: PivotZone) => void;\n  onChangeAggregation: (field: string, aggregation: ValueField['aggregation']) => void;\n}\n\nconst DND_MIME = 'application/x-pivot-field';\n\nconst PivotFieldShelf: FC<PivotFieldShelfProps> = ({\n  rowFields,\n  columnFields,\n  valueFields,\n  availableFields,\n  onMoveField,\n  onChangeAggregation,\n}) => {\n  const [dragOverZone, setDragOverZone] = useState<PivotZone | null>(null);\n\n  const handleDrop = (zone: PivotZone) => (e: React.DragEvent) => {\n    e.preventDefault();\n    setDragOverZone(null);\n    const raw = e.dataTransfer.getData(DND_MIME) || e.dataTransfer.getData('text/plain');\n    if (!raw) return;\n    try {\n      const { field, from } = JSON.parse(raw) as { field: string; from: PivotZone };\n      if (field) onMoveField(field, from, zone);\n    } catch {\n      // Ignore malformed drag payloads.\n    }\n  };\n\n  const chip = (field: string, from: PivotZone, vf?: ValueField) => (\n    <span\n      key={field}\n      draggable\n      onDragStart={(e) => {\n        const payload = JSON.stringify({ field, from });\n        e.dataTransfer.setData(DND_MIME, payload);\n        e.dataTransfer.setData('text/plain', payload);\n        e.dataTransfer.effectAllowed = 'move';\n      }}\n      className=\"inline-flex items-center gap-1 px-2 py-1 rounded-md bg-bg-surface border border-border-default text-xs text-text-primary cursor-grab\"\n    >\n      <GripVertical className=\"w-3 h-3 text-text-tertiary\" aria-hidden=\"true\" />\n      <span>{(vf?.label || field).replace(/_/g, ' ')}</span>\n      {vf && (\n        <select\n          value={vf.aggregation}\n          onChange={(e) => onChangeAggregation(field, e.target.value as ValueField['aggregation'])}\n          onClick={(e) => e.stopPropagation()}\n          aria-label={`Aggregation for ${field}`}\n          className=\"ml-1 bg-bg-sunken text-text-secondary rounded px-1 py-0.5 text-[10px] uppercase\"\n        >\n          {AGGREGATIONS.map((agg) => (\n            <option key={agg} value={agg}>\n              {agg}\n            </option>\n          ))}\n        </select>\n      )}\n    </span>\n  );\n\n  const zone = (label: string, name: PivotZone, children: JSX.Element[] | JSX.Element) => (\n    <div\n      onDragOver={(e) => {\n        e.preventDefault();\n        e.dataTransfer.dropEffect = 'move';\n        if (dragOverZone !== name) setDragOverZone(name);\n      }}\n      onDragLeave={() => setDragOverZone((z) => (z === name ? null : z))}\n      onDrop={handleDrop(name)}\n      className={`flex-1 min-w-[8rem] rounded-md border p-2 transition-colors ${\n        dragOverZone === name\n          ? 'border-action-primary-bg bg-action-primary-bg/5'\n          : 'border-border-default bg-bg-sunken/30'\n      }`}\n    >\n      <div className=\"text-[10px] font-semibold uppercase tracking-wider text-text-tertiary mb-1.5\">{label}</div>\n      <div className=\"flex flex-wrap gap-1.5 min-h-[1.75rem]\">{children}</div>\n    </div>\n  );\n\n  return (\n    <div className=\"flex flex-wrap gap-2 p-2 border-b border-border-default bg-bg-surface\">\n      {zone(\n        'Rows',\n        'rows',\n        rowFields.map((f) => chip(f, 'rows'))\n      )}\n      {zone(\n        'Columns',\n        'columns',\n        columnFields.map((f) => chip(f, 'columns'))\n      )}\n      {zone(\n        'Values',\n        'values',\n        valueFields.map((vf) => chip(vf.field, 'values', vf))\n      )}\n      {zone(\n        'Available',\n        'available',\n        availableFields.length > 0 ? (\n          availableFields.map((f) => chip(f, 'available'))\n        ) : (\n          <span className=\"text-[11px] text-text-tertiary italic\">All fields in use</span>\n        )\n      )}\n    </div>\n  );\n};\n\nexport default PivotTableWidget;\n"],"mappings":"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"}
+{"version":3,"file":"PivotTableWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/pivot-table/PivotTableWidget.tsx"],"sourcesContent":["/**\n * PivotTableWidget Component\n *\n * Interactive pivot table for data analysis with rows, columns, and aggregations.\n * v2.0 spec compliant widget type.\n *\n * In edit mode it exposes a drag-and-drop field shelf: fields can be dragged\n * between the Rows / Columns / Values / Available zones, the pivot recomputes\n * live, and the new layout is persisted to widget config so it survives reload.\n */\n\nimport type { JSX } from 'react';\nimport { type FC, memo, useMemo, useState, useCallback } from 'react';\nimport type { Widget, PivotTableConfig as PivotTableConfigType, PivotValueField } from '../../../types';\nimport { ChevronDown, ChevronRight, Settings, GripVertical } from 'lucide-react';\nimport { useIsEditMode } from '../../../store';\nimport { useWidgetOperations } from '../../../hooks';\n\n// ============================================================================\n// Types\n// ============================================================================\n\n// Re-export types from main types file\nexport type PivotTableConfig = PivotTableConfigType;\nexport type ValueField = PivotValueField;\n\nexport interface PivotTableWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Raw data array */\n  data?: Record<string, unknown> | Record<string, unknown>[];\n  /** Whether the widget is in edit mode */\n  isEditMode?: boolean;\n  /** Whether the widget is selected */\n  isSelected?: boolean;\n  /** Whether data is loading */\n  isLoading?: boolean;\n  /** Error message if any */\n  error?: string | null;\n  /** Callback when widget is clicked */\n  onClick?: () => void;\n  /** Drilldown handler */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\ninterface PivotNode {\n  key: string;\n  values: Record<string, number>;\n  children: Map<string, PivotNode>;\n  expanded: boolean;\n  depth: number;\n}\n\n/** The arrangement of fields across the pivot's three field zones. */\ninterface PivotLayout {\n  rows: string[];\n  columns: string[];\n  values: ValueField[];\n}\n\n/** Drop targets for the drag-and-drop field shelf. */\ntype PivotZone = 'rows' | 'columns' | 'values' | 'available';\n\nconst AGGREGATIONS: ValueField['aggregation'][] = ['sum', 'count', 'average', 'min', 'max'];\n\n// ============================================================================\n// Aggregation Functions\n// ============================================================================\n\nconst aggregationFunctions: Record<string, (values: number[]) => number> = {\n  sum: (values) => values.reduce((a, b) => a + b, 0),\n  count: (values) => values.length,\n  average: (values) => (values.length ? values.reduce((a, b) => a + b, 0) / values.length : 0),\n  min: (values) => (values.length ? Math.min(...values) : 0),\n  max: (values) => (values.length ? Math.max(...values) : 0),\n};\n\n// ============================================================================\n// Pivot Engine\n// ============================================================================\n\nfunction buildPivotTree(\n  data: Record<string, unknown>[],\n  rowFields: string[],\n  valueFields: ValueField[],\n  depth: number = 0\n): PivotNode {\n  const root: PivotNode = {\n    key: 'root',\n    values: {},\n    children: new Map(),\n    expanded: true,\n    depth,\n  };\n\n  if (rowFields.length === 0) {\n    // Leaf level - aggregate values\n    for (const vf of valueFields) {\n      const values = data.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n      root.values[vf.field] = aggregationFunctions[vf.aggregation](values);\n    }\n    return root;\n  }\n\n  const currentField = rowFields[0];\n  const remainingFields = rowFields.slice(1);\n\n  // Group data by current field\n  const groups = new Map<string, Record<string, unknown>[]>();\n  for (const row of data) {\n    const key = String(row[currentField] ?? 'Unknown');\n    if (!groups.has(key)) {\n      groups.set(key, []);\n    }\n    groups.get(key)!.push(row);\n  }\n\n  // Build children recursively\n  for (const [key, groupData] of groups) {\n    const childNode = buildPivotTree(groupData, remainingFields, valueFields, depth + 1);\n    childNode.key = key;\n    root.children.set(key, childNode);\n  }\n\n  // Calculate aggregates for this level\n  for (const vf of valueFields) {\n    const values = data.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n    root.values[vf.field] = aggregationFunctions[vf.aggregation](values);\n  }\n\n  return root;\n}\n\nfunction getColumnValues(data: Record<string, unknown>[], columnFields: string[]): string[] {\n  if (columnFields.length === 0) return ['Total'];\n\n  const columnField = columnFields[0];\n  const uniqueValues = new Set<string>();\n  for (const row of data) {\n    uniqueValues.add(String(row[columnField] ?? 'Unknown'));\n  }\n  return Array.from(uniqueValues).sort();\n}\n\nfunction getValuesByColumn(\n  data: Record<string, unknown>[],\n  columnFields: string[],\n  valueFields: ValueField[],\n  rowFilter: Record<string, string>\n): Map<string, Record<string, number>> {\n  // Filter data by row values\n  let filteredData = data;\n  for (const [field, value] of Object.entries(rowFilter)) {\n    filteredData = filteredData.filter((row) => String(row[field]) === value);\n  }\n\n  const result = new Map<string, Record<string, number>>();\n\n  if (columnFields.length === 0) {\n    // No column grouping - just aggregate\n    const values: Record<string, number> = {};\n    for (const vf of valueFields) {\n      const nums = filteredData.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n      values[vf.field] = aggregationFunctions[vf.aggregation](nums);\n    }\n    result.set('Total', values);\n    return result;\n  }\n\n  const columnField = columnFields[0];\n  const columnValues = getColumnValues(data, columnFields);\n\n  for (const colValue of columnValues) {\n    const colData = filteredData.filter((row) => String(row[columnField]) === colValue);\n    const values: Record<string, number> = {};\n    for (const vf of valueFields) {\n      const nums = colData.map((row) => Number(row[vf.field]) || 0).filter((v) => !isNaN(v));\n      values[vf.field] = aggregationFunctions[vf.aggregation](nums);\n    }\n    result.set(colValue, values);\n  }\n\n  return result;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const PivotTableWidget: FC<PivotTableWidgetProps> = memo(function PivotTableWidget({\n  widget,\n  data: rawData = [],\n  onDrilldown,\n}) {\n  // Normalize data to array format\n  const data = useMemo(() => (Array.isArray(rawData) ? rawData : []), [rawData]);\n  const config: PivotTableConfig = useMemo(() => {\n    const defaultConfig: PivotTableConfig = {\n      rows: [],\n      columns: [],\n      values: [],\n      showRowTotals: true,\n      showColumnTotals: true,\n      showGrandTotal: true,\n      expandable: true,\n      numberFormat: 'number',\n      decimalPlaces: 0,\n    };\n    return widget.config ? { ...defaultConfig, ...(widget.config as Partial<PivotTableConfig>) } : defaultConfig;\n  }, [widget.config]);\n\n  const isEditMode = useIsEditMode();\n  const { updateWidget } = useWidgetOperations(undefined, undefined, { skipFetch: true });\n\n  // Field arrangement is local state so dragging recomputes the pivot instantly.\n  // Seeded from config and kept in sync with it: if config changes externally\n  // (properties panel, undo, another editor), we re-seed during render via the\n  // \"adjust state on prop change\" pattern. Our own persist round-trip re-seeds\n  // to the identical layout, so it can't loop.\n  const configSig = JSON.stringify({ rows: config.rows, columns: config.columns, values: config.values });\n  const [layout, setLayout] = useState<PivotLayout>({\n    rows: config.rows,\n    columns: config.columns,\n    values: config.values,\n  });\n  const [seededSig, setSeededSig] = useState(configSig);\n  if (configSig !== seededSig) {\n    // Config changed externally → re-seed during render (React's documented\n    // \"adjusting state on prop change\" pattern). Our own persist re-seeds to the\n    // identical layout, so this can't loop.\n    setSeededSig(configSig);\n    setLayout({ rows: config.rows, columns: config.columns, values: config.values });\n  }\n\n  const { rows: rowFields, columns: columnFields, values: valueFields } = layout;\n\n  // Persist the layout to config (edit mode only — viewers explore locally).\n  const persistLayout = useCallback(\n    (next: PivotLayout) => {\n      if (!isEditMode) return;\n      void updateWidget({\n        id: widget.id,\n        config: {\n          ...(widget.config as Record<string, unknown> | undefined),\n          rows: next.rows,\n          columns: next.columns,\n          values: next.values,\n        },\n      });\n    },\n    [isEditMode, updateWidget, widget.id, widget.config]\n  );\n\n  const applyLayout = useCallback(\n    (next: PivotLayout) => {\n      setLayout(next);\n      persistLayout(next);\n    },\n    [persistLayout]\n  );\n\n  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set(['root']));\n\n  // Build pivot structure\n  const pivotTree = useMemo(() => {\n    return buildPivotTree(data, rowFields, valueFields);\n  }, [data, rowFields, valueFields]);\n\n  const columnValues = useMemo(() => {\n    return getColumnValues(data, columnFields);\n  }, [data, columnFields]);\n\n  // Grand totals per column for the footer — computed once (was previously\n  // recomputed for every column value inside the footer's render loop).\n  const footerColumnData = useMemo(\n    () => (config.showColumnTotals ? getValuesByColumn(data, columnFields, valueFields, {}) : null),\n    [config.showColumnTotals, data, columnFields, valueFields]\n  );\n\n  // All fields present in the data, and those not yet placed in a zone.\n  const allFields = useMemo(() => (data.length > 0 ? Object.keys(data[0]) : []), [data]);\n  const availableFields = useMemo(() => {\n    const used = new Set<string>([...rowFields, ...columnFields, ...valueFields.map((v) => v.field)]);\n    return allFields.filter((f) => !used.has(f));\n  }, [allFields, rowFields, columnFields, valueFields]);\n\n  // Move a field from one zone to another and recompute + persist.\n  const moveField = useCallback(\n    (field: string, from: PivotZone, to: PivotZone) => {\n      if (from === to) return;\n      const next: PivotLayout = {\n        rows: from === 'rows' ? rowFields.filter((f) => f !== field) : [...rowFields],\n        columns: from === 'columns' ? columnFields.filter((f) => f !== field) : [...columnFields],\n        values: from === 'values' ? valueFields.filter((v) => v.field !== field) : [...valueFields],\n      };\n      if (to === 'rows' && !next.rows.includes(field)) next.rows.push(field);\n      else if (to === 'columns' && !next.columns.includes(field)) next.columns.push(field);\n      else if (to === 'values' && !next.values.some((v) => v.field === field)) {\n        next.values.push({ field, aggregation: 'sum' });\n      }\n      applyLayout(next);\n    },\n    [rowFields, columnFields, valueFields, applyLayout]\n  );\n\n  const changeAggregation = useCallback(\n    (field: string, aggregation: ValueField['aggregation']) => {\n      applyLayout({\n        rows: [...rowFields],\n        columns: [...columnFields],\n        values: valueFields.map((v) => (v.field === field ? { ...v, aggregation } : v)),\n      });\n    },\n    [rowFields, columnFields, valueFields, applyLayout]\n  );\n\n  // Format number based on config\n  const formatValue = useCallback(\n    (value: number): string => {\n      if (isNaN(value)) return '-';\n\n      switch (config.numberFormat) {\n        case 'currency':\n          return new Intl.NumberFormat('en-US', {\n            style: 'currency',\n            currency: 'USD',\n            minimumFractionDigits: config.decimalPlaces,\n            maximumFractionDigits: config.decimalPlaces,\n          }).format(value);\n        case 'percentage':\n          return new Intl.NumberFormat('en-US', {\n            style: 'percent',\n            minimumFractionDigits: config.decimalPlaces,\n            maximumFractionDigits: config.decimalPlaces,\n          }).format(value / 100);\n        default:\n          return new Intl.NumberFormat('en-US', {\n            minimumFractionDigits: config.decimalPlaces,\n            maximumFractionDigits: config.decimalPlaces,\n          }).format(value);\n      }\n    },\n    [config.numberFormat, config.decimalPlaces]\n  );\n\n  // Toggle row expansion\n  const toggleRow = useCallback((rowPath: string) => {\n    setExpandedRows((prev) => {\n      const next = new Set(prev);\n      if (next.has(rowPath)) {\n        next.delete(rowPath);\n      } else {\n        next.add(rowPath);\n      }\n      return next;\n    });\n  }, []);\n\n  // Handle cell click for drilldown\n  const handleCellClick = useCallback(\n    (rowFilter: Record<string, string>, columnValue: string) => {\n      if (onDrilldown) {\n        onDrilldown({\n          rowFilter,\n          columnValue,\n          type: 'pivot_cell_click',\n        });\n      }\n    },\n    [onDrilldown]\n  );\n\n  // Render row recursively\n  const renderRows = useCallback(\n    (node: PivotNode, rowFilter: Record<string, string>, parentPath: string, depth: number): JSX.Element[] => {\n      const rows: JSX.Element[] = [];\n      const hasChildren = node.children.size > 0;\n      const isExpanded = expandedRows.has(parentPath);\n      const rowField = rowFields[depth - 1];\n\n      if (depth > 0) {\n        const columnData = getValuesByColumn(data, columnFields, valueFields, rowFilter);\n\n        rows.push(\n          <tr key={parentPath} className=\"hover:bg-bg-sunken/50 transition-colors\">\n            {/* Row header */}\n            <td\n              className=\"sticky left-0 bg-bg-surface border-r border-border-default px-3 py-2 font-medium text-sm\"\n              style={{ paddingLeft: `${depth * 16 + 8}px` }}\n            >\n              <div className=\"flex items-center gap-1\">\n                {config.expandable && hasChildren && (\n                  <button\n                    type=\"button\"\n                    onClick={() => toggleRow(parentPath)}\n                    className=\"p-0.5 hover:bg-bg-sunken rounded\"\n                  >\n                    {isExpanded ? (\n                      <ChevronDown className=\"w-4 h-4 text-text-secondary\" />\n                    ) : (\n                      <ChevronRight className=\"w-4 h-4 text-text-secondary\" />\n                    )}\n                  </button>\n                )}\n                {!hasChildren && config.expandable && <span className=\"w-5\" />}\n                <span>{node.key}</span>\n              </div>\n            </td>\n\n            {/* Value cells */}\n            {columnValues.map((colValue) => {\n              const cellValues = columnData.get(colValue) || {};\n              return valueFields.map((vf) => (\n                <td\n                  key={`${colValue}-${vf.field}`}\n                  className=\"px-3 py-2 text-sm text-right tabular-nums cursor-pointer hover:bg-action-primary-bg/10\"\n                  onClick={() => handleCellClick(rowFilter, colValue)}\n                >\n                  {formatValue(cellValues[vf.field] || 0)}\n                </td>\n              ));\n            })}\n\n            {/* Row total */}\n            {config.showRowTotals &&\n              valueFields.map((vf) => (\n                <td\n                  key={`total-${vf.field}`}\n                  className=\"px-3 py-2 text-sm text-right tabular-nums font-medium bg-bg-sunken/30\"\n                >\n                  {formatValue(node.values[vf.field] || 0)}\n                </td>\n              ))}\n          </tr>\n        );\n      }\n\n      // Render children if expanded\n      if (hasChildren && (isExpanded || depth === 0)) {\n        const sortedKeys = Array.from(node.children.keys()).sort();\n        for (const childKey of sortedKeys) {\n          const childNode = node.children.get(childKey)!;\n          const childPath = `${parentPath}/${childKey}`;\n          const childFilter = rowField ? { ...rowFilter, [rowField]: childKey } : rowFilter;\n          rows.push(...renderRows(childNode, childFilter, childPath, depth + 1));\n        }\n      }\n\n      return rows;\n    },\n    [\n      data,\n      config,\n      rowFields,\n      columnFields,\n      valueFields,\n      columnValues,\n      expandedRows,\n      formatValue,\n      handleCellClick,\n      toggleRow,\n    ]\n  );\n\n  const hasLayout = rowFields.length > 0 || valueFields.length > 0;\n\n  // No data state\n  if (data.length === 0) {\n    return (\n      <div className=\"flex flex-col items-center justify-center h-full p-8 text-text-secondary\">\n        <Settings className=\"w-12 h-12 mb-4 opacity-50\" />\n        <p className=\"text-sm\">No data available</p>\n        <p className=\"text-xs mt-1\">Configure data source to populate pivot table</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full overflow-hidden\">\n      {/* Drag-and-drop field shelf (edit mode) */}\n      {isEditMode && (\n        <PivotFieldShelf\n          rowFields={rowFields}\n          columnFields={columnFields}\n          valueFields={valueFields}\n          availableFields={availableFields}\n          onMoveField={moveField}\n          onChangeAggregation={changeAggregation}\n        />\n      )}\n\n      {!hasLayout ? (\n        <div className=\"flex flex-col items-center justify-center flex-1 p-8 text-text-secondary\">\n          <Settings className=\"w-12 h-12 mb-4 opacity-50\" />\n          <p className=\"text-sm\">Configure Pivot Table</p>\n          <p className=\"text-xs mt-1\">\n            {isEditMode\n              ? 'Drag fields into the Rows and Values zones above'\n              : 'Add row fields and value fields in widget settings'}\n          </p>\n        </div>\n      ) : (\n        <div className=\"flex-1 overflow-auto\">\n          <table className=\"w-full border-collapse\">\n            {/* Header */}\n            <thead className=\"sticky top-0 z-10\">\n              {/* Column headers row */}\n              <tr className=\"bg-bg-sunken\">\n                <th className=\"sticky left-0 bg-bg-sunken border-r border-b border-border-default px-3 py-2 text-left text-xs font-semibold uppercase tracking-wider text-text-secondary\">\n                  {rowFields.length > 0 ? rowFields.map((r) => r.replace(/_/g, ' ')).join(' / ') : 'Values'}\n                </th>\n\n                {/* Column value headers */}\n                {columnValues.map((colValue) => (\n                  <th\n                    key={colValue}\n                    colSpan={valueFields.length || 1}\n                    className=\"border-b border-border-default px-3 py-2 text-center text-xs font-semibold uppercase tracking-wider text-text-secondary\"\n                  >\n                    {colValue}\n                  </th>\n                ))}\n\n                {/* Total header */}\n                {config.showRowTotals && (\n                  <th\n                    colSpan={valueFields.length || 1}\n                    className=\"border-b border-border-default px-3 py-2 text-center text-xs font-semibold uppercase tracking-wider text-text-secondary bg-bg-sunken/50\"\n                  >\n                    Total\n                  </th>\n                )}\n              </tr>\n\n              {/* Value field headers row (if multiple values) */}\n              {valueFields.length > 1 && (\n                <tr className=\"bg-bg-surface\">\n                  <th className=\"sticky left-0 bg-bg-surface border-r border-b border-border-default\" />\n                  {columnValues.map((colValue) =>\n                    valueFields.map((vf) => (\n                      <th\n                        key={`${colValue}-${vf.field}`}\n                        className=\"border-b border-border-default px-3 py-1 text-center text-xs text-text-secondary\"\n                      >\n                        {vf.label || vf.field.replace(/_/g, ' ')}\n                      </th>\n                    ))\n                  )}\n                  {config.showRowTotals &&\n                    valueFields.map((vf) => (\n                      <th\n                        key={`total-${vf.field}`}\n                        className=\"border-b border-border-default px-3 py-1 text-center text-xs text-text-secondary bg-bg-sunken/30\"\n                      >\n                        {vf.label || vf.field.replace(/_/g, ' ')}\n                      </th>\n                    ))}\n                </tr>\n              )}\n            </thead>\n\n            {/* Body */}\n            <tbody className=\"divide-y divide-border-default\">{renderRows(pivotTree, {}, 'root', 0)}</tbody>\n\n            {/* Footer with column totals */}\n            {config.showColumnTotals && (\n              <tfoot>\n                <tr className=\"bg-bg-sunken/50 font-medium\">\n                  <td className=\"sticky left-0 bg-bg-sunken/50 border-r border-t border-border-default px-3 py-2 text-sm\">\n                    Total\n                  </td>\n                  {columnValues.map((colValue) => {\n                    const cellValues = footerColumnData?.get(colValue) || {};\n                    return valueFields.map((vf) => (\n                      <td\n                        key={`footer-${colValue}-${vf.field}`}\n                        className=\"border-t border-border-default px-3 py-2 text-sm text-right tabular-nums\"\n                      >\n                        {formatValue(cellValues[vf.field] || 0)}\n                      </td>\n                    ));\n                  })}\n                  {config.showRowTotals &&\n                    config.showGrandTotal &&\n                    valueFields.map((vf) => (\n                      <td\n                        key={`grand-${vf.field}`}\n                        className=\"border-t border-border-default px-3 py-2 text-sm text-right tabular-nums font-bold bg-bg-sunken\"\n                      >\n                        {formatValue(pivotTree.values[vf.field] || 0)}\n                      </td>\n                    ))}\n                </tr>\n              </tfoot>\n            )}\n          </table>\n        </div>\n      )}\n    </div>\n  );\n});\n\n// ============================================================================\n// Field shelf (drag-and-drop zones)\n// ============================================================================\n\ninterface PivotFieldShelfProps {\n  rowFields: string[];\n  columnFields: string[];\n  valueFields: ValueField[];\n  availableFields: string[];\n  onMoveField: (field: string, from: PivotZone, to: PivotZone) => void;\n  onChangeAggregation: (field: string, aggregation: ValueField['aggregation']) => void;\n}\n\nconst DND_MIME = 'application/x-pivot-field';\n\nconst PivotFieldShelf: FC<PivotFieldShelfProps> = ({\n  rowFields,\n  columnFields,\n  valueFields,\n  availableFields,\n  onMoveField,\n  onChangeAggregation,\n}) => {\n  const [dragOverZone, setDragOverZone] = useState<PivotZone | null>(null);\n\n  const handleDrop = (zone: PivotZone) => (e: React.DragEvent) => {\n    e.preventDefault();\n    // Isolate the shelf's internal DnD from the dashboard canvas drop zone. The\n    // canvas onDragOver forces dropEffect='copy' (for palette widget drops); left\n    // to bubble, that conflicts with the chips' effectAllowed='move' and the\n    // browser rejects the drop entirely (drop event never fires).\n    e.stopPropagation();\n    setDragOverZone(null);\n    const raw = e.dataTransfer.getData(DND_MIME) || e.dataTransfer.getData('text/plain');\n    if (!raw) return;\n    try {\n      const { field, from } = JSON.parse(raw) as { field: string; from: PivotZone };\n      if (field) onMoveField(field, from, zone);\n    } catch {\n      // Ignore malformed drag payloads.\n    }\n  };\n\n  const chip = (field: string, from: PivotZone, vf?: ValueField) => (\n    <span\n      key={field}\n      draggable\n      onDragStart={(e) => {\n        const payload = JSON.stringify({ field, from });\n        e.dataTransfer.setData(DND_MIME, payload);\n        e.dataTransfer.setData('text/plain', payload);\n        e.dataTransfer.effectAllowed = 'move';\n      }}\n      className=\"inline-flex items-center gap-1 px-2 py-1 rounded-md bg-bg-surface border border-border-default text-xs text-text-primary cursor-grab\"\n    >\n      <GripVertical className=\"w-3 h-3 text-text-tertiary\" aria-hidden=\"true\" />\n      <span>{(vf?.label || field).replace(/_/g, ' ')}</span>\n      {vf && (\n        <select\n          value={vf.aggregation}\n          onChange={(e) => onChangeAggregation(field, e.target.value as ValueField['aggregation'])}\n          onClick={(e) => e.stopPropagation()}\n          aria-label={`Aggregation for ${field}`}\n          className=\"ml-1 bg-bg-sunken text-text-secondary rounded px-1 py-0.5 text-[10px] uppercase\"\n        >\n          {AGGREGATIONS.map((agg) => (\n            <option key={agg} value={agg}>\n              {agg}\n            </option>\n          ))}\n        </select>\n      )}\n    </span>\n  );\n\n  const zone = (label: string, name: PivotZone, children: JSX.Element[] | JSX.Element) => (\n    <div\n      onDragOver={(e) => {\n        e.preventDefault();\n        // Stop bubbling to the canvas onDragOver, which would override\n        // dropEffect to 'copy' and make the browser reject this 'move' drop.\n        e.stopPropagation();\n        e.dataTransfer.dropEffect = 'move';\n        if (dragOverZone !== name) {\n          setDragOverZone(name);\n        }\n      }}\n      onDragLeave={() => setDragOverZone((z) => (z === name ? null : z))}\n      onDrop={handleDrop(name)}\n      className={`flex-1 min-w-[8rem] rounded-md border p-2 transition-colors ${\n        dragOverZone === name\n          ? 'border-action-primary-bg bg-action-primary-bg/5'\n          : 'border-border-default bg-bg-sunken/30'\n      }`}\n    >\n      <div className=\"text-[10px] font-semibold uppercase tracking-wider text-text-tertiary mb-1.5\">{label}</div>\n      <div className=\"flex flex-wrap gap-1.5 min-h-[1.75rem]\">{children}</div>\n    </div>\n  );\n\n  return (\n    <div className=\"flex flex-wrap gap-2 p-2 border-b border-border-default bg-bg-surface\">\n      {zone(\n        'Rows',\n        'rows',\n        rowFields.map((f) => chip(f, 'rows'))\n      )}\n      {zone(\n        'Columns',\n        'columns',\n        columnFields.map((f) => chip(f, 'columns'))\n      )}\n      {zone(\n        'Values',\n        'values',\n        valueFields.map((vf) => chip(vf.field, 'values', vf))\n      )}\n      {zone(\n        'Available',\n        'available',\n        availableFields.length > 0 ? (\n          availableFields.map((f) => chip(f, 'available'))\n        ) : (\n          <span className=\"text-[11px] text-text-tertiary italic\">All fields in use</span>\n        )\n      )}\n    </div>\n  );\n};\n\nexport default PivotTableWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/progress/ProgressBar.js

@@ -2,11 +2,11 @@ import { memo as e, useMemo as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/progress/ProgressBar.tsx
 function i(e, t) {
-	if (t === "dynamic") return e >= 75 ? "bg-state-success" : e >= 50 ? "bg-state-warning" : "bg-state-error";
+	if (t === "dynamic") return e >= 75 ? "bg-status-success-bg" : e >= 50 ? "bg-status-warning-bg" : "bg-status-error-bg";
 	switch (t) {
-		case "success": return "bg-state-success";
-		case "warning": return "bg-state-warning";
-		case "error": return "bg-state-error";
+		case "success": return "bg-status-success-bg";
+		case "warning": return "bg-status-warning-bg";
+		case "error": return "bg-status-error-bg";
 		default: return "bg-action-primary-bg";
 	}
 }

package/dist/bigconsole/components/widgets/progress/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressBar.tsx"],"sourcesContent":["/**\n * ProgressBar Component\n *\n * Horizontal progress bar with optional milestones and target.\n */\n\nimport { type FC, memo, useMemo } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface Milestone {\n  /** Position as percentage (0-100) */\n  position: number;\n  /** Optional label */\n  label?: string;\n  /** Whether milestone is reached */\n  reached?: boolean;\n}\n\nexport interface ProgressBarProps {\n  /** Current progress value (0-100) */\n  value: number;\n  /** Target value to show as marker */\n  target?: number;\n  /** Milestones to display */\n  milestones?: Milestone[];\n  /** Height of the bar */\n  height?: number;\n  /** Color based on progress */\n  color?: 'default' | 'success' | 'warning' | 'error' | 'dynamic';\n  /** Whether to show percentage label */\n  showPercentage?: boolean;\n  /** Whether to animate */\n  animated?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getProgressColor(value: number, color: ProgressBarProps['color']): string {\n  if (color === 'dynamic') {\n    if (value >= 75) return 'bg-state-success';\n    if (value >= 50) return 'bg-state-warning';\n    return 'bg-state-error';\n  }\n\n  switch (color) {\n    case 'success':\n      return 'bg-state-success';\n    case 'warning':\n      return 'bg-state-warning';\n    case 'error':\n      return 'bg-state-error';\n    case 'default':\n    default:\n      return 'bg-action-primary-bg';\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressBar: FC<ProgressBarProps> = memo(function ProgressBar({\n  value,\n  target,\n  milestones = [],\n  height = 8,\n  color = 'default',\n  showPercentage = false,\n  animated = true,\n}) {\n  const clampedValue = useMemo(() => Math.max(0, Math.min(100, value)), [value]);\n\n  const progressColor = getProgressColor(clampedValue, color);\n\n  return (\n    <div className=\"w-full\">\n      {/* Progress bar container */}\n      <div className=\"relative w-full rounded-full bg-bg-sunken overflow-visible\" style={{ height }}>\n        {/* Progress fill */}\n        <div\n          className={`\n            absolute inset-y-0 left-0 rounded-full\n            ${progressColor}\n            ${animated ? 'transition-all duration-500 ease-out' : ''}\n          `}\n          style={{ width: `${clampedValue}%` }}\n          role=\"progressbar\"\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        />\n\n        {/* Target marker */}\n        {target !== undefined && target >= 0 && target <= 100 && (\n          <div\n            className=\"absolute top-1/2 -translate-y-1/2 w-0.5 h-[150%] bg-text-primary z-10\"\n            style={{ left: `${target}%` }}\n            title={`Target: ${target}%`}\n          >\n            {/* Target flag */}\n            <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n              <svg className=\"w-3 h-3 text-text-primary\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M5 21V3h14l-3 9 3 9H5z\" />\n              </svg>\n            </div>\n          </div>\n        )}\n\n        {/* Milestones */}\n        {milestones.map((milestone, index) => (\n          <div\n            key={index}\n            className={`\n              absolute top-1/2 -translate-y-1/2\n              w-3 h-3 rounded-full border-2\n              ${\n                milestone.reached || clampedValue >= milestone.position\n                  ? 'bg-bg-surface border-action-primary-bg'\n                  : 'bg-bg-sunken border-border-default'\n              }\n              z-10\n            `}\n            style={{ left: `${milestone.position}%`, transform: 'translate(-50%, -50%)' }}\n            title={milestone.label || `${milestone.position}%`}\n          />\n        ))}\n      </div>\n\n      {/* Milestone labels */}\n      {milestones.some((m) => m.label) && (\n        <div className=\"relative mt-2\">\n          {milestones.map((milestone, index) =>\n            milestone.label ? (\n              <span\n                key={index}\n                className=\"absolute text-xs text-text-secondary -translate-x-1/2 whitespace-nowrap\"\n                style={{ left: `${milestone.position}%` }}\n              >\n                {milestone.label}\n              </span>\n            ) : null\n          )}\n        </div>\n      )}\n\n      {/* Percentage label */}\n      {showPercentage && (\n        <div className=\"flex justify-between items-center mt-1\">\n          <span className=\"text-xs text-text-secondary\">0%</span>\n          <span className=\"text-sm font-medium text-text-primary\">{clampedValue.toFixed(0)}%</span>\n          <span className=\"text-xs text-text-secondary\">100%</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;AA0CA,SAAS,EAAiB,GAAe,GAA0C;AACjF,KAAI,MAAU,UAGZ,QAFI,KAAS,KAAW,qBACpB,KAAS,KAAW,qBACjB;AAGT,SAAQ,GAAR;EACE,KAAK,UACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK,QACH,QAAO;EAET,QACE,QAAO;;;AAQb,IAAa,IAAoC,EAAK,SAAqB,EACzE,UACA,WACA,gBAAa,EAAE,EACf,YAAS,GACT,WAAQ,WACR,oBAAiB,IACjB,cAAW,MACV;CACD,IAAM,IAAe,QAAc,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,EAAM,CAAC,EAAE,CAAC,EAAM,CAAC,EAExE,IAAgB,EAAiB,GAAc,EAAM;AAE3D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;IAA6D,OAAO,EAAE,WAAQ;cAA7F;KAEE,kBAAC,OAAD;MACE,WAAW;;cAEP,EAAc;cACd,IAAW,yCAAyC,GAAG;;MAE3D,OAAO,EAAE,OAAO,GAAG,EAAa,IAAI;MACpC,MAAK;MACL,iBAAe;MACf,iBAAe;MACf,iBAAe;MACf,CAAA;KAGD,MAAW,KAAA,KAAa,KAAU,KAAK,KAAU,OAChD,kBAAC,OAAD;MACE,WAAU;MACV,OAAO,EAAE,MAAM,GAAG,EAAO,IAAI;MAC7B,OAAO,WAAW,EAAO;gBAGzB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;QAA4B,MAAK;QAAe,SAAQ;kBACrE,kBAAC,QAAD,EAAM,GAAE,0BAA2B,CAAA;QAC/B,CAAA;OACF,CAAA;MACF,CAAA;KAIP,EAAW,KAAK,GAAW,MAC1B,kBAAC,OAAD;MAEE,WAAW;;;gBAIP,EAAU,WAAW,KAAgB,EAAU,WAC3C,2CACA,qCACL;;;MAGH,OAAO;OAAE,MAAM,GAAG,EAAU,SAAS;OAAI,WAAW;OAAyB;MAC7E,OAAO,EAAU,SAAS,GAAG,EAAU,SAAS;MAChD,EAbK,EAaL,CACF;KACE;;GAGL,EAAW,MAAM,MAAM,EAAE,MAAM,IAC9B,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAW,KAAK,GAAW,MAC1B,EAAU,QACR,kBAAC,QAAD;KAEE,WAAU;KACV,OAAO,EAAE,MAAM,GAAG,EAAU,SAAS,IAAI;eAExC,EAAU;KACN,EALA,EAKA,GACL,KACL;IACG,CAAA;GAIP,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD;MAAM,WAAU;gBAA8B;MAAS,CAAA;KACvD,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAAyD,EAAa,QAAQ,EAAE,EAAC,IAAQ;;KACzF,kBAAC,QAAD;MAAM,WAAU;gBAA8B;MAAW,CAAA;KACrD;;GAEJ;;EAER"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressBar.tsx"],"sourcesContent":["/**\n * ProgressBar Component\n *\n * Horizontal progress bar with optional milestones and target.\n */\n\nimport { type FC, memo, useMemo } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface Milestone {\n  /** Position as percentage (0-100) */\n  position: number;\n  /** Optional label */\n  label?: string;\n  /** Whether milestone is reached */\n  reached?: boolean;\n}\n\nexport interface ProgressBarProps {\n  /** Current progress value (0-100) */\n  value: number;\n  /** Target value to show as marker */\n  target?: number;\n  /** Milestones to display */\n  milestones?: Milestone[];\n  /** Height of the bar */\n  height?: number;\n  /** Color based on progress */\n  color?: 'default' | 'success' | 'warning' | 'error' | 'dynamic';\n  /** Whether to show percentage label */\n  showPercentage?: boolean;\n  /** Whether to animate */\n  animated?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getProgressColor(value: number, color: ProgressBarProps['color']): string {\n  if (color === 'dynamic') {\n    if (value >= 75) return 'bg-status-success-bg';\n    if (value >= 50) return 'bg-status-warning-bg';\n    return 'bg-status-error-bg';\n  }\n\n  switch (color) {\n    case 'success':\n      return 'bg-status-success-bg';\n    case 'warning':\n      return 'bg-status-warning-bg';\n    case 'error':\n      return 'bg-status-error-bg';\n    case 'default':\n    default:\n      return 'bg-action-primary-bg';\n  }\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressBar: FC<ProgressBarProps> = memo(function ProgressBar({\n  value,\n  target,\n  milestones = [],\n  height = 8,\n  color = 'default',\n  showPercentage = false,\n  animated = true,\n}) {\n  const clampedValue = useMemo(() => Math.max(0, Math.min(100, value)), [value]);\n\n  const progressColor = getProgressColor(clampedValue, color);\n\n  return (\n    <div className=\"w-full\">\n      {/* Progress bar container */}\n      <div className=\"relative w-full rounded-full bg-bg-sunken overflow-visible\" style={{ height }}>\n        {/* Progress fill */}\n        <div\n          className={`\n            absolute inset-y-0 left-0 rounded-full\n            ${progressColor}\n            ${animated ? 'transition-all duration-500 ease-out' : ''}\n          `}\n          style={{ width: `${clampedValue}%` }}\n          role=\"progressbar\"\n          aria-valuenow={clampedValue}\n          aria-valuemin={0}\n          aria-valuemax={100}\n        />\n\n        {/* Target marker */}\n        {target !== undefined && target >= 0 && target <= 100 && (\n          <div\n            className=\"absolute top-1/2 -translate-y-1/2 w-0.5 h-[150%] bg-text-primary z-10\"\n            style={{ left: `${target}%` }}\n            title={`Target: ${target}%`}\n          >\n            {/* Target flag */}\n            <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n              <svg className=\"w-3 h-3 text-text-primary\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path d=\"M5 21V3h14l-3 9 3 9H5z\" />\n              </svg>\n            </div>\n          </div>\n        )}\n\n        {/* Milestones */}\n        {milestones.map((milestone, index) => (\n          <div\n            key={index}\n            className={`\n              absolute top-1/2 -translate-y-1/2\n              w-3 h-3 rounded-full border-2\n              ${\n                milestone.reached || clampedValue >= milestone.position\n                  ? 'bg-bg-surface border-action-primary-bg'\n                  : 'bg-bg-sunken border-border-default'\n              }\n              z-10\n            `}\n            style={{ left: `${milestone.position}%`, transform: 'translate(-50%, -50%)' }}\n            title={milestone.label || `${milestone.position}%`}\n          />\n        ))}\n      </div>\n\n      {/* Milestone labels */}\n      {milestones.some((m) => m.label) && (\n        <div className=\"relative mt-2\">\n          {milestones.map((milestone, index) =>\n            milestone.label ? (\n              <span\n                key={index}\n                className=\"absolute text-xs text-text-secondary -translate-x-1/2 whitespace-nowrap\"\n                style={{ left: `${milestone.position}%` }}\n              >\n                {milestone.label}\n              </span>\n            ) : null\n          )}\n        </div>\n      )}\n\n      {/* Percentage label */}\n      {showPercentage && (\n        <div className=\"flex justify-between items-center mt-1\">\n          <span className=\"text-xs text-text-secondary\">0%</span>\n          <span className=\"text-sm font-medium text-text-primary\">{clampedValue.toFixed(0)}%</span>\n          <span className=\"text-xs text-text-secondary\">100%</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default ProgressBar;\n"],"mappings":";;;AA0CA,SAAS,EAAiB,GAAe,GAA0C;AACjF,KAAI,MAAU,UAGZ,QAFI,KAAS,KAAW,yBACpB,KAAS,KAAW,yBACjB;AAGT,SAAQ,GAAR;EACE,KAAK,UACH,QAAO;EACT,KAAK,UACH,QAAO;EACT,KAAK,QACH,QAAO;EAET,QACE,QAAO;;;AAQb,IAAa,IAAoC,EAAK,SAAqB,EACzE,UACA,WACA,gBAAa,EAAE,EACf,YAAS,GACT,WAAQ,WACR,oBAAiB,IACjB,cAAW,MACV;CACD,IAAM,IAAe,QAAc,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,EAAM,CAAC,EAAE,CAAC,EAAM,CAAC,EAExE,IAAgB,EAAiB,GAAc,EAAM;AAE3D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;IAA6D,OAAO,EAAE,WAAQ;cAA7F;KAEE,kBAAC,OAAD;MACE,WAAW;;cAEP,EAAc;cACd,IAAW,yCAAyC,GAAG;;MAE3D,OAAO,EAAE,OAAO,GAAG,EAAa,IAAI;MACpC,MAAK;MACL,iBAAe;MACf,iBAAe;MACf,iBAAe;MACf,CAAA;KAGD,MAAW,KAAA,KAAa,KAAU,KAAK,KAAU,OAChD,kBAAC,OAAD;MACE,WAAU;MACV,OAAO,EAAE,MAAM,GAAG,EAAO,IAAI;MAC7B,OAAO,WAAW,EAAO;gBAGzB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;QAA4B,MAAK;QAAe,SAAQ;kBACrE,kBAAC,QAAD,EAAM,GAAE,0BAA2B,CAAA;QAC/B,CAAA;OACF,CAAA;MACF,CAAA;KAIP,EAAW,KAAK,GAAW,MAC1B,kBAAC,OAAD;MAEE,WAAW;;;gBAIP,EAAU,WAAW,KAAgB,EAAU,WAC3C,2CACA,qCACL;;;MAGH,OAAO;OAAE,MAAM,GAAG,EAAU,SAAS;OAAI,WAAW;OAAyB;MAC7E,OAAO,EAAU,SAAS,GAAG,EAAU,SAAS;MAChD,EAbK,EAaL,CACF;KACE;;GAGL,EAAW,MAAM,MAAM,EAAE,MAAM,IAC9B,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAW,KAAK,GAAW,MAC1B,EAAU,QACR,kBAAC,QAAD;KAEE,WAAU;KACV,OAAO,EAAE,MAAM,GAAG,EAAU,SAAS,IAAI;eAExC,EAAU;KACN,EALA,EAKA,GACL,KACL;IACG,CAAA;GAIP,KACC,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,QAAD;MAAM,WAAU;gBAA8B;MAAS,CAAA;KACvD,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAAyD,EAAa,QAAQ,EAAE,EAAC,IAAQ;;KACzF,kBAAC,QAAD;MAAM,WAAU;gBAA8B;MAAW,CAAA;KACrD;;GAEJ;;EAER"}

package/dist/bigconsole/components/widgets/progress/ProgressConfig.js

@@ -132,7 +132,7 @@ var i = e(function({ config: e, onChange: i }) {
 						/* @__PURE__ */ n("button", {
 							type: "button",
 							onClick: () => c(t),
-							className: "text-state-error hover:text-state-error/80 p-1",
+							className: "text-status-error-text hover:text-status-error-text/80 p-1",
 							children: /* @__PURE__ */ n("svg", {
 								className: "w-4 h-4",
 								fill: "none",

package/dist/bigconsole/components/widgets/progress/ProgressConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressConfig.tsx"],"sourcesContent":["/**\n * ProgressConfig Component\n *\n * Configuration panel for Progress widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { ProgressConfig as ConfigType, ProgressMilestone } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressConfig: FC<ProgressConfigProps> = memo(function ProgressConfig({ 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  const handleMilestoneChange = useCallback(\n    (index: number, field: 'position' | 'label', value: string | number) => {\n      const milestones = [...(config.milestones || [])];\n      milestones[index] = { ...milestones[index], [field]: value };\n      handleChange('milestones', milestones);\n    },\n    [config.milestones, handleChange]\n  );\n\n  const addMilestone = useCallback(() => {\n    const milestones = [...(config.milestones || []), { position: 50, label: '', value: 50 }];\n    handleChange('milestones', milestones as ProgressMilestone[]);\n  }, [config.milestones, handleChange]);\n\n  const removeMilestone = useCallback(\n    (index: number) => {\n      const milestones = (config.milestones || []).filter((_, i) => i !== index);\n      handleChange('milestones', milestones);\n    },\n    [config.milestones, handleChange]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Max Value */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Maximum Value</label>\n        <input\n          type=\"number\"\n          value={config.max ?? 100}\n          onChange={(e) => handleChange('max', Number(e.target.value))}\n          className=\"\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      </div>\n\n      {/* Bar Height */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Bar Height (px)</label>\n        <input\n          type=\"number\"\n          value={config.barHeight ?? 12}\n          onChange={(e) => handleChange('barHeight', Number(e.target.value))}\n          min={4}\n          max={32}\n          className=\"\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      </div>\n\n      {/* Value Format */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Format</label>\n        <select\n          value={config.format || 'number'}\n          onChange={(e) => handleChange('format', e.target.value as ConfigType['format'])}\n          className=\"\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          <option value=\"number\">Number</option>\n          <option value=\"currency\">Currency</option>\n          <option value=\"compact\">Compact (1K, 1M)</option>\n        </select>\n      </div>\n\n      {/* Color Mode */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Color Mode</label>\n        <select\n          value={config.colorMode || 'default'}\n          onChange={(e) => handleChange('colorMode', e.target.value as ConfigType['colorMode'])}\n          className=\"\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          <option value=\"default\">Default (Blue)</option>\n          <option value=\"dynamic\">Dynamic (based on progress)</option>\n          <option value=\"success\">Success (Green)</option>\n          <option value=\"warning\">Warning (Yellow)</option>\n          <option value=\"error\">Error (Red)</option>\n        </select>\n      </div>\n\n      {/* Milestones */}\n      <div>\n        <div className=\"flex items-center justify-between mb-2\">\n          <label className=\"text-sm font-medium text-text-primary\">Milestones</label>\n          <button\n            type=\"button\"\n            onClick={addMilestone}\n            className=\"\n                text-sm text-action-primary-bg\n                hover:text-action-primary-bgHover\n              \"\n          >\n            + Add Milestone\n          </button>\n        </div>\n\n        <div className=\"space-y-2\">\n          {(config.milestones || []).map((milestone, index) => (\n            <div\n              key={index}\n              className=\"\n                  flex items-center gap-2\n                  p-2\n                  bg-bg-sunken\n                  rounded-md\n                \"\n            >\n              <input\n                type=\"number\"\n                value={milestone.position}\n                onChange={(e) => handleMilestoneChange(index, 'position', Number(e.target.value))}\n                min={0}\n                max={100}\n                className=\"\n                    w-20 px-2 py-1\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                placeholder=\"%\"\n              />\n              <input\n                type=\"text\"\n                value={milestone.label || ''}\n                onChange={(e) => handleMilestoneChange(index, 'label', e.target.value)}\n                className=\"\n                    flex-1 px-2 py-1\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                placeholder=\"Label (optional)\"\n              />\n              <button\n                type=\"button\"\n                onClick={() => removeMilestone(index)}\n                className=\"text-state-error hover:text-state-error/80 p-1\"\n              >\n                <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n              </button>\n            </div>\n          ))}\n\n          {(!config.milestones || config.milestones.length === 0) && (\n            <p className=\"text-sm text-text-secondary text-center py-2\">No milestones configured</p>\n          )}\n        </div>\n      </div>\n\n      {/* Toggle Options */}\n      <div className=\"space-y-3\">\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showPercentage !== false}\n            onChange={(e) => handleChange('showPercentage', 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 percentage labels</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showMax !== false}\n            onChange={(e) => handleChange('showMax', 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 maximum value</span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default ProgressConfig;\n"],"mappings":"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"}
+{"version":3,"file":"ProgressConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressConfig.tsx"],"sourcesContent":["/**\n * ProgressConfig Component\n *\n * Configuration panel for Progress widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { ProgressConfig as ConfigType, ProgressMilestone } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressConfig: FC<ProgressConfigProps> = memo(function ProgressConfig({ 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  const handleMilestoneChange = useCallback(\n    (index: number, field: 'position' | 'label', value: string | number) => {\n      const milestones = [...(config.milestones || [])];\n      milestones[index] = { ...milestones[index], [field]: value };\n      handleChange('milestones', milestones);\n    },\n    [config.milestones, handleChange]\n  );\n\n  const addMilestone = useCallback(() => {\n    const milestones = [...(config.milestones || []), { position: 50, label: '', value: 50 }];\n    handleChange('milestones', milestones as ProgressMilestone[]);\n  }, [config.milestones, handleChange]);\n\n  const removeMilestone = useCallback(\n    (index: number) => {\n      const milestones = (config.milestones || []).filter((_, i) => i !== index);\n      handleChange('milestones', milestones);\n    },\n    [config.milestones, handleChange]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Max Value */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Maximum Value</label>\n        <input\n          type=\"number\"\n          value={config.max ?? 100}\n          onChange={(e) => handleChange('max', Number(e.target.value))}\n          className=\"\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      </div>\n\n      {/* Bar Height */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Bar Height (px)</label>\n        <input\n          type=\"number\"\n          value={config.barHeight ?? 12}\n          onChange={(e) => handleChange('barHeight', Number(e.target.value))}\n          min={4}\n          max={32}\n          className=\"\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      </div>\n\n      {/* Value Format */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Format</label>\n        <select\n          value={config.format || 'number'}\n          onChange={(e) => handleChange('format', e.target.value as ConfigType['format'])}\n          className=\"\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          <option value=\"number\">Number</option>\n          <option value=\"currency\">Currency</option>\n          <option value=\"compact\">Compact (1K, 1M)</option>\n        </select>\n      </div>\n\n      {/* Color Mode */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Color Mode</label>\n        <select\n          value={config.colorMode || 'default'}\n          onChange={(e) => handleChange('colorMode', e.target.value as ConfigType['colorMode'])}\n          className=\"\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          <option value=\"default\">Default (Blue)</option>\n          <option value=\"dynamic\">Dynamic (based on progress)</option>\n          <option value=\"success\">Success (Green)</option>\n          <option value=\"warning\">Warning (Yellow)</option>\n          <option value=\"error\">Error (Red)</option>\n        </select>\n      </div>\n\n      {/* Milestones */}\n      <div>\n        <div className=\"flex items-center justify-between mb-2\">\n          <label className=\"text-sm font-medium text-text-primary\">Milestones</label>\n          <button\n            type=\"button\"\n            onClick={addMilestone}\n            className=\"\n                text-sm text-action-primary-bg\n                hover:text-action-primary-bgHover\n              \"\n          >\n            + Add Milestone\n          </button>\n        </div>\n\n        <div className=\"space-y-2\">\n          {(config.milestones || []).map((milestone, index) => (\n            <div\n              key={index}\n              className=\"\n                  flex items-center gap-2\n                  p-2\n                  bg-bg-sunken\n                  rounded-md\n                \"\n            >\n              <input\n                type=\"number\"\n                value={milestone.position}\n                onChange={(e) => handleMilestoneChange(index, 'position', Number(e.target.value))}\n                min={0}\n                max={100}\n                className=\"\n                    w-20 px-2 py-1\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                placeholder=\"%\"\n              />\n              <input\n                type=\"text\"\n                value={milestone.label || ''}\n                onChange={(e) => handleMilestoneChange(index, 'label', e.target.value)}\n                className=\"\n                    flex-1 px-2 py-1\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                placeholder=\"Label (optional)\"\n              />\n              <button\n                type=\"button\"\n                onClick={() => removeMilestone(index)}\n                className=\"text-status-error-text hover:text-status-error-text/80 p-1\"\n              >\n                <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M6 18L18 6M6 6l12 12\" />\n                </svg>\n              </button>\n            </div>\n          ))}\n\n          {(!config.milestones || config.milestones.length === 0) && (\n            <p className=\"text-sm text-text-secondary text-center py-2\">No milestones configured</p>\n          )}\n        </div>\n      </div>\n\n      {/* Toggle Options */}\n      <div className=\"space-y-3\">\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showPercentage !== false}\n            onChange={(e) => handleChange('showPercentage', 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 percentage labels</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showMax !== false}\n            onChange={(e) => handleChange('showMax', 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 maximum value</span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default ProgressConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/progress/ProgressWidget.js

@@ -168,7 +168,7 @@ var u = a(function({ widget: a, data: u, onClick: d, onDrilldown: f }) {
 							children: new Intl.NumberFormat("en-US").format(m.target)
 						}),
 						h >= (g || 0) && /* @__PURE__ */ c("span", {
-							className: "text-state-success ml-1",
+							className: "text-status-success-text ml-1",
 							children: "Reached!"
 						})
 					]

package/dist/bigconsole/components/widgets/progress/ProgressWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressWidget.tsx"],"sourcesContent":["/**\n * ProgressWidget Component\n *\n * Progress bar widget with target, milestones, and color stages.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, ProgressConfig } from '../../../types';\nimport { ProgressBar, type Milestone } from './ProgressBar';\nimport { firstObjectRow, inferValueField, inferMaxValue, unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Progress data */\n  data?: ProgressData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives progress data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface ProgressData {\n  /** Current value */\n  value: number;\n  /** Maximum value (for calculating percentage) */\n  max?: number;\n  /** Target value */\n  target?: number;\n  /** Label for the progress */\n  label?: string;\n  /** Description text */\n  description?: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressWidget: FC<ProgressWidgetProps> = memo(function ProgressWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as ProgressConfig | undefined;\n\n  // BOFF-2246 smart default: if rawData is an array (or envelope) rather than\n  // the expected `ProgressData` single object, pull the configured valueField\n  // (flat OR dotted, e.g. `metrics.revenue`) or fall back to the first\n  // numeric field. Auto-compute a sensible max from the dataset.\n  const normalizedData = useMemo((): ProgressData | undefined => {\n    if (!rawData) return undefined;\n    // Already the expected shape — pass through. Accept both number and\n    // numeric-string `value`, since parsers sometimes serialize metrics as\n    // strings and the pre-BOFF-2246 code path rendered those via implicit\n    // JS coercion in percentage math.\n    if (typeof rawData === 'object' && !Array.isArray(rawData) && 'value' in rawData) {\n      const rawValue = (rawData as { value: unknown }).value;\n      if (typeof rawValue === 'number') {\n        return rawData as ProgressData;\n      }\n      if (typeof rawValue === 'string') {\n        const parsed = Number(rawValue);\n        if (Number.isFinite(parsed)) {\n          // Coerce to number so downstream math is deterministic.\n          return { ...(rawData as ProgressData), value: parsed };\n        }\n      }\n    }\n    const row = firstObjectRow(rawData);\n    if (!row) return undefined;\n    const configuredField = (config as Record<string, unknown> | undefined)?.valueField as string | undefined;\n\n    // Supports dotted paths like `metrics.revenue` so nested valueFields\n    // configured in widget config resolve on array/envelope payloads the\n    // same way they do on single-object payloads.\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown =>\n      path.split('.').reduce<unknown>((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj);\n\n    // Coerce `number` or finite numeric string to a number. Mirrors the\n    // pass-through branch above so the row path doesn't silently fall back\n    // to inference when a parser serializes metrics as strings.\n    const toNumber = (v: unknown): number | null => {\n      if (typeof v === 'number' && Number.isFinite(v)) return v;\n      if (typeof v === 'string') {\n        const n = Number(v);\n        if (Number.isFinite(n)) return n;\n      }\n      return null;\n    };\n\n    const labelFromRow =\n      typeof row.label === 'string' ? row.label : typeof row.name === 'string' ? row.name : undefined;\n\n    // Configured field is authoritative — scan every row for it so sparse\n    // envelopes like `{data:[{id:1},{revenue:120}]}` with\n    // `valueField:\"revenue\"` still resolve. If no row carries it, return\n    // undefined rather than substituting an unrelated numeric column from\n    // row[0] via inference (that would silently misrepresent user config).\n    if (configuredField) {\n      const rows = unwrapRows(rawData) ?? [row];\n      for (const r of rows) {\n        if (r && typeof r === 'object') {\n          const resolvedRow = r as Record<string, unknown>;\n          const resolved = toNumber(getNestedValue(resolvedRow, configuredField));\n          if (resolved !== null) {\n            const rowLabel =\n              typeof resolvedRow.label === 'string'\n                ? resolvedRow.label\n                : typeof resolvedRow.name === 'string'\n                  ? resolvedRow.name\n                  : labelFromRow;\n            return {\n              value: resolved,\n              max: config?.max ?? inferMaxValue(rawData, configuredField) ?? undefined,\n              label: rowLabel,\n            };\n          }\n        }\n      }\n      return undefined;\n    }\n\n    // Fall back to inference (only when no configured field). `inferValueField`\n    // already filters to numeric fields, but we still coerce here for symmetry\n    // with the configured branch above.\n    const inferred = inferValueField(row);\n    if (!inferred) return undefined;\n    const inferredValue = toNumber(row[inferred]);\n    if (inferredValue === null) return undefined;\n    return {\n      value: inferredValue,\n      max: config?.max ?? inferMaxValue(rawData, inferred) ?? undefined,\n      label: labelFromRow,\n    };\n  }, [rawData, config]);\n\n  // Downstream render uses the normalized shape. Name kept as `data` so the\n  // rest of the component body (formattedValue, handleClick, header, etc.)\n  // stays unchanged.\n  const data = normalizedData;\n\n  // Calculate percentage\n  const percentage = useMemo(() => {\n    if (!data) return 0;\n    const max = data.max || config?.max || 100;\n    return (data.value / max) * 100;\n  }, [data, config?.max]);\n\n  // Calculate target percentage\n  const targetPercentage = useMemo(() => {\n    if (!data?.target) return undefined;\n    const max = data.max || config?.max || 100;\n    return (data.target / max) * 100;\n  }, [data, config?.max]);\n\n  // Build milestones from config\n  const milestones: Milestone[] = useMemo(() => {\n    if (!config?.milestones?.length) return [];\n    return config.milestones.map((m) => ({\n      position: m.position ?? m.value ?? 0,\n      label: m.label,\n      reached: percentage >= (m.position ?? m.value ?? 0),\n    }));\n  }, [config?.milestones, percentage]);\n\n  // Determine color mode\n  const colorMode = useMemo(() => {\n    if (config?.colorMode === 'dynamic') return 'dynamic';\n    if (config?.colorMode === 'success') return 'success';\n    if (config?.colorMode === 'warning') return 'warning';\n    if (config?.colorMode === 'error') return 'error';\n    return 'default';\n  }, [config?.colorMode]);\n\n  // Format value\n  const formattedValue = useMemo(() => {\n    if (!data) return '0';\n    const format = config?.format || 'number';\n\n    switch (format) {\n      case 'currency':\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: 'USD',\n          maximumFractionDigits: 0,\n        }).format(data.value);\n      case 'compact':\n        return new Intl.NumberFormat('en-US', {\n          notation: 'compact',\n          maximumFractionDigits: 1,\n        }).format(data.value);\n      case 'number':\n      default:\n        return new Intl.NumberFormat('en-US').format(data.value);\n    }\n  }, [data, config?.format]);\n\n  const formattedMax = useMemo(() => {\n    const max = data?.max || config?.max || 100;\n    const format = config?.format || 'number';\n\n    switch (format) {\n      case 'currency':\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: 'USD',\n          maximumFractionDigits: 0,\n        }).format(max);\n      case 'compact':\n        return new Intl.NumberFormat('en-US', {\n          notation: 'compact',\n          maximumFractionDigits: 1,\n        }).format(max);\n      case 'number':\n      default:\n        return new Intl.NumberFormat('en-US').format(max);\n    }\n  }, [data?.max, config?.max, config?.format]);\n\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && data) {\n      onDrilldown({\n        value: data.value,\n        max: data.max,\n        target: data.target,\n        label: data.label,\n        percentage,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, percentage]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!data) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`\n          flex flex-col 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      {/* Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div className=\"flex-1\">\n          {data.label && <h4 className=\"text-sm font-medium text-text-primary\">{data.label}</h4>}\n          {data.description && <p className=\"text-xs text-text-secondary mt-0.5\">{data.description}</p>}\n        </div>\n\n        {/* Value display */}\n        <div className=\"text-right\">\n          <span className=\"text-2xl font-bold text-text-primary\">{formattedValue}</span>\n          {config?.showMax !== false && (\n            <span className=\"text-sm text-text-secondary\">\n              {' / '}\n              {formattedMax}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Progress bar */}\n      <ProgressBar\n        value={percentage}\n        target={targetPercentage}\n        milestones={milestones}\n        height={config?.barHeight || 12}\n        color={colorMode}\n        showPercentage={config?.showPercentage !== false}\n      />\n\n      {/* Target info */}\n      {data.target !== undefined && (\n        <div className=\"mt-3 flex items-center gap-2 text-xs\">\n          <svg className=\"w-4 h-4 text-text-secondary\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M5 21V3h14l-3 9 3 9H5z\" />\n          </svg>\n          <span className=\"text-text-secondary\">\n            Target:{' '}\n            <span className=\"font-medium text-text-primary\">{new Intl.NumberFormat('en-US').format(data.target)}</span>\n            {percentage >= (targetPercentage || 0) && <span className=\"text-state-success ml-1\">Reached!</span>}\n          </span>\n        </div>\n      )}\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-3 flex items-center justify-end\">\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 ProgressWidget;\n"],"mappings":"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"}
+{"version":3,"file":"ProgressWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/progress/ProgressWidget.tsx"],"sourcesContent":["/**\n * ProgressWidget Component\n *\n * Progress bar widget with target, milestones, and color stages.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, ProgressConfig } from '../../../types';\nimport { ProgressBar, type Milestone } from './ProgressBar';\nimport { firstObjectRow, inferValueField, inferMaxValue, unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ProgressWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Progress data */\n  data?: ProgressData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives progress data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface ProgressData {\n  /** Current value */\n  value: number;\n  /** Maximum value (for calculating percentage) */\n  max?: number;\n  /** Target value */\n  target?: number;\n  /** Label for the progress */\n  label?: string;\n  /** Description text */\n  description?: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ProgressWidget: FC<ProgressWidgetProps> = memo(function ProgressWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as ProgressConfig | undefined;\n\n  // BOFF-2246 smart default: if rawData is an array (or envelope) rather than\n  // the expected `ProgressData` single object, pull the configured valueField\n  // (flat OR dotted, e.g. `metrics.revenue`) or fall back to the first\n  // numeric field. Auto-compute a sensible max from the dataset.\n  const normalizedData = useMemo((): ProgressData | undefined => {\n    if (!rawData) return undefined;\n    // Already the expected shape — pass through. Accept both number and\n    // numeric-string `value`, since parsers sometimes serialize metrics as\n    // strings and the pre-BOFF-2246 code path rendered those via implicit\n    // JS coercion in percentage math.\n    if (typeof rawData === 'object' && !Array.isArray(rawData) && 'value' in rawData) {\n      const rawValue = (rawData as { value: unknown }).value;\n      if (typeof rawValue === 'number') {\n        return rawData as ProgressData;\n      }\n      if (typeof rawValue === 'string') {\n        const parsed = Number(rawValue);\n        if (Number.isFinite(parsed)) {\n          // Coerce to number so downstream math is deterministic.\n          return { ...(rawData as ProgressData), value: parsed };\n        }\n      }\n    }\n    const row = firstObjectRow(rawData);\n    if (!row) return undefined;\n    const configuredField = (config as Record<string, unknown> | undefined)?.valueField as string | undefined;\n\n    // Supports dotted paths like `metrics.revenue` so nested valueFields\n    // configured in widget config resolve on array/envelope payloads the\n    // same way they do on single-object payloads.\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown =>\n      path.split('.').reduce<unknown>((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj);\n\n    // Coerce `number` or finite numeric string to a number. Mirrors the\n    // pass-through branch above so the row path doesn't silently fall back\n    // to inference when a parser serializes metrics as strings.\n    const toNumber = (v: unknown): number | null => {\n      if (typeof v === 'number' && Number.isFinite(v)) return v;\n      if (typeof v === 'string') {\n        const n = Number(v);\n        if (Number.isFinite(n)) return n;\n      }\n      return null;\n    };\n\n    const labelFromRow =\n      typeof row.label === 'string' ? row.label : typeof row.name === 'string' ? row.name : undefined;\n\n    // Configured field is authoritative — scan every row for it so sparse\n    // envelopes like `{data:[{id:1},{revenue:120}]}` with\n    // `valueField:\"revenue\"` still resolve. If no row carries it, return\n    // undefined rather than substituting an unrelated numeric column from\n    // row[0] via inference (that would silently misrepresent user config).\n    if (configuredField) {\n      const rows = unwrapRows(rawData) ?? [row];\n      for (const r of rows) {\n        if (r && typeof r === 'object') {\n          const resolvedRow = r as Record<string, unknown>;\n          const resolved = toNumber(getNestedValue(resolvedRow, configuredField));\n          if (resolved !== null) {\n            const rowLabel =\n              typeof resolvedRow.label === 'string'\n                ? resolvedRow.label\n                : typeof resolvedRow.name === 'string'\n                  ? resolvedRow.name\n                  : labelFromRow;\n            return {\n              value: resolved,\n              max: config?.max ?? inferMaxValue(rawData, configuredField) ?? undefined,\n              label: rowLabel,\n            };\n          }\n        }\n      }\n      return undefined;\n    }\n\n    // Fall back to inference (only when no configured field). `inferValueField`\n    // already filters to numeric fields, but we still coerce here for symmetry\n    // with the configured branch above.\n    const inferred = inferValueField(row);\n    if (!inferred) return undefined;\n    const inferredValue = toNumber(row[inferred]);\n    if (inferredValue === null) return undefined;\n    return {\n      value: inferredValue,\n      max: config?.max ?? inferMaxValue(rawData, inferred) ?? undefined,\n      label: labelFromRow,\n    };\n  }, [rawData, config]);\n\n  // Downstream render uses the normalized shape. Name kept as `data` so the\n  // rest of the component body (formattedValue, handleClick, header, etc.)\n  // stays unchanged.\n  const data = normalizedData;\n\n  // Calculate percentage\n  const percentage = useMemo(() => {\n    if (!data) return 0;\n    const max = data.max || config?.max || 100;\n    return (data.value / max) * 100;\n  }, [data, config?.max]);\n\n  // Calculate target percentage\n  const targetPercentage = useMemo(() => {\n    if (!data?.target) return undefined;\n    const max = data.max || config?.max || 100;\n    return (data.target / max) * 100;\n  }, [data, config?.max]);\n\n  // Build milestones from config\n  const milestones: Milestone[] = useMemo(() => {\n    if (!config?.milestones?.length) return [];\n    return config.milestones.map((m) => ({\n      position: m.position ?? m.value ?? 0,\n      label: m.label,\n      reached: percentage >= (m.position ?? m.value ?? 0),\n    }));\n  }, [config?.milestones, percentage]);\n\n  // Determine color mode\n  const colorMode = useMemo(() => {\n    if (config?.colorMode === 'dynamic') return 'dynamic';\n    if (config?.colorMode === 'success') return 'success';\n    if (config?.colorMode === 'warning') return 'warning';\n    if (config?.colorMode === 'error') return 'error';\n    return 'default';\n  }, [config?.colorMode]);\n\n  // Format value\n  const formattedValue = useMemo(() => {\n    if (!data) return '0';\n    const format = config?.format || 'number';\n\n    switch (format) {\n      case 'currency':\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: 'USD',\n          maximumFractionDigits: 0,\n        }).format(data.value);\n      case 'compact':\n        return new Intl.NumberFormat('en-US', {\n          notation: 'compact',\n          maximumFractionDigits: 1,\n        }).format(data.value);\n      case 'number':\n      default:\n        return new Intl.NumberFormat('en-US').format(data.value);\n    }\n  }, [data, config?.format]);\n\n  const formattedMax = useMemo(() => {\n    const max = data?.max || config?.max || 100;\n    const format = config?.format || 'number';\n\n    switch (format) {\n      case 'currency':\n        return new Intl.NumberFormat('en-US', {\n          style: 'currency',\n          currency: 'USD',\n          maximumFractionDigits: 0,\n        }).format(max);\n      case 'compact':\n        return new Intl.NumberFormat('en-US', {\n          notation: 'compact',\n          maximumFractionDigits: 1,\n        }).format(max);\n      case 'number':\n      default:\n        return new Intl.NumberFormat('en-US').format(max);\n    }\n  }, [data?.max, config?.max, config?.format]);\n\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown && data) {\n      onDrilldown({\n        value: data.value,\n        max: data.max,\n        target: data.target,\n        label: data.label,\n        percentage,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, percentage]);\n\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const isClickable = Boolean(hasDrilldown || (onClick && widget.drilldowns?.length));\n\n  if (!data) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`\n          flex flex-col 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      {/* Header */}\n      <div className=\"flex items-start justify-between mb-4\">\n        <div className=\"flex-1\">\n          {data.label && <h4 className=\"text-sm font-medium text-text-primary\">{data.label}</h4>}\n          {data.description && <p className=\"text-xs text-text-secondary mt-0.5\">{data.description}</p>}\n        </div>\n\n        {/* Value display */}\n        <div className=\"text-right\">\n          <span className=\"text-2xl font-bold text-text-primary\">{formattedValue}</span>\n          {config?.showMax !== false && (\n            <span className=\"text-sm text-text-secondary\">\n              {' / '}\n              {formattedMax}\n            </span>\n          )}\n        </div>\n      </div>\n\n      {/* Progress bar */}\n      <ProgressBar\n        value={percentage}\n        target={targetPercentage}\n        milestones={milestones}\n        height={config?.barHeight || 12}\n        color={colorMode}\n        showPercentage={config?.showPercentage !== false}\n      />\n\n      {/* Target info */}\n      {data.target !== undefined && (\n        <div className=\"mt-3 flex items-center gap-2 text-xs\">\n          <svg className=\"w-4 h-4 text-text-secondary\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path d=\"M5 21V3h14l-3 9 3 9H5z\" />\n          </svg>\n          <span className=\"text-text-secondary\">\n            Target:{' '}\n            <span className=\"font-medium text-text-primary\">{new Intl.NumberFormat('en-US').format(data.target)}</span>\n            {percentage >= (targetPercentage || 0) && <span className=\"text-status-success-text ml-1\">Reached!</span>}\n          </span>\n        </div>\n      )}\n\n      {/* Drilldown indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-3 flex items-center justify-end\">\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 ProgressWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/retention/RetentionWidget.js

@@ -2,7 +2,7 @@ import { memo as e, useCallback as t, useMemo as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/retention/RetentionWidget.tsx
 function a(e) {
-	return e >= 80 ? "bg-state-success/90 text-white" : e >= 60 ? "bg-state-success/70 text-white" : e >= 40 ? "bg-state-success/50 text-text-primary" : e >= 20 ? "bg-state-success/30 text-text-primary" : e > 0 ? "bg-state-success/10 text-text-secondary" : "bg-bg-sunken text-text-secondary";
+	return e >= 80 ? "bg-status-success-bg/90 text-white" : e >= 60 ? "bg-status-success-bg/70 text-white" : e >= 40 ? "bg-status-success-bg/50 text-text-primary" : e >= 20 ? "bg-status-success-bg/30 text-text-primary" : e > 0 ? "bg-status-success-bg/10 text-text-secondary" : "bg-bg-sunken text-text-secondary";
 }
 var o = e(function({ widget: e, data: o, onClick: s }) {
 	let c = e.config, l = t((t, n, r) => {
@@ -143,7 +143,7 @@ var o = e(function({ widget: e, data: o, onClick: s }) {
 						50,
 						70,
 						90
-					].map((e) => /* @__PURE__ */ r("div", { className: `w-6 h-4 rounded bg-state-success/${e}` }, e))
+					].map((e) => /* @__PURE__ */ r("div", { className: `w-6 h-4 rounded bg-status-success-bg/${e}` }, e))
 				}),
 				/* @__PURE__ */ r("span", {
 					className: "text-xs text-text-secondary",

package/dist/bigconsole/components/widgets/retention/RetentionWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RetentionWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/retention/RetentionWidget.tsx"],"sourcesContent":["/**\n * RetentionWidget Component\n *\n * Retention cohort chart showing user retention over time.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, RetentionConfig } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface RetentionWidgetProps {\n  widget: Widget;\n  data?: RetentionData;\n  onClick?: (cohort: string, period: number, value: number) => void;\n}\n\nexport interface RetentionCohort {\n  /** Cohort identifier (e.g., \"Week 1\", \"Jan 2024\") */\n  cohort: string;\n  /** Initial cohort size */\n  initialSize: number;\n  /** Retention values for each period (percentages) */\n  values: number[];\n}\n\nexport interface RetentionData {\n  /** Period labels (e.g., [\"Day 0\", \"Day 1\", ...]) */\n  periods: string[];\n  /** Cohort data */\n  cohorts: RetentionCohort[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getRetentionColor(value: number): string {\n  // Green gradient based on retention percentage\n  if (value >= 80) return 'bg-state-success/90 text-white';\n  if (value >= 60) return 'bg-state-success/70 text-white';\n  if (value >= 40) return 'bg-state-success/50 text-text-primary';\n  if (value >= 20) return 'bg-state-success/30 text-text-primary';\n  if (value > 0) return 'bg-state-success/10 text-text-secondary';\n  return 'bg-bg-sunken text-text-secondary';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const RetentionWidget: FC<RetentionWidgetProps> = memo(function RetentionWidget({ widget, data, onClick }) {\n  const config = widget.config as unknown as RetentionConfig | undefined;\n\n  const handleCellClick = useCallback(\n    (cohort: string, periodIndex: number, value: number) => {\n      if (onClick && widget.drilldowns?.length) {\n        onClick(cohort, periodIndex, value);\n      }\n    },\n    [onClick, widget.drilldowns]\n  );\n\n  const isClickable = Boolean(onClick && widget.drilldowns?.length);\n\n  // Calculate average retention per period\n  const averages = useMemo(() => {\n    if (!data?.cohorts?.length || !data?.periods?.length) return [];\n\n    return data.periods.map((_, periodIndex) => {\n      const values = data.cohorts\n        .map((c) => c.values?.[periodIndex])\n        .filter((v) => v !== undefined && v !== null) as number[];\n      if (values.length === 0) return 0;\n      return values.reduce((a, b) => a + b, 0) / values.length;\n    });\n  }, [data]);\n\n  // Show retention-specific empty state when cohort data is missing.\n  if (!data?.cohorts?.length || !data?.periods?.length) {\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 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2\"\n            />\n          </svg>\n          <p className=\"font-medium text-text-primary\">No retention cohort data</p>\n          <p className=\"text-xs text-text-tertiary mt-1\">\n            Connect a data source that returns <span className=\"font-mono\">periods</span> and{' '}\n            <span className=\"font-mono\">cohorts</span>.\n          </p>\n          <p className=\"text-xs text-text-tertiary mt-2\">\n            Expected shape: <span className=\"font-mono\">RetentionData</span>.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full p-4 overflow-auto\">\n      <table className=\"w-full border-collapse\">\n        <thead>\n          <tr>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-left sticky left-0 bg-bg-surface\">\n              Cohort\n            </th>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-right\">Users</th>\n            {data.periods.map((period, i) => (\n              <th key={i} className=\"p-2 text-xs font-medium text-text-secondary text-center min-w-[60px]\">\n                {period}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.cohorts.map((cohort, _cohortIndex) => (\n            <tr key={cohort.cohort}>\n              <td className=\"p-2 text-sm font-medium text-text-primary text-left sticky left-0 bg-bg-surface\">\n                {cohort.cohort}\n              </td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">\n                {new Intl.NumberFormat('en-US').format(cohort.initialSize)}\n              </td>\n              {cohort.values.map((value, periodIndex) => (\n                <td\n                  key={periodIndex}\n                  className={`p-0 ${isClickable ? 'cursor-pointer' : ''}`}\n                  onClick={() => handleCellClick(cohort.cohort, periodIndex, value)}\n                >\n                  <div\n                    className={`\n                        m-0.5 p-2 rounded text-center\n                        ${getRetentionColor(value)}\n                        ${isClickable ? 'hover:ring-2 hover:ring-action-primary-bg' : ''}\n                        transition-all\n                      `}\n                    title={`${cohort.cohort} - ${data.periods[periodIndex]}: ${value.toFixed(1)}%`}\n                  >\n                    <span className=\"text-xs font-medium\">{value.toFixed(config?.decimals ?? 0)}%</span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          ))}\n\n          {/* Average row */}\n          {config?.showAverages !== false && (\n            <tr className=\"border-t-2 border-border-default\">\n              <td className=\"p-2 text-sm font-medium text-text-primary sticky left-0 bg-bg-surface\">Average</td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">—</td>\n              {averages.map((avg, i) => (\n                <td key={i} className=\"p-0\">\n                  <div className=\"m-0.5 p-2 rounded bg-bg-sunken text-center\">\n                    <span className=\"text-xs font-semibold text-text-primary\">\n                      {avg.toFixed(config?.decimals ?? 0)}%\n                    </span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          )}\n        </tbody>\n      </table>\n\n      {/* Legend */}\n      {config?.showLegend !== false && (\n        <div className=\"flex items-center justify-center gap-2 mt-4\">\n          <span className=\"text-xs text-text-secondary\">0%</span>\n          <div className=\"flex gap-0.5\">\n            {[10, 30, 50, 70, 90].map((opacity) => (\n              <div key={opacity} className={`w-6 h-4 rounded bg-state-success/${opacity}`} />\n            ))}\n          </div>\n          <span className=\"text-xs text-text-secondary\">100%</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RetentionWidget;\n"],"mappings":"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"}
+{"version":3,"file":"RetentionWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/retention/RetentionWidget.tsx"],"sourcesContent":["/**\n * RetentionWidget Component\n *\n * Retention cohort chart showing user retention over time.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, RetentionConfig } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface RetentionWidgetProps {\n  widget: Widget;\n  data?: RetentionData;\n  onClick?: (cohort: string, period: number, value: number) => void;\n}\n\nexport interface RetentionCohort {\n  /** Cohort identifier (e.g., \"Week 1\", \"Jan 2024\") */\n  cohort: string;\n  /** Initial cohort size */\n  initialSize: number;\n  /** Retention values for each period (percentages) */\n  values: number[];\n}\n\nexport interface RetentionData {\n  /** Period labels (e.g., [\"Day 0\", \"Day 1\", ...]) */\n  periods: string[];\n  /** Cohort data */\n  cohorts: RetentionCohort[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getRetentionColor(value: number): string {\n  // Green gradient based on retention percentage\n  if (value >= 80) return 'bg-status-success-bg/90 text-white';\n  if (value >= 60) return 'bg-status-success-bg/70 text-white';\n  if (value >= 40) return 'bg-status-success-bg/50 text-text-primary';\n  if (value >= 20) return 'bg-status-success-bg/30 text-text-primary';\n  if (value > 0) return 'bg-status-success-bg/10 text-text-secondary';\n  return 'bg-bg-sunken text-text-secondary';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const RetentionWidget: FC<RetentionWidgetProps> = memo(function RetentionWidget({ widget, data, onClick }) {\n  const config = widget.config as unknown as RetentionConfig | undefined;\n\n  const handleCellClick = useCallback(\n    (cohort: string, periodIndex: number, value: number) => {\n      if (onClick && widget.drilldowns?.length) {\n        onClick(cohort, periodIndex, value);\n      }\n    },\n    [onClick, widget.drilldowns]\n  );\n\n  const isClickable = Boolean(onClick && widget.drilldowns?.length);\n\n  // Calculate average retention per period\n  const averages = useMemo(() => {\n    if (!data?.cohorts?.length || !data?.periods?.length) return [];\n\n    return data.periods.map((_, periodIndex) => {\n      const values = data.cohorts\n        .map((c) => c.values?.[periodIndex])\n        .filter((v) => v !== undefined && v !== null) as number[];\n      if (values.length === 0) return 0;\n      return values.reduce((a, b) => a + b, 0) / values.length;\n    });\n  }, [data]);\n\n  // Show retention-specific empty state when cohort data is missing.\n  if (!data?.cohorts?.length || !data?.periods?.length) {\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 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2\"\n            />\n          </svg>\n          <p className=\"font-medium text-text-primary\">No retention cohort data</p>\n          <p className=\"text-xs text-text-tertiary mt-1\">\n            Connect a data source that returns <span className=\"font-mono\">periods</span> and{' '}\n            <span className=\"font-mono\">cohorts</span>.\n          </p>\n          <p className=\"text-xs text-text-tertiary mt-2\">\n            Expected shape: <span className=\"font-mono\">RetentionData</span>.\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full p-4 overflow-auto\">\n      <table className=\"w-full border-collapse\">\n        <thead>\n          <tr>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-left sticky left-0 bg-bg-surface\">\n              Cohort\n            </th>\n            <th className=\"p-2 text-xs font-medium text-text-secondary text-right\">Users</th>\n            {data.periods.map((period, i) => (\n              <th key={i} className=\"p-2 text-xs font-medium text-text-secondary text-center min-w-[60px]\">\n                {period}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.cohorts.map((cohort, _cohortIndex) => (\n            <tr key={cohort.cohort}>\n              <td className=\"p-2 text-sm font-medium text-text-primary text-left sticky left-0 bg-bg-surface\">\n                {cohort.cohort}\n              </td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">\n                {new Intl.NumberFormat('en-US').format(cohort.initialSize)}\n              </td>\n              {cohort.values.map((value, periodIndex) => (\n                <td\n                  key={periodIndex}\n                  className={`p-0 ${isClickable ? 'cursor-pointer' : ''}`}\n                  onClick={() => handleCellClick(cohort.cohort, periodIndex, value)}\n                >\n                  <div\n                    className={`\n                        m-0.5 p-2 rounded text-center\n                        ${getRetentionColor(value)}\n                        ${isClickable ? 'hover:ring-2 hover:ring-action-primary-bg' : ''}\n                        transition-all\n                      `}\n                    title={`${cohort.cohort} - ${data.periods[periodIndex]}: ${value.toFixed(1)}%`}\n                  >\n                    <span className=\"text-xs font-medium\">{value.toFixed(config?.decimals ?? 0)}%</span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          ))}\n\n          {/* Average row */}\n          {config?.showAverages !== false && (\n            <tr className=\"border-t-2 border-border-default\">\n              <td className=\"p-2 text-sm font-medium text-text-primary sticky left-0 bg-bg-surface\">Average</td>\n              <td className=\"p-2 text-sm text-text-secondary text-right\">—</td>\n              {averages.map((avg, i) => (\n                <td key={i} className=\"p-0\">\n                  <div className=\"m-0.5 p-2 rounded bg-bg-sunken text-center\">\n                    <span className=\"text-xs font-semibold text-text-primary\">\n                      {avg.toFixed(config?.decimals ?? 0)}%\n                    </span>\n                  </div>\n                </td>\n              ))}\n            </tr>\n          )}\n        </tbody>\n      </table>\n\n      {/* Legend */}\n      {config?.showLegend !== false && (\n        <div className=\"flex items-center justify-center gap-2 mt-4\">\n          <span className=\"text-xs text-text-secondary\">0%</span>\n          <div className=\"flex gap-0.5\">\n            {[10, 30, 50, 70, 90].map((opacity) => (\n              <div key={opacity} className={`w-6 h-4 rounded bg-status-success-bg/${opacity}`} />\n            ))}\n          </div>\n          <span className=\"text-xs text-text-secondary\">100%</span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default RetentionWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/states/ErrorState.js

@@ -7,7 +7,7 @@ var r = e(function({ error: e, onRetry: r }) {
 		role: "alert",
 		children: [
 			/* @__PURE__ */ t("div", {
-				className: "\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-state-error/10\n            text-state-error\n          ",
+				className: "\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-status-error-bg/10\n            text-status-error-text\n          ",
 				children: /* @__PURE__ */ t("svg", {
 					className: "w-6 h-6",
 					fill: "none",
@@ -22,7 +22,7 @@ var r = e(function({ error: e, onRetry: r }) {
 				})
 			}),
 			/* @__PURE__ */ t("p", {
-				className: "text-sm font-medium text-state-error mb-1",
+				className: "text-sm font-medium text-status-error-text mb-1",
 				children: "Failed to load data"
 			}),
 			/* @__PURE__ */ t("p", {

package/dist/bigconsole/components/widgets/states/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/states/ErrorState.tsx"],"sourcesContent":["/**\n * WidgetErrorState Component\n *\n * Error state displayed when widget data fetch fails.\n */\n\nimport { type FC, memo } from 'react';\n\nexport interface WidgetErrorStateProps {\n  /** Error message */\n  error: string;\n  /** Callback to retry loading */\n  onRetry?: () => void;\n}\n\nexport const WidgetErrorState: FC<WidgetErrorStateProps> = memo(function WidgetErrorState({ error, onRetry }) {\n  return (\n    <div\n      className=\"\n          flex flex-col items-center justify-center\n          h-full w-full min-h-[120px]\n          text-center\n          px-4\n        \"\n      role=\"alert\"\n    >\n      {/* Error Icon */}\n      <div\n        className=\"\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-state-error/10\n            text-state-error\n          \"\n      >\n        <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n          />\n        </svg>\n      </div>\n\n      {/* Error Message */}\n      <p className=\"text-sm font-medium text-state-error mb-1\">Failed to load data</p>\n      <p className=\"text-xs text-text-secondary max-w-[200px] mb-4\" title={error}>\n        {error.length > 100 ? `${error.substring(0, 100)}...` : error}\n      </p>\n\n      {/* Retry Button */}\n      {onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          className=\"\n              inline-flex items-center gap-1.5\n              px-3 py-1.5\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              rounded-md\n              transition-colors\n            \"\n        >\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n            />\n          </svg>\n          Retry\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport default WidgetErrorState;\n"],"mappings":";;;AAeA,IAAa,IAA8C,EAAK,SAA0B,EAAE,UAAO,cAAW;AAC5G,QACE,kBAAC,OAAD;EACE,WAAU;EAMV,MAAK;YAPP;GAUE,kBAAC,OAAD;IACE,WAAU;cAQV,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,KAAD;IAAG,WAAU;cAA4C;IAAuB,CAAA;GAChF,kBAAC,KAAD;IAAG,WAAU;IAAiD,OAAO;cAClE,EAAM,SAAS,MAAM,GAAG,EAAM,UAAU,GAAG,IAAI,CAAC,OAAO;IACtD,CAAA;GAGH,KACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAHZ,CAcE,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA,EAAA,QAEC;;GAEP;;EAER"}
+{"version":3,"file":"ErrorState.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/states/ErrorState.tsx"],"sourcesContent":["/**\n * WidgetErrorState Component\n *\n * Error state displayed when widget data fetch fails.\n */\n\nimport { type FC, memo } from 'react';\n\nexport interface WidgetErrorStateProps {\n  /** Error message */\n  error: string;\n  /** Callback to retry loading */\n  onRetry?: () => void;\n}\n\nexport const WidgetErrorState: FC<WidgetErrorStateProps> = memo(function WidgetErrorState({ error, onRetry }) {\n  return (\n    <div\n      className=\"\n          flex flex-col items-center justify-center\n          h-full w-full min-h-[120px]\n          text-center\n          px-4\n        \"\n      role=\"alert\"\n    >\n      {/* Error Icon */}\n      <div\n        className=\"\n            w-12 h-12 mb-3\n            flex items-center justify-center\n            rounded-full\n            bg-status-error-bg/10\n            text-status-error-text\n          \"\n      >\n        <svg className=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            strokeWidth={2}\n            d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n          />\n        </svg>\n      </div>\n\n      {/* Error Message */}\n      <p className=\"text-sm font-medium text-status-error-text mb-1\">Failed to load data</p>\n      <p className=\"text-xs text-text-secondary max-w-[200px] mb-4\" title={error}>\n        {error.length > 100 ? `${error.substring(0, 100)}...` : error}\n      </p>\n\n      {/* Retry Button */}\n      {onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          className=\"\n              inline-flex items-center gap-1.5\n              px-3 py-1.5\n              text-sm font-medium\n              text-action-primary-fg\n              bg-action-primary-bg\n              hover:bg-action-primary-bgHover\n              rounded-md\n              transition-colors\n            \"\n        >\n          <svg className=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\n            />\n          </svg>\n          Retry\n        </button>\n      )}\n    </div>\n  );\n});\n\nexport default WidgetErrorState;\n"],"mappings":";;;AAeA,IAAa,IAA8C,EAAK,SAA0B,EAAE,UAAO,cAAW;AAC5G,QACE,kBAAC,OAAD;EACE,WAAU;EAMV,MAAK;YAPP;GAUE,kBAAC,OAAD;IACE,WAAU;cAQV,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IACF,CAAA;GAGN,kBAAC,KAAD;IAAG,WAAU;cAAkD;IAAuB,CAAA;GACtF,kBAAC,KAAD;IAAG,WAAU;IAAiD,OAAO;cAClE,EAAM,SAAS,MAAM,GAAG,EAAM,UAAU,GAAG,IAAI,CAAC,OAAO;IACtD,CAAA;GAGH,KACC,kBAAC,UAAD;IACE,MAAK;IACL,SAAS;IACT,WAAU;cAHZ,CAcE,kBAAC,OAAD;KAAK,WAAU;KAAU,MAAK;KAAO,QAAO;KAAe,SAAQ;eACjE,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA,EAAA,QAEC;;GAEP;;EAER"}

package/dist/bigconsole/components/widgets/table/TableConfig.js

@@ -184,7 +184,7 @@ var s = [
 							}), /* @__PURE__ */ a("button", {
 								type: "button",
 								onClick: () => x(t),
-								className: "text-state-error hover:text-state-error/80",
+								className: "text-status-error-text hover:text-status-error-text/80",
 								children: /* @__PURE__ */ a("svg", {
 									className: "w-4 h-4",
 									fill: "none",
@@ -321,7 +321,7 @@ var s = [
 													/* @__PURE__ */ a("button", {
 														type: "button",
 														onClick: () => y(t, n),
-														className: "text-state-error hover:text-state-error/80",
+														className: "text-status-error-text hover:text-status-error-text/80",
 														"aria-label": "Remove rule",
 														children: /* @__PURE__ */ a("svg", {
 															className: "w-3.5 h-3.5",