@noobsociety/nsds 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -6,6 +6,48 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.4.1] - 2026-06-28
+
+### Added
+
+- Added five HUD React components — `HUDChat`, `HUDJoystick`, `HUDMinimap`, `HUDPanel`, and `HUDTabWindow` — each with Storybook stories, component tests, and named exports from `@noobsociety/nsds` and `@noobsociety/nsds/react`.
+- Expanded `RPGIcon` to 68 pixel-art glyphs across 11 groups, adding the attack, skills, items, equip, skins, menu, and emote categories with matching name, group, and type registries on `@noobsociety/nsds` and `@noobsociety/nsds/client`.
+- Added `HUDBar` bar variants (`hp`, `mp`, `xp`, `stamina`) with optional or hidden labels and segmented fills.
+- Added the `--hud-edit-*` editor-chrome token group, plus HUD text-scale, stamina, minimap-path, grid-overlay, and 24×24 canvas/grid tokens, to `tokens/hud.css`.
+- Added `components/hud-editor.css` (token-driven in-game HUD editor chrome) to the CSS entry point, and shipped `components/scene-builder.css`, `components/scene-builder.js`, and `components/_card-base.css` as design-system source.
+
+### Changed
+
+- Redrew `RPGIcon` artwork on a 24×24 viewBox (existing glyphs preserved) and renamed the chat emotes to NoobSociety command codes (`emote-tysm`, `emote-sos`, `emote-lol`, `emote-win`, `emote-lgo`, `emote-ugh`, `emote-myb`, `emote-wut`, `emote-grr`).
+- Restructured `QuestCard` with a header (gate number and name) and per-status data attributes, and moved quest-card colours onto `--ns-quest-*` tokens.
+
+## [0.4.0] - 2026-06-22
+
+### Added
+
+- Added a `@noobsociety/nsds/client` export for renderer-neutral 21.06 metadata, token references, quest status metadata, and RPG icon registries.
+- Added a Node 22 local runtime pin for contributor setup parity with CI.
+
+### Changed
+
+- Extracted shared token, quest status, and RPG icon registry metadata out of React-only modules.
+- Removed duplicate primitive stylesheet links from static browser fixtures.
+
+### Fixed
+
+- Added the missing `--hud-divider` alias used by HUD fixture surfaces.
+
+## [0.3.1] - 2026-06-20
+
+### Added
+
+- Stored visual regression snapshots for the public component specimen and UI kit surfaces.
+
+### Changed
+
+- Tailwind preset source is now first-class TypeScript with generated CommonJS and declaration output.
+- Package validation now requires the visual fixture, visual snapshots, and generated Tailwind preset output.
+
 ## [0.3.0] - 2026-06-20
 
 ### Added
@@ -91,7 +133,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 - Initial NSDS package with tokens, CSS primitives, React components, and Tailwind support.
 
-[Unreleased]: https://github.com/noobsociety/nsds/compare/v0.3.0...HEAD
+[Unreleased]: https://github.com/noobsociety/nsds/compare/v0.4.1...HEAD
+[0.4.1]: https://github.com/noobsociety/nsds/compare/v0.4.0...v0.4.1
+[0.4.0]: https://github.com/noobsociety/nsds/compare/v0.3.1...v0.4.0
+[0.3.1]: https://github.com/noobsociety/nsds/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/noobsociety/nsds/compare/v0.2.1...v0.3.0
 [0.2.1]: https://github.com/noobsociety/nsds/compare/v0.2.0...v0.2.1
 [0.2.0]: https://github.com/noobsociety/nsds/compare/v0.1.2...v0.2.0

package/CONTRIBUTING.md

@@ -4,13 +4,18 @@ NSDS is the NoobSociety Design System. Changes should keep the package small, re
 
 ## Local setup
 
-Use Node.js 22 or newer.
+Use Node.js 22 or newer. The repo pins Node 22 in `.nvmrc` for parity with CI; with nvm, run
+`nvm use` to match it.
 
 ```bash
+nvm use
 npm install
 npm run check
 ```
 
