@titan-design/react-ui 0.5.0 → 0.6.0

package/dist/index.js

@@ -1,9 +1,9 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactNative = require('react-native');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var jsxRuntime = require('react/jsx-runtime');
 var React24 = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -16,9 +16,6 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function wrapJsx(fn) {
   return function(type, props, ...rest) {
     if (props && typeof props.className === "string" && props.className) {
@@ -37,6 +34,58 @@ function wrapJsx(fn) {
 var jsx = wrapJsx(jsxRuntime.jsx);
 var jsxs = wrapJsx(jsxRuntime.jsxs);
 
+// src/components/icons/SvgIcon.tsx
+function SvgIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  fill = "none",
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill,
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...title ? { role: "img", "aria-label": title } : { "aria-hidden": true },
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        children
+      ]
+    }
+  );
+}
+
+// src/components/icons/icons.tsx
+function VoltrasMark({ size = 14, ...props }) {
+  return /* @__PURE__ */ jsx(SvgIcon, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 2 22 12 12 22 2 12Z" }) });
+}
+function BluetoothIcon({ size = 18, ...props }) {
+  return /* @__PURE__ */ jsx(SvgIcon, { size, ...props, children: /* @__PURE__ */ jsx("path", { d: "M7 7 17 17 12 22 12 2 17 7 7 17" }) });
+}
+function DumbbellIcon(props) {
+  return /* @__PURE__ */ jsxs(SvgIcon, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M14.4 14.4 9.6 9.6" }),
+    /* @__PURE__ */ jsx("path", { d: "M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" }),
+    /* @__PURE__ */ jsx("path", { d: "m21.5 21.5-1.4-1.4" }),
+    /* @__PURE__ */ jsx("path", { d: "M3.9 3.9 2.5 2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" })
+  ] });
+}
+function StarIcon(props) {
+  return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
 // src/components/ui/alert/Alert.tsx
 var statusColors = {
   success: {
@@ -194,6 +243,38 @@ var primitiveColors = {
     800: "#991B1B",
     900: "#7F1D1D"
   },
+  // Vivid green scale (live/go success)
+  greenVivid: {
+    50: "#E9FBF0",
+    100: "#C8F7DA",
+    200: "#9FF0BF",
+    300: "#6BE79D",
+    400: "#47DE84",
+    // Success vivid light
+    500: "#2ED573",
+    // Success vivid main
+    600: "#22B85F",
+    700: "#1A9950",
+    // Success vivid dark
+    800: "#157A40",
+    900: "#105C30"
+  },
+  // Vivid red scale (alert)
+  redVivid: {
+    50: "#FFECEE",
+    100: "#FFD6DB",
+    200: "#FFB3BC",
+    300: "#FF8593",
+    400: "#FF6070",
+    // Error vivid light
+    500: "#FF4757",
+    // Error vivid main
+    600: "#E63548",
+    700: "#C42539",
+    // Error vivid dark
+    800: "#9E1C2C",
+    900: "#7A1520"
+  },
   // Amber scale (warning)
   amber: {
     50: "#FFFBEB",
@@ -283,6 +364,162 @@ var primitiveColors = {
   black: "#000000",
   transparent: "transparent"
 };
+var primitiveRamps = {
+  red: {
+    50: "#FFF4F4",
+    100: "#FFE3E5",
+    200: "#FFC2C5",
+    300: "#FF9A9D",
+    400: "#F77175",
+    500: "#E05254",
+    600: "#D14343",
+    // pin
+    700: "#A4221C",
+    800: "#7E1002",
+    900: "#5A0900",
+    950: "#3D0400"
+  },
+  orange: {
+    50: "#FFF5ED",
+    100: "#FFE6D4",
+    200: "#FFC7A2",
+    300: "#FFA063",
+    400: "#FF7900",
+    // pin
+    500: "#DA5F00",
+    600: "#B94A00",
+    700: "#983804",
+    800: "#6F290F",
+    900: "#4E1C0C",
+    950: "#331107"
+  },
+  amber: {
+    50: "#FFF7DD",
+    100: "#FFEAA9",
+    200: "#FFD352",
+    300: "#F9B415",
+    // pin
+    400: "#E08C00",
+    500: "#C27400",
+    600: "#A45E00",
+    700: "#814D14",
+    800: "#5B3A1A",
+    900: "#442503",
+    950: "#301500"
+  },
+  green: {
+    50: "#E3FFEE",
+    100: "#B5FFD2",
+    200: "#58F69E",
+    300: "#2ED573",
+    // pin
+    400: "#21C05D",
+    500: "#22A444",
+    600: "#298732",
+    700: "#2B6B25",
+    800: "#264D1C",
+    900: "#1B3515",
+    950: "#11220D"
+  },
+  cyan: {
+    50: "#E6FBFF",
+    100: "#C2F6FF",
+    200: "#62EAFF",
+    300: "#22D3EE",
+    // pin
+    400: "#01B5D1",
+    500: "#2697B7",
+    600: "#307B9B",
+    700: "#2A617F",
+    800: "#22465F",
+    900: "#0B3149",
+    950: "#001F36"
+  },
+  blue: {
+    50: "#EFF8FF",
+    100: "#D9EFFF",
+    200: "#ACDBFF",
+    300: "#78C2FF",
+    400: "#3CA8FF",
+    500: "#2196F3",
+    // pin
+    600: "#1072CB",
+    700: "#135AA8",
+    800: "#14407E",
+    900: "#112C5A",
+    950: "#091B3C"
+  },
+  magenta: {
+    50: "#FFF3F9",
+    100: "#FFE2F1",
+    200: "#FFBDE2",
+    300: "#FF8FD5",
+    400: "#ED69C3",
+    500: "#D548AF",
+    600: "#BA2996",
+    700: "#9C0D7A",
+    // pin
+    800: "#77005A",
+    900: "#56003F",
+    950: "#3B0029"
+  }
+};
+var categoricalPalette = {
+  default: [
+    primitiveRamps.blue[500],
+    primitiveRamps.magenta[500],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[400],
+    primitiveRamps.green[300],
+    primitiveRamps.cyan[300],
+    primitiveRamps.amber[600]
+    // extended (7th) — pair with a legend
+  ],
+  dark: [
+    primitiveRamps.blue[600],
+    primitiveRamps.magenta[600],
+    primitiveRamps.red[500],
+    primitiveRamps.orange[600],
+    primitiveRamps.green[800],
+    primitiveRamps.cyan[800],
+    primitiveRamps.amber[500]
+    // extended (7th) — pair with a legend
+  ]
+};
+var CATEGORICAL_CVD_SAFE_MAX = 6;
+function getCategoricalColor(index, variant = "default") {
+  const palette = categoricalPalette[variant];
+  index = Math.max(0, Math.floor(index));
+  return palette[index % palette.length];
+}
+var divergingScale = [
+  primitiveRamps.blue[500],
+  // under
+  primitiveRamps.cyan[300],
+  // maintenance
+  primitiveRamps.green[200],
+  // optimal (light center)
+  primitiveRamps.amber[300],
+  // approaching
+  primitiveRamps.red[600]
+  // over
+];
+var sequentialEffort = [
+  primitiveRamps.green[300],
+  primitiveRamps.amber[200],
+  primitiveRamps.amber[300],
+  primitiveRamps.orange[400],
+  primitiveRamps.red[600],
+  primitiveRamps.red[700]
+];
+function bestTextColor(hex) {
+  const [r, g, b] = [0, 2, 4].map((i) => {
+    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
+    return c >= 0.04045 ? ((c + 0.055) / 1.055) ** 2.4 : c / 12.92;
+  });
+  const l = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return (l + 0.05) / 0.05 >= 1.05 / (l + 0.05) ? "#000000" : "#FFFFFF";
+}
 var discreteRainbow = [
   "#E8ECFB",
   "#D9CCE3",
@@ -492,56 +729,43 @@ var primitiveZIndex = {
 // src/theme/tokens/semantic.ts
 var semanticColorsLight = {
   // Brand colors (brand-*)
-  "brand-primary": primitiveColors.accent[400],
-  // #FF7900
-  "brand-primary-light": primitiveColors.accent[200],
-  // #FF9630
-  "brand-primary-dark": primitiveColors.accent[700],
-  // #D0620C
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.08)",
-  "brand-primary-hover": primitiveColors.accent[500],
-  "brand-primary-active": primitiveColors.accent[600],
-  "brand-secondary": primitiveColors.steel[500],
-  // #406D87
-  "brand-secondary-light": primitiveColors.steel[300],
-  // #678498
-  "brand-secondary-dark": primitiveColors.steel[700],
-  // #32556D
-  "brand-secondary-subtle": "rgba(64, 109, 135, 0.08)",
-  "brand-secondary-hover": primitiveColors.steel[600],
-  "brand-secondary-active": primitiveColors.steel[700],
+  "brand-primary-hover": primitiveRamps.orange[500],
+  "brand-primary-active": primitiveRamps.orange[600],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.08)",
+  "brand-secondary-hover": primitiveRamps.cyan[700],
+  "brand-secondary-active": primitiveRamps.cyan[800],
   // Text on brand backgrounds (on-*)
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
   // Status colors (status-*)
-  "status-success": primitiveColors.teal[500],
-  // #14B8A6
-  "status-success-light": primitiveColors.teal[400],
-  // #43C6B7
-  "status-success-dark": primitiveColors.teal[700],
-  // #0E8074
-  "status-success-subtle": primitiveColors.teal[50],
-  "status-error": primitiveColors.red[600],
-  // #D14343
-  "status-error-light": primitiveColors.red[400],
-  // #DA6868
-  "status-error-dark": primitiveColors.red[700],
-  // #922E2E
-  "status-error-subtle": primitiveColors.red[50],
-  "status-warning": primitiveColors.amber[500],
-  // #FFB020
-  "status-warning-light": primitiveColors.amber[400],
-  // #FFBF4C
-  "status-warning-dark": primitiveColors.amber[600],
-  // #B27B16
-  "status-warning-subtle": primitiveColors.amber[50],
-  "status-info": primitiveColors.sky[500],
-  // #2196F3
-  "status-info-light": primitiveColors.sky[400],
-  // #64B6F7
-  "status-info-dark": primitiveColors.sky[700],
-  // #0B79D0
-  "status-info-subtle": primitiveColors.sky[50],
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": primitiveRamps.green[50],
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
+  "status-error-subtle": primitiveRamps.red[50],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  // vivid alert red
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": primitiveRamps.amber[50],
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
+  "status-info-subtle": primitiveRamps.blue[50],
   // Text on status backgrounds (on-status-*)
   "on-status-success": primitiveColors.white,
   "on-status-error": primitiveColors.white,
@@ -568,25 +792,25 @@ var semanticColorsLight = {
   // Data visualization colors (data-*)
   // First 10 colors from discrete rainbow optimized for charts
   "data-1": discreteRainbow[9],
-  // #1965B0 - Blue
+  // Blue
   "data-2": discreteRainbow[14],
-  // #4EB265 - Green
+  // Green
   "data-3": discreteRainbow[17],
-  // #F7F056 - Yellow
+  // Yellow
   "data-4": discreteRainbow[25],
-  // #DC050C - Red
+  // Red
   "data-5": discreteRainbow[8],
-  // #882E72 - Purple
+  // Purple
   "data-6": discreteRainbow[20],
-  // #F4A736 - Orange
+  // Orange
   "data-7": discreteRainbow[13],
-  // #7BAFDE - Light Blue
+  // Light Blue
   "data-8": discreteRainbow[15],
-  // #90C987 - Light Green
+  // Light Green
   "data-9": discreteRainbow[3],
-  // #CAACCB - Lavender
+  // Lavender
   "data-10": discreteRainbow[22],
-  // #EE8026 - Dark Orange
+  // Dark Orange
   // Text colors (text-*)
   "text-primary": "#121828",
   "text-secondary": "#65748B",
@@ -598,9 +822,9 @@ var semanticColorsLight = {
   // Surface colors (surface-*) - for elevated containers
   "surface-base": primitiveColors.white,
   "surface-elevated": primitiveColors.neutral[50],
-  // #FAFAFA - slightly off-white for elevated cards
+  // slightly off-white for elevated cards
   "surface-raised": primitiveColors.neutral[100],
-  // #F3F4F6 - light gray for raised cards
+  // light gray for raised cards
   "surface-overlay": primitiveColors.white,
   "surface-input": primitiveColors.neutral[50],
   // Input field background (filled variant)
@@ -612,6 +836,8 @@ var semanticColorsLight = {
   "border-default": "#E8E9EB",
   "border-subtle": primitiveColors.neutral[100],
   "border-strong": primitiveColors.neutral[300],
+  "border-prominent": primitiveColors.neutral[400],
+  // high-visibility divider
   "border-focus": primitiveColors.blue[600],
   "border-input": primitiveColors.neutral[300],
   // Input field border
@@ -636,37 +862,41 @@ var semanticColorsLight = {
 };
 var semanticColorsDark = {
   // Brand colors stay the same in dark mode
-  "brand-primary": primitiveColors.accent[400],
-  "brand-primary-light": primitiveColors.accent[200],
-  "brand-primary-dark": primitiveColors.accent[700],
+  "brand-primary": primitiveRamps.orange[400],
+  "brand-primary-light": primitiveRamps.orange[300],
+  "brand-primary-dark": primitiveRamps.orange[500],
   "brand-primary-subtle": "rgba(255, 121, 0, 0.12)",
-  "brand-primary-hover": primitiveColors.accent[300],
-  "brand-primary-active": primitiveColors.accent[200],
-  "brand-secondary": primitiveColors.steel[500],
-  "brand-secondary-light": primitiveColors.steel[300],
-  "brand-secondary-dark": primitiveColors.steel[700],
-  "brand-secondary-subtle": "rgba(64, 109, 135, 0.12)",
-  "brand-secondary-hover": primitiveColors.steel[400],
-  "brand-secondary-active": primitiveColors.steel[300],
+  "brand-primary-hover": primitiveRamps.orange[300],
+  "brand-primary-active": primitiveRamps.orange[200],
+  "brand-secondary": primitiveRamps.cyan[600],
+  "brand-secondary-light": primitiveRamps.cyan[500],
+  "brand-secondary-dark": primitiveRamps.cyan[700],
+  "brand-secondary-subtle": "rgba(48, 123, 155, 0.12)",
+  "brand-secondary-hover": primitiveRamps.cyan[500],
+  "brand-secondary-active": primitiveRamps.cyan[400],
   // Text on brand backgrounds
   "on-brand-primary": primitiveColors.white,
   "on-brand-secondary": primitiveColors.white,
   // Status colors
-  "status-success": primitiveColors.teal[500],
-  "status-success-light": primitiveColors.teal[400],
-  "status-success-dark": primitiveColors.teal[700],
-  "status-success-subtle": "rgba(20, 184, 166, 0.12)",
-  "status-error": primitiveColors.red[600],
-  "status-error-light": primitiveColors.red[400],
-  "status-error-dark": primitiveColors.red[700],
+  "status-success": primitiveRamps.green[300],
+  "status-success-light": primitiveRamps.green[200],
+  "status-success-dark": primitiveRamps.green[600],
+  "status-success-subtle": "rgba(46, 213, 115, 0.12)",
+  "status-error": primitiveRamps.red[600],
+  "status-error-light": primitiveRamps.red[500],
+  "status-error-dark": primitiveRamps.red[700],
   "status-error-subtle": "rgba(209, 67, 67, 0.12)",
-  "status-warning": primitiveColors.amber[500],
-  "status-warning-light": primitiveColors.amber[400],
-  "status-warning-dark": primitiveColors.amber[600],
-  "status-warning-subtle": "rgba(255, 176, 32, 0.12)",
-  "status-info": primitiveColors.sky[500],
-  "status-info-light": primitiveColors.sky[400],
-  "status-info-dark": primitiveColors.sky[700],
+  "status-error-vivid": primitiveColors.redVivid[500],
+  "status-error-vivid-light": primitiveColors.redVivid[400],
+  "status-error-vivid-dark": primitiveColors.redVivid[700],
+  "status-error-vivid-subtle": "rgba(255, 71, 87, 0.12)",
+  "status-warning": primitiveRamps.amber[300],
+  "status-warning-light": primitiveRamps.amber[200],
+  "status-warning-dark": primitiveRamps.amber[500],
+  "status-warning-subtle": "rgba(249, 180, 21, 0.12)",
+  "status-info": primitiveRamps.blue[500],
+  "status-info-light": primitiveRamps.blue[300],
+  "status-info-dark": primitiveRamps.blue[600],
   "status-info-subtle": "rgba(33, 150, 243, 0.12)",
   // Text on status backgrounds
   "on-status-success": primitiveColors.white,
@@ -708,29 +938,31 @@ var semanticColorsDark = {
   "text-link-hover": primitiveColors.blue[400],
   // Surface colors - dark backgrounds
   "surface-base": primitiveColors.charcoal[700],
-  // #161616 - main surface
+  // main surface
   "surface-elevated": primitiveColors.charcoal[600],
-  // #191919 - elevated surface
+  // elevated surface
   "surface-raised": primitiveColors.charcoal[500],
-  // #1C1C1C - raised surface
+  // raised surface
   "surface-overlay": primitiveColors.charcoal[600],
-  // #191919 - overlay surface
+  // overlay surface
   "surface-input": primitiveColors.charcoal[600],
-  // #191919 - input surface
+  // input surface
   // Background colors
   "background-base": primitiveColors.charcoal[900],
-  // #101010 - darkest charcoal
+  // darkest charcoal
   "background-default": primitiveColors.charcoal[700],
-  // #161616 - main background
+  // main background
   "background-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle background
+  // subtle background
   // Border colors
   "border-default": primitiveColors.charcoal[400],
-  // #1F1F1F - default border
+  // default border
   "border-subtle": primitiveColors.charcoal[500],
-  // #1C1C1C - subtle border
+  // subtle border
   "border-strong": primitiveColors.charcoal[300],
-  // #2C2C2C - strong border
+  // strong border
+  "border-prominent": primitiveColors.charcoal[200],
+  // high-visibility divider
   "border-focus": "#828DF8",
   "border-input": primitiveColors.neutral[600],
   "border-input-hover": primitiveColors.neutral[500],
@@ -745,7 +977,7 @@ var semanticColorsDark = {
   "interactive-disabled-text": "rgba(255, 255, 255, 0.26)",
   // Divider
   "divider": primitiveColors.charcoal[400],
-  // #1F1F1F - divider color
+  // divider color
   // Avatar default
   "avatar-background": primitiveColors.neutral[600],
   "avatar-text": primitiveColors.white
@@ -1211,10 +1443,11 @@ var PasswordInput = React24.forwardRef(function PasswordInput2({ showIcon, hideI
 var themeIndependentCSSVars = {
   // RGB decomposed values for glow shadows
   "--color-brand-primary-rgb": "255, 121, 0",
-  "--color-brand-secondary-rgb": "64, 109, 135",
-  "--color-status-success-rgb": "20, 184, 166",
+  "--color-brand-secondary-rgb": "48, 123, 155",
+  "--color-status-success-rgb": "46, 213, 115",
   "--color-status-error-rgb": "209, 67, 67",
-  "--color-status-warning-rgb": "255, 176, 32",
+  "--color-status-error-vivid-rgb": "255, 71, 87",
+  "--color-status-warning-rgb": "249, 180, 21",
   "--color-status-info-rgb": "33, 150, 243",
   "--color-background-base-rgb": "16, 16, 16",
   // Font families
@@ -1249,6 +1482,10 @@ var lightThemeCSSVars = {
   "--color-status-warning-subtle": semanticColorsLight["status-warning-subtle"],
   "--color-status-info": semanticColorsLight["status-info"],
   "--color-status-info-subtle": semanticColorsLight["status-info-subtle"],
+  "--color-status-error-vivid": semanticColorsLight["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsLight["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsLight["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsLight["status-error-vivid-subtle"],
   "--color-text-primary": semanticColorsLight["text-primary"],
   "--color-text-secondary": semanticColorsLight["text-secondary"],
   "--color-text-tertiary": semanticColorsLight["text-tertiary"],
@@ -1264,6 +1501,7 @@ var lightThemeCSSVars = {
   "--color-border-default": semanticColorsLight["border-default"],
   "--color-border-subtle": semanticColorsLight["border-subtle"],
   "--color-border-strong": semanticColorsLight["border-strong"],
+  "--color-border-prominent": semanticColorsLight["border-prominent"],
   "--color-border-focus": semanticColorsLight["border-focus"],
   "--color-interactive-hover": semanticColorsLight["interactive-hover"],
   "--color-interactive-focus": semanticColorsLight["interactive-focus"],
@@ -1340,6 +1578,10 @@ var darkThemeCSSVars = {
   "--color-status-warning-subtle": semanticColorsDark["status-warning-subtle"],
   "--color-status-info": semanticColorsDark["status-info"],
   "--color-status-info-subtle": semanticColorsDark["status-info-subtle"],
+  "--color-status-error-vivid": semanticColorsDark["status-error-vivid"],
+  "--color-status-error-vivid-light": semanticColorsDark["status-error-vivid-light"],
+  "--color-status-error-vivid-dark": semanticColorsDark["status-error-vivid-dark"],
+  "--color-status-error-vivid-subtle": semanticColorsDark["status-error-vivid-subtle"],
   "--color-text-primary": semanticColorsDark["text-primary"],
   "--color-text-secondary": semanticColorsDark["text-secondary"],
   "--color-text-tertiary": semanticColorsDark["text-tertiary"],
@@ -1355,6 +1597,7 @@ var darkThemeCSSVars = {
   "--color-border-default": semanticColorsDark["border-default"],
   "--color-border-subtle": semanticColorsDark["border-subtle"],
   "--color-border-strong": semanticColorsDark["border-strong"],
+  "--color-border-prominent": semanticColorsDark["border-prominent"],
   "--color-border-focus": semanticColorsDark["border-focus"],
   "--color-interactive-hover": semanticColorsDark["interactive-hover"],
   "--color-interactive-focus": semanticColorsDark["interactive-focus"],
@@ -2163,6 +2406,17 @@ function resolveColor(token, mode = "dark") {
   return reactNative.Platform.OS === "web" ? `var(--color-${token})` : getSemanticColors(mode)[token];
 }
 
+// src/theme/gradients.ts
+function linearGradient(from, to, angle = 180, mode = "dark") {
+  return {
+    backgroundImage: `linear-gradient(${angle}deg, ${resolveColor(from, mode)}, ${resolveColor(to, mode)})`
+  };
+}
+var surfaceGradient = {
+  /** Chrome bands (top bar, headers): elevated → base, a subtle dark wash. */
+  chrome: (mode = "dark") => linearGradient("surface-elevated", "background-base", 180, mode)
+};
+
 // src/theme/presets/apply.ts
 function colorKeyToVar(key) {
   return `--color-${key}`;
@@ -2537,7 +2791,8 @@ var colorStyles = {
   success: "bg-status-success",
   error: "bg-status-error",
   warning: "bg-status-warning",
-  info: "bg-status-info"
+  info: "bg-status-info",
+  "error-vivid": "bg-status-error-vivid"
 };
 function Indicator({
   size = "sm",
@@ -2545,14 +2800,40 @@ function Indicator({
   customColor,
   glow = false,
   ring = false,
+  pulse = false,
   className,
   style,
   ...props
 }) {
+  const pulseMode = pulse === true ? "opacity" : pulse || false;
+  const colorClass = !customColor ? colorStyles[color] : void 0;
+  const colorStyle = customColor ? { backgroundColor: customColor } : void 0;
+  if (pulseMode === "ping") {
+    return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("relative", sizeStyles3[size], className), style, ...props, children: [
+      /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          className: cn("absolute inset-0 rounded-full animate-ping", colorClass),
+          style: colorStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        reactNative.View,
+        {
+          className: cn(
+            "relative rounded-full",
+            sizeStyles3[size],
+            colorClass,
+            ring && "border-2 border-background-base"
+          ),
+          style: colorStyle
+        }
+      )
+    ] });
+  }
   const dynamicStyle = {
     ...typeof style === "object" ? style : {},
-    ...customColor ? { backgroundColor: customColor } : {},
-    ...glow && !customColor ? {} : {},
+    ...colorStyle ?? {},
     ...glow && customColor ? { boxShadow: `0 0 6px ${customColor}` } : {}
   };
   return /* @__PURE__ */ jsx(
@@ -2561,12 +2842,14 @@ function Indicator({
       className: cn(
         "rounded-full shrink-0",
         sizeStyles3[size],
-        !customColor && colorStyles[color],
+        colorClass,
+        pulseMode === "opacity" && "animate-pulse",
         ring && "border-2 border-background-base",
-        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(20,184,166,0.6)]",
+        glow && !customColor && color === "success" && "shadow-[0_0_6px_rgba(46,213,115,0.6)]",
         glow && !customColor && color === "error" && "shadow-[0_0_6px_rgba(239,68,68,0.6)]",
         glow && !customColor && color === "warning" && "shadow-[0_0_6px_rgba(245,158,11,0.6)]",
         glow && !customColor && color === "primary" && "shadow-[0_0_6px_rgba(255,121,0,0.6)]",
+        glow && !customColor && color === "error-vivid" && "shadow-[0_0_6px_rgba(255,71,87,0.6)]",
         className
       ),
       style: Object.keys(dynamicStyle).length > 0 ? dynamicStyle : style,
@@ -2647,6 +2930,13 @@ function Badge({
 function BadgeText({ children, className }) {
   return /* @__PURE__ */ jsx(reactNative.Text, { className: cn("text-inherit font-medium", className), children });
 }
+
+// src/theme/extracted-colors-ui.ts
+var SPINNER_PRIMARY = primitiveRamps.cyan[600];
+var SPINNER_SECONDARY = primitiveRamps.green[400];
+var AVATAR_CATEGORICAL_COLORS = categoricalPalette.default;
+
+// src/components/ui/spinner/Spinner.tsx
 var sizeMap = {
   sm: "small",
   md: "small",
@@ -2654,8 +2944,8 @@ var sizeMap = {
   xl: "large"
 };
 var colorMap = {
-  primary: "#5048E5",
-  secondary: "#10B981",
+  primary: SPINNER_PRIMARY,
+  secondary: SPINNER_SECONDARY,
   white: "#FFFFFF",
   default: "#6B7280"
 };
@@ -2691,15 +2981,7 @@ function Spinner({
 }
 
 // src/utils/avatar-color.ts
-var AVATAR_COLORS = [
-  "#FF6B6B",
-  "#4ECDC4",
-  "#45B7D1",
-  "#96CEB4",
-  "#FFEAA7",
-  "#DDA0DD",
-  "#98D8C8"
-];
+var AVATAR_COLORS = AVATAR_CATEGORICAL_COLORS;
 function avatarColor(name) {
   let hash = 0;
   for (let i = 0; i < name.length; i++) {
@@ -4344,7 +4626,7 @@ function ToolbarButton({
   const selected = isActive === void 0 ? isOpen : isActive;
   const showActive = isActive !== false;
   const getIconColor = () => {
-    if (isActive === true) return "#FF7900";
+    if (isActive === true) return resolveColor("brand-primary");
     return showActive ? "#FFFFFF" : "#D1D1D1";
   };
   const getNeumorphicStyle = () => {
@@ -4987,7 +5269,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = React24.useCallback((id) => {
-    setToasts((prev) => prev.filter((t2) => t2.id !== id));
+    setToasts((prev) => prev.filter((t12) => t12.id !== id));
   }, []);
   const removeAllToasts = React24.useCallback(() => {
     setToasts([]);
@@ -5869,7 +6151,10 @@ var variantStyles4 = {
   subtitle2: "font-body text-sm font-medium leading-normal",
   caption: "font-body text-xs font-normal leading-loose",
   overline: "font-body text-xs font-semibold uppercase tracking-widest leading-relaxed",
-  button: "font-sans text-sm font-semibold leading-relaxed"
+  button: "font-sans text-sm font-semibold leading-relaxed",
+  // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
+  mono: "font-mono text-xs font-normal leading-normal",
+  monoLabel: "font-mono text-xs font-bold uppercase tracking-wide leading-normal"
 };
 var colorStyles7 = {
   primary: "text-text-primary",
@@ -6558,7 +6843,7 @@ var colorStyles8 = {
   tertiary: "text-text-tertiary",
   inherit: ""
 };
-function formatDate(value, format, isUTC) {
+function formatDate(value, format, isUTC, hour12, seconds) {
   const date = value instanceof Date ? value : new Date(value);
   if (isNaN(date.getTime())) {
     return "Invalid Date";
@@ -6608,6 +6893,12 @@ function formatDate(value, format, isUTC) {
   if (isUTC) {
     options.timeZone = "UTC";
   }
+  if (hour12 !== void 0 && (options.hour !== void 0 || options.minute !== void 0)) {
+    options.hour12 = hour12;
+  }
+  if (seconds && options.hour !== void 0) {
+    options.second = "2-digit";
+  }
   return new Intl.DateTimeFormat(void 0, options).format(date);
 }
 function getRelativeTime(date) {
@@ -6677,16 +6968,28 @@ function DateTime({
   format = "datetime",
   customFormat,
   isUTC = false,
+  hour12,
+  seconds,
+  variant,
+  live = false,
+  refreshMs = 1e3,
   fallback = "-",
   color = "inherit",
   className,
   ...props
 }) {
-  if (value === null || value === void 0) {
-    return /* @__PURE__ */ jsx(reactNative.Text, { className: cn(colorStyles8[color], className), ...props, children: fallback });
+  const [now, setNow] = React24.useState(() => Date.now());
+  React24.useEffect(() => {
+    if (!live) return;
+    const id = setInterval(() => setNow(Date.now()), refreshMs);
+    return () => clearInterval(id);
+  }, [live, refreshMs]);
+  const effectiveValue = live ? now : value;
+  const text = effectiveValue === null || effectiveValue === void 0 ? fallback : formatDate(effectiveValue, format, isUTC, hour12, seconds);
+  if (variant) {
+    return /* @__PURE__ */ jsx(Typography, { variant, color, className, ...props, children: text });
   }
-  const formattedDate = formatDate(value, format, isUTC);
-  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn(colorStyles8[color], className), ...props, children: formattedDate });
+  return /* @__PURE__ */ jsx(reactNative.Text, { className: cn(colorStyles8[color], className), ...props, children: text });
 }
 function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-") {
   if (value === null || value === void 0) {
@@ -6822,58 +7125,6 @@ function BaseBadge({
   }
   return badge;
 }
-
-// src/components/custom/Workout/icons.tsx
-function DumbbellIcon({
-  size = 24,
-  color = "currentColor",
-  fill = "none",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M14.4 14.4 9.6 9.6" }),
-        /* @__PURE__ */ jsx("path", { d: "M18.657 21.485a2 2 0 1 1-2.829-2.828l-1.767 1.768a2 2 0 1 1-2.829-2.829l6.364-6.364a2 2 0 1 1 2.829 2.829l-1.768 1.767a2 2 0 1 1 2.828 2.829z" }),
-        /* @__PURE__ */ jsx("path", { d: "m21.5 21.5-1.4-1.4" }),
-        /* @__PURE__ */ jsx("path", { d: "M3.9 3.9 2.5 2.5" }),
-        /* @__PURE__ */ jsx("path", { d: "M6.404 12.768a2 2 0 1 1-2.829-2.829l1.768-1.767a2 2 0 1 1-2.828-2.829l2.828-2.828a2 2 0 1 1 2.829 2.828l1.767-1.768a2 2 0 1 1 2.829 2.829z" })
-      ]
-    }
-  );
-}
-function StarIcon({
-  size = 24,
-  color = "currentColor",
-  fill = "none",
-  strokeWidth = 2
-}) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill,
-      stroke: color,
-      strokeWidth,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" })
-    }
-  );
-}
-
-// src/components/custom/Workout/WeightBadge.tsx
 function WeightBadge({
   value,
   unit = "lbs",
@@ -6887,7 +7138,7 @@ function WeightBadge({
   ...props
 }) {
   const config = baseBadgeSizeConfig[size];
-  const textColor = isPr ? "#FF7900" : "#9CA3AF";
+  const textColor = isPr ? getSemanticColors("dark")["brand-primary"] : "#9CA3AF";
   const iconColor = textColor;
   const repMaxClause = reps != null ? `${reps} rep max` : "Estimated one rep max";
   const deltaLabel = delta != null ? `, ${delta >= 0 ? "+" : ""}${delta}% change` : "";
@@ -6946,7 +7197,7 @@ function WeightBadge({
               fontFamily: '"Space Grotesk", sans-serif',
               fontSize: config.fontSize,
               marginLeft: 4,
-              color: delta >= 0 ? "#4caf50" : "#ef5350"
+              color: delta >= 0 ? getSemanticColors("dark")["result-improve"] : getSemanticColors("dark")["result-degrade"]
             },
             testID: "weight-badge-delta",
             children: [
@@ -6960,6 +7211,7 @@ function WeightBadge({
     }
   );
 }
+var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
 var typeLabels = {
   e1rm: "PR e1RM",
   weight: "PR Weight",
@@ -7003,7 +7255,7 @@ function PrBadge({
       accessibilityLabel: `Personal record: ${resolvedLabel}`,
       testID: "pr-badge-star",
       ...props,
-      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: "#FF7900", fill: "#FF7900", strokeWidth: 2 })
+      children: /* @__PURE__ */ jsx(StarIcon, { size: 14, color: BRAND_PRIMARY, fill: BRAND_PRIMARY, strokeWidth: 2 })
     }
   ) : /* @__PURE__ */ jsx(
     BaseBadge,
@@ -7017,7 +7269,7 @@ function PrBadge({
         {
           style: {
             fontSize: 12,
-            color: "#FF7900",
+            color: BRAND_PRIMARY,
             fontWeight: "700",
             fontFamily: "Inter, sans-serif"
           },
@@ -7042,17 +7294,18 @@ function PrBadge({
   }
   return badge;
 }
+var t = getSemanticColors("dark");
 var solidVariantColors = {
-  success: "#14B8A6",
-  warning: "#FFB020",
-  error: "#D14343",
+  success: t["status-success"],
+  warning: t["status-warning"],
+  error: t["status-error"],
   neutral: "#6B7280"
 };
 var ringVariantStyles = {
   "on-track": {
-    backgroundColor: "rgba(20,184,166,0.15)",
+    backgroundColor: "rgba(46,213,115,0.15)",
     borderWidth: 1,
-    borderColor: "rgba(20,184,166,0.3)"
+    borderColor: "rgba(46,213,115,0.3)"
   },
   deviation: {
     backgroundColor: "rgba(245,158,11,0.15)",
@@ -7067,11 +7320,11 @@ var ringVariantStyles = {
   }
 };
 var glowStyles = {
-  success: { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  success: { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   warning: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   error: { boxShadow: "0 0 4px rgba(239,68,68,0.4)" },
   neutral: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" },
-  "on-track": { boxShadow: "0 0 4px rgba(20,184,166,0.4)" },
+  "on-track": { boxShadow: "0 0 4px rgba(46,213,115,0.4)" },
   deviation: { boxShadow: "0 0 4px rgba(245,158,11,0.4)" },
   future: { boxShadow: "0 0 4px rgba(107,114,128,0.4)" }
 };
@@ -7085,8 +7338,8 @@ var iconColors2 = {
   warning: "#6B4000",
   error: "#5C1A1A",
   neutral: "#D1D5DB",
-  "on-track": "#14B8A6",
-  deviation: "#FFB020",
+  "on-track": t["status-success"],
+  deviation: t["status-warning"],
   future: "#6B7280"
 };
 var sizeDimensions = {
@@ -7173,17 +7426,41 @@ var WORKOUT_TOKENS = {
   // Canonical 4-band performance scale — the single source for BOTH the
   // VelocityStrip zone bars and the SetRow RPE color (TD-03.43). The direction
   // is intentionally inverted between the two consumers: for velocity, green =
-  // fastest/best; for RPE, green = easiest. Each component maps its own
-  // thresholds onto these four colors. Kept as vivid data-viz values (distinct
-  // from the muted status tokens) and theme-independent, so — like the heatmap
-  // scale below — they are consumed inline as a JS import rather than CSS vars.
-  // A JS import also resolves on native RN, unlike var(--…) strings.
+  // fastest/best; for RPE, green = easiest. This is the [0,1,2,4] subsample of
+  // the canonical `sequentialEffort` primitive. The `orange` key is the band
+  // label. Consumed inline (RN).
   scale: {
-    green: "#2ed573",
-    yellow: "#ffd43b",
-    orange: "#ffa502",
-    red: "#ff4757"
+    green: sequentialEffort[0],
+    yellow: sequentialEffort[1],
+    orange: sequentialEffort[2],
+    // gold band
+    red: sequentialEffort[4]
+  },
+  // BodyMap volume heatmap — the canonical `divergingScale` (under → optimal →
+  // over): a true diverging shape with a light green center, cool-blue under-
+  // trained end and warm-red over-reaching end (colorblind-robust in lightness).
+  heatmap: {
+    // no training data
+    under: divergingScale[0],
+    // below MEV
+    maintenance: divergingScale[1],
+    // MEV to MAV
+    productive: divergingScale[2],
+    // optimal center — MAV to MRV
+    approaching: divergingScale[3],
+    // near MRV
+    over: divergingScale[4]
+    // over MRV
   },
+  // Surface and border colors were removed here: those flip with the theme, so
+  // components use the CSS custom properties (var(--color-surface-*/border-*))
+  // directly. Only theme-independent data-viz values remain below.
+  // Intensity bar specific — over-target tiers deepen along the red ramp.
+  intensity: {
+    over1: primitiveRamps.red[600],
+    // matches status-error
+    over2: primitiveRamps.red[700],
+    over3: primitiveRamps.red[800]},
   // Placeholder strip
   placeholder: {
     fill: "#3A3A3A"
@@ -7358,7 +7635,7 @@ function getLuminance(color) {
 function getContrastText(backgroundColor) {
   return getLuminance(backgroundColor) === "light" ? "#000000" : "#FFFFFF";
 }
-var t = getSemanticColors("dark");
+var t2 = getSemanticColors("dark");
 var TEMPO_PACING = {
   behindThresholdPct: 0.15,
   minPhaseDurationMs: 500
@@ -7375,9 +7652,9 @@ function getTempoFillPct(elapsedMs, targetMs) {
 }
 var PHASE_ORDER = ["concentric", "hold", "eccentric"];
 var PHASE_CONFIG = {
-  concentric: { label: "Con", color: t["status-success"], flex: 2 },
-  hold: { label: "Hold", color: t["brand-primary"], flex: 1 },
-  eccentric: { label: "Ecc", color: t["status-warning"], flex: 3 }
+  concentric: { label: "Con", color: t2["status-success"], flex: 2 },
+  hold: { label: "Hold", color: t2["brand-primary"], flex: 1 },
+  eccentric: { label: "Ecc", color: t2["status-warning"], flex: 3 }
 };
 function TempoBar({
   activePhase,
@@ -7390,7 +7667,7 @@ function TempoBar({
   return /* @__PURE__ */ jsxs(reactNative.View, { className, testID: "tempo-bar", ...props, children: [
     /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
-      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, color: t["text-disabled"] }, children: config.label }) }, phase);
+      return /* @__PURE__ */ jsx(reactNative.View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(reactNative.Text, { style: { fontSize: 10, color: t2["text-disabled"] }, children: config.label }) }, phase);
     }) }),
     /* @__PURE__ */ jsx(reactNative.View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
@@ -7427,7 +7704,7 @@ function ActiveSegment({
   targetMs
 }) {
   const pacing = getTempoPacingState(phaseElapsedMs, targetMs);
-  const barColor = pacing === "behind" ? t["status-error"] : config.color;
+  const barColor = pacing === "behind" ? t2["status-error"] : config.color;
   const fillPct = getTempoFillPct(phaseElapsedMs, targetMs);
   const label = targetMs ? `${formatDuration(phaseElapsedMs)} / ${formatDuration(targetMs)}` : formatDuration(phaseElapsedMs);
   return /* @__PURE__ */ jsxs(reactNative.View, { style: { height: "100%", position: "relative" }, testID: `tempo-segment-active-${config.label}`, children: [
@@ -7491,15 +7768,14 @@ function formatDuration(ms) {
 }
 
 // src/components/custom/Workout/TempoDisplay.tsx
+var t3 = getSemanticColors("dark");
 var INTER = "Inter, sans-serif";
 var TEXT_TERTIARY = "#6B7280";
-var STATUS_ERROR = "#D14343";
+var STATUS_ERROR = t3["status-error"];
 var phaseColors = {
-  eccentric: "#FFB020",
-  // status-warning (amber)
+  eccentric: t3["status-warning"],
   pauseBottom: TEXT_TERTIARY,
-  concentric: "#14B8A6",
-  // status-success (teal)
+  concentric: t3["status-success"],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY
 };
@@ -7764,12 +8040,13 @@ function TempoDisplay({
     }
   );
 }
+var t4 = getSemanticColors("dark");
 function getDotColor(deviation) {
   const abs = Math.abs(deviation);
-  if (deviation < -0.3) return "#14B8A6";
+  if (deviation < -0.3) return t4["status-success"];
   if (abs <= 0.3) return "#6B7280";
-  if (abs <= 0.7) return "#FFB020";
-  return "#D14343";
+  if (abs <= 0.7) return t4["status-warning"];
+  return t4["status-error"];
 }
 function getDeviationDescription(deviation) {
   if (deviation < -0.3) return "lighter than planned";
@@ -7811,7 +8088,7 @@ function DeviationBar({
               width: resolvedWidth,
               borderRadius: 3,
               // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
-              backgroundImage: "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)"
+              backgroundImage: "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)"
             }
           }
         ),
@@ -7837,23 +8114,24 @@ function DeviationBar({
     }
   );
 }
+var t5 = getSemanticColors("dark");
 var TRACK_BG = "#333333";
 var LABEL_COLOR = "#6B7280";
 var TARGET_LINE_COLOR = "rgba(33, 150, 243, 0.5)";
 var AT_TARGET_GLOW = "0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)";
 var ZONE = {
-  building: "#14B8A6",
-  // teal   — below target ramp-up
-  approaching: "#FFB020",
-  // amber  — nearing target
-  target: "#FF7900",
-  // brand  — exactly at target
-  over1: "#D14343",
-  // red    — mild over-target
-  over2: "#A62626",
-  // deep red — moderate over-target
-  over3: "#7A1C1C"
-  // darkest red — severe over-target
+  building: t5["status-success"],
+  // below target ramp-up
+  approaching: t5["status-warning"],
+  // nearing target
+  target: t5["brand-primary"],
+  // exactly at target
+  over1: t5["status-error"],
+  // mild over-target
+  over2: WORKOUT_TOKENS.intensity.over2,
+  // moderate over-target
+  over3: WORKOUT_TOKENS.intensity.over3
+  // severe over-target
 };
 var BULGE_SIZE = { 1: 8, 2: 10, 3: 11 };
 function zoneForPct(pct) {
@@ -8009,29 +8287,38 @@ function IntensityBar({
     }
   );
 }
+
+// src/theme/extracted-colors-dataviz.ts
+var DATAVIZ_CATEGORICAL_PALETTE = categoricalPalette.default;
+var MESO_ACCENT_GRADIENT_DARK = primitiveRamps.orange[500];
+var MESO_ACCENT_GRADIENT_LIGHT = primitiveRamps.orange[300];
+var WORKOUT_PILL_DELOAD = primitiveRamps.magenta[600];
+
+// src/components/custom/Workout/WorkoutPill.tsx
+var t6 = getSemanticColors("dark");
 var statusBgColors = {
-  completed: "rgba(20,184,166,0.15)",
+  completed: "rgba(46,213,115,0.15)",
   current: "rgba(255,121,0,0.15)",
   next: "transparent",
   upcoming: "#1C1C1C",
   missed: "rgba(209,67,67,0.1)",
-  deload: "rgba(147,51,234,0.15)"
+  deload: "rgba(186,41,150,0.15)"
 };
 var statusBorderStyles = {
-  completed: { borderWidth: 1, borderColor: "rgba(20,184,166,0.3)" },
+  completed: { borderWidth: 1, borderColor: "rgba(46,213,115,0.3)" },
   current: { borderWidth: 1, borderColor: "rgba(255,121,0,0.3)" },
   next: { borderWidth: 1, borderColor: "rgba(255,121,0,0.4)" },
   upcoming: { borderWidth: 1, borderColor: "#1F1F1F" },
   missed: { borderWidth: 1, borderColor: "rgba(209,67,67,0.25)" },
-  deload: { borderWidth: 1, borderColor: "rgba(147,51,234,0.3)" }
+  deload: { borderWidth: 1, borderColor: "rgba(186,41,150,0.3)" }
 };
 var textColors = {
-  completed: "#14B8A6",
-  current: "#FF7900",
-  next: "#FF7900",
+  completed: t6["status-success"],
+  current: t6["brand-primary"],
+  next: t6["brand-primary"],
   upcoming: "#6B7280",
   missed: "rgba(209,67,67,0.7)",
-  deload: "#9333ea"
+  deload: WORKOUT_PILL_DELOAD
 };
 function usePulse(enabled) {
   const [opacity] = React24.useState(() => new reactNative.Animated.Value(1));
@@ -8506,12 +8793,13 @@ function VelocityStrip({
   }
   return stripContent;
 }
+var t7 = getSemanticColors("dark");
 var dotColorMap = {
   untrained: "#2C2C2C",
-  behind: "#406D87",
-  ontrack: "#14B8A6",
-  target: "#FF7900",
-  over: "#D14343"
+  behind: t7["brand-secondary"],
+  ontrack: t7["status-success"],
+  target: t7["brand-primary"],
+  over: t7["status-error"]
 };
 function MuscleGroupChip({
   name,
@@ -8583,7 +8871,7 @@ function MuscleGroupChip({
   }
   return content;
 }
-var BRAND_PRIMARY = "#FF7900";
+var BRAND_PRIMARY2 = getSemanticColors("dark")["brand-primary"];
 function normalizeData(data, height) {
   if (data.length === 0) return [];
   const min = Math.min(...data);
@@ -8620,7 +8908,7 @@ function Sparkline({
       }
     );
   }
-  const resolvedColor = color ?? BRAND_PRIMARY;
+  const resolvedColor = color ?? BRAND_PRIMARY2;
   const normalized = normalizeData(data, height);
   const stepX = data.length > 1 ? width / (data.length - 1) : 0;
   const dotSize = 3;
@@ -8799,7 +9087,7 @@ function SetRow({
                   fontSize: 10,
                   fontWeight: "700",
                   fontFamily: "Inter, sans-serif",
-                  color: "#ffa502",
+                  color: WORKOUT_TOKENS.scale.orange,
                   backgroundColor: "rgba(255,165,2,0.12)",
                   paddingVertical: 1,
                   paddingHorizontal: 5,
@@ -8965,7 +9253,7 @@ function SetRow({
     }
   );
 }
-var BRAND_PRIMARY2 = "#FF7900";
+var BRAND_PRIMARY3 = getSemanticColors("dark")["brand-primary"];
 var INPUT_CLASSNAME = "bg-surface-raised border-border-strong text-text-primary";
 var inputStyle = {
   fontSize: 14,
@@ -9094,7 +9382,7 @@ function InputBar({
             onPress: onRecord,
             disabled: !canRecord,
             style: ({ pressed }) => ({
-              backgroundColor: BRAND_PRIMARY2,
+              backgroundColor: BRAND_PRIMARY3,
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 16,
@@ -9121,7 +9409,7 @@ function InputBar({
     }
   );
 }
-var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -9227,7 +9515,7 @@ function RestTimer({
               {
                 style: {
                   height: "100%",
-                  backgroundColor: BRAND_PRIMARY3,
+                  backgroundColor: BRAND_PRIMARY4,
                   borderRadius: 2,
                   width: `${progressPct}%`
                 },
@@ -9284,7 +9572,7 @@ function RestTimer({
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "600",
-                    color: BRAND_PRIMARY3
+                    color: BRAND_PRIMARY4
                   },
                   children: "Skip"
                 }
@@ -9677,7 +9965,7 @@ function ExerciseCard(props) {
 }
 var DEFAULTS = {
   label: "SS",
-  color: "#FF7900",
+  color: getSemanticColors("dark")["brand-primary"],
   bgBase: "#101010"
 };
 function SupersetWrapper({
@@ -9728,9 +10016,9 @@ function SupersetWrapper({
     }
   );
 }
-var BRAND_PRIMARY4 = "#FF7900";
+var BRAND_PRIMARY5 = getSemanticColors("dark")["brand-primary"];
 var segmentBgColors = {
-  completed: "rgba(20,184,166,0.3)",
+  completed: "rgba(46,213,115,0.3)",
   current: "rgba(255,121,0,0.5)",
   upcoming: "rgba(255,255,255,0.06)"
 };
@@ -9780,7 +10068,7 @@ function MesoSegment({ meso, isActive, onPress }) {
             },
             isActive ? {
               borderWidth: 2,
-              borderColor: BRAND_PRIMARY4,
+              borderColor: BRAND_PRIMARY5,
               transform: [{ scale: 1.02 }, { scale: pressScale }]
             } : void 0
           ],
@@ -9794,7 +10082,7 @@ function MesoSegment({ meso, isActive, onPress }) {
                 top: 0,
                 bottom: 0,
                 width: `${progress * 100}%`,
-                backgroundColor: BRAND_PRIMARY4
+                backgroundColor: BRAND_PRIMARY5
               },
               testID: `meso-segment-fill-${meso.id}`
             }
@@ -9835,7 +10123,7 @@ function MesoProgressBar({
     }
   );
 }
-var BRAND_PRIMARY5 = "#FF7900";
+var BRAND_PRIMARY6 = getSemanticColors("dark")["brand-primary"];
 function WeekRow({
   weekNumber,
   totalWeeks,
@@ -9855,12 +10143,12 @@ function WeekRow({
     gap: 12
   };
   if (isDeload) {
-    rowStyle.backgroundColor = "rgba(147,51,234,0.06)";
+    rowStyle.backgroundColor = "rgba(186,41,150,0.06)";
   }
   if (isCurrent) {
     rowStyle.backgroundColor = "rgba(255,121,0,0.04)";
     rowStyle.borderLeftWidth = 2;
-    rowStyle.borderLeftColor = BRAND_PRIMARY5;
+    rowStyle.borderLeftColor = BRAND_PRIMARY6;
   }
   return /* @__PURE__ */ jsxs(
     reactNative.View,
@@ -9884,7 +10172,7 @@ function WeekRow({
                     width: 6,
                     height: 6,
                     borderRadius: 3,
-                    backgroundColor: BRAND_PRIMARY5
+                    backgroundColor: BRAND_PRIMARY6
                   },
                   accessibilityElementsHidden: true,
                   testID: "week-row-current-dot"
@@ -9898,7 +10186,7 @@ function WeekRow({
                     fontSize: 13,
                     fontWeight: "700",
                     fontFamily: "Inter, sans-serif",
-                    color: isCurrent ? BRAND_PRIMARY5 : void 0
+                    color: isCurrent ? BRAND_PRIMARY6 : void 0
                   },
                   accessibilityElementsHidden: true,
                   children: `W${weekNumber}`
@@ -9937,9 +10225,10 @@ function WeekRow({
     }
   );
 }
+var t8 = getSemanticColors("dark");
 var COLORS = {
-  statusSuccess: "#14B8A6",
-  brandPrimary: "#FF7900",
+  statusSuccess: t8["status-success"],
+  brandPrimary: t8["brand-primary"],
   borderDefault: "#1F1F1F",
   brandPrimarySubtle: "rgba(255,121,0,0.06)"
 };
@@ -10081,11 +10370,11 @@ function WorkoutCard({
     }
   );
 }
-var BRAND_PRIMARY6 = "#FF7900";
-var BRAND_PRIMARY_DARK = "#C45E00";
-var BRAND_PRIMARY_LIGHT = "#FFB066";
+var BRAND_PRIMARY7 = getSemanticColors("dark")["brand-primary"];
+var BRAND_PRIMARY_DARK = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT = MESO_ACCENT_GRADIENT_LIGHT;
 var BORDER_DEFAULT = "#1F1F1F";
-var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY6, BRAND_PRIMARY_LIGHT];
+var ACCENT_STOPS = [BRAND_PRIMARY_DARK, BRAND_PRIMARY7, BRAND_PRIMARY_LIGHT];
 function heatmapColor(percentage) {
   const clamped = Math.max(0, Math.min(100, percentage));
   const opacity = 0.12 + clamped / 100 * 0.78;
@@ -10120,7 +10409,7 @@ function MesoCard({
   }, [highlighted, highlight]);
   const borderColor = highlight.interpolate({
     inputRange: [0, 1],
-    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY6]
+    outputRange: [BORDER_DEFAULT, BRAND_PRIMARY7]
   });
   const header = /* @__PURE__ */ jsxs(reactNative.View, { style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }, testID: "meso-card-body", children: [
     /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
@@ -10180,7 +10469,7 @@ function MesoCard({
     {
       variant: "outline",
       elevation: 2,
-      borderColor: highlighted ? BRAND_PRIMARY6 : BORDER_DEFAULT,
+      borderColor: highlighted ? BRAND_PRIMARY7 : BORDER_DEFAULT,
       className,
       style: [
         { borderColor },
@@ -10237,9 +10526,9 @@ function MesoCard({
     }
   ) });
 }
-var BRAND_PRIMARY7 = "#FF7900";
-var RECENT_BORDER = "rgba(255,176,32,0.3)";
-var RECENT_GLOW = "0 0 12px rgba(255,176,32,0.06)";
+var BRAND_PRIMARY8 = getSemanticColors("dark")["brand-primary"];
+var RECENT_BORDER = "rgba(249,180,21,0.3)";
+var RECENT_GLOW = "0 0 12px rgba(249,180,21,0.06)";
 var BORDER_DEFAULT2 = resolveColor("border-default");
 var TYPE_LABELS = {
   e1rm: "e1RM",
@@ -10279,7 +10568,7 @@ function PrRecordRow({ record, index }) {
       },
       testID: `pr-history-modal-record-${index}`,
       children: [
-        /* @__PURE__ */ jsx(StarIcon, { size: 16, color: BRAND_PRIMARY7, fill: BRAND_PRIMARY7, strokeWidth: 2 }),
+        /* @__PURE__ */ jsx(StarIcon, { size: 16, color: BRAND_PRIMARY8, fill: BRAND_PRIMARY8, strokeWidth: 2 }),
         /* @__PURE__ */ jsx(
           reactNative.Text,
           {
@@ -10423,11 +10712,12 @@ function PrHistoryModal({
     }
   );
 }
-var BRAND_PRIMARY8 = "#FF7900";
+var t9 = getSemanticColors("dark");
+var BRAND_PRIMARY9 = t9["brand-primary"];
 var BRAND_PRIMARY_SUBTLE = "rgba(255,121,0,0.12)";
-var STATUS_SUCCESS = "#14B8A6";
-var STATUS_WARNING = "#FFB020";
-var STATUS_ERROR2 = "#D14343";
+var STATUS_SUCCESS = t9["status-success"];
+var STATUS_WARNING = t9["status-warning"];
+var STATUS_ERROR2 = t9["status-error"];
 var EMOJI_SETS = {
   sleep: ["\u{1F634}", "\u{1F610}", "\u{1F642}", "\u{1F60A}", "\u{1F929}"],
   soreness: ["\u{1F635}", "\u{1F623}", "\u{1F610}", "\u{1F642}", "\u{1F4AA}"],
@@ -10491,7 +10781,7 @@ function EmojiSlider({ factor }) {
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY8 : void 0,
+                borderColor: selected ? BRAND_PRIMARY9 : void 0,
                 backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : void 0,
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }]
@@ -10607,7 +10897,7 @@ function ReadinessCheck({
           marginTop: 16,
           width: "100%",
           alignItems: "center",
-          backgroundColor: BRAND_PRIMARY8,
+          backgroundColor: BRAND_PRIMARY9,
           borderRadius: 8,
           paddingVertical: 12,
           opacity: pressed ? 0.8 : 1
@@ -10617,18 +10907,19 @@ function ReadinessCheck({
     )
   ] }) });
 }
-var BRAND_PRIMARY9 = "#FF7900";
-var BRAND_PRIMARY_DARK2 = "#C45E00";
-var BRAND_PRIMARY_LIGHT2 = "#FFB066";
-var SUCCESS = "#14B8A6";
-var WARNING = "#FFB020";
-var ERROR = "#D14343";
-var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY9, BRAND_PRIMARY_LIGHT2];
+var t10 = getSemanticColors("dark");
+var BRAND_PRIMARY10 = t10["brand-primary"];
+var BRAND_PRIMARY_DARK2 = MESO_ACCENT_GRADIENT_DARK;
+var BRAND_PRIMARY_LIGHT2 = MESO_ACCENT_GRADIENT_LIGHT;
+var SUCCESS = t10["status-success"];
+var WARNING = t10["status-warning"];
+var ERROR = t10["status-error"];
+var ACCENT_STOPS2 = [BRAND_PRIMARY_DARK2, BRAND_PRIMARY10, BRAND_PRIMARY_LIGHT2];
 var CARD_GRADIENT = `linear-gradient(135deg, ${resolveColor("surface-elevated")} 0%, ${resolveColor("surface-raised")} 100%)`;
-var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(255,176,32,0.25) 50%, rgba(209,67,67,0.25) 100%)";
+var GAUGE_GRADIENT = "linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(249,180,21,0.25) 50%, rgba(209,67,67,0.25) 100%)";
 var STATUS_VARIANTS = {
-  success: { bg: "rgba(20,184,166,0.15)", border: "rgba(20,184,166,0.3)", text: SUCCESS },
-  warning: { bg: "rgba(255,176,32,0.15)", border: "rgba(255,176,32,0.3)", text: WARNING },
+  success: { bg: "rgba(46,213,115,0.15)", border: "rgba(46,213,115,0.3)", text: SUCCESS },
+  warning: { bg: "rgba(249,180,21,0.15)", border: "rgba(249,180,21,0.3)", text: WARNING },
   error: { bg: "rgba(209,67,67,0.15)", border: "rgba(209,67,67,0.25)", text: ERROR }
 };
 function clamp01(value) {
@@ -10920,9 +11211,9 @@ function MesoStatusCard({
             reactNative.View,
             {
               style: {
-                backgroundColor: "rgba(255,176,32,0.06)",
+                backgroundColor: "rgba(249,180,21,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(255,176,32,0.15)",
+                borderColor: "rgba(249,180,21,0.15)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -10948,9 +11239,9 @@ function MesoStatusCard({
               className: "flex-row items-center",
               style: {
                 gap: 8,
-                backgroundColor: "rgba(20,184,166,0.06)",
+                backgroundColor: "rgba(46,213,115,0.06)",
                 borderWidth: 1,
-                borderColor: "rgba(20,184,166,0.2)",
+                borderColor: "rgba(46,213,115,0.2)",
                 borderRadius: 8,
                 paddingVertical: 10,
                 paddingHorizontal: 12
@@ -10979,21 +11270,22 @@ function MesoStatusCard({
     }
   );
 }
-var BRAND_PRIMARY10 = "#FF7900";
+var sem = getSemanticColors("dark");
+var BRAND_PRIMARY11 = sem["brand-primary"];
 var PROJECTION_LINE_COLOR = resolveColor("text-tertiary");
-var STATUS_SUCCESS2 = "#14B8A6";
-var STATUS_ERROR3 = "#D14343";
-var STATUS_WARNING2 = "#FFB020";
+var STATUS_SUCCESS2 = sem["status-success"];
+var STATUS_ERROR3 = sem["status-error"];
+var STATUS_WARNING2 = sem["status-warning"];
 var GRID_LINE = "rgba(255,255,255,0.06)";
-var SUCCESS_PILL_BG = "rgba(20,184,166,0.10)";
-var SUCCESS_PILL_BORDER = "rgba(20,184,166,0.20)";
+var SUCCESS_PILL_BG = "rgba(46,213,115,0.10)";
+var SUCCESS_PILL_BORDER = "rgba(46,213,115,0.20)";
 var ERROR_PILL_BG = "rgba(209,67,67,0.10)";
 var ERROR_PILL_BORDER = "rgba(209,67,67,0.20)";
 var PLOT_LEFT = 26;
 var TOOLTIP_WIDTH = 124;
 function timeOf(dateStr) {
-  const t2 = Date.parse(dateStr);
-  return Number.isNaN(t2) ? 0 : t2;
+  const t12 = Date.parse(dateStr);
+  return Number.isNaN(t12) ? 0 : t12;
 }
 function formatValue(value) {
   return `${Math.round(value)}`;
@@ -11270,7 +11562,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.actual,
-                          color: BRAND_PRIMARY10,
+                          color: BRAND_PRIMARY11,
                           strokeWidth: 2.5,
                           testID: "strength-trend-chart-actual-segment"
                         }
@@ -11323,7 +11615,7 @@ function StrengthTrendChart({
                       width: 8,
                       height: 8,
                       borderRadius: 1,
-                      backgroundColor: BRAND_PRIMARY10
+                      backgroundColor: BRAND_PRIMARY11
                     }
                   },
                   `point-${c.index}`
@@ -11453,7 +11745,7 @@ function StrengthTrendChart({
             testID: "strength-trend-chart-legend",
             children: [
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY10 } }),
+                /* @__PURE__ */ jsx(reactNative.View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY11 } }),
                 /* @__PURE__ */ jsx(reactNative.Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Actual" })
               ] }),
               /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-center", style: { gap: 5 }, children: [
@@ -11482,13 +11774,14 @@ function StrengthTrendChart({
     }
   );
 }
-var STATUS_SUCCESS3 = "#14B8A6";
-var STATUS_WARNING3 = "#FFB020";
-var STATUS_INFO = "#2196F3";
+var t11 = getSemanticColors("dark");
+var STATUS_SUCCESS3 = t11["status-success"];
+var STATUS_WARNING3 = t11["status-warning"];
+var STATUS_INFO = t11["status-info"];
 var DOT_BORDER = "#F3F4F6";
-var BAND_FILL = "rgba(20,184,166,0.1)";
-var BAND_EDGE = "rgba(20,184,166,0.45)";
-var PROJECTION_FILL = "rgba(20,184,166,0.05)";
+var BAND_FILL = "rgba(46,213,115,0.1)";
+var BAND_EDGE = "rgba(46,213,115,0.45)";
+var PROJECTION_FILL = "rgba(46,213,115,0.05)";
 var PADDING_LEFT = 28;
 var PADDING_RIGHT = 10;
 var PADDING_TOP = 8;
@@ -11527,8 +11820,8 @@ function interpEdge(pixels, x, key) {
     const a = pixels[i];
     const b = pixels[i + 1];
     if (x >= a.x && x <= b.x) {
-      const t2 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
-      return a[key] + t2 * (b[key] - a[key]);
+      const t12 = b.x === a.x ? 0 : (x - a.x) / (b.x - a.x);
+      return a[key] + t12 * (b[key] - a[key]);
     }
   }
   return pixels[pixels.length - 1][key];
@@ -11858,16 +12151,7 @@ function CapacityBandChart({
     }
   );
 }
-var PALETTE = [
-  "#5B9BD5",
-  "#14B8A6",
-  "#F4A736",
-  "#F83030",
-  "#823CA0",
-  "#D4A520",
-  "#406D87",
-  "#43C6B7"
-];
+var PALETTE = DATAVIZ_CATEGORICAL_PALETTE;
 function scaleValue(v, scale) {
   if (v <= 0) return 0;
   if (scale === "sqrt") return Math.sqrt(v);
@@ -11983,16 +12267,7 @@ function Treemap({
     );
   }) });
 }
-var PALETTE2 = [
-  "#5B9BD5",
-  "#14B8A6",
-  "#F4A736",
-  "#F83030",
-  "#823CA0",
-  "#D4A520",
-  "#406D87",
-  "#43C6B7"
-];
+var PALETTE2 = DATAVIZ_CATEGORICAL_PALETTE;
 var GRID_LINE2 = "rgba(255,255,255,0.07)";
 var AXIS_LINE = "rgba(255,255,255,0.18)";
 var DIAGONAL_LINE = "rgba(255,255,255,0.28)";
@@ -12082,28 +12357,28 @@ function Scatter({
         testID: "scatter-canvas",
         style: { position: "absolute", top: 0, left: 0, width, height, overflow: "hidden" },
         children: [
-          ticksOf(yd, TICK_COUNT).map((t2, i) => {
-            const y = toY(t2);
+          ticksOf(yd, TICK_COUNT).map((t12, i) => {
+            const y = toY(t12);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-y",
                 style: { position: "absolute", left: PLOT_LEFT2, width: innerW, top: y, height: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t2) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", left: -PLOT_LEFT2, top: -6, width: PLOT_LEFT2 - 6, textAlign: "right" }, children: formatTick(t12) })
               },
               `y-${i}`
             );
           }),
-          ticksOf(xd, TICK_COUNT).map((t2, i) => {
-            const x = toX(t2);
+          ticksOf(xd, TICK_COUNT).map((t12, i) => {
+            const x = toX(t12);
             return /* @__PURE__ */ jsx(
               reactNative.View,
               {
                 accessibilityElementsHidden: true,
                 testID: "scatter-gridline-x",
                 style: { position: "absolute", top: PLOT_TOP, height: innerH, left: x, width: 1, backgroundColor: GRID_LINE2 },
-                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t2) })
+                children: /* @__PURE__ */ jsx(reactNative.Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t12) })
               },
               `x-${i}`
             );
@@ -12163,9 +12438,10 @@ function Scatter({
     }) })
   ] });
 }
-var STATUS_SUCCESS4 = "#14B8A6";
-var STATUS_WARNING4 = "#FFB020";
-var STATUS_ERROR4 = "#D14343";
+var sem2 = getSemanticColors("dark");
+var STATUS_SUCCESS4 = sem2["status-success"];
+var STATUS_WARNING4 = sem2["status-warning"];
+var STATUS_ERROR4 = sem2["status-error"];
 var TRACK = "rgba(255,255,255,0.08)";
 var DEFAULT_THRESHOLDS = [
   { value: 0, color: STATUS_ERROR4 },
@@ -12237,23 +12513,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t2) => /* @__PURE__ */ jsx(
+        ticks.map((t12) => /* @__PURE__ */ jsx(
           reactNative.View,
           {
             accessibilityElementsHidden: true,
             testID: "gauge-segment",
             style: {
               position: "absolute",
-              left: t2.left - tickThickness / 2,
-              top: t2.top - tickLength / 2,
+              left: t12.left - tickThickness / 2,
+              top: t12.top - tickLength / 2,
               width: tickThickness,
               height: tickLength,
               borderRadius: tickThickness / 2,
-              backgroundColor: t2.color,
-              transform: [{ rotate: t2.rotate }]
+              backgroundColor: t12.color,
+              transform: [{ rotate: t12.rotate }]
             }
           },
-          t2.key
+          t12.key
         )),
         /* @__PURE__ */ jsxs(reactNative.View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(reactNative.View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -12266,6 +12542,203 @@ function Gauge2({
     }
   );
 }
+function BrandLockup({
+  subtitle = "wall dashboard",
+  showSubtitle = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-center gap-[7px]", className), ...props, children: [
+    /* @__PURE__ */ jsx(reactNative.View, { className: "text-brand-primary", children: /* @__PURE__ */ jsx(VoltrasMark, { size: 14, color: "currentColor" }) }),
+    /* @__PURE__ */ jsx(
+      Typography,
+      {
+        variant: "button",
+        color: "primary",
+        className: "text-[12px] font-extrabold tracking-[1.5px]",
+        children: "VOLTRAS"
+      }
+    ),
+    showSubtitle && subtitle ? /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        variant: "button",
+        color: "tertiary",
+        className: "text-[10px] font-semibold tracking-[0.4px]",
+        children: [
+          "/ ",
+          subtitle
+        ]
+      }
+    ) : null
+  ] });
+}
+var stateConfig = {
+  // live = vivid green with an expanding ring; rest = solid amber (no pulse — operator); idle is dim.
+  live: { label: "LIVE", color: "success", pulse: "ping", textColor: "primary" },
+  rest: { label: "REST", color: "warning", pulse: false, textColor: "primary" },
+  idle: { label: "IDLE", color: "default", pulse: false, textColor: "secondary" }
+};
+function SessionStatePill({ state, label, className, ...props }) {
+  const cfg = stateConfig[state];
+  return /* @__PURE__ */ jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(Indicator, { size: "md", color: cfg.color, pulse: cfg.pulse }),
+    /* @__PURE__ */ jsx(Typography, { variant: "monoLabel", color: cfg.textColor, className: "text-[11px]", children: label ?? cfg.label })
+  ] });
+}
+var statusTextClass = {
+  connected: "text-status-success",
+  degraded: "text-status-warning",
+  lost: "text-status-error-vivid"
+};
+function DeviceIndicator({
+  status = "connected",
+  onPress,
+  label = "Devices",
+  className,
+  ...props
+}) {
+  const Wrapper = onPress ? reactNative.Pressable : reactNative.View;
+  return /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      accessibilityLabel: label,
+      ...onPress ? { onPress, accessibilityRole: "button" } : {},
+      className: cn(
+        "w-[26px] h-[28px] items-center justify-center rounded-[7px]",
+        statusTextClass[status],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(BluetoothIcon, { size: 18, color: "currentColor", title: label })
+    }
+  );
+}
+var stateColor = {
+  connected: "success",
+  available: "info",
+  degraded: "warning",
+  lost: "error-vivid"
+};
+function DeviceRow({ device, onPress, className, ...props }) {
+  const Wrapper = onPress ? reactNative.Pressable : reactNative.View;
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      ...onPress ? { onPress, accessibilityRole: "button" } : {},
+      className: cn("flex-row items-center gap-[10px] px-2 py-[9px] rounded-[7px]", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Indicator, { size: "md", color: stateColor[device.state] }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            color: device.slot ? "primary" : "secondary",
+            className: "flex-1 font-bold text-[12px]",
+            children: device.nickname
+          }
+        ),
+        /* @__PURE__ */ jsx(Typography, { variant: "mono", color: "tertiary", className: "text-[10px]", children: device.id })
+      ]
+    }
+  );
+}
+function aggregateStatus(devices) {
+  const bound = devices.filter((d) => d.slot);
+  if (bound.some((d) => d.state === "lost")) return "lost";
+  if (bound.some((d) => d.state === "degraded")) return "degraded";
+  return "connected";
+}
+function DeviceMenu({
+  devices,
+  isOpen,
+  onOpenChange,
+  onSelectDevice,
+  className
+}) {
+  const status = aggregateStatus(devices);
+  const boundCount = devices.filter((d) => d.slot).length;
+  const availCount = devices.filter((d) => !d.slot).length;
+  return /* @__PURE__ */ jsxs(Popover, { placement: "bottom", isOpen, onOpenChange, className, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(DeviceIndicator, { status }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "right-0 left-auto mt-[10px] w-[326px] bg-surface-elevated border border-border-strong rounded-[10px] p-[7px]", children: [
+      /* @__PURE__ */ jsxs(
+        Typography,
+        {
+          variant: "monoLabel",
+          color: "tertiary",
+          className: "text-[9px] tracking-[0.8px] px-2 pt-[6px] pb-2",
+          children: [
+            "Devices \u2014 ",
+            boundCount,
+            " bound \xB7 ",
+            availCount,
+            " available"
+          ]
+        }
+      ),
+      devices.map((device, i) => /* @__PURE__ */ jsx(reactNative.View, { className: cn(i > 0 && "border-t border-border"), children: /* @__PURE__ */ jsx(
+        DeviceRow,
+        {
+          device,
+          onPress: onSelectDevice ? () => onSelectDevice(device) : void 0
+        }
+      ) }, device.id))
+    ] })
+  ] });
+}
+var SUBTITLE_MIN = 1024;
+var CLOCK_MIN = 720;
+function TopBar({
+  state,
+  devices,
+  time,
+  subtitle = "wall dashboard",
+  showSubtitle,
+  showClock,
+  onSelectDevice,
+  className
+}) {
+  const [width, setWidth] = React24.useState(SUBTITLE_MIN);
+  const onLayout = (e) => setWidth(e.nativeEvent.layout.width);
+  const subtitleVisible = showSubtitle ?? width >= SUBTITLE_MIN;
+  const clockVisible = showClock ?? width >= CLOCK_MIN;
+  return /* @__PURE__ */ jsxs(
+    reactNative.View,
+    {
+      onLayout,
+      style: surfaceGradient.chrome(),
+      className: cn(
+        "h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(BrandLockup, { subtitle, showSubtitle: subtitleVisible }),
+        /* @__PURE__ */ jsxs(reactNative.View, { className: "ml-auto flex-row items-center gap-[12px]", children: [
+          /* @__PURE__ */ jsx(SessionStatePill, { state }),
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: "h-4 bg-border-prominent" }),
+          /* @__PURE__ */ jsx(DeviceMenu, { devices, onSelectDevice }),
+          clockVisible ? /* @__PURE__ */ jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, { orientation: "vertical", className: "h-4 bg-border-prominent" }),
+            /* @__PURE__ */ jsx(
+              DateTime,
+              {
+                value: time,
+                live: time == null,
+                format: "time",
+                hour12: false,
+                variant: "mono",
+                color: "secondary",
+                className: "text-[11px] min-w-[38px] text-right"
+              }
+            )
+          ] }) : null
+        ] })
+      ]
+    }
+  );
+}
 
 // src/utils/form.ts
 function getFieldValidationProps(state) {
@@ -12369,12 +12842,15 @@ exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
 exports.BadgeText = BadgeText;
 exports.BaseBadge = BaseBadge;
+exports.BluetoothIcon = BluetoothIcon;
+exports.BrandLockup = BrandLockup;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;
 exports.ButtonIcon = ButtonIcon;
 exports.ButtonSpinner = ButtonSpinner;
 exports.ButtonText = ButtonText;
+exports.CATEGORICAL_CVD_SAFE_MAX = CATEGORICAL_CVD_SAFE_MAX;
 exports.CapacityBandChart = CapacityBandChart;
 exports.Caption = Caption;
 exports.Card = Card;
@@ -12394,11 +12870,15 @@ exports.CollapseContent = CollapseContent;
 exports.DataRow = DataRow;
 exports.DateTime = DateTime;
 exports.DeviationBar = DeviationBar;
+exports.DeviceIndicator = DeviceIndicator;
+exports.DeviceMenu = DeviceMenu;
+exports.DeviceRow = DeviceRow;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
 exports.DrawerBody = DrawerBody;
 exports.DrawerFooter = DrawerFooter;
 exports.DrawerHeader = DrawerHeader;
+exports.DumbbellIcon = DumbbellIcon;
 exports.EmptyState = EmptyState;
 exports.ExerciseCard = ExerciseCard;
 exports.FormActions = FormActions;
@@ -12464,6 +12944,7 @@ exports.Section = Section;
 exports.SectionContent = SectionContent;
 exports.SectionHeader = SectionHeader;
 exports.Select = Select;
+exports.SessionStatePill = SessionStatePill;
 exports.SetRow = SetRow;
 exports.Sidebar = Sidebar;
 exports.SidebarContent = SidebarContent;
@@ -12480,6 +12961,7 @@ exports.SkeletonText = SkeletonText;
 exports.Sparkline = Sparkline;
 exports.Spinner = Spinner;
 exports.Stack = Stack;
+exports.StarIcon = StarIcon;
 exports.StatusDot = StatusDot;
 exports.StepContent = StepContent;
 exports.StepIndicator = StepIndicator;
@@ -12489,6 +12971,7 @@ exports.StepperStep = Step;
 exports.StrengthTrendChart = StrengthTrendChart;
 exports.SupersetWrapper = SupersetWrapper;
 exports.Surface = Surface;
+exports.SvgIcon = SvgIcon;
 exports.Switch = Switch;
 exports.TEMPO_PACING = TEMPO_PACING;
 exports.Tab = Tab;
@@ -12510,10 +12993,12 @@ exports.ToastProvider = ToastProvider;
 exports.ToolbarButton = ToolbarButton;
 exports.ToolbarButtonGroup = ToolbarButtonGroup;
 exports.Tooltip = Tooltip;
+exports.TopBar = TopBar;
 exports.Treemap = Treemap;
 exports.Typography = Typography;
 exports.VStack = VStack;
 exports.VelocityStrip = VelocityStrip;
+exports.VoltrasMark = VoltrasMark;
 exports.WeekRow = WeekRow;
 exports.WeightBadge = WeightBadge;
 exports.WorkoutCard = WorkoutCard;
@@ -12521,9 +13006,11 @@ exports.WorkoutPill = WorkoutPill;
 exports.alpha = alpha;
 exports.applyThemePreset = applyThemePreset;
 exports.audiobookPreset = audiobookPreset;
+exports.bestTextColor = bestTextColor;
 exports.buttonSizes = buttonSizes;
 exports.calculateMeanVelocity = calculateMeanVelocity;
 exports.calculateVelocityLoss = calculateVelocityLoss;
+exports.categoricalPalette = categoricalPalette;
 exports.cn = cn;
 exports.componentElevationRanges = componentElevationRanges;
 exports.composeValidators = composeValidators;
@@ -12537,12 +13024,14 @@ exports.darkThemeCSSVars = darkThemeCSSVars;
 exports.darken = darken;
 exports.defaultPreset = defaultPreset;
 exports.discreteRainbow = discreteRainbow;
+exports.divergingScale = divergingScale;
 exports.elevationSystem = elevationSystem;
 exports.formatDateTime = formatDateTime;
 exports.formatPrescription = formatPrescription;
 exports.formatSignedPct = formatSignedPct;
 exports.formatVelocity = formatVelocity;
 exports.getBaseSurfaceColor = getBaseSurfaceColor;
+exports.getCategoricalColor = getCategoricalColor;
 exports.getContrastText = getContrastText;
 exports.getDiscreteRainbowColor = getDiscreteRainbowColor;
 exports.getElevationConfig = getElevationConfig;
@@ -12573,10 +13062,12 @@ exports.isEmpty = isEmpty;
 exports.isValidEmail = isValidEmail;
 exports.lightThemeCSSVars = lightThemeCSSVars;
 exports.lighten = lighten;
+exports.linearGradient = linearGradient;
 exports.neumorphicShadows = neumorphicShadows;
 exports.primitiveBorderRadius = primitiveBorderRadius;
 exports.primitiveBreakpoints = primitiveBreakpoints;
 exports.primitiveColors = primitiveColors;
+exports.primitiveRamps = primitiveRamps;
 exports.primitiveShadows = primitiveShadows;
 exports.primitiveSpacing = primitiveSpacing;
 exports.primitiveTypography = primitiveTypography;
@@ -12591,7 +13082,9 @@ exports.rpeColor = rpeColor;
 exports.semanticColorsDark = semanticColorsDark;
 exports.semanticColorsLight = semanticColorsLight;
 exports.semanticTypography = semanticTypography;
+exports.sequentialEffort = sequentialEffort;
 exports.shadowColors = shadowColors;
+exports.surfaceGradient = surfaceGradient;
 exports.useTable = useTable;
 exports.useToast = useToast;
 exports.useToolbarButton = useToolbarButton;