@noobsociety/nsds 0.3.1 → 0.4.1

package/dist/registry-BizUEm6W.js

@@ -0,0 +1,136 @@
+//#region components/shared/constants.ts
+var e = {
+	gold: "var(--ns-gold)",
+	pink: "var(--ns-pink)",
+	purple: "var(--ns-purple)",
+	cyan: "var(--ns-cyan)",
+	green: "var(--ns-green)",
+	orange: "var(--ns-orange)",
+	later: "var(--ns-ink-faint)"
+}, t = e, n = {
+	done: {
+		className: "ns-quest-card--done",
+		label: "HOLDS",
+		icon: "✓"
+	},
+	active: {
+		className: "ns-quest-card--active",
+		label: "BUILDING",
+		icon: "▶"
+	},
+	planned: {
+		className: "ns-quest-card--planned",
+		label: "PLANNED",
+		icon: "◌"
+	},
+	locked: {
+		className: "ns-quest-card--locked",
+		label: "LATER",
+		icon: "✦"
+	}
+}, r = [
+	"sword",
+	"bow",
+	"staff",
+	"katar",
+	"book",
+	"hammer"
+], i = [
+	"neutral",
+	"fire",
+	"earth",
+	"wind",
+	"water",
+	"light",
+	"dark",
+	"void"
+], a = [
+	"human",
+	"beast",
+	"demon",
+	"angel",
+	"spirit"
+], o = [
+	"small",
+	"medium",
+	"large"
+], s = [
+	"attack-sword",
+	"attack-bow",
+	"attack-staff",
+	"attack-katar",
+	"attack-book",
+	"attack-hammer"
+], c = [
+	"passive",
+	"active",
+	"combo",
+	"stance",
+	"buff",
+	"debuff"
+], l = [
+	"potion",
+	"ether",
+	"scroll",
+	"gem",
+	"relic",
+	"key"
+], u = [
+	"helm",
+	"armor",
+	"cloak",
+	"shield",
+	"ring",
+	"greaves"
+], d = [
+	"hat",
+	"emblem",
+	"cape",
+	"badge",
+	"boots"
+], f = [
+	"menu",
+	"inventory",
+	"party",
+	"quest",
+	"map",
+	"shop",
+	"settings",
+	"save"
+], p = [
+	"emote-tysm",
+	"emote-sos",
+	"emote-lol",
+	"emote-win",
+	"emote-lgo",
+	"emote-ugh",
+	"emote-myb",
+	"emote-wut",
+	"emote-grr"
+], m = {
+	weapons: r,
+	elements: i,
+	races: a,
+	sizes: o,
+	attack: s,
+	skills: c,
+	items: l,
+	equip: u,
+	skins: d,
+	menu: f,
+	emotes: p
+}, h = [
+	...r,
+	...i,
+	...a,
+	...o,
+	...s,
+	...c,
+	...l,
+	...u,
+	...d,
+	...f,
+	...p
+];
+//#endregion
+export { m as a, h as c, c as d, r as f, n as h, u as i, a as l, e as m, i as n, l as o, t as p, p as r, f as s, s as t, o as u };

package/dist/registry-Cyq-qspU.cjs

