@titan-design/react-ui 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
+import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from 'react/jsx-runtime';
 import { Pressable, ActivityIndicator, Text, View, TextInput, Platform, StyleSheet, Easing, Image, Modal as Modal$1, ScrollView, Animated } from 'react-native';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx as jsx$1, jsxs as jsxs$1, Fragment } from 'react/jsx-runtime';
 import React24, { forwardRef, useState, createContext, useMemo, useContext, useRef, useEffect, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -10,9 +10,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 twMerge(clsx(inputs));
-}
 function wrapJsx(fn) {
   return function(type, props, ...rest) {
     if (props && typeof props.className === "string" && props.className) {
@@ -31,6 +28,58 @@ function wrapJsx(fn) {
 var jsx = wrapJsx(jsx$1);
 var jsxs = wrapJsx(jsxs$1);
 
+// 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 twMerge(clsx(inputs));
+}
+
 // src/components/ui/alert/Alert.tsx
 var statusColors = {
   success: {
@@ -188,6 +237,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",
@@ -277,6 +358,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",
@@ -486,56 +723,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,
@@ -562,25 +786,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",
@@ -592,9 +816,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)
@@ -606,6 +830,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
@@ -630,37 +856,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,
@@ -702,29 +932,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],
@@ -739,7 +971,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
@@ -1205,10 +1437,11 @@ var PasswordInput = forwardRef(function PasswordInput2({ showIcon, hideIcon, ...
 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
@@ -1243,6 +1476,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"],
@@ -1258,6 +1495,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"],
@@ -1334,6 +1572,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"],
@@ -1349,6 +1591,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"],
@@ -2157,6 +2400,17 @@ function resolveColor(token, mode = "dark") {
   return 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}`;
@@ -2531,7 +2785,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",
@@ -2539,14 +2794,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(View, { className: cn("relative", sizeStyles3[size], className), style, ...props, children: [
+      /* @__PURE__ */ jsx(
+        View,
+        {
+          className: cn("absolute inset-0 rounded-full animate-ping", colorClass),
+          style: colorStyle
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        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(
@@ -2555,12 +2836,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,
@@ -2641,6 +2924,13 @@ function Badge({
 function BadgeText({ children, className }) {
   return /* @__PURE__ */ jsx(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",
@@ -2648,8 +2938,8 @@ var sizeMap = {
   xl: "large"
 };
 var colorMap = {
-  primary: "#5048E5",
-  secondary: "#10B981",
+  primary: SPINNER_PRIMARY,
+  secondary: SPINNER_SECONDARY,
   white: "#FFFFFF",
   default: "#6B7280"
 };
@@ -2685,15 +2975,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++) {
@@ -4338,7 +4620,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 = () => {
@@ -4981,7 +5263,7 @@ function ToastProvider({
     return id;
   }, [defaultDuration, maxToasts]);
   const removeToast = useCallback((id) => {
-    setToasts((prev) => prev.filter((t2) => t2.id !== id));
+    setToasts((prev) => prev.filter((t12) => t12.id !== id));
   }, []);
   const removeAllToasts = useCallback(() => {
     setToasts([]);
@@ -5863,7 +6145,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",
@@ -6552,7 +6837,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";
@@ -6602,6 +6887,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) {
@@ -6671,16 +6962,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(Text, { className: cn(colorStyles8[color], className), ...props, children: fallback });
+  const [now, setNow] = useState(() => Date.now());
+  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(Text, { className: cn(colorStyles8[color], className), ...props, children: formattedDate });
+  return /* @__PURE__ */ jsx(Text, { className: cn(colorStyles8[color], className), ...props, children: text });
 }
 function formatDateTime(value, format = "datetime", isUTC = false, fallback = "-") {
   if (value === null || value === void 0) {
@@ -6816,58 +7119,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",
@@ -6881,7 +7132,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` : "";
@@ -6940,7 +7191,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: [
@@ -6954,6 +7205,7 @@ function WeightBadge({
     }
   );
 }
+var BRAND_PRIMARY = getSemanticColors("dark")["brand-primary"];
 var typeLabels = {
   e1rm: "PR e1RM",
   weight: "PR Weight",
@@ -6997,7 +7249,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,
@@ -7011,7 +7263,7 @@ function PrBadge({
         {
           style: {
             fontSize: 12,
-            color: "#FF7900",
+            color: BRAND_PRIMARY,
             fontWeight: "700",
             fontFamily: "Inter, sans-serif"
           },
@@ -7036,17 +7288,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)",
@@ -7061,11 +7314,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)" }
 };
@@ -7079,8 +7332,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 = {
@@ -7167,17 +7420,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"
@@ -7352,7 +7629,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
@@ -7369,9 +7646,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,
@@ -7384,7 +7661,7 @@ function TempoBar({
   return /* @__PURE__ */ jsxs(View, { className, testID: "tempo-bar", ...props, children: [
     /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", marginBottom: 4 }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
-      return /* @__PURE__ */ jsx(View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, color: t["text-disabled"] }, children: config.label }) }, phase);
+      return /* @__PURE__ */ jsx(View, { style: { flex: config.flex, alignItems: "center" }, children: /* @__PURE__ */ jsx(Text, { style: { fontSize: 10, color: t2["text-disabled"] }, children: config.label }) }, phase);
     }) }),
     /* @__PURE__ */ jsx(View, { style: { flexDirection: "row", gap: 2, height: 20 }, children: PHASE_ORDER.map((phase) => {
       const config = PHASE_CONFIG[phase];
@@ -7421,7 +7698,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(View, { style: { height: "100%", position: "relative" }, testID: `tempo-segment-active-${config.label}`, children: [
@@ -7485,15 +7762,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
 };
@@ -7758,12 +8034,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";
@@ -7805,7 +8082,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%)"
             }
           }
         ),
@@ -7831,23 +8108,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) {
@@ -8003,29 +8281,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] = useState(() => new Animated.Value(1));
@@ -8500,12 +8787,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,
@@ -8577,7 +8865,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);
@@ -8614,7 +8902,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;
@@ -8793,7 +9081,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,
@@ -8959,7 +9247,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,
@@ -9088,7 +9376,7 @@ function InputBar({
             onPress: onRecord,
             disabled: !canRecord,
             style: ({ pressed }) => ({
-              backgroundColor: BRAND_PRIMARY2,
+              backgroundColor: BRAND_PRIMARY3,
               borderRadius: 8,
               paddingVertical: 10,
               paddingHorizontal: 16,
@@ -9115,7 +9403,7 @@ function InputBar({
     }
   );
 }
-var BRAND_PRIMARY3 = "#FF7900";
+var BRAND_PRIMARY4 = getSemanticColors("dark")["brand-primary"];
 function RestTimer({
   totalSeconds,
   elapsedMs,
@@ -9221,7 +9509,7 @@ function RestTimer({
               {
                 style: {
                   height: "100%",
-                  backgroundColor: BRAND_PRIMARY3,
+                  backgroundColor: BRAND_PRIMARY4,
                   borderRadius: 2,
                   width: `${progressPct}%`
                 },
@@ -9278,7 +9566,7 @@ function RestTimer({
                     fontSize: 11,
                     fontFamily: "Inter, sans-serif",
                     fontWeight: "600",
-                    color: BRAND_PRIMARY3
+                    color: BRAND_PRIMARY4
                   },
                   children: "Skip"
                 }
@@ -9671,7 +9959,7 @@ function ExerciseCard(props) {
 }
 var DEFAULTS = {
   label: "SS",
-  color: "#FF7900",
+  color: getSemanticColors("dark")["brand-primary"],
   bgBase: "#101010"
 };
 function SupersetWrapper({
@@ -9722,9 +10010,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)"
 };
@@ -9774,7 +10062,7 @@ function MesoSegment({ meso, isActive, onPress }) {
             },
             isActive ? {
               borderWidth: 2,
-              borderColor: BRAND_PRIMARY4,
+              borderColor: BRAND_PRIMARY5,
               transform: [{ scale: 1.02 }, { scale: pressScale }]
             } : void 0
           ],
@@ -9788,7 +10076,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}`
             }
@@ -9829,7 +10117,7 @@ function MesoProgressBar({
     }
   );
 }
-var BRAND_PRIMARY5 = "#FF7900";
+var BRAND_PRIMARY6 = getSemanticColors("dark")["brand-primary"];
 function WeekRow({
   weekNumber,
   totalWeeks,
@@ -9849,12 +10137,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(
     View,
@@ -9878,7 +10166,7 @@ function WeekRow({
                     width: 6,
                     height: 6,
                     borderRadius: 3,
-                    backgroundColor: BRAND_PRIMARY5
+                    backgroundColor: BRAND_PRIMARY6
                   },
                   accessibilityElementsHidden: true,
                   testID: "week-row-current-dot"
@@ -9892,7 +10180,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}`
@@ -9931,9 +10219,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)"
 };
@@ -10075,11 +10364,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;
@@ -10114,7 +10403,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(View, { style: { paddingHorizontal: 14, paddingTop: 12, paddingBottom: 10 }, testID: "meso-card-body", children: [
     /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 8 }, testID: "meso-card-header", children: [
@@ -10174,7 +10463,7 @@ function MesoCard({
     {
       variant: "outline",
       elevation: 2,
-      borderColor: highlighted ? BRAND_PRIMARY6 : BORDER_DEFAULT,
+      borderColor: highlighted ? BRAND_PRIMARY7 : BORDER_DEFAULT,
       className,
       style: [
         { borderColor },
@@ -10231,9 +10520,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",
@@ -10273,7 +10562,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(
           Text,
           {
@@ -10417,11 +10706,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}"],
@@ -10485,7 +10775,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 }]
@@ -10601,7 +10891,7 @@ function ReadinessCheck({
           marginTop: 16,
           width: "100%",
           alignItems: "center",
-          backgroundColor: BRAND_PRIMARY8,
+          backgroundColor: BRAND_PRIMARY9,
           borderRadius: 8,
           paddingVertical: 12,
           opacity: pressed ? 0.8 : 1
@@ -10611,18 +10901,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) {
@@ -10914,9 +11205,9 @@ function MesoStatusCard({
             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
@@ -10942,9 +11233,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
@@ -10973,21 +11264,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)}`;
@@ -11264,7 +11556,7 @@ function StrengthTrendChart({
                         ChartLine,
                         {
                           coords: geometry.actual,
-                          color: BRAND_PRIMARY10,
+                          color: BRAND_PRIMARY11,
                           strokeWidth: 2.5,
                           testID: "strength-trend-chart-actual-segment"
                         }
@@ -11317,7 +11609,7 @@ function StrengthTrendChart({
                       width: 8,
                       height: 8,
                       borderRadius: 1,
-                      backgroundColor: BRAND_PRIMARY10
+                      backgroundColor: BRAND_PRIMARY11
                     }
                   },
                   `point-${c.index}`
@@ -11447,7 +11739,7 @@ function StrengthTrendChart({
             testID: "strength-trend-chart-legend",
             children: [
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
-                /* @__PURE__ */ jsx(View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY10 } }),
+                /* @__PURE__ */ jsx(View, { style: { width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY11 } }),
                 /* @__PURE__ */ jsx(Text, { className: "text-text-secondary", style: { fontSize: 10, fontFamily: "Inter, sans-serif" }, children: "Actual" })
               ] }),
               /* @__PURE__ */ jsxs(View, { className: "flex-row items-center", style: { gap: 5 }, children: [
@@ -11476,13 +11768,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;
@@ -11521,8 +11814,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];
@@ -11852,16 +12145,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);
@@ -11977,16 +12261,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)";
@@ -12076,28 +12351,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(
               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(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(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(
               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(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(Text, { className: "text-[9px] text-text-tertiary", style: { position: "absolute", top: innerH + 4, left: -16, width: 32, textAlign: "center" }, children: formatTick(t12) })
               },
               `x-${i}`
             );
@@ -12157,9 +12432,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 },
@@ -12231,23 +12507,23 @@ function Gauge2({
       testID: "gauge",
       ...props,
       children: [
-        ticks.map((t2) => /* @__PURE__ */ jsx(
+        ticks.map((t12) => /* @__PURE__ */ jsx(
           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(View, { style: { position: "absolute", top: 0, left: 0, width: size, height: size }, className: "items-center justify-center", children: [
           /* @__PURE__ */ jsxs(View, { className: "flex-row items-baseline gap-0.5", children: [
@@ -12260,6 +12536,203 @@ function Gauge2({
     }
   );
 }
+function BrandLockup({
+  subtitle = "wall dashboard",
+  showSubtitle = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(View, { className: cn("flex-row items-center gap-[7px]", className), ...props, children: [
+    /* @__PURE__ */ jsx(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(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 ? Pressable : 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 ? Pressable : 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(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] = 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(
+    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(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(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) {
@@ -12349,6 +12822,6 @@ function composeValidators(...validators) {
   };
 }
 
-export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BaseBadge, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DataRow, DateTime, DeviationBar, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, EmptyState, ExerciseCard, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, IconBox, Indicator, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, Overline, Paragraph, PasswordInput, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, Scatter, Section, SectionContent, SectionHeader, Select, SetRow, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StatusDot, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, Switch, TEMPO_PACING, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoBar, TempoDisplay, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, Treemap, Typography, VStack, VelocityStrip, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, alpha, applyThemePreset, audiobookPreset, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, elevationSystem, formatDateTime, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getTempoFillPct, getTempoPacingState, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors, useTable, useToast, useToolbarButton, validateCssPropertyManifest, validationRules };
+export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Alert, AlertDescription, AlertTitle, Autocomplete, Avatar, AvatarBadge, AvatarGroup, Badge, BadgeText, BaseBadge, BluetoothIcon, BrandLockup, BreadcrumbItem, Breadcrumbs, Button, ButtonIcon, ButtonSpinner, ButtonText, CATEGORICAL_CVD_SAFE_MAX, CapacityBandChart, Caption, Card, CardContent, CardDescription, CardFooter, CardHeader, CardSkeleton, CardTitle, Checkbox, CheckboxGroup, Chip, CircularProgress, Collapse, CollapseButton, CollapseContent, DataRow, DateTime, DeviationBar, DeviceIndicator, DeviceMenu, DeviceRow, Divider, Drawer, DrawerBody, DrawerFooter, DrawerHeader, DumbbellIcon, EmptyState, ExerciseCard, FormActions, FormField, FormRow, FormSection, Gauge2 as Gauge, HStack, Heading, HelpTip, IconBox, Indicator, Input, InputBar, InputGroup, IntensityBar, Label, LabelWithHelp, Link, ListItem, ListItemContent, ListItemDivider, ListItemIcon, ListItemTrailing, Menu, MenuDivider, MenuGroup, MenuItem, MenuList, MenuTrigger, MesoCard, MesoProgressBar, MesoStatusCard, Metric, MetricGroup, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalTitle, MuscleGroupChip, Overline, Paragraph, PasswordInput, Pill, PlaceholderStrip, Popover, PopoverCloseButton, PopoverContent, PopoverTrigger, PrBadge, PrHistoryModal, Progress, ProgressSteps, Radio, RadioGroup, ReadinessCheck, RestTimer, Scatter, Section, SectionContent, SectionHeader, Select, SessionStatePill, SetRow, Sidebar, SidebarContent, SidebarDivider, SidebarFooter, SidebarHeader, SidebarItem, SidebarSection, Skeleton, SkeletonCard, SkeletonCircle, SkeletonListItem, SkeletonText, Sparkline, Spinner, Stack, StarIcon, StatusDot, StepContent, StepIndicator, StepLabel, Stepper, Step as StepperStep, StrengthTrendChart, SupersetWrapper, Surface, SvgIcon, Switch, TEMPO_PACING, Tab, TabList, TabPanel, TabPanels, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TablePagination, TableRow, Tabs, TempoBar, TempoDisplay, Toast, ToastProvider, ToolbarButton, ToolbarButtonGroup, Tooltip, TopBar, Treemap, Typography, VStack, VelocityStrip, VoltrasMark, WeekRow, WeightBadge, WorkoutCard, WorkoutPill, alpha, applyThemePreset, audiobookPreset, bestTextColor, buttonSizes, calculateMeanVelocity, calculateVelocityLoss, categoricalPalette, cn, componentElevationRanges, composeValidators, createFieldId, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, defaultPreset, discreteRainbow, divergingScale, elevationSystem, formatDateTime, formatPrescription, formatSignedPct, formatVelocity, getBaseSurfaceColor, getCategoricalColor, getContrastText, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getFieldAriaProps, getFieldValidationProps, getGlowShadow, getHoverColors, getLuminance, getResultColor, getSemanticColors, getStatusColor, getTempoFillPct, getTempoPacingState, getThemeCSSVars, getValidatedElevation, getVelocityZoneColor, getVelocityZoneName, gluestackConfig, hasMaxLength, hasMinLength, hexToRgb, hsvToRgb, isCssPropertyManifest, isDark, isEmpty, isValidEmail, lightThemeCSSVars, lighten, linearGradient, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveRamps, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, resolveColor, rgbToHex, rgbToHsv, roundRpe, roundTempo, roundWeight, rpeColor, semanticColorsDark, semanticColorsLight, semanticTypography, sequentialEffort, shadowColors, surfaceGradient, useTable, useToast, useToolbarButton, validateCssPropertyManifest, validationRules };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map