@tutti-os/ui-system 0.0.229 → 0.0.231

package/dist/styles/generated/renderer-theme.css

@@ -0,0 +1,56 @@
+/* This file is generated from ../tokens/renderer-theme.json. Do not edit it directly. */
+:root {
+  --renderer-accent: rgb(65 130 245);
+  --renderer-accent-pressed: rgb(53 110 222);
+  --renderer-background: oklch(0.986 0.004 84);
+  --renderer-background-fronted: rgb(255 255 255 / 1);
+  --renderer-background-panel: rgb(248 250 252);
+  --renderer-border: oklch(0.904 0.005 252);
+  --renderer-danger: rgb(220 38 38);
+  --renderer-foreground: oklch(0.248 0.016 258);
+  --renderer-muted: rgb(60 60 60 / 50%);
+  --renderer-panel: oklch(0.975 0.004 84 / 92%);
+  --renderer-scrim: rgb(0 0 0 / 60%);
+  --renderer-scrim-strong: rgb(0 0 0 / 64%);
+  --renderer-success: rgb(34 197 94);
+  --renderer-text-primary: rgb(60 60 60);
+  --renderer-text-secondary: rgb(60 60 60 / 70%);
+}
+
+:root[data-theme="dark"] {
+  --renderer-accent: rgb(90 155 255);
+  --renderer-accent-pressed: rgb(79 143 255);
+  --renderer-background: oklch(0.192 0.008 255);
+  --renderer-background-fronted: rgb(51 51 51 / 1);
+  --renderer-background-panel: rgb(42 42 43);
+  --renderer-border: oklch(0.352 0.012 255);
+  --renderer-danger: rgb(244 91 91);
+  --renderer-foreground: oklch(0.955 0.004 84);
+  --renderer-muted: rgb(255 255 255 / 50%);
+  --renderer-panel: oklch(0.236 0.009 255 / 92%);
+  --renderer-scrim: rgb(0 0 0 / 60%);
+  --renderer-scrim-strong: rgb(0 0 0 / 64%);
+  --renderer-success: rgb(74 222 128);
+  --renderer-text-primary: rgb(255 255 255);
+  --renderer-text-secondary: rgb(255 255 255 / 70%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --renderer-accent: rgb(90 155 255);
+    --renderer-accent-pressed: rgb(79 143 255);
+    --renderer-background: oklch(0.192 0.008 255);
+    --renderer-background-fronted: rgb(51 51 51 / 1);
+    --renderer-background-panel: rgb(42 42 43);
+    --renderer-border: oklch(0.352 0.012 255);
+    --renderer-danger: rgb(244 91 91);
+    --renderer-foreground: oklch(0.955 0.004 84);
+    --renderer-muted: rgb(255 255 255 / 50%);
+    --renderer-panel: oklch(0.236 0.009 255 / 92%);
+    --renderer-scrim: rgb(0 0 0 / 60%);
+    --renderer-scrim-strong: rgb(0 0 0 / 64%);
+    --renderer-success: rgb(74 222 128);
+    --renderer-text-primary: rgb(255 255 255);
+    --renderer-text-secondary: rgb(255 255 255 / 70%);
+  }
+}

package/dist/styles/native.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/styles/native.css.d.ts

@@ -0,0 +1 @@
+declare module "@tutti-os/ui-system/native.css";

package/dist/styles/theme.css