@@ -0,0 +1 @@
+var e={gold:`var(--ns-gold)`,pink:`var(--ns-pink)`,purple:`var(--ns-purple)`,cyan:`var(--ns-cyan)`,green:`var(--ns-green)`,orange:`var(--ns-orange)`,later:`var(--ns-ink-faint)`},t=e,n={done:{className:`ns-quest-card--done`,label:`HOLDS`,icon:`✓`},active:{className:`ns-quest-card--active`,label:`BUILDING`,icon:`▶`},planned:{className:`ns-quest-card--planned`,label:`PLANNED`,icon:`◌`},locked:{className:`ns-quest-card--locked`,label:`LATER`,icon:`✦`}},r=[`sword`,`bow`,`staff`,`katar`,`book`,`hammer`],i=[`neutral`,`fire`,`earth`,`wind`,`water`,`light`,`dark`,`void`],a=[`human`,`beast`,`demon`,`angel`,`spirit`],o=[`small`,`medium`,`large`],s=[`attack-sword`,`attack-bow`,`attack-staff`,`attack-katar`,`attack-book`,`attack-hammer`],c=[`passive`,`active`,`combo`,`stance`,`buff`,`debuff`],l=[`potion`,`ether`,`scroll`,`gem`,`relic`,`key`],u=[`helm`,`armor`,`cloak`,`shield`,`ring`,`greaves`],d=[`hat`,`emblem`,`cape`,`badge`,`boots`],f=[`menu`,`inventory`,`party`,`quest`,`map`,`shop`,`settings`,`save`],p=[`emote-tysm`,`emote-sos`,`emote-lol`,`emote-win`,`emote-lgo`,`emote-ugh`,`emote-myb`,`emote-wut`,`emote-grr`],m={weapons:r,elements:i,races:a,sizes:o,attack:s,skills:c,items:l,equip:u,skins:d,menu:f,emotes:p},h=[...r,...i,...a,...o,...s,...c,...l,...u,...d,...f,...p];Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return n}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return e}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return t}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return o}});

package/dist/styles.css

@@ -11,3 +11,4 @@
 @import './tokens/hud.css';
 @import './tokens/base.css';
 @import './components/primitives.css';
+@import './components/hud-editor.css';

package/dist/tokens/base.css

@@ -1,5 +1,9 @@
 /* NoobSociety — Base resets and body defaults */
