nexus-shared 1.1.5 → 1.1.6

package/src/services/loader-service.tsx

@@ -0,0 +1,168 @@
+import { FindChildElement, IsBrowser, RemoveElement } from "../helpers/browser-helpers";
+import { EAnimationClasses, ESizes } from "../interfaces/layout-interfaces";
+import { EBackgrounds } from "../interfaces/theme-interfaces";
+import { UN } from "../interfaces/type-interfaces";
+import { FILES } from "../nexus.environments";
+
+const DEFAULT_LOADER_TYPE = EAnimationClasses.SPIN;
+const DEFAULT_LOADER_SIZE = ESizes.Medium;
+const DEFAULT_LOADER_DELAY = 0;
+const LOADER_IDENTITY = "nexus-loader";
+const LOADER_DATA_COUNT_ATTRIBUTE = "data-count";
+const LOADER_DATA_TYPE_ATTRIBUTE = "data-type";
+const LOADER_DATA_SIZE_ATTRIBUTE = "data-size";
+const LOADER_DATA_DISABLED_INPUTS_ATTRIBUTE = "data-disabled-inputs";
+const DISPOSED_LOADER_CLASS = "disposed";
+const DEFAULT_LOADER_BACKGROUND = EBackgrounds.PopupBackgroundColor;
+/**
+ *
+ * @param parent - Parent element to show loader on
+ * @param type - Animation type to use for showing loader
+ * @param disabledInputs - If true, all inputs will be disabled
+ * @param size - Size of the loader
+ * @param delay - Delay in milliseconds
+ * @returns - Returns the loader element
+ */
+
+const _findParentElement = (parent: String | HTMLElement | UN): HTMLElement => {
+  if (parent) {
+    if (typeof parent === "string") return document.getElementById(parent) ?? document.body;
+    else if (parent instanceof HTMLElement) return parent ?? document.body;
+  }
+
+  return document.body;
+};
+const _findExistingLoader = (parent: HTMLElement): HTMLElement | null => {
+  const loaderElement = FindChildElement(parent, `#${LOADER_IDENTITY}`);
+  return loaderElement as HTMLElement | null;
+};
+const _updateLoaderProperties = (loaderElement: HTMLElement, type: EAnimationClasses, size: ESizes) => {
+  if (type === EAnimationClasses.SPIN) {
+    if (size === ESizes.VeryTiny) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "2.5rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.34rem");
+    } else if (size === ESizes.Tiny) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "2.8rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.36rem");
+    } else if (size === ESizes.VerySmall) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "3rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.38rem");
+    } else if (size === ESizes.Small) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "3.5rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.45rem");
+    } else if (size === ESizes.Medium) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "4rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.5rem");
+    } else if (size === ESizes.Large) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "4.8rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.55rem");
+    } else if (size === ESizes.ExtraLarge) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "5.5rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.6rem");
+    } else if (size === ESizes.VeryExtraLarge) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "6.5rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.7rem");
+    } else if (size === ESizes.FullSize) {
+      loaderElement.style.setProperty("--SPIN_BOX_SIZE", "8rem");
+      loaderElement.style.setProperty("--SPIN_BOX_BORDER_SIZE", "0.8rem");
+    }
+  }
+};
+const _updateLoaderAttributes = (loaderElement: HTMLElement, type: EAnimationClasses, size: ESizes, disabledInputs: boolean, count: number) => {
+  loaderElement.setAttribute(LOADER_DATA_COUNT_ATTRIBUTE, count.toString());
+  loaderElement.setAttribute(LOADER_DATA_TYPE_ATTRIBUTE, type);
+  loaderElement.setAttribute(LOADER_DATA_SIZE_ATTRIBUTE, size);
+  loaderElement.setAttribute(LOADER_DATA_DISABLED_INPUTS_ATTRIBUTE, disabledInputs ? "true" : "false");
+};
+const _createLoaderElement = (parent: HTMLElement, type: EAnimationClasses, size: ESizes, showLogo: boolean, disabledInputs: boolean, background: EBackgrounds): HTMLElement | null => {
+  const loaderElement = _findExistingLoader(parent);
+  if (loaderElement && !loaderElement.classList.contains(DISPOSED_LOADER_CLASS)) {
+    const count = parseInt(loaderElement.getAttribute(LOADER_DATA_COUNT_ATTRIBUTE) ?? "0") + 1;
+    _updateLoaderAttributes(loaderElement, type, size, disabledInputs, count);
+    _updateLoaderProperties(loaderElement, type, size);
+    return loaderElement as HTMLElement;
+  }
+
+  const newLoaderElement = document.createElement("div");
+  newLoaderElement.id = LOADER_IDENTITY;
+  newLoaderElement.classList.add("nexus-container", "o0", EAnimationClasses.FADE_IN, background);
+  _updateLoaderAttributes(newLoaderElement, type, size, disabledInputs, 1);
+
+  const loader = document.createElement("div");
+  newLoaderElement.appendChild(loader);
+  loader.classList.add(size, type);
+
+  const isTextLoader = (type === EAnimationClasses.BOUNCE || type === EAnimationClasses.FADE_IN_OUT || type === EAnimationClasses.PULSE_IN_OUT) && parent === document.body;
+  if (isTextLoader && !showLogo) {
+    loader.innerText = "Loading...";
+    loader.classList.add("tx52");
+    loader.style.fontSize = "1.5rem";
+  } else if (showLogo) {
+    _updateLoaderProperties(newLoaderElement, type, size);
+
+    const logoElement = document.createElement("img");
+    logoElement.src = FILES.LOGO.ICON;
+    logoElement.alt = "Logo";
+    logoElement.className = "pa bg52";
+    logoElement.style.width = "calc(var(--SPIN_BOX_SIZE) - var(--SPIN_BOX_BORDER_SIZE))";
+    logoElement.style.height = "calc(var(--SPIN_BOX_SIZE) - var(--SPIN_BOX_BORDER_SIZE))";
+    logoElement.style.zIndex = "-1";
+
+    if (isTextLoader) {
+      logoElement.style.padding = `var(--SPIN_BOX_BORDER_SIZE)`;
+      logoElement.classList.add("txy50", "r2");
+      loader.appendChild(logoElement);
+    } else {
+      logoElement.style.padding = `calc(var(--SPIN_BOX_BORDER_SIZE) * 1.3)`;
+      logoElement.style.borderRadius = `35%`;
+      newLoaderElement.appendChild(logoElement);
+    }
+  }
+
+  parent.appendChild(newLoaderElement);
+  return newLoaderElement;
+};
+
+export const ShowLoader = async (parent?: String | HTMLElement | UN, type?: EAnimationClasses | UN, disabledInputs?: boolean | UN, size?: ESizes | UN, delay?: number | UN, showLogo?: boolean | UN, background?: EBackgrounds | UN): Promise<HTMLElement | null> => {
+  if (!IsBrowser()) return Promise.resolve(null);
+  type = type ?? DEFAULT_LOADER_TYPE;
+  size = size ?? DEFAULT_LOADER_SIZE;
+  background = background ?? DEFAULT_LOADER_BACKGROUND;
+
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      const parentElement = _findParentElement(parent);
+      const loaderElement = _createLoaderElement(parentElement, type, size, showLogo ?? true, disabledInputs ?? false, background);
+      resolve(loaderElement);
+    }, delay ?? DEFAULT_LOADER_DELAY);
+  });
+};
+
+/**
+ * Hide loader if it is visible
+ * @param parent - Parent element to hide loader from
+ * @param type - Animation type to use for hiding loader
+ * @param force - This will dispose all loader elements
+ * @param delay - Delay in milliseconds
+ */
+export const HideLoader = (parent?: String | HTMLElement | UN, force?: boolean | UN, delay?: number | UN): Promise<boolean> => {
+  if (!IsBrowser()) return Promise.resolve(false);
+  const parentElement = _findParentElement(parent);
+
+  return new Promise((resolve) => {
+    const timeout = setTimeout(() => {
+      clearTimeout(timeout);
+
+      const loaderElement = _findExistingLoader(parentElement);
+      if (!loaderElement) return resolve(false);
+
+      const count = parseInt(loaderElement.getAttribute(LOADER_DATA_COUNT_ATTRIBUTE) ?? "0");
+
+      if (force || count <= 1) {
+        RemoveElement(loaderElement, 300);
+      } else loaderElement.setAttribute(LOADER_DATA_COUNT_ATTRIBUTE, (count - 1).toString());
+      return resolve(true);
+    }, delay ?? DEFAULT_LOADER_DELAY);
+  });
+};