+See [QUALITY.md](./QUALITY.md) for the package gate, release evidence, visual baseline policy, and
+tagging rules.
+
 Run Storybook while changing components:
 
 ```bash
@@ -73,7 +78,7 @@ npm run changeset:version
 
 This command applies the Changesets version plan and updates `CHANGELOG.md` from the `[Unreleased]` section. Open the result as a release pull request.
 
-Publishing is handled by the release workflow after the release pull request is merged to `main`, when `NPM_TOKEN` is configured:
+Publishing is handled by the release workflow after the release pull request is merged to `main`, when `NPM_TOKEN` is configured. When the package version is not already on npm, the workflow publishes the package and creates an annotated `vX.Y.Z` tag on the published commit.
 
 ```bash
 npm run changeset:publish
@@ -107,9 +112,17 @@ npm run test:visual
 Install and export checks run as part of `npm run check`, and can be run directly:
 
 ```bash
+npm run check:commits
+npm run check:content
+npm run check:deps
 npm run check:docs
 npm run check:exports
 npm run check:install
+npm run check:markdown
+npm run check:release
+npm run check:workflows
+npm run format:check
+npm run lint
 ```
 
 ## Release checks
@@ -122,6 +135,26 @@ npm run build:storybook
 npm run release:dry-run
 ```
 
+Use this order for package work: commit locally on a feature branch, open the
+pull request from that branch, merge the reviewed PR to `main`, then let the
+release workflow tag only after a version publishes.
+
+Before opening the PR, squash local role-pass cleanup commits into the smallest
+reviewable set that preserves the package-facing change. Use the PR title as the
+intended squash commit subject, and keep the squash body as one contiguous
+bullet list of meaningful branch changes. Commit generated API docs with the
+source or TypeDoc configuration change that generated them.
+
+Complete the pull request template before requesting review:
+
+- Summary uses checklist items for concrete changes.
+- PR description bullet items stay at or below 100 characters.
+- Verification commands are fenced as `bash` blocks.
+- PR text uses repo-relative paths and omits local-only workflow paths.
+- Changeset and changelog status are declared.
+- Release tag timing is declared.
+- Squash shape is confirmed.
+
 Before publishing manually:
 
 ```bash
@@ -130,6 +163,14 @@ npm run release:dry-run
 npm run changeset:publish
 ```
 
+When a release tag must be repaired manually, use the release tag helper on the final release
+commit. Do not create or push tags before the reviewed release PR has merged unless the target
+commit will not change.
+
+```bash
+node scripts/tag-release.mjs
+```
+
 ## License guidance
 
 NSDS uses the [MIT License](./LICENSE), selected from [Choose a License](https://choosealicense.com/licenses/mit/).

package/README.md

@@ -1,8 +1,13 @@
 # NoobSociety Design System
 
-Reusable design tokens, CSS primitives, Tailwind preset, and pixel-art React components for NoobSociety.
+[![CI](https://github.com/noobsociety/nsds/actions/workflows/ci.yml/badge.svg)](https://github.com/noobsociety/nsds/actions/workflows/ci.yml)
+[![Release](https://github.com/noobsociety/nsds/actions/workflows/release.yml/badge.svg)](https://github.com/noobsociety/nsds/actions/workflows/release.yml)
+[![npm version](https://img.shields.io/npm/v/@noobsociety/nsds.svg)](https://www.npmjs.com/package/@noobsociety/nsds)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
 
-NSDS is Tailwind-first and token-driven. It ships the public package surface needed by product apps: React components, CSS tokens, primitives, and a Tailwind preset.
+Reusable design tokens, client registries, CSS primitives, Tailwind preset, and pixel-art React components for NoobSociety.
+
+NSDS is Tailwind-first and token-driven. It ships the public package surface needed by product apps: client registries, React components, CSS tokens, primitives, and a Tailwind preset.
 
 ## Contents
 
@@ -11,6 +16,7 @@ NSDS is Tailwind-first and token-driven. It ships the public package surface nee
 - [Package exports](#package-exports)
 - [Components](#components)
 - [Documentation](#documentation)
+- [Quality](#quality)
 - [Repository layout](#repository-layout)
 - [Development](#development)
 - [Versioning and releases](#versioning-and-releases)
@@ -36,6 +42,14 @@ Import the CSS entry once in your app:
 import '@noobsociety/nsds/styles';
 ```
 
