@noobsociety/nsds 0.1.2 → 0.2.0

package/dist/tailwind/preset.js

@@ -0,0 +1,144 @@
+/**
+ * NoobSociety Design System — Tailwind CSS preset
+ *
+ * Usage in tailwind.config.js / tailwind.config.ts:
+ *
+ *   import nsdPreset from '@noobsociety/nsds/tailwind';
+ *
+ *   export default {
+ *     presets: [nsdPreset],
+ *     content: ['./src/**\/*.{ts,tsx}'],
+ *   };
+ *
+ * All values reference CSS custom properties so they stay in sync with
+ * styles.css at runtime — change a token once, Tailwind classes update too.
+ */
+
+/** @type {import('tailwindcss').Config} */
+const nsdPreset = {
+  darkMode: ['class', '[data-theme="dark"]'],
+  theme: {
+    extend: {
+
+      /* ── Colors ──────────────────────────────────────────────── */
+      colors: {
+        ns: {
+          /* Surfaces */
+          bg: {
+            0:      'var(--ns-bg-0)',
+            1:      'var(--ns-bg-1)',
+            2:      'var(--ns-bg-2)',
+            glass:  'var(--ns-glass)',
+          },
+          /* Ink */
+          ink: {
+            DEFAULT: 'var(--ns-ink)',
+            dim:     'var(--ns-ink-dim)',
+            faint:   'var(--ns-ink-faint)',
+          },
+          /* Gold — primary accent */
+          gold: {
+            DEFAULT: 'var(--ns-gold)',
+            pale:    'var(--ns-gold-pale)',
+            deep:    'var(--ns-gold-deep)',
+            shadow:  'var(--ns-gold-shadow)',
+            fg:      'var(--ns-gold-btn-fg)',
+          },
+          /* Monokai accents */
+          green:  'var(--ns-green)',
+          cyan:   'var(--ns-cyan)',
+          orange: 'var(--ns-orange)',
+          pink:   'var(--ns-pink)',
+          purple: 'var(--ns-purple)',
+          /* Semantic */
+          accent:  'var(--ns-accent)',
+          line:    'var(--ns-line)',
+        },
+      },
+
+      /* ── Typography ──────────────────────────────────────────── */
+      fontFamily: {
+        body:  ['var(--ns-font-body)',  { fallback: ['system-ui', 'sans-serif'] }],
+        pixel: ['var(--ns-font-pixel)', { fallback: ['monospace'] }],
+      },
+      fontSize: {
+        'ns-xs':   ['var(--ns-text-xs)',   { lineHeight: 'var(--ns-leading-normal)' }],
+        'ns-sm':   ['var(--ns-text-sm)',   { lineHeight: 'var(--ns-leading-normal)' }],
+        'ns-base': ['var(--ns-text-base)', { lineHeight: 'var(--ns-leading-normal)' }],
+        'ns-lg':   ['var(--ns-text-lg)',   { lineHeight: 'var(--ns-leading-snug)'   }],
+        'ns-xl':   ['var(--ns-text-xl)',   { lineHeight: 'var(--ns-leading-snug)'   }],
+        'ns-2xl':  ['var(--ns-text-2xl)',  { lineHeight: 'var(--ns-leading-tight)'  }],
+        'ns-3xl':  ['var(--ns-text-3xl)',  { lineHeight: 'var(--ns-leading-tight)'  }],
+        'ns-4xl':  ['var(--ns-text-4xl)',  { lineHeight: 'var(--ns-leading-tight)'  }],
+      },
+      fontWeight: {
+        'ns-normal':   'var(--ns-weight-normal)',
+        'ns-medium':   'var(--ns-weight-medium)',
+        'ns-semibold': 'var(--ns-weight-semibold)',
+        'ns-bold':     'var(--ns-weight-bold)',
+      },
+      lineHeight: {
+        'ns-tight':   'var(--ns-leading-tight)',
+        'ns-snug':    'var(--ns-leading-snug)',
+        'ns-normal':  'var(--ns-leading-normal)',
+        'ns-relaxed': 'var(--ns-leading-relaxed)',
+      },
+
+      /* ── Spacing ─────────────────────────────────────────────── */
+      spacing: {
+        'ns-1':  'var(--ns-space-1)',
+        'ns-2':  'var(--ns-space-2)',
+        'ns-3':  'var(--ns-space-3)',
+        'ns-4':  'var(--ns-space-4)',
+        'ns-5':  'var(--ns-space-5)',
+        'ns-6':  'var(--ns-space-6)',
+        'ns-8':  'var(--ns-space-8)',
+        'ns-10': 'var(--ns-space-10)',
+        'ns-12': 'var(--ns-space-12)',
+        'ns-16': 'var(--ns-space-16)',
+        'ns-20': 'var(--ns-space-20)',
+      },
+      maxWidth: {
+        'ns-container': 'var(--ns-container)',
+      },
+      height: {
+        'ns-header': 'var(--ns-header-h)',
+      },
+
+      /* ── Border radius ───────────────────────────────────────── */
+      borderRadius: {
+        'ns-sm':   'var(--ns-radius-sm)',
+        'ns-md':   'var(--ns-radius-md)',
+        'ns-lg':   'var(--ns-radius-lg)',
+        'ns-xl':   'var(--ns-radius-xl)',
+        'ns-full': 'var(--ns-radius-full)',
+      },
+
+      /* ── Box shadow ──────────────────────────────────────────── */
+      boxShadow: {
+        'ns-card-hover': 'var(--ns-shadow-card-hover)',
+        'ns-btn':        'var(--ns-shadow-btn)',
+      },
+
+      /* ── Transitions ─────────────────────────────────────────── */
+      transitionDuration: {
+        'ns-fast': 'var(--ns-dur-fast)',
+        'ns-base': 'var(--ns-dur-base)',
+        'ns-slow': 'var(--ns-dur-slow)',
+      },
+      transitionTimingFunction: {
+        'ns-out':    'var(--ns-ease-out)',
+        'ns-spring': 'var(--ns-ease-spring)',
+      },
+
+      /* ── Ring / focus ────────────────────────────────────────── */
+      ringColor: {
+        'ns-focus': 'var(--ns-focus-ring)',
+      },
+    },
+  },
+
+  plugins: [],
+};
+
+module.exports = nsdPreset;

