release: WRNexusJS 0.2.57

.publish/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",
   "license": "MIT",

.publish/authz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/authz — part of the WrNexus framework.",
   "license": "MIT",

.publish/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/cli — part of the WrNexus framework.",
   "license": "MIT",
@@ -28,16 +28,16 @@
     "wrnexus": "./dist/index.js"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56",
+    "@wrnexus/core": "^0.2.57",
-    "@wrnexus/router": "^0.2.56",
+    "@wrnexus/router": "^0.2.57",
-    "@wrnexus/csr": "^0.2.56",
+    "@wrnexus/csr": "^0.2.57",
-    "@wrnexus/compiler": "^0.2.56",
+    "@wrnexus/compiler": "^0.2.57",
-    "@wrnexus/styles": "^0.2.56",
+    "@wrnexus/styles": "^0.2.57",
-    "@wrnexus/dev-server": "^0.2.56",
+    "@wrnexus/dev-server": "^0.2.57",
-    "@wrnexus/ui": "^0.2.56",
+    "@wrnexus/ui": "^0.2.57",
-    "@wrnexus/validation": "^0.2.56",
+    "@wrnexus/validation": "^0.2.57",
-    "@wrnexus/i18n": "^0.2.56",
+    "@wrnexus/i18n": "^0.2.57",
-    "@wrnexus/db": "^0.2.56"
+    "@wrnexus/db": "^0.2.57"
   },
   "files": [
     "dist"

.publish/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/compiler — part of the WrNexus framework.",
   "license": "MIT",

.publish/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/core — part of the WrNexus framework.",
   "license": "MIT",

.publish/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/csr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist"

.publish/db/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/db — part of the WrNexus framework.",
   "license": "MIT",

.publish/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/dev-server — part of the WrNexus framework.",
   "license": "MIT",
@@ -25,18 +25,18 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56",
+    "@wrnexus/core": "^0.2.57",
-    "@wrnexus/router": "^0.2.56",
+    "@wrnexus/router": "^0.2.57",
-    "@wrnexus/ssr": "^0.2.56",
+    "@wrnexus/ssr": "^0.2.57",
-    "@wrnexus/csr": "^0.2.56",
+    "@wrnexus/csr": "^0.2.57",
-    "@wrnexus/compiler": "^0.2.56",
+    "@wrnexus/compiler": "^0.2.57",
-    "@wrnexus/styles": "^0.2.56",
+    "@wrnexus/styles": "^0.2.57",
-    "@wrnexus/ui": "^0.2.56",
+    "@wrnexus/ui": "^0.2.57",
-    "@wrnexus/validation": "^0.2.56",
+    "@wrnexus/validation": "^0.2.57",
-    "@wrnexus/i18n": "^0.2.56",
+    "@wrnexus/i18n": "^0.2.57",
-    "@wrnexus/db": "^0.2.56",
+    "@wrnexus/db": "^0.2.57",
-    "@wrnexus/pubsub": "^0.2.56",
+    "@wrnexus/pubsub": "^0.2.57",
-    "@wrnexus/uploader": "^0.2.56"
+    "@wrnexus/uploader": "^0.2.57"
   },
   "files": [
     "dist"

.publish/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/encryption — part of the WrNexus framework.",
   "license": "MIT",

.publish/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist"

.publish/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/i18n — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist"

.publish/jwt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/jwt — part of the WrNexus framework.",
   "license": "MIT",

.publish/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/mobile — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/native": "^0.2.56"
+    "@wrnexus/native": "^0.2.57"
   },
   "files": [
     "dist"

.publish/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/native — part of the WrNexus framework.",
   "license": "MIT",

.publish/oauth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/oauth — part of the WrNexus framework.",
   "license": "MIT",

.publish/pubsub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/pubsub — part of the WrNexus framework.",
   "license": "MIT",

.publish/queue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/queue — part of the WrNexus framework.",
   "license": "MIT",

.publish/reactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/reactive — part of the WrNexus framework.",
   "license": "MIT",

.publish/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/router — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,8 +21,8 @@
     }
   },
   "dependencies": {
-    "@wrnexus/compiler": "^0.2.56",
+    "@wrnexus/compiler": "^0.2.57",
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist"

.publish/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/ssr — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist"

.publish/styles/README.md

@@ -106,6 +106,7 @@ Tokens are emitted as `--wire-<key>` custom properties, **except** the reserved
 type ThemeTokens = Record<string, string>;
 
 interface ThemeConfig {
+  palette?: ThemePaletteName | CustomThemePalette;
   default?: string; // theme used when no cookie is present
   themes?: Record<string, ThemeTokens>; // deep-merged over built-in light/dark
 }
@@ -117,7 +118,30 @@ interface ResolvedTheme {
 }
 ```
 
-Built-in token keys (both `light` and `dark`): `color-scheme`, `color-bg`, `color-surface`, `color-surface-2`, `color-text`, `color-muted`, `color-border`, `color-primary`, `color-primary-hover`, `color-primary-contrast`, `color-danger`, `color-success`, `color-warning`, `radius`, `radius-sm`, `font-sans`, `shadow-1`.
+Built-in palettes are `blue`, `indigo`, `violet`, `emerald`, `cyan`, `rose`,
+`amber`, and `slate`. Each supplies primary, secondary, info, success, warning,
+danger/error, hover, and contrast colors to every light/dark theme. Built-in
+token keys also include surfaces, text, borders, radii, fonts, and shadows.
+
+A custom palette is intentionally complete, so components never fall back to an
+unrelated blue status or action color:
+
+```ts
+theme: {
+  palette: {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    primaryContrast: "#ffffff",
+    secondary: "#db2777",
+    secondaryHover: "#be185d",
+    secondaryContrast: "#ffffff",
+    info: "#2563eb",
+    success: "#059669",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+}
+```
 
 The client runtime (`renderThemeRuntime`) exposes `window.wireTheme` with `{ get, set, toggle, bind, themes }`, wires up any `[data-wire-theme-toggle]` and `[data-wire-theme-set]` elements on load, and persists the choice to the `wire-theme` cookie (`max-age` 1 year, `samesite=lax`). `toggle()` cycles through the configured theme names in order.
 
@@ -135,6 +159,7 @@ export default {
   port: 3000,
   db: { driver: "sqlite", url: "app.db" },
   theme: {
+    palette: "violet",
     default: "dark",
     themes: {
       light: { "color-primary": "#7c3aed" }, // override one token; rest inherited

.publish/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/styles — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/uploader": "^0.2.56"
+    "@wrnexus/uploader": "^0.2.57"
   },
   "files": [
     "dist"

.publish/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/test — part of the WrNexus framework.",
   "license": "MIT",

.publish/tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/tracking — part of the WrNexus framework.",
   "license": "MIT",

.publish/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/ui — part of the WrNexus framework.",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "./ui.css": "./ui.css"
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist",

.publish/ui/ui.css

@@ -233,15 +233,15 @@
 }
 .wire-badge--success {
   background: var(--wire-color-success);
-  color: #05210f;
+  color: var(--wire-color-primary-contrast);
 }
 .wire-badge--danger {
   background: var(--wire-color-danger);
-  color: #fff;
+  color: var(--wire-color-primary-contrast);
 }
 .wire-badge--warning {
   background: var(--wire-color-warning);
-  color: #201400;
+  color: var(--wire-color-primary-contrast);
 }
 
 /* --- Alert ---------------------------------------------------------------- */
@@ -264,7 +264,7 @@
   color: var(--wire-color-muted);
 }
 .wire-alert--info {
-  border-left-color: var(--wire-color-primary);
+  border-left-color: var(--wire-color-info);
 }
 .wire-alert--success {
   border-left-color: var(--wire-color-success);
@@ -950,6 +950,52 @@
   --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* Tailwind v4 color bridge. Existing utility-authored components inherit the
+ * configured semantic palette without requiring generated per-palette markup. */
+[data-component] {
+  --color-violet-50: color-mix(in srgb, var(--wire-color-primary) 7%, white);
+  --color-violet-100: color-mix(in srgb, var(--wire-color-primary) 14%, white);
+  --color-violet-200: color-mix(in srgb, var(--wire-color-primary) 25%, white);
+  --color-violet-300: color-mix(in srgb, var(--wire-color-primary) 42%, white);
+  --color-violet-400: color-mix(in srgb, var(--wire-color-primary) 72%, white);
+  --color-violet-500: var(--wire-color-primary);
+  --color-violet-600: var(--wire-color-primary);
+  --color-violet-700: var(--wire-color-primary-hover);
+  --color-violet-800: color-mix(in srgb, var(--wire-color-primary-hover) 82%, black);
+  --color-violet-900: color-mix(in srgb, var(--wire-color-primary-hover) 65%, black);
+  --color-violet-950: color-mix(in srgb, var(--wire-color-primary-hover) 42%, black);
+  --color-indigo-50: var(--color-violet-50);
+  --color-indigo-100: var(--color-violet-100);
+  --color-indigo-200: var(--color-violet-200);
+  --color-indigo-300: var(--color-violet-300);
+  --color-indigo-400: var(--color-violet-400);
+  --color-indigo-500: var(--color-violet-500);
+  --color-indigo-600: var(--color-violet-600);
+  --color-indigo-700: var(--color-violet-700);
+  --color-indigo-800: var(--color-violet-800);
+  --color-indigo-900: var(--color-violet-900);
+  --color-indigo-950: var(--color-violet-950);
+  --color-blue-500: var(--wire-color-info);
+  --color-blue-600: var(--wire-color-info);
+  --color-blue-700: color-mix(in srgb, var(--wire-color-info) 80%, black);
+  --color-emerald-500: var(--wire-color-success);
+  --color-emerald-600: var(--wire-color-success);
+  --color-emerald-700: color-mix(in srgb, var(--wire-color-success) 80%, black);
+  --color-green-500: var(--wire-color-success);
+  --color-green-600: var(--wire-color-success);
+  --color-amber-500: var(--wire-color-warning);
+  --color-amber-600: var(--wire-color-warning);
+  --color-amber-700: color-mix(in srgb, var(--wire-color-warning) 80%, black);
+  --color-yellow-500: var(--wire-color-warning);
+  --color-red-400: color-mix(in srgb, var(--wire-color-danger) 75%, white);
+  --color-red-500: var(--wire-color-danger);
+  --color-red-600: var(--wire-color-danger);
+  --color-red-700: color-mix(in srgb, var(--wire-color-danger) 80%, black);
+  --color-rose-500: var(--wire-color-danger);
+  --color-rose-600: var(--wire-color-danger);
+  --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black);
+}
+
 [data-component] {
   animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both;
 }

.publish/uploader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/uploader — part of the WrNexus framework.",
   "license": "MIT",
@@ -21,7 +21,7 @@
     }
   },
   "dependencies": {
-    "@wrnexus/core": "^0.2.56"
+    "@wrnexus/core": "^0.2.57"
   },
   "files": [
     "dist"

.publish/validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "description": "@wrnexus/validation — part of the WrNexus framework.",
   "license": "MIT",

README.md

@@ -334,6 +334,10 @@ and own it (an app component shadows the library one of the same name).
 -merged over built-in light/dark), served at `/__wrnexus/theme.css`. The server
 sets `<html data-theme>` from the `wire-theme` cookie (no flash); a `theme-toggle`
 component (or any `[data-wire-theme-toggle]` element) switches and persists it.
+Choose a complete semantic palette with `theme: { palette: "violet" }`. Available
+palettes are `blue`, `indigo`, `violet`, `emerald`, `cyan`, `rose`, `amber`, and
+`slate`; a custom palette must provide every primary, secondary, info, success,
+warning, danger, hover, and contrast color.
 
 **Page layouts.** Add named layouts under `app/layouts/` — e.g. `public.wrn`,
 `dashboard.wrn`, `auth.wrn` — each a `component` with a `<slot></slot>` where the

docs/GUIDE.md

@@ -497,6 +497,7 @@ Themes are flat token maps rendered as `--wire-<key>` CSS variables (server + cl
 ```ts
 // wrnexus.config.ts
 theme: {
+  palette: "violet",              // blue | indigo | violet | emerald | cyan | rose | amber | slate
   default: "dark",                 // used when no cookie
   themes: {
     light: { "color-primary": "#2563eb" },   // deep-merged over built-in light
@@ -1266,6 +1267,7 @@ const config: AppConfig = {
   },
 
   theme: {
+    palette: "violet",
     default: "dark",                               // theme when no wire-theme cookie
     themes: { light: { "color-primary": "#2563eb" }, dark: { "color-primary": "#6c8cff" } },
   },

examples/basic-app/wrnexus.config.ts

@@ -32,14 +32,11 @@ const config: AppConfig = {
   },
 
   // Design-token themes. Built-in `light`/`dark` are provided; here we set the
-  // default and override a couple of tokens to show customization. Users can
+  // default and choose one of eight complete semantic color palettes. Users
-  // also redefine any `--wire-*` variable in their own CSS.
+  // can still override individual tokens through `themes` when needed.
   theme: {
+    palette: "violet",
     default: "dark",
-    themes: {
-      light: { "color-primary": "#2563eb" },
-      dark: { "color-primary": "#6c8cff" },
-    },
   },
 
   // Database connection for `wrnexus db` migrations (and, later, ctx.db).

packages/ai/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ai",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "description": "Zero-dependency Claude (Anthropic) client for WrNexus apps.",

packages/authz/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/authz",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/cli",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/cli/src/update.ts

@@ -575,6 +575,15 @@ const MIGRATIONS: Migration[] = [
       // No generated application files require automatic migration.
     },
   },
+  {
+    version: "0.2.57",
+    id: "semantic-theme-palettes",
+    description:
+      "Adds eight semantic UI palettes and validated complete custom palette configuration.",
+    apply() {
+      // Existing theme configuration remains compatible; blue is the default palette.
+    },
+  },
 ];
 
 /** Release tooling uses this to require an explicit migration entry per version. */

packages/compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/compiler",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/core",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/csr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/csr",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/db/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/db",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/dev-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/dev-server",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/encryption/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/encryption",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/helpers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/helpers",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "description": "Safe convenience helpers for WrNexus request contexts and common application flows.",

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/i18n",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/jwt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/jwt",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/mobile",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/native",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/oauth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/oauth",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/pubsub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/pubsub",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/queue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/queue",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/reactive/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/reactive",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/router",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/ssr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ssr",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/styles/README.md

@@ -106,6 +106,7 @@ Tokens are emitted as `--wire-<key>` custom properties, **except** the reserved
 type ThemeTokens = Record<string, string>;
 
 interface ThemeConfig {
+  palette?: ThemePaletteName | CustomThemePalette;
   default?: string; // theme used when no cookie is present
   themes?: Record<string, ThemeTokens>; // deep-merged over built-in light/dark
 }
@@ -117,7 +118,30 @@ interface ResolvedTheme {
 }
 ```
 
-Built-in token keys (both `light` and `dark`): `color-scheme`, `color-bg`, `color-surface`, `color-surface-2`, `color-text`, `color-muted`, `color-border`, `color-primary`, `color-primary-hover`, `color-primary-contrast`, `color-danger`, `color-success`, `color-warning`, `radius`, `radius-sm`, `font-sans`, `shadow-1`.
+Built-in palettes are `blue`, `indigo`, `violet`, `emerald`, `cyan`, `rose`,
+`amber`, and `slate`. Each supplies primary, secondary, info, success, warning,
+danger/error, hover, and contrast colors to every light/dark theme. Built-in
+token keys also include surfaces, text, borders, radii, fonts, and shadows.
+
+A custom palette is intentionally complete, so components never fall back to an
+unrelated blue status or action color:
+
+```ts
+theme: {
+  palette: {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    primaryContrast: "#ffffff",
+    secondary: "#db2777",
+    secondaryHover: "#be185d",
+    secondaryContrast: "#ffffff",
+    info: "#2563eb",
+    success: "#059669",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+}
+```
 
 The client runtime (`renderThemeRuntime`) exposes `window.wireTheme` with `{ get, set, toggle, bind, themes }`, wires up any `[data-wire-theme-toggle]` and `[data-wire-theme-set]` elements on load, and persists the choice to the `wire-theme` cookie (`max-age` 1 year, `samesite=lax`). `toggle()` cycles through the configured theme names in order.
 
@@ -135,6 +159,7 @@ export default {
   port: 3000,
   db: { driver: "sqlite", url: "app.db" },
   theme: {
+    palette: "violet",
     default: "dark",
     themes: {
       light: { "color-primary": "#7c3aed" }, // override one token; rest inherited

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/styles",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "type": "module",
   "main": "src/index.ts",
   "exports": {

packages/styles/src/index.ts

@@ -19,9 +19,17 @@ export { loadAppConfig, loadRawConfig, headToString, resolveProfile, loadEnv } f
 export { findStyleEntry, bundleCss } from "./styles.ts";
 export type { FontConfig, GoogleFont, LocalFontFace, FontDisplay } from "./fonts.ts";
 export { renderFontHead, renderProductionFontHead, fontCspSources } from "./fonts.ts";
-export type { ThemeConfig, ThemeTokens, ResolvedTheme } from "./theme.ts";
+export type {
+  ThemeConfig,
+  ThemeTokens,
+  ResolvedTheme,
+  ThemePaletteName,
+  CustomThemePalette,
+} from "./theme.ts";
 export {
   DEFAULT_THEMES,
+  THEME_PALETTES,
+  THEME_PALETTE_NAMES,
   THEME_COOKIE,
   THEME_CSS_HREF,
   THEME_JS_HREF,

packages/styles/src/theme.ts

@@ -13,7 +13,36 @@
 
 export type ThemeTokens = Record<string, string>;
 
+export const THEME_PALETTE_NAMES = [
+  "blue",
+  "indigo",
+  "violet",
+  "emerald",
+  "cyan",
+  "rose",
+  "amber",
+  "slate",
+] as const;
+
+export type ThemePaletteName = (typeof THEME_PALETTE_NAMES)[number];
+
+/** Required semantic colors for a custom application palette. */
+export interface CustomThemePalette {
+  primary: string;
+  primaryHover: string;
+  primaryContrast: string;
+  secondary: string;
+  secondaryHover: string;
+  secondaryContrast: string;
+  info: string;
+  success: string;
+  warning: string;
+  danger: string;
+}
+
 export interface ThemeConfig {
+  /** Built-in palette name, or a complete custom semantic color palette. */
+  palette?: ThemePaletteName | CustomThemePalette;
   /** Name of the theme used when no `wire-theme` cookie is present. */
   default?: string;
   /** Named token maps. Deep-merged over the framework's built-in light/dark. */
@@ -31,6 +60,142 @@ export const THEME_COOKIE = "wire-theme";
 export const THEME_CSS_HREF = "/__wrnexus/theme.css";
 export const THEME_JS_HREF = "/__wrnexus/theme.js";
 
+export const THEME_PALETTES: Record<ThemePaletteName, CustomThemePalette> = {
+  blue: {
+    primary: "#2563eb",
+    primaryHover: "#1d4ed8",
+    primaryContrast: "#ffffff",
+    secondary: "#475569",
+    secondaryHover: "#334155",
+    secondaryContrast: "#ffffff",
+    info: "#0284c7",
+    success: "#16a34a",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  indigo: {
+    primary: "#4f46e5",
+    primaryHover: "#4338ca",
+    primaryContrast: "#ffffff",
+    secondary: "#7c3aed",
+    secondaryHover: "#6d28d9",
+    secondaryContrast: "#ffffff",
+    info: "#0284c7",
+    success: "#16a34a",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  violet: {
+    primary: "#7c3aed",
+    primaryHover: "#6d28d9",
+    primaryContrast: "#ffffff",
+    secondary: "#db2777",
+    secondaryHover: "#be185d",
+    secondaryContrast: "#ffffff",
+    info: "#2563eb",
+    success: "#059669",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  emerald: {
+    primary: "#059669",
+    primaryHover: "#047857",
+    primaryContrast: "#ffffff",
+    secondary: "#0f766e",
+    secondaryHover: "#115e59",
+    secondaryContrast: "#ffffff",
+    info: "#0284c7",
+    success: "#16a34a",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  cyan: {
+    primary: "#0891b2",
+    primaryHover: "#0e7490",
+    primaryContrast: "#ffffff",
+    secondary: "#2563eb",
+    secondaryHover: "#1d4ed8",
+    secondaryContrast: "#ffffff",
+    info: "#0284c7",
+    success: "#16a34a",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  rose: {
+    primary: "#e11d48",
+    primaryHover: "#be123c",
+    primaryContrast: "#ffffff",
+    secondary: "#9333ea",
+    secondaryHover: "#7e22ce",
+    secondaryContrast: "#ffffff",
+    info: "#2563eb",
+    success: "#059669",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  amber: {
+    primary: "#d97706",
+    primaryHover: "#b45309",
+    primaryContrast: "#ffffff",
+    secondary: "#92400e",
+    secondaryHover: "#78350f",
+    secondaryContrast: "#ffffff",
+    info: "#0284c7",
+    success: "#15803d",
+    warning: "#d97706",
+    danger: "#dc2626",
+  },
+  slate: {
+    primary: "#475569",
+    primaryHover: "#334155",
+    primaryContrast: "#ffffff",
+    secondary: "#0f172a",
+    secondaryHover: "#020617",
+    secondaryContrast: "#ffffff",
+    info: "#0369a1",
+    success: "#15803d",
+    warning: "#b45309",
+    danger: "#b91c1c",
+  },
+};
+
+function paletteTokens(palette: CustomThemePalette): ThemeTokens {
+  return {
+    "color-primary": palette.primary,
+    "color-primary-hover": palette.primaryHover,
+    "color-primary-contrast": palette.primaryContrast,
+    "color-secondary": palette.secondary,
+    "color-secondary-hover": palette.secondaryHover,
+    "color-secondary-contrast": palette.secondaryContrast,
+    "color-info": palette.info,
+    "color-success": palette.success,
+    "color-warning": palette.warning,
+    "color-danger": palette.danger,
+    "color-error": palette.danger,
+  };
+}
+
+function resolvePalette(value?: ThemeConfig["palette"]): CustomThemePalette {
+  if (!value) return THEME_PALETTES.blue;
+  if (typeof value === "string") {
+    const palette = THEME_PALETTES[value];
+    if (!palette) {
+      throw new Error(
+        `Unknown theme palette "${value}". Choose one of: ${THEME_PALETTE_NAMES.join(", ")}.`,
+      );
+    }
+    return palette;
+  }
+  const missing = Object.keys(THEME_PALETTES.blue).filter((key) => {
+    const color = value[key as keyof CustomThemePalette];
+    return typeof color !== "string" || !color.trim();
+  });
+  if (missing.length) {
+    throw new Error(`Custom theme palette is missing required colors: ${missing.join(", ")}.`);
+  }
+  return value;
+}
+
 /** Built-in themes so components have tokens out of the box. */
 export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
   light: {
@@ -44,9 +209,14 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
     "color-primary": "#2563eb",
     "color-primary-hover": "#1d4ed8",
     "color-primary-contrast": "#ffffff",
+    "color-secondary": "#475569",
+    "color-secondary-hover": "#334155",
+    "color-secondary-contrast": "#ffffff",
+    "color-info": "#0284c7",
     "color-danger": "#dc2626",
     "color-success": "#16a34a",
     "color-warning": "#d97706",
+    "color-error": "#dc2626",
     radius: "8px",
     "radius-sm": "5px",
     "font-sans": "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
@@ -63,9 +233,14 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
     "color-primary": "#6c8cff",
     "color-primary-hover": "#8aa2ff",
     "color-primary-contrast": "#0b1020",
+    "color-secondary": "#a78bfa",
+    "color-secondary-hover": "#c4b5fd",
+    "color-secondary-contrast": "#0b1020",
+    "color-info": "#38bdf8",
     "color-danger": "#f87171",
     "color-success": "#4ade80",
     "color-warning": "#fbbf24",
+    "color-error": "#f87171",
     radius: "10px",
     "radius-sm": "6px",
     "font-sans": "system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
@@ -75,13 +250,18 @@ export const DEFAULT_THEMES: Record<string, ThemeTokens> = {
 
 /** Merge the user's theme config over the built-in defaults. */
 export function resolveThemeConfig(config?: ThemeConfig): ResolvedTheme {
+  const semanticTokens = paletteTokens(resolvePalette(config?.palette));
   const themes: Record<string, ThemeTokens> = {};
   const names = new Set<string>([
     ...Object.keys(DEFAULT_THEMES),
     ...Object.keys(config?.themes ?? {}),
   ]);
   for (const name of names) {
-    themes[name] = { ...(DEFAULT_THEMES[name] ?? {}), ...(config?.themes?.[name] ?? {}) };
+    themes[name] = {
+      ...(DEFAULT_THEMES[name] ?? DEFAULT_THEMES.light),
+      ...semanticTokens,
+      ...(config?.themes?.[name] ?? {}),
+    };
   }
   const list = Object.keys(themes);
   const preferred = config?.default && themes[config.default] ? config.default : undefined;

packages/styles/test/theme.test.ts

@@ -1,11 +1,50 @@
 import { test, expect } from "bun:test";
 import {
+  THEME_PALETTE_NAMES,
+  THEME_PALETTES,
   resolveThemeConfig,
   resolveThemeName,
   renderThemeCss,
   renderThemeRuntime,
 } from "../src/index.ts";
 
+test("ships eight complete semantic color palettes", () => {
+  expect(THEME_PALETTE_NAMES).toHaveLength(8);
+  for (const name of THEME_PALETTE_NAMES) {
+    expect(Object.keys(THEME_PALETTES[name])).toEqual([
+      "primary",
+      "primaryHover",
+      "primaryContrast",
+      "secondary",
+      "secondaryHover",
+      "secondaryContrast",
+      "info",
+      "success",
+      "warning",
+      "danger",
+    ]);
+  }
+});
+
+test("named palettes populate semantic tokens in every theme", () => {
+  const t = resolveThemeConfig({ palette: "violet" });
+  for (const name of t.names) {
+    expect(t.themes[name]["color-primary"]).toBe(THEME_PALETTES.violet.primary);
+    expect(t.themes[name]["color-secondary"]).toBe(THEME_PALETTES.violet.secondary);
+    expect(t.themes[name]["color-info"]).toBe(THEME_PALETTES.violet.info);
+    expect(t.themes[name]["color-error"]).toBe(THEME_PALETTES.violet.danger);
+  }
+});
+
+test("custom palettes require every semantic color", () => {
+  expect(() => resolveThemeConfig({ palette: { primary: "#000" } as never })).toThrow(
+    "primaryHover, primaryContrast, secondary",
+  );
+  expect(() => resolveThemeConfig({ palette: "unknown" as never })).toThrow(
+    "Unknown theme palette",
+  );
+});
+
 test("resolveThemeConfig merges user tokens over built-in light/dark", () => {
   const t = resolveThemeConfig({ default: "dark", themes: { dark: { "color-primary": "#abc" } } });
   expect(t.default).toBe("dark");

packages/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/test",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/tracking/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/tracking",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -62,6 +62,9 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced-
   expect(css).toContain("@keyframes wire-component-enter");
   expect(css).toContain("@keyframes wire-dialog-enter");
   expect(css).toContain("@media (hover: hover) and (pointer: fine)");
+  expect(css).toContain("--color-violet-600: var(--wire-color-primary)");
+  expect(css).toContain("--color-blue-600: var(--wire-color-info)");
+  expect(css).toContain("--color-red-600: var(--wire-color-danger)");
 });
 
 test.each(uiComponentNames())("bundled UI component %s compiles", (name) => {

packages/ui/ui.css

@@ -233,15 +233,15 @@
 }
 .wire-badge--success {
   background: var(--wire-color-success);
-  color: #05210f;
+  color: var(--wire-color-primary-contrast);
 }
 .wire-badge--danger {
   background: var(--wire-color-danger);
-  color: #fff;
+  color: var(--wire-color-primary-contrast);
 }
 .wire-badge--warning {
   background: var(--wire-color-warning);
-  color: #201400;
+  color: var(--wire-color-primary-contrast);
 }
 
 /* --- Alert ---------------------------------------------------------------- */
@@ -264,7 +264,7 @@
   color: var(--wire-color-muted);
 }
 .wire-alert--info {
-  border-left-color: var(--wire-color-primary);
+  border-left-color: var(--wire-color-info);
 }
 .wire-alert--success {
   border-left-color: var(--wire-color-success);
@@ -950,6 +950,52 @@
   --wire-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
 }
 
+/* Tailwind v4 color bridge. Existing utility-authored components inherit the
+ * configured semantic palette without requiring generated per-palette markup. */
+[data-component] {
+  --color-violet-50: color-mix(in srgb, var(--wire-color-primary) 7%, white);
+  --color-violet-100: color-mix(in srgb, var(--wire-color-primary) 14%, white);
+  --color-violet-200: color-mix(in srgb, var(--wire-color-primary) 25%, white);
+  --color-violet-300: color-mix(in srgb, var(--wire-color-primary) 42%, white);
+  --color-violet-400: color-mix(in srgb, var(--wire-color-primary) 72%, white);
+  --color-violet-500: var(--wire-color-primary);
+  --color-violet-600: var(--wire-color-primary);
+  --color-violet-700: var(--wire-color-primary-hover);
+  --color-violet-800: color-mix(in srgb, var(--wire-color-primary-hover) 82%, black);
+  --color-violet-900: color-mix(in srgb, var(--wire-color-primary-hover) 65%, black);
+  --color-violet-950: color-mix(in srgb, var(--wire-color-primary-hover) 42%, black);
+  --color-indigo-50: var(--color-violet-50);
+  --color-indigo-100: var(--color-violet-100);
+  --color-indigo-200: var(--color-violet-200);
+  --color-indigo-300: var(--color-violet-300);
+  --color-indigo-400: var(--color-violet-400);
+  --color-indigo-500: var(--color-violet-500);
+  --color-indigo-600: var(--color-violet-600);
+  --color-indigo-700: var(--color-violet-700);
+  --color-indigo-800: var(--color-violet-800);
+  --color-indigo-900: var(--color-violet-900);
+  --color-indigo-950: var(--color-violet-950);
+  --color-blue-500: var(--wire-color-info);
+  --color-blue-600: var(--wire-color-info);
+  --color-blue-700: color-mix(in srgb, var(--wire-color-info) 80%, black);
+  --color-emerald-500: var(--wire-color-success);
+  --color-emerald-600: var(--wire-color-success);
+  --color-emerald-700: color-mix(in srgb, var(--wire-color-success) 80%, black);
+  --color-green-500: var(--wire-color-success);
+  --color-green-600: var(--wire-color-success);
+  --color-amber-500: var(--wire-color-warning);
+  --color-amber-600: var(--wire-color-warning);
+  --color-amber-700: color-mix(in srgb, var(--wire-color-warning) 80%, black);
+  --color-yellow-500: var(--wire-color-warning);
+  --color-red-400: color-mix(in srgb, var(--wire-color-danger) 75%, white);
+  --color-red-500: var(--wire-color-danger);
+  --color-red-600: var(--wire-color-danger);
+  --color-red-700: color-mix(in srgb, var(--wire-color-danger) 80%, black);
+  --color-rose-500: var(--wire-color-danger);
+  --color-rose-600: var(--wire-color-danger);
+  --color-rose-700: color-mix(in srgb, var(--wire-color-danger) 80%, black);
+}
+
 [data-component] {
   animation: wire-component-enter var(--wire-motion-slow) var(--wire-ease-emphasized) both;
 }

packages/uploader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/uploader",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/validation",
-  "version": "0.2.56",
+  "version": "0.2.57",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

update-package-versions.mjs

@@ -1,7 +1,7 @@
 import { existsSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
 
-const version = "0.2.56";
+const version = "0.2.57";
 
 const dependencyGroups = [
   "dependencies",