@rnine/nineos 0.0.0-stage → 0.1.0

package/fonts.css

@@ -0,0 +1,9 @@
+/* NineOS fonts, self-hosted through Fontsource (all open-licensed, SIL OFL).
+   Import once in the app, before styles.css:
+     import "@rnine/nineos/fonts.css";
+     import "@rnine/nineos/styles.css";                                   */
+@import "@fontsource/chakra-petch/latin-500.css";
+@import "@fontsource/chakra-petch/latin-600.css";
+@import "@fontsource/chakra-petch/latin-700.css";
+@import "@fontsource-variable/hanken-grotesk/index.css";
+@import "@fontsource/share-tech-mono/latin-400.css";

package/package.json

@@ -1,6 +1,116 @@
 {
   "name": "@rnine/nineos",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "NineOS: a design system library with two moods (Clear and Cipher), cut corners, a command-line-plus-panels shell and its motion layer. Built on @rnine/core",
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "ui",
+    "scss",
+    "nineos",
+    "cli",
+    "terminal"
+  ],
+  "homepage": "https://github.com/rNineTheFirst/rnine-ui/tree/main/packages/nineos#readme",
+  "bugs": {
+    "url": "https://github.com/rNineTheFirst/rnine-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rNineTheFirst/rnine-ui.git",
+    "directory": "packages/nineos"
+  },
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "default": "./dist/motion.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./fonts.css": "./fonts.css",
+    "./scss": {
+      "sass": "./scss/_index.scss",
+      "default": "./scss/_index.scss"
+    },
+    "./tokens": {
+      "types": "./dist/tokens.d.ts",
+      "default": "./dist/tokens.js"
+    },
+    "./theme.json": "./theme.json",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "scss",
+    "tokens",
+    "fonts.css",
+    "theme.json"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs && vite build && tsc -p tsconfig.build.json && node scripts/build.mjs --bundle",
+    "dev": "storybook dev -p 6006 --no-open",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o storybook-static --quiet",
+    "lint": "eslint .",
+    "test": "vitest run && node --test \"test/**/*.test.mjs\"",
+    "clean": "rimraf dist storybook-static node_modules"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass": "^1.80.0"
+  },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@rnine/core": "0.1.0",
+    "@fontsource-variable/hanken-grotesk": "^5.3.0",
+    "@fontsource/chakra-petch": "^5.3.0",
+    "@fontsource/share-tech-mono": "^5.3.0",
+    "lucide-react": "1.61.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-a11y": "10.6.3",
+    "@storybook/addon-docs": "10.6.3",
+    "@storybook/addon-themes": "10.6.3",
+    "@storybook/react-vite": "10.6.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.12.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.3.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.6.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "rimraf": "^6.1.3",
+    "sass": "1.106.1",
+    "storybook": "10.6.3",
+    "typescript": "~6.0.2",
+    "typescript-eslint": "^8.59.2",
+    "vite": "^8.0.12",
+    "vitest": "^3.2.4"
+  }
+}

package/scss/_glitch.scss

@@ -0,0 +1,23 @@
+// NineOS-only mixins. Output nothing until included.
+@use "@rnine/core/scss" as r9;
+
+/// Slice glitch on text: give the element data-text="<its text>" and add the
+/// class you pass in $trigger (default .is-glitching) to play it once.
+/// For use inside a CSS module (see keyframes()).
+@mixin glitch-text($trigger: ".is-glitching", $duration: r9.$duration-slow) {
+  position: relative;
+  &::before,
+  &::after {
+    content: attr(data-text);
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: 0;
+  }
+  &::before { color: r9.$signal; }
+  &::after { color: r9.$accent; }
+  @include r9.motion-safe {
+    &#{$trigger}::before { animation: r9.keyframes(slice-a) $duration steps(1) 1; }
+    &#{$trigger}::after { animation: r9.keyframes(slice-b) $duration steps(1) 1; }
+  }
+}

package/scss/_index.scss

@@ -0,0 +1,6 @@
+// NineOS for SCSS: the shared API (tokens, corner, ornament, texture, ...)
+// plus NineOS's own mixins. Outputs no CSS:
+//
+//   @use "@rnine/nineos/scss" as r9;
+@forward "@rnine/core/scss";
+@forward "glitch";

