@noobsociety/nsds 0.3.0 → 0.4.1

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

@@ -0,0 +1,37 @@
+import { type ReactElement, type ReactNode } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface HUDTab {
+    /** Unique identifier */
+    id: string;
+    /** Tab button label */
+    label: string;
+    /** Content rendered in the panel when this tab is active */
+    content?: ReactNode;
+}
+export interface HUDTabWindowProps {
+    /** Tab definitions */
+    tabs?: HUDTab[];
+    /** ID of the initially-active tab. Defaults to the first tab. */
+    defaultTab?: string;
+    /** Tab bar height in px. 1 grid cell ≈ 14 px. */
+    tabHeight?: number;
+    /**
+     * Minimum tab button width in px.
+     * Defaults to 48 px — two grid cells, the narrowest comfortably-readable
+     * tab label at HUD scale.
+     */
+    tabMinWidth?: number;
+    /** Label font size in px */
+    tabFontSize?: number;
+    /** Horizontal alignment of tab buttons within the tab bar */
+    tabAlign?: 'left' | 'center' | 'right';
+    style?: NSStyle;
+}
+/**
+ * HUDTabWindow — a resizable tabbed panel container.
+ *
+ * Each tab is at minimum 48 px (two grid cells) wide and 1 grid cell tall.
+ * The window fills its parent; size it with the surrounding grid.
+ * Pass `content` on each tab to render any HUD element inside.
+ */
+export declare function HUDTabWindow({ tabs, defaultTab, tabHeight, tabMinWidth, tabFontSize, tabAlign, style, }: HUDTabWindowProps): ReactElement;

package/dist/components/hud-editor.css

@@ -0,0 +1,197 @@
+/* NoobSociety — In-game HUD editor chrome.
+   Toolbar, category tabs and the draggable element palette used by the
+   HUD Builder. Token-driven (no literals); import through styles.css.
+   Pairs with the 24×24 placement grid defined in tokens/hud.css. */
+
+/* ── Rail container ─────────────────────────────────────────────── */
+.ns-hud-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  background: var(--ns-bg-1);
+  border-left: 1px solid var(--ns-line);
+  color: var(--ns-ink);
+  font-family: var(--hud-font-ui);
+  overflow: hidden;
+}
+
+.ns-hud-panel__head {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-3);
+  background: var(--ns-bg-0);
+  border-bottom: 1px solid var(--ns-line-soft);
+  flex-shrink: 0;
+}
+
+/* ── Pixel eyebrow / section label ──────────────────────────────── */
+.ns-hud-eyebrow {
+  margin: 0;
+  color: var(--ns-gold);
+  font-family: var(--hud-font);
+  font-size: var(--hud-text-md);
+  line-height: 1;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.ns-hud-eyebrow--muted {
+  color: var(--ns-ink-faint);
+}
+
+/* ── Toolbar ────────────────────────────────────────────────────── */
+.ns-hud-toolbar {
+  display: flex;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-3);
+  flex-shrink: 0;
+}
+
+.ns-hud-tool {
+  flex: 1;
+  min-height: var(--hud-min-tap-h);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ns-space-2);
+  color: var(--ns-ink-dim);
+  background: var(--ns-bg-2);
+  border: 1px solid var(--ns-line);
+  border-radius: var(--hud-radius-sm);
+  font-family: var(--hud-font);
+  font-size: var(--hud-text-lg);
+  letter-spacing: 0.08em;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color var(--ns-transition-fast),
+    background-color var(--ns-transition-fast),
+    border-color var(--ns-transition-fast);
+}
+
+.ns-hud-tool:hover {
+  color: var(--ns-ink);
+  border-color: var(--ns-line-strong);
+}
+
+.ns-hud-tool.is-on {
+  color: var(--ns-gold-btn-fg);
+  background: var(--ns-gold);
+  border-color: var(--ns-gold-deep);
+}
+
+.ns-hud-tool:active {
+  transform: translateY(1px);
+}
+
+/* ── Divider ────────────────────────────────────────────────────── */
+.ns-hud-divider {
+  height: 1px;
+  margin-inline: var(--ns-space-3);
+  background: var(--ns-line-soft);
+  flex-shrink: 0;
+}
+
+/* ── Palette section ────────────────────────────────────────────── */
+.ns-hud-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-3);
+  flex: 1;
+  min-height: 0;
+}
+
+.ns-hud-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ns-space-1);
+  flex-shrink: 0;
+}
+
+.ns-hud-tab {
+  padding: var(--ns-space-1) 0.375rem;
+  color: var(--ns-ink-faint);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--hud-radius-sm);
+  font-family: var(--hud-font);
+  font-size: var(--hud-text-md);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    color var(--ns-transition-fast),
+    background-color var(--ns-transition-fast),
+    border-color var(--ns-transition-fast);
+}
+
+.ns-hud-tab:hover {
+  color: var(--ns-ink-dim);
+  background: var(--ns-line-soft);
+}
+
+.ns-hud-tab.is-active {
+  color: var(--ns-gold);
+  background: color-mix(in srgb, var(--ns-gold) 10%, transparent);
+  border-color: color-mix(in srgb, var(--ns-gold) 30%, transparent);
+}
+
+/* ── Element grid ───────────────────────────────────────────────── */
+.ns-hud-palette {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: var(--ns-space-2);
+  padding-top: var(--ns-space-1);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--ns-line-strong) transparent;
+}
+
+.ns-hud-slot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ns-icon-slot-sm);
+  height: var(--ns-icon-slot-sm);
+  color: var(--ns-gold);
+  background: var(--ns-bg-2);
+  border: 1px solid transparent;
+  border-radius: var(--hud-radius-sm);
+  cursor: grab;
+  flex: 0 0 auto;
+  transition:
+    border-color var(--ns-transition-fast),
+    background-color var(--ns-transition-fast);
+}
+
+.ns-hud-slot:hover {
+  border-color: color-mix(in srgb, var(--ns-gold) 55%, transparent);
+  background: var(--ns-bg-0);
+}
+
+.ns-hud-slot:active {
+  cursor: grabbing;
+}
+
+.ns-hud-slot svg {
+  width: 16px;
+  height: 16px;
+  image-rendering: pixelated;
+  display: block;
+}
+
+.ns-hud-hint {
+  flex-basis: 100%;
+  margin-top: var(--ns-space-1);
+  color: var(--ns-ink-faint);
+  font-family: var(--hud-font);
+  font-size: var(--hud-text-xs);
+  letter-spacing: 0.04em;
+  line-height: var(--ns-leading-pixel);
+}