package/{tokens → dist/tokens}/colors.css

@@ -8,10 +8,10 @@
   --ns-glass-2:   rgba(30, 31, 26, 0.60);  /* lighter glass */
   --ns-glass-soft: rgba(30, 31, 26, 0.75); /* subtle card surface */
 
-  --ns-bg-0-rgb: 26 26 22;
-  --ns-bg-1-rgb: 39 40 34;
-  --ns-bg-2-rgb: 50 51 43;
-  --ns-glass-rgb: 30 31 26;
+  --ns-bg-0-rgb: 26 26 22;     /* @kind other */
+  --ns-bg-1-rgb: 39 40 34;      /* @kind other */
+  --ns-bg-2-rgb: 50 51 43;      /* @kind other */
+  --ns-glass-rgb: 30 31 26;     /* @kind other */
 
   /* ── Borders ──────────────────────────────────────────────── */
   --ns-line:        rgba(255, 255, 255, 0.12);
@@ -22,9 +22,9 @@
   --ns-ink:       #f8f8f2;   /* primary text — Monokai foreground */
   --ns-ink-dim:   #a8a28c;   /* secondary text */
   --ns-ink-faint: #75715e;   /* placeholder, captions — Monokai comment */
-  --ns-ink-rgb:       248 248 242;
-  --ns-ink-dim-rgb:   168 162 140;
-  --ns-ink-faint-rgb: 117 113 94;
+  --ns-ink-rgb:       248 248 242;  /* @kind other */
+  --ns-ink-dim-rgb:   168 162 140;  /* @kind other */
+  --ns-ink-faint-rgb: 117 113 94;   /* @kind other */
 
   /* ── Brand yellow (gold) — primary accent ─────────────────── */
   --ns-gold:        #e6db74;
@@ -32,10 +32,10 @@
   --ns-gold-deep:   #cabb50;
   --ns-gold-shadow: #b5a83f;
   --ns-gold-btn-fg: #1c1c17; /* text on gold buttons */