package/scss/base.scss

@@ -0,0 +1,24 @@
+// NineOS's own global CSS, after core's base.css in styles.css: the keyframes
+// only NineOS uses (the slice glitch, scanline drift, the light band).
+@keyframes r9-slice-a {
+  0% { opacity: 1; clip-path: inset(12% 0 68% 0); transform: translateX(-4%); }
+  25% { clip-path: inset(52% 0 26% 0); transform: translateX(3%); }
+  50% { clip-path: inset(30% 0 52% 0); transform: translateX(-2%); }
+  75% { clip-path: inset(78% 0 6% 0); transform: translateX(2%); }
+  100% { opacity: 0; }
+}
+
+@keyframes r9-slice-b {
+  0% { opacity: 1; clip-path: inset(62% 0 14% 0); transform: translateX(4%); }
+  33% { clip-path: inset(18% 0 62% 0); transform: translateX(-3%); }
+  66% { clip-path: inset(40% 0 42% 0); transform: translateX(2%); }
+  100% { opacity: 0; }
+}
+
+@keyframes r9-drift { to { transform: translateY(3px); } }
+
+// Moved with transform, not top: no layout work, no layout shift
+@keyframes r9-band {
+  0% { transform: translateY(-140px); }
+  60%, 100% { transform: translateY(110vh); }
+}

package/theme.json

@@ -0,0 +1,9 @@
+{
+  "name": "NineOS",
+  "moods": {
+    "light": { "id": "clear", "label": "Clear", "description": "The light mood: white, ink, magenta." },
+    "dark": { "id": "cipher", "label": "Cipher", "description": "The dark mood: near-black, neon magenta, scanlines." }
+  },
+  "auto": "night",
+  "palette": { "id": "magenta", "label": "Magenta", "description": "Magenta accent, cyan signal: the default." }
+}

package/tokens/color.json

@@ -0,0 +1,46 @@
+{
+  "$description": "NineOS primitive colors (accent and signal are the default Magenta palette; tokens/palettes/ swaps them). Never use these directly in components: use the semantic roles in themes/*.json.",
+  "color": {
+    "$type": "color",
+    "gray": {
+      "0": { "$value": "#FFFFFF" },
+      "10": { "$value": "#F4F4F6" },
+      "25": { "$value": "#F5F5F7" },
+      "50": { "$value": "#EDEDF1" },
+      "100": { "$value": "#DBDBE1" },
+      "300": { "$value": "#A2A2AD" },
+      "500": { "$value": "#6E6F7A" },
+      "600": { "$value": "#4E4F57" },
+      "800": { "$value": "#26262C" },
+      "850": { "$value": "#18181C" },
+      "900": { "$value": "#111114" },
+      "950": { "$value": "#0A0A0C" },
+      "975": { "$value": "#050506" }
+    },
+    "accent": {
+      "300": { "$value": "#FF4FB0" },
+      "400": { "$value": "#FF1F9A" },
+      "500": { "$value": "#E6007E" },
+      "600": { "$value": "#D4006F" },
+      "700": { "$value": "#C20066" },
+      "800": { "$value": "#9E0052" }
+    },
+    "signal": {
+      "300": { "$value": "#1FE0FF" },
+      "500": { "$value": "#0098C7" },
+      "700": { "$value": "#00779C" }
+    },
+    "green": {
+      "400": { "$value": "#3DDC84" },
+      "700": { "$value": "#14804A" }
+    },
+    "amber": {
+      "400": { "$value": "#FFB020" },
+      "700": { "$value": "#9A5B00" }
+    },
+    "red": {
+      "400": { "$value": "#FF6B4A" },
+      "700": { "$value": "#C2361A" }
+    }
+  }
+}

package/tokens/layout.json