package/dist/components/icons/RPGIcon.d.ts

@@ -1,11 +1,8 @@
 import type { CSSProperties, ReactElement } from 'react';
-export type RPGIconWeapon = 'sword' | 'staff' | 'bow' | 'katar' | 'book' | 'hammer';
-export type RPGIconElement = 'neutral' | 'earth' | 'wind' | 'water' | 'fire' | 'light' | 'dark' | 'void';
-export type RPGIconRace = 'human' | 'beast' | 'demon' | 'angel' | 'spirit';
-export type RPGIconSize = 'small' | 'medium' | 'large';
-export type RPGIconName = RPGIconWeapon | RPGIconElement | RPGIconRace | RPGIconSize;
+import type { RPGIconName } from './registry.js';
+export type { RPGIconAttack, RPGIconElement, RPGIconEmote, RPGIconEquip, RPGIconItem, RPGIconMenu, RPGIconName, RPGIconRace, RPGIconSize, RPGIconSkin, RPGIconWeapon, } from './registry.js';
 export interface RPGIconProps {
-    /** Icon name across weapon, element, race, and size groups. */
+    /** Icon name across all eleven groups (weapons, elements, races, sizes, attack, skills, items, equip, skins, menu, emotes). */
     name?: RPGIconName;
     /** Rendered size in px. */
     size?: number;
@@ -13,17 +10,24 @@ export interface RPGIconProps {
 }
 export declare const icons: RPGIconName[];
 /**
- * RPGIcon — 22 original pixel-art icons.
+ * RPGIcon — 68 original pixel-art icons across 11 groups.
  *
- * Weapons (6):  sword · staff · bow · katar · book · hammer
- * Elements (8): neutral · earth · wind · water · fire · light · dark · void
+ * Weapons (6):  sword · bow · staff · katar · book · hammer
+ * Elements (8): neutral · fire · earth · wind · water · light · dark · void
  * Races (5):    human · beast · demon · angel · spirit
  * Sizes (3):    small · medium · large
+ * Attack (6):   attack-sword · attack-bow · attack-staff · attack-katar · attack-book · attack-hammer
+ * Skills (6):   passive · active · combo · stance · buff · debuff
+ * Items (6):    potion · ether · scroll · gem · relic · key
+ * Equip (6):    helm · armor · cloak · shield · ring · greaves
+ * Skins (5):    hat · emblem · cape · badge · boots
+ * Menu (8):     menu · inventory · party · quest · map · shop · settings · save
+ * Emotes (9):   emote-tysm · emote-sos · emote-lol · emote-win · emote-lgo · emote-ugh · emote-myb · emote-wut · emote-grr
  */
-export declare const RPGIcon: (({ name, size, style, }: RPGIconProps) => ReactElement) & {
+export declare const RPGIcon: (({ name, size, style }: RPGIconProps) => ReactElement) & {
     icons: RPGIconName[];
 };
 /** @deprecated Use RPGIcon — kept for backward compatibility */
-export declare const HUDIcon: (({ name, size, style, }: RPGIconProps) => ReactElement) & {
+export declare const HUDIcon: (({ name, size, style }: RPGIconProps) => ReactElement) & {
     icons: RPGIconName[];
 };

package/dist/components/icons/registry.d.ts

@@ -0,0 +1,37 @@
+export type RPGIconWeapon = 'sword' | 'bow' | 'staff' | 'katar' | 'book' | 'hammer';
+export type RPGIconElement = 'neutral' | 'fire' | 'earth' | 'wind' | 'water' | 'light' | 'dark' | 'void';
+export type RPGIconRace = 'human' | 'beast' | 'demon' | 'angel' | 'spirit';
+export type RPGIconSize = 'small' | 'medium' | 'large';
+export type RPGIconAttack = 'attack-sword' | 'attack-bow' | 'attack-staff' | 'attack-katar' | 'attack-book' | 'attack-hammer';
+export type RPGIconSkill = 'passive' | 'active' | 'combo' | 'stance' | 'buff' | 'debuff';
+export type RPGIconItem = 'potion' | 'ether' | 'scroll' | 'gem' | 'relic' | 'key';
+export type RPGIconEquip = 'helm' | 'armor' | 'cloak' | 'shield' | 'ring' | 'greaves';
+export type RPGIconSkin = 'hat' | 'emblem' | 'cape' | 'badge' | 'boots';
+export type RPGIconMenu = 'menu' | 'inventory' | 'party' | 'quest' | 'map' | 'shop' | 'settings' | 'save';
+export type RPGIconEmote = 'emote-tysm' | 'emote-sos' | 'emote-lol' | 'emote-win' | 'emote-lgo' | 'emote-ugh' | 'emote-myb' | 'emote-wut' | 'emote-grr';
+export type RPGIconName = RPGIconWeapon | RPGIconElement | RPGIconRace | RPGIconSize | RPGIconAttack | RPGIconSkill | RPGIconItem | RPGIconEquip | RPGIconSkin | RPGIconMenu | RPGIconEmote;
+export declare const rpgIconWeapons: readonly ["sword", "bow", "staff", "katar", "book", "hammer"];
+export declare const rpgIconElements: readonly ["neutral", "fire", "earth", "wind", "water", "light", "dark", "void"];
+export declare const rpgIconRaces: readonly ["human", "beast", "demon", "angel", "spirit"];
+export declare const rpgIconSizes: readonly ["small", "medium", "large"];
+export declare const rpgIconAttack: readonly ["attack-sword", "attack-bow", "attack-staff", "attack-katar", "attack-book", "attack-hammer"];
+export declare const rpgIconSkills: readonly ["passive", "active", "combo", "stance", "buff", "debuff"];
+export declare const rpgIconItems: readonly ["potion", "ether", "scroll", "gem", "relic", "key"];
+export declare const rpgIconEquip: readonly ["helm", "armor", "cloak", "shield", "ring", "greaves"];
+export declare const rpgIconSkins: readonly ["hat", "emblem", "cape", "badge", "boots"];
+export declare const rpgIconMenu: readonly ["menu", "inventory", "party", "quest", "map", "shop", "settings", "save"];
+export declare const rpgIconEmotes: readonly ["emote-tysm", "emote-sos", "emote-lol", "emote-win", "emote-lgo", "emote-ugh", "emote-myb", "emote-wut", "emote-grr"];
+export declare const rpgIconGroups: {
+    readonly weapons: readonly ["sword", "bow", "staff", "katar", "book", "hammer"];
+    readonly elements: readonly ["neutral", "fire", "earth", "wind", "water", "light", "dark", "void"];
+    readonly races: readonly ["human", "beast", "demon", "angel", "spirit"];
+    readonly sizes: readonly ["small", "medium", "large"];
+    readonly attack: readonly ["attack-sword", "attack-bow", "attack-staff", "attack-katar", "attack-book", "attack-hammer"];
+    readonly skills: readonly ["passive", "active", "combo", "stance", "buff", "debuff"];
+    readonly items: readonly ["potion", "ether", "scroll", "gem", "relic", "key"];
+    readonly equip: readonly ["helm", "armor", "cloak", "shield", "ring", "greaves"];
+    readonly skins: readonly ["hat", "emblem", "cape", "badge", "boots"];
+    readonly menu: readonly ["menu", "inventory", "party", "quest", "map", "shop", "settings", "save"];
+    readonly emotes: readonly ["emote-tysm", "emote-sos", "emote-lol", "emote-win", "emote-lgo", "emote-ugh", "emote-myb", "emote-wut", "emote-grr"];
+};
+export declare const rpgIconNames: RPGIconName[];

package/dist/components/primitives.css

@@ -130,7 +130,7 @@
 }
 
 .ns-button:disabled,
-.ns-button[aria-disabled="true"] {
+.ns-button[aria-disabled='true'] {
   cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
@@ -221,12 +221,11 @@
 }
 
 .ns-quest-card {
-  --ns-quest-color: var(--ns-status-later);
-  --ns-quest-pill-bg: rgba(255, 255, 255, 0.05);
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: start;
-  gap: var(--ns-space-3);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  gap: 0;
   padding: 0.875rem;
   border: var(--ns-border-card);
   border-left: 4px solid rgba(255, 255, 255, 0.18);
@@ -238,32 +237,51 @@
 }
 
 .ns-quest-card--done {
-  --ns-quest-color: var(--ns-status-holds);
-  --ns-quest-pill-bg: rgba(166, 226, 46, 0.1);
   border-left-color: var(--ns-status-holds);
 }
 
 .ns-quest-card--active {
-  --ns-quest-color: var(--ns-status-building);
-  --ns-quest-pill-bg: rgba(253, 151, 31, 0.12);
   background: rgba(253, 151, 31, 0.06);
   border-left-color: var(--ns-status-building);
 }
 
 .ns-quest-card--planned {
-  --ns-quest-color: var(--ns-status-planned);
-  --ns-quest-pill-bg: rgba(102, 217, 232, 0.12);
   border-left-color: var(--ns-status-planned);
 }
 
+/* Per-status token overrides — [data-*] scope is allowed by the DS compiler */
+[data-quest-status='done'] {
+  --ns-quest-color: var(--ns-status-holds);
+  --ns-quest-pill-bg: var(--ns-quest-pill-done);
+}
+
+[data-quest-status='active'] {
+  --ns-quest-color: var(--ns-status-building);
+  --ns-quest-pill-bg: var(--ns-quest-pill-active);
+}
+
+[data-quest-status='planned'] {
+  --ns-quest-color: var(--ns-status-planned);
+  --ns-quest-pill-bg: var(--ns-quest-pill-planned);
+}
+
 .ns-quest-card--locked {
   opacity: 0.5;
 }
 
+.ns-quest-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ns-space-3);
+  margin-bottom: var(--ns-space-3);
+}
+
 .ns-quest-card__icon {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
+  margin-top: 2px;
   width: var(--ns-icon-slot-sm);
   height: var(--ns-icon-slot-sm);
   color: var(--ns-quest-color);
@@ -276,18 +294,29 @@
 
 .ns-quest-card__body {
   display: flex;
-  min-width: 0;
-  flex: 1;
   flex-direction: column;
+  align-items: flex-start;
+  min-width: 0;
+  gap: var(--ns-space-2);
 }
 
-.ns-quest-card__title {
-  margin: 0 0 0.375rem;
+.ns-quest-card__gate {
+  margin: 0 0 0.2rem;
   color: var(--ns-ink);
   font-family: var(--ns-font-pixel);
   font-size: 9.5px;
   line-height: var(--ns-leading-pixel);
-  text-wrap: balance;
+}
+
+.ns-quest-card__name {
+  margin: 0 0 0.375rem;
+  color: var(--ns-ink-dim);
+  font-family: var(--ns-font-pixel);
+  font-size: 9.5px;
+  line-height: var(--ns-leading-pixel);
+  display: flex;
+  align-items: center;
+  gap: 3px;
 }
 
 .ns-quest-card__desc {
@@ -298,7 +327,8 @@
 }
 
 .ns-status-pill {
-  margin-top: auto;
+  margin-top: var(--ns-space-3);
+  align-self: flex-start;
   color: var(--ns-quest-color);
   background: var(--ns-quest-pill-bg);
   font-size: var(--ns-pixel-2xs);
@@ -363,7 +393,7 @@
 }
 
 .ns-nav-links a:hover,
-.ns-nav-links a[aria-current="page"],
+.ns-nav-links a[aria-current='page'],
 .ns-nav-links a.is-active {
   color: var(--ns-gold);
   border-bottom-color: var(--ns-gold);

package/dist/components/react/index.d.ts

@@ -5,13 +5,23 @@ export type { FeatureCardProps } from '../cards/FeatureCard.js';
 export { QuestCard } from '../cards/QuestCard.js';
 export type { QuestCardProps, QuestCardStatus } from '../cards/QuestCard.js';
 export { HUDBar } from '../hud/HUDBar.js';
-export type { HUDBarProps } from '../hud/HUDBar.js';
+export type { HUDBarProps, HUDBarVariant } from '../hud/HUDBar.js';
+export { HUDChat } from '../hud/HUDChat.js';
+export type { HUDChatMessage, HUDChatProps } from '../hud/HUDChat.js';
 export { HUDDivider } from '../hud/HUDDivider.js';
 export type { HUDDividerProps } from '../hud/HUDDivider.js';
+export { HUDJoystick } from '../hud/HUDJoystick.js';
+export type { HUDJoystickProps } from '../hud/HUDJoystick.js';
 export { HUDLabel } from '../hud/HUDLabel.js';
 export type { HUDLabelProps } from '../hud/HUDLabel.js';
+export { HUDMinimap } from '../hud/HUDMinimap.js';
+export type { HUDMinimapProps } from '../hud/HUDMinimap.js';
+export { HUDPanel } from '../hud/HUDPanel.js';
+export type { HUDPanelProps } from '../hud/HUDPanel.js';
+export { HUDTabWindow } from '../hud/HUDTabWindow.js';
+export type { HUDTab, HUDTabWindowProps } from '../hud/HUDTabWindow.js';
 export { RPGIcon, HUDIcon, icons } from '../icons/RPGIcon.js';
-export type { RPGIconElement, RPGIconName, RPGIconProps, RPGIconRace, RPGIconSize, RPGIconWeapon, } from '../icons/RPGIcon.js';
+export type { RPGIconAttack, RPGIconElement, RPGIconEmote, RPGIconEquip, RPGIconItem, RPGIconMenu, RPGIconName, RPGIconProps, RPGIconRace, RPGIconSize, RPGIconSkin, RPGIconWeapon, } from '../icons/RPGIcon.js';
 export { SectionArrow } from '../navigation/SectionArrow.js';
 export type { SectionArrowProps } from '../navigation/SectionArrow.js';
 export type { NSStyle } from '../shared/styles.js';