@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/styles/globals.css

@@ -0,0 +1,230 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/noto-sans";
+
+@custom-variant dark (&:is(.dark *));
+/* Generate the classes used by the framework packages — node_modules is skipped by Tailwind by
+   default, so the admin + plugins need this. Your own src/ is auto-detected by the Vite plugin. */
+@source "../../node_modules/@saena-io/*/src/**/*.{ts,tsx}";
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --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: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --font-sans: "Noto Sans Variable", sans-serif;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.148 0.004 228.8);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.148 0.004 228.8);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.148 0.004 228.8);
+  --primary: oklch(0.511 0.096 186.391);
+  --primary-foreground: oklch(0.984 0.014 180.72);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.963 0.002 197.1);
+  --muted-foreground: oklch(0.56 0.021 213.5);
+  --accent: oklch(0.963 0.002 197.1);
+  --accent-foreground: oklch(0.218 0.008 223.9);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.925 0.005 214.3);
+  --input: oklch(0.925 0.005 214.3);
+  --ring: oklch(0.723 0.014 214.4);
+  --chart-1: oklch(0.855 0.138 181.071);
+  --chart-2: oklch(0.704 0.14 182.503);
+  --chart-3: oklch(0.6 0.118 184.704);
+  --chart-4: oklch(0.511 0.096 186.391);
+  --chart-5: oklch(0.437 0.078 188.216);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.987 0.002 197.1);
+  --sidebar-foreground: oklch(0.148 0.004 228.8);
+  --sidebar-primary: oklch(0.6 0.118 184.704);
+  --sidebar-primary-foreground: oklch(0.984 0.014 180.72);
+  --sidebar-accent: oklch(0.963 0.002 197.1);
+  --sidebar-accent-foreground: oklch(0.218 0.008 223.9);
+  --sidebar-border: oklch(0.925 0.005 214.3);
+  --sidebar-ring: oklch(0.723 0.014 214.4);
+}
+
+.dark {
+  --background: oklch(0.148 0.004 228.8);
+  --foreground: oklch(0.987 0.002 197.1);
+  --card: oklch(0.218 0.008 223.9);
+  --card-foreground: oklch(0.987 0.002 197.1);
+  --popover: oklch(0.218 0.008 223.9);
+  --popover-foreground: oklch(0.987 0.002 197.1);
+  --primary: oklch(0.437 0.078 188.216);
+  --primary-foreground: oklch(0.984 0.014 180.72);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.275 0.011 216.9);
+  --muted-foreground: oklch(0.723 0.014 214.4);
+  --accent: oklch(0.275 0.011 216.9);
+  --accent-foreground: oklch(0.987 0.002 197.1);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.56 0.021 213.5);
+  --chart-1: oklch(0.855 0.138 181.071);
+  --chart-2: oklch(0.704 0.14 182.503);
+  --chart-3: oklch(0.6 0.118 184.704);
+  --chart-4: oklch(0.511 0.096 186.391);
+  --chart-5: oklch(0.437 0.078 188.216);
+  --sidebar: oklch(0.218 0.008 223.9);
+  --sidebar-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-primary: oklch(0.704 0.14 182.503);
+  --sidebar-primary-foreground: oklch(0.277 0.046 192.524);
+  --sidebar-accent: oklch(0.275 0.011 216.9);
+  --sidebar-accent-foreground: oklch(0.987 0.002 197.1);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.56 0.021 213.5);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+/* Code-block syntax highlighting. The rich-text editor's CodeBlockPlugin (lowlight/highlight.js) decorates
+   tokens with `hljs-*` scope classes; these rules color them. Scoped to `.saena-hljs` (the <code> inside a
+   code block) so they never leak, and driven by per-theme variables for light/dark parity. */
+:root {
+  --hl-comment: oklch(0.55 0.02 250);
+  --hl-keyword: oklch(0.55 0.2 18);
+  --hl-string: oklch(0.5 0.13 150);
+  --hl-number: oklch(0.55 0.15 250);
+  --hl-function: oklch(0.55 0.2 300);
+  --hl-type: oklch(0.58 0.15 60);
+  --hl-tag: oklch(0.5 0.15 150);
+  --hl-attr: oklch(0.55 0.15 250);
+  --hl-variable: oklch(0.55 0.15 35);
+  --hl-meta: oklch(0.55 0.02 250);
+}
+
+.dark {
+  --hl-comment: oklch(0.62 0.02 250);
+  --hl-keyword: oklch(0.75 0.16 18);
+  --hl-string: oklch(0.82 0.1 200);
+  --hl-number: oklch(0.78 0.13 250);
+  --hl-function: oklch(0.78 0.13 300);
+  --hl-type: oklch(0.78 0.13 60);
+  --hl-tag: oklch(0.82 0.16 150);
+  --hl-attr: oklch(0.78 0.13 250);
+  --hl-variable: oklch(0.78 0.13 35);
+  --hl-meta: oklch(0.62 0.02 250);
+}
+
+.saena-hljs {
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--hl-comment);
+    font-style: italic;
+  }
+  .hljs-keyword,
+  .hljs-selector-tag,
+  .hljs-literal,
+  .hljs-doctag {
+    color: var(--hl-keyword);
+  }
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-meta-string {
+    color: var(--hl-string);
+  }
+  .hljs-number,
+  .hljs-bullet,
+  .hljs-symbol,
+  .hljs-link {
+    color: var(--hl-number);
+  }
+  .hljs-title,
+  .hljs-title.function_,
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-id {
+    color: var(--hl-function);
+  }
+  .hljs-built_in,
+  .hljs-type,
+  .hljs-title.class_,
+  .hljs-class .hljs-title,
+  .hljs-selector-class {
+    color: var(--hl-type);
+  }
+  .hljs-tag,
+  .hljs-template-tag {
+    color: var(--hl-tag);
+  }
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-property,
+  .hljs-params,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo {
+    color: var(--hl-attr);
+  }
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-subst {
+    color: var(--hl-variable);
+  }
+  .hljs-meta,
+  .hljs-deletion {
+    color: var(--hl-meta);
+  }
+  .hljs-emphasis {
+    font-style: italic;
+  }
+  .hljs-strong {
+    font-weight: 600;
+  }
+}

