@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/widgets/kanban/KanbanWidget.js

@@ -5,7 +5,7 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 function a(e) {
 	switch (e) {
 		case "high": return "bg-status-error-bg/20 text-status-error-text";
-		case "medium": return "bg-status-warning-bg/20 text-status-warning-text";
+		case "medium": return "bg-status-warning-bg/20 text-[var(--color-status-warning-text)]";
 		case "low": return "bg-status-success-bg/20 text-status-success-text";
 		default: return "bg-bg-sunken text-text-secondary";
 	}
@@ -135,7 +135,7 @@ var p = e(function({ widget: e, data: o, onClick: s }) {
 							children: e.title
 						}),
 						/* @__PURE__ */ r("span", {
-							className: "ml-auto text-xs text-text-tertiary",
+							className: "ml-auto text-xs text-text-muted",
 							children: t.length
 						})
 					]
@@ -162,7 +162,7 @@ var p = e(function({ widget: e, data: o, onClick: s }) {
 							})]
 						})]
 					}, e.id)), t.length === 0 && /* @__PURE__ */ r("p", {
-						className: "text-[10px] text-text-tertiary text-center py-4",
+						className: "text-[10px] text-text-muted text-center py-4",
 						children: c("bigconsole.widget.kanban.noTasks", "No tasks")
 					})]
 				})]
