anentrypoint-design 0.0.168 → 0.0.170

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.168",
+  "version": "0.0.170",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",
@@ -17,6 +17,8 @@
     },
     "./kits/spoint/loading-screen.js": "./src/kits/spoint/loading-screen.js",
     "./kits/spoint/loading-screen.css": "./src/kits/spoint/loading-screen.css",
+    "./kits/spoint/game-hud.js": "./src/kits/spoint/game-hud.js",
+    "./kits/spoint/game-hud.css": "./src/kits/spoint/game-hud.css",
     "./kits/os": {
       "import": "./src/kits/os/index.js",
       "default": "./src/kits/os/index.js"

package/src/index.js

@@ -76,6 +76,7 @@ export const applyDiff = webjsx.applyDiff;
 
 // spoint kit paint surfaces (loading screen, HUD, editor chrome).
 export { renderLoadingScreen } from './kits/spoint/loading-screen.js';
+export { renderGameHud } from './kits/spoint/game-hud.js';
 
 // Re-export freddie helpers so consumers can `import { FREDDIE_PAGES } from
 // 'anentrypoint-design'` directly.

package/src/kits/spoint/game-hud.css

@@ -0,0 +1,59 @@
+/* Game-HUD kit styles. Scoped under .ds-247420 at build time.
+   Colors from semantic tokens (no raw literals) per the token-lint gate. */
+.sp-hud { pointer-events: none; font-family: var(--ff-mono); }
+.sp-hud-crosshair {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 24px;
+  color: var(--fg);
+  text-shadow: 0 0 2px var(--bg);
+}
+.sp-hud-ammo {
+  position: fixed;
+  bottom: 50px;
+  right: 20px;
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--fg);
+  text-shadow: 0 0 4px var(--bg);
+}
+.sp-hud-ammo-reloading { color: var(--warn); }
+.sp-hud-health {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 20px;
+  background: var(--bg-3);
+  border-radius: 4px;
+  overflow: hidden;
+}
+.sp-hud-health-fill {
+  height: 100%;
+  transition: width var(--dur-snap) var(--ease);
+}
+.sp-hud-hp-high { background: var(--success); }
+.sp-hud-hp-mid { background: var(--warn); }
+.sp-hud-hp-low { background: var(--danger); }
+.sp-hud-health-num {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  color: var(--fg);
+  font-size: 12px;
+  line-height: 20px;
+}
+.sp-hud-boost {
+  position: fixed;
+  top: 80px;
+  right: 20px;
+  padding: 8px 16px;
+  background: var(--accent);
+  color: var(--accent-fg);
+  font-weight: bold;
+  border-radius: 6px;
+  font-size: 14px;
+}

package/src/kits/spoint/game-hud.js

@@ -0,0 +1,32 @@
+// Game-HUD paint surface for the spoint TPS client (webjsx vnode tree).
+// renderGameHud(h, { hp, ammo, magazine, reloading, reloadProgress, boostSec })
+// -> a vnode the consumer mounts. Pure presentation; the app owns all state.
+// `h` is the consumer's createElement (webjsx) so the tree composes into the
+// app's existing render() return.
+
+export function renderGameHud(h, state = {}) {
+  const {
+    hp = 100,
+    ammo = 0,
+    magazine = 30,
+    reloading = false,
+    reloadProgress = 0,
+    boostSec = 0,
+  } = state
+
+  const hpClass = hp > 60 ? 'sp-hud-hp-high' : hp > 30 ? 'sp-hud-hp-mid' : 'sp-hud-hp-low'
+
+  return h('div', { class: 'sp-hud' },
+    h('div', { class: 'sp-hud-crosshair' }, '+'),
+    h('div', { class: 'sp-hud-ammo' },
+      reloading
+        ? h('span', { class: 'sp-hud-ammo-reloading' }, `RELOADING ${reloadProgress}%`)
+        : h('span', null, `${ammo}/${magazine}`)
+    ),
+    h('div', { class: 'sp-hud-health' },
+      h('div', { class: `sp-hud-health-fill ${hpClass}`, style: `width:${hp}%` }),
+      h('span', { class: 'sp-hud-health-num' }, String(hp))
+    ),
+    boostSec > 0 ? h('div', { class: 'sp-hud-boost' }, `BOOSTED ${boostSec}s`) : null
+  )
+}

