@noobsociety/nsds 0.3.1 → 0.4.1

package/dist/tokens/motion.css

@@ -1,63 +1,97 @@
 /* NoobSociety — Motion tokens & keyframes */
 :root {
   /* ── Durations ────────────────────────────────────────────── */
-  --ns-dur-fast:    150ms;  /* @kind other */
-  --ns-dur-base:    200ms;  /* @kind other */
-  --ns-dur-slow:    400ms;  /* @kind other */
-  --ns-dur-xslow:   600ms;  /* @kind other */
+  --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;                             /* @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 */
+  --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);  /* @kind other */
-  --ns-transition-base: var(--ns-dur-base) var(--ns-ease-out);  /* @kind other */
+  --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 ────────────────────────────────────────────────── */
 
 /* Character idle bob (with centered offset) */
 @keyframes ns-bob {
-  0%, 100% { transform: translateX(-50%) translateY(0); }
-  50%       { transform: translateX(-50%) translateY(-6px); }
+  0%,
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(-6px);
+  }
 }
 
 /* Generic idle bob (no X offset) */
 @keyframes ns-bob-plain {
-  0%, 100% { transform: translateY(0); }
-  50%       { transform: translateY(-5px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
 }
 
 /* Pixel text blink (e.g. "Press Start") */
 @keyframes ns-blink {
-  0%,  55% { opacity: 1; }
-  56%, 100% { opacity: 0; }
+  0%,
+  55% {
+    opacity: 1;
+  }
+  56%,
+  100% {
+    opacity: 0;
+  }
 }
 
 /* Star field twinkle */
 @keyframes ns-twinkle {
-  0%, 100% { opacity: 0.7; }
-  50%       { opacity: 0.35; }
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 0.35;
+  }
 }
 
 /* Section arrow nudge */
 @keyframes ns-arrow {
-  0%, 100% { transform: translateX(-50%) translateY(0); }
-  50%       { transform: translateX(-50%) translateY(5px); }
+  0%,
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(5px);
+  }
 }
 
 /* Live pulse dot */
 @keyframes ns-live {
-  0%   { box-shadow: 0 0 0 0   rgba(166, 226, 46, 0.7); }
-  70%  { box-shadow: 0 0 0 7px rgba(166, 226, 46, 0);   }
-  100% { box-shadow: 0 0 0 0   rgba(166, 226, 46, 0);   }
+  0% {
+    box-shadow: 0 0 0 0 rgba(166, 226, 46, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 7px rgba(166, 226, 46, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(166, 226, 46, 0);
+  }
 }
 
 /* Reduced motion: disable all ns animations */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *,
+  *::before,
+  *::after {
     animation: none !important;
     scroll-behavior: auto !important;
   }

package/dist/tokens/spacing.css

@@ -4,60 +4,60 @@
 
 :root {
   /* ── Base scale (4px grid, expressed in rem) ──────────────────── */
-  --ns-space-1:   0.25rem;   /* 4px  */
-  --ns-space-2:   0.5rem;    /* 8px  */
-  --ns-space-3:   0.75rem;   /* 12px */
-  --ns-space-4:   1rem;      /* 16px */
-  --ns-space-5:   1.25rem;   /* 20px */
-  --ns-space-6:   1.5rem;    /* 24px */
-  --ns-space-7:   1.75rem;   /* 28px */
-  --ns-space-8:   2rem;      /* 32px */
-  --ns-space-10:  2.5rem;    /* 40px */
-  --ns-space-12:  3rem;      /* 48px */
-  --ns-space-14:  3.5rem;    /* 56px */
-  --ns-space-16:  4rem;      /* 64px */
-  --ns-space-20:  5rem;      /* 80px */
-  --ns-space-24:  5.75rem;   /* 92px */
+  --ns-space-1: 0.25rem; /* 4px  */
+  --ns-space-2: 0.5rem; /* 8px  */
+  --ns-space-3: 0.75rem; /* 12px */
+  --ns-space-4: 1rem; /* 16px */
+  --ns-space-5: 1.25rem; /* 20px */
+  --ns-space-6: 1.5rem; /* 24px */
+  --ns-space-7: 1.75rem; /* 28px */
+  --ns-space-8: 2rem; /* 32px */
+  --ns-space-10: 2.5rem; /* 40px */
+  --ns-space-12: 3rem; /* 48px */
+  --ns-space-14: 3.5rem; /* 56px */
+  --ns-space-16: 4rem; /* 64px */
+  --ns-space-20: 5rem; /* 80px */
+  --ns-space-24: 5.75rem; /* 92px */
 
   /* ── Fluid layout tokens (viewport-responsive) ────────────────── */
-  --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 */
+  --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;
-  --ns-header-h:      4rem;    /* 64px — sticky header */
-  --ns-section-min:   calc(100svh - var(--ns-header-h));
+  --ns-container: 1080px;
+  --ns-header-h: 4rem; /* 64px — sticky header */
+  --ns-section-min: calc(100svh - var(--ns-header-h));
 
   /* ── Radii ────────────────────────────────────────────────────── */
-  --ns-radius-sm:     0.25rem;  /* 4px  */
-  --ns-radius-md:     0.5rem;   /* 8px  */
-  --ns-radius-lg:     0.625rem; /* 10px */
-  --ns-radius-xl:     0.75rem;  /* 12px */
-  --ns-radius-full:   9999px;
+  --ns-radius-sm: 0.25rem; /* 4px  */
+  --ns-radius-md: 0.5rem; /* 8px  */
+  --ns-radius-lg: 0.625rem; /* 10px */
+  --ns-radius-xl: 0.75rem; /* 12px */
+  --ns-radius-full: 9999px;
 
   /* ── Shadows ──────────────────────────────────────────────────── */
-  --ns-shadow-card-rest:  none;
+  --ns-shadow-card-rest: none;
   --ns-shadow-card-hover: 0 1rem 2.125rem rgba(0, 0, 0, 0.38);
-  --ns-shadow-modal:      0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
-  --ns-shadow-btn:        0 0.1875rem 0 var(--ns-gold-shadow);
-  --ns-shadow-arrow:      0 0 0 0.25rem rgba(230, 219, 116, 0.12), 0 0.75rem 1.75rem rgba(0, 0, 0, 0.36);
+  --ns-shadow-modal: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
+  --ns-shadow-btn: 0 0.1875rem 0 var(--ns-gold-shadow);
+  --ns-shadow-arrow: 0 0 0 0.25rem rgba(230, 219, 116, 0.12), 0 0.75rem 1.75rem rgba(0, 0, 0, 0.36);
 
   /* ── Borders ──────────────────────────────────────────────────── */
-  --ns-border-card:        1px solid var(--ns-line);
+  --ns-border-card: 1px solid var(--ns-line);
   --ns-border-card-strong: 1px solid var(--ns-line-strong);
-  --ns-border-gold:        2px solid var(--ns-gold-deep);
+  --ns-border-gold: 2px solid var(--ns-gold-deep);
 
   /* ── Blur ─────────────────────────────────────────────────────── */
-  --ns-blur-glass:  blur(8px);   /* @kind other */
-  --ns-blur-header: blur(12px);  /* @kind other */
+  --ns-blur-glass: blur(8px); /* @kind other */
+  --ns-blur-header: blur(12px); /* @kind other */
 
   /* ── Component sizing ──────────────────────────────────────────── */
-  --ns-icon-slot:    2.625rem; /* 42px */
+  --ns-icon-slot: 2.625rem; /* 42px */
   --ns-icon-slot-sm: 1.625rem; /* 26px */
-  --ns-arrow-size:   2.125rem; /* 34px */
+  --ns-arrow-size: 2.125rem; /* 34px */
 }

package/dist/tokens/typography.css

@@ -1,42 +1,42 @@
 /* NoobSociety — Typography tokens */
 :root {
   /* ── Font families ────────────────────────────────────────── */
-  --ns-font-body:  'Inter', system-ui, sans-serif;
+  --ns-font-body: 'Inter', system-ui, sans-serif;
   --ns-font-pixel: 'Press Start 2P', system-ui, sans-serif;
 
   /* ── Type scale ───────────────────────────────────────────── */
-  --ns-text-xs:   0.75rem;   /* 12px */
-  --ns-text-sm:   0.875rem;  /* 14px */
-  --ns-text-base: 1rem;      /* 16px */
-  --ns-text-lg:   1.125rem;  /* 18px */
-  --ns-text-xl:   1.25rem;   /* 20px */
-  --ns-text-2xl:  1.5rem;    /* 24px */
-  --ns-text-3xl:  1.875rem;  /* 30px */
-  --ns-text-4xl:  2.25rem;   /* 36px */
+  --ns-text-xs: 0.75rem; /* 12px */
+  --ns-text-sm: 0.875rem; /* 14px */
+  --ns-text-base: 1rem; /* 16px */
+  --ns-text-lg: 1.125rem; /* 18px */
+  --ns-text-xl: 1.25rem; /* 20px */
+  --ns-text-2xl: 1.5rem; /* 24px */
+  --ns-text-3xl: 1.875rem; /* 30px */
+  --ns-text-4xl: 2.25rem; /* 36px */
 
   /* ── Pixel font scale ─────────────────────────────────────── */
   --ns-pixel-2xs: 7px;
-  --ns-pixel-xs:  8px;
-  --ns-pixel-sm:  9px;
+  --ns-pixel-xs: 8px;
+  --ns-pixel-sm: 9px;
   --ns-pixel-base: 11px;
-  --ns-pixel-md:  12px;
-  --ns-pixel-lg:  13px;
-  --ns-pixel-xl:  1.6rem;    /* hero accent title */
+  --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); /* @kind other */
   --ns-title-section: clamp(1.8rem, 1rem + 2vw, 2.4rem); /* @kind other */
 
   /* ── Line heights ─────────────────────────────────────────── */
-  --ns-leading-tight:  1.08;
-  --ns-leading-snug:   1.35;
+  --ns-leading-tight: 1.08;
+  --ns-leading-snug: 1.35;
   --ns-leading-normal: 1.45;
   --ns-leading-relaxed: 1.6;
-  --ns-leading-pixel:  1.5;  /* for Press Start 2P */
+  --ns-leading-pixel: 1.5; /* for Press Start 2P */
 
   /* ── Font weights ─────────────────────────────────────────── */
-  --ns-weight-normal:   400;
-  --ns-weight-medium:   500;
+  --ns-weight-normal: 400;
+  --ns-weight-medium: 500;
   --ns-weight-semibold: 600;
-  --ns-weight-bold:     700;
+  --ns-weight-bold: 700;
 
   /* ── Section eyebrow ─────────────────────────────────────────*/
   /* font: 700 13px/1 var(--ns-font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ns-gold) */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@noobsociety/nsds",
-  "version": "0.3.1",
-  "description": "NoobSociety Design System — Monokai dark tokens, Tailwind preset, and pixel-art React components",
+  "version": "0.4.1",
+  "description": "NoobSociety Design System — Monokai dark tokens, client registries, Tailwind preset, and pixel-art React components",
   "keywords": [
     "design-system",
     "react",
@@ -15,17 +15,27 @@
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json && tsc -p tsconfig.tailwind.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: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",
+    "changeset": "node scripts/create-changeset.mjs",
+    "changeset:publish": "npm publish --access public --provenance",
+    "changeset:version": "node scripts/changeset-version.mjs && node scripts/release-changelog.mjs",
+    "check": "npm run check:commits && npm run check:deps && npm run check:workflows && npm run check:content && npm run check:release && npm run check:markdown && npm run lint && npm run format: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:content": "node scripts/check-content.mjs",
+    "check:commits": "commitlint --from origin/main --to HEAD --verbose",
+    "check:deps": "node scripts/check-deps.mjs",
     "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:exports": "publint run --pack npm --level warning && attw --pack . --profile node16 --entrypoints . ./client ./react ./tailwind --format table --no-emoji",
     "check:install": "node scripts/check-install.mjs",
+    "check:markdown": "markdownlint \"*.md\" \".github/**/*.md\" \"docs/**/*.md\" \".changeset/*.md\"",
     "check:package": "node scripts/check-package.mjs",
+    "check:release": "node scripts/check-release.mjs",
+    "check:release:strict": "node scripts/check-release.mjs --strict",
     "check:types": "tsc --noEmit",
+    "check:workflows": "node scripts/check-workflows.mjs",
     "docs:api": "typedoc --options typedoc.json",
+    "format:check": "prettier --check .",
+    "lint": "eslint .",
     "prepublishOnly": "npm run build",
+    "prepare": "husky",
     "storybook": "storybook dev -p 6006 --disable-telemetry",
     "test": "npm run check",
     "test:components": "vitest run",
@@ -81,6 +91,16 @@
         "default": "./dist/index.cjs"
       }
     },
+    "./client": {
+      "import": {
+        "types": "./dist/client/index.d.ts",
+        "default": "./dist/client/index.js"
+      },
+      "require": {
+        "types": "./dist/client/index.d.cts",
+        "default": "./dist/client/index.cjs"
+      }
+    },
     "./tailwind": {
       "import": {
         "types": "./dist/tailwind/preset.d.cts",
@@ -104,15 +124,23 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.3",
-    "@changesets/cli": "^2.31.0",
+    "@commitlint/cli": "^21.0.2",
+    "@commitlint/config-conventional": "^21.0.2",
+    "@eslint/js": "^10.0.1",
     "@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/node": "^22.20.0",
     "@types/react": "^19.2.17",
     "@vitejs/plugin-react": "^6.0.2",
+    "actionlint": "^2.0.6",
+    "eslint": "^10.5.0",
+    "husky": "^9.1.7",
     "jsdom": "^29.1.1",
+    "markdownlint-cli": "^0.49.0",
+    "prettier": "^3.8.4",
     "publint": "^0.3.21",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -121,6 +149,7 @@
     "typedoc": "^0.28.19",
     "typedoc-plugin-markdown": "^4.12.0",
     "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.1",
     "vite": "^8.0.16",
     "vitest": "^4.1.9"
   }