package/src/services/localstorage-service.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { CreateUpdatePreference } from "../api-services/preference-service";
+import { IsBrowser } from "../helpers/browser-helpers";
+import { Debounce } from "../helpers/utility-helpers";
+import { LOCAL_STORAGE_KEYS } from "../interfaces/storage-interfaces";
+import { EPreferenceTargets } from "../interfaces/system-interfaces";
+import { IThemeInformation } from "../interfaces/theme-interfaces";
+import { O } from "../nexus-client";
+
+const _createUpdatePreferenceDebounce = Debounce(CreateUpdatePreference, 1000);
+
+const _syncStorageToServer = async (key: string, value: string | null, isSyncWithServer?: boolean, target?: EPreferenceTargets) => {
+  if (!IsBrowser() || !isSyncWithServer || !target) return;
+
+  await _createUpdatePreferenceDebounce(target, key, value);
+};
+
+export const SetLocalStorage = (key: string, value: string, isSyncWithServer?: boolean, target?: EPreferenceTargets) => {
+  if (!IsBrowser()) return;
+
+  _syncStorageToServer(key, value, isSyncWithServer, target);
+  localStorage.setItem(key, value);
+};
+export const RemoveLocalStorage = (key: string, isSyncWithServer?: boolean, target?: EPreferenceTargets) => {
+  _syncStorageToServer(key, null, isSyncWithServer, target);
+  localStorage.removeItem(key);
+};
+
+export function GetLocalStorage(key: string): string | null {
+  if (!IsBrowser()) return null;
+  const data = localStorage.getItem(key);
+  if (!data) return null;
+  return data;
+}
+
+export const SetCurrentTheme = (themeCode: string) => SetLocalStorage(LOCAL_STORAGE_KEYS.ACTIVE_THEME, themeCode, true, EPreferenceTargets.User);
+export const GetCurrentTheme = (): IThemeInformation => {
+  const themeInformations = O.systemThemes;
+  if (!themeInformations || themeInformations.length === 0) throw new Error("No theme information found");
+  const activeTheme = GetLocalStorage(LOCAL_STORAGE_KEYS.ACTIVE_THEME);
+  if (!activeTheme) return themeInformations[0];
+  return themeInformations.find((theme) => theme.systemName === activeTheme) || themeInformations[0];
+};
+export const GetCurrentThemeName = (): string => GetCurrentTheme().systemName;