@@ -1,3 +1,5 @@
+@import "./generated/renderer-theme.css";
+
 :root {
   --font-sans-system:
     "Lexend Variable", "Lexend", -apple-system, BlinkMacSystemFont,
@@ -17,16 +19,16 @@
 
   --radius: 0.625rem;
 
-  --background: oklch(0.986 0.004 84);
-  --background-panel: rgb(248 250 252);
+  --background: var(--renderer-background);
+  --background-panel: var(--renderer-background-panel);
   --background-1: rgb(244 245 247);
   --background-session-flow: rgb(252 253 255);
   --background-session-sidepanel: rgb(244 245 247);
-  --background-fronted: rgb(255 255 255 / 1);
+  --background-fronted: var(--renderer-background-fronted);
   --background-soft: oklch(0.968 0.006 84);
   --background-board-card: rgb(255 255 255 / 1);
-  --foreground: oklch(0.248 0.016 258);
-  --text-primary: rgb(60 60 60);
+  --foreground: var(--renderer-foreground);
+  --text-primary: var(--renderer-text-primary);
   --text-primary-hover: rgb(60 60 60 / 90%);
   --text-tertiary: rgb(60 60 60 / 50%);
   --text-placeholder: rgb(60 60 60 / 30%);
@@ -49,7 +51,7 @@
   --secondary-foreground: oklch(0.314 0.018 258);
   --muted: oklch(0.958 0.005 84);
   --muted-foreground: oklch(0.528 0.013 258);
-  --text-secondary: rgb(60 60 60 / 70%);
+  --text-secondary: var(--renderer-text-secondary);
   --text-disabled: rgb(60 60 60 / 30%);
   --rich-text-mention-app: rgb(191, 90, 242);
   --rich-text-mention-issue: var(--tutti-purple);
@@ -57,7 +59,7 @@
   --folder: rgb(80, 175, 238);
   --rich-text-folder: rgb(80, 175, 238);
   --rich-text-mention-file: rgb(80, 175, 238);
-  --accent-codex: rgb(65 130 245);
+  --accent-codex: var(--renderer-accent);
   --accent: var(--accent-codex);
   --accent-codex-border: color-mix(
     in srgb,
@@ -80,13 +82,13 @@
   --accent-foreground: oklch(0.302 0.02 258);
   --destructive: oklch(0.62 0.21 25);
   --destructive-foreground: oklch(0.985 0.004 25);
-  --state-danger: rgb(220 38 38);
+  --state-danger: var(--renderer-danger);
   --state-danger-hover: color-mix(
     in srgb,
     var(--state-danger) 90%,
     transparent
   );
-  --state-success: rgb(34 197 94);
+  --state-success: var(--renderer-success);
   --state-warning: rgb(234 121 8);
   --on-danger: rgb(220 38 38 / 8%);
   --on-danger-hover: color-mix(
@@ -94,7 +96,7 @@
     var(--on-danger) 92%,
     var(--state-danger)
   );
-  --border: oklch(0.904 0.005 252);
+  --border: var(--renderer-border);
   --border-1: rgb(60 60 60 / 8%);
   --border-2: rgb(60 60 60 / 8%);
   --line-1: var(--border-1);
@@ -109,13 +111,13 @@
     var(--accent-codex) 12%
   );
 
-  --panel: oklch(0.975 0.004 84 / 92%);
+  --panel: var(--renderer-panel);
   --panel-foreground: var(--foreground);
   --success: oklch(0.642 0.124 158);
   --success-foreground: oklch(0.985 0.004 145);
   --warning: oklch(0.774 0.116 86);
   --warning-foreground: oklch(0.29 0.05 84);
-  --backdrop: rgb(0 0 0 / 60%);
+  --backdrop: var(--renderer-scrim);
 
   --shadow-soft: 0 10px 28px rgb(0 0 0 / 5%);
   --shadow-panel: 0 20px 44px rgb(0 0 0 / 8%);
@@ -207,16 +209,16 @@
 }
 
 :root[data-theme="dark"] {
-  --background: oklch(0.192 0.008 255);
-  --background-panel: rgb(42 42 43);
+  --background: var(--renderer-background);
+  --background-panel: var(--renderer-background-panel);
   --background-1: rgb(24 24 24);
   --background-session-flow: rgb(24 24 24);
   --background-session-sidepanel: rgb(42 42 43);
-  --background-fronted: rgb(51 51 51 / 1);
+  --background-fronted: var(--renderer-background-fronted);
   --background-soft: oklch(0.224 0.01 255);
   --background-board-card: rgb(255 255 255 / 8%);
-  --foreground: oklch(0.955 0.004 84);
-  --text-primary: rgb(255 255 255);
+  --foreground: var(--renderer-foreground);
+  --text-primary: var(--renderer-text-primary);
   --text-primary-hover: rgb(255 255 255 / 90%);
   --text-tertiary: rgb(255 255 255 / 50%);
   --text-placeholder: rgb(255 255 255 / 30%);
@@ -239,7 +241,7 @@
   --secondary-foreground: var(--foreground);
   --muted: oklch(0.282 0.008 255);
   --muted-foreground: oklch(0.734 0.012 255);
-  --text-secondary: rgb(255 255 255 / 70%);
+  --text-secondary: var(--renderer-text-secondary);
   --text-disabled: rgb(255 255 255 / 30%);
   --rich-text-mention-app: rgb(191, 90, 242);
   --rich-text-mention-issue: var(--tutti-purple);
@@ -247,7 +249,7 @@
   --folder: rgb(80, 175, 238);
   --rich-text-folder: rgb(80, 175, 238);
   --rich-text-mention-file: rgb(80, 175, 238);
-  --accent-codex: rgb(90 155 255);
+  --accent-codex: var(--renderer-accent);
   --accent: var(--accent-codex);
   --accent-codex-border: color-mix(
     in srgb,
@@ -270,13 +272,13 @@
   --accent-foreground: var(--foreground);
   --destructive: oklch(0.672 0.172 25);
   --destructive-foreground: oklch(0.19 0.01 25);
-  --state-danger: rgb(244 91 91);
+  --state-danger: var(--renderer-danger);
   --state-danger-hover: color-mix(
     in srgb,
     var(--state-danger) 90%,
     transparent
   );
-  --state-success: rgb(74 222 128);
+  --state-success: var(--renderer-success);
   --state-warning: rgb(251 146 60);
   --on-danger: rgb(248 113 113 / 10%);
   --on-danger-hover: color-mix(
@@ -284,7 +286,7 @@
     var(--on-danger) 82%,
     var(--state-danger)
   );
-  --border: oklch(0.352 0.012 255);
+  --border: var(--renderer-border);
   --border-1: rgb(255 255 255 / 12%);
   --border-2: rgb(255 255 255 / 8%);
   --line-1: var(--border-1);
@@ -299,13 +301,13 @@
     var(--accent-codex) 12%
   );
 
-  --panel: oklch(0.236 0.009 255 / 92%);
+  --panel: var(--renderer-panel);
   --panel-foreground: var(--foreground);
   --success: oklch(0.702 0.124 158);
   --success-foreground: oklch(0.172 0.01 158);
   --warning: oklch(0.82 0.108 86);
   --warning-foreground: oklch(0.204 0.02 84);
-  --backdrop: rgb(0 0 0 / 60%);
+  --backdrop: var(--renderer-scrim);
 
   --shadow-soft: 0 14px 32px rgb(0 0 0 / 24%);
   --shadow-panel: 0 24px 52px rgb(0 0 0 / 34%);
@@ -387,16 +389,16 @@
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --background: oklch(0.192 0.008 255);
-    --background-panel: rgb(42 42 43);
+    --background: var(--renderer-background);
+    --background-panel: var(--renderer-background-panel);
     --background-1: rgb(24 24 24);
     --background-session-flow: rgb(24 24 24);
     --background-session-sidepanel: rgb(42 42 43);
-    --background-fronted: rgb(51 51 51 / 1);
+    --background-fronted: var(--renderer-background-fronted);
     --background-soft: oklch(0.224 0.01 255);
     --background-board-card: rgb(255 255 255 / 8%);
-    --foreground: oklch(0.955 0.004 84);
-    --text-primary: rgb(255 255 255);
+    --foreground: var(--renderer-foreground);
+    --text-primary: var(--renderer-text-primary);
     --text-primary-hover: rgb(255 255 255 / 90%);
     --text-tertiary: rgb(255 255 255 / 50%);
     --text-placeholder: rgb(255 255 255 / 30%);
@@ -419,7 +421,7 @@
     --secondary-foreground: var(--foreground);
     --muted: oklch(0.282 0.008 255);
     --muted-foreground: oklch(0.734 0.012 255);
-    --text-secondary: rgb(255 255 255 / 70%);
+    --text-secondary: var(--renderer-text-secondary);
     --text-disabled: rgb(255 255 255 / 30%);
     --rich-text-mention-app: rgb(191, 90, 242);
     --rich-text-mention-issue: var(--tutti-purple);
@@ -427,7 +429,7 @@
     --folder: rgb(80, 175, 238);
     --rich-text-folder: rgb(80, 175, 238);
     --rich-text-mention-file: rgb(80, 175, 238);
-    --accent-codex: rgb(90 155 255);
+    --accent-codex: var(--renderer-accent);
     --accent: var(--accent-codex);
     --accent-codex-border: color-mix(
       in srgb,
@@ -450,13 +452,13 @@
     --accent-foreground: var(--foreground);
     --destructive: oklch(0.672 0.172 25);
     --destructive-foreground: oklch(0.19 0.01 25);
-    --state-danger: rgb(244 91 91);
+    --state-danger: var(--renderer-danger);
     --state-danger-hover: color-mix(
       in srgb,
       var(--state-danger) 90%,
       transparent
     );
-    --state-success: rgb(74 222 128);
+    --state-success: var(--renderer-success);
     --state-warning: rgb(251 146 60);
     --on-danger: rgb(248 113 113 / 10%);
     --on-danger-hover: color-mix(
@@ -464,7 +466,7 @@
       var(--on-danger) 82%,
       var(--state-danger)
     );
-    --border: oklch(0.352 0.012 255);
+    --border: var(--renderer-border);
     --border-1: rgb(255 255 255 / 12%);
     --border-2: rgb(255 255 255 / 8%);
     --line-1: var(--border-1);
@@ -479,13 +481,13 @@
       var(--accent-codex) 12%
     );
 
-    --panel: oklch(0.236 0.009 255 / 92%);
+    --panel: var(--renderer-panel);
     --panel-foreground: var(--foreground);
     --success: oklch(0.702 0.124 158);
     --success-foreground: oklch(0.172 0.01 158);
     --warning: oklch(0.82 0.108 86);
     --warning-foreground: oklch(0.204 0.02 84);
-    --backdrop: rgb(0 0 0 / 60%);
+    --backdrop: var(--renderer-scrim);
 
     --shadow-soft: 0 14px 32px rgb(0 0 0 / 24%);
     --shadow-panel: 0 24px 52px rgb(0 0 0 / 34%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tutti-os/ui-system",
-  "version": "0.0.229",
+  "version": "0.0.231",
   "private": false,
   "type": "module",
   "types": "./dist/index.d.ts",
@@ -42,6 +42,14 @@
       "types": "./dist/metadata/index.d.ts",
       "import": "./dist/metadata/index.js"
     },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js"
+    },
+    "./native.css": {
+      "types": "./dist/styles/native.css.d.ts",
+      "default": "./dist/styles/native.css"
+    },
     "./styles.css": "./dist/styles/index.css",
     "./utils": {
       "types": "./dist/utils.d.ts",
@@ -78,11 +86,13 @@
     "ws": "^8.20.1"
   },
   "devDependencies": {
+    "@gorhom/bottom-sheet": "5.2.14",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.5",
     "@types/ws": "^8.18.1",
+    "react-native": "0.86.0",
     "jsdom": "^27.2.0",
     "tsx": "^4.22.3",
     "typescript": "^5.8.3",
@@ -91,8 +101,18 @@
     "@tutti-os/config-tsconfig": "0.0.0"
   },
   "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=5 <6",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-native": ">=0.86 <0.87"
