refactor: UI primitives, widgets split, brand sources/, SCSS theming

Post-Part-A refinement pass. Seven coherent changes that tighten
naming discipline, deduplicate view SCSS, isolate web sources from
shared HUD vocabulary, and fix the silently-broken brand theming
chain. 23 files staged.

1. Three new shared/components/ui/ primitives

     data-point.vue   <UiDataPoint>   label/value tile (sm | lg)
     chip.vue         <UiChip>        lowercase pill (solid | overflow)
     badge.vue        <UiBadge>       uppercase status pill (active | dim)

   Replaced ~12 inline duplicates across stats.vue, card.vue, and
   detail.vue. ~40 lines of duplicated SCSS removed from consumers.
   All props-in-DOM-out — correctly placed in ui/ (no side-effects).

2. shared/widgets/ split by kind

     widgets/audio-meter.vue   to  widgets/hud/audio-meter.vue
     widgets/live-readout.vue  to  widgets/ui/live-readout.vue

   Mirrors the shared/components/hud|ui split: audio-meter is
   OBS-coupled (HUD-domain), live-readout is domain-agnostic.
   Consumers import via @widgets/hud/* and @widgets/ui/*.

3. Filenames describe purpose, never repeat the alias kind (Rule G)

     sections/meta.vue              to  sections/stats.vue
     ui/metric.vue                  to  ui/data-point.vue
     ui/status.vue                  to  ui/status-dot.vue
     views/utils/parse-emphasis.js  to  views/utils/markup.js

   "meta" was ambiguous (metadata/HTML-meta/meta-programming).
   "metric of what?" / "status shown how?" tests failed — multi-
   word names answer the question. Modals stay single-word
   (base/preview/detail.vue) because @modals/ already supplies
   "modal" — base-modal.vue would be redundant. Bindings keep
   the kind: <BaseModal>, <UiDataPoint>, <StatsSection>.

4. Utils as topic-based libraries (Rule J)

   markup.js holds parseEmphasis as a named export. Future markup
   parsers (parseLinks, parseCodeSpans) live in the same file.
   Never one-function-per-file. Composables exempt — one useX
   per file because hooks own state and lifecycle.

5. Brand folder restructured to mirror src/shared/

     @brand/hud/cam-log.vue   to  @brand/sources/hud/cam-log.vue
     @brand/animation/        to  @brand/sources/animation/
     @brand/scene/            to  @brand/sources/scene/

   Eliminates the clash where @brand/hud/ (web sources) and @hud/
   (shared HUD primitives) both used "hud". brand-loader.js globs
   updated; resolveComponent() key pattern now
   /<brand>/sources/<type>/<id>.vue. Reserved slots documented
   for brand-private components/{hud,ui}/, composables/,
   widgets/{hud,ui}/ (created only when 2+ files exist, Rule F).

6. <UiIcon> multi-pool SVG discovery

   Previously globbed only @shared/assets/svg/*.svg. Now also
   globs /@*/assets/svg/*.svg — any brand can drop SVGs in its
   own assets/svg/ folder and reference them by filename. Brand
   SVGs override shared SVGs on filename collision (useful for
   brand-flavored overrides of shared primitives).

7. Brand theming — SCSS single source of truth

   Fixed three silently-broken things:
     - @<brand>/styles/_theme.scss was orphaned (never imported).
     - brand.js colors duplicated the SCSS values.
     - brand.js held only a subset of palette ranges.

   Fix: src/main.js eagerly globs /@*/styles/_theme.scss so Vite
   bundles every brand theme into global CSS. brand.js lost its
   colors field entirely. App.vue dropped brand_theme_vars and
   only applies .brand-<handle> on route change — the CSS
   cascade does the rest. brand-loader test flipped from "has
   colors object" to "does NOT carry colors field" (enforcement).
   Verified: grep brand-kyonax-on-tech dist/assets/*.css
   matches in the production bundle.

Validation: 27/27 tests pass, 0 lint errors (7 pre-existing
warnings in use-audio-analyzer.js), production build clean in
1.25s.

Modified-by: Cristian D. Moreno (Kyonax) <kyonax25@gmail.com>

Author: Kyonax

@kyonax_on_tech/brand.js

@@ -4,7 +4,10 @@
  * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
  *
  * Brand metadata for @kyonax_on_tech.
- * Single source of truth for identity, styling, and links.
+ *
+ * Identity + links + description live here. Colors and tokens live
+ * in `styles/_theme.scss` — that file is the single source of truth
+ * for the brand's visual palette. `brand.js` never duplicates it.
  */
 
 export default {
@@ -23,22 +26,4 @@ export default {
     youtube: 'https://www.youtube.com/channel/UCrNDk3dbrDQL9CWd1_fjyvA',
     github: 'https://github.com/kyonax',
   },
-
-  colors: {
-    primary_50: 'hsl(48, 95%, 78%)',
-    primary_100: 'hsl(47, 95%, 56%)',
-    primary_200: 'hsl(49, 100%, 39%)',
-    primary_300: 'hsl(48, 100%, 29%)',
-    primary_400: 'hsl(45, 100%, 20%)',
-    primary_500: 'hsl(35, 100%, 13%)',
-    secondary_50: 'hsl(224, 95%, 78%)',
-    secondary_100: 'hsl(224, 95%, 56%)',
-    secondary_200: 'hsl(224, 74%, 45%)',
-    neutral_50: 'hsl(0, 0%, 95%)',
-    neutral_100: 'hsl(0, 0%, 85%)',
-    neutral_200: 'hsl(0, 0%, 65%)',
-    neutral_300: 'hsl(0, 0%, 45%)',
-    neutral_400: 'hsl(0, 0%, 25%)',
-    neutral_500: 'hsl(0, 0%, 0%)',
-  },
 };