@@ -0,0 +1,29 @@
+{
+  "breakpoint": {
+    "$type": "dimension",
+    "$description": "Mobile first: styles are for phones, these widths add layout.",
+    "sm": { "$value": "640px" },
+    "md": { "$value": "900px" },
+    "lg": { "$value": "1200px" }
+  },
+  "container": {
+    "$type": "dimension",
+    "max": { "$value": "1120px" },
+    "text": { "$value": "65ch", "$description": "Longest comfortable line of running text" },
+    "gutter": { "$value": "16px", "$description": "Minimum side padding at every width" }
+  },
+  "header": {
+    "$type": "dimension",
+    "height": { "$value": "64px" }
+  },
+  "z": {
+    "$type": "number",
+    "base": { "$value": 0 },
+    "raised": { "$value": 10 },
+    "sticky": { "$value": 30 },
+    "overlay": { "$value": 40 },
+    "modal": { "$value": 50 },
+    "toast": { "$value": 60 },
+    "fx": { "$value": 70, "$description": "Scanlines and click sparks: above everything, never interactive" }
+  }
+}

package/tokens/motion.json

@@ -0,0 +1,18 @@
+{
+  "duration": {
+    "$type": "duration",
+    "$description": "Interactions answer within 'fast'; ambient loops are slow enough to ignore.",
+    "instant": { "$value": "90ms", "$description": "Press, toggle" },
+    "fast": { "$value": "160ms", "$description": "Hover color, small fades" },
+    "base": { "$value": "260ms", "$description": "Underlines, arrows, lifts" },
+    "slow": { "$value": "420ms", "$description": "Glitch, magnet release, tilt release" },
+    "slower": { "$value": "700ms", "$description": "Scroll reveals, decrypt" },
+    "ambient": { "$value": "9000ms", "$description": "Sheen, scanline drift, idle ripples" }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "out": { "$value": [0.2, 0.7, 0.2, 1], "$description": "Default. Things arrive fast and settle" },
+    "in-out": { "$value": [0.6, 0, 0.2, 1], "$description": "Things that move across the screen" },
+    "linear": { "$value": [0, 0, 1, 1], "$description": "Pointer-following (magnet, tilt) and loops" }
+  }
+}

package/tokens/palettes/acid.json

@@ -0,0 +1,65 @@
+{
+  "$description": "NineOS Acid palette: overrides the accent and signal primitives and the tints made from them. Picked with data-palette=\"acid\".",
+  "label": "Acid",
+  "description": "Lime accent, violet signal.",
+  "color": {
+    "$type": "color",
+    "accent": {
+      "300": {
+        "$value": "#C4FB56"
+      },
+      "400": {
+        "$value": "#ABF910"
+      },
+      "500": {
+        "$value": "#649404"
+      },
+      "600": {
+        "$value": "#567F03"
+      },
+      "700": {
+        "$value": "#4D7103"
+      },
+      "800": {
+        "$value": "#3C5902"
+      }
+    },
+    "signal": {
+      "300": {
+        "$value": "#BC8CFC"
+      },
+      "500": {
+        "$value": "#AB6EFB"
+      },
+      "700": {
+        "$value": "#8831FA"
+      }
+    }
+  },
+  "themes": {
+    "light": {
+      "$type": "color",
+      "accent-soft": {
+        "$value": "#567F031F"
+      },
+      "selection": {
+        "$value": "#567F0333"
+      },
+      "sheen": {
+        "$value": "#AB6EFB12"
+      }
+    },
+    "dark": {
+      "$type": "color",
+      "accent-soft": {
+        "$value": "#ABF91029"
+      },
+      "selection": {
+        "$value": "#ABF9104D"
+      },
+      "sheen": {
+        "$value": "#BC8CFC0D"
+      }
+    }
+  }
+}

package/tokens/palettes/volt.json

@@ -0,0 +1,65 @@
+{
+  "$description": "NineOS Volt palette: overrides the accent and signal primitives and the tints made from them. Picked with data-palette=\"volt\".",
+  "label": "Volt",
+  "description": "Cobalt accent, yellow signal.",
+  "color": {
+    "$type": "color",
+    "accent": {
+      "300": {
+        "$value": "#88A4FF"
+      },
+      "400": {
+        "$value": "#6287FF"
+      },
+      "500": {
+        "$value": "#567DFF"
+      },
+      "600": {
+        "$value": "#3665FF"
+      },
+      "700": {
+        "$value": "#1D51FF"
+      },
+      "800": {
+        "$value": "#0035E3"
+      }
+    },
+    "signal": {
+      "300": {
+        "$value": "#FFF71A"
+      },
+      "500": {
+        "$value": "#969100"
+      },
+      "700": {
+        "$value": "#706C00"
+      }
+    }
+  },
+  "themes": {
+    "light": {
+      "$type": "color",
+      "accent-soft": {
+        "$value": "#3665FF1F"
+      },
+      "selection": {
+        "$value": "#3665FF33"
+      },
+      "sheen": {
+        "$value": "#96910012"
+      }
+    },
+    "dark": {
+      "$type": "color",
+      "accent-soft": {
+        "$value": "#6287FF29"
+      },
+      "selection": {
+        "$value": "#6287FF4D"
+      },
+      "sheen": {
+        "$value": "#FFF71A0D"
+      }
+    }
+  }
+}

