bazilion 0.0.0

package/apps/web/src/styles.css

@@ -0,0 +1,449 @@
+@import 'tailwindcss';
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Neva Masquerade palette — dedicated to Baziu.
+   shadcn semantic tokens are remapped to Baziu colors below so every
+   `bg-card`, `text-muted-foreground`, `border-border`, `ring`, etc.
+   utility resolves to the Baziu palette without per-component edits.
+   The parallel @theme block exposes the raw palette as Tailwind utilities
+   (`bg-cream`, `font-display`, `border-frost`) for cases where the
+   semantic name doesn't match what we want to express.
+   NOT @theme inline: utilities must emit `var(--color-cream)` etc. so
+   :root.dark overrides flip them at runtime. With `inline`, Tailwind bakes
+   the literal hex into every utility at build time and dark-mode rules can't
+   reach them — `text-charcoal` would stay #2A1F16 on a dark background. */
+@theme {
+    --font-heading: 'DM Serif Display', Georgia, serif;
+    --font-sans: 'DM Sans', system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    --font-display: 'DM Serif Display', Georgia, serif;
+    --font-body: 'DM Sans', system-ui, sans-serif;
+    --font-mono-baziu: 'JetBrains Mono', 'Fira Code', monospace;
+
+    --color-cream: #F5F0E8;
+    --color-ivory: #FAF8F4;
+    --color-frost: #E8E2D8;
+    --color-fawn: #D4CAB8;
+    --color-chocolate: #3D2B1F;
+    --color-charcoal: #2A1F16;
+    --color-mocha: #7A6555;
+    --color-mocha-light: #9E8E7E;
+    --color-sapphire: #4A7C9B;
+    --color-sapphire-deep: #3A6580;
+    --color-sapphire-light: #6BA3C2;
+    --color-sapphire-glow: rgba(74, 124, 155, 0.12);
+    --color-rose-baziu: #C4878A;
+    --color-snow: #FFFFFF;
+
+    --shadow-baziu-sm: 0 1px 3px rgba(42, 31, 22, 0.06);
+    --shadow-baziu-md: 0 4px 12px rgba(42, 31, 22, 0.08);
+    --shadow-baziu-lg: 0 8px 30px rgba(42, 31, 22, 0.10);
+
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 16px;
+    --radius-xl: 22px;
+    --radius-2xl: 28px;
+    --radius-3xl: 36px;
+    --radius-4xl: 48px;
+}
+
+:root {
+    /* shadcn semantic tokens, remapped to Baziu colors */
+    --background: #F5F0E8;          /* cream */
+    --foreground: #3D2B1F;          /* chocolate */
+    --card: #FFFFFF;                /* snow */
+    --card-foreground: #3D2B1F;
+    --popover: #FFFFFF;
+    --popover-foreground: #3D2B1F;
+    --primary: #4A7C9B;             /* sapphire */
+    --primary-foreground: #FFFFFF;
+    --secondary: #FAF8F4;           /* ivory */
+    --secondary-foreground: #3D2B1F;
+    --muted: #FAF8F4;
+    --muted-foreground: #9E8E7E;    /* mocha-light */
+    --accent: rgba(74, 124, 155, 0.12); /* sapphire-glow */
+    --accent-foreground: #3A6580;   /* sapphire-deep */
+    --destructive: #9B3D3D;
+    --border: #E8E2D8;              /* frost */
+    --input: #E8E2D8;
+    --ring: #4A7C9B;                /* sapphire focus ring */
+    --chart-1: #4A7C9B;
+    --chart-2: #C4878A;
+    --chart-3: #7A6555;
+    --chart-4: #D4CAB8;
+    --chart-5: #6BA3C2;
+    --radius: 16px;
+    --sidebar: #FAF8F4;
+    --sidebar-foreground: #3D2B1F;
+    --sidebar-primary: #4A7C9B;
+    --sidebar-primary-foreground: #FFFFFF;
+    --sidebar-accent: rgba(74, 124, 155, 0.12);
+    --sidebar-accent-foreground: #3A6580;
+    --sidebar-border: #E8E2D8;
+    --sidebar-ring: #4A7C9B;
+}
+
+/* Dark theme — "Mask & Moonlight".
+   A Neva Masquerade after dark: the seal-point mask becomes the page,
+   cream body fur becomes text, sapphire eyes glow brighter against the
+   dark fur. Flips both the raw palette tokens (so component CSS using
+   var(--color-snow)/var(--color-chocolate) etc. auto-inverts) AND the
+   shadcn semantic tokens (so Tailwind utilities like bg-card/bg-muted
+   resolve correctly). Applied via .dark on <html> by the pre-hydration
+   script in __root.tsx — it picks 'system' / 'light' / 'dark' from
+   localStorage and falls back to prefers-color-scheme. */
+:root.dark {
+    /* Raw palette — re-mapped to the dark side of Baziu */
+    --color-cream: #1A140F;
+    --color-ivory: #211A13;
+    --color-frost: #3B2E24;
+    --color-fawn: #5C4A3D;
+    --color-chocolate: #F5F0E8;
+    --color-charcoal: #FAF8F4;
+    --color-mocha: #C4B3A0;
+    --color-mocha-light: #A89789;
+    --color-sapphire: #7BB4D2;
+    --color-sapphire-deep: #5E9BBA;
+    --color-sapphire-light: #A0CEE3;
+    --color-sapphire-glow: rgba(123, 180, 210, 0.18);
+    --color-rose-baziu: #D89A9D;
+    --color-snow: #2A211A;
+
+    --shadow-baziu-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
+    --shadow-baziu-md: 0 4px 12px rgba(0, 0, 0, 0.5);
+    --shadow-baziu-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
+
+    /* shadcn semantic tokens */
+    --background: #1A140F;
+    --foreground: #F5F0E8;
+    --card: #2A211A;
+    --card-foreground: #F5F0E8;
+    --popover: #2A211A;
+    --popover-foreground: #F5F0E8;
+    --primary: #7BB4D2;
+    --primary-foreground: #0F0A07;
+    --secondary: #211A13;
+    --secondary-foreground: #F5F0E8;
+    --muted: #211A13;
+    --muted-foreground: #A89789;
+    --accent: rgba(123, 180, 210, 0.18);
+    --accent-foreground: #A0CEE3;
+    --destructive: #D87878;
+    --border: #3B2E24;
+    --input: #3B2E24;
+    --ring: #7BB4D2;
+    --chart-1: #7BB4D2;
+    --chart-2: #D89A9D;
+    --chart-3: #C4B3A0;
+    --chart-4: #5C4A3D;
+    --chart-5: #A0CEE3;
+    --sidebar: #1F1812;
+    --sidebar-foreground: #F5F0E8;
+    --sidebar-primary: #7BB4D2;
+    --sidebar-primary-foreground: #0F0A07;
+    --sidebar-accent: rgba(123, 180, 210, 0.18);
+    --sidebar-accent-foreground: #A0CEE3;
+    --sidebar-border: #3B2E24;
+    --sidebar-ring: #7BB4D2;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-body);
+    font-size: 15px;
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    min-height: 100vh;
+    }
+  html {
+    @apply font-sans;
+    overflow-y: scroll;
+    scrollbar-gutter: stable;
+    }
+  /* Subtle paper grain — the single most distinctive Baziu signal. */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    opacity: 0.025;
+    pointer-events: none;
+    z-index: 9999;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+    background-size: 256px;
+    }
+  h1, h2, h3 {
+    font-family: var(--font-display);
+    color: var(--color-charcoal);
+    font-weight: 400;
+    letter-spacing: -0.01em;
+    }
+  h1 { font-size: 2rem; margin-bottom: 0.25rem; }
+  h2 { font-size: 1.5rem; }
+  h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--color-mocha); }
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.88em;
+    background: var(--color-frost);
+    padding: 0.15em 0.4em;
+    border-radius: var(--radius-sm);
+    color: var(--color-mocha);
+    }
+  a {
+    color: var(--color-sapphire);
+    text-decoration: none;
+    transition: color 0.2s;
+    }
+  a:hover { color: var(--color-sapphire-deep); }
+}
+
+@layer components {
+  /* --- forms --- */
+  label { display: block; margin: 0.6rem 0; font-size: 0.9em; color: var(--color-mocha); }
+  input[type=text], input[type=password], input[type=number], input:not([type]),
+  select, textarea {
+    padding: 0.5rem 0.75rem;
+    font: inherit; font-size: 0.95em;
+    border: 1.5px solid var(--color-frost);
+    border-radius: var(--radius-md);
+    width: 100%;
+    background: var(--color-ivory);
+    color: var(--color-chocolate);
+    transition: all 0.2s;
+    outline: none;
+    }
+  input:focus, select:focus, textarea:focus {
+    border-color: var(--color-sapphire);
+    box-shadow: 0 0 0 3px var(--color-sapphire-glow);
+    background: var(--color-snow);
+    }
+  input::placeholder { color: var(--color-fawn); }
+  input[type=checkbox] {
+    accent-color: var(--color-sapphire);
+    width: 16px; height: 16px;
+    vertical-align: middle; margin-right: 0.35rem;
+    }
+
+  /* --- buttons ---
+     Primary-CTA styling applies ONLY to form submits and explicit
+     .btn-primary opt-ins. Bare <button type="button"> (icons, menu items,
+     toggles) keeps Tailwind's preflight (transparent bg + inherited text)
+     so their per-instance Tailwind classes don't fight a global sapphire
+     background. */
+  button[type='submit']:not(.unstyled),
+  .btn-primary {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
+    padding: 0.5rem 1.25rem;
+    font: inherit; font-size: 0.92em; font-weight: 600; letter-spacing: 0.01em;
+    border: none; border-radius: var(--radius-md); cursor: pointer;
+    transition: all 0.2s;
+    background: var(--color-sapphire); color: var(--color-snow);
+    }
+  button[type='submit']:not(.unstyled):hover,
+  .btn-primary:hover {
+    background: var(--color-sapphire-deep);
+    color: var(--color-snow);
+    box-shadow: var(--shadow-baziu-md);
+    transform: translateY(-1px);
+    }
+  button[type='submit']:not(.unstyled):active,
+  .btn-primary:active { transform: translateY(0); }
+  button[type='submit']:not(.unstyled):disabled,
+  button[type='submit']:not(.unstyled)[disabled],
+  .btn-primary:disabled,
+  .btn-primary[disabled] {
+    opacity: 0.5; cursor: not-allowed;
+    transform: none; box-shadow: none;
+    }
+  .ghost-btn {
+    display: inline-flex; align-items: center; gap: 0.3rem;
+    background: transparent; color: var(--color-mocha);
+    border: 1.5px solid var(--color-frost);
+    padding: 0.35rem 0.85rem; font: inherit; font-weight: 500; font-size: 0.92em;
+    border-radius: var(--radius-md); cursor: pointer;
+    transition: all 0.2s;
+    }
+  .ghost-btn:hover {
+    border-color: var(--color-sapphire-light); color: var(--color-sapphire);
+    background: var(--color-sapphire-glow);
+    }
+  .ghost-btn:disabled, .ghost-btn[disabled] {
+    opacity: 0.5; cursor: not-allowed;
+    }
+
+  /* --- tables --- */
+  table {
+    width: 100%; border-collapse: separate; border-spacing: 0;
+    margin: 1rem 0; background: var(--color-snow);
+    border: 1px solid var(--color-frost); border-radius: var(--radius-lg); overflow: hidden;
+    }
+  thead { background: var(--color-ivory); }
+  th {
+    text-align: left; padding: 0.65rem 1rem;
+    font-size: 0.82em; font-weight: 600; text-transform: uppercase;
+    letter-spacing: 0.06em; color: var(--color-mocha-light);
+    border-bottom: 1px solid var(--color-frost);
+    }
+  td {
+    padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-frost);
+    vertical-align: middle; font-size: 0.93em;
+    }
+  tr:last-child td { border-bottom: none; }
+  tbody tr { transition: background 0.2s; }
+  tbody tr:hover { background: var(--color-sapphire-glow); }
+
+  /* --- markdown (chat output) ---
+     `marked` produces standard HTML (<p>/<h*>/<ul>/<code>/<pre>/<blockquote>);
+     Tailwind preflight strips margins + list markers, so without these rules
+     the chat reads as flat plain text. Scoped under .md-content so we don't
+     bleed into form labels or other authored markup. */
+  .md-content > * + * { margin-top: 0.65em; }
+  .md-content h1, .md-content h2, .md-content h3,
+  .md-content h4, .md-content h5, .md-content h6 {
+    font-family: var(--font-serif);
+    font-weight: 600;
+    color: var(--color-chocolate);
+    line-height: 1.3;
+    margin-top: 1.1em;
+    }
+  .md-content h1 { font-size: 1.45em; }
+  .md-content h2 { font-size: 1.25em; }
+  .md-content h3 { font-size: 1.1em; }
+  .md-content h4, .md-content h5, .md-content h6 { font-size: 1em; }
+  .md-content p { line-height: 1.55; }
+  .md-content ul, .md-content ol {
+    padding-left: 1.5em;
+    line-height: 1.55;
+    }
+  .md-content ul { list-style: disc; }
+  .md-content ol { list-style: decimal; }
+  .md-content li + li { margin-top: 0.25em; }
+  .md-content li > ul, .md-content li > ol { margin-top: 0.25em; }
+  .md-content a {
+    color: var(--color-sapphire);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    }
+  .md-content a:hover { color: var(--color-sapphire-deep); }
+  .md-content strong { font-weight: 600; color: var(--color-chocolate); }
+  .md-content em { font-style: italic; }
+  .md-content code {
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: 0.88em;
+    padding: 0.1em 0.35em;
+    background: var(--color-frost);
+    border-radius: var(--radius-sm, 4px);
+    color: var(--color-chocolate);
+    }
+  .md-content pre {
+    margin: 0.7em 0;
+    padding: 0.75rem 1rem;
+    background: var(--color-ivory);
+    border: 1px solid var(--color-frost);
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    font-size: 0.88em;
+    line-height: 1.5;
+    }
+  .md-content pre code {
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+    font-size: inherit;
+    }
+  .md-content blockquote {
+    border-left: 3px solid var(--color-frost);
+    padding-left: 0.9rem;
+    color: var(--color-mocha-light);
+    font-style: italic;
+    }
+  .md-content hr {
+    border: none;
+    border-top: 1px solid var(--color-frost);
+    margin: 1em 0;
+    }
+  .md-content table {
+    margin: 0.5em 0;
+    border-collapse: collapse;
+    font-size: 0.93em;
+    }
+  .md-content th, .md-content td {
+    padding: 0.4rem 0.7rem;
+    border: 1px solid var(--color-frost);
+    text-align: left;
+    }
+  .md-content th {
+    background: var(--color-frost);
+    font-weight: 600;
+    }
+  .md-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm, 4px); }
+
+  /* --- cards --- */
+  .card {
+    background: var(--color-snow);
+    border: 1px solid var(--color-frost);
+    border-radius: var(--radius-lg);
+    padding: 1.5rem;
+    margin: 1.25rem 0;
+    box-shadow: var(--shadow-baziu-sm);
+    transition: box-shadow 0.2s;
+    }
+  .card:hover { box-shadow: var(--shadow-baziu-md); }
+  .card h3 {
+    font-family: var(--font-body);
+    font-weight: 600; font-size: 0.92em;
+    text-transform: uppercase; letter-spacing: 0.06em;
+    color: var(--color-mocha-light); margin-bottom: 1rem;
+    }
+
+  /* --- helpers --- */
+  .muted { color: var(--color-mocha-light); font-size: 0.9em; }
+  .err {
+    color: var(--destructive); padding: 0.75rem 1rem;
+    background: color-mix(in srgb, var(--destructive) 12%, transparent);
+    border: 1px solid color-mix(in srgb, var(--destructive) 25%, transparent);
+    border-radius: var(--radius-md);
+    font-size: 0.92em; margin-bottom: 1rem;
+    }
+}

