@llmnative/react 1.28.0 → 1.29.0

package/dist/types/src/Theme.d.ts

@@ -14,6 +14,8 @@ export type ThemeMode = 'light' | 'dark' | 'system';
 export interface ColorScale {
     background?: string;
     foreground?: string;
+    /** Page floor behind cards and panels (`bg-canvas`). Falls back to `background` when not set. */
+    canvas?: string;
     card?: string;
     cardForeground?: string;
     popover?: string;
@@ -404,7 +406,7 @@ export interface ThemeDefinition {
     components: Theme;
 }
 /** IDs of built-in themes. Extend by adding entries to BUILT_IN_THEMES. */
-export declare const BUILT_IN_THEME_IDS: readonly ["default", "flat", "cyber", "vscode-dark-plus", "vscode-light-plus", "tokyo-night", "tokyo-night-light"];
+export declare const BUILT_IN_THEME_IDS: readonly ["default", "flat", "cyber", "vscode-dark-modern", "vscode-light-modern", "vscode-dark-plus", "vscode-light-plus", "tokyo-night", "tokyo-night-light"];
 export type BuiltInThemeId = (typeof BUILT_IN_THEME_IDS)[number];
 export type AppThemeProviderConfig = BuiltInThemeId | ThemeDefinition | {
     defaultMode?: ThemeMode;

package/dist/types/themes/vscode-dark-modern.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeDefinition } from '../src/Theme';
+declare const definition: ThemeDefinition;
+export default definition;

package/dist/types/themes/vscode-light-modern.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeDefinition } from '../src/Theme';
+declare const definition: ThemeDefinition;
+export default definition;

package/llms-full.txt