package/tokens/shape.json

@@ -0,0 +1,26 @@
+{
+  "corner": {
+    "$type": "dimension",
+    "$description": "Corner sizes. NineOS objects have cut corners instead of rounded ones (shape.cut 1, shape.round 0).",
+    "sm": { "$value": "6px", "$description": "Chips, small buttons, inputs" },
+    "md": { "$value": "10px", "$description": "Buttons, terminals, panels" },
+    "lg": { "$value": "18px", "$description": "Cards (single top-right cut)" }
+  },
+  "shape": {
+    "$type": "number",
+    "$description": "How corner() draws a corner: the cut (a 45° chamfer) and the rounding, each a multiple of the corner size.",
+    "cut": { "$value": 1, "$description": "NineOS: corners are cut" },
+    "round": { "$value": 0, "$description": "NineOS: no rounding" }
+  },
+  "radius": {
+    "$type": "dimension",
+    "none": { "$value": "0px" },
+    "xs": { "$value": "2px", "$description": "Only for tiny things a corner cut can't fit: checkboxes, dots" },
+    "full": { "$value": "999px", "$description": "Status dots and avatars only" }
+  },
+  "border": {
+    "$type": "dimension",
+    "hair": { "$value": "1px" },
+    "strong": { "$value": "2px" }
+  }
+}

package/tokens/space.json

@@ -0,0 +1,19 @@
+{
+  "space": {
+    "$type": "dimension",
+    "$description": "4px grid. Gaps between siblings use these; never margins.",
+    "0": { "$value": "0rem" },
+    "1": { "$value": "0.25rem" },
+    "2": { "$value": "0.5rem" },
+    "3": { "$value": "0.75rem" },
+    "4": { "$value": "1rem" },
+    "5": { "$value": "1.25rem" },
+    "6": { "$value": "1.5rem" },
+    "8": { "$value": "2rem" },
+    "10": { "$value": "2.5rem" },
+    "12": { "$value": "3rem" },
+    "16": { "$value": "4rem" },
+    "20": { "$value": "5rem" },
+    "24": { "$value": "6rem" }
+  }
+}

package/tokens/themes/dark.json

@@ -0,0 +1,81 @@
+{
+  "$description": "Cipher: the dark mood. Near-black, neon magenta, scanlines; the same layout and type as Clear.",
+  "theme": {
+    "$type": "color",
+    "bg": {
+      "$value": "{color.gray.975}"
+    },
+    "surface": {
+      "$value": "{color.gray.900}"
+    },
+    "surface-raised": {
+      "$value": "{color.gray.850}"
+    },
+    "glass": {
+      "$value": "#050506C7"
+    },
+    "fg": {
+      "$value": "{color.gray.10}"
+    },
+    "fg-muted": {
+      "$value": "{color.gray.300}"
+    },
+    "fg-subtle": {
+      "$value": "{color.gray.500}"
+    },
+    "line": {
+      "$value": "{color.gray.800}"
+    },
+    "line-strong": {
+      "$value": "{color.gray.600}"
+    },
+    "accent": {
+      "$value": "{color.accent.400}"
+    },
+    "accent-hover": {
+      "$value": "{color.accent.300}"
+    },
+    "accent-text": {
+      "$value": "{color.accent.300}"
+    },
+    "on-accent": {
+      "$value": "{color.gray.975}"
+    },
+    "accent-soft": {
+      "$value": "#FF1F9A29"
+    },
+    "signal": {
+      "$value": "{color.signal.300}"
+    },
+    "signal-text": {
+      "$value": "{color.signal.300}"
+    },
+    "inverse-bg": {
+      "$value": "{color.gray.10}"
+    },
+    "inverse-fg": {
+      "$value": "{color.gray.975}"
+    },
+    "success": {
+      "$value": "{color.green.400}"
+    },
+    "warning": {
+      "$value": "{color.amber.400}"
+    },
+    "danger": {
+      "$value": "{color.red.400}"
+    },
+    "dot": {
+      "$value": "#F4F4F621"
+    },
+    "scan": {
+      "$value": "#FFFFFF08"
+    },
+    "sheen": {
+      "$value": "#1FE0FF0D"
+    },
+    "selection": {
+      "$value": "#FF1F9A4D"
+    }
+  }
+}