+Use renderer-neutral client registries when code needs shared names without React:
+
+```ts
+import { nsClientRelease, rpgIconNames } from '@noobsociety/nsds/client';
+
+console.log(nsClientRelease, rpgIconNames.includes('sword'));
+```
+
 Use React components from the package root:
 
 ```tsx
@@ -66,16 +80,17 @@ export default {
 
 ## Package exports
 
-| Export | Purpose |
-| --- | --- |
-| `@noobsociety/nsds` | React components |
-| `@noobsociety/nsds/react` | Compatibility alias for React components |
-| `@noobsociety/nsds/tailwind` | Tailwind preset mapped to `--ns-*` tokens |
-| `@noobsociety/nsds/styles` | Full CSS entry |
-| `@noobsociety/nsds/styles.css` | CSS entry compatibility alias |
-| `@noobsociety/nsds/tokens/*` | Individual token CSS files |
-| `@noobsociety/nsds/primitives` | Component primitive CSS |
-| `@noobsociety/nsds/components/primitives.css` | Component primitive CSS compatibility alias |
+| Export                                        | Purpose                                                |
+| --------------------------------------------- | ------------------------------------------------------ |
+| `@noobsociety/nsds`                           | React components                                       |
+| `@noobsociety/nsds/react`                     | Compatibility alias for React components               |
+| `@noobsociety/nsds/client`                    | Renderer-neutral client registries and shared metadata |
+| `@noobsociety/nsds/tailwind`                  | Tailwind preset mapped to `--ns-*` tokens              |
+| `@noobsociety/nsds/styles`                    | Full CSS entry                                         |
+| `@noobsociety/nsds/styles.css`                | CSS entry compatibility alias                          |
+| `@noobsociety/nsds/tokens/*`                  | Individual token CSS files                             |
+| `@noobsociety/nsds/primitives`                | Component primitive CSS                                |
+| `@noobsociety/nsds/components/primitives.css` | Component primitive CSS compatibility alias            |
 
 The npm package ships `dist/` plus package metadata, changelog, contribution guidance, security policy, and license.
 
@@ -87,12 +102,19 @@ Public React components:
 - `FeatureCard`
 - `QuestCard`
 - `HUDBar`
+- `HUDChat`
 - `HUDDivider`
+- `HUDJoystick`
 - `HUDLabel`
+- `HUDMinimap`
+- `HUDPanel`
+- `HUDTabWindow`
 - `RPGIcon`
 - `HUDIcon`
 - `SectionArrow`
 
+`RPGIcon` ships 68 pixel-art glyphs across 11 groups: weapons, elements, races, sizes, attack, skills, items, equip, skins, menu, and emotes. The renderer-neutral icon name, group, and type registries are also exported from `@noobsociety/nsds/client`.
+
 Run Storybook for component documentation:
 
 ```bash
@@ -122,43 +144,68 @@ npm run docs:api
 
 The static landing page lives in [`site/`](./site/index.html).
 
+## Quality
+
+See [QUALITY.md](./QUALITY.md) for the package gate, release evidence, visual baseline policy, and
+tagging rules.
+
+Before opening a pull request, run:
+
+```bash
+npm run check
+npm run build:storybook
+npm run release:dry-run
+```
+
 ## Repository layout
 
-| Path | Purpose |
-| --- | --- |
-| `styles.css` | Public CSS entry point |
-| `tokens/` | CSS custom properties for color, type, spacing, motion, and HUD values |
-| `components/` | TypeScript React source, primitive CSS, and Storybook stories |
-| `tailwind/` | Tailwind preset source |
-| `docs/` | Public documentation and generated API reference |
-| `site/` | Static public landing page |
-| `tests/` | Component and browser-rendered visual checks |
+| Path          | Purpose                                                                |
+| ------------- | ---------------------------------------------------------------------- |
+| `styles.css`  | Public CSS entry point                                                 |
+| `client/`     | Renderer-neutral client registry entry point                           |
+| `tokens/`     | CSS custom properties for color, type, spacing, motion, and HUD values |
+| `components/` | TypeScript React source, primitive CSS, and Storybook stories          |
+| `tailwind/`   | Tailwind preset source                                                 |
+| `docs/`       | Public documentation and generated API reference                       |
+| `site/`       | Static public landing page                                             |
+| `tests/`      | Component and browser-rendered visual checks                           |
 
 ## Development
 
-Use Node.js 22 or newer.
+Use Node.js 22 or newer. The repo pins Node 22 in `.nvmrc` for parity with CI; with nvm, run
+`nvm use` to match it.
 
 ```bash
+nvm use
 npm install
 npm run check
 ```
 
 Common scripts:
 
-| Script | Purpose |
-| --- | --- |
-| `npm run build` | Build the package into `dist/` |
-| `npm run check` | Run build, package guards, type checks, tests, and import smoke checks |
-| `npm run check:docs` | Regenerate API docs and fail when generated docs drift |
-| `npm run check:exports` | Validate npm exports and declaration entry points |
-| `npm run check:install` | Install the packed package in a temporary consumer project |
-| `npm run docs:api` | Generate markdown API reference from TypeScript source |
-| `npm run storybook` | Start component documentation locally |
-| `npm run build:storybook` | Build static component documentation |
-| `npm run test:components` | Run component behavior tests |
-| `npm run test:visual` | Run browser-rendered visual checks |
-| `npm run release:dry-run` | Preview the npm package contents |
-| `npm run changeset` | Add a release note and version intent |
+| Script                    | Purpose                                                                |
+| ------------------------- | ---------------------------------------------------------------------- |
+| `npm run build`           | Build the package into `dist/`                                         |
+| `npm run check`           | Run build, package guards, type checks, tests, and import smoke checks |
+| `npm run check:content`   | Catch local path leaks in committed text                               |
+| `npm run check:commits`   | Validate branch commit messages with Commitlint                        |
+| `npm run check:deps`      | Validate dependency pins and cross-platform lockfile coverage          |
+| `npm run check:docs`      | Regenerate API docs and fail when generated docs drift                 |
+| `npm run check:exports`   | Validate npm exports and declaration entry points                      |
+| `npm run check:install`   | Install the packed package in a temporary consumer project             |
+| `npm run check:markdown`  | Lint authored Markdown docs and templates                              |
+| `npm run check:package`   | Validate package metadata, required files, and dist shape              |
+| `npm run check:release`   | Validate release scripts, changelog links, and tag workflow wiring     |
+| `npm run check:workflows` | Validate GitHub workflow syntax and Node 22 pins                       |
+| `npm run docs:api`        | Generate markdown API reference from TypeScript source                 |
+| `npm run format:check`    | Check repository formatting with Prettier                              |
+| `npm run lint`            | Lint source, tests, scripts, and configs with ESLint                   |
+| `npm run storybook`       | Start component documentation locally                                  |
+| `npm run build:storybook` | Build static component documentation                                   |
+| `npm run test:components` | Run component behavior tests                                           |
+| `npm run test:visual`     | Run browser-rendered visual checks                                     |
+| `npm run release:dry-run` | Preview the npm package contents                                       |
+| `npm run changeset`       | Add a release note and version intent                                  |
 
 ## Versioning and releases
 
@@ -180,6 +227,10 @@ That command applies Changesets version bumps and promotes the current `[Unrelea
 
 Open and merge the version commit as a normal release pull request. The release workflow publishes from `main` when the package version is not already on npm and `NPM_TOKEN` is configured.
 
+After a successful new publish, the workflow creates an annotated `vX.Y.Z` tag on the published
+commit. Tag messages use the NoobSociety release-note style: one concise subject, one factual
+paragraph, and a footprint sentence grounded in the release diff.
+
 Manual publishing remains available for maintainers after the version commit is prepared:
 
 ```bash

package/SECURITY.md

@@ -1,11 +1,45 @@
 # Security
 
-NSDS is a design system package, but security issues can still happen through package metadata, published assets, examples, or dependency changes.
+NSDS is a design system package, but security issues can still happen through package metadata,
+published assets, examples, or dependency changes.
 
-Please report security issues through GitHub Security Advisories for this repository when available. Avoid opening a public issue for a vulnerability until it has been reviewed.
+## Scope
+
+This policy covers the published `@noobsociety/nsds` npm package, repository automation, package
+metadata, examples, and dependency changes.
+
+## What to report
+
+- Package contents that execute unintended code in consumer projects
+- Dependency or workflow changes that create a supply-chain risk
+- Published assets or examples that expose private information
+- Security issues in package metadata or release automation
+
+Not in scope: design opinions, missing components, visual regressions, or normal dependency
+freshness requests without a vulnerability.
+
+## How to report
+
+Open a
+[private security advisory](https://github.com/noobsociety/nsds/security/advisories/new)
+on GitHub to report a vulnerability confidentially.
+
+If you prefer email, write to **<ejelome@gmail.com>** with the subject line `[SECURITY] nsds`.
+
+Avoid opening a public issue for a vulnerability until it has been reviewed.
 
 Supported release line:
 
 | Version | Supported |
-|---|---|
-| `0.x` | Yes |
+| ------- | --------- |
+| `0.x`   | Yes       |
+
+## Response commitment
+
+We will acknowledge your report within **5 business days** and keep you updated until the issue is
+resolved or confirmed as a non-issue.
+
+## Disclosure
+
+Verified issues are fixed before public disclosure. Researchers who want to be credited will be
+named in the changelog entry for the fix.

package/dist/client/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../registry-Cyq-qspU.cjs");var t=`21.06`,n=[`web`,`game`];exports.NS=e.p,exports.icons=e.c,exports.rpgIconNames=e.c,exports.nsClientRelease=t,exports.nsClientTargets=n,exports.nsTokens=e.m,exports.questStatus=e.h,exports.rpgIconAttack=e.t,exports.rpgIconElements=e.n,exports.rpgIconEmotes=e.r,exports.rpgIconEquip=e.i,exports.rpgIconGroups=e.a,exports.rpgIconItems=e.o,exports.rpgIconMenu=e.s,exports.rpgIconRaces=e.l,exports.rpgIconSizes=e.u,exports.rpgIconSkills=e.d,exports.rpgIconWeapons=e.f;

package/dist/client/index.d.cts

@@ -0,0 +1,6 @@
+export { NS, nsTokens, questStatus } from '../components/shared/constants.js';
+export { rpgIconAttack, rpgIconElements, rpgIconEmotes, rpgIconEquip, rpgIconGroups, rpgIconItems, rpgIconMenu, rpgIconNames, rpgIconRaces, rpgIconSizes, rpgIconSkills, rpgIconWeapons, rpgIconNames as icons, } from '../components/icons/registry.js';
+export type { RPGIconAttack, RPGIconElement, RPGIconEmote, RPGIconEquip, RPGIconItem, RPGIconMenu, RPGIconName, RPGIconRace, RPGIconSize, RPGIconSkin, RPGIconWeapon, } from '../components/icons/registry.js';
+export declare const nsClientRelease: "21.06";
+export declare const nsClientTargets: readonly ["web", "game"];
+export type NSClientTarget = (typeof nsClientTargets)[number];

package/dist/client/index.d.ts

@@ -0,0 +1,6 @@
+export { NS, nsTokens, questStatus } from '../components/shared/constants.js';
+export { rpgIconAttack, rpgIconElements, rpgIconEmotes, rpgIconEquip, rpgIconGroups, rpgIconItems, rpgIconMenu, rpgIconNames, rpgIconRaces, rpgIconSizes, rpgIconSkills, rpgIconWeapons, rpgIconNames as icons, } from '../components/icons/registry.js';
+export type { RPGIconAttack, RPGIconElement, RPGIconEmote, RPGIconEquip, RPGIconItem, RPGIconMenu, RPGIconName, RPGIconRace, RPGIconSize, RPGIconSkin, RPGIconWeapon, } from '../components/icons/registry.js';
+export declare const nsClientRelease: "21.06";
+export declare const nsClientTargets: readonly ["web", "game"];
+export type NSClientTarget = (typeof nsClientTargets)[number];

package/dist/client/index.js

@@ -0,0 +1,5 @@
+import { a as e, c as t, d as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, r as d, s as f, t as p, u as m } from "../registry-BizUEm6W.js";
+//#region client/index.ts
+var h = "21.06", g = ["web", "game"];
+//#endregion
+export { u as NS, t as icons, t as rpgIconNames, h as nsClientRelease, g as nsClientTargets, s as nsTokens, i as questStatus, p as rpgIconAttack, c as rpgIconElements, d as rpgIconEmotes, a as rpgIconEquip, e as rpgIconGroups, l as rpgIconItems, f as rpgIconMenu, o as rpgIconRaces, m as rpgIconSizes, n as rpgIconSkills, r as rpgIconWeapons };

package/dist/components/_card-base.css

@@ -0,0 +1,99 @@
+/* NoobSociety DS — Shared card base styles
+   Import this in every .card.html after styles.css:
+   <link rel="stylesheet" href="../_card-base.css">
+   (adjust path depth as needed)
+   Never override these fundamentals in per-card <style> blocks —
+   extend them instead.
+*/
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: var(--ns-bg-0);
+  padding: 24px 28px;
+  font-family: var(--ns-font-pixel);
+  color: var(--ns-ink);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow: auto;
+}
+
+/* ── Section ─────────────────────────────────── */
+.card-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.section-label {
+  font-size: 7px;
+  color: var(--ns-ink-faint);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 8px;
+}
+
+.divider {
+  border: none;
+  border-top: 1px solid var(--ns-line-soft);
+}
+
+/* ── Layout helpers ──────────────────────────── */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.col {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-start;
+}
+
+/* ── Swatch / chip ───────────────────────────── */
+.sw {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+}
+
+.chip {
+  width: 56px;
+  height: 40px;
+  border-radius: var(--ns-radius-sm, 4px);
+  border: 1px solid var(--ns-line);
+}
+
+.chip-lg {
+  width: 80px;
+  height: 56px;
+  border-radius: var(--ns-radius-sm, 4px);
+  border: 1px solid var(--ns-line);
+}
+
+/* ── Labels ──────────────────────────────────── */
+.tk {
+  font-size: 6px;
+  color: var(--ns-ink-faint);
+  white-space: nowrap;
+}
+.hex {
+  font-size: 6px;
+  color: var(--ns-ink-dim);
+  white-space: nowrap;
+}
+.sub {
+  font-size: 7px;
+  color: var(--ns-ink-dim);
+  white-space: nowrap;
+}

