@noobsociety/nsds 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# Changelog
+
+All notable changes to NSDS are documented here.
+
+## 0.1.2 - 2026-06-18
+
+### Added
+
+- MIT license and public package metadata.
+- GitHub Actions CI for package validation, smoke imports, and publish dry runs.
+- Repository contribution, security, issue, pull request, and dependency update templates.
+- Package validation scripts for exports, required files, and publish hygiene.
+- React smoke tests for the public component entry points.
+- JavaScript runtime and TypeScript declarations for `@noobsociety/nsds/mui`.
+- TypeScript smoke validation for consumer-facing package imports.
+- Prioritized README roadmap and reference standards for documentation, changelog, versioning, release, and component documentation workflows.
+
+### Changed
+
+- Updated README language for the public npm package and repository.
+- Documented the TypeScript and testing roadmap.
+- Pointed the public MUI export at package-ready JavaScript instead of raw TypeScript source.
+
+## 0.1.1 - 2026-06-18
+
+### Changed
+
+- Published the package as `@noobsociety/nsds`.
+- Updated repository metadata for the public NSDS package.
+
+## 0.1.0 - 2026-06-18
+
+### Added
+
+- Initial NSDS package with tokens, CSS primitives, React components, MUI theme source, assets, guidelines, references, and UI kits.

package/CONTRIBUTING.md

@@ -0,0 +1,34 @@
+# Contributing
+
+NSDS is the NoobSociety Design System. Changes should keep the package small, reusable, and direct.
+
+## Local Setup
+
+```bash
+npm install
+npm run check
+```
+
+## Change Guidelines
+
+- Keep package exports stable unless the release is intentionally breaking.
+- Prefer CSS tokens and shared primitives over one-off styles.
+- Keep React components small and framework-light.
+- Add or update smoke coverage when changing component behavior.
+- Use patch versions for metadata, docs, small fixes, and compatibility work.
+- Use minor versions for new components, tokens, or larger additive behavior.
+
+## Release Checks
+
+Before publishing:
+
+```bash
+npm run check
+npm run release:dry-run
+```
+
+Publish with an npm one-time password when required:
+
+```bash
+npm publish --otp=123456
+```

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 NoobSociety
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,18 +1,22 @@
 # NoobSociety Design System
 
