@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.1

package/dist/bigconsole/components/widgets/timeline/TimelineWidget.js

@@ -115,7 +115,7 @@ var s = e(function({ widget: e, data: i, onClick: s }) {
 									}
 								}),
 								/* @__PURE__ */ n("div", {
-									className: "absolute top-1/2 -translate-y-1/2 text-[9px] text-text-tertiary",
+									className: "absolute top-1/2 -translate-y-1/2 text-[9px] text-text-muted",
 									style: { left: `${d + 1}%` },
 									children: t.toLocaleDateString("en-US", {
 										month: "short",
@@ -146,7 +146,7 @@ var s = e(function({ widget: e, data: i, onClick: s }) {
 								children: e.name
 							}),
 							/* @__PURE__ */ n("span", {
-								className: "text-[10px] text-text-tertiary",
+								className: "text-[10px] text-text-muted",
 								children: new Date(e.date).toLocaleDateString("en-US", {
 									month: "short",
 									day: "numeric"
@@ -162,7 +162,7 @@ var s = e(function({ widget: e, data: i, onClick: s }) {
 		children: /* @__PURE__ */ r("div", {
 			className: "text-center",
 			children: [/* @__PURE__ */ n("svg", {
-				className: "w-12 h-12 mx-auto mb-2 text-text-tertiary",
+				className: "w-12 h-12 mx-auto mb-2 text-text-muted",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",

package/dist/bigconsole/components/widgets/timeline/TimelineWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimelineWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/timeline/TimelineWidget.tsx"],"sourcesContent":["/**\n * TimelineWidget Component\n *\n * Simple timeline/gantt view showing project tasks and milestones.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface TimelineWidgetProps {\n  widget: Widget;\n  data?: TimelineData;\n  onClick?: (task: TimelineTask) => void;\n}\n\nexport interface TimelineTask {\n  id: string;\n  name: string;\n  start: string;\n  end: string;\n  progress?: number;\n  color?: string;\n  duration?: number;\n  dependencies?: string[];\n}\n\nexport interface TimelineMilestone {\n  id: string;\n  name: string;\n  date: string;\n  color?: string;\n}\n\nexport interface TimelineData {\n  tasks?: TimelineTask[];\n  milestones?: TimelineMilestone[];\n}\n\n// ============================================================================\n// Normalization\n// ============================================================================\n\nfunction firstDefined<T = unknown>(obj: Record<string, unknown>, keys: string[]): T | undefined {\n  for (const key of keys) {\n    if (obj[key] !== undefined && obj[key] !== null) return obj[key] as T;\n  }\n  return undefined;\n}\n\n/**\n * Normalize whatever the widget is bound to into `TimelineTask[]`. Accepts the\n * documented `{ tasks, ... }` shape, a tasks array under a different common key,\n * or a bare array of task-like records — a DataSink parser naturally outputs a\n * bare array, and WidgetWrapper has no timeline-specific reshaping step (unlike\n * table/list/chart), so this widget has to tolerate it itself, the same way\n * MapWidget tolerates a bare marker array instead of requiring `{ markers }`.\n * Field names are matched against common aliases (e.g. a parser emitting\n * `title` instead of `name`) so one exact parser output shape isn't required.\n */\nexport function normalizeTimelineTasks(\n  data: TimelineData | TimelineTask[] | Record<string, unknown> | undefined\n): TimelineTask[] {\n  const rawTasks: unknown = Array.isArray(data)\n    ? data\n    : Array.isArray((data as TimelineData | undefined)?.tasks)\n      ? (data as TimelineData).tasks\n      : Array.isArray((data as Record<string, unknown> | undefined)?.items)\n        ? (data as Record<string, unknown>).items\n        : Array.isArray((data as Record<string, unknown> | undefined)?.data)\n          ? (data as Record<string, unknown>).data\n          : undefined;\n\n  if (!Array.isArray(rawTasks)) return [];\n\n  return rawTasks\n    .map((raw, i): TimelineTask | null => {\n      if (!raw || typeof raw !== 'object') return null;\n      const r = raw as Record<string, unknown>;\n      const start = firstDefined<string>(r, ['start', 'startDate', 'date']);\n      const end = firstDefined<string>(r, ['end', 'endDate']) ?? start;\n      if (!start || !end) return null;\n      const name = firstDefined<string>(r, ['name', 'title', 'label', 'task']) ?? 'Untitled task';\n      const id = firstDefined<string>(r, ['id', 'taskId', '_id']) ?? `${name}-${start}-${i}`;\n      return {\n        id: String(id),\n        name: String(name),\n        start: String(start),\n        end: String(end),\n        progress: typeof r.progress === 'number' ? r.progress : undefined,\n        color: typeof r.color === 'string' ? r.color : undefined,\n        duration: typeof r.duration === 'number' ? r.duration : undefined,\n        dependencies: Array.isArray(r.dependencies) ? (r.dependencies as string[]) : undefined,\n      };\n    })\n    .filter((t): t is TimelineTask => t !== null);\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getProgressColor(progress: number): string {\n  if (progress >= 100) return 'bg-status-success-bg';\n  if (progress >= 50) return 'bg-action-primary-bg';\n  if (progress > 0) return 'bg-status-warning-bg';\n  return 'bg-bg-sunken';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TimelineWidget: FC<TimelineWidgetProps> = memo(function TimelineWidget({\n  widget: _widget,\n  data,\n  onClick,\n}) {\n  const tasks = useMemo(() => normalizeTimelineTasks(data), [data]);\n  const milestones = data?.milestones || [];\n\n  // Calculate date range\n  const { minDate, maxDate, totalDays } = useMemo(() => {\n    if (!tasks.length) {\n      return { minDate: new Date(), maxDate: new Date(), totalDays: 1 };\n    }\n\n    const dates = tasks.flatMap((t) => [new Date(t.start), new Date(t.end)]);\n    const min = new Date(Math.min(...dates.map((d) => d.getTime())));\n    const max = new Date(Math.max(...dates.map((d) => d.getTime())));\n    const days = Math.ceil((max.getTime() - min.getTime()) / (1000 * 60 * 60 * 24)) + 1;\n\n    return { minDate: min, maxDate: max, totalDays: days };\n  }, [tasks]);\n\n  if (!tasks.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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n            />\n          </svg>\n          <p>No timeline data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full p-4 overflow-auto\">\n      {/* Header with date range */}\n      <div className=\"flex items-center justify-between mb-4\">\n        <h3 className=\"text-sm font-medium text-text-primary\">Project Timeline</h3>\n        <span className=\"text-xs text-text-secondary\">\n          {minDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} -{' '}\n          {maxDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n        </span>\n      </div>\n\n      {/* Timeline content */}\n      <div className=\"flex-1 space-y-3 overflow-auto\">\n        {tasks.map((task) => {\n          const startDate = new Date(task.start);\n          const endDate = new Date(task.end);\n          const taskDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;\n          const startOffset = Math.ceil((startDate.getTime() - minDate.getTime()) / (1000 * 60 * 60 * 24));\n          const progress = task.progress ?? 0;\n\n          // Calculate bar position and width as percentages\n          const leftPercent = (startOffset / totalDays) * 100;\n          const widthPercent = (taskDays / totalDays) * 100;\n\n          return (\n            <div\n              key={task.id}\n              className={`\n                  ${onClick ? 'cursor-pointer' : ''}\n                `}\n              onClick={() => onClick?.(task)}\n            >\n              {/* Task name and progress */}\n              <div className=\"flex items-center justify-between mb-1\">\n                <span className=\"text-xs font-medium text-text-primary truncate max-w-[60%]\">{task.name}</span>\n                <span className=\"text-[10px] text-text-secondary\">{progress}%</span>\n              </div>\n\n              {/* Timeline bar */}\n              <div className=\"relative h-6 bg-bg-sunken rounded overflow-hidden\">\n                {/* Task bar */}\n                <div\n                  className=\"absolute top-1 bottom-1 rounded\"\n                  style={{\n                    left: `${leftPercent}%`,\n                    width: `${Math.max(widthPercent, 5)}%`,\n                    backgroundColor: task.color || 'var(--color-chart-1)',\n                    opacity: 0.3,\n                  }}\n                />\n\n                {/* Progress fill */}\n                <div\n                  className={`absolute top-1 bottom-1 rounded ${getProgressColor(progress)}`}\n                  style={{\n                    left: `${leftPercent}%`,\n                    width: `${Math.max((widthPercent * progress) / 100, 2)}%`,\n                  }}\n                />\n\n                {/* Date labels */}\n                <div\n                  className=\"absolute top-1/2 -translate-y-1/2 text-[9px] text-text-tertiary\"\n                  style={{ left: `${leftPercent + 1}%` }}\n                >\n                  {startDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Milestones */}\n      {milestones.length > 0 && (\n        <div className=\"mt-4 pt-3 border-t border-border-default\">\n          <p className=\"text-xs font-medium text-text-secondary mb-2\">Milestones</p>\n          <div className=\"flex flex-wrap gap-2\">\n            {milestones.map((milestone) => (\n              <div key={milestone.id} className=\"flex items-center gap-1.5 px-2 py-1 rounded bg-bg-sunken\">\n                <div\n                  className=\"w-2 h-2 rounded-full\"\n                  style={{ backgroundColor: milestone.color || 'var(--color-chart-negative)' }}\n                />\n                <span className=\"text-[10px] text-text-primary\">{milestone.name}</span>\n                <span className=\"text-[10px] text-text-tertiary\">\n                  {new Date(milestone.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default TimelineWidget;\n"],"mappings":"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"}
+{"version":3,"file":"TimelineWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/timeline/TimelineWidget.tsx"],"sourcesContent":["/**\n * TimelineWidget Component\n *\n * Simple timeline/gantt view showing project tasks and milestones.\n */\n\nimport { type FC, memo, useMemo } from 'react';\nimport type { Widget } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface TimelineWidgetProps {\n  widget: Widget;\n  data?: TimelineData;\n  onClick?: (task: TimelineTask) => void;\n}\n\nexport interface TimelineTask {\n  id: string;\n  name: string;\n  start: string;\n  end: string;\n  progress?: number;\n  color?: string;\n  duration?: number;\n  dependencies?: string[];\n}\n\nexport interface TimelineMilestone {\n  id: string;\n  name: string;\n  date: string;\n  color?: string;\n}\n\nexport interface TimelineData {\n  tasks?: TimelineTask[];\n  milestones?: TimelineMilestone[];\n}\n\n// ============================================================================\n// Normalization\n// ============================================================================\n\nfunction firstDefined<T = unknown>(obj: Record<string, unknown>, keys: string[]): T | undefined {\n  for (const key of keys) {\n    if (obj[key] !== undefined && obj[key] !== null) return obj[key] as T;\n  }\n  return undefined;\n}\n\n/**\n * Normalize whatever the widget is bound to into `TimelineTask[]`. Accepts the\n * documented `{ tasks, ... }` shape, a tasks array under a different common key,\n * or a bare array of task-like records — a DataSink parser naturally outputs a\n * bare array, and WidgetWrapper has no timeline-specific reshaping step (unlike\n * table/list/chart), so this widget has to tolerate it itself, the same way\n * MapWidget tolerates a bare marker array instead of requiring `{ markers }`.\n * Field names are matched against common aliases (e.g. a parser emitting\n * `title` instead of `name`) so one exact parser output shape isn't required.\n */\nexport function normalizeTimelineTasks(\n  data: TimelineData | TimelineTask[] | Record<string, unknown> | undefined\n): TimelineTask[] {\n  const rawTasks: unknown = Array.isArray(data)\n    ? data\n    : Array.isArray((data as TimelineData | undefined)?.tasks)\n      ? (data as TimelineData).tasks\n      : Array.isArray((data as Record<string, unknown> | undefined)?.items)\n        ? (data as Record<string, unknown>).items\n        : Array.isArray((data as Record<string, unknown> | undefined)?.data)\n          ? (data as Record<string, unknown>).data\n          : undefined;\n\n  if (!Array.isArray(rawTasks)) return [];\n\n  return rawTasks\n    .map((raw, i): TimelineTask | null => {\n      if (!raw || typeof raw !== 'object') return null;\n      const r = raw as Record<string, unknown>;\n      const start = firstDefined<string>(r, ['start', 'startDate', 'date']);\n      const end = firstDefined<string>(r, ['end', 'endDate']) ?? start;\n      if (!start || !end) return null;\n      const name = firstDefined<string>(r, ['name', 'title', 'label', 'task']) ?? 'Untitled task';\n      const id = firstDefined<string>(r, ['id', 'taskId', '_id']) ?? `${name}-${start}-${i}`;\n      return {\n        id: String(id),\n        name: String(name),\n        start: String(start),\n        end: String(end),\n        progress: typeof r.progress === 'number' ? r.progress : undefined,\n        color: typeof r.color === 'string' ? r.color : undefined,\n        duration: typeof r.duration === 'number' ? r.duration : undefined,\n        dependencies: Array.isArray(r.dependencies) ? (r.dependencies as string[]) : undefined,\n      };\n    })\n    .filter((t): t is TimelineTask => t !== null);\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction getProgressColor(progress: number): string {\n  if (progress >= 100) return 'bg-status-success-bg';\n  if (progress >= 50) return 'bg-action-primary-bg';\n  if (progress > 0) return 'bg-status-warning-bg';\n  return 'bg-bg-sunken';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TimelineWidget: FC<TimelineWidgetProps> = memo(function TimelineWidget({\n  widget: _widget,\n  data,\n  onClick,\n}) {\n  const tasks = useMemo(() => normalizeTimelineTasks(data), [data]);\n  const milestones = data?.milestones || [];\n\n  // Calculate date range\n  const { minDate, maxDate, totalDays } = useMemo(() => {\n    if (!tasks.length) {\n      return { minDate: new Date(), maxDate: new Date(), totalDays: 1 };\n    }\n\n    const dates = tasks.flatMap((t) => [new Date(t.start), new Date(t.end)]);\n    const min = new Date(Math.min(...dates.map((d) => d.getTime())));\n    const max = new Date(Math.max(...dates.map((d) => d.getTime())));\n    const days = Math.ceil((max.getTime() - min.getTime()) / (1000 * 60 * 60 * 24)) + 1;\n\n    return { minDate: min, maxDate: max, totalDays: days };\n  }, [tasks]);\n\n  if (!tasks.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 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"\n            />\n          </svg>\n          <p>No timeline data</p>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col h-full p-4 overflow-auto\">\n      {/* Header with date range */}\n      <div className=\"flex items-center justify-between mb-4\">\n        <h3 className=\"text-sm font-medium text-text-primary\">Project Timeline</h3>\n        <span className=\"text-xs text-text-secondary\">\n          {minDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} -{' '}\n          {maxDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n        </span>\n      </div>\n\n      {/* Timeline content */}\n      <div className=\"flex-1 space-y-3 overflow-auto\">\n        {tasks.map((task) => {\n          const startDate = new Date(task.start);\n          const endDate = new Date(task.end);\n          const taskDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1;\n          const startOffset = Math.ceil((startDate.getTime() - minDate.getTime()) / (1000 * 60 * 60 * 24));\n          const progress = task.progress ?? 0;\n\n          // Calculate bar position and width as percentages\n          const leftPercent = (startOffset / totalDays) * 100;\n          const widthPercent = (taskDays / totalDays) * 100;\n\n          return (\n            <div\n              key={task.id}\n              className={`\n                  ${onClick ? 'cursor-pointer' : ''}\n                `}\n              onClick={() => onClick?.(task)}\n            >\n              {/* Task name and progress */}\n              <div className=\"flex items-center justify-between mb-1\">\n                <span className=\"text-xs font-medium text-text-primary truncate max-w-[60%]\">{task.name}</span>\n                <span className=\"text-[10px] text-text-secondary\">{progress}%</span>\n              </div>\n\n              {/* Timeline bar */}\n              <div className=\"relative h-6 bg-bg-sunken rounded overflow-hidden\">\n                {/* Task bar */}\n                <div\n                  className=\"absolute top-1 bottom-1 rounded\"\n                  style={{\n                    left: `${leftPercent}%`,\n                    width: `${Math.max(widthPercent, 5)}%`,\n                    backgroundColor: task.color || 'var(--color-chart-1)',\n                    opacity: 0.3,\n                  }}\n                />\n\n                {/* Progress fill */}\n                <div\n                  className={`absolute top-1 bottom-1 rounded ${getProgressColor(progress)}`}\n                  style={{\n                    left: `${leftPercent}%`,\n                    width: `${Math.max((widthPercent * progress) / 100, 2)}%`,\n                  }}\n                />\n\n                {/* Date labels */}\n                <div\n                  className=\"absolute top-1/2 -translate-y-1/2 text-[9px] text-text-muted\"\n                  style={{ left: `${leftPercent + 1}%` }}\n                >\n                  {startDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      {/* Milestones */}\n      {milestones.length > 0 && (\n        <div className=\"mt-4 pt-3 border-t border-border-default\">\n          <p className=\"text-xs font-medium text-text-secondary mb-2\">Milestones</p>\n          <div className=\"flex flex-wrap gap-2\">\n            {milestones.map((milestone) => (\n              <div key={milestone.id} className=\"flex items-center gap-1.5 px-2 py-1 rounded bg-bg-sunken\">\n                <div\n                  className=\"w-2 h-2 rounded-full\"\n                  style={{ backgroundColor: milestone.color || 'var(--color-chart-negative)' }}\n                />\n                <span className=\"text-[10px] text-text-primary\">{milestone.name}</span>\n                <span className=\"text-[10px] text-text-muted\">\n                  {new Date(milestone.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n                </span>\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default TimelineWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/utils/conditionalFormat.js

@@ -61,9 +61,9 @@ function r(e) {
 }
 var i = {
 	success: "text-status-success-text",
-	warning: "text-status-warning-text",
+	warning: "text-[var(--color-status-warning-text)]",
 	danger: "text-status-error-text",
-	info: "text-status-info-text",
+	info: "text-[var(--color-status-info-text)]",
 	neutral: "text-text-secondary"
 }, a = {
 	success: "bg-status-success-bg",

package/dist/bigconsole/components/widgets/utils/conditionalFormat.js.map

@@ -1 +1 @@
-{"version":3,"file":"conditionalFormat.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/utils/conditionalFormat.ts"],"sourcesContent":["/**\n * Conditional Formatting Engine (shared)\n *\n * Rule-based styling shared across Table, Chart, KPI and Metric widgets.\n * Rules are stored on the widget `config` (e.g. `config.conditionalRules`) and\n * evaluated per data point. Colors are expressed as *semantic intents*\n * (success/warning/danger/info/neutral) — never raw hex — so theming and\n * dark-mode keep working. The intent is resolved to either a Tailwind class\n * (for DOM cells) or a CSS variable (for SVG charts) at render time.\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Comparison operators supported by a conditional rule. */\nexport type ConditionalOperator =\n  | 'gt'\n  | 'gte'\n  | 'lt'\n  | 'lte'\n  | 'eq'\n  | 'neq'\n  | 'between'\n  | 'outside'\n  | 'contains'\n  | 'notContains'\n  | 'startsWith'\n  | 'endsWith'\n  | 'isEmpty'\n  | 'isNotEmpty';\n\n/**\n * Semantic color intent. Maps to `--color-status-*` / neutral tokens so the\n * result is theme-aware. Raw colors are intentionally NOT allowed here.\n */\nexport type SemanticIntent = 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\n/** Icon hint rendered alongside a matched value. */\nexport type ConditionalIcon = 'arrow-up' | 'arrow-down' | 'flag' | 'check' | 'alert' | 'dot';\n\nexport interface ConditionalStyle {\n  /** Text color intent. */\n  textColor?: SemanticIntent;\n  /** Background color intent (subtle fill). */\n  bgColor?: SemanticIntent;\n  /** Bold the matched value. */\n  bold?: boolean;\n  /** Icon hint to render before the value. */\n  icon?: ConditionalIcon;\n  /** Render an in-cell data bar scaled against `dataBarMax`. */\n  dataBar?: boolean;\n  /** Color intent for the data bar (defaults to `info`). */\n  dataBarColor?: SemanticIntent;\n}\n\nexport interface ConditionalRule {\n  /** Optional stable id (UI keying). */\n  id?: string;\n  /**\n   * Field to test. When omitted, the rule tests the value it is applied to\n   * (e.g. the current cell value or series value).\n   */\n  field?: string;\n  /** Comparison operator. */\n  operator: ConditionalOperator;\n  /** Comparison operand (primary). */\n  value?: string | number;\n  /** Second operand for `between` / `outside`. */\n  value2?: string | number;\n  /** Styling applied when the rule matches. */\n  style: ConditionalStyle;\n}\n\n// ============================================================================\n// Evaluation\n// ============================================================================\n\nfunction toNumber(v: unknown): number | null {\n  if (typeof v === 'number') return Number.isNaN(v) ? null : v;\n  if (typeof v === 'string' && v.trim() !== '') {\n    const n = Number(v);\n    return Number.isNaN(n) ? null : n;\n  }\n  return null;\n}\n\n/** Evaluate a single rule against a candidate value. */\nexport function evaluateRule(rawValue: unknown, rule: ConditionalRule, rowData?: Record<string, unknown>): boolean {\n  // Resolve the value being tested: explicit field on the row, else the raw value.\n  const candidate = rule.field != null && rowData ? rowData[rule.field] : rawValue;\n\n  switch (rule.operator) {\n    case 'isEmpty':\n      return candidate == null || candidate === '';\n    case 'isNotEmpty':\n      return candidate != null && candidate !== '';\n    case 'contains':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'notContains':\n      return !String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'startsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .startsWith(String(rule.value ?? '').toLowerCase());\n    case 'endsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .endsWith(String(rule.value ?? '').toLowerCase());\n    default:\n      break;\n  }\n\n  // Equality works for both strings and numbers.\n  if (rule.operator === 'eq' || rule.operator === 'neq') {\n    const num = toNumber(candidate);\n    const ruleNum = toNumber(rule.value);\n    const equal =\n      num != null && ruleNum != null ? num === ruleNum : String(candidate ?? '') === String(rule.value ?? '');\n    return rule.operator === 'eq' ? equal : !equal;\n  }\n\n  // Remaining operators are numeric.\n  const num = toNumber(candidate);\n  if (num == null) return false;\n  const a = toNumber(rule.value);\n\n  switch (rule.operator) {\n    case 'gt':\n      return a != null && num > a;\n    case 'gte':\n      return a != null && num >= a;\n    case 'lt':\n      return a != null && num < a;\n    case 'lte':\n      return a != null && num <= a;\n    case 'between': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num >= lo && num <= hi;\n    }\n    case 'outside': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num < lo || num > hi;\n    }\n    default:\n      return false;\n  }\n}\n\n/**\n * Resolve the merged style for a value given an ordered rule list.\n * Later matching rules override earlier ones (last-wins), so order rules from\n * general to specific. Returns `undefined` when nothing matches.\n */\nexport function resolveConditionalStyle(\n  rawValue: unknown,\n  rules: ConditionalRule[] | undefined,\n  rowData?: Record<string, unknown>\n): ConditionalStyle | undefined {\n  if (!rules?.length) return undefined;\n  let merged: ConditionalStyle | undefined;\n  for (const rule of rules) {\n    if (evaluateRule(rawValue, rule, rowData)) {\n      merged = { ...merged, ...rule.style };\n    }\n  }\n  return merged;\n}\n\n// ============================================================================\n// Intent → presentation mapping (theme-safe)\n// ============================================================================\n\n/** CSS variable for a semantic intent's solid color (charts/SVG). */\nexport function intentToCssVar(intent: SemanticIntent): string {\n  switch (intent) {\n    case 'success':\n      return 'var(--color-status-success)';\n    case 'warning':\n      return 'var(--color-status-warning)';\n    case 'danger':\n      return 'var(--color-status-error)';\n    case 'info':\n      return 'var(--color-status-info)';\n    case 'neutral':\n    default:\n      return 'var(--color-text-secondary)';\n  }\n}\n\nconst TEXT_CLASS: Record<SemanticIntent, string> = {\n  success: 'text-status-success-text',\n  warning: 'text-status-warning-text',\n  danger: 'text-status-error-text',\n  info: 'text-status-info-text',\n  neutral: 'text-text-secondary',\n};\n\nconst BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  danger: 'bg-status-error-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-bg-sunken',\n};\n\n/** Build the Tailwind className fragment for a resolved style (DOM cells). */\nexport function conditionalStyleToClassName(style: ConditionalStyle | undefined): string {\n  if (!style) return '';\n  const parts: string[] = [];\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bgColor) parts.push(BG_CLASS[style.bgColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** Subtle background fill class per intent — used for whole-row highlighting. */\nconst ROW_BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg-subtle',\n  warning: 'bg-status-warning-bg-subtle',\n  danger: 'bg-status-error-bg-subtle',\n  info: 'bg-status-info-bg-subtle',\n  neutral: 'bg-bg-sunken',\n};\n\n/** Left-edge accent border class per intent — used for whole-row highlighting. */\nconst ROW_ACCENT_CLASS: Record<SemanticIntent, string> = {\n  success: 'border-l-4 border-status-success-border',\n  warning: 'border-l-4 border-status-warning-border',\n  danger: 'border-l-4 border-status-error-border',\n  info: 'border-l-4 border-status-info-border',\n  neutral: 'border-l-4 border-border-default',\n};\n\n/**\n * Resolve a `<tr>`-level className for a whole row given an ordered rule list.\n * Each rule's `field` is tested against the row; the merged style's `bgColor`\n * (falling back to `textColor`) paints a subtle fill and adds a matching\n * left-edge accent bar, with `bold` emphasising the row text. Returns `''`\n * when nothing matches so default striped row styling is preserved. This is\n * the escalation surface that renders boarding-breach rows in red.\n */\nexport function resolveRowClassName(row: Record<string, unknown>, rules: ConditionalRule[] | undefined): string {\n  const style = resolveConditionalStyle(undefined, rules, row);\n  if (!style) return '';\n  const parts: string[] = [];\n  const fill = style.bgColor ?? style.textColor;\n  if (fill) {\n    parts.push(ROW_BG_CLASS[fill]);\n    parts.push(ROW_ACCENT_CLASS[fill]);\n  }\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** SVG paths for the supported conditional icons (16x16 viewBox 0 0 24 24). */\nexport const CONDITIONAL_ICON_PATHS: Record<ConditionalIcon, string> = {\n  'arrow-up': 'M5 15l7-7 7 7',\n  'arrow-down': 'M19 9l-7 7-7-7',\n  flag: 'M3 21V5a2 2 0 012-2h11l-2 4 2 4H5',\n  check: 'M5 13l4 4L19 7',\n  alert: 'M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z',\n  dot: 'M12 12m-4 0a4 4 0 108 0a4 4 0 10-8 0',\n};\n"],"mappings":"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"}
+{"version":3,"file":"conditionalFormat.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/utils/conditionalFormat.ts"],"sourcesContent":["/**\n * Conditional Formatting Engine (shared)\n *\n * Rule-based styling shared across Table, Chart, KPI and Metric widgets.\n * Rules are stored on the widget `config` (e.g. `config.conditionalRules`) and\n * evaluated per data point. Colors are expressed as *semantic intents*\n * (success/warning/danger/info/neutral) — never raw hex — so theming and\n * dark-mode keep working. The intent is resolved to either a Tailwind class\n * (for DOM cells) or a CSS variable (for SVG charts) at render time.\n */\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Comparison operators supported by a conditional rule. */\nexport type ConditionalOperator =\n  | 'gt'\n  | 'gte'\n  | 'lt'\n  | 'lte'\n  | 'eq'\n  | 'neq'\n  | 'between'\n  | 'outside'\n  | 'contains'\n  | 'notContains'\n  | 'startsWith'\n  | 'endsWith'\n  | 'isEmpty'\n  | 'isNotEmpty';\n\n/**\n * Semantic color intent. Maps to `--color-status-*` / neutral tokens so the\n * result is theme-aware. Raw colors are intentionally NOT allowed here.\n */\nexport type SemanticIntent = 'success' | 'warning' | 'danger' | 'info' | 'neutral';\n\n/** Icon hint rendered alongside a matched value. */\nexport type ConditionalIcon = 'arrow-up' | 'arrow-down' | 'flag' | 'check' | 'alert' | 'dot';\n\nexport interface ConditionalStyle {\n  /** Text color intent. */\n  textColor?: SemanticIntent;\n  /** Background color intent (subtle fill). */\n  bgColor?: SemanticIntent;\n  /** Bold the matched value. */\n  bold?: boolean;\n  /** Icon hint to render before the value. */\n  icon?: ConditionalIcon;\n  /** Render an in-cell data bar scaled against `dataBarMax`. */\n  dataBar?: boolean;\n  /** Color intent for the data bar (defaults to `info`). */\n  dataBarColor?: SemanticIntent;\n}\n\nexport interface ConditionalRule {\n  /** Optional stable id (UI keying). */\n  id?: string;\n  /**\n   * Field to test. When omitted, the rule tests the value it is applied to\n   * (e.g. the current cell value or series value).\n   */\n  field?: string;\n  /** Comparison operator. */\n  operator: ConditionalOperator;\n  /** Comparison operand (primary). */\n  value?: string | number;\n  /** Second operand for `between` / `outside`. */\n  value2?: string | number;\n  /** Styling applied when the rule matches. */\n  style: ConditionalStyle;\n}\n\n// ============================================================================\n// Evaluation\n// ============================================================================\n\nfunction toNumber(v: unknown): number | null {\n  if (typeof v === 'number') return Number.isNaN(v) ? null : v;\n  if (typeof v === 'string' && v.trim() !== '') {\n    const n = Number(v);\n    return Number.isNaN(n) ? null : n;\n  }\n  return null;\n}\n\n/** Evaluate a single rule against a candidate value. */\nexport function evaluateRule(rawValue: unknown, rule: ConditionalRule, rowData?: Record<string, unknown>): boolean {\n  // Resolve the value being tested: explicit field on the row, else the raw value.\n  const candidate = rule.field != null && rowData ? rowData[rule.field] : rawValue;\n\n  switch (rule.operator) {\n    case 'isEmpty':\n      return candidate == null || candidate === '';\n    case 'isNotEmpty':\n      return candidate != null && candidate !== '';\n    case 'contains':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'notContains':\n      return !String(candidate ?? '')\n        .toLowerCase()\n        .includes(String(rule.value ?? '').toLowerCase());\n    case 'startsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .startsWith(String(rule.value ?? '').toLowerCase());\n    case 'endsWith':\n      return String(candidate ?? '')\n        .toLowerCase()\n        .endsWith(String(rule.value ?? '').toLowerCase());\n    default:\n      break;\n  }\n\n  // Equality works for both strings and numbers.\n  if (rule.operator === 'eq' || rule.operator === 'neq') {\n    const num = toNumber(candidate);\n    const ruleNum = toNumber(rule.value);\n    const equal =\n      num != null && ruleNum != null ? num === ruleNum : String(candidate ?? '') === String(rule.value ?? '');\n    return rule.operator === 'eq' ? equal : !equal;\n  }\n\n  // Remaining operators are numeric.\n  const num = toNumber(candidate);\n  if (num == null) return false;\n  const a = toNumber(rule.value);\n\n  switch (rule.operator) {\n    case 'gt':\n      return a != null && num > a;\n    case 'gte':\n      return a != null && num >= a;\n    case 'lt':\n      return a != null && num < a;\n    case 'lte':\n      return a != null && num <= a;\n    case 'between': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num >= lo && num <= hi;\n    }\n    case 'outside': {\n      const b = toNumber(rule.value2);\n      if (a == null || b == null) return false;\n      const lo = Math.min(a, b);\n      const hi = Math.max(a, b);\n      return num < lo || num > hi;\n    }\n    default:\n      return false;\n  }\n}\n\n/**\n * Resolve the merged style for a value given an ordered rule list.\n * Later matching rules override earlier ones (last-wins), so order rules from\n * general to specific. Returns `undefined` when nothing matches.\n */\nexport function resolveConditionalStyle(\n  rawValue: unknown,\n  rules: ConditionalRule[] | undefined,\n  rowData?: Record<string, unknown>\n): ConditionalStyle | undefined {\n  if (!rules?.length) return undefined;\n  let merged: ConditionalStyle | undefined;\n  for (const rule of rules) {\n    if (evaluateRule(rawValue, rule, rowData)) {\n      merged = { ...merged, ...rule.style };\n    }\n  }\n  return merged;\n}\n\n// ============================================================================\n// Intent → presentation mapping (theme-safe)\n// ============================================================================\n\n/** CSS variable for a semantic intent's solid color (charts/SVG). */\nexport function intentToCssVar(intent: SemanticIntent): string {\n  switch (intent) {\n    case 'success':\n      return 'var(--color-status-success)';\n    case 'warning':\n      return 'var(--color-status-warning)';\n    case 'danger':\n      return 'var(--color-status-error)';\n    case 'info':\n      return 'var(--color-status-info)';\n    case 'neutral':\n    default:\n      return 'var(--color-text-secondary)';\n  }\n}\n\nconst TEXT_CLASS: Record<SemanticIntent, string> = {\n  success: 'text-status-success-text',\n  warning: 'text-[var(--color-status-warning-text)]',\n  danger: 'text-status-error-text',\n  info: 'text-[var(--color-status-info-text)]',\n  neutral: 'text-text-secondary',\n};\n\nconst BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg',\n  warning: 'bg-status-warning-bg',\n  danger: 'bg-status-error-bg',\n  info: 'bg-status-info-bg',\n  neutral: 'bg-bg-sunken',\n};\n\n/** Build the Tailwind className fragment for a resolved style (DOM cells). */\nexport function conditionalStyleToClassName(style: ConditionalStyle | undefined): string {\n  if (!style) return '';\n  const parts: string[] = [];\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bgColor) parts.push(BG_CLASS[style.bgColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** Subtle background fill class per intent — used for whole-row highlighting. */\nconst ROW_BG_CLASS: Record<SemanticIntent, string> = {\n  success: 'bg-status-success-bg-subtle',\n  warning: 'bg-status-warning-bg-subtle',\n  danger: 'bg-status-error-bg-subtle',\n  info: 'bg-status-info-bg-subtle',\n  neutral: 'bg-bg-sunken',\n};\n\n/** Left-edge accent border class per intent — used for whole-row highlighting. */\nconst ROW_ACCENT_CLASS: Record<SemanticIntent, string> = {\n  success: 'border-l-4 border-status-success-border',\n  warning: 'border-l-4 border-status-warning-border',\n  danger: 'border-l-4 border-status-error-border',\n  info: 'border-l-4 border-status-info-border',\n  neutral: 'border-l-4 border-border-default',\n};\n\n/**\n * Resolve a `<tr>`-level className for a whole row given an ordered rule list.\n * Each rule's `field` is tested against the row; the merged style's `bgColor`\n * (falling back to `textColor`) paints a subtle fill and adds a matching\n * left-edge accent bar, with `bold` emphasising the row text. Returns `''`\n * when nothing matches so default striped row styling is preserved. This is\n * the escalation surface that renders boarding-breach rows in red.\n */\nexport function resolveRowClassName(row: Record<string, unknown>, rules: ConditionalRule[] | undefined): string {\n  const style = resolveConditionalStyle(undefined, rules, row);\n  if (!style) return '';\n  const parts: string[] = [];\n  const fill = style.bgColor ?? style.textColor;\n  if (fill) {\n    parts.push(ROW_BG_CLASS[fill]);\n    parts.push(ROW_ACCENT_CLASS[fill]);\n  }\n  if (style.textColor) parts.push(TEXT_CLASS[style.textColor]);\n  if (style.bold) parts.push('font-semibold');\n  return parts.join(' ');\n}\n\n/** SVG paths for the supported conditional icons (16x16 viewBox 0 0 24 24). */\nexport const CONDITIONAL_ICON_PATHS: Record<ConditionalIcon, string> = {\n  'arrow-up': 'M5 15l7-7 7 7',\n  'arrow-down': 'M19 9l-7 7-7-7',\n  flag: 'M3 21V5a2 2 0 012-2h11l-2 4 2 4H5',\n  check: 'M5 13l4 4L19 7',\n  alert: 'M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z',\n  dot: 'M12 12m-4 0a4 4 0 108 0a4 4 0 10-8 0',\n};\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.js

@@ -5,29 +5,26 @@ import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/webhook-config/WebhookConfigPanel.tsx
 var c = {
 	container: {
-		padding: "16px",
-		backgroundColor: "var(--color-bg-surface)",
-		borderRadius: "8px"
+		display: "flex",
+		flexDirection: "column",
+		gap: "var(--space-formGap)",
+		minWidth: 0
 	},
 	header: {
 		display: "flex",
-		justifyContent: "space-between",
+		flexWrap: "wrap",
+		justifyContent: "flex-end",
 		alignItems: "center",
-		marginBottom: "16px"
-	},
-	title: {
-		fontSize: "16px",
-		fontWeight: 600,
-		color: "var(--color-text-primary)",
-		margin: 0
+		gap: "var(--space-controlGap)"
 	},
 	addButton: {
-		padding: "8px 16px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
 		backgroundColor: "var(--color-action-primary-bg)",
-		color: "var(--color-text-inverse)",
+		color: "var(--color-action-primary-text)",
 		border: "none",
-		borderRadius: "6px",
-		fontSize: "14px",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 500,
 		cursor: "pointer"
 	},
@@ -37,26 +34,33 @@ var c = {
 		gap: "12px"
 	},
 	webhookCard: {
-		padding: "16px",
-		backgroundColor: "var(--color-bg-subtle)",
-		borderRadius: "8px",
-		border: "1px solid var(--color-border-subtle)"
+		padding: "var(--space-cardPadding)",
+		backgroundColor: "var(--color-bg-sunken)",
+		borderRadius: "var(--radius-card)",
+		border: "1px solid var(--color-border-subtle)",
+		minWidth: 0
 	},
 	webhookHeader: {
 		display: "flex",
+		flexWrap: "wrap",
 		justifyContent: "space-between",
 		alignItems: "flex-start",
-		marginBottom: "8px"
+		gap: "var(--space-iconGap)",
+		marginBottom: "8px",
+		minWidth: 0
 	},
 	webhookTitle: {
 		display: "flex",
+		flexWrap: "wrap",
 		alignItems: "center",
-		gap: "8px"
+		gap: "8px",
+		minWidth: 0
 	},
 	webhookName: {
-		fontSize: "14px",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 600,
-		color: "var(--color-text-primary)"
+		color: "var(--color-text-primary)",
+		wordBreak: "break-word"
 	},
 	statusBadge: {
 		padding: "2px 8px",
@@ -73,26 +77,28 @@ var c = {
 		color: "var(--color-status-warning-text)"
 	},
 	webhookDetails: {
-		fontSize: "13px",
-		color: "var(--color-text-muted)",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-secondary)",
 		marginBottom: "4px"
 	},
 	webhookUrl: {
-		fontSize: "12px",
-		color: "var(--color-text-placeholder)",
-		fontFamily: "monospace",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-muted)",
+		fontFamily: "var(--font-family-mono)",
 		wordBreak: "break-all"
 	},
 	webhookActions: {
 		display: "flex",
+		flexWrap: "wrap",
 		gap: "8px",
 		marginTop: "12px"
 	},
 	actionButton: {
-		padding: "6px 12px",
-		fontSize: "12px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 12px",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 500,
-		borderRadius: "4px",
+		borderRadius: "var(--radius-button)",
 		border: "none",
 		cursor: "pointer"
 	},
@@ -114,14 +120,24 @@ var c = {
 	},
 	emptyState: {
 		textAlign: "center",
-		padding: "32px",
-		color: "var(--color-text-placeholder)"
+		padding: "var(--space-pagePadding) var(--space-formGap)",
+		color: "var(--color-text-secondary)",
+		backgroundColor: "var(--color-status-info-bgSubtle)",
+		border: "1px solid var(--color-status-info-border)",
+		borderRadius: "var(--radius-card)"
+	},
+	emptyTitle: {
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: 600,
+		color: "var(--color-status-info-text)",
+		margin: 0
 	},
 	form: {
-		padding: "16px",
-		backgroundColor: "var(--color-bg-subtle)",
-		borderRadius: "8px",
-		marginBottom: "16px"
+		padding: "var(--space-cardPadding)",
+		backgroundColor: "var(--color-bg-sunken)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-card)",
+		minWidth: 0
 	},
 	formGroup: { marginBottom: "12px" },
 	label: {
@@ -133,54 +149,64 @@ var c = {
 	},
 	input: {
 		width: "100%",
+		minHeight: "var(--size-controlHeight-md)",
 		padding: "8px 12px",
-		fontSize: "14px",
-		border: "1px solid var(--color-border-default)",
-		borderRadius: "6px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		boxSizing: "border-box"
 	},
 	select: {
 		width: "100%",
+		minHeight: "var(--size-controlHeight-md)",
 		padding: "8px 12px",
-		fontSize: "14px",
-		border: "1px solid var(--color-border-default)",
-		borderRadius: "6px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		boxSizing: "border-box",
 		backgroundColor: "var(--color-bg-surface)"
 	},
 	textarea: {
 		width: "100%",
 		padding: "8px 12px",
-		fontSize: "14px",
-		border: "1px solid var(--color-border-default)",
-		borderRadius: "6px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		boxSizing: "border-box",
-		fontFamily: "monospace",
+		fontFamily: "var(--font-family-mono)",
 		minHeight: "80px",
 		resize: "vertical"
 	},
 	formActions: {
 		display: "flex",
+		flexWrap: "wrap",
 		gap: "8px",
 		justifyContent: "flex-end",
-		marginTop: "16px"
+		marginTop: "var(--space-formGap)"
 	},
 	cancelButton: {
-		padding: "8px 16px",
-		backgroundColor: "var(--color-bg-sunken)",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
+		backgroundColor: "var(--color-bg-surface)",
 		color: "var(--color-text-primary)",
-		border: "none",
-		borderRadius: "6px",
-		fontSize: "14px",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		cursor: "pointer"
 	},
 	saveButton: {
-		padding: "8px 16px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 var(--space-formGap)",
 		backgroundColor: "var(--color-action-primary-bg)",
-		color: "var(--color-text-inverse)",
+		color: "var(--color-action-primary-text)",
 		border: "none",
-		borderRadius: "6px",
-		fontSize: "14px",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		fontWeight: 500,
 		cursor: "pointer"
 	},
@@ -337,23 +363,16 @@ var c = {
 				style: c.webhookHeader,
 				children: /* @__PURE__ */ s("div", {
 					style: c.webhookTitle,
-					children: [
-						/* @__PURE__ */ o("span", {
-							style: { fontSize: "16px" },
-							children: "📡"
-						}),
-						/* @__PURE__ */ o("span", {
-							style: c.webhookName,
-							children: e.eventPattern
-						}),
-						/* @__PURE__ */ o("span", {
-							style: {
-								...c.statusBadge,
-								...e.isActive ? c.activeBadge : c.inactiveBadge
-							},
-							children: e.isActive ? f("bigconsole.widget.webhookConfig.active", "Active") : f("bigconsole.widget.webhookConfig.inactive", "Inactive")
-						})
-					]
+					children: [/* @__PURE__ */ o("span", {
+						style: c.webhookName,
+						children: e.eventPattern
+					}), /* @__PURE__ */ o("span", {
+						style: {
+							...c.statusBadge,
+							...e.isActive ? c.activeBadge : c.inactiveBadge
+						},
+						children: e.isActive ? f("bigconsole.widget.webhookConfig.active", "Active") : f("bigconsole.widget.webhookConfig.inactive", "Inactive")
+					})]
 				})
 			}),
 			/* @__PURE__ */ s("div", {
@@ -369,14 +388,15 @@ var c = {
 				children: e.webhookUrl
 			}),
 			u && /* @__PURE__ */ o("div", {
+				role: "status",
 				style: {
 					...c.testResult,
 					...u.success ? c.testSuccess : c.testFailure
 				},
-				children: u.success ? /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testSuccess", "✅ Test successful! Status: {{statusCode}}, Latency: {{latencyMs}}ms", {
+				children: u.success ? /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testSuccess", "Test successful! Status: {{statusCode}}, Latency: {{latencyMs}}ms", {
 					statusCode: u.statusCode ?? "",
 					latencyMs: u.latencyMs ?? ""
-				}) }) : /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testFailure", "❌ Test failed: {{error}}", { error: u.errorMessage || f("bigconsole.widget.webhookConfig.unknownError", "Unknown error") }) })
+				}) }) : /* @__PURE__ */ o(a, { children: f("bigconsole.widget.webhookConfig.testFailure", "Test failed: {{error}}", { error: u.errorMessage || f("bigconsole.widget.webhookConfig.unknownError", "Unknown error") }) })
 			}),
 			/* @__PURE__ */ s("div", {
 				style: c.webhookActions,
@@ -454,17 +474,16 @@ var c = {
 	}, []);
 	return /* @__PURE__ */ s("div", {
 		style: c.container,
+		"data-testid": "webhook-config-panel",
 		children: [
-			/* @__PURE__ */ s("div", {
+			!m && /* @__PURE__ */ o("div", {
 				style: c.header,
-				children: [/* @__PURE__ */ o("h3", {
-					style: c.title,
-					children: p("bigconsole.widget.webhookConfig.title", "Webhook Configuration")
-				}), !m && /* @__PURE__ */ o("button", {
+				children: /* @__PURE__ */ o("button", {
+					type: "button",
 					onClick: () => h(!0),
 					style: c.addButton,
 					children: p("bigconsole.widget.webhookConfig.addWebhook", "+ Add Webhook")
-				})]
+				})
 			}),
 			m && /* @__PURE__ */ o(l, {
 				webhook: g || void 0,
@@ -476,12 +495,20 @@ var c = {
 			}),
 			C && S.length === 0 ? /* @__PURE__ */ o("div", {
 				style: c.emptyState,
-				children: p("bigconsole.widget.webhookConfig.loading", "Loading...")
+				role: "status",
+				children: /* @__PURE__ */ o("p", {
+					style: c.emptyTitle,
+					children: p("bigconsole.widget.webhookConfig.loading", "Loading...")
+				})
 			}) : S.length === 0 ? /* @__PURE__ */ s("div", {
 				style: c.emptyState,
-				children: [/* @__PURE__ */ o("p", { children: p("bigconsole.widget.webhookConfig.noWebhooks", "No webhooks configured") }), /* @__PURE__ */ o("p", {
+				role: "status",
+				children: [/* @__PURE__ */ o("p", {
+					style: c.emptyTitle,
+					children: p("bigconsole.widget.webhookConfig.noWebhooks", "No webhooks configured")
+				}), /* @__PURE__ */ o("p", {
 					style: {
-						fontSize: "13px",
+						fontSize: "var(--font-size-body-sm)",
 						marginTop: "8px"
 					},
 					children: p("bigconsole.widget.webhookConfig.noWebhooksHelp", "Add a webhook to receive events when actions are triggered.")