@noobsociety/nsds 0.2.1 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.3.0] - 2026-06-20
+
+### Added
+
+- First-class TypeScript component source with generated declaration output.
+- Component tests for class names, variants, invalid runtime values, and accessibility attributes.
+- Package export linting, packed install checks, and Tailwind preset type validation.
+- Diataxis-style public docs, generated API reference, and static landing page.
+- Browser-rendered visual checks for the public component specimen surface.
+
+### Changed
+
+- Storybook stories now use typed `.tsx` examples and include a full component showcase.
+- CI and release checks now install the browser needed for visual coverage.
+
 ## [0.2.1] - 2026-06-20
 
 ### Added
@@ -76,7 +91,8 @@ 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.2.1...HEAD
+[Unreleased]: https://github.com/noobsociety/nsds/compare/v0.3.0...HEAD
+[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
 [0.1.2]: https://github.com/noobsociety/nsds/compare/v0.1.1...v0.1.2

package/CONTRIBUTING.md

@@ -23,7 +23,9 @@ npm run storybook
 - Prefer CSS tokens and shared primitives over one-off styles.
 - Keep React components small and framework-light.
 - Add or update Storybook stories when changing public component behavior or props.
-- Add or update smoke coverage when changing import behavior, package exports, or runtime behavior.
+- Add or update component tests when changing class names, variants, props, or accessibility behavior.
+- Add or update package checks when changing import behavior, package exports, or generated types.
+- Run `npm run docs:api` when public TypeScript types change.
 - Keep third-party code and assets license-compatible with MIT.
 
 ## Versioning
@@ -88,6 +90,28 @@ npm run build:storybook
 
 Stories should show the stable public props, common variants, disabled or edge states when relevant, and realistic token-backed styling. Avoid documenting private implementation details as API.
 
+## Tests
+
+Component behavior tests run with:
+
+```bash
+npm run test:components
+```
+
+Browser-rendered visual checks run with:
+
+```bash
+npm run test:visual
+```
+
+Install and export checks run as part of `npm run check`, and can be run directly:
+
+```bash
+npm run check:docs
+npm run check:exports
+npm run check:install
+```
+
 ## Release checks
 
 Before merging a package-impacting change:

package/README.md

@@ -10,6 +10,7 @@ NSDS is Tailwind-first and token-driven. It ships the public package surface nee
 - [Quick start](#quick-start)
 - [Package exports](#package-exports)
 - [Components](#components)
+- [Documentation](#documentation)
 - [Repository layout](#repository-layout)
 - [Development](#development)
 - [Versioning and releases](#versioning-and-releases)
@@ -104,14 +105,34 @@ Build static Storybook documentation:
 npm run build:storybook
 ```
 
+## Documentation
+
+Public docs live in [`docs/`](./docs/README.md) and follow the Diataxis model:
+
+- tutorials for first-time setup
+- how-to guides for integration tasks
+- reference pages for exports, tokens, classes, and generated API details
+- explanation pages for design, accessibility, and versioning decisions
+
+Generate the API reference from TypeScript source:
+
+```bash
+npm run docs:api
+```
+
+The static landing page lives in [`site/`](./site/index.html).
+
 ## Repository layout
 
 | Path | Purpose |
 | --- | --- |
 | `styles.css` | Public CSS entry point |
 | `tokens/` | CSS custom properties for color, type, spacing, motion, and HUD values |
-| `components/` | React components, TypeScript declarations, primitive CSS, and stories |
+| `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
 
@@ -127,9 +148,15 @@ Common scripts:
 | Script | Purpose |
 | --- | --- |
 | `npm run build` | Build the package into `dist/` |
-| `npm run check` | Build, validate package metadata, type-check, and smoke-test imports |
+| `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 |
 

package/dist/components/buttons/Button.d.ts

@@ -1,21 +1,18 @@
-/**
- * @startingPoint section="Components" subtitle="Play and Ghost button variants" viewport="700x180"
- */
-import type * as React from 'react';
-
-export interface ButtonProps {
-  /** Visual style */
-  variant?: 'play' | 'ghost';
-  /** Size */
-  size?: 'sm' | 'md' | 'lg';
-  /** Render as <a> when provided */
-  href?: string;
-  onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  type?: 'button' | 'submit' | 'reset';
+import type { AnchorHTMLAttributes, HTMLAttributes, MouseEventHandler, ReactElement, ReactNode } from 'react';
+export type ButtonVariant = 'play' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+    /** Visual style. */
+    variant?: ButtonVariant;
+    /** Control size. */
+    size?: ButtonSize;
+    /** Render as an anchor when provided. */
+    href?: string;
+    rel?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    children?: ReactNode;
+    disabled?: boolean;
+    type?: 'button' | 'submit' | 'reset';
 }
-
-export declare function Button(props: ButtonProps): React.ReactElement;
+export declare function Button({ variant, size, href, onClick, children, disabled, className, type, ...props }: ButtonProps): ReactElement;

package/dist/components/cards/FeatureCard.d.ts

@@ -1,18 +1,16 @@
-import type * as React from 'react';
-
-export interface FeatureCardProps {
-  /** Pixel-art icon element */
-  icon: React.ReactNode;
-  /** Card heading — Press Start 2P */
-  title: string;
-  /** Body copy — Inter 14px */
-  body: string;
-  /** Small tag label in top-right (e.g. "Spatial", "Live") */
-  tag?: string;
-  /** Icon color — defaults to gold #e6db74 */
-  iconColor?: string;
-  className?: string;
-  style?: React.CSSProperties;
+import type { LiHTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface FeatureCardProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'children' | 'style' | 'title'> {
+    /** Pixel-art icon element. */
+    icon: ReactNode;
+    /** Card heading. */
+    title: string;
+    /** Body copy. */
+    body: string;
+    /** Small tag label. */
+    tag?: string;
+    /** Icon accent color. */
+    iconColor?: string;
+    style?: NSStyle;
 }
-
-export declare function FeatureCard(props: FeatureCardProps): React.ReactElement;
+export declare function FeatureCard({ icon, title, body, tag, iconColor, className, style, ...props }: FeatureCardProps): ReactElement;

package/dist/components/cards/QuestCard.d.ts

@@ -1,16 +1,13 @@
-import type * as React from 'react';
-
-export interface QuestCardProps {
-  /** Gate number shown in the title */
-  gate: number;
-  /** Short gate name (e.g. "Space", "Movement") */
-  title: string;
-  /** One-sentence description */
-  body: string;
-  /** Controls border color, bg tint, icon, and pill label */
-  status?: 'done' | 'active' | 'planned' | 'locked';
-  className?: string;
-  style?: React.CSSProperties;
+import type { LiHTMLAttributes, ReactElement } from 'react';
+export type QuestCardStatus = 'done' | 'active' | 'planned' | 'locked';
+export interface QuestCardProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'children' | 'title'> {
+    /** Gate number shown in the title. */
+    gate: number;
+    /** Short gate name. */
+    title: string;
+    /** One-sentence description. */
+    body: string;
+    /** Controls border color, tint, icon, and pill label. */
+    status?: QuestCardStatus;
 }
-
-export declare function QuestCard(props: QuestCardProps): React.ReactElement;
+export declare function QuestCard({ gate, title, body, status, className, ...props }: QuestCardProps): ReactElement;

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

@@ -1,17 +1,16 @@
-import type * as React from 'react';
-
-export interface HUDBarProps {
-  /** Current stat value */
-  value?: number;
-  /** Maximum stat value */
-  max?: number;
-  /** Bar fill color */
-  fillColor?: string;
-  /** Bar track color */
-  trackColor?: string;
-  /** Bar height in px */
-  height?: number;
-  style?: React.CSSProperties;
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface HUDBarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    /** Current stat value. */
+    value?: number;
+    /** Maximum stat value. */
+    max?: number;
+    /** Bar fill color. */
+    fillColor?: string;
+    /** Bar track color. */
+    trackColor?: string;
+    /** Bar height in px. */
+    height?: number;
+    style?: NSStyle;
 }
-
-export declare function HUDBar(props: HUDBarProps): React.ReactElement;
+export declare function HUDBar({ value, max, fillColor, trackColor, height, style, role, ...props }: HUDBarProps): ReactElement;

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

@@ -1,11 +1,10 @@
-import type * as React from 'react';
-
-export interface HUDDividerProps {
-  /** Vertical by default; use horizontal for a 1px row rule. */
-  direction?: 'vertical' | 'horizontal';
-  /** Line color */
-  color?: string;
-  style?: React.CSSProperties;
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+export interface HUDDividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    /** Vertical by default; use horizontal for a 1px row rule. */
+    direction?: 'vertical' | 'horizontal';
+    /** Line color. */
+    color?: string;
+    style?: NSStyle;
 }
-
-export declare function HUDDivider(props: HUDDividerProps): React.ReactElement;
+export declare function HUDDivider({ direction, color, style, role, ...props }: HUDDividerProps): ReactElement;

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

@@ -1,17 +1,22 @@
-import type * as React from 'react';
-
-export interface HUDLabelProps {
-  /** Display text */
-  text?: string;
-  /** Text alignment within the container */
-  align?: 'left' | 'center' | 'right';
-  /** Uniform scale multiplier applied to fontSize */
-  scale?: number;
-  /** Text color */
-  color?: string;
-  /** Base font size in px, before scale */
-  fontSize?: number;
-  style?: React.CSSProperties;
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { NSStyle } from '../shared/styles.js';
+declare const JUSTIFY: {
+    readonly left: "flex-start";
+    readonly center: "center";
+    readonly right: "flex-end";
+};
+export interface HUDLabelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'style'> {
+    /** Display text. */
+    text?: string;
+    /** Text alignment within the container. */
+    align?: keyof typeof JUSTIFY;
+    /** Uniform scale multiplier applied to fontSize. */
+    scale?: number;
+    /** Text color. */
+    color?: string;
+    /** Base font size in px, before scale. */
+    fontSize?: number;
+    style?: NSStyle;
 }
-
-export declare function HUDLabel(props: HUDLabelProps): React.ReactElement;
+export declare function HUDLabel({ text, align, scale, color, fontSize, style, ...props }: HUDLabelProps): ReactElement;
+export {};

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

@@ -1,42 +1,29 @@
-import type * as React from 'react';
-
-export type RPGIconWeapon  = 'sword' | 'staff' | 'bow' | 'katar' | 'book' | 'hammer';
+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;
-
+export type RPGIconRace = 'human' | 'beast' | 'demon' | 'angel' | 'spirit';
+export type RPGIconSize = 'small' | 'medium' | 'large';
+export type RPGIconName = RPGIconWeapon | RPGIconElement | RPGIconRace | RPGIconSize;
 export interface RPGIconProps {
-  /**
-   * 22 original pixel-art icons across 4 canonical categories:
-   *
-   * Weapons (6):  sword · staff · bow · katar · book · hammer
-   *               (from game/items/index.ts weapon hand-slot items)
-   *
-   * Elements (8): neutral · earth · wind · water · fire · light · dark · void
-   *               (from identity.ts ELEMENTS + ELEMENT_DISPLAY)
-   *
-   * Races (5):    human · beast · demon · angel · spirit
-   *               (illustrative — race is free text in the game)
-   *
-   * Sizes (3):    small · medium · large
-   *               (from identity.ts BODY_SIZES)
-   */
-  name?: RPGIconName;
-  /** Rendered size in px (width = height). Default: 22 */
-  size?: number;
-  style?: React.CSSProperties;
+    /** Icon name across weapon, element, race, and size groups. */
+    name?: RPGIconName;
+    /** Rendered size in px. */
+    size?: number;
+    style?: CSSProperties;
 }
-
-export declare function RPGIcon(props: RPGIconProps): React.ReactElement;
-
-/** Sorted list of all valid icon names */
 export declare const icons: RPGIconName[];
-
-/** @deprecated Use RPGIcon — HUDIcon is kept for backward compatibility */
-export declare const HUDIcon: typeof RPGIcon;
+/**
+ * RPGIcon — 22 original pixel-art icons.
+ *
+ * Weapons (6):  sword · staff · bow · katar · book · hammer
+ * Elements (8): neutral · earth · wind · water · fire · light · dark · void
+ * Races (5):    human · beast · demon · angel · spirit
+ * Sizes (3):    small · medium · large
+ */
+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) & {
+    icons: RPGIconName[];
+};

package/dist/components/navigation/SectionArrow.d.ts

@@ -1,13 +1,9 @@
-import type * as React from 'react';
-
-export interface SectionArrowProps {
-  /** href of the next section (e.g. "#why") */
-  href: string;
-  /** Accessible label for screen readers */
-  label: string;
-  children?: React.ReactNode;
-  className?: string;
-  style?: React.CSSProperties;
+import type { AnchorHTMLAttributes, ReactElement, ReactNode } from 'react';
+export interface SectionArrowProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'href'> {
+    /** href of the next section. */
+    href: string;
+    /** Accessible label for screen readers. */
+    label: string;
+    children?: ReactNode;
 }
-
-export declare function SectionArrow(props: SectionArrowProps): React.ReactElement;
+export declare function SectionArrow({ href, label, className, children, ...props }: SectionArrowProps): ReactElement;

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

@@ -0,0 +1,17 @@
+export { Button } from '../buttons/Button.js';
+export type { ButtonProps, ButtonSize, ButtonVariant } from '../buttons/Button.js';
+export { FeatureCard } from '../cards/FeatureCard.js';
+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 { HUDDivider } from '../hud/HUDDivider.js';
+export type { HUDDividerProps } from '../hud/HUDDivider.js';
+export { HUDLabel } from '../hud/HUDLabel.js';
+export type { HUDLabelProps } from '../hud/HUDLabel.js';
+export { RPGIcon, HUDIcon, icons } from '../icons/RPGIcon.js';
+export type { RPGIconElement, RPGIconName, RPGIconProps, RPGIconRace, RPGIconSize, 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';

package/dist/components/shared/styles.d.ts

@@ -0,0 +1,47 @@
+import type { CSSProperties } from 'react';
+export type NSStyle = CSSProperties & Record<`--${string}`, string | number | undefined>;
+export type ClassValue = string | false | null | undefined;
+export declare const cx: (...parts: ClassValue[]) => string;
+export declare function mergeStyles(base: NSStyle, override?: NSStyle): NSStyle;
+/** Token shortcuts for inline style props — lowercase to avoid DS compiler treating this as a component */
+export declare const nsTokens: {
+    readonly gold: "var(--ns-gold)";
+    readonly pink: "var(--ns-pink)";
+    readonly purple: "var(--ns-purple)";
+    readonly cyan: "var(--ns-cyan)";
+    readonly green: "var(--ns-green)";
+    readonly orange: "var(--ns-orange)";
+    readonly later: "var(--ns-ink-faint)";
+};
+/** @deprecated Use nsTokens */
+export declare const NS: {
+    readonly gold: "var(--ns-gold)";
+    readonly pink: "var(--ns-pink)";
+    readonly purple: "var(--ns-purple)";
+    readonly cyan: "var(--ns-cyan)";
+    readonly green: "var(--ns-green)";
+    readonly orange: "var(--ns-orange)";
+    readonly later: "var(--ns-ink-faint)";
+};
+export declare const questStatus: {
+    readonly done: {
+        readonly className: "ns-quest-card--done";
+        readonly label: "HOLDS";
+        readonly icon: "✓";
+    };
+    readonly active: {
+        readonly className: "ns-quest-card--active";
+        readonly label: "BUILDING";
+        readonly icon: "▶";
+    };
+    readonly planned: {
+        readonly className: "ns-quest-card--planned";
+        readonly label: "PLANNED";
+        readonly icon: "◌";
+    };
+    readonly locked: {
+        readonly className: "ns-quest-card--locked";
+        readonly label: "LATER";
+        readonly icon: "✦";
+    };
+};

package/dist/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");var t=(...e)=>e.filter(Boolean).join(` `);function n(e,t){return t?{...e,...t}:e}var r={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)`},i={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:`✦`}},a=new Set([`play`,`ghost`]),o=new Set([`sm`,`md`,`lg`]);function s({variant:n=`play`,size:r=`md`,href:i,onClick:s,children:c,disabled:l=!1,className:u,type:d=`button`,...f}){let p=a.has(n)?n:`play`,m=o.has(r)?r:`md`,h=t(`ns-button`,`ns-button--${p}`,`ns-button--${m}`,u),g={...f,className:h,onClick:l?void 0:s};return i?(0,e.jsx)(`a`,{...g,href:l?void 0:i,"aria-disabled":l||void 0,tabIndex:l?-1:f.tabIndex,children:c}):(0,e.jsx)(`button`,{...g,type:d,disabled:l,children:c})}function c({icon:i,title:a,body:o,tag:s,iconColor:c=r.gold,className:l,style:u,...d}){return(0,e.jsxs)(`li`,{...d,className:t(`ns-card ns-feature-card`,l),style:n({"--ns-feature-accent":c},u),children:[(0,e.jsx)(`span`,{className:`ns-icon-slot ns-feature-card__icon`,"aria-hidden":`true`,children:i}),(0,e.jsxs)(`div`,{children:[(0,e.jsx)(`h3`,{className:`ns-feature-card__title`,children:a}),(0,e.jsx)(`p`,{className:`ns-feature-card__body`,children:o})]}),s&&(0,e.jsx)(`span`,{className:`ns-tag ns-feature-card__tag`,children:s})]})}function l({gate:n,title:r,body:a,status:o=`locked`,className:s,...c}){let l=i[o]||i.locked;return(0,e.jsxs)(`li`,{...c,className:t(`ns-quest-card`,l.className,s),children:[(0,e.jsx)(`span`,{className:`ns-quest-card__icon`,"aria-hidden":`true`,children:l.icon}),(0,e.jsxs)(`div`,{className:`ns-quest-card__body`,children:[(0,e.jsx)(`p`,{className:`ns-quest-card__title`,children:`Gate ${n} · ${r}`}),(0,e.jsx)(`p`,{className:`ns-quest-card__desc`,children:a}),(0,e.jsx)(`span`,{className:`ns-status-pill`,children:l.label})]})]})}var u=`var(--ns-font-pixel, "Press Start 2P", monospace)`;function d({value:t=40,max:n=40,fillColor:r=`var(--hud-hp-fill, #4caf73)`,trackColor:i=`var(--hud-track, rgba(255, 255, 255, 0.10))`,height:a=14,style:o}){let s=n>0?Math.max(0,Math.min(100,t/n*100)):0;return(0,e.jsxs)(`div`,{style:{position:`relative`,background:i,height:a,overflow:`hidden`,fontFamily:u,...o},children:[(0,e.jsx)(`div`,{style:{position:`absolute`,inset:0,width:`${s}%`,background:r,transition:`width .35s ease-out`}}),(0,e.jsxs)(`span`,{style:{position:`absolute`,inset:0,display:`flex`,alignItems:`center`,paddingLeft:4,fontSize:4,color:`#fff`,pointerEvents:`none`},children:[t,` / `,n]})]})}function f({direction:t=`vertical`,color:n=`var(--ns-line)`,style:r}){let i=t===`vertical`;return(0,e.jsx)(`div`,{style:{width:i?`1px`:`100%`,height:i?`100%`:`1px`,background:n,flexShrink:0,alignSelf:`stretch`,...r}})}var p=`var(--ns-font-pixel, "Press Start 2P", monospace)`,m={left:`flex-start`,center:`center`,right:`flex-end`};function h({text:t=`Label`,align:n=`left`,scale:r=1,color:i=`var(--ns-ink)`,fontSize:a=5,style:o}){return(0,e.jsx)(`div`,{style:{display:`flex`,alignItems:`center`,justifyContent:m[n]||m.left,paddingLeft:n===`right`?0:3,paddingRight:n===`left`?0:3,fontFamily:p,fontSize:a*r,color:i,whiteSpace:`nowrap`,overflow:`hidden`,width:`100%`,height:`100%`,...o},children:t})}function g(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`line`,{x1:`13`,y1:`2`,x2:`4`,y2:`11`,stroke:`#cfd8e2`,strokeWidth:`2`,strokeLinecap:`square`}),(0,e.jsx)(`line`,{x1:`6`,y1:`5`,x2:`10`,y2:`9`,stroke:`#e6db74`,strokeWidth:`2`,strokeLinecap:`square`}),(0,e.jsx)(`line`,{x1:`4`,y1:`10`,x2:`2`,y2:`13`,stroke:`#b07040`,strokeWidth:`1.5`,strokeLinecap:`square`})]})}function _(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`3`,y:`1`,width:`3`,height:`2`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`2`,y:`3`,width:`2`,height:`10`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`3`,y:`13`,width:`3`,height:`2`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`6`,y:`2`,width:`1`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`7`,y:`3`,width:`1`,height:`10`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`6`,y:`13`,width:`1`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`7`,height:`2`,fill:`#c8a878`}),(0,e.jsx)(`rect`,{x:`13`,y:`6`,width:`2`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`14`,y:`7`,width:`2`,height:`2`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`13`,y:`9`,width:`2`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`2`,height:`2`,fill:`#ae81ff`}),(0,e.jsx)(`rect`,{x:`7`,y:`9`,width:`2`,height:`2`,fill:`#ae81ff`})]})}function v(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`1`,width:`6`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`4`,y:`2`,width:`8`,height:`4`,fill:`#ae81ff`}),(0,e.jsx)(`rect`,{x:`5`,y:`6`,width:`6`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`6`,y:`3`,width:`4`,height:`2`,fill:`#d4b8ff`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`8`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`1`,fill:`#b07040`})]})}function y(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`1`,width:`2`,height:`8`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`2`,y:`9`,width:`2`,height:`3`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`12`,y:`1`,width:`2`,height:`8`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`12`,y:`9`,width:`2`,height:`3`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`2`,y:`8`,width:`12`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`5`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`3`,y:`0`,width:`1`,height:`1`,fill:`#eef0f4`}),(0,e.jsx)(`rect`,{x:`12`,y:`0`,width:`1`,height:`1`,fill:`#eef0f4`})]})}function b(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`2`,width:`2`,height:`12`,fill:`#6a4a6a`}),(0,e.jsx)(`rect`,{x:`4`,y:`2`,width:`10`,height:`12`,fill:`#8855aa`}),(0,e.jsx)(`rect`,{x:`13`,y:`3`,width:`1`,height:`10`,fill:`#f4f0e8`}),(0,e.jsx)(`rect`,{x:`7`,y:`4`,width:`2`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`6`,y:`5`,width:`4`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`7`,y:`6`,width:`2`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`6`,y:`8`,width:`4`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`7`,y:`9`,width:`2`,height:`2`,fill:`#e6db74`})]})}function x(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`4`,y:`1`,width:`8`,height:`1`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`10`,height:`5`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`10`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`1`,height:`3`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`3`,y:`7`,width:`10`,height:`1`,fill:`#5a6570`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`8`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`1`,fill:`#b07040`})]})}function S(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`6`,width:`12`,height:`4`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`6`,y:`2`,width:`4`,height:`12`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`11`,y:`3`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`11`,y:`11`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`2`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`7`,y:`4`,width:`2`,height:`1`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`7`,y:`11`,width:`2`,height:`1`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`4`,y:`7`,width:`1`,height:`2`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`11`,y:`7`,width:`1`,height:`2`,fill:`#b0b0c0`})]})}function C(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`7`,y:`2`,width:`2`,height:`2`,fill:`#c8a050`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`4`,height:`2`,fill:`#c8a050`}),(0,e.jsx)(`rect`,{x:`5`,y:`6`,width:`6`,height:`2`,fill:`#8b6914`}),(0,e.jsx)(`rect`,{x:`4`,y:`8`,width:`8`,height:`2`,fill:`#8b6914`}),(0,e.jsx)(`rect`,{x:`3`,y:`10`,width:`10`,height:`2`,fill:`#6a5010`}),(0,e.jsx)(`rect`,{x:`1`,y:`12`,width:`14`,height:`3`,fill:`#5a4008`}),(0,e.jsx)(`rect`,{x:`7`,y:`2`,width:`2`,height:`1`,fill:`#f0ece0`}),(0,e.jsx)(`rect`,{x:`6`,y:`3`,width:`4`,height:`1`,fill:`#f0ece0`}),(0,e.jsx)(`rect`,{x:`5`,y:`8`,width:`1`,height:`1`,fill:`#a07820`}),(0,e.jsx)(`rect`,{x:`10`,y:`9`,width:`1`,height:`1`,fill:`#a07820`})]})}function w(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`4`,width:`10`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`3`,y:`5`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`12`,y:`3`,width:`2`,height:`2`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`13`,y:`5`,width:`1`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`1`,y:`7`,width:`11`,height:`2`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`12`,y:`6`,width:`2`,height:`4`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`11`,y:`10`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`2`,y:`12`,width:`9`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`2`,y:`11`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`11`,y:`12`,width:`2`,height:`2`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`10`,y:`14`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`2`,y:`3`,width:`8`,height:`1`,fill:`#90e8cc`}),(0,e.jsx)(`rect`,{x:`2`,y:`8`,width:`9`,height:`1`,fill:`#90e8cc`})]})}function T(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`6`,y:`1`,width:`4`,height:`1`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`5`,y:`2`,width:`6`,height:`2`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`4`,y:`4`,width:`8`,height:`6`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`5`,y:`10`,width:`6`,height:`2`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`6`,y:`12`,width:`4`,height:`2`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`7`,y:`14`,width:`2`,height:`1`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`3`,height:`4`,fill:`#70b8f0`}),(0,e.jsx)(`rect`,{x:`7`,y:`3`,width:`2`,height:`1`,fill:`#70b8f0`}),(0,e.jsx)(`rect`,{x:`5`,y:`7`,width:`2`,height:`1`,fill:`#1a5a9a`}),(0,e.jsx)(`rect`,{x:`9`,y:`8`,width:`2`,height:`1`,fill:`#1a5a9a`})]})}function E(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`4`,y:`11`,width:`8`,height:`4`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`3`,y:`8`,width:`10`,height:`3`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`4`,y:`5`,width:`8`,height:`3`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`5`,y:`3`,width:`6`,height:`2`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`6`,y:`1`,width:`4`,height:`2`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`5`,y:`9`,width:`6`,height:`5`,fill:`#e8882a`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`2`,fill:`#e8882a`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`3`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`7`,y:`9`,width:`2`,height:`1`,fill:`#e6db74`})]})}function D(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`2`,width:`6`,height:`2`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`3`,y:`4`,width:`8`,height:`8`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`5`,y:`12`,width:`6`,height:`2`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`4`,y:`3`,width:`1`,height:`10`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`8`,y:`4`,width:`4`,height:`8`,fill:`#1a1a20`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`5`,height:`6`,fill:`#1a1a20`}),(0,e.jsx)(`rect`,{x:`11`,y:`2`,width:`1`,height:`1`,fill:`#c8c8d0`}),(0,e.jsx)(`rect`,{x:`13`,y:`5`,width:`1`,height:`1`,fill:`#c8c8d0`}),(0,e.jsx)(`rect`,{x:`12`,y:`9`,width:`1`,height:`1`,fill:`#c8c8d0`})]})}function O(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`5`,width:`6`,height:`6`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`4`,height:`1`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`6`,y:`11`,width:`4`,height:`1`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`4`,y:`6`,width:`1`,height:`4`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`11`,y:`6`,width:`1`,height:`4`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`7`,y:`1`,width:`2`,height:`3`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`7`,y:`12`,width:`2`,height:`3`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`1`,y:`7`,width:`3`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`12`,y:`7`,width:`3`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`11`,y:`3`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`11`,y:`11`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`6`,y:`6`,width:`4`,height:`4`,fill:`#fff8e0`})]})}function k(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`1`,width:`6`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`10`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`2`,y:`5`,width:`12`,height:`6`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`10`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`5`,y:`13`,width:`6`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`4`,y:`4`,width:`8`,height:`8`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`5`,y:`3`,width:`6`,height:`1`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`5`,y:`12`,width:`6`,height:`1`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`3`,y:`5`,width:`1`,height:`6`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`12`,y:`5`,width:`1`,height:`6`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`6`,y:`6`,width:`4`,height:`4`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`2`,height:`1`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`7`,y:`10`,width:`2`,height:`1`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`5`,y:`7`,width:`1`,height:`2`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`10`,y:`7`,width:`1`,height:`2`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`2`,fill:`#c8c0ff`})]})}function A(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`1`,width:`6`,height:`5`,fill:`#e8c87a`}),(0,e.jsx)(`rect`,{x:`7`,y:`6`,width:`2`,height:`1`,fill:`#d4a85a`}),(0,e.jsx)(`rect`,{x:`3`,y:`7`,width:`10`,height:`5`,fill:`#c8873a`}),(0,e.jsx)(`rect`,{x:`1`,y:`7`,width:`2`,height:`4`,fill:`#c8873a`}),(0,e.jsx)(`rect`,{x:`13`,y:`7`,width:`2`,height:`4`,fill:`#c8873a`}),(0,e.jsx)(`rect`,{x:`4`,y:`12`,width:`3`,height:`3`,fill:`#8a5c2a`}),(0,e.jsx)(`rect`,{x:`9`,y:`12`,width:`3`,height:`3`,fill:`#8a5c2a`})]})}function j(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`1`,width:`3`,height:`4`,fill:`#c8a060`}),(0,e.jsx)(`rect`,{x:`11`,y:`1`,width:`3`,height:`4`,fill:`#c8a060`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`1`,height:`2`,fill:`#e8886a`}),(0,e.jsx)(`rect`,{x:`12`,y:`2`,width:`1`,height:`2`,fill:`#e8886a`}),(0,e.jsx)(`rect`,{x:`3`,y:`4`,width:`10`,height:`6`,fill:`#c8a060`}),(0,e.jsx)(`rect`,{x:`5`,y:`8`,width:`6`,height:`3`,fill:`#d4b070`}),(0,e.jsx)(`rect`,{x:`7`,y:`8`,width:`2`,height:`1`,fill:`#5a3020`}),(0,e.jsx)(`rect`,{x:`4`,y:`6`,width:`3`,height:`2`,fill:`#e8a020`}),(0,e.jsx)(`rect`,{x:`9`,y:`6`,width:`3`,height:`2`,fill:`#e8a020`}),(0,e.jsx)(`rect`,{x:`5`,y:`6`,width:`1`,height:`2`,fill:`#1a1008`}),(0,e.jsx)(`rect`,{x:`10`,y:`6`,width:`1`,height:`2`,fill:`#1a1008`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`10`,height:`4`,fill:`#a87840`}),(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`2`,height:`3`,fill:`#a87840`}),(0,e.jsx)(`rect`,{x:`13`,y:`11`,width:`2`,height:`3`,fill:`#a87840`})]})}function M(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`3`,y:`1`,width:`2`,height:`5`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`11`,y:`1`,width:`2`,height:`5`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`2`,y:`1`,width:`2`,height:`2`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`12`,y:`1`,width:`2`,height:`2`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`3`,y:`5`,width:`10`,height:`6`,fill:`#7a2a2a`}),(0,e.jsx)(`rect`,{x:`4`,y:`7`,width:`3`,height:`2`,fill:`#ff2020`}),(0,e.jsx)(`rect`,{x:`9`,y:`7`,width:`3`,height:`2`,fill:`#ff2020`}),(0,e.jsx)(`rect`,{x:`5`,y:`7`,width:`1`,height:`2`,fill:`#ff8080`}),(0,e.jsx)(`rect`,{x:`10`,y:`7`,width:`1`,height:`2`,fill:`#ff8080`}),(0,e.jsx)(`rect`,{x:`6`,y:`11`,width:`1`,height:`2`,fill:`#f0e8d0`}),(0,e.jsx)(`rect`,{x:`9`,y:`11`,width:`1`,height:`2`,fill:`#f0e8d0`}),(0,e.jsx)(`rect`,{x:`2`,y:`12`,width:`12`,height:`4`,fill:`#5a1a1a`}),(0,e.jsx)(`rect`,{x:`1`,y:`12`,width:`2`,height:`3`,fill:`#5a1a1a`}),(0,e.jsx)(`rect`,{x:`13`,y:`12`,width:`2`,height:`3`,fill:`#5a1a1a`})]})}function N(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`4`,y:`1`,width:`8`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`10`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`2`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`11`,y:`3`,width:`2`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`5`,y:`4`,width:`6`,height:`5`,fill:`#f4e4c0`}),(0,e.jsx)(`rect`,{x:`6`,y:`6`,width:`2`,height:`1`,fill:`#6090e0`}),(0,e.jsx)(`rect`,{x:`10`,y:`6`,width:`2`,height:`1`,fill:`#6090e0`}),(0,e.jsx)(`rect`,{x:`1`,y:`9`,width:`4`,height:`5`,fill:`#f0f0f8`}),(0,e.jsx)(`rect`,{x:`11`,y:`9`,width:`4`,height:`5`,fill:`#f0f0f8`}),(0,e.jsx)(`rect`,{x:`1`,y:`9`,width:`2`,height:`3`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`13`,y:`9`,width:`2`,height:`3`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`5`,y:`9`,width:`6`,height:`6`,fill:`#d4c8f0`}),(0,e.jsx)(`rect`,{x:`4`,y:`10`,width:`1`,height:`4`,fill:`#d4c8f0`}),(0,e.jsx)(`rect`,{x:`11`,y:`10`,width:`1`,height:`4`,fill:`#d4c8f0`})]})}function P(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`6`,y:`1`,width:`4`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`5`,y:`3`,width:`6`,height:`4`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`4`,y:`7`,width:`8`,height:`4`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`5`,y:`11`,width:`6`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`4`,y:`13`,width:`2`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`7`,y:`13`,width:`2`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`10`,y:`13`,width:`2`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`4`,height:`3`,fill:`#b0eff6`}),(0,e.jsx)(`rect`,{x:`7`,y:`3`,width:`2`,height:`1`,fill:`#b0eff6`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`2`,height:`2`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`9`,y:`7`,width:`2`,height:`2`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`7`,y:`8`,width:`1`,height:`1`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`10`,y:`8`,width:`1`,height:`1`,fill:`#66d9e8`})]})}function F(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`3`,height:`4`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`8`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`12`,y:`4`,width:`3`,height:`11`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`1`,y:`15`,width:`14`,height:`1`,fill:`#5a5a6a`}),(0,e.jsx)(`rect`,{x:`1`,y:`8`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`3`,y:`10`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`2`,y:`10`,width:`1`,height:`1`,fill:`#e6db74`})]})}function I(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`3`,height:`4`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`8`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`12`,y:`4`,width:`3`,height:`11`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`1`,y:`15`,width:`14`,height:`1`,fill:`#5a5a6a`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`9`,y:`4`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`2`,height:`1`,fill:`#e6db74`})]})}function L(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`3`,height:`4`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`8`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`12`,y:`4`,width:`3`,height:`11`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`1`,y:`15`,width:`14`,height:`1`,fill:`#5a5a6a`}),(0,e.jsx)(`rect`,{x:`13`,y:`1`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`14`,y:`1`,width:`1`,height:`3`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`13`,y:`3`,width:`1`,height:`1`,fill:`#e6db74`})]})}var R={sword:g,staff:v,bow:_,katar:y,book:b,hammer:x,neutral:S,earth:C,wind:w,water:T,fire:E,light:O,dark:D,void:k,human:A,beast:j,demon:M,angel:N,spirit:P,small:F,medium:I,large:L},z=Object.keys(R);function B({name:t=`sword`,size:n=22,style:r}){let i=R[t]||g;return(0,e.jsx)(`span`,{style:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,width:n,height:n,imageRendering:`pixelated`,flexShrink:0,...r},children:(0,e.jsx)(i,{})})}B.icons=z;var V=B;function H(){return(0,e.jsx)(`svg`,{viewBox:`0 0 12 8`,width:12,height:12,"aria-hidden":`true`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,e.jsx)(`polyline`,{points:`1,1.5 6,6.5 11,1.5`})})}function U({href:n,label:r,className:i,children:a,...o}){return(0,e.jsx)(`a`,{...o,href:n,"aria-label":r,className:t(`ns-section-arrow`,i),children:a||(0,e.jsx)(H,{})})}exports.Button=s,exports.FeatureCard=c,exports.HUDBar=d,exports.HUDDivider=f,exports.HUDIcon=V,exports.HUDLabel=h,exports.QuestCard=l,exports.RPGIcon=B,exports.SectionArrow=U,exports.icons=z;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime");var t=(...e)=>e.filter(Boolean).join(` `);function n(e,t){return t?{...e,...t}:e}var r={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)`},i={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:`✦`}},a=new Set([`play`,`ghost`]),o=new Set([`sm`,`md`,`lg`]);function s({variant:n=`play`,size:r=`md`,href:i,onClick:s,children:c,disabled:l=!1,className:u,type:d=`button`,...f}){let p=a.has(n)?n:`play`,m=o.has(r)?r:`md`,h=t(`ns-button`,`ns-button--${p}`,`ns-button--${m}`,u),g={...f,className:h,onClick:l?void 0:s};return i?(0,e.jsx)(`a`,{...g,href:l?void 0:i,"aria-disabled":l||void 0,tabIndex:l?-1:f.tabIndex,children:c}):(0,e.jsx)(`button`,{...g,type:d,disabled:l,children:c})}function c({icon:i,title:a,body:o,tag:s,iconColor:c=r.gold,className:l,style:u,...d}){return(0,e.jsxs)(`li`,{...d,className:t(`ns-card ns-feature-card`,l),style:n({"--ns-feature-accent":c},u),children:[(0,e.jsx)(`span`,{className:`ns-icon-slot ns-feature-card__icon`,"aria-hidden":`true`,children:i}),(0,e.jsxs)(`div`,{children:[(0,e.jsx)(`h3`,{className:`ns-feature-card__title`,children:a}),(0,e.jsx)(`p`,{className:`ns-feature-card__body`,children:o})]}),s&&(0,e.jsx)(`span`,{className:`ns-tag ns-feature-card__tag`,children:s})]})}function l({gate:n,title:r,body:a,status:o=`locked`,className:s,...c}){let l=i[o]||i.locked;return(0,e.jsxs)(`li`,{...c,className:t(`ns-quest-card`,l.className,s),children:[(0,e.jsx)(`span`,{className:`ns-quest-card__icon`,"aria-hidden":`true`,children:l.icon}),(0,e.jsxs)(`div`,{className:`ns-quest-card__body`,children:[(0,e.jsx)(`p`,{className:`ns-quest-card__title`,children:`Gate ${n} · ${r}`}),(0,e.jsx)(`p`,{className:`ns-quest-card__desc`,children:a}),(0,e.jsx)(`span`,{className:`ns-status-pill`,children:l.label})]})]})}var u=`var(--ns-font-pixel, "Press Start 2P", monospace)`;function d({value:t=40,max:n=40,fillColor:r=`var(--hud-hp-fill, #4caf73)`,trackColor:i=`var(--hud-track, rgba(255, 255, 255, 0.10))`,height:a=14,style:o,role:s=`meter`,...c}){let l=n>0?Math.max(0,Math.min(100,t/n*100)):0;return(0,e.jsxs)(`div`,{...c,role:s,"aria-valuemin":0,"aria-valuemax":n,"aria-valuenow":Math.max(0,Math.min(t,n)),style:{position:`relative`,background:i,height:a,overflow:`hidden`,fontFamily:u,...o},children:[(0,e.jsx)(`div`,{style:{position:`absolute`,inset:0,width:`${l}%`,background:r,transition:`width .35s ease-out`}}),(0,e.jsxs)(`span`,{style:{position:`absolute`,inset:0,display:`flex`,alignItems:`center`,paddingLeft:4,fontSize:4,color:`#fff`,pointerEvents:`none`},children:[t,` / `,n]})]})}function f({direction:t=`vertical`,color:n=`var(--ns-line)`,style:r,role:i=`separator`,...a}){let o=t===`vertical`;return(0,e.jsx)(`div`,{...a,role:i,"aria-orientation":t,style:{width:o?`1px`:`100%`,height:o?`100%`:`1px`,background:n,flexShrink:0,alignSelf:`stretch`,...r}})}var p=`var(--ns-font-pixel, "Press Start 2P", monospace)`,m={left:`flex-start`,center:`center`,right:`flex-end`};function h({text:t=`Label`,align:n=`left`,scale:r=1,color:i=`var(--ns-ink)`,fontSize:a=5,style:o,...s}){return(0,e.jsx)(`div`,{...s,style:{display:`flex`,alignItems:`center`,justifyContent:m[n]||m.left,paddingLeft:n===`right`?0:3,paddingRight:n===`left`?0:3,fontFamily:p,fontSize:a*r,color:i,whiteSpace:`nowrap`,overflow:`hidden`,width:`100%`,height:`100%`,...o},children:t})}function g(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`line`,{x1:`13`,y1:`2`,x2:`4`,y2:`11`,stroke:`#cfd8e2`,strokeWidth:`2`,strokeLinecap:`square`}),(0,e.jsx)(`line`,{x1:`6`,y1:`5`,x2:`10`,y2:`9`,stroke:`#e6db74`,strokeWidth:`2`,strokeLinecap:`square`}),(0,e.jsx)(`line`,{x1:`4`,y1:`10`,x2:`2`,y2:`13`,stroke:`#b07040`,strokeWidth:`1.5`,strokeLinecap:`square`})]})}function _(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`3`,y:`1`,width:`3`,height:`2`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`2`,y:`3`,width:`2`,height:`10`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`3`,y:`13`,width:`3`,height:`2`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`6`,y:`2`,width:`1`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`7`,y:`3`,width:`1`,height:`10`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`6`,y:`13`,width:`1`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`7`,height:`2`,fill:`#c8a878`}),(0,e.jsx)(`rect`,{x:`13`,y:`6`,width:`2`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`14`,y:`7`,width:`2`,height:`2`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`13`,y:`9`,width:`2`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`2`,height:`2`,fill:`#ae81ff`}),(0,e.jsx)(`rect`,{x:`7`,y:`9`,width:`2`,height:`2`,fill:`#ae81ff`})]})}function v(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`1`,width:`6`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`4`,y:`2`,width:`8`,height:`4`,fill:`#ae81ff`}),(0,e.jsx)(`rect`,{x:`5`,y:`6`,width:`6`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`6`,y:`3`,width:`4`,height:`2`,fill:`#d4b8ff`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`8`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`1`,fill:`#b07040`})]})}function y(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`1`,width:`2`,height:`8`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`2`,y:`9`,width:`2`,height:`3`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`12`,y:`1`,width:`2`,height:`8`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`12`,y:`9`,width:`2`,height:`3`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`2`,y:`8`,width:`12`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`5`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`3`,y:`0`,width:`1`,height:`1`,fill:`#eef0f4`}),(0,e.jsx)(`rect`,{x:`12`,y:`0`,width:`1`,height:`1`,fill:`#eef0f4`})]})}function b(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`2`,width:`2`,height:`12`,fill:`#6a4a6a`}),(0,e.jsx)(`rect`,{x:`4`,y:`2`,width:`10`,height:`12`,fill:`#8855aa`}),(0,e.jsx)(`rect`,{x:`13`,y:`3`,width:`1`,height:`10`,fill:`#f4f0e8`}),(0,e.jsx)(`rect`,{x:`7`,y:`4`,width:`2`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`6`,y:`5`,width:`4`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`7`,y:`6`,width:`2`,height:`1`,fill:`#c8a8ff`}),(0,e.jsx)(`rect`,{x:`6`,y:`8`,width:`4`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`7`,y:`9`,width:`2`,height:`2`,fill:`#e6db74`})]})}function x(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`4`,y:`1`,width:`8`,height:`1`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`10`,height:`5`,fill:`#a8b0bc`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`10`,height:`1`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`1`,height:`3`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`3`,y:`7`,width:`10`,height:`1`,fill:`#5a6570`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`8`,fill:`#8a6540`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`1`,fill:`#b07040`})]})}function S(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`6`,width:`12`,height:`4`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`6`,y:`2`,width:`4`,height:`12`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`11`,y:`3`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`11`,y:`11`,width:`2`,height:`2`,fill:`#7a7a8a`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`2`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`7`,y:`4`,width:`2`,height:`1`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`7`,y:`11`,width:`2`,height:`1`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`4`,y:`7`,width:`1`,height:`2`,fill:`#b0b0c0`}),(0,e.jsx)(`rect`,{x:`11`,y:`7`,width:`1`,height:`2`,fill:`#b0b0c0`})]})}function C(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`7`,y:`2`,width:`2`,height:`2`,fill:`#c8a050`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`4`,height:`2`,fill:`#c8a050`}),(0,e.jsx)(`rect`,{x:`5`,y:`6`,width:`6`,height:`2`,fill:`#8b6914`}),(0,e.jsx)(`rect`,{x:`4`,y:`8`,width:`8`,height:`2`,fill:`#8b6914`}),(0,e.jsx)(`rect`,{x:`3`,y:`10`,width:`10`,height:`2`,fill:`#6a5010`}),(0,e.jsx)(`rect`,{x:`1`,y:`12`,width:`14`,height:`3`,fill:`#5a4008`}),(0,e.jsx)(`rect`,{x:`7`,y:`2`,width:`2`,height:`1`,fill:`#f0ece0`}),(0,e.jsx)(`rect`,{x:`6`,y:`3`,width:`4`,height:`1`,fill:`#f0ece0`}),(0,e.jsx)(`rect`,{x:`5`,y:`8`,width:`1`,height:`1`,fill:`#a07820`}),(0,e.jsx)(`rect`,{x:`10`,y:`9`,width:`1`,height:`1`,fill:`#a07820`})]})}function w(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`4`,width:`10`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`3`,y:`5`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`12`,y:`3`,width:`2`,height:`2`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`13`,y:`5`,width:`1`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`1`,y:`7`,width:`11`,height:`2`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`12`,y:`6`,width:`2`,height:`4`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`11`,y:`10`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`2`,y:`12`,width:`9`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`2`,y:`11`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`11`,y:`12`,width:`2`,height:`2`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`10`,y:`14`,width:`2`,height:`1`,fill:`#5dcaa5`}),(0,e.jsx)(`rect`,{x:`2`,y:`3`,width:`8`,height:`1`,fill:`#90e8cc`}),(0,e.jsx)(`rect`,{x:`2`,y:`8`,width:`9`,height:`1`,fill:`#90e8cc`})]})}function T(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`6`,y:`1`,width:`4`,height:`1`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`5`,y:`2`,width:`6`,height:`2`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`4`,y:`4`,width:`8`,height:`6`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`5`,y:`10`,width:`6`,height:`2`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`6`,y:`12`,width:`4`,height:`2`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`7`,y:`14`,width:`2`,height:`1`,fill:`#378add`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`3`,height:`4`,fill:`#70b8f0`}),(0,e.jsx)(`rect`,{x:`7`,y:`3`,width:`2`,height:`1`,fill:`#70b8f0`}),(0,e.jsx)(`rect`,{x:`5`,y:`7`,width:`2`,height:`1`,fill:`#1a5a9a`}),(0,e.jsx)(`rect`,{x:`9`,y:`8`,width:`2`,height:`1`,fill:`#1a5a9a`})]})}function E(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`4`,y:`11`,width:`8`,height:`4`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`3`,y:`8`,width:`10`,height:`3`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`4`,y:`5`,width:`8`,height:`3`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`5`,y:`3`,width:`6`,height:`2`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`6`,y:`1`,width:`4`,height:`2`,fill:`#ba7517`}),(0,e.jsx)(`rect`,{x:`5`,y:`9`,width:`6`,height:`5`,fill:`#e8882a`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`2`,fill:`#e8882a`}),(0,e.jsx)(`rect`,{x:`6`,y:`10`,width:`4`,height:`3`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`7`,y:`9`,width:`2`,height:`1`,fill:`#e6db74`})]})}function D(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`2`,width:`6`,height:`2`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`3`,y:`4`,width:`8`,height:`8`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`5`,y:`12`,width:`6`,height:`2`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`4`,y:`3`,width:`1`,height:`10`,fill:`#888780`}),(0,e.jsx)(`rect`,{x:`8`,y:`4`,width:`4`,height:`8`,fill:`#1a1a20`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`5`,height:`6`,fill:`#1a1a20`}),(0,e.jsx)(`rect`,{x:`11`,y:`2`,width:`1`,height:`1`,fill:`#c8c8d0`}),(0,e.jsx)(`rect`,{x:`13`,y:`5`,width:`1`,height:`1`,fill:`#c8c8d0`}),(0,e.jsx)(`rect`,{x:`12`,y:`9`,width:`1`,height:`1`,fill:`#c8c8d0`})]})}function O(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`5`,width:`6`,height:`6`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`4`,height:`1`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`6`,y:`11`,width:`4`,height:`1`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`4`,y:`6`,width:`1`,height:`4`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`11`,y:`6`,width:`1`,height:`4`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`7`,y:`1`,width:`2`,height:`3`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`7`,y:`12`,width:`2`,height:`3`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`1`,y:`7`,width:`3`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`12`,y:`7`,width:`3`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`11`,y:`3`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`11`,y:`11`,width:`2`,height:`2`,fill:`#fac775`}),(0,e.jsx)(`rect`,{x:`6`,y:`6`,width:`4`,height:`4`,fill:`#fff8e0`})]})}function k(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`1`,width:`6`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`10`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`2`,y:`5`,width:`12`,height:`6`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`10`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`5`,y:`13`,width:`6`,height:`2`,fill:`#7f77dd`}),(0,e.jsx)(`rect`,{x:`4`,y:`4`,width:`8`,height:`8`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`5`,y:`3`,width:`6`,height:`1`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`5`,y:`12`,width:`6`,height:`1`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`3`,y:`5`,width:`1`,height:`6`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`12`,y:`5`,width:`1`,height:`6`,fill:`#1a1828`}),(0,e.jsx)(`rect`,{x:`6`,y:`6`,width:`4`,height:`4`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`2`,height:`1`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`7`,y:`10`,width:`2`,height:`1`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`5`,y:`7`,width:`1`,height:`2`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`10`,y:`7`,width:`1`,height:`2`,fill:`#4a44aa`}),(0,e.jsx)(`rect`,{x:`7`,y:`7`,width:`2`,height:`2`,fill:`#c8c0ff`})]})}function A(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`5`,y:`1`,width:`6`,height:`5`,fill:`#e8c87a`}),(0,e.jsx)(`rect`,{x:`7`,y:`6`,width:`2`,height:`1`,fill:`#d4a85a`}),(0,e.jsx)(`rect`,{x:`3`,y:`7`,width:`10`,height:`5`,fill:`#c8873a`}),(0,e.jsx)(`rect`,{x:`1`,y:`7`,width:`2`,height:`4`,fill:`#c8873a`}),(0,e.jsx)(`rect`,{x:`13`,y:`7`,width:`2`,height:`4`,fill:`#c8873a`}),(0,e.jsx)(`rect`,{x:`4`,y:`12`,width:`3`,height:`3`,fill:`#8a5c2a`}),(0,e.jsx)(`rect`,{x:`9`,y:`12`,width:`3`,height:`3`,fill:`#8a5c2a`})]})}function j(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`2`,y:`1`,width:`3`,height:`4`,fill:`#c8a060`}),(0,e.jsx)(`rect`,{x:`11`,y:`1`,width:`3`,height:`4`,fill:`#c8a060`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`1`,height:`2`,fill:`#e8886a`}),(0,e.jsx)(`rect`,{x:`12`,y:`2`,width:`1`,height:`2`,fill:`#e8886a`}),(0,e.jsx)(`rect`,{x:`3`,y:`4`,width:`10`,height:`6`,fill:`#c8a060`}),(0,e.jsx)(`rect`,{x:`5`,y:`8`,width:`6`,height:`3`,fill:`#d4b070`}),(0,e.jsx)(`rect`,{x:`7`,y:`8`,width:`2`,height:`1`,fill:`#5a3020`}),(0,e.jsx)(`rect`,{x:`4`,y:`6`,width:`3`,height:`2`,fill:`#e8a020`}),(0,e.jsx)(`rect`,{x:`9`,y:`6`,width:`3`,height:`2`,fill:`#e8a020`}),(0,e.jsx)(`rect`,{x:`5`,y:`6`,width:`1`,height:`2`,fill:`#1a1008`}),(0,e.jsx)(`rect`,{x:`10`,y:`6`,width:`1`,height:`2`,fill:`#1a1008`}),(0,e.jsx)(`rect`,{x:`3`,y:`11`,width:`10`,height:`4`,fill:`#a87840`}),(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`2`,height:`3`,fill:`#a87840`}),(0,e.jsx)(`rect`,{x:`13`,y:`11`,width:`2`,height:`3`,fill:`#a87840`})]})}function M(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`3`,y:`1`,width:`2`,height:`5`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`11`,y:`1`,width:`2`,height:`5`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`2`,y:`1`,width:`2`,height:`2`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`12`,y:`1`,width:`2`,height:`2`,fill:`#cc3030`}),(0,e.jsx)(`rect`,{x:`3`,y:`5`,width:`10`,height:`6`,fill:`#7a2a2a`}),(0,e.jsx)(`rect`,{x:`4`,y:`7`,width:`3`,height:`2`,fill:`#ff2020`}),(0,e.jsx)(`rect`,{x:`9`,y:`7`,width:`3`,height:`2`,fill:`#ff2020`}),(0,e.jsx)(`rect`,{x:`5`,y:`7`,width:`1`,height:`2`,fill:`#ff8080`}),(0,e.jsx)(`rect`,{x:`10`,y:`7`,width:`1`,height:`2`,fill:`#ff8080`}),(0,e.jsx)(`rect`,{x:`6`,y:`11`,width:`1`,height:`2`,fill:`#f0e8d0`}),(0,e.jsx)(`rect`,{x:`9`,y:`11`,width:`1`,height:`2`,fill:`#f0e8d0`}),(0,e.jsx)(`rect`,{x:`2`,y:`12`,width:`12`,height:`4`,fill:`#5a1a1a`}),(0,e.jsx)(`rect`,{x:`1`,y:`12`,width:`2`,height:`3`,fill:`#5a1a1a`}),(0,e.jsx)(`rect`,{x:`13`,y:`12`,width:`2`,height:`3`,fill:`#5a1a1a`})]})}function N(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`4`,y:`1`,width:`8`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`3`,y:`2`,width:`10`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`3`,y:`3`,width:`2`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`11`,y:`3`,width:`2`,height:`1`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`5`,y:`4`,width:`6`,height:`5`,fill:`#f4e4c0`}),(0,e.jsx)(`rect`,{x:`6`,y:`6`,width:`2`,height:`1`,fill:`#6090e0`}),(0,e.jsx)(`rect`,{x:`10`,y:`6`,width:`2`,height:`1`,fill:`#6090e0`}),(0,e.jsx)(`rect`,{x:`1`,y:`9`,width:`4`,height:`5`,fill:`#f0f0f8`}),(0,e.jsx)(`rect`,{x:`11`,y:`9`,width:`4`,height:`5`,fill:`#f0f0f8`}),(0,e.jsx)(`rect`,{x:`1`,y:`9`,width:`2`,height:`3`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`13`,y:`9`,width:`2`,height:`3`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`5`,y:`9`,width:`6`,height:`6`,fill:`#d4c8f0`}),(0,e.jsx)(`rect`,{x:`4`,y:`10`,width:`1`,height:`4`,fill:`#d4c8f0`}),(0,e.jsx)(`rect`,{x:`11`,y:`10`,width:`1`,height:`4`,fill:`#d4c8f0`})]})}function P(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`6`,y:`1`,width:`4`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`5`,y:`3`,width:`6`,height:`4`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`4`,y:`7`,width:`8`,height:`4`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`5`,y:`11`,width:`6`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`4`,y:`13`,width:`2`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`7`,y:`13`,width:`2`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`10`,y:`13`,width:`2`,height:`2`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`4`,height:`3`,fill:`#b0eff6`}),(0,e.jsx)(`rect`,{x:`7`,y:`3`,width:`2`,height:`1`,fill:`#b0eff6`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`2`,height:`2`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`9`,y:`7`,width:`2`,height:`2`,fill:`#ffffff`}),(0,e.jsx)(`rect`,{x:`7`,y:`8`,width:`1`,height:`1`,fill:`#66d9e8`}),(0,e.jsx)(`rect`,{x:`10`,y:`8`,width:`1`,height:`1`,fill:`#66d9e8`})]})}function F(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`3`,height:`4`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`8`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`12`,y:`4`,width:`3`,height:`11`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`1`,y:`15`,width:`14`,height:`1`,fill:`#5a5a6a`}),(0,e.jsx)(`rect`,{x:`1`,y:`8`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`3`,y:`10`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`2`,y:`10`,width:`1`,height:`1`,fill:`#e6db74`})]})}function I(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`3`,height:`4`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`8`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`12`,y:`4`,width:`3`,height:`11`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`1`,y:`15`,width:`14`,height:`1`,fill:`#5a5a6a`}),(0,e.jsx)(`rect`,{x:`6`,y:`4`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`9`,y:`4`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`7`,y:`5`,width:`2`,height:`1`,fill:`#e6db74`})]})}function L(){return(0,e.jsxs)(`svg`,{viewBox:`0 0 16 16`,xmlns:`http://www.w3.org/2000/svg`,children:[(0,e.jsx)(`rect`,{x:`1`,y:`11`,width:`3`,height:`4`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`6`,y:`7`,width:`4`,height:`8`,fill:`#4a4a5a`}),(0,e.jsx)(`rect`,{x:`12`,y:`4`,width:`3`,height:`11`,fill:`#cfd8e2`}),(0,e.jsx)(`rect`,{x:`1`,y:`15`,width:`14`,height:`1`,fill:`#5a5a6a`}),(0,e.jsx)(`rect`,{x:`13`,y:`1`,width:`1`,height:`2`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`14`,y:`1`,width:`1`,height:`3`,fill:`#e6db74`}),(0,e.jsx)(`rect`,{x:`13`,y:`3`,width:`1`,height:`1`,fill:`#e6db74`})]})}var R={sword:g,staff:v,bow:_,katar:y,book:b,hammer:x,neutral:S,earth:C,wind:w,water:T,fire:E,light:O,dark:D,void:k,human:A,beast:j,demon:M,angel:N,spirit:P,small:F,medium:I,large:L},z=Object.keys(R),B=Object.assign(function({name:t=`sword`,size:n=22,style:r}){let i=R[t]||g;return(0,e.jsx)(`span`,{style:{display:`inline-flex`,alignItems:`center`,justifyContent:`center`,width:n,height:n,imageRendering:`pixelated`,flexShrink:0,...r},children:(0,e.jsx)(i,{})})},{icons:z}),V=B;function H(){return(0,e.jsx)(`svg`,{viewBox:`0 0 12 8`,width:12,height:12,"aria-hidden":`true`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`,children:(0,e.jsx)(`polyline`,{points:`1,1.5 6,6.5 11,1.5`})})}function U({href:n,label:r,className:i,children:a,...o}){return(0,e.jsx)(`a`,{...o,href:n,"aria-label":r,className:t(`ns-section-arrow`,i),children:a||(0,e.jsx)(H,{})})}exports.Button=s,exports.FeatureCard=c,exports.HUDBar=d,exports.HUDDivider=f,exports.HUDIcon=V,exports.HUDLabel=h,exports.QuestCard=l,exports.RPGIcon=B,exports.SectionArrow=U,exports.icons=z;

package/dist/index.d.cts

@@ -0,0 +1 @@
+export * from './components/react/index.js';

package/dist/index.d.ts

@@ -1,18 +1 @@
-export { Button, type ButtonProps } from './components/buttons/Button';
-export { FeatureCard, type FeatureCardProps } from './components/cards/FeatureCard';
-export { QuestCard, type QuestCardProps } from './components/cards/QuestCard';
-export { HUDBar, type HUDBarProps } from './components/hud/HUDBar';
-export { HUDDivider, type HUDDividerProps } from './components/hud/HUDDivider';
-export { HUDLabel, type HUDLabelProps } from './components/hud/HUDLabel';
-export {
-  RPGIcon,
-  HUDIcon,
-  icons,
-  type RPGIconElement,
-  type RPGIconName,
-  type RPGIconProps,
-  type RPGIconRace,
-  type RPGIconSize,
-  type RPGIconWeapon,
-} from './components/icons/RPGIcon';
-export { SectionArrow, type SectionArrowProps } from './components/navigation/SectionArrow';
+export * from './components/react/index.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-//#region components/shared/styles.js
+//#region components/shared/styles.ts
 var n = (...e) => e.filter(Boolean).join(" ");
 function r(e, t) {
 	return t ? {
@@ -61,7 +61,7 @@ function c({ variant: t = "play", size: r = "md", href: i, onClick: a, children:
 	});
 }
 //#endregion
-//#region components/cards/FeatureCard.jsx
+//#region components/cards/FeatureCard.tsx
 function l({ icon: a, title: o, body: s, tag: c, iconColor: l = i.gold, className: u, style: d, ...f }) {
 	return /* @__PURE__ */ t("li", {
 		...f,
@@ -88,7 +88,7 @@ function l({ icon: a, title: o, body: s, tag: c, iconColor: l = i.gold, classNam
 	});
 }
 //#endregion
-//#region components/cards/QuestCard.jsx
+//#region components/cards/QuestCard.tsx
 function u({ gate: r, title: i, body: o, status: s = "locked", className: c, ...l }) {
 	let u = a[s] || a.locked;
 	return /* @__PURE__ */ t("li", {
@@ -118,11 +118,16 @@ function u({ gate: r, title: i, body: o, status: s = "locked", className: c, ...
 	});
 }
 //#endregion
-//#region components/hud/HUDBar.jsx
+//#region components/hud/HUDBar.tsx
 var d = "var(--ns-font-pixel, \"Press Start 2P\", monospace)";
-function f({ value: n = 40, max: r = 40, fillColor: i = "var(--hud-hp-fill, #4caf73)", trackColor: a = "var(--hud-track, rgba(255, 255, 255, 0.10))", height: o = 14, style: s }) {
-	let c = r > 0 ? Math.max(0, Math.min(100, n / r * 100)) : 0;
+function f({ value: n = 40, max: r = 40, fillColor: i = "var(--hud-hp-fill, #4caf73)", trackColor: a = "var(--hud-track, rgba(255, 255, 255, 0.10))", height: o = 14, style: s, role: c = "meter", ...l }) {
+	let u = r > 0 ? Math.max(0, Math.min(100, n / r * 100)) : 0;
 	return /* @__PURE__ */ t("div", {
+		...l,
+		role: c,
+		"aria-valuemin": 0,
+		"aria-valuemax": r,
+		"aria-valuenow": Math.max(0, Math.min(n, r)),
 		style: {
 			position: "relative",
 			background: a,
@@ -134,7 +139,7 @@ function f({ value: n = 40, max: r = 40, fillColor: i = "var(--hud-hp-fill, #4ca
 		children: [/* @__PURE__ */ e("div", { style: {
 			position: "absolute",
 			inset: 0,
-			width: `${c}%`,
+			width: `${u}%`,
 			background: i,
 			transition: "width .35s ease-out"
 		} }), /* @__PURE__ */ t("span", {
@@ -157,27 +162,33 @@ function f({ value: n = 40, max: r = 40, fillColor: i = "var(--hud-hp-fill, #4ca
 	});
 }
 //#endregion
-//#region components/hud/HUDDivider.jsx
-function p({ direction: t = "vertical", color: n = "var(--ns-line)", style: r }) {
-	let i = t === "vertical";
-	return /* @__PURE__ */ e("div", { style: {
-		width: i ? "1px" : "100%",
-		height: i ? "100%" : "1px",
-		background: n,
-		flexShrink: 0,
-		alignSelf: "stretch",
-		...r
-	} });
+//#region components/hud/HUDDivider.tsx
+function p({ direction: t = "vertical", color: n = "var(--ns-line)", style: r, role: i = "separator", ...a }) {
+	let o = t === "vertical";
+	return /* @__PURE__ */ e("div", {
+		...a,
+		role: i,
+		"aria-orientation": t,
+		style: {
+			width: o ? "1px" : "100%",
+			height: o ? "100%" : "1px",
+			background: n,
+			flexShrink: 0,
+			alignSelf: "stretch",
+			...r
+		}
+	});
 }
 //#endregion
-//#region components/hud/HUDLabel.jsx
+//#region components/hud/HUDLabel.tsx
 var m = "var(--ns-font-pixel, \"Press Start 2P\", monospace)", h = {
 	left: "flex-start",
 	center: "center",
 	right: "flex-end"
 };
-function g({ text: t = "Label", align: n = "left", scale: r = 1, color: i = "var(--ns-ink)", fontSize: a = 5, style: o }) {
+function g({ text: t = "Label", align: n = "left", scale: r = 1, color: i = "var(--ns-ink)", fontSize: a = 5, style: o, ...s }) {
 	return /* @__PURE__ */ e("div", {
+		...s,
 		style: {
 			display: "flex",
 			alignItems: "center",
@@ -197,7 +208,7 @@ function g({ text: t = "Label", align: n = "left", scale: r = 1, color: i = "var
 	});
 }
 //#endregion
-//#region components/icons/RPGIcon.jsx
+//#region components/icons/RPGIcon.tsx
 function _() {
 	return /* @__PURE__ */ t("svg", {
 		viewBox: "0 0 16 16",
@@ -1936,8 +1947,7 @@ var z = {
 	small: I,
 	medium: L,
 	large: R
-}, B = Object.keys(z);
-function V({ name: t = "sword", size: n = 22, style: r }) {
+}, B = Object.keys(z), V = Object.assign(function({ name: t = "sword", size: n = 22, style: r }) {
 	let i = z[t] || _;
 	return /* @__PURE__ */ e("span", {
 		style: {
@@ -1952,11 +1962,9 @@ function V({ name: t = "sword", size: n = 22, style: r }) {
 		},
 		children: /* @__PURE__ */ e(i, {})
 	});
-}
-V.icons = B;
-var H = V;
+}, { icons: B }), H = V;
 //#endregion
-//#region components/navigation/SectionArrow.jsx
+//#region components/navigation/SectionArrow.tsx
 function U() {
 	return /* @__PURE__ */ e("svg", {
 		viewBox: "0 0 12 8",

package/dist/tailwind/preset.d.cts

@@ -0,0 +1,4 @@
+import type { Config } from 'tailwindcss';
+
+declare const preset: Config;
+export = preset;

package/dist/tailwind/preset.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from 'tailwindcss';
+
+declare const preset: Config;
+export = preset;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noobsociety/nsds",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "NoobSociety Design System — Monokai dark tokens, Tailwind preset, and pixel-art React components",
   "keywords": [
     "design-system",
@@ -13,17 +13,23 @@
   "author": "NoobSociety",
   "license": "MIT",
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && tsc -p tsconfig.build.json && node scripts/prepare-types.mjs",
     "build:storybook": "storybook build --disable-telemetry",
     "changeset": "changeset",
     "changeset:publish": "changeset publish",
     "changeset:version": "changeset version && node scripts/release-changelog.mjs",
-    "check": "npm run build && npm run check:package && npm run check:types && npm run test:smoke",
+    "check": "npm run build && npm run check:package && npm run check:exports && npm run check:install && npm run check:types && npm run check:docs && npm run test:components && npm run test:visual && npm run test:smoke",
+    "check:docs": "npm run docs:api && git diff --exit-code docs/reference/api",
+    "check:exports": "publint run --pack npm --level warning && attw --pack . --profile node16 --entrypoints . ./react ./tailwind --format table --no-emoji",
+    "check:install": "node scripts/check-install.mjs",
     "check:package": "node scripts/check-package.mjs",
     "check:types": "tsc --noEmit",
+    "docs:api": "typedoc --options typedoc.json",
     "prepublishOnly": "npm run build",
     "storybook": "storybook dev -p 6006 --disable-telemetry",
     "test": "npm run check",
+    "test:components": "vitest run",
+    "test:visual": "playwright test",
     "test:smoke": "node scripts/smoke-imports.mjs",
     "release:dry-run": "npm pack --dry-run"
   },
@@ -56,16 +62,35 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./react": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./tailwind": {
+      "import": {
+        "types": "./dist/tailwind/preset.d.ts",
+        "default": "./dist/tailwind/preset.js"
+      },
+      "require": {
+        "types": "./dist/tailwind/preset.d.cts",
+        "default": "./dist/tailwind/preset.js"
+      }
     },
-    "./tailwind": "./dist/tailwind/preset.js",
     "./styles": "./dist/styles.css",
     "./styles.css": "./dist/styles.css",
     "./tokens/*": "./dist/tokens/*",
@@ -78,16 +103,25 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.3",
     "@changesets/cli": "^2.31.0",
+    "@playwright/test": "^1.61.0",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
     "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^29.1.1",
+    "publint": "^0.3.21",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "storybook": "^10.4.6",
     "tailwindcss": "^3.0.0",
+    "typedoc": "^0.28.19",
+    "typedoc-plugin-markdown": "^4.12.0",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
   }
 }