-**NSDS** is the reusable NoobSociety Design System package: design tokens, CSS primitives, React components, MUI theme source, pixel assets, and reference UI kits for building NoobSociety interfaces.
+[![CI](https://github.com/noobsociety/nsds/actions/workflows/ci.yml/badge.svg)](https://github.com/noobsociety/nsds/actions/workflows/ci.yml)
+[![npm](https://img.shields.io/npm/v/@noobsociety/nsds.svg)](https://www.npmjs.com/package/@noobsociety/nsds)
+[![License: MIT](https://img.shields.io/badge/license-MIT-2ea44f.svg)](LICENSE)
+
+**NSDS** is the reusable NoobSociety Design System package: design tokens, CSS primitives, React components, MUI theme runtime, pixel assets, and reference UI kits for building NoobSociety interfaces.
 
 The system is built around a simple rule: **Monokai colors are semantic foregrounds, dark surfaces are the world canvas.**
 
 ## Install
 
-Install from npm after publish:
+Install from npm:
 
 ```bash
 npm install @noobsociety/nsds
 ```
 
-Use a local workspace package before publish:
+Use a local workspace package while developing against this repository:
 
 ```json
 {
@@ -50,13 +54,19 @@ import '@noobsociety/nsds/tokens/colors.css';
 import logoUrl from '@noobsociety/nsds/assets/logo.png';
 ```
 
-Use the MUI theme in TypeScript-aware app bundlers:
+Install MUI peer dependencies before using the MUI entry:
+
+```bash
+npm install @mui/material @emotion/react @emotion/styled
+```
+
+Use the MUI theme in app shells:
 
-```ts
+```jsx
 import { NSThemeProvider, theme, NS } from '@noobsociety/nsds/mui';
 ```
 
-The MUI entry currently exports source TypeScript. Add a build step before publishing to consumers that require plain JavaScript MUI runtime files.
+The MUI entry ships JavaScript runtime files and TypeScript declarations. The original TypeScript source stays in `mui-theme/` for reference and future migration work.
 
 ## Package Exports
 
@@ -64,7 +74,7 @@ The MUI entry currently exports source TypeScript. Add a build step before publi
 |---|---|
 | `@noobsociety/nsds` | Root React component entry |
 | `@noobsociety/nsds/react` | React components |
-| `@noobsociety/nsds/mui` | MUI theme source |
+| `@noobsociety/nsds/mui` | MUI theme runtime and types |
 | `@noobsociety/nsds/styles.css` | Full CSS entry |
 | `@noobsociety/nsds/package.json` | Package metadata |
 | `@noobsociety/nsds/components/primitives.css` | Component primitive classes only |
@@ -208,15 +218,46 @@ Status mapping:
 | `components/buttons/` | Button component, types, prompt, specimen |
 | `components/cards/` | FeatureCard and QuestCard components, types, prompts, specimens |
 | `components/navigation/` | SectionArrow component, types, specimen |
-| `mui-theme/` | MUI theme source and examples |
+| `mui-theme/` | MUI theme runtime, TypeScript source, and examples |
 | `assets/` | Logo, sprites, and world imagery |
 | `guidelines/` | Visual specimen cards |
 | `references/` | Polished `.dc.html` references |
 | `ui-kits/` | Complete UI kits |
 | `SKILL.md` | Agent skill definition |
 
+## Development
+
+Run the package checks before publishing:
+
+```bash
+npm install
+npm run check
+npm run release:dry-run
+```
+
+Use patch versions for public package metadata or documentation polish. Use minor versions for new components, tokens, or breaking-adjacent behavior.
+
+## Roadmap
+
+Priority order:
+
+1. Move the current JavaScript runtime to first-class TypeScript source with generated JavaScript and declaration output.
+2. Add component tests for class names, variants, invalid props, and accessibility attributes.
+3. Add package linting for npm exports, types, and install behavior.
+4. Add component documentation with live examples.
+5. Add visual regression coverage for specimen cards and UI kits.
+
+## Reference Standards
+
+- README quality: [Make a README](https://www.makeareadme.com/)
+- Changelog format: [Keep a Changelog](https://keepachangelog.com/)
+- Versioning: [Semantic Versioning](https://semver.org/)
+- Release workflow: [Changesets](https://github.com/changesets/changesets)
+- Component documentation: [Storybook](https://storybook.js.org/)
+- License guidance: [Choose a License](https://choosealicense.com/)
+
 ## Repository
 
 Source repository: `https://github.com/noobsociety/nsds`
 
-The current package is ready for local reuse and npm publication as `@noobsociety/nsds@0.1.1`. License is intentionally unset until a license is chosen.
+The current package is public on npm as `@noobsociety/nsds`. NSDS is released under the MIT license.

package/SECURITY.md

@@ -0,0 +1,11 @@
+# Security
+
+NSDS is a design system package, but security issues can still happen through package metadata, published assets, examples, or dependency changes.
+
+Please report security issues through GitHub Security Advisories for this repository when available. Avoid opening a public issue for a vulnerability until it has been reviewed.
+
+Supported release line:
+
+| Version | Supported |
+|---|---|
+| `0.x` | Yes |

package/mui-theme/ThemeProvider.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+
+import { theme } from './theme.js';
+
+export function NSThemeProvider({ children }) {
+  return React.createElement(
+    ThemeProvider,
+    { theme },
+    React.createElement(CssBaseline),
+    children,
+  );
+}

package/mui-theme/index.d.ts

@@ -0,0 +1,49 @@
+import type { ReactElement, ReactNode } from 'react';
+import type { Theme } from '@mui/material/styles';
+
+export declare const NS: {
+  readonly bg0: '#1a1a16';
+  readonly bg1: '#272822';
+  readonly bg2: '#32332b';
+  readonly glass: 'rgba(30, 31, 26, 0.88)';
+  readonly glass2: 'rgba(30, 31, 26, 0.60)';
+  readonly line: 'rgba(255, 255, 255, 0.12)';
+  readonly lineStr: 'rgba(255, 255, 255, 0.22)';
+  readonly ink: '#f8f8f2';
+  readonly inkDim: '#a8a28c';
+  readonly inkFaint: '#75715e';
+  readonly gold: '#e6db74';
+  readonly goldPale: '#f4f099';
+  readonly goldDeep: '#cabb50';
+  readonly goldShadow: '#b5a83f';
+  readonly goldBtnFg: '#1c1c17';
+  readonly green: '#a6e22e';
+  readonly greenDeep: '#7fb81e';
+  readonly orange: '#fd971f';
+  readonly orangeDeep: '#c96f00';
+  readonly cyan: '#66d9e8';
+  readonly cyanDeep: '#5bc8d7';
+  readonly pink: '#f92672';
+  readonly purple: '#ae81ff';
+};
+
+export type NSTokens = typeof NS;
+
+declare module '@mui/material/styles' {
+  interface Palette {
+    ns: NSTokens;
+  }
+
+  interface PaletteOptions {
+    ns?: NSTokens;
+  }
+}
+
+export declare const theme: Theme;
+export default theme;
+
+export interface NSThemeProviderProps {
+  children?: ReactNode;
+}
+
+export declare function NSThemeProvider(props: NSThemeProviderProps): ReactElement;

package/mui-theme/index.js

@@ -0,0 +1,2 @@
+export { default, NS, theme } from './theme.js';
+export { NSThemeProvider } from './ThemeProvider.js';

package/mui-theme/theme.js

@@ -0,0 +1,594 @@
+/**
+ * NoobSociety — MUI Theme
+ *
+ * Faithfully maps the Monokai dark design system to Material UI v5+.
+ *
+ * Usage:
+ *   import { theme } from './theme';
+ *   <ThemeProvider theme={theme}><CssBaseline />{children}</ThemeProvider>
+ *
+ * Fonts must be loaded separately — add to your index.html or _document.tsx:
+ *   <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+ */
+
+import { createTheme, alpha } from '@mui/material/styles';
+
+// ── Monokai foregrounds ────────────────────────────────────────────
+// Each color has a single fixed semantic role. Never reassign.
+export const NS = {
+  // Backgrounds (dark canvas — not Monokai colors)
+  bg0:     '#1a1a16', // deepest — footer, drawer
+  bg1:     '#272822', // page base
+  bg2:     '#32332b', // raised surfaces, input fills
+  glass:   'rgba(30, 31, 26, 0.88)',
+  glass2:  'rgba(30, 31, 26, 0.60)',
+  line:    'rgba(255, 255, 255, 0.12)',
+  lineStr: 'rgba(255, 255, 255, 0.22)',
+
+  // Monokai foregrounds
+  ink:          '#f8f8f2',  // primary text
+  inkDim:       '#a8a28c',  // secondary text
+  inkFaint:     '#75715e',  // muted / comment grey
+
+  // Accent palette — semantic, never reassign
+  gold:         '#e6db74',  // primary accent: wordmark, CTAs, eyebrows
+  goldPale:     '#f4f099',  // hover state of gold
+  goldDeep:     '#cabb50',  // gold border
+  goldShadow:   '#b5a83f',  // gold button press shadow
+  goldBtnFg:    '#1c1c17',  // text on gold backgrounds
+
+  green:        '#a6e22e',  // HOLDS / success / live
+  greenDeep:    '#7fb81e',
+
+  orange:       '#fd971f',  // BUILDING / in-progress
+  orangeDeep:   '#c96f00',
+
+  cyan:         '#66d9e8',  // PLANNED / info
+  cyanDeep:     '#5bc8d7',
+
+  pink:         '#f92672',  // highlight / panel accent / danger
+  purple:       '#ae81ff',  // decorative / personal / tertiary
+};
+
+// ── Font stacks ────────────────────────────────────────────────────
+const FONT_BODY  = "'Inter', system-ui, sans-serif";
+const FONT_PIXEL = "'Press Start 2P', system-ui, sans-serif";
+
+// ── Theme ──────────────────────────────────────────────────────────
+export const theme = createTheme({
+
+  // ── Palette ──────────────────────────────────────────────────────
+  palette: {
+    mode: 'dark',
+
+    ns: NS,
+
+    background: {
+      default: NS.bg1,
+      paper:   NS.bg2,
+    },
+
+    primary: {
+      main:          NS.gold,
+      light:         NS.goldPale,
+      dark:          NS.goldDeep,
+      contrastText:  NS.goldBtnFg,
+    },
+    secondary: {
+      main:          NS.pink,
+      contrastText:  NS.ink,
+    },
+    success: {
+      main:          NS.green,
+      dark:          NS.greenDeep,
+      contrastText:  NS.goldBtnFg,
+    },
+    warning: {
+      main:          NS.orange,
+      dark:          NS.orangeDeep,
+      contrastText:  NS.goldBtnFg,
+    },
+    info: {
+      main:          NS.cyan,
+      dark:          NS.cyanDeep,
+      contrastText:  NS.goldBtnFg,
+    },
+    error: {
+      main:          NS.pink,
+      contrastText:  NS.ink,
+    },
+
+    text: {
+      primary:   NS.ink,
+      secondary: NS.inkDim,
+      disabled:  NS.inkFaint,
+    },
+
+    divider: NS.line,
+
+    action: {
+      active:            NS.ink,
+      hover:             alpha(NS.gold, 0.08),
+      selected:          alpha(NS.gold, 0.12),
+      disabled:          NS.inkFaint,
+      disabledBackground:'rgba(255, 255, 255, 0.05)',
+      focus:             alpha(NS.gold, 0.16),
+    },
+  },
+
+  // ── Typography ────────────────────────────────────────────────────
+  typography: {
+    fontFamily: FONT_BODY,
+
+    // Press Start 2P — hero title
+    h1: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      'clamp(2rem, 1rem + 3vw, 3.45rem)',
+      lineHeight:    1.08,
+      letterSpacing: 0,
+    },
+    // Inter — section titles
+    h2: {
+      fontFamily:    FONT_BODY,
+      fontSize:      'clamp(1.8rem, 1rem + 2vw, 2.4rem)',
+      fontWeight:    700,
+      letterSpacing: 0,
+      lineHeight:    1.14,
+    },
+    // Press Start 2P — card titles
+    h3: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      '11px',
+      lineHeight:    1.45,
+      letterSpacing: 0,
+    },
+    // Press Start 2P — quest gate titles
+    h4: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      '9.5px',
+      lineHeight:    1.5,
+    },
+    // Press Start 2P — footer column heads
+    h5: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      '9.5px',
+      lineHeight:    1.5,
+      color:         NS.gold,
+    },
+    // Press Start 2P — small labels
+    h6: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      '8px',
+      lineHeight:    1.5,
+    },
+
+    // Inter — hero tagline
+    subtitle1: {
+      fontFamily:  FONT_BODY,
+      fontSize:    '1.25rem',
+      fontWeight:  500,
+      lineHeight:  1.4,
+    },
+    // Inter — section subtitles
+    subtitle2: {
+      fontFamily:  FONT_BODY,
+      fontSize:    '1.05rem',
+      fontWeight:  400,
+      lineHeight:  1.5,
+      color:       NS.inkDim,
+    },
+    // Inter — body
+    body1: {
+      fontFamily: FONT_BODY,
+      fontSize:   '1rem',
+      lineHeight: 1.6,
+    },
+    // Inter — small body / card text
+    body2: {
+      fontFamily: FONT_BODY,
+      fontSize:   '0.875rem',
+      lineHeight: 1.45,
+      color:      NS.inkDim,
+    },
+
+    // Press Start 2P — pixel labels (e.g. status pills, file URL)
+    caption: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      '8px',
+      letterSpacing: '0.05em',
+      color:         NS.inkFaint,
+    },
+    // Inter — eyebrow labels (✦ SOCIETY OF BEGINNERS)
+    overline: {
+      fontFamily:    FONT_BODY,
+      fontSize:      '13px',
+      fontWeight:    700,
+      letterSpacing: '0.18em',
+      textTransform: 'uppercase',
+      color:         NS.gold,
+      lineHeight:    1,
+    },
+    // Press Start 2P — used by Button
+    button: {
+      fontFamily:    FONT_PIXEL,
+      fontSize:      '12px',
+      textTransform: 'none',
+      lineHeight:    1,
+    },
+  },
+
+  // ── Shape ─────────────────────────────────────────────────────────
+  shape: {
+    borderRadius: 8,
+  },
+
+  // ── Spacing — 4px base in rem ─────────────────────────────────────
+  // MUI default (8px) → override to match our 4px grid.
+  // theme.spacing(1) = 0.25rem (4px)
+  // theme.spacing(4) = 1rem (16px)
+  // theme.spacing(8) = 2rem (32px)
+  spacing: (factor) => `${0.25 * factor}rem`,
+
+  // ── Component overrides ───────────────────────────────────────────
+  components: {
+
+    // ── Global baseline ─────────────────────────────────────────────
+    MuiCssBaseline: {
+      styleOverrides: `
+        html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
+        body { background-color: ${NS.bg1}; background-image:
+          radial-gradient(ellipse 80% 55% at 88% 2%, ${alpha(NS.pink, 0.11)}, transparent 58%),
+          radial-gradient(ellipse 55% 45% at 8% 12%, ${alpha(NS.purple, 0.07)}, transparent 52%),
+          linear-gradient(180deg, ${NS.bg1} 0%, #1e1f1a 100%);
+          background-attachment: fixed;
+        }
+        ::selection { background: ${alpha(NS.pink, 0.28)}; color: ${NS.ink}; }
+        :where(a, button, input, select, textarea, [tabindex]):focus-visible {
+          outline: 2px solid ${NS.gold};
+          outline-offset: 3px;
+          box-shadow: 0 0 0 4px ${alpha(NS.gold, 0.35)};
+        }
+        @keyframes ns-live {
+          0%   { box-shadow: 0 0 0 0   ${alpha(NS.green, 0.7)}; }
+          70%  { box-shadow: 0 0 0 7px ${alpha(NS.green, 0)};   }
+          100% { box-shadow: 0 0 0 0   ${alpha(NS.green, 0)};   }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          *, *::before, *::after {
+            animation: none !important;
+            scroll-behavior: auto !important;
+          }
+        }
+      `,
+    },
+
+    // ── AppBar / Header ─────────────────────────────────────────────
+    MuiAppBar: {
+      defaultProps: {
+        elevation: 0,
+        position: 'sticky',
+      },
+      styleOverrides: {
+        root: {
+          height: '4rem',
+          background: NS.glass,
+          backdropFilter: 'blur(12px)',
+          WebkitBackdropFilter: 'blur(12px)',
+          borderBottom: `1px solid ${NS.line}`,
+          justifyContent: 'center',
+        },
+      },
+    },
+    MuiToolbar: {
+      defaultProps: { disableGutters: true },
+      styleOverrides: {
+        root: {
+          maxWidth: '1080px',
+          width: '100%',
+          margin: '0 auto',
+          padding: '0 clamp(1rem, 4vw, 2rem)',
+          minHeight: '4rem !important',
+        },
+      },
+    },
+
+    // ── Buttons ─────────────────────────────────────────────────────
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+        variant: 'contained',
+      },
+      styleOverrides: {
+        root: {
+          fontFamily: FONT_PIXEL,
+          fontSize: '12px',
+          lineHeight: 1,
+          textTransform: 'none',
+          borderRadius: '9px',
+          padding: '1rem 1.625rem',
+          transition: '150ms ease-out',
+          minWidth: 0,
+        },
+        // Play button — gold fill, 3D press shadow
+        contained: {
+          color: NS.goldBtnFg,
+          background: NS.gold,
+          border: `2px solid ${NS.goldDeep}`,
+          boxShadow: `0 3px 0 ${NS.goldShadow}`,
+          '&:hover': {
+            background: NS.goldPale,
+            boxShadow: `0 3px 0 ${NS.goldShadow}`,
+          },
+          '&:active': {
+            boxShadow: 'none',
+            transform: 'translateY(2px)',
+          },
+          '&.Mui-disabled': {
+            background: alpha(NS.gold, 0.3),
+            color: alpha(NS.goldBtnFg, 0.5),
+          },
+        },
+        // Ghost button — transparent, soft border
+        outlined: {
+          color: NS.gold,
+          background: 'transparent',
+          border: `1px solid ${alpha(NS.ink, 0.45)}`,
+          boxShadow: 'none',
+          '&:hover': {
+            color: NS.goldBtnFg,
+            background: NS.gold,
+            borderColor: NS.gold,
+          },
+        },
+        // Text button — no border
+        text: {
+          color: NS.gold,
+          '&:hover': {
+            background: alpha(NS.gold, 0.08),
+          },
+        },
+        // Small variant (header Play button)
+        sizeSmall: {
+          fontSize: '9px',
+          padding: '0.625rem 0.875rem',
+          borderRadius: '8px',
+        },
+      },
+    },
+
+    // ── Card / Paper ─────────────────────────────────────────────────
+    MuiCard: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: {
+          background: NS.glass,
+          backdropFilter: 'blur(8px)',
+          WebkitBackdropFilter: 'blur(8px)',
+          border: `1px solid ${NS.lineStr}`,
+          borderRadius: '10px',
+          boxShadow: 'none',
+          transition: '180ms ease-out',
+          '&:hover': {
+            borderColor: alpha(NS.gold, 0.55),
+            transform: 'translateY(-4px)',
+            boxShadow: '0 16px 34px rgba(0,0,0,.38)',
+          },
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: 'clamp(1rem, 2vw, 1.25rem)',
+          paddingRight: '3.5rem', // room for absolute badge
+          '&:last-child': { paddingBottom: 'clamp(1rem, 2vw, 1.25rem)' },
+        },
+      },
+    },
+    MuiPaper: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+        elevation1: {
+          background: NS.glass,
+          backdropFilter: 'blur(8px)',
+          border: `1px solid ${NS.line}`,
+        },
+        elevation2: {
+          background: NS.bg2,
+          border: `1px solid ${NS.line}`,
+        },
+      },
+    },
+
+    // ── Chip — status pills ──────────────────────────────────────────
+    // Use color prop: 'default'=gold, 'success'=green, 'warning'=orange,
+    // 'info'=cyan, 'error'=pink, 'secondary'=purple
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          fontFamily: FONT_PIXEL,
+          fontSize: '7px',
+          height: 'auto',
+          padding: '4px 2px',
+          borderRadius: '4px',
+          letterSpacing: '0.02em',
+        },
+        label: {
+          padding: '0 4px',
+        },
+        colorDefault: {
+          background: alpha(NS.gold, 0.08),
+          color: NS.gold,
+          border: `1px solid ${alpha(NS.gold, 0.26)}`,
+        },
+        colorSuccess: {
+          background: alpha(NS.green, 0.10),
+          color: NS.green,
+          border: `1px solid ${alpha(NS.green, 0.26)}`,
+        },
+        colorWarning: {
+          background: alpha(NS.orange, 0.12),
+          color: NS.orange,
+          border: `1px solid ${alpha(NS.orange, 0.26)}`,
+        },
+        colorInfo: {
+          background: alpha(NS.cyan, 0.12),
+          color: NS.cyan,
+          border: `1px solid ${alpha(NS.cyan, 0.26)}`,
+        },
+        colorError: {
+          background: alpha(NS.pink, 0.08),
+          color: NS.pink,
+          border: `1px solid ${alpha(NS.pink, 0.26)}`,
+        },
+        colorSecondary: {
+          background: alpha(NS.purple, 0.08),
+          color: NS.purple,
+          border: `1px solid ${alpha(NS.purple, 0.26)}`,
+        },
+      },
+    },
+
+    // ── Divider ──────────────────────────────────────────────────────
+    MuiDivider: {
+      styleOverrides: {
+        root: { borderColor: NS.line },
+      },
+    },
+
+    // ── Link ─────────────────────────────────────────────────────────
+    MuiLink: {
+      defaultProps: { underline: 'none' },
+      styleOverrides: {
+        root: {
+          color: NS.gold,
+          transition: '150ms ease-out',
+          '&:hover': { color: NS.goldPale },
+        },
+      },
+    },
+
+    // ── TextField / Input ─────────────────────────────────────────────
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          background: NS.bg2,
+          fontFamily: FONT_BODY,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: NS.line,
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: alpha(NS.gold, 0.5),
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: NS.gold,
+          },
+        },
+      },
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          fontFamily: FONT_BODY,
+          color: NS.inkFaint,
+          '&.Mui-focused': { color: NS.gold },
+        },
+      },
+    },
+
+    // ── Tooltip ──────────────────────────────────────────────────────
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          background: NS.bg2,
+          color: NS.ink,
+          border: `1px solid ${NS.line}`,
+          fontFamily: FONT_BODY,
+          fontSize: '0.8125rem',
+          borderRadius: '6px',
+          padding: '6px 10px',
+        },
+        arrow: { color: NS.bg2 },
+      },
+    },
+
+    // ── LinearProgress — roadmap progress bar ────────────────────────
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: '8px',
+          borderRadius: '999px',
+          background: 'rgba(255,255,255,.08)',
+          border: `1px solid rgba(255,255,255,.1)`,
+          overflow: 'hidden',
+        },
+        bar: {
+          background: NS.green, // default: "holds"
+          borderRadius: '999px',
+        },
+      },
+    },
+
+    // ── Tabs (section nav) ────────────────────────────────────────────
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          fontFamily: FONT_BODY,
+          fontSize: '0.875rem',
+          fontWeight: 500,
+          color: NS.ink,
+          textTransform: 'none',
+          minHeight: '4rem',
+          padding: '0 0 0.25rem',
+          '&.Mui-selected': { color: NS.gold },
+        },
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: NS.gold,
+          height: '2px',
+        },
+      },
+    },
+
+    // ── Dialog / Modal ────────────────────────────────────────────────
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          background: NS.bg2,
+          border: `1px solid ${alpha(NS.pink, 0.28)}`,
+          borderRadius: '12px',
+          backdropFilter: 'blur(8px)',
+          boxShadow: '0 30px 60px rgba(0,0,0,.5)',
+        },
+      },
+    },
+    MuiBackdrop: {
+      styleOverrides: {
+        root: { background: alpha(NS.bg0, 0.72) },
+      },
+    },
+
+    // ── Snackbar / Alert ──────────────────────────────────────────────
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          fontFamily: FONT_BODY,
+          borderRadius: '8px',
+          border: `1px solid`,
+        },
+        standardSuccess: { background: alpha(NS.green, 0.10),  borderColor: alpha(NS.green, 0.26),  color: NS.green  },
+        standardWarning: { background: alpha(NS.orange, 0.10), borderColor: alpha(NS.orange, 0.26), color: NS.orange },
+        standardInfo:    { background: alpha(NS.cyan, 0.10),   borderColor: alpha(NS.cyan, 0.26),   color: NS.cyan   },
+        standardError:   { background: alpha(NS.pink, 0.10),   borderColor: alpha(NS.pink, 0.26),   color: NS.pink   },
+      },
+    },
+  },
+});
+
+export default theme;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@noobsociety/nsds",
-  "version": "0.1.1",
-  "description": "NoobSociety Design System: tokens, CSS primitives, React components, MUI theme source, assets, and references.",
+  "version": "0.1.2",
+  "description": "NoobSociety Design System: tokens, CSS primitives, React components, MUI theme runtime, assets, and references.",
   "keywords": [
     "design-system",
     "css",
@@ -14,6 +14,15 @@
     "noobsociety"
   ],
   "author": "NoobSociety",