package/dist/components/hud/HUDBar.d.ts

@@ -1,16 +1,29 @@
 import type { HTMLAttributes, ReactElement } from 'react';
 import type { NSStyle } from '../shared/styles.js';
+/** Built-in bar kinds. Each maps to its own fill + label-colour tokens. */
+export type HUDBarVariant = 'hp' | 'mp' | 'xp' | 'stamina';
 export interface HUDBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    /** Built-in bar kind — sets fill colour, label colour and (for stamina) segmentation. */
+    variant?: HUDBarVariant;
     /** Current stat value. */
     value?: number;
     /** Maximum stat value. */
     max?: number;
-    /** Bar fill color. */
+    /**
+     * Label text. Defaults to `"{value} / {max}"`.
+     * Pass a string to override, or `false`/`""` to hide the label entirely.
+     */
+    label?: string | false;
+    /** Render the fill as discrete notched segments (defaults to the variant's setting). */
+    segmented?: boolean;
+    /** Width of one segment + gutter in px, when `segmented`. */
+    segmentSize?: number;
+    /** Bar fill colour. Overrides the variant's fill. */
     fillColor?: string;
-    /** Bar track color. */
+    /** Bar track colour. */
     trackColor?: string;
     /** Bar height in px. */
     height?: number;
     style?: NSStyle;
 }