package/apps/web/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*", "vite.config.ts", "*.ts", "*.tsx"],
+  "exclude": ["node_modules", "dist", ".output", ".tanstack", ".nitro"]
+}

package/apps/web/vite.config.ts

@@ -0,0 +1,25 @@
+import { fileURLToPath } from 'node:url'
+import tailwindcss from '@tailwindcss/vite'
+import { tanstackStart } from '@tanstack/react-start/plugin/vite'
+import viteReact from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+// Plugin order matters: tailwindcss → tanstackStart → viteReact. The Start
+// plugin auto-includes the router file-based codegen, so no separate
+// `@tanstack/react-router/plugin/vite` import.
+export default defineConfig({
+  server: {
+    // The daemon owns 4321; web2 binds 4322 by default. WEB_HOST/WEB_PORT
+    // override at boot — kept symmetric with apps/web's config.
+    host: process.env.WEB_HOST ?? '127.0.0.1',
+    port: Number(process.env.WEB_PORT ?? 4322),
+  },
+  resolve: {
+    alias: {
+      // Mirrors the tsconfig `@/*` paths so shadcn-style `@/components/...`
+      // imports resolve identically in TS-check, dev, and build.
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  plugins: [tailwindcss(), tanstackStart(), viteReact()],
+})

package/biome.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
+  "files": {
+    "includes": ["**", "!**/node_modules", "!**/dist", "!apps/web", "!apps/mobile"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "linter": {
+    "enabled": true,
+    "rules": { "recommended": true }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingCommas": "all"
+    }
+  }
+}