package/src/services/theme-service.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { DEFAULT_SMALL_ICON_BOX_SIZE } from "../interfaces/icon-interfaces";
+import { DEFAULT_FONT_WEIGHTS } from "../interfaces/layout-interfaces";
+import { O } from "../nexus-client";
+import { IThemeColors, IThemeInformation } from "./../interfaces/theme-interfaces";
+import { GetCurrentTheme, SetCurrentTheme } from "./localstorage-service";
+
+const I = "!important;";
+
+const _setVariable = (key: string, value: string | null) => {
+  if (value) document.documentElement.style.setProperty(key, value);
+};
+
+const _initializeThemes = (themeInformations: IThemeInformation[]): boolean => {
+  if (!themeInformations || themeInformations.length === 0) return false;
+
+  const activeTheme = GetCurrentTheme();
+  return _initializeTheme(activeTheme!);
+};
+const _setRule = (sheet: CSSStyleSheet, s: string, r: string) => sheet.insertRule(`${s} { ${r} }`, sheet.cssRules.length);
+const _setResponsiveRule = (sheet: CSSStyleSheet, i: number, max: number, pre: string, w: string, g?: number) => sheet.insertRule(`@media (max-width: ${max}px) { ${g !== undefined ? `.g${g} > ` : ""}.col-${pre}-${i} { width: ${w}${I} } }`, sheet.cssRules.length);
+const _initializeTheme = (theme: IThemeInformation): boolean => {
+  if (!theme) return false;
+  SetCurrentTheme(theme.systemName);
+
+  const THEME_KEYS = Object.keys(theme.themeColors);
+  for (const key of THEME_KEYS) {
+    const color = theme.themeColors[key as keyof IThemeColors];
+    const [background, hover, focus, text] = color.split("|");
+
+    if (!background) continue;
+    const keyNumber = key.replace("C", "");
+
+    if (background !== "NULL") _setVariable(`--B${keyNumber}`, background);
+    if (hover !== "NULL") _setVariable(`--H${keyNumber}`, hover);
+    if (focus !== "NULL") _setVariable(`--F${keyNumber}`, focus);
+    if (text !== "NULL") _setVariable(`--T${keyNumber}`, text);
+  }
+
+  return true;
+};
+export const InitializeStyles = () => {
+  const el = document.getElementById("nexus-styles") as HTMLStyleElement;
+  if (!el || !el.classList.contains("nexus-styles")) el.classList.add("nexus-styles");
+  const sheet = el.sheet as CSSStyleSheet;
+  const themeInformations = O.systemThemes;
+  if (!themeInformations || themeInformations.length === 0) return;
+  _initializeThemes(themeInformations);
+
+  const BREAK_POINTS = { xl: 1200, lg: 1050, med: 900, nr: 800, sm: 700, xs: 600 } as any;
+  const SUFFIXES = ["", "-top", "-right", "-bottom", "-left"];
+  const DIRECTIONS = ["", "t", "r", "b", "l"];
+
+  Array.from({ length: 12 }, (_, i) => i + 1).forEach((i) => {
+    const w = `${(i / 12) * 100}%`;
+    _setRule(sheet, `.col-${i}`, `float: left; box-sizing: border-box; width: ${w};`);
+    Object.keys(BREAK_POINTS).forEach((b) => _setResponsiveRule(sheet, i, BREAK_POINTS[b], b, w));
+  });
+
+  Array.from({ length: 10 }, (_, i) => i + 1).forEach((i) => {
+    const m = 0.2 * i,
+      w = `calc((100% / 12) * ${i} - ${m * 2}rem)`;
+    _setRule(sheet, `.g${i}`, `padding: 0 ${m}rem;`);
+    _setRule(sheet, `.g${i} > [class*='col-']`, `margin: 0 ${m}rem; float: left; box-sizing: border-box;`);
+    _setRule(sheet, `.g${i} > .col-12`, `width: ${w}; float: left; box-sizing: border-box;`);
+    Array.from({ length: 12 }, (_, j) => j + 1).forEach((j) => {
+      const wj = `calc((100% / 12) * ${j} - ${m * 2}rem)`;
+      _setRule(sheet, `.g${i} > .col-${j}`, `width: ${wj}; float: left; box-sizing: border-box;`);
+      Object.keys(BREAK_POINTS).forEach((b) => _setResponsiveRule(sheet, j, BREAK_POINTS[b], b, wj, i));
+    });
+  });
+  Array.from({ length: 11 }, (_, i) => {
+    const v = 0.2 * (10 - i);
+    DIRECTIONS.forEach((d, idx) => {
+      const imp = d ? I : ";";
+      _setRule(sheet, `.m${d}${10 - i}`, `margin${SUFFIXES[idx]}: ${v}rem${imp}`);
+      _setRule(sheet, `.p${d}${10 - i}`, `padding${SUFFIXES[idx]}: ${v}rem${imp}`);
+    });
+    _setRule(sheet, `.g${10 - i}`, `gap: ${v}rem;`);
+    _setRule(sheet, `.cg${10 - i}`, `column-gap: ${v}rem;`);
+    _setRule(sheet, `.rg${10 - i}`, `row-gap: ${v}rem;`);
+    if (i > 0 && i <= 6) _setRule(sheet, `.h${i}, h${i}`, `font-size: ${(6 - i) * 0.3 + 1}rem;font-weight: 600;`);
+  });
+  Array.from({ length: 13 }, (_, i) => 0.6 + 0.1 * i).forEach((v) => _setRule(sheet, `.fs-${v.toFixed(1).replace(".", "")}`, `font-size: ${v.toFixed(1)}rem;`));
+  Array.from({ length: 4 }, (_, i) => 0.5 + 0.1 * i).forEach((v) => _setRule(sheet, `.o${v.toFixed(1).replace(".", "")}`, `opacity: ${v.toFixed(1)};`));
+  Array.from({ length: 9 }, (_, i) => {
+    _setRule(sheet, `.tl${i}`, `display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: ${i};`);
+    if (i <= 8) _setRule(sheet, `.bs${i}`, `box-shadow: var(--BS${i});`);
+  });
+
+  DEFAULT_FONT_WEIGHTS.forEach((weight) => _setRule(sheet, `.fw${weight}`, `font-weight: ${weight};`));
+
+  [90, 180, 270].forEach((r) => _setRule(sheet, `.r${r}`, `transform: rotate(${r}deg);`));
+  [1, 2, 3].forEach((s) => {
+    const b = `var(--BRD${s}) solid var(--B30)`;
+    DIRECTIONS.forEach((d, i) => _setRule(sheet, `.b${d}${s}`, `border${SUFFIXES[i]}: ${b}${d ? ` ${I}` : ""}`));
+    _setRule(sheet, `.bat${s}`, `border: var(--BRD${s}) solid transparent`);
+  });
+
+  const THEME_KEYS = Object.keys(themeInformations[0].themeColors);
+  for (const key of THEME_KEYS) {
+    const keyNumber = key.replace("C", "");
+    _setRule(sheet, `.bg${keyNumber}`, `background-color: var(--B${keyNumber}) ${I}; color: var(--T${keyNumber});`);
+    _setRule(sheet, `.h.bg${keyNumber}:hover`, `background-color: var(--H${keyNumber}) ${I}`);
+    _setRule(sheet, `.h.bg${keyNumber}:focus`, `background-color: var(--F${keyNumber}) ${I}`);
+    _setRule(sheet, `.tx${keyNumber}`, `color: var(--T${keyNumber}) ${I}`);
+  }
+
+  const ICON_SIZES = {
+    xxs: 0.8,
+    xs: 1,
+    ssm: 1.25,
+    sm: 1.4,
+    nr: 1.55,
+    med: 1.75,
+    lg: 1.95,
+    xl: 2.2,
+    xxl: 2.5,
+    fs: 2.85,
+  };
+
+  const ICON_BOX_SCALES = {
+    xxs: 1 / 1.7,
+    xs: 1 / 1.5,
+    sm: DEFAULT_SMALL_ICON_BOX_SIZE,
+    ssm: 1 / 1.35,
+    lg: 1.25,
+    med: 1.1,
+    xl: 1.5,
+    xxl: 1.8,
+  };
+  Object.entries(ICON_SIZES).forEach(([k, v]) => _setRule(sheet, `.icon.${k}`, `font-size: ${v}rem;`));
+
+  Object.entries(ICON_BOX_SCALES).forEach(([k, s]) => {
+    const size = `calc(var(--IH) * ${s})`;
+    const css = `min-width: ${size} ${I}; min-height: ${size} ${I}; max-width: ${size} ${I}; max-height: ${size} ${I};`;
+    _setRule(sheet, `.ib.${k}`, css);
+  });
+};
+export const SwitchTheme = (themeCode: string): boolean => {
+  const themeInformations = O.systemThemes;
+  if (!themeInformations || themeInformations.length === 0) return false;
+
+  const theme = themeInformations.find((theme) => theme.systemName === themeCode);
+  if (!theme) return false;
+  SetCurrentTheme(theme.systemName);
+  return _initializeTheme(theme);
+};