package/template/base/vite.config.ts

@@ -1,8 +1,22 @@
+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, loadEnv } from 'vite';
 
+// You own the shadcn components in src/components/ui (and `cn` in src/lib). These aliases make the
+// published admin + plugins render YOUR components + styles instead of @saena-io/ui's — so the whole
+// app shares one design system you can edit. Single-segment only, so multi-segment paths you DON'T own
+// (e.g. components/rich-text/*) fall through to the package. Edit a component freely; re-fetch the
+// latest from @saena-io/ui when you want to update it.
+const src = fileURLToPath(new URL('./src', import.meta.url)).replace(/\\/g, '/');
+const ownUiAliases = [
+  { find: /^@saena-io\/ui\/components\/rich-text\/(.+)$/, replacement: `${src}/components/ui/rich-text/$1` },
+  { find: /^@saena-io\/ui\/components\/(?!rich-text)([^/]+)$/, replacement: `${src}/components/ui/$1` },
+  { find: '@saena-io/ui/lib/utils', replacement: `${src}/lib/utils` },
+  { find: /^@saena-io\/ui\/hooks\/(.+)$/, replacement: `${src}/hooks/$1` },
+];
+
 export default defineConfig(({ mode }) => {
   // Load this project's .env into process.env so the SSR server (the auth handler + db) sees
   // DATABASE_URL / BETTER_AUTH_SECRET. Server-only — only VITE_-prefixed vars reach the client
@@ -16,7 +30,7 @@ export default defineConfig(({ mode }) => {
     // Production server (`bun run start` → `vite preview`) binds the platform's PORT (e.g. Railway) on
     // 0.0.0.0 so the deploy is reachable.
     preview: { port, host: true },
-    resolve: { tsconfigPaths: true },
+    resolve: { tsconfigPaths: true, alias: ownUiAliases },
     // The @saena-io/* packages ship TypeScript source (consumed via Vite). Bundle them for SSR so Vite
     // transpiles them instead of treating them as pre-built external CommonJS.
     ssr: { noExternal: [/@saena-io\//] },