@@ -77,7 +77,10 @@ import '@llmnative/react/dist/index.css'
 }
 ```
 
-Built-in themes: `default`, `flat`, `cyber`.
+Built-in themes: `default`, `flat`, `cyber`, `vscode-dark-modern`, `vscode-light-modern`, `vscode-dark-plus`, `vscode-light-plus`, `tokyo-night`, `tokyo-night-light`.
+The VS Code and Tokyo Night themes are compiled from the original VS Code theme JSON (`scripts/themes/vscode`), filling the keys a theme does not list with VS Code's color registry defaults; each one has both modes (`vscode-dark-*` starts dark, `vscode-light-*` light). Status colors (destructive/success/warning/info) stay the framework's.
+
+`ColorScale` tokens: `background`, `foreground`, `canvas` (page floor behind cards and panels, `bg-canvas`; falls back to `background`), `card`, `popover`, `primary`, `secondary`, `muted`, `accent`, `destructive`, `success`, `warning`, `info` (each with its `*Foreground`), `border`, `input` (border of form fields), `ring`. A consumer bridging the tokens in its own `@theme inline` adds `--color-canvas: hsl(var(--rf-canvas, var(--rf-background)));`.
 
 ---
 
@@ -1034,7 +1037,7 @@ Configurazione API key in `Config.tsx`: `geminiApiKey`, `openaiApiKey`, `anthrop
 
 ```tsx
 const theme = useThemeController()
-theme.applyTheme('flat')     // 'default' | 'flat' | 'cyber' | custom
+theme.applyTheme('flat')     // BuiltInThemeId ('default' | 'flat' | 'cyber' | 'vscode-dark-modern' | …) | custom
 theme.setMode('dark')        // 'light' | 'dark' | 'system'
 
 const icons = useIconController()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llmnative/react",
-  "version": "1.28.0",
+  "version": "1.29.0",
   "description": "LLM-native React framework for deterministic UI generation. Data-driven by default, schema-driven optional. Ultra-low token consumption — built for AI agents, not just humans.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/scripts/cli/setup-project.js

@@ -409,6 +409,7 @@ function createSourceFiles(params) {
 @theme inline {
     --color-background:             hsl(var(--rf-background));
     --color-foreground:             hsl(var(--rf-foreground));
+    --color-canvas:                 hsl(var(--rf-canvas, var(--rf-background)));
     --color-card:                   hsl(var(--rf-card));
     --color-card-foreground:        hsl(var(--rf-card-foreground));
     --color-popover:                hsl(var(--rf-popover));

package/themes/default.ts

@@ -7,6 +7,7 @@ export const preset: ThemePresetConfig = {
     colors: {
         background:           '0 0% 100%',
         foreground:           '222.2 84% 4.9%',
+        canvas:               '210 40% 98%',
         card:                 '0 0% 100%',
         cardForeground:       '222.2 84% 4.9%',
         popover:              '0 0% 100%',
@@ -34,6 +35,7 @@ export const preset: ThemePresetConfig = {
     dark: {
         background:           '222.2 84% 4.9%',
         foreground:           '210 40% 98%',
+        canvas:               '222.2 84% 4.9%',
         card:                 '222.2 84% 4.9%',
         cardForeground:       '210 40% 98%',
         popover:              '222.2 84% 4.9%',

package/themes/tokyo-night-light.ts

@@ -1,3 +1,5 @@
+// Generated by scripts/themes/compile-vscode-themes.js from the VS Code themes
+// "Tokyo Night Light" (light) and "Tokyo Night" (dark). Do not edit: change the sources or the compiler.
 import baseTheme from './default';
 import type { ThemeDefinition } from '../src/Theme';
 
@@ -9,28 +11,48 @@ const definition: ThemeDefinition = {
         colors: {
             ...baseTheme.preset.colors,
             ...{
-    background: '231.4 16.3% 91.6%',
-    foreground: '228.6 26.2% 27.6%',
-    card: '226.7 12.3% 85.7%',
-    cardForeground: '224.3 17.6% 25.7%',
-    popover: '231.4 16.3% 91.6%',
-    popoverForeground: '224.3 17.6% 25.7%',
-    primary: '217.7 61.1% 41.4%',
-    primaryForeground: '0 0% 100%',
-    secondary: '226.7 12.3% 85.7%',
-    secondaryForeground: '224.3 17.6% 25.7%',
-    muted: '231.4 16.3% 91.6%',
-    mutedForeground: '232.5 6.7% 47.1%',
-    accent: '231.4 16.3% 91.6%',
-    accentForeground: '224.3 17.6% 25.7%',
-    border: '230 5.1% 76.9%',
-    input: '231.4 16.3% 91.6%',
-    ring: '224.3 17.6% 25.7%'
-},
+                background: '231.4 16.3% 91.6%',
+                foreground: '228.6 26.2% 27.6%',
+                canvas: '226.7 12.3% 85.7%',
+                card: '231.4 16.3% 91.6%',
+                cardForeground: '228.6 26.2% 27.6%',
+                popover: '226.7 12.3% 85.7%',
+                popoverForeground: '224.3 17.6% 25.7%',
+                primary: '217.7 46.1% 48%',
+                primaryForeground: '0 0% 100%',
+                secondary: '232.5 6.7% 47.1%',
+                secondaryForeground: '224.3 17.6% 25.7%',
+                muted: '231.4 13.2% 89.6%',
+                mutedForeground: '232.5 6.7% 47.1%',
+                accent: '231.4 13.2% 89.6%',
+                accentForeground: '224.3 17.6% 25.7%',
+                border: '230 5.1% 76.9%',
+                input: '230 5.1% 76.9%',
+                ring: '226.7 10.1% 82.5%'
+            },
         },
         dark: {
             ...baseTheme.preset.dark,
-            ...{},
+            ...{
+                background: '235 18.8% 12.5%',
+                foreground: '229.3 35.4% 75.1%',
+                canvas: '240 15.4% 10.2%',
+                card: '235 18.8% 12.5%',
+                cardForeground: '229.3 35.4% 75.1%',
+                popover: '240 15.4% 10.2%',
+                popoverForeground: '232.7 13.9% 53.5%',
+                primary: '223.1 44.3% 39.4%',
+                primaryForeground: '0 0% 100%',
+                secondary: '232.2 16.3% 27.6%',
+                secondaryForeground: '232.7 13.9% 53.5%',
+                muted: '240 15.6% 8.8%',
+                mutedForeground: '230.3 16.1% 37.8%',
+                accent: '240 15.6% 8.8%',
+                accentForeground: '229.3 35.4% 75.1%',
+                border: '240 11.1% 7.1%',
+                input: '240 14.3% 6.9%',
+                ring: '233.3 19.1% 18.4%'
+            },
         },
     },
 };

package/themes/tokyo-night.ts

@@ -1,3 +1,5 @@
+// Generated by scripts/themes/compile-vscode-themes.js from the VS Code themes
+// "Tokyo Night Light" (light) and "Tokyo Night" (dark). Do not edit: change the sources or the compiler.
 import baseTheme from './default';
 import type { ThemeDefinition } from '../src/Theme';
 
@@ -8,29 +10,49 @@ const definition: ThemeDefinition = {
         mode: 'dark',
         colors: {
             ...baseTheme.preset.colors,
-            ...{},
+            ...{
+                background: '231.4 16.3% 91.6%',
+                foreground: '228.6 26.2% 27.6%',
+                canvas: '226.7 12.3% 85.7%',
+                card: '231.4 16.3% 91.6%',
+                cardForeground: '228.6 26.2% 27.6%',
+                popover: '226.7 12.3% 85.7%',
+                popoverForeground: '224.3 17.6% 25.7%',
+                primary: '217.7 46.1% 48%',
+                primaryForeground: '0 0% 100%',
+                secondary: '232.5 6.7% 47.1%',
+                secondaryForeground: '224.3 17.6% 25.7%',
+                muted: '231.4 13.2% 89.6%',
+                mutedForeground: '232.5 6.7% 47.1%',
+                accent: '231.4 13.2% 89.6%',
+                accentForeground: '224.3 17.6% 25.7%',
+                border: '230 5.1% 76.9%',
+                input: '230 5.1% 76.9%',
+                ring: '226.7 10.1% 82.5%'
+            },
         },
         dark: {
             ...baseTheme.preset.dark,
             ...{
-    background: '235 18.8% 12.5%',
-    foreground: '229.3 35.4% 75.1%',
-    card: '240 15.4% 10.2%',
-    cardForeground: '232.7 13.9% 53.5%',
-    popover: '240 14.9% 9.2%',
-    popoverForeground: '232.7 13.9% 53.5%',
-    primary: '217.3 39.8% 55.7%',
-    primaryForeground: '0 0% 100%',
-    secondary: '240 15.4% 10.2%',
-    secondaryForeground: '232.7 13.9% 53.5%',
-    muted: '235.4 18.8% 13.5%',
-    mutedForeground: '230.3 16.1% 37.8%',
-    accent: '228.8 20% 15.7%',
-    accentForeground: '229.3 35.4% 75.1%',
-    border: '240 11.1% 7.1%',
-    input: '240 14.9% 9.2%',
-    ring: '228.7 72.6% 85.7%'
-},
+                background: '235 18.8% 12.5%',
+                foreground: '229.3 35.4% 75.1%',
+                canvas: '240 15.4% 10.2%',
+                card: '235 18.8% 12.5%',
+                cardForeground: '229.3 35.4% 75.1%',
+                popover: '240 15.4% 10.2%',
+                popoverForeground: '232.7 13.9% 53.5%',
+                primary: '223.1 44.3% 39.4%',
+                primaryForeground: '0 0% 100%',
+                secondary: '232.2 16.3% 27.6%',
+                secondaryForeground: '232.7 13.9% 53.5%',
+                muted: '240 15.6% 8.8%',
+                mutedForeground: '230.3 16.1% 37.8%',
+                accent: '240 15.6% 8.8%',
+                accentForeground: '229.3 35.4% 75.1%',
+                border: '240 11.1% 7.1%',
+                input: '240 14.3% 6.9%',
+                ring: '233.3 19.1% 18.4%'
+            },
         },
     },
 };

package/themes/vscode-dark-modern.ts

@@ -0,0 +1,60 @@
+// Generated by scripts/themes/compile-vscode-themes.js from the VS Code themes
+// "Light Modern" (light) and "Dark Modern" (dark). Do not edit: change the sources or the compiler.
+import baseTheme from './default';
+import type { ThemeDefinition } from '../src/Theme';
+
+const definition: ThemeDefinition = {
+    ...baseTheme,
+    preset: {
+        ...baseTheme.preset,
+        mode: 'dark',
+        colors: {
+            ...baseTheme.preset.colors,
+            ...{
+                background: '0 0% 100%',
+                foreground: '0 0% 23.1%',
+                canvas: '0 0% 97.3%',
+                card: '0 0% 100%',
+                cardForeground: '0 0% 23.1%',
+                popover: '0 0% 100%',
+                popoverForeground: '0 0% 23.1%',
+                primary: '209 100% 36.1%',
+                primaryForeground: '0 0% 100%',
+                secondary: '0 0% 89.8%',
+                secondaryForeground: '0 0% 23.1%',
+                muted: '0 0% 94.9%',
+                mutedForeground: '0 0% 23.1%',
+                accent: '0 0% 94.9%',
+                accentForeground: '0 0% 23.1%',
+                border: '0 0% 89.8%',
+                input: '0 0% 80.8%',
+                ring: '209 100% 36.1%'
+            },
+        },
+        dark: {
+            ...baseTheme.preset.dark,
+            ...{
+                background: '0 0% 12.2%',
+                foreground: '0 0% 80%',
+                canvas: '0 0% 9.4%',
+                card: '0 0% 12.2%',
+                cardForeground: '0 0% 80%',
+                popover: '0 0% 12.2%',
+                popoverForeground: '0 0% 80%',
+                primary: '206 100% 41.6%',
+                primaryForeground: '0 0% 100%',
+                secondary: '195 4.5% 17.3%',
+                secondaryForeground: '0 0% 80%',
+                muted: '195 4.5% 17.3%',
+                mutedForeground: '0 0% 61.6%',
+                accent: '195 4.5% 17.3%',
+                accentForeground: '0 0% 80%',
+                border: '0 0% 16.9%',
+                input: '0 0% 23.5%',
+                ring: '206 100% 41.6%'
+            },
+        },
+    },
+};
+
+export default definition;

package/themes/vscode-dark-plus.ts

@@ -1,3 +1,5 @@
+// Generated by scripts/themes/compile-vscode-themes.js from the VS Code themes
+// "Light+" (light) and "Dark+" (dark). Do not edit: change the sources or the compiler.
 import baseTheme from './default';
 import type { ThemeDefinition } from '../src/Theme';
 
@@ -8,20 +10,49 @@ const definition: ThemeDefinition = {
         mode: 'dark',
         colors: {
             ...baseTheme.preset.colors,
-            ...{},
+            ...{
+                background: '0 0% 100%',
+                foreground: '0 0% 0%',
+                canvas: '0 0% 95.3%',
+                card: '0 0% 100%',
+                cardForeground: '0 0% 0%',
+                popover: '0 0% 100%',
+                popoverForeground: '0 0% 38%',
+                primary: '204.1 100% 40%',
+                primaryForeground: '0 0% 100%',
+                secondary: '0 0% 91%',
+                secondaryForeground: '0 0% 38%',
+                muted: '0 0% 91%',
+                mutedForeground: '0 0% 44.3%',
+                accent: '0 0% 91%',
+                accentForeground: '0 0% 38%',
+                border: '0 0% 82.7%',
+                input: '0 0% 80.8%',
+                ring: '204.1 100% 47.3%'
+            },
         },
         dark: {
             ...baseTheme.preset.dark,
             ...{
-    background: '0 0% 11.8%',
-    foreground: '0 0% 83.1%',
-    cardForeground: '0 0% 83.1%',
-    popover: '240 1.3% 14.7%',
-    popoverForeground: '0 0% 80%',
-    primaryForeground: '0 0% 11.8%',
-    secondaryForeground: '0 0% 83.1%',
-    accentForeground: '0 0% 83.1%'
-},
+                background: '0 0% 11.8%',
+                foreground: '0 0% 83.1%',
+                canvas: '0 0% 11.8%',
+                card: '240 1.3% 14.7%',
+                cardForeground: '0 0% 83.1%',
+                popover: '240 1.3% 14.7%',
+                popoverForeground: '0 0% 80%',
+                primary: '204.1 83.5% 33.3%',
+                primaryForeground: '0 0% 100%',
+                secondary: '195 4.5% 17.3%',
+                secondaryForeground: '0 0% 80%',
+                muted: '195 4.5% 17.3%',
+                mutedForeground: '240 0.5% 60.6%',
+                accent: '195 4.5% 17.3%',
+                accentForeground: '0 0% 80%',
+                border: '0 0% 27.1%',
+                input: '0 0% 23.5%',
+                ring: '204.1 100% 41.6%'
+            },
         },
     },
 };

package/themes/vscode-light-modern.ts

@@ -0,0 +1,60 @@
+// Generated by scripts/themes/compile-vscode-themes.js from the VS Code themes
+// "Light Modern" (light) and "Dark Modern" (dark). Do not edit: change the sources or the compiler.
+import baseTheme from './default';
+import type { ThemeDefinition } from '../src/Theme';
+
+const definition: ThemeDefinition = {
+    ...baseTheme,
+    preset: {
+        ...baseTheme.preset,
+        mode: 'light',
+        colors: {
+            ...baseTheme.preset.colors,
+            ...{
+                background: '0 0% 100%',
+                foreground: '0 0% 23.1%',
+                canvas: '0 0% 97.3%',
+                card: '0 0% 100%',
+                cardForeground: '0 0% 23.1%',
+                popover: '0 0% 100%',
+                popoverForeground: '0 0% 23.1%',
+                primary: '209 100% 36.1%',
+                primaryForeground: '0 0% 100%',
+                secondary: '0 0% 89.8%',
+                secondaryForeground: '0 0% 23.1%',
+                muted: '0 0% 94.9%',
+                mutedForeground: '0 0% 23.1%',
+                accent: '0 0% 94.9%',
+                accentForeground: '0 0% 23.1%',
+                border: '0 0% 89.8%',
+                input: '0 0% 80.8%',
+                ring: '209 100% 36.1%'
+            },
+        },
+        dark: {
+            ...baseTheme.preset.dark,
+            ...{
+                background: '0 0% 12.2%',
+                foreground: '0 0% 80%',
+                canvas: '0 0% 9.4%',
+                card: '0 0% 12.2%',
+                cardForeground: '0 0% 80%',
+                popover: '0 0% 12.2%',
+                popoverForeground: '0 0% 80%',
+                primary: '206 100% 41.6%',
+                primaryForeground: '0 0% 100%',
+                secondary: '195 4.5% 17.3%',
+                secondaryForeground: '0 0% 80%',
+                muted: '195 4.5% 17.3%',
+                mutedForeground: '0 0% 61.6%',
+                accent: '195 4.5% 17.3%',
+                accentForeground: '0 0% 80%',
+                border: '0 0% 16.9%',
+                input: '0 0% 23.5%',
+                ring: '206 100% 41.6%'
+            },
+        },
+    },
+};
+
+export default definition;

package/themes/vscode-light-plus.ts

@@ -1,3 +1,5 @@
+// Generated by scripts/themes/compile-vscode-themes.js from the VS Code themes
+// "Light+" (light) and "Dark+" (dark). Do not edit: change the sources or the compiler.
 import baseTheme from './default';
 import type { ThemeDefinition } from '../src/Theme';
 
@@ -9,19 +11,48 @@ const definition: ThemeDefinition = {
         colors: {
             ...baseTheme.preset.colors,
             ...{
-    background: '0 0% 100%',
-    foreground: '0 0% 0%',
-    cardForeground: '0 0% 0%',
-    popoverForeground: '0 0% 0%',
-    primaryForeground: '0 0% 100%',
-    secondaryForeground: '0 0% 0%',
-    accent: '0 0% 91%',
-    accentForeground: '0 0% 0%'
-},
+                background: '0 0% 100%',
+                foreground: '0 0% 0%',
+                canvas: '0 0% 95.3%',
+                card: '0 0% 100%',
+                cardForeground: '0 0% 0%',
+                popover: '0 0% 100%',
+                popoverForeground: '0 0% 38%',
+                primary: '204.1 100% 40%',
+                primaryForeground: '0 0% 100%',
+                secondary: '0 0% 91%',
+                secondaryForeground: '0 0% 38%',
+                muted: '0 0% 91%',
+                mutedForeground: '0 0% 44.3%',
+                accent: '0 0% 91%',
+                accentForeground: '0 0% 38%',
+                border: '0 0% 82.7%',
+                input: '0 0% 80.8%',
+                ring: '204.1 100% 47.3%'
+            },
         },
         dark: {
             ...baseTheme.preset.dark,
-            ...{},
+            ...{
+                background: '0 0% 11.8%',
+                foreground: '0 0% 83.1%',
+                canvas: '0 0% 11.8%',
+                card: '240 1.3% 14.7%',
+                cardForeground: '0 0% 83.1%',
+                popover: '240 1.3% 14.7%',
+                popoverForeground: '0 0% 80%',
+                primary: '204.1 83.5% 33.3%',
+                primaryForeground: '0 0% 100%',
+                secondary: '195 4.5% 17.3%',
+                secondaryForeground: '0 0% 80%',
+                muted: '195 4.5% 17.3%',
+                mutedForeground: '240 0.5% 60.6%',
+                accent: '195 4.5% 17.3%',
+                accentForeground: '0 0% 80%',
+                border: '0 0% 27.1%',
+                input: '0 0% 23.5%',
+                ring: '204.1 100% 41.6%'
+            },
         },
     },
 };