package/src/kits/spoint/index.js

@@ -4,5 +4,7 @@
 // through the main bundle entry so spoint can import directly from unpkg.
 
 export { renderLoadingScreen } from './loading-screen.js';
+export { renderGameHud } from './game-hud.js';
 
 export const themeUrl = new URL('./loading-screen.css', import.meta.url).href;
+export const gameHudCssUrl = new URL('./game-hud.css', import.meta.url).href;

package/src/page-html.js

@@ -115,6 +115,16 @@ a.row:hover .ds-row-arrow { opacity: 1 }
 .ds-hero-stat { display: flex; align-items: baseline; gap: var(--space-2, 8px) }
 .ds-hero-stat-n { font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-lg, 18px); color: var(--fg) }
 .ds-hero-stat-l { font-size: var(--fs-sm, 15px); color: var(--fg-3) }
+/* feature rows — single-column stack with a rail accent (the dashboard .row grid
+   forces a 3-col code/title/meta layout that mangles title+desc+benefit) */
+.ds-feature { position: relative; padding: var(--space-3, 16px) var(--space-4, 24px); background: var(--bg, #fff); border-radius: var(--r-2, 14px); display: grid; gap: var(--space-1, 4px) }
+.ds-feature::before { content: ''; position: absolute; left: 0; top: var(--space-2, 8px); bottom: var(--space-2, 8px); width: 3px; border-radius: 3px; background: var(--rail-color, var(--rule-strong)) }
+.ds-feature.rail-green { --rail-color: var(--green) } .ds-feature.rail-purple { --rail-color: var(--purple) } .ds-feature.rail-mascot { --rail-color: var(--mascot) }
+.ds-feature.rail-sun { --rail-color: var(--sun) } .ds-feature.rail-flame { --rail-color: var(--flame) } .ds-feature.rail-sky { --rail-color: var(--sky) }
+.ds-feature + .ds-feature { margin-top: var(--space-2, 8px) }
+.ds-feature-title { font-weight: 600; font-size: var(--fs-lg, 18px); color: var(--fg) }
+.ds-feature-desc { font-size: var(--fs-sm, 15px); color: var(--fg-2); line-height: 1.5 }
+.ds-feature-benefit { font-style: italic; font-size: var(--fs-sm, 15px); color: var(--fg-3); margin-top: var(--space-1, 4px) }
 </style>
 <script id="__site__" type="application/json">${JSON.stringify(pageData).replace(/</g, '\\u003c')}</script>
 ${headExtra}
@@ -155,10 +165,10 @@ function sectionNode(sec, idx) {
   const rail = RAILS[idx % RAILS.length];
   const features = sec.features || sec.items || [];
   const rows = features.map((f, i) => {
-    const kids = [h('span', { key: 't', class: 'title' }, String(f.name || ''))];
-    if (f.desc) kids.push(h('div', { key: 'd', class: 'sub', innerHTML: String(f.desc).replace(/\`([^\`]+)\`/g, '<code>$1</code>') }));
-    if (f.benefit) kids.push(h('div', { key: 'b', class: 'row-benefit' }, String(f.benefit)));
-    return h('div', { key: i, class: 'row ' + rail }, ...kids);
+    const kids = [h('div', { key: 't', class: 'ds-feature-title' }, String(f.name || ''))];
+    if (f.desc) kids.push(h('div', { key: 'd', class: 'ds-feature-desc', innerHTML: String(f.desc).replace(/\`([^\`]+)\`/g, '<code>$1</code>') }));
+    if (f.benefit) kids.push(h('div', { key: 'b', class: 'ds-feature-benefit' }, String(f.benefit)));
+    return h('div', { key: i, class: 'ds-feature ' + rail }, ...kids);
   });
   return C.Section({
     title: sec.name || sec.title || sec.id,