+  },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-native": {
+      "optional": true
+    }
   },
   "tutti": {
     "tailwindSourceRoot": "src"
@@ -120,6 +140,9 @@
       "metadata": [
         "./dist/metadata/index.d.ts"
       ],
+      "native": [
+        "./dist/native.d.ts"
+      ],
       "utils": [
         "./dist/utils.d.ts"
       ]

package/ui-system.md

@@ -90,6 +90,13 @@ The visual language that this package should serve is defined in [Desktop Visual
   Root runtime entry for shared primitives, icon components, and the small set of utility exports that primitives depend on
 - `@tutti-os/ui-system/styles.css`
   Shared stylesheet entry loaded by renderer shells
+- `@tutti-os/ui-system/native.css`
+  NativeWind stylesheet entry loaded once by React Native renderer shells
+- `@tutti-os/ui-system/native`
+  React Native primitive and semantic-token entry; this is separate from the
+  DOM component entry and must not be imported by desktop renderers. Native
+  consumers provide React Native and the documented Bottom Sheet runtime;
+  `react-dom` is optional for this platform-specific entry.
 - `@tutti-os/ui-system/components`
   Stable component barrel for tooling and rare category-focused imports
 - `@tutti-os/ui-system/icons`
@@ -107,6 +114,11 @@ Default consumption rules:
 
 - application code should prefer importing primitives and icons from `@tutti-os/ui-system`
 - renderer entrypoints should import `@tutti-os/ui-system/styles.css` once
+- React Native renderer entrypoints should import
+  `@tutti-os/ui-system/native.css` once
+- React Native components and screens should import Native primitives and
+  semantic tokens from `@tutti-os/ui-system/native`, never from a private app
+  palette
 - shadcn monorepo aliases may target `@tutti-os/ui-system/components` and `@tutti-os/ui-system/utils`
 - application runtime code must not import `@tutti-os/ui-system/dev-vite`
 - consumers must not deep import `@tutti-os/ui-system/src/*` or component file
@@ -276,7 +288,21 @@ host-owned caller logic.
 
 ## Token Rules
 
-- CSS variables are the source of truth for theme values
+- `src/tokens/renderer-theme.json` is the single semantic-token manifest for
+  the shared Web/Native subset. It generates Web CSS renderer variables and
+  Native light/dark palettes; renderer-specific literal values may differ when
+  their color syntaxes or current visual languages require it. Do not duplicate
+  these values in application code.
+- `NativeThemeProvider` resolves the operating-system scheme by default, or a
+  caller-provided `"light" | "dark"` product preference. Native primitives and
+  Mobile composition consume `useNativeTheme()` rather than application-local
+  palettes. `nativeTheme` remains only as a dark compatibility value for
+  non-rendering callers; this does not yet promise full Desktop/Mobile visual
+  parity.
+- `pnpm check:ui-boundaries` verifies generated renderer-token outputs stay in
+  sync with the manifest. Regenerate them with
+  `node tools/scripts/check-ui-renderer-tokens.mjs --write` before formatting
+  and committing a manifest change.
 - Shared theme styles must support both host-managed
   `html[data-theme="light" | "dark"]` and workspace-app CSS
   `prefers-color-scheme`; explicit `data-theme` values should override system
@@ -287,6 +313,22 @@ host-owned caller logic.
 - Build primitives for a calm workbench shell, not for marketing-card
   theatrics.
 
+### Native renderer review
+
+The DOM storyboard cannot render React Native primitives faithfully. Each
+public Native primitive must therefore have a concrete example in the Mobile
+development gallery and be reviewed on a Native renderer before it is promoted
+from experimental status. The gallery must import only the stable
+`@tutti-os/ui-system/native` entrypoint and render the primitive's public
+states; it is the Native counterpart of a DOM storyboard example, not a second
+component implementation.
+
+`NativeSheet` additionally requires the consuming app to install
+`@gorhom/bottom-sheet` and provide its `BottomSheetModalProvider` below a
+`GestureHandlerRootView`. Reanimated and Gesture Handler remain part of that
+Native renderer contract; application roots own provider placement, not the
+shared primitive.
+
 For cross-surface stacking, use shared semantic `z-index` tokens instead of
 local magic numbers. Current global layer tokens live in
 `packages/ui/system/src/styles/theme.css` and should be the default source of