package/src/styles/nexus.animation.css

@@ -0,0 +1,269 @@
+/**
+ * EAnimations / EAnimationClasses — nexus.shared/interfaces/layout-interfaces.tsx
+ * Legacy transition tokens (nexus.utility `.h`, `.anim`): --ANIM_SPD, --ANIM
+ */
+
+:root {
+  --ANIM_SPD: 300ms;
+  --anim-ease: cubic-bezier(0.33, 1, 0.68, 1);
+  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --anim-ease-in: cubic-bezier(0.32, 0, 0.67, 0);
+  --ANIM: all var(--ANIM_SPD);
+
+  --SPIN_BOX_SIZE: 3.5rem;
+  --SPIN_BOX_BORDER_SIZE: 0.45rem;
+}
+
+/* ----- One-shot: fade / pulse ----- */
+
+.an-fa,
+.an-fo,
+.an-fio,
+.an-pi,
+.an-po {
+  animation-duration: var(--ANIM_SPD);
+  animation-timing-function: var(--anim-ease-out);
+  animation-fill-mode: both;
+}
+
+.an-fa {
+  animation-name: fadeIn;
+}
+
+.an-fo {
+  animation-name: fadeOut;
+  animation-timing-function: var(--anim-ease-in);
+  animation-fill-mode: forwards;
+}
+
+.an-fio {
+  animation-name: fadeInOut;
+  animation-duration: calc(var(--ANIM_SPD) * 2);
+  animation-timing-function: var(--anim-ease);
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation: fadeInOut calc(var(--ANIM_SPD) * 6) ease-in-out infinite;
+}
+
+.an-pi {
+  animation-name: pulseIn;
+}
+
+.an-po {
+  animation-name: pulseOut;
+  animation-timing-function: var(--anim-ease-in);
+  animation-fill-mode: forwards;
+}
+
+.an-pio {
+  animation-name: pulseInOut;
+  animation-duration: calc(var(--ANIM_SPD) * 2);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: var(--anim-ease);
+  animation-fill-mode: none;
+}
+
+/* ----- Infinite: bounce (vertical), spin (ring), slide bar (L → R) ----- */
+
+.an-bounce {
+  animation-name: bounce;
+  animation-duration: calc(var(--ANIM_SPD) * 4);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.an-spin {
+  display: inline-block;
+  box-sizing: border-box;
+  width: var(--SPIN_BOX_SIZE);
+  height: var(--SPIN_BOX_SIZE);
+  vertical-align: middle;
+  border-radius: 50%;
+  border-style: solid;
+  border-width: var(--SPIN_BOX_BORDER_SIZE);
+  border-color: var(--B30);
+  border-top-color: var(--B20);
+  animation-name: spin;
+  animation-duration: calc(var(--ANIM_SPD) * 5);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.an-sbar {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 14rem;
+  height: 0.28rem;
+  min-height: 0.28rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background-color: var(--B30);
+}
+
+.an-sbar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -45%;
+  width: 45%;
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--B400), var(--B20), var(--B600), var(--B400));
+  background-size: 200% 100%;
+  animation: slideBarSweep calc(var(--ANIM_SPD) * 5) ease-in-out infinite;
+}
+
+/**
+ * Pill runs between track walls (alternate = return trip, no jump to 0).
+ * --bbar-ball-pct: segment width (unitless %). --bbar-dur: one leg duration.
+ * --bbar-ease: slightly slower near each wall; middle stays quicker.
+ */
+.an-bbar {
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 14rem;
+  height: 0.28rem;
+  min-height: 0.28rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background-color: var(--B30);
+  --bbar-ball-pct: 40;
+  --bbar-dur: 1s;
+  /** Slight slowdown at each wall (start, far end, and same on the return leg). */
+  --bbar-ease: cubic-bezier(0.45, 0.1, 0.55, 0.9);
+}
+
+.an-bbar::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: calc(var(--bbar-ball-pct) * 1%);
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--B400), var(--B20), var(--B600), var(--B400));
+  background-size: 200% 100%;
+  will-change: transform;
+  animation-name: bounceBarBall;
+  animation-duration: var(--bbar-dur);
+  animation-timing-function: var(--bbar-ease);
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+/* ----- Keyframes ----- */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulseInOut {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+
+  to {
+    transform: scale3d(1.04, 1.04, 1);
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  50%,
+  80%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  40% {
+    transform: translate3d(0, -0.5rem, 0);
+  }
+
+  60% {
+    transform: translate3d(0, -0.25rem, 0);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate3d(0, 0, 1, 0deg);
+    border-top-color: var(--B20);
+  }
+
+  50% {
+    border-top-color: var(--B400);
+  }
+
+  75% {
+    border-top-color: var(--B600);
+  }
+
+  100% {
+    transform: rotate3d(0, 0, 1, 360deg);
+    border-top-color: var(--B20);
+  }
+}
+
+@keyframes slideBarSweep {
+  0% {
+    transform: translate3d(0, 0, 0);
+    background-position: 0% 50%;
+    opacity: 0.85;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    transform: translate3d(320%, 0, 0);
+    background-position: 100% 50%;
+    opacity: 0.9;
+  }
+}
+
+@keyframes bounceBarBall {
+  0% {
+    transform: translate3d(0, 0, 0);
+    background-position: 0% 50%;
+  }
+
+  100% {
+    transform: translate3d(calc((100 - var(--bbar-ball-pct)) / var(--bbar-ball-pct) * 100%), 0, 0);
+    background-position: 100% 50%;
+  }
+}