-*, *::before, *::after { box-sizing: border-box; }
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 html {
   scroll-behavior: smooth;
@@ -23,9 +27,18 @@ body {
   text-rendering: optimizeLegibility;
 }
 
-img { display: block; max-width: 100%; }
-a   { color: var(--ns-gold); text-decoration: none; transition: color var(--ns-transition-fast); }
-a:hover { color: var(--ns-gold-pale); }
+img {
+  display: block;
+  max-width: 100%;
+}
+a {
+  color: var(--ns-gold);
+  text-decoration: none;
+  transition: color var(--ns-transition-fast);
+}
+a:hover {
+  color: var(--ns-gold-pale);
+}
 
 button,
 input,

package/dist/tokens/colors.css

@@ -1,79 +1,83 @@
 /* NoobSociety — Color tokens (Monokai dark) */
 :root {
   /* ── Surfaces ─────────────────────────────────────────────── */
-  --ns-bg-0:      #1a1a16;   /* deepest — footer, sidebar */
-  --ns-bg-1:      #272822;   /* page base */
-  --ns-bg-2:      #32332b;   /* raised surfaces, icon slots */
-  --ns-glass:     rgba(30, 31, 26, 0.88);  /* card, header backdrop */
-  --ns-glass-2:   rgba(30, 31, 26, 0.60);  /* lighter glass */
+  --ns-bg-0: #1a1a16; /* deepest — footer, sidebar */
+  --ns-bg-1: #272822; /* page base */
+  --ns-bg-2: #32332b; /* raised surfaces, icon slots */
+  --ns-glass: rgba(30, 31, 26, 0.88); /* card, header backdrop */
+  --ns-glass-2: rgba(30, 31, 26, 0.6); /* lighter glass */
   --ns-glass-soft: rgba(30, 31, 26, 0.75); /* subtle card surface */
 
-  --ns-bg-0-rgb: 26 26 22;     /* @kind other */
-  --ns-bg-1-rgb: 39 40 34;      /* @kind other */
-  --ns-bg-2-rgb: 50 51 43;      /* @kind other */
-  --ns-glass-rgb: 30 31 26;     /* @kind other */
+  --ns-bg-0-rgb: 26 26 22; /* @kind other */
+  --ns-bg-1-rgb: 39 40 34; /* @kind other */
+  --ns-bg-2-rgb: 50 51 43; /* @kind other */
+  --ns-glass-rgb: 30 31 26; /* @kind other */
 
   /* ── Borders ──────────────────────────────────────────────── */
-  --ns-line:        rgba(255, 255, 255, 0.12);
+  --ns-line: rgba(255, 255, 255, 0.12);
   --ns-line-strong: rgba(255, 255, 255, 0.22);
-  --ns-line-soft:   rgba(255, 255, 255, 0.08);
+  --ns-line-soft: rgba(255, 255, 255, 0.08);
 
   /* ── Ink (text) ───────────────────────────────────────────── */
-  --ns-ink:       #f8f8f2;   /* primary text — Monokai foreground */
-  --ns-ink-dim:   #a8a28c;   /* secondary text */
-  --ns-ink-faint: #75715e;   /* placeholder, captions — Monokai comment */
-  --ns-ink-rgb:       248 248 242;  /* @kind other */
-  --ns-ink-dim-rgb:   168 162 140;  /* @kind other */
-  --ns-ink-faint-rgb: 117 113 94;   /* @kind other */
+  --ns-ink: #f8f8f2; /* primary text — Monokai foreground */
+  --ns-ink-dim: #a8a28c; /* secondary text */
+  --ns-ink-faint: #75715e; /* placeholder, captions — Monokai comment */
+  --ns-ink-rgb: 248 248 242; /* @kind other */
+  --ns-ink-dim-rgb: 168 162 140; /* @kind other */
+  --ns-ink-faint-rgb: 117 113 94; /* @kind other */
 
   /* ── Brand yellow (gold) — primary accent ─────────────────── */
-  --ns-gold:        #e6db74;
-  --ns-gold-pale:   #f4f099;
-  --ns-gold-deep:   #cabb50;
+  --ns-gold: #e6db74;
+  --ns-gold-pale: #f4f099;
+  --ns-gold-deep: #cabb50;
   --ns-gold-shadow: #b5a83f;
   --ns-gold-btn-fg: #1c1c17; /* text on gold buttons */
-  --ns-gold-rgb:        230 219 116;  /* @kind other */
-  --ns-gold-pale-rgb:   244 240 153;  /* @kind other */
-  --ns-gold-deep-rgb:   202 187 80;   /* @kind other */
-  --ns-gold-shadow-rgb: 181 168 63;   /* @kind other */
+  --ns-gold-rgb: 230 219 116; /* @kind other */
+  --ns-gold-pale-rgb: 244 240 153; /* @kind other */
+  --ns-gold-deep-rgb: 202 187 80; /* @kind other */
+  --ns-gold-shadow-rgb: 181 168 63; /* @kind other */
 
   /* ── Monokai semantic accents ─────────────────────────────── */
-  --ns-green:       #a6e22e;  /* "Holds" / success */
-  --ns-green-deep:  #7fb81e;
-  --ns-cyan:        #66d9e8;  /* "Planned" / info */
-  --ns-cyan-deep:   #5bc8d7;
-  --ns-orange:      #fd971f;  /* "Building" / in-progress */
+  --ns-green: #a6e22e; /* "Holds" / success */
+  --ns-green-deep: #7fb81e;
+  --ns-cyan: #66d9e8; /* "Planned" / info */
+  --ns-cyan-deep: #5bc8d7;
+  --ns-orange: #fd971f; /* "Building" / in-progress */
   --ns-orange-deep: #c96f00;
-  --ns-pink:        #f92672;  /* danger / highlight */
-  --ns-purple:      #ae81ff;  /* decorative */
-  --ns-green-rgb:       166 226 46;   /* @kind other */
-  --ns-green-deep-rgb:  127 184 30;   /* @kind other */
-  --ns-cyan-rgb:        102 217 232;  /* @kind other */
-  --ns-cyan-deep-rgb:   91 200 215;   /* @kind other */
-  --ns-orange-rgb:      253 151 31;   /* @kind other */
-  --ns-orange-deep-rgb: 201 111 0;    /* @kind other */
-  --ns-pink-rgb:        249 38 114;   /* @kind other */
-  --ns-purple-rgb:      174 129 255;  /* @kind other */
+  --ns-pink: #f92672; /* danger / highlight */
+  --ns-purple: #ae81ff; /* decorative */
+  --ns-green-rgb: 166 226 46; /* @kind other */
+  --ns-green-deep-rgb: 127 184 30; /* @kind other */
+  --ns-cyan-rgb: 102 217 232; /* @kind other */
+  --ns-cyan-deep-rgb: 91 200 215; /* @kind other */
+  --ns-orange-rgb: 253 151 31; /* @kind other */
+  --ns-orange-deep-rgb: 201 111 0; /* @kind other */
+  --ns-pink-rgb: 249 38 114; /* @kind other */
+  --ns-purple-rgb: 174 129 255; /* @kind other */
 
   /* ── Semantic aliases ─────────────────────────────────────── */
-  --ns-surface-page:   var(--ns-bg-1);
-  --ns-surface-card:   var(--ns-glass);
+  --ns-surface-page: var(--ns-bg-1);
+  --ns-surface-card: var(--ns-glass);
   --ns-surface-raised: var(--ns-bg-2);
-  --ns-text-primary:   var(--ns-ink);
+  --ns-text-primary: var(--ns-ink);
   --ns-text-secondary: var(--ns-ink-dim);
-  --ns-text-muted:     var(--ns-ink-faint);
-  --ns-accent:         var(--ns-gold);
-  --ns-accent-hover:   var(--ns-gold-pale);
-  --ns-status-holds:   var(--ns-green);
+  --ns-text-muted: var(--ns-ink-faint);
+  --ns-accent: var(--ns-gold);
+  --ns-accent-hover: var(--ns-gold-pale);
+  --ns-status-holds: var(--ns-green);
   --ns-status-building: var(--ns-orange);
-  --ns-status-planned:  var(--ns-cyan);
-  --ns-status-later:    var(--ns-ink-faint);
+  --ns-status-planned: var(--ns-cyan);
+  --ns-status-later: var(--ns-ink-faint);
 
   /* ── Quest card status pill backgrounds ──────────────────────── */
-  --ns-quest-pill-done:    rgba(166, 226, 46, 0.10);
-  --ns-quest-pill-active:  rgba(253, 151, 31, 0.12);
+  --ns-quest-pill-done: rgba(166, 226, 46, 0.1);
+  --ns-quest-pill-active: rgba(253, 151, 31, 0.12);
   --ns-quest-pill-planned: rgba(102, 217, 232, 0.12);
-  --ns-quest-pill-locked:  rgba(255, 255, 255, 0.05);
-  --ns-focus-ring:      rgba(230, 219, 116, 0.35);
-  --ns-selection-bg:    rgba(249, 38, 114, 0.28);
+  --ns-quest-pill-locked: rgba(255, 255, 255, 0.05);
+  --ns-focus-ring: rgba(230, 219, 116, 0.35);
+  --ns-selection-bg: rgba(249, 38, 114, 0.28);
+
+  /* ── Quest card component variables (overridden per-status in primitives) ── */
+  --ns-quest-color: var(--ns-status-later); /* default: locked/later */
+  --ns-quest-pill-bg: var(--ns-quest-pill-locked); /* default: locked */
 }

package/dist/tokens/hud.css

@@ -9,125 +9,166 @@
    vital bar colours that have no homepage analogue) the token is defined independently. */
 
 :root {
-
   /* ── Fonts ─────────────────────────────────────────────────── */
-  --hud-font:    var(--ns-font-pixel);  /* chrome labels, tab caps, key glyphs */
-  --hud-font-ui: var(--ns-font-body);  /* draggable windows, dialogue, inventory */
+  --hud-font: var(--ns-font-pixel); /* chrome labels, tab caps, key glyphs */
+  --hud-font-ui: var(--ns-font-body); /* draggable windows, dialogue, inventory */
+
+  /* ── HUD text scale (pixel-perfect at 24×24 grid) ───────────── */
+  --hud-text-xs: 4px;
+  --hud-text-sm: 5px;
+  --hud-text-md: 7px;
+  --hud-text-lg: 9px;
+  --hud-text-xl: 11px;
 
   /* ── Accent / currency ─────────────────────────────────────── */
   /* DS is source of truth: game migrates from #ffe066 → --ns-gold (#e6db74). */
-  --hud-gold:    var(--ns-gold);
-  --hud-talents: var(--ns-gold);        /* Talents wallet number */
+  --hud-gold: var(--ns-gold);
+  --hud-talents: var(--ns-gold); /* Talents wallet number */
 
   /* ── Text ───────────────────────────────────────────────────── */
-  --hud-text:     var(--ns-ink);
+  --hud-text: var(--ns-ink);
   --hud-text-dim: var(--ns-ink-dim);
-  --hud-shadow:   none;                  /* no text-shadow at HUD pixel sizes */
+  --hud-shadow: none; /* no text-shadow at HUD pixel sizes */
   --hud-bar-shadow: none;
 
   /* ── Surfaces ───────────────────────────────────────────────── */
   /* Game chrome glass: lighter than --ns-glass so the world reads through. */
-  --hud-glass:      rgba(12, 16, 22, 0.62);
+  --hud-glass: rgba(12, 16, 22, 0.62);
   --hud-glass-blur: 6px;
-  --hud-bg:         rgba(0, 0, 0, 0.35);
-  --hud-bg-strong:  rgba(0, 0, 0, 0.72);
-  --hud-track:      rgba(255, 255, 255, 0.10);   /* bar + XP track background */
-  --hud-line:       rgba(255, 255, 255, 0.18);
-  --hud-avatar-bg:  rgba(72, 86, 116, 0.82);
+  --hud-bg: rgba(0, 0, 0, 0.35);
+  --hud-bg-strong: rgba(0, 0, 0, 0.72);
+  --hud-track: rgba(255, 255, 255, 0.1); /* bar + XP track background */
+  --hud-line: rgba(255, 255, 255, 0.18);
+  --hud-divider: var(--hud-line);
+  --hud-avatar-bg: rgba(72, 86, 116, 0.82);
 
   /* ── Input / selection ─────────────────────────────────────── */
-  --hud-input-bg:  rgba(10, 14, 20, 0.55);
-  --hud-sel-bg:    var(--ns-ink);
-  --hud-sel-fg:    var(--ns-bg-1);
+  --hud-input-bg: rgba(10, 14, 20, 0.55);
+  --hud-sel-bg: var(--ns-ink);
+  --hud-sel-fg: var(--ns-bg-1);
 
   /* ── Elements (identity.ts ELEMENT_DISPLAY) ───────────────────── */
   /* ── Elements (identity.ts ELEMENT_DISPLAY exact colors) ─────────── */
   --hud-el-neutral: #888780;
-  --hud-el-earth:   #639922;
-  --hud-el-wind:    #5dcaa5;
-  --hud-el-water:   #378add;
-  --hud-el-fire:    #ba7517;
-  --hud-el-light:   #fac775;
-  --hud-el-dark:    #888780;
-  --hud-el-void:    #7f77dd;
+  --hud-el-earth: #639922;
+  --hud-el-wind: #5dcaa5;
+  --hud-el-water: #378add;
+  --hud-el-fire: #ba7517;
+  --hud-el-light: #fac775;
+  --hud-el-dark: #888780;
+  --hud-el-void: #7f77dd;
 
   /* ── Vital bars ─────────────────────────────────────────────── */
   /* HP — green track, bright fill, low-HP red warning */
-  --hud-hp:         var(--hud-track);  /* track background */
-  --hud-hp-fill:    #4caf73;   /* normal fill */
-  --hud-hp-low:     #cc3333;   /* fill under 30% → also pulses */
-  --hud-hp-label:   #88ee88;   /* "HP" label text in classic bar */
+  --hud-hp: var(--hud-track); /* track background */
+  --hud-hp-fill: #4caf73; /* normal fill */
+  --hud-hp-low: #cc3333; /* fill under 30% → also pulses */
+  --hud-hp-label: #88ee88; /* "HP" label text in classic bar */
   /* MP — blue track, bright fill, low-MP muted */
-  --hud-mp:         var(--hud-track);  /* track background (internal id: sp) */
-  --hud-mp-fill:    #5b9bd5;   /* normal fill */
-  --hud-mp-low:     #4f7fc0;   /* fill under 30% */
-  --hud-mp-label:   #8888ee;   /* "MP"/"SP" label text */
+  --hud-mp: var(--hud-track); /* track background (internal id: sp) */
+  --hud-mp-fill: #5b9bd5; /* normal fill */
+  --hud-mp-low: #4f7fc0; /* fill under 30% */
+  --hud-mp-label: #8888ee; /* "MP"/"SP" label text */
+
+  /* Stamina — segmented endurance bar */
+  --hud-stamina-fill: #5dcaa5; /* teal fill */
+  --hud-stamina-label: #8fe6cc; /* stamina label text */
 
   /* ── XP tracks ──────────────────────────────────────────────── */
   /* Three independent mastery tracks: Base (BXP), Tech (TXP), Weapon (WXP). */
-  --hud-xp-base:          #4488cc;   /* BXP fill — steel blue */
-  --hud-xp-base-rgb:      68 136 204;  /* @kind other */
-  --hud-xp-base-label:    #88aaee;   /* BXP label */
-  --hud-xp-job:           #8855cc;   /* TXP fill — purple */
-  --hud-xp-job-rgb:       136 85 204;  /* @kind other */
-  --hud-xp-job-label:     #aa88ee;   /* TXP label */
-  --hud-xp-weapon:        #cc8844;   /* WXP fill — amber */
-  --hud-xp-weapon-rgb:    204 136 68;  /* @kind other */
-  --hud-xp-weapon-label:  #eeaa66;   /* WXP label */
+  --hud-xp-base: #4488cc; /* BXP fill — steel blue */
+  --hud-xp-base-rgb: 68 136 204; /* @kind other */
+  --hud-xp-base-label: #88aaee; /* BXP label */
+  --hud-xp-job: #8855cc; /* TXP fill — purple */
+  --hud-xp-job-rgb: 136 85 204; /* @kind other */
+  --hud-xp-job-label: #aa88ee; /* TXP label */
+  --hud-xp-weapon: #cc8844; /* WXP fill — amber */
+  --hud-xp-weapon-rgb: 204 136 68; /* @kind other */
+  --hud-xp-weapon-label: #eeaa66; /* WXP label */
 
   /* Progress bars in the player card detail (Marks / Craft). */
-  --hud-marks-track:  #3a2e6e;
-  --hud-marks-fill:   #7f77dd;
-  --hud-craft-track:  #4a2e0a;
-  --hud-craft-fill:   #ba7517;
+  --hud-marks-track: #3a2e6e;
+  --hud-marks-fill: #7f77dd;
+  --hud-craft-track: #4a2e0a;
+  --hud-craft-fill: #ba7517;
 
   /* ── Chat log channel tones ─────────────────────────────────── */
   /* Logs tab (battle narration) vs Chat tab (social stream). */
-  --hud-tone-battle: #ff8888;   /* combat hits, defeat lines */
-  --hud-tone-world:  #88ccff;   /* map announcements, world events */
-  --hud-tone-gain:   #aaffaa;   /* EXP / loot / discovery / rewards */
-  --hud-tone-say:    #cccccc;   /* player speech, system messages */
+  --hud-tone-battle: #ff8888; /* combat hits, defeat lines */
+  --hud-tone-world: #88ccff; /* map announcements, world events */
+  --hud-tone-gain: #aaffaa; /* EXP / loot / discovery / rewards */
+  --hud-tone-say: #cccccc; /* player speech, system messages */
 
   /* ── Status / buffs ─────────────────────────────────────────── */
-  --hud-danger:  var(--ns-pink);   /* death zone, error states */
-  --hud-buff:    var(--ns-green);  /* positive effect glyphs */
-  --hud-debuff:  #ee6666;          /* negative effect glyphs */
+  --hud-danger: var(--ns-pink); /* death zone, error states */
+  --hud-buff: var(--ns-green); /* positive effect glyphs */
+  --hud-debuff: #ee6666; /* negative effect glyphs */
 
   /* ── Minimap ────────────────────────────────────────────────── */
-  --hud-minimap-bg:   #091509;                      /* canvas fill */
-  --hud-minimap-edge: #2a4a2a;                      /* outer diamond stroke */
-  --hud-minimap-player: #ffffff;                    /* player dot */
-  --hud-minimap-enemy:  #ff5a5a;                    /* aggressive mob dot */
-  --hud-minimap-npc:    #f4c542;                    /* interactable / NPC dot */
-  --hud-minimap-dest:   var(--ns-cyan);             /* walk-goal diamond */
+  --hud-minimap-bg: #091509; /* canvas fill */
+  --hud-minimap-edge: #2a4a2a; /* outer diamond stroke */
+  --hud-minimap-path: var(--hud-gold); /* paths / points of interest */
+  --hud-minimap-player: #ffffff; /* player dot */
+  --hud-minimap-enemy: #ff5a5a; /* aggressive mob dot */
+  --hud-minimap-npc: #f4c542; /* interactable / NPC dot */
+  --hud-minimap-dest: var(--ns-cyan); /* walk-goal diamond */
 
   /* ── Geometry ───────────────────────────────────────────────── */
-  --hud-radius:    4px;
+  --hud-radius: 4px;
   --hud-radius-sm: 2px;
+  --hud-grid-overlay: rgba(255, 255, 255, 0.07); /* drag-mode grid line tint */
+
+  /* ── Scene Builder editor chrome ────────────────────────────── */
+  /* Canvas-editing affordances for the HUD composer (resize handles, delete
+     buttons, align bar, swatches, ghost, tooltips). Consumed by
+     components/scene-builder.css — the source of truth for the editor's look.
+     The black-ink shadows below live in tokens (not literals) so every editing
+     overlay shares one stroke/ring vocabulary. */
+  --hud-edit-handle: 5px; /* resize-handle box */
+  --hud-edit-handle-fill: rgb(var(--ns-gold-rgb) / 0.95);
+  --hud-edit-handle-ring: 0 0 0 1px rgba(0, 0, 0, 0.6);
+  --hud-edit-del: 10px; /* per-element + floating delete */
+  --hud-edit-btn: 22px; /* header chrome buttons */
+  --hud-edit-toggle-h: 18px; /* grid / hud / bg toggles */
+  --hud-edit-ring: rgba(0, 0, 0, 0.5); /* floater & tooltip 1px ring / drop shadow */
+  --hud-edit-hover: rgba(255, 255, 255, 0.06); /* subtle chrome hover fill */
+  --hud-edit-overlay: rgba(255, 255, 255, 0.1); /* align-button resting fill */
+  /* White HUD text over the world: 4-corner pixel stroke (+ soft glow on labels). */
+  --hud-edit-stroke:
+    -1px -1px 0 rgba(0, 0, 0, 0.92), 1px -1px 0 rgba(0, 0, 0, 0.92), -1px 1px 0 rgba(0, 0, 0, 0.92),
+    1px 1px 0 rgba(0, 0, 0, 0.92), 0 0 4px rgba(0, 0, 0, 0.6);
+  --hud-edit-stroke-bar:
+    -1px -1px 0 rgba(0, 0, 0, 0.92), 1px -1px 0 rgba(0, 0, 0, 0.92), -1px 1px 0 rgba(0, 0, 0, 0.92),
+    1px 1px 0 rgba(0, 0, 0, 0.92);
 
   /* ── Cross-layout geometry (640×360 design space) ───────────── */
   /* The HUD lives in a 3×3 grid over the 640×360 canvas.
      Each corner pocket sits inside its cell with 5% padding per axis. */
-  --hud-cross-cell-w: calc(640px / 3); /* @kind other */  /* 213.33px */
-  --hud-cross-cell-h: calc(360px / 3); /* @kind other */  /* 120px */
-  --hud-cross-pad-x:  calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px */
+  --hud-cross-cell-w: calc(640px / 3); /* @kind other */ /* 213.33px */
+  --hud-cross-cell-h: calc(360px / 3); /* @kind other */ /* 120px */
+  --hud-cross-pad-x: calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px */
   /* NOTE: CSS percentage padding always resolves to % of the element WIDTH,
      so pad-y equals pad-x, not 5% of the cell height. */
-  --hud-cross-pad-y:  calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px — same as pad-x */
-
-  /* ── Inner 8×8 grid cell size (padded pocket ÷ 8) ──────────── */
-  /* The padded pocket is 90% of the cell (5% pad each side). */
-  /* Padded inner area: width = cell-w - 2*pad = 192px, height = cell-h - 2*pad = 98.67px */
-  --hud-grid-cell-w: calc((var(--hud-cross-cell-w) - 2 * var(--hud-cross-pad-x)) / 8); /* @kind spacing */ /* 24px    */
-  --hud-grid-cell-h: calc((var(--hud-cross-cell-h) - 2 * var(--hud-cross-pad-y)) / 8); /* @kind spacing */ /* 12.33px */
-
-  /* ── Minimum interactive element: 2×2 inner grid cells ─────── */
-  /* No HUD element (button, slot, pip row, icon) may be smaller than this.
-     Smaller than 2×2 is invisible at a glance and un-tappable on mobile.
-     At runtime the HUD scales by --hud-scale (~2–3×), so 48×27 design px
-     maps to ~96×54 real px on a typical phone — the 44px mobile floor. */
-  /* Interactive elements only — buttons, slots, icons, cells.
-     Passive elements (bars, dividers, borders) are exempt. */
-  --hud-min-tap-w: calc(var(--hud-grid-cell-w) * 2); /* @kind spacing */ /* 48px   */
-  --hud-min-tap-h: calc(var(--hud-grid-cell-h) * 2); /* @kind spacing */ /* 27px   */
+  --hud-cross-pad-y: calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px — same as pad-x */
+
+  /* ── Game canvas & 24×24 drag grid ─────────────────────────── */
+  /* Source of truth for the 667×375 HUD canvas and its 24×24 placement grid.
+     All HUD element positioning uses grid-column / grid-row spans.
+     No element may span fewer than 1 cell on either axis. */
+  --hud-canvas-bg: #000; /* outer background behind the game canvas */
+  --hud-canvas-w: 667px; /* design canvas width  */
+  --hud-canvas-h: 375px; /* design canvas height */
+  --hud-grid-cols: 24; /* @kind other */
+  --hud-grid-rows: 24; /* @kind other */
+  --hud-grid-gap: 2px; /* gap between cells          */
+  /* Cell dimensions (canvas minus gaps, divided by count) */
+  --hud-cell-w: calc((667px - 23 * 2px) / 24); /* @kind spacing */ /* ≈27.8px */
+  --hud-cell-h: calc((375px - 23 * 2px) / 24); /* @kind spacing */ /* ≈15.6px */
+
+  /* ── Minimum interactive tap target: 2×2 cells ──────────────── */
+  /* No HUD button, slot, or icon may be smaller than this.
+     Passive elements (bars, dividers, borders) are exempt.
+     At runtime HUD scales ~2–3×, mapping these to ≥44px real px. */
+  --hud-min-tap-w: calc(var(--hud-cell-w) * 2); /* @kind spacing */ /* ≈55.6px */
+  --hud-min-tap-h: calc(var(--hud-cell-h) * 2); /* @kind spacing */ /* ≈31.2px */
 }