@kyonax_on_tech/hud/cam-log.vue @kyonax_on_tech/sources/hud/cam-log.vue@kyonax_on_tech/hud/cam-log.vue renamed to @kyonax_on_tech/sources/hud/cam-log.vue

@@ -75,8 +75,8 @@ import HudFrame from '@hud/frame.vue';
 import HudTimer from '@hud/timer.vue';
 import { getBrand } from '@shared/brand-loader.js';
 import { VERSION_TAG } from '@shared/version.js';
-import AudioMeter from '@widgets/audio-meter.vue';
-import LiveReadout from '@widgets/live-readout.vue';
+import AudioMeter from '@widgets/hud/audio-meter.vue';
+import LiveReadout from '@widgets/ui/live-readout.vue';
 import { computed, ref } from 'vue';
 
 const brand = getBrand('@kyonax_on_tech');

@kyonax_on_tech/styles/_theme.scss

@@ -1,36 +1,46 @@
-/*
- * Copyright (c) 2026 Cristian D. Moreno — @Kyonax
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
- *
- * Brand theme for @kyonax_on_tech.
- * Gold + black cyberpunk palette. Overrides CSS custom properties
- * when this brand's web sources are rendered.
- *
- * Colors here match the global defaults intentionally — they exist
- * so this brand is fully containerized. A new brand can copy this
- * file and change the values without touching the global theme.
- */
+// Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+//
+// Brand theme for @kyonax_on_tech — gold + black cyberpunk palette.
+//
+// Single source of truth for this brand's visual palette. Auto-loaded
+// by src/main.js (eager glob over every brand's theme SCSS file).
+// Active whenever App.vue applies `class="brand-kyonax-on-tech"` —
+// which happens on any route whose meta.brand resolves to this brand
+// (see src/router.js + src/App.vue).
+//
+// Override any CSS custom property declared by src/app/scss/abstracts
+// by redeclaring it inside this class block. Unlisted variables fall
+// back to the global default from the project's :root scope.
+//
+// A new brand can copy this file, rename the class selector to
+// `.brand-<handle>` (with the @-sign stripped and underscores turned
+// into dashes), and tune any subset of variables it wants to override.
 
 .brand-kyonax-on-tech {
+  // ── Primary (gold) ──────────────────────────────────────────
   --clr-primary-50: hsl(48, 95%, 78%);
   --clr-primary-100: hsl(47, 95%, 56%);
   --clr-primary-200: hsl(49, 100%, 39%);
   --clr-primary-300: hsl(48, 100%, 29%);
   --clr-primary-400: hsl(45, 100%, 20%);
   --clr-primary-500: hsl(35, 100%, 13%);
 
+  // ── Secondary (blue accent) ─────────────────────────────────
   --clr-secondary-50: hsl(224, 95%, 78%);
   --clr-secondary-100: hsl(224, 95%, 56%);
   --clr-secondary-200: hsl(224, 74%, 45%);
 
+  // ── Neutrals (black → white) ────────────────────────────────
   --clr-neutral-50: hsl(0, 0%, 95%);
   --clr-neutral-100: hsl(0, 0%, 85%);
   --clr-neutral-200: hsl(0, 0%, 65%);
   --clr-neutral-300: hsl(0, 0%, 45%);
   --clr-neutral-400: hsl(0, 0%, 25%);
   --clr-neutral-500: hsl(0, 0%, 0%);
 
+  // ── Status colors ────────────────────────────────────────────
   --clr-error-100: hsl(352, 69%, 48%);
   --clr-success-100: hsl(91, 62%, 44%);
 }