-export declare function HUDBar({ value, max, fillColor, trackColor, height, style, role, ...props }: HUDBarProps): ReactElement;
+export declare function HUDBar({ variant, value, max, label, segmented, segmentSize, fillColor, trackColor, height, style, role, ...props }: HUDBarProps): ReactElement;

package/dist/components/hud/HUDChat.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface HUDChatMessage {
+    /** Sender display name */
+    sender: string;
+    /** Message text */
+    text: string;
+    /** Sender name color — defaults to var(--ns-ink) */
+    color?: string;
+}
+export interface HUDChatProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    /** Chat messages to display, oldest first */
+    messages?: HUDChatMessage[];
+    /** Panel height in px */
+    height?: number;
+    /** Message font size in px */
+    fontSize?: number;
+    style?: NSStyle;
+}
+/**
+ * HUDChat — compact scrollable chat log.
+ *
+ * Each message row: `[sender]:` in a player colour + message text in dim white.
+ * Designed for small HUD footprints (fontSize 4–6 px).
+ */
+export declare function HUDChat({ messages, height, fontSize, style, ...props }: HUDChatProps): ReactElement;

package/dist/components/hud/HUDJoystick.d.ts

@@ -0,0 +1,21 @@
+import { type HTMLAttributes, type ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface HUDJoystickProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'onChange'> {
+    /** Outer diameter in px. The component renders a square of this size. */
+    size?: number;
+    /** Thumb diameter as a fraction of size (0–1). */
+    thumbSize?: number;
+    /**
+     * Fires continuously during drag with normalised x, y values in [-1, 1].
+     * Emits (0, 0) when the thumb is released.
+     */
+    onChange?: (x: number, y: number) => void;
+    style?: NSStyle;
+}
+/**
+ * HUDJoystick — interactive virtual thumbstick.
+ *
+ * Drag the thumb within the circular pad; onChange fires normalised
+ * x/y coordinates in [-1, 1]. The thumb snaps back to centre on release.
+ */
+export declare function HUDJoystick({ size, thumbSize, onChange, style, ...props }: HUDJoystickProps): ReactElement;

package/dist/components/hud/HUDMinimap.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface HUDMinimapProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    /** Map background color. */
+    mapColor?: string;
+    /** Player marker color. */
+    markerColor?: string;
+    /** Accent color for paths / points of interest. */
+    accentColor?: string;
+    /** Whether to show a border frame. */
+    framed?: boolean;
+    style?: NSStyle;
+}
+export declare function HUDMinimap({ mapColor, markerColor, accentColor, framed, style, ...props }: HUDMinimapProps): ReactElement;

package/dist/components/hud/HUDPanel.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+declare const VARIANTS: {
+    readonly dark: {
+        readonly background: "rgba(12,16,22,0.72)";
+        readonly border: "1px solid rgba(255,255,255,0.10)";
+    };
+    readonly light: {
+        readonly background: "rgba(255,255,255,0.05)";
+        readonly border: "1px solid rgba(255,255,255,0.14)";
+    };
+    readonly clear: {
+        readonly background: "transparent";
+        readonly border: "1px solid rgba(255,255,255,0.08)";
+    };
+};
+export interface HUDPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style'> {
+    /** Visual treatment of the panel surface. */
+    variant?: keyof typeof VARIANTS;
+    /** Corner radius in px. */
+    radius?: number;
+    style?: NSStyle;
+}
+export declare function HUDPanel({ variant, radius, style, children, ...props }: HUDPanelProps): ReactElement;
+export {};