package/tokens/themes/light.json

@@ -0,0 +1,106 @@
+{
+  "$description": "Clear: the light mood. Calm and clinical, lots of white, hairlines, magenta for the one thing that matters.",
+  "theme": {
+    "$type": "color",
+    "bg": {
+      "$value": "{color.gray.0}",
+      "$description": "Page background"
+    },
+    "surface": {
+      "$value": "{color.gray.25}",
+      "$description": "Cards, panels, inputs"
+    },
+    "surface-raised": {
+      "$value": "{color.gray.0}",
+      "$description": "Menus, popovers, toasts"
+    },
+    "glass": {
+      "$value": "#FFFFFFD1",
+      "$description": "Translucent surface for UI floating over the dot field (panels, dock, HUD), with a backdrop blur"
+    },
+    "fg": {
+      "$value": "{color.gray.950}",
+      "$description": "Main text and icons"
+    },
+    "fg-muted": {
+      "$value": "{color.gray.600}",
+      "$description": "Secondary text"
+    },
+    "fg-subtle": {
+      "$value": "{color.gray.500}",
+      "$description": "Placeholders, disabled text (large text only)"
+    },
+    "line": {
+      "$value": "{color.gray.100}",
+      "$description": "Hairline borders and dividers"
+    },
+    "line-strong": {
+      "$value": "{color.gray.300}",
+      "$description": "Input borders, hovered hairlines"
+    },
+    "accent": {
+      "$value": "{color.accent.600}",
+      "$description": "Magenta: primary actions, the one mark on every component"
+    },
+    "accent-hover": {
+      "$value": "{color.accent.700}",
+      "$description": "Hovered and pressed accent fills"
+    },
+    "accent-text": {
+      "$value": "{color.accent.700}",
+      "$description": "Magenta text and icons on bg or surface"
+    },
+    "on-accent": {
+      "$value": "{color.gray.0}",
+      "$description": "Text on accent fills"
+    },
+    "accent-soft": {
+      "$value": "#D4006F1F",
+      "$description": "Tinted backgrounds, focus glow"
+    },
+    "signal": {
+      "$value": "{color.signal.500}",
+      "$description": "Cyan: live states, cursor light, data. Never a second brand color"
+    },
+    "signal-text": {
+      "$value": "{color.signal.700}",
+      "$description": "Cyan text on bg or surface"
+    },
+    "inverse-bg": {
+      "$value": "{color.gray.950}",
+      "$description": "Index chips, inverted tags"
+    },
+    "inverse-fg": {
+      "$value": "{color.gray.0}",
+      "$description": "Text on inverse-bg"
+    },
+    "success": {
+      "$value": "{color.green.700}",
+      "$description": "Success status text and icons. Always with an icon or a word, never color alone"
+    },
+    "warning": {
+      "$value": "{color.amber.700}",
+      "$description": "Warning status text and icons. Always with an icon or a word"
+    },
+    "danger": {
+      "$value": "{color.red.700}",
+      "$description": "Errors and destructive actions. Always with an icon or a word"
+    },
+    "dot": {
+      "$value": "#0A0A0C29",
+      "$description": "Dot field and dotted grid"
+    },
+    "scan": {
+      "$value": "#00000000",
+      "$description": "Scanlines (off in Clear)"
+    },
+    "sheen": {
+      "$value": "#0098C712",
+      "$description": "Light band that crosses heroes"
+    },
+    "selection": {
+      "$value": "#D4006F33",
+      "$description": "Text selection"
+    }
+  }
+}