src/App.vue

@@ -5,21 +5,21 @@
 -->
 
 <template>
-  <div
-    :class="brand_class"
-    :style="brand_theme_vars"
-  >
+  <div :class="brand_class">
     <router-view />
   </div>
 </template>
 
 <script setup>
-import { BRANDS } from '@shared/brand-loader.js';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
+// Brand theme is applied via a class selector — the actual CSS
+// custom property overrides live in `@<brand>/styles/_theme.scss`,
+// auto-loaded by src/main.js. This component only announces the
+// brand context; the CSS cascade does the rest.
 const brand_class = computed(() => {
   const handle = route.meta?.brand;
 
@@ -29,28 +29,6 @@ const brand_class = computed(() => {
 
   return `brand-${handle.replace('@', '').replace(/_/g, '-')}`;
 });
-
-const brand_theme_vars = computed(() => {
-  const handle = route.meta?.brand;
-
-  if (!handle) {
-    return {};
-  }
-
-  const brand = BRANDS.find((b) => b.handle === handle);
-
-  if (!brand?.colors || !Object.keys(brand.colors).length) {
-    return {};
-  }
-
-  const vars = {};
-
-  for (const [key, value] of Object.entries(brand.colors)) {
-    vars[`--clr-${key.replace(/_/g, '-')}`] = value;
-  }
-
-  return vars;
-});
 </script>
 
 <style lang="scss">

src/main.js

@@ -9,6 +9,16 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import { router } from './router.js';
 
+// Auto-load every brand's theme SCSS so the global CSS bundle
+// carries each brand's `.brand-<handle>` selector with its CSS
+// custom property overrides. Vite processes every matching file
+// eagerly at build time — the brand theme is the single source
+// of truth for colors/tokens per brand.
+import.meta.glob(
+  '/@*/styles/_theme.scss',
+  { eager: true },
+);
+
 const app = createApp(App);
 
 app.use(router);

src/shared/brand-loader.js

@@ -19,9 +19,11 @@ const source_modules = import.meta.glob(
   { eager: true, import: 'default' },
 );
 
-const hud_components = import.meta.glob('/@*/hud/*.vue');
-const animation_components = import.meta.glob('/@*/animation/*.vue');
-const scene_components = import.meta.glob('/@*/scene/*.vue');
+const hud_components = import.meta.glob('/@*/sources/hud/*.vue');
+const animation_components = import.meta.glob(
+  '/@*/sources/animation/*.vue',
+);
+const scene_components = import.meta.glob('/@*/sources/scene/*.vue');
 
 export const BRANDS = Object.values(brand_modules);
 export const SOURCES = Object.values(source_modules).flat();
@@ -51,7 +53,7 @@ export function resolveComponent(source) {
     return null;
   }
 
-  const key = `/${source.brand}/${source.type}/${source.id}.vue`;
+  const key = `/${source.brand}/sources/${source.type}/${source.id}.vue`;
 
   return components[key] || null;
 }

src/shared/brand-loader.test.js

@@ -57,10 +57,17 @@ describe('Brand loader — BRANDS', () => {
   );
 
   it.each(BRANDS)(
-    'brand $handle has colors object',
+    'brand $handle has links object',
     (brand) => {
-      expect(brand).toHaveProperty('colors');
-      expect(typeof brand.colors).toBe('object');
+      expect(brand).toHaveProperty('links');
+      expect(typeof brand.links).toBe('object');
+    },
+  );
+
+  it.each(BRANDS)(
+    'brand $handle does NOT carry a colors field (theme lives in styles/_theme.scss)',
+    (brand) => {
+      expect(brand.colors).toBeUndefined();
     },
   );
 

src/shared/components/hud/timer.vue

@@ -9,15 +9,15 @@
     class="recording-timer"
     :class="{ recording: is_recording }"
   >
-    <UiStatus :active="is_recording" />
+    <UiStatusDot :active="is_recording" />
     <span class="rec" :class="{ active: is_recording }">REC</span>
     <span class="mode">MODE:</span>
     <span class="time">{{ elapsed_time }}</span>
   </div>
 </template>
 
 <script setup>
-import UiStatus from '@ui/status.vue';
+import UiStatusDot from '@ui/status-dot.vue';
 
 defineProps({
   is_recording: {

src/shared/components/ui/badge.vue

@@ -0,0 +1,54 @@
+<!--
+  Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+
+  ui-badge — HUD status pill with primary/neutral variant. Used for
+  overlay status indicators (ready, planned), metadata flags, and
+  any small standalone label that needs a bordered box.
+
+  Props:
+    variant — "active" (default, gold on gold border)
+              "dim"   (muted text on muted border, for planned/inactive)
+-->
+
+<template>
+  <span class="ui-badge" :class="variant_class">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'active',
+    validator: (v) => ['active', 'dim'].includes(v),
+  },
+});
+
+const variant_class = computed(() => `ui-badge--${props.variant}`);
+</script>
+
+<style scoped lang="scss">
+@use "@app/scss/abstracts/mixins" as *;
+
+.ui-badge {
+  @include hud-label-base;
+  position: static;
+  display: inline-block;
+  padding: 0.25em 0.65em;
+  font-size: var(--fs-150);
+  letter-spacing: 0.18em;
+  white-space: nowrap;
+  border: 1px solid var(--clr-primary-100);
+  color: var(--clr-primary-100);
+}
+
+.ui-badge--dim {
+  border-color: var(--clr-neutral-200);
+  color: var(--clr-neutral-200);
+}
+</style>

src/shared/components/ui/chip.vue

@@ -0,0 +1,59 @@
+<!--
+  Copyright (c) 2026 Cristian D. Moreno — @Kyonax
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. See LICENSE or https://mozilla.org/MPL/2.0/
+
+  ui-chip — lowercase pill chip with gold text on translucent gold
+  background. Used for category / keyword / tag-like metadata in a
+  flex row. Naming follows Material Design / PrimeVue / Quasar —
+  "chip" is the standard web-UI term for this primitive (distinct
+  from HTML tags, distinct from <UiBadge> which is uppercase status).
+
+  Renders as a span so callers control the surrounding layout
+  (typically a flex container).
+
+  Props:
+    variant — "solid" (default) | "overflow" (dashed border +
+              dimmed — used for "+N more" indicators at the end
+              of a list).
+-->
+
+<template>
+  <span class="ui-chip" :class="variant_class">
+    <slot />
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'solid',
+    validator: (v) => ['solid', 'overflow'].includes(v),
+  },
+});
+
+const variant_class = computed(() => `ui-chip--${props.variant}`);
+</script>
+
+<style scoped lang="scss">
+.ui-chip {
+  display: inline-block;
+  padding: 0.25em 0.6em;
+  font-family: var(--font-mono);
+  font-size: var(--fs-175);
+  letter-spacing: 0.1em;
+  color: var(--clr-primary-100);
+  background: rgba(255, 215, 0, 0.06);
+  border: 1px solid var(--clr-border-100);
+  text-transform: lowercase;
+  white-space: nowrap;
+}
+
+.ui-chip--overflow {
+  opacity: 0.5;
+  border-style: dashed;
+}
+</style>