@@ -173,7 +173,7 @@ var p = e(function({ widget: e, data: o, onClick: s }) {
 		children: /* @__PURE__ */ i("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ r("svg", {
-				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+				className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",

package/dist/bigconsole/components/widgets/kanban/KanbanWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/kanban/KanbanWidget.tsx"],"sourcesContent":["/**\n * KanbanWidget Component\n *\n * Simple kanban board view with columns and tasks.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface KanbanWidgetProps {\n  widget: Widget;\n  data?: KanbanData;\n  onClick?: (task: KanbanTask) => void;\n}\n\nexport interface KanbanColumn {\n  id: string;\n  title: string;\n  color?: string;\n}\n\nexport interface KanbanTask {\n  id: string;\n  title: string;\n  column: string;\n  priority?: 'high' | 'medium' | 'low';\n  assignee?: string;\n  labels?: string[];\n  dueDate?: string;\n}\n\nexport interface KanbanData {\n  columns?: KanbanColumn[];\n  tasks?: KanbanTask[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getPriorityColor(priority?: string): string {\n  switch (priority) {\n    case 'high':\n      return 'bg-status-error-bg/20 text-status-error-text';\n    case 'medium':\n      return 'bg-status-warning-bg/20 text-status-warning-text';\n    case 'low':\n      return 'bg-status-success-bg/20 text-status-success-text';\n    default:\n      return 'bg-bg-sunken text-text-secondary';\n  }\n}\n\n// Field names we try, in order, when the widget config doesn't name one\n// explicitly. A DataSink/parser typically emits a flat array of rows (e.g. the\n// Linear \"Kanban board\" parser -> [{ id, title, status, assignee, ... }]), so\n// the board is derived from a status/column field on those rows.\nconst COLUMN_FIELD_CANDIDATES = ['status', 'state', 'column', 'stage', 'category', 'phase', 'group'];\nconst TITLE_FIELD_CANDIDATES = ['title', 'name', 'summary', 'label', 'identifier', 'id'];\n\nfunction asString(value: unknown): string | undefined {\n  return typeof value === 'string' && value.length > 0 ? value : undefined;\n}\n\n/** Coerce parser output into an array of object rows (handles common envelopes). */\nfunction asRows(data: unknown): Record<string, unknown>[] {\n  const onlyObjects = (arr: unknown[]): Record<string, unknown>[] =>\n    arr.filter((r): r is Record<string, unknown> => !!r && typeof r === 'object' && !Array.isArray(r));\n\n  if (Array.isArray(data)) return onlyObjects(data);\n\n  if (data && typeof data === 'object') {\n    const obj = data as Record<string, unknown>;\n    for (const key of ['tasks', 'rows', 'items', 'data', 'nodes', 'results', 'records']) {\n      if (Array.isArray(obj[key])) return onlyObjects(obj[key] as unknown[]);\n    }\n    const firstArray = Object.values(obj).find((v) => Array.isArray(v));\n    if (Array.isArray(firstArray)) return onlyObjects(firstArray);\n  }\n  return [];\n}\n\n/** First key that actually exists on the sample row. */\nfunction firstPresent(row: Record<string, unknown>, keys: (string | undefined)[]): string | undefined {\n  for (const key of keys) {\n    if (key && key in row) return key;\n  }\n  return undefined;\n}\n\nfunction normalizePriority(value: unknown): KanbanTask['priority'] {\n  const v = asString(value)?.toLowerCase();\n  if (!v) return undefined;\n  if (v === 'urgent' || v === 'high') return 'high';\n  if (v === 'medium' || v === 'normal') return 'medium';\n  if (v === 'low') return 'low';\n  return undefined;\n}\n\n/**\n * Normalize widget data into the board's { columns, tasks } shape.\n *\n * KanbanWidget previously required the exact canonical shape and rendered\n * \"No board data\" for any DataSink/parser output that was a plain array of\n * rows (which is what parsers actually emit) — BOFF-4110. This adapts a flat\n * array into columns (distinct values of a status/column field, in first-seen\n * order) plus one card per row, honoring config field mappings with fallbacks.\n */\nfunction normalizeKanban(\n  data: unknown,\n  config?: Record<string, unknown>\n): { columns: KanbanColumn[]; tasks: KanbanTask[] } {\n  // Canonical shape passes through untouched (back-compat).\n  if (data && typeof data === 'object' && !Array.isArray(data) && Array.isArray((data as KanbanData).columns)) {\n    const d = data as KanbanData;\n    return { columns: d.columns ?? [], tasks: d.tasks ?? [] };\n  }\n\n  const rows = asRows(data);\n  if (rows.length === 0) return { columns: [], tasks: [] };\n\n  const sample = rows[0];\n  const columnField = firstPresent(sample, [\n    asString(config?.columnField),\n    asString(config?.groupField),\n    asString(config?.statusField),\n    ...COLUMN_FIELD_CANDIDATES,\n    asString(config?.xAxisField),\n    asString(config?.labelField),\n  ]);\n  if (!columnField) return { columns: [], tasks: [] };\n\n  const titleField = firstPresent(sample, [\n    asString(config?.cardTitleField),\n    asString(config?.titleField),\n    ...TITLE_FIELD_CANDIDATES,\n    asString(config?.labelField),\n  ]);\n\n  const columnTitles: Record<string, string> = {};\n  const columnOrder: string[] = [];\n  const tasks: KanbanTask[] = rows.map((row, i) => {\n    const columnRaw = row[columnField];\n    const column = columnRaw == null || columnRaw === '' ? 'Uncategorized' : String(columnRaw);\n    if (!(column in columnTitles)) {\n      columnTitles[column] = column;\n      columnOrder.push(column);\n    }\n    const idRaw = row.id ?? row.identifier ?? row.key;\n    const labels = Array.isArray(row.labels) ? row.labels.filter((l): l is string => typeof l === 'string') : undefined;\n    return {\n      id: idRaw != null ? String(idRaw) : `task-${i}`,\n      title: titleField && row[titleField] != null ? String(row[titleField]) : `Item ${i + 1}`,\n      column,\n      assignee: asString(row.assignee),\n      priority: normalizePriority(row.priority ?? row.priorityLabel),\n      labels: labels && labels.length > 0 ? labels : undefined,\n    };\n  });\n\n  const columns: KanbanColumn[] = columnOrder.map((id) => ({ id, title: columnTitles[id] ?? id }));\n  return { columns, tasks };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const KanbanWidget: FC<KanbanWidgetProps> = memo(function KanbanWidget({ widget, data, onClick }) {\n  const { t } = useI18n();\n  const config = widget.config as Record<string, unknown> | undefined;\n  const { columns, tasks } = useMemo(() => normalizeKanban(data, config), [data, config]);\n\n  // Group tasks by column\n  const tasksByColumn = useMemo(() => {\n    const grouped: Record<string, KanbanTask[]> = {};\n    columns.forEach((col) => {\n      grouped[col.id] = tasks.filter((t) => t.column === col.id);\n    });\n    return grouped;\n  }, [columns, tasks]);\n\n  if (!columns.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>{t('bigconsole.widget.kanban.emptyState', 'No board data')}</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full p-2 gap-2 overflow-x-auto\">\n      {columns.map((column) => {\n        const columnTasks = tasksByColumn[column.id] || [];\n\n        return (\n          <div key={column.id} className=\"flex-shrink-0 w-48 flex flex-col bg-bg-sunken/50 rounded-lg\">\n            {/* Column Header */}\n            <div className=\"flex items-center gap-2 p-2 border-b border-border-default\">\n              <div\n                className=\"w-2 h-2 rounded-full\"\n                style={{ backgroundColor: column.color || 'var(--color-text-muted)' }}\n              />\n              <span className=\"text-xs font-medium text-text-primary truncate\">{column.title}</span>\n              <span className=\"ml-auto text-xs text-text-tertiary\">{columnTasks.length}</span>\n            </div>\n\n            {/* Tasks */}\n            <div className=\"flex-1 p-2 space-y-2 overflow-y-auto\">\n              {columnTasks.map((task) => (\n                <div\n                  key={task.id}\n                  className={`\n                      p-2 bg-bg-surface rounded border border-border-default\n                      ${onClick ? 'cursor-pointer hover:border-action-primary-bg' : ''}\n                      transition-colors\n                    `}\n                  onClick={() => onClick?.(task)}\n                >\n                  <p className=\"text-xs font-medium text-text-primary line-clamp-2\">{task.title}</p>\n\n                  <div className=\"flex items-center gap-1 mt-2 flex-wrap\">\n                    {task.priority && (\n                      <span className={`px-1.5 py-0.5 text-[10px] rounded ${getPriorityColor(task.priority)}`}>\n                        {task.priority}\n                      </span>\n                    )}\n                    {task.assignee && (\n                      <span className=\"px-1.5 py-0.5 text-[10px] rounded bg-action-primary-bg/10 text-action-primary-text\">\n                        {task.assignee}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              ))}\n\n              {columnTasks.length === 0 && (\n                <p className=\"text-[10px] text-text-tertiary text-center py-4\">\n                  {t('bigconsole.widget.kanban.noTasks', 'No tasks')}\n                </p>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default KanbanWidget;\n"],"mappings":"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"}
+{"version":3,"file":"KanbanWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/kanban/KanbanWidget.tsx"],"sourcesContent":["/**\n * KanbanWidget Component\n *\n * Simple kanban board view with columns and tasks.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface KanbanWidgetProps {\n  widget: Widget;\n  data?: KanbanData;\n  onClick?: (task: KanbanTask) => void;\n}\n\nexport interface KanbanColumn {\n  id: string;\n  title: string;\n  color?: string;\n}\n\nexport interface KanbanTask {\n  id: string;\n  title: string;\n  column: string;\n  priority?: 'high' | 'medium' | 'low';\n  assignee?: string;\n  labels?: string[];\n  dueDate?: string;\n}\n\nexport interface KanbanData {\n  columns?: KanbanColumn[];\n  tasks?: KanbanTask[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getPriorityColor(priority?: string): string {\n  switch (priority) {\n    case 'high':\n      return 'bg-status-error-bg/20 text-status-error-text';\n    case 'medium':\n      return 'bg-status-warning-bg/20 text-[var(--color-status-warning-text)]';\n    case 'low':\n      return 'bg-status-success-bg/20 text-status-success-text';\n    default:\n      return 'bg-bg-sunken text-text-secondary';\n  }\n}\n\n// Field names we try, in order, when the widget config doesn't name one\n// explicitly. A DataSink/parser typically emits a flat array of rows (e.g. the\n// Linear \"Kanban board\" parser -> [{ id, title, status, assignee, ... }]), so\n// the board is derived from a status/column field on those rows.\nconst COLUMN_FIELD_CANDIDATES = ['status', 'state', 'column', 'stage', 'category', 'phase', 'group'];\nconst TITLE_FIELD_CANDIDATES = ['title', 'name', 'summary', 'label', 'identifier', 'id'];\n\nfunction asString(value: unknown): string | undefined {\n  return typeof value === 'string' && value.length > 0 ? value : undefined;\n}\n\n/** Coerce parser output into an array of object rows (handles common envelopes). */\nfunction asRows(data: unknown): Record<string, unknown>[] {\n  const onlyObjects = (arr: unknown[]): Record<string, unknown>[] =>\n    arr.filter((r): r is Record<string, unknown> => !!r && typeof r === 'object' && !Array.isArray(r));\n\n  if (Array.isArray(data)) return onlyObjects(data);\n\n  if (data && typeof data === 'object') {\n    const obj = data as Record<string, unknown>;\n    for (const key of ['tasks', 'rows', 'items', 'data', 'nodes', 'results', 'records']) {\n      if (Array.isArray(obj[key])) return onlyObjects(obj[key] as unknown[]);\n    }\n    const firstArray = Object.values(obj).find((v) => Array.isArray(v));\n    if (Array.isArray(firstArray)) return onlyObjects(firstArray);\n  }\n  return [];\n}\n\n/** First key that actually exists on the sample row. */\nfunction firstPresent(row: Record<string, unknown>, keys: (string | undefined)[]): string | undefined {\n  for (const key of keys) {\n    if (key && key in row) return key;\n  }\n  return undefined;\n}\n\nfunction normalizePriority(value: unknown): KanbanTask['priority'] {\n  const v = asString(value)?.toLowerCase();\n  if (!v) return undefined;\n  if (v === 'urgent' || v === 'high') return 'high';\n  if (v === 'medium' || v === 'normal') return 'medium';\n  if (v === 'low') return 'low';\n  return undefined;\n}\n\n/**\n * Normalize widget data into the board's { columns, tasks } shape.\n *\n * KanbanWidget previously required the exact canonical shape and rendered\n * \"No board data\" for any DataSink/parser output that was a plain array of\n * rows (which is what parsers actually emit) — BOFF-4110. This adapts a flat\n * array into columns (distinct values of a status/column field, in first-seen\n * order) plus one card per row, honoring config field mappings with fallbacks.\n */\nfunction normalizeKanban(\n  data: unknown,\n  config?: Record<string, unknown>\n): { columns: KanbanColumn[]; tasks: KanbanTask[] } {\n  // Canonical shape passes through untouched (back-compat).\n  if (data && typeof data === 'object' && !Array.isArray(data) && Array.isArray((data as KanbanData).columns)) {\n    const d = data as KanbanData;\n    return { columns: d.columns ?? [], tasks: d.tasks ?? [] };\n  }\n\n  const rows = asRows(data);\n  if (rows.length === 0) return { columns: [], tasks: [] };\n\n  const sample = rows[0];\n  const columnField = firstPresent(sample, [\n    asString(config?.columnField),\n    asString(config?.groupField),\n    asString(config?.statusField),\n    ...COLUMN_FIELD_CANDIDATES,\n    asString(config?.xAxisField),\n    asString(config?.labelField),\n  ]);\n  if (!columnField) return { columns: [], tasks: [] };\n\n  const titleField = firstPresent(sample, [\n    asString(config?.cardTitleField),\n    asString(config?.titleField),\n    ...TITLE_FIELD_CANDIDATES,\n    asString(config?.labelField),\n  ]);\n\n  const columnTitles: Record<string, string> = {};\n  const columnOrder: string[] = [];\n  const tasks: KanbanTask[] = rows.map((row, i) => {\n    const columnRaw = row[columnField];\n    const column = columnRaw == null || columnRaw === '' ? 'Uncategorized' : String(columnRaw);\n    if (!(column in columnTitles)) {\n      columnTitles[column] = column;\n      columnOrder.push(column);\n    }\n    const idRaw = row.id ?? row.identifier ?? row.key;\n    const labels = Array.isArray(row.labels) ? row.labels.filter((l): l is string => typeof l === 'string') : undefined;\n    return {\n      id: idRaw != null ? String(idRaw) : `task-${i}`,\n      title: titleField && row[titleField] != null ? String(row[titleField]) : `Item ${i + 1}`,\n      column,\n      assignee: asString(row.assignee),\n      priority: normalizePriority(row.priority ?? row.priorityLabel),\n      labels: labels && labels.length > 0 ? labels : undefined,\n    };\n  });\n\n  const columns: KanbanColumn[] = columnOrder.map((id) => ({ id, title: columnTitles[id] ?? id }));\n  return { columns, tasks };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const KanbanWidget: FC<KanbanWidgetProps> = memo(function KanbanWidget({ widget, data, onClick }) {\n  const { t } = useI18n();\n  const config = widget.config as Record<string, unknown> | undefined;\n  const { columns, tasks } = useMemo(() => normalizeKanban(data, config), [data, config]);\n\n  // Group tasks by column\n  const tasksByColumn = useMemo(() => {\n    const grouped: Record<string, KanbanTask[]> = {};\n    columns.forEach((col) => {\n      grouped[col.id] = tasks.filter((t) => t.column === col.id);\n    });\n    return grouped;\n  }, [columns, tasks]);\n\n  if (!columns.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 className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 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>{t('bigconsole.widget.kanban.emptyState', 'No board data')}</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex h-full p-2 gap-2 overflow-x-auto\">\n      {columns.map((column) => {\n        const columnTasks = tasksByColumn[column.id] || [];\n\n        return (\n          <div key={column.id} className=\"flex-shrink-0 w-48 flex flex-col bg-bg-sunken/50 rounded-lg\">\n            {/* Column Header */}\n            <div className=\"flex items-center gap-2 p-2 border-b border-border-default\">\n              <div\n                className=\"w-2 h-2 rounded-full\"\n                style={{ backgroundColor: column.color || 'var(--color-text-muted)' }}\n              />\n              <span className=\"text-xs font-medium text-text-primary truncate\">{column.title}</span>\n              <span className=\"ml-auto text-xs text-text-muted\">{columnTasks.length}</span>\n            </div>\n\n            {/* Tasks */}\n            <div className=\"flex-1 p-2 space-y-2 overflow-y-auto\">\n              {columnTasks.map((task) => (\n                <div\n                  key={task.id}\n                  className={`\n                      p-2 bg-bg-surface rounded border border-border-default\n                      ${onClick ? 'cursor-pointer hover:border-action-primary-bg' : ''}\n                      transition-colors\n                    `}\n                  onClick={() => onClick?.(task)}\n                >\n                  <p className=\"text-xs font-medium text-text-primary line-clamp-2\">{task.title}</p>\n\n                  <div className=\"flex items-center gap-1 mt-2 flex-wrap\">\n                    {task.priority && (\n                      <span className={`px-1.5 py-0.5 text-[10px] rounded ${getPriorityColor(task.priority)}`}>\n                        {task.priority}\n                      </span>\n                    )}\n                    {task.assignee && (\n                      <span className=\"px-1.5 py-0.5 text-[10px] rounded bg-action-primary-bg/10 text-action-primary-text\">\n                        {task.assignee}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              ))}\n\n              {columnTasks.length === 0 && (\n                <p className=\"text-[10px] text-text-muted text-center py-4\">\n                  {t('bigconsole.widget.kanban.noTasks', 'No tasks')}\n                </p>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n\nexport default KanbanWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.js

@@ -1,8 +1,10 @@
 import { conditionalStyleToClassName as e, resolveConditionalStyle as t } from "../utils/conditionalFormat.js";
-import { memo as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import n from "../metric-card/SparklineChart.js";
+import { clampProgressWidth as r, getTargetProgress as i } from "../utils/targetProgress.js";
+import { memo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.tsx
-function a(e, t) {
+function c(e, t) {
 	return t === "$" ? new Intl.NumberFormat("en-US", {
 		style: "currency",
 		currency: "USD",
@@ -13,21 +15,59 @@ function a(e, t) {
 		maximumFractionDigits: 1
 	}).format(e);
 }
-function o(e, t) {
-	return !e || e === "stable" ? "text-text-secondary" : e === "up" && (t ?? 0) >= 0 ? "text-status-success-text" : e === "down" && (t ?? 0) < 0 ? "text-status-error-text" : "text-text-secondary";
+function l(e, t) {
+	if (e !== "up" && e !== "down") return null;
+	let n = e === "up";
+	return t ? n : !n;
 }
-function s(e) {
+function u(e, t) {
+	let n = l(e, t);
+	return n === null ? "text-text-secondary" : n ? "text-status-success-text" : "text-status-error-text";
+}
+function d(e, t) {
+	let n = l(e, t);
+	return n === null ? "primary" : n ? "success" : "error";
+}
+var f = [
+	"sparklineData",
+	"sparkline",
+	"trendSeries",
+	"history",
+	"series"
+], p = 2;
+function m(e) {
+	if (!Array.isArray(e) || e.length === 0) return;
+	let t = e.reduce((e, t) => {
+		if (typeof t == "number" && Number.isFinite(t)) return e.push({ value: t }), e;
+		if (t && typeof t == "object") {
+			let n = t, r = n.value;
+			typeof r == "number" && Number.isFinite(r) && e.push({
+				value: r,
+				timestamp: typeof n.timestamp == "string" ? n.timestamp : void 0
+			});
+		}
+		return e;
+	}, []);
+	return t.length >= p ? t : void 0;
+}
+function h(e) {
+	for (let t of f) {
+		let n = m(e[t]);
+		if (n) return n;
+	}
+}
+function g(e) {
 	return e === "up" ? "↑" : e === "down" ? "↓" : "→";
 }
-var c = n(function({ widget: n, data: c, onClick: l, onDrilldown: u }) {
-	let d = !!n.drilldown?.enabled, f = n.config, p = f?.conditionalRules, m = [], h = f?.valueField || f?.value_field || "value", g = f?.labelField || f?.label_field || "label", _ = (e) => Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
+var _ = a(function({ widget: a, data: l, onClick: f, onDrilldown: p }) {
+	let m = !!a.drilldown?.enabled, _ = a.config, v = _?.conditionalRules, y = [], b = _?.valueField || _?.value_field || "value", x = _?.labelField || _?.label_field || "label", S = (e) => Object.entries(e).filter(([, e]) => typeof e == "number").map(([e, t]) => ({
 		id: e,
 		label: e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()),
 		value: t,
 		unit: e.toLowerCase().includes("sales") || e.toLowerCase().includes("revenue") || e.toLowerCase().includes("value") ? "$" : void 0
-	})), v = (e, t) => {
+	})), C = (e, t) => {
 		let n = [
-			h,
+			b,
 			"value",
 			"revenue",
 			"amount",
@@ -52,7 +92,7 @@ var c = n(function({ widget: n, data: c, onClick: l, onDrilldown: u }) {
 		}
 		if (r === null) return null;
 		let i = [
-			g,
+			x,
 			"label",
 			"name",
 			"title",
@@ -69,24 +109,25 @@ var c = n(function({ widget: n, data: c, onClick: l, onDrilldown: u }) {
 			id: `kpi-${t}`,
 			label: a,
 			value: r,
-			unit: h.toLowerCase().includes("revenue") || h.toLowerCase().includes("sales") ? "$" : void 0,
+			unit: b.toLowerCase().includes("revenue") || b.toLowerCase().includes("sales") ? "$" : void 0,
 			trend: s,
-			trendValue: typeof o == "number" ? o : void 0
+			trendValue: typeof o == "number" ? o : void 0,
+			sparklineData: h(e)
 		};
 	};
-	if (c?.kpis && Array.isArray(c.kpis)) m = c.kpis;
-	else if (Array.isArray(c) && c.length > 0) {
-		for (let e = 0; e < Math.min(c.length, 4); e++) {
-			let t = c[e];
+	if (l?.kpis && Array.isArray(l.kpis)) y = l.kpis;
+	else if (Array.isArray(l) && l.length > 0) {
+		for (let e = 0; e < l.length; e++) {
+			let t = l[e];
 			if (t && typeof t == "object") {
-				let n = v(t, e);
-				n && m.push(n);
+				let n = C(t, e);
+				n && y.push(n);
 			}
 		}
-		if (m.length === 0 && c.length > 0) {
-			let e = c[0];
-			m = Object.entries(e).filter(([, e]) => typeof e == "number").slice(0, 4).map(([e]) => {
-				let t = c.reduce((t, n) => {
+		if (y.length === 0 && l.length > 0) {
+			let e = l[0];
+			y = Object.entries(e).filter(([, e]) => typeof e == "number").map(([e]) => {
+				let t = l.reduce((t, n) => {
 					let r = n[e];
 					return t + (typeof r == "number" ? r : 0);
 				}, 0);
@@ -98,95 +139,117 @@ var c = n(function({ widget: n, data: c, onClick: l, onDrilldown: u }) {
 				};
 			});
 		}
-	} else if (typeof c == "number" || typeof c == "string") {
-		let e = typeof c == "string" ? parseFloat(c) : c;
-		isNaN(e) || (m = [{
+	} else if (typeof l == "number" || typeof l == "string") {
+		let e = typeof l == "string" ? parseFloat(l) : l;
+		isNaN(e) || (y = [{
 			id: "primary",
-			label: (f?.subtitle || n.title || "Value").trim(),
+			label: (_?.subtitle || a.title || "Value").trim(),
 			value: e,
-			unit: f?.format === "currency" ? "$" : f?.format === "percent" ? "%" : void 0
+			unit: _?.format === "currency" ? "$" : _?.format === "percentage" || _?.format === "percent" ? "%" : void 0
 		}]);
-	} else if (c && typeof c == "object" && !Array.isArray(c)) {
-		let e = c;
-		"summary" in e && e.summary && typeof e.summary == "object" && (m = _(e.summary)), m.length === 0 && (m = _(e));
+	} else if (l && typeof l == "object" && !Array.isArray(l)) {
+		let e = l;
+		"summary" in e && e.summary && typeof e.summary == "object" && (y = S(e.summary)), y.length === 0 && (y = S(e));
 	}
-	return m.length ? /* @__PURE__ */ r("div", {
+	let w = _?.maxKpis, T = typeof w == "number" && Number.isFinite(w) ? Math.floor(w) : NaN, E = T >= 1 ? T : void 0, D = y.length, O = E === void 0 ? y : y.slice(0, E), k = D - O.length, A = typeof _?.showSparkline == "boolean" ? _.showSparkline : typeof _?.showSparklines == "boolean" ? _.showSparklines : !0, j = _?.positiveIsGood !== !1;
+	return y.length ? /* @__PURE__ */ s("div", {
 		className: "h-full p-4 overflow-auto",
-		children: /* @__PURE__ */ r("div", {
+		children: [/* @__PURE__ */ o("div", {
 			className: "grid grid-cols-2 gap-3",
-			children: m.map((n) => /* @__PURE__ */ i("div", {
-				className: `
+			children: O.map((a, l) => {
+				let h = i(a.value, a.target);
+				return /* @__PURE__ */ s("div", {
+					className: `
                 p-3 rounded-lg border border-border-default bg-bg-sunken/30
-                ${l || d ? "cursor-pointer hover:border-action-primary-bg transition-colors" : ""}
+                ${f || m ? "cursor-pointer hover:border-action-primary-bg transition-colors" : ""}
               `,
-				onClick: () => {
-					d && u && u({
-						kpiId: n.id,
-						kpiLabel: n.label,
-						kpiValue: n.value,
-						kpiUnit: n.unit,
-						kpiTrend: n.trend,
-						kpiTrendValue: n.trendValue,
-						kpiTarget: n.target,
-						kpiPreviousValue: n.previousValue
-					}), l?.(n);
-				},
-				children: [
-					/* @__PURE__ */ r("p", {
-						className: "text-xs text-text-secondary truncate mb-1",
-						children: n.label
-					}),
-					/* @__PURE__ */ r("p", {
-						className: `text-xl font-semibold ${e(t(n.value, p, {
-							[n.label]: n.value,
-							value: n.value
-						})) || "text-text-primary"}`,
-						children: a(n.value, n.unit)
-					}),
-					n.trendValue !== void 0 && /* @__PURE__ */ i("div", {
-						className: `flex items-center gap-1 mt-1 text-xs ${o(n.trend, n.trendValue)}`,
-						children: [/* @__PURE__ */ r("span", { children: s(n.trend) }), /* @__PURE__ */ i("span", { children: [
-							n.trendValue >= 0 ? "+" : "",
-							n.trendValue.toFixed(1),
-							"%"
-						] })]
-					}),
-					n.target !== void 0 && /* @__PURE__ */ i("div", {
-						className: "mt-2",
-						children: [/* @__PURE__ */ i("div", {
-							className: "flex justify-between text-[10px] text-text-tertiary mb-0.5",
-							children: [/* @__PURE__ */ r("span", { children: "vs target" }), /* @__PURE__ */ i("span", { children: [(n.value / n.target * 100).toFixed(0), "%"] })]
-						}), /* @__PURE__ */ r("div", {
-							className: "h-1 bg-bg-sunken rounded-full overflow-hidden",
-							children: /* @__PURE__ */ r("div", {
-								className: `h-full rounded-full ${n.value >= n.target ? "bg-status-success-bg" : "bg-action-primary-bg"}`,
-								style: { width: `${Math.min(n.value / n.target * 100, 100)}%` }
+					onClick: () => {
+						m && p && p({
+							kpiId: a.id,
+							kpiLabel: a.label,
+							kpiValue: a.value,
+							kpiUnit: a.unit,
+							kpiTrend: a.trend,
+							kpiTrendValue: a.trendValue,
+							kpiTarget: a.target,
+							kpiPreviousValue: a.previousValue
+						}), f?.(a);
+					},
+					children: [
+						/* @__PURE__ */ o("p", {
+							className: "text-xs text-text-secondary truncate mb-1",
+							children: a.label
+						}),
+						/* @__PURE__ */ o("p", {
+							className: `text-xl font-semibold ${e(t(a.value, v, {
+								[a.label]: a.value,
+								value: a.value
+							})) || "text-text-primary"}`,
+							children: c(a.value, a.unit)
+						}),
+						a.trendValue !== void 0 && /* @__PURE__ */ s("div", {
+							className: `flex items-center gap-1 mt-1 text-xs ${u(a.trend, j)}`,
+							children: [/* @__PURE__ */ o("span", { children: g(a.trend) }), /* @__PURE__ */ s("span", { children: [
+								a.trendValue >= 0 ? "+" : "",
+								a.trendValue.toFixed(1),
+								"%"
+							] })]
+						}),
+						A && a.sparklineData && a.sparklineData.length > 0 && /* @__PURE__ */ o("div", {
+							className: "mt-2",
+							children: /* @__PURE__ */ o(n, {
+								data: a.sparklineData,
+								width: 120,
+								height: 28,
+								color: d(a.trend, j)
 							})
-						})]
-					})
-				]
-			}, n.id))
-		})
-	}) : /* @__PURE__ */ r("div", {
+						}),
+						h !== null && /* @__PURE__ */ s("div", {
+							className: "mt-2",
+							children: [/* @__PURE__ */ s("div", {
+								className: "flex justify-between text-[10px] text-text-muted mb-0.5",
+								children: [/* @__PURE__ */ o("span", { children: "vs target" }), /* @__PURE__ */ s("span", { children: [h.toFixed(0), "%"] })]
+							}), /* @__PURE__ */ o("div", {
+								className: "h-1 bg-bg-sunken rounded-full overflow-hidden",
+								children: /* @__PURE__ */ o("div", {
+									className: `h-full rounded-full ${a.target !== void 0 && a.value >= a.target ? "bg-status-success-bg" : "bg-action-primary-bg"}`,
+									style: { width: `${r(h)}%` }
+								})
+							})]
+						})
+					]
+				}, a.id ?? `kpi-${l}`);
+			})
+		}), k > 0 && /* @__PURE__ */ s("p", {
+			className: "mt-2 text-xs text-text-tertiary text-center",
+			children: [
+				"+",
+				k,
+				" more ",
+				k === 1 ? "KPI" : "KPIs",
+				" hidden"
+			]
+		})]
+	}) : /* @__PURE__ */ o("div", {
 		className: "flex items-center justify-center h-full text-text-secondary text-sm",
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: "text-center",
-			children: [/* @__PURE__ */ r("svg", {
-				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+			children: [/* @__PURE__ */ o("svg", {
+				className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ r("path", {
+				children: /* @__PURE__ */ o("path", {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5,
 					d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
 				})
-			}), /* @__PURE__ */ r("p", { children: "No KPI data" })]
+			}), /* @__PURE__ */ o("p", { children: "No KPI data" })]
 		})
 	});
 });
 //#endregion
-export { c as default };
+export { _ as default };
 
 //# sourceMappingURL=KPIComparisonWidget.js.map

package/dist/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"KPIComparisonWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.tsx"],"sourcesContent":["/**\n * KPIComparisonWidget Component\n *\n * Displays multiple KPIs in a grid for comparison.\n */\n\nimport { type FC, memo } from 'react';\nimport type { Widget } from '../../../types';\nimport { type ConditionalRule, resolveConditionalStyle, conditionalStyleToClassName } from '../utils/conditionalFormat';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface KPIComparisonWidgetProps {\n  widget: Widget;\n  data?: KPIComparisonData;\n  onClick?: (kpi: KPIItem) => void;\n  onDrilldown?: (data: Record<string, unknown>) => void;\n}\n\nexport interface KPIItem {\n  id: string;\n  label: string;\n  value: number;\n  previousValue?: number;\n  target?: number;\n  unit?: string;\n  trend?: 'up' | 'down' | 'stable';\n  trendValue?: number;\n}\n\nexport interface KPIComparisonData {\n  kpis?: KPIItem[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction formatValue(value: number, unit?: string): string {\n  if (unit === '$') {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 1,\n    }).format(value);\n  }\n  if (unit === '%') {\n    return `${value.toFixed(1)}%`;\n  }\n  return new Intl.NumberFormat('en-US', {\n    notation: value >= 10000 ? 'compact' : 'standard',\n    maximumFractionDigits: 1,\n  }).format(value);\n}\n\nfunction getTrendColor(trend?: string, trendValue?: number): string {\n  if (!trend || trend === 'stable') return 'text-text-secondary';\n  if (trend === 'up' && (trendValue ?? 0) >= 0) return 'text-status-success-text';\n  if (trend === 'down' && (trendValue ?? 0) < 0) return 'text-status-error-text';\n  return 'text-text-secondary';\n}\n\nfunction getTrendIcon(trend?: string): string {\n  if (trend === 'up') return '↑';\n  if (trend === 'down') return '↓';\n  return '→';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const KPIComparisonWidget: FC<KPIComparisonWidgetProps> = memo(function KPIComparisonWidget({\n  widget,\n  data,\n  onClick,\n  onDrilldown,\n}) {\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const config = widget.config as Record<string, unknown> | undefined;\n  const conditionalRules = config?.conditionalRules as ConditionalRule[] | undefined;\n\n  // Build KPIs array from data\n  // Support multiple formats:\n  // 1. data.kpis array (standard format)\n  // 2. Single value from data.processed (e.g., 125000 from DataSink)\n  // 3. data is a number/string directly\n  // 4. Nested summary object (e.g., {sales: [...], summary: {totalSales: 123}})\n  // 5. Array of objects from DataSink (e.g., [{month: \"Jan\", revenue: 45000}, ...])\n  let kpis: KPIItem[] = [];\n\n  // Get configured value field from widget config (for DataSink data)\n  const valueField = (config?.valueField as string) || (config?.value_field as string) || 'value';\n  const labelField = (config?.labelField as string) || (config?.label_field as string) || 'label';\n\n  // Helper to convert object with numeric values to KPIs\n  const objectToKpis = (obj: Record<string, unknown>): KPIItem[] => {\n    const entries = Object.entries(obj);\n    return entries\n      .filter(([, v]) => typeof v === 'number')\n      .map(([key, value]) => ({\n        id: key,\n        label: key.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),\n        value: value as number,\n        unit:\n          key.toLowerCase().includes('sales') ||\n          key.toLowerCase().includes('revenue') ||\n          key.toLowerCase().includes('value')\n            ? '$'\n            : undefined,\n      }));\n  };\n\n  // Helper to extract KPI from a single data row using config fields\n  const extractKpiFromRow = (row: Record<string, unknown>, index: number): KPIItem | null => {\n    // Try to get value from configured field or common field names\n    const valueCandidates = [valueField, 'value', 'revenue', 'amount', 'total', 'count', 'sales', 'growth'];\n    let value: number | null = null;\n\n    for (const field of valueCandidates) {\n      if (typeof row[field] === 'number') {\n        value = row[field] as number;\n        break;\n      }\n      if (typeof row[field] === 'string' && !isNaN(parseFloat(row[field] as string))) {\n        value = parseFloat(row[field] as string);\n        break;\n      }\n    }\n\n    if (value === null) {\n      // Try to find any numeric field\n      const numericEntry = Object.entries(row).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        value = numericEntry[1] as number;\n      }\n    }\n\n    if (value === null) return null;\n\n    // Try to get label from configured field or common field names\n    const labelCandidates = [labelField, 'label', 'name', 'title', 'month', 'region', 'category'];\n    let label = `Item ${index + 1}`;\n\n    for (const field of labelCandidates) {\n      if (row[field] && typeof row[field] === 'string') {\n        label = row[field] as string;\n        break;\n      }\n    }\n\n    // Check for growth/trend fields\n    const growthValue = row.growth ?? row.change ?? row.trend ?? row.percentChange;\n    const trend =\n      typeof growthValue === 'number' ? (growthValue > 0 ? 'up' : growthValue < 0 ? 'down' : 'stable') : undefined;\n\n    return {\n      id: `kpi-${index}`,\n      label,\n      value,\n      unit:\n        valueField.toLowerCase().includes('revenue') || valueField.toLowerCase().includes('sales') ? '$' : undefined,\n      trend: trend as 'up' | 'down' | 'stable' | undefined,\n      trendValue: typeof growthValue === 'number' ? growthValue : undefined,\n    };\n  };\n\n  if (data?.kpis && Array.isArray(data.kpis)) {\n    // Standard KPIs array\n    kpis = data.kpis;\n  } else if (Array.isArray(data) && data.length > 0) {\n    // NEW: Handle array of objects from DataSink\n    // Extract KPIs from each row, up to 4 items for display\n    const maxKpis = 4;\n    for (let i = 0; i < Math.min(data.length, maxKpis); i++) {\n      const row = data[i] as Record<string, unknown>;\n      if (row && typeof row === 'object') {\n        const kpi = extractKpiFromRow(row, i);\n        if (kpi) kpis.push(kpi);\n      }\n    }\n\n    // If we couldn't extract KPIs from rows, try to aggregate numeric fields\n    if (kpis.length === 0 && data.length > 0) {\n      const firstRow = data[0] as Record<string, unknown>;\n      const numericFields = Object.entries(firstRow).filter(([, v]) => typeof v === 'number');\n\n      // Create KPIs by aggregating (summing) each numeric field across all rows\n      kpis = numericFields.slice(0, maxKpis).map(([field]) => {\n        const sum = data.reduce((acc, row) => {\n          const val = (row as Record<string, unknown>)[field];\n          return acc + (typeof val === 'number' ? val : 0);\n        }, 0);\n\n        return {\n          id: field,\n          label: field.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),\n          value: sum,\n          unit: field.toLowerCase().includes('revenue') || field.toLowerCase().includes('sales') ? '$' : undefined,\n        };\n      });\n    }\n  } else if (typeof data === 'number' || typeof data === 'string') {\n    // Single value - create a KPI from it using widget config\n    const value = typeof data === 'string' ? parseFloat(data) : data;\n    if (!isNaN(value)) {\n      kpis = [\n        {\n          id: 'primary',\n          label: ((config?.subtitle as string) || widget.title || 'Value').trim(),\n          value,\n          unit: config?.format === 'currency' ? '$' : config?.format === 'percent' ? '%' : undefined,\n        },\n      ];\n    }\n  } else if (data && typeof data === 'object' && !Array.isArray(data)) {\n    const dataObj = data as Record<string, unknown>;\n\n    // First, check if there's a nested 'summary' object with numeric values\n    if ('summary' in dataObj && dataObj.summary && typeof dataObj.summary === 'object') {\n      kpis = objectToKpis(dataObj.summary as Record<string, unknown>);\n    }\n\n    // If no KPIs from summary, try top-level numeric values\n    if (kpis.length === 0) {\n      kpis = objectToKpis(dataObj);\n    }\n  }\n\n  if (!kpis.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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n            />\n          </svg>\n          <p>No KPI data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full p-4 overflow-auto\">\n      <div className=\"grid grid-cols-2 gap-3\">\n        {kpis.map((kpi) => (\n          <div\n            key={kpi.id}\n            className={`\n                p-3 rounded-lg border border-border-default bg-bg-sunken/30\n                ${onClick || hasDrilldown ? 'cursor-pointer hover:border-action-primary-bg transition-colors' : ''}\n              `}\n            onClick={() => {\n              // Trigger drilldown with KPI data if enabled\n              if (hasDrilldown && onDrilldown) {\n                onDrilldown({\n                  kpiId: kpi.id,\n                  kpiLabel: kpi.label,\n                  kpiValue: kpi.value,\n                  kpiUnit: kpi.unit,\n                  kpiTrend: kpi.trend,\n                  kpiTrendValue: kpi.trendValue,\n                  kpiTarget: kpi.target,\n                  kpiPreviousValue: kpi.previousValue,\n                });\n              }\n              onClick?.(kpi);\n            }}\n          >\n            {/* Label */}\n            <p className=\"text-xs text-text-secondary truncate mb-1\">{kpi.label}</p>\n\n            {/* Value (with optional threshold-based conditional color) */}\n            <p\n              className={`text-xl font-semibold ${\n                conditionalStyleToClassName(\n                  resolveConditionalStyle(kpi.value, conditionalRules, { [kpi.label]: kpi.value, value: kpi.value })\n                ) || 'text-text-primary'\n              }`}\n            >\n              {formatValue(kpi.value, kpi.unit)}\n            </p>\n\n            {/* Trend */}\n            {kpi.trendValue !== undefined && (\n              <div className={`flex items-center gap-1 mt-1 text-xs ${getTrendColor(kpi.trend, kpi.trendValue)}`}>\n                <span>{getTrendIcon(kpi.trend)}</span>\n                <span>\n                  {kpi.trendValue >= 0 ? '+' : ''}\n                  {kpi.trendValue.toFixed(1)}%\n                </span>\n              </div>\n            )}\n\n            {/* Target progress */}\n            {kpi.target !== undefined && (\n              <div className=\"mt-2\">\n                <div className=\"flex justify-between text-[10px] text-text-tertiary mb-0.5\">\n                  <span>vs target</span>\n                  <span>{((kpi.value / kpi.target) * 100).toFixed(0)}%</span>\n                </div>\n                <div className=\"h-1 bg-bg-sunken rounded-full overflow-hidden\">\n                  <div\n                    className={`h-full rounded-full ${kpi.value >= kpi.target ? 'bg-status-success-bg' : 'bg-action-primary-bg'}`}\n                    style={{ width: `${Math.min((kpi.value / kpi.target) * 100, 100)}%` }}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n\nexport default KPIComparisonWidget;\n"],"mappings":"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"}
+{"version":3,"file":"KPIComparisonWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/kpi-comparison/KPIComparisonWidget.tsx"],"sourcesContent":["/**\n * KPIComparisonWidget Component\n *\n * Displays multiple KPIs in a grid for comparison.\n */\n\nimport { type FC, memo } from 'react';\nimport type { Widget } from '../../../types';\nimport { type ConditionalRule, resolveConditionalStyle, conditionalStyleToClassName } from '../utils/conditionalFormat';\nimport { SparklineChart, type SparklineDataPoint } from '../metric-card/SparklineChart';\nimport { getTargetProgress, clampProgressWidth } from '../utils/targetProgress';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface KPIComparisonWidgetProps {\n  widget: Widget;\n  data?: KPIComparisonData;\n  onClick?: (kpi: KPIItem) => void;\n  onDrilldown?: (data: Record<string, unknown>) => void;\n}\n\nexport interface KPIItem {\n  id: string;\n  label: string;\n  value: number;\n  previousValue?: number;\n  target?: number;\n  unit?: string;\n  trend?: 'up' | 'down' | 'stable';\n  trendValue?: number;\n  /** Optional history series used to draw the per-KPI sparkline. */\n  sparklineData?: SparklineDataPoint[];\n}\n\nexport interface KPIComparisonData {\n  kpis?: KPIItem[];\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction formatValue(value: number, unit?: string): string {\n  if (unit === '$') {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: 'USD',\n      notation: value >= 10000 ? 'compact' : 'standard',\n      maximumFractionDigits: 1,\n    }).format(value);\n  }\n  if (unit === '%') {\n    return `${value.toFixed(1)}%`;\n  }\n  return new Intl.NumberFormat('en-US', {\n    notation: value >= 10000 ? 'compact' : 'standard',\n    maximumFractionDigits: 1,\n  }).format(value);\n}\n\n/**\n * Whether a trend direction is a *good* outcome for this KPI.\n *\n * `positiveIsGood` defaults to true, but is false for metrics where falling is\n * the win — churn, latency, error rate. Without it a churn rate dropping 22%\n * renders red. Mirrors MetricCardWidget's `getSparklineColor` convention so the\n * two widgets agree.\n */\nfunction isTrendGood(trend: string | undefined, positiveIsGood: boolean): boolean | null {\n  if (trend !== 'up' && trend !== 'down') return null;\n  const isUp = trend === 'up';\n  return positiveIsGood ? isUp : !isUp;\n}\n\nfunction getTrendColor(trend: string | undefined, positiveIsGood: boolean): string {\n  const good = isTrendGood(trend, positiveIsGood);\n  if (good === null) return 'text-text-secondary';\n  return good ? 'text-status-success-text' : 'text-status-error-text';\n}\n\nfunction getSparklineColor(trend: string | undefined, positiveIsGood: boolean): 'success' | 'error' | 'primary' {\n  const good = isTrendGood(trend, positiveIsGood);\n  if (good === null) return 'primary';\n  return good ? 'success' : 'error';\n}\n\n/**\n * Row fields a parser commonly uses to carry a KPI's history series, most\n * explicit first.\n *\n * Deliberately excludes bare `values` — it is generic enough that an unrelated\n * numeric column would be mistaken for a history series and render a spurious\n * chart.\n */\nconst SPARKLINE_FIELDS = ['sparklineData', 'sparkline', 'trendSeries', 'history', 'series'] as const;\n\n/** A trend needs at least two points; one datum is not a line. */\nconst MIN_SPARKLINE_POINTS = 2;\n\n/**\n * Coerce a raw field into sparkline points.\n *\n * Accepts the two shapes parsers realistically emit — `number[]` and\n * `{ value: number, timestamp?: string }[]` — and rejects everything else so a\n * malformed field renders no chart rather than a broken one.\n */\nfunction toSparklinePoints(raw: unknown): SparklineDataPoint[] | undefined {\n  if (!Array.isArray(raw) || raw.length === 0) return undefined;\n\n  const points = raw.reduce<SparklineDataPoint[]>((acc, entry) => {\n    if (typeof entry === 'number' && Number.isFinite(entry)) {\n      acc.push({ value: entry });\n      return acc;\n    }\n    if (entry && typeof entry === 'object') {\n      const record = entry as Record<string, unknown>;\n      const value = record.value;\n      if (typeof value === 'number' && Number.isFinite(value)) {\n        acc.push({\n          value,\n          timestamp: typeof record.timestamp === 'string' ? record.timestamp : undefined,\n        });\n      }\n    }\n    return acc;\n  }, []);\n\n  return points.length >= MIN_SPARKLINE_POINTS ? points : undefined;\n}\n\n/**\n * Find a history series on a DataSink row, trying the known field names.\n *\n * Inference only — an explicit `kpi.sparklineData` on a `kpis[]` payload\n * bypasses this entirely, so a caller that deliberately supplies a series is\n * never second-guessed.\n */\nfunction extractSparklineFromRow(row: Record<string, unknown>): SparklineDataPoint[] | undefined {\n  for (const field of SPARKLINE_FIELDS) {\n    const points = toSparklinePoints(row[field]);\n    if (points) return points;\n  }\n  return undefined;\n}\n\nfunction getTrendIcon(trend?: string): string {\n  if (trend === 'up') return '↑';\n  if (trend === 'down') return '↓';\n  return '→';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const KPIComparisonWidget: FC<KPIComparisonWidgetProps> = memo(function KPIComparisonWidget({\n  widget,\n  data,\n  onClick,\n  onDrilldown,\n}) {\n  const hasDrilldown = !!widget.drilldown?.enabled;\n  const config = widget.config as Record<string, unknown> | undefined;\n  const conditionalRules = config?.conditionalRules as ConditionalRule[] | undefined;\n\n  // Build KPIs array from data\n  // Support multiple formats:\n  // 1. data.kpis array (standard format)\n  // 2. Single value from data.processed (e.g., 125000 from DataSink)\n  // 3. data is a number/string directly\n  // 4. Nested summary object (e.g., {sales: [...], summary: {totalSales: 123}})\n  // 5. Array of objects from DataSink (e.g., [{month: \"Jan\", revenue: 45000}, ...])\n  let kpis: KPIItem[] = [];\n\n  // Get configured value field from widget config (for DataSink data)\n  const valueField = (config?.valueField as string) || (config?.value_field as string) || 'value';\n  const labelField = (config?.labelField as string) || (config?.label_field as string) || 'label';\n\n  // Helper to convert object with numeric values to KPIs\n  const objectToKpis = (obj: Record<string, unknown>): KPIItem[] => {\n    const entries = Object.entries(obj);\n    return entries\n      .filter(([, v]) => typeof v === 'number')\n      .map(([key, value]) => ({\n        id: key,\n        label: key.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),\n        value: value as number,\n        unit:\n          key.toLowerCase().includes('sales') ||\n          key.toLowerCase().includes('revenue') ||\n          key.toLowerCase().includes('value')\n            ? '$'\n            : undefined,\n      }));\n  };\n\n  // Helper to extract KPI from a single data row using config fields\n  const extractKpiFromRow = (row: Record<string, unknown>, index: number): KPIItem | null => {\n    // Try to get value from configured field or common field names\n    const valueCandidates = [valueField, 'value', 'revenue', 'amount', 'total', 'count', 'sales', 'growth'];\n    let value: number | null = null;\n\n    for (const field of valueCandidates) {\n      if (typeof row[field] === 'number') {\n        value = row[field] as number;\n        break;\n      }\n      if (typeof row[field] === 'string' && !isNaN(parseFloat(row[field] as string))) {\n        value = parseFloat(row[field] as string);\n        break;\n      }\n    }\n\n    if (value === null) {\n      // Try to find any numeric field\n      const numericEntry = Object.entries(row).find(([, v]) => typeof v === 'number');\n      if (numericEntry) {\n        value = numericEntry[1] as number;\n      }\n    }\n\n    if (value === null) return null;\n\n    // Try to get label from configured field or common field names\n    const labelCandidates = [labelField, 'label', 'name', 'title', 'month', 'region', 'category'];\n    let label = `Item ${index + 1}`;\n\n    for (const field of labelCandidates) {\n      if (row[field] && typeof row[field] === 'string') {\n        label = row[field] as string;\n        break;\n      }\n    }\n\n    // Check for growth/trend fields\n    const growthValue = row.growth ?? row.change ?? row.trend ?? row.percentChange;\n    const trend =\n      typeof growthValue === 'number' ? (growthValue > 0 ? 'up' : growthValue < 0 ? 'down' : 'stable') : undefined;\n\n    return {\n      id: `kpi-${index}`,\n      label,\n      value,\n      unit:\n        valueField.toLowerCase().includes('revenue') || valueField.toLowerCase().includes('sales') ? '$' : undefined,\n      trend: trend as 'up' | 'down' | 'stable' | undefined,\n      trendValue: typeof growthValue === 'number' ? growthValue : undefined,\n      sparklineData: extractSparklineFromRow(row),\n    };\n  };\n\n  if (data?.kpis && Array.isArray(data.kpis)) {\n    // Standard KPIs array\n    kpis = data.kpis;\n  } else if (Array.isArray(data) && data.length > 0) {\n    // Handle array of objects from DataSink — extract one KPI per row. The\n    // display limit is applied uniformly further down so every data shape\n    // (kpis array, object, row array) obeys the same rule.\n    for (let i = 0; i < data.length; i++) {\n      const row = data[i] as Record<string, unknown>;\n      if (row && typeof row === 'object') {\n        const kpi = extractKpiFromRow(row, i);\n        if (kpi) kpis.push(kpi);\n      }\n    }\n\n    // If we couldn't extract KPIs from rows, try to aggregate numeric fields\n    if (kpis.length === 0 && data.length > 0) {\n      const firstRow = data[0] as Record<string, unknown>;\n      const numericFields = Object.entries(firstRow).filter(([, v]) => typeof v === 'number');\n\n      // Create KPIs by aggregating (summing) each numeric field across all rows\n      kpis = numericFields.map(([field]) => {\n        const sum = data.reduce((acc, row) => {\n          const val = (row as Record<string, unknown>)[field];\n          return acc + (typeof val === 'number' ? val : 0);\n        }, 0);\n\n        return {\n          id: field,\n          label: field.replace(/([A-Z])/g, ' $1').replace(/^./, (s) => s.toUpperCase()),\n          value: sum,\n          unit: field.toLowerCase().includes('revenue') || field.toLowerCase().includes('sales') ? '$' : undefined,\n        };\n      });\n    }\n  } else if (typeof data === 'number' || typeof data === 'string') {\n    // Single value - create a KPI from it using widget config\n    const value = typeof data === 'string' ? parseFloat(data) : data;\n    if (!isNaN(value)) {\n      kpis = [\n        {\n          id: 'primary',\n          label: ((config?.subtitle as string) || widget.title || 'Value').trim(),\n          value,\n          // KPIConfig.format's canonical value is 'percentage'; 'percent' is\n          // tolerated only for hand-authored legacy configs. Matching just\n          // 'percent' made this branch dead for every config the product writes.\n          unit:\n            config?.format === 'currency'\n              ? '$'\n              : config?.format === 'percentage' || config?.format === 'percent'\n                ? '%'\n                : undefined,\n        },\n      ];\n    }\n  } else if (data && typeof data === 'object' && !Array.isArray(data)) {\n    const dataObj = data as Record<string, unknown>;\n\n    // First, check if there's a nested 'summary' object with numeric values\n    if ('summary' in dataObj && dataObj.summary && typeof dataObj.summary === 'object') {\n      kpis = objectToKpis(dataObj.summary as Record<string, unknown>);\n    }\n\n    // If no KPIs from summary, try top-level numeric values\n    if (kpis.length === 0) {\n      kpis = objectToKpis(dataObj);\n    }\n  }\n\n  // Single display limit for every data shape. Previously only the row-array\n  // branch was capped (hard-coded at 4), so a 6-row parser output silently lost\n  // two KPIs while an equivalent object payload rendered all six.\n  // Floor first, then require at least 1 — a fractional limit between 0 and 1\n  // passes a `> 0` check but floors to 0, which would render an empty grid\n  // with nothing but the \"+N more\" footer.\n  const rawMaxKpis = config?.maxKpis;\n  const flooredMaxKpis = typeof rawMaxKpis === 'number' && Number.isFinite(rawMaxKpis) ? Math.floor(rawMaxKpis) : NaN;\n  const maxKpis = flooredMaxKpis >= 1 ? flooredMaxKpis : undefined;\n  const totalKpis = kpis.length;\n  const visibleKpis = maxKpis === undefined ? kpis : kpis.slice(0, maxKpis);\n  const hiddenKpiCount = totalKpis - visibleKpis.length;\n\n  // The registry seeds the plural `showSparklines` (KPIConfig) while the shared\n  // Style-tab panel writes the singular `showSparkline` (MetricCardConfig).\n  // The Style tab is the user's deliberate action and the registry value is only\n  // a default, so the singular key WINS when present. ANDing the two would let a\n  // stale registry `false` silently override the checkbox, making it look inert.\n  const showSparklines =\n    typeof config?.showSparkline === 'boolean'\n      ? config.showSparkline\n      : typeof config?.showSparklines === 'boolean'\n        ? config.showSparklines\n        : true;\n\n  // Falling is the win for churn / latency / error-rate style KPIs.\n  const positiveIsGood = config?.positiveIsGood !== false;\n\n  if (!kpis.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 className=\"w-12 h-12 mx-auto mb-2 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={1.5}\n              d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\n            />\n          </svg>\n          <p>No KPI data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"h-full p-4 overflow-auto\">\n      <div className=\"grid grid-cols-2 gap-3\">\n        {visibleKpis.map((kpi, index) => {\n          // Computed once per KPI — it gates the block, labels the percentage\n          // and drives the bar width.\n          const targetProgress = getTargetProgress(kpi.value, kpi.target);\n\n          return (\n            <div\n              key={kpi.id ?? `kpi-${index}`}\n              className={`\n                p-3 rounded-lg border border-border-default bg-bg-sunken/30\n                ${onClick || hasDrilldown ? 'cursor-pointer hover:border-action-primary-bg transition-colors' : ''}\n              `}\n              onClick={() => {\n                // Trigger drilldown with KPI data if enabled\n                if (hasDrilldown && onDrilldown) {\n                  onDrilldown({\n                    kpiId: kpi.id,\n                    kpiLabel: kpi.label,\n                    kpiValue: kpi.value,\n                    kpiUnit: kpi.unit,\n                    kpiTrend: kpi.trend,\n                    kpiTrendValue: kpi.trendValue,\n                    kpiTarget: kpi.target,\n                    kpiPreviousValue: kpi.previousValue,\n                  });\n                }\n                onClick?.(kpi);\n              }}\n            >\n              {/* Label */}\n              <p className=\"text-xs text-text-secondary truncate mb-1\">{kpi.label}</p>\n\n              {/* Value (with optional threshold-based conditional color) */}\n              <p\n                className={`text-xl font-semibold ${\n                  conditionalStyleToClassName(\n                    resolveConditionalStyle(kpi.value, conditionalRules, { [kpi.label]: kpi.value, value: kpi.value })\n                  ) || 'text-text-primary'\n                }`}\n              >\n                {formatValue(kpi.value, kpi.unit)}\n              </p>\n\n              {/* Trend */}\n              {kpi.trendValue !== undefined && (\n                <div className={`flex items-center gap-1 mt-1 text-xs ${getTrendColor(kpi.trend, positiveIsGood)}`}>\n                  <span>{getTrendIcon(kpi.trend)}</span>\n                  <span>\n                    {kpi.trendValue >= 0 ? '+' : ''}\n                    {kpi.trendValue.toFixed(1)}%\n                  </span>\n                </div>\n              )}\n\n              {/* Sparkline — drawn when the KPI carries a history series and the\n                Style-tab toggle is on. */}\n              {showSparklines && kpi.sparklineData && kpi.sparklineData.length > 0 && (\n                <div className=\"mt-2\">\n                  <SparklineChart\n                    data={kpi.sparklineData}\n                    width={120}\n                    height={28}\n                    color={getSparklineColor(kpi.trend, positiveIsGood)}\n                  />\n                </div>\n              )}\n\n              {/* Target progress */}\n              {targetProgress !== null && (\n                <div className=\"mt-2\">\n                  <div className=\"flex justify-between text-[10px] text-text-muted mb-0.5\">\n                    <span>vs target</span>\n                    <span>{targetProgress.toFixed(0)}%</span>\n                  </div>\n                  <div className=\"h-1 bg-bg-sunken rounded-full overflow-hidden\">\n                    <div\n                      className={`h-full rounded-full ${\n                        kpi.target !== undefined && kpi.value >= kpi.target\n                          ? 'bg-status-success-bg'\n                          : 'bg-action-primary-bg'\n                      }`}\n                      style={{\n                        // Clamp both ends: a negative value would otherwise emit a\n                        // negative width, which the browser drops entirely.\n                        width: `${clampProgressWidth(targetProgress)}%`,\n                      }}\n                    />\n                  </div>\n                </div>\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Never truncate silently — say how many KPIs are hidden by `maxKpis`. */}\n      {hiddenKpiCount > 0 && (\n        <p className=\"mt-2 text-xs text-text-tertiary text-center\">\n          +{hiddenKpiCount} more {hiddenKpiCount === 1 ? 'KPI' : 'KPIs'} hidden\n        </p>\n      )}\n    </div>\n  );\n});\n\nexport default KPIComparisonWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/list/ListConfig.js

@@ -10,7 +10,7 @@ var a = e(function({ config: e, onChange: a }) {
 		});
 	}, [e, a]);
 	return /* @__PURE__ */ i("div", {
-		className: "space-y-4",
+		className: "min-w-0 space-y-form-gap",
 		children: [
 			/* @__PURE__ */ i("div", { children: [
 				/* @__PURE__ */ r("label", {
@@ -71,8 +71,14 @@ var a = e(function({ config: e, onChange: a }) {
 				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          "
 			})] }),
 			/* @__PURE__ */ i("div", {
-				className: "space-y-3",
+				role: "group",
+				"aria-label": "Display options",
+				className: "space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
 				children: [
+					/* @__PURE__ */ r("p", {
+						className: "text-xs font-bold uppercase tracking-wider text-text-secondary",
+						children: "Display options"
+					}),
 					/* @__PURE__ */ i("label", {
 						className: "flex items-center gap-3",
 						children: [/* @__PURE__ */ r("input", {

package/dist/bigconsole/components/widgets/list/ListConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/list/ListConfig.tsx"],"sourcesContent":["/**\n * ListConfig Component\n *\n * Configuration panel for List widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { ListConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ListConfigProps {\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 ListConfig: FC<ListConfigProps> = memo(function ListConfig({ config, onChange }) {\n  const { t } = useI18n();\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Max Items */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.maxItems.label', 'Maximum Items to Display')}\n        </label>\n        <input\n          type=\"number\"\n          value={config.maxItems ?? ''}\n          onChange={(e) => handleChange('maxItems', e.target.value ? Number(e.target.value) : undefined)}\n          min={1}\n          placeholder={t('bigconsole.widget.config.list.maxItems.placeholder', 'No limit')}\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        <p className=\"text-xs text-text-secondary mt-1\">\n          {t('bigconsole.widget.config.list.maxItems.help', 'Leave empty to show all items')}\n        </p>\n      </div>\n\n      {/* Title Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.titleField.label', 'Title Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.titleField || ''}\n          onChange={(e) => handleChange('titleField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.titleField.placeholder', 'e.g., name, title')}\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      {/* Subtitle Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.subtitleField.label', 'Subtitle Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.subtitleField || ''}\n          onChange={(e) => handleChange('subtitleField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.subtitleField.placeholder', 'e.g., description, email')}\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 Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.valueField.label', 'Value Field (right side)')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.valueField || ''}\n          onChange={(e) => handleChange('valueField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.valueField.placeholder', 'e.g., amount, count')}\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      {/* Badge Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.badgeField.label', 'Badge Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.badgeField || ''}\n          onChange={(e) => handleChange('badgeField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.badgeField.placeholder', 'e.g., status, type')}\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      {/* Toggle Options */}\n      <div className=\"space-y-3\">\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showCount !== false}\n            onChange={(e) => handleChange('showCount', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showCount', 'Show item count')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showSearch === true}\n            onChange={(e) => handleChange('showSearch', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showSearch', 'Show search box')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showViewAll !== false}\n            onChange={(e) => handleChange('showViewAll', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showViewAll', 'Show \"View All\" link when truncated')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showIcon === true}\n            onChange={(e) => handleChange('showIcon', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showIcon', 'Show item icons')}\n          </span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default ListConfig;\n"],"mappings":"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"}
+{"version":3,"file":"ListConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/list/ListConfig.tsx"],"sourcesContent":["/**\n * ListConfig Component\n *\n * Configuration panel for List widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport type { ListConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ListConfigProps {\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 ListConfig: FC<ListConfigProps> = memo(function ListConfig({ config, onChange }) {\n  const { t } = useI18n();\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  return (\n    <div className=\"min-w-0 space-y-form-gap\">\n      {/* Max Items */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.maxItems.label', 'Maximum Items to Display')}\n        </label>\n        <input\n          type=\"number\"\n          value={config.maxItems ?? ''}\n          onChange={(e) => handleChange('maxItems', e.target.value ? Number(e.target.value) : undefined)}\n          min={1}\n          placeholder={t('bigconsole.widget.config.list.maxItems.placeholder', 'No limit')}\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        <p className=\"text-xs text-text-secondary mt-1\">\n          {t('bigconsole.widget.config.list.maxItems.help', 'Leave empty to show all items')}\n        </p>\n      </div>\n\n      {/* Title Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.titleField.label', 'Title Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.titleField || ''}\n          onChange={(e) => handleChange('titleField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.titleField.placeholder', 'e.g., name, title')}\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      {/* Subtitle Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.subtitleField.label', 'Subtitle Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.subtitleField || ''}\n          onChange={(e) => handleChange('subtitleField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.subtitleField.placeholder', 'e.g., description, email')}\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 Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.valueField.label', 'Value Field (right side)')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.valueField || ''}\n          onChange={(e) => handleChange('valueField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.valueField.placeholder', 'e.g., amount, count')}\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      {/* Badge Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">\n          {t('bigconsole.widget.config.list.badgeField.label', 'Badge Field')}\n        </label>\n        <input\n          type=\"text\"\n          value={config.badgeField || ''}\n          onChange={(e) => handleChange('badgeField', e.target.value)}\n          placeholder={t('bigconsole.widget.config.list.badgeField.placeholder', 'e.g., status, type')}\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      {/* Toggle Options */}\n      <div\n        role=\"group\"\n        aria-label=\"Display options\"\n        className=\"space-y-3 border-t border-[var(--color-border-subtle)] pt-form-gap\"\n      >\n        {/* Toggles are a different KIND of control from the field stack above,\n            so they get their own labelled group instead of being visually\n            identical to it (BOFF-5636). */}\n        <p className=\"text-xs font-bold uppercase tracking-wider text-text-secondary\">Display options</p>\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showCount !== false}\n            onChange={(e) => handleChange('showCount', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showCount', 'Show item count')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showSearch === true}\n            onChange={(e) => handleChange('showSearch', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showSearch', 'Show search box')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showViewAll !== false}\n            onChange={(e) => handleChange('showViewAll', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showViewAll', 'Show \"View All\" link when truncated')}\n          </span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showIcon === true}\n            onChange={(e) => handleChange('showIcon', e.target.checked)}\n            className=\"\n              w-4 h-4\n              text-action-primary-bg\n              bg-bg-surface\n              border-border-default\n              rounded\n              focus:ring-action-primary-bg\n            \"\n          />\n          <span className=\"text-sm text-text-primary\">\n            {t('bigconsole.widget.config.list.showIcon', 'Show item icons')}\n          </span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default ListConfig;\n"],"mappings":"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"}