+  "license": "MIT",
+  "scripts": {
+    "check": "npm run check:package && npm run check:types && npm run test:smoke",
+    "check:package": "node scripts/check-package.mjs",
+    "check:types": "tsc --noEmit",
+    "test": "npm run check",
+    "test:smoke": "node scripts/smoke-imports.mjs",
+    "release:dry-run": "npm publish --dry-run"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/noobsociety/nsds.git"
@@ -35,6 +44,10 @@
   },
   "files": [
     "README.md",
+    "CHANGELOG.md",
+    "CONTRIBUTING.md",
+    "LICENSE",
+    "SECURITY.md",
     "SKILL.md",
     "index.js",
     "index.d.ts",
@@ -58,8 +71,8 @@
       "import": "./components/react/index.js"
     },
     "./mui": {
-      "types": "./mui-theme/index.ts",
-      "import": "./mui-theme/index.ts"
+      "types": "./mui-theme/index.d.ts",
+      "import": "./mui-theme/index.js"
     },
     "./styles.css": "./styles.css",
     "./package.json": "./package.json",
@@ -87,5 +100,13 @@
     "@mui/material": {
       "optional": true
     }
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^9.1.1",
+    "@types/react": "^19.2.17",
+    "react": "^19.2.7",
+    "typescript": "^6.0.3"
   }
 }