-  --ns-gold-rgb:        230 219 116;
-  --ns-gold-pale-rgb:   244 240 153;
-  --ns-gold-deep-rgb:   202 187 80;
-  --ns-gold-shadow-rgb: 181 168 63;
+  --ns-gold-rgb:        230 219 116;  /* @kind other */
+  --ns-gold-pale-rgb:   244 240 153;  /* @kind other */
+  --ns-gold-deep-rgb:   202 187 80;   /* @kind other */
+  --ns-gold-shadow-rgb: 181 168 63;   /* @kind other */
 
   /* ── Monokai semantic accents ─────────────────────────────── */
   --ns-green:       #a6e22e;  /* "Holds" / success */
@@ -46,14 +46,14 @@
   --ns-orange-deep: #c96f00;
   --ns-pink:        #f92672;  /* danger / highlight */
   --ns-purple:      #ae81ff;  /* decorative */
-  --ns-green-rgb:       166 226 46;
-  --ns-green-deep-rgb:  127 184 30;
-  --ns-cyan-rgb:        102 217 232;
-  --ns-cyan-deep-rgb:   91 200 215;
-  --ns-orange-rgb:      253 151 31;
-  --ns-orange-deep-rgb: 201 111 0;
-  --ns-pink-rgb:        249 38 114;
-  --ns-purple-rgb:      174 129 255;
+  --ns-green-rgb:       166 226 46;   /* @kind other */
+  --ns-green-deep-rgb:  127 184 30;   /* @kind other */
+  --ns-cyan-rgb:        102 217 232;  /* @kind other */
+  --ns-cyan-deep-rgb:   91 200 215;   /* @kind other */
+  --ns-orange-rgb:      253 151 31;   /* @kind other */
+  --ns-orange-deep-rgb: 201 111 0;    /* @kind other */
+  --ns-pink-rgb:        249 38 114;   /* @kind other */
+  --ns-purple-rgb:      174 129 255;  /* @kind other */
 
   /* ── Semantic aliases ─────────────────────────────────────── */
   --ns-surface-page:   var(--ns-bg-1);
@@ -68,6 +68,12 @@
   --ns-status-building: var(--ns-orange);
   --ns-status-planned:  var(--ns-cyan);
   --ns-status-later:    var(--ns-ink-faint);
+
+  /* ── Quest card status pill backgrounds ──────────────────────── */
+  --ns-quest-pill-done:    rgba(166, 226, 46, 0.10);
+  --ns-quest-pill-active:  rgba(253, 151, 31, 0.12);
+  --ns-quest-pill-planned: rgba(102, 217, 232, 0.12);
+  --ns-quest-pill-locked:  rgba(255, 255, 255, 0.05);
   --ns-focus-ring:      rgba(230, 219, 116, 0.35);
   --ns-selection-bg:    rgba(249, 38, 114, 0.28);
 }

package/dist/tokens/hud.css

@@ -0,0 +1,133 @@
+/* NoobSociety — HUD-specific tokens
+   Game chrome (`--hud-*`) that extend the base `--ns-*` palette.
+   These are the design-system source of truth for all in-game HUD styling.
+   The --win-* light-modal surface is intentionally excluded (dark-only until redesigned).
+
+   Alias rule: where an --hud-* concept maps exactly to an --ns-* token, the hud
+   token is a var() alias so both names work and the game can migrate incrementally.
+   Where the HUD needs a distinct value (e.g. lighter glass over the world canvas,
+   vital bar colours that have no homepage analogue) the token is defined independently. */
+
+:root {
+
+  /* ── Fonts ─────────────────────────────────────────────────── */
+  --hud-font:    var(--ns-font-pixel);  /* chrome labels, tab caps, key glyphs */
+  --hud-font-ui: var(--ns-font-body);  /* draggable windows, dialogue, inventory */
+
+  /* ── Accent / currency ─────────────────────────────────────── */
+  /* DS is source of truth: game migrates from #ffe066 → --ns-gold (#e6db74). */
+  --hud-gold:    var(--ns-gold);
+  --hud-talents: var(--ns-gold);        /* Talents wallet number */
+
+  /* ── Text ───────────────────────────────────────────────────── */
+  --hud-text:     var(--ns-ink);
+  --hud-text-dim: var(--ns-ink-dim);
+  --hud-shadow:   none;                  /* no text-shadow at HUD pixel sizes */
+  --hud-bar-shadow: none;
+
+  /* ── Surfaces ───────────────────────────────────────────────── */
+  /* Game chrome glass: lighter than --ns-glass so the world reads through. */
+  --hud-glass:      rgba(12, 16, 22, 0.62);
+  --hud-glass-blur: 6px;
+  --hud-bg:         rgba(0, 0, 0, 0.35);
+  --hud-bg-strong:  rgba(0, 0, 0, 0.72);
+  --hud-track:      rgba(255, 255, 255, 0.10);   /* bar + XP track background */
+  --hud-line:       rgba(255, 255, 255, 0.18);
+  --hud-avatar-bg:  rgba(72, 86, 116, 0.82);
+
+  /* ── Input / selection ─────────────────────────────────────── */
+  --hud-input-bg:  rgba(10, 14, 20, 0.55);
+  --hud-sel-bg:    var(--ns-ink);
+  --hud-sel-fg:    var(--ns-bg-1);
+
+  /* ── Elements (identity.ts ELEMENT_DISPLAY) ───────────────────── */
+  /* ── Elements (identity.ts ELEMENT_DISPLAY exact colors) ─────────── */
+  --hud-el-neutral: #888780;
+  --hud-el-earth:   #639922;
+  --hud-el-wind:    #5dcaa5;
+  --hud-el-water:   #378add;
+  --hud-el-fire:    #ba7517;
+  --hud-el-light:   #fac775;
+  --hud-el-dark:    #888780;
+  --hud-el-void:    #7f77dd;
+
+  /* ── Vital bars ─────────────────────────────────────────────── */
+  /* HP — green track, bright fill, low-HP red warning */
+  --hud-hp:         var(--hud-track);  /* track background */
+  --hud-hp-fill:    #4caf73;   /* normal fill */
+  --hud-hp-low:     #cc3333;   /* fill under 30% → also pulses */
+  --hud-hp-label:   #88ee88;   /* "HP" label text in classic bar */
+  /* MP — blue track, bright fill, low-MP muted */
+  --hud-mp:         var(--hud-track);  /* track background (internal id: sp) */
+  --hud-mp-fill:    #5b9bd5;   /* normal fill */
+  --hud-mp-low:     #4f7fc0;   /* fill under 30% */
+  --hud-mp-label:   #8888ee;   /* "MP"/"SP" label text */
+
+  /* ── XP tracks ──────────────────────────────────────────────── */
+  /* Three independent mastery tracks: Base (BXP), Tech (TXP), Weapon (WXP). */
+  --hud-xp-base:          #4488cc;   /* BXP fill — steel blue */
+  --hud-xp-base-rgb:      68 136 204;  /* @kind other */
+  --hud-xp-base-label:    #88aaee;   /* BXP label */
+  --hud-xp-job:           #8855cc;   /* TXP fill — purple */
+  --hud-xp-job-rgb:       136 85 204;  /* @kind other */
+  --hud-xp-job-label:     #aa88ee;   /* TXP label */
+  --hud-xp-weapon:        #cc8844;   /* WXP fill — amber */
+  --hud-xp-weapon-rgb:    204 136 68;  /* @kind other */
+  --hud-xp-weapon-label:  #eeaa66;   /* WXP label */
+
+  /* Progress bars in the player card detail (Marks / Craft). */
+  --hud-marks-track:  #3a2e6e;
+  --hud-marks-fill:   #7f77dd;
+  --hud-craft-track:  #4a2e0a;
+  --hud-craft-fill:   #ba7517;
+
+  /* ── Chat log channel tones ─────────────────────────────────── */
+  /* Logs tab (battle narration) vs Chat tab (social stream). */
+  --hud-tone-battle: #ff8888;   /* combat hits, defeat lines */
+  --hud-tone-world:  #88ccff;   /* map announcements, world events */
+  --hud-tone-gain:   #aaffaa;   /* EXP / loot / discovery / rewards */
+  --hud-tone-say:    #cccccc;   /* player speech, system messages */
+
+  /* ── Status / buffs ─────────────────────────────────────────── */
+  --hud-danger:  var(--ns-pink);   /* death zone, error states */
+  --hud-buff:    var(--ns-green);  /* positive effect glyphs */
+  --hud-debuff:  #ee6666;          /* negative effect glyphs */
+
+  /* ── Minimap ────────────────────────────────────────────────── */
+  --hud-minimap-bg:   #091509;                      /* canvas fill */
+  --hud-minimap-edge: #2a4a2a;                      /* outer diamond stroke */
+  --hud-minimap-player: #ffffff;                    /* player dot */
+  --hud-minimap-enemy:  #ff5a5a;                    /* aggressive mob dot */
+  --hud-minimap-npc:    #f4c542;                    /* interactable / NPC dot */
+  --hud-minimap-dest:   var(--ns-cyan);             /* walk-goal diamond */
+
+  /* ── Geometry ───────────────────────────────────────────────── */
+  --hud-radius:    4px;
+  --hud-radius-sm: 2px;
+
+  /* ── Cross-layout geometry (640×360 design space) ───────────── */
+  /* The HUD lives in a 3×3 grid over the 640×360 canvas.
+     Each corner pocket sits inside its cell with 5% padding per axis. */
+  --hud-cross-cell-w: calc(640px / 3); /* @kind other */  /* 213.33px */
+  --hud-cross-cell-h: calc(360px / 3); /* @kind other */  /* 120px */
+  --hud-cross-pad-x:  calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px */
+  /* NOTE: CSS percentage padding always resolves to % of the element WIDTH,
+     so pad-y equals pad-x, not 5% of the cell height. */
+  --hud-cross-pad-y:  calc(var(--hud-cross-cell-w) * 0.05); /* 10.67px — same as pad-x */
+
+  /* ── Inner 8×8 grid cell size (padded pocket ÷ 8) ──────────── */
+  /* The padded pocket is 90% of the cell (5% pad each side). */
+  /* Padded inner area: width = cell-w - 2*pad = 192px, height = cell-h - 2*pad = 98.67px */
+  --hud-grid-cell-w: calc((var(--hud-cross-cell-w) - 2 * var(--hud-cross-pad-x)) / 8); /* @kind spacing */ /* 24px    */
+  --hud-grid-cell-h: calc((var(--hud-cross-cell-h) - 2 * var(--hud-cross-pad-y)) / 8); /* @kind spacing */ /* 12.33px */
+
+  /* ── Minimum interactive element: 2×2 inner grid cells ─────── */
+  /* No HUD element (button, slot, pip row, icon) may be smaller than this.
+     Smaller than 2×2 is invisible at a glance and un-tappable on mobile.
+     At runtime the HUD scales by --hud-scale (~2–3×), so 48×27 design px
+     maps to ~96×54 real px on a typical phone — the 44px mobile floor. */
+  /* Interactive elements only — buttons, slots, icons, cells.
+     Passive elements (bars, dividers, borders) are exempt. */
+  --hud-min-tap-w: calc(var(--hud-grid-cell-w) * 2); /* @kind spacing */ /* 48px   */
+  --hud-min-tap-h: calc(var(--hud-grid-cell-h) * 2); /* @kind spacing */ /* 27px   */
+}

package/{tokens → dist/tokens}/motion.css

@@ -1,19 +1,19 @@
 /* NoobSociety — Motion tokens & keyframes */
 :root {
   /* ── Durations ────────────────────────────────────────────── */
-  --ns-dur-fast:    150ms;
-  --ns-dur-base:    200ms;
-  --ns-dur-slow:    400ms;
-  --ns-dur-xslow:   600ms;
+  --ns-dur-fast:    150ms;  /* @kind other */
+  --ns-dur-base:    200ms;  /* @kind other */
+  --ns-dur-slow:    400ms;  /* @kind other */
+  --ns-dur-xslow:   600ms;  /* @kind other */
 
   /* ── Easings ──────────────────────────────────────────────── */
-  --ns-ease-out:    ease-out;
-  --ns-ease-in-out: ease-in-out;
-  --ns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ns-ease-out:    ease-out;                             /* @kind other */
+  --ns-ease-in-out: ease-in-out;                           /* @kind other */
+  --ns-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* @kind other */
 
   /* ── Transitions (common shorthand) ──────────────────────── */
-  --ns-transition-fast: var(--ns-dur-fast) var(--ns-ease-out);
-  --ns-transition-base: var(--ns-dur-base) var(--ns-ease-out);
+  --ns-transition-fast: var(--ns-dur-fast) var(--ns-ease-out);  /* @kind other */
+  --ns-transition-base: var(--ns-dur-base) var(--ns-ease-out);  /* @kind other */
 }
 
 /* ── Keyframes ────────────────────────────────────────────────── */

package/{tokens → dist/tokens}/spacing.css

@@ -20,20 +20,13 @@
   --ns-space-24:  5.75rem;   /* 92px */
 
   /* ── Fluid layout tokens (viewport-responsive) ────────────────── */
-  /* Container side padding: 16px → 32px */
-  --ns-fluid-container:       clamp(1rem, 4vw, 2rem);
-  /* Section top padding: 40px → 64px */
-  --ns-fluid-section-top:     clamp(2.5rem, 8svh, 4rem);
-  /* Section bottom padding: 64px → 88px */
-  --ns-fluid-section-bottom:  clamp(4rem, 10svh, 5.5rem);
-  /* Card grid gap: 12px → 24px */
-  --ns-fluid-gap-cards:       clamp(0.75rem, 2vw, 1.5rem);
-  /* Card internal padding: 16px → 20px */
-  --ns-fluid-card-pad:        clamp(1rem, 2vw, 1.25rem);
-  /* Hero two-col gap: 24px → 48px */
-  --ns-fluid-hero-gap:        clamp(1.5rem, 4vw, 3rem);
-  /* Footer two-col gap: 32px → 48px */
-  --ns-fluid-footer-gap:      clamp(2rem, 5vw, 3rem);
+  --ns-fluid-container:       clamp(1rem, 4vw, 2rem);          /* @kind spacing */
+  --ns-fluid-section-top:     clamp(2.5rem, 8svh, 4rem);        /* @kind spacing */
+  --ns-fluid-section-bottom:  clamp(4rem, 10svh, 5.5rem);       /* @kind spacing */
+  --ns-fluid-gap-cards:       clamp(0.75rem, 2vw, 1.5rem);      /* @kind spacing */
+  --ns-fluid-card-pad:        clamp(1rem, 2vw, 1.25rem);         /* @kind spacing */
+  --ns-fluid-hero-gap:        clamp(1.5rem, 4vw, 3rem);          /* @kind spacing */
+  --ns-fluid-footer-gap:      clamp(2rem, 5vw, 3rem);            /* @kind spacing */
 
   /* ── Fixed layout ─────────────────────────────────────────────── */
   --ns-container:     1080px;
@@ -60,8 +53,8 @@
   --ns-border-gold:        2px solid var(--ns-gold-deep);
 
   /* ── Blur ─────────────────────────────────────────────────────── */
-  --ns-blur-glass:  blur(8px);
-  --ns-blur-header: blur(12px);
+  --ns-blur-glass:  blur(8px);   /* @kind other */
+  --ns-blur-header: blur(12px);  /* @kind other */
 
   /* ── Component sizing ──────────────────────────────────────────── */
   --ns-icon-slot:    2.625rem; /* 42px */

package/{tokens → dist/tokens}/typography.css

@@ -22,8 +22,8 @@
   --ns-pixel-md:  12px;
   --ns-pixel-lg:  13px;
   --ns-pixel-xl:  1.6rem;    /* hero accent title */
-  --ns-pixel-2xl: clamp(2rem, 1rem + 3vw, 3.5rem);  /* hero title */
-  --ns-title-section: clamp(1.8rem, 1rem + 2vw, 2.4rem);
+  --ns-pixel-2xl: clamp(2rem, 1rem + 3vw, 3.5rem); /* @kind other */
+  --ns-title-section: clamp(1.8rem, 1rem + 2vw, 2.4rem); /* @kind other */
 
   /* ── Line heights ─────────────────────────────────────────── */
   --ns-leading-tight:  1.08;

package/package.json

@@ -1,27 +1,26 @@
 {
   "name": "@noobsociety/nsds",
-  "version": "0.1.2",
-  "description": "NoobSociety Design System: tokens, CSS primitives, React components, MUI theme runtime, assets, and references.",
+  "version": "0.2.0",
+  "description": "NoobSociety Design System — Monokai dark tokens, Tailwind preset, and pixel-art React components",
   "keywords": [
     "design-system",
-    "css",
-    "tokens",
     "react",
-    "mui",
-    "theme",
-    "pixel-art",
     "monokai",
+    "tailwind",
+    "pixel-art",
     "noobsociety"
   ],
   "author": "NoobSociety",
   "license": "MIT",
   "scripts": {
-    "check": "npm run check:package && npm run check:types && npm run test:smoke",
+    "build": "vite build",
+    "check": "npm run build && npm run check:package && npm run check:types && npm run test:smoke",
     "check:package": "node scripts/check-package.mjs",
     "check:types": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
     "test": "npm run check",
     "test:smoke": "node scripts/smoke-imports.mjs",
-    "release:dry-run": "npm publish --dry-run"
+    "release:dry-run": "npm pack --dry-run"
   },
   "repository": {
     "type": "git",
@@ -32,9 +31,10 @@
   },
   "homepage": "https://github.com/noobsociety/nsds#readme",
   "type": "module",
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "style": "./styles.css",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/styles.css",
   "sideEffects": [
     "*.css",
     "**/*.css"
@@ -43,70 +43,42 @@
     "access": "public"
   },
   "files": [
-    "README.md",
+    "dist",
     "CHANGELOG.md",
     "CONTRIBUTING.md",
     "LICENSE",
-    "SECURITY.md",
-    "SKILL.md",
-    "index.js",
-    "index.d.ts",
-    "styles.css",
-    "support.js",
-    "tokens",
-    "components",
-    "mui-theme",
-    "assets",
-    "guidelines",
-    "references",
-    "ui-kits"
+    "SECURITY.md"
   ],
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./react": {
-      "types": "./components/react/index.d.ts",
-      "import": "./components/react/index.js"
-    },
-    "./mui": {
-      "types": "./mui-theme/index.d.ts",
-      "import": "./mui-theme/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
-    "./styles.css": "./styles.css",
-    "./package.json": "./package.json",
-    "./support.js": "./support.js",
-    "./components/primitives.css": "./components/primitives.css",
-    "./tokens/*": "./tokens/*",
-    "./assets/*": "./assets/*",
-    "./guidelines/*": "./guidelines/*",
-    "./references/*": "./references/*",
-    "./ui-kits/*": "./ui-kits/*"
+    "./tailwind": "./dist/tailwind/preset.js",
+    "./styles": "./dist/styles.css",
+    "./styles.css": "./dist/styles.css",
+    "./tokens/*": "./dist/tokens/*",
+    "./primitives": "./dist/components/primitives.css",
+    "./components/primitives.css": "./dist/components/primitives.css",
+    "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11",
-    "@emotion/styled": ">=11",
-    "@mui/material": ">=5",
-    "react": ">=18"
-  },
-  "peerDependenciesMeta": {
-    "@emotion/react": {
-      "optional": true
-    },
-    "@emotion/styled": {
-      "optional": true
-    },
-    "@mui/material": {
-      "optional": true
-    }
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/material": "^9.1.1",
     "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^4.0.0",
     "react": "^19.2.7",
-    "typescript": "^6.0.3"
+    "react-dom": "^19.2.7",
+    "tailwindcss": "^3.0.0",
+    "typescript": "^6.0.3",
+    "vite": "^5.0.0"
   }
 }

package/SKILL.md

@@ -1,18 +0,0 @@
----
-name: noobsociety-design
-description: Use this skill to design and implement NoobSociety interfaces with the NSDS package, including design tokens, CSS primitives, React components, MUI theme source, pixel assets, and reference UI kits.
-user-invocable: true
----
-
-Read `README.md` first, then inspect the relevant tokens, components, assets, guidelines, references, or UI kits for the task.
-
-If creating visual artifacts such as mockups, slides, or prototypes, use the included assets and produce static HTML the user can open. If working in production code, import the package entry points and follow the documented token and component rules.
-
-**Core principles:**
-1. Monokai colors are semantic foregrounds: text, icons, accents, buttons, borders, and status colors.
-2. Dark surfaces are the world canvas: page base, raised surfaces, glass overlays, cards, headers, and footers.
-3. Never reassign a Monokai color to a different semantic role.
-4. The default experience is dark. Do not introduce light mode as the default.
-5. Keep copy direct, short, and playful without becoming corporate.
-
-When the user does not specify an output format, choose the most useful one: static HTML for visual artifacts, package imports for production code, or concise design guidance for review and planning.