@noobsociety/nsds 0.1.2 → 0.2.0

package/dist/index.js

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

package/{styles.css → dist/styles.css}

@@ -8,5 +8,6 @@
 @import './tokens/typography.css';
 @import './tokens/spacing.css';
 @import './tokens/motion.css';
+@import './tokens/hud.css';
 @import './tokens/base.css';
 @import './components/primitives.css';

package/dist/tailwind/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }